Run details
- Model
- fireworks/ember-1
- Route
- OpenRouter API, one user message
- Served by
- Fireworks
- Effort
- max, OpenRouter's default for this model
- Limits
- 60 min · 40,000 output tokens (our $0.60 limit per run at $15/M)
- Date
- 23 Oct 2026
- Time
- 5 min 11 s
- Size
- 13 kB
- Tokens
- 164 in, 23,775 out (18,746 of them thinking)
- List price
- $0.36 at today's price ($3 in / $15 out per M)
- Paid
- $0.36
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 268 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meridian Genève — Automatic Chronometer</title>
<style>
html,body{height:100%;margin:0;}
body{
display:flex;align-items:center;justify-content:center;overflow:hidden;
background:radial-gradient(140vmax 90vmax at 50% 18%, #454e5e 0%, #23272f 42%, #0a0c10 100%);
}
svg{
height:min(96vh,160vw);width:auto;display:block;
filter:drop-shadow(0 34px 44px rgba(0,0,0,.65)) drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
</style>
</head>
<body>
<svg id="watch" viewBox="0 0 600 1000" role="img" aria-label="Luxury mechanical wristwatch showing the current local time">
<defs>
<!-- polished steel -->
<linearGradient id="steel" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#f5f6f8"/><stop offset=".35" stop-color="#b7bac2"/>
<stop offset=".55" stop-color="#eaecee"/><stop offset=".78" stop-color="#7d818a"/>
<stop offset="1" stop-color="#c9ccd2"/>
</linearGradient>
<!-- polished bezel -->
<linearGradient id="bezel" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff"/><stop offset=".25" stop-color="#ced1d8"/>
<stop offset=".5" stop-color="#898d96"/><stop offset=".62" stop-color="#e0e2e7"/>
<stop offset=".82" stop-color="#73777e"/><stop offset="1" stop-color="#babdc3"/>
</linearGradient>
<linearGradient id="idx" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#f7f8fa"/><stop offset=".5" stop-color="#a6aab3"/>
<stop offset="1" stop-color="#e9ebef"/>
</linearGradient>
<radialGradient id="capG" cx=".4" cy=".35" r=".8">
<stop offset="0" stop-color="#f3f4f6"/><stop offset="1" stop-color="#9ba0a9"/>
</radialGradient>
<!-- deep blue sunburst dial -->
<radialGradient id="dial" cx=".5" cy=".42" r=".78">
<stop offset="0" stop-color="#3a5c92"/><stop offset=".55" stop-color="#1b3050"/>
<stop offset="1" stop-color="#091525"/>
</radialGradient>
<radialGradient id="dialLight" cx=".38" cy=".32" r=".75">
<stop offset="0" stop-color="#ffffff" stop-opacity=".17"/>
<stop offset=".6" stop-color="#ffffff" stop-opacity=".03"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="rehautG" cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="#2b323d"/><stop offset=".82" stop-color="#1a2029"/>
<stop offset="1" stop-color="#0d1117"/>
</radialGradient>
<linearGradient id="leather" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#5b4027"/><stop offset=".45" stop-color="#382716"/>
<stop offset="1" stop-color="#1e140b"/>
</linearGradient>
<linearGradient id="glareG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity=".15"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<radialGradient id="spotG" cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="#ffffff" stop-opacity=".2"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<linearGradient id="dshade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#000" stop-opacity=".3"/>
<stop offset="1" stop-color="#000" stop-opacity="0"/>
</linearGradient>
<filter id="hs" x="-40%" y="-40%" width="180%" height="180%">
<feDropShadow dx="1.5" dy="4" stdDeviation="3" flood-color="#000" flood-opacity=".42"/>
</filter>
<filter id="lumeGlow" x="-80%" y="-80%" width="260%" height="260%">
<feGaussianBlur stdDeviation="1.6" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="caseShadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="0" dy="10" stdDeviation="12" flood-color="#000" flood-opacity=".55"/>
</filter>
<filter id="grain" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" result="n"/>
<feColorMatrix in="n" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0.8 0.8 0 0"/>
</filter>
<clipPath id="dialClip"><circle cx="300" cy="500" r="176"/></clipPath>
<clipPath id="crystal"><circle cx="300" cy="500" r="206"/></clipPath>
<clipPath id="strapClip">
<path d="M215 6 Q214 2 224 2 L376 2 Q386 2 385 6 C392 110 400 210 402 330 L198 330 C200 210 208 110 215 6 Z"/>
<path d="M198 670 C200 790 208 890 215 994 Q214 998 224 998 L376 998 Q386 998 385 994 C392 890 400 790 402 670 Z"/>
</clipPath>
</defs>
<!-- ===== leather strap ===== -->
<g fill="url(#leather)" stroke="rgba(0,0,0,.55)" stroke-width="1.5">
<path d="M215 6 Q214 2 224 2 L376 2 Q386 2 385 6 C392 110 400 210 402 330 L198 330 C200 210 208 110 215 6 Z"/>
<path d="M198 670 C200 790 208 890 215 994 Q214 998 224 998 L376 998 Q386 998 385 994 C392 890 400 790 402 670 Z"/>
</g>
<rect x="150" y="0" width="300" height="1000" filter="url(#grain)" opacity=".22" clip-path="url(#strapClip)"/>
<g fill="none" stroke="#c9b183" stroke-width="2" stroke-dasharray="6 5" opacity=".75">
<path d="M226 10 C232 110 240 210 242 326"/>
<path d="M374 10 C368 110 360 210 358 326"/>
<path d="M242 674 C240 790 232 890 226 990"/>
<path d="M358 674 C360 790 368 890 374 990"/>
</g>
<!-- ===== lugs ===== -->
<g fill="url(#steel)" stroke="#4d525a" stroke-width=".8">
<g transform="rotate(-32 300 500)"><rect x="285" y="238" width="30" height="72" rx="10"/></g>
<g transform="rotate(32 300 500)"><rect x="285" y="238" width="30" height="72" rx="10"/></g>
<g transform="rotate(148 300 500)"><rect x="285" y="238" width="30" height="72" rx="10"/></g>
<g transform="rotate(212 300 500)"><rect x="285" y="238" width="30" height="72" rx="10"/></g>
</g>
<!-- ===== case / bezel / crown ===== -->
<circle cx="300" cy="500" r="212" fill="url(#steel)" filter="url(#caseShadow)"/>
<circle cx="300" cy="500" r="211" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="1"/>
<circle cx="300" cy="500" r="206" fill="url(#bezel)"/>
<circle cx="300" cy="500" r="205" fill="none" stroke="rgba(255,255,255,.55)" stroke-width="1.2"/>
<path d="M101 500 A199 199 0 0 1 399.5 327.6" fill="none" stroke="#fff" stroke-opacity=".3" stroke-width="3" stroke-linecap="round"/>
<path d="M499 500 A199 199 0 0 1 399.5 672.4" fill="none" stroke="#fff" stroke-opacity=".12" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="300" cy="500" r="188.5" fill="none" stroke="rgba(0,0,0,.55)" stroke-width="2.5"/>
<g>
<rect x="506" y="493" width="14" height="14" rx="2" fill="#6f747d"/>
<rect x="517" y="482" width="24" height="36" rx="8" fill="url(#steel)" stroke="#54595f" stroke-width="1"/>
<g id="knurl"></g>
<line x1="519.5" y1="486" x2="519.5" y2="514" stroke="rgba(255,255,255,.55)" stroke-width="1.5"/>
</g>
<!-- ===== rehaut + dial ===== -->
<circle cx="300" cy="500" r="188" fill="url(#rehautG)"/>
<g id="ticks"></g>
<circle cx="300" cy="500" r="176" fill="url(#dial)"/>
<g clip-path="url(#dialClip)">
<g id="sunburst"></g>
<circle cx="300" cy="500" r="176" fill="url(#dialLight)"/>
</g>
<circle cx="300" cy="500" r="177" fill="none" stroke="#000" stroke-opacity=".5" stroke-width="2"/>
<!-- ===== indices, logo, text ===== -->
<g id="indices"></g>
<g id="logo"></g>
<text x="300" y="430" text-anchor="middle" fill="#e9edf3"
style="font-family:Georgia,'Times New Roman',serif;font-size:25px;letter-spacing:5px">MERIDIAN</text>
<text x="300" y="449" text-anchor="middle" fill="#aab3c0"
style="font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:6px">GENÈVE</text>
<text x="300" y="566" text-anchor="middle" fill="#c6cdd8"
style="font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:3.5px">AUTOMATIC</text>
<text x="300" y="583" text-anchor="middle" fill="#98a1af"
style="font-family:'Helvetica Neue',Arial,sans-serif;font-size:9px;letter-spacing:3px">CHRONOMETER</text>
<text x="300" y="657" text-anchor="middle" fill="#878f9d"
style="font-family:'Helvetica Neue',Arial,sans-serif;font-size:8px;letter-spacing:2.5px">SWISS MADE</text>
<!-- ===== date window at 3 ===== -->
<g>
<rect x="420.5" y="486.5" width="44" height="32" rx="4.5" fill="#000" fill-opacity=".4"/>
<rect x="419" y="484" width="44" height="32" rx="4.5" fill="#0e1218" stroke="#cfd3da" stroke-width="2"/>
<rect x="422" y="487" width="38" height="26" rx="2.5" fill="#f4f5f7"/>
<rect x="422" y="487" width="38" height="6" fill="url(#dshade)"/>
<text id="dateNum" x="441" y="506.5" text-anchor="middle" fill="#14171c"
style="font-family:'Helvetica Neue',Arial,sans-serif;font-size:19px;font-weight:700">1</text>
</g>
<!-- ===== hands ===== -->
<g id="hourHand" filter="url(#hs)">
<path d="M300 516 L293.5 509 L298.7 403 L300 397.5 Z" fill="#f7f8fa" stroke="#3f444c" stroke-width=".5"/>
<path d="M300 516 L306.5 509 L301.3 403 L300 397.5 Z" fill="#9aa0a9" stroke="#3f444c" stroke-width=".5"/>
<path d="M300 462 L297.7 456 L299.3 414 L300.7 414 L302.3 456 Z" fill="#e7f2e2" filter="url(#lumeGlow)"/>
</g>
<g id="minHand" filter="url(#hs)">
<path d="M300 516 L295 509 L299.1 355 L300 349.5 Z" fill="#f7f8fa" stroke="#3f444c" stroke-width=".5"/>
<path d="M300 516 L305 509 L300.9 355 L300 349.5 Z" fill="#9aa0a9" stroke="#3f444c" stroke-width=".5"/>
<path d="M300 470 L297.9 465 L299.4 396 L300.6 396 L302.1 465 Z" fill="#e7f2e2" filter="url(#lumeGlow)"/>
</g>
<g id="secHand" filter="url(#hs)">
<rect x="299.1" y="334" width="1.8" height="202" fill="#eef0f3"/>
<rect x="300" y="334" width="0.9" height="202" fill="#b4b9c1"/>
<circle cx="300" cy="527" r="8" fill="#eef0f3" stroke="#7a7f88" stroke-width="1"/>
<circle cx="300" cy="527" r="3.2" fill="#121a26"/>
</g>
<circle cx="300" cy="500" r="7" fill="url(#capG)" stroke="#4b5057" stroke-width=".8"/>
<circle cx="300" cy="500" r="2.2" fill="#22262d"/>
<!-- ===== crystal glare ===== -->
<g clip-path="url(#crystal)">
<ellipse cx="245" cy="395" rx="170" ry="95" transform="rotate(-28 245 395)" fill="url(#glareG)"/>
<ellipse cx="380" cy="620" rx="120" ry="50" transform="rotate(-28 380 620)" fill="url(#glareG)" opacity=".4"/>
<circle cx="228" cy="358" r="95" fill="url(#spotG)"/>
</g>
</svg>
<script>
(function(){
const NS='http://www.w3.org/2000/svg';
const CX=300, CY=500;
const G=id=>document.getElementById(id);
function E(t,a,p){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);p.appendChild(e);return e;}
// sunburst brushing: 180 fine wedges
const sun=G('sunburst'), R=176;
for(let i=0;i<180;i++){
const a=i*2*Math.PI/180, b=(i+1.7)*2*Math.PI/180;
E('path',{d:`M${CX} ${CY} L${(CX+R*Math.cos(a)).toFixed(1)} ${(CY+R*Math.sin(a)).toFixed(1)} L${(CX+R*Math.cos(b)).toFixed(1)} ${(CY+R*Math.sin(b)).toFixed(1)} Z`,
fill:'#ffffff', opacity:(i%2?0.055:0.015)}, sun);
}
// minute track on the rehaut
const tk=G('ticks');
for(let i=0;i<60;i++){
const a=i*6*Math.PI/180, hr=i%5===0, r1=hr?179:182.5, r2=187.5;
E('line',{x1:(CX+r1*Math.cos(a)).toFixed(2), y1:(CY+r1*Math.sin(a)).toFixed(2),
x2:(CX+r2*Math.cos(a)).toFixed(2), y2:(CY+r2*Math.sin(a)).toFixed(2),
stroke:hr?'#e2e6ee':'#7c8492', 'stroke-width':hr?2.6:1.2, 'stroke-linecap':'round'}, tk);
}
// applied baton indices (double baton at 12, date replaces 3)
const idx=G('indices');
for(let h=0;h<12;h++){
if(h===3) continue;
const g=E('g',{transform:`rotate(${h*30} ${CX} ${CY})`}, idx);
const bs = h===0 ? [{x:CX-10.5,w:8},{x:CX+2.5,w:8}] : [{x:CX-4.5,w:9}];
bs.forEach(b=>{
E('rect',{x:b.x+1.4, y:CY-155.6, width:b.w, height:30, rx:1.5, fill:'#000', 'fill-opacity':.38}, g);
E('rect',{x:b.x, y:CY-158, width:b.w, height:30, rx:1.5, fill:'url(#idx)', stroke:'#3c414a', 'stroke-width':.5}, g);
const lw=b.w>=9?4:3;
E('rect',{x:b.x+(b.w-lw)/2, y:CY-150, width:lw, height:18, rx:1, fill:'#e7f2e2', filter:'url(#lumeGlow)'}, g);
});
}
// star logo
(function(){
let d='';
for(let i=0;i<10;i++){
const r=i%2?4:9.5, a=-Math.PI/2+i*Math.PI/5;
d+=(i?'L':'M')+(CX+r*Math.cos(a)).toFixed(1)+' '+(388+r*Math.sin(a)).toFixed(1);
}
E('path',{d:d+'Z', fill:'url(#steel)', stroke:'#4e535b', 'stroke-width':.6}, G('logo'));
})();
// crown knurling
const kn=G('knurl');
for(let x=523;x<=536;x+=3.2)
E('line',{x1:x, y1:485, x2:x, y2:515, stroke:'rgba(0,0,0,.32)', 'stroke-width':1.6}, kn);
// timekeeping — hi-beat sweep: 10 micro-steps per second (36,000 vph)
const hour=G('hourHand'), min=G('minHand'), sec=G('secHand'), date=G('dateNum');
const RM=matchMedia('(prefers-reduced-motion: reduce)').matches;
const STEP=RM?1000:100;
let lastDay=-1;
function tick(){
const n=new Date();
const s=n.getSeconds()+Math.floor(n.getMilliseconds()/STEP)*(STEP/1000);
const m=n.getMinutes()+s/60;
const h=(n.getHours()%12)+m/60;
sec .setAttribute('transform',`rotate(${s*6} ${CX} ${CY})`);
min .setAttribute('transform',`rotate(${m*6} ${CX} ${CY})`);
hour.setAttribute('transform',`rotate(${h*30} ${CX} ${CY})`);
const d=n.getDate();
if(d!==lastDay){date.textContent=d; lastDay=d;}
requestAnimationFrame(tick);
}
tick();
})();
</script>
</body>
</html>
