MeshMapper_WebClient/index.html at main · MeshMapper/MeshMapper_WebClient · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
<!doctype html>
<htmllang="en">

<head>
<metacharset="utf-8" />
<title>MeshMapper</title>
<metaname="viewport" content="width=device-width, initial-scale=1" />
<metaname="description" content="MeshMapper Wardrive — BLE companion">
<metaname="keywords" content="MeshCore,coverage,wardrive,cascadia,ottawamesh,ottawa,meshmapper">
<metaname="Original author" content="Kyle Reed">
<metaname="Modified by" content="MrAlders0n">
<linkrel="manifest" href="content/wardrive.json">
<linkrel="icon" href="content/wardrive-badge.png">
<linkrel="stylesheet" href="content/tailwind.css">
<linkrel="stylesheet" href="content/style.css">

<!-- AES-JS for AES-ECB decryption support (used for channel message encryption) -->
<scriptdefersrc="https://cdn.jsdelivr.net/npm/aes-js@3.1.2/index.min.js"></script>

<style>
/* Double-buffered iframe styles */
 .coverage-frame {
width:100%;
height:400px;
border:0;
position: absolute;
top:0;
left:0;
transition: opacity 0.15s ease-in-out;
 }
 .coverage-frame-active {
opacity:1;
z-index:1;
pointer-events: auto;
 }
 .coverage-frame-hidden {
opacity:0;
z-index:0;
pointer-events: none;
 }
</style>
</head>

<bodyclass="bg-slate-900 text-slate-100">
<mainclass="min-h-screen flex items-start justify-center px-3 pt-1 pb-3">
<divclass="w-full max-w-xl space-y-2">

<!-- App Title -->
<headerclass="flex items-center justify-between gap-2">
<h1class="flex items-center gap-2 text-lg sm:text-xl font-bold truncate min-w-0">
<imgclass="h-12 w-12 sm:h-14 sm:w-14 flex-shrink-0" src="content/wardrive.png" alt="MeshCore" />
<spanclass="truncate">MeshMapper</span>
</h1>
<spanid="appVersion" class="text-xs bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-full text-slate-400 flex-shrink-0">v1.0</span>
</header>

<!-- Connection Status Bar with Settings Panel -->
<div>
<!-- Connection Status Bar -->
<divid="connectionBar" class="bg-slate-800/80 border border-slate-700 rounded-t-xl rounded-b-none px-4 py-0.5 flex items-center justify-between">
<divclass="flex items-center gap-2 text-sm">
<spanid="statusIndicator" class="text-base text-red-400">●</span>
<spanid="connectionStatus" class="font-medium text-red-300">Disconnected</span>
</div>
<divclass="flex items-center gap-3">
<spanid="noiseDisplay" class="text-sm text-slate-300"></span>
<buttonid="settingsGearBtn" class="p-0 text-slate-400 hover:text-slate-200 transition-colors" aria-label="Toggle settings">
<svgclass="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</button>
</div>
</div>

<!-- Settings Panel (extends from connection bar) -->
<sectionid="settingsPanel" class="bg-slate-800/80 border-x border-b border-slate-700 rounded-b-xl p-4 space-y-3">
<divclass="flex items-center justify-between mb-2">
<h2class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings</h2>
<buttonid="settingsCloseBtn" class="w-8 h-8 flex items-center justify-center rounded-full text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-all" aria-label="Close settings">
<svgclass="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>

<!-- Auto Ping Interval -->
<divclass="space-y-2">
<divclass="flex items-center gap-2">
<labelclass="block text-xs font-medium text-slate-400 uppercase tracking-wide">Auto Ping Interval</label>
<buttonid="intervalInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="Auto ping interval information">
<svgxmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradientid="infoGrad1" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stopoffset="0" stop-color="#33bef0"></stop><stopoffset="1" stop-color="#0a85d9"></stop></linearGradient>
<pathfill="url(#infoGrad1)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<pathd="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<pathd="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<pathfill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rectwidth="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>
<divstyle="display: flex; gap: 0.5rem;">
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="interval" value="15" class="sr-only">
<spanclass="text-sm font-medium">15s</span>
</label>
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="interval" value="30" checkedclass="sr-only">
<spanclass="text-sm font-medium">30s</span>
</label>
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="interval" value="60" class="sr-only">
<spanclass="text-sm font-medium">60s</span>
</label>
</div>
</div>

