Add model viewer with automated screenshot script

2026-08-21 11:25:50 +02:00
parent d1ba3fc9c3
commit b05835df74
5 changed files with 384 additions and 0 deletions
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wackelpeter Modell-Viewer</title>
+    <style>
+      html, body { margin: 0; height: 100%; overflow: hidden; background: #1a2030; }
+      canvas { display: block; }
+      #ui {
+        position: absolute; top: 10px; left: 10px; max-width: 320px;
+        display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start;
+        font-family: monospace; pointer-events: none;
+      }
+      #name {
+        width: 100%; color: #ffd54a; font-size: 16px; margin: 0 0 6px;
+        text-shadow: 0 1px 2px #000;
+      }
+      #ui button {
+        pointer-events: auto; cursor: pointer; font-family: monospace; font-size: 11px;
+        color: #dfe8ff; background: #2a3550cc; border: 1px solid #4a5a80;
+        padding: 3px 8px; border-radius: 3px;
+      }
+      #ui button:hover { background: #3a4a70; }
+      #ui button.active { background: #6a5a20; border-color: #ffd54a; }
+      #hint { width: 100%; color: #8899bb; font-size: 11px; margin-top: 6px; }
+    </style>
+  </head>
+  <body>
+    <div id="ui">
+      <h1 id="name"></h1>
+      <div id="hint">?m=&lt;id&gt; Modell · &amp;still=1 statische Pose</div>
+    </div>
+    <script type="module" src="/src/viewer.ts"></script>
+  </body>
+</html>