Run details
- Model
- openai/gpt-6.1-terra
- 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
- 54 s
- Size
- 12 kB
- Tokens
- 82 in, 4,781 out (662 of them thinking)
- List price
- $0.024 at today's price ($1 in / $5 out per M)
- Paid
- $0.024
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
12 kB 278 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurel — Mechanical Watch</title>
<style>
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
overflow-x: hidden;
background:
radial-gradient(ellipse at 50% 44%, #292824 0%, #171817 42%, #0d0f0f 100%);
color: #d8c7a3;
font-family: Georgia, "Times New Roman", serif;
}
main {
width: min(100%, 670px);
padding: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
max-height: calc(100dvh - 24px);
overflow: visible;
filter: drop-shadow(0 28px 25px rgba(0, 0, 0, .55));
}
.fine { font-family: Georgia, "Times New Roman", serif; fill: #d9c8a5; }
.sans { font-family: Arial, sans-serif; fill: #c9b994; }
</style>
</head>
<body>
<main>
<svg id="watch" viewBox="0 0 600 800" role="img"
aria-label="A gold mechanical wristwatch showing the current local time and date">
<title>Mechanical wristwatch</title>
<desc>A polished gold watch with a dark dial, leather strap, sweeping seconds hand, and date window.</desc>
<defs>
<linearGradient id="leather" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#17110e"/>
<stop offset=".12" stop-color="#35251b"/>
<stop offset=".35" stop-color="#483124"/>
<stop offset=".55" stop-color="#38261c"/>
<stop offset=".86" stop-color="#2a1c15"/>
<stop offset="1" stop-color="#120e0b"/>
</linearGradient>
<pattern id="grain" width="22" height="29" patternUnits="userSpaceOnUse">
<path d="M-3 8 Q7 3 16 9 T28 10 M-5 22 Q5 16 15 23 T27 23"
fill="none" stroke="#aa8060" stroke-opacity=".08" stroke-width="1"/>
<path d="M3 0 Q7 8 3 14 M18 13 Q14 20 19 29"
fill="none" stroke="#080605" stroke-opacity=".18"/>
</pattern>
<linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#6f4a23"/>
<stop offset=".14" stop-color="#f5d89a"/>
<stop offset=".27" stop-color="#a97639"/>
<stop offset=".43" stop-color="#f6dfaa"/>
<stop offset=".61" stop-color="#9a6b33"/>
<stop offset=".8" stop-color="#e8c47e"/>
<stop offset="1" stop-color="#60401f"/>
</linearGradient>
<linearGradient id="edgeGold" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#f8e4b3"/>
<stop offset=".25" stop-color="#b18448"/>
<stop offset=".5" stop-color="#765020"/>
<stop offset=".75" stop-color="#d2a662"/>
<stop offset="1" stop-color="#5b3b1c"/>
</linearGradient>
<radialGradient id="dial" cx=".38" cy=".27" r=".78">
<stop stop-color="#303b3a"/>
<stop offset=".42" stop-color="#172322"/>
<stop offset=".78" stop-color="#0b1414"/>
<stop offset="1" stop-color="#030909"/>
</radialGradient>
<linearGradient id="handGold" x1="0" y1="0" x2="1" y2="0">
<stop stop-color="#76501f"/>
<stop offset=".38" stop-color="#ffe5a9"/>
<stop offset=".68" stop-color="#d2a65c"/>
<stop offset="1" stop-color="#775123"/>
</linearGradient>
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff" stop-opacity=".14"/>
<stop offset=".3" stop-color="#fff" stop-opacity=".015"/>
<stop offset=".6" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#b6d6cf" stop-opacity=".055"/>
</linearGradient>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2.5"/>
</filter>
<clipPath id="dialClip"><circle cx="300" cy="400" r="174"/></clipPath>
</defs>
<!-- Leather strap -->
<path d="M211 0 H389 L404 196 Q405 230 388 254 H212 Q195 230 196 196 Z"
fill="url(#leather)" stroke="#120e0b" stroke-width="3"/>
<path d="M212 546 H388 Q405 570 404 604 L389 800 H211 L196 604 Q195 570 212 546 Z"
fill="url(#leather)" stroke="#120e0b" stroke-width="3"/>
<path d="M211 0 H389 L404 196 Q405 230 388 254 H212 Q195 230 196 196 Z
M212 546 H388 Q405 570 404 604 L389 800 H211 L196 604 Q195 570 212 546 Z"
fill="url(#grain)"/>
<g fill="none" stroke="#c0a17c" stroke-opacity=".45" stroke-width="2"
stroke-linecap="round" stroke-dasharray="4 8">
<path d="M224 0 L213 195 Q213 217 224 234"/>
<path d="M376 0 L387 195 Q387 217 376 234"/>
<path d="M224 566 Q213 583 213 605 L224 800"/>
<path d="M376 566 Q387 583 387 605 L376 800"/>
</g>
<g fill="none" stroke="#070605" stroke-opacity=".45">
<path d="M232 0 L224 183 M368 0 L376 183"/>
<path d="M224 617 L232 800 M376 617 L368 800"/>
</g>
<!-- Lugs and crown -->
<g fill="url(#gold)" stroke="#6c4a25" stroke-width="2">
<path d="M184 259 L194 200 Q197 187 214 187 H242 L249 242 Z"/>
<path d="M416 259 L406 200 Q403 187 386 187 H358 L351 242 Z"/>
<path d="M184 541 L194 600 Q197 613 214 613 H242 L249 558 Z"/>
<path d="M416 541 L406 600 Q403 613 386 613 H358 L351 558 Z"/>
</g>
<g fill="none" stroke="#fbe1a7" stroke-opacity=".6" stroke-width="2">
<path d="M199 226 L204 200 Q206 195 218 195"/>
<path d="M401 226 L396 200 Q394 195 382 195"/>
<path d="M199 574 L204 600 Q206 605 218 605"/>
<path d="M401 574 L396 600 Q394 605 382 605"/>
</g>
<path d="M491 366 Q513 365 518 378 L518 422 Q513 435 491 434 Z"
fill="url(#gold)" stroke="#76501f" stroke-width="2"/>
<rect x="504" y="373" width="29" height="54" rx="10"
fill="url(#edgeGold)" stroke="#68451f" stroke-width="2"/>
<g stroke="#6f4a21" stroke-width="1.5" opacity=".8">
<path d="M510 377 V423 M516 375 V425 M522 375 V425 M528 378 V422"/>
</g>
<path d="M531 389 Q539 400 531 411" fill="none" stroke="#f5dba3" stroke-width="2"/>
<!-- Case and bezel -->
<circle cx="300" cy="405" r="204" fill="#000" opacity=".55" filter="url(#shadow)"/>
<circle cx="300" cy="400" r="203" fill="url(#gold)" stroke="#503619" stroke-width="3"/>
<circle cx="300" cy="400" r="197" fill="none" stroke="#fce7b4" stroke-opacity=".8" stroke-width="2"/>
<circle cx="300" cy="400" r="191" fill="#735026" stroke="#493316" stroke-width="2"/>
<circle cx="300" cy="400" r="187" fill="url(#edgeGold)"/>
<circle cx="300" cy="400" r="181" fill="#0b1211" stroke="#f5d9a1" stroke-width="1.5"/>
<circle cx="300" cy="400" r="176" fill="url(#dial)" stroke="#574626" stroke-width="2"/>
<circle cx="300" cy="400" r="158" fill="none" stroke="#c0a77c" stroke-opacity=".25" stroke-width=".7"/>
<circle cx="300" cy="400" r="145" fill="none" stroke="#b49a70" stroke-opacity=".12" stroke-width=".7"/>
<!-- Minute track and applied indices are filled in by the script -->
<g id="minute-track"></g>
<g id="hour-indices"></g>
<g class="fine" text-anchor="middle">
<text x="300" y="282" font-size="25">12</text>
<text x="179" y="408" font-size="25">9</text>
<text x="300" y="538" font-size="25">6</text>
</g>
<!-- Dial signature -->
<g text-anchor="middle">
<path d="M290 315 L295 307 L300 315 L305 307 L310 315 L307 320 H293 Z"
fill="none" stroke="#d1b77e" stroke-width="1.2"/>
<circle cx="295" cy="306" r="1.2" fill="#d1b77e"/>
<circle cx="305" cy="306" r="1.2" fill="#d1b77e"/>
<text x="300" y="340" class="fine" font-size="17" letter-spacing="4">AUREL</text>
<text x="300" y="354" class="sans" font-size="6.5" letter-spacing="2.5">GENÈVE</text>
<text x="300" y="468" class="fine" font-size="10" letter-spacing="2">AUTOMATIC</text>
<text x="300" y="482" class="sans" font-size="6.5" letter-spacing="1.4">28 JEWELS · SWISS MADE</text>
</g>
<!-- Date aperture -->
<rect x="397" y="384" width="42" height="32" rx="2"
fill="#050908" stroke="#d2b477" stroke-width="2"/>
<rect x="400" y="387" width="36" height="26" fill="#e5d9be"/>
<text id="date" x="418" y="407" text-anchor="middle"
fill="#1a211e" font-family="Georgia, serif" font-size="20">1</text>
<!-- Subtle reflection under the hands -->
<g clip-path="url(#dialClip)" pointer-events="none">
<path d="M116 225 H347 Q270 311 185 471 L116 465 Z" fill="url(#glass)" opacity=".55"/>
<circle cx="300" cy="400" r="174" fill="url(#glass)"/>
</g>
<!-- Hands rotate around the dial's center -->
<g id="hour-hand">
<path d="M-5 17 L-7 -55 L0 -96 L7 -55 L5 17 Z"
fill="url(#handGold)" stroke="#67491f" stroke-width="1"/>
<path d="M0 -84 L3 -54 L3 -11 L-3 -11 L-3 -54 Z" fill="#e9dcb5" opacity=".75"/>
</g>
<g id="minute-hand">
<path d="M-4 20 L-5 -100 L0 -140 L5 -100 L4 20 Z"
fill="url(#handGold)" stroke="#67491f" stroke-width="1"/>
<path d="M0 -127 L2.3 -99 L2.3 -13 L-2.3 -13 L-2.3 -99 Z" fill="#e9dcb5" opacity=".8"/>
</g>
<g id="second-hand">
<path d="M-1.1 36 L-1.1 -156 L0 -164 L1.1 -156 L1.1 36 Z" fill="#e9c87f"/>
<circle cx="0" cy="31" r="5" fill="none" stroke="#e9c87f" stroke-width="1.8"/>
</g>
<circle cx="300" cy="400" r="7" fill="#98703b" stroke="#f5dba1" stroke-width="1"/>
<circle cx="300" cy="400" r="3" fill="#f3d99c"/>
<!-- Crystal rim highlight -->
<circle cx="300" cy="400" r="175" fill="none" stroke="#fff1cb" stroke-opacity=".12" stroke-width="1"/>
<path d="M162 296 A174 174 0 0 1 263 230" fill="none"
stroke="#fff2d0" stroke-opacity=".28" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</main>
<script>
(() => {
const ns = "http://www.w3.org/2000/svg";
const track = document.getElementById("minute-track");
const indices = document.getElementById("hour-indices");
function element(name, attributes) {
const node = document.createElementNS(ns, name);
for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, value);
return node;
}
for (let i = 0; i < 60; i++) {
const major = i % 5 === 0;
track.appendChild(element("line", {
x1: 300, y1: major ? 232 : 235, x2: 300, y2: major ? 242 : 240,
stroke: major ? "#d9bd83" : "#a99776",
"stroke-width": major ? 1.5 : 0.7,
opacity: major ? 0.95 : 0.7,
transform: `rotate(${i * 6} 300 400)`
}));
}
for (let i = 0; i < 12; i++) {
if (i % 3 === 0) continue;
indices.appendChild(element("path", {
d: "M 296.5 252 L 300 247 L 303.5 252 L 302.5 270 L 297.5 270 Z",
fill: "url(#handGold)",
stroke: "#72552a",
"stroke-width": 0.7,
transform: `rotate(${i * 30} 300 400)`
}));
}
const hour = document.getElementById("hour-hand");
const minute = document.getElementById("minute-hand");
const second = document.getElementById("second-hand");
const date = document.getElementById("date");
const watch = document.getElementById("watch");
let lastDate = -1;
let lastLabel = "";
function update() {
const now = new Date();
const seconds = now.getSeconds() + now.getMilliseconds() / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
hour.setAttribute("transform", `translate(300 400) rotate(${hours * 30})`);
minute.setAttribute("transform", `translate(300 400) rotate(${minutes * 6})`);
second.setAttribute("transform", `translate(300 400) rotate(${seconds * 6})`);
if (now.getDate() !== lastDate) {
lastDate = now.getDate();
date.textContent = lastDate;
}
const label = `Gold mechanical wristwatch. Local time ${now.toLocaleTimeString()}, date ${now.toLocaleDateString()}.`;
if (label !== lastLabel) {
watch.setAttribute("aria-label", label);
lastLabel = label;
}
requestAnimationFrame(update);
}
update();
})();
</script>
</body>
</html>
