ตัวสร้างคำขอธีม

เลือกบรรยากาศที่อยากให้เว็บไซต์เป็น คำขอทางขวาเป็นไปตามกฎธีม v1.5 ดังนั้น AI จะสร้างไฟล์ที่อัปโหลดได้ทันที

บรรยากาศ

มินิมอลและสะอาดตา เทปคาสเซ็ตยุค 90 เมืองแสงนีออนยามค่ำคืน คาเฟ่อะคูสติกอบอุ่น สตูดิโอห้องนอนแนวโลไฟ หอแสดงดนตรีคลาสสิก เวที K-pop สดใส ป่าสงบกับสายฝน

สว่างหรือมืด สว่าง มืด

สี พื้นหลัง สีเน้น

มุม เหลี่ยม มนเล็กน้อย มนมาก

คำขอของคุณ

[หน้าตาที่ต้องการ: Home studio lo-fi, พื้นหลัง #f6f3ee, สีเน้น #d2462f, มุมมนเล็กน้อย (ประมาณ 8px), ธีมสว่าง (ตัวอักษรเข้มบนพื้นสว่าง) ใช้สีเหล่านี้ตรงตามนี้สำหรับ --aml-bg และ --aml-accent / --aml-accent-fill]

ใช้หน้าตาตามที่บอกไว้ด้านบน ช่วยทำไฟล์ HTML "skin" (ธีม) หนึ่งไฟล์สำหรับเว็บไซต์เพลงของฉัน ทำตามกฎเหล่านี้อย่างเคร่งครัด

[กฎ]
1. HTML ไฟล์เดียว ใส่ CSS ทั้งหมดไว้ใน <style> อันเดียวภายใน <head> ให้สั้น — 30KB หรือน้อยกว่า
2. ห้ามใช้: <script>, แอตทริบิวต์ on…= เช่น onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), รูปภาพภายนอก หรือเว็บฟอนต์ภายนอก ถ้าต้องการลวดลาย ให้ใช้ CSS gradient
3. เว็บไซต์จะวาดแถวเพลง เมนู เครื่องเล่น อัลบั้ม และสมุดเยี่ยมเอง ฉันเลือกแค่สีและการจัดวาง ใช้โครงนี้ตามนี้ทุกตัวอักษร:
   <!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="(สีพื้นหลัง)"><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}} และ {{player}} ต้องปรากฏอย่างละหนึ่งครั้งพอดี ห้ามเขียนชื่อ placeholder ไว้ในคอมเมนต์)
4. ใน :root ภายใน <style> ให้กำหนดตัวแปรสีทั้งหมดนี้ (เปลี่ยนแค่ตัวแปรเหล่านี้ก็เปลี่ยนสีทั้งเว็บไซต์ได้):
   --aml-bg (พื้นหลังหน้า) --aml-panel (แถวเพลง การ์ด) --aml-panel-2 (ช่องที่ถูกกด) --aml-text (ตัวอักษร) --aml-muted (ตัวอักษรรอง)
   --aml-line (เส้นบาง) --aml-glass (แถบเมนูและเครื่องเล่น แบบโปร่งแสง: rgb(… / .74))
   --aml-accent (ตัวอักษรและเส้นสีเน้น) --aml-accent-fill (พื้นหลังปุ่ม) --aml-accent-ink (ตัวอักษรบนปุ่ม)
   --aml-hero-a (ปริมาณสีโปรไฟล์ที่ผสมในส่วนหัว: 8% สำหรับธีมสว่าง, 20% สำหรับธีมมืด) --aml-art-shadow (เงาอัลบั้ม หรือ none)
   --aml-viz-color (แท่งขณะเล่นเพลง) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (หน้าต่างเนื้อเพลง) --aml-footer-color --aml-social-color --aml-ext-color
   ใส่รายชื่อฟอนต์ของอุปกรณ์ใน --aml-font (ตัวอย่าง: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif)
5. ตัวอักษรต้องมีคอนทราสต์กับพื้นหลัง 4.5:1 ขึ้นไป (ห้ามตัวอักษรเทาบนพื้นเทา) ตัวอักษรรอง (--aml-muted) ก็ต้อง 4.5:1 ขึ้นไปบน --aml-panel
6. ถ้าอยากตกแต่งเพิ่ม ให้เพิ่ม CSS ให้คลาสเหล่านี้ (เฉพาะรูปทรง — อย่าย้ายตำแหน่งหรือเปลี่ยนขนาดมาก):
   .aml-hero (ส่วนหัว) .aml-hero-name (ชื่อเว็บไซต์) .aml-profile (รูปวงกลม) .aml-btn-primary (ปุ่มเล่นทั้งหมด)
   .aml-bar (แถบเมนู) .aml-menu-item / .aml-menu-item.is-active (ปุ่มเมนูทรงแคปซูล)
   .aml-section-title (หัวข้อ) .aml-track (การ์ดแถวเพลง) .aml-track.is-playing (แถวที่กำลังเล่น) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (ภาพอัลบั้ม) .aml-gb-form .aml-gb-post (สมุดเยี่ยม) .aml-footer
   ห้ามเปลี่ยนตำแหน่งหรือขนาดของเครื่องเล่น (.aml-player) หรือวิชวลไลเซอร์ (.aml-viz) — เปลี่ยนได้แค่สี
7. ต้องดูดีบนโทรศัพท์ (กว้าง 390px) ดีไซน์ในตัวรองรับโทรศัพท์อยู่แล้ว จึงไม่ต้องกำหนดความกว้างตายตัว

แสดงเฉพาะไฟล์ HTML ที่เสร็จสมบูรณ์ ในบล็อกโค้ดเดียว

คัดลอกคำขอแล้ววางใน ChatGPT หรือ Claude เวอร์ชันฟรี
ถ้าคำตอบถูกตัดกลางคัน ให้พิมพ์ “ต่อ”
บันทึกโค้ดเป็นไฟล์ .html แล้วตรวจสอบ: ตัวตรวจธีม
อัปโหลดในหน้าผู้ดูแล ที่แท็บธีม