Add WebGL book scene checkpoint

2026-06-04 11:10:48 +02:00
parent bccefd2a68
commit 199462442c
18 changed files with 4685 additions and 4 deletions
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WebGL Book Lab</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: #080604;
+            color: #eadbc2;
+            font-family: Georgia, "Times New Roman", serif;
+        }
+
+        #scene {
+            display: block;
+            width: 100vw;
+            height: 100vh;
+        }
+
+        #lab_menu {
+            position: fixed;
+            z-index: 10;
+            inset: 0 0 auto;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 18px;
+            box-sizing: border-box;
+            background: linear-gradient(180deg, rgba(13, 9, 6, 0.94), rgba(13, 9, 6, 0.58));
+            border-bottom: 1px solid rgba(214, 180, 125, 0.22);
+            pointer-events: none;
+        }
+
+        #lab_title {
+            font-size: 15px;
+            letter-spacing: 0;
+            color: #f1dec0;
+        }
+
+        #lab_status {
+            font-size: 13px;
+            color: rgba(241, 222, 192, 0.72);
+        }
+    </style>
+</head>
+<body>
+    <canvas id="scene" aria-label="Procedural book scene lab"></canvas>
+    <div id="lab_menu">
+        <div id="lab_title">Procedural Book Lab</div>
+        <div id="lab_status">standalone scene</div>
+    </div>
+    <script type="module" src="/js/webgl-book-lab.js"></script>
+</body>
+</html>