Strumenti ›

Generatore di richieste per temi

Scegli che sensazione deve dare il tuo sito. La richiesta a destra segue le regole dei temi v1.5, così l'AI crea un file che puoi caricare subito.

La tua richiesta

[Aspetto desiderato: Phòng thu lo-fi tại gia, sfondo #f6f3ee, colore principale #d2462f, angoli leggermente arrotondati (circa 8px), stile chiaro (testo scuro su sfondo chiaro). Usa esattamente questi colori per --aml-bg e --aml-accent / --aml-accent-fill.]

Con l'aspetto qui sopra, crea un file HTML "skin" (tema) per il mio sito musicale. Segui queste regole alla lettera.

[Regole]
1. Un solo file HTML. Metti tutto il CSS in un unico <style> dentro <head>. Tienilo breve: 30KB o meno.
2. Vietati: <script>, attributi on…= come onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), immagini esterne o web font esterni. Se serve un motivo decorativo, usa un gradiente CSS.
3. Il sito disegna le righe dei brani, il menu, il lettore, gli album e il guestbook. Io scelgo solo colori e disposizione. Usa esattamente questo scheletro:
   <!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="(colore di sfondo)"><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}} e {{player}} devono comparire ognuno esattamente una volta. Non scrivere mai i nomi dei segnaposto dentro i commenti.)
4. In :root dentro <style>, imposta tutte queste variabili di colore (cambiando solo queste si ricolora tutto il sito):
   --aml-bg (sfondo della pagina) --aml-panel (righe dei brani, schede) --aml-panel-2 (celle premute) --aml-text (testo) --aml-muted (testo secondario)
   --aml-line (linee sottili) --aml-glass (barra del menu e lettore, semitrasparenti: rgb(… / .74))
   --aml-accent (testo e linee in evidenza) --aml-accent-fill (sfondo dei pulsanti) --aml-accent-ink (testo dei pulsanti)
   --aml-hero-a (quanto colore del profilo mescolare nell'intestazione: 8% per lo stile chiaro, 20% per lo scuro) --aml-art-shadow (ombra dell'album o none)
   --aml-viz-color (barre durante la riproduzione) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (finestra del testo) --aml-footer-color --aml-social-color --aml-ext-color
   Metti un elenco di font del dispositivo in --aml-font (per esempio: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. Il testo deve avere un contrasto di almeno 4.5:1 con il suo sfondo (niente grigio su grigio). Anche il testo secondario (--aml-muted) almeno 4.5:1 su --aml-panel.
6. Per decorare di più, aggiungi CSS a queste classi (solo la forma: non spostare né ridimensionare troppo gli elementi):
   .aml-hero (intestazione) .aml-hero-name (nome del sito) .aml-profile (foto rotonda) .aml-btn-primary (pulsante riproduci tutto)
   .aml-bar (barra del menu) .aml-menu-item / .aml-menu-item.is-active (pulsanti del menu)
   .aml-section-title (titoli) .aml-track (scheda della riga del brano) .aml-track.is-playing (riga in riproduzione) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (copertina dell'album) .aml-gb-form .aml-gb-post (guestbook) .aml-footer
   Non cambiare la posizione o la dimensione del lettore (.aml-player) o del visualizzatore (.aml-viz): solo i colori.
7. Assicurati che stia bene su un telefono (larghezza 390px). Il design integrato si adatta già ai telefoni, quindi non fissare le larghezze.

Mostra solo il file HTML finito, in un unico blocco di codice.

Copia la richiesta e incollala in ChatGPT o Claude gratuiti.
Se la risposta si interrompe, scrivi “continua”.
Salva il codice come file .html e controllalo: Verificatore di temi
Caricalo nella tua pagina di amministrazione, nella sezione Temi.