66 lines
3.0 KiB
HTML
66 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<title>Newbury Exhibit</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
html, body { margin:0; height:100%; overflow:hidden; background:#06080f; font-family:system-ui, sans-serif; color:#e8ecff; }
|
|
#cam { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; }
|
|
#gl { position:fixed; inset:0; width:100%; height:100%; }
|
|
.hidden { display:none !important; }
|
|
|
|
#startScreen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
|
|
background:radial-gradient(ellipse at 50% 30%, #12203f 0%, #06080f 70%); text-align:center; padding:24px; z-index:10; }
|
|
#startScreen h1 { font-size:2rem; margin:0 0 4px; letter-spacing:.06em; }
|
|
#startScreen .sub { opacity:.7; margin-bottom:28px; }
|
|
#start { font-size:1.2rem; padding:14px 42px; border-radius:999px; border:0; cursor:pointer;
|
|
background:linear-gradient(135deg,#51eaf1,#529eff); color:#04121a; font-weight:700; }
|
|
.disclaimer { position:absolute; bottom:14px; left:16px; right:16px; font-size:.68rem; opacity:.55; line-height:1.4; }
|
|
|
|
#hud { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:10px 14px;
|
|
pointer-events:none; z-index:5; text-shadow:0 1px 3px #000; }
|
|
#hud span { background:rgba(6,8,15,.55); border-radius:8px; padding:5px 10px; font-size:.85rem; }
|
|
#trk.warn { color:#ffd166; }
|
|
|
|
#toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px);
|
|
background:rgba(20,28,55,.9); padding:10px 20px; border-radius:999px; opacity:0; transition:all .3s; z-index:6; }
|
|
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<video id="cam" playsinline muted></video>
|
|
<canvas id="gl"></canvas>
|
|
|
|
<div id="startScreen">
|
|
<h1>NEWBURY EXHIBIT</h1>
|
|
<div class="sub">Point your phone at the Newbury Crests to reveal the hidden side of the town.</div>
|
|
<button id="start">Start Ghost Watching</button>
|
|
<div class="disclaimer">Fan-made tribute experience. Not affiliated with, sponsored, or endorsed by the LEGO Group.
|
|
LEGO® and Hidden Side™ are trademarks of the LEGO Group.</div>
|
|
</div>
|
|
|
|
<div id="hud" class="hidden">
|
|
<span id="trk">—</span>
|
|
<span id="cnt">—</span>
|
|
</div>
|
|
<div id="toast"></div>
|
|
|
|
<!-- js-aruco2 vendor chain — load order matters: cv -> svd -> posit -> aruco -> dictionary -->
|
|
<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"></script>
|
|
</body>
|
|
</html>
|