टूल ›

थीम अनुरोध बनाने वाला

चुनें कि आपकी साइट कैसी लगे। दाईं ओर का अनुरोध थीम नियम v1.5 का पालन करता है, इसलिए AI ऐसी फ़ाइल बनाता है जिसे आप तुरंत अपलोड कर सकें।

मूड

सादा और साफ़ 90 के दशक का कैसेट रात में नियॉन शहर गर्मजोशी भरा अकूस्टिक कैफ़े लो-फ़ाई बेडरूम स्टूडियो शास्त्रीय कॉन्सर्ट हॉल चमकदार K-pop मंच शांत जंगल और बारिश

हल्का या गहरा हल्का गहरा

रंग पृष्ठभूमि मुख्य रंग

कोने चौकोर थोड़े गोल बहुत गोल

आपका अनुरोध

[चाहा गया रूप: सादा और साफ़, पृष्ठभूमि #f6f3ee, मुख्य रंग #d2462f, थोड़े गोल कोने (लगभग 8px), हल्की थीम (हल्की पृष्ठभूमि पर गहरा टेक्स्ट)। --aml-bg और --aml-accent / --aml-accent-fill के लिए ठीक यही रंग इस्तेमाल करें।]

ऊपर बताए रूप के हिसाब से मेरी म्यूज़िक साइट के लिए एक "skin" (थीम) HTML फ़ाइल बनाइए। इन नियमों का ठीक-ठीक पालन करें।

[नियम]
1. एक HTML फ़ाइल। सारा CSS <head> के अंदर एक ही <style> में रखें। छोटा रखें — 30KB या कम।
2. मना है: <script>, onclick जैसे on…= एट्रिब्यूट, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), बाहरी इमेज या बाहरी वेब फ़ॉन्ट। अगर पैटर्न चाहिए, तो CSS ग्रेडिएंट इस्तेमाल करें।
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}} हर एक ठीक एक बार आना चाहिए। कमेंट के अंदर कभी भी प्लेसहोल्डर के नाम न लिखें।)
4. <style> के अंदर :root में ये सभी रंग वेरिएबल तय करें (सिर्फ़ इन्हें बदलने से पूरी साइट का रंग बदल जाता है):
   --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) भी --aml-panel पर 4.5:1 या ज़्यादा हो।
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 में चिपकाएँ।
अगर जवाब बीच में कट जाए, तो “continue” लिखें।
कोड को .html फ़ाइल के रूप में सेव करें और जाँचें: थीम जाँचक
इसे अपने एडमिन पेज में थीम सेक्शन में अपलोड करें।