Port logo generator to vanilla JS + Vite

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>
2026-05-29 12:06:14 +02:00
8 changed files with 182 additions and 473 deletions
@@ -7,7 +7,100 @@
  <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 id="app"></div>
+  <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 &amp; 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>
@@ -1,16 +1,14 @@
 {
-  "name": "demo-ecmascript-svelte",
+  "name": "demo-ecmascript",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "demo-ecmascript-svelte",
+      "name": "demo-ecmascript",
      "version": "1.0.0",
      "license": "WTFPL",
      "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "svelte": "^5.16.0",
        "vite": "^6.0.0"
      }
    },
@@ -456,56 +454,6 @@
        "node": ">=18"
      }
    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.60.4",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.4.tgz",
@@ -895,145 +843,10 @@
        "win32"
      ]
    },
-    "node_modules/@sveltejs/acorn-typescript": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.10.tgz",
-      "integrity": "sha512-4WfKk68eTih+MiJD4fSbxN7E8kVBmTMPWHUPYjvl2N0rMs53YLTT8/YjKU5Dtnz5LqDjl7LEw4U7lXR2W3J5WA==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "acorn": "^8.9.0"
-      }
-    },
-    "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.1.1.tgz",
-      "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
-        "debug": "^4.4.1",
-        "deepmerge": "^4.3.1",
-        "kleur": "^4.1.5",
-        "magic-string": "^0.30.17",
-        "vitefu": "^1.0.6"
-      },
-      "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22"
-      },
-      "peerDependencies": {
-        "svelte": "^5.0.0",
-        "vite": "^6.0.0"
-      }
-    },
-    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
-      "integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.7"
-      },
-      "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22"
-      },
-      "peerDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^5.0.0",
-        "svelte": "^5.0.0",
-        "vite": "^6.0.0"
-      }
-    },
    "node_modules/@types/estree": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
-      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/aria-query": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
-      "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/axobject-query": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
-      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/devalue": {
-      "version": "5.8.1",
-      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.1.tgz",
-      "integrity": "sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
      "dev": true,
      "license": "MIT"
    },
@@ -1079,31 +892,6 @@
        "@esbuild/win32-x64": "0.25.12"
      }
    },
-    "node_modules/esm-env": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
-      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/esrap": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.9.tgz",
-      "integrity": "sha512-4KijP+NxCWthMCUC3qHbE6n4vCjqgJS1uAYKhuT/GWfFTf1Qyive2TgOjep+gzbSzRfnNyaN/UU9YmdOt8Eg0A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/types": "^8.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@typescript-eslint/types": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/fdir": {
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1137,50 +925,6 @@
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
-    "node_modules/is-reference": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
-      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.6"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/locate-character": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/nanoid": {
      "version": "3.3.12",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -1294,13 +1038,6 @@
        "fsevents": "~2.3.2"
      }
    },
-    "node_modules/rollup/node_modules/@types/estree": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
-      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1311,34 +1048,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/svelte": {
-      "version": "5.55.10",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.10.tgz",
-      "integrity": "sha512-v9mFVBY1USosyIWdXE7Cg4AN0ywyKCMcAhONvli8doMowEhFhMdNLKD1j7O/UnsrdVTHaUOk/jv8hD/HClVy+g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@sveltejs/acorn-typescript": "^1.0.10",
-        "@types/estree": "^1.0.5",
-        "@types/trusted-types": "^2.0.7",
-        "acorn": "^8.12.1",
-        "aria-query": "5.3.1",
-        "axobject-query": "^4.1.0",
-        "clsx": "^2.1.1",
-        "devalue": "^5.8.1",
-        "esm-env": "^1.2.1",
-        "esrap": "^2.2.9",
-        "is-reference": "^3.0.3",
-        "locate-character": "^3.0.0",
-        "magic-string": "^0.30.11",
-        "zimmerframe": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
    "node_modules/tinyglobby": {
      "version": "0.2.16",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -1430,33 +1139,6 @@
          "optional": true
        }
      }
-    },
-    "node_modules/vitefu": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.3.tgz",
-      "integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
-      "dev": true,
-      "license": "MIT",
-      "workspaces": [
-        "tests/deps/*",
-        "tests/projects/*",
-        "tests/projects/workspace/packages/*"
-      ],
-      "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "vite": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/zimmerframe": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
-      "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-      "dev": true,
-      "license": "MIT"
    }
  }
 }
@@ -1,7 +1,7 @@
 {
-  "name": "demo-ecmascript-svelte",
+  "name": "demo-ecmascript",
  "version": "1.0.0",
-  "description": "LIBRETECH logo generator — Svelte + Vite",
+  "description": "LIBRETECH logo generator — vanilla JS + Vite",
  "repository": {
    "type": "git",
    "url": "ssh://tengo@git.librete.ch:41240/public/demo-ecmascript.git"
@@ -14,8 +14,6 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "svelte": "^5.16.0",
    "vite": "^6.0.0"
  }
 }
