clean up and hand tracking

2026-06-10 14:29:15 +10:00
parent 95b9bc7cdc
commit 82d5c31ab2
10 changed files with 431 additions and 39 deletions
--- a/test-pages/demo.css
+++ b/test-pages/demo.css
@@ -0,0 +1,162 @@
+:root {
+	color-scheme: light;
+	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	line-height: 1.5;
+	color: #151515;
+	background: #f4f4f2;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+}
+
+a {
+	color: inherit;
+}
+
+.demo-page {
+	min-height: 100vh;
+	padding: 32px;
+}
+
+.demo-shell {
+	width: min(100%, 1040px);
+	margin: 0 auto;
+}
+
+.demo-topbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	margin-bottom: 24px;
+}
+
+.demo-brand {
+	margin: 0;
+	font-size: 2.5rem;
+	line-height: 1;
+}
+
+.demo-kicker {
+	margin: 8px 0 0;
+	max-width: 700px;
+	color: #555;
+	font-size: 1rem;
+}
+
+.demo-back {
+	display: inline-flex;
+	align-items: center;
+	min-height: 40px;
+	padding: 0 14px;
+	border: 1px solid #c7c7c0;
+	border-radius: 6px;
+	background: #fff;
+	text-decoration: none;
+	font-weight: 650;
+}
+
+.demo-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+	gap: 16px;
+	margin-top: 28px;
+}
+
+.demo-card {
+	display: grid;
+	gap: 10px;
+	min-height: 150px;
+	padding: 18px;
+	border: 1px solid #d5d5cf;
+	border-radius: 8px;
+	background: #fff;
+	text-decoration: none;
+	transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.demo-card:hover {
+	transform: translateY(-2px);
+	border-color: #83837a;
+}
+
+.demo-card h2 {
+	margin: 0;
+	font-size: 1.125rem;
+}
+
+.demo-card p,
+.demo-meta {
+	margin: 0;
+	color: #5c5c55;
+}
+
+.demo-meta {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-top: auto;
+	color: #66665f;
+	font-size: 0.875rem;
+	font-weight: 650;
+}
+
+.demo-player {
+	display: grid;
+	gap: 14px;
+}
+
+.demo-player-frame {
+	width: min(100%, 960px);
+}
+
+.demo-note {
+	max-width: 760px;
+	margin: 18px 0 0;
+	color: #606058;
+	font-size: 0.95rem;
+}
+
+.demo-xr-status {
+	max-width: 760px;
+	margin: 0 0 10px;
+	padding: 10px 12px;
+	border: 1px solid #d5d5cf;
+	border-radius: 6px;
+	background: #fff;
+	color: #4f4f48;
+	font-size: 0.95rem;
+}
+
+.demo-xr-status[data-state="blocked"] {
+	border-color: #d7a13a;
+	background: #fff8e8;
+	color: #5f4515;
+}
+
+.demo-xr-status[data-state="ready"] {
+	border-color: #7eb07b;
+	background: #eff8ef;
+	color: #275425;
+}
+
+@media (max-width: 640px) {
+	.demo-page {
+		padding: 20px;
+	}
+
+	.demo-topbar {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+
+	.demo-brand {
+		font-size: 2rem;
+	}
+}