index.html

1	<!DOCTYPE html>
2	<html lang="en">
3
4	<head>
5	<meta charset="UTF-8" />
6	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
7	<meta name="apple-mobile-web-app-capable" content="yes" />
8	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
9	<meta name="mobile-web-app-capable" content="yes" />
10	<meta name="theme-color" content="#111111" />
11	<title>Nuts</title>
12
13	<!-- Favicons -->
14	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
15	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
16	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
17	<link rel="manifest" href="/site.webmanifest" />
18
19	<!-- Open Graph -->
20	<meta property="og:title" content="Nuts" />
21	<meta property="og:description" content="A box of nuts bouncing around with haptic feedback." />
22	<meta property="og:image" content="https://pavelsafronov.gitlab.io/nuts/og-image.png" />
23	<meta property="og:url" content="https://pavelsafronov.gitlab.io/nuts/" />
24	<meta name="twitter:card" content="summary_large_image" />
25
26	<link rel="stylesheet" href="/src/style.css" />
27	</head>
28
29	<body>
30	<canvas id="canvas"></canvas>
31
32	<!-- Tap-to-start overlay (also handles iOS motion permission) -->
33	<div id="start-overlay">
34	<div class="start-content">
35	<img class="nut-icon" src="/acorn.png" alt="Acorn icon" width="80" height="80" />
36	<h1>Nuts</h1>
37	<p>Tap to begin</p>
38	</div>
39	</div>
40
41	<!-- Fullscreen guard overlay -->
42	<div id="fullscreen-overlay" hidden>
43	<div class="start-content">
44	<img class="nut-icon" src="/acorn.png" alt="Acorn icon" width="80" height="80" />
45	<h1>Nuts</h1>
46	<p>Tap to go fullscreen</p>
47	</div>
48	</div>
49
50	<!-- Top toolbar (hidden until game starts) -->
51	<div id="toolbar" hidden>
52	<!-- Kind cycle: random → nut → gem → balloon → random -->
53	<button id="kind-btn" class="toolbar-btn" aria-label="Item type">?</button>
54
55	<!-- Size: tap to reveal slider pill -->
56	<button id="size-btn" class="toolbar-btn" aria-label="Size">●</button>
57
58	<!-- Freeze toggle -->
59	<button id="freeze-btn" class="toolbar-btn" aria-label="Freeze">⏸</button>
60
61	<!-- Gravity mode: device / tumbler / rock -->
62	<button id="gravity-btn" class="toolbar-btn" aria-label="Gravity mode">📱</button>
63
64	<!-- Clear -->
65	<button id="clear-top-btn" class="toolbar-btn" aria-label="Clear">✕</button>
66
67	<!-- Settings -->
68	<button id="settings-btn" class="toolbar-btn" aria-label="Settings">⚙</button>
69	</div>
70
71	<!-- Size slider pill (slides down from toolbar) -->
72	<div id="size-pill" hidden>
73	<input type="range" id="nut-size" min="10" max="180" value="130" step="1" />
74	<span id="nut-size-display" class="size-pill-value">130</span>
75	</div>
76
77	<!-- Slow-frame recovery overlay -->
78	<div id="perf-overlay" hidden>
79	<div class="perf-box">
80	<p class="perf-msg">The scene is taking too long to simulate.<br>Consider reducing the number of items.
81	</p>
82	<button id="perf-reset-btn" class="perf-btn">Clear & reset</button>
83	<button id="perf-continue-btn" class="perf-btn perf-btn-secondary">Continue anyway</button>
84	</div>
85	</div>
86
87	<!-- Settings panel -->
88	<div id="settings-panel" hidden>
89	<div class="panel-backdrop"></div>
90	<div class="panel-sheet">
91	<div class="panel-handle"></div>
92	<h2>Settings</h2>
93
94	<button id="test-vibrate-btn" class="action-btn">Test vibration</button>
95	<button id="vibrate-toggle-btn" class="action-btn active">Vibration: On</button>
96	<button id="close-settings" class="close-btn">Done</button>
97
98	<div class="share-section">
99	<p class="share-label">Share this collection</p>
100	<canvas id="qr-canvas" width="160" height="160"></canvas>
101	<button id="copy-link-btn" class="action-btn">Copy link</button>
102	</div>
103
104	<div class="panel-links">
105	<a href="https://pavelsafronov.gitlab.io/nuts/" target="_blank" rel="noopener">Live app</a>
106	<span aria-hidden="true">·</span>
107	<a href="https://gitlab.com/PavelSafronov/nuts" target="_blank" rel="noopener">Source</a>
108	</div>
109	<p class="attribution">
110	Icon by <a href="https://www.flaticon.com/search?author_id=296&style_id=1001&type=standard"
111	target="_blank" rel="noopener">Freepik</a> via Flaticon
112	</p>
113	</div>
114	</div>
115
116	<script type="module" src="/src/main.ts"></script>
117	</body>
118
119	</html>