Run details
- Model
- claude-opus-5-5
- Route
- Claude Code CLI
- Reasoning
- provider default
- Limits
- 60 min · 128,000 output tokens
- Date
- 21 Oct 2026
- Time
- 1 min 42 s
- Size
- 15 kB
- Tokens
- 4 in, 10,764 out
- List price
- $0.22 ($4 in / $20 out per M)
- Paid
- Not billed per run (CLI plan)
Exact prompt
Draw a mechanical wristwatch that shows the current local time, with a sweeping seconds hand and a date window. Make it look expensive. It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Save it as index.html in the current directory, then stop. Do not ask questions.
Source
15 kB 302 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Æternum · Calibre 8.21</title>
<style>
html, body { margin: 0; height: 100%; }
body {
background: radial-gradient(ellipse at 50% 40%, #2a2622 0%, #141210 55%, #070606 100%);
display: flex; flex-direction: column; align-items: center; justify-content: center;
overflow: hidden; font-family: "Didot", "Bodoni 72", "Times New Roman", serif;
}
svg { height: 92vh; max-width: 96vw; filter: drop-shadow(0 30px 40px rgba(0,0,0,.65)); }
.caption {
color: #8c7a55; letter-spacing: .45em; font-size: 11px; text-transform: uppercase;
margin-top: -1vh; opacity: .8;
}
</style>
</head>
<body>
<svg id="watch" viewBox="0 0 600 900" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff4c8"/>
<stop offset=".22" stop-color="#d9b25a"/>
<stop offset=".45" stop-color="#8a6524"/>
<stop offset=".62" stop-color="#f3d68a"/>
<stop offset=".8" stop-color="#b48a3a"/>
<stop offset="1" stop-color="#5e4114"/>
</linearGradient>
<linearGradient id="goldV" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#6b4c18"/>
<stop offset=".3" stop-color="#f7dd96"/>
<stop offset=".5" stop-color="#fff7d8"/>
<stop offset=".7" stop-color="#c49a45"/>
<stop offset="1" stop-color="#5a3e12"/>
</linearGradient>
<linearGradient id="goldH" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#5a3e12"/>
<stop offset=".25" stop-color="#e9c977"/>
<stop offset=".5" stop-color="#fff6d2"/>
<stop offset=".75" stop-color="#b8903f"/>
<stop offset="1" stop-color="#4f360f"/>
</linearGradient>
<radialGradient id="caseBody" cx=".35" cy=".3" r=".8">
<stop offset="0" stop-color="#fff1c2"/>
<stop offset=".35" stop-color="#d4ab55"/>
<stop offset=".7" stop-color="#8d6626"/>
<stop offset="1" stop-color="#3f2b0b"/>
</radialGradient>
<linearGradient id="leather" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#120a06"/>
<stop offset=".15" stop-color="#2e1a10"/>
<stop offset=".5" stop-color="#3d2416"/>
<stop offset=".85" stop-color="#2a170d"/>
<stop offset="1" stop-color="#0e0805"/>
</linearGradient>
<pattern id="croc" width="22" height="18" patternUnits="userSpaceOnUse">
<rect width="22" height="18" fill="none"/>
<path d="M1 1h20v16H1z" fill="none" stroke="#000" stroke-opacity=".35" stroke-width="1.2" rx="4"/>
<path d="M3 3h16" stroke="#fff" stroke-opacity=".05" stroke-width="1"/>
</pattern>
<radialGradient id="dialVignette" cx=".5" cy=".5" r=".5">
<stop offset=".6" stop-color="#000" stop-opacity="0"/>
<stop offset="1" stop-color="#000" stop-opacity=".55"/>
</radialGradient>
<linearGradient id="glare" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity=".22"/>
<stop offset=".6" stop-color="#fff" stop-opacity=".03"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<radialGradient id="dateDisc" cx=".5" cy=".5" r=".7">
<stop offset="0" stop-color="#fbf8f0"/>
<stop offset="1" stop-color="#d8d2c2"/>
</radialGradient>
<radialGradient id="crownGrad" cx=".3" cy=".3" r=".9">
<stop offset="0" stop-color="#fff2c4"/>
<stop offset=".5" stop-color="#c39a45"/>
<stop offset="1" stop-color="#4d350e"/>
</radialGradient>
<filter id="handShadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="3" dy="5" stdDeviation="2.5" flood-color="#000" flood-opacity=".55"/>
</filter>
<filter id="appliedShadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="1.2" dy="2" stdDeviation="1" flood-color="#000" flood-opacity=".6"/>
</filter>
<filter id="inset" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur stdDeviation="4"/>
</filter>
<clipPath id="dialClip"><circle cx="300" cy="450" r="172"/></clipPath>
</defs>
<!-- Strap -->
<g>
<path d="M226 0 H374 L370 300 H230 Z" fill="url(#leather)"/>
<path d="M226 0 H374 L370 300 H230 Z" fill="url(#croc)"/>
<path d="M236 0 L240 295 M364 0 L360 295" stroke="#d8c7a0" stroke-opacity=".55" stroke-width="1.3" stroke-dasharray="5 4" fill="none"/>
<path d="M230 600 H370 L374 900 H226 Z" fill="url(#leather)"/>
<path d="M230 600 H370 L374 900 H226 Z" fill="url(#croc)"/>
<path d="M240 605 L236 900 M360 605 L364 900" stroke="#d8c7a0" stroke-opacity=".55" stroke-width="1.3" stroke-dasharray="5 4" fill="none"/>
<rect x="226" y="0" width="148" height="900" fill="url(#leather)" opacity="0"/>
</g>
<!-- Lugs -->
<g fill="url(#goldH)" stroke="#3b2a0c" stroke-width="1">
<path d="M186 330 C188 300 192 275 196 250 Q200 238 214 238 L226 238 Q232 240 232 252 L232 300 Z"/>
<path d="M414 330 C412 300 408 275 404 250 Q400 238 386 238 L374 238 Q368 240 368 252 L368 300 Z"/>
<path d="M186 570 C188 600 192 625 196 650 Q200 662 214 662 L226 662 Q232 660 232 648 L232 600 Z"/>
<path d="M414 570 C412 600 408 625 404 650 Q400 662 386 662 L374 662 Q368 660 368 648 L368 600 Z"/>
</g>
<g stroke="#fff6d6" stroke-opacity=".6" stroke-width="1.4" fill="none">
<path d="M200 300 C202 280 204 262 207 248"/><path d="M400 300 C398 280 396 262 393 248"/>
<path d="M200 600 C202 620 204 638 207 652"/><path d="M400 600 C398 620 396 638 393 652"/>
</g>
<!-- Crown -->
<g>
<rect x="496" y="436" width="16" height="28" rx="3" fill="url(#goldV)" stroke="#3b2a0c"/>
<rect x="508" y="424" width="26" height="52" rx="6" fill="url(#goldV)" stroke="#3b2a0c"/>
<g id="crownRidges" stroke="#4a330d" stroke-width="1.1" stroke-opacity=".8"></g>
<circle cx="534" cy="450" r="0" fill="none"/>
</g>
<!-- Case -->
<circle cx="300" cy="450" r="214" fill="url(#caseBody)" stroke="#2d1f07" stroke-width="2"/>
<circle cx="300" cy="450" r="208" fill="none" stroke="#fff3c6" stroke-opacity=".5" stroke-width="1.5"/>
<!-- Fluted bezel generated -->
<g id="bezel"></g>
<circle cx="300" cy="450" r="186" fill="none" stroke="#3a2808" stroke-width="2"/>
<circle cx="300" cy="450" r="181" fill="url(#gold)" stroke="#2a1d06" stroke-width="1"/>
<!-- Dial -->
<g clip-path="url(#dialClip)">
<g id="sunburst"></g>
<circle cx="300" cy="450" r="172" fill="url(#dialVignette)"/>
<!-- inner shadow from rehaut -->
<circle cx="300" cy="450" r="176" fill="none" stroke="#000" stroke-opacity=".75" stroke-width="10" filter="url(#inset)"/>
</g>
<!-- Minute track -->
<g id="track"></g>
<circle cx="300" cy="450" r="160" fill="none" stroke="#d9c38a" stroke-opacity=".55" stroke-width=".7"/>
<circle cx="300" cy="450" r="149" fill="none" stroke="#d9c38a" stroke-opacity=".35" stroke-width=".5"/>
<!-- Indices -->
<g id="indices" filter="url(#appliedShadow)"></g>
<!-- Date window -->
<g filter="url(#appliedShadow)">
<rect x="404" y="436" width="36" height="28" rx="2.5" fill="url(#gold)" stroke="#3a2808" stroke-width=".8"/>
</g>
<rect x="407" y="439" width="30" height="22" rx="1.5" fill="url(#dateDisc)"/>
<rect x="407" y="439" width="30" height="22" rx="1.5" fill="none" stroke="#000" stroke-opacity=".45" stroke-width="2"/>
<text id="date" x="422" y="456.5" text-anchor="middle" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="15" font-weight="600" fill="#151515" letter-spacing=".5">21</text>
<!-- Dial printing -->
<g fill="#ecd9a4" text-anchor="middle">
<g transform="translate(300 362)" filter="url(#appliedShadow)">
<path d="M0 -18 L9 0 L0 4 L-9 0 Z" fill="url(#gold)" stroke="#5a3e12" stroke-width=".5"/>
<path d="M0 -18 L0 4" stroke="#fff6d2" stroke-width=".6"/>
</g>
<text x="300" y="384" font-size="17" letter-spacing="6" font-family="'Didot','Bodoni 72','Times New Roman',serif">ÆTERNUM</text>
<text x="300" y="397" font-size="6.5" letter-spacing="4" fill-opacity=".75" font-family="'Helvetica Neue',Helvetica,Arial,sans-serif">GENÈVE · 1847</text>
<text x="300" y="514" font-size="8" letter-spacing="3.5" font-style="italic" font-family="'Didot','Bodoni 72','Times New Roman',serif">Automatic</text>
<text x="300" y="526" font-size="5.6" letter-spacing="2.4" fill-opacity=".7" font-family="'Helvetica Neue',Helvetica,Arial,sans-serif">CHRONOMETER · 28 800 A/H</text>
<text x="300" y="604" font-size="4.6" letter-spacing="1.6" fill-opacity=".6" font-family="'Helvetica Neue',Helvetica,Arial,sans-serif">SWISS MADE</text>
</g>
<!-- Hands -->
<g transform="translate(300 450)">
<g id="hourHand" filter="url(#handShadow)">
<path d="M0 -102 L-8.5 -14 L0 12 Z" fill="#fff3c9"/>
<path d="M0 -102 L8.5 -14 L0 12 Z" fill="#a37a2e"/>
<path d="M0 -102 L-8.5 -14 L0 12 L8.5 -14 Z" fill="none" stroke="#4c340c" stroke-width=".6"/>
<path d="M0 -84 L-3.2 -30 L0 -24 L3.2 -30 Z" fill="#f2f0e2" opacity=".9"/>
</g>
<g id="minuteHand" filter="url(#handShadow)">
<path d="M0 -156 L-6.5 -18 L0 14 Z" fill="#fff6d6"/>
<path d="M0 -156 L6.5 -18 L0 14 Z" fill="#a37a2e"/>
<path d="M0 -156 L-6.5 -18 L0 14 L6.5 -18 Z" fill="none" stroke="#4c340c" stroke-width=".6"/>
<path d="M0 -134 L-2.4 -40 L0 -34 L2.4 -40 Z" fill="#f2f0e2" opacity=".9"/>
</g>
<circle r="7" fill="url(#gold)" stroke="#3a2808" stroke-width=".6"/>
<g id="secondHand" filter="url(#handShadow)">
<path d="M-.9 44 L-.7 -164 L.7 -164 L.9 44 Z" fill="url(#goldH)"/>
<rect x="-2.2" y="20" width="4.4" height="26" rx="2" fill="url(#goldH)"/>
<circle cx="0" cy="-128" r="3.2" fill="#f2f0e2" stroke="#b08a3c" stroke-width="1"/>
</g>
<circle r="3.6" fill="url(#goldV)" stroke="#3a2808" stroke-width=".5"/>
<circle r="1.2" fill="#2a1d06"/>
</g>
<!-- Crystal -->
<g clip-path="url(#dialClip)" pointer-events="none">
<path d="M128 450 A172 172 0 0 1 472 450 Q300 380 128 450 Z" fill="url(#glare)"/>
<ellipse cx="236" cy="330" rx="70" ry="18" transform="rotate(-32 236 330)" fill="#fff" opacity=".05"/>
</g>
</svg>
<div class="caption">Æternum · Calibre 8.21 · Automatique</div>
<script>
(function () {
const NS = 'http://www.w3.org/2000/svg';
const CX = 300, CY = 450;
const el = (tag, attrs, parent) => {
const n = document.createElementNS(NS, tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
if (parent) parent.appendChild(n);
return n;
};
const pol = (r, a) => [CX + r * Math.sin(a), CY - r * Math.cos(a)];
const mix = (a, b, t) => a.map((v, i) => Math.round(v + (b[i] - v) * t));
const rgb = c => `rgb(${c[0]},${c[1]},${c[2]})`;
const LIGHT = -Math.PI / 4; // light from upper-left
// Sunburst dial: radial wedges whose brightness follows a two-lobe reflection
const sun = document.getElementById('sunburst');
const N = 360;
for (let i = 0; i < N; i++) {
const a0 = (i / N) * Math.PI * 2, a1 = ((i + 1.6) / N) * Math.PI * 2;
const t = Math.pow((Math.cos(2 * (a0 - LIGHT)) + 1) / 2, 2.2) * 0.85 + ((i * 7919) % 13) / 13 * 0.15;
const c = mix([6, 18, 40], [52, 92, 150], t);
const [x0, y0] = pol(180, a0), [x1, y1] = pol(180, a1);
el('path', { d: `M${CX} ${CY} L${x0} ${y0} L${x1} ${y1} Z`, fill: rgb(c) }, sun);
}
// Fluted bezel
const bez = document.getElementById('bezel');
const F = 72;
for (let i = 0; i < F; i++) {
const a0 = (i / F) * Math.PI * 2, am = ((i + .5) / F) * Math.PI * 2, a1 = ((i + 1) / F) * Math.PI * 2;
const l = (Math.cos(am - LIGHT) + 1) / 2;
const dark = [70, 48, 14], light = [255, 240, 190];
const c1 = mix(dark, light, Math.min(1, l * 1.05 + .15));
const c2 = mix(dark, light, l * .45);
const p = (r, a) => pol(r, a).join(' ');
el('path', { d: `M${p(186, a0)} L${p(205, a0)} L${p(205, am)} L${p(186, am)} Z`, fill: rgb(c1) }, bez);
el('path', { d: `M${p(186, am)} L${p(205, am)} L${p(205, a1)} L${p(186, a1)} Z`, fill: rgb(c2) }, bez);
}
el('circle', { cx: CX, cy: CY, r: 205, fill: 'none', stroke: '#2d1f07', 'stroke-width': 1.2 }, bez);
// Minute track
const track = document.getElementById('track');
for (let i = 0; i < 60; i++) {
const a = i / 60 * Math.PI * 2;
const major = i % 5 === 0;
const [x0, y0] = pol(major ? 150 : 153, a), [x1, y1] = pol(160, a);
el('line', { x1: x0, y1: y0, x2: x1, y2: y1, stroke: '#e6d29c',
'stroke-opacity': major ? .9 : .6, 'stroke-width': major ? 1.4 : .7 }, track);
}
for (let i = 0; i < 240; i++) {
if (i % 4 === 0) continue;
const a = i / 240 * Math.PI * 2;
const [x0, y0] = pol(158, a), [x1, y1] = pol(160, a);
el('line', { x1: x0, y1: y0, x2: x1, y2: y1, stroke: '#e6d29c', 'stroke-opacity': .35, 'stroke-width': .4 }, track);
}
// Applied faceted baton indices
const idx = document.getElementById('indices');
const baton = (deg, dx, w) => {
const g = el('g', { transform: `rotate(${deg} ${CX} ${CY}) translate(${CX + dx} ${CY})` }, idx);
const top = -144, bot = -110;
el('path', { d: `M${-w / 2} ${bot} L${-w / 2} ${top + 2} L0 ${top} L0 ${bot + 2} Z`, fill: '#fff1c4' }, g);
el('path', { d: `M${w / 2} ${bot} L${w / 2} ${top + 2} L0 ${top} L0 ${bot + 2} Z`, fill: '#9c7429' }, g);
el('rect', { x: -w / 2, y: top, width: w, height: bot - top, fill: 'none', stroke: '#4a330d', 'stroke-width': .5 }, g);
el('rect', { x: -1.1, y: top + 5, width: 2.2, height: bot - top - 10, fill: '#f0eee0', opacity: .92 }, g);
};
for (let h = 0; h < 12; h++) {
if (h === 3) continue; // date window
if (h === 0) { baton(0, -6.5, 8); baton(0, 6.5, 8); }
else baton(h * 30, 0, (h % 3 === 0) ? 10 : 7.5);
}
// Crown ridges
const cr = document.getElementById('crownRidges');
for (let y = 427; y <= 473; y += 3) el('line', { x1: 509, y1: y, x2: 533, y2: y }, cr);
// Motion: 28,800 vph → 8 beats per second
const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
const dateEl = document.getElementById('date');
let lastDate = -1;
function frame() {
const now = new Date();
const ms = now.getMilliseconds();
const s = now.getSeconds() + Math.floor(ms / 125) / 8;
const m = now.getMinutes() + s / 60;
const h = (now.getHours() % 12) + m / 60;
secondHand.setAttribute('transform', `rotate(${s * 6})`);
minuteHand.setAttribute('transform', `rotate(${m * 6})`);
hourHand.setAttribute('transform', `rotate(${h * 30})`);
const d = now.getDate();
if (d !== lastDate) { dateEl.textContent = d; lastDate = d; }
requestAnimationFrame(frame);
}
frame();
})();
</script>
</body>
</html>
