Alat ›

Pembuat permintaan tema

Pilih suasana yang kamu inginkan untuk situsmu. Permintaan di sebelah kanan mengikuti aturan tema v1.5, jadi AI akan membuat file yang bisa langsung kamu unggah.

Permintaanmu

[Tampilan yang diinginkan: あたたかいアコースティックカフェ, latar #f6f3ee, warna aksen #d2462f, sudut sedikit bulat (sekitar 8px), tema terang (teks gelap di latar terang). Pakai warna persis ini untuk --aml-bg dan --aml-accent / --aml-accent-fill.]

Dengan tampilan di atas, buatkan satu file HTML "skin" (tema) untuk situs musikku. Ikuti aturan ini dengan tepat.

[Aturan]
1. Satu file HTML. Taruh semua CSS di satu <style> di dalam <head>. Buat singkat — 30KB atau kurang.
2. Tidak boleh: <script>, atribut on…= seperti onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), gambar eksternal atau font web eksternal. Jika perlu motif, pakai gradien CSS.
3. Situs yang menggambar baris lagu, menu, pemutar, album, dan buku tamu. Aku hanya memilih warna dan tata letak. Pakai kerangka ini persis:
   <!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="(warna latar)"><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}} dan {{player}} masing-masing harus muncul tepat satu kali. Jangan pernah menulis nama placeholder di dalam komentar.)
4. Di :root dalam <style>, tetapkan semua variabel warna ini (cukup mengubah ini untuk mewarnai ulang seluruh situs):
   --aml-bg (latar halaman) --aml-panel (baris lagu, kartu) --aml-panel-2 (sel yang ditekan) --aml-text (teks) --aml-muted (teks sekunder)
   --aml-line (garis tipis) --aml-glass (bilah menu dan pemutar, tembus pandang: rgb(… / .74))
   --aml-accent (teks dan garis aksen) --aml-accent-fill (latar tombol) --aml-accent-ink (teks tombol)
   --aml-hero-a (seberapa banyak warna profil dicampur ke header: 8% untuk terang, 20% untuk gelap) --aml-art-shadow (bayangan album atau none)
   --aml-viz-color (batang saat memutar) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (jendela lirik) --aml-footer-color --aml-social-color --aml-ext-color
   Tulis daftar font perangkat di --aml-font (misalnya: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. Kontras teks dengan latarnya harus 4.5:1 atau lebih (jangan teks abu-abu di atas abu-abu). Teks sekunder (--aml-muted) juga 4.5:1 atau lebih di atas --aml-panel.
6. Untuk menghias lebih, tambahkan CSS ke kelas-kelas ini (bentuk saja — jangan banyak memindah atau mengubah ukuran):
   .aml-hero (header) .aml-hero-name (nama situs) .aml-profile (foto bulat) .aml-btn-primary (tombol putar semua)
   .aml-bar (bilah menu) .aml-menu-item / .aml-menu-item.is-active (pil menu)
   .aml-section-title (judul) .aml-track (kartu baris lagu) .aml-track.is-playing (baris yang sedang diputar) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (gambar album) .aml-gb-form .aml-gb-post (buku tamu) .aml-footer
   Jangan ubah posisi atau ukuran pemutar (.aml-player) atau visualizer (.aml-viz) — hanya warnanya.
7. Pastikan tampilannya bagus di ponsel (lebar 390px). Desain bawaan sudah pas untuk ponsel, jadi jangan tetapkan lebar.

Tampilkan hanya file HTML yang sudah jadi, dalam satu blok kode.

Salin permintaan ini dan tempel ke ChatGPT atau Claude gratis.
Jika jawabannya terpotong, ketik “lanjutkan”.
Simpan kodenya sebagai file .html lalu periksa: Pemeriksa tema
Unggah di halaman adminmu, di bagian Tema.