Tools ›

Skin-Anfrage-Generator

Wähle, wie sich deine Seite anfühlen soll. Die Anfrage rechts folgt den Skin-Regeln v1.5, damit die KI eine Datei macht, die du sofort hochladen kannst.

Deine Anfrage

[Gewünschter Look: Sala da concerto classica, Hintergrund #f6f3ee, Akzentfarbe #d2462f, leicht abgerundete Ecken (etwa 8px), ein helles Theme (dunkler Text auf hellem Hintergrund). Verwende genau diese Farben für --aml-bg und --aml-accent / --aml-accent-fill.]

Erstelle mit dem oben beschriebenen Look eine einzige „Skin“-HTML-Datei für meine Musikseite. Halte dich genau an diese Regeln.

[Regeln]
1. Eine HTML-Datei. Das gesamte CSS kommt in ein einziges <style> im <head>. Halte sie kurz — höchstens 30KB.
2. Nicht erlaubt: <script>, on…=-Attribute wie onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), externe Bilder oder externe Webfonts. Für Muster nimm einen CSS-Verlauf (gradient).
3. Die Seite zeichnet Songzeilen, Menü, Player, Alben und Gästebuch selbst. Ich wähle nur Farben und Layout. Verwende genau dieses Grundgerüst:
   <!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="(Hintergrundfarbe)"><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}} und {{player}} müssen jeweils genau einmal vorkommen. Schreibe Platzhalternamen nie in Kommentare.)
4. Setze in :root innerhalb von <style> alle diese Farbvariablen (wer nur diese ändert, färbt die ganze Seite um):
   --aml-bg (Seitenhintergrund) --aml-panel (Songzeilen, Karten) --aml-panel-2 (gedrückte Felder) --aml-text (Text) --aml-muted (Nebentext)
   --aml-line (dünne Linien) --aml-glass (Menüleiste und Player, durchscheinend: rgb(… / .74))
   --aml-accent (Akzent-Text und -Linien) --aml-accent-fill (Button-Hintergrund) --aml-accent-ink (Button-Text)
   --aml-hero-a (wie viel Profilfarbe in den Kopfbereich gemischt wird: 8% bei hell, 20% bei dunkel) --aml-art-shadow (Album-Schatten oder none)
   --aml-viz-color (Balken beim Abspielen) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (Songtext-Fenster) --aml-footer-color --aml-social-color --aml-ext-color
   Schreibe eine Liste von Geräteschriften in --aml-font (zum Beispiel: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. Text muss sich mit mindestens 4.5:1 vom Hintergrund abheben (kein grauer Text auf Grau). Auch Nebentext (--aml-muted) mindestens 4.5:1 auf --aml-panel.
6. Für mehr Deko ergänze CSS bei diesen Klassen (nur die Form — nichts stark verschieben oder in der Größe ändern):
   .aml-hero (Kopfbereich) .aml-hero-name (Seitenname) .aml-profile (rundes Foto) .aml-btn-primary (Alle-abspielen-Button)
   .aml-bar (Menüleiste) .aml-menu-item / .aml-menu-item.is-active (Menü-Pillen)
   .aml-section-title (Überschriften) .aml-track (Songzeilen-Karte) .aml-track.is-playing (laufende Zeile) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (Albumcover) .aml-gb-form .aml-gb-post (Gästebuch) .aml-footer
   Position und Größe des Players (.aml-player) und des Visualizers (.aml-viz) nicht ändern — nur Farben.
7. Achte darauf, dass es auf dem Handy (390px breit) gut aussieht. Das eingebaute Design passt schon aufs Handy, also keine festen Breiten setzen.

Zeig nur die fertige HTML-Datei, in einem einzigen Codeblock.

Kopiere die Anfrage und füge sie in das kostenlose ChatGPT oder Claude ein.
Wenn die Antwort abbricht, schreib „weiter“.
Speichere den Code als .html-Datei und prüfe ihn: Skin-Checker
Lade ihn auf deiner Admin-Seite unter Skins hoch.