Run details
- Model
- elorian/glimpse
- Route
- OpenRouter API, one user message
- Served by
- Together
- Reasoning
- provider default, 18,931 reasoning tokens
- Limits
- 60 min · 200,000 output tokens ($0.60 at $3/M)
- Date
- 22 Oct 2026
- Time
- 1 min 46 s
- Size
- 13 kB
- Tokens
- 281 in, 25,040 out
- List price
- $0.075 ($0.6 in / $3 out per M)
- Paid
- $0.075
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 296 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Elorian · Automatic Chronometer</title>
<style>
:root{color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
display:grid;place-items:center;
background:radial-gradient(1100px 700px at 50% 30%, #262a33 0%, #14161c 45%, #0a0b0e 100%);
font-family:Georgia,'Times New Roman',serif;
overflow:hidden;
}
.stage{width:min(94vmin,660px);position:relative}
svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
#hands>g{filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
#glint{animation:sheen 7s ease-in-out infinite}
#glint2{animation:sheen 7s ease-in-out infinite;animation-delay:3.5s}
@keyframes sheen{0%,100%{opacity:.06}50%{opacity:.13}}
@media (prefers-reduced-motion:reduce){#glint,#glint2{animation:none}}
#caption{
margin-top:22px;text-align:center;color:#9a8a5f;
font-size:12px;letter-spacing:3.5px;text-transform:uppercase;
}
#caption b{color:#d8b46a;font-weight:normal}
</style>
</head>
<body>
<main class="stage">
<svg id="watch" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mechanical wristwatch showing the current local time">
<defs>
<linearGradient id="goldLinear" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f8e7b6"/><stop offset=".45" stop-color="#dcb75f"/>
<stop offset=".55" stop-color="#b8892f"/><stop offset="1" stop-color="#f3dda2"/>
</linearGradient>
<radialGradient id="goldCase" cx="35%" cy="28%" r="80%">
<stop offset="0" stop-color="#fff3cf"/><stop offset=".28" stop-color="#e8c877"/>
<stop offset=".55" stop-color="#a97f2e"/><stop offset=".82" stop-color="#6f4f16"/>
<stop offset="1" stop-color="#cfa750"/>
</radialGradient>
<radialGradient id="dialRadial" cx="42%" cy="36%" r="78%">
<stop offset="0" stop-color="#274674"/><stop offset=".45" stop-color="#152840"/>
<stop offset=".8" stop-color="#0a1322"/><stop offset="1" stop-color="#060b14"/>
</radialGradient>
<linearGradient id="leather" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#20110a"/><stop offset=".5" stop-color="#43291a"/>
<stop offset="1" stop-color="#1a0e08"/>
</linearGradient>
<radialGradient id="glassRadial" cx="50%" cy="44%" r="52%">
<stop offset="0" stop-color="rgba(255,255,255,0)"/>
<stop offset=".72" stop-color="rgba(255,255,255,0)"/>
<stop offset=".90" stop-color="rgba(255,255,255,.07)"/>
<stop offset=".97" stop-color="rgba(255,255,255,.15)"/>
<stop offset="1" stop-color="rgba(255,255,255,0)"/>
</radialGradient>
<filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="0" dy="16" stdDeviation="22" flood-color="#000" flood-opacity=".55"/>
</filter>
<filter id="blurL"><feGaussianBlur stdDeviation="16"/></filter>
<clipPath id="dialClip"><circle cx="400" cy="400" r="288"/></clipPath>
<clipPath id="apertureClip"><circle cx="250" cy="400" r="56"/></clipPath>
</defs>
<!-- leather strap -->
<g id="strap">
<path d="M356 14 L444 14 L428 150 L372 150 Z" fill="url(#leather)"/>
<path d="M372 650 L428 650 L444 786 L356 786 Z" fill="url(#leather)"/>
<path d="M364 22 L378 142" stroke="#c9a06a" stroke-width="1.4" stroke-dasharray="7 5" opacity=".45" fill="none"/>
<path d="M436 22 L422 142" stroke="#c9a06a" stroke-width="1.4" stroke-dasharray="7 5" opacity=".45" fill="none"/>
<path d="M378 658 L364 778" stroke="#c9a06a" stroke-width="1.4" stroke-dasharray="7 5" opacity=".45" fill="none"/>
<path d="M422 658 L436 778" stroke="#c9a06a" stroke-width="1.4" stroke-dasharray="7 5" opacity=".45" fill="none"/>
</g>
<!-- case -->
<g filter="url(#soft)">
<circle cx="400" cy="400" r="352" fill="url(#goldCase)"/>
</g>
<circle cx="400" cy="400" r="346" fill="none" stroke="#ffe9ad" stroke-opacity=".28" stroke-width="1.5"/>
<g id="fluting"></g>
<circle cx="400" cy="400" r="303" fill="none" stroke="#241804" stroke-width="4"/>
<circle cx="400" cy="400" r="299" fill="none" stroke="#ffe9ad" stroke-opacity=".18" stroke-width="1"/>
<!-- dial -->
<circle cx="400" cy="400" r="288" fill="url(#dialRadial)"/>
<g id="sunburst" clip-path="url(#dialClip)"></g>
<g id="ticks"></g>
<g id="markers"></g>
<g font-family="Georgia,'Times New Roman',serif" text-anchor="middle">
<text x="400" y="294" font-size="30" fill="#dcb75f" style="letter-spacing:7px">ELORIAN</text>
<text x="400" y="320" font-size="11" fill="#8f7a4f" style="letter-spacing:4.5px">AUTOMATIC</text>
<text x="400" y="480" font-size="11" fill="#8f7a4f" style="letter-spacing:4.5px">CHRONOMÈTRE</text>
<text x="400" y="508" font-size="9" fill="#6f5d3a" style="letter-spacing:3px">SWISS MADE</text>
</g>
<!-- open-heart aperture: gear train + balance -->
<g id="openHeart">
<circle cx="250" cy="400" r="58" fill="#0a0d12"/>
<g clip-path="url(#apertureClip)">
<circle cx="250" cy="400" r="56" fill="none" stroke="#161b24" stroke-width="10"/>
<g id="gearA"></g><g id="gearB"></g><g id="gearC"></g>
<g id="balance"></g>
</g>
<circle cx="250" cy="400" r="58" fill="none" stroke="url(#goldLinear)" stroke-width="7"/>
<circle cx="250" cy="400" r="61.5" fill="none" stroke="#241804" stroke-width="1.5"/>
<circle cx="250" cy="400" r="54.5" fill="none" stroke="#000" stroke-opacity=".35" stroke-width="2"/>
</g>
<!-- date aperture -->
<g id="dateWindow">
<rect x="516" y="366" width="68" height="68" rx="8" fill="url(#goldLinear)" stroke="#241804" stroke-width="1.5"/>
<rect x="522" y="372" width="56" height="56" rx="4" fill="#f2ead6"/>
<rect x="522" y="372" width="56" height="56" rx="4" fill="none" stroke="#b39a5e" stroke-width="1"/>
<text id="dateText" x="550" y="412" text-anchor="middle" font-family="'Helvetica Neue',Helvetica,Arial,sans-serif" font-size="38" font-weight="600" fill="#1c1c1c">--</text>
</g>
<!-- hands -->
<g id="hands">
<g id="hourHand">
<polygon points="400,232 409,264 404.5,398 395.5,398 391,264" fill="url(#goldLinear)" stroke="#3d2c0e" stroke-width="0.8" stroke-linejoin="round"/>
<polygon points="400,246 403.4,266 402,390 398,390 396.6,266" fill="#e9f2d8" opacity="0.9"/>
</g>
<g id="minuteHand">
<polygon points="400,150 407,182 403.5,398 396.5,398 393,182" fill="url(#goldLinear)" stroke="#3d2c0e" stroke-width="0.8" stroke-linejoin="round"/>
<polygon points="400,164 402.8,188 401.4,390 398.6,390 397.2,188" fill="#e9f2d8" opacity="0.9"/>
</g>
<g id="secondHand">
<line x1="400" y1="478" x2="400" y2="136" stroke="#dcb75f" stroke-width="3" stroke-linecap="round"/>
<polygon points="400,132 403.8,148 396.2,148" fill="#dcb75f" stroke="#3d2c0e" stroke-width="0.6"/>
<circle cx="400" cy="466" r="7" fill="#dcb75f" stroke="#3d2c0e" stroke-width="1"/>
<circle cx="400" cy="466" r="2.4" fill="#20242c"/>
</g>
<g id="cap">
<circle cx="400" cy="400" r="8.5" fill="url(#goldLinear)" stroke="#3d2c0e" stroke-width="1"/>
<circle cx="400" cy="400" r="2.6" fill="#20242c"/>
</g>
</g>
<!-- sapphire crystal glints -->
<g id="crystal" pointer-events="none">
<circle cx="400" cy="400" r="296" fill="url(#glassRadial)"/>
<ellipse id="glint" cx="308" cy="262" rx="180" ry="64" transform="rotate(-34 308 262)" fill="#fff" opacity=".08" filter="url(#blurL)" style="mix-blend-mode:screen"/>
<ellipse id="glint2" cx="520" cy="540" rx="120" ry="40" transform="rotate(-34 520 540)" fill="#fff" opacity=".05" filter="url(#blurL)" style="mix-blend-mode:screen"/>
</g>
<!-- crown -->
<g id="crown">
<rect x="742" y="385" width="24" height="30" rx="5" fill="url(#goldLinear)" stroke="#3d2c0e" stroke-width="1"/>
<circle cx="778" cy="400" r="15" fill="url(#goldCase)" stroke="#3d2c0e" stroke-width="1"/>
<line x1="766" y1="393" x2="790" y2="393" stroke="#5c4416" stroke-width="1" opacity=".55"/>
<line x1="765" y1="400" x2="791" y2="400" stroke="#5c4416" stroke-width="1" opacity=".55"/>
<line x1="766" y1="407" x2="790" y2="407" stroke="#5c4416" stroke-width="1" opacity=".55"/>
<circle cx="778" cy="400" r="4" fill="#241804" opacity=".8"/>
</g>
</svg>
<p id="caption"></p>
</main>
<script>
(function(){
var NS='http://www.w3.org/2000/svg';
function $(id){return document.getElementById(id)}
function el(tag,attrs,parent){
var e=document.createElementNS(NS,tag);
for(var k in attrs)e.setAttribute(k,attrs[k]);
if(parent)parent.appendChild(e);
return e;
}
function rad(d){return d*Math.PI/180}
function px(cx,cy,r,d){return cx+r*Math.cos(rad(d-90))}
function py(cx,cy,r,d){return cy+r*Math.sin(rad(d-90))}
/* sunburst brushing */
var sun=$('sunburst'),R=292,i,a;
for(i=0;i<360;i++){
a=i;
el('polygon',{
points:'400,400 '+px(400,400,R,a)+','+py(400,400,R,a)+' '+px(400,400,R,a+1)+','+py(400,400,R,a+1),
fill:(i%2?'#9fc0e8':'#000000'), opacity:(i%2?0.016:0.05)
},sun);
}
/* fluted bezel */
var fl=$('fluting'),N=150;
for(i=0;i<N;i++){
a=i*360/N;
el('line',{
x1:px(400,400,307,a),y1:py(400,400,307,a),
x2:px(400,400,345,a),y2:py(400,400,345,a),
stroke:(i%2?'#4c3710':'#f6e3b0'),
'stroke-opacity':(i%2?0.85:0.55),'stroke-width':(i%2?2.2:1)
},fl);
el('line',{
x1:px(400,400,307,a+0.9),y1:py(400,400,307,a+0.9),
x2:px(400,400,345,a+0.9),y2:py(400,400,345,a+0.9),
stroke:'#ffffff','stroke-opacity':0.10,'stroke-width':0.7
},fl);
}
/* minute track */
var tk=$('ticks');
for(i=0;i<60;i++){
a=i*6;
var lg=(i%5===0);
el('line',{
x1:px(400,400,lg?267:271,a),y1:py(400,400,lg?267:271,a),
x2:px(400,400,278,a),y2:py(400,400,278,a),
stroke:(lg?'#e6c675':'#93804f'),
'stroke-width':(lg?2.4:1),'stroke-opacity':(lg?0.95:0.7)
},tk);
}
/* applied hour markers */
var mk=$('markers');
for(i=0;i<12;i++){
a=i*30;
var tf='rotate('+a+' 400 400)';
if(i===0){
el('rect',{x:387.5,y:134,width:7,height:36,rx:2,fill:'url(#goldLinear)',stroke:'#4a3612','stroke-width':0.7,transform:tf},mk);
el('rect',{x:405.5,y:134,width:7,height:36,rx:2,fill:'url(#goldLinear)',stroke:'#4a3612','stroke-width':0.7,transform:tf},mk);
}else{
el('rect',{x:395.5,y:136,width:9,height:34,rx:2,fill:'url(#goldLinear)',stroke:'#4a3612','stroke-width':0.7,transform:tf},mk);
}
}
/* gear train */
function gearShape(cx,cy,r,teeth,th,fill,parent){
var pts=[],step=360/teeth,j,aa;
for(j=0;j<teeth;j++){
aa=j*step;
pts.push(px(cx,cy,r-1.5,aa)+','+py(cx,cy,r-1.5,aa));
pts.push(px(cx,cy,r+th,aa+step*0.18)+','+py(cx,cy,r+th,aa+step*0.18));
pts.push(px(cx,cy,r+th,aa+step*0.47)+','+py(cx,cy,r+th,aa+step*0.47));
pts.push(px(cx,cy,r-1.5,aa+step*0.68)+','+py(cx,cy,r-1.5,aa+step*0.68));
}
el('polygon',{points:pts.join(' '),fill:fill,stroke:'#3d2c0e','stroke-width':1,'stroke-linejoin':'round'},parent);
el('circle',{cx:cx,cy:cy,r:Math.max(3,r*0.18),fill:'#20242c',stroke:'#59481f','stroke-width':1},parent);
}
gearShape(218,428,20,14,4,'#c9a24b',$('gearA'));
gearShape(232,368,12,10,3,'#aeb8c2',$('gearB'));
gearShape(276,432,9,8,2.5,'#c9a24b',$('gearC'));
/* balance wheel */
var bal=$('balance'),bx=268,by=404;
el('circle',{cx:bx,cy:by,r:30,fill:'none',stroke:'#dcb75f','stroke-width':6},bal);
el('line',{x1:bx-29,y1:by,x2:bx+29,y2:by,stroke:'#dcb75f','stroke-width':3,transform:'rotate(45 '+bx+' '+by+')'},bal);
el('line',{x1:bx-29,y1:by,x2:bx+29,y2:by,stroke:'#dcb75f','stroke-width':3,transform:'rotate(135 '+bx+' '+by+')'},bal);
[45,135,225,315].forEach(function(deg){
el('circle',{cx:px(bx,by,30,deg),cy:py(bx,by,30,deg),r:3.4,fill:'#f6e3b0',stroke:'#6f4f16','stroke-width':1},bal);
});
el('circle',{cx:bx,cy:by,r:13,fill:'none',stroke:'#8fa8c8','stroke-width':1,opacity:0.7,'stroke-dasharray':'34 14'},bal);
el('circle',{cx:bx,cy:by,r:8,fill:'none',stroke:'#8fa8c8','stroke-width':1,opacity:0.6,'stroke-dasharray':'20 10'},bal);
el('circle',{cx:bx,cy:by,r:2.6,fill:'#e8eef4'},bal);
/* animation */
var hourG=$('hourHand'),minG=$('minuteHand'),secG=$('secondHand'),
gA=$('gearA'),gB=$('gearB'),gC=$('gearC'),
dateT=$('dateText'),cap=$('caption');
var lastDate='',lastSec=-1;
function frame(){
var now=new Date();
var s=now.getSeconds()+now.getMilliseconds()/1000;
var m=now.getMinutes()+s/60;
var h=(now.getHours()%12)+m/60;
secG.setAttribute('transform','rotate('+(s*6)+' 400 400)');
minG.setAttribute('transform','rotate('+(m*6)+' 400 400)');
hourG.setAttribute('transform','rotate('+(h*30)+' 400 400)');
var t=performance.now()/1000;
bal.setAttribute('transform','rotate('+(26*Math.sin(t*2*Math.PI*1.15))+' '+bx+' '+by+')');
gA.setAttribute('transform','rotate('+(-t*12)+' 218 428)');
gB.setAttribute('transform','rotate('+(t*22)+' 232 368)');
gC.setAttribute('transform','rotate('+(t*30)+' 276 432)');
var dstr=String(now.getDate()).padStart(2,'0');
if(dstr!==lastDate){dateT.textContent=dstr;lastDate=dstr;}
var sec=now.getSeconds();
if(sec!==lastSec){
lastSec=sec;
var wd=now.toLocaleDateString(undefined,{weekday:'long'});
var dt=now.toLocaleDateString(undefined,{day:'numeric',month:'long',year:'numeric'});
var tm=now.toLocaleTimeString();
cap.innerHTML='<b>'+wd+'</b> · '+dt+' · '+tm;
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
