First audio draft

2025-07-22 23:36:18 +02:00
parent 26c35b27b4
commit 729d140243
10 changed files with 302 additions and 29 deletions
@@ -4,16 +4,68 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+    }
+
    table {
      width: 100%;
      table-layout: fixed;
    }
+
+    .state {
+      display: none;
+      width: 100vw;
+      height: 100vh;
+    }
+
+    [data-state=init] #init,
+    [data-state=error] #error {
+      display: block;
+    }
+
+    [data-state=main] #main {
+      display: flex;
+    }
+
+    #error {
+      border: 2px solid red;
+    }
+
+    #main {
+      justify-content: center;
+      align-items: center;
+    }
+
+    @media (max-aspect-ratio: 1) {
+      #canvas {
+        width: 100vw;
+        height: 100vw;
+      }
+    }
+
+    @media (min-aspect-ratio: 1) {
+      #canvas {
+        width: 100vh;
+        height: 100vh;
+      }
+    }
  </style>
 </head>
-<body>
-  <h1>Is it working?</h1>
-  <button id="perm">click me for permissions</button>
-  <canvas width="200" height="200" id="canvas"></canvas>
+<body data-state="init">
+  <div class="state" id="init">
+    <button id="perm">start the e x p e r i e n c e</button>
+    <pre id="log"></pre>
+  </div>
+  <div class="state" id="main">
+    <canvas width="500" height="500" id="canvas"></canvas>
+  </div>
+  <div class="state" id="error">
+  </div>
  <script src="m3.js"></script>
  <script src="util.js"></script>
  <script src="v3.js"></script>