Skip to content

Commit 225090f

Browse files
DeDuckProjectDeDuckProject
committed
Updated design of demo app
1 parent 6e5d83e commit 225090f

3 files changed

Lines changed: 948 additions & 68 deletions

File tree

‎examples/simple-app/public/index.html‎

Lines changed: 391 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,391 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Aurel — Calibre IX Tourbillon</title>
7+
<link rel="stylesheet" href="/style.css">
8+
</head>
9+
<body>
10+
11+
<nav>
12+
<a href="/" class="nav-brand">Aurel</a>
13+
<ul class="nav-links">
14+
<li><a href="#">Collections</a></li>
15+
<li><a href="#">Atelier</a></li>
16+
<li><a href="#">Heritage</a></li>
17+
<li><a href="#">Contact</a></li>
18+
</ul>
19+
<div class="nav-actions">
20+
<!-- Search icon -->
21+
<svg class="nav-icon" viewBox="0 0 24 24" stroke-width="1.75"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="22" y2="22"/></svg>
22+
<!-- Cart icon -->
23+
<svg class="nav-icon" viewBox="0 0 24 24" stroke-width="1.75"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
24+
</div>
25+
</nav>
26+
27+
<main>
28+
29+
<!-- ── Left: Gallery ── -->
30+
<div class="product-gallery">
31+
<div class="image-stage">
32+
<!-- SVG Watch Illustration -->
33+
<svg class="watch-svg" viewBox="0 0 300 340" xmlns="http://www.w3.org/2000/svg">
34+
<defs>
35+
<radialGradient id="dialGrad" cx="42%" cy="35%">
36+
<stop offset="0%" stop-color="#2A2520"/>
37+
<stop offset="60%" stop-color="#1A1510"/>
38+
<stop offset="100%" stop-color="#0E0C09"/>
39+
</radialGradient>
40+
<radialGradient id="caseGrad" cx="35%" cy="30%">
41+
<stop offset="0%" stop-color="#E8DCC8"/>
42+
<stop offset="40%" stop-color="#C9AD7A"/>
43+
<stop offset="75%" stop-color="#A88A50"/>
44+
<stop offset="100%" stop-color="#8A6E30"/>
45+
</radialGradient>
46+
<radialGradient id="innerRingGrad" cx="38%" cy="32%">
47+
<stop offset="0%" stop-color="#B89A5C"/>
48+
<stop offset="100%" stop-color="#7A5E2A"/>
49+
</radialGradient>
50+
<filter id="caseShadow">
51+
<feDropShadow dx="3" dy="6" stdDeviation="8" flood-opacity="0.4"/>
52+
</filter>
53+
<filter id="dialInset">
54+
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.6" flood-color="#000"/>
55+
</filter>
56+
<linearGradient id="strapTop" x1="0" y1="0" x2="1" y2="0">
57+
<stop offset="0%" stop-color="#150E08"/>
58+
<stop offset="35%" stop-color="#2A1D12"/>
59+
<stop offset="65%" stop-color="#2A1D12"/>
60+
<stop offset="100%" stop-color="#150E08"/>
61+
</linearGradient>
62+
<linearGradient id="strapBot" x1="0" y1="0" x2="1" y2="0">
63+
<stop offset="0%" stop-color="#150E08"/>
64+
<stop offset="35%" stop-color="#2A1D12"/>
65+
<stop offset="65%" stop-color="#2A1D12"/>
66+
<stop offset="100%" stop-color="#150E08"/>
67+
</linearGradient>
68+
<linearGradient id="strapShineTop" x1="0" y1="0" x2="0" y2="1">
69+
<stop offset="0%" stop-color="rgba(255,255,255,0.12)"/>
70+
<stop offset="100%" stop-color="rgba(0,0,0,0)"/>
71+
</linearGradient>
72+
<linearGradient id="strapShineBot" x1="0" y1="0" x2="0" y2="1">
73+
<stop offset="0%" stop-color="rgba(255,255,255,0.06)"/>
74+
<stop offset="100%" stop-color="rgba(0,0,0,0)"/>
75+
</linearGradient>
76+
<clipPath id="dialClip">
77+
<circle cx="150" cy="170" r="95"/>
78+
</clipPath>
79+
</defs>
80+
81+
<!-- Top strap -->
82+
<rect x="115" y="0" width="70" height="82" rx="12" fill="url(#strapTop)"/>
83+
<rect x="115" y="0" width="70" height="82" rx="12" fill="url(#strapShineTop)" opacity="0.7"/>
84+
<!-- Strap buckle holes -->
85+
<rect x="128" y="16" width="44" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
86+
<rect x="128" y="26" width="44" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
87+
<rect x="128" y="36" width="44" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
88+
<rect x="128" y="46" width="44" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
89+
<rect x="128" y="56" width="44" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
90+
91+
<!-- Bottom strap -->
92+
<rect x="115" y="258" width="70" height="82" rx="12" fill="url(#strapBot)"/>
93+
<rect x="115" y="258" width="70" height="82" rx="12" fill="url(#strapShineBot)" opacity="0.5"/>
94+
<!-- Strap holes -->
95+
<circle cx="150" cy="280" r="3.5" fill="#0A0806"/>
96+
<circle cx="150" cy="296" r="3.5" fill="#0A0806"/>
97+
<circle cx="150" cy="312" r="3.5" fill="#0A0806"/>
98+
99+
<!-- Case shadow -->
100+
<circle cx="153" cy="176" r="104" fill="rgba(0,0,0,0.25)" filter="url(#caseShadow)"/>
101+
102+
<!-- Outer case -->
103+
<circle cx="150" cy="170" r="102" fill="url(#caseGrad)"/>
104+
<!-- Case bezel detail -->
105+
<circle cx="150" cy="170" r="102" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1.5"/>
106+
<circle cx="150" cy="170" r="97" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="1"/>
107+
108+
<!-- Inner ring -->
109+
<circle cx="150" cy="170" r="96" fill="url(#innerRingGrad)"/>
110+
<circle cx="150" cy="170" r="94" fill="url(#dialGrad)"/>
111+
112+
<!-- Minute markers (60 ticks) -->
113+
<g fill="rgba(255,255,255,0.22)">
114+
<script type="text/ignore">/* ticks rendered below */</script>
115+
</g>
116+
117+
<!-- Hour indices (12 roman/stick) -->
118+
<g fill="#C9AD7A" font-family="'Playfair Display', serif" font-size="9" text-anchor="middle">
119+
<!-- 12 o'clock -->
120+
<rect x="147.5" y="84" width="5" height="14" rx="2" fill="#D4B97A"/>
121+
<!-- 3 -->
122+
<rect x="212" y="167.5" width="14" height="5" rx="2" fill="#D4B97A"/>
123+
<!-- 6 -->
124+
<rect x="147.5" y="242" width="5" height="14" rx="2" fill="#D4B97A"/>
125+
<!-- 9 -->
126+
<rect x="74" y="167.5" width="14" height="5" rx="2" fill="#D4B97A"/>
127+
<!-- Minute ticks -->
128+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(30,150,170)"/>
129+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(60,150,170)"/>
130+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(120,150,170)"/>
131+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(150,150,170)"/>
132+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(210,150,170)"/>
133+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(240,150,170)"/>
134+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(300,150,170)"/>
135+
<rect x="148.5" y="87" width="3" height="8" rx="1" fill="rgba(180,150,90,0.5)" transform="rotate(330,150,170)"/>
136+
</g>
137+
138+
<!-- Tourbillon cage (at 6 o'clock sub-dial) -->
139+
<circle cx="150" cy="215" r="18" fill="none" stroke="rgba(180,150,80,0.3)" stroke-width="1.5"/>
140+
<circle cx="150" cy="215" r="14" fill="none" stroke="rgba(180,150,80,0.2)" stroke-width="1"/>
141+
<circle cx="150" cy="215" r="5" fill="rgba(180,150,80,0.15)" stroke="rgba(180,150,80,0.4)" stroke-width="1"/>
142+
<line x1="136" y1="215" x2="164" y2="215" stroke="rgba(180,150,80,0.25)" stroke-width="0.8"/>
143+
<line x1="150" y1="201" x2="150" y2="229" stroke="rgba(180,150,80,0.25)" stroke-width="0.8"/>
144+
145+
<!-- Brand name on dial -->
146+
<text x="150" y="145" font-family="'Playfair Display', serif" font-size="11" fill="#C9AD7A" text-anchor="middle" letter-spacing="4">AUREL</text>
147+
<text x="150" y="158" font-family="'Inter', sans-serif" font-size="6.5" fill="rgba(180,150,80,0.7)" text-anchor="middle" letter-spacing="2">GENÈVE</text>
148+
149+
<!-- Hour hand -->
150+
<g transform="rotate(330,150,170)">
151+
<rect x="148" y="115" width="4" height="58" rx="2" fill="#E8DCC8"/>
152+
<rect x="148.8" y="116" width="2.4" height="56" rx="1" fill="rgba(255,255,255,0.4)"/>
153+
</g>
154+
155+
<!-- Minute hand -->
156+
<g transform="rotate(100,150,170)">
157+
<rect x="148.8" y="94" width="2.4" height="78" rx="1.2" fill="#E8DCC8"/>
158+
<rect x="149.2" y="95" width="1.6" height="76" rx="0.8" fill="rgba(255,255,255,0.35)"/>
159+
</g>
160+
161+
<!-- Seconds hand -->
162+
<g transform="rotate(220,150,170)">
163+
<rect x="149.5" y="92" width="1" height="60" rx="0.5" fill="#C0392B"/>
164+
<rect x="149.2" y="155" width="1.6" height="18" rx="0.8" fill="#C0392B"/>
165+
</g>
166+
167+
<!-- Center cap -->
168+
<circle cx="150" cy="170" r="5" fill="#C9AD7A"/>
169+
<circle cx="150" cy="170" r="3" fill="#E8DCC8"/>
170+
<circle cx="150" cy="170" r="1.5" fill="#A88A50"/>
171+
172+
<!-- Crown -->
173+
<rect x="249" y="162" width="14" height="16" rx="4" fill="url(#caseGrad)"/>
174+
<rect x="250" y="164" width="12" height="12" rx="3" fill="rgba(255,255,255,0.12)"/>
175+
</svg>
176+
</div>
177+
178+
<!-- Thumbnails -->
179+
<div class="thumb-row">
180+
<div class="thumb active" data-view="front" title="Front">
181+
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
182+
<circle cx="24" cy="24" r="16" fill="#1A1510"/>
183+
<circle cx="24" cy="24" r="16" fill="none" stroke="#C9AD7A" stroke-width="2"/>
184+
<line x1="24" y1="16" x2="24" y2="24" stroke="#E8DCC8" stroke-width="1.5" stroke-linecap="round"/>
185+
<line x1="24" y1="24" x2="30" y2="24" stroke="#E8DCC8" stroke-width="1.5" stroke-linecap="round"/>
186+
</svg>
187+
</div>
188+
<div class="thumb" data-view="side" title="Side">
189+
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
190+
<rect x="16" y="12" width="16" height="24" rx="6" fill="#C9AD7A"/>
191+
<rect x="19" y="12" width="10" height="24" fill="#1A1510" opacity="0.4"/>
192+
<rect x="30" y="20" width="4" height="8" rx="2" fill="#B8933F"/>
193+
</svg>
194+
</div>
195+
<div class="thumb" data-view="clasp" title="Clasp">
196+
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
197+
<rect x="14" y="18" width="20" height="12" rx="4" fill="#C9AD7A"/>
198+
<rect x="17" y="21" width="14" height="6" rx="2" fill="#1A1510" opacity="0.5"/>
199+
<rect x="22" y="23" width="4" height="2" rx="1" fill="#C9AD7A"/>
200+
</svg>
201+
</div>
202+
<div class="thumb" data-view="back" title="Case back">
203+
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
204+
<circle cx="24" cy="24" r="16" fill="#C9AD7A"/>
205+
<circle cx="24" cy="24" r="11" fill="none" stroke="#1A1510" stroke-width="1.5" stroke-dasharray="3 2"/>
206+
<text x="24" y="27" font-size="6" text-anchor="middle" fill="#1A1510" font-family="serif">IX</text>
207+
</svg>
208+
</div>
209+
</div>
210+
</div>
211+
212+
<!-- ── Right: Product info ── -->
213+
<div class="product-info">
214+
<p class="product-label">Limited Edition · No. 47 of 150</p>
215+
<h1 class="product-title">Calibre IX<br>Tourbillon</h1>
216+
<p class="product-subtitle">18k Rose Gold · Flying Tourbillon · 72h Power Reserve</p>
217+
218+
<!-- Rating -->
219+
<div class="rating-row">
220+
<svg style="display:none"><defs>
221+
<linearGradient id="halfGold" x1="0" y1="0" x2="1" y2="0">
222+
<stop offset="50%" stop-color="#B8933F"/>
223+
<stop offset="50%" stop-color="#DDD8CE"/>
224+
</linearGradient>
225+
</defs></svg>
226+
<div class="stars">
227+
<svg class="star" viewBox="0 0 20 20"><polygon points="10,2 12.4,7.8 18.5,8.2 14,12.2 15.6,18.1 10,14.8 4.4,18.1 6,12.2 1.5,8.2 7.6,7.8"/></svg>
228+
<svg class="star" viewBox="0 0 20 20"><polygon points="10,2 12.4,7.8 18.5,8.2 14,12.2 15.6,18.1 10,14.8 4.4,18.1 6,12.2 1.5,8.2 7.6,7.8"/></svg>
229+
<svg class="star" viewBox="0 0 20 20"><polygon points="10,2 12.4,7.8 18.5,8.2 14,12.2 15.6,18.1 10,14.8 4.4,18.1 6,12.2 1.5,8.2 7.6,7.8"/></svg>
230+
<svg class="star" viewBox="0 0 20 20"><polygon points="10,2 12.4,7.8 18.5,8.2 14,12.2 15.6,18.1 10,14.8 4.4,18.1 6,12.2 1.5,8.2 7.6,7.8"/></svg>
231+
<svg class="star half" viewBox="0 0 20 20"><polygon points="10,2 12.4,7.8 18.5,8.2 14,12.2 15.6,18.1 10,14.8 4.4,18.1 6,12.2 1.5,8.2 7.6,7.8"/></svg>
232+
</div>
233+
<span class="rating-count">4.8 (29 reviews)</span>
234+
<div class="rating-divider"></div>
235+
<span class="in-stock"><span class="stock-dot"></span>Only 3 left in stock</span>
236+
</div>
237+
238+
<!-- Price -->
239+
<div class="price-block">
240+
<span class="price-current">$24,800</span>
241+
<span class="price-original">$28,500</span>
242+
<span class="price-badge">Save 13%</span>
243+
</div>
244+
245+
<!-- Strap color -->
246+
<div class="option-section">
247+
<p class="option-label">Strap Color <span id="swatch-label">— Midnight Black</span></p>
248+
<div class="swatch-row">
249+
<div class="swatch active" data-color="midnight" title="Midnight Black" tabindex="0"></div>
250+
<div class="swatch" data-color="cognac" title="Cognac" tabindex="0"></div>
251+
<div class="swatch" data-color="slate" title="Slate Blue" tabindex="0"></div>
252+
<div class="swatch" data-color="silver" title="Silver Mesh" tabindex="0"></div>
253+
</div>
254+
</div>
255+
256+
<!-- Case size -->
257+
<div class="option-section">
258+
<p class="option-label">Case Size</p>
259+
<div class="size-row">
260+
<div class="size-pill" tabindex="0">38mm</div>
261+
<div class="size-pill active" tabindex="0">40mm</div>
262+
<div class="size-pill" tabindex="0">42mm</div>
263+
</div>
264+
</div>
265+
266+
<!-- Quantity + CTA -->
267+
<div class="cta-row">
268+
<div class="qty-control">
269+
<button class="qty-btn" id="qty-dec" aria-label="Decrease quantity">−</button>
270+
<div class="qty-val" id="qty-val">1</div>
271+
<button class="qty-btn" id="qty-inc" aria-label="Increase quantity">+</button>
272+
</div>
273+
<button class="btn-cart" id="btn-cart">
274+
<svg viewBox="0 0 24 24" stroke-width="2">
275+
<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
276+
<path d="M1 1h4l2.68 13.39a2 2 0 001.99 1.61h9.72a2 2 0 001.99-1.61L23 6H6"/>
277+
</svg>
278+
<span id="cart-label">Add to Cart</span>
279+
</button>
280+
<button class="btn-wishlist" id="btn-wishlist" aria-label="Add to wishlist">
281+
<svg viewBox="0 0 24 24" stroke-width="1.75">
282+
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
283+
</svg>
284+
</button>
285+
</div>
286+
<p class="cart-feedback" id="cart-feedback">Added to cart — free delivery included</p>
287+
288+
<!-- Feature pills -->
289+
<div class="feature-row">
290+
<span class="feature-pill">
291+
<svg viewBox="0 0 24 24" stroke-width="1.75"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
292+
5-Year Warranty
293+
</span>
294+
<span class="feature-pill">
295+
<svg viewBox="0 0 24 24" stroke-width="1.75"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
296+
Free Luxury Box
297+
</span>
298+
<span class="feature-pill">
299+
<svg viewBox="0 0 24 24" stroke-width="1.75"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
300+
Free Returns · 30 Days
301+
</span>
302+
<span class="feature-pill">
303+
<svg viewBox="0 0 24 24" stroke-width="1.75"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
304+
Ships in 2–3 Days
305+
</span>
306+
</div>
307+
</div>
308+
309+
</main>
310+
311+
<script>
312+
// ── Quantity counter ──
313+
let qty = 1;
314+
const qtyVal = document.getElementById('qty-val');
315+
316+
function bumpQty() {
317+
qtyVal.classList.remove('bump');
318+
void qtyVal.offsetWidth; // reflow
319+
qtyVal.classList.add('bump');
320+
setTimeout(() => qtyVal.classList.remove('bump'), 200);
321+
}
322+
323+
document.getElementById('qty-dec').addEventListener('click', () => {
324+
if (qty > 1) { qty--; qtyVal.textContent = qty; bumpQty(); }
325+
});
326+
document.getElementById('qty-inc').addEventListener('click', () => {
327+
qty++; qtyVal.textContent = qty; bumpQty();
328+
});
329+
330+
// ── Add to cart ──
331+
const btnCart = document.getElementById('btn-cart');
332+
const cartLabel = document.getElementById('cart-label');
333+
const cartFeedback = document.getElementById('cart-feedback');
334+
let cartCount = 0;
335+
336+
btnCart.addEventListener('click', () => {
337+
cartCount += qty;
338+
cartLabel.textContent = `${cartCount} in Cart`;
339+
btnCart.classList.add('added');
340+
cartFeedback.classList.add('visible');
341+
setTimeout(() => {
342+
btnCart.classList.remove('added');
343+
cartFeedback.classList.remove('visible');
344+
}, 2200);
345+
});
346+
347+
// ── Wishlist toggle ──
348+
const btnWish = document.getElementById('btn-wishlist');
349+
btnWish.addEventListener('click', () => {
350+
btnWish.classList.toggle('wished');
351+
});
352+
353+
// ── Color swatches ──
354+
const swatchNames = {
355+
midnight: 'Midnight Black',
356+
cognac: 'Cognac',
357+
slate: 'Slate Blue',
358+
silver: 'Silver Mesh'
359+
};
360+
const swatchLabel = document.getElementById('swatch-label');
361+
362+
document.querySelectorAll('.swatch').forEach(sw => {
363+
sw.addEventListener('click', () => {
364+
document.querySelectorAll('.swatch').forEach(s => s.classList.remove('active'));
365+
sw.classList.add('active');
366+
swatchLabel.textContent = '— ' + swatchNames[sw.dataset.color];
367+
});
368+
sw.addEventListener('keydown', e => {
369+
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); sw.click(); }
370+
});
371+
});
372+
373+
// ── Size pills ──
374+
document.querySelectorAll('.size-pill').forEach(pill => {
375+
pill.addEventListener('click', () => {
376+
document.querySelectorAll('.size-pill').forEach(p => p.classList.remove('active'));
377+
pill.classList.add('active');
378+
});
379+
});
380+
381+
// ── Thumbnails ──
382+
document.querySelectorAll('.thumb').forEach(t => {
383+
t.addEventListener('click', () => {
384+
document.querySelectorAll('.thumb').forEach(x => x.classList.remove('active'));
385+
t.classList.add('active');
386+
});
387+
});
388+
</script>
389+
390+
</body>
391+
</html>

0 commit comments

Comments
 (0)