<!-- External Antenna -->
<divclass="space-y-2">
<divclass="flex items-center gap-2">
<labelclass="block text-xs font-medium text-slate-400 uppercase tracking-wide">
 External Antenna <spanclass="text-amber-400">⚠️ Required</span>
</label>
<buttonid="antennaInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="External antenna information">
<svgxmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradientid="infoGrad2" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stopoffset="0" stop-color="#33bef0"></stop><stopoffset="1" stop-color="#0a85d9"></stop></linearGradient>
<pathfill="url(#infoGrad2)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<pathd="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<pathd="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<pathfill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rectwidth="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>
<divstyle="display: flex; gap: 0.5rem;">
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="externalAntenna" value="NO" class="sr-only">
<spanclass="text-sm font-medium">No</span>
</label>
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="externalAntenna" value="YES" class="sr-only">
<spanclass="text-sm font-medium">Yes</span>
</label>
</div>
</div>

<!-- Radio Power -->
<divclass="space-y-2">
<divclass="flex items-center gap-2">
<labelclass="block text-xs font-medium text-slate-400 uppercase tracking-wide">
 Radio Power <spanid="powerLabelStatus"></span>
</label>
<buttonid="powerInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="Radio power information">
<svgxmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradientid="infoGrad3" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stopoffset="0" stop-color="#33bef0"></stop><stopoffset="1" stop-color="#0a85d9"></stop></linearGradient>
<pathfill="url(#infoGrad3)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<pathd="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<pathd="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<pathfill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rectwidth="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>

<!-- Placeholder when disconnected -->
<divid="powerPlaceholder" style="display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; background-color: rgba(71, 85, 105, 0.1);">
<spanclass="text-sm font-medium text-slate-500">Waiting for connection...</span>
</div>

<!-- Auto-configured power display (shown when auto-set) -->
<divid="powerAutoDisplay" class="hidden" style="align-items: center; gap: 0.5rem;">
<divstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #10b981; background-color: rgba(16, 185, 129, 0.1);">
<spanid="powerAutoValue" class="text-sm font-medium text-emerald-400">1.0w</span>
</div>
<buttonid="powerOverrideBtn" type="button" style="padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer; background-color: #1e293b;" class="text-sm font-medium text-slate-300 hover:bg-slate-700">
 Override
</button>
</div>

