Run details
- Model
- google/gemini-3.8-flash
- Route
- OpenRouter API, one user message
- Served by
- Effort
- medium, OpenRouter's default for this model
- Limits
- 60 min · 65,536 output tokens (the model's limit)
- Date
- 23 Oct 2026
- Time
- 84 s
- Size
- 20 kB
- Tokens
- 76 in, 11,089 out (3,106 of them thinking)
- List price
- $0.046 at today's price ($0.825 in / $4.13 out per M)
- Paid
- $0.042
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 457 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haute Horlogerie - Mechanical Timepiece</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 40%, #1e242d 0%, #0d1014 60%, #050709 100%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow: hidden;
perspective: 1000px;
}
.watch-scene {
position: relative;
width: 600px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
filter: drop-shadow(0 35px 50px rgba(0, 0, 0, 0.85))
drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
user-select: none;
transform-style: preserve-3d;
transition: transform 0.15s ease-out;
}
svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* Micro-textures & Smooth Transitions */
.hand {
will-change: transform;
transform-origin: 300px 300px;
}
.glare-overlay {
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.35;
transition: transform 0.1s ease-out, opacity 0.3s;
}
</style>
</head>
<body>
<div class="watch-scene" id="watchScene">
<svg viewBox="0 0 600 600" id="watchSvg">
<defs>
<!-- Drop Shadows -->
<filter id="handShadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="3" dy="6" stdDeviation="4" flood-color="#020508" flood-opacity="0.65"/>
</filter>
<filter id="secondHandShadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="4" dy="8" stdDeviation="3" flood-color="#000000" flood-opacity="0.5"/>
</filter>
<filter id="dialDepth" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="0" dy="4"/>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
</filter>
<filter id="subtleGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1.5" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
<!-- Steel Bracelet Gradients -->
<linearGradient id="braceletGradH" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#3a4048"/>
<stop offset="15%" stop-color="#7e8894"/>
<stop offset="28%" stop-color="#4a525d"/>
<stop offset="50%" stop-color="#9aa5b2"/>
<stop offset="72%" stop-color="#4a525d"/>
<stop offset="85%" stop-color="#7e8894"/>
<stop offset="100%" stop-color="#3a4048"/>
</linearGradient>
<!-- Metallic Case Gradients -->
<radialGradient id="caseBevel" cx="50%" cy="50%" r="50%">
<stop offset="80%" stop-color="#8a95a3"/>
<stop offset="92%" stop-color="#ffffff"/>
<stop offset="95%" stop-color="#4d5560"/>
<stop offset="98%" stop-color="#2a3038"/>
<stop offset="100%" stop-color="#14171a"/>
</radialGradient>
<linearGradient id="brushedBezel" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#c5cdd6"/>
<stop offset="20%" stop-color="#7a8593"/>
<stop offset="40%" stop-color="#eaf0f6"/>
<stop offset="55%" stop-color="#555f6c"/>
<stop offset="75%" stop-color="#c5cdd6"/>
<stop offset="90%" stop-color="#8c97a5"/>
<stop offset="100%" stop-color="#f0f5fa"/>
</linearGradient>
<linearGradient id="steppedRing" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#12161b"/>
<stop offset="45%" stop-color="#353e49"/>
<stop offset="55%" stop-color="#697686"/>
<stop offset="100%" stop-color="#101317"/>
</linearGradient>
<!-- Sunburst Dial Gradients -->
<radialGradient id="dialSunburst" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#1a3250"/>
<stop offset="45%" stop-color="#0f2035"/>
<stop offset="75%" stop-color="#091321"/>
<stop offset="100%" stop-color="#03070d"/>
</radialGradient>
<!-- Hand Facet Gradients (3D Metallic Bevels) -->
<linearGradient id="handLightLeft" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#bdc7d4"/>
</linearGradient>
<linearGradient id="handDarkRight" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#748191"/>
<stop offset="100%" stop-color="#3b4450"/>
</linearGradient>
<!-- Second Hand Rose/Flame Blue Gradient -->
<linearGradient id="bluedSteel" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#468cf0"/>
<stop offset="50%" stop-color="#1a54b8"/>
<stop offset="100%" stop-color="#0b2866"/>
</linearGradient>
<!-- Date Window Gradients -->
<linearGradient id="dateBevel" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#242c37"/>
<stop offset="35%" stop-color="#5a6878"/>
<stop offset="70%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#181e25"/>
</linearGradient>
<radialGradient id="datePlate" cx="40%" cy="40%" r="70%">
<stop offset="0%" stop-color="#fdfcf8"/>
<stop offset="100%" stop-color="#ded8cc"/>
</radialGradient>
<!-- Sapphire Glass Anti-Reflective Coating / Specular Highlight -->
<linearGradient id="glassGlare" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.45"/>
<stop offset="25%" stop-color="#9bc4ff" stop-opacity="0.15"/>
<stop offset="45%" stop-color="#ffffff" stop-opacity="0.0"/>
<stop offset="70%" stop-color="#9bc4ff" stop-opacity="0.05"/>
<stop offset="90%" stop-color="#ffffff" stop-opacity="0.25"/>
</linearGradient>
</defs>
<!-- BRACELET END LINKS -->
<g id="bracelet">
<!-- Top Link -->
<path d="M 200 40 L 400 40 L 385 120 L 215 120 Z" fill="url(#braceletGradH)" stroke="#22272e" stroke-width="1.5"/>
<line x1="265" y1="40" x2="260" y2="120" stroke="#252a32" stroke-width="2"/>
<line x1="335" y1="40" x2="340" y2="120" stroke="#252a32" stroke-width="2"/>
<line x1="200" y1="40" x2="400" y2="40" stroke="#717a86" stroke-width="2"/>
<!-- Bottom Link -->
<path d="M 215 480 L 385 480 L 400 560 L 200 560 Z" fill="url(#braceletGradH)" stroke="#22272e" stroke-width="1.5"/>
<line x1="260" y1="480" x2="265" y2="560" stroke="#252a32" stroke-width="2"/>
<line x1="340" y1="480" x2="335" y2="560" stroke="#252a32" stroke-width="2"/>
<line x1="215" y1="480" x2="385" y2="480" stroke="#717a86" stroke-width="1.5"/>
</g>
<!-- WATCH CASE & LUGS -->
<g id="case">
<!-- Ergonomic Lugs -->
<path d="M 180 130 C 175 220 170 380 180 470 L 225 470 C 215 380 215 220 225 130 Z" fill="url(#brushedBezel)" stroke="#1a1e24" stroke-width="1.5"/>
<path d="M 420 130 C 425 220 430 380 420 470 L 375 470 C 385 380 385 220 375 130 Z" fill="url(#brushedBezel)" stroke="#1a1e24" stroke-width="1.5"/>
<!-- Screw-down Crown with knurling -->
<g id="crown" transform="translate(488, 282)">
<path d="M 0 5 L 14 5 C 17 5 19 8 19 12 L 19 24 C 19 28 17 31 14 31 L 0 31 Z" fill="url(#steppedRing)" stroke="#12161b" stroke-width="1.5"/>
<line x1="4" y1="6" x2="4" y2="30" stroke="#7f8c9b" stroke-width="1.5"/>
<line x1="8" y1="6" x2="8" y2="30" stroke="#373e46" stroke-width="1.5"/>
<line x1="12" y1="6" x2="12" y2="30" stroke="#7f8c9b" stroke-width="1.5"/>
<line x1="16" y1="9" x2="16" y2="27" stroke="#373e46" stroke-width="1.5"/>
</g>
<!-- Case Outer Body (42mm proportion) -->
<circle cx="300" cy="300" r="198" fill="url(#caseBevel)"/>
<circle cx="300" cy="300" r="195" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.6"/>
<circle cx="300" cy="300" r="185" fill="url(#brushedBezel)" stroke="#2b313a" stroke-width="1.5"/>
<!-- Mirror Polished Chamfer -->
<circle cx="300" cy="300" r="172" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.8"/>
<circle cx="300" cy="300" r="170" fill="url(#steppedRing)"/>
<circle cx="300" cy="300" r="162" fill="none" stroke="#000000" stroke-width="2.5"/>
</g>
<!-- DIAL FACE -->
<g id="dial">
<!-- Main Dial Surface -->
<circle cx="300" cy="300" r="160" fill="url(#dialSunburst)"/>
<!-- Radial Micro-Guilloche / Sunburst lines -->
<g id="sunburstLines" opacity="0.12" stroke="#89b6ea" stroke-width="0.5"></g>
<!-- Subtle Depth Shadow Inside Dial -->
<circle cx="300" cy="300" r="160" fill="none" stroke="#000000" stroke-width="6" opacity="0.4"/>
<!-- Dial Typography / Branding -->
<g id="brandText" text-anchor="middle">
<text x="300" y="215" font-family="'Didot', 'Bodoni MT', 'Cinzel', 'Times New Roman', serif" font-size="14" font-weight="700" fill="#f5f7fa" letter-spacing="4">VACHERON</text>
<text x="300" y="228" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="7" font-weight="500" fill="#a6b4c3" letter-spacing="3.5">GENÈVE</text>
<path d="M 293 234 L 307 234 M 300 231 L 300 237" stroke="#cfa45d" stroke-width="0.8" opacity="0.7"/>
<text x="300" y="382" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="6.5" font-weight="600" fill="#c39d63" letter-spacing="2.5">CHRONOMÈTRE</text>
<text x="300" y="393" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="5.5" font-weight="400" fill="#8293a4" letter-spacing="2">OFFICIALLY CERTIFIED</text>
<text x="300" y="403" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="5.5" font-weight="400" fill="#8293a4" letter-spacing="2">AUTOMATIC</text>
<text x="291" y="449" font-family="'Helvetica Neue', sans-serif" font-size="4.5" font-weight="600" fill="#586777" letter-spacing="0.5">SWISS</text>
<text x="309" y="449" font-family="'Helvetica Neue', sans-serif" font-size="4.5" font-weight="600" fill="#586777" letter-spacing="0.5">MADE</text>
</g>
<!-- Date Aperture Window at 3 o'clock -->
<g id="dateWindowGroup">
<!-- Beveled Outer Frame -->
<rect x="382" y="286" width="38" height="28" rx="2.5" fill="url(#dateBevel)" filter="drop-shadow(0 2px 3px rgba(0,0,0,0.7))"/>
<!-- Inner Aperture Cutout -->
<rect x="385" y="289" width="32" height="22" rx="1.5" fill="url(#datePlate)"/>
<!-- Inner Shadow Step -->
<rect x="385" y="289" width="32" height="22" rx="1.5" fill="none" stroke="#161b22" stroke-width="1.2" opacity="0.75"/>
<line x1="385" y1="290" x2="417" y2="290" stroke="#000000" stroke-width="1.5" opacity="0.5"/>
<!-- Dynamic Date Number -->
<text id="dateText" x="401" y="306" font-family="'Baskerville', 'Georgia', 'Times New Roman', serif" font-size="16" font-weight="bold" fill="#11161d" text-anchor="middle">--</text>
</g>
<!-- Applied Indices & Minute Ticks Container -->
<g id="ticksContainer"></g>
<g id="indicesContainer"></g>
</g>
<!-- HANDS STACK (Layered with Drop Shadows) -->
<g id="handsGroup">
<!-- 1. Hour Hand -->
<g id="hourHandGroup" class="hand" filter="url(#handShadow)">
<!-- Faceted Dauphine Blade -->
<polygon points="300,300 293,296 295,200 300,182" fill="url(#handLightLeft)"/>
<polygon points="300,300 307,296 305,200 300,182" fill="url(#handDarkRight)"/>
<!-- Luminous Core Inlay -->
<polygon points="298.5,275 298,205 300,190 302,205 301.5,275" fill="#eafcee" filter="url(#subtleGlow)" opacity="0.95"/>
<!-- Rear Counterbalance -->
<polygon points="295,304 300,318 305,304 300,300" fill="#9cb0c3"/>
</g>
<!-- 2. Minute Hand -->
<g id="minuteHandGroup" class="hand" filter="url(#handShadow)">
<!-- Faceted Dauphine Blade (longer, extending to minute track) -->
<polygon points="300,300 294,296 296,155 300,138" fill="url(#handLightLeft)"/>
<polygon points="300,300 306,296 304,155 300,138" fill="url(#handDarkRight)"/>
<!-- Luminous Core Inlay -->
<polygon points="298.5,278 298,155 300,143 302,155 301.5,278" fill="#eafcee" filter="url(#subtleGlow)" opacity="0.95"/>
<!-- Rear Counterbalance -->
<polygon points="295,304 300,324 305,304 300,300" fill="#9cb0c3"/>
</g>
<!-- 3. Center Wheel Pivot Spacer -->
<circle cx="300" cy="300" r="7" fill="#1b222a"/>
<circle cx="300" cy="300" r="5.5" fill="#7d8b99"/>
<!-- 4. Sweeping Seconds Hand (Counterbalanced, Blued Steel) -->
<g id="secondHandGroup" class="hand" filter="url(#secondHandShadow)">
<!-- Needle Tip -->
<polygon points="299.4,300 299.7,132 300,126 300.3,132 300.6,300" fill="#549eff"/>
<line x1="300" y1="130" x2="300" y2="300" stroke="url(#bluedSteel)" stroke-width="1.2"/>
<!-- Counterbalance Extension -->
<line x1="300" y1="300" x2="300" y2="352" stroke="url(#bluedSteel)" stroke-width="1.5"/>
<!-- Skeletonized Pear/Ogee Counterweight -->
<circle cx="300" cy="342" r="5.5" fill="none" stroke="url(#bluedSteel)" stroke-width="1.6"/>
<circle cx="300" cy="342" r="2.2" fill="url(#bluedSteel)"/>
</g>
<!-- 5. Center Cap (Mirror Polished Steel Cannon Pinion Cap) -->
<circle cx="300" cy="300" r="3.2" fill="#ffffff"/>
<circle cx="300" cy="300" r="2" fill="#2b343f"/>
<circle cx="299.3" cy="299.3" r="0.8" fill="#ffffff" opacity="0.8"/>
</g>
<!-- SAPPHIRE CRYSTAL GLARE / REFLECTION -->
<ellipse id="crystalGlare" class="glare-overlay" cx="300" cy="300" rx="160" ry="160" fill="url(#glassGlare)"/>
</svg>
</div>
<script>
(function initWatch() {
// 1. Generate Sunburst Dial Radial Lines
const sunburstContainer = document.getElementById('sunburstLines');
const totalRays = 120;
let raysHtml = '';
for (let i = 0; i < totalRays; i++) {
const angle = (i * 360) / totalRays;
const rad = (angle * Math.PI) / 180;
const x2 = (300 + 158 * Math.cos(rad)).toFixed(2);
const y2 = (300 + 158 * Math.sin(rad)).toFixed(2);
raysHtml += `<line x1="300" y1="300" x2="${x2}" y2="${y2}" />`;
}
sunburstContainer.innerHTML = raysHtml;
// 2. Generate Minute Track & Applied Markers
const ticksContainer = document.getElementById('ticksContainer');
const indicesContainer = document.getElementById('indicesContainer');
let ticksHtml = '';
let indicesHtml = '';
for (let i = 0; i < 60; i++) {
const angle = i * 6;
const isFive = i % 5 === 0;
const rad = ((angle - 90) * Math.PI) / 180;
// Minute Chapter Ring Ticks
const rOuter = 155;
const rInner = isFive ? 146 : 150;
const x1 = (300 + rOuter * Math.cos(rad)).toFixed(2);
const y1 = (300 + rOuter * Math.sin(rad)).toFixed(2);
const x2 = (300 + rInner * Math.cos(rad)).toFixed(2);
const y2 = (300 + rInner * Math.sin(rad)).toFixed(2);
const strokeColor = isFive ? '#ccd8e4' : '#5b6d80';
const strokeW = isFive ? '1.5' : '0.75';
ticksHtml += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${strokeColor}" stroke-width="${strokeW}" />`;
// 3D Applied Luminous Hour Markers
if (isFive) {
// Skip normal marker at 3 o'clock to comfortably clear the date window aperture
if (i === 15) {
// Truncated luxury baton beside date window
indicesHtml += `
<g transform="rotate(${angle} 300 300)">
<rect x="297" y="152" width="6" height="7" rx="0.8" fill="url(#handLightLeft)" stroke="#1a222a" stroke-width="0.5"/>
<rect x="298.5" y="153.5" width="3" height="4" fill="#d8f8e0"/>
</g>
`;
continue;
}
// Double Baton at 12 o'clock
if (i === 0) {
indicesHtml += `
<g transform="rotate(0 300 300)">
<!-- Left Baton -->
<rect x="293.5" y="144" width="5.5" height="23" rx="1" fill="url(#handLightLeft)" filter="drop-shadow(0 2px 3px rgba(0,0,0,0.6))"/>
<rect x="295" y="146" width="2.5" height="17" fill="#eafcee" filter="url(#subtleGlow)"/>
<!-- Right Baton -->
<rect x="301" y="144" width="5.5" height="23" rx="1" fill="url(#handDarkRight)" filter="drop-shadow(0 2px 3px rgba(0,0,0,0.6))"/>
<rect x="302.5" y="146" width="2.5" height="17" fill="#eafcee" filter="url(#subtleGlow)"/>
</g>
`;
} else {
// Standard Faceted 3D Baton
indicesHtml += `
<g transform="rotate(${angle} 300 300)">
<polygon points="296.5,144 300,142 300,167 296.5,165" fill="url(#handLightLeft)" filter="drop-shadow(0 2px 2px rgba(0,0,0,0.6))"/>
<polygon points="303.5,144 300,142 300,167 303.5,165" fill="url(#handDarkRight)" filter="drop-shadow(0 2px 2px rgba(0,0,0,0.6))"/>
<!-- Luminous Center Capsule -->
<rect x="298.8" y="146" width="2.4" height="17" rx="0.5" fill="#eafcee" filter="url(#subtleGlow)"/>
<!-- Luminous Pearl Pip on Outer Rim -->
<circle cx="300" cy="140" r="1.4" fill="#eafcee" filter="url(#subtleGlow)"/>
</g>
`;
}
}
}
ticksContainer.innerHTML = ticksHtml;
indicesContainer.innerHTML = indicesHtml;
// 3. Hands & Date Elements
const hourHand = document.getElementById('hourHandGroup');
const minuteHand = document.getElementById('minuteHandGroup');
const secondHand = document.getElementById('secondHandGroup');
const dateText = document.getElementById('dateText');
const watchScene = document.getElementById('watchScene');
const crystalGlare = document.getElementById('crystalGlare');
let lastDay = -1;
// High Precision Sweeping Time Loop (Mechanical 28,800 vph / Smooth Gliding Motion)
function renderTime() {
const now = new Date();
const ms = now.getMilliseconds();
const seconds = now.getSeconds() + ms / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
const secDeg = seconds * 6;
const minDeg = minutes * 6;
const hourDeg = hours * 30;
// Rotate Hands with SVG Transforms
secondHand.setAttribute('transform', `rotate(${secDeg} 300 300)`);
minuteHand.setAttribute('transform', `rotate(${minDeg} 300 300)`);
hourHand.setAttribute('transform', `rotate(${hourDeg} 300 300)`);
// Update Date Window accurately
const currentDay = now.getDate();
if (currentDay !== lastDay) {
dateText.textContent = String(currentDay);
lastDay = currentDay;
}
requestAnimationFrame(renderTime);
}
requestAnimationFrame(renderTime);
// 4. Subtle Interactive 3D Parallax & Glare Shift
let bounds;
function updateBounds() {
bounds = watchScene.getBoundingClientRect();
}
window.addEventListener('resize', updateBounds);
updateBounds();
window.addEventListener('mousemove', (e) => {
if (!bounds) updateBounds();
const mouseX = e.clientX - bounds.left;
const mouseY = e.clientY - bounds.top;
const normX = (mouseX / bounds.width - 0.5) * 2; // -1 to 1
const normY = (mouseY / bounds.height - 0.5) * 2; // -1 to 1
// Subtle tilt
const tiltX = -normY * 7;
const tiltY = normX * 7;
watchScene.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
// Dynamic sapphire reflection displacement
const glareX = -normX * 18;
const glareY = -normY * 18;
crystalGlare.style.transform = `translate(${glareX}px, ${glareY}px)`;
});
// Reset smoothly on mouse leave
document.addEventListener('mouseleave', () => {
watchScene.style.transform = `rotateX(0deg) rotateY(0deg)`;
crystalGlare.style.transform = `translate(0px, 0px)`;
});
})();
</script>
</body>
</html>

