Claude Sonnet 5.5Anthropic

Run details

Model

claude-sonnet-5-5

Route

Claude Code CLI

Reasoning

provider default

Date

2 Oct 2026

Time

42 s

Size

10 kB

Tokens

4 in, 6,512 out

List price

$0.065 ($2 in / $10 out per M)

Paid

Not billed per run (CLI plan)

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). Save it as index.html in the current directory, then stop. Do not ask questions.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chronomètre</title>
<style>
  html,body{margin:0;height:100%;background:radial-gradient(ellipse at 50% 40%,#23262b 0%,#0b0c0e 75%);overflow:hidden}
  body{display:flex;align-items:center;justify-content:center}
  canvas{width:min(94vmin,900px);height:min(94vmin,900px);display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv = document.getElementById('c'), ctx = cv.getContext('2d');
const S = 1000, C = S / 2;
function fit(){
  const d = Math.min(window.devicePixelRatio || 1, 2), px = cv.clientWidth * d;
  cv.width = cv.height = Math.round(px);
}
addEventListener('resize', fit); fit();

const SERIF = 'Georgia, "Times New Roman", serif';
const gold = (x0,y0,x1,y1) => {
  const g = ctx.createLinearGradient(x0,y0,x1,y1);
  g.addColorStop(0,'#fff3c4'); g.addColorStop(.25,'#e6c26a');
  g.addColorStop(.5,'#9a741f'); g.addColorStop(.75,'#f0d58a'); g.addColorStop(1,'#7a5712');
  return g;
};
const steel = (x0,y0,x1,y1) => {
  const g = ctx.createLinearGradient(x0,y0,x1,y1);
  g.addColorStop(0,'#fafbfc'); g.addColorStop(.3,'#9aa0a8'); g.addColorStop(.5,'#e8eaed');
  g.addColorStop(.7,'#6c727a'); g.addColorStop(1,'#d6d9de');
  return g;
};

// Pre-rendered static layer
let staticLayer = null;
function buildStatic(){
  const o = document.createElement('canvas'); o.width = o.height = S;
  const x = o.getContext('2d');
  const saved = ctx;
  return {o, x};
}

function drawStatic(g){
  // lugs / strap stubs
  g.save(); g.translate(C,C);
  for (const s of [-1,1]){
    g.fillStyle = '#0d0d0f';
    g.beginPath(); g.moveTo(-150,s*380); g.lineTo(150,s*380); g.lineTo(125,s*500); g.lineTo(-125,s*500); g.closePath(); g.fill();
    g.strokeStyle='#2a2a2e'; g.lineWidth=2; g.setLineDash([8,8]);
    g.beginPath(); g.moveTo(-112,s*385); g.lineTo(-100,s*495); g.moveTo(112,s*385); g.lineTo(100,s*495); g.stroke(); g.setLineDash([]);
  }
  g.restore();

  // crown
  let cg = g.createLinearGradient(0,C-45,0,C+45);
  cg.addColorStop(0,'#7a5712'); cg.addColorStop(.3,'#fff0b8'); cg.addColorStop(.6,'#c79a35'); cg.addColorStop(1,'#6a4a0e');
  g.fillStyle = cg;
  g.beginPath(); g.roundRect(C+440,C-42,50,84,8); g.fill();
  g.strokeStyle='rgba(0,0,0,.45)'; g.lineWidth=3;
  for(let i=-34;i<=34;i+=9){g.beginPath();g.moveTo(C+446,C+i);g.lineTo(C+486,C+i);g.stroke();}

  // case outer
  g.save(); g.shadowColor='rgba(0,0,0,.8)'; g.shadowBlur=50; g.shadowOffsetY=20;
  g.fillStyle = gold(0,0,S,S);
  g.beginPath(); g.arc(C,C,458,0,7); g.fill(); g.restore();
  // case brushed ring highlights
  g.fillStyle = gold(S,0,0,S);
  g.beginPath(); g.arc(C,C,446,0,7); g.fill();
  g.fillStyle = gold(0,0,S,S);
  g.beginPath(); g.arc(C,C,430,0,7); g.fill();
  // twisted conic sheen
  if (g.createConicGradient){
    const cg2 = g.createConicGradient(0.6,C,C);
    [[0,.0],[.12,.35],[.25,0],[.4,.4],[.5,0],[.62,.35],[.75,0],[.88,.4],[1,0]].forEach(([p,a])=>cg2.addColorStop(p,`rgba(255,250,220,${a})`));
    g.fillStyle=cg2; g.beginPath(); g.arc(C,C,446,0,7); g.arc(C,C,396,0,7,true); g.fill();
  }

  // bezel inner
  g.fillStyle='#120e05'; g.beginPath(); g.arc(C,C,396,0,7); g.fill();
  g.fillStyle = gold(S,0,0,S); g.beginPath(); g.arc(C,C,392,0,7); g.fill();
  g.fillStyle='#0a0a0c'; g.beginPath(); g.arc(C,C,382,0,7); g.fill();

  // dial base: deep midnight blue sunburst
  const dg = g.createRadialGradient(C-80,C-120,20,C,C,380);
  dg.addColorStop(0,'#2a3d63'); dg.addColorStop(.6,'#142139'); dg.addColorStop(1,'#070c18');
  g.fillStyle = dg; g.beginPath(); g.arc(C,C,378,0,7); g.fill();
  g.save(); g.beginPath(); g.arc(C,C,378,0,7); g.clip();
  if (g.createConicGradient){
    const sb = g.createConicGradient(0,C,C);
    for(let i=0;i<=48;i++) sb.addColorStop(i/48,i%2?'rgba(255,255,255,.07)':'rgba(0,0,0,.18)');
    g.fillStyle=sb; g.fillRect(0,0,S,S);
  }
  // fine guilloché concentric grooves
  g.strokeStyle='rgba(255,255,255,.035)'; g.lineWidth=1;
  for(let r=20;r<330;r+=4){g.beginPath();g.arc(C,C,r,0,7);g.stroke();}
  g.restore();

  // chapter ring
  g.strokeStyle='rgba(230,194,106,.55)'; g.lineWidth=2;
  g.beginPath(); g.arc(C,C,368,0,7); g.stroke();
  g.beginPath(); g.arc(C,C,318,0,7); g.stroke();

  // minute ticks
  for(let i=0;i<60;i++){
    const a = i*Math.PI/30, five = i%5===0;
    g.save(); g.translate(C,C); g.rotate(a);
    if(!five){ g.fillStyle='#e9e3d0'; g.fillRect(-1.5,-366,3,14); }
    else{ g.fillStyle='#c9a64f'; g.fillRect(-1,-366,2,14); }
    g.restore();
  }
  // hour indices (applied gold batons with lume)
  for(let i=1;i<=12;i++){
    const a = i*Math.PI/6;
    g.save(); g.translate(C,C); g.rotate(a);
    if(i===3){ g.restore(); continue; } // date window
    const w = (i%3===0)?20:15, y0=-350, y1=(i%3===0)?-262:-282;
    g.shadowColor='rgba(0,0,0,.7)'; g.shadowBlur=8; g.shadowOffsetX=3; g.shadowOffsetY=4;
    g.fillStyle = gold(-w,0,w,0);
    g.beginPath(); g.rect(-w/2,y0,w,y1-y0 ); g.fill();
    g.shadowColor='transparent';
    g.fillStyle='#e9f5dc'; g.fillRect(-w/2+4,y0+5,w-8,(y1-y0)-10);
    g.fillStyle='rgba(120,200,140,.35)'; g.fillRect(-w/2+4,y0+5,w-8,(y1-y0)-10);
    g.fillStyle='#d9ecc8'; g.fillRect(-w/2+5,y0+6,w-10,(y1-y0)-12);
    g.restore();
  }
  // 3 o'clock: baton pair near window
  // Logo
  g.textAlign='center'; g.textBaseline='middle';
  g.fillStyle = gold(C-100,C-200,C+100,C-120);
  g.font = `600 42px ${SERIF}`;
  g.save(); g.shadowColor='rgba(0,0,0,.8)'; g.shadowBlur=4; g.shadowOffsetY=2;
  if ('letterSpacing' in g) g.letterSpacing='12px';
  g.fillText('AURELIUS', C+6, C-170);
  g.restore();
  if ('letterSpacing' in g) g.letterSpacing='4px';
  g.fillStyle='#cfd3da'; g.font=`italic 22px ${SERIF}`;
  g.fillText('Genève', C+2, C-130);
  g.font=`15px ${SERIF}`; g.fillStyle='#9fa7b6';
  if ('letterSpacing' in g) g.letterSpacing='3px';
  g.fillText('AUTOMATIC · OFFICIALLY CERTIFIED CHRONOMETER', C+1, C+190);
  g.fillText('SWISS MADE', C+1, C+330 - 118);
  if ('letterSpacing' in g) g.letterSpacing='0px';

  // date window (at 3)
  g.save(); g.translate(C+250,C);
  g.fillStyle = gold(-60,-40,60,40);
  g.beginPath(); g.roundRect(-62,-40,124,80,6); g.fill();
  g.fillStyle='#050506'; g.beginPath(); g.roundRect(-55,-33,110,66,3); g.fill();
  g.restore();
}

function drawWindow(g,now){
  g.save(); g.translate(C+250,C);
  g.beginPath(); g.roundRect(-55,-33,110,66,3); g.clip();
  const wg = g.createLinearGradient(0,-33,0,33);
  wg.addColorStop(0,'#e9e6dc'); wg.addColorStop(.5,'#fbf9f1'); wg.addColorStop(1,'#d6d2c4');
  g.fillStyle=wg; g.fillRect(-55,-33,110,66);
  g.fillStyle='#14161a'; g.textAlign='center'; g.textBaseline='middle';
  g.font=`600 46px ${SERIF}`;
  g.fillText(String(now.getDate()),0,3);
  // inner shadow
  const sh = g.createLinearGradient(0,-33,0,33);
  sh.addColorStop(0,'rgba(0,0,0,.55)'); sh.addColorStop(.25,'rgba(0,0,0,0)');
  sh.addColorStop(.8,'rgba(0,0,0,0)'); sh.addColorStop(1,'rgba(0,0,0,.25)');
  g.fillStyle=sh; g.fillRect(-55,-33,110,66);
  g.restore();
  // day label
  g.save(); g.translate(C,C);
  g.textAlign='center'; g.textBaseline='middle';
  g.fillStyle='#c9a64f'; g.font=`16px ${SERIF}`;
  if ('letterSpacing' in g) g.letterSpacing='4px';
  g.fillText(['SUN','MON','TUE','WED','THU','FRI','SAT'][now.getDay()], 250, -58);
  if ('letterSpacing' in g) g.letterSpacing='0px';
  g.restore();
}

function hand(g,ang,len,tail,w,fill,lume){
  g.save(); g.translate(C,C); g.rotate(ang);
  g.shadowColor='rgba(0,0,0,.55)'; g.shadowBlur=14; g.shadowOffsetX=8; g.shadowOffsetY=12;
  // dauphine hand
  g.fillStyle=fill;
  g.beginPath(); g.moveTo(0,tail); g.lineTo(-w,0); g.lineTo(0,-len); g.lineTo(w,0); g.closePath(); g.fill();
  g.shadowColor='transparent';
  // facet: half darker
  g.fillStyle='rgba(0,0,0,.28)';
  g.beginPath(); g.moveTo(0,tail); g.lineTo(w,0); g.lineTo(0,-len); g.closePath(); g.fill();
  // lume
  g.fillStyle='#dff0cf';
  g.beginPath(); g.moveTo(0,-len*.25); g.lineTo(-w*.4,-len*.25-w*.8); g.lineTo(0,-len*.88); g.lineTo(w*.4,-len*.25-w*.8); g.closePath();
  g.fill();
  g.strokeStyle='rgba(0,0,0,.5)'; g.lineWidth=1.5; g.stroke();
  g.restore();
}

function drawGlass(g){
  g.save(); g.beginPath(); g.arc(C,C,380,0,7); g.clip();
  const r = g.createLinearGradient(150,100,600,600);
  r.addColorStop(0,'rgba(255,255,255,.17)'); r.addColorStop(.35,'rgba(255,255,255,.04)'); r.addColorStop(.36,'rgba(255,255,255,0)');
  g.fillStyle=r;
  g.beginPath(); g.ellipse(C-40,C-190,300,170,-.5,0,7); g.fill();
  const v = g.createRadialGradient(C,C,250,C,C,382);
  v.addColorStop(0,'rgba(0,0,0,0)'); v.addColorStop(1,'rgba(0,0,0,.45)');
  g.fillStyle=v; g.fillRect(0,0,S,S);
  g.restore();
  g.strokeStyle='rgba(255,255,255,.2)'; g.lineWidth=2;
  g.beginPath(); g.arc(C,C,381,Math.PI*1.05,Math.PI*1.45); g.stroke();
}

// build static once
const off = document.createElement('canvas'); off.width = off.height = S;
(function(){ const real = off.getContext('2d'); drawStatic(real); })();

function frame(){
  const d = cv.width / S;
  ctx.setTransform(d,0,0,d,0,0);
  ctx.clearRect(0,0,S,S);
  ctx.drawImage(off,0,0);

  const now = new Date();
  const ms = now.getMilliseconds();
  const sec = now.getSeconds() + ms/1000;
  const min = now.getMinutes() + sec/60;
  const hr = (now.getHours()%12) + min/60;

  drawWindow(ctx,now);

  const TAU = Math.PI*2;
  hand(ctx, hr/12*TAU, 215, 40, 19, steel(-20,0,20,0));
  hand(ctx, min/60*TAU, 320, 50, 14, steel(-15,0,15,0));

  // seconds hand (smooth sweep)
  ctx.save(); ctx.translate(C,C); ctx.rotate(sec/60*TAU);
  ctx.shadowColor='rgba(0,0,0,.5)'; ctx.shadowBlur=10; ctx.shadowOffsetX=7; ctx.shadowOffsetY=10;
  ctx.fillStyle='#d9342b';
  ctx.fillRect(-2,-345,4,435);
  ctx.beginPath(); ctx.rect(-5,40,10,60); ctx.fill();
  ctx.shadowColor='transparent';
  ctx.beginPath(); ctx.arc(0,-250,9,0,7); ctx.fill();
  ctx.fillStyle='#0b0c10'; ctx.beginPath(); ctx.arc(0,-250,4,0,7); ctx.fill();
  ctx.restore();

  // center cap
  ctx.save(); ctx.translate(C,C);
  ctx.fillStyle=gold(-16,-16,16,16); ctx.beginPath(); ctx.arc(0,0,16,0,7); ctx.fill();
  ctx.fillStyle='#d9342b'; ctx.beginPath(); ctx.arc(0,0,7,0,7); ctx.fill();
  ctx.fillStyle='#111'; ctx.beginPath(); ctx.arc(0,0,2.5,0,7); ctx.fill();
  ctx.restore();

  drawGlass(ctx);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>
</body>
</html>