refactor: standalone dashboard folders with index.html, zip-based import/export (.tsd/.tss/.tsp)
- Each dashboard is now a self-contained folder: manifest.json + index.html - Auto-scan dashboards/ and data/dashboards/ on startup - Export: .tsd (dashboards), .tss (scenes), .tsp (game plugins) - all zip format - Dashboard index.html is complete standalone page (WS + data binding) - Aspect ratio constraints handled in each dashboard's own JS - Removed template-based dashboard rendering in favor of static serve - Import via file upload endpoints, export via direct file download
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
<!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>
|
||||
: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}
|
||||
#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}
|
||||
</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');
|
||||
const vEl=document.getElementById('v');
|
||||
const bar=document.getElementById('bar');
|
||||
const proto=location.protocol==='https:'?'wss:':'ws:';
|
||||
const 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 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';}
|
||||
}
|
||||
|
||||
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)};
|
||||
}
|
||||
|
||||
apply();
|
||||
window.addEventListener('resize',apply);
|
||||
connect();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:linear-gradient(135deg,#0a0a14 0%,#1a1a30 100%);">
|
||||
<div style="font-size:120px;font-weight:900;line-height:1;color:#fff;text-shadow:0 0 40px rgba(102,126,234,0.5);" data-bind="speed_kmh">0</div>
|
||||
<div style="font-size:24px;color:rgba(255,255,255,0.6);margin-top:8px;letter-spacing:4px;">KM/H</div>
|
||||
<div style="margin-top:20px;width:300px;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;">
|
||||
<div data-bind-speed style="height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;transition:width 0.1s ease;width:calc(var(--speed,0) / 400 * 100%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user