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>

index.html

@@ -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>

package-lock.json

@@ -1,67 +1,17 @@
 {
-  "name": "demo-ecmascript-vue",
+  "name": "demo-ecmascript",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "demo-ecmascript-vue",
+      "name": "demo-ecmascript",
       "version": "1.0.0",
       "license": "WTFPL",
-      "dependencies": {
-        "vue": "^3.5.13"
-      },
       "devDependencies": {
-        "@vitejs/plugin-vue": "^5.2.1",
         "vite": "^6.0.0"
       }
     },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
-      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
-      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
-      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.29.7"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
-      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.29.7",
-        "@babel/helper-validator-identifier": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -504,12 +454,6 @@
         "node": ">=18"
       }
     },
-    "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==",
-      "license": "MIT"
-    },
     "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",
@@ -906,138 +850,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@vitejs/plugin-vue": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
-      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^5.0.0 || ^6.0.0",
-        "vue": "^3.2.25"
-      }
-    },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.35.tgz",
-      "integrity": "sha512-BUmHaR1J+O+CKZ9uJucdVTEr1LHsdyvv7vG3eNRhK3CczEHeMd/LtsHAuD7PbrxvI2envCY2v7HI1vC1aBRzKw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.29.3",
-        "@vue/shared": "3.5.35",
-        "entities": "^7.0.1",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.1"
-      }
-    },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.35.tgz",
-      "integrity": "sha512-k+bprkXxuqhVajgTx5mUHuir7TwQzUKOWR40ng1ncAqQRPnrLngGGgqVEEhOnTMlc8btHYVKmrP8s5Qyg0hvYA==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-core": "3.5.35",
-        "@vue/shared": "3.5.35"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.35.tgz",
-      "integrity": "sha512-G5VPMcXTSywXBgtFOZOnHKBxKSrwXUcvY1iaF5/hRcy7t0J6CH/d8ha9F4nzi00Fax1eLV0QHM7v4mQu68jydw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.29.3",
-        "@vue/compiler-core": "3.5.35",
-        "@vue/compiler-dom": "3.5.35",
-        "@vue/compiler-ssr": "3.5.35",
-        "@vue/shared": "3.5.35",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.21",
-        "postcss": "^8.5.15",
-        "source-map-js": "^1.2.1"
-      }
-    },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.35.tgz",
-      "integrity": "sha512-rGhAeXgdM7/ffTJGXT69rCCdTmjDewnFuUZfBQQHTdcEBeWdT5HCGY60y2ytLJr9/Dsu7IntUi5z/w0h6Rjnzw==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.35",
-        "@vue/shared": "3.5.35"
-      }
-    },
-    "node_modules/@vue/reactivity": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.35.tgz",
-      "integrity": "sha512-tVc+SsHConvh/Lz64qq1pP3rYArBmK42xonovEcxY74SQtvctZodG/zhq54P5dr38cVuw25d27cPNRdlMidpGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/shared": "3.5.35"
-      }
-    },
-    "node_modules/@vue/runtime-core": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.35.tgz",
-      "integrity": "sha512-A/xFNX9loIcWDygeQuNCfKuh0CoYBzxhqEMNah5TSFg9Z53DrFYEN2qi5CU9necjM1OWYegYREUTHmXTmhfXtg==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/reactivity": "3.5.35",
-        "@vue/shared": "3.5.35"
-      }
-    },
-    "node_modules/@vue/runtime-dom": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.35.tgz",
-      "integrity": "sha512-odrJ1C391dbGnyDRh8U+rnP7J2amIEzfmRk5vXy7xi3aZhEXofTvpi0T4HJb6jlNqQZTNPR5MPHSB3RHNkIORA==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/reactivity": "3.5.35",
-        "@vue/runtime-core": "3.5.35",
-        "@vue/shared": "3.5.35",
-        "csstype": "^3.2.3"
-      }
-    },
-    "node_modules/@vue/server-renderer": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.35.tgz",
-      "integrity": "sha512-NkebSOYdB97wi8OQcO3HqzZSlymJi/aWsN/7h74OSVhRTm6qGs3Jp3e0rCXynmWwSlKeRrnlIug+ilYoHBmQDA==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-ssr": "3.5.35",
-        "@vue/shared": "3.5.35"
-      },
-      "peerDependencies": {
-        "vue": "3.5.35"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.35.tgz",
-      "integrity": "sha512-zSbjL7gRXwks2ZQLRGCajBtBXEOXW9Ddhn/HvSdrGkE2dqGnumzW8XtusRrxrE9LvqtiqDXQ+A60Hp6mvdYxfA==",
-      "license": "MIT"
-    },
-    "node_modules/csstype": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "license": "MIT"
-    },
-    "node_modules/entities": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
-      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -1080,12 +892,6 @@
         "@esbuild/win32-x64": "0.25.12"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "license": "MIT"
