Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
590 lines (547 loc) · 30.3 KB
/
Copy pathindex.html
File metadata and controls
590 lines (547 loc) · 30.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
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#0B1218">
<title>Free Flight Tools</title>
<meta name="description" content="Small free tools for cross-country paraglider pilots. They run inside XCTrack as a web widget, or in any browser.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free Flight Tools">
<meta property="og:title" content="Free Flight Tools">
<meta property="og:description" content="Small free tools for cross-country paraglider pilots. Wind stations on terrain, and Swiss HX airspace phone numbers.">
<meta property="og:url" content="https://freeflight-tools.github.io/">
<meta property="og:image" content="https://freeflight-tools.github.io/img/og-hub.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="XCTrack Windmap and HX Call, two tools for paraglider pilots.">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/svg+xml" href="icon.svg">
<link rel="apple-touch-icon" href="icon-180.png">
<!-- ══════════════════════════════════════════════════════════════════════
No build step, no dependencies, one file. Same rule as both tools it
links to: this has to be readable and editable by whoever picks it up
next, and it must never be the reason a page fails to load.
THE SCREENSHOTS ARE THE WIDGET IN FLIGHT, not the standalone pages.
Both are real device captures of the tool running over XCTrack's own
map, which is what a pilot actually sees and what the earlier captures
of the PWA list pages could not show. They replaced img/windmap.png
and img/hxcall.png (plus their -dark twins) on 2026-08-14: those were
436px wide inside a card that rendered ~640px, so they were upscaled
and visibly soft.
No light/dark pair any more, and none is possible: XCTrack's map is
the background, so there is no theme to follow. They carry a
transparent surround instead, which is what lets the same file sit on
the warm band, the cool band and both palettes.
WEBP FIRST, PNG FALLBACK. The webp is the full 780px capture at ~150
KB; the png is 560px and 64 colours at ~230 KB and exists only for a
browser without webp. Regenerate both from img/screenshots/ with the
commands in README.md, and keep the pair in step.
BANDS, NOT CARDS. The layout is full-bleed colour bands rather than a
column of bordered boxes: the two configurator pages are built from
boxes, and repeating that here made the family read as one long form.
Each tool owns its colour, Windmap the amber of its own arrow and HX
Call the blue of its handset, and the band is where that colour lives.
AUTOMATIC TRANSLATION goes in the marked slot at the bottom of
<body>, and only on this page plus the two setup pages. Never on
app.html or widget.html in either repo: those are read in the air,
HX Call exists to work with no data connection, and a third-party
would put a network dependency inside that guarantee.
VISIT COUNTING follows exactly the same rule, in the slot below it.
Cloudflare Web Analytics, cookieless, on these three pages only. It
stores nothing on the device and builds no cross-site profile, which
is what keeps it out of consent-banner territory, and the small print
names it rather than hiding behind "we value your privacy". If it ever
reaches app.html or widget.html, that is a bug: those pages promise
"no analytics" in their own text and must stay able to.
═══════════════════════════════════════════════════════════════════ -->
<style>
:root{
--bg:#FFFFFF;
--bg-alt:#F5F7FA;
--line:#E1E7ED;
--line-soft:#EDF1F5;
--fg:#161C23;
--dim:#5C6A79;
--blue:#1F6FD0;
--sun:#B4620A;
--amber:#8A5206;
--amber-soft:#FDF6EA;
--amber-line:#EFDCBB;
--wash-wm:#FFF8ED;
--wash-hx:#F1F7FE;
--glow:rgba(22,28,35,.30);
--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
:root{
--bg:#0C1218;
--bg-alt:#131B23;
--line:#26313C;
--line-soft:#1D262F;
--fg:#E9EFF4;
--dim:#93A4B4;
--blue:#6DB0F2;
--sun:#F0A24A;
--amber:#E9A33C;
--amber-soft:#20180B;
--amber-line:#3D2C10;
--wash-wm:#171208;
--wash-hx:#0B1622;
--glow:rgba(0,0,0,.75);
}
}
*{box-sizing:border-box}
body{
margin:0;background:var(--bg);color:var(--fg);
font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:5px}
/* ── bands ──────────────────────────────────────────────────────────
Every section is full-bleed and owns its background; `.inner` is the
only thing that holds a width. That is what replaced the card grid. */
.band{padding:56px 0}
.inner{max-width:1040px;margin:0 auto;padding:0 22px}
/* the prose is capped by measure, not by a narrower container: a centred
narrow block put the small print on a different left edge from every
other section, which read as an indent rather than as a column. */
.note{max-width:64ch}
/* ── hero ───────────────────────────────────────────────────────────
Always dark, in both palettes. It carries two black phones a screen
later, and a band that changes colour under them made the page open
on something that read as an accident rather than a choice. */
.hero{
background:#0B1218;color:#EAF1F7;position:relative;overflow:hidden;
padding:52px 0 76px;
}
/* width, not `right`: an absolutely positioned REPLACED element with
width:auto takes its intrinsic width and ignores `right`, so the ridge
drew at its viewBox ratio (~900px) and stopped mid-page. */
.hero .ridge{position:absolute;left:-6%;width:112%;bottom:-1px;height:230px;pointer-events:none}
.hero .inner{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:11px}
.brand .nm{
font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:#8CA3B7;
}
h1{
margin:26px 0 0;font-size:clamp(33px,6.2vw,55px);line-height:1.03;
letter-spacing:-.035em;font-weight:750;text-wrap:balance;max-width:17ch;
}
/* the two words are coloured to match the two bands below: amber is the
wind band, blue is the airspace band. It is the only decorative colour
on the page, and it is doing a job. */
h1 em{font-style:normal}
h1 em.w{color:#F0A24A}
h1 em.a{color:#6DB0F2}
.hero p{margin:20px 0 0;font-size:clamp(16.5px,2.1vw,19px);line-height:1.5;color:#A9BCCD;max-width:44ch}
.hero p b{color:#EAF1F7;font-weight:600}
/* ── tool bands ─────────────────────────────────────────────────── */
.tool{position:relative;overflow:hidden}
.tool.wm{background:var(--wash-wm);--accent:var(--sun)}
.tool.hx{background:var(--wash-hx);--accent:var(--blue)}
.tool .inner{display:grid;gap:34px;align-items:center}
.eyebrow{
margin:0;display:flex;align-items:center;gap:9px;
font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:var(--accent);
}
.eyebrow svg{flex:none}
h2{
margin:16px 0 0;font-size:clamp(26px,4vw,36px);line-height:1.1;
letter-spacing:-.028em;font-weight:730;
}
.lede{margin:14px 0 0;font-size:17px;line-height:1.58;color:var(--dim);max-width:42ch}
.lede b{color:var(--fg);font-weight:600}
.pts{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.pts li{position:relative;padding-left:19px;font-size:15px;line-height:1.5;color:var(--dim)}
.pts li::before{
content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
border-radius:2px;background:var(--accent);
}
.pts b{color:var(--fg);font-weight:600}
.cta{
display:inline-flex;align-items:center;gap:9px;margin-top:26px;
padding:13px 21px 13px 23px;border-radius:999px;text-decoration:none;
font:650 15.5px/1 var(--sans);letter-spacing:-.01em;
}
.tool.wm .cta{background:linear-gradient(96deg,#EFCB1F,#EE8A1C);color:#181104}
.tool.hx .cta{background:var(--blue);color:#FFF}
@media (prefers-color-scheme:dark){ .tool.hx .cta{color:#06121F} }
.cta svg{flex:none}
/* the phone: no frame of ours, the capture brings its own */
.shot{margin:0}
/* `will-change` is a SAFARI REPAINT FIX, not an optimisation, and the filter
it names never actually changes.
Hovering the HX band's `.cta` glitched this image's drop-shadow in Safari
only, and only on that band. The trigger is the pair of them: the button
takes a `transform` AND a `filter` layer on hover (see the hover block near
the bottom), and `.tool` clips with `overflow:hidden`, so Safari
re-rasterises the band and gets the shadow's region wrong. What made it the
HX band alone is `.alt`, which sets `order` on `.txt` and `.shot`: paint
order then differs from DOM order, and the invalidation follows the wrong
one. The Windmap band has no `.alt`, so the two agree and it repaints
correctly.
Naming the filter gives the image its own stable layer, so a sibling's
hover cannot dirty it. Applied to both bands rather than just `.alt`,
because the next band to be reordered should not reintroduce this. */
.shot img{display:block;width:100%;max-width:330px;margin:0 auto;height:auto;
filter:drop-shadow(0 26px 44px var(--glow));will-change:filter}
.shot figcaption{
margin-top:16px;text-align:center;font-size:13px;line-height:1.5;color:var(--dim);
max-width:34ch;margin-left:auto;margin-right:auto;
}
@media (min-width:800px){
.band{padding:78px 0}
.tool .inner{grid-template-columns:1fr 340px;gap:64px}
.tool.alt .inner{grid-template-columns:340px 1fr}
.tool.alt .txt{order:2}
.tool.alt .shot{order:1}
/* height, not width: the capture is 1:2.1, so a 330px phone is 690px
tall and the text column then floats in the middle of a very deep
band. Capping the height keeps the section close to the text. */
.shot img{max-height:585px;width:auto;max-width:100%}
}
/* ── made for ───────────────────────────────────────────────────── */
.quiet{background:var(--bg-alt)}
h3{
margin:0 0 22px;font:600 11px/1 var(--mono);letter-spacing:.16em;
text-transform:uppercase;color:var(--dim);
}
.made{
margin:0;padding:0;list-style:none;
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;
}
.made svg{display:block;margin-bottom:11px}
.made b{display:block;color:var(--fg);font-size:15.5px;font-weight:650;margin-bottom:5px}
.made li{font-size:14.4px;line-height:1.55;color:var(--dim)}
/* ── notes ──────────────────────────────────────────────────────── */
.note{margin:0;padding-left:17px;border-left:3px solid var(--line);font-size:14.8px;line-height:1.6;color:var(--dim)}
.note b{color:var(--fg)}
.note + .note{margin-top:24px}
.note.warn{border-left-color:var(--amber);color:var(--amber)}
.note.warn b{color:var(--amber)}
footer{
background:#0B1218;color:#8CA3B7;padding:34px 0 40px;
font-size:13.6px;line-height:1.7;
}
footer a{color:#7FB6EE}
@media (hover:hover) and (pointer:fine){
.cta{transition:transform .14s,filter .14s}
.cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ── language switcher (GTranslate) ─────────────────────────────────
Their widget ships its own stylesheet and sets the wrapper's position
inline, so these need !important to land. Class names were read off the
rendered DOM, not guessed: #gt_float_wrapper > .gt_float_switcher >
.gt-selected > .gt-current-lang, and .gt_options > a.nturl.
The switcher floats over the hero, which is dark in both palettes, so
it is styled dark in both rather than following the page tokens.
Everything here is a restyle of markup the script injects. If the script
fails to load, nothing appears and the page stays exactly as it is in
English, which is the behaviour we want on a page a pilot may open on a
mountain. */
#gt_float_wrapper{top:14px !important;right:14px !important;z-index:60 !important}
.gt_float_switcher{
font-family:var(--sans) !important;
background:rgba(255,255,255,.10) !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:11px !important;
box-shadow:none !important;
overflow:hidden !important;
color:#EAF1F7 !important;
}
.gt_float_switcher .gt-selected{border:0 !important;background:none !important}
.gt_float_switcher .gt-selected .gt-current-lang{
padding:8px 11px !important;
font:600 11px/1 var(--mono) !important;
letter-spacing:.1em;text-transform:uppercase;color:#EAF1F7 !important;
}
.gt_float_switcher img{width:15px !important;height:15px !important;border-radius:2px}
.gt_float_switcher .gt_options{
background:#111A22 !important;border-top:1px solid rgba(255,255,255,.12) !important;
}
.gt_float_switcher .gt_options a{
color:#EAF1F7 !important;background:#111A22 !important;
font:400 13.4px/1.2 var(--sans) !important;padding:9px 12px !important;
}
.gt_float_switcher .gt_options a:hover{background:#1A252F !important}
.gt_float_switcher .gt_options a.gt-current{color:#7FB6EE !important;font-weight:650 !important}
.gt_float_switcher-arrow{filter:invert(1) opacity(.7)}
</style>
</head>
<body>
<header class="hero">
<svg class="ridge" viewBox="0 0 900 230" preserveAspectRatio="none" aria-hidden="true">
<path d="M0,190 L118,104 L186,142 L268,62 L352,150 L430,94 L520,166 L604,72 L700,152 L790,112 L900,172 L900,230 L0,230 Z"
fill="#16222D" opacity=".85"/>
<path d="M0,212 L96,152 L172,180 L262,126 L344,184 L438,138 L528,196 L622,128 L716,186 L812,158 L900,202 L900,230 L0,230 Z"
fill="#1D2C39"/>
</svg>
<div class="inner">
<div class="brand">
<svg width="30" height="30" viewBox="0 0 64 64" role="img" aria-label="Free Flight Tools">
<rect width="64" height="64" rx="15" fill="#0B1218"/>
<circle cx="48" cy="19" r="7" fill="#F0A24A"/>
<path d="M30 50 L44 27 L61 50 Z" fill="#4E82AD"/>
<path d="M2 50 L23 12 L44 50 Z" fill="#EAF1F7"/>
</svg>
<div class="nm notranslate" translate="no">Free Flight Tools</div>
</div>
<h1><em class="w">Wind</em> and <em class="a">airspace</em>, on the screen you already fly with.</h1>
<p>
Two small tools for cross-country paraglider pilots. They run inside
<b>XCTrack</b> as a web page widget, or on their own in any browser.
Free, no account, and nothing tracked while you fly.
</p>
</div>
</header>
<!-- Windmap first: it works anywhere, needs no setup, and is the one that
shows a stranger what these are in a single tap. -->
<section class="tool wm band">
<div class="inner">
<div class="txt">
<p class="eyebrow">
<svg width="17" height="17" viewBox="0 0 64 64" aria-hidden="true">
<g transform="translate(32 32) rotate(35)" stroke-linejoin="round" stroke-linecap="round">
<path d="M0,-13 L10,13 L0,5.2 L-10,13 Z" fill="currentColor" stroke="currentColor" stroke-width="6"/>
</g>
</svg>
Live wind station readings
</p>
<!-- Not "tracker". The word collides twice on this very page: the hero
promises "nothing tracked", and the host app is XCTrack — so a
"wind tracker" reads as something logging the pilot, which is the
one thing both tools refuse to do. "Station readings" also carries
the real difference from the forecast apps: these are measurements
from instruments, not a model. "Live" is fair against a forecast and
is qualified by the third bullet, which says old readings go red. -->
<h2 class="notranslate" translate="no">XCTrack Windmap</h2>
<p class="lede">
Wind stations near you, drawn <b>where they actually are</b>. Speed, gust
and direction for each one, so you can tell a valley-floor reading from a
summit reading before you commit to a glide.
</p>
<ul class="pts">
<!-- NOT a count of networks. "13 station networks" read as thirteen
stations, which undersells it and is wrong either way, and the
networks are winds.mobi's achievement rather than this tool's: the
credit now sits in the small print where it belongs.
Nor "average and gust", which was the first replacement: the lede
two lines up already says "speed, gust and direction for each
one", so it read as an echo, exactly like the old one did.
This bullet answers the question the lede leaves open, which is
why not just check a wind app on your phone. Because that means
leaving your navigation screen mid-flight, and this does not. -->
<li>Reads <b>on your XCTrack map</b>, without leaving your nav screen</li>
<li>Tap any arrow for the <b>last few hours</b> at that station</li>
<li>Old readings <b>go red</b> rather than quietly looking current</li>
</ul>
<a class="cta" href="https://freeflight-tools.github.io/xctrack-windmap/">
Open Windmap
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13M12 5l7 7-7 7"/></svg>
</a>
</div>
<figure class="shot">
<picture>
<source srcset="img/windmap-widget.webp" type="image/webp">
<img src="img/windmap-widget.png" width="780" height="1638" loading="lazy" decoding="async"
alt="A phone running XCTrack. Wind arrows sit on the terrain around Interlaken, each labelled with speed, gust and station altitude, and a panel at the bottom shows one station's last few hours.">
</picture>
<figcaption>The widget over XCTrack’s own map, in flight.</figcaption>
</figure>
</div>
</section>
<section class="tool hx band alt">
<div class="inner">
<div class="txt">
<p class="eyebrow">
<svg width="17" height="17" viewBox="0 0 64 64" aria-hidden="true">
<!-- the trailing `translate(0 -24)` is load-bearing: the handset's own
bounding box is 248x96 centred on (0,24), NOT on the origin, so
rotating it about the origin threw it off-viewBox. At scale .34 it
ran x -8.1..80.7 and y 2.7..75.1 in a 0 0 64 64 box and was clipped
left, right and bottom. Centre first, then rotate: .19 leaves the
rotated glyph 49.6 x 40.4, spanning x 7.2..56.8 and y 11.8..52.2.
Sized against the wind arrow's mass, not to fill the box. -->
<g transform="translate(32 32) rotate(-32) scale(.19) translate(0 -24)" fill="currentColor">
<rect x="-96" y="-24" width="192" height="48" rx="24"/>
<rect x="-124" y="-24" width="66" height="96" rx="30"/>
<rect x="58" y="-24" width="66" height="96" rx="30"/>
</g>
</svg>
HX airspace phone directory
</p>
<!-- Not "Airspace status" or "Airspace checker", both of which promise
something the tool does not do: it does not know whether an HX is
active, it finds you the number to ask. "Phone directory" is the
honest description, and it is what stops a reader having to reach
the lede to learn what HX Call is for.
It is a long kicker: the text run measures 252px, which still fits
one line inside the 276px a 320px phone leaves after .inner's 22px
padding, so it never wraps. The cost is rhythm, not fit. It is
~2.2x the width of the `HX Call` heading it introduces. -->
<h2 class="notranslate" translate="no">HX Call</h2>
<p class="lede">
Swiss <b>HX</b> airspaces have no fixed hours. They can switch on at 30
minutes’ notice, and where one publishes a number you are allowed
to check its status by phone. This finds the right number for wherever
you are.
</p>
<!-- "you are allowed to check by phone" full stop was an over-claim. The
permission is general (VFR RAC 4-0-0-1 §0.2.2) but the numbers are
not: 8 of the 13 zones publish one, 5 do not. Counted from
hx-call/hx/data.js on 2026-08-16 — Payerne, Dübendorf, Lugano,
St. Gallen and Les Eplatures have no `p:`. -->
<ul class="pts">
<!-- Not "works with no signal": the tool's whole purpose is placing a
call, so it needs signal for that. What it does not need is a
DATA connection, and the distinction is the honest one. -->
<!-- First, because it is the one thing that separates this tool from
its own widget: a phone directory needs no map and no overlay, so
the plain app IS the whole product. That makes it the only version
available to a pilot on iOS, or to anyone who does not fly with
XCTrack. Windmap's list cannot claim the same: without a map it
loses the point of Windmap. -->
<li><b>No XCTrack needed</b>: the app runs in any browser, iPhone included</li>
<li>Needs <b>no data connection</b>, only enough signal to dial</li>
<!-- WAS: "13 zones, and the ones with no number yet are still listed",
which is false in the shipped default. hx-call/hx/core.js filters
on `cfg.nonum || z.p` and `nonum` defaults to 0, so the five zones
with no number are HIDDEN unless the pilot turns them on. hx-call's
own CLAUDE.md is explicit that the pages "must never imply the list
is a survey of what is nearby", and that bullet did exactly that. -->
<li><b>8 of the 13</b> Swiss HX zones publish a number to call</li>
<li>A <b>re-check clock</b> per zone, because one call is not enough</li>
</ul>
<a class="cta" href="https://freeflight-tools.github.io/hx-call/">
Open HX Call
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h13M12 5l7 7-7 7"/></svg>
</a>
</div>
<figure class="shot">
<picture>
<source srcset="img/hxcall-widget.webp" type="image/webp">
<img src="img/hxcall-widget.png" width="780" height="1638" loading="lazy" decoding="async"
alt="A phone running XCTrack. Two chips float at the bottom of the map, Emmen Buochs Alpnach and Meiringen, each with its phone number and the words IN RANGE.">
</picture>
<figcaption>Both zones in range, with the number ready to dial.</figcaption>
</figure>
</div>
</section>
<section class="band quiet">
<div class="inner">
<h3>Made for</h3>
<ul class="made">
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V5a1.6 1.6 0 013.2 0v6"/><path d="M11.2 11V4a1.6 1.6 0 013.2 0v7"/><path d="M14.4 11.5V6a1.6 1.6 0 013.2 0v9a6 6 0 01-6 6h-1a5 5 0 01-4.2-2.3L4 15.5a1.7 1.7 0 012.7-2L8 15"/></svg>
<b>One hand, in gloves</b>
Big targets, no menus, and nothing to scroll past to reach what you opened it for.
</li>
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--sun)" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8"/></svg>
<b>Bright sunlight</b>
High contrast, and every colour has a number printed beside it. Colour is never
the only thing carrying a reading.
</li>
<li>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l18 18"/><path d="M5.5 10.5A9 9 0 0110 8.2M18.5 10.5a9 9 0 00-4-2.2"/><path d="M8.6 14a5 5 0 013-1.4M15.4 14a5 5 0 00-1.6-1.1"/><circle cx="12" cy="18" r="1"/></svg>
<b>A battery that has to last</b>
Nothing polls faster than the data actually changes.
</li>
</ul>
</div>
</section>
<section class="band">
<div class="inner">
<h3>The small print</h3>
<p class="note">
<b>Your position stays on your phone.</b> Windmap asks winds.mobi which
stations are in the area around you, and that is the only thing either tool
ever sends. No accounts, and no profile of you anywhere.
</p>
<!-- This page said "no analytics" before there were any, so it cannot stay
as it was. The distinction that is actually true, and the one a reader
cares about, is NOT tools-versus-nothing: it is the pages you fly with
against the pages you set up on. Said plainly and by name, because
"we use cookies to improve your experience" is how you lose someone
who came here for a tool that promised not to. -->
<p class="note">
<b>These three pages count visits.</b> This one and the two setup pages use
Cloudflare Web Analytics: a tally of page views and the country they came
from. No cookies, no identifier, nothing stored on your device, and no way
to follow you anywhere else. <b>The tools themselves never do this.</b> The
list and the widget you fly with make no such request at all.
</p>
<!-- The page shows wind readings on every screen and never said whose they
are. winds.mobi does the aggregating, and the measurements belong to
the networks it aggregates, so the credit is owed rather than
decorative. It sits here rather than in a feature bullet: the reach of
those networks is their achievement, not this tool's. -->
<p class="note">
<b>The wind readings are not ours.</b> Windmap draws what
<a href="https://winds.mobi">winds.mobi</a> serves, which aggregates
MeteoSwiss, SLF, Holfuy, OpenWindMap and others. The measurements belong
to those networks.
</p>
<p class="note warn">
<b>Unofficial, and no warranty.</b> These show measured facts. They are not
forecasts, and never a verdict on whether a flight is safe. Only the official
publications have legal validity, and you are responsible for your own flight
preparation.
</p>
</div>
</section>
<footer>
<div class="inner">
Built by a paraglider pilot, for paraglider pilots.
<a href="https://github.com/freeflight-tools">Source and issues on GitHub</a>.
Every tool is a handful of static files with no dependencies and no build step.
</div>
</footer>
<!-- ══ AUTOMATIC TRANSLATION ═══════════════════════════════════════════
GTranslate, on this page and the two setup pages ONLY. Never on
app.html or widget.html in either tool repo: those are read in the
air, HX Call exists to work with no data connection, and a third-party
would put a network dependency inside that guarantee.
At the end of <body> and `defer`red, so it cannot block the first
paint. If the CDN is unreachable the switcher simply never appears
and the page stays fully readable in English.
═══════════════════════════════════════════════════════════════════ -->
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","native_language_names":true,"detect_browser_language":true,"languages":["en","de","fr","it","es"],"wrapper_selector":".gtranslate_wrapper","switcher_horizontal_position":"right","switcher_vertical_position":"top","float_switcher_open_direction":"bottom"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
<!-- ══ VISIT COUNTING ═══════════════════════════════════════════════════
Cloudflare Web Analytics, on THIS PAGE ONLY. Never app.html and never
widget.html: those are read in the air, HX Call exists to work with no
data connection at all, and a beacon there would put a network request
inside that guarantee. Same rule as the translation widget above, and
for the same reason.
Cookieless by design. It stores nothing on the device and builds no
cross-site profile, which is what keeps it out of consent-banner
territory. The small print says so in plain words, because the page
promised "no analytics" before this existed and must not now be wrong
about itself.
THE TOKEN IS INJECTED, not hardcoded into a <script src>. An
unconfigured page then makes NO request at all: until a real 32-hex
token is pasted in, this does nothing and costs nothing. Fail closed,
so the page is safe to ship before the account exists.
═══════════════════════════════════════════════════════════════════ -->
<script>
(function () {
var TOKEN = "2537f91a24654d4c8ed453f8c445c6b9";
if (!/^[a-f0-9]{32}$/.test(TOKEN)) return; /* not set up yet */
var s = document.createElement("script");
s.defer = true;
s.src = "https://static.cloudflareinsights.com/beacon.min.js";
s.setAttribute("data-cf-beacon", '{"token":"' + TOKEN + '"}');
document.head.appendChild(s);
})();
</script>
</body>
</html>