Run details
- Model
- nvidia/nemotron-3-ultra-550b-a55b:free
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 407 reasoning tokens
- Limits
- 60 min · 65,536 output tokens
- Date
- 21 Oct 2026
- Time
- 2 min 56 s
- Size
- 31 kB
- Tokens
- 93 in, 11,968 out
- List price
- $0.029 ($0.6 in / $2.4 out per M)
- 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
31 kB 708 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mechanical Wristwatch</title>
<style>
:root {
--case: #c9b896;
--case-dark: #9a8a6b;
--case-light: #e8dcc8;
--dial: #0d0d0f;
--dial-highlight: #1a1a22;
--gold: #d4af37;
--gold-dark: #a67c00;
--gold-light: #f0e68c;
--steel: #c0c8d0;
--steel-dark: #8a95a0;
--steel-light: #e8ecf0;
--hand: #f5f0e8;
--hand-shadow: #1a1a1a;
--second-hand: #e84d2a;
--lume: #b8f57a;
--crystal: rgba(255,255,255,0.15);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, #1a1a20 0%, #0a0a0c 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(212,175,55,0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(200,200,220,0.02) 0%, transparent 50%);
pointer-events: none;
}
.watch-container {
position: relative;
width: min(600px, 90vw);
height: min(600px, 90vw);
filter: drop-shadow(0 40px 80px rgba(0,0,0,0.6)) drop-shadow(0 10px 30px rgba(0,0,0,0.4));
transform-style: preserve-3d;
perspective: 1000px;
}
.watch {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
}
.svg-wrapper {
width: 100%;
height: 100%;
display: block;
}
#watch-svg {
width: 100%;
height: 100%;
display: block;
}
/* Crown animation */
.crown { cursor: grab; }
.crown:active { cursor: grabbing; }
/* Date window text */
.date-text {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
font-weight: 600;
dominant-baseline: central;
text-anchor: middle;
}
/* Lume glow animation */
@keyframes lume-pulse {
0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 2px var(--lume)) drop-shadow(0 0 4px var(--lume)); }
50% { opacity: 1; filter: drop-shadow(0 0 4px var(--lume)) drop-shadow(0 0 8px var(--lume)); }
}
.lume-dot { animation: lume-pulse 3s ease-in-out infinite; }
.lume-dot:nth-child(odd) { animation-delay: -1.5s; }
/* Seconds hand smooth motion */
.second-hand { transform-origin: 50% 50%; transform-box: fill-box; }
.minute-hand { transform-origin: 50% 50%; transform-box: fill-box; }
.hour-hand { transform-origin: 50% 50%; transform-box: fill-box; }
/* Crystal reflection */
.crystal-reflection { pointer-events: none; }
/* Responsive adjustments */
@media (max-width: 480px) {
.watch-container { width: 95vw; height: 95vw; }
}
</style>
</head>
<body>
<div class="watch-container" id="watchContainer">
<div class="watch" id="watch">
<svg id="watch-svg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Main gradients -->
<linearGradient id="caseGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e8dcc8"/>
<stop offset="15%" stop-color="#d4c09c"/>
<stop offset="35%" stop-color="#c9b896"/>
<stop offset="50%" stop-color="#b8a582"/>
<stop offset="65%" stop-color="#a6926e"/>
<stop offset="80%" stop-color="#9a8a6b"/>
<stop offset="100%" stop-color="#88785a"/>
</linearGradient>
<linearGradient id="caseSideGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#88785a"/>
<stop offset="20%" stop-color="#a6926e"/>
<stop offset="40%" stop-color="#c9b896"/>
<stop offset="60%" stop-color="#d4c09c"/>
<stop offset="80%" stop-color="#a6926e"/>
<stop offset="100%" stop-color="#88785a"/>
</linearGradient>
<radialGradient id="bezelGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f0e8dc"/>
<stop offset="20%" stop-color="#d4c8b0"/>
<stop offset="50%" stop-color="#b8a890"/>
<stop offset="75%" stop-color="#9a8a70"/>
<stop offset="100%" stop-color="#7a6a50"/>
</radialGradient>
<linearGradient id="lugGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e8dcc8"/>
<stop offset="30%" stop-color="#c9b896"/>
<stop offset="70%" stop-color="#a6926e"/>
<stop offset="100%" stop-color="#7a6a50"/>
</linearGradient>
<!-- Dial gradients -->
<radialGradient id="dialGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#1a1a22"/>
<stop offset="40%" stop-color="#121218"/>
<stop offset="70%" stop-color="#0a0a0d"/>
<stop offset="100%" stop-color="#050506"/>
</radialGradient>
<radialGradient id="dialSunburst" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#1a1a22"/>
<stop offset="100%" stop-color="#050506"/>
</radialGradient>
<!-- Gold gradients -->
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f0e68c"/>
<stop offset="25%" stop-color="#e6d45a"/>
<stop offset="50%" stop-color="#d4af37"/>
<stop offset="75%" stop-color="#b8860b"/>
<stop offset="100%" stop-color="#8a6d00"/>
</linearGradient>
<linearGradient id="goldGradientHorizontal" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#8a6d00"/>
<stop offset="25%" stop-color="#b8860b"/>
<stop offset="50%" stop-color="#d4af37"/>
<stop offset="75%" stop-color="#e6d45a"/>
<stop offset="100%" stop-color="#f0e68c"/>
</linearGradient>
<radialGradient id="goldRadial" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff8dc"/>
<stop offset="30%" stop-color="#f0e68c"/>
<stop offset="60%" stop-color="#d4af37"/>
<stop offset="100%" stop-color="#a67c00"/>
</radialGradient>
<!-- Hand gradients -->
<linearGradient id="handGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="30%" stop-color="#f5f0e8"/>
<stop offset="60%" stop-color="#e8e0d0"/>
<stop offset="100%" stop-color="#d0c8b8"/>
</linearGradient>
<linearGradient id="handShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(26,26,26,0.6)"/>
<stop offset="100%" stop-color="rgba(26,26,26,0.2)"/>
</linearGradient>
<linearGradient id="secondHandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ff6b4a"/>
<stop offset="50%" stop-color="#e84d2a"/>
<stop offset="100%" stop-color="#b8381a"/>
</linearGradient>
<linearGradient id="counterWeightGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e84d2a"/>
<stop offset="100%" stop-color="#b8381a"/>
</linearGradient>
<!-- Steel/crown gradients -->
<linearGradient id="steelGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e8ecf0"/>
<stop offset="20%" stop-color="#c0c8d0"/>
<stop offset="50%" stop-color="#a0a8b0"/>
<stop offset="80%" stop-color="#8a95a0"/>
<stop offset="100%" stop-color="#6a7580"/>
</linearGradient>
<linearGradient id="steelGradientHorizontal" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#6a7580"/>
<stop offset="25%" stop-color="#8a95a0"/>
<stop offset="50%" stop-color="#c0c8d0"/>
<stop offset="75%" stop-color="#e8ecf0"/>
<stop offset="100%" stop-color="#c0c8d0"/>
</linearGradient>
<!-- Crystal -->
<radialGradient id="crystalGradient" cx="50%" cy="30%" r="70%">
<stop offset="0%" stop-color="rgba(255,255,255,0.25)"/>
<stop offset="20%" stop-color="rgba(255,255,255,0.12)"/>
<stop offset="50%" stop-color="rgba(255,255,255,0.03)"/>
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
</radialGradient>
<linearGradient id="crystalEdgeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(255,255,255,0.15)"/>
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
</linearGradient>
<!-- Date window -->
<linearGradient id="dateWindowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0a0c"/>
<stop offset="50%" stop-color="#0d0d10"/>
<stop offset="100%" stop-color="#0a0a0c"/>
</linearGradient>
<linearGradient id="dateFrameGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#d4c8b0"/>
<stop offset="30%" stop-color="#b8a890"/>
<stop offset="70%" stop-color="#9a8a70"/>
<stop offset="100%" stop-color="#7a6a50"/>
</linearGradient>
<!-- Guilloche pattern -->
<pattern id="guilloche" patternUnits="userSpaceOnUse" width="4" height="4">
<path d="M0,2 Q2,0 4,2 Q2,4 0,2" fill="none" stroke="rgba(255,255,255,0.015)" stroke-width="0.5"/>
</pattern>
<pattern id="guillocheFine" patternUnits="userSpaceOnUse" width="2" height="2">
<circle cx="1" cy="1" r="0.5" fill="rgba(255,255,255,0.008)"/>
</pattern>
<!-- Drop shadows -->
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="4" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.3"/>
</feComponentTransfer>
<feMerge>
<feMergeNode in="offsetblur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="dropShadowHeavy" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="6"/>
<feOffset dx="4" dy="8" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode in="offsetblur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="0" dy="2"/>
<feGaussianBlur stdDeviation="2" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="out"/>
<feComposite in="SourceGraphic" operator="atop"/>
</filter>
<filter id="glow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="4" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Cyclops lens effect -->
<filter id="magnify" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="blur"/>
<feComponentTransfer in="blur">
<feFuncA type="linear" slope="1.2"/>
</feComponentTransfer>
</filter>
</defs>
<!-- Case back (shadow) -->
<ellipse cx="250" cy="265" rx="195" ry="195" fill="#050506" filter="url(#dropShadowHeavy)"/>
<!-- Case body - main cylinder -->
<g id="caseBody">
<!-- Case side wall -->
<path d="M105,105 Q105,95 115,95 L385,95 Q395,95 395,105 L395,395 Q395,405 385,405 L115,405 Q105,405 105,395 Z"
fill="url(#caseGradient)" filter="url(#dropShadow)"/>
<!-- Case inner bevel -->
<path d="M125,125 Q125,118 132,118 L368,118 Q375,118 375,125 L375,375 Q375,382 368,382 L132,382 Q125,382 125,375 Z"
fill="url(#caseSideGradient)"/>
<!-- Bezel -->
<circle cx="250" cy="250" r="185" fill="url(#bezelGradient)"/>
<circle cx="250" cy="250" r="178" fill="url(#dialGradient)"/>
<!-- Bezel inner edge highlight -->
<circle cx="250" cy="250" r="178" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
<circle cx="250" cy="250" r="172" fill="none" stroke="rgba(0,0,0,0.3)" stroke-width="1"/>
<!-- Guilloche dial pattern -->
<circle cx="250" cy="250" r="170" fill="url(#dialSunburst)"/>
<circle cx="250" cy="250" r="170" fill="url(#guilloche)"/>
<circle cx="250" cy="250" r="170" fill="url(#guillocheFine)"/>
<!-- Chapter ring -->
<circle cx="250" cy="250" r="158" fill="none" stroke="url(#goldGradientHorizontal)" stroke-width="1.5"/>
<circle cx="250" cy="250" r="156" fill="none" stroke="rgba(0,0,0,0.4)" stroke-width="0.5"/>
</g>
<!-- Lugs -->
<g id="lugs">
<!-- Top left lug -->
<path d="M105,135 Q105,125 95,115 L70,115 Q55,115 55,130 L55,175 Q55,190 70,200 L95,200 Q105,190 105,180 Z"
fill="url(#lugGradient)" filter="url(#dropShadow)"/>
<path d="M95,115 Q90,110 85,110 L85,125 Q90,128 95,125 Z"
fill="url(#caseSideGradient)"/>
<!-- Top right lug -->
<path d="M395,135 Q395,125 405,115 L430,115 Q445,115 445,130 L445,175 Q445,190 430,200 L405,200 Q395,190 395,180 Z"
fill="url(#lugGradient)" filter="url(#dropShadow)"/>
<path d="M405,115 Q410,110 415,110 L415,125 Q410,128 405,125 Z"
fill="url(#caseSideGradient)"/>
<!-- Bottom left lug -->
<path d="M105,365 Q105,375 95,385 L70,385 Q55,385 55,370 L55,325 Q55,310 70,300 L95,300 Q105,310 105,320 Z"
fill="url(#lugGradient)" filter="url(#dropShadow)"/>
<path d="M95,385 Q90,390 85,390 L85,375 Q90,372 95,375 Z"
fill="url(#caseSideGradient)"/>
<!-- Bottom right lug -->
<path d="M395,365 Q395,375 405,385 L430,385 Q445,385 445,370 L445,325 Q445,310 430,300 L405,300 Q395,310 395,320 Z"
fill="url(#lugGradient)" filter="url(#dropShadow)"/>
<path d="M405,385 Q410,390 415,390 L415,375 Q410,372 405,375 Z"
fill="url(#caseSideGradient)"/>
</g>
<!-- Crown at 3 o'clock -->
<g id="crown" class="crown" transform="translate(395, 250)">
<circle cx="0" cy="0" r="18" fill="url(#steelGradient)"/>
<circle cx="0" cy="0" r="15" fill="url(#steelGradientHorizontal)"/>
<!-- Knurling -->
<g stroke="#6a7580" stroke-width="1.5" stroke-linecap="round">
<line x1="-10" y1="-8" x2="-10" y2="8"/>
<line x1="-7" y1="-9" x2="-7" y2="9"/>
<line x1="-4" y1="-10" x2="-4" y2="10"/>
<line x1="-1" y1="-10" x2="-1" y2="10"/>
<line x1="2" y1="-10" x2="2" y2="10"/>
<line x1="5" y1="-9" x2="5" y2="9"/>
<line x1="8" y1="-8" x2="8" y2="8"/>
</g>
<circle cx="0" cy="0" r="8" fill="url(#goldRadial)"/>
<circle cx="0" cy="0" r="5" fill="url(#goldGradient)"/>
</g>
<!-- Crown guards -->
<g id="crownGuards">
<path d="M395,215 Q395,205 410,200 L420,200 Q430,200 430,210 L430,290 Q430,300 420,300 L410,300 Q395,295 395,285 Z"
fill="url(#caseGradient)" filter="url(#dropShadow)"/>
<path d="M410,200 Q415,195 420,195 L420,305 Q415,305 410,300 Z"
fill="url(#caseSideGradient)"/>
</g>
<!-- Dial elements -->
<g id="dialElements">
<!-- Applied hour markers -->
<g id="hourMarkers" fill="url(#goldGradient)">
<!-- 12 -->
<path d="M250,52 L250,72" stroke="url(#goldGradient)" stroke-width="4" stroke-linecap="round" filter="url(#dropShadow)"/>
<circle cx="250" cy="52" r="2" fill="url(#goldRadial)" class="lume-dot"/>
<!-- 1 -->
<g transform="translate(250,250) rotate(30) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
<!-- 2 -->
<g transform="translate(250,250) rotate(60) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
<!-- 3 - replaced by date window -->
<!-- 4 -->
<g transform="translate(250,250) rotate(120) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
<!-- 5 -->
<g transform="translate(250,250) rotate(150) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
<!-- 6 -->
<path d="M250,428 L250,448" stroke="url(#goldGradient)" stroke-width="4" stroke-linecap="round" filter="url(#dropShadow)"/>
<circle cx="250" cy="448" r="2" fill="url(#goldRadial)" class="lume-dot"/>
<!-- 7 -->
<g transform="translate(250,250) rotate(210) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
<!-- 8 -->
<g transform="translate(250,250) rotate(240) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
<!-- 9 -->
<path d="M52,250 L72,250" stroke="url(#goldGradient)" stroke-width="4" stroke-linecap="round" filter="url(#dropShadow)"/>
<circle cx="52" cy="250" r="2" fill="url(#goldRadial)" class="lume-dot"/>
<!-- 10 -->
<g transform="translate(250,250) rotate(300) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
<!-- 11 -->
<g transform="translate(250,250) rotate(330) translate(-250,-250)">
<path d="M358,105 L372,105" stroke="url(#goldGradientHorizontal)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<ellipse cx="378" cy="105" rx="2.5" ry="1.5" fill="url(#goldRadial)" class="lume-dot"/>
</g>
</g>
<!-- Minute track -->
<g id="minuteTrack" stroke="rgba(212,175,55,0.3)" stroke-width="0.8">
<circle cx="250" cy="250" r="162" fill="none"/>
</g>
<g stroke="rgba(212,175,55,0.15)" stroke-width="0.5">
<!-- Minute marks every 6 degrees -->
</g>
<!-- Date window at 3 o'clock -->
<g id="dateWindow" transform="translate(335, 250)">
<!-- Date frame -->
<rect x="-28" y="-14" width="56" height="28" rx="3" fill="url(#dateFrameGradient)" filter="url(#dropShadow)"/>
<rect x="-26" y="-12" width="52" height="24" rx="2" fill="url(#dateWindowGradient)"/>
<!-- Cyclops lens area on crystal (handled in crystal layer) -->
<!-- Date text -->
<text id="dateText" class="date-text" x="0" y="1" font-size="16" fill="#d4af37" filter="url(#glow)">31</text>
</g>
<!-- Brand text -->
<text x="250" y="115" text-anchor="middle" font-family="Georgia, serif" font-size="18" font-weight="bold" fill="url(#goldGradient)" letter-spacing="3">CHRONOS</text>
<text x="250" y="135" text-anchor="middle" font-family="Georgia, serif" font-size="9" fill="rgba(212,175,55,0.7)" letter-spacing="2">AUTOMATIC</text>
<text x="250" y="395" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="rgba(212,175,55,0.5)" letter-spacing="1">SWISS MADE</text>
<!-- Center hub -->
<circle cx="250" cy="250" r="10" fill="url(#goldRadial)" filter="url(#dropShadow)"/>
<circle cx="250" cy="250" r="7" fill="url(#goldGradient)"/>
<circle cx="250" cy="250" r="4" fill="#fff8dc"/>
</g>
<!-- Hands group -->
<g id="hands">
<!-- Hour hand shadow -->
<path id="hourHandShadow" class="hour-hand" d="M250,250 L250,115" stroke="url(#handShadowGradient)" stroke-width="6" stroke-linecap="round" opacity="0.4"/>
<!-- Hour hand -->
<path id="hourHand" class="hour-hand" d="M250,250 L250,115" stroke="url(#handGradient)" stroke-width="5.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<polygon id="hourHandTip" points="250,105 246,112 254,112" fill="url(#handGradient)" filter="url(#dropShadow)"/>
<!-- Minute hand shadow -->
<path id="minuteHandShadow" class="minute-hand" d="M250,250 L250,75" stroke="url(#handShadowGradient)" stroke-width="4" stroke-linecap="round" opacity="0.4"/>
<!-- Minute hand -->
<path id="minuteHand" class="minute-hand" d="M250,250 L250,75" stroke="url(#handGradient)" stroke-width="3.5" stroke-linecap="round" filter="url(#dropShadow)"/>
<polygon id="minuteHandTip" points="250,65 245,75 255,75" fill="url(#handGradient)" filter="url(#dropShadow)"/>
<!-- Second hand -->
<g id="secondHandGroup" class="second-hand">
<!-- Counterweight -->
<path d="M250,250 L250,340" stroke="url(#counterWeightGradient)" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="250" cy="340" r="4" fill="url(#counterWeightGradient)"/>
<!-- Main hand -->
<path d="M250,250 L250,55" stroke="url(#secondHandGradient)" stroke-width="1.5" stroke-linecap="round"/>
<polygon points="250,48 248,58 252,58" fill="url(#secondHandGradient)"/>
<!-- Tip lume -->
<circle cx="250" cy="52" r="1.5" fill="#ff6b4a" class="lume-dot" style="animation-delay: -0.5s;"/>
</g>
<!-- Center cap -->
<circle cx="250" cy="250" r="6" fill="url(#goldRadial)" filter="url(#dropShadow)"/>
<circle cx="250" cy="250" r="4" fill="url(#goldGradient)"/>
<circle cx="250" cy="250" r="2" fill="#fff8dc"/>
</g>
<!-- Crystal layer -->
<g id="crystal" class="crystal-reflection">
<!-- Main crystal -->
<circle cx="250" cy="250" r="178" fill="url(#crystalGradient)"/>
<!-- Crystal edge -->
<circle cx="250" cy="250" r="178" fill="none" stroke="url(#crystalEdgeGradient)" stroke-width="4"/>
<!-- Cyclops lens over date window -->
<ellipse cx="335" cy="250" rx="32" ry="20" fill="url(#crystalGradient)" filter="url(#magnify)"/>
<ellipse cx="335" cy="250" rx="32" ry="20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
<!-- Anti-reflection coating hint -->
<ellipse cx="250" cy="200" rx="120" ry="60" fill="rgba(255,255,255,0.02)"/>
<!-- Sharp reflection line -->
<path d="M100,180 Q250,160 400,180" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="2" stroke-linecap="round"/>
<path d="M120,220 Q250,210 380,220" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- Strap attachment points (spring bars) -->
<g id="springBars" fill="url(#steelGradient)">
<rect x="88" y="132" width="8" height="16" rx="4" filter="url(#dropShadow)"/>
<rect x="404" y="132" width="8" height="16" rx="4" filter="url(#dropShadow)"/>
<rect x="88" y="352" width="8" height="16" rx="4" filter="url(#dropShadow)"/>
<rect x="404" y="352" width="8" height="16" rx="4" filter="url(#dropShadow)"/>
</g>
<!-- Strap suggestion (leather) -->
<g id="strap" opacity="0.9">
<!-- Top strap -->
<path d="M92,140 Q80,180 90,250 Q100,320 92,360 L108,360 Q118,320 110,250 Q100,180 108,140 Z" fill="#1a120a"/>
<path d="M92,140 Q80,180 90,250 Q100,320 92,360 L108,360 Q118,320 110,250 Q100,180 108,140 Z" fill="url(#guillocheFine)"/>
<!-- Stitching -->
<g stroke="#3a2a1a" stroke-width="0.8" fill="none" stroke-dasharray="4,3">
<path d="M92,140 Q80,180 90,250 Q100,320 92,360"/>
<path d="M108,140 Q120,180 110,250 Q100,320 108,360"/>
</g>
<!-- Strap holes -->
<g fill="#0a0603">
<ellipse cx="100" cy="180" rx="2" ry="1.5"/>
<ellipse cx="100" cy="200" rx="2" ry="1.5"/>
<ellipse cx="100" cy="220" rx="2" ry="1.5"/>
<ellipse cx="100" cy="240" rx="2" ry="1.5"/>
<ellipse cx="100" cy="260" rx="2" ry="1.5"/>
<ellipse cx="100" cy="280" rx="2" ry="1.5"/>
<ellipse cx="100" cy="300" rx="2" ry="1.5"/>
<ellipse cx="100" cy="320" rx="2" ry="1.5"/>
</g>
<!-- Bottom strap (buckle side) -->
<path d="M408,140 Q420,180 410,250 Q400,320 408,360 L392,360 Q382,320 390,250 Q400,180 392,140 Z" fill="#1a120a"/>
<path d="M408,140 Q420,180 410,250 Q400,320 408,360 L392,360 Q382,320 390,250 Q400,180 392,140 Z" fill="url(#guillocheFine)"/>
<g stroke="#3a2a1a" stroke-width="0.8" fill="none" stroke-dasharray="4,3">
<path d="M408,140 Q420,180 410,250 Q400,320 408,360"/>
<path d="M392,140 Q380,180 390,250 Q400,320 392,360"/>
</g>
<!-- Buckle -->
<g transform="translate(400, 360)">
<rect x="-18" y="0" width="36" height="22" rx="2" fill="url(#steelGradient)" filter="url(#dropShadow)"/>
<rect x="-14" y="4" width="28" height="14" rx="1" fill="#2a2a2a"/>
<rect x="-8" y="8" width="16" height="4" fill="url(#steelGradientHorizontal)"/>
<circle cx="0" cy="11" r="3" fill="url(#steelGradient)"/>
</g>
</g>
</svg>
</div>
</div>
<script>
(function() {
'use strict';
const hourHand = document.getElementById('hourHand');
const hourHandShadow = document.getElementById('hourHandShadow');
const hourHandTip = document.getElementById('hourHandTip');
const minuteHand = document.getElementById('minuteHand');
const minuteHandShadow = document.getElementById('minuteHandShadow');
const minuteHandTip = document.getElementById('minuteHandTip');
const secondHandGroup = document.getElementById('secondHandGroup');
const dateText = document.getElementById('dateText');
const watch = document.getElementById('watch');
const watchContainer = document.getElementById('watchContainer');
// Parallax effect variables
let mouseX = 0;
let mouseY = 0;
let targetRotateX = 0;
let targetRotateY = 0;
let currentRotateX = 0;
let currentRotateY = 0;
// Smooth parallax
function animateParallax() {
currentRotateX += (targetRotateX - currentRotateX) * 0.1;
currentRotateY += (targetRotateY - currentRotateY) * 0.1;
watch.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
requestAnimationFrame(animateParallax);
}
// Mouse move handler for subtle 3D effect
watchContainer.addEventListener('mousemove', (e) => {
const rect = watchContainer.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
mouseX = (e.clientX - centerX) / (rect.width / 2);
mouseY = (e.clientY - centerY) / (rect.height / 2);
targetRotateY = mouseX * 3; // max 3 degrees
targetRotateX = -mouseY * 3;
});
watchContainer.addEventListener('mouseleave', () => {
targetRotateX = 0;
targetRotateY = 0;
});
// Touch support for mobile
watchContainer.addEventListener('touchmove', (e) => {
e.preventDefault();
const rect = watchContainer.getBoundingClientRect();
const touch = e.touches[0];
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
mouseX = (touch.clientX - centerX) / (rect.width / 2);
mouseY = (touch.clientY - centerY) / (rect.height / 2);
targetRotateY = mouseX * 3;
targetRotateX = -mouseY * 3;
}, { passive: false });
watchContainer.addEventListener('touchend', () => {
targetRotateX = 0;
targetRotateY = 0;
});
// Update time function
function updateTime() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
// Smooth sweeping seconds (continuous motion)
const totalSeconds = seconds + milliseconds / 1000;
const secondAngle = totalSeconds * 6; // 360/60 = 6 degrees per second
// Minute hand moves smoothly with seconds
const totalMinutes = minutes + totalSeconds / 60;
const minuteAngle = totalMinutes * 6; // 360/60 = 6 degrees per minute
// Hour hand moves smoothly with minutes
const totalHours = (hours % 12) + totalMinutes / 60;
const hourAngle = totalHours * 30; // 360/12 = 30 degrees per hour
// Apply rotations (SVG transform origin is center)
secondHandGroup.style.transform = `rotate(${secondAngle}deg)`;
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
minuteHandShadow.style.transform = `rotate(${minuteAngle}deg)`;
minuteHandTip.style.transform = `rotate(${minuteAngle}deg)`;
hourHand.style.transform = `rotate(${hourAngle}deg)`;
hourHandShadow.style.transform = `rotate(${hourAngle}deg)`;
hourHandTip.style.transform = `rotate(${hourAngle}deg)`;
// Update date
const date = now.getDate();
dateText.textContent = date.toString().padStart(2, '0');
requestAnimationFrame(updateTime);
}
// Initialize
animateParallax();
updateTime();
// Reduce motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReducedMotion.matches) {
watchContainer.removeEventListener('mousemove', null);
watch.style.transform = 'none';
}
})();
</script>
</body>
</html>

