Run details
- Model
- openai/gpt-6-luna
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 1,271 reasoning tokens
- Limits
- 60 min · 128,000 output tokens
- Date
- 21 Oct 2026
- Time
- 54 s
- Size
- 13 kB
- Tokens
- 82 in, 5,643 out
- List price
- $0.003 ($0.1 in / $0.5 out per M)
- Paid
- $0.003
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
13 kB 295 lines Raw
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atelier — Automatic Wristwatch</title>
<style>
:root {
color-scheme: dark;
background: #101315;
font-family: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
min-height: 100%;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 42%, #283032 0%, #171c1e 39%, #0d1011 78%);
}
main {
width: min(94vw, 560px);
max-height: 98vh;
display: grid;
place-items: center;
}
svg {
display: block;
width: 100%;
height: auto;
max-height: 98vh;
overflow: visible;
}
.engraving {
font-family: Georgia, "Times New Roman", serif;
letter-spacing: 2px;
}
.small-caps {
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2.5px;
font-weight: 600;
}
#seconds-hand {
transform-origin: 300px 410px;
}
</style>
</head>
<body>
<main aria-label="A gold-cased automatic wristwatch showing your local time">
<svg viewBox="0 0 600 820" role="img" aria-labelledby="watch-title watch-desc">
<title id="watch-title">Atelier automatic wristwatch</title>
<desc id="watch-desc">A gold mechanical wristwatch with a midnight-blue dial, sweeping seconds hand, and date window.</desc>
<defs>
<linearGradient id="leather" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#28160f"/>
<stop offset=".18" stop-color="#56301d"/>
<stop offset=".5" stop-color="#71442a"/>
<stop offset=".82" stop-color="#4b291a"/>
<stop offset="1" stop-color="#24140f"/>
</linearGradient>
<pattern id="leather-grain" width="26" height="22" patternUnits="userSpaceOnUse">
<path d="M3 2c4 2 4 6 0 9m14-8c4 2 4 6 0 9M8 17c3-2 6-1 8 2"
fill="none" stroke="#d49a61" stroke-opacity=".12" stroke-width="1"/>
<path d="M21 2l2 3M1 18l2 2" stroke="#160e0b" stroke-opacity=".25"/>
</pattern>
<linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff0b5"/>
<stop offset=".18" stop-color="#c99842"/>
<stop offset=".38" stop-color="#ffe9a0"/>
<stop offset=".63" stop-color="#9a6927"/>
<stop offset=".82" stop-color="#e6c16d"/>
<stop offset="1" stop-color="#79501e"/>
</linearGradient>
<linearGradient id="gold-edge" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff1bd"/>
<stop offset=".35" stop-color="#c08a36"/>
<stop offset=".58" stop-color="#f3d986"/>
<stop offset="1" stop-color="#805621"/>
</linearGradient>
<radialGradient id="dial" cx="45%" cy="37%" r="72%">
<stop offset="0" stop-color="#203d53"/>
<stop offset=".55" stop-color="#102a3e"/>
<stop offset="1" stop-color="#071724"/>
</radialGradient>
<radialGradient id="glass" cx="34%" cy="22%" r="85%">
<stop offset="0" stop-color="#ffffff" stop-opacity=".17"/>
<stop offset=".36" stop-color="#b8d5e4" stop-opacity=".045"/>
<stop offset="1" stop-color="#ffffff" stop-opacity=".01"/>
</radialGradient>
<filter id="shadow" x="-35%" y="-25%" width="170%" height="170%">
<feGaussianBlur in="SourceAlpha" stdDeviation="12"/>
<feOffset dy="13"/>
<feComponentTransfer><feFuncA type="linear" slope=".55"/></feComponentTransfer>
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="soft-shadow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="3"/>
</filter>
<clipPath id="dial-clip">
<circle cx="300" cy="410" r="181"/>
</clipPath>
</defs>
<!-- Leather strap -->
<g>
<path d="M219 0h162l-7 236-23 32h-82l-23-32z" fill="url(#leather)"/>
<path d="M219 0h162l-7 236-23 32h-82l-23-32z" fill="url(#leather-grain)" opacity=".9"/>
<path d="M230 5h140l-8 220-22 32h-60l-22-32z"
fill="none" stroke="#d2a06e" stroke-opacity=".48" stroke-width="2" stroke-dasharray="2 8"/>
<path d="M240 0v217m120-217v217" stroke="#160e0b" stroke-opacity=".38" stroke-width="2"/>
<path d="M226 225h148" stroke="#9c693d" stroke-opacity=".7" stroke-width="3"/>
<path d="M229 581h142l12 239H217z" fill="url(#leather)"/>
<path d="M229 581h142l12 239H217z" fill="url(#leather-grain)" opacity=".9"/>
<path d="M241 593h118l11 215H230z"
fill="none" stroke="#d2a06e" stroke-opacity=".48" stroke-width="2" stroke-dasharray="2 8"/>
<path d="M251 595l-8 215m107-215 8 215" stroke="#160e0b" stroke-opacity=".38" stroke-width="2"/>
<path d="M224 596h152" stroke="#9c693d" stroke-opacity=".7" stroke-width="3"/>
<!-- Polished buckle -->
<g fill="none" stroke="url(#gold)" stroke-width="7">
<path d="M250 28h100v74H250z"/>
<path d="M265 42h70v46h-70z" stroke-width="4"/>
<path d="M300 65h37" stroke-width="5"/>
<path d="M300 65l-15 13" stroke-width="4"/>
</g>
<path d="M281 63h39v15h-39z" fill="#54311e" stroke="#9c693d" stroke-width="2"/>
<path d="M255 111h90v15h-90z" rx="5" fill="url(#gold)" opacity=".92"/>
<path d="M266 114h68" stroke="#fff0b5" stroke-opacity=".55" stroke-width="2"/>
</g>
<!-- Case, crown and shoulders -->
<g filter="url(#shadow)">
<path d="M170 283q0-22 23-30l33-10h148l33 10q23 8 23 30v254q0 22-23 30l-33 10H226l-33-10q-23-8-23-30z"
fill="url(#gold)" stroke="#f0d58c" stroke-width="2"/>
<path d="M179 298q0-19 20-25l28-8h146l28 8q20 6 20 25v224q0 19-20 25l-28 8H227l-28-8q-20-6-20-25z"
fill="#8d6128" opacity=".55"/>
<circle cx="300" cy="410" r="218" fill="url(#gold-edge)" stroke="#f5dda0" stroke-width="3"/>
<circle cx="300" cy="410" r="207" fill="#8d622b" stroke="#684718" stroke-width="2"/>
<circle cx="300" cy="410" r="201" fill="url(#gold)" stroke="#fff0b8" stroke-width="2"/>
<circle cx="300" cy="410" r="190" fill="#071725" stroke="#d4ad5d" stroke-width="3"/>
<!-- Crown -->
<g transform="translate(0 0)">
<rect x="510" y="391" width="24" height="38" rx="7" fill="url(#gold)" stroke="#f8e5a7" stroke-width="2"/>
<rect x="527" y="395" width="26" height="30" rx="7" fill="url(#gold-edge)" stroke="#9d712f" stroke-width="2"/>
<path d="M534 399v22m6-22v22m6-22v22m6-22v22" stroke="#7c5727" stroke-width="2" opacity=".72"/>
<circle cx="550" cy="410" r="4" fill="#f8e5a7"/>
</g>
</g>
<!-- Bezel details -->
<circle cx="300" cy="410" r="198" fill="none" stroke="#fff0b9" stroke-opacity=".78" stroke-width="1.5"/>
<circle cx="300" cy="410" r="193" fill="none" stroke="#78531f" stroke-width="2"/>
<g id="bezel-dots" fill="#fff0b5" opacity=".82"></g>
<!-- Dial -->
<circle cx="300" cy="410" r="181" fill="url(#dial)" stroke="#d2ad63" stroke-width="1.5"/>
<g clip-path="url(#dial-clip)" opacity=".16" stroke="#8fb3c5" stroke-width="1">
<path d="M300 410L300 220M300 410L430 280M300 410L490 410M300 410L430 540M300 410L300 600M300 410L170 540M300 410L110 410M300 410L170 280"/>
<circle cx="300" cy="410" r="145" fill="none"/>
<circle cx="300" cy="410" r="112" fill="none"/>
</g>
<circle cx="300" cy="410" r="174" fill="none" stroke="#b9a064" stroke-opacity=".5" stroke-width="1"/>
<!-- Minute track -->
<g id="minute-markers"></g>
<!-- Brand and dial lettering -->
<text x="300" y="319" text-anchor="middle" fill="#eed69a" class="engraving" font-size="18">ATELIER</text>
<path d="M267 329h66" stroke="#b08b4b" stroke-width="1"/>
<text x="300" y="347" text-anchor="middle" fill="#c8b77e" class="small-caps" font-size="8">GENÈVE</text>
<g fill="#e5cb89" class="engraving" font-size="19" text-anchor="middle">
<text x="300" y="290">XII</text>
<text x="357" y="309">I</text>
<text x="399" y="353">II</text>
<text x="399" y="477">IIII</text>
<text x="357" y="520">V</text>
<text x="300" y="544">VI</text>
<text x="243" y="520">VII</text>
<text x="201" y="477">VIII</text>
<text x="184" y="416">IX</text>
<text x="201" y="353">X</text>
<text x="243" y="309">XI</text>
</g>
<text x="300" y="500" text-anchor="middle" fill="#d2bd83" class="small-caps" font-size="9">AUTOMATIC</text>
<text x="300" y="517" text-anchor="middle" fill="#a99769" class="small-caps" font-size="6.5">25 JEWELS · SWISS MADE</text>
<!-- Date aperture and polished frame -->
<rect x="376" y="391" width="48" height="38" rx="3" fill="#775523" stroke="#f1d98e" stroke-width="2"/>
<rect x="380" y="395" width="40" height="30" rx="2" fill="#f3ead1" stroke="#fff5d5" stroke-width="1"/>
<text id="date" x="400" y="416" text-anchor="middle" fill="#18202a"
font-family="Georgia, 'Times New Roman', serif" font-weight="bold" font-size="20">--</text>
<path d="M380 396h39" stroke="#fff" stroke-opacity=".8" stroke-width="1"/>
<!-- Hands -->
<g id="hour-hand">
<path d="M300 430 L294 418 L294 361 Q294 351 300 346 Q306 351 306 361 L306 418 Z"
fill="url(#gold)" stroke="#fff0b8" stroke-width="1.5"/>
<path d="M300 360v54" stroke="#fff5d2" stroke-opacity=".7" stroke-width="1"/>
<path d="M296 416h8" stroke="#876026" stroke-width="2"/>
</g>
<g id="minute-hand">
<path d="M300 430 L295 419 L296 314 Q296 305 300 296 Q304 305 304 314 L305 419 Z"
fill="url(#gold)" stroke="#fff0b8" stroke-width="1.3"/>
<path d="M300 309v105" stroke="#fff8dc" stroke-opacity=".7" stroke-width="1"/>
<path d="M297 418h6" stroke="#876026" stroke-width="2"/>
</g>
<g id="seconds-hand">
<path d="M300 446 L297.7 418 L299 275 Q299 270 300 266 Q301 270 301 275 L302.3 418 Z"
fill="#c84732" stroke="#f6b080" stroke-width=".7"/>
<circle cx="300" cy="443" r="5.5" fill="none" stroke="#c84732" stroke-width="1.5"/>
<path d="M300 421v-139" stroke="#ffcfab" stroke-opacity=".75" stroke-width=".8"/>
</g>
<!-- Central jewel and crystal glint -->
<circle cx="300" cy="410" r="10" fill="#8a642e" stroke="#f7e6ae" stroke-width="1.5"/>
<circle cx="300" cy="410" r="6.2" fill="url(#gold)" stroke="#fff3c7" stroke-width="1"/>
<circle cx="298" cy="408" r="1.8" fill="#fff8db"/>
<circle cx="300" cy="410" r="181" fill="url(#glass)" pointer-events="none"/>
<path d="M179 325q37-79 115-96" fill="none" stroke="#ffffff" stroke-opacity=".13" stroke-width="3"/>
</svg>
</main>
<script>
(() => {
const svgNS = "http://www.w3.org/2000/svg";
const markers = document.getElementById("minute-markers");
const bezelDots = document.getElementById("bezel-dots");
for (let i = 0; i < 60; i++) {
const angle = i * 6;
const isHour = i % 5 === 0;
const line = document.createElementNS(svgNS, "line");
line.setAttribute("x1", "300");
line.setAttribute("y1", isHour ? "238" : "235");
line.setAttribute("x2", "300");
line.setAttribute("y2", isHour ? "253" : "241");
line.setAttribute("transform", `rotate(${angle} 300 410)`);
line.setAttribute("stroke", isHour ? "#f0d58f" : "#b3a06e");
line.setAttribute("stroke-width", isHour ? "2.4" : "1");
line.setAttribute("opacity", isHour ? ".98" : ".68");
markers.appendChild(line);
if (i % 5 === 0) {
const dot = document.createElementNS(svgNS, "circle");
const radians = (angle - 90) * Math.PI / 180;
dot.setAttribute("cx", (300 + Math.cos(radians) * 198).toFixed(2));
dot.setAttribute("cy", (410 + Math.sin(radians) * 198).toFixed(2));
dot.setAttribute("r", "2");
bezelDots.appendChild(dot);
}
}
const hourHand = document.getElementById("hour-hand");
const minuteHand = document.getElementById("minute-hand");
const secondsHand = document.getElementById("seconds-hand");
const dateWindow = document.getElementById("date");
function updateWatch() {
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;
hourHand.setAttribute("transform", `rotate(${hours * 30} 300 410)`);
minuteHand.setAttribute("transform", `rotate(${minutes * 6} 300 410)`);
secondsHand.setAttribute("transform", `rotate(${seconds * 6} 300 410)`);
dateWindow.textContent = String(now.getDate()).padStart(2, "0");
requestAnimationFrame(updateWatch);
}
updateWatch();
})();
</script>
</body>
</html>
