AskaEth/TurboSu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: simplify all dashboards to minimal flat design, remove Miuix decorations

Browse Source
This commit is contained in:
AskaEth
2026-07-25 16:43:12 +08:00
parent cd08e793e1
commit 77815f36a0
5 changed files with 186 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboards/lap_timer/index.html
+21 -25
View File
@@ -6,21 +6,21 @@
<title>TurboSu - 圈速</title>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'SF Pro Text',-apple-system,'PingFang SC',sans-serif;color:#fff}
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}
#box.center{width:auto;height:auto}
#content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a14,#1a1a30);gap:min(3vw,16px)}
.lap-num{font-size:min(3vw,16px);color:rgba(255,255,255,.3);letter-spacing:.15em;margin-bottom:-8px}
.current{font-size:min(12vw,72px);font-weight:900;color:#3482FF;font-variant-numeric:tabular-nums}
.below{display:flex;gap:min(8vw,48px)}
#content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(3vh,20px)}
.lap-num{font-size:min(3vw,14px);color:rgba(255,255,255,.2);letter-spacing:.2em;text-transform:uppercase}
.current{font-size:min(14vw,90px);font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.below{display:flex;gap:min(10vw,60px)}
.col{text-align:center}
.col .label{font-size:min(2vw,12px);color:rgba(255,255,255,.35);letter-spacing:.08em;margin-bottom:2px}
.col .val{font-size:min(5vw,28px);font-weight:700;font-variant-numeric:tabular-nums}
.col:last-child .val{color:#34C759}
.col .label{font-size:min(2vw,11px);color:rgba(255,255,255,.2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.col .val{font-size:min(5vw,26px);font-weight:300;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.5)}
.col:last-child .val{color:rgba(255,255,255,.8)}
</style>
</head>
<body>
@@ -28,41 +28,37 @@ html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'SF
<div class="lap-num">LAP <span id="lap-n">0</span></div>
<div class="current" id="cur">00:00.000</div>
<div class="below">
<div class="col"><div class="label">LAST</div><div class="val" id="last" style="color:rgba(255,255,255,.55)">00:00.000</div></div>
<div class="col"><div class="label">LAST</div><div class="val" id="last">00:00.000</div></div>
<div class="col"><div class="label">BEST</div><div class="val" id="best">00:00.000</div></div>
</div>
</div></div></div>
<script>
const M={aspect_ratio:"4:3",render_mode:"contain"};
(function(){
const box=document.getElementById('box'),curEl=document.getElementById('cur'),lastEl=document.getElementById('last'),bestEl=document.getElementById('best'),lapN=document.getElementById('lap-n');
const box=document.getElementById('box');
const proto=location.protocol==='https:'?'wss:':'ws:',wsUrl=proto+'//'+location.host+'/ws';
let ws,rt;
function fmt(t){if(!t||t<=0)return'00:00.000';const m=Math.floor(t/60),s=(t%60).toFixed(3);return String(m).padStart(2,'0')+':'+(m>0?String(s).padStart(6,'0'):s)}
function fmt(t){if(!t||t<=0)return'00:00.000';const m=Math.floor(t/60),s=(t%60).toFixed(3);return String(m).padStart(2,'0')+':'+s.padStart(6,'0')}
function parseRatio(r){if(!r||r==='auto')return null;const p=r.split(':');if(p.length===2){const w=+p[0],h=+p[1];if(w>0&&h>0)return w/h;}return null;}
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||'4:3'),mode=M.render_mode||'contain';
if(!ratio){box.style.width='100vw';box.style.height='100vh';box.className='fill';return;}
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;
switch(mode){
case'cover':if(vr>ratio){cw=vw;ch=vw/ratio}else{ch=vh;cw=vh*ratio};box.className='cover';break;
case'fill':box.style.width='100vw';box.style.height='100vh';box.className='fill';return;
case'center':cw=Math.min(vw,1200);ch=cw/ratio;if(ch>vh){ch=Math.min(vh,900);cw=ch*ratio};box.className='center';break;
default:if(vr>ratio){ch=vh;cw=vh*ratio}else{cw=vw;ch=vw/ratio};box.className='contain';
}
if(mode!=='fill'){box.style.width=cw+'px';box.style.height=ch+'px';}
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 d=m.data;curEl.textContent=fmt(d.lap_time);lastEl.textContent=fmt(d.last_lap);bestEl.textContent=fmt(d.best_lap);lapN.textContent=d.lap_number||0}}catch(e){}};
ws.onclose=()=>{rt=setTimeout(connect,2000)};
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 d=m.data;document.getElementById('cur').textContent=fmt(d.lap_time);document.getElementById('last').textContent=fmt(d.last_lap);document.getElementById('best').textContent=fmt(d.best_lap);document.getElementById('lap-n').textContent=d.lap_number||0}}catch(e){}}
ws.onclose=()=>{rt=setTimeout(connect,2000)}
}
apply();window.addEventListener('resize',apply);connect();
apply();window.addEventListener('resize',apply);connect()
})();
</script>
</body>