Run details
- Model
- anthropic/claude-haiku-5.5
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 2,918 reasoning tokens
- Limits
- 60 min · 128,000 output tokens
- Date
- 21 Oct 2026
- Time
- 34 s
- Size
- 9.4 kB
- Tokens
- 124 in, 7,632 out
- List price
- $0.004 ($0.1 in / $0.5 out per M)
- Paid
- $0.004
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
9.4 kB 246 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelon Chronometer</title>
<style>
html, body {
margin: 0;
height: 100%;
background: radial-gradient(ellipse at 50% 35%, #26262b 0%, #101013 60%, #050506 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
svg {
width: min(92vw, 520px);
height: auto;
filter: drop-shadow(0 30px 40px rgba(0,0,0,0.75));
}
.brand {
font-family: Georgia, "Times New Roman", serif;
letter-spacing: 6px;
}
</style>
</head>
<body>
<svg viewBox="0 0 500 580" xmlns="http://www.w3.org/2000/svg" aria-label="Wristwatch showing local time">
<defs>
<!-- Polished gold case -->
<linearGradient id="goldCase" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fbeec2"/>
<stop offset="25%" stop-color="#c99a45"/>
<stop offset="50%" stop-color="#7a5620"/>
<stop offset="75%" stop-color="#e2b865"/>
<stop offset="100%" stop-color="#5b3e14"/>
</linearGradient>
<linearGradient id="goldLug" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#6e4c18"/>
<stop offset="40%" stop-color="#f4dc9a"/>
<stop offset="60%" stop-color="#c58f3a"/>
<stop offset="100%" stop-color="#5a3c12"/>
</linearGradient>
<linearGradient id="goldHand" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#8a6324"/>
<stop offset="45%" stop-color="#fbe7a6"/>
<stop offset="55%" stop-color="#d9a955"/>
<stop offset="100%" stop-color="#6b4a18"/>
</linearGradient>
<radialGradient id="dialFace" cx="50%" cy="42%" r="60%">
<stop offset="0%" stop-color="#2c2e35"/>
<stop offset="70%" stop-color="#15161a"/>
<stop offset="100%" stop-color="#08080a"/>
</radialGradient>
<radialGradient id="glassSheen" cx="32%" cy="22%" r="60%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.22"/>
<stop offset="40%" stop-color="#ffffff" stop-opacity="0.04"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<linearGradient id="strapFill" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1b1410"/>
<stop offset="100%" stop-color="#040303"/>
</linearGradient>
<filter id="handShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="3" stdDeviation="2.2" flood-color="#000" flood-opacity="0.6"/>
</filter>
</defs>
<!-- Everything is drawn relative to the dial centre (250, 290) -->
<g transform="translate(250 290)">
<!-- Leather strap hints (behind the case) -->
<path d="M -95 -150 Q -110 -230 -80 -300 L 80 -300 Q 110 -230 95 -150 Z" fill="url(#strapFill)" opacity="0"/>
<rect x="-82" y="-236" width="164" height="116" rx="18" fill="url(#strapFill)"/>
<rect x="-82" y="120" width="164" height="116" rx="18" fill="url(#strapFill)"/>
<!-- Lugs -->
<rect x="-46" y="-232" width="92" height="70" rx="14" fill="url(#goldLug)" stroke="#2a1d08" stroke-width="1.5"/>
<rect x="-46" y="162" width="92" height="70" rx="14" fill="url(#goldLug)" stroke="#2a1d08" stroke-width="1.5"/>
<!-- Crown and stem -->
<rect x="186" y="-14" width="22" height="28" rx="4" fill="url(#goldLug)" stroke="#2a1d08" stroke-width="1"/>
<rect x="200" y="-9" width="12" height="18" rx="2" fill="#3a2810"/>
<g id="crownRidges" stroke="#2a1d08" stroke-width="1" opacity="0.7">
<line x1="192" y1="-12" x2="192" y2="12"/>
<line x1="197" y1="-12" x2="197" y2="12"/>
<line x1="202" y1="-12" x2="202" y2="12"/>
</g>
<!-- Case body -->
<g filter="url(#handShadow)">
<circle r="190" fill="url(#goldCase)" stroke="#2a1d08" stroke-width="2"/>
</g>
<!-- Brushed bezel ring -->
<circle r="176" fill="none" stroke="#fff3c9" stroke-opacity="0.25" stroke-width="2"/>
<circle r="168" fill="#0d0d0f" stroke="#3b2a12" stroke-width="2"/>
<!-- Dial -->
<circle r="160" fill="url(#dialFace)"/>
<!-- Guilloché engraving pattern -->
<g id="guilloche" fill="none" stroke="#e8d7a8" stroke-opacity="0.045" stroke-width="0.8"></g>
<!-- Minute track -->
<g id="ticks"></g>
<!-- Applied hour indices -->
<g id="indices"></g>
<!-- Brand and text -->
<text class="brand" x="0" y="-70" text-anchor="middle" font-size="14" fill="#e6c77a">AURELON</text>
<text x="0" y="-48" text-anchor="middle" font-size="6.5" fill="#b89650" font-family="Georgia, serif" letter-spacing="2">GENÈVE · CHRONOMÈTRE</text>
<text x="0" y="82" text-anchor="middle" font-size="8" fill="#b89650" font-family="Georgia, serif" letter-spacing="3">AUTOMATIC</text>
<!-- Date window at 3 o'clock -->
<rect x="62" y="-15" width="40" height="30" rx="3" fill="#0a0a0c" stroke="#c9a04e" stroke-width="1.6"/>
<rect x="63.5" y="-13.5" width="37" height="27" rx="2" fill="none" stroke="#000" stroke-width="0.8" opacity="0.8"/>
<text id="dateText" x="81" y="7" text-anchor="middle" font-size="19" font-family="Georgia, 'Times New Roman', serif" fill="#f5f0e3">1</text>
<!-- Hour hand -->
<g id="hourHand" filter="url(#handShadow)">
<path d="M -9 14 L -8 -78 L 0 -94 L 8 -78 L 9 14 Z" fill="url(#goldHand)" stroke="#3b2a0c" stroke-width="1"/>
<path d="M -3 4 L -3 -70 L 0 -82 L 3 -70 L 3 4 Z" fill="#f2f7e6" opacity="0.85"/>
</g>
<!-- Minute hand -->
<g id="minuteHand" filter="url(#handShadow)">
<path d="M -6 16 L -5 -126 L 0 -140 L 5 -126 L 6 16 Z" fill="url(#goldHand)" stroke="#3b2a0c" stroke-width="1"/>
<path d="M -2 6 L -2 -118 L 0 -130 L 2 -118 L 2 6 Z" fill="#f2f7e6" opacity="0.85"/>
</g>
<!-- Sweeping seconds hand -->
<g id="secondHand" filter="url(#handShadow)">
<line x1="0" y1="30" x2="0" y2="-138" stroke="#c81e2a" stroke-width="1.6" stroke-linecap="round"/>
<circle cx="0" cy="22" r="6" fill="#c81e2a" stroke="#5a0a10" stroke-width="0.8"/>
<circle cx="0" cy="-118" r="2.2" fill="#c81e2a"/>
</g>
<!-- Hub -->
<circle r="8" fill="url(#goldHand)" stroke="#3b2a0c" stroke-width="1"/>
<circle r="3" fill="#c81e2a"/>
<!-- Glass: sapphire reflection -->
<circle r="160" fill="url(#glassSheen)" pointer-events="none"/>
<circle r="160" fill="none" stroke="#ffffff" stroke-opacity="0.08" stroke-width="1"/>
</g>
</svg>
<script>
(function () {
const NS = "http://www.w3.org/2000/svg";
const ticks = document.getElementById("ticks");
const indices = document.getElementById("indices");
const guilloche = document.getElementById("guilloche");
// Guilloché-style concentric engraving
for (let r = 10; r <= 156; r += 2.4) {
const c = document.createElementNS(NS, "circle");
c.setAttribute("r", r.toFixed(1));
guilloche.appendChild(c);
}
// Minute track (skipping hour positions)
for (let i = 0; i < 60; i++) {
if (i % 5 === 0) continue;
const l = document.createElementNS(NS, "rect");
l.setAttribute("x", -0.6);
l.setAttribute("y", -150);
l.setAttribute("width", 1.2);
l.setAttribute("height", 6);
l.setAttribute("fill", "#c9a04e");
l.setAttribute("opacity", "0.7");
l.setAttribute("transform", `rotate(${i * 6})`);
ticks.appendChild(l);
}
// Applied hour indices with luminous inserts
for (let i = 0; i < 12; i++) {
const isTwelve = i === 0;
const isQuarter = i % 3 === 0;
const w = isQuarter ? 11 : 7;
const h = isQuarter ? 30 : 24;
const g = document.createElementNS(NS, "g");
g.setAttribute("transform", `rotate(${i * 30})`);
const outer = document.createElementNS(NS, "rect");
outer.setAttribute("x", -w / 2 - 1);
outer.setAttribute("y", -143 - 1);
outer.setAttribute("width", w + 2);
outer.setAttribute("height", h + 2);
outer.setAttribute("rx", 2);
outer.setAttribute("fill", "url(#goldHand)");
outer.setAttribute("stroke", "#2a1d08");
outer.setAttribute("stroke-width", "0.6");
g.appendChild(outer);
const lume = document.createElementNS(NS, "rect");
lume.setAttribute("x", -w / 2 + 1.5);
lume.setAttribute("y", -141);
lume.setAttribute("width", w - 3);
lume.setAttribute("height", h - 4);
lume.setAttribute("rx", 1);
lume.setAttribute("fill", "#f4f0dc");
lume.setAttribute("opacity", "0.92");
g.appendChild(lume);
indices.appendChild(g);
}
// Hand references
const hour = document.getElementById("hourHand");
const minute = document.getElementById("minuteHand");
const second = document.getElementById("secondHand");
const dateText = document.getElementById("dateText");
let lastDate = -1;
function frame() {
const now = new Date();
const ms = now.getMilliseconds();
// Continuous sweep for the seconds hand
const sec = now.getSeconds() + ms / 1000;
const min = now.getMinutes() + sec / 60;
const hr = (now.getHours() % 12) + min / 60;
second.setAttribute("transform", `rotate(${(sec * 6).toFixed(3)})`);
minute.setAttribute("transform", `rotate(${(min * 6).toFixed(3)})`);
hour.setAttribute("transform", `rotate(${(hr * 30).toFixed(3)})`);
const day = now.getDate();
if (day !== lastDate) {
dateText.textContent = String(day);
lastDate = day;
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
