Ferramentas ›

Gerador de pedidos de tema

Escolha a cara que seu site deve ter. O pedido ao lado segue as regras de temas v1.5, então a IA cria um arquivo que você pode enviar na hora.

Seu pedido

[Visual desejado: 90'lar kaset, fundo #f6f3ee, cor de destaque #d2462f, cantos levemente arredondados (cerca de 8px), um tema claro (texto escuro em fundo claro). Use exatamente estas cores em --aml-bg e --aml-accent / --aml-accent-fill.]

Com o visual acima, crie um arquivo HTML de "skin" (tema) para o meu site de música. Siga estas regras à risca.

[Regras]
1. Um único arquivo HTML. Coloque todo o CSS em um único <style> dentro de <head>. Mantenha curto — 30KB ou menos.
2. Não permitido: <script>, atributos on…= como onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), imagens externas ou fontes web externas. Se precisar de uma estampa, use um gradiente CSS.
3. O site desenha as linhas de músicas, o menu, o player, os álbuns e o livro de visitas. Eu só escolho cores e layout. Use exatamente este esqueleto:
   <!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="(cor de fundo)"><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}} devem aparecer exatamente uma vez cada. Nunca escreva nomes de marcadores dentro de comentários.)
4. Em :root dentro de <style>, defina todas estas variáveis de cor (mudando só elas, o site inteiro muda de cor):
   --aml-bg (fundo da página) --aml-panel (linhas de músicas, cartões) --aml-panel-2 (células pressionadas) --aml-text (texto) --aml-muted (texto secundário)
   --aml-line (linhas finas) --aml-glass (barra de menu e player, translúcidos: rgb(… / .74))
   --aml-accent (texto e linhas de destaque) --aml-accent-fill (fundo dos botões) --aml-accent-ink (texto dos botões)
   --aml-hero-a (quanto da cor do perfil misturar no cabeçalho: 8% no claro, 20% no escuro) --aml-art-shadow (sombra do álbum ou none)
   --aml-viz-color (barras tocando) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (janela de letras) --aml-footer-color --aml-social-color --aml-ext-color
   Coloque uma lista de fontes do dispositivo em --aml-font (por exemplo: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. O texto deve ter contraste de 4.5:1 ou mais com o fundo (nada de texto cinza sobre cinza). O texto secundário (--aml-muted) também 4.5:1 ou mais sobre --aml-panel.
6. Para decorar mais, adicione CSS a estas classes (só o formato — não mova nem redimensione muito as coisas):
   .aml-hero (cabeçalho) .aml-hero-name (nome do site) .aml-profile (foto redonda) .aml-btn-primary (botão de tocar tudo)
   .aml-bar (barra de menu) .aml-menu-item / .aml-menu-item.is-active (pílulas do menu)
   .aml-section-title (títulos) .aml-track (cartão da linha de música) .aml-track.is-playing (linha tocando) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (capa do álbum) .aml-gb-form .aml-gb-post (livro de visitas) .aml-footer
   Não mude a posição nem o tamanho do player (.aml-player) nem do visualizador (.aml-viz) — só as cores.
7. Garanta que fique bonito no celular (390px de largura). O design embutido já se ajusta ao celular, então não fixe larguras.

Mostre só o arquivo HTML pronto, em um único bloco de código.

Copie o pedido e cole no ChatGPT ou no Claude grátis.
Se a resposta for cortada, digite “continue”.
Salve o código como arquivo .html e confira: Verificador de temas
Envie na sua página de administração, em Temas.