Checkpoint procedural book shape lab

2026-06-04 22:13:06 +02:00
parent e5b00f7472
commit 552bf14626
2 changed files with 416 additions and 0 deletions
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Book Shape Lab</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: #202124;
+            color: #eeeeee;
+            font-family: system-ui, sans-serif;
+        }
+
+        #scene {
+            display: block;
+            width: 100vw;
+            height: 100vh;
+        }
+
+        #shape_panel {
+            position: fixed;
+            left: 16px;
+            right: 16px;
+            bottom: 16px;
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            gap: 12px;
+            align-items: center;
+            max-width: 720px;
+            padding: 10px 12px;
+            background: rgba(20, 20, 20, 0.86);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 6px;
+        }
+
+        #progress {
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="scene" aria-label="Procedural book shape lab"></canvas>
+    <div id="shape_panel">
+        <label for="progress">Reading progress</label>
+        <input id="progress" type="range" min="0" max="1" step="0.001" value="0.25">
+        <output id="progress_value" for="progress">0.25</output>
+    </div>
+    <script type="module" src="/js/webgl-book-shape-lab.js"></script>
+</body>
+</html>