Run details
- Model
- minimax/minimax-m3.1-flash:free
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 16,026 reasoning tokens
- Limits
- 60 min · 524,288 output tokens
- Date
- 21 Oct 2026
- Time
- 4 min 3 s
- Size
- 25 kB
- Tokens
- 278 in, 23,913 out
- List price
- free (list price $0)
- Paid
- $0 (free route)
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
25 kB 669 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>Luxury Mechanical Wristwatch</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
padding: 16px 0;
overflow-x: hidden;
background:
radial-gradient(ellipse at 50% 20%, rgba(91, 116, 135, 0.22), transparent 42%),
radial-gradient(ellipse at 50% 78%, rgba(32, 48, 60, 0.32), transparent 45%),
linear-gradient(145deg, #11161b 0%, #07090c 58%, #030507 100%);
font-family: Arial, Helvetica, sans-serif;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(
118deg,
rgba(255, 255, 255, 0.012) 0,
rgba(255, 255, 255, 0.012) 1px,
transparent 1px,
transparent 5px
);
opacity: 0.45;
}
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 180px 45px rgba(0, 0, 0, 0.62);
}
.scene {
width: min(92vw, 520px, calc(68.29vh - 24px));
position: relative;
isolation: isolate;
filter: drop-shadow(0 32px 38px rgba(0, 0, 0, 0.45));
}
.scene svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.dial-numeral {
fill: #e7ecec;
font-family: Georgia, "Times New Roman", serif;
font-size: 32px;
font-weight: 400;
text-anchor: middle;
filter: url(#typeShadow);
}
.brand {
fill: #eef1ef;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
letter-spacing: 4px;
text-anchor: middle;
filter: url(#typeShadow);
}
.sub-brand,
.movement-text,
.origin-text {
fill: #aeb9bf;
font-family: Arial, Helvetica, sans-serif;
text-anchor: middle;
}
.sub-brand {
font-size: 8px;
letter-spacing: 3px;
}
.movement-text {
font-size: 10px;
letter-spacing: 3px;
}
.origin-text {
font-size: 8px;
letter-spacing: 2px;
}
.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="scene">
<svg
viewBox="0 0 560 820"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="watchTitle watchDescription"
>
<title id="watchTitle">Luxury mechanical wristwatch showing the current local time</title>
<desc id="watchDescription">A polished steel watch with a midnight-blue sunburst dial, luminous hands, a smooth sweeping gold seconds hand, and a live date window.</desc>
<defs>
<linearGradient id="caseSteel" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#465159"/>
<stop offset="0.10" stop-color="#f9fcfd"/>
<stop offset="0.21" stop-color="#909da5"/>
<stop offset="0.34" stop-color="#303a41"/>
<stop offset="0.48" stop-color="#e8eff2"/>
<stop offset="0.61" stop-color="#66737c"/>
<stop offset="0.79" stop-color="#f7fafb"/>
<stop offset="1" stop-color="#252d32"/>
</linearGradient>
<linearGradient id="bezelSteel" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" stop-color="#d7dfe3"/>
<stop offset="0.18" stop-color="#5a666e"/>
<stop offset="0.43" stop-color="#eef3f5"/>
<stop offset="0.62" stop-color="#333d43"/>
<stop offset="0.84" stop-color="#aeb9bf"/>
<stop offset="1" stop-color="#4c575e"/>
</linearGradient>
<linearGradient id="gold" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" stop-color="#76501d"/>
<stop offset="0.22" stop-color="#f2d27a"/>
<stop offset="0.48" stop-color="#9d681f"/>
<stop offset="0.72" stop-color="#ffe6a1"/>
<stop offset="1" stop-color="#76501d"/>
</linearGradient>
<linearGradient id="indexGold" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#fff0b0"/>
<stop offset="0.28" stop-color="#bd8b32"/>
<stop offset="0.58" stop-color="#f3d58d"/>
<stop offset="1" stop-color="#7a521b"/>
</linearGradient>
<radialGradient id="dialBlue" cx="38%" cy="29%" r="78%">
<stop offset="0" stop-color="#2a4b61"/>
<stop offset="0.38" stop-color="#153348"/>
<stop offset="0.72" stop-color="#0a2030"/>
<stop offset="1" stop-color="#030b12"/>
</radialGradient>
<radialGradient id="dialVignette" cx="50%" cy="48%" r="52%">
<stop offset="0.58" stop-color="#000000" stop-opacity="0"/>
<stop offset="0.82" stop-color="#000000" stop-opacity="0.08"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.62"/>
</radialGradient>
<linearGradient id="leather" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" stop-color="#050708"/>
<stop offset="0.16" stop-color="#252a2d"/>
<stop offset="0.48" stop-color="#101416"/>
<stop offset="0.80" stop-color="#282d30"/>
<stop offset="1" stop-color="#040607"/>
</linearGradient>
<linearGradient id="leatherDepth" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.07"/>
<stop offset="0.45" stop-color="#000000" stop-opacity="0"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="datePaper" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" stop-color="#d7d5cc"/>
<stop offset="0.18" stop-color="#fffdf2"/>
<stop offset="1" stop-color="#e8e5d9"/>
</linearGradient>
<linearGradient id="glassWash" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.13"/>
<stop offset="0.28" stop-color="#ffffff" stop-opacity="0.025"/>
<stop offset="0.60" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="1" stop-color="#9fc6d8" stop-opacity="0.045"/>
</linearGradient>
<linearGradient id="glassSheen" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.3"/>
<stop offset="0.62" stop-color="#d9edf4" stop-opacity="0.08"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<pattern id="leatherScales" width="60" height="46" patternUnits="userSpaceOnUse">
<path
d="M1 4 Q30 -4 59 4 Q57 20 30 24 Q3 20 1 4Z"
fill="none"
stroke="#899399"
stroke-width="1.1"
opacity="0.27"
/>
<path
d="M2 27 Q30 23 58 27 Q56 42 30 45 Q4 42 2 27Z"
fill="none"
stroke="#899399"
stroke-width="1.1"
opacity="0.24"
/>
<path d="M0 24 H60 M30 0 V24" fill="none" stroke="#020304" stroke-width="1" opacity="0.42"/>
</pattern>
<filter id="caseShadow" x="-40%" y="-40%" width="180%" height="190%">
<feDropShadow dx="0" dy="18" stdDeviation="17" flood-color="#000000" flood-opacity="0.82"/>
</filter>
<filter id="strapShadow" x="-30%" y="-20%" width="160%" height="150%">
<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#000000" flood-opacity="0.6"/>
</filter>
<filter id="handShadow" x="-50%" y="-30%" width="200%" height="170%">
<feDropShadow dx="2" dy="5" stdDeviation="3" flood-color="#000000" flood-opacity="0.62"/>
</filter>
<filter id="indexShadow" x="-80%" y="-40%" width="260%" height="190%">
<feDropShadow dx="1" dy="2" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.72"/>
</filter>
<filter id="typeShadow" x="-30%" y="-30%" width="160%" height="170%">
<feDropShadow dx="0" dy="1.5" stdDeviation="1.1" flood-color="#000000" flood-opacity="0.85"/>
</filter>
<filter id="leatherGrain" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.11 0.72" numOctaves="2" seed="12" result="noise"/>
<feColorMatrix in="noise" type="saturate" values="0" result="mono"/>
<feComponentTransfer in="mono" result="faintNoise">
<feFuncA type="linear" slope="0.18"/>
</feComponentTransfer>
<feComposite in="faintNoise" in2="SourceGraphic" operator="in" result="grain"/>
<feBlend in="SourceGraphic" in2="grain" mode="soft-light"/>
</filter>
<filter id="dialNoise" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="2" seed="8" result="noise"/>
<feColorMatrix in="noise" type="saturate" values="0" result="mono"/>
<feComponentTransfer in="mono" result="faintNoise">
<feFuncA type="linear" slope="0.22"/>
</feComponentTransfer>
<feComposite in="faintNoise" in2="SourceGraphic" operator="in"/>
</filter>
<clipPath id="dialClip">
<circle cx="280" cy="410" r="210"/>
</clipPath>
<path id="topStrap" d="M205 -15 C201 55 198 132 205 224 L355 224 C362 132 359 55 355 -15Z"/>
<path id="bottomStrap" d="M205 596 C198 662 191 744 187 835 L373 835 C369 744 362 662 355 596Z"/>
</defs>
<!-- Soft studio shadow -->
<ellipse cx="280" cy="790" rx="164" ry="22" fill="#000000" opacity="0.36"/>
<!-- Alligator leather straps -->
<g filter="url(#strapShadow)">
<use href="#topStrap" fill="url(#leather)" filter="url(#leatherGrain)"/>
<use href="#topStrap" fill="url(#leatherScales)" opacity="0.36"/>
<use href="#topStrap" fill="url(#leatherDepth)"/>
<use href="#bottomStrap" fill="url(#leather)" filter="url(#leatherGrain)"/>
<use href="#bottomStrap" fill="url(#leatherScales)" opacity="0.36"/>
<use href="#bottomStrap" fill="url(#leatherDepth)"/>
</g>
<!-- Strap edge stitching -->
<g fill="none" stroke-linecap="round">
<g stroke="#050607" stroke-width="3.2" opacity="0.9">
<path d="M214 5 C211 70 210 143 215 213"/>
<path d="M346 5 C349 70 350 143 345 213"/>
<path d="M215 606 C208 674 201 751 198 814"/>
<path d="M345 606 C352 674 359 751 362 814"/>
</g>
<g stroke="#b9b19a" stroke-width="1.25" stroke-dasharray="5 7" opacity="0.72">
<path d="M214 5 C211 70 210 143 215 213"/>
<path d="M346 5 C349 70 350 143 345 213"/>
<path d="M215 606 C208 674 201 751 198 814"/>
<path d="M345 606 C352 674 359 751 362 814"/>
</g>
</g>
<!-- Polished buckle and keeper -->
<g>
<path
d="M192 16 H368 V80 H192Z M204 28 H356 V68 H204Z"
fill="url(#caseSteel)"
fill-rule="evenodd"
stroke="#12181c"
stroke-width="1.5"
/>
<path d="M282 80 L278 27 L282 22 L286 80Z" fill="url(#caseSteel)" stroke="#4c555b" stroke-width="0.8"/>
<rect x="195" y="107" width="170" height="27" rx="8" fill="#111518" stroke="#050708" stroke-width="3"/>
<path d="M200 110 H360" stroke="#535b60" stroke-width="1" opacity="0.5"/>
<path d="M201 130 H359" stroke="#000000" stroke-width="2" opacity="0.75"/>
</g>
<!-- Strap holes -->
<g>
<ellipse cx="280" cy="695" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
<ellipse cx="280" cy="731" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
<ellipse cx="280" cy="767" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
<ellipse cx="280" cy="803" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
<path d="M274 698 Q280 701 286 698 M274 734 Q280 737 286 734 M274 770 Q280 773 286 770" fill="none" stroke="#737b80" stroke-width="0.7" opacity="0.5"/>
</g>
<!-- Sculpted lugs -->
<g fill="url(#caseSteel)" stroke="#1a2227" stroke-width="1.5">
<path d="M179 247 C157 237 145 214 151 191 C155 177 165 165 179 158 L218 187 L213 231Z"/>
<path d="M381 247 C403 237 415 214 409 191 C405 177 395 165 381 158 L342 187 L347 231Z"/>
<path d="M179 573 C157 583 145 606 151 629 C155 643 165 655 179 662 L218 633 L213 589Z"/>
<path d="M381 573 C403 583 415 606 409 629 C405 643 395 655 381 662 L342 633 L347 589Z"/>
</g>
<!-- Fluted crown -->
<g>
<rect x="503" y="398" width="23" height="24" rx="5" fill="url(#caseSteel)" stroke="#11181c"/>
<rect x="520" y="385" width="30" height="50" rx="10" fill="url(#caseSteel)" stroke="#151c20" stroke-width="1.4"/>
<g stroke="#343d43" stroke-width="1.4" opacity="0.85">
<path d="M525 391 V429"/>
<path d="M531 388 V432"/>
<path d="M537 388 V432"/>
<path d="M543 391 V429"/>
</g>
<path d="M522 389 Q535 384 547 390" fill="none" stroke="#ffffff" stroke-width="1.4" opacity="0.6"/>
</g>
<!-- Steel case and bezel -->
<circle cx="280" cy="410" r="238" fill="url(#caseSteel)" stroke="#090d10" stroke-width="2" filter="url(#caseShadow)"/>
<circle cx="280" cy="410" r="231" fill="none" stroke="#f4f8f9" stroke-width="1.2" opacity="0.42"/>
<circle cx="280" cy="410" r="225" fill="url(#bezelSteel)" stroke="#20282d" stroke-width="1.5"/>
<circle cx="280" cy="410" r="218" fill="#03080c" stroke="#e9eef0" stroke-width="0.8" opacity="0.95"/>
<circle cx="280" cy="410" r="211" fill="url(#dialBlue)" stroke="#000000" stroke-width="2"/>
<!-- Reflected bezel highlights -->
<circle
cx="280"
cy="410"
r="225"
fill="none"
stroke="#ffffff"
stroke-width="2.2"
stroke-linecap="round"
stroke-dasharray="155 1260"
transform="rotate(-58 280 410)"
opacity="0.58"
/>
<circle
cx="280"
cy="410"
r="224"
fill="none"
stroke="#000000"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="185 1224"
transform="rotate(123 280 410)"
opacity="0.5"
/>
<!-- Sunburst dial texture -->
<g id="sunburst" clip-path="url(#dialClip)" opacity="0.95"></g>
<circle cx="280" cy="410" r="210" fill="#ffffff" filter="url(#dialNoise)" opacity="0.17"/>
<circle cx="280" cy="410" r="210" fill="url(#dialVignette)"/>
<!-- Chapter ring and minute track -->
<circle cx="280" cy="410" r="205" fill="none" stroke="#b5c2c9" stroke-width="0.65" opacity="0.28"/>
<g id="minuteTrack" fill="none" stroke-linecap="round"></g>
<!-- Applied gold hour markers -->
<g id="hourMarkers" filter="url(#indexShadow)"></g>
<!-- Dial typography -->
<text x="280" y="258" class="dial-numeral">12</text>
<text x="101" y="419" class="dial-numeral">9</text>
<text x="280" y="568" class="dial-numeral">6</text>
<path
d="M280 276 L283 286 L293 289 L283 292 L280 302 L277 292 L267 289 L277 286Z"
fill="url(#gold)"
filter="url(#typeShadow)"
/>
<text x="280" y="321" class="brand">AURELIS</text>
<text x="280" y="337" class="sub-brand">GENÈVE</text>
<text x="280" y="492" class="movement-text">AUTOMATIC</text>
<text x="280" y="507" class="movement-text" style="font-size:7px; letter-spacing:2px;">25 JEWELS</text>
<text x="280" y="601" class="origin-text">SWISS MADE</text>
<!-- Date aperture -->
<g id="dateWindow" filter="url(#indexShadow)">
<rect x="408" y="381" width="61" height="58" rx="4" fill="#020507" stroke="#020304" stroke-width="2"/>
<rect x="410" y="383" width="57" height="54" rx="3" fill="url(#caseSteel)"/>
<rect x="415" y="388" width="47" height="44" rx="1.5" fill="url(#datePaper)"/>
<path d="M415 432 V388 H462" fill="none" stroke="#000000" stroke-width="1.3" opacity="0.28"/>
<path d="M416 389 H461" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.65"/>
<text
id="dateText"
x="438.5"
y="419"
text-anchor="middle"
fill="#17191a"
font-family="Arial, Helvetica, sans-serif"
font-size="26"
font-weight="600"
font-variant-numeric="tabular-nums"
>00</text>
</g>
<!-- Luminous hour hand -->
<g id="hourHand" filter="url(#handShadow)">
<path
d="M272.5 430 L271.8 344 L275.8 293 Q280 278 284.2 293 L288.2 344 L287.5 430 Q280 436 272.5 430Z"
fill="url(#caseSteel)"
stroke="#182127"
stroke-width="1.2"
/>
<path
d="M277.6 408 L277.1 344 L279 302 Q280 294 281 302 L282.9 344 L282.4 408Z"
fill="#dce8df"
opacity="0.92"
/>
<path d="M280 303 V405" stroke="#ffffff" stroke-width="0.8" opacity="0.55"/>
</g>
<!-- Luminous minute hand -->
<g id="minuteHand" filter="url(#handShadow)">
<path
d="M275.8 431 L274.6 273 L278 236 Q280 222 282 236 L285.4 273 L284.2 431 Q280 436 275.8 431Z"
fill="url(#caseSteel)"
stroke="#162027"
stroke-width="1.15"
/>
<path
d="M278.4 409 L277.9 273 L279.4 241 Q280 230 280.6 241 L282.1 273 L281.6 409Z"
fill="#dce8df"
opacity="0.92"
/>
<path d="M280 239 V406" stroke="#ffffff" stroke-width="0.7" opacity="0.52"/>
</g>
<!-- Smooth sweeping gold seconds hand -->
<g id="secondHand" filter="url(#handShadow)">
<line x1="280" y1="447" x2="280" y2="195" stroke="#5d3b12" stroke-width="3" opacity="0.55"/>
<line x1="280" y1="447" x2="280" y2="195" stroke="url(#gold)" stroke-width="1.55" stroke-linecap="round"/>
<path d="M277.5 198 L280 187 L282.5 198Z" fill="url(#gold)"/>
<circle cx="280" cy="445" r="7" fill="none" stroke="url(#gold)" stroke-width="1.4"/>
</g>
<!-- Central polished cap -->
<g filter="url(#indexShadow)">
<circle cx="280" cy="410" r="11" fill="url(#gold)" stroke="#34230c" stroke-width="1"/>
<circle cx="280" cy="410" r="6.5" fill="url(#caseSteel)"/>
<circle cx="280" cy="410" r="2.4" fill="#10171b"/>
</g>
<!-- Sapphire crystal reflections -->
<g clip-path="url(#dialClip)" pointer-events="none">
<circle cx="280" cy="410" r="210" fill="url(#glassWash)"/>
<path
d="M77 326 C115 237 216 187 338 194 C266 211 187 267 138 348 C120 377 95 367 77 326Z"
fill="url(#glassSheen)"
opacity="0.38"
/>
<path
d="M110 284 C151 235 208 207 267 199"
fill="none"
stroke="#ffffff"
stroke-width="2"
stroke-linecap="round"
opacity="0.12"
/>
<path
d="M380 588 C424 556 454 515 473 469"
fill="none"
stroke="#9ac5d8"
stroke-width="1.2"
stroke-linecap="round"
opacity="0.09"
/>
</g>
<!-- Fine crystal edge -->
<circle cx="280" cy="410" r="209.5" fill="none" stroke="#eaf6fa" stroke-width="0.9" opacity="0.36"/>
</svg>
<p id="accessibleTime" class="sr-only" aria-live="off"></p>
</main>
<script>
(() => {
"use strict";
const SVG_NS = "http://www.w3.org/2000/svg";
const centerX = 280;
const centerY = 410;
const sunburst = document.getElementById("sunburst");
const minuteTrack = document.getElementById("minuteTrack");
const hourMarkers = document.getElementById("hourMarkers");
const hourHand = document.getElementById("hourHand");
const minuteHand = document.getElementById("minuteHand");
const secondHand = document.getElementById("secondHand");
const dateText = document.getElementById("dateText");
const description = document.getElementById("watchDescription");
const accessibleTime = document.getElementById("accessibleTime");
function polar(radius, degrees) {
const radians = degrees * Math.PI / 180;
return {
x: centerX + Math.sin(radians) * radius,
y: centerY - Math.cos(radians) * radius
};
}
function makeLine(x1, y1, x2, y2) {
const line = document.createElementNS(SVG_NS, "line");
line.setAttribute("x1", x1.toFixed(2));
line.setAttribute("y1", y1.toFixed(2));
line.setAttribute("x2", x2.toFixed(2));
line.setAttribute("y2", y2.toFixed(2));
return line;
}
for (let index = 0; index < 120; index += 1) {
const angle = index * 3;
const inner = polar(30, angle);
const outer = polar(208, angle);
const ray = makeLine(inner.x, inner.y, outer.x, outer.y);
ray.setAttribute("stroke", index % 2 === 0 ? "#8ba8ba" : "#02080e");
ray.setAttribute("stroke-width", index % 10 === 0 ? "1.2" : "0.65");
ray.setAttribute("stroke-opacity", index % 10 === 0 ? "0.13" : "0.075");
ray.setAttribute("vector-effect", "non-scaling-stroke");
sunburst.appendChild(ray);
}
for (let index = 0; index < 60; index += 1) {
const angle = index * 6;
const isHour = index % 5 === 0;
const outer = polar(202, angle);
const inner = polar(isHour ? 190 : 197.5, angle);
const tick = makeLine(inner.x, inner.y, outer.x, outer.y);
tick.setAttribute("stroke", isHour ? "#e1e7e8" : "#aebbc2");
tick.setAttribute("stroke-width", isHour ? "1.75" : "0.7");
tick.setAttribute("stroke-opacity", isHour ? "0.9" : "0.58");
tick.setAttribute("vector-effect", "non-scaling-stroke");
minuteTrack.appendChild(tick);
}
[1, 2, 4, 5, 7, 8, 10, 11].forEach((hour) => {
const marker = document.createElementNS(SVG_NS, "g");
marker.setAttribute("transform", `rotate(${hour * 30} ${centerX} ${centerY})`);
const body = document.createElementNS(SVG_NS, "rect");
body.setAttribute("x", "275.8");
body.setAttribute("y", "213.5");
body.setAttribute("width", "8.4");
body.setAttribute("height", "29");
body.setAttribute("rx", "3.5");
body.setAttribute("fill", "url(#indexGold)");
body.setAttribute("stroke", "#4c3514");
body.setAttribute("stroke-width", "0.65");
const lume = document.createElementNS(SVG_NS, "rect");
lume.setAttribute("x", "278.3");
lume.setAttribute("y", "218");
lume.setAttribute("width", "3.4");
lume.setAttribute("height", "20");
lume.setAttribute("rx", "1.6");
lume.setAttribute("fill", "#dbe7df");
lume.setAttribute("opacity", "0.92");
marker.appendChild(body);
marker.appendChild(lume);
hourMarkers.appendChild(marker);
});
let lastSecond = -1;
function updateWatch() {
const now = new Date();
const milliseconds = now.getMilliseconds();
const seconds = now.getSeconds() + milliseconds / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
const secondAngle = seconds * 6;
const minuteAngle = minutes * 6;
const hourAngle = hours * 30;
secondHand.setAttribute(
"transform",
`rotate(${secondAngle.toFixed(3)} ${centerX} ${centerY})`
);
minuteHand.setAttribute(
"transform",
`rotate(${minuteAngle.toFixed(3)} ${centerX} ${centerY})`
);
hourHand.setAttribute(
"transform",
`rotate(${hourAngle.toFixed(3)} ${centerX} ${centerY})`
);
const currentDay = String(now.getDate()).padStart(2, "0");
if (dateText.textContent !== currentDay) {
dateText.textContent = currentDay;
}
if (now.getSeconds() !== lastSecond) {
lastSecond = now.getSeconds();
const localTime = now.toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
const localDate = now.toLocaleDateString(undefined, {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
description.textContent =
`A polished steel luxury mechanical wristwatch showing the current local time ` +
`${localTime} on ${localDate}, with a smoothly sweeping gold seconds hand ` +
`and a date window displaying ${currentDay}.`;
accessibleTime.textContent = `${localDate}, ${localTime}`;
}
requestAnimationFrame(updateWatch);
}
updateWatch();
})();
</script>
</body>
</html>

