diff --git a/dashboards/forza_composite/index.html b/dashboards/forza_composite/index.html index 158e3dd..d6d3422 100644 --- a/dashboards/forza_composite/index.html +++ b/dashboards/forza_composite/index.html @@ -223,7 +223,7 @@ let GAME_ID=''; speedU.textContent='KM/H'; // Gear - const gv=gear===0?'R':String(gear); + const gv=gear===0?'N':gear===11?'R':gear===21?'P':String(gear); if(gv!==gearV.textContent){ gearV.textContent=gv; gearBox.style.animation='none';gearBox.offsetHeight;gearBox.style.animation=''; diff --git a/dashboards/gear_indicator/index.html b/dashboards/gear_indicator/index.html index 41e94e4..8aef3a0 100644 --- a/dashboards/gear_indicator/index.html +++ b/dashboards/gear_indicator/index.html @@ -15,28 +15,27 @@ html,body{width:100%;height:100%;overflow:hidden;background:#000; #box.fill{width:100vw;height:100vh} #box.center{width:auto;height:auto} #content{width:100%;height:100%;display:flex;align-items:center;justify-content:center; - background:linear-gradient(135deg,#0a0a14,#1a1a30);flex-direction:column;gap:min(3vh,20px)} -.gear-circle{position:relative;width:min(30vmin,130px);height:min(30vmin,130px); - border-radius:50%;background:rgba(52,130,255,.1);border:3px solid rgba(52,130,255,.35); + background:linear-gradient(135deg,#0a0a14,#1a1a30);flex-direction:column;gap:min(2.5vh,16px)} +.gear-circle{position:relative;width:min(28vmin,120px);height:min(28vmin,120px); + border-radius:50%;background:rgba(52,130,255,.08);border:3px solid rgba(52,130,255,.3); display:flex;align-items:center;justify-content:center; - box-shadow:0 0 40px rgba(52,130,255,.12);transition:border-color .2s,border-width .2s} -.gear-circle span{font-size:min(14vmin,56px);font-weight:900;color:#fff;transition:.12s ease} -.gear-circle.active{border-color:rgba(52,130,255,.7);border-width:4px; - box-shadow:0 0 50px rgba(52,130,255,.25)} -.gear-circle.r-active{border-color:rgba(233,70,52,.6);box-shadow:0 0 50px rgba(233,70,52,.25)} -.gear-circle.n-active{border-color:rgba(255,255,255,.3);box-shadow:0 0 40px rgba(255,255,255,.10)} -.bar-row{display:flex;gap:min(1.5vw,8px);align-items:flex-end;padding:0 10px} -.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:min(8vw,36px)} -.bar-label{font-size:min(2.5vmin,13px);font-weight:600;color:rgba(255,255,255,.25); - transition:color .2s} -.bar-fill{width:min(6vw,28px);height:min(6vw,28px);border-radius:6px;background:rgba(255,255,255,.06); - transition:background .2s,transform .15s} -.bar-col.active .bar-fill{background:var(--accent,#3482FF);transform:scaleY(1.2)} + box-shadow:0 0 40px rgba(52,130,255,.1);transition:border-color .2s,border-width .2s} +.gear-circle span{font-size:min(13vmin,50px);font-weight:900;color:#fff;transition:.12s ease} +.gear-circle.r-active{border-color:rgba(233,70,52,.55);box-shadow:0 0 50px rgba(233,70,52,.2)} +.gear-circle.n-active{border-color:rgba(255,255,255,.25)} +.gear-circle.p-active{border-color:rgba(52,199,89,.3)} +.bar-row{display:flex;gap:min(1.2vw,6px);align-items:flex-end;padding:0 6px;flex-wrap:wrap;justify-content:center} +.bar-col{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:min(7vw,32px)} +.bar-label{font-size:min(2.2vmin,12px);font-weight:600;color:rgba(255,255,255,.2);transition:color .2s} +.bar-fill{width:min(5vw,24px);height:min(5vw,24px);border-radius:5px;background:rgba(255,255,255,.05);transition:background .2s,transform .15s} +.bar-col.active .bar-fill{background:var(--accent,#3482FF);transform:scaleY(1.25)} .bar-col.active .bar-label{color:#fff} -.bar-col.r .bar-fill{background:rgba(233,70,52,.3)} +.bar-col.r .bar-fill{background:rgba(233,70,52,.25)} .bar-col.r.active .bar-fill{background:#E94634} -.bar-col.n .bar-fill{background:rgba(255,255,255,.1)} -.bar-col.n.active .bar-fill{background:rgba(255,255,255,.25)} +.bar-col.n .bar-fill{background:rgba(255,255,255,.08)} +.bar-col.n.active .bar-fill{background:rgba(255,255,255,.2)} +.bar-col.p .bar-fill{background:rgba(52,199,89,.15)} +.bar-col.p.active .bar-fill{background:rgba(52,199,89,.5)}
@@ -45,142 +44,92 @@ html,body{width:100%;height:100%;overflow:hidden;background:#000;