-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
165 lines (165 loc) · 11.7 KB
/
index.html
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
<!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="List COVID-19 Exposure Notification Services"/>
<meta name="keywords" content="covid-19, coronavirus, exposure notification, privacy-preserving contact tracing, bluetooth low energy"/>
<meta name="author" content="Maximilian Golla">
<link rel="shortcut icon" href="ico/favicon.ico?rnd=123">
<title>COVID-LENS - List COVID-19 Exposure Notification Services</title>
<link href="css/thirdparty/bootstrap.min.css" rel="stylesheet">
<link href="css/thirdparty/fontawesome.all.min.css" rel="stylesheet">
<link href="css/custom/main.css?rnd=123" rel="stylesheet">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@m33x">
<meta name="twitter:title" content="COVID-LENS">
<meta name="twitter:description" content="List nearby COVID-19 Exposure Notification services with your browser.">
<meta name="twitter:image" content="https://covid-lens.github.io/img/twittercard.jpg">
<!-- Facebook Card -->
<meta property="og:url" content="https://covid-lens.github.io">
<meta property="og:type" content="website">
<meta property="og:title" content="COVID-LENS">
<meta property="og:description" content="List nearby COVID-19 Exposure Notification services with your browser.">
<meta property="og:image" content="https://covid-lens.github.io/img/twittercard.jpg">
</head>
<body id="main">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#main">COVID-LENS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item active"><a class="nav-link text-primary" data-toggle="collapse" data-target=".navbar-collapse.show" href="#main">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link text-primary" data-toggle="collapse" data-target=".navbar-collapse.show" href="#faq">FAQ</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="btn btn-outline-dark" role="button" href="./contact.html"><i class="fas fa-info-circle"></i> Contact</a></li>
<li class="nav-item"><a class="btn btn-outline-dark" role="button" href="./privacy.html"><i class="fas fa-user-secret"></i> Privacy</a></li>
</ul>
</div>
</div><!-- end container -->
</nav>
<noscript><br><br><br><br><br><h1 style="color:red;text-align: center;">You need to enable JavaScript for this website!</h1></noscript>
<div class="container">
<div class="row text-center">
<div class="col">
<h1>List Exposure Notification Services</h1>
Click this button to see a list of devices that have a contact tracing app installed.
<br>
<br>
<button id="list-devices-btn" type="button" class="btn btn-primary btn-lg" onclick="navigator.bluetooth.requestDevice({filters:[{services:[0xfd6f]}]})"><i class="fas fa-mobile-alt"></i> List Nearby Devices</button>
<br>
<br>
<p id="helptext" class="text-muted">
Does not work for you?<br>Enable <i class="fab fa-bluetooth"></i> Bluetooth and use <i class="fab fa-chrome"></i> Google Chrome.
</p>
</div>
</div><!-- end row -->
<hr>
<div class="row text-center">
<div class="col">
<img src="img/list.jpg" class="img-fluid rounded" style="border:1px solid #dee2e6" alt="List of nearby devices.">
<br>
<br>
<p>
It is <mark>completely normal</mark> that you only see a list of <b><i class="fas fa-signal"></i> Unknown or Unsupported Devices</b>.
In fact, this means <span class="text-success">a COVID-19 privacy-preserving contact tracing app is nearby</span> 👍.
In contrast, if your <span class="text-danger">list is empty</span> it is likely that there is <span class="text-danger">no device with the app</span> around 😭.
</p>
</div>
</div><!-- end row -->
<hr>
<div class="row text-center">
<div class="col">
<h2 id="faq">FAQ</h2>
<h3 id="work">How does it work?</h3>
<p>
We use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Bluetooth/requestDevice" target="_blank" rel="noopener">Web Bluetooth API</a> that is available in <a href="https://caniuse.com/#feat=mdn-api_bluetooth" target="_blank" rel="noopener">modern web browsers</a>.
The listed devices should only include mobiles that have a <a href="https://www.google.com/covid19/exposurenotifications/" target="_blank" rel="noopener">Google/Apple privacy-preserving contact tracing</a> app installed.
</p>
<p>
The Bluetooth Low Energy-based <a href="https://blog.google/documents/70/Exposure_Notification_-_Bluetooth_Specification_v1.2.2.pdf" target="_blank" rel="noopener">advertising payload</a> of COVID-19 <a href="https://en.wikipedia.org/wiki/Exposure_Notification" target="_blank" rel="noopener">Exposure Notifications</a> include a special Service UUID.
<mark>We filter for the Service UUID</mark> (<code>0xFD6F</code>), to only display devices that have a contact tracing app installed.
</p>
<h3 id="spy">Does this website spy on me?</h3>
<p>
Nope.
All is happening on your device only.
The <a href="https://webbluetoothcg.github.io/web-bluetooth/" target="_blank" rel="noopener">Web Bluetooth API</a> is designed with privacy in mind 🕵.
Thus, the website <b>cannot</b> access the list of devices or any Bluetooth packets.
Moreover, there are no Ads, trackers, or cookies used on this website.
</p>
<h3 id="list">Why does the list of devices seem to change?</h3>
<p>
The COVID-19 <a href="https://en.wikipedia.org/wiki/Exposure_Notification" target="_blank" rel="noopener">Exposure Notification API</a> protects your privacy 💪.
Thus, the <a href="https://en.wikipedia.org/wiki/MAC_address">MAC addresses</a> shown in your list are completely random and will change every 15 minutes.
Read more <a href="https://www.google.com/covid19/exposurenotifications/" target="_blank" rel="noopener">here</a>.
</p>
<h3 id="iphone">Why does this website not work my phone/computer?</h3>
<p>
Some platforms do not support the <a href="https://webbluetoothcg.github.io/web-bluetooth/" target="_blank" rel="noopener">Web Bluetooth API</a> yet.
</p>
<div class="table-responsive-sm">
<table class="table table-sm">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"><img src="img/browser/chrome.svg" width="32" alt="Google Chrome browser icon"> Chrome</th>
<th scope="col"><img src="img/browser/firefox.svg" width="32" alt="Mozilla Firefox browser icon">Firefox</th>
<th scope="col"><img src="img/browser/safari.svg" width="32" alt="Apple Safari browser icon">Safari</th>
<th scope="col"><img src="img/browser/edge.svg" width="32" alt="Microsoft Edge browser icon">Edge</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><img src="img/os/android.svg" width="24" alt="Android icon"></th>
<td class="align-middle success">Yes</td>
<td class="align-middle danger">No</td>
<td class="align-middle light">-</td>
<td class="align-middle success">Yes</td>
</tr>
<tr>
<th scope="row"><img src="img/os/ios.svg" width="24" alt="iOS icon"></th>
<td class="align-middle danger">No</td>
<td class="align-middle danger">No</td>
<td class="align-middle danger">No</td>
<td class="align-middle danger">No</td>
</tr>
<tr>
<th scope="row"><img src="img/os/windows.svg" width="24" alt="Windows icon"></th>
<td class="align-middle success">Yes</td>
<td class="align-middle danger">No</td>
<td class="align-middle light">-</td>
<td class="align-middle success">Yes</td>
</tr>
<tr>
<th scope="row"><img src="img/os/macos.svg" width="20" alt="macOS icon"></th>
<td class="align-middle warning">Yes (<a href="https://developer.apple.com/forums/thread/694146" target="_blank" rel="noopener">Only up to Big Sur</a>)</td>
<td class="align-middle danger">No</td>
<td class="align-middle danger">No</td>
<td class="align-middle warning">Yes (<a href="https://developer.apple.com/forums/thread/694146" target="_blank" rel="noopener">Only up to Big Sur</a>)</td>
</tr>
<tr>
<th scope="row"><img src="img/os/linux.svg" width="20" alt="Linux icon"></th>
<td class="align-middle success"><a href="https://twitter.com/m33x/status/1274618626356785152" target="_blank" rel="noopener">Yes*</a></td>
<td class="align-middle danger">No</td>
<td class="align-middle light">-</td>
<td class="align-middle success"><a href="https://twitter.com/m33x/status/1274618626356785152" target="_blank" rel="noopener">Yes*</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div><!-- end row -->
<br><br>
</div><!-- end container -->
<script src="js/thirdparty/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/thirdparty/jquery.min.js"><\/script>')</script>
<script src="js/thirdparty/bootstrap.bundle.min.js"></script>
<script src="js/custom/website.js"></script>
</body>
</html>