hypeorcode
Network offOpen alone (new tab)

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)

Raw files: output · meta.json

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>

Compare with

Nemotron 3 Ultra: other attempts