Herramientas ›

Generador de pedidos de tema

Elige cómo quieres que se sienta tu sitio. El pedido de la derecha sigue las reglas de temas v1.5, así que la IA crea un archivo que puedes subir enseguida.

Tu pedido

[Estilo deseado: Klasik konser salonu, fondo #f6f3ee, color de acento #d2462f, esquinas un poco redondeadas (unos 8px), un tema claro (texto oscuro sobre fondo claro). Usa exactamente estos colores para --aml-bg y --aml-accent / --aml-accent-fill.]

Con el estilo de arriba, crea un archivo HTML de "skin" (tema) para mi sitio de música. Sigue estas reglas al pie de la letra.

[Reglas]
1. Un solo archivo HTML. Pon todo el CSS en un único <style> dentro de <head>. Que sea corto: 30KB o menos.
2. No permitido: <script>, atributos on…= como onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), imágenes externas ni fuentes web externas. Si necesitas un patrón, usa un degradado CSS.
3. El sitio dibuja las filas de canciones, el menú, el reproductor, los álbumes y el libro de visitas. Yo solo elijo colores y disposición. Usa exactamente 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="(color de fondo)"><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}} y {{player}} deben aparecer exactamente una vez cada uno. Nunca escribas nombres de marcadores dentro de comentarios.)
4. En :root dentro de <style>, define todas estas variables de color (cambiando solo estas se recolorea todo el sitio):
   --aml-bg (fondo de la página) --aml-panel (filas de canciones, tarjetas) --aml-panel-2 (celdas pulsadas) --aml-text (texto) --aml-muted (texto secundario)
   --aml-line (líneas finas) --aml-glass (barra de menú y reproductor, semitransparente: rgb(… / .74))
   --aml-accent (texto y líneas de acento) --aml-accent-fill (fondo de botones) --aml-accent-ink (texto de botones)
   --aml-hero-a (cuánto color del perfil se mezcla en la cabecera: 8% en claro, 20% en oscuro) --aml-art-shadow (sombra del álbum o none)
   --aml-viz-color (barras en reproducción) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (ventana de letras) --aml-footer-color --aml-social-color --aml-ext-color
   Pon una lista de fuentes del dispositivo en --aml-font (por ejemplo: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. El texto debe contrastar con su fondo a 4.5:1 o más (nada de texto gris sobre gris). El texto secundario (--aml-muted) también a 4.5:1 o más sobre --aml-panel.
6. Para decorar más, añade CSS a estas clases (solo la forma: no muevas ni cambies mucho el tamaño de las cosas):
   .aml-hero (cabecera) .aml-hero-name (nombre del sitio) .aml-profile (foto redonda) .aml-btn-primary (botón de reproducir todo)
   .aml-bar (barra de menú) .aml-menu-item / .aml-menu-item.is-active (pastillas del menú)
   .aml-section-title (títulos) .aml-track (tarjeta de fila de canción) .aml-track.is-playing (fila en reproducción) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (portada del álbum) .aml-gb-form .aml-gb-post (libro de visitas) .aml-footer
   No cambies la posición ni el tamaño del reproductor (.aml-player) ni del visualizador (.aml-viz): solo los colores.
7. Asegúrate de que se vea bien en un teléfono (390px de ancho). El diseño incorporado ya se adapta a teléfonos, así que no fijes anchos.

Muestra solo el archivo HTML terminado, en un único bloque de código.

Copia el pedido y pégalo en ChatGPT o Claude gratis.
Si la respuesta se corta, escribe “continúa”.
Guarda el código como archivo .html y revísalo: Verificador de temas
Súbelo en tu página de administración, en Temas.