libretechandClaude Opus 4.7
82d9882319
Restructure the single-file demo into a Vite project: - src/logo.js: framework-agnostic core (shadow-layer geometry, inline text-shadow, generated CSS snippet, defaults, font list) - src/main.js: DOM wiring (state read, live render, copy, native reset) - src/style.css, index.html: markup + styles with the accessibility fixes (labels, aria, <details>/<summary>, <form> reset, focus rings) The original single-file version lives on the 'html' branch. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
107 lines
4.6 KiB
HTML
107 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Logo-Generator</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Bowlby+One&family=Bebas+Neue&family=Bungee&family=Passion+One:wght@900&family=Ultra&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="logo" id="logo">LIBRE
|
|
TECH</div>
|
|
|
|
<details class="disclosure" id="panel" open>
|
|
<summary class="toggle-panel">Panel ein/aus</summary>
|
|
|
|
<div class="panel">
|
|
<h1>Logo-Generator</h1>
|
|
|
|
<form id="logoForm">
|
|
<h2>Inhalt</h2>
|
|
<p class="hint" id="hint-text">Mehrere Zeilen mit Enter trennen.</p>
|
|
<textarea id="text" rows="2" aria-label="Logo-Text" aria-describedby="hint-text">LIBRE
|
|
TECH</textarea>
|
|
|
|
<h2>Schrift</h2>
|
|
<select id="font" aria-label="Schriftart">
|
|
<option value="Anton">Anton</option>
|
|
<option value="Bowlby One">Bowlby One</option>
|
|
<option value="Bebas Neue">Bebas Neue</option>
|
|
<option value="Bungee">Bungee</option>
|
|
<option value="Passion One">Passion One</option>
|
|
<option value="Ultra">Ultra</option>
|
|
<option value="Impact">Impact (System)</option>
|
|
</select>
|
|
<div class="row-2col">
|
|
<div>
|
|
<label for="fs">Größe: <span class="val" id="v-fs">18</span>vw</label>
|
|
<input type="range" id="fs" min="6" max="30" step="0.5" value="18">
|
|
</div>
|
|
<div>
|
|
<label for="lh">Zeilenabstand: <span class="val" id="v-lh">1.05</span></label>
|
|
<input type="range" id="lh" min="0.5" max="2" step="0.05" value="1.05">
|
|
</div>
|
|
</div>
|
|
<label for="ls">Buchstabenabstand: <span class="val" id="v-ls">0.010</span>em</label>
|
|
<input type="range" id="ls" min="-0.15" max="0.3" step="0.005" value="0.01">
|
|
|
|
<h2>Farben</h2>
|
|
<div class="color-row">
|
|
<input type="color" id="c-bg" value="#362582" aria-labelledby="lbl-bg">
|
|
<span class="swatch-label" id="lbl-bg">Hintergrund</span>
|
|
<span class="hex" id="hex-bg">#362582</span>
|
|
</div>
|
|
<div class="color-row">
|
|
<input type="color" id="c-face" value="#f6d939" aria-labelledby="lbl-face">
|
|
<span class="swatch-label" id="lbl-face">Face</span>
|
|
<span class="hex" id="hex-face">#f6d939</span>
|
|
</div>
|
|
<div class="color-row">
|
|
<input type="color" id="c-depth" value="#ea741e" aria-labelledby="lbl-depth">
|
|
<span class="swatch-label" id="lbl-depth">Tiefe</span>
|
|
<span class="hex" id="hex-depth">#ea741e</span>
|
|
</div>
|
|
<div class="color-row">
|
|
<input type="color" id="c-shadow" value="#221953" aria-labelledby="lbl-shadow">
|
|
<span class="swatch-label" id="lbl-shadow">Schatten & Kontur</span>
|
|
<span class="hex" id="hex-shadow">#221953</span>
|
|
</div>
|
|
|
|
<h2>Lichtrichtung</h2>
|
|
<p class="hint">Steuert alle Versätze gleichzeitig — Schatten geht in Lichtrichtung, Tiefe entgegen.</p>
|
|
<label for="angle">Winkel: <span class="val" id="v-angle">133</span>° (0=oben, 90=rechts, 180=unten)</label>
|
|
<input type="range" id="angle" min="0" max="359" value="133">
|
|
|
|
<h2>Schichten</h2>
|
|
<p class="hint">Hinten nach vorn: Schatten · Tiefe · Kontur · Face</p>
|
|
<label for="shadow">Schatten-Länge: <span class="val" id="v-shadow">30</span>px</label>
|
|
<input type="range" id="shadow" min="0" max="80" value="30">
|
|
<label for="depth">Tiefe (in Gegenrichtung): <span class="val" id="v-depth">15</span>px</label>
|
|
<input type="range" id="depth" min="0" max="30" value="15">
|
|
<label for="contour">Kontur (vor der Tiefe): <span class="val" id="v-contour">11</span>px</label>
|
|
<input type="range" id="contour" min="0" max="20" value="11">
|
|
|
|
<h2>Komposition</h2>
|
|
<div class="row-2col">
|
|
<div>
|
|
<label for="rot">Drehung: <span class="val" id="v-rot">-10</span>°</label>
|
|
<input type="range" id="rot" min="-25" max="25" value="-10">
|
|
</div>
|
|
<div>
|
|
<label for="skew">Schräge: <span class="val" id="v-skew">-8</span>°</label>
|
|
<input type="range" id="skew" min="-20" max="20" value="-8">
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Generiertes CSS</h2>
|
|
<code id="cssout"></code>
|
|
<button type="button" class="copy-btn" id="copyBtn">CSS kopieren</button>
|
|
<button type="reset" class="reset-btn" id="resetBtn">Zurücksetzen</button>
|
|
</form>
|
|
</div>
|
|
</details>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|