-    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1119,19 +925,11 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "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==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
       "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1150,6 +948,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -1169,6 +968,7 @@
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
       "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -1242,6 +1042,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -1338,27 +1139,6 @@
           "optional": true
         }
       }
-    },
-    "node_modules/vue": {
-      "version": "3.5.35",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.35.tgz",
-      "integrity": "sha512-cx89fnr+0kVGHiNFG6y6s0bdjypJRFNZn6x3WPstNdQR1bi1mbB7h4v5IBGTsPJU3nK1+0Iqj3Zf+hZWMieR4Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.35",
-        "@vue/compiler-sfc": "3.5.35",
-        "@vue/runtime-dom": "3.5.35",
-        "@vue/server-renderer": "3.5.35",
-        "@vue/shared": "3.5.35"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
     }
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "demo-ecmascript-vue",
+  "name": "demo-ecmascript",
   "version": "1.0.0",
-  "description": "LIBRETECH logo generator — Vue + Vite",
+  "description": "LIBRETECH logo generator — vanilla JS + Vite",
   "repository": {
     "type": "git",
     "url": "ssh://tengo@git.librete.ch:41240/public/demo-ecmascript.git"
@@ -13,11 +13,7 @@
     "build": "vite build",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "vue": "^3.5.13"
-  },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
     "vite": "^6.0.0"
   }
 }

src/App.vue

@@ -1,121 +0,0 @@
-<script setup>
-import { reactive, computed, ref, watchEffect } from 'vue';
-import { defaults, fonts, logoStyle, cssOutput } from './logo.js';
-
-const FONT_LABELS = { Impact: 'Impact (System)' };
-
-const s = reactive({ ...defaults });
-const css = computed(() => cssOutput(s));
-const logoCss = computed(() => logoStyle(s));
-const copied = ref(false);
-
-watchEffect(() => {
-  document.body.style.background = s.bg;
-});
-
-async function copy() {
-  try {
-    await navigator.clipboard.writeText(css.value);
-    copied.value = true;
-    setTimeout(() => (copied.value = false), 1500);
-  } catch {
-    alert('Kopieren fehlgeschlagen — bitte manuell aus dem Code-Feld kopieren.');
-  }
-}
-
-// v-model bindings own the values, so restore defaults explicitly on reset.
-function reset() {
-  Object.assign(s, defaults);
-}
-</script>
-
-<template>
-  <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" @submit.prevent @reset.prevent="reset">
-        <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" v-model="s.text"></textarea>
-
-        <h2>Schrift</h2>
-        <select id="font" aria-label="Schriftart" v-model="s.font">
-          <option v-for="f in fonts" :key="f" :value="f">{{ FONT_LABELS[f] || f }}</option>
-        </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" v-model.number="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" v-model.number="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" v-model.number="s.ls" />
-
-        <h2>Farben</h2>
-        <div class="color-row">
-          <input type="color" id="c-bg" v-model="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" v-model="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" v-model="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" v-model="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" v-model.number="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" v-model.number="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" v-model.number="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" v-model.number="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" v-model.number="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" v-model.number="s.skew" />
-          </div>
-        </div>
-
-        <h2>Generiertes CSS</h2>
-        <code id="cssout">{{ css }}</code>
-        <button type="button" class="copy-btn" :class="{ copied }" @click="copy">
-          {{ copied ? 'Kopiert!' : 'CSS kopieren' }}
-        </button>
-        <button type="reset" class="reset-btn">Zurücksetzen</button>
-      </form>
-    </div>
-  </details>
-</template>

src/main.js

@@ -1,5 +1,83 @@
-import { createApp } from 'vue';
-import App from './App.vue';
 import './style.css';
+import { inlineTextShadow, cssOutput } from './logo.js';
 
-createApp(App).mount('#app');
+const $ = (id) => document.getElementById(id);
+const logo = $('logo');
+const cssout = $('cssout');
+
+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();

src/style.css

@@ -9,7 +9,6 @@ body {
   overflow: hidden;
   transition: background 0.15s;
 }
-#app { display: contents; }
 .logo {
   font-size: 18vw;
   font-weight: 400;

vite.config.js

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
-  plugins: [vue()],
+  // index.html at project root is the single entry; defaults are fine.
 });