@@ -1,133 +0,0 @@
-<script>
-  import { defaults, fonts, logoStyle, cssOutput } from './logo.js';
-
-  const FONT_LABELS = { Impact: 'Impact (System)' };
-
-  let s = $state({ ...defaults });
-  let copied = $state(false);
-
-  const css = $derived(cssOutput(s));
-  const logoCss = $derived(styleString(logoStyle(s)));
-
-  $effect(() => {
-    document.body.style.background = s.bg;
-  });
-
-  // logoStyle() returns a camelCase object; the style attribute needs a string.
-  function styleString(obj) {
-    return Object.entries(obj)
-      .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())}:${v}`)
-      .join(';');
-  }
-
-  async function copy() {
-    try {
-      await navigator.clipboard.writeText(css);
-      copied = true;
-      setTimeout(() => (copied = false), 1500);
-    } catch {
-      alert('Kopieren fehlgeschlagen — bitte manuell aus dem Code-Feld kopieren.');
-    }
-  }
-
-  function onSubmit(e) {
-    e.preventDefault();
-  }
-
-  // bind:value owns the values, so restore defaults explicitly on reset.
-  function onReset(e) {
-    e.preventDefault();
-    s = { ...defaults };
-  }
-</script>
-
-<div class="logo" style={logoCss}>{s.text || ' '}</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" onsubmit={onSubmit} onreset={onReset}>
-      <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" bind:value={s.text}></textarea>
-
-      <h2>Schrift</h2>
-      <select id="font" aria-label="Schriftart" bind:value={s.font}>
-        {#each fonts as f}
-          <option value={f}>{FONT_LABELS[f] || f}</option>
-        {/each}
-      </select>
-
-      <div class="row-2col">
-        <div>
-          <label for="fs">Größe: <span class="val">{s.fs}</span>vw</label>
-          <input type="range" id="fs" min="6" max="30" step="0.5" bind:value={s.fs} />
-        </div>
-        <div>
-          <label for="lh">Zeilenabstand: <span class="val">{s.lh.toFixed(2)}</span></label>
-          <input type="range" id="lh" min="0.5" max="2" step="0.05" bind:value={s.lh} />
-        </div>
-      </div>
-      <label for="ls">Buchstabenabstand: <span class="val">{s.ls.toFixed(3)}</span>em</label>
-      <input type="range" id="ls" min="-0.15" max="0.3" step="0.005" bind:value={s.ls} />
-
-      <h2>Farben</h2>
-      <div class="color-row">
-        <input type="color" id="c-bg" bind:value={s.bg} aria-labelledby="lbl-bg" />
-        <span class="swatch-label" id="lbl-bg">Hintergrund</span>
-        <span class="hex">{s.bg}</span>
-      </div>
-      <div class="color-row">
-        <input type="color" id="c-face" bind:value={s.face} aria-labelledby="lbl-face" />
-        <span class="swatch-label" id="lbl-face">Face</span>
-        <span class="hex">{s.face}</span>
-      </div>
-      <div class="color-row">
-        <input type="color" id="c-depth" bind:value={s.depth} aria-labelledby="lbl-depth" />
-        <span class="swatch-label" id="lbl-depth">Tiefe</span>
-        <span class="hex">{s.depth}</span>
-      </div>
-      <div class="color-row">
-        <input type="color" id="c-shadow" bind:value={s.shadow} aria-labelledby="lbl-shadow" />
-        <span class="swatch-label" id="lbl-shadow">Schatten &amp; Kontur</span>
-        <span class="hex">{s.shadow}</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">{s.angle}</span>° (0=oben, 90=rechts, 180=unten)</label>
-      <input type="range" id="angle" min="0" max="359" bind:value={s.angle} />
-
-      <h2>Schichten</h2>
-      <p class="hint">Hinten nach vorn: Schatten · Tiefe · Kontur · Face</p>
-      <label for="shadow-len">Schatten-Länge: <span class="val">{s.shadowLen}</span>px</label>
-      <input type="range" id="shadow-len" min="0" max="80" bind:value={s.shadowLen} />
-      <label for="depth-len">Tiefe (in Gegenrichtung): <span class="val">{s.depthLen}</span>px</label>
-      <input type="range" id="depth-len" min="0" max="30" bind:value={s.depthLen} />
-      <label for="contour-len">Kontur (vor der Tiefe): <span class="val">{s.contourLen}</span>px</label>
-      <input type="range" id="contour-len" min="0" max="20" bind:value={s.contourLen} />
-
-      <h2>Komposition</h2>
-      <div class="row-2col">
-        <div>
-          <label for="rot">Drehung: <span class="val">{s.rot}</span>°</label>
-          <input type="range" id="rot" min="-25" max="25" bind:value={s.rot} />
-        </div>
-        <div>
-          <label for="skew">Schräge: <span class="val">{s.skew}</span>°</label>
-          <input type="range" id="skew" min="-20" max="20" bind:value={s.skew} />
-        </div>
-      </div>
-
-      <h2>Generiertes CSS</h2>
-      <code id="cssout">{css}</code>
-      <button type="button" class="copy-btn" class:copied onclick={copy}>
-        {copied ? 'Kopiert!' : 'CSS kopieren'}
-      </button>
-      <button type="reset" class="reset-btn">Zurücksetzen</button>
-    </form>
-  </div>
-</details>
@@ -1,7 +1,83 @@
-import { mount } from 'svelte';
-import App from './App.svelte';
 import './style.css';
+import { inlineTextShadow, cssOutput } from './logo.js';

-const app = mount(App, { target: document.getElementById('app') });
+const $ = (id) => document.getElementById(id);
+const logo = $('logo');
+const cssout = $('cssout');

-export default app;
+function readState() {
+  return {
+    text: $('text').value || ' ',
+    font: $('font').value,
+    fs: +$('fs').value,
+    lh: +$('lh').value,
+    ls: +$('ls').value,
+    bg: $('c-bg').value,
+    face: $('c-face').value,
+    depth: $('c-depth').value,
+    shadow: $('c-shadow').value,
+    angle: +$('angle').value,
+    shadowLen: +$('shadow').value,
+    depthLen: +$('depth').value,
+    contourLen: +$('contour').value,
+    rot: +$('rot').value,
+    skew: +$('skew').value,
+  };
+}
+
+function render() {
+  const s = readState();
+
+  $('v-fs').textContent = s.fs;
+  $('v-lh').textContent = s.lh.toFixed(2);
+  $('v-ls').textContent = s.ls.toFixed(3);
+  $('v-angle').textContent = s.angle;
+  $('v-shadow').textContent = s.shadowLen;
+  $('v-depth').textContent = s.depthLen;
+  $('v-contour').textContent = s.contourLen;
+  $('v-rot').textContent = s.rot;
+  $('v-skew').textContent = s.skew;
+  $('hex-bg').textContent = s.bg;
+  $('hex-face').textContent = s.face;
+  $('hex-depth').textContent = s.depth;
+  $('hex-shadow').textContent = s.shadow;
+
+  logo.textContent = s.text;
+  logo.style.textShadow = inlineTextShadow(s);
+  logo.style.transform = `rotate(${s.rot}deg) skewX(${s.skew}deg)`;
+  logo.style.fontFamily = `'${s.font}', 'Bebas Neue', Impact, sans-serif`;
+  logo.style.color = s.face;
+  logo.style.fontSize = s.fs + 'vw';
+  logo.style.lineHeight = s.lh;
+  logo.style.letterSpacing = s.ls + 'em';
+  document.body.style.background = s.bg;
+
+  cssout.textContent = cssOutput(s);
+}
+
+document
+  .querySelectorAll('#logoForm input, #logoForm select, #logoForm textarea')
+  .forEach((el) => el.addEventListener('input', render));
+
+$('copyBtn').addEventListener('click', async () => {
+  try {
+    await navigator.clipboard.writeText(cssout.textContent);
+    const btn = $('copyBtn');
+    btn.textContent = 'Kopiert!';
+    btn.classList.add('copied');
+    setTimeout(() => {
+      btn.textContent = 'CSS kopieren';
+      btn.classList.remove('copied');
+    }, 1500);
+  } catch {
+    alert('Kopieren fehlgeschlagen — bitte manuell aus dem Code-Feld kopieren.');
+  }
+});
+
+// Native <button type="reset"> restores every field to its value= attribute;
+// re-render on the next tick once the reset has applied.
+const form = $('logoForm');
+form.addEventListener('reset', () => setTimeout(render, 0));
+form.addEventListener('submit', (e) => e.preventDefault());
+
+render();
@@ -9,7 +9,6 @@ body {
  overflow: hidden;
  transition: background 0.15s;
 }
-#app { display: contents; }
 .logo {
  font-size: 18vw;
  font-weight: 400;
@@ -1,5 +0,0 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-export default {
-  preprocess: vitePreprocess(),
-};
@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite';
-import { svelte } from '@sveltejs/vite-plugin-svelte';

 export default defineConfig({
-  plugins: [svelte()],
+  // index.html at project root is the single entry; defaults are fine.
 });