Run details
- Model
- openai/gpt-6.1-sol
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 398 reasoning tokens
- Limits
- 60 min · 60,000 output tokens
- Date
- 21 Oct 2026
- Time
- 2 min 22 s
- Size
- 20 kB
- Tokens
- 82 in, 7,040 out
- List price
- $0.071 ($2 in / $10 out per M)
- Paid
- $0.071
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
20 kB 451 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0a1016">
<title>Meridian — Automatic</title>
<style>
:root {
color-scheme: dark;
--gold: #d4b581;
--muted: #7f8990;
--ivory: #eee8dc;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
background: #0a1016;
color: var(--ivory);
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 48% 42%, #25303955, transparent 57%),
linear-gradient(115deg, #ffffff03, transparent 45%, #00000055);
}
.page {
position: relative;
min-height: 100svh;
max-width: 1440px;
margin: auto;
padding: 32px 48px 25px;
display: flex;
flex-direction: column;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.wordmark { font-family: Georgia, serif; font-size: 21px; letter-spacing: 6px; }
.edition { font-size: 9px; letter-spacing: 3px; color: var(--muted); }
main {
flex: 1;
display: grid;
grid-template-columns: 1fr minmax(340px, 600px) 1fr;
align-items: center;
min-height: 0;
}
.intro { z-index: 1; margin-right: -50px; }
.eyebrow { color: var(--gold); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; }
h1 {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(32px, 3.5vw, 50px);
font-weight: 400;
line-height: 1.15;
margin: 19px 0 20px;
}
.intro p {
color: var(--muted);
font-size: 12px;
line-height: 1.9;
max-width: 180px;
margin: 0;
}
.rule { width: 34px; height: 1px; background: #b4966270; margin: 26px 0; }
.reference { color: #67747c; font-size: 9px; letter-spacing: 2px; }
.watch-stage { position: relative; width: 100%; }
.watch-stage::before {
content: "";
position: absolute;
width: 68%;
height: 62%;
left: 19%;
top: 24%;
background: #000;
filter: blur(48px);
opacity: .6;
transform: rotate(-15deg);
}
svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.specs { justify-self: end; padding-left: 18px; }
.spec { margin: 35px 0; }
.spec strong {
display: block;
color: #c9c3b7;
font-family: Georgia, serif;
font-size: 21px;
font-weight: normal;
margin-bottom: 7px;
}
.spec span { color: var(--muted); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; }
footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
border-top: 1px solid #ffffff0d;
padding-top: 19px;
}
.time-label { font-size: 8px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
#digital-time { font-size: 13px; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.live { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin: 0 10px 2px 0; box-shadow: 0 0 8px #d4b58144; }
#local-date { color: #929a9e; font-size: 10px; letter-spacing: 1px; text-align: right; }
.balance { transform-origin: 300px 470px; animation: oscillate .55s ease-in-out infinite alternate; }
@keyframes oscillate { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@media (min-width: 1000px) {
.watch-stage { margin: -15px 0; }
svg { max-height: calc(100svh - 130px); min-height: 500px; }
}
@media (max-width: 850px) {
.page { padding: 25px 25px 22px; }
main { grid-template-columns: 1fr minmax(300px, 520px) 1fr; }
.intro { margin-right: -70px; }
h1 { font-size: 30px; }
.intro p, .reference, .rule, .specs { display: none; }
}
@media (max-width: 600px) {
.page { padding: 24px 22px 20px; }
.wordmark { font-size: 17px; letter-spacing: 4px; }
.edition { font-size: 7px; letter-spacing: 1.5px; }
main { display: flex; flex-direction: column; justify-content: center; }
.intro { text-align: center; margin: 32px 0 -13px; }
.eyebrow { font-size: 8px; }
h1 { font-size: 27px; margin: 10px 0 0; }
h1 br { display: none; }
.watch-stage { width: min(110%, 430px); flex-shrink: 0; }
footer { padding-top: 15px; }
#local-date { max-width: 150px; font-size: 9px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) { .balance { animation: none; } }
</style>
</head>
<body>
<div class="page">
<header>
<div class="wordmark">MERIDIAN</div>
<div class="edition">THE ATELIER COLLECTION</div>
</header>
<main>
<section class="intro">
<div class="eyebrow">No. 01 / Midnight</div>
<h1>A moment.<br>Made timeless.</h1>
<p>Warm gold. Midnight blue.<br>The quiet art of keeping time.</p>
<div class="rule"></div>
<div class="reference">REF. M—1926</div>
</section>
<div class="watch-stage">
<svg id="watch" viewBox="0 0 600 760" role="img" aria-labelledby="watch-title watch-description">
<title id="watch-title">Meridian midnight-blue mechanical wristwatch</title>
<desc id="watch-description">A gold automatic watch with a sweeping seconds hand and a date window, displaying your current local time.</desc>
<defs>
<linearGradient id="leather" x1="0" x2="1">
<stop stop-color="#080e12"/>
<stop offset=".16" stop-color="#172129"/>
<stop offset=".45" stop-color="#202a31"/>
<stop offset=".8" stop-color="#101920"/>
<stop offset="1" stop-color="#050a0e"/>
</linearGradient>
<pattern id="grain" width="36" height="43" patternUnits="userSpaceOnUse">
<path d="M0 4Q18 -4 36 4M0 40Q18 47 36 40M3 7Q0 22 4 36M32 6Q38 20 32 37" fill="none" stroke="#000" stroke-opacity=".35" stroke-width="1.8"/>
<path d="M7 10Q18 5 28 11M7 13L9 31M13 35L27 33" fill="none" stroke="#91a0a6" stroke-opacity=".06"/>
</pattern>
<linearGradient id="gold" x1=".1" y1="0" x2=".9" y2="1">
<stop stop-color="#705335"/>
<stop offset=".14" stop-color="#e5c18a"/>
<stop offset=".26" stop-color="#fff0bd"/>
<stop offset=".4" stop-color="#b08a53"/>
<stop offset=".61" stop-color="#80603c"/>
<stop offset=".79" stop-color="#e9c892"/>
<stop offset=".9" stop-color="#f7dfac"/>
<stop offset="1" stop-color="#8a683e"/>
</linearGradient>
<linearGradient id="bezel" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#fff0c2"/>
<stop offset=".22" stop-color="#b8935c"/>
<stop offset=".48" stop-color="#64492d"/>
<stop offset=".7" stop-color="#d6b17a"/>
<stop offset=".88" stop-color="#ffeac0"/>
<stop offset="1" stop-color="#8e693c"/>
</linearGradient>
<linearGradient id="hand-metal" x1="0" x2="1">
<stop stop-color="#80623d"/>
<stop offset=".46" stop-color="#fff2c8"/>
<stop offset=".51" stop-color="#c8a36b"/>
<stop offset="1" stop-color="#a37c48"/>
</linearGradient>
<radialGradient id="dial" cx=".38" cy=".28" r=".85">
<stop stop-color="#254657"/>
<stop offset=".45" stop-color="#122e40"/>
<stop offset=".8" stop-color="#0b1c2b"/>
<stop offset="1" stop-color="#050e17"/>
</radialGradient>
<radialGradient id="crystal" cx=".24" cy=".12" r=".95">
<stop stop-color="#d7e8f3" stop-opacity=".12"/>
<stop offset=".5" stop-color="#c8e2f1" stop-opacity="0"/>
<stop offset=".85" stop-color="#94b4d0" stop-opacity=".025"/>
<stop offset="1" stop-color="#000" stop-opacity=".25"/>
</radialGradient>
<linearGradient id="date-gold" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#725233"/>
<stop offset=".5" stop-color="#e8c68c"/>
<stop offset="1" stop-color="#9b773f"/>
</linearGradient>
<filter id="case-shadow" x="-40%" y="-30%" width="180%" height="180%">
<feDropShadow dx="7" dy="19" stdDeviation="13" flood-color="#000" flood-opacity=".65"/>
</filter>
<filter id="hand-shadow" x="-100%" y="-100%" width="300%" height="300%">
<feDropShadow dx="2" dy="3" stdDeviation="2" flood-opacity=".7"/>
</filter>
<clipPath id="dial-clip"><circle cx="300" cy="380" r="194"/></clipPath>
</defs>
<!-- Padded, stitched leather strap -->
<path d="M204 -30Q300 -42 396 -30L410 178L391 211H209L190 178Z" fill="url(#leather)" stroke="#03080b" stroke-width="3"/>
<path d="M209 555H391L410 585L393 791Q300 807 207 791L190 585Z" fill="url(#leather)" stroke="#03080b" stroke-width="3"/>
<path d="M204 -30H396L409 179H191ZM192 586H408L393 790H207Z" fill="url(#grain)" opacity=".85"/>
<g fill="none" stroke="#8b8066" stroke-opacity=".35" stroke-width="1.3" stroke-dasharray="3.5 5">
<path d="M215 -10L203 166M385 -10L397 166M203 599L218 773M397 599L382 773"/>
</g>
<g fill="#04090d" stroke="#324049" stroke-width=".8">
<ellipse cx="300" cy="669" rx="3.3" ry="6"/>
<ellipse cx="300" cy="706" rx="3.3" ry="6"/>
<ellipse cx="300" cy="743" rx="3.3" ry="6"/>
</g>
<g filter="url(#case-shadow)">
<!-- Sculpted lugs -->
<g fill="url(#gold)" stroke="#795b36" stroke-width="1">
<path d="M168 222L179 149Q189 134 207 139L225 177L209 226Z"/>
<path d="M432 222L421 149Q411 134 393 139L375 177L391 226Z"/>
<path d="M168 538L179 611Q189 626 207 621L225 583L209 534Z"/>
<path d="M432 538L421 611Q411 626 393 621L375 583L391 534Z"/>
</g>
<g fill="none" stroke="#ffe3ad" stroke-opacity=".45">
<path d="M184 159L176 203M416 159L424 203M184 601L176 557M416 601L424 557"/>
</g>
<!-- Crown and case -->
<rect x="516" y="363" width="24" height="34" rx="5" fill="url(#gold)"/>
<rect x="536" y="357" width="27" height="46" rx="7" fill="url(#bezel)" stroke="#8c6a3d"/>
<g stroke="#5a4027" stroke-width="1.5" opacity=".8">
<path d="M540 362V398M545 359V401M550 359V401M555 360V400M560 364V396"/>
</g>
<circle cx="300" cy="380" r="225" fill="url(#gold)" stroke="#bd9c69" stroke-width="1"/>
<circle cx="300" cy="380" r="219" fill="none" stroke="#fff1c2" stroke-opacity=".5" stroke-width="1"/>
<circle cx="300" cy="380" r="215" fill="url(#bezel)"/>
<circle cx="300" cy="380" r="204" fill="#2d251c" stroke="#604a31" stroke-width="2"/>
<circle cx="300" cy="380" r="199" fill="url(#dial)" stroke="#e1c18a" stroke-width="2"/>
</g>
<g clip-path="url(#dial-clip)">
<g id="sunburst"></g>
<g id="dial-rings" fill="none" stroke="#8aafc0" stroke-opacity=".065" stroke-width=".5"></g>
<circle cx="300" cy="380" r="182" fill="none" stroke="#cbb687" stroke-opacity=".35" stroke-width=".6"/>
<circle cx="300" cy="380" r="157" fill="none" stroke="#cbb687" stroke-opacity=".2" stroke-width=".5"/>
<g id="minute-marks"></g>
<g id="hour-marks" filter="url(#hand-shadow)"></g>
<g text-anchor="middle">
<path d="M290 263L295 251L300 259L305 251L310 263Z" fill="none" stroke="#dbbf8d" stroke-width="1.2"/>
<text x="300" y="287" fill="#e7d2a9" font-family="Georgia, serif" font-size="17" letter-spacing="4">MERIDIAN</text>
<text x="300" y="304" fill="#a4b1b5" font-family="Arial, sans-serif" font-size="6.5" letter-spacing="3">ATELIER • AUTOMATIC</text>
<text x="300" y="519" fill="#c8b78f" font-family="Georgia, serif" font-size="9" letter-spacing="2.5">28 JEWELS</text>
<text x="300" y="553" fill="#a9a795" font-family="Arial, sans-serif" font-size="5.5" letter-spacing="2">MECHANICAL MOVEMENT</text>
</g>
<!-- Beveled date aperture -->
<rect x="414" y="365" width="53" height="30" rx="1" fill="url(#date-gold)"/>
<rect x="417" y="368" width="47" height="24" fill="#e8e0cc"/>
<path d="M417 392V368H464" fill="none" stroke="#302c27" stroke-width="2.5"/>
<text id="date-number" x="440.5" y="385.5" text-anchor="middle" fill="#1e2529" font-family="Georgia, serif" font-size="18">1</text>
<!-- Open-heart balance, beneath the dial -->
<circle cx="300" cy="470" r="30" fill="#060b10" stroke="#9d8053" stroke-width="1.5"/>
<circle cx="300" cy="470" r="25" fill="#121a21" stroke="#344047" stroke-width="3"/>
<g class="balance">
<circle cx="300" cy="470" r="21" fill="none" stroke="#b4975e" stroke-width="3"/>
<circle cx="300" cy="470" r="16" fill="none" stroke="#6d7780" stroke-width=".8"/>
<circle cx="300" cy="470" r="12" fill="none" stroke="#927d59" stroke-width=".7"/>
<path d="M300 449V491M279 470H321M285 455L315 485M285 485L315 455" stroke="#b4975e" stroke-width="2"/>
<g fill="#e5c78d">
<circle cx="300" cy="449" r="2.3"/><circle cx="300" cy="491" r="2.3"/>
<circle cx="279" cy="470" r="2.3"/><circle cx="321" cy="470" r="2.3"/>
</g>
</g>
<path d="M273 475L288 467H312L327 475L325 480L311 475H289L275 480Z" fill="url(#gold)" stroke="#4d3d29" stroke-width=".6"/>
<circle cx="300" cy="470" r="4.3" fill="#a68d63"/>
<circle cx="300" cy="470" r="2" fill="#7b2940"/>
<g fill="#b4b8b6" stroke="#2e3435" stroke-width=".7">
<circle cx="276" cy="476" r="2.4"/><circle cx="324" cy="476" r="2.4"/>
</g>
<path d="M274 476H278M322 476H326" stroke="#3d4447" stroke-width=".8"/>
</g>
<!-- Faceted hands, all pivoting on the same arbor -->
<g filter="url(#hand-shadow)">
<g id="hour-hand">
<path d="M295 398L292 367L294 289L300 265L306 289L308 367L305 398Z" fill="url(#hand-metal)" stroke="#cbb080" stroke-width=".5"/>
<path d="M300 278L300 385L295 365L297 291Z" fill="#fff0ca" opacity=".45"/>
<path d="M298 290H302L303 348H297Z" fill="#c4cfc0"/>
</g>
<g id="minute-hand">
<path d="M297 408L294.5 370L296.8 236L300 211L303.2 236L305.5 370L303 408Z" fill="url(#hand-metal)" stroke="#d4b882" stroke-width=".5"/>
<path d="M299 239H301L302 345H298Z" fill="#d5ded0"/>
<path d="M300 218V398" fill="none" stroke="#ffedbc" stroke-opacity=".5" stroke-width=".6"/>
</g>
</g>
<g id="second-hand">
<path d="M299.3 424L299.3 213L300 198L300.7 213L300.7 424Z" fill="#e4c28a"/>
<circle cx="300" cy="414" r="6.5" fill="none" stroke="#dbb77c" stroke-width="1.8"/>
<path d="M300 421V432" stroke="#dbb77c" stroke-width="1.8"/>
</g>
<circle cx="300" cy="380" r="7.5" fill="url(#gold)" stroke="#6c5233" stroke-width=".7"/>
<circle cx="300" cy="380" r="3" fill="#e8d4ab"/>
<circle cx="300" cy="380" r="1.2" fill="#9c794c"/>
<!-- Sapphire surface and polished edge -->
<circle cx="300" cy="380" r="197" fill="url(#crystal)" pointer-events="none"/>
<path d="M118 333A190 190 0 0 1 352 195" fill="none" stroke="#fff" stroke-width="1.5" opacity=".17"/>
<path d="M451 502A191 191 0 0 1 253 566" fill="none" stroke="#b6d9ec" stroke-width=".8" opacity=".12"/>
</svg>
</div>
<aside class="specs" aria-label="Design details">
<div class="spec"><strong>Automatic</strong><span>Mechanical soul</span></div>
<div class="spec"><strong>Midnight</strong><span>Sunburst dial</span></div>
<div class="spec"><strong>Rose gold</strong><span>Polished finish</span></div>
</aside>
</main>
<footer>
<div>
<div class="time-label">YOUR LOCAL TIME</div>
<span class="live" aria-hidden="true"></span><time id="digital-time">—</time>
</div>
<div id="local-date"></div>
</footer>
</div>
<script>
(() => {
'use strict';
const ns = 'http://www.w3.org/2000/svg';
const make = (tag, attributes, parent) => {
const el = document.createElementNS(ns, tag);
for (const [key, value] of Object.entries(attributes)) el.setAttribute(key, value);
parent.appendChild(el);
return el;
};
const rays = document.getElementById('sunburst');
for (let i = 0; i < 240; i++) {
const angle = i * Math.PI / 120;
make('line', {
x1: 300 + Math.sin(angle) * 42,
y1: 380 - Math.cos(angle) * 42,
x2: 300 + Math.sin(angle) * 195,
y2: 380 - Math.cos(angle) * 195,
stroke: i % 3 ? '#90c0d5' : '#030e18',
'stroke-opacity': i % 3 ? '.035' : '.14',
'stroke-width': '.65'
}, rays);
}
const rings = document.getElementById('dial-rings');
for (let r = 48; r < 157; r += 3) {
make('circle', { cx: 300, cy: 380, r }, rings);
}
const minutes = document.getElementById('minute-marks');
for (let i = 0; i < 60; i++) {
make('line', {
x1: 300, y1: 190, x2: 300, y2: i % 5 === 0 ? 199 : 195,
stroke: '#d8c69d',
'stroke-opacity': i % 5 === 0 ? '.95' : '.65',
'stroke-width': i % 5 === 0 ? '1.5' : '.85',
transform: `rotate(${i * 6} 300 380)`
}, minutes);
}
const hours = document.getElementById('hour-marks');
for (let i = 0; i < 12; i++) {
if (i === 3) continue;
const group = make('g', { transform: `rotate(${i * 30} 300 380)` }, hours);
if (i === 0) {
for (const x of [293, 302]) {
make('path', { d: `M${x} 208H${x + 5}L${x + 4} 231H${x + 1}Z`, fill: 'url(#hand-metal)', stroke: '#e9d4a7', 'stroke-width': '.4' }, group);
}
} else {
make('path', {
d: 'M296 208H304L302.7 230L300 234L297.3 230Z',
fill: 'url(#hand-metal)', stroke: '#e9d4a7', 'stroke-width': '.4'
}, group);
make('path', { d: 'M300 211V229', stroke: '#f7e3b7', 'stroke-opacity': '.55', 'stroke-width': '.7' }, group);
}
}
const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const secondHand = document.getElementById('second-hand');
const dateNumber = document.getElementById('date-number');
const digitalTime = document.getElementById('digital-time');
const localDate = document.getElementById('local-date');
const description = document.getElementById('watch-description');
const timeFormat = new Intl.DateTimeFormat(undefined, {
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
});
const dateFormat = new Intl.DateTimeFormat(undefined, {
weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'
});
let previousSecond = '';
let previousDay = '';
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;
hourHand.setAttribute('transform', `rotate(${hours * 30} 300 380)`);
minuteHand.setAttribute('transform', `rotate(${minutes * 6} 300 380)`);
secondHand.setAttribute('transform', `rotate(${seconds * 6} 300 380)`);
const secondKey = Math.floor(now.getTime() / 1000);
if (secondKey !== previousSecond) {
const formattedTime = timeFormat.format(now);
digitalTime.textContent = formattedTime;
digitalTime.dateTime = now.toISOString();
description.textContent = `A gold automatic wristwatch displaying the current local time, ${formattedTime}, with a sweeping seconds hand and date window.`;
previousSecond = secondKey;
}
const dayKey = `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`;
if (dayKey !== previousDay) {
dateNumber.textContent = now.getDate();
localDate.textContent = dateFormat.format(now);
previousDay = dayKey;
}
requestAnimationFrame(update);
}
update();
})();
</script>
</body>
</html>

