Run details
- Model
- inception/mercury-3
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 28,973 reasoning tokens
- Limits
- 60 min · 131,072 output tokens
- Date
- 21 Oct 2026
- Time
- 70 s
- Size
- 12 kB
- Tokens
- 73 in, 33,083 out
- List price
- $0.012 ($0.1 in / $0.35 out per M)
- Paid
- $0.012
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). Reply with the file in a single ```html code block.
Source
12 kB 286 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mechanical Wristwatch</title>
<style>
html, body {
margin: 0;
padding: 0;
min-height: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
#watchSvg {
display: block;
width: min(96vw, 96vh);
height: min(96vw, 96vh);
border-radius: 50%;
box-shadow: 0 30px 60px rgba(0, 0, 0, .8);
}
</style>
</head>
<body>
<svg id="watchSvg" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="bgGrad" cx="50%" cy="42%" r="75%">
<stop offset="0%" stop-color="#1d1d1f"/>
<stop offset="60%" stop-color="#0a0a0b"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
<filter id="shadowBig" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="18" stdDeviation="15" flood-color="#000" flood-opacity="0.65"/>
</filter>
<filter id="handShadow" x="-40%" y="-40%" width="180%" height="180%">
<feDropShadow dx="3" dy="5" stdDeviation="4" flood-color="#000" flood-opacity="0.55"/>
</filter>
<linearGradient id="caseGrad" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#f7f7f7"/>
<stop offset="25%" stop-color="#c8c8c8"/>
<stop offset="50%" stop-color="#7d7d7d"/>
<stop offset="72%" stop-color="#414141"/>
<stop offset="85%" stop-color="#9a9a9a"/>
<stop offset="100%" stop-color="#e0e0e0"/>
</linearGradient>
<linearGradient id="bezelGold" x1="15%" y1="0%" x2="85%" y2="100%">
<stop offset="0%" stop-color="#ffedb0"/>
<stop offset="20%" stop-color="#f5d97b"/>
<stop offset="45%" stop-color="#caa033"/>
<stop offset="70%" stop-color="#f9e08a"/>
<stop offset="100%" stop-color="#a17c1a"/>
</linearGradient>
<linearGradient id="markerGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#faf0c0"/>
<stop offset="40%" stop-color="#e8c76a"/>
<stop offset="100%" stop-color="#b8902a"/>
</linearGradient>
<radialGradient id="dialGrad" cx="50%" cy="40%" r="70%">
<stop offset="0%" stop-color="#21456a"/>
<stop offset="30%" stop-color="#152c47"/>
<stop offset="65%" stop-color="#0a1727"/>
<stop offset="100%" stop-color="#03070d"/>
</radialGradient>
<linearGradient id="handGold" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#e8c96a"/>
<stop offset="50%" stop-color="#fef2c0"/>
<stop offset="100%" stop-color="#bf962e"/>
</linearGradient>
<radialGradient id="lensGrad" cx="38%" cy="30%" r="60%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.02"/>
</radialGradient>
<linearGradient id="reflectionGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- Studio background -->
<rect width="1000" height="1000" fill="url(#bgGrad)" />
<!-- Case & bezel -->
<g id="caseGroup">
<circle cx="500" cy="500" r="360" fill="#050505" filter="url(#shadowBig)" />
<circle cx="500" cy="500" r="353" fill="url(#caseGrad)" stroke="#666" stroke-width="1.5"/>
<circle cx="500" cy="500" r="338" fill="none" stroke="#222" stroke-width="2"/>
<circle cx="500" cy="500" r="314" fill="none" stroke="#888" stroke-width="1"/>
<circle cx="500" cy="500" r="331" fill="none" stroke="url(#bezelGold)" stroke-width="34"/>
<circle cx="500" cy="500" r="348" fill="none" stroke="#caa53e" stroke-width="1"/>
<circle cx="500" cy="500" r="313" fill="none" stroke="#6b4d10" stroke-width="1.5"/>
<path d="M 206,330 A 340,340 0 0 1 616,180" fill="none" stroke="#ffffff" stroke-width="10" opacity="0.16" stroke-linecap="round"/>
</g>
<!-- Crown -->
<g id="crownGroup">
<rect x="852" y="440" width="18" height="120" rx="3" fill="#8a6a20" stroke="#4d360a" stroke-width="1.5"/>
<rect x="870" y="425" width="36" height="150" rx="8" fill="url(#bezelGold)" stroke="#6b4d10" stroke-width="1.5"/>
<line x1="879" y1="438" x2="879" y2="562" stroke="#7a5c19" stroke-width="2.5"/>
<line x1="890" y1="438" x2="890" y2="562" stroke="#7a5c19" stroke-width="2.5"/>
<line x1="899" y1="438" x2="899" y2="562" stroke="#7a5c19" stroke-width="2.5"/>
<path d="M 872,432 Q 878,424 884,432 L 884,568 Q 878,576 872,568 Z" fill="#ffffff" opacity="0.25"/>
</g>
<!-- Dial -->
<g id="dialGroup">
<circle cx="500" cy="500" r="306" fill="url(#dialGrad)" />
<g id="sunburst"></g>
<g id="guilloche" fill="none" stroke="#89a6c2" stroke-opacity="0.06"></g>
<circle cx="500" cy="500" r="268" fill="none" stroke="#e6cf8e" stroke-opacity="0.45" stroke-width="0.8"/>
<circle cx="500" cy="500" r="284" fill="none" stroke="#e6cf8e" stroke-opacity="0.45" stroke-width="0.8"/>
</g>
<g id="markersGroup"></g>
<!-- Date window -->
<g id="windowGroup">
<rect x="694" y="478" width="68" height="44" rx="7" fill="#f9f8f3" stroke="#9a958a" stroke-width="1.5" filter="url(#handShadow)"/>
<rect x="698" y="482" width="60" height="36" rx="5" fill="none" stroke="#d0cbc0" stroke-width="0.8"/>
<text id="dateText" x="728" y="512" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="27" font-weight="bold" fill="#151515">28</text>
<circle cx="728" cy="500" r="47" fill="url(#lensGrad)" opacity="0.6" pointer-events="none"/>
</g>
<!-- Branding & dial text -->
<g id="textGroup">
<text x="500" y="308" text-anchor="middle" font-family="'Times New Roman', Times, serif" font-size="30" font-weight="bold" letter-spacing="6" fill="#f5d97b">MERCURY</text>
<text x="500" y="340" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15" letter-spacing="4" fill="#94a7bd">AUTOMATIQUE</text>
<text x="500" y="652" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" letter-spacing="2" fill="#94a7bd">27 JEWELS</text>
<text x="500" y="674" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="10" letter-spacing="2" fill="#94a7bd">SWISS MADE</text>
</g>
<!-- Hands -->
<g id="handsGroup">
<g id="hourHand" transform="rotate(0 500 500)">
<polygon points="491,532 509,532 505,320 500,298 495,320" fill="url(#handGold)" stroke="#7a5c19" stroke-width="0.8" filter="url(#handShadow)"/>
</g>
<g id="minuteHand" transform="rotate(0 500 500)">
<polygon points="494,524 506,524 503,262 500,242 497,262" fill="url(#handGold)" stroke="#6b4d10" stroke-width="0.8" filter="url(#handShadow)"/>
</g>
<g id="secondHand" transform="rotate(0 500 500)">
<line x1="500" y1="572" x2="500" y2="225" stroke="#d61f26" stroke-width="2.5" stroke-linecap="round" filter="url(#handShadow)"/>
<circle cx="500" cy="575" r="11" fill="#d61f26" stroke="#a0141a" stroke-width="1"/>
</g>
</g>
<!-- Center cap -->
<g id="centerCap">
<circle cx="500" cy="500" r="17" fill="url(#bezelGold)" stroke="#6b4d10" stroke-width="1.5" filter="url(#handShadow)"/>
<circle cx="500" cy="500" r="7" fill="#f5d97b"/>
<circle cx="500" cy="500" r="2.5" fill="#7a5c19"/>
</g>
<!-- Sapphire crystal reflections -->
<g id="reflectionGroup" pointer-events="none">
<ellipse cx="370" cy="315" rx="200" ry="280" fill="url(#reflectionGrad)" opacity="0.18" transform="rotate(-35 370 315)"/>
<ellipse cx="650" cy="700" rx="90" ry="120" fill="url(#reflectionGrad)" opacity="0.08" transform="rotate(25 650 700)"/>
</g>
</svg>
<script>
(function () {
var NS = 'http://www.w3.org/2000/svg';
// Sunburst dial texture
var sb = document.getElementById('sunburst');
var rays = 144;
var r = 305;
for (var i = 0; i < rays; i++) {
var a0 = i * (2 * Math.PI / rays);
var a1 = (i + 1) * (2 * Math.PI / rays);
var x0 = 500 + r * Math.sin(a0);
var y0 = 500 - r * Math.cos(a0);
var x1 = 500 + r * Math.sin(a1);
var y1 = 500 - r * Math.cos(a1);
var path = document.createElementNS(NS, 'path');
var d = 'M500,500 L' + x0.toFixed(2) + ',' + y0.toFixed(2) +
' A' + r + ',' + r + ' 0 0 1 ' + x1.toFixed(2) + ',' + y1.toFixed(2) + ' Z';
path.setAttribute('d', d);
path.setAttribute('fill', '#ffffff');
path.setAttribute('opacity', i % 2 === 0 ? '0.035' : '0.015');
sb.appendChild(path);
}
// Guilloche rings
var g = document.getElementById('guilloche');
for (var rr = 20; rr <= 300; rr += 14) {
var c = document.createElementNS(NS, 'circle');
c.setAttribute('cx', '500');
c.setAttribute('cy', '500');
c.setAttribute('r', rr);
g.appendChild(c);
}
// Minute and hour markers
var mk = document.getElementById('markersGroup');
// Minute track
for (var t = 0; t < 60; t++) {
var ang = t * 6 * Math.PI / 180;
var inner = 266;
var outer = 282;
if (t % 5 === 0) { inner = 260; outer = 284; }
var x1 = 500 + inner * Math.sin(ang);
var y1 = 500 - inner * Math.cos(ang);
var x2 = 500 + outer * Math.sin(ang);
var y2 = 500 - outer * Math.cos(ang);
var line = document.createElementNS(NS, 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', '#e6cf8e');
line.setAttribute('stroke-width', t % 5 === 0 ? '3.2' : '1.2');
line.setAttribute('stroke-linecap', 'round');
mk.appendChild(line);
}
// Hour markers (skip 3 o'clock where the date window sits)
for (var h = 0; h < 12; h++) {
if (h === 3) continue;
var ha = h * 30 * Math.PI / 180;
var rx = Math.sin(ha), ry = -Math.cos(ha);
var px = Math.cos(ha), py = Math.sin(ha);
var r1 = 225, r2 = 258, tip = 10, w = 7.5;
var p1x = 500 + r1 * rx + w * px;
var p1y = 500 + r1 * ry + w * py;
var p2x = 500 + r2 * rx + w * px;
var p2y = 500 + r2 * ry + w * py;
var p3x = 500 + (r2 + tip) * rx;
var p3y = 500 + (r2 + tip) * ry;
var p4x = 500 + r2 * rx - w * px;
var p4y = 500 + r2 * ry - w * py;
var p5x = 500 + r1 * rx - w * px;
var p5y = 500 + r1 * ry - w * py;
var poly = document.createElementNS(NS, 'polygon');
poly.setAttribute('points',
p1x.toFixed(1) + ',' + p1y.toFixed(1) + ' ' +
p2x.toFixed(1) + ',' + p2y.toFixed(1) + ' ' +
p3x.toFixed(1) + ',' + p3y.toFixed(1) + ' ' +
p4x.toFixed(1) + ',' + p4y.toFixed(1) + ' ' +
p5x.toFixed(1) + ',' + p5y.toFixed(1)
);
poly.setAttribute('fill', 'url(#markerGrad)');
poly.setAttribute('stroke', '#9c7a2a');
poly.setAttribute('stroke-width', '1');
poly.setAttribute('filter', 'url(#handShadow)');
mk.appendChild(poly);
}
// Real-time clock update
function updateClock() {
var now = new Date();
var h = now.getHours() % 12;
var m = now.getMinutes();
var s = now.getSeconds();
var ms = now.getMilliseconds();
var totalSeconds = s + ms / 1000;
var secAngle = totalSeconds * 6;
var minAngle = (m + totalSeconds / 60) * 6;
var hourAngle = (h + (m + totalSeconds / 60) / 60) * 30;
document.getElementById('hourHand').setAttribute('transform', 'rotate(' + hourAngle + ' 500 500)');
document.getElementById('minuteHand').setAttribute('transform', 'rotate(' + minAngle + ' 500 500)');
document.getElementById('secondHand').setAttribute('transform', 'rotate(' + secAngle + ' 500 500)');
document.getElementById('dateText').textContent = now.getDate();
requestAnimationFrame(updateClock);
}
requestAnimationFrame(updateClock);
})();
</script>
</body>
</html>
