Run details
- Model
- openai/gpt-6.1-terra-pro
- Route
- OpenRouter API, one user message
- Served by
- OpenAI
- Effort
- medium, OpenRouter's default for this model
- Limits
- 60 min · 128,000 output tokens (the model's limit)
- Date
- 27 Oct 2026
- Time
- 78 s
- Size
- 13 kB
- Tokens
- 12,128 in, 11,292 out (2,317 of them thinking)
- List price
- $0.069 at today's price ($1 in / $5 out per M)
- Paid
- $0.069
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 325 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>Aurelle — Mechanical Watch</title>
<style>
* { box-sizing: border-box; }
:root {
color-scheme: dark;
font-family: Georgia, "Times New Roman", serif;
background: #0b0e12;
color: #e9e2d3;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
background:
radial-gradient(ellipse at 50% 42%, #283039 0%, #171c22 33%, transparent 68%),
linear-gradient(135deg, #0c1014, #15191d 52%, #080a0d);
}
main {
width: min(100%, 760px);
padding: 28px 20px 30px;
text-align: center;
}
.eyebrow {
margin: 0;
color: #b8a789;
font: 10px/1.4 Arial, sans-serif;
letter-spacing: .32em;
text-transform: uppercase;
}
h1 {
margin: 8px 0 0;
font-size: clamp(21px, 4vw, 30px);
font-weight: 400;
letter-spacing: .12em;
}
.watch {
display: block;
width: min(100%, 530px);
max-height: 72vh;
margin: -8px auto -8px;
overflow: visible;
}
.details {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
color: #a99f90;
font: 10px/1.5 Arial, sans-serif;
letter-spacing: .18em;
text-transform: uppercase;
}
.details span + span::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
margin: 0 14px 3px 0;
border-radius: 50%;
background: #ad9870;
}
.local-time {
margin: 10px 0 0;
color: #e5dac6;
font-size: 13px;
letter-spacing: .12em;
font-variant-numeric: tabular-nums;
}
@media (max-height: 650px) {
main { padding: 14px 20px; }
.watch { max-height: 67vh; }
h1 { font-size: 20px; }
}
</style>
</head>
<body>
<main>
<p class="eyebrow">A study in precision</p>
<h1>AURELLE</h1>
<svg class="watch" id="watch" viewBox="0 0 600 800" role="img"
aria-label="Mechanical wristwatch showing the local time and date">
<defs>
<linearGradient id="leather" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#12100f"/>
<stop offset=".12" stop-color="#352c26"/>
<stop offset=".3" stop-color="#1e1b19"/>
<stop offset=".52" stop-color="#302924"/>
<stop offset=".8" stop-color="#191716"/>
<stop offset="1" stop-color="#0b0b0b"/>
</linearGradient>
<linearGradient id="steel" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#4a4540"/>
<stop offset=".12" stop-color="#f0e9db"/>
<stop offset=".23" stop-color="#8f887d"/>
<stop offset=".38" stop-color="#393a3a"/>
<stop offset=".52" stop-color="#d6d0c4"/>
<stop offset=".67" stop-color="#66635e"/>
<stop offset=".82" stop-color="#e5ded1"/>
<stop offset="1" stop-color="#3b3936"/>
</linearGradient>
<linearGradient id="bezel" x1="0" y1="0" x2=".85" y2="1">
<stop offset="0" stop-color="#faf4e7"/>
<stop offset=".18" stop-color="#aaa297"/>
<stop offset=".38" stop-color="#44484a"/>
<stop offset=".6" stop-color="#d9d2c5"/>
<stop offset=".8" stop-color="#6b6862"/>
<stop offset="1" stop-color="#f1ebdf"/>
</linearGradient>
<radialGradient id="dial" cx=".36" cy=".27" r=".8">
<stop offset="0" stop-color="#34434a"/>
<stop offset=".38" stop-color="#202e35"/>
<stop offset=".75" stop-color="#111d23"/>
<stop offset="1" stop-color="#080e12"/>
</radialGradient>
<linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff3c8"/>
<stop offset=".35" stop-color="#cbb789"/>
<stop offset=".65" stop-color="#8c7752"/>
<stop offset="1" stop-color="#f2dfb2"/>
</linearGradient>
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity=".12"/>
<stop offset=".32" stop-color="#fff" stop-opacity=".015"/>
<stop offset=".7" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#fff" stop-opacity=".06"/>
</linearGradient>
<filter id="shadow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur in="SourceAlpha" stdDeviation="12"/>
<feOffset dy="12"/>
<feComponentTransfer><feFuncA type="linear" slope=".65"/></feComponentTransfer>
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="handShadow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="2" dy="3"/>
<feComponentTransfer><feFuncA type="linear" slope=".7"/></feComponentTransfer>
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<clipPath id="dialClip"><circle cx="300" cy="400" r="181"/></clipPath>
</defs>
<!-- Leather strap and stitching -->
<g filter="url(#shadow)">
<path d="M222 0 H378 L387 125 Q393 175 409 225 L191 225 Q207 175 213 125 Z"
fill="url(#leather)" stroke="#51463a" stroke-width="2"/>
<path d="M191 575 H409 Q393 625 387 675 L378 800 H222 L213 675 Q207 625 191 575 Z"
fill="url(#leather)" stroke="#51463a" stroke-width="2"/>
<path d="M230 0 L222 130 Q218 168 207 207 M370 0 L378 130 Q382 168 393 207
M207 593 Q218 632 222 670 L230 800 M393 593 Q382 632 378 670 L370 800"
fill="none" stroke="#a0937e" stroke-width="1.5"
stroke-dasharray="5 7" opacity=".48"/>
<path d="M242 0 L233 155 M358 0 L367 155 M233 645 L242 800 M367 645 L358 800"
fill="none" stroke="#8b7766" opacity=".12" stroke-width="2"/>
</g>
<!-- Case, lugs, and crown -->
<g filter="url(#shadow)">
<path d="M180 245 L193 175 Q196 163 210 161 L248 164 L240 235 Z"
fill="url(#steel)" stroke="#33312e" stroke-width="3"/>
<path d="M420 245 L407 175 Q404 163 390 161 L352 164 L360 235 Z"
fill="url(#steel)" stroke="#33312e" stroke-width="3"/>
<path d="M180 555 L193 625 Q196 637 210 639 L248 636 L240 565 Z"
fill="url(#steel)" stroke="#33312e" stroke-width="3"/>
<path d="M420 555 L407 625 Q404 637 390 639 L352 636 L360 565 Z"
fill="url(#steel)" stroke="#33312e" stroke-width="3"/>
<rect x="497" y="376" width="29" height="48" rx="7" fill="#615e58" stroke="#262523" stroke-width="3"/>
<rect x="516" y="371" width="28" height="58" rx="8" fill="url(#steel)" stroke="#292826" stroke-width="3"/>
<path d="M522 378 V422 M527 375 V425 M532 375 V425 M537 378 V422"
stroke="#514d46" stroke-width="1.5" opacity=".75"/>
<circle cx="300" cy="400" r="213" fill="url(#steel)" stroke="#272726" stroke-width="4"/>
<circle cx="300" cy="400" r="204" fill="#363838" stroke="#e0d9cd" stroke-width="2"/>
<circle cx="300" cy="400" r="198" fill="url(#bezel)"/>
<circle cx="300" cy="400" r="188" fill="#343b3b" stroke="#ede5d5" stroke-width="2"/>
<circle cx="300" cy="400" r="182" fill="url(#dial)" stroke="#111719" stroke-width="3"/>
</g>
<!-- Dial printing -->
<g clip-path="url(#dialClip)">
<circle cx="300" cy="400" r="174" fill="none" stroke="#b8ac93" stroke-opacity=".3" stroke-width=".7"/>
<circle cx="300" cy="400" r="141" fill="none" stroke="#c5baa4" stroke-opacity=".13" stroke-width=".7"/>
<g id="minuteMarks"></g>
<g id="hourMarks"></g>
<text x="300" y="332" text-anchor="middle" fill="#e9e1ce"
font-family="Georgia, serif" font-size="19" letter-spacing="4">AURELLE</text>
<text x="300" y="348" text-anchor="middle" fill="#c7bda9"
font-family="Arial, sans-serif" font-size="7" letter-spacing="2.3">GENÈVE</text>
<text x="300" y="468" text-anchor="middle" fill="#e0d5bf"
font-family="Georgia, serif" font-size="11" letter-spacing="1.6">AUTOMATIC</text>
<text x="300" y="483" text-anchor="middle" fill="#adab9f"
font-family="Arial, sans-serif" font-size="6.5" letter-spacing="1.8">TWENTY-EIGHT JEWELS</text>
<text x="300" y="559" text-anchor="middle" fill="#a99f8c"
font-family="Arial, sans-serif" font-size="6" letter-spacing="1.6">SWISS MADE</text>
<!-- Date aperture -->
<rect x="388" y="386" width="43" height="28" rx="2" fill="#070c0e"
stroke="url(#gold)" stroke-width="2"/>
<rect x="391" y="389" width="37" height="22" fill="#e4dfd1"/>
<text id="dateNumber" x="409.5" y="406" text-anchor="middle"
fill="#202626" font-family="Georgia, serif" font-size="16">1</text>
<circle cx="300" cy="400" r="181" fill="url(#glass)" pointer-events="none"/>
<!-- Hands point to twelve before rotation -->
<g id="hourHand" filter="url(#handShadow)">
<path d="M300 305 L306 319 L304 411 L300 419 L296 411 L294 319 Z"
fill="url(#gold)" stroke="#403d35" stroke-width=".8"/>
<path d="M300 315 L302 323 L301.5 394 L298.5 394 L298 323 Z"
fill="#ece6d3" opacity=".85"/>
</g>
<g id="minuteHand" filter="url(#handShadow)">
<path d="M300 267 L305 283 L303 412 L300 421 L297 412 L295 283 Z"
fill="url(#gold)" stroke="#403d35" stroke-width=".8"/>
<path d="M300 278 L301.7 286 L301.3 393 L298.7 393 L298.3 286 Z"
fill="#f3edda" opacity=".9"/>
</g>
<g id="secondHand" filter="url(#handShadow)">
<path d="M300 251 L301.2 392 L301.2 435 L300 447 L298.8 435 L298.8 392 Z"
fill="#d9bf87"/>
<circle cx="300" cy="427" r="5" fill="none" stroke="#d9bf87" stroke-width="1.5"/>
</g>
<circle cx="300" cy="400" r="7" fill="#d4c39d" stroke="#514734" stroke-width="1.5"/>
<circle cx="300" cy="400" r="2.5" fill="#f5ead0"/>
</g>
</svg>
<div class="details" aria-hidden="true">
<span>Automatic</span><span>Local time</span><span>Steel</span>
</div>
<p class="local-time" id="localTime"></p>
</main>
<script>
(() => {
const ns = "http://www.w3.org/2000/svg";
const minuteMarks = document.getElementById("minuteMarks");
const hourMarks = document.getElementById("hourMarks");
for (let i = 0; i < 60; i++) {
const mark = document.createElementNS(ns, "line");
const major = i % 5 === 0;
mark.setAttribute("x1", "300");
mark.setAttribute("y1", major ? "228" : "230");
mark.setAttribute("x2", "300");
mark.setAttribute("y2", major ? "235" : "233");
mark.setAttribute("stroke", major ? "#dfd4bd" : "#a9a89d");
mark.setAttribute("stroke-width", major ? "1.4" : ".7");
mark.setAttribute("transform", `rotate(${i * 6} 300 400)`);
minuteMarks.appendChild(mark);
}
for (let i = 0; i < 12; i++) {
if (i === 3) continue; // The date aperture occupies three o'clock.
const group = document.createElementNS(ns, "g");
group.setAttribute("transform", `rotate(${i * 30} 300 400)`);
const offsets = i === 0 ? [-4.5, 4.5] : [0];
offsets.forEach(offset => {
const marker = document.createElementNS(ns, "path");
marker.setAttribute("d", `M ${300 + offset - 2.5} 239 L ${300 + offset + 2.5} 239 L ${300 + offset + 1.7} 256 L ${300 + offset - 1.7} 256 Z`);
marker.setAttribute("fill", "url(#gold)");
marker.setAttribute("stroke", "#4a463c");
marker.setAttribute("stroke-width", ".6");
group.appendChild(marker);
});
hourMarks.appendChild(group);
}
const hourHand = document.getElementById("hourHand");
const minuteHand = document.getElementById("minuteHand");
const secondHand = document.getElementById("secondHand");
const dateNumber = document.getElementById("dateNumber");
const localTime = document.getElementById("localTime");
const watch = document.getElementById("watch");
const timeFormat = new Intl.DateTimeFormat(undefined, {
hour: "numeric", minute: "2-digit", second: "2-digit"
});
const dateFormat = new Intl.DateTimeFormat(undefined, {
weekday: "long", month: "long", day: "numeric"
});
let lastSecond = -1;
function draw() {
const now = new Date();
const seconds = now.getSeconds() + now.getMilliseconds() / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
hourHand.setAttribute("transform", `rotate(${hours * 30} 300 400)`);
minuteHand.setAttribute("transform", `rotate(${minutes * 6} 300 400)`);
secondHand.setAttribute("transform", `rotate(${seconds * 6} 300 400)`);
if (now.getSeconds() !== lastSecond) {
lastSecond = now.getSeconds();
dateNumber.textContent = now.getDate();
const time = timeFormat.format(now);
const date = dateFormat.format(now);
localTime.textContent = time;
watch.setAttribute("aria-label", `Mechanical wristwatch showing ${time}, ${date}, local time`);
}
requestAnimationFrame(draw);
}
draw();
})();
</script>
</body>
</html>
