-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
303 lines (290 loc) · 17.1 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
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
<!DOCTYPE html>
<html class="no-js" lang="fr-FR">
<head>
<meta charset="utf-8" />
<title>Covid100.fr 🦠</title>
<meta name="description" content="Une carte interactive pour connaître sa zone de 10 ou 100km autour de chez soi. #covidー19 #covid19 via @Covid100fr" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="site.webmanifest" />
<link rel="apple-touch-icon" href="img/logo.jpg" />
<link rel="icon" type="image/png" href="img/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/custom.css?clipboard" />
<meta name="theme-color" content="#eda988" />
<!-- test -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://covid100.fr",
"name": "Une carte pour connaître sa zone de 10 ou 100km autour de chez soi.",
"logo": "https://covid100.fr/covid100_192.png"
}
</script>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="Covid100fr" />
<meta property="og:url" content="https://covid100.fr" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:title" content="Covid100.fr" />
<meta property="og:site_name" content="Covid100.fr" />
<meta
property="og:description"
content="Une carte interactive pour connaître sa zone de 10 ou 100km autour de chez soi. #covidー19 #covid19 via @Covid100fr"
/>
<meta property="og:image" content="https://covid100.fr/img/screenshot.jpg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and
security.
</p>
<![endif]-->
<div id="app">
<nav no-screenshot="true">
<div class="container">
<a href="" class="brand">Covid💯.fr</a>
<div>
<a href="https://twitter.com/bilelz" target="_blank" class="button" title="@bilelz">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg3626"
viewBox="0 0 300.00006 244.18703"
height="244.18703"
width="300.00006"
>
<g transform="translate(-539.17946,-568.85777)" id="layer1">
<path
id="path3611"
style="fill: #1da1f2; fill-opacity: 1; fill-rule: nonzero; stroke: none"
d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396"
/>
</g>
</svg>
<!-- <span>@Covid100fr</span> -->
</a>
<button type="button" onclick="downloadScreenshot(event)" title="Prendre un screenshot">
📸 <span class="hidden-if-mobile"> Screenshot</span>
</button>
<button type="button" data-share onclick="sharePosition(event)" aria-label="Partager la page">
<span data-share-file title="Avec un screenshot :)">📸 </span>
<svg
id="shareIcon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="512px"
id="Layer_1"
style="enable-background: new 0 0 512 512"
version="1.1"
viewBox="0 0 512 512"
width="512px"
xml:space="preserve"
>
<g>
<path d="M288,298.1v92.3L448,256L288,112v80C100.8,192,64,400,64,400C117,307,186.4,298.1,288,298.1z" />
</g>
</svg>
<span class="hidden-if-mobile">Partager</span>
</button>
</div>
</div>
</nav>
<div id="gpsStatus" class="hidden container"></div>
<div id="screenshot-area">
<div class="screenshot-header"><span class="brand">Covid💯.fr</span></div>
<select id="radius" name="radius" class="button" onchange="setRadius(this.value)">
<option value="1000">📍 1km</option>
<option value="10000" selected>📍 10km</option>
<option value="30000">📍 30km</option>
<option value="100000">⛰️ 100km</option>
<option value="1000000">🌍 1000km</option>
<option value="10000000">👽 10 000km</option>
</select>
<div id="map"></div>
</div>
<div class="container" no-screenshot="true">
<footer>
<button type="button" onclick="gps()">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
/>
</svg>
<span class="hidden-if-mobile"> Autour de moi</span>
<span class="only-if-mobile"> GPS</span>
</button>
<button type="button" onclick="france()">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path
d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
/>
<path d="M0 0h24v24H0z" fill="none" />
</svg>
<span class="only-if-mobile">France</span>
<span class="hidden-if-mobile">Recentrer sur la France</span>
</button>
<button type="button" onclick="toggleMap()" class="tile-toggle">
<img data-map="0" src="img/classic.jpg" alt="carte classique" loading="lazy" />
<img data-map="1" src="img/stomen.jpg" alt="carte parchemin" loading="lazy" />
</button>
</footer>
</div>
<div id="rgpd" no-screenshot="true">
<div>🍪 ce site utilise google analytics en mode anonyme 🍪</div>
<button type="button" onclick="rgpd()" class="invert small">OK</button>
</div>
</div>
<template id="share-tmpl">
<div>
Cliquez n'importe où sur la carte<br />
ou partager cette position
</div>
<div>
<a href="https://www.facebook.com/sharer.php?u=${encodeURIComponent(url)}" target="_blank" class="button invert small social" title="Facebook">
<svg viewBox="0 0 36 36" class="facebook" fill="url(#jsc_s_1e)" height="40" width="40">
<defs>
<linearGradient x1="50%" x2="50%" y1="97.0782153%" y2="0%" id="jsc_s_1e">
<stop offset="0%" stop-color="#0062E0"></stop>
<stop offset="100%" stop-color="#19AFFF"></stop>
</linearGradient>
</defs>
<path d="M15 35.8C6.5 34.3 0 26.9 0 18 0 8.1 8.1 0 18 0s18 8.1 18 18c0 8.9-6.5 16.3-15 17.8l-1-.8h-4l-1 .8z"></path>
<path
class="p361ku9c"
d="M25 23l.8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15v12.7c1 .2 2 .3 3 .3s2-.1 3-.3V23h4z"
></path>
</svg>
</a>
<a
href="https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${text}&via=${via}&hashtags=covidー19"
target="_blank"
class="button invert small social"
title="Twitter"
><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg3626"
viewBox="0 0 300.00006 244.18703"
height="244.18703"
width="300.00006"
>
<g transform="translate(-539.17946,-568.85777)" id="layer1">
<path
id="path3611"
style="fill: #1da1f2; fill-opacity: 1; fill-rule: nonzero; stroke: none"
d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396"
/>
</g>
</svg>
</a>
<a href="https://api.whatsapp.com/send?&text=${text}${encodeURIComponent(' '+url)}" target="_blank" class="button invert small social" title="WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2489" height="2500" viewBox="0 0 1219.547 1225.016">
<path
fill="#E0E0E0"
d="M1041.858 178.02C927.206 63.289 774.753.07 612.325 0 277.617 0 5.232 272.298 5.098 606.991c-.039 106.986 27.915 211.42 81.048 303.476L0 1225.016l321.898-84.406c88.689 48.368 188.547 73.855 290.166 73.896h.258.003c334.654 0 607.08-272.346 607.222-607.023.056-162.208-63.052-314.724-177.689-429.463zm-429.533 933.963h-.197c-90.578-.048-179.402-24.366-256.878-70.339l-18.438-10.93-191.021 50.083 51-186.176-12.013-19.087c-50.525-80.336-77.198-173.175-77.16-268.504.111-278.186 226.507-504.503 504.898-504.503 134.812.056 261.519 52.604 356.814 147.965 95.289 95.36 147.728 222.128 147.688 356.948-.118 278.195-226.522 504.543-504.693 504.543z"
/>
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="609.77" y1="1190.114" x2="609.77" y2="21.084">
<stop offset="0" stop-color="#20b038" />
<stop offset="1" stop-color="#60d66a" />
</linearGradient>
<path
fill="url(#a)"
d="M27.875 1190.114l82.211-300.18c-50.719-87.852-77.391-187.523-77.359-289.602.133-319.398 260.078-579.25 579.469-579.25 155.016.07 300.508 60.398 409.898 169.891 109.414 109.492 169.633 255.031 169.57 409.812-.133 319.406-260.094 579.281-579.445 579.281-.023 0 .016 0 0 0h-.258c-96.977-.031-192.266-24.375-276.898-70.5l-307.188 80.548z"
/>
<image overflow="visible" opacity=".08" width="682" height="639" transform="translate(270.984 291.372)" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
fill="#FFF"
d="M462.273 349.294c-11.234-24.977-23.062-25.477-33.75-25.914-8.742-.375-18.75-.352-28.742-.352-10 0-26.25 3.758-39.992 18.766-13.75 15.008-52.5 51.289-52.5 125.078 0 73.797 53.75 145.102 61.242 155.117 7.5 10 103.758 166.266 256.203 226.383 126.695 49.961 152.477 40.023 179.977 37.523s88.734-36.273 101.234-71.297c12.5-35.016 12.5-65.031 8.75-71.305-3.75-6.25-13.75-10-28.75-17.5s-88.734-43.789-102.484-48.789-23.75-7.5-33.75 7.516c-10 15-38.727 48.773-47.477 58.773-8.75 10.023-17.5 11.273-32.5 3.773-15-7.523-63.305-23.344-120.609-74.438-44.586-39.75-74.688-88.844-83.438-103.859-8.75-15-.938-23.125 6.586-30.602 6.734-6.719 15-17.508 22.5-26.266 7.484-8.758 9.984-15.008 14.984-25.008 5-10.016 2.5-18.773-1.25-26.273s-32.898-81.67-46.234-111.326z"
/>
<path
fill="#FFF"
d="M1036.898 176.091C923.562 62.677 772.859.185 612.297.114 281.43.114 12.172 269.286 12.039 600.137 12 705.896 39.633 809.13 92.156 900.13L7 1211.067l318.203-83.438c87.672 47.812 186.383 73.008 286.836 73.047h.255.003c330.812 0 600.109-269.219 600.25-600.055.055-160.343-62.328-311.108-175.649-424.53zm-424.601 923.242h-.195c-89.539-.047-177.344-24.086-253.93-69.531l-18.227-10.805-188.828 49.508 50.414-184.039-11.875-18.867c-49.945-79.414-76.312-171.188-76.273-265.422.109-274.992 223.906-498.711 499.102-498.711 133.266.055 258.516 52 352.719 146.266 94.195 94.266 146.031 219.578 145.992 352.852-.118 274.999-223.923 498.749-498.899 498.749z"
/>
</svg>
</a>
<a href="mailto:?subject=${text}&body=${encodeURIComponent(' '+url)}" data-no-share target="_blank" class="button invert small social" title="eMail">
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<path
d="M494.545,68.364H17.455C7.814,68.364,0,76.177,0,85.818v340.364c0,9.641,7.814,17.455,17.455,17.455h477.091
c9.641,0,17.455-7.814,17.455-17.455V85.818C512,76.177,504.186,68.364,494.545,68.364z M477.091,408.727H34.909V103.273h442.182
V408.727z"
/>
</g>
</g>
<g>
<g>
<path
d="M483.98,71.93L256,245.411L28.026,71.93L6.883,99.706l238.545,181.533c3.124,2.374,6.848,3.561,10.572,3.561
s7.447-1.187,10.572-3.561L505.117,99.706L483.98,71.93z"
/>
</g>
</g>
</svg>
</a>
<a href="${url}" onclick="clipboard(event)" class="button invert small social" id="socialClipboard" title="Copier dans votre presse-papier">
Copier le lien
</a>
</div>
<div>
<a href="${url}" onclick="sharePosition(event)" data-share class="button invert small social" id="socialOthers" title="Autres applications">
<span data-share-file> 📸 Avec un <i>screenshot</i></span>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="512px"
id="Layer_1"
style="enable-background: new 0 0 512 512"
version="1.1"
viewBox="0 0 512 512"
width="512px"
xml:space="preserve"
>
<g>
<path d="M288,298.1v92.3L448,256L288,112v80C100.8,192,64,400,64,400C117,307,186.4,298.1,288,298.1z" />
</g>
</svg>
</a>
</div>
</template>
<link rel="stylesheet" type="text/css" href="css/leaflet.min.css" />
<script src="js/vendor/leaflet.js"></script>
<script src="js/vendor/dom-to-image.min.js"></script>
<script src="js/main.js?clipboard"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-4041493-17"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-4041493-17", { anonymize_ip: true });
</script>
</body>
</html>