<!-- Manual power selection (shown when unknown device or after override -->
<divid="powerManualSelection" class="hidden" style="gap: 0.5rem;">
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="power" value="0.3w" class="sr-only">
<spanclass="text-sm font-medium">0.3w</span>
</label>
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="power" value="0.6w" class="sr-only">
<spanclass="text-sm font-medium">0.6w</span>
</label>
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="power" value="1.0w" class="sr-only">
<spanclass="text-sm font-medium">1.0w</span>
</label>
<labelstyle="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<inputtype="radio" name="power" value="2.0w" class="sr-only">
<spanclass="text-sm font-medium">2.0w</span>
</label>
</div>
</div>

<!-- Carpeater Filter -->
<divclass="space-y-2">
<divclass="flex items-center gap-2">
<labelclass="block text-xs font-medium text-slate-400 uppercase tracking-wide">Carpeater Filter</label>
<buttonid="carpeaterInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="Carpeater filter information">
<svgxmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradientid="infoGrad4" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stopoffset="0" stop-color="#33bef0"></stop><stopoffset="1" stop-color="#0a85d9"></stop></linearGradient>
<pathfill="url(#infoGrad4)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<pathd="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<pathd="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<pathfill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rectwidth="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>
<divclass="flex items-center gap-2">
<!-- Custom styled checkbox -->
<labelclass="relative inline-flex items-center cursor-pointer">
<inputtype="checkbox" id="carpeaterFilterEnabled" class="sr-only peer">
<divclass="w-5 h-5 bg-slate-700 border border-slate-600 rounded peer-checked:bg-emerald-600 peer-checked:border-emerald-600 peer-focus:ring-2 peer-focus:ring-emerald-500 peer-focus:ring-offset-1 peer-focus:ring-offset-slate-800 transition-all flex items-center justify-center group">
<svgclass="w-3 h-3 text-white opacity-0 transition-opacity checkmark-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</label>
<labelfor="carpeaterFilterEnabled" class="text-sm text-slate-300 cursor-pointer select-none">Ignore ID:</label>
<inputtype="text" id="carpeaterIdInput" maxlength="2" placeholder="00" disabled
class="w-14 px-2 py-1 text-sm bg-slate-700 text-white border border-slate-600 rounded focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none uppercase font-mono disabled:opacity-50 disabled:cursor-not-allowed">
</div>
</div>

<!-- Status Info -->
<divclass="space-y-2">
<labelclass="block text-xs font-medium text-slate-400 uppercase tracking-wide">Status Info</label>

<!-- Model and Channel (always 2 columns) -->
<divclass="grid grid-cols-2 gap-2">
<divclass="flex items-center gap-2 text-sm">
<spanclass="text-slate-300">Model:</span>
<spanid="deviceModel" class="font-medium">—</span>
</div>
<divclass="flex items-center gap-2 text-sm">
<spanclass="text-slate-300">Channel:</span>
<spanid="channelInfo" class="font-medium">—</span>
</div>
</div>

<!-- Location and Slots (always 2 columns) -->
<divclass="grid grid-cols-2 gap-2">
<divclass="flex items-center gap-2 text-sm">
<spanclass="text-slate-300">Location:</span>
<spanid="locationDisplay" class="font-medium">—</span>
</div>
<divclass="flex items-center gap-2 text-sm">
<spanclass="text-slate-300">Slots:</span>
<spanid="slotsDisplay" class="font-medium text-slate-400">N/A</span>
</div>
</div>
</div>
</section>
</div>

<!-- Control Buttons -->
<sectionclass="bg-slate-800/80 border border-slate-700 rounded-xl p-4 space-y-2">
<!-- Ping controls (always visible, disabled when not connected) -->
<divid="pingControls" class="w-full flex gap-2">
<buttonid="txPingBtn"
class="flex-1 min-w-0 px-3 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
 TX Ping
</button>
<buttonid="txRxAutoBtn"
class="flex-1 min-w-0 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
 TX/RX Auto
</button>
<buttonid="rxAutoBtn"
class="flex-1 min-w-0 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
 RX Auto
</button>
</div>

<!-- Connect/Disconnect button (always visible, changes text/color) -->
<buttonid="connectBtn"
class="w-full px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
 Connect
</button>
</section>

<!-- Status Message Box (Dynamic App Status) -->
<sectionclass="bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-1.5 flex items-center">
<spanid="status" class="text-sm font-medium text-slate-300">—</span>
</section>

<!-- Map Section with Overlays -->
<sectionclass="relative bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" style="height: 400px;">
<!-- Double-buffered iframes: one visible, one loading in background -->
<iframe
id="coverageFrameA"
class="coverage-frame coverage-frame-active"
title="MeshMapper Coverage Zone"
referrerpolicy="no-referrer"
src="https://yow.meshmapper.net/embed.php?cov_grid=1&fail_grid=1&pings=0&repeaters=1&rep_coverage=0&grid_lines=0&lat=45.42150&lon=-75.69720&meters=10000">
</iframe>
<iframe
id="coverageFrameB"
class="coverage-frame coverage-frame-hidden"
title="MeshMapper Coverage Zone"
referrerpolicy="no-referrer">
</iframe>

<!-- Map Overlays -->
<!-- Top-right corner: GPS Accuracy and Distance stacked vertically -->
<divclass="absolute top-2 right-2 z-10 flex flex-col gap-2 text-right">
<!-- GPS Accuracy -->
<divclass="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300">
<spanid="gpsAcc">±-</span>
</div>

<!-- Distance from Last Ping -->
<divclass="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300">
<spanid="distanceInfo">∆-</span>
</div>
</div>

<!-- Bottom: GPS Coordinates spanning full width -->
<divclass="absolute bottom-2 left-2 right-2 z-10">
<divclass="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 text-center">
<divid="gpsInfo">-</div>
</div>
</div>
</section>

<!-- TX Log: Unified Static Section (replaces mobile bottom sheet and desktop log) -->
<sectionclass="bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" aria-labelledby="txPingsHeading">
<!-- Log Header (collapsible toggle) -->
<divid="txLogSummaryBar" class="px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-slate-800/60 transition-colors">
<divclass="flex items-center gap-3 text-sm min-w-0 flex-1">
<h2id="txPingsHeading" class="text-sm font-medium text-slate-300 uppercase tracking-wide">TX Log</h2>
<spanclass="text-slate-500">|</span>
<spanid="txLogCount" class="font-medium text-slate-300">Pings: 0</span>
<spanid="txLogLastTime" class="text-slate-400 text-xs truncate hidden sm:inline">No data</span>
</div>
<divclass="flex items-center gap-2">
<spanid="txLogLastSnr" class="text-xs font-mono text-slate-400">—</span>
<buttonid="txLogCopyBtn" class="copy-btn text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded transition-colors hidden">
 Copy
</button>
<svgid="txLogExpandArrow" class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>

<!-- Expandable Log Content -->
<divid="txLogBottomSheet" class="border-t border-slate-700 hidden">
<!-- Log entries (scrollable) -->
<divid="txLogScrollContainer" class="overflow-y-auto px-4 py-2 max-h-64" style="-webkit-overflow-scrolling: touch;">
<divid="txPings" class="space-y-2">
<!-- Log entries will be appended here -->
<divclass="text-xs text-slate-500 italic text-center py-4">No pings logged yet</div>
</div>
</div>
</div>
</section>

<!-- RX Log: Passive Observations -->
<sectionclass="bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" aria-labelledby="rxLogHeading">
<divid="rxLogSummaryBar" class="px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-slate-800/60 transition-colors">
<divclass="flex items-center gap-3 text-sm min-w-0 flex-1">
<h2id="rxLogHeading" class="text-sm font-medium text-slate-300 uppercase tracking-wide">RX Log</h2>
<spanclass="text-slate-500">|</span>
<spanid="rxLogCount" class="font-medium text-slate-300">Handled: 0 Drop: 0</span>
<spanid="rxLogLastTime" class="text-slate-400 text-xs truncate hidden sm:inline">No data</span>
</div>
<divclass="flex items-center gap-2">
<spanid="rxLogLastRepeater" class="text-xs font-mono text-slate-400">—</span>
<spanid="rxLogSnrChip" class="hidden"></span>
<buttonid="rxLogCopyBtn" class="copy-btn text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded transition-colors hidden">
 Copy
</button>
<svgid="rxLogExpandArrow" class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>

<divid="rxLogBottomSheet" class="border-t border-slate-700 hidden">
<divid="rxLogScrollContainer" class="overflow-y-auto px-4 py-2 max-h-64">
<divid="rxLogEntries" class="space-y-2">
<divclass="text-xs text-slate-500 italic text-center py-4">No RX observations yet</div>
</div>
</div>
</div>
</section>

<!-- Error Log -->
<sectionclass="bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" aria-labelledby="errorLogHeading">
<divid="errorLogSummaryBar" class="px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-slate-800/60 transition-colors">
<divclass="flex items-center gap-3 text-sm min-w-0 flex-1">
<h2id="errorLogHeading" class="text-sm font-medium text-red-300 uppercase tracking-wide">Error Log</h2>
<spanclass="text-slate-500">|</span>
<spanid="errorLogCount" class="font-medium text-red-300">Events: 0</span>
<spanid="errorLogLastTime" class="text-slate-400 text-xs truncate hidden sm:inline">No errors</span>
</div>
<divclass="flex items-center gap-2">
<spanid="errorLogLastError" class="text-xs font-mono text-slate-400">—</span>
<buttonid="errorLogCopyBtn" class="copy-btn text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded transition-colors hidden">
 Copy
</button>
<svgid="errorLogExpandArrow" class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>

<divid="errorLogBottomSheet" class="border-t border-slate-700 hidden">
<divid="errorLogScrollContainer" class="overflow-y-auto px-4 py-2 max-h-64">
<divid="errorLogEntries" class="space-y-2">
<divclass="text-xs text-slate-500 italic text-center py-4">No errors logged</div>
</div>
</div>
</div>
</section>

<!-- Notes Section -->
<sectionclass="bg-slate-800/80 border border-slate-700 rounded-xl p-4 space-y-2">
<h2class="text-sm font-medium text-slate-300">Notes</h2>
<ulclass="text-xs text-slate-400 space-y-1 list-disc list-inside">
<li>Requires Bluetooth and Location permissions</li>
<li>Keep app in foreground with screen on & unlocked</li>
<liclass="text-amber-400 font-medium">⚠️ Not supported in Safari — Use Bluefy on iOS</li>
</ul>
</section>

</div>
</main>

<!-- Load main script -->
<scripttype="module" src="content/wardrive.js"></script>
<scripttype="module">
import{onLoad}from'./content/wardrive.js';
onLoad();
</script>

<!-- Deprecation Notice Modal -->
<divid="noticeModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
<divclass="bg-slate-800 rounded-lg shadow-xl max-w-lg w-full border border-slate-700">
<divclass="p-6">
<divclass="mb-4">
<h3class="text-xl font-semibold text-amber-400">Project Deprecated — Please Use MeshMapper Mobile</h3>
</div>
<divclass="space-y-4 text-sm text-slate-300">
<p>This webapp is deprecated and no longer supported. Please get the official MeshMapper apps or try the new modern web app below.</p>
<divclass="grid grid-cols-1 gap-2">
<ahref="https://play.google.com/store/apps/details?id=net.meshmapper.app" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">Android: Get it on the Play Store</a>
<ahref="https://github.com/MeshMapper/MeshMapper_Project/releases/" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors">Grab the APK from GitHub</a>
<ahref="https://apps.apple.com/us/app/meshmapper/id6758073991" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-sky-600 hover:bg-sky-700 text-white rounded-lg transition-colors">iOS: Get it on the App Store</a>
<ahref="https://wd.meshmapper.net/" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">Modern Web App</a>
</div>
<pclass="text-xs text-slate-400">Join the MeshMapper Discord for beta testing and live updates: <ahref="https://discord.gg/x8aBDZwyz7" target="_blank" rel="noopener noreferrer" class="text-indigo-300 underline">https://discord.gg/D26P6c6QmG</a></p>
</div>
</div>
</div>
</div>

<!-- Override Confirmation Modal -->
<divid="overrideModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<divclass="bg-slate-800 rounded-lg shadow-xl max-w-sm w-full border border-slate-600">
<divclass="p-6 border-b border-slate-600">
<h3class="text-lg font-medium text-slate-200">Override Auto-Configuration?</h3>
</div>
<divclass="p-6">
<pclass="text-sm text-slate-300 mb-2">This will allow you to manually select the radio power setting.</p>
<pclass="text-sm text-slate-400">The device was automatically configured based on its hardware profile.</p>
</div>
<divstyle="padding: 1.5rem; display: flex; gap: 0.75rem; border-top: 1px solid #475569;">
<buttonid="overrideModalCancel" style="flex: 1; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: #cbd5e1; background-color: #475569; border-radius: 0.5rem; border: none; cursor: pointer; transition: background-color 0.2s;">
 Cancel
</button>
<buttonid="overrideModalConfirm" style="flex: 1; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: white; background-color: #10b981; border-radius: 0.5rem; border: none; cursor: pointer; transition: background-color 0.2s;">
 Override
</button>
</div>
</div>
</div>

<!-- Carpeater Info Modal -->
<divid="carpeaterModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<divclass="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<divclass="p-6">
<divclass="flex justify-between items-start mb-4">
<h3class="text-lg font-semibold text-slate-200">What is a Carpeater?</h3>
<buttondata-modal-closeclass="text-slate-400 hover:text-slate-200">
<svgclass="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<divclass="space-y-3 text-sm text-slate-300">
<p>A <strongclass="text-emerald-400">carpeater</strong> is a repeater that's extremely close to you (usually in your vehicle or pocket), causing interference with wardriving data collection.</p>

<divclass="bg-slate-900 rounded p-3 border border-slate-700">
<pclass="font-semibold text-slate-200 mb-2">This filter has two modes:</p>
<ulclass="space-y-2 text-xs">
<li><spanclass="text-emerald-400">•</span><strong>User-specified ID:</strong> Ignores all packets from a specific repeater you enter (silent drops, no error log)</li>
<li><spanclass="text-amber-400">•</span><strong>RSSI failsafe:</strong> Automatically drops extremely strong signals (≥ -30 dBm) from other repeaters (shows error log)</li>
</ul>
</div>

<pclass="text-xs text-slate-400">Enable the checkbox and enter the 2-character hex ID of your carpeater to exclude it from all wardriving data.</p>
</div>
<buttondata-modal-closeclass="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
 Got it
</button>
</div>
</div>
</div>

<!-- Auto Ping Interval Info Modal -->
<divid="intervalModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<divclass="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<divclass="p-6">
<divclass="flex justify-between items-start mb-4">
<h3class="text-lg font-semibold text-slate-200">Auto Ping Interval</h3>
<buttondata-modal-closeclass="text-slate-400 hover:text-slate-200">
<svgclass="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<divclass="space-y-3 text-sm text-slate-300">
<p>Controls how frequently the app automatically sends pings while in TX/RX Auto or RX Auto mode.</p>

<divclass="bg-slate-900 rounded p-3 border border-slate-700">
<pclass="font-semibold text-slate-200 mb-2">Interval Options:</p>
<ulclass="space-y-2 text-xs">
<li><spanclass="text-sky-400">•</span><strong>15s</strong> — Maximum coverage density, higher mesh load. Best for detailed mapping of small areas or testing specific routes.</li>
<li><spanclass="text-emerald-400">•</span><strong>30s</strong> — Balanced coverage and mesh load. Recommended for most wardriving sessions.</li>
<li><spanclass="text-amber-400">•</span><strong>60s</strong> — Lower coverage density, minimal mesh load. Ideal for casual mapping or being respectful during busy network times.</li>
</ul>
</div>

<pclass="text-xs text-slate-400"><strong>Tip:</strong> Shorter intervals create more detailed coverage maps but increase traffic on the mesh network. Choose 30s or 60s when the network is actively being used by others.</p>
</div>
<buttondata-modal-closeclass="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
 Got it
</button>
</div>
</div>
</div>

<!-- External Antenna Info Modal -->
<divid="antennaModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<divclass="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<divclass="p-6">
<divclass="flex justify-between items-start mb-4">
<h3class="text-lg font-semibold text-slate-200">External Antenna</h3>
<buttondata-modal-closeclass="text-slate-400 hover:text-slate-200">
<svgclass="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<divclass="space-y-3 text-sm text-slate-300">
<p>Indicates whether you have an external antenna mounted on your vehicle (typically on the roof or magnetic-mounted).</p>

<divclass="bg-slate-900 rounded p-3 border border-slate-700">
<pclass="font-semibold text-slate-200 mb-2">Why this matters:</p>
<pclass="text-xs">External antennas outside of your vehicle significantly improve signal propagation and reception range compared to a companion/antenna inside your car. This setting helps correlate coverage data with your actual hardware setup.</p>
</div>

<divclass="space-y-2 text-xs">
<pclass="font-semibold text-emerald-400">When to select YES:</p>
<ulclass="space-y-1 ml-3">
<li>• You have a roof-mounted or magnetic antenna</li>
<li>• You're using an antenna on an extension cable outside your vehicle</li>
<li>• Your device is connected to any external antenna system</li>
</ul>

<pclass="font-semibold text-amber-400 mt-3">When to select NO:</p>
<ulclass="space-y-1 ml-3">
<li>• You're using only the device's antenna that's directly connected to your companion</li>
<li>• Your device is inside your vehicle without external antenna</li>
</ul>
</div>
</div>
<buttondata-modal-closeclass="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
 Got it
</button>
</div>
</div>
</div>

<!-- Radio Power Info Modal -->
<divid="powerModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<divclass="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<divclass="p-6">
<divclass="flex justify-between items-start mb-4">
<h3class="text-lg font-semibold text-slate-200">Radio Power Configuration</h3>
<buttondata-modal-closeclass="text-slate-400 hover:text-slate-200">
<svgclass="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<pathstroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<divclass="space-y-3 text-sm text-slate-300">
<p>We track this for context, allowing us to display the power level of each ping on the map. This is useful for understanding coverage patterns and signal propagation. The app automatically detects your device model and sets the optimal power level based on your hardware capabilities.</p>

<divclass="bg-slate-900 rounded p-3 border border-slate-700">
<pclass="font-semibold text-slate-200 mb-2">Auto-Configuration:</p>
<pclass="text-xs">When connected, the app displays the default power with a <spanclass="text-emerald-400">green indicator</span>. This is based on your specific device model from the hardware database.</p>
</div>

<divclass="bg-amber-900/20 rounded p-3 border border-amber-700/50">
<pclass="font-semibold text-amber-400 mb-2">Override:</p>
<pclass="text-xs">Only manually select power if you have specific hardware knowledge or if your device was not auto-configured — in that case, you must manually select it.</p>
</div>
</div>
<buttondata-modal-closeclass="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
 Got it
</button>
</div>
</div>
</div>
</body>
</html>