forked from kallanreed/mesh-map
-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathwardrive.html
More file actions
148 lines (133 loc) · 5.89 KB
/
wardrive.html
File metadata and controls
148 lines (133 loc) · 5.89 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MeshCore Wardrive</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="MeshCore Wardrive - Crowd-sourced mesh coverage tool">
<meta name="keywords" content="MeshCore,coverage,wardrive,cascadia,pugetmesh">
<meta name="author" content="Kyle Reed">
<link rel="manifest" href="content/wardrive.json">
<link rel="icon" href="content/wardrive.png">
<link rel="stylesheet" href="content/tailwind.css">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
.leaflet-interactive.marker-shadow {
filter: url(#marker-shadow);
}
</style>
</head>
<body class="bg-slate-900 text-slate-100">
<main class="min-h-screen flex items-start justify-center p-4">
<div class="w-full max-w-3xl space-y-4">
<header class="flex items-center justify-between">
<div>
<h1 class="flex items-center gap-2 text-xl font-semibold">
<span class="relative h-8 w-8">
<img id="logo" class="absolute inset-0 h-8 w-8 grayscale-30" src="content/wardrive.png" />
<span id="logoGlow" class="absolute inset-0 opacity-0"
style="border-radius: 6px; box-shadow: 0 0 16px rgb(162, 255, 157);"></span>
<img id="logoBright" class="absolute inset-0 h-8 w-8 saturate-200 hue-rotate-320 opacity-0" src="content/wardrive.png" />
</span> MeshCore Wardrive
</h1>
</div>
<div class="text-right text-sm">
<div><span id="status" class="font-semibold text-red-300">Disconnected</span></div>
<div id="deviceInfo" class="text-slate-400 text-xs"></div>
</div>
</header>
<!-- Buttons -->
<section>
<div class="flex items-center gap-2">
<button id="connectBtn"
class="px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-sm font-medium disabled:opacity-40">
Connect
</button>
<div id="pingButtons" class="ml-auto flex items-center gap-2">
<button id="sendPingBtn" disabled
class="px-3 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-500 text-sm font-medium disabled:opacity-40">
Send Ping
</button>
<button id="autoToggleBtn" disabled
class="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-medium disabled:opacity-40">
Start Auto Ping
</button>
</div>
</div>
</section>
<!-- The Map -->
<div id="map" class="rounded-lg h-140 shadow-sm"></div>
<!-- Bottom controls -->
<section class="bg-slate-800/80 border border-slate-700 rounded-lg p-2 space-y-2 shadow-sm">
<!-- Send radio name consent -->
<div class="space-y-1 text-xs align-middle text-slate-300 mb-4">
<label class="flex gap-2">
<input type="checkbox" id="sendRadioNameCB">
Send my radio name with pings (for leaderboard).
</label>
</div>
<!-- Ignore Repeater -->
<div class="space-y-1">
<div class="text-xs italic text-slate-400">
If you're using a mobile repeater, ignore its id.
</div>
<div class="flex flex-wrap items-center gap-1">
<button id="ignoredRepeaterBtn"
class="px-2 mr-2 rounded-md bg-zinc-600 hover:bg-zinc-500 text-sm font-sm disabled:opacity-40">
Set
</button>
<label class="text-xs text-slate-300">Ignored Repeater Id</label>
<div id="ignoredRepeaterId" class="text-xs text-slate-400">
None
</div>
</div>
</div>
</section>
<!-- Info -->
<section>
<div class="text-xs italic text-slate-400">
Sends location to <span class="font-mono">#wardrive</span> to build the <a class="underline" target="_blank"
href="/">coverage map</a>.
</div>
<div class="text-xs italic text-slate-400">
<span>Requires Bluetooth & Location permissions.</span>
</div>
<div class="text-xs italic text-slate-400">
<span>Must remain in foreground with screen on and unlocked.</span>
</div>
<div class="text-xs italic text-slate-400">
Requires <a class="underline" target="_blank"
href="https://apps.apple.com/us/app/bluefy-web-ble-browser/id1492822055">Bluefy</a> on iOS.
<a class="underline" target="_blank"
href="https://play.google.com/store/apps/details?id=com.microsoft.emmx">Edge</a>
or <a class="underline" target="_blank"
href="https://play.google.com/store/apps/details?id=com.android.chrome">Chrome</a>
on Android.</span>
</div>
<div class="text-xs italic text-slate-400">
<span>Only for <a class="underline" target="_blank" href="https://pugetmesh.org/meshcore/">PNW
region</a>.</span> <span>See <a class="underline" target="_blank" href="/howto">howto</a> for more info.
</div>
</section>
</div>
</main>
<script src="content/config.js"></script>
<script type="module" src="content/wardrive.js"></script>
<script type="module">
import { onLoad } from '/content/wardrive.js';
onLoad();
</script>
<!-- iOS Safari SVG shadow hack -->
<svg width="0" height="0" style="position:absolute">
<defs>
<filter id="marker-shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="1" dy="3" stdDeviation="1" flood-color="black" flood-opacity="0.3" />
</filter>
</defs>
</svg>
</body>
</html>