Run details
- Model
- moonshotai/kimi-k3.1-pro
- Route
- OpenRouter API, one user message
- Served by
- Moonshot AI
- Effort
- max, OpenRouter's default for this model
- Limits
- 60 min · 300,000 output tokens (our $3.00 stop per request at $10/M)
- Date
- 24 Oct 2026
- Time
- 7 min 57 s
- Size
- 23 kB
- Tokens
- 161 in, 25,009 out (17,804 of them thinking)
- List price
- $0.25 at today's price ($2 in / $10 out per M)
- Paid
- $0.25
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
23 kB 592 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<title>Aurelian — Automatic Chronometer</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
min-height: 100vh;
min-height: 100svh;
display: grid;
place-items: center;
overflow: hidden;
padding: 12px;
background:
radial-gradient(ellipse at 50% 38%, #29272c 0%, #15161b 34%, #0b0d11 65%, #06080b 100%);
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(115deg, transparent 20%, rgba(255, 231, 205, 0.018) 45%, transparent 68%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 4px);
}
.stage {
position: relative;
width: 100%;
display: grid;
place-items: center;
}
.stage::before {
content: "";
position: absolute;
width: min(70vw, 650px);
height: min(70vw, 650px);
border-radius: 50%;
background: radial-gradient(circle, rgba(197, 139, 99, 0.09), transparent 68%);
filter: blur(35px);
}
.watch {
position: relative;
display: block;
width: min(88vw, 58vh, 580px);
height: auto;
overflow: visible;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
}
.watch text {
user-select: none;
}
.dial-serif {
font-family: Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}
.dial-sans {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
</head>
<body>
<main class="stage">
<svg class="watch" viewBox="0 0 800 1200" width="800" height="1200"
role="img" aria-labelledby="watchTitle watchDescription">
<title id="watchTitle">Aurelian automatic mechanical wristwatch</title>
<desc id="watchDescription">
A rose-gold mechanical wristwatch with a midnight-blue sunburst dial,
polished applied markers, continuously sweeping hands, an alligator
leather strap, and a date aperture showing today’s local date.
</desc>
<defs>
<linearGradient id="caseGold" x1="5%" y1="3%" x2="95%" y2="97%">
<stop offset="0" stop-color="#67402f"/>
<stop offset="0.09" stop-color="#d39a73"/>
<stop offset="0.18" stop-color="#fff0d7"/>
<stop offset="0.29" stop-color="#b87553"/>
<stop offset="0.43" stop-color="#f2c49d"/>
<stop offset="0.59" stop-color="#8c503a"/>
<stop offset="0.75" stop-color="#dca47d"/>
<stop offset="0.89" stop-color="#ffe6c6"/>
<stop offset="1" stop-color="#754431"/>
</linearGradient>
<linearGradient id="bezelGold" x1="12%" y1="0%" x2="88%" y2="100%">
<stop offset="0" stop-color="#9b6247"/>
<stop offset="0.16" stop-color="#ffe6c5"/>
<stop offset="0.31" stop-color="#b77554"/>
<stop offset="0.48" stop-color="#f6d0aa"/>
<stop offset="0.66" stop-color="#89503b"/>
<stop offset="0.83" stop-color="#e4ae85"/>
<stop offset="1" stop-color="#6d3e2e"/>
</linearGradient>
<linearGradient id="appliedGold" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" stop-color="#76503d"/>
<stop offset="0.2" stop-color="#c78d66"/>
<stop offset="0.43" stop-color="#fff0d3"/>
<stop offset="0.58" stop-color="#e5b48a"/>
<stop offset="0.82" stop-color="#a3684b"/>
<stop offset="1" stop-color="#f2c59c"/>
</linearGradient>
<linearGradient id="handLight" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" stop-color="#a36749"/>
<stop offset="0.45" stop-color="#ffe8c7"/>
<stop offset="1" stop-color="#d69a70"/>
</linearGradient>
<linearGradient id="handDark" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#f0bd91"/>
<stop offset="0.48" stop-color="#aa6c4d"/>
<stop offset="1" stop-color="#70412f"/>
</linearGradient>
<linearGradient id="secondGold" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" stop-color="#9f6245"/>
<stop offset="0.5" stop-color="#ffe0b9"/>
<stop offset="1" stop-color="#c78159"/>
</linearGradient>
<linearGradient id="strapLeather" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" stop-color="#02080d"/>
<stop offset="0.12" stop-color="#0a1821"/>
<stop offset="0.35" stop-color="#142c38"/>
<stop offset="0.52" stop-color="#1a3440"/>
<stop offset="0.72" stop-color="#0d202a"/>
<stop offset="0.9" stop-color="#07131b"/>
<stop offset="1" stop-color="#01060a"/>
</linearGradient>
<radialGradient id="dialBlue" cx="37%" cy="28%" r="82%">
<stop offset="0" stop-color="#245467"/>
<stop offset="0.25" stop-color="#153e51"/>
<stop offset="0.57" stop-color="#0c293a"/>
<stop offset="0.82" stop-color="#071b29"/>
<stop offset="1" stop-color="#030e17"/>
</radialGradient>
<linearGradient id="rehaut" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#32424a"/>
<stop offset="0.22" stop-color="#0c171e"/>
<stop offset="0.58" stop-color="#02080d"/>
<stop offset="0.83" stop-color="#25343b"/>
<stop offset="1" stop-color="#060c11"/>
</linearGradient>
<linearGradient id="datePaper" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" stop-color="#fffdf5"/>
<stop offset="0.55" stop-color="#eee9dd"/>
<stop offset="1" stop-color="#d4cec1"/>
</linearGradient>
<linearGradient id="glassSheen" x1="8%" y1="0%" x2="90%" y2="100%">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.09"/>
<stop offset="0.28" stop-color="#d8f2ff" stop-opacity="0.025"/>
<stop offset="0.52" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="0.82" stop-color="#9fc6d5" stop-opacity="0.012"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0.035"/>
</linearGradient>
<pattern id="alligator" width="96" height="84" patternUnits="userSpaceOnUse">
<path d="M4 9 C17 1 35 1 45 8 L42 34 C29 41 14 39 3 31 Z
M50 7 C64 0 82 3 93 12 L90 35 C75 41 60 39 48 30 Z
M-9 48 C6 38 25 38 36 46 L34 74 C19 82 2 78 -9 68 Z
M41 47 C57 37 80 39 101 49 L100 75 C79 83 58 80 43 69 Z"
fill="#102631" fill-opacity="0.28"
stroke="#7c98a2" stroke-opacity="0.17" stroke-width="1.5"/>
<path d="M5 33 C18 40 30 41 42 35
M49 32 C63 40 77 41 90 36
M36 48 L34 73
M43 69 C59 80 80 82 99 75"
fill="none" stroke="#00070c" stroke-opacity="0.65" stroke-width="2"/>
<path d="M9 10 C20 5 32 5 40 10
M55 9 C66 5 79 7 87 13
M47 49 C60 43 78 44 92 50"
fill="none" stroke="#a0b4ba" stroke-opacity="0.08" stroke-width="1"/>
</pattern>
<path id="strapTopShape"
d="M304 -28 H496
C497 96 507 221 535 344
C539 361 532 376 517 386
H283
C268 376 261 361 265 344
C293 221 303 96 304 -28 Z"/>
<path id="strapBottomShape"
d="M283 814 H517
C532 824 539 839 535 856
C507 979 497 1104 496 1228
H304
C303 1104 293 979 265 856
C261 839 268 824 283 814 Z"/>
<g id="lug">
<path d="M282 282
C255 285 239 305 233 334
L220 389
C216 407 231 418 246 404
L284 368 L330 339 L319 300 Z"
fill="url(#caseGold)" stroke="#694131" stroke-width="2"/>
<path d="M275 296 C254 305 250 327 245 349 L233 391"
fill="none" stroke="#ffe7c7" stroke-opacity="0.58"
stroke-width="4" stroke-linecap="round"/>
<path d="M246 404 L284 368 L321 344"
fill="none" stroke="#623a2b" stroke-opacity="0.7" stroke-width="3"/>
</g>
<g id="baton">
<rect x="393" y="390" width="14" height="44" rx="2"
fill="#01070b" opacity="0.65"/>
<rect x="394" y="388" width="12" height="44" rx="1.5"
fill="url(#appliedGold)" stroke="#f4d0aa" stroke-width="0.55"/>
<path d="M397 391 V428" stroke="#fff4df" stroke-opacity="0.62"
stroke-width="1"/>
<path d="M404 391 V429" stroke="#684330" stroke-opacity="0.5"
stroke-width="1"/>
</g>
<g id="doubleBaton">
<use href="#baton" transform="translate(-10 0)"/>
<use href="#baton" transform="translate(10 0)"/>
</g>
<clipPath id="dialClip">
<circle cx="400" cy="600" r="248"/>
</clipPath>
<clipPath id="crownClip">
<rect x="714" y="558" width="50" height="84" rx="15"/>
</clipPath>
<filter id="watchShadow" x="-40%" y="-40%" width="180%" height="190%"
color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="22" stdDeviation="22"
flood-color="#000000" flood-opacity="0.72"/>
</filter>
<filter id="markerShadow" x="-30%" y="-30%" width="160%" height="170%"
color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="2.5" stdDeviation="1.7"
flood-color="#000000" flood-opacity="0.75"/>
</filter>
<filter id="handShadow" x="-35%" y="-35%" width="170%" height="180%"
color-interpolation-filters="sRGB">
<feDropShadow dx="1.5" dy="3" stdDeviation="2.2"
flood-color="#000000" flood-opacity="0.72"/>
</filter>
</defs>
<!-- Alligator leather strap -->
<g aria-hidden="true">
<use href="#strapTopShape" fill="url(#strapLeather)"
stroke="#010508" stroke-width="8"/>
<use href="#strapTopShape" fill="url(#alligator)" opacity="0.9"/>
<use href="#strapBottomShape" fill="url(#strapLeather)"
stroke="#010508" stroke-width="8"/>
<use href="#strapBottomShape" fill="url(#alligator)" opacity="0.9"/>
<path d="M320 -5 C320 108 309 231 283 350
M480 -5 C480 108 491 231 517 350
M283 850 C309 969 320 1092 320 1205
M517 850 C491 969 480 1092 480 1205"
fill="none" stroke="#c2a083" stroke-opacity="0.6"
stroke-width="2" stroke-dasharray="3 8" stroke-linecap="round"/>
<path d="M337 0 C337 118 326 229 309 320
M463 0 C463 118 474 229 491 320
M309 880 C326 971 337 1082 337 1200
M491 880 C474 971 463 1082 463 1200"
fill="none" stroke="#66808b" stroke-opacity="0.1"
stroke-width="2"/>
</g>
<!-- Sculpted lugs -->
<use href="#lug"/>
<use href="#lug" transform="translate(800 0) scale(-1 1)"/>
<use href="#lug" transform="translate(0 1200) scale(1 -1)"/>
<use href="#lug" transform="translate(800 1200) scale(-1 -1)"/>
<!-- Fluted crown and guards -->
<g aria-hidden="true">
<path d="M674 548 C696 542 714 550 724 568 L700 585 L676 570 Z"
fill="url(#caseGold)" stroke="#714634" stroke-width="2"/>
<path d="M676 630 L700 615 L724 632 C714 650 696 658 674 652 Z"
fill="url(#caseGold)" stroke="#714634" stroke-width="2"/>
<rect x="684" y="578" width="53" height="44" rx="10"
fill="url(#caseGold)" stroke="#704330" stroke-width="2"/>
<rect x="714" y="558" width="50" height="84" rx="15"
fill="url(#caseGold)" stroke="#6d4130" stroke-width="2"/>
<g clip-path="url(#crownClip)">
<path d="M716 568 H762 M716 578 H762 M716 588 H762
M716 598 H762 M716 608 H762 M716 618 H762
M716 628 H762 M716 638 H762"
fill="none" stroke="#6c4030" stroke-width="2.4" opacity="0.7"/>
<path d="M716 570 H762 M716 580 H762 M716 590 H762
M716 600 H762 M716 610 H762 M716 620 H762
M716 630 H762"
fill="none" stroke="#ffe4c1" stroke-width="0.8" opacity="0.6"/>
</g>
<rect x="756" y="566" width="10" height="68" rx="5"
fill="url(#appliedGold)" stroke="#6c4231" stroke-width="1.5"/>
</g>
<!-- Case and polished bezel -->
<circle cx="400" cy="600" r="302" fill="#08090b"
filter="url(#watchShadow)"/>
<circle cx="400" cy="600" r="300" fill="url(#caseGold)"
stroke="#4f3025" stroke-width="2"/>
<circle cx="400" cy="600" r="294" fill="none"
stroke="#ffebce" stroke-opacity="0.58" stroke-width="2"/>
<circle cx="400" cy="600" r="288" fill="url(#bezelGold)"
stroke="#9f674c" stroke-width="1"/>
<circle cx="400" cy="600" r="276" fill="#38271f"/>
<circle cx="400" cy="600" r="271" fill="url(#rehaut)"
stroke="#f5c99f" stroke-opacity="0.35" stroke-width="1.5"/>
<path d="M176 393 C220 335 292 305 369 301"
fill="none" stroke="#fff2dc" stroke-opacity="0.67"
stroke-width="4" stroke-linecap="round"/>
<path d="M625 811 C677 756 699 686 697 623"
fill="none" stroke="#f6c49a" stroke-opacity="0.32"
stroke-width="3" stroke-linecap="round"/>
<path d="M150 735 C127 679 119 616 128 555"
fill="none" stroke="#512f24" stroke-opacity="0.65"
stroke-width="4" stroke-linecap="round"/>
<!-- Midnight-blue sunburst dial -->
<circle cx="400" cy="600" r="249" fill="url(#dialBlue)"
stroke="#02090f" stroke-width="3"/>
<g clip-path="url(#dialClip)">
<g id="sunburst"></g>
<circle cx="400" cy="600" r="239" fill="none"
stroke="#90b0ba" stroke-opacity="0.07"/>
<circle cx="400" cy="600" r="215" fill="none"
stroke="#b8cbd0" stroke-opacity="0.035"/>
</g>
<circle cx="400" cy="600" r="246" fill="none"
stroke="#78939e" stroke-opacity="0.2" stroke-width="1"/>
<g id="minuteTrack"></g>
<!-- Applied rose-gold hour indices -->
<g filter="url(#markerShadow)">
<use href="#doubleBaton"/>
<use href="#baton" transform="rotate(30 400 600)"/>
<use href="#baton" transform="rotate(60 400 600)"/>
<use href="#baton" transform="rotate(120 400 600)"/>
<use href="#baton" transform="rotate(150 400 600)"/>
<use href="#baton" transform="rotate(180 400 600)"/>
<use href="#baton" transform="rotate(210 400 600)"/>
<use href="#baton" transform="rotate(240 400 600)"/>
<use href="#baton" transform="rotate(270 400 600)"/>
<use href="#baton" transform="rotate(300 400 600)"/>
<use href="#baton" transform="rotate(330 400 600)"/>
</g>
<!-- Dial signature -->
<g text-anchor="middle">
<path d="M388 468 L400 444 L412 468 M392 460 H408"
fill="none" stroke="#e7bb94" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
<text x="400" y="509" class="dial-serif"
font-size="24" letter-spacing="5" fill="#edc6a2">AURELIAN</text>
<text x="400" y="532" class="dial-sans"
font-size="9.5" letter-spacing="3.6" fill="#aebdc1">AUTOMATIQUE</text>
<text x="400" y="705" class="dial-serif"
font-size="11" letter-spacing="3" fill="#c3c9c7">CHRONOMÈTRE</text>
<path d="M366 718 H434" stroke="#c59a78" stroke-opacity="0.42"
stroke-width="0.8"/>
<text x="351" y="825" class="dial-sans"
font-size="7.5" letter-spacing="1.6" fill="#89999e">SWISS</text>
<text x="449" y="825" class="dial-sans"
font-size="7.5" letter-spacing="1.6" fill="#89999e">MADE</text>
</g>
<!-- Beveled date aperture at three o'clock -->
<g aria-hidden="true">
<rect x="534" y="571" width="82" height="60" rx="5"
fill="#01070b" opacity="0.75"/>
<rect x="537" y="573" width="76" height="56" rx="3.5"
fill="url(#appliedGold)" stroke="#f5d0a9" stroke-width="0.7"/>
<rect x="541" y="577" width="68" height="48" rx="1"
fill="url(#datePaper)" stroke="#6f553f" stroke-width="1"/>
<path d="M542 578 H608 L604 585 H546 Z"
fill="#241b15" opacity="0.16"/>
<path d="M543 623 H607" stroke="#ffffff" stroke-opacity="0.7"
stroke-width="1"/>
<text id="currentDate" x="575" y="611" text-anchor="middle"
class="dial-sans" font-size="28" font-weight="500"
font-variant-numeric="tabular-nums" fill="#172027">--</text>
</g>
<!-- Dauphine hour and minute hands, plus sweeping seconds -->
<g filter="url(#handShadow)">
<g id="hourHand">
<path d="M400 475 L387.8 584 L390.5 608 L400 621
L409.5 608 L412.2 584 Z"
fill="#754832"/>
<path d="M400 475 L400 615 L391 606 L389 584 Z"
fill="url(#handLight)"/>
<path d="M400 475 L411 584 L408 607 L400 621 Z"
fill="url(#handDark)"/>
<path d="M400 486 V597" stroke="#fff1d8" stroke-opacity="0.5"
stroke-width="0.8"/>
</g>
<g id="minuteHand">
<path d="M400 401 L390.5 581 L392.5 610 L400 621
L407.5 610 L409.5 581 Z"
fill="#70442f"/>
<path d="M400 401 L400 615 L393.5 607 L391.5 581 Z"
fill="url(#handLight)"/>
<path d="M400 401 L408.5 581 L406.5 608 L400 621 Z"
fill="url(#handDark)"/>
<path d="M400 413 V594" stroke="#fff4df" stroke-opacity="0.58"
stroke-width="0.75"/>
</g>
<g id="secondHand">
<path d="M400 374 L398.4 600 L397.9 654
H402.1 L401.6 600 Z"
fill="url(#secondGold)"/>
<circle cx="400" cy="643" r="8.5" fill="none"
stroke="#dea679" stroke-width="2.2"/>
<circle cx="400" cy="643" r="5.2" fill="none"
stroke="#6f4532" stroke-opacity="0.55" stroke-width="0.8"/>
</g>
</g>
<!-- Polished central pivot -->
<circle cx="400" cy="601" r="12" fill="#00070c" opacity="0.55"/>
<circle cx="400" cy="600" r="9.5" fill="url(#caseGold)"
stroke="#f3c69d" stroke-width="0.8"/>
<circle cx="400" cy="600" r="4.2" fill="#e8b386"/>
<circle cx="398.5" cy="598.5" r="1.6" fill="#fff1d8" opacity="0.85"/>
<!-- Sapphire crystal reflections -->
<g clip-path="url(#dialClip)" pointer-events="none">
<circle cx="400" cy="600" r="248" fill="url(#glassSheen)"/>
<path d="M174 489
C221 399 317 350 422 352
C330 382 254 443 209 535
C194 526 182 510 174 489 Z"
fill="#ffffff" opacity="0.035"/>
<path d="M524 821 C580 788 616 738 637 684"
fill="none" stroke="#d8f3ff" stroke-opacity="0.035"
stroke-width="18" stroke-linecap="round"/>
</g>
<circle cx="400" cy="600" r="248.5" fill="none"
stroke="#d5edf3" stroke-opacity="0.16" stroke-width="1.4"/>
</svg>
<time id="localTime" class="sr-only"></time>
</main>
<script>
(() => {
const SVG_NS = "http://www.w3.org/2000/svg";
function svgElement(name, attributes) {
const element = document.createElementNS(SVG_NS, name);
for (const [key, value] of Object.entries(attributes)) {
element.setAttribute(key, value);
}
return element;
}
// Fine radial brushing beneath the dial furniture.
const rays = document.getElementById("sunburst");
const rayCount = 192;
for (let i = 0; i < rayCount; i++) {
const angle = (i / rayCount) * Math.PI * 2;
const sin = Math.sin(angle);
const cos = Math.cos(angle);
const lightRay = i % 2 === 0;
rays.appendChild(svgElement("line", {
x1: 400 + sin * 24,
y1: 600 - cos * 24,
x2: 400 + sin * 252,
y2: 600 - cos * 252,
stroke: lightRay ? "#b4dce5" : "#000810",
"stroke-opacity": lightRay ? "0.045" : "0.11",
"stroke-width": i % 3 === 0 ? "0.9" : "0.55"
}));
}
// Sixty individually drawn chapter-ring divisions.
const minuteTrack = document.getElementById("minuteTrack");
for (let i = 0; i < 60; i++) {
const major = i % 5 === 0;
minuteTrack.appendChild(svgElement("line", {
x1: "400",
y1: major ? "365" : "369",
x2: "400",
y2: major ? "379" : "377",
transform: `rotate(${i * 6} 400 600)`,
stroke: major ? "#dfb692" : "#a9b9bd",
"stroke-opacity": major ? "0.82" : "0.52",
"stroke-width": major ? "1.8" : "0.9",
"stroke-linecap": "round"
}));
}
const hourHand = document.getElementById("hourHand");
const minuteHand = document.getElementById("minuteHand");
const secondHand = document.getElementById("secondHand");
const dateText = document.getElementById("currentDate");
const localTime = document.getElementById("localTime");
let previousDate = "";
let previousSecond = -1;
function setAngle(element, angle) {
element.setAttribute(
"transform",
`rotate(${angle.toFixed(3)} 400 600)`
);
}
function render() {
const now = new Date();
// Date() supplies the viewer's local time. Milliseconds keep the
// seconds hand continuously sweeping instead of ticking once a second.
const seconds = now.getSeconds() + now.getMilliseconds() / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
setAngle(secondHand, seconds * 6);
setAngle(minuteHand, minutes * 6);
setAngle(hourHand, hours * 30);
const today = String(now.getDate()).padStart(2, "0");
if (today !== previousDate) {
dateText.textContent = today;
previousDate = today;
}
if (now.getSeconds() !== previousSecond) {
previousSecond = now.getSeconds();
localTime.textContent =
`Local time: ${now.toLocaleTimeString()}. ` +
`Local date: ${now.toLocaleDateString()}.`;
}
requestAnimationFrame(render);
}
render();
})();
</script>
</body>
</html>

