Add Vue + Vite port of the logo generator

Single-file component (App.vue) over the shared src/logo.js core.
Reactive state via reactive(); v-model drives controls, computed
properties produce the live logo style and generated CSS. Keeps the
accessibility markup (labels, aria, <details>/<summary>, focus
rings); reset restores defaults through the form's @reset handler.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

index.html

@@ -7,100 +7,7 @@
   <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
+  <div id="app"></div>
-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,17 +1,67 @@
 {
-  "name": "demo-ecmascript",
+  "name": "demo-ecmascript-vue",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "demo-ecmascript",
+      "name": "demo-ecmascript-vue",
       "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",
@@ -454,6 +504,12 @@
         "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",
@@ -850,6 +906,138 @@
       "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",
@@ -892,6 +1080,12 @@
         "@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",
@@ -925,11 +1119,19 @@
         "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",
@@ -948,7 +1150,6 @@
       "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": {
@@ -968,7 +1169,6 @@
       "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",
@@ -1042,7 +1242,6 @@
       "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"
@@ -1139,6 +1338,27 @@
           "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",
+  "name": "demo-ecmascript-vue",
   "version": "1.0.0",
-  "description": "LIBRETECH logo generator — vanilla JS + Vite",
+  "description": "LIBRETECH logo generator — Vue + Vite",
   "repository": {
     "type": "git",
     "url": "ssh://tengo@git.librete.ch:41240/public/demo-ecmascript.git"
@@ -13,7 +13,11 @@
     "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

@@ -0,0 +1,121 @@
+<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,83 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
 import './style.css';
-import { inlineTextShadow, cssOutput } from './logo.js';
 
-const $ = (id) => document.getElementById(id);
+createApp(App).mount('#app');
-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,6 +9,7 @@ body {
   overflow: hidden;
   transition: background 0.15s;
 }
+#app { display: contents; }
 .logo {
   font-size: 18vw;
   font-weight: 400;

vite.config.js

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