Run details
- Model
- inclusionai/ling-3.1-flash
- Route
- OpenRouter API, one user message
- Served by
- Novita
- Reasoning
- provider default, 17,059 reasoning tokens
- Limits
- 60 min · 32,768 output tokens
- Date
- 22 Oct 2026
- Time
- 4 min 33 s
- Size
- 12 kB
- Tokens
- 97 in, 30,862 out
- List price
- $0.007 ($0.075 in / $0.225 out per M)
- Paid
- $0.007
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
12 kB 248 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AURÉLIE — Calibre 88 · Mechanical Watch</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
display:flex;align-items:center;justify-content:center;
background:radial-gradient(130% 90% at 50% 0%,#3a4150 0%,#20242d 45%,#0b0d11 100%);
font-family:Georgia,'Times New Roman',serif;
overflow:hidden;user-select:none;
}
#stage{display:flex;flex-direction:column;align-items:center;transform-origin:center;animation:fade 1.1s ease backwards}
@keyframes fade{from{opacity:0}}
.watch{position:relative;width:460px;height:800px;filter:drop-shadow(0 46px 54px rgba(0,0,0,.6))}
/* ---- leather straps ---- */
.strap{position:absolute;left:50%;transform:translateX(-50%);width:176px;height:272px;z-index:1;
background:
linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,255,255,.08) 18%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.08) 82%,rgba(0,0,0,.55)),
repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),
linear-gradient(#4d2f1a,#27150a);
box-shadow:inset 0 3px 5px rgba(255,255,255,.12),inset 0 -8px 14px rgba(0,0,0,.6);
}
.strap.top{top:-12px;clip-path:polygon(17% 0,83% 0,100% 100%,0 100%)}
.strap.bottom{bottom:-12px;clip-path:polygon(0 0,100% 0,83% 100%,17% 100%)}
.strap::before,.strap::after{content:"";position:absolute;top:20px;bottom:20px;border-left:2px dashed rgba(228,198,152,.5)}
.strap::before{left:15px}.strap::after{right:15px}
.buckle{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:100px;height:56px;border-radius:12px;z-index:2;
background:linear-gradient(135deg,#f7e2ae,#a5712f 55%,#dbb26c);
box-shadow:0 3px 6px rgba(0,0,0,.55),inset 0 1px 2px rgba(255,255,255,.7)}
.buckle::before{content:"";position:absolute;inset:8px;border-radius:7px;background:#170d04;box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
.buckle::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:3px;transform:translateX(-50%);border-radius:2px;
background:linear-gradient(#f7e2ae,#8a5a28)}
.holes{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;display:flex;flex-direction:column;gap:22px;z-index:2}
.holes i{width:9px;height:13px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#0e0702,#2a1708);
box-shadow:inset 0 2px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
/* ---- lugs ---- */
.lug{position:absolute;width:42px;height:64px;background:linear-gradient(135deg,#eac87f,#8a5a28 70%);z-index:4;
box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.4)}
.lug.tl{left:150px;top:162px;transform:skewX(-14deg);border-radius:6px 10px 4px 4px}
.lug.tr{left:268px;top:162px;transform:skewX(14deg);border-radius:10px 6px 4px 4px}
.lug.bl{left:150px;bottom:162px;transform:skewX(14deg);border-radius:4px 4px 10px 6px}
.lug.br{left:268px;bottom:162px;transform:skewX(-14deg);border-radius:4px 4px 6px 10px}
/* ---- case & fluted bezel ---- */
.case{position:absolute;left:50%;top:180px;transform:translateX(-50%);width:440px;height:440px;border-radius:50%;z-index:3;
background:radial-gradient(circle at 33% 27%,#f9e7c9 0%,#ecc78f 24%,#c8955a 48%,#8a5a28 74%,#5d3a14 100%);
box-shadow:inset 0 2px 3px rgba(255,255,255,.75),inset 0 -8px 14px rgba(40,20,5,.6)}
.bezel{position:absolute;inset:12px;border-radius:50%;
background:
repeating-conic-gradient(from -90deg at 50% 50%,rgba(255,255,255,.16) 0deg 2.4deg,rgba(15,8,0,.24) 2.4deg 4.8deg),
radial-gradient(circle at 36% 30%,#f2d5a2,#b9834a 55%,#6f451c);
box-shadow:inset 0 2px 4px rgba(255,255,255,.6),inset 0 -6px 12px rgba(0,0,0,.55)}
#dial{position:absolute;inset:30px;width:380px;height:380px}
.glare{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
background:
linear-gradient(118deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.06) 24%,transparent 42%),
radial-gradient(120% 90% at 30% 16%,rgba(255,255,255,.24),transparent 46%)}
/* ---- crown ---- */
.crownTube{position:absolute;left:calc(50% + 210px);top:389px;width:22px;height:24px;border-radius:3px;z-index:5;
background:linear-gradient(90deg,#7a4d1c,#e9c98a 45%,#7a4d1c);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.crown{position:absolute;left:calc(50% + 226px);top:379px;width:36px;height:44px;border-radius:8px;z-index:5;
background:repeating-linear-gradient(90deg,#f4ddab 0 3px,#9a6a30 3px 5px,#e9c98a 5px 8px);
box-shadow:0 3px 6px rgba(0,0,0,.55),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 6px rgba(0,0,0,.45)}
/* ---- dial typography ---- */
.brand{fill:#ecd9a8;font-size:19px;letter-spacing:7px}
.sub{fill:#93a7cf;font-size:10.5px;letter-spacing:4px}
.swiss{fill:#7d8fb3;font-size:8.5px;letter-spacing:2.5px}
.date{fill:#191510;font-size:21px;font-weight:700}
.hand{filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.caption{margin-top:26px;color:#7c8698;font-size:12px;letter-spacing:6px;text-indent:6px}
</style>
</head>
<body>
<div id="stage">
<div class="watch">
<div class="strap top"></div>
<div class="strap bottom"></div>
<div class="buckle"></div>
<div class="holes"><i></i><i></i><i></i><i></i><i></i></div>
<div class="lug tl"></div><div class="lug tr"></div><div class="lug bl"></div><div class="lug br"></div>
<div class="case">
<div class="bezel"></div>
<svg id="dial" viewBox="0 0 400 400" aria-hidden="true">
<defs>
<radialGradient id="dialGrad" cx="0.38" cy="0.3" r="1">
<stop offset="0" stop-color="#2e4c92"/>
<stop offset="0.35" stop-color="#182c55"/>
<stop offset="0.7" stop-color="#0c1631"/>
<stop offset="1" stop-color="#070d1f"/>
</radialGradient>
<pattern id="guilloche" width="7" height="7" patternUnits="userSpaceOnUse">
<circle cx="3.5" cy="3.5" r="3.1" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.8"/>
</pattern>
<linearGradient id="goldLin" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#f9e7bd"/>
<stop offset="0.45" stop-color="#dcae66"/>
<stop offset="0.62" stop-color="#a97a34"/>
<stop offset="1" stop-color="#eecf8f"/>
</linearGradient>
<linearGradient id="goldVert" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f7e3b5"/>
<stop offset="0.55" stop-color="#c99a4e"/>
<stop offset="1" stop-color="#7a4d1c"/>
</linearGradient>
<linearGradient id="blueSteel" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#a8c2ff"/>
<stop offset="0.5" stop-color="#3a5cc9"/>
<stop offset="1" stop-color="#1b2f6b"/>
</linearGradient>
<radialGradient id="capGold" cx="0.35" cy="0.3" r="0.95">
<stop offset="0" stop-color="#fdf0cd"/>
<stop offset="0.6" stop-color="#d9ab63"/>
<stop offset="1" stop-color="#7a4d1c"/>
</radialGradient>
<radialGradient id="crystalGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="rgba(255,255,255,0.16)"/>
<stop offset="1" stop-color="rgba(255,255,255,0)"/>
</radialGradient>
<linearGradient id="dateBg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fcf8ee"/>
<stop offset="1" stop-color="#e6ddc7"/>
</linearGradient>
</defs>
<circle cx="200" cy="200" r="200" fill="url(#dialGrad)"/>
<circle cx="200" cy="200" r="200" fill="url(#guilloche)"/>
<ellipse cx="150" cy="110" rx="170" ry="120" fill="url(#crystalGlow)" transform="rotate(-22 150 110)"/>
<circle cx="200" cy="200" r="197" fill="none" stroke="rgba(0,0,0,0.55)" stroke-width="6"/>
<circle cx="200" cy="200" r="192.5" fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="1"/>
<g id="ticks"></g>
<g id="indices"></g>
<text x="204" y="97" text-anchor="middle" class="brand">AURÉLIE</text>
<polygon points="200,112 206,120 200,128 194,120" fill="url(#goldLin)" stroke="rgba(0,0,0,0.3)" stroke-width="0.6"/>
<text x="202" y="272" text-anchor="middle" class="sub">AUTOMATIC</text>
<text x="201" y="320" text-anchor="middle" class="swiss">SWISS MADE</text>
<g>
<rect x="319" y="180" width="54" height="40" rx="5" fill="url(#goldVert)" stroke="rgba(0,0,0,0.35)" stroke-width="0.8"/>
<rect x="322.5" y="183.5" width="47" height="33" rx="3" fill="url(#dateBg)"/>
<rect x="322.5" y="183.5" width="47" height="33" rx="3" fill="none" stroke="rgba(0,0,0,0.25)" stroke-width="0.8"/>
<text id="dateText" x="346" y="201" text-anchor="middle" dominant-baseline="central" class="date">1</text>
</g>
<g id="hourHand" class="hand">
<polygon points="200,134 194.6,197 200,216" fill="#a97a34"/>
<polygon points="200,134 205.4,197 200,216" fill="#f2d9a4"/>
</g>
<g id="minuteHand" class="hand">
<polygon points="200,94 195.4,197 200,218" fill="#a97a34"/>
<polygon points="200,94 204.6,197 200,218" fill="#f6e2b0"/>
</g>
<g id="secondHand" class="hand">
<line x1="200" y1="238" x2="200" y2="42" stroke="url(#blueSteel)" stroke-width="2.6" stroke-linecap="round"/>
<circle cx="200" cy="234" r="7.5" fill="url(#blueSteel)" stroke="rgba(255,255,255,0.35)" stroke-width="0.6"/>
</g>
<circle cx="200" cy="200" r="9.5" fill="url(#capGold)" stroke="#6e4517" stroke-width="1"/>
<circle cx="200" cy="200" r="3" fill="#5d3a14"/>
</svg>
<div class="glare"></div>
</div>
<div class="crownTube"></div>
<div class="crown"></div>
</div>
<div class="caption">HAUTE HORLOGERIE · GENÈVE</div>
</div>
<script>
(function(){
var NS='http://www.w3.org/2000/svg';
function mk(tag,attrs,parent){
var e=document.createElementNS(NS,tag);
for(var k in attrs)e.setAttribute(k,attrs[k]);
parent.appendChild(e);return e;
}
/* minute track */
var ticks=document.getElementById('ticks');
for(var i=0;i<60;i++){
var a=i*6*Math.PI/180, hour=i%5===0;
var r1=hour?173:181, r2=191;
mk('line',{
x1:200+r1*Math.sin(a), y1:200-r1*Math.cos(a),
x2:200+r2*Math.sin(a), y2:200-r2*Math.cos(a),
stroke:hour?'#d9b471':'rgba(198,212,238,0.5)',
'stroke-width':hour?4.5:1.6,
'stroke-linecap':hour?'butt':'round'
},ticks);
}
/* applied gold indices (double baton at 12, date window replaces 3) */
var indices=document.getElementById('indices');
for(var h=0;h<12;h++){
if(h===3)continue;
var g=mk('g',{transform:'rotate('+(h*30)+' 200 200)'},indices);
if(h===0){
mk('rect',{x:190.5,y:36,width:7.5,height:34,rx:2.5,fill:'url(#goldLin)',stroke:'rgba(0,0,0,0.35)','stroke-width':0.7},g);
mk('rect',{x:202,y:36,width:7.5,height:34,rx:2.5,fill:'url(#goldLin)',stroke:'rgba(0,0,0,0.35)','stroke-width':0.7},g);
}else{
mk('rect',{x:195.75,y:38,width:8.5,height:32,rx:2.5,fill:'url(#goldLin)',stroke:'rgba(0,0,0,0.35)','stroke-width':0.7},g);
}
}
/* sweeping hands + date */
var hourHand=document.getElementById('hourHand'),
minuteHand=document.getElementById('minuteHand'),
secondHand=document.getElementById('secondHand'),
dateText=document.getElementById('dateText'),
lastDate=-1;
function tick(){
var now=new Date();
var s=now.getSeconds()+now.getMilliseconds()/1000;
var m=now.getMinutes()+s/60;
var h=now.getHours()%12+m/60;
secondHand.setAttribute('transform','rotate('+(s*6).toFixed(3)+' 200 200)');
minuteHand.setAttribute('transform','rotate('+(m*6).toFixed(3)+' 200 200)');
hourHand.setAttribute('transform','rotate('+(h*30).toFixed(3)+' 200 200)');
var d=now.getDate();
if(d!==lastDate){dateText.textContent=d;lastDate=d;}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
/* fit to screen */
var stage=document.getElementById('stage');
function fit(){
var s=Math.min(window.innerWidth/540,window.innerHeight/920,1.25);
stage.style.transform='scale('+s+')';
}
window.addEventListener('resize',fit);
fit();
})();
</script>
</body>
</html>Compare with
Ling 3.1 Flash: other attempts
- Ling 3.1 Flash, Landing: No file after 2 runs, used all 32,768 output tokens
- 147words