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

style: 2x all fonts in composite dashboard

Browse Source
This commit is contained in:
AskaEth
2026-07-25 18:47:28 +08:00
parent 3822f85b95
commit e42ad901d4
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboards/forza_composite/index.html
+9 -9
View File
@@ -18,20 +18,20 @@ html,body{width:100%;height:100%;overflow:hidden;background:#060a16;color:#fff;
#rpm-area{position:absolute;left:2%;top:4%;width:62%;height:82%} #rpm-area{position:absolute;left:2%;top:4%;width:62%;height:82%}
#rpm-canvas{width:100%;height:100%} #rpm-canvas{width:100%;height:100%}
#speed-area{position:absolute;left:4%;bottom:10%;width:60%;text-align:center} #speed-area{position:absolute;left:4%;bottom:10%;width:60%;text-align:center}
#speed-val{font-size:min(12vw,120px);font-weight:200;line-height:1;letter-spacing:-.02em} #speed-val{font-size:min(24vw,240px);font-weight:200;line-height:1;letter-spacing:-.02em}
#speed-unit{font-size:min(3vw,22px);color:rgba(255,255,255,.2);letter-spacing:.25em;margin-top:4px} #speed-unit{font-size:min(6vw,44px);color:rgba(255,255,255,.2);letter-spacing:.25em;margin-top:4px}
#gear-area{position:absolute;right:12%;top:50%;transform:translateY(-55%)} #gear-area{position:absolute;right:12%;top:50%;transform:translateY(-55%)}
#gear-box{width:min(24vw,200px);height:min(24vw,200px);border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center} #gear-box{width:min(24vw,200px);height:min(24vw,200px);border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
#gear-box span{font-size:min(24vw,200px);font-weight:200;transition:.1s} #gear-box span{font-size:min(48vw,400px);font-weight:200;transition:.1s}
#pedals{position:absolute;right:4%;top:6%;width:16%} #pedals{position:absolute;right:4%;top:6%;width:16%}
.pedal{margin-bottom:22px} .pedal{margin-bottom:22px}
.pedal .pl{font-size:min(2.4vw,17px);color:rgba(255,255,255,.25);margin-bottom:6px;letter-spacing:.15em} .pedal .pl{font-size:min(4.8vw,34px);color:rgba(255,255,255,.25);margin-bottom:6px;letter-spacing:.15em}
.pedal .pb{height:12px;background:rgba(255,255,255,.06);overflow:hidden} .pedal .pb{height:12px;background:rgba(255,255,255,.06);overflow:hidden}
.pedal .pf{height:100%;transition:width .06s linear} .pedal .pf{height:100%;transition:width .06s linear}
#tf{background:#fff}#bf{background:rgba(255,255,255,.4)} #tf{background:#fff}#bf{background:rgba(255,255,255,.4)}
#status{position:absolute;right:4%;bottom:8%;width:16%} #status{position:absolute;right:4%;bottom:8%;width:16%}
.st{margin-bottom:18px} .st{margin-bottom:18px}
.st .sl{font-size:min(2.2vw,15px);color:rgba(255,255,255,.25);margin-bottom:5px;display:flex;justify-content:space-between} .st .sl{font-size:min(4.4vw,30px);color:rgba(255,255,255,.25);margin-bottom:5px;display:flex;justify-content:space-between}
.st .sb{height:6px;background:rgba(255,255,255,.06);overflow:hidden} .st .sb{height:6px;background:rgba(255,255,255,.06);overflow:hidden}
.st .sf{height:100%;transition:width .3s} .st .sf{height:100%;transition:width .3s}
#ff{background:rgba(255,255,255,.3)}#wf{background:rgba(255,255,255,.15)} #ff{background:rgba(255,255,255,.3)}#wf{background:rgba(255,255,255,.15)}
@@ -139,20 +139,20 @@ function draw(cur,max){
ctx.beginPath();ctx.moveTo(sx+mr*Math.cos(a),sy+mr*Math.sin(a));ctx.lineTo(sx+pr*Math.cos(a),sy+pr*Math.sin(a)); ctx.beginPath();ctx.moveTo(sx+mr*Math.cos(a),sy+mr*Math.sin(a));ctx.lineTo(sx+pr*Math.cos(a),sy+pr*Math.sin(a));
ctx.strokeStyle=r>=rl?'rgba(255,255,255,.15)':'rgba(255,255,255,.08)'; ctx.strokeStyle=r>=rl?'rgba(255,255,255,.15)':'rgba(255,255,255,.08)';
ctx.lineWidth=r%4000===0?2.5:1;ctx.stroke(); ctx.lineWidth=r%4000===0?2.5:1;ctx.stroke();
if(r%4000===0){ctx.fillStyle='rgba(255,255,255,.22)';ctx.font=`${Math.max(13,W/38)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center';ctx.fillText(Math.round(r/1000),sx+(pr+22)*Math.cos(a),sy+(pr+22)*Math.sin(a)+5)} if(r%4000===0){ctx.fillStyle='rgba(255,255,255,.22)';ctx.font=`${Math.max(26,W/19)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center';ctx.fillText(Math.round(r/1000),sx+(pr+22)*Math.cos(a),sy+(pr+22)*Math.sin(a)+5)}
}else{ }else{
const p=pathPt(t); const p=pathPt(t);
ctx.beginPath();ctx.moveTo(p.x,ey-gw/2-4);ctx.lineTo(p.x,ey+gw/2+4); ctx.beginPath();ctx.moveTo(p.x,ey-gw/2-4);ctx.lineTo(p.x,ey+gw/2+4);
ctx.strokeStyle=r>=rl?'rgba(255,255,255,.15)':'rgba(255,255,255,.08)'; ctx.strokeStyle=r>=rl?'rgba(255,255,255,.15)':'rgba(255,255,255,.08)';
ctx.lineWidth=r%4000===0?2.5:1;ctx.stroke(); ctx.lineWidth=r%4000===0?2.5:1;ctx.stroke();
if(r%4000===0){ctx.fillStyle='rgba(255,255,255,.22)';ctx.font=`${Math.max(13,W/38)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center';ctx.fillText(Math.round(r/1000),p.x,ey+gw/2+22)} if(r%4000===0){ctx.fillStyle='rgba(255,255,255,.22)';ctx.font=`${Math.max(26,W/19)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center';ctx.fillText(Math.round(r/1000),p.x,ey+gw/2+22)}
} }
} }
// RPM number // RPM number
ctx.fillStyle='#fff';ctx.font=`200 ${Math.max(64,W/9)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center'; ctx.fillStyle='#fff';ctx.font=`200 ${Math.max(128,W/4.5)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center';
ctx.fillText(Math.round(cur).toLocaleString(),sx,sy-210); ctx.fillText(Math.round(cur).toLocaleString(),sx,sy-210);
ctx.fillStyle='rgba(255,255,255,.12)';ctx.font=`${Math.max(16,W/34)|0}px 'NEXT ART',sans-serif`; ctx.fillStyle='rgba(255,255,255,.12)';ctx.font=`${Math.max(32,W/17)|0}px 'NEXT ART',sans-serif`;
ctx.fillText('\u00d71000 rpm',sx,sy-150); ctx.fillText('\u00d71000 rpm',sx,sy-150);
// redline // redline