Skip to content

Commit 45b1406

Browse files
piyushswainpiyushswain
committed
Added Design Demo for Griffin P1 Product page
1 parent 00d695d commit 45b1406

4 files changed

Lines changed: 2063 additions & 4 deletions

File tree

‎demos/product_page/index.html‎

Lines changed: 373 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,373 @@
1+
---
2+
# No layout: standalone product page. Empty front matter only so Jekyll
3+
# runs this through Liquid and the analytics include resolves.
4+
---
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
10+
<title>Griffin P1 — the handheld built to outrun the pack</title>
11+
<meta name="description" content="Griffin P1: a 120Hz OLED handheld with custom Griffin G1 silicon, Hall-effect sticks and GriffinOS. Concept product page demo built with Three.js.">
12+
<meta name="theme-color" content="#0b0906" media="(prefers-color-scheme: dark)">
13+
<meta name="theme-color" content="#f6efe4" media="(prefers-color-scheme: light)">
14+
<link rel="preconnect" href="https://fonts.googleapis.com">
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200;400;600;700;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
17+
<link rel="stylesheet" href="styles.css">
18+
{% include analytics.html %}
19+
</head>
20+
<body data-theme="dark">
21+
22+
<canvas id="orbit-field" aria-hidden="true"></canvas>
23+
24+
<a class="skip-link" href="#main">Skip to content</a>
25+
26+
<header class="nav" id="top">
27+
<a class="nav-mark" href="#top">
28+
GRIFFIN <span class="nav-mark-p1">P1</span>
29+
</a>
30+
<nav class="nav-links" aria-label="Primary">
31+
<a href="#design">Design</a>
32+
<a href="#griffinos">GriffinOS</a>
33+
<a href="#library">Library</a>
34+
<a href="#reserve">Reserve</a>
35+
</nav>
36+
<div class="nav-actions">
37+
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to light mode">
38+
<span class="theme-toggle-track">
39+
<span class="theme-toggle-thumb" aria-hidden="true">
40+
<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>
41+
<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a6.8 6.8 0 0 0 10.5 10.5Z"/></svg>
42+
</span>
43+
</span>
44+
</button>
45+
<a class="btn btn-ember" href="#reserve">Reserve</a>
46+
</div>
47+
</header>
48+
49+
<main id="main">
50+
51+
<!-- ============================== HERO ============================== -->
52+
<section class="hero" id="hero">
53+
<div class="hero-inner">
54+
<p class="eyebrow">HANDHELD · GRIFFIN P1 · FIRST FLIGHT 2026</p>
55+
<h1 class="hero-title">
56+
<span class="hero-title-line">Talons out</span>
57+
<span class="hero-title-line hero-title-accent">Gamers First</span>
58+
</h1>
59+
<p class="hero-sub">A handheld built around one obsession, nothing between your thumb and the game.</p>
60+
<div class="hero-cta">
61+
<a class="btn btn-ember btn-lg" href="#reserve">Reserve yours</a>
62+
<a class="btn btn-ghost btn-lg" href="#griffinos">See it fly ↓</a>
63+
</div>
64+
</div>
65+
66+
<div class="hero-device-wrap">
67+
<div class="device" id="heroDevice">
68+
<span class="shoulder shoulder-l" aria-hidden="true"></span>
69+
<span class="shoulder shoulder-r" aria-hidden="true"></span>
70+
<div class="device-body">
71+
<div class="device-controls device-controls-left" aria-hidden="true">
72+
<span class="stick"></span>
73+
<span class="dpad"></span>
74+
<span class="touchpad"></span>
75+
</div>
76+
77+
<div class="device-screen-bezel">
78+
<div class="device-vents" aria-hidden="true"></div>
79+
<div class="device-screen" id="deviceScreen">
80+
<canvas id="gameCanvas" width="480" height="300"></canvas>
81+
<p class="device-now-playing" id="deviceNowPlaying">Ember Run</p>
82+
</div>
83+
</div>
84+
85+
<div class="device-controls device-controls-right" aria-hidden="true">
86+
<span class="face-buttons"><i></i><i></i><i></i><i></i></span>
87+
<span class="stick"></span>
88+
<span class="touchpad"></span>
89+
</div>
90+
</div>
91+
<div class="device-glow" aria-hidden="true"></div>
92+
</div>
93+
</div>
94+
95+
<ul class="spec-ticker" aria-label="Key specifications">
96+
<li>30Hz - 120Hz</li>
97+
<li>9 hr flight time</li>
98+
<li>Hall-effect sticks</li>
99+
<li>512GB storage</li>
100+
<li>Cartridge + cloud</li>
101+
<li>Griffin G1 chip</li>
102+
<li>289g</li>
103+
</ul>
104+
</section>
105+
106+
<p class="hero-sub" style="max-width: 50rem;text-align: center;">Custom silicon, a 7&Prime; OLED panel, and a shell milled to disappear in your hands.</p>
107+
108+
<!-- ============================ FEATURES ============================ -->
109+
<section class="features" id="design">
110+
<div class="section-head">
111+
<p class="eyebrow">DESIGN</p>
112+
<h2 class="section-title">By Gamers, For Gamers.</h2>
113+
</div>
114+
115+
<div class="carousel" id="carousel">
116+
<button class="carousel-nav carousel-nav-prev" id="carPrev" type="button" aria-label="Previous feature">‹</button>
117+
<div class="carousel-track" id="carTrack" tabindex="0" aria-label="Feature carousel">
118+
119+
<article class="feature-card">
120+
<span class="feature-icon" aria-hidden="true">
121+
<svg viewBox="0 0 48 48"><rect x="8" y="6" width="32" height="36" rx="4"/><path d="M16 38h16"/></svg>
122+
</span>
123+
<h3>Display</h3>
124+
<p>7&Prime; 120Hz OLED Gorilla&nbsp;Glass Victus panel, cranked to 1200 nits, so you can continue playing outdoors.</p>
125+
</article>
126+
127+
<article class="feature-card">
128+
<span class="feature-icon" aria-hidden="true">
129+
<svg viewBox="0 0 48 48"><rect x="14" y="14" width="20" height="20" rx="2"/><path d="M20 6v8M28 6v8M20 34v8M28 34v8M6 20h8M6 28h8M34 20h8M34 28h8"/></svg>
130+
</span>
131+
<h3>Griffin G1 silicon</h3>
132+
<p>Custom 8-core chip with hardware ray tracing, tuned for performance and efficiency.</p>
133+
</article>
134+
135+
<article class="feature-card">
136+
<span class="feature-icon" aria-hidden="true">
137+
<svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="11"/><circle cx="24" cy="24" r="3" fill="currentColor" stroke="none"/></svg>
138+
</span>
139+
<h3>Hall-effect sticks</h3>
140+
<p>Magnetic hall-effect, zero mechanical wear. No drift by design, not a promise we patch in later.</p>
141+
</article>
142+
143+
<article class="feature-card">
144+
<span class="feature-icon" aria-hidden="true">
145+
<svg viewBox="0 0 48 48"><rect x="14" y="6" width="20" height="36" rx="3"/><path d="M19 14h10"/></svg>
146+
</span>
147+
<h3>Battery</h3>
148+
<p>9 hours at full tilt, 80W fast charge, and a pack that swaps in seconds when you're between flights.</p>
149+
</article>
150+
151+
<article class="feature-card">
152+
<span class="feature-icon" aria-hidden="true">
153+
<svg viewBox="0 0 48 48"><path d="M10 30c4-14 24-14 28 0"/><path d="M6 34c6-18 30-18 36 0"/></svg>
154+
</span>
155+
<h3>Thermals</h3>
156+
<p>Vapor-chamber cooling and dual fans quiet enough that headphones aren't a requirement, just a preference.</p>
157+
</article>
158+
159+
<article class="feature-card">
160+
<span class="feature-icon" aria-hidden="true">
161+
<svg viewBox="0 0 48 48"><path d="M6 20v8h6l10 8V12l-10 8Z"/><path d="M30 18c3 3 3 9 0 12M35 13c6 6 6 16 0 22"/></svg>
162+
</span>
163+
<h3>Sound</h3>
164+
<p>Dual 3W drivers tuned by ear, spatial audio over Bluetooth 5.3, built to be deliver immersion.</p>
165+
</article>
166+
167+
</div>
168+
<button class="carousel-nav carousel-nav-next" id="carNext" type="button" aria-label="Next feature">›</button>
169+
</div>
170+
<div class="carousel-dots" id="carDots" role="tablist" aria-label="Feature slide"></div>
171+
</section>
172+
173+
<!-- ============================ GRIFFINOS ============================ -->
174+
<section class="griffinos" id="griffinos">
175+
<div class="section-head">
176+
<p class="eyebrow">SOFTWARE</p>
177+
<h2 class="section-title">GriffinOS. Built for Gaming.</h2>
178+
</div>
179+
180+
<div class="os-panel">
181+
<ul class="os-features" id="osFeatures" role="tablist" aria-label="GriffinOS features">
182+
<li>
183+
<button class="os-feature active" data-screen="home" role="tab" aria-selected="true" type="button">
184+
<span class="os-feature-icon" aria-hidden="true">⌂</span>
185+
<span class="os-feature-copy">
186+
<span class="os-feature-title">Home</span>
187+
<span class="os-feature-desc">One shelf for everything you're playing right now.</span>
188+
</span>
189+
</button>
190+
</li>
191+
<li>
192+
<button class="os-feature" data-screen="resume" role="tab" aria-selected="false" type="button">
193+
<span class="os-feature-icon" aria-hidden="true">⏵</span>
194+
<span class="os-feature-copy">
195+
<span class="os-feature-title">Quick Resume</span>
196+
<span class="os-feature-desc">Jump back into any of upto four suspended games, instantly.</span>
197+
</span>
198+
</button>
199+
</li>
200+
<li>
201+
<button class="os-feature" data-screen="library" role="tab" aria-selected="false" type="button">
202+
<span class="os-feature-icon" aria-hidden="true">▦</span>
203+
<span class="os-feature-copy">
204+
<span class="os-feature-title">Universal Library</span>
205+
<span class="os-feature-desc">Cartridges, downloads and streamed titles, one shelf.</span>
206+
</span>
207+
</button>
208+
</li>
209+
<li>
210+
<button class="os-feature" data-screen="perf" role="tab" aria-selected="false" type="button">
211+
<span class="os-feature-icon" aria-hidden="true">◐</span>
212+
<span class="os-feature-copy">
213+
<span class="os-feature-title">Performance Modes</span>
214+
<span class="os-feature-desc">Silent, Balanced or Unleashed, switch mid-game.</span>
215+
</span>
216+
</button>
217+
</li>
218+
<li>
219+
<button class="os-feature" data-screen="sync" role="tab" aria-selected="false" type="button">
220+
<span class="os-feature-icon" aria-hidden="true">⇅</span>
221+
<span class="os-feature-copy">
222+
<span class="os-feature-title">Cloud Sync</span>
223+
<span class="os-feature-desc">Saves follow you between the handheld and your devices.</span>
224+
</span>
225+
</button>
226+
</li>
227+
</ul>
228+
229+
<div class="os-device">
230+
<div class="os-frame">
231+
<div class="os-screen" id="osScreen" data-screen="home">
232+
233+
<div class="os-view os-view-home" data-view="home">
234+
<div class="os-statusbar"><span>GRIFFINOS</span><span>19:41 · 82%</span></div>
235+
<p class="os-view-label">Continue playing</p>
236+
<div class="os-tile os-tile-wide"><span>Ember Run</span><i>▶</i></div>
237+
<div class="os-tile-row">
238+
<div class="os-tile"><span>Talon Trials</span></div>
239+
<div class="os-tile"><span>Canyon Drift</span></div>
240+
</div>
241+
</div>
242+
243+
<div class="os-view os-view-resume" data-view="resume">
244+
<div class="os-statusbar"><span>QUICK RESUME</span><span>4 suspended</span></div>
245+
<div class="os-resume-row"><span>Ember Run</span><em>62% zone 3</em></div>
246+
<div class="os-resume-row"><span>Talon Trials</span><em>paused · boss</em></div>
247+
<div class="os-resume-row"><span>Canyon Drift</span><em>lap 4 of 6</em></div>
248+
<div class="os-resume-row"><span>Nightglass</span><em>chapter 2</em></div>
249+
</div>
250+
251+
<div class="os-view os-view-library" data-view="library">
252+
<div class="os-statusbar"><span>LIBRARY</span><span>128 titles</span></div>
253+
<div class="os-lib-tabs"><span class="on">All</span><span>Cartridge</span><span>Cloud</span></div>
254+
<div class="os-lib-grid" id="osLibGrid"></div>
255+
</div>
256+
257+
<div class="os-view os-view-perf" data-view="perf">
258+
<div class="os-statusbar"><span>PERFORMANCE</span><span>Live</span></div>
259+
<div class="os-perf-modes">
260+
<button class="os-perf-mode" data-mode="silent">Silent<em>18W</em></button>
261+
<button class="os-perf-mode active" data-mode="balanced">Balanced<em>28W</em></button>
262+
<button class="os-perf-mode" data-mode="unleashed">Unleashed<em>42W</em></button>
263+
</div>
264+
<div class="os-perf-meter"><span id="osPerfFill"></span></div>
265+
<p class="os-perf-readout"><span id="osPerfFps">60</span> fps target</p>
266+
</div>
267+
268+
<div class="os-view os-view-sync" data-view="sync">
269+
<div class="os-statusbar"><span>CLOUD SYNC</span><span>Up to date</span></div>
270+
<div class="os-sync-row"><span>Ember Run</span><i class="os-sync-ok">✓ synced</i></div>
271+
<div class="os-sync-row"><span>Talon Trials</span><i class="os-sync-ok">✓ synced</i></div>
272+
<div class="os-sync-row"><span>Canyon Drift</span><i class="os-sync-busy">syncing…</i></div>
273+
</div>
274+
275+
</div>
276+
</div>
277+
</div>
278+
</div>
279+
</section>
280+
281+
<!-- ============================ LIBRARY ============================ -->
282+
<section class="library" id="library">
283+
<div class="section-head">
284+
<p class="eyebrow">LIBRARY</p>
285+
<h2 class="section-title">Everything you already play.</h2>
286+
<p class="section-sub">128 titles at launch — cartridge, download or streamed, one shelf either way.</p>
287+
</div>
288+
289+
<div class="library-panel">
290+
<div class="icon-row">
291+
<div class="icon-track" id="libraryRowA"></div>
292+
</div>
293+
<div class="icon-row icon-row-reverse">
294+
<div class="icon-track" id="libraryRowB"></div>
295+
</div>
296+
<div class="icon-row">
297+
<div class="icon-track" id="libraryRowC"></div>
298+
</div>
299+
</div>
300+
</section>
301+
302+
<!-- ============================ RESERVE ============================ -->
303+
<section class="reserve" id="reserve">
304+
<div class="section-head">
305+
<p class="eyebrow">RESERVE</p>
306+
<h2 class="section-title">Join the flight line.</h2>
307+
<p class="section-sub">Griffin P1 ships first to the flight line. Reserve a unit, no payment now.</p>
308+
</div>
309+
310+
<div class="reserve-panel">
311+
<form class="reserve-form" id="reserveForm" novalidate>
312+
<div class="field">
313+
<label for="rName">Name</label>
314+
<input id="rName" name="name" type="text" autocomplete="name" placeholder="Your name" required>
315+
<p class="field-error" id="rNameError" role="alert"></p>
316+
</div>
317+
<div class="field">
318+
<label for="rEmail">Email</label>
319+
<input id="rEmail" name="email" type="email" autocomplete="email" placeholder="you@domain.com" required>
320+
<p class="field-error" id="rEmailError" role="alert"></p>
321+
</div>
322+
<div class="field">
323+
<label for="rRegion">Region</label>
324+
<select id="rRegion" name="region">
325+
<option selected>India</option>
326+
<option>Asia</option>
327+
<option>Rest of world</option>
328+
</select>
329+
</div>
330+
<label class="field-check">
331+
<input class="field-check-input" type="checkbox" id="rBeta" name="beta">
332+
<span class="field-check-box" aria-hidden="true">
333+
<svg viewBox="0 0 16 16"><path d="M3 8.3l3.2 3L13 4.3"/></svg>
334+
</span>
335+
<span class="field-check-label">Count me in as a beta tester too</span>
336+
</label>
337+
<button class="btn btn-ember btn-lg reserve-submit" type="submit">Reserve my P1</button>
338+
<p class="reserve-fine">Submit the form to view the invitation card</p>
339+
<p class="reserve-fine">This is a portfolio project, not a real store. Nothing is stored beyond this page.</p>
340+
</form>
341+
342+
<div class="boarding-pass" id="boardingPass" hidden>
343+
<div class="boarding-pass-claws" aria-hidden="true"><span></span><span></span><span></span></div>
344+
<div class="boarding-pass-top">
345+
<span class="boarding-pass-mark">GRIFFIN P1</span>
346+
<span class="boarding-pass-status">CONFIRMED</span>
347+
</div>
348+
<p class="boarding-pass-headline">You're on the manifest.</p>
349+
<dl class="boarding-pass-grid">
350+
<div><dt>Flyer</dt><dd id="bpName">—</dd></div>
351+
<div><dt>Position</dt><dd id="bpNumber">—</dd></div>
352+
<div><dt>Route</dt><dd id="bpRegion">—</dd></div>
353+
<div><dt>Class</dt><dd id="bpClass">—</dd></div>
354+
</dl>
355+
<div class="boarding-pass-barcode" aria-hidden="true"></div>
356+
<button class="btn btn-ghost" id="bpReset" type="button">Reserve another</button>
357+
</div>
358+
</div>
359+
</section>
360+
361+
</main>
362+
363+
<footer class="footer">
364+
<div class="footer-inner">
365+
<span class="footer-mark">GRIFFIN P1</span>
366+
<p class="footer-note">Concept product page | a design &amp; Three.js demo, not a real device or store. Built by <a href="/">Piyush Swain</a>.</p>
367+
<a class="footer-back" href="/">← Back to piyushswain.github.io</a>
368+
</div>
369+
</footer>
370+
371+
<script type="module" src="main.js"></script>
372+
</body>
373+
</html>

0 commit comments

Comments
 (0)