Run details
- Model
- recursive/flint-v1.0:free
- Route
- OpenRouter API, one user message
- Served by
- Recursive
- Reasoning
- provider default, 12,342 reasoning tokens
- Limits
- 60 min · 235,929 output tokens
- Date
- 21 Oct 2026
- Time
- 2 min 11 s
- Size
- 6.5 kB
- Tokens
- 78 in, 17,586 out
- List price
- free (list price $0)
- Paid
- $0 (free route)
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
6.5 kB 170 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 Watch</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 30%, #2a2a2a, #0a0a0a);
font-family: serif;
}
.scene {
width: 90vmin;
max-width: 420px;
padding: 20px;
}
.watch {
width: 100%;
}
svg {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8));
}
</style>
</head>
<body>
<div class="scene">
<div class="watch">
<svg viewBox="0 0 360 720" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="caseGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4a4a4a"/>
<stop offset="100%" stop-color="#111"/>
</radialGradient>
<radialGradient id="bezelGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f9e7a1"/>
<stop offset="40%" stop-color="#d4af37"/>
<stop offset="100%" stop-color="#8a6d1a"/>
</radialGradient>
<radialGradient id="dialGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#222"/>
<stop offset="100%" stop-color="#0a0a0a"/>
</radialGradient>
<linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f9e7a1"/>
<stop offset="50%" stop-color="#d4af37"/>
<stop offset="100%" stop-color="#8a6d1a"/>
</linearGradient>
<linearGradient id="strapGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a1a1a"/>
<stop offset="50%" stop-color="#2a2a2a"/>
<stop offset="100%" stop-color="#1a1a1a"/>
</linearGradient>
</defs>
<!-- Straps -->
<rect x="150" y="0" width="60" height="230" fill="url(#strapGrad)" />
<rect x="150" y="490" width="60" height="230" fill="url(#strapGrad)" />
<!-- Lugs -->
<rect x="140" y="200" width="80" height="20" rx="5" fill="url(#strapGrad)" />
<rect x="140" y="540" width="80" height="20" rx="5" fill="url(#strapGrad)" />
<!-- Case -->
<circle cx="180" cy="360" r="130" fill="url(#caseGrad)" />
<circle cx="180" cy="360" r="125" fill="none" stroke="url(#goldGrad)" stroke-width="4" />
<circle cx="180" cy="360" r="118" fill="url(#bezelGrad)" />
<!-- Dial -->
<circle cx="180" cy="360" r="105" fill="url(#dialGrad)" />
<circle cx="180" cy="360" r="105" fill="none" stroke="url(#goldGrad)" stroke-width="2" />
<!-- Ticks -->
<g id="ticks"></g>
<!-- Hands -->
<g transform="translate(180, 360)">
<g id="hour-hand" class="hand" transform="rotate(0)">
<path d="M -3 0 L -3 -70 L 3 -70 L 3 0 Z" fill="url(#goldGrad)" />
</g>
<g id="minute-hand" class="hand" transform="rotate(0)">
<path d="M -2 0 L -2 -90 L 2 -90 L 2 0 Z" fill="url(#goldGrad)" />
</g>
<g id="second-hand" class="hand" transform="rotate(0)">
<line x1="0" y1="0" x2="0" y2="-90" stroke="#e74c3c" stroke-width="2" />
<line x1="0" y1="12" x2="0" y2="-25" stroke="#e74c3c" stroke-width="2" />
</g>
<circle cx="0" cy="0" r="6" fill="url(#goldGrad)" />
<circle cx="0" cy="0" r="2.5" fill="#111" />
</g>
<!-- Date Window -->
<rect x="255" y="320" width="40" height="80" rx="3" fill="#111" stroke="url(#goldGrad)" stroke-width="2" />
<text id="date-text" x="275" y="360" text-anchor="middle" dominant-baseline="central" font-size="24" fill="url(#goldGrad)" font-family="serif">1</text>
<!-- Hour Markers -->
<text x="180" y="295" text-anchor="middle" dominant-baseline="central" font-size="28" fill="url(#goldGrad)" font-family="serif">12</text>
<text x="245" y="360" text-anchor="middle" dominant-baseline="central" font-size="28" fill="url(#goldGrad)" font-family="serif">3</text>
<text x="180" y="425" text-anchor="middle" dominant-baseline="central" font-size="28" fill="url(#goldGrad)" font-family="serif">6</text>
<text x="115" y="360" text-anchor="middle" dominant-baseline="central" font-size="28" fill="url(#goldGrad)" font-family="serif">9</text>
<!-- Brand -->
<text x="180" y="330" text-anchor="middle" font-size="16" fill="#d4af37" font-family="serif" letter-spacing="3">MERIDIAN</text>
<text x="180" y="352" text-anchor="middle" font-size="10" fill="#d4af37" font-family="serif" letter-spacing="2">AUTOMATIC</text>
<!-- Crown -->
<rect x="300" y="340" width="20" height="40" rx="5" fill="url(#goldGrad)" />
<circle cx="305" cy="360" r="3" fill="#111" />
</svg>
</div>
</div>
<script>
const ticks = document.getElementById('ticks');
for (let i = 0; i < 60; i++) {
const angle = i * 6;
const rad = angle * Math.PI / 180;
const isMajor = (i % 5 === 0);
const length = isMajor ? 10 : 6;
const width = isMajor ? 3 : 1.5;
const x1 = 180 + 88 * Math.sin(rad);
const y1 = 360 - 88 * Math.cos(rad);
const x2 = 180 + (88 + length) * Math.sin(rad);
const y2 = 360 - (88 + length) * Math.cos(rad);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', '#d4af37');
line.setAttribute('stroke-width', width);
line.setAttribute('stroke-linecap', 'round');
ticks.appendChild(line);
}
const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const secondHand = document.getElementById('second-hand');
const dateText = document.getElementById('date-text');
function update() {
const now = new Date();
const ms = now.getMilliseconds();
const h = now.getHours() % 12;
const m = now.getMinutes();
const s = now.getSeconds();
const hourAngle = h * 30 + m * 0.5 + s * (0.5 / 60);
const minuteAngle = m * 6 + s * 0.1 + ms / 10000;
const secondAngle = s * 6 + ms * 0.006;
hourHand.setAttribute('transform', `rotate(${hourAngle})`);
minuteHand.setAttribute('transform', `rotate(${minuteAngle})`);
secondHand.setAttribute('transform', `rotate(${secondAngle})`);
dateText.textContent = now.getDate();
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
