-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
326 lines (316 loc) · 21.3 KB
/
index.html
File metadata and controls
326 lines (316 loc) · 21.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="MBCompass is a free, open-source Android compass and navigation app. Lightweight, privacy-respecting, offline maps, GPS tracking, and sensor accuracy without Ads or IAP.">
<meta name="keywords" content="Android compass app, open-source navigation, offline maps, FOSS Android, MBCompass">
<meta name="robots" content="index, follow">
<meta name="author" content="Mubarak Basha - Android Developer & FOSS Advocate" />
<meta property="og:title" content="MBCompass - Free FOSS Compass & Navigation App for Android">
<meta property="og:description" content="MBCompass is a free, open-source Android compass and navigation app with offline maps and accurate GPS. No Ads, no IAP.">
<meta property="og:image" content="https://compassmb.github.io/MBCompass-site/assets/img/mbcompass_dark.png">
<meta property="og:url" content="https://compassmb.github.io/MBCompass-site/">
<meta property="og:type" content="website">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "MBCompass",
"url": "https://compassmb.github.io/MBCompass-site/",
"author": {
"@type": "Person",
"name": "Mubarak Basha"
},
"operatingSystem": "Android",
"applicationCategory": "NavigationApplication",
"screenshot": [
"https://compassmb.github.io/MBCompass-site/assets/img/mbcompass_dark.png",
"https://compassmb.github.io/MBCompass-site/assets/img/mbcompass_light_map.png",
"https://compassmb.github.io/MBCompass-site/assets/img/mbcompass_dark_accuracy.png",
"https://compassmb.github.io/MBCompass-site/assets/img/mbcompass_light_settings.png"
],
"offers": {
"@type": "Offer",
"url": "https://f-droid.org/en/packages/com.mubarak.mbcompass/",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<title>Lightweight FOSS Compass & Navigation App for Android</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google Fonts Only For h1 tile-->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,wght@0,600;1,600&display=swap" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<!-- Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
<div class="container px-5">
<a class="navbar-brand fw-bold" href="#page-top">MBCompass</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="bi-list"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<li class="nav-item"><a class="nav-link me-lg-3" href="https://compassmb.github.io/MBCompass-site/#features">Features</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="https://compassmb.github.io/MBCompass-site/#download">Download</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="https://compassmb.github.io/MBCompass-site/donate.html">Donate</a></li>
</ul>
<a class="btn btn-primary rounded-pill px-3 mb-2 mb-lg-0" href="https://github.com/CompassMB/MBCompass" target="_blank">
<span class="d-flex align-items-center">
<i class="bi-github me-2"></i>
<span class="small">View Source</span>
</span>
</a>
</div>
</div>
</nav>
<!-- Mashead header-->
<header class="masthead">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-6">
<!-- Mashead text and app badges-->
<div class="mb-5 mb-lg-0 text-center text-lg-start">
<h1 class="display-1 lh-1 mb-3">
Direction without distraction.
<div class="highlighted-text mx-2">Your compass,</div>
reimagined.
</h1>
<p class="lead fw-normal mb-5">MBCompass is a modern, free, and open source Compass and Navigation app without Ads, IAP, or Tracking. It supports Compass and Navigation features while being lightweight and simple!</p>
<div class="d-flex flex-column flex-lg-row align-items-center gap-3">
<a href="https://f-droid.org/en/packages/com.mubarak.mbcompass/" target="_blank"><img class="app-badge" src="assets/img/f-droid_badge.svg" alt="Get it on F-droid" /></a>
<a href="https://apt.izzysoft.de/fdroid/index/apk/com.mubarak.mbcompass" target="_blank"><img class="app-badge" src="assets/img/izzy_on_badge_opt.svg" alt="Get it on IzzyOnDroid" /></a>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Masthead device mockup feature-->
<div class="masthead-device-mockup">
<svg class="circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="circleGradient" gradientTransform="rotate(45)">
<stop class="gradient-start-color" offset="0%"></stop>
<stop class="gradient-end-color" offset="100%"></stop>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50"></circle></svg
><svg class="shape-1 d-none d-sm-block" viewBox="0 0 240.83 240.83" xmlns="http://www.w3.org/2000/svg">
<rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(120.42 -49.88) rotate(45)"></rect>
<rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(-49.88 120.42) rotate(-45)"></rect></svg
><svg class="shape-2 d-none d-sm-block" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"></circle></svg>
<div class="device-wrapper">
<div class="device" data-device="Pixel 8" data-orientation="portrait" data-color="black">
<div class="screen bg-black">
<div class="carousel slide" id="car" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="assets/img/mbcompass_dark.png" alt="MBCompass on dark theme" /></div>
<div class="carousel-item"><img class="d-block w-100" src="assets/img/mbcompass_light_map.png" alt="MBCompass on light theme" /></div>
<div class="carousel-item"><img class="d-block w-100" src="assets/img/mbcompass_dark_accuracy.png" alt="MBCompass dark theme with accuracy dialog" /></div>
<div class="carousel-item"><img class="d-block w-100" src="assets/img/mbcompass_light_settings.png" alt="MBCompass on light theme with settings page" /></div>
<div class="carousel-item"><img class="d-block w-100" src="assets/img/mb_dark_settings.png" alt="MBCompass on light theme with settings page" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- App features section-->
<section class="mb-0 pb-0" id="features">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-8 order-lg-1 mb-5 mb-lg-0">
<div class="container-fluid px-5">
<div class="row gx-5">
<div class="col-md-6 mb-5">
<!-- Feature item 1-->
<div class="text-center">
<i class="bi-compass icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Clear Direction</h3>
<p class="text-muted mb-0">MBCompass clearly shows the cardinal direction, along with magnetic strength, to help you navigate with ease.</p>
</div>
</div>
<div class="col-md-6 mb-5">
<!-- Feature item 2-->
<div class="text-center">
<i class="bi-geo-alt icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Live Location Tracking</h3>
<p class="text-muted mb-0">Show your live GPS location on OpenStreetMap for hiking or travel, no tracking, no data stored.</p>
</div>
</div>
</div>
<div class="row gx-5">
<div class="col-md-6 mb-5">
<!-- Feature item 3-->
<div class="text-center">
<i class="bi-bullseye icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Accuracy</h3>
<p class="text-muted mb-0">MBCompass utilizes multiple sensors (Sensor Fusion) to provide accurate readings, ensuring you never lose your way.</p>
</div>
</div>
<div class="col-md-6 mb-5">
<!-- Feature item 5-->
<div class="text-center">
<i class="bi-lightning-charge icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Modern & Efficient</h3>
<p class="text-muted mb-0">MBCompass uses the latest Material Design and Jetpack Compose, following Android lifecycle for a smooth, efficient experience.</p>
</div>
</div>
</div>
<div class="row gx-5">
<div class="col-md-6 mb-5">
<!-- Feature item 6-->
<div class="text-center">
<i class="bi-aspect-ratio icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Convenience Features</h3>
<p class="text-muted mb-0">MBCompass supports landscape orientation and keeps the screen on, offering uninterrupted usability during travel or hiking.</p>
</div>
</div>
<div class="col-md-6">
<!-- Feature item 4-->
<div class="text-center">
<i class="bi-code-slash icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Open Source</h3>
<p class="text-muted mb-0">MBCompass is 100% open source, so you can view the code and contribute to.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 order-lg-0">
<!-- Features section device mockup-->
<div class="features-device-mockup">
<svg class="circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="circleGradient" gradientTransform="rotate(45)">
<stop class="gradient-start-color" offset="0%"></stop>
<stop class="gradient-end-color" offset="100%"></stop>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50"></circle></svg
><svg class="shape-1 d-none d-sm-block" viewBox="0 0 240.83 240.83" xmlns="http://www.w3.org/2000/svg">
<rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(120.42 -49.88) rotate(45)"></rect>
<rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(-49.88 120.42) rotate(-45)"></rect></svg
><svg class="shape-2 d-none d-sm-block" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"></circle></svg>
<div class="device-wrapper">
<div class="device" data-device="Pixel 8" data-orientation="portrait" data-color="black">
<div class="screen bg-black"><img class="d-block w-100" src="assets/img/mbcompass_dark.png" alt="Upcoming Workouts" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured badges section-->
<section class="bg-light mb-0 pb-0">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
<div class="col-12 col-lg-5"></div>
<h2 class="display-4 lh-1 mb-4">Featured on</h2>
<p class="lead fw-normal mb-5 mb-lg-0">
Trusted by developers worldwide, MBCompass made it to the front page of Hacker News,
<br />
ranked #13 Product of the Day on Product Hunt,
<br />
and was featured in two consecutive issues of Android Weekly -
<br />
proving its impact in the Android and open-source communities.
</p>
</div>
<div class="row g-3 g-md-4 mt-3">
<div class="col-12 col-sm-6 col-lg-12 col-xl-4">
<a class="featured-badge-light stroke text-center p-3" href="https://www.producthunt.com/posts/mbcompass" target="_blank">
<img class="featured-logo-light" src="assets/img/ph_400_140.png" alt="#13 Product of the Day - Product Hunt" />
<div class="mt-2">
<small class="text-muted">Product Hunt</small>
<br />
<small class="text-primary">#13 Product of the Day</small>
</div>
</a>
</div>
<div class="col-12 col-sm-6 col-lg-12 col-xl-4">
<a class="featured-badge-light stroke text-center p-3" href="https://news.ycombinator.com/item?id=44155741" target="_blank">
<img class="featured-logo-light" src="assets/img/ychackernews_400_100.png" alt="Featured on Hacker News Front Page" />
<div class="mt-2">
<small class="text-muted">Hacker News</small>
<br />
<small class="text-primary">Hitting front page of Hacker News</small>
</div>
</a>
</div>
<div class="col-12 col-sm-12 col-lg-12 col-xl-4">
<a class="featured-badge-light stroke text-center p-3" href="https://x.com/MubarakNative/status/1944745544905285893" target="_blank">
<img class="featured-logo-light" src="assets/img/android-weekly_400_100.png" alt="Featured in Android Weekly" />
<div class="mt-2">
<small class="text-muted">Android Weekly</small>
<br />
<small class="text-primary">Featured twice</small>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Basic features section-->
<section class="bg-light">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
<div class="col-12 col-lg-5">
<h2 class="display-4 lh-1 mb-4">Not just a Compass, nor just a Map App.</h2>
<p class="lead fw-normal mb-5 mb-lg-0">
MBCompass bridges the gap between basic compasses and heavy navigation apps,
<br />
showing your direction and live location without using hundreds of MBs of storage
<br />
or privacy trade-offs. Runs on Android 5.0+,
<br />
even on older or low-end devices.
</p>
</div>
<div class="col-sm-8 col-md-6">
<div class="px-5 px-sm-0"><img class="img-fluid" src="assets/img/mbcompass_icon.png" alt="MBCompass app icon - Android compass and navigation" /></div>
</div>
</div>
</div>
</section>
<!-- App badge section-->
<section class="bg-gradient-primary-to-secondary" id="download">
<div class="container px-5">
<h2 class="text-center text-white font-alt mb-4">Get the app now!</h2>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3">
<a href="https://f-droid.org/en/packages/com.mubarak.mbcompass/" target="_blank"><img class="app-badge" src="assets/img/f-droid_badge.svg" alt="Get it on F-droid" /></a>
<a href="https://apt.izzysoft.de/fdroid/index/apk/com.mubarak.mbcompass" target="_blank"><img class="app-badge" src="assets/img/izzy_on_badge_opt.svg" alt="Get it on IzzyOnDroid" /></a>
</div>
</div>
</section>
<footer class="bg-black text-center py-5">
<div class="container px-5">
<!-- Navigation Links in Footer-->
<ul class="nav justify-content-center mb-3">
<li class="nav-item"><a class="nav-link text-white-50" href="https://compassmb.github.io/MBCompass-site/index.html#features">Features</a></li>
<li class="nav-item"><a class="nav-link text-white-50" href="https://compassmb.github.io/MBCompass-site/donate.html">Donate</a></li>
<li class="nav-item"><a class="nav-link text-white-50" href="https://github.com/CompassMB/MBCompass" target="_blank">Source Code</a></li>
</ul>
<div class="p disclaimer">Android, Hacker News, and Product Hunt are trademarks of their respective owners. This site is not affiliated with or endorsed by them.</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>