58 lines
2.6 KiB
HTML
58 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
|
|
<title>TurboSu - 速度表</title>
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0f;color:#fff;
|
|
font-family:'SF Pro Display',-apple-system,system-ui,sans-serif}
|
|
#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
|
|
#box{position:relative;overflow:hidden}
|
|
#box.contain{max-width:100vw;max-height:100vh}
|
|
#box.cover{min-width:100vw;min-height:100vh}
|
|
#box.fill{width:100vw;height:100vh}
|
|
#content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
|
|
.speed{font-size:min(20vw,180px);font-weight:200;line-height:1;letter-spacing:-.02em}
|
|
.unit{font-size:min(3vw,22px);color:rgba(255,255,255,.3);margin-top:8px;letter-spacing:.4em;text-transform:uppercase}
|
|
.bar{width:min(70%,340px);height:2px;background:rgba(255,255,255,.08);margin-top:32px}
|
|
.bar-fill{height:100%;background:#fff;transition:width .06s linear}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"><div id="box" class="contain"><div id="content">
|
|
<div class="speed" id="v">0</div>
|
|
<div class="unit">KM/H</div>
|
|
<div class="bar"><div class="bar-fill" id="bar"></div></div>
|
|
</div></div></div>
|
|
<script>
|
|
const M={aspect_ratio:"auto",render_mode:"contain"};
|
|
(function(){
|
|
const box=document.getElementById('box'),vEl=document.getElementById('v'),bar=document.getElementById('bar');
|
|
const proto=location.protocol==='https:'?'wss:':'ws:',wsUrl=proto+'//'+location.host+'/ws';
|
|
let ws,rt;
|
|
|
|
function parseRatio(r){if(!r||r==='auto')return null;const p=r.split(':');if(p.length===2){const w=+p[0],h=+p[1];return w/h}return null}
|
|
|
|
function apply(){
|
|
const ratio=parseRatio(M.aspect_ratio||'auto'),mode=M.render_mode||'contain';
|
|
if(!ratio){box.style.width='100vw';box.style.height='100vh';box.className='fill';return}
|
|
const vw=window.innerWidth,vh=window.innerHeight,vr=vw/vh;let cw,ch;
|
|
if(mode==='cover'){cw=vw;ch=vw/ratio;box.className='cover'}
|
|
else{box.className='contain';cw=vr>ratio?vh*ratio:vw;ch=vr>ratio?vh:vw/ratio}
|
|
box.style.width=cw+'px';box.style.height=ch+'px'
|
|
}
|
|
|
|
function connect(){
|
|
ws=new WebSocket(wsUrl);ws.onopen=()=>{if(rt){clearTimeout(rt);rt=null}}
|
|
ws.onmessage=(e)=>{try{const m=JSON.parse(e.data);if(m.type==='telemetry'){const s=m.data.speed_kmh||0;vEl.textContent=s.toFixed(0);bar.style.width=Math.min(s/400,1)*100+'%'}}catch(e){}}
|
|
ws.onclose=()=>{rt=setTimeout(connect,2000)}
|
|
}
|
|
|
|
apply();window.addEventListener('resize',apply);connect()
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|