Run details
- Model
- unbiased/pareto-26.10
- Route
- OpenRouter API, one user message
- Served by
- Unbiased
- Reasoning
- provider default
- Limits
- 60 min · 131,072 output tokens
- Date
- 22 Oct 2026
- Time
- 2 min 22 s
- Size
- 24 kB
- Tokens
- 82 in, 8,605 out
- List price
- $0.028 ($0.8 in / $3.2 out per M)
- Paid
- $0.028
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
24 kB 474 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="#151614">
<title>VALE — Time, beautifully kept.</title>
<style>
:root {
color-scheme: dark;
--background: #151614;
--ivory: #eee9dc;
--muted: #939387;
--gold: #c5ae7b;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--background);
color: var(--ivory);
font-family: Arial, Helvetica, sans-serif;
min-height: 100svh;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 67% 43%, #72644818, transparent 53%),
linear-gradient(115deg, #ffffff03, transparent 40%, #00000030);
}
.page { max-width: 1600px; margin: auto; padding: 34px 5.2vw 25px; position: relative; }
header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 27px;
border-bottom: 1px solid #ffffff12;
}
.wordmark { font: 27px Georgia, serif; letter-spacing: .32em; }
.wordmark small {
display: block; font: 7px Arial, sans-serif;
letter-spacing: .39em; color: var(--muted); margin-top: 7px;
}
.header-note { font-size: 9px; letter-spacing: .23em; color: #a6a698; }
.header-note span { color: var(--gold); margin-right: 13px; }
main {
min-height: 680px;
height: min(790px, calc(100svh - 185px));
display: grid;
grid-template-columns: 34% 66%;
align-items: center;
position: relative;
}
.intro { padding-bottom: 35px; z-index: 1; }
.eyebrow {
color: var(--gold); font-size: 9px; letter-spacing: .25em;
text-transform: uppercase; display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 29px; height: 1px; background: var(--gold); }
h1 {
font: normal clamp(46px, 4.7vw, 76px)/1.08 Georgia, "Times New Roman", serif;
letter-spacing: -.045em;
margin: 29px 0 25px;
}
h1 em { font-weight: normal; color: #c9c5b8; }
.description {
max-width: 255px; color: var(--muted); font-size: 12px;
line-height: 1.95; letter-spacing: .015em;
}
button {
margin-top: 35px; background: none; border: 1px solid #c5ae7b44;
color: #d3c5a8; padding: 13px 17px; cursor: pointer;
font: 9px Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 12px; border-radius: 2px;
transition: background .25s, border-color .25s;
}
button:hover { background: #c5ae7b0c; border-color: #c5ae7b99; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
button .dot { width: 6px; height: 6px; border: 1px solid #c5ae7b; border-radius: 50%; }
button[aria-pressed="true"] .dot { background: #bdf5cd; box-shadow: 0 0 8px #bdf5cd; border-color: #bdf5cd; }
.watch-stage {
height: 100%; position: relative; display: flex; align-items: center; justify-content: center;
min-width: 0;
}
.watch-stage::before {
content: ""; position: absolute; width: 75%; aspect-ratio: 1;
border-radius: 50%; background: #9b855b08; filter: blur(45px);
}
.watch { height: 100%; width: 100%; max-width: 710px; overflow: visible; position: relative; }
.edition {
position: absolute; right: -10px; top: 50%;
writing-mode: vertical-rl; font-size: 8px; letter-spacing: .28em; color: #777a6d;
}
.lume { fill: #d9dbc5; transition: fill 1s, filter 1s; }
.night .lume { fill: #bdf5cd; filter: url(#lume-glow); }
.night #dial-shade { opacity: .5; }
#dial-shade { opacity: 0; transition: opacity 1s; }
footer {
display: flex; justify-content: space-between; align-items: center;
border-top: 1px solid #ffffff12; padding-top: 24px; gap: 25px;
}
.model { font: 16px Georgia, serif; letter-spacing: .025em; }
.model span { display: block; margin-top: 7px; color: var(--muted); font: 8px Arial, sans-serif; letter-spacing: .19em; }
.specs { display: flex; gap: 35px; }
.spec { color: #c5c5b9; font-size: 10px; letter-spacing: .04em; }
.spec span { display: block; font-size: 8px; letter-spacing: .15em; margin-bottom: 8px; color: #7f8376; }
.live { text-align: right; }
.live-time { font-size: 12px; letter-spacing: .13em; font-variant-numeric: tabular-nums; }
.live-time::before { content: ""; display: inline-block; height: 4px; width: 4px; background: #b7c59a; border-radius: 50%; margin: 0 9px 2px 0; box-shadow: 0 0 7px #b7c59a33; }
.zone { font-size: 8px; letter-spacing: .13em; margin-top: 8px; color: var(--muted); text-transform: uppercase; }
@media (min-width: 1500px) { main { grid-template-columns: 38% 62%; } }
@media (max-width: 800px) {
.page { padding: 24px 6vw; }
main { grid-template-columns: 30% 70%; min-height: 550px; height: 640px; }
h1 { font-size: 42px; }
.description { font-size: 11px; }
.eyebrow { font-size: 8px; letter-spacing: .1em; }
.eyebrow::before { width: 15px; }
.edition { right: -6px; }
.specs { gap: 20px; }
.spec:last-child { display: none; }
}
@media (max-width: 580px) {
header { padding-bottom: 20px; }
.wordmark { font-size: 23px; }
.header-note { font-size: 7px; letter-spacing: .12em; }
main { display: flex; flex-direction: column; height: auto; min-height: 0; }
.intro { text-align: center; padding: 37px 0 0; width: 100%; }
.eyebrow { justify-content: center; font-size: 8px; letter-spacing: .2em; }
.eyebrow::before { display: none; }
h1 { font-size: 40px; margin: 15px 0 13px; }
h1 br { display: none; }
.description { max-width: 285px; margin: auto; font-size: 11px; line-height: 1.7; }
button { margin-top: 20px; padding: 10px 13px; font-size: 8px; }
.watch-stage { height: auto; width: calc(100% + 20px); aspect-ratio: 4 / 5; margin: -2px 0 5px; }
.watch { height: 100%; }
.edition { right: 0; font-size: 6px; }
footer { flex-wrap: wrap; padding-top: 20px; gap: 23px; }
.model { font-size: 15px; }
.specs { order: 3; width: 100%; justify-content: space-between; padding-top: 18px; border-top: 1px solid #ffffff0c; }
.spec:last-child { display: block; }
.live-time { font-size: 10px; }
.zone { font-size: 7px; max-width: 150px; line-height: 1.5; }
}
</style>
</head>
<body>
<div class="page">
<header>
<div class="wordmark">VALE<small>INDEPENDENT HOROLOGY</small></div>
<div class="header-note"><span>№ 01</span> THE PERPETUAL COLLECTION</div>
</header>
<main>
<section class="intro">
<div class="eyebrow">The art of passing time</div>
<h1>Time,<br> <em>beautifully</em><br> kept.</h1>
<p class="description">An open heart. An uninterrupted sweep.<br>A quiet expression of mechanical precision, set to your moment.</p>
<button id="lume-button" type="button" aria-pressed="false"><span class="dot"></span><span id="lume-label">Illuminate dial</span></button>
</section>
<div class="watch-stage">
<svg class="watch" viewBox="0 0 800 1000" role="img" aria-labelledby="watch-title watch-description">
<title id="watch-title">VALE No. 01 automatic wristwatch</title>
<desc id="watch-description">A champagne-gold mechanical wristwatch with a charcoal dial, exposed movement, sweeping seconds hand, and a local date window.</desc>
<defs>
<linearGradient id="leather" x1="0" x2="1">
<stop stop-color="#100e0b"/><stop offset=".09" stop-color="#352c23"/>
<stop offset=".3" stop-color="#29241d"/><stop offset=".6" stop-color="#211e19"/>
<stop offset=".92" stop-color="#30281e"/><stop offset="1" stop-color="#0b0b09"/>
</linearGradient>
<pattern id="grain" width="40" height="33" patternUnits="userSpaceOnUse">
<path d="M0 1Q20 7 40 1M0 32Q21 26 40 32M2 2Q8 15 2 32M38 2Q32 16 38 32" fill="none" stroke="#080806" stroke-width="1.8" opacity=".55"/>
<path d="M4 4Q20 9 35 4M7 14l22 1M9 20l19 -1" fill="none" stroke="#8b7554" stroke-width=".6" opacity=".16"/>
</pattern>
<linearGradient id="metal" x1=".05" y1="0" x2=".95" y2="1">
<stop stop-color="#5b4930"/><stop offset=".15" stop-color="#d0bc8f"/>
<stop offset=".26" stop-color="#f5e4b7"/><stop offset=".37" stop-color="#a68b59"/>
<stop offset=".53" stop-color="#625033"/><stop offset=".7" stop-color="#d4bd8a"/>
<stop offset=".85" stop-color="#f6e7c1"/><stop offset="1" stop-color="#75603c"/>
</linearGradient>
<linearGradient id="bezel" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#faf0d2"/><stop offset=".18" stop-color="#baa373"/>
<stop offset=".42" stop-color="#77613b"/><stop offset=".6" stop-color="#e0cca0"/>
<stop offset=".8" stop-color="#a88f5e"/><stop offset="1" stop-color="#eee0b8"/>
</linearGradient>
<linearGradient id="edge" x1="0" y1="0" x2="1" y2=".8">
<stop stop-color="#8a724a"/><stop offset=".28" stop-color="#ffedc4"/>
<stop offset=".5" stop-color="#4a3b26"/><stop offset=".77" stop-color="#c4a974"/><stop offset="1" stop-color="#635031"/>
</linearGradient>
<radialGradient id="dial" cx=".4" cy=".28" r=".85">
<stop stop-color="#373b34"/><stop offset=".45" stop-color="#252a24"/>
<stop offset=".8" stop-color="#171c18"/><stop offset="1" stop-color="#0d110e"/>
</radialGradient>
<radialGradient id="glass" cx=".3" cy=".12" r=".95">
<stop stop-color="#ffffff" stop-opacity=".07"/><stop offset=".6" stop-color="#ffffff" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity=".15"/>
</radialGradient>
<linearGradient id="hand" x1="0" y1="0" x2="1" y2="0">
<stop stop-color="#6d5835"/><stop offset=".47" stop-color="#f6e6bc"/>
<stop offset=".5" stop-color="#beaa7c"/><stop offset="1" stop-color="#8c744a"/>
</linearGradient>
<linearGradient id="date-frame" x1="0" y1="0" x2=".4" y2="1">
<stop stop-color="#5b4e35"/><stop offset=".5" stop-color="#d1bd90"/><stop offset="1" stop-color="#f3e2b6"/>
</linearGradient>
<radialGradient id="opening">
<stop stop-color="#272a23"/><stop offset=".8" stop-color="#121611"/><stop offset="1" stop-color="#030503"/>
</radialGradient>
<filter id="case-shadow" x="-40%" y="-30%" width="180%" height="170%">
<feDropShadow dx="13" dy="25" stdDeviation="22" flood-color="#000" flood-opacity=".65"/>
</filter>
<filter id="hand-shadow" x="-100%" y="-40%" width="300%" height="200%">
<feDropShadow dx="3" dy="5" stdDeviation="2.4" flood-opacity=".7"/>
</filter>
<filter id="lume-glow" x="-100%" y="-50%" width="300%" height="200%">
<feGaussianBlur stdDeviation="2" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<clipPath id="heart-clip"><circle cx="400" cy="606" r="37"/></clipPath>
</defs>
<!-- Hand-stitched leather, with curved shoulders tucked into the case. -->
<g filter="url(#case-shadow)">
<path d="M306 -25H494L506 264H294Z M294 697H506L491 1030H309Z" fill="url(#leather)" stroke="#080907" stroke-width="3"/>
<path d="M306 -25H494L506 264H294Z M294 697H506L491 1030H309Z" fill="url(#grain)"/>
<g fill="none" stroke="#8a7350" stroke-width="1.7" stroke-dasharray="5 5" opacity=".5">
<path d="M318 0L311 242M482 0L489 242M310 725L322 1000M490 725L478 1000"/>
</g>
<g fill="#090a08" stroke="#655039" stroke-width="1">
<ellipse cx="400" cy="847" rx="4" ry="7"/><ellipse cx="400" cy="898" rx="4" ry="7"/><ellipse cx="400" cy="949" rx="4" ry="7"/>
</g>
<!-- Sculpted gold lugs. -->
<g fill="url(#metal)" stroke="#665233" stroke-width="1.5">
<path d="M278 317L288 223Q291 211 309 213L324 274Z"/>
<path d="M476 274L491 213Q509 211 512 223L522 317Z"/>
<path d="M278 643L288 737Q291 749 309 747L324 686Z"/>
<path d="M476 686L491 747Q509 749 512 737L522 643Z"/>
</g>
<g fill="none" stroke="#f2dfb2" opacity=".5">
<path d="M292 235L285 294M506 235L513 294M285 666L292 726M513 666L506 726"/>
</g>
<!-- Fluted winding crown. -->
<rect x="632" y="461" width="26" height="38" rx="6" fill="url(#edge)"/>
<rect x="650" y="453" width="30" height="54" rx="8" fill="url(#metal)" stroke="#6c5939" stroke-width="1.5"/>
<g stroke="#4f3f27" stroke-width="2" opacity=".8">
<path d="M657 456V504M662 454V506M667 454V506M672 456V504M677 460V500"/>
</g>
<circle cx="400" cy="480" r="245" fill="url(#edge)" stroke="#d0b887" stroke-width="1"/>
<circle cx="400" cy="480" r="239" fill="url(#metal)" stroke="#433622" stroke-width="2"/>
<circle cx="400" cy="480" r="228" fill="url(#bezel)" stroke="#f0ddb2" stroke-width="1"/>
<circle cx="400" cy="480" r="217" fill="#0e120e" stroke="#54472f" stroke-width="3"/>
<circle cx="400" cy="480" r="211" fill="url(#dial)" stroke="#d2bc8b" stroke-width="1"/>
</g>
<!-- Concentric dial machining and a fine outer chapter ring. -->
<g fill="none" stroke="#d1c493" opacity=".045">
<circle cx="400" cy="480" r="177"/><circle cx="400" cy="480" r="174"/>
<circle cx="400" cy="480" r="171"/><circle cx="400" cy="480" r="168"/>
<circle cx="400" cy="480" r="165"/><circle cx="400" cy="480" r="162"/>
<circle cx="400" cy="480" r="159"/><circle cx="400" cy="480" r="156"/>
</g>
<circle id="dial-shade" cx="400" cy="480" r="210" fill="#000"/>
<circle cx="400" cy="480" r="201" fill="none" stroke="#c9b984" stroke-width=".6" opacity=".35"/>
<g id="minute-track"></g>
<g id="hour-markers"></g>
<g text-anchor="middle">
<path d="M390 339L400 325L410 339L400 335Z" fill="none" stroke="#d2bd90" stroke-width="1.2"/>
<text x="403" y="365" fill="#e5d5ae" font-family="Georgia,serif" font-size="24" letter-spacing="7">VALE</text>
<text x="401" y="383" fill="#a9a68f" font-family="Arial,sans-serif" font-size="7" letter-spacing="3.2">AUTOMATIC</text>
<text x="400" y="544" fill="#c4bd9f" font-family="Georgia,serif" font-size="12" font-style="italic" letter-spacing=".7">Open Heart</text>
<text x="400" y="560" fill="#8f9580" font-family="Arial,sans-serif" font-size="6" letter-spacing="2">TWENTY-FOUR JEWELS</text>
</g>
<!-- Beveled instantaneous date aperture. -->
<rect x="533" y="465" width="47" height="31" rx="1" fill="url(#date-frame)"/>
<rect x="536" y="468" width="41" height="25" fill="#d9d4bf"/>
<path d="M536 493V468H577" fill="none" stroke="#080c09" stroke-width="2.5"/>
<text id="date-number" x="556.5" y="486.5" text-anchor="middle" font-family="Georgia,serif" font-size="18" fill="#25271f">1</text>
<!-- An exposed, animated balance and gear train beneath the dial. -->
<circle cx="400" cy="606" r="42" fill="url(#edge)" stroke="#1b1b13" stroke-width="1"/>
<circle cx="400" cy="606" r="38" fill="url(#opening)" stroke="#d4be8c" stroke-width=".7"/>
<g clip-path="url(#heart-clip)">
<g id="gear-one"></g>
<g id="gear-two"></g>
<g id="balance">
<circle cx="396" cy="611" r="25" fill="none" stroke="#bca169" stroke-width="3"/>
<circle cx="396" cy="611" r="20" fill="none" stroke="#605a40" stroke-width="1"/>
<g stroke="#ad9669" stroke-width="2">
<path d="M396 586V636M371 611H421"/>
</g>
<g fill="none" stroke="#b8baa0" stroke-width=".65" opacity=".8">
<circle cx="396" cy="611" r="15"/><circle cx="396" cy="611" r="12"/>
<circle cx="396" cy="611" r="9"/><circle cx="396" cy="611" r="6"/>
</g>
</g>
<path d="M363 590L386 596L421 631L434 625L401 590L367 581Z" fill="url(#metal)" stroke="#5b5036" stroke-width="1"/>
<circle cx="397" cy="604" r="5.5" fill="#433d30" stroke="#decea7"/>
<circle cx="397" cy="604" r="2.5" fill="#75304d" stroke="#c58d9d" stroke-width=".6"/>
<g fill="#b4b7a7" stroke="#282c24">
<circle cx="371" cy="587" r="3"/><circle cx="423" cy="626" r="3"/>
</g>
<path d="M369 587H373M421 626H425" stroke="#30392f" stroke-width="1"/>
</g>
<text x="400" y="658" text-anchor="middle" fill="#929580" font-family="Arial,sans-serif" font-size="5.5" letter-spacing="1.8">CALIBRE V · 01</text>
<text x="400" y="679" text-anchor="middle" fill="#b0ad94" font-family="Arial,sans-serif" font-size="5" letter-spacing="1.3">PRECISION IN MOTION</text>
<!-- Each hand rotates around the same central arbor. -->
<g filter="url(#hand-shadow)">
<g id="hour-hand">
<path d="M395 501L390 459L394 385L400 354L406 385L410 459L405 501Z" fill="url(#hand)" stroke="#ead7a6" stroke-width=".65"/>
<path class="lume" d="M397 444L397 387L400 371L403 387L403 444Z"/>
<path d="M400 448V492" stroke="#6a5938" stroke-width=".7"/>
</g>
<g id="minute-hand">
<path d="M396 506L393 455L396 329L400 299L404 329L407 455L404 506Z" fill="url(#hand)" stroke="#eedeb6" stroke-width=".6"/>
<path class="lume" d="M398 439L398 332L400 316L402 332L402 439Z"/>
<path d="M400 444V500" stroke="#6a5938" stroke-width=".6"/>
</g>
</g>
<g id="second-hand">
<path d="M399.2 521L399.35 298L400 282L400.65 298L400.8 521Z" fill="#e2c28a"/>
<circle cx="400" cy="522" r="6" fill="none" stroke="#e2c28a" stroke-width="2"/>
<path d="M400 529V540" stroke="#e2c28a" stroke-width="1.5"/>
</g>
<circle cx="400" cy="480" r="8" fill="url(#metal)" stroke="#e9d6ab" stroke-width=".6"/>
<circle cx="400" cy="480" r="3" fill="#373629" stroke="#9f8d65" stroke-width=".6"/>
<!-- Sapphire crystal: restrained highlights rather than a flat shine. -->
<circle cx="400" cy="480" r="210" fill="url(#glass)" pointer-events="none"/>
<path d="M219 378A207 207 0 0 1 463 283" fill="none" stroke="#ffffff" stroke-width="1.1" opacity=".13"/>
<path d="M542 635A208 208 0 0 1 302 663" fill="none" stroke="#d9e1c6" stroke-width=".8" opacity=".07"/>
</svg>
<div class="edition">VALE ATELIER / NO. 01 / CHAMPAGNE GOLD</div>
</div>
</main>
<footer>
<div class="model">The Meridian <span>NO. 01 / OPEN HEART AUTOMATIC</span></div>
<div class="specs">
<div class="spec"><span>CASE</span>40 mm · Champagne gold</div>
<div class="spec"><span>MOVEMENT</span>Calibre V–01</div>
<div class="spec"><span>CHARACTER</span>Uninterrupted sweep</div>
</div>
<div class="live">
<div class="live-time" id="local-time">LOCAL TIME</div>
<div class="zone" id="timezone">Synchronized to your device</div>
</div>
</footer>
</div>
<script>
(() => {
"use strict";
const NS = "http://www.w3.org/2000/svg";
const make = (name, attributes, parent) => {
const element = document.createElementNS(NS, name);
Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, value));
if (parent) parent.appendChild(element);
return element;
};
const track = document.getElementById("minute-track");
for (let i = 0; i < 60; i++) {
const major = i % 5 === 0;
make("line", {
x1: 400, y1: major ? 281 : 284,
x2: 400, y2: major ? 292 : 290,
stroke: major ? "#d1bf91" : "#8c947f",
"stroke-width": major ? 1.5 : .8,
transform: `rotate(${i * 6} 400 480)`
}, track);
}
const markers = document.getElementById("hour-markers");
for (let i = 0; i < 12; i++) {
if (i === 3 || i === 6) continue;
const group = make("g", { transform: `rotate(${i * 30} 400 480)` }, markers);
const offsets = i === 0 ? [-6, 6] : [0];
offsets.forEach(offset => {
make("path", {
d: `M${396 + offset} 300L${404 + offset} 300L${403 + offset} 329L${397 + offset} 329Z`,
fill: "url(#hand)", stroke: "#c9b68a", "stroke-width": ".65"
}, group);
make("rect", {
x: 398.5 + offset, y: 304, width: 3, height: 19, rx: .5, class: "lume"
}, group);
});
}
function gear(id, cx, cy, radius, teeth) {
const group = document.getElementById(id);
let path = "";
for (let i = 0; i < teeth * 4; i++) {
const angle = i * Math.PI * 2 / (teeth * 4);
const r = i % 4 === 1 || i % 4 === 2 ? radius : radius - 2.8;
path += `${i ? "L" : "M"}${cx + Math.cos(angle) * r} ${cy + Math.sin(angle) * r} `;
}
make("path", { d: path + "Z", fill: "#918053", stroke: "#d2bb80", "stroke-width": ".5" }, group);
make("circle", { cx, cy, r: radius - 5, fill: "#141a13", stroke: "#bcaa76", "stroke-width": "1" }, group);
for (let i = 0; i < 5; i++) {
make("line", {
x1: cx, y1: cy, x2: cx, y2: cy - radius + 4,
stroke: "#ad9764", "stroke-width": 2.4,
transform: `rotate(${i * 72} ${cx} ${cy})`
}, group);
}
make("circle", { cx, cy, r: 3, fill: "#c4c4af", stroke: "#5a604f", "stroke-width": 1 }, group);
return group;
}
const gearOne = gear("gear-one", 419, 587, 19, 18);
const gearTwo = gear("gear-two", 376, 629, 16, 15);
const hourHand = document.getElementById("hour-hand");
const minuteHand = document.getElementById("minute-hand");
const secondHand = document.getElementById("second-hand");
const balance = document.getElementById("balance");
const dateNumber = document.getElementById("date-number");
const localTime = document.getElementById("local-time");
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, { dateStyle: "full" });
try {
const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
document.getElementById("timezone").textContent = zone.replaceAll("_", " ").replaceAll("/", " / ");
} catch (_) { /* The watch still uses device-local time. */ }
let previousSecond = -1;
function render() {
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} 400 480)`);
minuteHand.setAttribute("transform", `rotate(${minutes * 6} 400 480)`);
secondHand.setAttribute("transform", `rotate(${seconds * 6} 400 480)`);
const elapsed = now.getTime() / 1000;
gearOne.setAttribute("transform", `rotate(${(elapsed % 30) * 12} 419 587)`);
gearTwo.setAttribute("transform", `rotate(${-(elapsed % 25) * 14.4} 376 629)`);
balance.setAttribute("transform", `rotate(${Math.sin(elapsed * Math.PI * 5) * 28} 396 611)`);
const wholeSecond = Math.floor(now.getTime() / 1000);
if (wholeSecond !== previousSecond) {
previousSecond = wholeSecond;
const formatted = timeFormat.format(now);
dateNumber.textContent = now.getDate();
localTime.textContent = formatted;
description.textContent = `VALE champagne-gold mechanical wristwatch. Local time: ${formatted}. ${dateFormat.format(now)}. A sweeping seconds hand and an exposed animated movement.`;
}
requestAnimationFrame(render);
}
const button = document.getElementById("lume-button");
button.addEventListener("click", () => {
const enabled = button.getAttribute("aria-pressed") !== "true";
button.setAttribute("aria-pressed", String(enabled));
document.body.classList.toggle("night", enabled);
document.getElementById("lume-label").textContent = enabled ? "Restore daylight" : "Illuminate dial";
});
render();
})();
</script>
</body>
</html>

