amantahiliani/box-box
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/box-box.git synced 2026-08-07 11:54:59 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
517c6b987b8fecc48bac887e57e788de1d84e083
box-box/documentations/refactor/screens/live-timing.html

775 lines
33 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box-box — Live Timing · Monaco GP Race</title>
<link rel="stylesheet" href="styles.css">
<style>
/* ── Full-height root ── */
html, body { height: 100%; overflow: hidden; }
.lt-root {
display: flex;
flex-direction: column;
height: calc(100vh - 44px);
}
/* ── Session Banner ── */
.lt-banner {
display: flex;
align-items: center;
height: 40px;
padding: 0 var(--s5);
background: var(--c-surface);
border-bottom: 2px solid var(--c-border);
font-family: var(--f-mono);
font-size: 12px;
overflow-x: auto;
flex-shrink: 0;
}
.bi {
display: flex;
align-items: center;
gap: var(--s2);
padding: 0 var(--s4);
border-right: 1px solid var(--c-border);
flex-shrink: 0;
height: 100%;
}
.bi:first-child { padding-left: 0; }
.bi-label { font-size: 9px; font-family: var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); }
.bi-val { font-weight: 600; color: var(--c-text); }
/* ── Pinned strip ── */
.lt-pinned {
display: flex;
align-items: center;
gap: var(--s1);
padding: 0 var(--s4);
height: 36px;
background: var(--c-surface-2);
border-bottom: 1px solid var(--c-border);
flex-shrink: 0;
overflow-x: auto;
}
.lt-pinned-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-text-3);
margin-right: var(--s2);
flex-shrink: 0;
}
.pin-card {
display: flex;
align-items: center;
gap: var(--s2);
padding: 4px var(--s3);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 2px;
flex-shrink: 0;
}
.pin-pos { font-family: var(--f-mono); font-size: 11px; color: var(--c-text-3); min-width: 16px; }
.pin-gap { font-family: var(--f-mono); font-size: 11px; color: var(--c-text-2); }
.pin-last { font-family: var(--f-mono); font-size: 10px; color: var(--c-text-3); }
/* ── Main body ── */
.lt-body {
display: grid;
grid-template-columns: 1fr 300px;
flex: 1;
overflow: hidden;
}
/* ── Tower pane ── */
.lt-tower {
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--c-border);
}
.lt-tower-scroll { overflow-y: auto; flex: 1; }
/* Timing table */
.tt-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.tt-table th {
position: sticky;
top: 0;
padding: var(--s1) var(--s2);
background: var(--c-surface);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--c-text-3);
border-bottom: 1px solid var(--c-border);
text-align: right;
white-space: nowrap;
z-index: 10;
}
.tt-table th.left { text-align: left; }
.tt-table td {
padding: var(--pad-v) var(--s2);
border-bottom: 1px solid var(--c-border);
height: var(--row-h);
text-align: right;
white-space: nowrap;
font-family: var(--f-mono);
font-size: 12px;
}
.tt-table td.left { text-align: left; font-family: var(--f-ui); }
.tt-table tbody tr:hover { background: var(--c-surface-2); }
.tt-pos { font-size: 14px; font-weight: 700; text-align: center; width: 28px; }
.tt-gap { color: var(--c-text-2); min-width: 68px; }
.tt-int { color: var(--c-text-3); min-width: 64px; }
.tt-age { color: var(--c-text-3); min-width: 28px; }
.tt-last { color: var(--c-text-2); min-width: 74px; }
.tt-best { color: var(--c-text-3); min-width: 74px; }
.tt-table tr.fl .tt-best { color: var(--c-purple); font-weight: 700; }
.tt-table tr.pit td { background: rgba(255,214,0,0.04); }
.tt-table tr.pit .tt-gap { color: var(--c-yellow); }
/* Sector dots */
.sectors { display: flex; gap: 2px; align-items: center; }
.s-dot { width: 6px; height: 6px; border-radius: 1px; }
.s-dot.pb { background: var(--c-green); }
.s-dot.ob { background: var(--c-purple); }
.s-dot.sl { background: var(--c-yellow); }
.s-dot.nor { background: var(--c-border-2); }
/* ── Right sidebar ── */
.lt-sidebar {
display: flex;
flex-direction: column;
overflow: hidden;
}
.sb-panel {
display: flex;
flex-direction: column;
overflow: hidden;
border-bottom: 1px solid var(--c-border);
}
.sb-panel:last-child { border-bottom: none; }
.sb-head {
display: flex;
align-items: center;
gap: var(--s2);
padding: var(--s2) var(--s3);
border-bottom: 1px solid var(--c-border);
flex-shrink: 0;
}
.sb-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-text-3);
}
.sb-body { flex: 1; overflow-y: auto; }
/* RC in sidebar */
.rc-side-msg {
display: grid;
grid-template-columns: 44px 1fr;
gap: var(--s2);
padding: 5px var(--s3);
border-bottom: 1px solid var(--c-border);
font-size: 11px;
}
.rc-side-msg:last-child { border-bottom: none; }
.rc-side-lap { font-family: var(--f-mono); color: var(--c-text-3); padding-top: 1px; }
.rc-side-text { color: var(--c-text-2); line-height: 1.4; }
.rc-side-msg.sc .rc-side-text { color: var(--c-yellow); font-weight: 600; }
.rc-side-msg.drs .rc-side-text { color: var(--c-green); }
.rc-side-msg.fl .rc-side-text { color: var(--c-purple); }
.rc-side-msg.flag .rc-side-text { color: var(--c-red); font-weight: 600; }
/* Battles in sidebar */
.battle-row {
display: flex;
align-items: center;
gap: var(--s2);
padding: 6px var(--s3);
border-bottom: 1px solid var(--c-border);
font-size: 11px;
}
.battle-row:last-child { border-bottom: none; }
.battle-drivers { display: flex; align-items: center; gap: 4px; flex: 1; }
.battle-gap { font-family: var(--f-mono); font-size: 12px; font-weight: 700; }
.battle-trend { font-size: 10px; font-family: var(--f-mono); }
/* ── Footer ── */
.lt-footer {
display: flex;
align-items: center;
gap: var(--s5);
height: 36px;
padding: 0 var(--s5);
background: var(--c-surface);
border-top: 1px solid var(--c-border);
font-size: 11px;
flex-shrink: 0;
overflow-x: auto;
}
.fl-item { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.fl-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-3); }
/* ── RESPONSIVE: phone ── */
@media (max-width: 768px) {
html, body { height: auto; overflow: auto; }
.lt-root {
height: auto;
min-height: calc(100vh - 44px);
padding-bottom: 58px;
}
.lt-pinned { display: none; } /* reduce clutter on phone */
.lt-body {
grid-template-columns: 1fr;
flex: none;
overflow: visible;
}
.lt-tower {
border-right: none;
overflow: visible;
flex: none;
}
.lt-tower-scroll { overflow: visible; flex: none; }
.lt-sidebar { display: none; } /* replaced by phone panels */
.lt-footer { display: none; }
/* Phone panels */
.phone-panel {
display: none;
padding: var(--s3);
border-top: 1px solid var(--c-border);
}
.phone-panel.active { display: block; }
.phone-tab-bar { display: flex; }
}
/* ── RESPONSIVE: iPad ── */
@media (min-width: 769px) and (max-width: 1024px) {
.lt-body { grid-template-columns: 1fr 260px; }
.hide-mobile { display: none !important; }
}
</style>
</head>
<body>
<nav class="app-nav">
<a href="index.html" class="nav-logo">box<em>-</em>box</a>
<div class="nav-links">
<a href="command-center.html">Command Center</a>
<a href="live-timing.html" class="active">Live</a>
<a href="race-hub.html">Race Hub</a>
<a href="data-library.html">Data Library</a>
</div>
<div class="nav-right">
<div class="live-badge"><span class="live-dot"></span>RACE</div>
<div class="density-toggle">
<button class="active" onclick="setDensity('default',this)">D</button>
<button onclick="setDensity('compact',this)">C</button>
</div>
</div>
</nav>
<div class="lt-root">
<!-- ── Session Banner ── -->
<div class="lt-banner">
<div class="bi">
<span class="bi-label">Session</span>
<span class="bi-val">Monaco GP — Race</span>
</div>
<div class="bi">
<span class="bi-label">Lap</span>
<span class="bi-val">45 <span style="color:var(--c-text-3);font-size:11px">/ 78</span></span>
</div>
<div class="bi">
<span class="bi-label">Clock</span>
<span class="bi-val mono">1:02:34</span>
</div>
<div class="bi">
<span class="bi-label">Track</span>
<span class="bi-val track-green">● GREEN</span>
</div>
<div class="bi">
<span class="bi-label">DRS</span>
<span class="bi-val t-green">ENABLED</span>
</div>
<div class="bi">
<span class="bi-label">Air / Track</span>
<span class="bi-val t2">25°C / 38°C</span>
</div>
<div class="bi">
<span class="bi-label">Fastest Lap</span>
<span class="bi-val" style="color:var(--c-purple)">NOR 1:14.756</span>
</div>
</div>
<!-- ── Pinned drivers strip ── -->
<div class="lt-pinned">
<span class="lt-pinned-label">Pinned</span>
<div class="pin-card">
<span class="pin-pos">P1</span>
<div class="drv-cell" style="gap:5px">
<div class="drv-bar" style="background:var(--t-fer);height:14px"></div>
<span class="drv-code" style="font-size:12px;color:var(--t-fer)">LEC</span>
</div>
<span class="pin-gap">LEADER</span>
<span class="pin-last">1:15.234</span>
</div>
<div class="pin-card">
<span class="pin-pos">P3</span>
<div class="drv-cell" style="gap:5px">
<div class="drv-bar" style="background:var(--t-mcl);height:14px"></div>
<span class="drv-code" style="font-size:12px;color:var(--t-mcl)">NOR</span>
</div>
<span class="pin-gap">+7.2</span>
<span class="pin-last" style="color:var(--c-purple)">FL 1:14.756</span>
</div>
<div class="pin-card">
<span class="pin-pos">P8</span>
<div class="drv-cell" style="gap:5px">
<div class="drv-bar" style="background:var(--t-wil);height:14px"></div>
<span class="drv-code" style="font-size:12px;color:var(--t-wil)">SAI</span>
</div>
<span class="pin-gap t-yellow">PIT OUT</span>
<span class="pin-last">1:41.678</span>
</div>
<span style="margin-left:var(--s3);font-size:10px;color:var(--c-text-3)">Pin drivers with P in TUI or browser shortcut</span>
</div>
<!-- ── Main body ── -->
<div class="lt-body">
<!-- ── Timing Tower ── -->
<div class="lt-tower" id="panel-tower">
<div class="lt-tower-scroll">
<table class="tt-table">
<thead>
<tr>
<th class="left" style="width:28px;padding-left:var(--s4)">P</th>
<th class="left" style="min-width:110px">Driver</th>
<th>Gap</th>
<th>Int</th>
<th style="text-align:center;width:26px">Tyre</th>
<th>Age</th>
<th>Last</th>
<th>Best</th>
<th class="hide-mobile" style="text-align:left">S1 S2 S3</th>
</tr>
</thead>
<tbody>
<tr class="fl">
<td class="left tt-pos" style="padding-left:var(--s4)">1</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-fer)"></div><span class="drv-code">LEC</span><span class="drv-num">16</span></div></td>
<td class="tt-gap" style="color:var(--c-text-3);font-size:11px">LEADER</td>
<td class="tt-int">—</td>
<td style="text-align:center"><span class="tyre M">M</span></td>
<td class="tt-age">12</td>
<td class="tt-last">1:15.234</td>
<td class="tt-best" style="color:var(--c-text-2)">1:14.892</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot pb"></div><div class="s-dot pb"></div><div class="s-dot sl"></div></div></td>
</tr>
<tr>
<td class="left tt-pos" style="padding-left:var(--s4)">2</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-rb)"></div><span class="drv-code">VER</span><span class="drv-num">1</span></div></td>
<td class="tt-gap">+3.456</td>
<td class="tt-int">+3.456</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age">8</td>
<td class="tt-last">1:15.623</td>
<td class="tt-best">1:15.023</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot pb"></div><div class="s-dot nor"></div></div></td>
</tr>
<tr class="fl">
<td class="left tt-pos" style="padding-left:var(--s4)">3</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-mcl)"></div><span class="drv-code">NOR</span><span class="drv-num">4</span></div></td>
<td class="tt-gap">+7.234</td>
<td class="tt-int">+3.778</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age">28</td>
<td class="tt-last">1:15.012</td>
<td class="tt-best">1:14.756</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot ob"></div><div class="s-dot ob"></div><div class="s-dot ob"></div></div></td>
</tr>
<tr>
<td class="left tt-pos" style="padding-left:var(--s4)">4</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-mcl)"></div><span class="drv-code">PIA</span><span class="drv-num">81</span></div></td>
<td class="tt-gap">+12.567</td>
<td class="tt-int">+5.333</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age">22</td>
<td class="tt-last">1:15.890</td>
<td class="tt-best">1:15.234</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot pb"></div><div class="s-dot nor"></div><div class="s-dot nor"></div></div></td>
</tr>
<tr>
<td class="left tt-pos" style="padding-left:var(--s4)">5</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-mer)"></div><span class="drv-code">RUS</span><span class="drv-num">63</span></div></td>
<td class="tt-gap">+18.234</td>
<td class="tt-int">+5.667</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age">14</td>
<td class="tt-last">1:15.456</td>
<td class="tt-best">1:15.100</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot pb"></div><div class="s-dot pb"></div></div></td>
</tr>
<tr>
<td class="left tt-pos" style="padding-left:var(--s4)">6</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-fer)"></div><span class="drv-code">HAM</span><span class="drv-num">44</span></div></td>
<td class="tt-gap">+24.567</td>
<td class="tt-int">+6.333</td>
<td style="text-align:center"><span class="tyre M">M</span></td>
<td class="tt-age">8</td>
<td class="tt-last">1:16.012</td>
<td class="tt-best">1:15.567</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot nor"></div><div class="s-dot pb"></div></div></td>
</tr>
<tr>
<td class="left tt-pos" style="padding-left:var(--s4)">7</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-am)"></div><span class="drv-code">ALO</span><span class="drv-num">14</span></div></td>
<td class="tt-gap">+31.234</td>
<td class="tt-int">+6.667</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age">43</td>
<td class="tt-last">1:16.234</td>
<td class="tt-best">1:15.890</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot nor"></div><div class="s-dot nor"></div></div></td>
</tr>
<tr class="pit">
<td class="left tt-pos" style="padding-left:var(--s4)">8</td>
<td class="left">
<div class="drv-cell">
<div class="drv-bar" style="background:var(--t-wil)"></div>
<span class="drv-code">SAI</span>
<span class="drv-num">55</span>
<span style="font-size:9px;color:var(--c-yellow);font-weight:700;margin-left:2px">PIT OUT</span>
</div>
</td>
<td class="tt-gap" style="color:var(--c-yellow)">+38.901</td>
<td class="tt-int">+7.667</td>
<td style="text-align:center"><span class="tyre S">S</span></td>
<td class="tt-age">2</td>
<td class="tt-last">1:41.678</td>
<td class="tt-best">1:15.456</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot nor"></div><div class="s-dot nor"></div></div></td>
</tr>
<tr>
<td class="left tt-pos" style="padding-left:var(--s4)">9</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-alp)"></div><span class="drv-code t3">GAS</span><span class="drv-num">10</span></div></td>
<td class="tt-gap t3">+45.234</td>
<td class="tt-int t3">+6.333</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age t3">37</td>
<td class="tt-last t3">1:16.890</td>
<td class="tt-best t3">1:16.234</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot nor"></div><div class="s-dot nor"></div></div></td>
</tr>
<tr>
<td class="left tt-pos" style="padding-left:var(--s4)">10</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-haas)"></div><span class="drv-code t3">OCO</span><span class="drv-num">31</span></div></td>
<td class="tt-gap t3">+52.567</td>
<td class="tt-int t3">+7.333</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age t3">23</td>
<td class="tt-last t3">1:17.012</td>
<td class="tt-best t3">1:16.567</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot nor"></div><div class="s-dot nor"></div></div></td>
</tr>
<tr style="opacity:0.45">
<td class="left" style="padding-left:var(--s4);font-family:var(--f-mono);font-size:12px;color:var(--c-text-3);text-align:center">11</td>
<td class="left"><div class="drv-cell"><div class="drv-bar" style="background:var(--t-vcarb)"></div><span class="drv-code t3">TSU</span><span class="drv-num">22</span></div></td>
<td class="tt-gap t3 mono">+1 LAP</td>
<td class="tt-int t3">—</td>
<td style="text-align:center"><span class="tyre H">H</span></td>
<td class="tt-age t3">45</td>
<td class="tt-last t3">1:17.456</td>
<td class="tt-best t3">1:17.012</td>
<td class="hide-mobile left"><div class="sectors"><div class="s-dot nor"></div><div class="s-dot nor"></div><div class="s-dot nor"></div></div></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ── Right Sidebar ── -->
<div class="lt-sidebar">
<!-- Race Control -->
<div class="sb-panel" style="flex:1.8">
<div class="sb-head">
<span class="sb-title">Race Control</span>
<span class="dot live" style="margin-left:auto"></span>
</div>
<div class="sb-body">
<div class="rc-side-msg drs">
<span class="rc-side-lap">L27</span>
<span class="rc-side-text">DRS ENABLED — Lap 27</span>
</div>
<div class="rc-side-msg sc">
<span class="rc-side-lap">L26</span>
<span class="rc-side-text">SAFETY CAR IN THIS LAP</span>
</div>
<div class="rc-side-msg sc">
<span class="rc-side-lap">L23</span>
<span class="rc-side-text">SC DEPLOYED — ALB retirement T10</span>
</div>
<div class="rc-side-msg">
<span class="rc-side-lap">L35</span>
<span class="rc-side-text">5s PENALTY — RUS · Unsafe release</span>
</div>
<div class="rc-side-msg fl">
<span class="rc-side-lap">L38</span>
<span class="rc-side-text">FASTEST LAP — NOR 1:14.756</span>
</div>
<div class="rc-side-msg">
<span class="rc-side-lap">L3</span>
<span class="rc-side-text">DRS ENABLED — Lap 3</span>
</div>
<div class="rc-side-msg">
<span class="rc-side-lap">L1</span>
<span class="rc-side-text">RACE START — Track Clear</span>
</div>
</div>
</div>
<!-- Battles -->
<div class="sb-panel" style="flex:1">
<div class="sb-head">
<span class="sb-title">Battles</span>
</div>
<div class="sb-body">
<div class="battle-row">
<div class="battle-drivers">
<span class="drv-code" style="color:var(--t-mcl)">NOR</span>
<span class="t3" style="font-size:10px">vs</span>
<span class="drv-code" style="color:var(--t-mcl);opacity:.7">PIA</span>
</div>
<span class="battle-gap">+5.3s</span>
<span class="battle-trend t-green">▼</span>
</div>
<div class="battle-row">
<div class="battle-drivers">
<span class="drv-code" style="color:var(--t-fer)">HAM</span>
<span class="t3" style="font-size:10px">vs</span>
<span class="drv-code" style="color:var(--t-am)">ALO</span>
</div>
<span class="battle-gap">+6.3s</span>
<span class="battle-trend t3">—</span>
</div>
<div class="battle-row">
<div class="battle-drivers">
<span class="drv-code" style="color:var(--t-wil)">SAI</span>
<span class="t3" style="font-size:10px">vs</span>
<span class="drv-code" style="color:var(--t-alp)">GAS</span>
</div>
<span class="battle-gap t-orange">+6.4s</span>
<span class="battle-trend t-red">▲</span>
</div>
</div>
</div>
<!-- Pit Window -->
<div class="sb-panel" style="flex:1.2">
<div class="sb-head">
<span class="sb-title">Pit Window</span>
<span class="t3" style="font-size:10px;margin-left:var(--s2)">L45</span>
</div>
<div class="sb-body">
<div class="pit-row">
<div class="drv-cell" style="gap:5px;flex:1">
<div class="drv-bar" style="background:var(--t-fer);height:14px"></div>
<span class="drv-code" style="font-size:12px">LEC</span>
</div>
<span class="tyre M" style="width:16px;height:16px;font-size:8px;margin:0 4px">M</span>
<span class="pit-tyre-age">L12</span>
<span class="pit-status soon">SOON</span>
</div>
<div class="pit-row">
<div class="drv-cell" style="gap:5px;flex:1">
<div class="drv-bar" style="background:var(--t-rb);height:14px"></div>
<span class="drv-code" style="font-size:12px">VER</span>
</div>
<span class="tyre H" style="width:16px;height:16px;font-size:8px;margin:0 4px">H</span>
<span class="pit-tyre-age">L8</span>
<span class="pit-status open">OPEN</span>
</div>
<div class="pit-row">
<div class="drv-cell" style="gap:5px;flex:1">
<div class="drv-bar" style="background:var(--t-mcl);height:14px"></div>
<span class="drv-code" style="font-size:12px">NOR</span>
</div>
<span class="tyre H" style="width:16px;height:16px;font-size:8px;margin:0 4px">H</span>
<span class="pit-tyre-age">L28</span>
<span class="pit-status overdue">OVERDUE</span>
</div>
<div class="pit-row">
<div class="drv-cell" style="gap:5px;flex:1">
<div class="drv-bar" style="background:var(--t-mer);height:14px"></div>
<span class="drv-code" style="font-size:12px">RUS</span>
</div>
<span class="tyre H" style="width:16px;height:16px;font-size:8px;margin:0 4px">H</span>
<span class="pit-tyre-age">L14</span>
<span class="pit-status open">OPEN</span>
</div>
<div class="pit-row">
<div class="drv-cell" style="gap:5px;flex:1">
<div class="drv-bar" style="background:var(--t-wil);height:14px"></div>
<span class="drv-code" style="font-size:12px">SAI</span>
</div>
<span class="tyre S" style="width:16px;height:16px;font-size:8px;margin:0 4px">S</span>
<span class="pit-tyre-age">L2</span>
<span class="pit-status done">DONE</span>
</div>
</div>
</div>
</div><!-- /lt-sidebar -->
</div><!-- /lt-body -->
<!-- ── Footer ── -->
<div class="lt-footer">
<div class="fl-item">
<span class="fl-label">Fastest Lap</span>
<div class="drv-cell" style="gap:5px">
<div class="drv-bar" style="background:var(--t-mcl);height:14px"></div>
<span style="font-weight:700;color:var(--c-purple)">NOR</span>
</div>
<span class="mono" style="color:var(--c-purple)">1:14.756</span>
<span class="t3 mono" style="font-size:11px">L38</span>
</div>
<div style="margin-left:auto;display:flex;align-items:center;gap:var(--s4)">
<div class="fl-item">
<span class="fl-label">S1</span>
<span class="mono t-purple">NOR 19.234</span>
</div>
<div class="fl-item">
<span class="fl-label">S2</span>
<span class="mono t-purple">LEC 32.456</span>
</div>
<div class="fl-item">
<span class="fl-label">S3</span>
<span class="mono t-purple">NOR 23.066</span>
</div>
<div class="fl-item" style="margin-left:var(--s3)">
<span class="fl-label">Lead Change</span>
<span class="t2 mono">L2 LEC overtook VER</span>
</div>
</div>
</div>
<!-- ── Phone panels (desktop: hidden via CSS above) ── -->
<div class="phone-panel active" id="phone-panel-tower" style="padding:0;display:none"></div>
<div class="phone-panel" id="phone-panel-rc" style="display:none">
<div style="font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-3);margin-bottom:var(--s3)">Race Control</div>
<div class="rc-side-msg drs"><span class="rc-side-lap">L27</span><span class="rc-side-text">DRS ENABLED — Lap 27</span></div>
<div class="rc-side-msg sc"><span class="rc-side-lap">L26</span><span class="rc-side-text">SAFETY CAR IN THIS LAP</span></div>
<div class="rc-side-msg sc"><span class="rc-side-lap">L23</span><span class="rc-side-text">SC DEPLOYED — ALB retirement T10</span></div>
<div class="rc-side-msg"><span class="rc-side-lap">L35</span><span class="rc-side-text">5s PENALTY — RUS · Unsafe release</span></div>
<div class="rc-side-msg fl"><span class="rc-side-lap">L38</span><span class="rc-side-text">FASTEST LAP — NOR 1:14.756</span></div>
</div>
<div class="phone-panel" id="phone-panel-battles" style="display:none">
<div style="font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-3);margin-bottom:var(--s3)">Battles</div>
<div class="battle-row"><div class="battle-drivers"><span class="drv-code" style="color:var(--t-mcl)">NOR</span><span class="t3" style="font-size:10px">vs</span><span class="drv-code" style="color:var(--t-mcl);opacity:.7">PIA</span></div><span class="battle-gap">+5.3s</span><span class="battle-trend t-green">▼ closing</span></div>
<div class="battle-row"><div class="battle-drivers"><span class="drv-code" style="color:var(--t-fer)">HAM</span><span class="t3" style="font-size:10px">vs</span><span class="drv-code" style="color:var(--t-am)">ALO</span></div><span class="battle-gap">+6.3s</span><span class="battle-trend t3">— stable</span></div>
<div class="battle-row"><div class="battle-drivers"><span class="drv-code" style="color:var(--t-wil)">SAI</span><span class="t3" style="font-size:10px">vs</span><span class="drv-code" style="color:var(--t-alp)">GAS</span></div><span class="battle-gap t-orange">+6.4s</span><span class="battle-trend t-red">▲ SAI catching</span></div>
<div style="margin-top:var(--s4);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-3);margin-bottom:var(--s3)">Pit Window</div>
<div class="pit-row"><div class="drv-cell" style="gap:5px;flex:1"><div class="drv-bar" style="background:var(--t-fer);height:14px"></div><span class="drv-code" style="font-size:12px">LEC</span></div><span class="tyre M" style="width:16px;height:16px;font-size:8px;margin:0 4px">M</span><span class="pit-tyre-age">L12</span><span class="pit-status soon">SOON</span></div>
<div class="pit-row"><div class="drv-cell" style="gap:5px;flex:1"><div class="drv-bar" style="background:var(--t-mcl);height:14px"></div><span class="drv-code" style="font-size:12px">NOR</span></div><span class="tyre H" style="width:16px;height:16px;font-size:8px;margin:0 4px">H</span><span class="pit-tyre-age">L28</span><span class="pit-status overdue">OVERDUE</span></div>
</div>
<!-- ── Phone bottom tabs ── -->
<nav class="phone-tab-bar">
<button class="active" onclick="phoneTab('tower',this)">
<span class="tab-icon">⏱</span>Tower
</button>
<button onclick="phoneTab('rc',this)">
<span class="tab-icon">📡</span>RC
</button>
<button onclick="phoneTab('battles',this)">
<span class="tab-icon">⚔</span>Battles
</button>
</nav>
</div><!-- /lt-root -->
<script>
function setDensity(mode, btn) {
document.querySelectorAll('.density-toggle button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.documentElement.classList.toggle('compact', mode === 'compact');
}
function phoneTab(panel, btn) {
if (window.innerWidth > 768) return;
document.querySelectorAll('.phone-tab-bar button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Show/hide timing tower
const tower = document.getElementById('panel-tower');
tower.style.display = panel === 'tower' ? '' : 'none';
// Show/hide phone panels
document.querySelectorAll('.phone-panel').forEach(p => p.style.display = 'none');
if (panel !== 'tower') {
const phonePanel = document.getElementById('phone-panel-' + panel);
if (phonePanel) phonePanel.style.display = 'block';
}
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink