Araçlar ›

Tema isteği hazırlayıcı

Sitenin nasıl hissettireceğini seç. Sağdaki istek, tema kuralları v1.5'e uyar; böylece AI hemen yükleyebileceğin bir dosya yapar.

İsteğin

[İstenen görünüm: Tối giản và gọn gàng, arka plan #f6f3ee, vurgu rengi #d2462f, hafif yuvarlak köşeler (yaklaşık 8px), açık tema (açık arka planda koyu yazı). --aml-bg ve --aml-accent / --aml-accent-fill için tam olarak bu renkleri kullan.]

Yukarıdaki görünümle müzik sitem için tek bir "tema" (skin) HTML dosyası yap. Bu kurallara tam olarak uy.

[Kurallar]
1. Tek bir HTML dosyası. Tüm CSS'i <head> içindeki tek bir <style> içine koy. Kısa tut — 30KB veya daha az.
2. Yasak: <script>, onclick gibi on…= öznitelikleri, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), dış resimler veya dış web yazı tipleri. Desen gerekirse CSS gradyanı kullan.
3. Şarkı satırlarını, menüyü, oynatıcıyı, albümleri ve ziyaretçi defterini site çizer. Ben sadece renkleri ve yerleşimi seçerim. Bu iskeleti aynen kullan:
   <!doctype html><html lang="{{lang}}"><head><meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="(arka plan rengi)"><title>{{site_name}}</title><style> … </style></head>
   <body class="aml-kit">
   {{banner}}
   {{hero}}
   <div class="aml-bar">{{menu}}{{lang_select}}</div>
   {{ad_top}}
   {{content}}
   {{footer}}
   {{player}}
   </body></html>
   ({{menu}}, {{content}} ve {{player}} her biri tam olarak bir kez geçmeli. Yer tutucu adlarını asla yorumların içine yazma.)
4. <style> içindeki :root'ta bu renk değişkenlerinin hepsini belirle (sadece bunları değiştirmek tüm sitenin rengini değiştirir):
   --aml-bg (sayfa arka planı) --aml-panel (şarkı satırları, kartlar) --aml-panel-2 (basılı hücreler) --aml-text (yazı) --aml-muted (ikincil yazı)
   --aml-line (ince çizgiler) --aml-glass (menü çubuğu ve oynatıcı, yarı saydam: rgb(… / .74))
   --aml-accent (vurgu yazısı ve çizgiler) --aml-accent-fill (düğme arka planı) --aml-accent-ink (düğme yazısı)
   --aml-hero-a (başlığa ne kadar profil rengi karışacağı: açıkta %8, koyuda %20) --aml-art-shadow (albüm gölgesi veya none)
   --aml-viz-color (çalan çubuklar) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (şarkı sözü penceresi) --aml-footer-color --aml-social-color --aml-ext-color
   --aml-font içine cihaz yazı tiplerinin bir listesini yaz (örneğin: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. Yazı, arka planıyla en az 4.5:1 kontrast oluşturmalı (gri üstüne gri yazı yok). İkincil yazı (--aml-muted) da --aml-panel üzerinde en az 4.5:1 olmalı.
6. Daha fazla süslemek için bu sınıflara CSS ekle (sadece biçim — öğelerin yerini ya da boyutunu fazla değiştirme):
   .aml-hero (başlık) .aml-hero-name (site adı) .aml-profile (yuvarlak fotoğraf) .aml-btn-primary (tümünü çal düğmesi)
   .aml-bar (menü çubuğu) .aml-menu-item / .aml-menu-item.is-active (menü hapları)
   .aml-section-title (başlıklar) .aml-track (şarkı satırı kartı) .aml-track.is-playing (çalan satır) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (albüm kapağı) .aml-gb-form .aml-gb-post (ziyaretçi defteri) .aml-footer
   Oynatıcının (.aml-player) ve görselleştiricinin (.aml-viz) yerini veya boyutunu değiştirme — sadece renkler.
7. Telefonda (390px genişlik) iyi göründüğünden emin ol. Yerleşik tasarım zaten telefona uyar, bu yüzden genişlikleri sabitleme.

Yalnızca bitmiş HTML dosyasını, tek bir kod bloğunda göster.

İsteği kopyala ve ücretsiz ChatGPT ya da Claude'a yapıştır.
Cevap yarıda kesilirse “devam et” yaz.
Kodu .html dosyası olarak kaydet ve kontrol et: Tema denetleyicisi
Yönetim sayfanda Temalar bölümüne yükle.