76 lines
3.3 KiB
HTML
76 lines
3.3 KiB
HTML
<!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 — AR marker test</title>
|
|
<style>
|
|
:root {
|
|
--red: #f65151; --yellow: #fff35d; --blue: #529eff;
|
|
--ink: #e8eaf2; --dim: #8a93ad; --panel: rgba(12,14,22,0.82);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; background: #05060a; color: var(--ink);
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; overflow: hidden; }
|
|
#stage { position: fixed; inset: 0; }
|
|
/* camera + canvas stack, all same size, centred */
|
|
#video, #overlay { position: absolute; top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%); }
|
|
#video { object-fit: cover; }
|
|
#overlay { pointer-events: none; }
|
|
|
|
/* HUD */
|
|
#hud { position: fixed; left: 12px; top: calc(12px + env(safe-area-inset-top));
|
|
background: var(--panel); border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
|
|
backdrop-filter: blur(8px); max-width: 70vw; }
|
|
#hud b { color: var(--blue); font-weight: 600; }
|
|
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px;
|
|
font-size: 11px; font-weight: 600; margin-left: 6px; }
|
|
.tag.on { background: rgba(82,158,255,0.18); color: var(--blue); }
|
|
.tag.off { background: rgba(246,81,81,0.16); color: var(--red); }
|
|
|
|
#start { position: fixed; inset: 0; display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; gap: 20px; text-align: center;
|
|
background: radial-gradient(circle at 50% 38%, #161a2b, #05060a 70%); padding: 24px; }
|
|
#start h1 { font-size: 26px; margin: 0; letter-spacing: -0.01em; }
|
|
#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: 30ch; margin: 0; line-height: 1.6; font-size: 15px; }
|
|
#go { appearance: none; border: 0; cursor: pointer; font-size: 16px; font-weight: 600;
|
|
color: #06121f; background: linear-gradient(135deg, var(--blue), #51eaf1);
|
|
padding: 14px 30px; border-radius: 999px; box-shadow: 0 8px 30px rgba(82,158,255,0.35); }
|
|
#go:active { transform: translateY(1px); }
|
|
.hidden { display: none !important; }
|
|
#err { color: var(--red); font-size: 13px; max-width: 34ch; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="stage">
|
|
<video id="video" playsinline muted autoplay></video>
|
|
<canvas id="overlay"></canvas>
|
|
</div>
|
|
|
|
<div id="hud" class="hidden">
|
|
<div>Marker <span id="seen" class="tag off">searching…</span></div>
|
|
<div>id: <b id="mid">—</b> · fps: <b id="fps">0</b></div>
|
|
<div style="color:var(--dim);font-size:11px;margin-top:4px">Point at a Newbury Crest</div>
|
|
</div>
|
|
|
|
<div id="start">
|
|
<h1>Newbury <span>Hidden Side</span></h1>
|
|
<p>Point your camera at a Newbury Crest marker to reveal the ghost bound to it.</p>
|
|
<button id="go">Start camera</button>
|
|
<div id="err"></div>
|
|
</div>
|
|
|
|
<!-- js-aruco2 (vendored, MIT) -->
|
|
<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 src="js/ar-test.js"></script>
|
|
</body>
|
|
</html>
|