Run details
- Model
- z-ai/glm-5.3
- Route
- OpenRouter API, one user message
- Served by
- Wafer
- Effort
- max, OpenRouter's default for this model
- Limits
- 60 min · 943,718 output tokens (the model's limit)
- Date
- 27 Oct 2026
- Time
- 2 min 1 s
- Size
- 13 kB
- Tokens
- 87 in, 20,991 out (17,179 of them thinking)
- List price
- $0.076 at today's price ($0.08 in / $3.6 out per M)
- Paid
- $0.029
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 319 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maison Valmont — Calibre 1889</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: radial-gradient(120% 90% at 50% 30%, #16181c 0%, #0b0c0e 55%, #060708 100%);
font-family: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
transition: background .6s ease;
overflow: hidden;
}
body.lume { background: radial-gradient(120% 90% at 50% 30%, #0a0e0b 0%, #050607 55%, #020304 100%); }
#watch {
width: min(92vw, 600px); height: auto; display: block; cursor: pointer;
filter: drop-shadow(0 34px 60px rgba(0,0,0,.65));
-webkit-tap-highlight-color: transparent;
}
/* Lume behaviour: hands & indices glow, everything else fades to night */
#watch .lumeable { transition: fill .5s ease, stroke .5s ease; }
#watch.lume .lumeable {
fill: #d9f4b5; stroke: #d9f4b5;
filter: drop-shadow(0 0 5px rgba(185,255,150,.9));
}
#watch .dimmable { transition: opacity .6s ease; }
#watch.lume .dimmable { opacity: .13; }
#watch .night { opacity: 0; transition: opacity .6s ease; }
#watch.lume .night { opacity: .74; }
.caption {
margin-top: 34px; text-align: center; color: #8d9199;
font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
}
.caption b { color: #c8a45c; font-weight: 400; }
.caption .hint {
display: block; margin-top: 13px; font-size: 9.5px;
letter-spacing: .28em; color: #565b62; text-transform: uppercase;
}
</style>
</head>
<body>
<svg id="watch" viewBox="0 0 640 780" role="img"
aria-label="Mechanical wristwatch showing the current local time with a sweeping seconds hand and a date window">
<defs>
<!-- Case flank: brushed steel, cylindrical shading -->
<linearGradient id="steelV" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#e8eaee"/><stop offset=".15" stop-color="#f4f6f8"/>
<stop offset=".38" stop-color="#b4bac1"/><stop offset=".62" stop-color="#9aa0a8"/>
<stop offset=".85" stop-color="#6e747c"/><stop offset="1" stop-color="#4c525a"/>
</linearGradient>
<!-- Polished bezel -->
<linearGradient id="bezel" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#d6dade"/><stop offset=".18" stop-color="#f2f4f7"/>
<stop offset=".38" stop-color="#a8aeb6"/><stop offset=".52" stop-color="#cfd4d9"/>
<stop offset=".7" stop-color="#9298a0"/><stop offset=".85" stop-color="#c2c7cd"/>
<stop offset="1" stop-color="#a0a6ad"/>
</linearGradient>
<!-- 18k gold furniture -->
<linearGradient id="gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f8e9b0"/><stop offset=".4" stop-color="#dfb966"/>
<stop offset=".65" stop-color="#9c742a"/><stop offset=".85" stop-color="#e6c374"/>
<stop offset="1" stop-color="#8a661f"/>
</linearGradient>
<radialGradient id="goldCap">
<stop offset="0" stop-color="#fdf3cf"/><stop offset=".45" stop-color="#dcba62"/>
<stop offset="1" stop-color="#7c5c1c"/>
</radialGradient>
<linearGradient id="goldLine" gradientUnits="userSpaceOnUse"
x1="320" y1="196" x2="320" y2="438">
<stop offset="0" stop-color="#f6e5a8"/><stop offset=".5" stop-color="#c39b46"/>
<stop offset="1" stop-color="#8a6624"/>
</linearGradient>
<!-- Deep sunburst blue dial -->
<radialGradient id="dial" cx=".5" cy=".42" r=".68">
<stop offset="0" stop-color="#2f5180"/><stop offset=".45" stop-color="#213a63"/>
<stop offset=".8" stop-color="#142644"/><stop offset="1" stop-color="#0d1a31"/>
</radialGradient>
<radialGradient id="sheen" cx=".5" cy=".5" r=".72" fx=".33" fy=".28">
<stop offset="0" stop-color="#ffffff" stop-opacity=".11"/>
<stop offset=".5" stop-color="#ffffff" stop-opacity=".03"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="glassGrad">
<stop offset="0" stop-color="#ffffff" stop-opacity=".15"/>
<stop offset=".6" stop-color="#ffffff" stop-opacity=".04"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<linearGradient id="leather" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#332315"/><stop offset=".5" stop-color="#241710"/>
<stop offset="1" stop-color="#150e08"/>
</linearGradient>
</defs>
<!-- ============ Strap (leather, behind the case) ============ -->
<g>
<path d="M 262,170 L 288,20 Q 289,8 300,8 L 340,8 Q 351,8 352,20 L 378,170 Z"
fill="url(#leather)" stroke="rgba(0,0,0,.55)" stroke-width="1.5"/>
<path d="M 273,158 L 296,26" stroke="#d9c79b" stroke-width="1.6"
stroke-dasharray="5 6" opacity=".45" fill="none"/>
<path d="M 367,158 L 344,26" stroke="#d9c79b" stroke-width="1.6"
stroke-dasharray="5 6" opacity=".45" fill="none"/>
<path d="M 262,610 L 288,760 Q 289,772 300,772 L 340,772 Q 351,772 352,760 L 378,610 Z"
fill="url(#leather)" stroke="rgba(0,0,0,.55)" stroke-width="1.5"/>
<path d="M 273,622 L 296,754" stroke="#d9c79b" stroke-width="1.6"
stroke-dasharray="5 6" opacity=".45" fill="none"/>
<path d="M 367,622 L 344,754" stroke="#d9c79b" stroke-width="1.6"
stroke-dasharray="5 6" opacity=".45" fill="none"/>
</g>
<!-- ============ Case & bezel ============ -->
<g>
<circle cx="320" cy="390" r="252" fill="url(#steelV)"/>
<circle cx="320" cy="390" r="238" fill="#2b2f35"/>
<circle cx="320" cy="390" r="229" fill="url(#bezel)"/>
<circle cx="320" cy="390" r="215" fill="none" stroke="rgba(0,0,0,.45)"
stroke-width="8" opacity=".5"/>
</g>
<!-- Crown -->
<g>
<rect x="558" y="370" width="34" height="40" rx="9" fill="url(#gold)"
stroke="rgba(30,20,4,.6)" stroke-width="1"/>
<g stroke="rgba(60,40,6,.55)" stroke-width="1.8">
<line x1="566" y1="373" x2="566" y2="407"/>
<line x1="572" y1="373" x2="572" y2="407"/>
<line x1="578" y1="373" x2="578" y2="407"/>
<line x1="584" y1="373" x2="584" y2="407"/>
</g>
</g>
<!-- ============ Dial ============ -->
<g>
<circle cx="320" cy="390" r="206" fill="url(#dial)" stroke="#04060c" stroke-width="2"/>
<g id="sunburst" class="dimmable"></g>
<circle cx="320" cy="390" r="206" fill="url(#sheen)" class="dimmable"/>
<g id="ticks"></g>
<g id="indices"></g>
<!-- Date window at 3 o'clock -->
<g class="dimmable">
<rect x="452" y="368" width="56" height="44" rx="4" fill="url(#gold)"
stroke="rgba(0,0,0,.5)" stroke-width=".8"/>
<rect x="456" y="372" width="48" height="36" rx="2.5" fill="#efe7d2"/>
<line x1="457" y1="373.5" x2="503" y2="373.5" stroke="rgba(0,0,0,.22)" stroke-width="1.4"/>
<text id="dateTxt" x="480" y="397.5" text-anchor="middle" font-size="24"
font-family="Georgia,'Times New Roman',serif" font-weight="600"
fill="#232323">01</text>
</g>
<!-- Dial printing -->
<g class="dimmable" text-anchor="middle" font-family="Georgia,'Times New Roman',serif">
<text x="320" y="272" font-size="11" letter-spacing="5" fill="#b9c0ca">MAISON</text>
<text x="320" y="297" font-size="27" letter-spacing="7" fill="#e8e4d6">VALMONT</text>
<text x="320" y="319" font-size="10" letter-spacing="3" fill="#9aa4b0"
font-style="italic">Genève · depuis 1889</text>
<text x="320" y="487" font-size="10" letter-spacing="4" fill="#a7b0bb">AUTOMATIQUE</text>
<text x="320" y="508" font-size="8.5" letter-spacing="2.5" fill="#7f8894">CAL. 1889 · 28 800 A/H</text>
</g>
<!-- Night overlay for lume mode -->
<circle class="night" cx="320" cy="390" r="206" fill="#02040a"/>
</g>
<!-- ============ Hands ============ -->
<g>
<!-- Hour -->
<g id="hHand">
<path d="M 312.5,410 L 315,258 L 320,248 L 325,258 L 327.5,410 L 323,414 L 317,414 Z"
transform="translate(4,7)" fill="#000" opacity=".3" class="dimmable"/>
<path class="lumeable" stroke="rgba(20,14,4,.5)" stroke-width=".7" fill="url(#gold)"
d="M 312.5,410 L 315,258 L 320,248 L 325,258 L 327.5,410 L 323,414 L 317,414 Z"/>
<path class="dimmable" fill="rgba(255,255,255,.32)"
d="M 312.5,410 L 315,258 L 320,248 L 320,410 Z"/>
</g>
<!-- Minute -->
<g id="mHand">
<path d="M 314,412 L 316.4,212 L 320,200 L 323.6,212 L 326,412 L 323,416 L 317,416 Z"
transform="translate(4,7)" fill="#000" opacity=".3" class="dimmable"/>
<path class="lumeable" stroke="rgba(20,14,4,.5)" stroke-width=".7" fill="url(#gold)"
d="M 314,412 L 316.4,212 L 320,200 L 323.6,212 L 326,412 L 323,416 L 317,416 Z"/>
<path class="dimmable" fill="rgba(255,255,255,.32)"
d="M 314,412 L 316.4,212 L 320,200 L 320,412 Z"/>
</g>
<!-- Seconds: needle + counterweight, true continuous sweep -->
<g id="sHand">
<g transform="translate(3,6)" opacity=".28" class="dimmable">
<line x1="320" y1="438" x2="320" y2="196" stroke="#000" stroke-width="2.4"/>
<circle cx="320" cy="432" r="7.5" fill="#000"/>
</g>
<polygon class="lumeable" points="315,206 325,206 320,192" fill="url(#gold)"/>
<line class="lumeable" x1="320" y1="438" x2="320" y2="200"
stroke="url(#goldLine)" stroke-width="2.4"/>
<circle class="lumeable" cx="320" cy="432" r="7.5" fill="url(#gold)"
stroke="rgba(20,14,4,.5)" stroke-width=".7"/>
</g>
</g>
<!-- Sapphire reflections -->
<g class="dimmable" pointer-events="none">
<ellipse cx="250" cy="295" rx="190" ry="85" transform="rotate(-35 250 295)"
fill="url(#glassGrad)"/>
<ellipse cx="405" cy="485" rx="80" ry="36" transform="rotate(28 405 485)"
fill="url(#glassGrad)" opacity=".6"/>
</g>
<!-- Center cap -->
<circle cx="320" cy="390" r="10" fill="url(#goldCap)" stroke="#40300f" stroke-width="1"/>
<circle cx="320" cy="390" r="3.2" fill="#f7ecc9" opacity=".85"/>
</svg>
<p class="caption">
<b>Maison Valmont</b> · Genève — Calibre 1889
<span class="hint">Sweep seconds · <span id="tz"></span> · Click the dial to charge the lume</span>
</p>
<script>
(function () {
'use strict';
const NS = 'http://www.w3.org/2000/svg';
const svg = document.getElementById('watch');
const CX = 320, CY = 390;
const $ = id => document.getElementById(id);
function mk(name, attrs, parent) {
const n = document.createElementNS(NS, name);
for (const k in attrs) n.setAttribute(k, attrs[k]);
parent.appendChild(n);
return n;
}
/* Sunburst brushing: alternating light/dark radial lines */
const sun = $('sunburst');
for (let i = 0; i < 120; i++) {
const a = i * 3 * Math.PI / 180;
mk('line', {
x1: CX, y1: CY,
x2: CX + Math.sin(a) * 206, y2: CY - Math.cos(a) * 206,
stroke: i % 2 ? '#ffffff' : '#081426',
'stroke-width': 2.4,
opacity: i % 2 ? .05 : .08
}, sun);
}
/* Minute track */
const ticks = $('ticks');
for (let i = 0; i < 60; i++) {
const a = i * 6 * Math.PI / 180, maj = i % 5 === 0, r1 = maj ? 188 : 193;
mk('line', {
x1: CX + Math.sin(a) * r1, y1: CY - Math.cos(a) * r1,
x2: CX + Math.sin(a) * 201, y2: CY - Math.cos(a) * 201,
stroke: maj ? '#e7eaee' : '#a9b1ba',
'stroke-width': maj ? 2.4 : 1.1,
opacity: maj ? .95 : .65
}, ticks);
}
/* Applied gold batons (double at 12, none at 3 — date window) */
const indices = $('indices');
function baton(g, x) {
mk('rect', {
x: x, y: CY - 187, width: 9, height: 36, rx: 2,
fill: 'url(#gold)', stroke: 'rgba(25,18,6,.55)',
'stroke-width': .8, 'class': 'lumeable'
}, g);
mk('line', { /* polished edge highlight */
x1: x + 2.6, y1: CY - 183, x2: x + 2.6, y2: CY - 155,
stroke: 'rgba(255,255,255,.5)', 'stroke-width': 1, 'class': 'dimmable'
}, g);
}
for (let i = 0; i < 12; i++) {
if (i === 3) continue; // date window lives here
const g = mk('g', { transform: `rotate(${i * 30} ${CX} ${CY})` }, indices);
if (i === 0) { baton(g, CX - 13.5); baton(g, CX + 4.5); } // doubled baton at 12
else baton(g, CX - 4.5);
}
/* Date */
const dateTxt = $('dateTxt');
function setDate(d) { dateTxt.textContent = String(d).padStart(2, '0'); }
/* Movement: smooth mechanical sweep, driven by the real clock */
const hH = $('hHand'), hM = $('mHand'), hS = $('sHand');
let lastDate = null;
function frame() {
const n = new Date();
const s = n.getSeconds() + n.getMilliseconds() / 1000;
const m = n.getMinutes() + s / 60;
const h = (n.getHours() % 12) + m / 60;
hS.setAttribute('transform', `rotate(${s * 6} ${CX} ${CY})`);
hM.setAttribute('transform', `rotate(${m * 6} ${CX} ${CY})`);
hH.setAttribute('transform', `rotate(${h * 30} ${CX} ${CY})`);
if (n.getDate() !== lastDate) { lastDate = n.getDate(); setDate(lastDate); }
requestAnimationFrame(frame);
}
setDate(new Date().getDate());
frame();
/* Time zone caption */
let tz = '';
try { tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ''; } catch (e) {}
$('tz').textContent = tz ? tz.replace(/_/g, ' ').toUpperCase() : 'LOCAL TIME';
/* Click the dial → lume mode */
svg.addEventListener('click', () => {
svg.classList.toggle('lume');
document.body.classList.toggle('lume');
});
})();
</script>
</body>
</html>
