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/speedometer/index.html
+20 -38
View File
@@ -5,21 +5,19 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>TurboSu - 速度表</title>
<style>
:root{--ratio:auto;--mode:contain}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:'SF Pro Text',-apple-system,'PingFang SC',sans-serif;-webkit-tap-highlight-color:transparent}
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}
#content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a14,#1a1a30)}
.speed{font-size:min(18vw,160px);font-weight:900;line-height:1;color:#fff;text-shadow:0 0 50px rgba(52,130,255,.5);transition:font-size .1s ease}
.unit{font-size:min(3vw,28px);color:rgba(255,255,255,.55);margin-top:8px;letter-spacing:.3em}
.bar{width:min(80%,400px);height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-top:24px}
.bar-fill{height:100%;background:linear-gradient(90deg,#3482FF,#764ba2);border-radius:3px;transition:width .08s linear}
/* aspect-ratio variants */
#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}
.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>
@@ -31,44 +29,28 @@ html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font
<script>
const M={aspect_ratio:"auto",render_mode:"contain"};
(function(){
const box=document.getElementById('box');
const vEl=document.getElementById('v');
const bar=document.getElementById('bar');
const proto=location.protocol==='https:'?'wss:':'ws:';
const wsUrl=proto+'//'+location.host+'/ws';
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];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||'auto');
const 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;
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,1920);ch=cw/ratio;if(ch>vh){ch=Math.min(vh,1080);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';}
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 d=m.data;vEl.textContent=(d.speed_kmh||0).toFixed(0);bar.style.width=Math.min((d.speed_kmh||0)/400,1)*100+'%'}}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 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();
apply();window.addEventListener('resize',apply);connect()
})();
</script>
</body>