Run details
- Model
- reflection/beam-1.0-501b-a23b
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 6,340 reasoning tokens
- Limits
- 60 min · 600,000 output tokens
- Date
- 21 Oct 2026
- Time
- 30 s
- Size
- 12 kB
- Tokens
- 121 in, 11,096 out
- List price
- $0.011 ($0.3 in / $1 out per M)
- Paid
- $0.011
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 325 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>
:root {
--bg-1: #151a24;
--bg-2: #05070c;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
min-height: 100%;
background: radial-gradient(circle at 50% 35%, var(--bg-1), var(--bg-2) 72%);
color: #e9e4d6;
font-family: "Times New Roman", "Didot", Georgia, serif;
overflow: hidden;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
padding: 24px;
}
.stage {
width: min(92vw, 760px);
aspect-ratio: 1 / 1;
position: relative;
}
svg {
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.55));
}
.caption {
position: absolute;
left: 50%;
bottom: -2.2rem;
transform: translateX(-50%);
font-size: 0.72rem;
letter-spacing: 0.38em;
text-transform: uppercase;
color: rgba(212, 175, 55, 0.72);
white-space: nowrap;
}
</style>
</head>
<body>
<div class="stage">
<svg id="watchSvg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mechanical wristwatch showing the current local time">
<defs>
<radialGradient id="pageBg" cx="50%" cy="40%" r="70%">
<stop offset="0" stop-color="#1a2030"/>
<stop offset="1" stop-color="#05060a"/>
</radialGradient>
<linearGradient id="gold" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff0b8"/>
<stop offset="18%" stop-color="#e6c86a"/>
<stop offset="42%" stop-color="#b88922"/>
<stop offset="62%" stop-color="#d4af37"/>
<stop offset="82%" stop-color="#8a6412"/>
<stop offset="100%" stop-color="#f3dd8a"/>
</linearGradient>
<linearGradient id="goldEdge" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f7e7a1"/>
<stop offset="50%" stop-color="#a87418"/>
<stop offset="100%" stop-color="#f7e7a1"/>
</linearGradient>
<radialGradient id="dial" cx="40%" cy="34%" r="78%">
<stop offset="0%" stop-color="#24437f"/>
<stop offset="34%" stop-color="#102453"/>
<stop offset="72%" stop-color="#07122d"/>
<stop offset="100%" stop-color="#020611"/>
</radialGradient>
<linearGradient id="silverHand" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="45%" stop-color="#dde3f0"/>
<stop offset="100%" stop-color="#8f99b5"/>
</linearGradient>
<linearGradient id="steelBlue" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#6aa8ff"/>
<stop offset="50%" stop-color="#1f4f95"/>
<stop offset="100%" stop-color="#0b2148"/>
</linearGradient>
<linearGradient id="leather" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#3b2418"/>
<stop offset="45%" stop-color="#1f120b"/>
<stop offset="100%" stop-color="#3b2418"/>
</linearGradient>
<radialGradient id="crystal" cx="34%" cy="28%" r="62%">
<stop offset="0%" stop-color="rgba(255,255,255,0.42)"/>
<stop offset="24%" stop-color="rgba(255,255,255,0.12)"/>
<stop offset="58%" stop-color="rgba(255,255,255,0.03)"/>
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
</radialGradient>
<radialGradient id="cyclops" cx="38%" cy="32%" r="70%">
<stop offset="0%" stop-color="rgba(255,255,255,0.55)"/>
<stop offset="35%" stop-color="rgba(255,255,255,0.16)"/>
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
</radialGradient>
<pattern id="guilloche" patternUnits="userSpaceOnUse" width="7" height="7" patternTransform="rotate(45)">
<line x1="0" y1="0" x2="0" y2="7" stroke="rgba(255,255,255,0.045)" stroke-width="0.55"/>
</pattern>
<pattern id="leatherTexture" patternUnits="userSpaceOnUse" width="5" height="5">
<circle cx="1" cy="1" r="0.35" fill="rgba(255,255,255,0.035)"/>
<circle cx="4" cy="4" r="0.3" fill="rgba(0,0,0,0.18)"/>
</pattern>
<filter id="softShadow" x="-25%" y="-25%" width="150%" height="150%">
<feDropShadow dx="0" dy="10" stdDeviation="12" flood-color="#000000" flood-opacity="0.5"/>
</filter>
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000000" flood-opacity="0.35"/>
</filter>
</defs>
<rect width="500" height="500" fill="url(#pageBg)"/>
<g filter="url(#softShadow)">
<!-- Strap -->
<rect x="215" y="8" width="70" height="128" rx="12" fill="url(#leather)"/>
<rect x="215" y="8" width="70" height="128" rx="12" fill="url(#leatherTexture)"/>
<rect x="215" y="364" width="70" height="128" rx="12" fill="url(#leather)"/>
<rect x="215" y="364" width="70" height="128" rx="12" fill="url(#leatherTexture)"/>
<!-- Lugs -->
<rect x="205" y="72" width="90" height="22" rx="6" fill="url(#gold)"/>
<rect x="205" y="406" width="90" height="22" rx="6" fill="url(#gold)"/>
<!-- Case -->
<circle cx="250" cy="250" r="192" fill="url(#gold)"/>
<circle cx="250" cy="250" r="184" fill="#0a0d14"/>
<circle cx="250" cy="250" r="181" fill="url(#goldEdge)"/>
<circle cx="250" cy="250" r="170" fill="#07101f"/>
<circle cx="250" cy="250" r="150" fill="url(#dial)"/>
<circle cx="250" cy="250" r="150" fill="url(#guilloche)"/>
<!-- Rehaut / minute track -->
<g id="ticks"></g>
<circle cx="250" cy="250" r="150" fill="none" stroke="rgba(212,175,55,0.55)" stroke-width="1.2"/>
<circle cx="250" cy="250" r="168" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
<!-- Sunburst rays -->
<g id="sunburst" opacity="0.45"></g>
<!-- Hour markers -->
<g id="indices"></g>
<!-- Brand and numerals -->
<text x="250" y="104" text-anchor="middle" font-size="15" font-weight="700" letter-spacing="3" fill="#d4af37">AURUM</text>
<text x="250" y="126" text-anchor="middle" font-size="16" font-weight="700" fill="#e8d9a8">XII</text>
<text x="250" y="392" text-anchor="middle" font-size="16" font-weight="700" fill="#e8d9a8">VI</text>
<text x="118" y="256" text-anchor="middle" font-size="16" font-weight="700" fill="#e8d9a8">IX</text>
<text x="250" y="405" text-anchor="middle" font-size="8.5" letter-spacing="2.2" fill="rgba(212,175,55,0.72)">AUTOMATIC</text>
<text x="250" y="418" text-anchor="middle" font-size="7.5" letter-spacing="1.8" fill="rgba(232,217,168,0.55)">SWISS MADE</text>
<!-- Date window -->
<g transform="translate(0,0)">
<rect x="330" y="236" width="44" height="30" rx="4" fill="#f4f0de" stroke="#b9943a" stroke-width="1.2"/>
<text id="dateText" x="352" y="258" text-anchor="middle" font-size="19" font-weight="700" fill="#101010">01</text>
<ellipse cx="352" cy="251" rx="29" ry="22" fill="url(#cyclops)" stroke="rgba(255,255,255,0.45)" stroke-width="1.2"/>
<ellipse cx="344" cy="243" rx="8" ry="5" fill="rgba(255,255,255,0.35)"/>
</g>
<!-- Hands -->
<g id="hourHand" transform="rotate(0 250 250)">
<path d="M 246 250 L 242 172 Q 250 150 258 172 L 254 250 Z" fill="url(#silverHand)" stroke="rgba(255,255,255,0.35)" stroke-width="0.5"/>
</g>
<g id="minuteHand" transform="rotate(0 250 250)">
<path d="M 248 250 L 246 132 Q 250 108 254 132 L 252 250 Z" fill="url(#silverHand)" stroke="rgba(255,255,255,0.35)" stroke-width="0.5"/>
</g>
<g id="secondHand" transform="rotate(0 250 250)">
<line x1="250" y1="286" x2="250" y2="104" stroke="url(#steelBlue)" stroke-width="1.35" stroke-linecap="round"/>
<circle cx="250" cy="250" r="4.2" fill="url(#gold)" stroke="#7a5a12" stroke-width="0.6"/>
<circle cx="250" cy="104" r="2.2" fill="#d94a4a"/>
</g>
<!-- Center cap -->
<circle cx="250" cy="250" r="7.5" fill="url(#gold)" stroke="#7a5a12" stroke-width="0.8"/>
<circle cx="250" cy="250" r="3.2" fill="#8b1a1a"/>
<!-- Crystal highlight -->
<circle cx="250" cy="250" r="170" fill="url(#crystal)"/>
<ellipse cx="210" cy="185" rx="72" ry="34" fill="rgba(255,255,255,0.08)" transform="rotate(-22 210 185)"/>
<!-- Crown -->
<g transform="translate(438,250)">
<rect x="-6" y="-16" width="20" height="32" rx="4" fill="url(#gold)"/>
<rect x="10" y="-13" width="16" height="26" rx="3" fill="url(#goldEdge)"/>
<line x1="13" y1="-8" x2="23" y2="-8" stroke="rgba(90,60,10,0.55)" stroke-width="1"/>
<line x1="13" y1="-3" x2="23" y2="-3" stroke="rgba(90,60,10,0.55)" stroke-width="1"/>
<line x1="13" y1="2" x2="23" y2="2" stroke="rgba(90,60,10,0.55)" stroke-width="1"/>
<line x1="13" y1="7" x2="23" y2="7" stroke="rgba(90,60,10,0.55)" stroke-width="1"/>
</g>
</g>
</svg>
<div class="caption">AURUM · AUTOMATIC · SWISS MADE</div>
</div>
<script>
(function () {
const cx = 250;
const cy = 250;
const svgNS = 'http://www.w3.org/2000/svg';
function polar(radius, degrees) {
const radians = (degrees - 90) * Math.PI / 180;
return {
x: cx + Math.cos(radians) * radius,
y: cy + Math.sin(radians) * radius
};
}
function makeLine(x1, y1, x2, y2, stroke, width, opacity) {
const line = document.createElementNS(svgNS, 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', stroke);
line.setAttribute('stroke-width', width);
if (opacity !== undefined) line.setAttribute('opacity', opacity);
line.setAttribute('stroke-linecap', 'round');
return line;
}
function makeRect(x, y, width, height, rx, fill, transform) {
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('x', x);
rect.setAttribute('y', y);
rect.setAttribute('width', width);
rect.setAttribute('height', height);
rect.setAttribute('rx', rx);
rect.setAttribute('fill', fill);
if (transform) rect.setAttribute('transform', transform);
return rect;
}
// Minute ticks and hour markers
const ticksGroup = document.getElementById('ticks');
for (let i = 0; i < 60; i++) {
const angle = i * 6;
const isHour = i % 5 === 0;
const outer = polar(166, angle);
const inner = polar(isHour ? 150 : 158, angle);
const tick = makeLine(
outer.x, outer.y, inner.x, inner.y,
isHour ? 'rgba(212,175,55,0.95)' : 'rgba(235,235,245,0.34)',
isHour ? 2.1 : 0.9
);
ticksGroup.appendChild(tick);
}
const indicesGroup = document.getElementById('indices');
for (let i = 0; i < 12; i++) {
if (i === 3) continue; // date window occupies this position
const angle = i * 30;
const marker = makeRect(cx - 3.2, cy - 145, 6.4, 24, 2.2, 'url(#gold)',
'rotate(' + angle + ' ' + cx + ' ' + cy + ')');
marker.setAttribute('filter', 'url(#innerShadow)');
indicesGroup.appendChild(marker);
}
// Subtle sunburst
const sunburstGroup = document.getElementById('sunburst');
for (let i = 0; i < 72; i++) {
const angle = i * 5;
const inner = polar(18, angle);
const outer = polar(148, angle);
const ray = makeLine(inner.x, inner.y, outer.x, outer.y, 'rgba(255,255,255,0.06)', 0.45);
sunburstGroup.appendChild(ray);
}
const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
const dateText = document.getElementById('dateText');
function setHand(element, degrees) {
element.setAttribute('transform', 'rotate(' + degrees + ' ' + cx + ' ' + cy + ')');
}
function update() {
const now = new Date();
const milliseconds = now.getMilliseconds();
const seconds = now.getSeconds() + milliseconds / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
setHand(hourHand, hours * 30);
setHand(minuteHand, minutes * 6);
setHand(secondHand, seconds * 6);
dateText.textContent = String(now.getDate()).padStart(2, '0');
requestAnimationFrame(update);
}
update();
})();
</script>
</body>
</html>
