Add exhibit AR view page (the Hidden Side experience)

2026-07-07 23:13:40 +10:00
parent c8cd1e8056
commit d48a8ce786
1 changed files with 102 additions and 0 deletions
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" />
+<title>Newbury Exhibit — Hidden Side</title>
+<style>
+  :root { --red:#f65151; --yellow:#fff35d; --blue:#529eff; --cyan:#51eaf1;
+    --ink:#e8eaf2; --dim:#8a93ad; --panel:rgba(10,12,20,0.84); }
+  * { box-sizing:border-box; }
+  html,body { margin:0; height:100%; background:#05060a; color:var(--ink);
+    font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; overflow:hidden;
+    -webkit-user-select:none; user-select:none; }
+  #stage { position:fixed; inset:0; }
+  #video,#three { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
+  #three { pointer-events:none; }
+
+  /* status pill */
+  #hud { position:fixed; left:10px; top:calc(10px + env(safe-area-inset-top));
+    background:var(--panel); border:1px solid rgba(255,255,255,0.08); border-radius:12px;
+    padding:9px 12px; font-size:12.5px; line-height:1.5; backdrop-filter:blur(8px); max-width:72vw; }
+  .tag { padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; }
+  .tag.on { background:rgba(81,234,241,0.16); color:var(--cyan); }
+  .tag.off { background:rgba(246,81,81,0.16); color:var(--red); }
+  .tag.warn { background:rgba(255,243,93,0.16); color:var(--yellow); }
+  #hud b { color:var(--blue); }
+  #hud .line2 { color:var(--dim); font-size:11px; margin-top:3px; }
+
+  /* ghost counter bottom */
+  #count { position:fixed; right:12px; top:calc(10px + env(safe-area-inset-top));
+    background:var(--panel); border:1px solid rgba(255,255,255,0.08); border-radius:12px;
+    padding:9px 12px; font-size:12.5px; backdrop-filter:blur(8px); text-align:center; }
+  #count .big { font-size:20px; font-weight:700; color:var(--cyan); }
+  #count .lbl { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.05em; }
+
+  /* re-align prompt when tracking lost */
+  #realign { position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom));
+    transform:translateX(-50%); background:var(--panel); border:1px solid rgba(255,243,93,0.3);
+    border-radius:12px; padding:12px 18px; font-size:13px; text-align:center; display:none;
+    backdrop-filter:blur(8px); max-width:80vw; }
+  #realign.show { display:block; }
+  #realign .t { color:var(--yellow); font-weight:600; }
+
+  #start { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
+    justify-content:center; gap:18px; text-align:center; padding:24px;
+    background:radial-gradient(circle at 50% 36%,#161a2b,#05060a 72%); }
+  #start .logo { font-size:13px; letter-spacing:0.3em; text-transform:uppercase; color:var(--dim); }
+  #start h1 { font-size:30px; margin:0; letter-spacing:-0.02em; }
+  #start h1 span { background:linear-gradient(90deg,var(--red),var(--yellow),var(--blue));
+    -webkit-background-clip:text; background-clip:text; color:transparent; }
+  #start p { color:var(--dim); max-width:32ch; margin:0; line-height:1.6; font-size:14px; }
+  #go { appearance:none; border:0; cursor:pointer; font-size:16px; font-weight:600; color:#06121f;
+    background:linear-gradient(135deg,var(--blue),var(--cyan)); padding:15px 34px; border-radius:999px;
+    box-shadow:0 8px 30px rgba(82,158,255,0.35); }
+  #err { color:var(--red); font-size:12.5px; max-width:34ch; }
+  .hidden { display:none !important; }
+</style>
+</head>
+<body>
+  <div id="stage">
+    <video id="video" playsinline muted autoplay></video>
+    <canvas id="three"></canvas>
+  </div>
+
+  <div id="hud" class="hidden">
+    <div>Hidden Side <span id="lock" class="tag off">aligning…</span></div>
+    <div class="line2" id="line2">point at a Newbury Crest</div>
+  </div>
+
+  <div id="count" class="hidden">
+    <div class="big" id="ghostN">0</div>
+    <div class="lbl">ghosts</div>
+  </div>
+
+  <div id="realign">
+    <span class="t">Re-align</span> — point your camera at a Newbury Crest to lock the Hidden Side back on.
+  </div>
+
+  <div id="start">
+    <div class="logo">Newbury Exhibit</div>
+    <h1>The <span>Hidden Side</span></h1>
+    <p>Point your camera at any Newbury Crest on the build, then explore — ghosts appear anchored to the town, shared with everyone around you.</p>
+    <button id="go">Enter</button>
+    <div id="err"></div>
+  </div>
+
+  <script src="vendor/cv.js"></script>
+  <script src="vendor/svd.js"></script>
+  <script src="vendor/posit1.js"></script>
+  <script src="vendor/aruco.js"></script>
+  <script src="vendor/dictionaries/aruco_4x4_1000.js"></script>
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+    }
+  }
+  </script>
+  <script type="module" src="js/exhibit.js?v=1"></script>
+</body>
+</html>