-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
207 lines (196 loc) · 13.7 KB
/
Copy pathindex.html
File metadata and controls
207 lines (196 loc) · 13.7 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>blep — find your lost Bluetooth things</title>
<meta name="description" content="blep guides you to nearby Bluetooth devices by signal strength — calibrate, sweep, walk, done. iOS, Android & watch." />
<meta name="theme-color" content="#5F90C3" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#14181d" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="canonical" href="https://blep.fyi/" />
<meta property="og:title" content="blep — BLE Pointer & Tracker" />
<meta property="og:description" content="Find your lost Bluetooth things — guided by signal strength." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://blep.fyi/" />
<meta property="og:image" content="https://blep.fyi/brand/social.png" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="500" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://blep.fyi/brand/social.png" />
<!-- Apply the saved theme before paint to avoid a flash. -->
<script>
try { var t = localStorage.getItem('blep-theme'); if (t) document.documentElement.classList.add(t); } catch (e) {}
</script>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body class="min-h-dvh bg-mist text-ink antialiased selection:bg-pink/40">
<a href="#top" class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-full focus:bg-card focus:px-4 focus:py-2 focus:shadow">Skip to content</a>
<!-- Header -->
<header class="mx-auto flex max-w-5xl items-center justify-between px-6 py-5">
<a href="#top" class="flex items-center gap-2 font-display text-2xl font-bold tracking-tight">
<img src="/logo.svg" alt="" class="h-8 w-8" /> blep
</a>
<nav class="flex items-center gap-1" aria-label="Site">
<button id="theme-toggle" type="button" aria-label="Toggle dark mode"
class="flex h-9 w-9 items-center justify-center rounded-full text-lg leading-none transition hover:bg-ink/10 active:scale-95">🌙</button>
<a href="/guide.html" class="rounded-full px-3 py-2 text-sm font-medium text-ink/60 transition hover:text-ink">Guide</a>
<a href="/platforms.html" class="hidden rounded-full px-3 py-2 text-sm font-medium text-ink/60 transition hover:text-ink sm:inline-block">Platforms</a>
<a href="/blog.html" class="hidden rounded-full px-3 py-2 text-sm font-medium text-ink/60 transition hover:text-ink sm:inline-block">Blog</a>
<a href="https://github.com/fentas/blep.fyi" class="rounded-full px-3 py-2 text-sm font-medium text-ink/60 transition hover:text-ink">GitHub</a>
</nav>
</header>
<!-- Hero -->
<main id="top" class="mx-auto max-w-5xl px-6">
<section class="flex flex-col items-center pt-10 pb-20 text-center">
<img src="/logo.svg" alt="blep mascot" class="h-40 w-40 drop-shadow-sm motion-safe:animate-[float_6s_ease-in-out_infinite]" />
<h1 class="mt-8 font-display text-5xl font-bold leading-none tracking-tight sm:text-6xl">blep</h1>
<p class="mt-4 max-w-xl text-balance text-lg text-ink/70">
Find your lost Bluetooth things — guided by feel. blep turns your phone
into a warm/cold pointer that walks you right to it. The same scan runs
in reverse to catch unwanted trackers following you — and points you to
them too.
</p>
<div class="mt-10 flex flex-col items-center gap-4">
<span class="inline-flex items-center rounded-full bg-blue/15 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-blue">Android · now in testing</span>
<!-- Android is in closed testing: testers join the Google Group (blep-app),
then opt in via the Play link. iOS build is not published yet. -->
<div class="flex flex-wrap items-center justify-center gap-3" aria-label="Get blep">
<a href="https://play.google.com/apps/testing/fyi.blep" aria-label="Get it on Google Play (closed testing)" class="transition hover:-translate-y-0.5">
<img src="/badges/google-play.png" alt="Get it on Google Play — closed testing" class="h-[64px] w-auto" />
</a>
<img src="/badges/app-store.svg" alt="App Store — coming soon" title="iPhone & iPad — coming soon" class="h-[44px] w-auto opacity-40 grayscale" />
</div>
<p class="text-sm text-ink/70">
To join Android testing, become a tester via our
<a class="font-semibold text-blue hover:underline" href="https://groups.google.com/g/blep-app">Google Group</a>,
then opt in on Play. <span class="text-ink/50">iPhone & iPad coming soon.</span>
</p>
<p class="text-xs font-medium tracking-wide text-ink/45">Free & open source · companion apps for Apple Watch & Wear OS</p>
</div>
</section>
<!-- How it works -->
<section class="grid gap-4 pb-20 sm:grid-cols-3">
<article class="step" style="--from:#7FA8D4;--to:#8FD0CB">
<span class="step-no">1</span>
<h3 class="step-title">Calibrate</h3>
<p class="step-body">Hold the phone to your chest. Your body shields the signal from behind, making it directional.</p>
</article>
<article class="step" style="--from:#8FD0CB;--to:#AEDFA6">
<span class="step-no">2</span>
<h3 class="step-title">Sweep & walk</h3>
<p class="step-body">Turn slowly until it’s warmest, then walk forward. The arrow and colour guide every step.</p>
</article>
<article class="step" style="--from:#AEDFA6;--to:#F4D58D">
<span class="step-no">3</span>
<h3 class="step-title">Pinpoint</h3>
<p class="step-body">Up close, kneel and search low. blep celebrates the moment you find it.</p>
</article>
</section>
<p class="-mt-10 mb-20 text-center text-sm text-ink/60">
Want the full walkthrough — finding <em>and</em> the anti-tracking scan?
<a class="font-semibold text-blue hover:underline" href="/guide.html">Read the guide →</a>
</p>
<!-- Screenshots -->
<section aria-label="App screenshots" class="pb-20">
<h2 class="text-center font-display text-3xl font-bold tracking-tight">See it in action</h2>
<div class="mt-8 flex snap-x snap-mandatory gap-5 overflow-x-auto pb-4 [scrollbar-width:thin]">
<img src="/shots/01.webp" width="480" height="853" loading="lazy" alt="blep screenshot — the nearby list: every Bluetooth thing around you, sorted by signal" class="w-56 shrink-0 snap-center rounded-2xl shadow-sm ring-1 ring-ink/10 sm:w-60" />
<img src="/shots/02.webp" width="480" height="853" loading="lazy" alt="blep screenshot — the warm/cold pointer with the radar and a turn hint" class="w-56 shrink-0 snap-center rounded-2xl shadow-sm ring-1 ring-ink/10 sm:w-60" />
<img src="/shots/03.webp" width="480" height="853" loading="lazy" alt="blep screenshot — 'Right here?': standing on top of the device" class="w-56 shrink-0 snap-center rounded-2xl shadow-sm ring-1 ring-ink/10 sm:w-60" />
<img src="/shots/05.webp" width="480" height="853" loading="lazy" alt="blep screenshot — the anti-tracking scan flagging a tracker that may be following you" class="w-56 shrink-0 snap-center rounded-2xl shadow-sm ring-1 ring-ink/10 sm:w-60" />
<img src="/shots/07.webp" width="480" height="853" loading="lazy" alt="blep screenshot — the device panel: signal, rotating-id history and device info" class="w-56 shrink-0 snap-center rounded-2xl shadow-sm ring-1 ring-ink/10 sm:w-60" />
<img src="/shots/06.webp" width="480" height="853" loading="lazy" alt="blep screenshot — dark mode" class="w-56 shrink-0 snap-center rounded-2xl shadow-sm ring-1 ring-ink/10 sm:w-60" />
<img src="/shots/04.webp" width="480" height="853" loading="lazy" alt="blep screenshot — 'Reunited!' celebration after finding a device" class="w-56 shrink-0 snap-center rounded-2xl shadow-sm ring-1 ring-ink/10 sm:w-60" />
</div>
</section>
<!-- Feature grid -->
<section aria-label="Features" class="pb-20">
<h2 class="text-center font-display text-3xl font-bold tracking-tight">More than a finder</h2>
<p class="mx-auto mt-3 max-w-xl text-center text-ink/70">
The same scan that finds your things also protects you from someone else's.
All of it on-device — no account, no cloud, no ads.
</p>
<div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<a href="/guide.html#safety" class="feature">
<span class="feature-icon">🛡</span>
<h3 class="feature-title">Anti-tracking scan</h3>
<p class="feature-body">Catches an AirTag, Tile or SmartTag travelling with you — then walks you right to it so you can remove it.</p>
</a>
<a href="/device-recognition.html" class="feature">
<span class="feature-icon">🔁</span>
<h3 class="feature-title">Sees through rotating IDs</h3>
<p class="feature-body">Privacy trackers change their Bluetooth address constantly. blep recognises the same physical device anyway.</p>
</a>
<a href="/background-scanning.html" class="feature">
<span class="feature-icon">🌙</span>
<h3 class="feature-title">Watches in the background</h3>
<p class="feature-body">Off, a battery-friendly timer, or a continuous watch — your choice, with a notification when something's off.</p>
</a>
<a href="/platforms.html" class="feature">
<span class="feature-icon">⌚</span>
<h3 class="feature-title">On your wrist</h3>
<p class="feature-body">Companion apps for Wear OS & Apple Watch. On Android, phone and watch stay in sync — names, favourites, alerts.</p>
</a>
<a href="/platforms.html" class="feature">
<span class="feature-icon">🎒</span>
<h3 class="feature-title">Left-behind alerts</h3>
<p class="feature-body">Tether your bag, keys or wallet and get a nudge the moment you walk away without them.</p>
</a>
<a href="/privacy.html" class="feature">
<span class="feature-icon">🔒</span>
<h3 class="feature-title">Private by design</h3>
<p class="feature-body">No accounts, no analytics, no internet. Scans, sensors and history never leave your device.</p>
</a>
</div>
</section>
<!-- Donate (target of the app's "Help & donate" button). -->
<section id="donate" class="mb-24 scroll-mt-24 rounded-[28px] bg-card p-10 text-center shadow-sm">
<div class="text-4xl">♥</div>
<h2 class="mt-3 font-display text-3xl font-bold tracking-tight">Help & donate</h2>
<p class="mx-auto mt-3 max-w-md text-ink/70">
blep is free and open source. If it reunited you with your keys (or your
dignity), a small thank-you keeps the lights on. Pick whatever’s easiest:
</p>
<div class="mx-auto mt-8 grid max-w-lg gap-3 sm:grid-cols-2">
<a class="donate-card" href="https://donate.stripe.com/3cI00i2Us3wX9ln2rD2Fa00">
<span class="donate-card-title">Card · Stripe</span>
<span class="donate-card-note">Quick & secure card payment</span>
</a>
<a class="donate-card" href="https://opencollective.com/fentas">
<span class="donate-card-title">Open Collective</span>
<span class="donate-card-note">PDF receipt · transparent ledger</span>
</a>
<a class="donate-card" href="https://www.paypal.com/ncp/payment/D7F4C27KWDRT8">
<span class="donate-card-title">PayPal</span>
<span class="donate-card-note">Record in your PayPal history</span>
</a>
<a class="donate-card" href="https://github.com/sponsors/fentas">
<span class="donate-card-title">GitHub Sponsors</span>
<span class="donate-card-note">Best for recurring support</span>
</a>
</div>
<details class="mx-auto mt-6 max-w-md text-left text-sm text-ink/60">
<summary class="cursor-pointer text-center font-medium text-blue">Need a receipt?</summary>
<p class="mt-3">
Contributions are voluntary support, not tax-deductible donations (blep
isn't a registered non-profit), so a formal donation certificate can't be
issued. For a downloadable PDF, use <strong>Open Collective</strong> — it
puts a receipt on your contribution page. <strong>PayPal</strong> and
<strong>GitHub Sponsors</strong> keep a payment record in your account
history.
</p>
</details>
</section>
</main>
<footer class="mx-auto max-w-5xl px-6 pb-10 text-center text-sm text-ink/50">
Made with care · <a class="underline-offset-2 hover:underline" href="https://github.com/fentas/blep.fyi">github.com/fentas/blep.fyi</a>
· <a class="underline-offset-2 hover:underline" href="/guide.html">Guide</a>
· <a class="underline-offset-2 hover:underline" href="/platforms.html">Platforms</a>
· <a class="underline-offset-2 hover:underline" href="/blog.html">Blog</a>
· <a class="underline-offset-2 hover:underline" href="/donate.html">Donate</a>
· <a class="underline-offset-2 hover:underline" href="/privacy.html">Privacy</a>
</footer>
<script type="module" src="/src/main.js"></script>
</body>
</html>