Hugging Face's logo

Spaces:
NitinBot001
/
Techfest2026
Sleeping

App Files Community
NitinBot001 commited on
Commit
4e75900
Β·
verified Β·
1 Parent(s): c2cfef0

Create dashboard.html

Browse files
Files changed (1) hide show
  1. dashboard.html +762 -0
dashboard.html ADDED
@@ -0,0 +1,762 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
6
+ <title>ESP32 TRACKER β€” 12951 Rajdhani</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com"/>
8
+ <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;600;900&display=swap" rel="stylesheet"/>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
10
+ <style>
11
+ :root{
12
+ --bg:#060a0f;--panel:#0a1018;--panel2:#0d1520;
13
+ --border:#142030;--border2:#1e3040;
14
+ --cyan:#00e5ff;--green:#00ff88;--yellow:#ffdd00;
15
+ --red:#ff3355;--orange:#ff8800;--blue:#4488ff;--purple:#bb88ff;
16
+ --dim:#1a2a3a;--text:#8ab8d0;--text2:#5a8aa0;
17
+ --mono:'Share Tech Mono',monospace;--orbit:'Orbitron',sans-serif;
18
+ }
19
+ *{margin:0;padding:0;box-sizing:border-box;}
20
+ html{scroll-behavior:smooth;}
21
+ body{background:var(--bg);color:var(--text);font-family:var(--mono);min-height:100vh;overflow-x:hidden;}
22
+
23
+ /* Grid texture */
24
+ body::after{content:'';position:fixed;inset:0;
25
+ background-image:linear-gradient(rgba(0,229,255,.025) 1px,transparent 1px),
26
+ linear-gradient(90deg,rgba(0,229,255,.025) 1px,transparent 1px);
27
+ background-size:44px 44px;pointer-events:none;z-index:0;}
28
+ /* Scanlines */
29
+ body::before{content:'';position:fixed;inset:0;
30
+ background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,229,255,.01) 3px,rgba(0,229,255,.01) 4px);
31
+ pointer-events:none;z-index:9999;}
32
+
33
+ /* ── HEADER ── */
34
+ header{position:relative;z-index:10;padding:14px 28px;border-bottom:1px solid var(--border);
35
+ display:flex;align-items:center;justify-content:space-between;background:rgba(0,229,255,.03);}
36
+ .logo{font-family:var(--orbit);font-size:13px;font-weight:900;color:var(--cyan);
37
+ letter-spacing:5px;text-shadow:0 0 24px rgba(0,229,255,.5);}
38
+ .logo span{font-size:9px;opacity:.35;font-family:var(--mono);font-weight:400;margin-left:8px;letter-spacing:2px;}
39
+ .hdr-right{display:flex;gap:12px;align-items:center;}
40
+ .ts-disp{font-size:10px;opacity:.3;letter-spacing:1px;}
41
+ .health-dot{width:8px;height:8px;border-radius:50%;background:var(--dim);
42
+ box-shadow:0 0 6px var(--dim);transition:all .4s;}
43
+ .health-dot.ok{background:var(--green);box-shadow:0 0 10px var(--green);}
44
+ .health-dot.err{background:var(--red);box-shadow:0 0 10px var(--red);}
45
+ .pill{font-size:9px;padding:4px 14px;border-radius:2px;letter-spacing:3px;
46
+ text-transform:uppercase;border:1px solid;transition:all .4s;}
47
+ .pill.live{color:var(--green);border-color:var(--green);background:rgba(0,255,136,.07);}
48
+ .pill.wait{color:var(--yellow);border-color:var(--yellow);background:rgba(255,221,0,.07);}
49
+ .pill.dead{color:var(--red);border-color:var(--red);background:rgba(255,51,85,.07);}
50
+
51
+ /* ── CONFIG BAR ── */
52
+ .cfg-bar{position:relative;z-index:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
53
+ padding:9px 28px;border-bottom:1px solid var(--border);background:rgba(0,229,255,.015);font-size:10px;letter-spacing:2px;}
54
+ .cfg-bar label{opacity:.3;text-transform:uppercase;white-space:nowrap;}
55
+ .cfg-inp,.cfg-sel{background:#080e14;border:1px solid var(--dim);color:var(--cyan);
56
+ font-family:var(--mono);font-size:10px;padding:4px 8px;outline:none;cursor:pointer;letter-spacing:1px;}
57
+ .cfg-inp{width:200px;color:var(--text);}
58
+ .cfg-inp:focus{border-color:var(--cyan);color:var(--cyan);}
59
+ .btn{background:none;border:1px solid var(--dim);color:var(--text2);font-family:var(--mono);
60
+ font-size:9px;padding:4px 12px;cursor:pointer;letter-spacing:2px;text-transform:uppercase;transition:all .3s;}
61
+ .btn:hover{border-color:var(--cyan);color:var(--cyan);}
62
+ .btn.danger{border-color:#3a1020;}
63
+ .btn.danger:hover{border-color:var(--red);color:var(--red);}
64
+ .btn.accent{border-color:var(--border2);color:var(--green);}
65
+ .btn.accent:hover{border-color:var(--green);}
66
+ .cfg-right{margin-left:auto;display:flex;gap:8px;align-items:center;}
67
+ #pkt-count{font-size:9px;opacity:.2;letter-spacing:1px;}
68
+
69
+ /* ── SECTION LABEL ── */
70
+ .slabel{font-size:9px;letter-spacing:3px;text-transform:uppercase;opacity:.3;margin-bottom:10px;}
71
+
72
+ /* ── TRAIN ROUTE ── */
73
+ .route-section{position:relative;z-index:1;padding:20px 28px 8px;}
74
+ .route-wrap{background:var(--panel);border:1px solid var(--border);padding:20px 28px 16px;position:relative;}
75
+ .route-track{position:relative;height:4px;background:var(--dim);margin:30px 0 40px;}
76
+ .route-track::before{content:'';position:absolute;inset:0;
77
+ background:linear-gradient(90deg,transparent,var(--border2) 4%,var(--border2) 96%,transparent);}
78
+ .route-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));
79
+ transition:width .6s ease;box-shadow:0 0 8px rgba(0,229,255,.4);}
80
+ .station-dot{position:absolute;top:50%;transform:translate(-50%,-50%);
81
+ width:10px;height:10px;border-radius:50%;border:2px solid var(--dim);background:var(--bg);
82
+ transition:all .4s;z-index:2;}
83
+ .station-dot.passed{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
84
+ .station-dot.current{border-color:var(--green);background:var(--green);
85
+ box-shadow:0 0 14px var(--green);animation:pulse 1.5s ease-in-out infinite;}
86
+ .station-label{position:absolute;top:16px;left:50%;transform:translateX(-50%);
87
+ font-size:8px;white-space:nowrap;letter-spacing:1px;opacity:.4;text-align:center;
88
+ transition:all .4s;}
89
+ .station-label.passed,.station-label.current{opacity:.8;}
90
+ .station-dist{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);
91
+ font-size:7px;white-space:nowrap;opacity:.25;letter-spacing:1px;}
92
+ .train-dot{position:absolute;top:50%;transform:translate(-50%,-50%);
93
+ width:18px;height:18px;border-radius:50%;background:var(--cyan);z-index:10;
94
+ box-shadow:0 0 16px var(--cyan),0 0 40px rgba(0,229,255,.3);
95
+ transition:left .6s linear;}
96
+ .route-info{display:flex;justify-content:space-between;font-size:9px;opacity:.25;letter-spacing:1px;margin-top:4px;}
97
+
98
+ @keyframes pulse{0%,100%{box-shadow:0 0 8px var(--green);}50%{box-shadow:0 0 20px var(--green),0 0 40px rgba(0,255,136,.3);}}
99
+
100
+ /* ── SPEED GAUGE ── */
101
+ .gauge-section{position:relative;z-index:1;padding:12px 28px;}
102
+ .gauge-inner{background:var(--panel);border:1px solid var(--border);padding:16px 20px;
103
+ display:flex;align-items:center;gap:20px;}
104
+ .spd-big{font-family:var(--orbit);font-size:36px;color:var(--cyan);min-width:100px;
105
+ text-shadow:0 0 16px rgba(0,229,255,.6);line-height:1;}
106
+ .spd-big sub{font-size:12px;opacity:.4;margin-left:4px;}
107
+ .gauge-bar-col{flex:1;}
108
+ .gauge-bar-wrap{height:8px;background:var(--dim);position:relative;overflow:hidden;margin-bottom:6px;}
109
+ .gauge-bar-fill{height:100%;width:0%;
110
+ background:linear-gradient(90deg,var(--green),var(--cyan) 50%,var(--yellow));
111
+ transition:width .3s ease;box-shadow:0 0 8px rgba(0,229,255,.3);}
112
+ .gauge-meta{display:flex;justify-content:space-between;font-size:9px;opacity:.3;letter-spacing:1px;}
113
+ .uptime-disp{font-size:10px;opacity:.3;min-width:100px;text-align:right;letter-spacing:1px;}
114
+
115
+ /* ── CARDS ── */
116
+ .cards{position:relative;z-index:1;display:grid;
117
+ grid-template-columns:repeat(4,1fr);gap:10px;padding:0 28px 0;}
118
+ @media(max-width:1000px){.cards{grid-template-columns:repeat(4,1fr);}}
119
+ @media(max-width:700px){.cards{grid-template-columns:1fr 1fr;}}
120
+ .card{background:var(--panel);border:1px solid var(--border);
121
+ border-top-width:2px;padding:14px 16px;position:relative;overflow:hidden;transition:border-color .3s;}
122
+ .card:hover{border-color:var(--border2);}
123
+ .card.c-pos{border-top-color:var(--cyan);}
124
+ .card.c-gps{border-top-color:var(--purple);}
125
+ .card.c-volt{border-top-color:var(--blue);}
126
+ .card.c-curr{border-top-color:var(--yellow);}
127
+ .card.c-pwr{border-top-color:var(--orange);}
128
+ .card.c-draw{border-top-color:var(--red);}
129
+ .card.c-gen{border-top-color:var(--green);}
130
+ .card.c-energy{border-top-color:#aa44ff;}
131
+ .card-lbl{font-size:8px;letter-spacing:2px;text-transform:uppercase;opacity:.3;margin-bottom:8px;}
132
+ .card-val{font-family:var(--orbit);font-size:22px;line-height:1;color:#fff;word-break:break-all;}
133
+ .card-val.c-pos{color:var(--cyan);text-shadow:0 0 10px rgba(0,229,255,.4);}
134
+ .card-val.c-gps{color:var(--purple);text-shadow:0 0 10px rgba(187,136,255,.4);font-size:13px;line-height:1.6;}
135
+ .card-val.c-volt{color:var(--blue);text-shadow:0 0 10px rgba(68,136,255,.4);}
136
+ .card-val.c-curr{color:var(--yellow);text-shadow:0 0 10px rgba(255,221,0,.4);}
137
+ .card-val.c-pwr{color:var(--orange);text-shadow:0 0 10px rgba(255,136,0,.4);}
138
+ .card-val.c-draw{color:var(--red);text-shadow:0 0 10px rgba(255,51,85,.4);}
139
+ .card-val.c-gen{color:var(--green);text-shadow:0 0 10px rgba(0,255,136,.4);}
140
+ .card-val.c-energy{color:#bb66ff;text-shadow:0 0 10px rgba(170,68,255,.4);}
141
+ .card-unit{font-size:10px;opacity:.35;font-family:var(--mono);margin-left:2px;}
142
+ .card-sub{font-size:9px;opacity:.25;margin-top:5px;letter-spacing:.5px;}
143
+
144
+ /* ── SECOND CARDS ROW ── */
145
+ .cards2{position:relative;z-index:1;display:grid;
146
+ grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 28px 0;}
147
+ @media(max-width:700px){.cards2{grid-template-columns:1fr 1fr;}}
148
+
149
+ /* ── CHARTS ── */
150
+ .charts{position:relative;z-index:1;display:grid;
151
+ grid-template-columns:1fr 1fr;gap:10px;padding:12px 28px 0;}
152
+ @media(max-width:700px){.charts{grid-template-columns:1fr;}}
153
+ .chart-box{background:var(--panel);border:1px solid var(--border);padding:14px 16px;}
154
+ .chart-title{font-size:8px;letter-spacing:3px;text-transform:uppercase;
155
+ opacity:.3;margin-bottom:10px;display:flex;justify-content:space-between;}
156
+ .chart-title span{opacity:.6;font-family:var(--orbit);font-size:10px;}
157
+ canvas.mini{width:100%!important;height:80px!important;display:block;}
158
+
159
+ /* ── STATS PANEL ── */
160
+ .stats-section{position:relative;z-index:1;padding:12px 28px 0;}
161
+ .stats-grid{background:var(--panel);border:1px solid var(--border);padding:16px 20px;
162
+ display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
163
+ @media(max-width:700px){.stats-grid{grid-template-columns:1fr;}}
164
+ .stat-block{padding:12px 16px;border-right:1px solid var(--border);}
165
+ .stat-block:last-child{border-right:none;}
166
+ .stat-block-title{font-size:8px;letter-spacing:3px;opacity:.3;text-transform:uppercase;margin-bottom:10px;}
167
+ .stat-row{display:flex;justify-content:space-between;font-size:9px;padding:3px 0;border-bottom:1px solid rgba(20,32,48,.5);}
168
+ .stat-row:last-child{border-bottom:none;}
169
+ .stat-k{opacity:.35;letter-spacing:1px;}
170
+ .stat-v{color:var(--cyan);font-family:var(--orbit);font-size:9px;}
171
+
172
+ /* ── LOG ── */
173
+ .log-section{position:relative;z-index:1;padding:12px 28px 28px;}
174
+ .log-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
175
+ .log-box{background:var(--panel);border:1px solid var(--border);height:130px;
176
+ overflow-y:auto;padding:8px 14px;font-size:9px;line-height:1.9;}
177
+ .log-box::-webkit-scrollbar{width:3px;}
178
+ .log-box::-webkit-scrollbar-thumb{background:var(--dim);}
179
+ .le-ts{color:var(--dim);}
180
+ .le-ok{color:var(--green);}
181
+ .le-warn{color:var(--yellow);}
182
+ .le-err{color:var(--red);}
183
+ .le-info{color:var(--cyan);}
184
+
185
+ /* Modal overlay for clear confirm */
186
+ .modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;
187
+ align-items:center;justify-content:center;}
188
+ .modal-bg.show{display:flex;}
189
+ .modal{background:var(--panel);border:1px solid var(--red);padding:28px 32px;min-width:300px;text-align:center;}
190
+ .modal h3{font-family:var(--orbit);color:var(--red);font-size:13px;letter-spacing:3px;margin-bottom:12px;}
191
+ .modal p{font-size:10px;opacity:.5;margin-bottom:20px;letter-spacing:1px;}
192
+ .modal-btns{display:flex;gap:12px;justify-content:center;}
193
+
194
+ @keyframes blink{50%{opacity:0;}}
195
+ .blink{animation:blink 1s steps(1) infinite;}
196
+ </style>
197
+ </head>
198
+ <body>
199
+
200
+ <!-- ── HEADER ────────────────────────────────────────── -->
201
+ <header>
202
+ <div class="logo">
203
+ ESP32 TRACKER
204
+ <span>// 12951 MUMBAI RAJDHANI EXPRESS</span>
205
+ </div>
206
+ <div class="hdr-right">
207
+ <div class="health-dot" id="hdot" title="Server health"></div>
208
+ <span class="ts-disp" id="last-ts">--:--:--</span>
209
+ <div class="pill wait" id="status-pill">WAITING</div>
210
+ </div>
211
+ </header>
212
+
213
+ <!-- ── CONFIG BAR ─────────────────────────────────────── -->
214
+ <div class="cfg-bar">
215
+ <label>API</label>
216
+ <input class="cfg-inp" id="api-url" value="https://nitinbot001-techfest2026.hf.space"
217
+ onchange="API=this.value.replace(/\/$/,'')" placeholder="http://192.168.x.x:8000"/>
218
+
219
+ <label>Refresh</label>
220
+ <select class="cfg-sel" id="sel-refresh" onchange="setRefresh(+this.value)">
221
+ <option value="1000">1s</option>
222
+ <option value="3000" selected>3s</option>
223
+ <option value="5000">5s</option>
224
+ <option value="10000">10s</option>
225
+ </select>
226
+
227
+ <label>History</label>
228
+ <select class="cfg-sel" id="sel-window" onchange="histWindow=+this.value;fetchAll()">
229
+ <option value="50">50 pts</option>
230
+ <option value="100" selected>100 pts</option>
231
+ <option value="200">200 pts</option>
232
+ <option value="500">500 pts</option>
233
+ </select>
234
+
235
+ <label>Device</label>
236
+ <select class="cfg-sel" id="sel-device" onchange="selDevice=this.value">
237
+ <option value="">All</option>
238
+ </select>
239
+
240
+ <div class="cfg-right">
241
+ <span id="pkt-count">0 packets</span>
242
+ <button class="btn" onclick="fetchStats()">↻ STATS</button>
243
+ <button class="btn accent" onclick="exportCSV()">⬇ EXPORT</button>
244
+ <button class="btn danger" onclick="showClearModal()">βœ• CLEAR</button>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- ── TRAIN ROUTE VISUALIZER ─────────────────────────── -->
249
+ <div class="route-section">
250
+ <div class="slabel">β–Έ TRAIN ROUTE β€” 12951 Mumbai Rajdhani Express (MMCT β†’ NDLS)</div>
251
+ <div class="route-wrap">
252
+ <div class="route-track" id="route-track">
253
+ <div class="route-fill" id="route-fill" style="width:0%"></div>
254
+ <!-- Station dots injected by JS -->
255
+ <div class="train-dot" id="train-dot" style="left:0%"></div>
256
+ </div>
257
+ <div class="route-info">
258
+ <span>Mumbai Central Β· 0 km</span>
259
+ <span id="cur-station-label" style="color:var(--cyan);opacity:.7;font-size:9px;letter-spacing:2px;">β€”</span>
260
+ <span>New Delhi Β· 1384 km</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- ── SPEED GAUGE ─────────────────────────────────────── -->
266
+ <div class="gauge-section">
267
+ <div class="gauge-inner">
268
+ <div class="spd-big" id="spd-big">0<sub>%</sub></div>
269
+ <div class="gauge-bar-col">
270
+ <div class="gauge-bar-wrap">
271
+ <div class="gauge-bar-fill" id="spd-bar"></div>
272
+ </div>
273
+ <div class="gauge-meta">
274
+ <span id="spd-ups-disp">0.00 u/s</span>
275
+ <span id="spd-max-disp">max β€”%</span>
276
+ <span id="spd-avg-disp">avg β€”%</span>
277
+ </div>
278
+ </div>
279
+ <div class="uptime-disp" id="uptime-disp">uptime β€” s</div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- ── METRIC CARDS ROW 1 ────────────────────��────────── -->
284
+ <div class="cards">
285
+ <div class="card c-pos">
286
+ <div class="card-lbl">β–Έ Position X (km)</div>
287
+ <div class="card-val c-pos" id="v-posx">β€”<span class="card-unit">km</span></div>
288
+ <div class="card-sub" id="s-dist">dist β€”</div>
289
+ </div>
290
+ <div class="card c-gps">
291
+ <div class="card-lbl">βŠ• GPS Coordinates</div>
292
+ <div class="card-val c-gps" id="v-gps">β€”</div>
293
+ <div class="card-sub" id="s-station">β€”</div>
294
+ </div>
295
+ <div class="card c-volt">
296
+ <div class="card-lbl">⚑ Voltage</div>
297
+ <div class="card-val c-volt" id="v-volt">β€”<span class="card-unit">V</span></div>
298
+ <div class="card-sub" id="s-volt">avg β€”</div>
299
+ </div>
300
+ <div class="card c-curr">
301
+ <div class="card-lbl">γ€œ Current</div>
302
+ <div class="card-val c-curr" id="v-curr">β€”<span class="card-unit">mA</span></div>
303
+ <div class="card-sub" id="s-curr">avg β€” mA</div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- ── METRIC CARDS ROW 2 ─────────────────────────────── -->
308
+ <div class="cards2">
309
+ <div class="card c-pwr">
310
+ <div class="card-lbl">β—ˆ Power</div>
311
+ <div class="card-val c-pwr" id="v-pwr">β€”<span class="card-unit">mW</span></div>
312
+ <div class="card-sub" id="s-pwr">β€” W</div>
313
+ </div>
314
+ <div class="card c-draw">
315
+ <div class="card-lbl">↓ Drawn</div>
316
+ <div class="card-val c-draw" id="v-draw">β€”<span class="card-unit">mW</span></div>
317
+ <div class="card-sub" id="s-draw">power consumed</div>
318
+ </div>
319
+ <div class="card c-gen">
320
+ <div class="card-lbl">↑ Generated</div>
321
+ <div class="card-val c-gen" id="v-gen">β€”<span class="card-unit">mW</span></div>
322
+ <div class="card-sub" id="s-gen">regen / backfeed</div>
323
+ </div>
324
+ <div class="card c-energy">
325
+ <div class="card-lbl">∫ Energy Used</div>
326
+ <div class="card-val c-energy" id="v-energy">β€”<span class="card-unit">mWh</span></div>
327
+ <div class="card-sub" id="s-energy">session total</div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- ── CHARTS ─────────────────────────────────────────── -->
332
+ <div class="charts">
333
+ <div class="chart-box">
334
+ <div class="chart-title">Speed % History <span id="ch-spd-now">β€”</span></div>
335
+ <canvas class="mini" id="c-speed"></canvas>
336
+ </div>
337
+ <div class="chart-box">
338
+ <div class="chart-title">Power mW History <span id="ch-pwr-now">β€”</span></div>
339
+ <canvas class="mini" id="c-power"></canvas>
340
+ </div>
341
+ <div class="chart-box">
342
+ <div class="chart-title">Voltage V History <span id="ch-volt-now">β€”</span></div>
343
+ <canvas class="mini" id="c-voltage"></canvas>
344
+ </div>
345
+ <div class="chart-box">
346
+ <div class="chart-title">Current mA History <span id="ch-curr-now">β€”</span></div>
347
+ <canvas class="mini" id="c-current"></canvas>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- ── SESSION STATS ──────────────────────────────────── -->
352
+ <div class="stats-section">
353
+ <div class="slabel" style="margin-top:12px;">β–Έ SESSION STATS</div>
354
+ <div class="stats-grid" id="stats-grid">
355
+ <div class="stat-block">
356
+ <div class="stat-block-title">Motion</div>
357
+ <div class="stat-row"><span class="stat-k">Packets</span><span class="stat-v" id="st-pkts">β€”</span></div>
358
+ <div class="stat-row"><span class="stat-k">Time</span><span class="stat-v" id="st-time">β€”</span></div>
359
+ <div class="stat-row"><span class="stat-k">Speed avg</span><span class="stat-v" id="st-spd-avg">β€”</span></div>
360
+ <div class="stat-row"><span class="stat-k">Speed max</span><span class="stat-v" id="st-spd-max">β€”</span></div>
361
+ <div class="stat-row"><span class="stat-k">Distance</span><span class="stat-v" id="st-dist">β€”</span></div>
362
+ </div>
363
+ <div class="stat-block">
364
+ <div class="stat-block-title">Power</div>
365
+ <div class="stat-row"><span class="stat-k">Voltage avg</span><span class="stat-v" id="st-volt">β€”</span></div>
366
+ <div class="stat-row"><span class="stat-k">Current avg</span><span class="stat-v" id="st-curr">β€”</span></div>
367
+ <div class="stat-row"><span class="stat-k">Power avg</span><span class="stat-v" id="st-pwr-avg">β€”</span></div>
368
+ <div class="stat-row"><span class="stat-k">Power max</span><span class="stat-v" id="st-pwr-max">β€”</span></div>
369
+ <div class="stat-row"><span class="stat-k">Energy total</span><span class="stat-v" id="st-energy">β€”</span></div>
370
+ </div>
371
+ <div class="stat-block">
372
+ <div class="stat-block-title">Session</div>
373
+ <div class="stat-row"><span class="stat-k">Device</span><span class="stat-v" id="st-dev">β€”</span></div>
374
+ <div class="stat-row"><span class="stat-k">First packet</span><span class="stat-v" id="st-first">β€”</span></div>
375
+ <div class="stat-row"><span class="stat-k">Last packet</span><span class="stat-v" id="st-last">β€”</span></div>
376
+ <div class="stat-row"><span class="stat-k">Total stored</span><span class="stat-v" id="st-total">β€”</span></div>
377
+ <div class="stat-row"><span class="stat-k">Drawn total</span><span class="stat-v" id="st-drawn">β€”</span></div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- ── EVENT LOG ──────────────────────────────────────── -->
383
+ <div class="log-section">
384
+ <div class="log-hdr">
385
+ <span style="font-size:9px;letter-spacing:3px;opacity:.3;text-transform:uppercase;">β–Έ Event Log</span>
386
+ <button class="btn" onclick="clearLog()">CLR</button>
387
+ </div>
388
+ <div class="log-box" id="log"></div>
389
+ </div>
390
+
391
+ <!-- ── CLEAR CONFIRM MODAL ────────────────────────────── -->
392
+ <div class="modal-bg" id="modal-bg">
393
+ <div class="modal">
394
+ <h3>CONFIRM CLEAR</h3>
395
+ <p>This will delete all records from the database.<br/>This action cannot be undone.</p>
396
+ <div class="modal-btns">
397
+ <button class="btn" onclick="hideClearModal()">CANCEL</button>
398
+ <button class="btn danger" onclick="doClear()">DELETE ALL</button>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <script>
404
+ // ── CONFIG ────────────────────────────────────────────────
405
+ let API = document.getElementById('api-url').value;
406
+ let selDevice = '';
407
+ let histWindow = 100;
408
+ let refreshMs = 3000;
409
+ let timer = null;
410
+ let totalPkts = 0;
411
+
412
+ // ── TRAIN STATIONS ────────────────────────────────────────
413
+ const STATIONS = [
414
+ { name:'Mumbai Central', km:0, pct:0 },
415
+ { name:'Surat', km:263, pct:19.0 },
416
+ { name:'Vadodara Jn', km:392, pct:28.3 },
417
+ { name:'Ratlam Jn', km:627, pct:45.3 },
418
+ { name:'Kota Jn', km:864, pct:62.4 },
419
+ { name:'New Delhi', km:1384, pct:100 },
420
+ ];
421
+ const TOTAL_KM = 1384;
422
+
423
+ // Build station dots on track
424
+ (function buildRoute(){
425
+ const track = document.getElementById('route-track');
426
+ STATIONS.forEach((s, i) => {
427
+ // Dot
428
+ const dot = document.createElement('div');
429
+ dot.className = 'station-dot';
430
+ dot.id = 'sdot-' + i;
431
+ dot.style.left = s.pct + '%';
432
+ track.appendChild(dot);
433
+ // Name label
434
+ const lbl = document.createElement('div');
435
+ lbl.className = 'station-label';
436
+ lbl.id = 'slbl-' + i;
437
+ lbl.style.left = s.pct + '%';
438
+ lbl.textContent = s.name.replace(' Jn','').replace(' Central','');
439
+ track.appendChild(lbl);
440
+ // km label
441
+ const km = document.createElement('div');
442
+ km.className = 'station-dist';
443
+ km.style.left = s.pct + '%';
444
+ km.textContent = s.km + ' km';
445
+ track.appendChild(km);
446
+ });
447
+ })();
448
+
449
+ function updateRoute(posX) {
450
+ const clampedX = Math.min(Math.max(posX, 0), TOTAL_KM);
451
+ const pct = (clampedX / TOTAL_KM) * 100;
452
+ document.getElementById('route-fill').style.width = pct + '%';
453
+ document.getElementById('train-dot').style.left = pct + '%';
454
+
455
+ // Station states
456
+ let curName = 'β€”';
457
+ STATIONS.forEach((s, i) => {
458
+ const dot = document.getElementById('sdot-' + i);
459
+ const lbl = document.getElementById('slbl-' + i);
460
+ if (!dot) return;
461
+ const isLast = i === STATIONS.length - 1;
462
+ const nextKm = isLast ? TOTAL_KM : STATIONS[i + 1].km;
463
+ const isCur = posX >= s.km && posX < nextKm;
464
+ const isPassed = posX >= nextKm || (isLast && posX >= s.km);
465
+ dot.className = 'station-dot' + (isCur ? ' current' : isPassed ? ' passed' : '');
466
+ lbl.className = 'station-label' + (isCur || isPassed ? ' passed' : '');
467
+ if (isCur) curName = s.name.toUpperCase();
468
+ });
469
+ document.getElementById('cur-station-label').textContent =
470
+ curName !== 'β€”' ? 'β–Ά ' + curName : 'β€”';
471
+ }
472
+
473
+ // ── CHARTS INIT ───────────────────────────────────────────
474
+ const chartCfg = (color, unit) => ({
475
+ type: 'line',
476
+ data: { labels: [], datasets: [{ data: [], borderColor: color,
477
+ backgroundColor: color + '18', borderWidth: 1.5,
478
+ pointRadius: 0, fill: true, tension: 0.3 }] },
479
+ options: {
480
+ animation: false,
481
+ responsive: true, maintainAspectRatio: false,
482
+ plugins: { legend: { display: false }, tooltip: {
483
+ callbacks: { label: ctx => ctx.parsed.y.toFixed(2) + ' ' + unit },
484
+ backgroundColor:'#0a1018', borderColor:'#142030', borderWidth:1,
485
+ titleColor:'#8ab8d0', bodyColor: color,
486
+ titleFont:{family:'Share Tech Mono', size:9},
487
+ bodyFont:{family:'Share Tech Mono', size:9},
488
+ }},
489
+ scales: {
490
+ x: { display:false },
491
+ y: { display:true, grid:{ color:'rgba(20,32,48,.8)', drawTicks:false },
492
+ border:{ display:false },
493
+ ticks:{ color:'rgba(90,138,160,.35)', font:{family:'Share Tech Mono',size:8},
494
+ maxTicksLimit:4, padding:4 }}
495
+ }
496
+ }
497
+ });
498
+
499
+ const charts = {
500
+ speed: new Chart(document.getElementById('c-speed'), chartCfg('#00e5ff','%')),
501
+ power: new Chart(document.getElementById('c-power'), chartCfg('#ff8800','mW')),
502
+ voltage: new Chart(document.getElementById('c-voltage'), chartCfg('#4488ff','V')),
503
+ current: new Chart(document.getElementById('c-current'), chartCfg('#ffdd00','mA')),
504
+ };
505
+
506
+ function pushChart(chart, val, maxPts) {
507
+ const ds = chart.data;
508
+ const n = Date.now();
509
+ ds.labels.push('');
510
+ ds.datasets[0].data.push(val);
511
+ while (ds.datasets[0].data.length > maxPts) {
512
+ ds.labels.shift(); ds.datasets[0].data.shift();
513
+ }
514
+ chart.update('none');
515
+ }
516
+
517
+ // ── NEAREST STATION by km ────────────────────────────────
518
+ function nearestStation(km) {
519
+ let best = STATIONS[0], bestD = Infinity;
520
+ STATIONS.forEach(s => {
521
+ const d = Math.abs(s.km - km);
522
+ if (d < bestD) { bestD = d; best = s; }
523
+ });
524
+ return best;
525
+ }
526
+
527
+ // ── FETCH LATEST ─────────────────────────────────────────
528
+ async function fetchLatest() {
529
+ const url = `${API}/api/latest${selDevice ? '?device_id='+selDevice : ''}`;
530
+ const r = await fetch(url);
531
+ if (!r.ok) throw new Error('HTTP ' + r.status);
532
+ const j = await r.json();
533
+ if (!j.latest) throw new Error('no data');
534
+ return j;
535
+ }
536
+
537
+ // ── FETCH HISTORY ─────────────────────────────────────────
538
+ async function fetchHistory() {
539
+ const q = `limit=${histWindow}${selDevice ? '&device_id='+selDevice : ''}`;
540
+ const r = await fetch(`${API}/api/history?${q}`);
541
+ const j = await r.json();
542
+ return j;
543
+ }
544
+
545
+ // ── FETCH STATS ───────────────────────────────────────────
546
+ async function fetchStats() {
547
+ try {
548
+ const q = selDevice ? '?device_id='+selDevice : '';
549
+ const r = await fetch(`${API}/api/stats${q}`);
550
+ if (!r.ok) return;
551
+ const s = await r.json();
552
+ if (s.error) return;
553
+ document.getElementById('st-pkts').textContent = s.total_packets;
554
+ document.getElementById('st-time').textContent = s.total_time_minutes + ' min';
555
+ document.getElementById('st-spd-avg').textContent = s.speed?.avg_pct + ' %';
556
+ document.getElementById('st-spd-max').textContent = s.speed?.max_pct + ' %';
557
+ document.getElementById('st-dist').textContent = s.position?.total_distance + ' km';
558
+ document.getElementById('st-volt').textContent = s.power?.voltage_avg_V + ' V';
559
+ document.getElementById('st-curr').textContent = s.power?.current_avg_mA + ' mA';
560
+ document.getElementById('st-pwr-avg').textContent = s.power?.power_avg_mW + ' mW';
561
+ document.getElementById('st-pwr-max').textContent = s.power?.power_max_mW + ' mW';
562
+ document.getElementById('st-energy').textContent = s.power?.total_energy_mWh + ' mWh';
563
+ document.getElementById('st-dev').textContent = s.device_id || 'β€”';
564
+ document.getElementById('st-first').textContent = (s.first_packet||'').slice(11,19);
565
+ document.getElementById('st-last').textContent = (s.last_packet||'').slice(11,19);
566
+ document.getElementById('st-drawn').textContent = s.power?.drawn_total_mWh + ' mWh';
567
+ addLog('Stats refreshed βœ“', 'le-info');
568
+ } catch(e) { addLog('Stats error: '+e.message,'le-warn'); }
569
+ }
570
+
571
+ // ── FETCH DEVICES ─────────────────────────────────────────
572
+ async function fetchDevices() {
573
+ const r = await fetch(`${API}/api/devices`);
574
+ const j = await r.json();
575
+ const sel = document.getElementById('sel-device');
576
+ Object.keys(j.devices || {}).forEach(id => {
577
+ if (!sel.querySelector(`option[value="${id}"]`)) {
578
+ const o = document.createElement('option');
579
+ o.value = id; o.textContent = id;
580
+ sel.appendChild(o);
581
+ }
582
+ });
583
+ }
584
+
585
+ // ── HEALTH CHECK ──────────────────────────────────────────
586
+ async function checkHealth() {
587
+ try {
588
+ const r = await fetch(`${API}/health`);
589
+ const j = await r.json();
590
+ const dot = document.getElementById('hdot');
591
+ if (j.status === 'ok') {
592
+ dot.className = 'health-dot ok';
593
+ document.getElementById('st-total').textContent = j.total_records + ' rows';
594
+ }
595
+ } catch(e) {
596
+ document.getElementById('hdot').className = 'health-dot err';
597
+ }
598
+ }
599
+
600
+ // ── UPDATE UI ─────────────────────────────────────────────
601
+ function updateCards(d, stats) {
602
+ // Speed gauge
603
+ const pct = +(d.speed_pct||0);
604
+ document.getElementById('spd-big').innerHTML = pct.toFixed(1) + '<sub>%</sub>';
605
+ document.getElementById('spd-bar').style.width = pct + '%';
606
+ document.getElementById('spd-ups-disp').textContent = (d.speed_ups||0).toFixed(2) + ' u/s';
607
+ document.getElementById('uptime-disp').textContent = 'uptime ' + (d.uptime_sec||0) + ' s';
608
+
609
+ if (stats) {
610
+ document.getElementById('spd-max-disp').textContent = 'max ' + (stats.speed_max_pct||'β€”') + '%';
611
+ document.getElementById('spd-avg-disp').textContent = 'avg ' + (stats.speed_avg_pct||'β€”') + '%';
612
+ }
613
+
614
+ // Position & GPS
615
+ const posX = +(d.pos_x||0);
616
+ const posY = +(d.pos_y||0);
617
+ const posZ = +(d.pos_z||0);
618
+ document.getElementById('v-posx').innerHTML = posX.toFixed(1) + '<span class="card-unit">km</span>';
619
+ document.getElementById('s-dist').textContent = 'total dist ' + (d.total_distance||0).toFixed(1) + ' km';
620
+ document.getElementById('v-gps').innerHTML =
621
+ posY.toFixed(4) + 'Β° N<br>' + posZ.toFixed(4) + 'Β° E';
622
+ const ns = nearestStation(posX);
623
+ document.getElementById('s-station').textContent = 'β‰ˆ ' + ns.name + ' (' + ns.km + ' km)';
624
+
625
+ // Power
626
+ const voltV = +(d.voltage_V||0);
627
+ const currMA = +(d.current_mA||0);
628
+ const pwrMW = +(d.power_mW||0);
629
+ const drwMW = +(d.drawn_mW||0);
630
+ const genMW = +(d.generated_mW||0);
631
+
632
+ document.getElementById('v-volt').innerHTML = voltV.toFixed(3) + '<span class="card-unit">V</span>';
633
+ document.getElementById('v-curr').innerHTML = currMA.toFixed(1) + '<span class="card-unit">mA</span>';
634
+ document.getElementById('v-pwr').innerHTML = pwrMW.toFixed(2) + '<span class="card-unit">mW</span>';
635
+ document.getElementById('v-draw').innerHTML = drwMW.toFixed(2) + '<span class="card-unit">mW</span>';
636
+ document.getElementById('v-gen').innerHTML = genMW.toFixed(2) + '<span class="card-unit">mW</span>';
637
+ document.getElementById('s-pwr').textContent = (pwrMW/1000).toFixed(4) + ' W';
638
+
639
+ if (stats) {
640
+ document.getElementById('s-volt').textContent = 'avg ' + (stats.voltage_avg_V||'β€”') + ' V';
641
+ document.getElementById('s-curr').textContent = 'avg β€” mA';
642
+ }
643
+
644
+ // Train route
645
+ updateRoute(posX);
646
+
647
+ // Charts live values
648
+ document.getElementById('ch-spd-now').textContent = pct.toFixed(1) + ' %';
649
+ document.getElementById('ch-pwr-now').textContent = pwrMW.toFixed(1) + ' mW';
650
+ document.getElementById('ch-volt-now').textContent = voltV.toFixed(3) + ' V';
651
+ document.getElementById('ch-curr-now').textContent = currMA.toFixed(1) + ' mA';
652
+ }
653
+
654
+ function updateStatus(s) {
655
+ const p = document.getElementById('status-pill');
656
+ p.className = 'pill ' + s;
657
+ p.textContent = {live:'LIVE',wait:'WAITING',dead:'OFFLINE'}[s];
658
+ }
659
+
660
+ // ── MAIN FETCH CYCLE ──────────────────────────────────────
661
+ async function fetchAll() {
662
+ try {
663
+ // Latest
664
+ const {latest: d, total_stored} = await fetchLatest();
665
+ updateStatus('live');
666
+ document.getElementById('last-ts').textContent = new Date().toLocaleTimeString();
667
+ totalPkts++;
668
+ document.getElementById('pkt-count').textContent = totalPkts + ' polls';
669
+
670
+ // History
671
+ const hj = await fetchHistory();
672
+ const rds = hj.readings || [];
673
+ updateCards(d, hj.stats);
674
+
675
+ // Update charts from history
676
+ if (rds.length) {
677
+ // Only push latest point to charts
678
+ pushChart(charts.speed, +d.speed_pct, histWindow);
679
+ pushChart(charts.power, +d.power_mW, histWindow);
680
+ pushChart(charts.voltage, +d.voltage_V, histWindow);
681
+ pushChart(charts.current, +d.current_mA, histWindow);
682
+ }
683
+
684
+ // Energy from history window
685
+ if (hj.stats) {
686
+ const energyEst = (hj.stats.power_avg_mW * rds.length * 5) / 3600;
687
+ document.getElementById('v-energy').innerHTML =
688
+ energyEst.toFixed(3) + '<span class="card-unit">mWh</span>';
689
+ document.getElementById('s-energy').textContent =
690
+ rds.length + ' pts Γ— 5s window';
691
+ }
692
+
693
+ // Devices
694
+ await fetchDevices();
695
+
696
+ addLog(
697
+ `X=${(+d.pos_x).toFixed(1)}km | Spd=${(+d.speed_pct).toFixed(1)}% | `+
698
+ `V=${d.voltage_V}V | P=${(+d.power_mW).toFixed(1)}mW | `+
699
+ `${d.device_id}`,
700
+ 'le-ok'
701
+ );
702
+
703
+ } catch(e) {
704
+ updateStatus('dead');
705
+ addLog('Fetch error: ' + e.message, 'le-err');
706
+ }
707
+
708
+ checkHealth();
709
+ }
710
+
711
+ // ── EXPORT ────────────────────────────────────────────────
712
+ function exportCSV() {
713
+ const q = selDevice ? '?device_id='+selDevice : '';
714
+ window.open(`${API}/api/export${q}`, '_blank');
715
+ addLog('CSV export requested', 'le-info');
716
+ }
717
+
718
+ // ── CLEAR ─────────────────────────────────────────────────
719
+ function showClearModal() { document.getElementById('modal-bg').classList.add('show'); }
720
+ function hideClearModal() { document.getElementById('modal-bg').classList.remove('show'); }
721
+ async function doClear() {
722
+ hideClearModal();
723
+ try {
724
+ const q = selDevice ? '?device_id='+selDevice : '';
725
+ const r = await fetch(`${API}/api/clear${q}`, { method:'DELETE' });
726
+ const j = await r.json();
727
+ addLog('βœ“ ' + j.message, 'le-warn');
728
+ // Reset charts
729
+ Object.values(charts).forEach(c => {
730
+ c.data.labels = []; c.data.datasets[0].data = []; c.update('none');
731
+ });
732
+ updateStatus('wait');
733
+ } catch(e) { addLog('Clear error: '+e.message,'le-err'); }
734
+ }
735
+
736
+ // ── REFRESH CONTROL ───────────────────────────────────────
737
+ function setRefresh(ms) {
738
+ refreshMs = ms;
739
+ clearInterval(timer);
740
+ timer = setInterval(fetchAll, refreshMs);
741
+ addLog('Refresh set to ' + ms/1000 + 's', 'le-warn');
742
+ }
743
+
744
+ // ── LOG ───────────────────────────────────────────────────
745
+ function addLog(msg, cls='') {
746
+ const box = document.getElementById('log');
747
+ const ts = new Date().toLocaleTimeString();
748
+ box.innerHTML += `<div><span class="le-ts">[${ts}]</span> <span class="${cls}">${msg}</span></div>`;
749
+ while (box.children.length > 100) box.removeChild(box.firstChild);
750
+ box.scrollTop = box.scrollHeight;
751
+ }
752
+ function clearLog() { document.getElementById('log').innerHTML=''; }
753
+
754
+ // ── BOOT ──────────────────────────────────────────────────
755
+ addLog('Dashboard v3.0 ready β€” Train 12951 Rajdhani Express', 'le-info');
756
+ addLog('Set API URL above if not on localhost', 'le-warn');
757
+ fetchStats();
758
+ fetchAll();
759
+ timer = setInterval(fetchAll, refreshMs);
760
+ </script>
761
+ </body>
762
+ </html>