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
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<title>Firefox VPN</title>
<link rel="icon" type="image/png" href="icon.png">
<link rel="stylesheet" href="app.css">
<script src="app.js" defer></script>
</head>
<body>
<svg class="icon-sprite" aria-hidden="true">
<symbol id="i-menu" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></symbol>
<symbol id="i-close" viewBox="0 0 24 24"><path d="M6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4 17.6 5 12 10.6z"/></symbol>
<symbol id="i-overview" viewBox="0 0 24 24"><path d="M4 13h6V4H4zm0 7h6v-5H4zm10 0h6v-9h-6zm0-16v5h6V4z"/></symbol>
<symbol id="i-accounts" viewBox="0 0 24 24"><path d="M16 11a3.5 3.5 0 1 0-3.5-3.5A3.5 3.5 0 0 0 16 11zm-8 0A3 3 0 1 0 5 8a3 3 0 0 0 3 3zm0 2c-2.7 0-6 1.3-6 3.5V19h7v-2.2c0-1.3.6-2.4 1.6-3.3A9 9 0 0 0 8 13zm8 0c-3 0-7 1.5-7 4v2h14v-2c0-2.5-4-4-7-4z"/></symbol>
<symbol id="i-globe" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm6.9 6h-3a15.7 15.7 0 0 0-1.3-3.6A8 8 0 0 1 18.9 8zM12 4a14 14 0 0 1 1.9 4h-3.8A14 14 0 0 1 12 4zM4.3 14a8 8 0 0 1 0-4h3.4a16.5 16.5 0 0 0 0 4zm.8 2h3a15.7 15.7 0 0 0 1.3 3.6A8 8 0 0 1 5.1 16zm3-8h-3a8 8 0 0 1 4.3-3.6A15.7 15.7 0 0 0 8.1 8zM12 20a14 14 0 0 1-1.9-4h3.8A14 14 0 0 1 12 20zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4zm.3 5.6a15.7 15.7 0 0 0 1.3-3.6h3a8 8 0 0 1-4.3 3.6zm1.7-5.6a16.5 16.5 0 0 0 0-4h3.4a8 8 0 0 1 0 4z"/></symbol>
<symbol id="i-logs" viewBox="0 0 24 24"><path d="M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v12h14V6zm2 2.5 3 2.5-3 2.5zM11 14h6v1.5h-6z"/></symbol>
<symbol id="i-settings" viewBox="0 0 24 24"><path d="M19.4 13a7.5 7.5 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7.4 7.4 0 0 0-1.7-1L15 3.3h-4l-.4 2.6a7.4 7.4 0 0 0-1.7 1l-2.5-1-2 3.5L6.6 11a7.5 7.5 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1a7.4 7.4 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7.4 7.4 0 0 0 1.7-1l2.5 1 2-3.5zM13 15.5a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z" transform="translate(-1 0)"/></symbol>
<symbol id="i-star" viewBox="0 0 24 24"><path transform="translate(0 .45)" d="m12 2.5 2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z"/></symbol>
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M12 5C6.5 5 2.7 9.4 1.5 12c1.2 2.6 5 7 10.5 7s9.3-4.4 10.5-7C21.3 9.4 17.5 5 12 5zm0 12a5 5 0 1 1 5-5 5 5 0 0 1-5 5zm0-8a3 3 0 1 0 3 3 3 3 0 0 0-3-3z"/></symbol>
<symbol id="i-eye-off" viewBox="0 0 24 24"><path d="m3.3 2 18.7 18.7-1.4 1.4-3.4-3.4A11.5 11.5 0 0 1 12 19C6.5 19 2.7 14.6 1.5 12a13.6 13.6 0 0 1 4.1-5L1.9 3.4zm4.8 7.6A5 5 0 0 0 14.4 16l-1.6-1.6A3 3 0 0 1 9.6 11.2zM12 5c5.5 0 9.3 4.4 10.5 7a13.4 13.4 0 0 1-3 4.1l-3-3A5 5 0 0 0 10 7.6L7.9 5.5A11.6 11.6 0 0 1 12 5z"/></symbol>
<symbol id="i-help" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm-1-4h2v2h-2zm1-10a4 4 0 0 0-4 4h2a2 2 0 1 1 2 2 1 1 0 0 0-1 1v2h2v-1.1A4 4 0 0 0 12 6z"/></symbol>
<symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 2.5 1.5 21h21zm0 4.2L19 19H5zM11 10v5h2v-5zm0 6.5v2h2v-2z"/></symbol>
<symbol id="i-folder" viewBox="0 0 24 24"><path d="M3 5a1 1 0 0 1 1-1h6l2 2h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 1v12h14V8h-7.8l-2-2z"/></symbol>
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></symbol>
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.8-4.2L13 11h7V4z"/></symbol>
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></symbol>
<symbol id="i-copy" viewBox="0 0 24 24"><path d="M8 7V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h6a1 1 0 0 1 1 1v6h2V5h-9zM6 9v9h9V9z"/></symbol>
<symbol id="i-up" viewBox="0 0 24 24"><path d="m12 7 6 6-1.4 1.4-4.6-4.6-4.6 4.6L6 13z"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="m12 17-6-6 1.4-1.4 4.6 4.6 4.6-4.6L18 11z"/></symbol>
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M9 3h6l1 2h4v2H4V5h4zm-3 6h12l-1 12H7zm4 2v8h1.5v-8zm3.5 0v8H15v-8z"/></symbol>
<symbol id="i-moon" viewBox="0 0 24 24"><path d="M20 15.3A8.5 8.5 0 0 1 8.7 4a8.5 8.5 0 1 0 11.3 11.3z"/></symbol>
<symbol id="i-sun" viewBox="0 0 24 24"><path d="M12 7a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm-1-5h2v3h-2zm0 17h2v3h-2zM2 11h3v2H2zm17 0h3v2h-3zM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4zm12.1 12.1 1.4-1.4 2.1 2.1-1.4 1.4zM4.2 18.4l2.1-2.1 1.4 1.4-2.1 2.1zM16.3 6.3l2.1-2.1 1.4 1.4-2.1 2.1z"/></symbol>
<symbol id="i-logout" viewBox="0 0 24 24"><path d="M10 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6v-2H5V5h5zm6.6 4.4L15.2 8.8 17.4 11H9v2h8.4l-2.2 2.2 1.4 1.4L21.2 12z"/></symbol>
<symbol id="i-power" viewBox="0 0 24 24"><path d="M11 2h2v10h-2zm-4.9 3.3 1.4 1.4A7 7 0 1 0 16.5 6.7l1.4-1.4A9 9 0 1 1 6.1 5.3z"/></symbol>
<symbol id="i-swap" viewBox="0 0 24 24"><path d="M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></symbol>
<symbol id="i-route" viewBox="0 0 24 24"><path d="M9.78 11.16 8.36 12.58c-.68-.69-1.34-1.58-1.79-2.94l1.94-.49c.32.89.77 1.5 1.27 2.01zM11 6 7 2 3 6h3.02c.02.81.08 1.54.19 2.17l1.94-.49C8.08 7.2 8.03 6.63 8.02 6H11zm10 0-4-4-4 4h2.99c-.1 3.68-1.28 4.75-2.54 5.88-.5.44-1.01.92-1.45 1.55-.34-.49-.73-.88-1.13-1.24L9.46 13.6c.93.85 1.54 1.54 1.54 3.4v5h2v-5c0-2.02.71-2.66 1.79-3.63 1.38-1.24 3.08-2.78 3.2-7.37H21z"/></symbol>
<symbol id="i-dns" viewBox="0 0 24 24"><path d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 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"/></symbol>
<symbol id="i-lock" viewBox="0 0 24 24"><path d="M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9zm-8-2a3 3 0 0 1 6 0v2H9zm4 9.7V18h-2v-1.3a2 2 0 1 1 2 0z"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 11-11-1.4-1.4z"/></symbol>
<symbol id="i-gauge" viewBox="0 0 24 24"><path d="M12 4a10 10 0 0 0-8.7 15h17.4A10 10 0 0 0 12 4zm0 2a8 8 0 0 1 7.5 11h-15A8 8 0 0 1 12 6zm3.5 2.6-3 4.4a1.6 1.6 0 1 0 1.3.9z"/></symbol>
<symbol id="i-key" viewBox="0 0 24 24"><path d="M12.65 10A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></symbol>
<symbol id="i-tune" viewBox="0 0 24 24"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></symbol>
<symbol id="i-timer" viewBox="0 0 24 24"><path d="M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></symbol>
<symbol id="i-block" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9A7.902 7.902 0 0 1 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1A7.902 7.902 0 0 1 20 12c0 4.42-3.58 8-8 8z"/></symbol>
<symbol id="i-lan" viewBox="0 0 24 24"><path d="M13 22h8v-7h-3v-4h-5V9h3V2H8v7h3v2H6v4H3v7h8v-7H8v-2h8v2h-3z"/></symbol>
<symbol id="i-ethernet" viewBox="0 0 24 24"><path d="M7.77 6.76 6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"/></symbol>
<symbol id="i-computer" viewBox="0 0 24 24"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></symbol>
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M14.4 6 14 4H5v17h2v-7h5.6l.4 2h7V6z"/></symbol>
<symbol id="i-link" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></symbol>
<symbol id="i-percent" viewBox="0 0 24 24"><path d="M7.5 11C9.43 11 11 9.43 11 7.5S9.43 4 7.5 4 4 5.57 4 7.5 5.57 11 7.5 11zm0-5C8.33 6 9 6.67 9 7.5S8.33 9 7.5 9 6 8.33 6 7.5 6.67 6 7.5 6zM4.0025 18.5832 18.59 3.9955l1.4142 1.4142L5.4167 19.9974zM16.5 13c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5zm0 5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></symbol>
<symbol id="i-server" viewBox="0 0 24 24"><path d="M2 20h20v-4H2v4zm2-3h2v2H4v-2zM2 4v4h20V4H2zm4 3H4V5h2v2zm-4 7h20v-4H2v4zm2-3h2v2H4v-2z"/></symbol>
</svg>
<div id="login-view" class="login-view" hidden>
<form id="login-form" class="login-card">
<div class="brand-mark big" aria-hidden="true"></div>
<h1>Firefox VPN</h1>
<p class="muted">Sign in to the proxy console.</p>
<label class="field"><span>Username</span><input name="username" autocomplete="username" required></label>
<label class="field"><span>Password</span><input name="password" type="password" autocomplete="current-password" required data-reveal></label>
<p class="form-error" id="login-error"></p>
<button type="submit" class="btn primary block">Sign in</button>
</form>
</div>
<div id="app" class="shell" hidden>
<!-- Narrow screens: the bar with the menu button; the sidebar is then a
drawer (setNavOpen). -->
<header class="mobile-bar">
<button id="nav-toggle" class="btn icon" aria-label="Open the menu" aria-controls="sidebar" aria-expanded="false"><svg><use href="#i-menu"/></svg></button>
<div class="brand-mark" aria-hidden="true"></div>
<span class="brand-name">Firefox VPN</span>
<!-- The theme switch and Sign out, moved here on narrow screens
(placeHeadButtons). -->
<div class="bar-actions" id="bar-actions"></div>
</header>
<div class="nav-backdrop" id="nav-backdrop"></div>
<aside class="sidebar" id="sidebar">
<div class="brand">
<div class="brand-mark" aria-hidden="true"></div>
<div>
<div class="brand-name">Firefox VPN</div>
<div class="brand-sub">Proxy console</div>
</div>
<button id="nav-close" class="btn icon nav-close" aria-label="Close the menu"><svg><use href="#i-close"/></svg></button>
</div>
<nav class="nav" role="tablist">
<button class="nav-item active" data-view="overview"><svg><use href="#i-overview"/></svg><span>Overview</span></button>
<button class="nav-item" data-view="locations"><svg><use href="#i-globe"/></svg><span>Servers</span></button>
<button class="nav-item" data-view="accounts"><svg><use href="#i-accounts"/></svg><span>Accounts</span><b class="nav-badge" id="nav-accounts-badge" hidden></b></button>
<button class="nav-item" data-view="logs"><svg><use href="#i-logs"/></svg><span>Logs</span></button>
<button class="nav-item" data-view="settings"><svg><use href="#i-settings"/></svg><span>Settings</span></button>
<button class="nav-item" data-view="help"><svg><use href="#i-help"/></svg><span>Help</span></button>
</nav>
<div class="sidebar-foot">
<div class="mini-status" id="mini-status">
<span class="mini-flag" id="mini-flag"><span class="dot"></span></span>
<div>
<div class="mini-title" id="mini-title">…</div>
<div class="mini-sub" id="mini-sub"></div>
</div>
</div>
<div class="version-tag" id="version-tag" title="Program version"></div>
</div>
</aside>
<div class="main">
<header class="page-head">
<div>
<h1 id="page-title">Overview</h1>
<p class="muted" id="page-sub" hidden></p>
</div>
<div class="head-actions" id="head-actions">
<span id="state-pill" class="pill">…</span>
<span class="head-sep" aria-hidden="true"></span>
<button id="theme-toggle" class="btn icon" title="Switch between dark and light" aria-label="Switch between dark and light"><svg><use href="#i-moon"/></svg></button>
<button id="logout" class="btn icon" title="Sign out" aria-label="Sign out" hidden><svg><use href="#i-logout"/></svg></button>
</div>
</header>
<div id="banner" class="banner" hidden></div>
<main>
<!-- ======================================================= overview -->
<section id="view-overview" class="view">
<article class="hero card">
<div class="hero-status">
<div class="pulse" id="hero-pulse"><span></span></div>
<div class="hero-text">
<div class="eyebrow" id="hero-eyebrow">Status</div>
<h2 class="hero-title"><span id="hero-flag"></span><span id="hero-title">…</span></h2>
<p class="muted" id="hero-message"></p>
<div class="chips" id="hero-chips"></div>
</div>
</div>
<div class="hero-actions">
<button id="run-test" class="btn primary"><svg><use href="#i-bolt"/></svg><span>Test connection</span></button>
<button id="restart-proxy" class="btn"><svg><use href="#i-refresh"/></svg><span>Restart</span></button>
<button id="power" class="btn" title="Off: the proxy port closes and nothing connects to Mozilla until it is turned on again (here or in the app)"><svg><use href="#i-power"/></svg><span>Turn off</span></button>
</div>
</article>
<div id="notices" class="notices" hidden></div>
<div class="kpis">
<article class="kpi card" id="kpi-account">
<div class="kpi-label">Active account</div>
<div class="kpi-body">
<svg class="gauge" viewBox="0 0 42 42" aria-hidden="true">
<circle class="gauge-track" cx="21" cy="21" r="17"></circle>
<circle class="gauge-fill" id="gauge-fill" cx="21" cy="21" r="17" stroke-dasharray="0 107"></circle>
</svg>
<div>
<div class="kpi-value" id="kpi-usage">–</div>
<div class="kpi-sub" id="kpi-usage-sub"></div>
</div>
</div>
</article>
<article class="kpi card">
<div class="kpi-label">Latency</div>
<div class="kpi-value" id="kpi-latency">–</div>
<div class="kpi-sub" id="kpi-latency-sub">Run a connection test</div>
</article>
<article class="kpi card">
<div class="kpi-label">Speed</div>
<div class="kpi-value speed"><span class="speed-down" id="kpi-down">–</span></div>
<div class="kpi-sub" id="kpi-speed-sub"></div>
</article>
<article class="kpi card">
<div class="kpi-label" id="kpi-uptime-label">Uptime</div>
<div class="kpi-value" id="kpi-uptime">–</div>
<div class="kpi-sub" id="kpi-uptime-sub"></div>
</article>
</div>
<div class="grid-2">
<article class="card">
<div class="card-head"><h3>Active account</h3><a class="link" href="#accounts">Manage</a></div>
<div id="active-account"></div>
</article>
<article class="card">
<div class="card-head"><h3>Connection test</h3><span class="muted small" id="test-when"></span></div>
<div id="test-result" class="test-result"><p class="muted">Sends an HTTPS request through the tunnel and times each stage.</p></div>
</article>
</div>
<div class="grid-2">
<article class="card">
<div class="card-head"><h3>Proxy</h3></div>
<dl class="facts" id="proxy-facts"></dl>
</article>
<article class="card">
<div class="card-head"><h3>Recent activity</h3><a class="link" href="#logs">All logs</a></div>
<div class="mini-log" id="recent-log"></div>
</article>
</div>
</section>
<!-- ======================================================= accounts -->
<section id="view-accounts" class="view" hidden>
<div class="toolbar-row">
<p class="muted" id="accounts-hint"></p>
<button id="add-account" class="btn primary"><svg><use href="#i-plus"/></svg><span>Add account</span></button>
</div>
<div id="account-list" class="account-list"></div>
</section>
<!-- ====================================================== locations -->
<section id="view-locations" class="view" hidden>
<article class="card mode-card">
<div>
<div class="eyebrow">Server selection</div>
<h3 id="mode-title">…</h3>
<p class="muted small" id="mode-sub"></p>
</div>
<div class="mode-actions">
<button class="btn" id="mode-recommended">Auto (recommended)</button>
<button class="btn" id="mode-fastest"><svg><use href="#i-bolt"/></svg><span>Auto (fastest)</span></button>
</div>
</article>
<div class="toolbar-row">
<div class="toolbar">
<div class="segmented" role="group" aria-label="Sort">
<button class="seg active" data-sort="latency">Real delay</button>
<button class="seg" data-sort="name">Name</button>
</div>
<input id="location-search" type="search" placeholder="Search servers">
</div>
<button id="measure" class="btn primary"><svg><use href="#i-gauge"/></svg><span>Test real delay</span></button>
</div>
<p class="muted small" id="ping-note"></p>
<p class="muted small" id="serverlist-note"></p>
<div class="table-card card">
<table class="table" id="location-table">
<thead><tr><th>Server</th><th class="hide-sm">Address</th><th>Real delay</th><th></th></tr></thead>
<tbody></tbody>
</table>
</div>
</section>
<!-- =========================================================== logs -->
<section id="view-logs" class="view" hidden>
<div class="toolbar-row">
<div class="toolbar">
<select id="log-level">
<option value="DEBUG">All levels</option>
<option value="INFO" selected>Info and above</option>
<option value="WARN">Warnings and errors</option>
<option value="ERROR">Errors only</option>
</select>
<input id="log-search" type="search" placeholder="Filter text">
<label class="switch"><input type="checkbox" id="log-follow" checked><span></span>Follow</label>
</div>
<button id="log-clear" class="btn">Clear view</button>
</div>
<div id="log-list" class="terminal" role="log" aria-live="polite"></div>
</section>
<!-- ======================================================= settings -->
<section id="view-settings" class="view" hidden>
<form id="settings-form" class="settings">
<nav class="settings-nav">
<a href="#set-dashboard"><svg><use href="#i-overview"/></svg><span>Dashboard</span></a>
<a href="#set-connection"><svg><use href="#i-globe"/></svg><span>Connection</span></a>
<a href="#set-local"><svg><use href="#i-ethernet"/></svg><span>Local proxy</span></a>
<a href="#set-dns"><svg><use href="#i-dns"/></svg><span>DNS</span></a>
<a href="#set-routing"><svg><use href="#i-route"/></svg><span>Routing</span></a>
<a href="#set-accounts"><svg><use href="#i-accounts"/></svg><span>Accounts</span></a>
<a href="#set-advanced"><svg><use href="#i-tune"/></svg><span>Advanced</span></a>
</nav>
<div class="settings-body">
<!-- Each setting is a row: an icon, its name with a short hint,
and its control at the end (under the text on a narrow
screen, and for lists). -->
<fieldset class="card" id="set-dashboard">
<legend><svg><use href="#i-overview"/></svg>Dashboard</legend>
<div class="set-list">
<div class="set-row">
<span class="set-ic"><svg><use href="#i-lan"/></svg></span>
<span class="set-text"><label for="dash-host">Access</label><small>All networks: open it from other devices; set a login</small></span>
<span class="set-ctl">
<select id="dash-host" data-listen="dashboard">
<option value="127.0.0.1">This device only (127.0.0.1)</option>
<option value="0.0.0.0">All networks (0.0.0.0)</option>
</select>
</span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-ethernet"/></svg></span>
<span class="set-text"><label for="dash-port">Port</label></span>
<span class="set-ctl"><input id="dash-port" class="port" type="number" min="1" max="65535" required></span>
</div>
<div class="set-row stack">
<span class="set-ic"><svg><use href="#i-key"/></svg></span>
<span class="set-text"><span class="set-title">Login</span><small class="points"><span>A username and a password (at least 6 characters) require a login</span><span>An empty username removes the login</span><span>An empty password keeps the current one</span></small></span>
<span class="set-ctl pair">
<input name="dashboard.username" autocomplete="off" placeholder="Username" aria-label="Dashboard username">
<input name="dashboard_password" class="secret" autocomplete="off" spellcheck="false" autocapitalize="off" placeholder="New password" aria-label="New dashboard password" data-reveal data-1p-ignore data-lpignore="true" data-bwignore>
</span>
</div>
</div>
</fieldset>
<fieldset class="card" id="set-connection">
<legend><svg><use href="#i-globe"/></svg>Connection</legend>
<p class="set-intro">How this program reaches Mozilla, and where the traffic leaves from.</p>
<div class="set-list">
<div class="set-row">
<span class="set-ic"><svg><use href="#i-pin"/></svg></span>
<span class="set-text"><label for="location-select">Location</label><small class="points"><span>Auto: Mozilla's recommended location</span><span>Fastest: the lowest delay, chosen at each start</span></small></span>
<span class="set-ctl"><select name="location" id="location-select"></select></span>
</div>
<div class="set-row" id="server-field" hidden>
<span class="set-ic"><svg><use href="#i-server"/></svg></span>
<span class="set-text"><label for="f-server">Server address</label><small>host:port of a Mozilla proxy server</small></span>
<span class="set-ctl"><input id="f-server" name="proxy.server" spellcheck="false" placeholder="host:443"></span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-bolt"/></svg></span>
<span class="set-text"><span class="set-title">Protocol</span><small>HTTP/3 falls back to HTTP/2 where QUIC is blocked</small></span>
<span class="set-ctl">
<span class="segs" role="radiogroup" aria-label="Protocol">
<label><input type="radio" name="proxy.transport" value="h2"><span>HTTP/2</span></label>
<label><input type="radio" name="proxy.transport" value="h3"><span>HTTP/3</span></label>
</span>
</span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-moon"/></svg></span>
<span class="set-text"><label for="f-sleep">Pause when unused</label><small class="points"><span>No traffic for this long: the connection to Mozilla closes and the account rests</span><span>The next connection wakes it in a few seconds</span></small></span>
<span class="set-ctl">
<select id="f-sleep" name="proxy.idle_sleep">
<option value="0s">Never</option>
<option value="5m0s">After 5 minutes</option>
<option value="15m0s">After 15 minutes</option>
<option value="30m0s">After 30 minutes</option>
<option value="1h0m0s">After 1 hour</option>
</select>
</span>
</div>
</div>
</fieldset>
<fieldset class="card" id="set-local">
<legend><svg><use href="#i-ethernet"/></svg>Local proxy</legend>
<p class="set-intro">Where applications connect: one port for SOCKS5 and HTTP.</p>
<div class="set-list">
<div class="set-row" id="system-proxy-row" hidden>
<span class="set-ic"><svg><use href="#i-computer"/></svg></span>
<span class="set-text"><span class="set-title">Mode</span><small>System proxy: Windows and most applications go through the VPN</small></span>
<span class="set-ctl">
<span class="segs" role="radiogroup" aria-label="Mode">
<label><input type="radio" name="system_proxy.mode" value="clear"><span>Proxy only</span></label>
<label><input type="radio" name="system_proxy.mode" value="set"><span>System proxy</span></label>
</span>
</span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-lan"/></svg></span>
<span class="set-text"><label for="proxy-host">Access</label><small>All networks: other devices, or a VPS's clients, can use it too</small></span>
<span class="set-ctl">
<select id="proxy-host" data-listen="proxy">
<option value="127.0.0.1">This device only (127.0.0.1)</option>
<option value="0.0.0.0">All networks (0.0.0.0)</option>
</select>
</span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-ethernet"/></svg></span>
<span class="set-text"><label for="proxy-port">Port</label></span>
<span class="set-ctl"><input id="proxy-port" class="port" type="number" min="1" max="65535" required></span>
</div>
<div class="set-row stack">
<span class="set-ic"><svg><use href="#i-key"/></svg></span>
<span class="set-text"><span class="set-title">Login</span><small class="points"><span>Optional: set both, or neither</span><span>Open to the network without one, anyone who finds the port can use it</span></small></span>
<span class="set-ctl pair">
<input name="proxy.username" autocomplete="off" placeholder="Username" aria-label="Proxy username">
<input name="proxy.password" class="secret" autocomplete="off" spellcheck="false" autocapitalize="off" placeholder="Password" aria-label="Proxy password" data-reveal data-1p-ignore data-lpignore="true" data-bwignore>
</span>
</div>
</div>
</fieldset>
<fieldset class="card" id="set-dns">
<legend><svg><use href="#i-dns"/></svg>DNS</legend>
<p class="set-intro">How this program finds Mozilla's servers. Sites opened through the VPN are looked up by Mozilla's exit, never here.</p>
<div class="set-list">
<div class="set-row">
<span class="set-ic"><svg><use href="#i-dns"/></svg></span>
<span class="set-text"><label for="dns-preset">Servers</label><small>Encrypted DNS avoids wrong answers on filtered networks</small></span>
<span class="set-ctl">
<select id="dns-preset">
<option value="auto">Automatic (Cloudflare, Google, Quad9)</option>
<option value="system">System DNS</option>
<option value="cloudflare">Cloudflare, HTTPS (1.1.1.1)</option>
<option value="google">Google, HTTPS (8.8.8.8)</option>
<option value="quad9">Quad9, HTTPS (9.9.9.9)</option>
<option value="cloudflare_dot">Cloudflare, TLS (1.1.1.1:853)</option>
<option value="custom">Custom…</option>
</select>
</span>
</div>
<div class="set-row stack" id="dns-custom-field" hidden>
<span class="set-ic"><svg><use href="#i-link"/></svg></span>
<span class="set-text"><label for="dns-custom">Custom servers</label><small>One per line: https://host/dns-query, tls://host, or an IP address</small></span>
<span class="set-ctl"><textarea id="dns-custom" rows="3" spellcheck="false" placeholder="https://1.1.1.1/dns-query tls://9.9.9.9 8.8.8.8"></textarea></span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-refresh"/></svg></span>
<span class="set-text"><label for="f-dns-fallback">Fall back to the system DNS</label><small>When these servers do not answer</small></span>
<span class="set-ctl"><label class="switch"><input type="checkbox" id="f-dns-fallback" name="dns.fallback_to_system"><span></span></label></span>
</div>
<div class="set-row stack">
<span class="set-ic"><svg><use href="#i-gauge"/></svg></span>
<span class="set-text"><span class="set-title">Test</span><small class="points"><span>Looks up Mozilla's addresses with the servers above and with the system DNS</span><span>Filtered: the network tampers with DNS</span></small></span>
<span class="set-ctl start"><button type="button" class="btn" id="dns-test"><svg><use href="#i-gauge"/></svg><span>Test DNS</span></button></span>
</div>
</div>
<div id="dns-test-result"></div>
</fieldset>
<fieldset class="card" id="set-routing">
<legend><svg><use href="#i-route"/></svg>Routing</legend>
<p class="set-intro">Sends chosen sites straight through your own internet instead of Mozilla: they open faster and use no quota.</p>
<div class="set-list">
<div class="set-row">
<span class="set-ic"><svg><use href="#i-flag"/></svg></span>
<span class="set-text"><label for="f-region">Country</label><small>Its sites and addresses go directly</small></span>
<span class="set-ctl">
<select id="f-region" name="routing.region">
<option value="ir">Iran</option>
<option value="cn">China</option>
<option value="ru">Russia</option>
<option value="af">Afghanistan</option>
<option value="tr">Turkey</option>
<option value="id">Indonesia</option>
<option value="br">Brazil</option>
<option value="">None (only private networks)</option>
</select>
</span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-route"/></svg></span>
<span class="set-text"><label for="f-routing">Use routing</label><small id="routing-state" class="route-state"></small></span>
<span class="set-ctl"><label class="switch"><input type="checkbox" id="f-routing" name="routing.enabled"><span></span></label></span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-block"/></svg></span>
<span class="set-text"><label for="routing-ads">Block ads</label><small>Adds geosite:category-ads-all to the Block list</small></span>
<span class="set-ctl"><label class="switch"><input type="checkbox" id="routing-ads"><span></span></label></span>
</div>
</div>
<h4 class="set-sub">Rules</h4>
<div class="set-list">
<div class="set-row stack">
<span class="set-ic"><svg><use href="#i-check"/></svg></span>
<span class="set-text"><label for="routing-direct">Direct</label><small class="points"><span>Sites and addresses in this list open without the VPN</span><span>The chosen country's rules are already here: add, change, or remove lines</span><span>Choosing another country replaces them</span></small></span>
<span class="set-ctl col">
<textarea id="routing-direct" rows="6" spellcheck="false" placeholder="domain:example.com 192.0.2.0/24"></textarea>
<button type="button" class="btn sm ghost" id="routing-restore"><svg><use href="#i-refresh"/></svg><span>Restore the country's rules</span></button>
</span>
</div>
<div class="set-row stack">
<span class="set-ic"><svg><use href="#i-block"/></svg></span>
<span class="set-text"><label for="routing-block">Block</label><small>Sites and addresses in this list do not open at all, neither directly nor through the VPN</small></span>
<span class="set-ctl"><textarea id="routing-block" rows="3" spellcheck="false" placeholder="domain:example.com"></textarea></span>
</div>
<details class="set-syntax">
<summary>How to write a rule</summary>
<dl>
<dt><code>domain:example.com</code></dt><dd>The site and its subdomains</dd>
<dt><code>full:www.example.com</code></dt><dd>Exactly this name</dd>
<dt><code>keyword:bank</code></dt><dd>Names that contain the word</dd>
<dt><code>regexp:\.ir$</code></dt><dd>Names that match the expression</dd>
<dt><code>geosite:ir</code></dt><dd>Sites of a tag in the geo files</dd>
<dt><code>geoip:ir</code></dt><dd>Addresses of a country in the geo files</dd>
<dt><code>ext:iran.dat:ir</code></dt><dd>A tag in another geo file</dd>
<dt><code>1.2.3.4</code> <code>10.0.0.0/8</code></dt><dd>An address or a network</dd>
</dl>
</details>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-search"/></svg></span>
<span class="set-text"><label for="f-resolve">Look up names for IP rules</label><small>Applies the IP rules to sites no name rule matched (an encrypted lookup through Mozilla)</small></span>
<span class="set-ctl"><label class="switch"><input type="checkbox" id="f-resolve" name="routing.resolve_domains"><span></span></label></span>
</div>
</div>
<h4 class="set-sub">Geo files</h4>
<div class="set-list">
<div class="set-row">
<span class="set-ic"><svg><use href="#i-globe"/></svg></span>
<span class="set-text"><label for="routing-source">Source</label><small>Both cover every country</small></span>
<span class="set-ctl"><select id="routing-source"><option value="">By hand (the URLs below)</option></select></span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-timer"/></svg></span>
<span class="set-text"><label for="routing-days">Update every</label></span>
<span class="set-ctl"><span class="suffix"><input id="routing-days" type="number" min="1" max="365"><i>days</i></span></span>
</div>
<details class="set-more">
<summary>File URLs</summary>
<div class="set-list">
<div class="set-row stack">
<span class="set-ic"><svg><use href="#i-link"/></svg></span>
<span class="set-text"><label for="f-geosite">Sites (geosite.dat)</label></span>
<span class="set-ctl"><input id="f-geosite" name="routing.geosite_url" spellcheck="false"></span>
</div>
<div class="set-row stack">
<span class="set-ic"><svg><use href="#i-link"/></svg></span>
<span class="set-text"><label for="f-geoip">Addresses (geoip.dat)</label></span>
<span class="set-ctl"><input id="f-geoip" name="routing.geoip_url" spellcheck="false"></span>
</div>
</div>
</details>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-refresh"/></svg></span>
<span class="set-text"><span class="set-title">Files</span><small id="routing-files"></small></span>
<span class="set-ctl"><button type="button" class="btn" id="routing-update"><svg><use href="#i-refresh"/></svg><span>Update now</span></button></span>
</div>
</div>
<h4 class="set-sub">Test a destination</h4>
<div class="route-test">
<span class="route-test-row"><input id="route-target" spellcheck="false" placeholder="digikala.com" aria-label="Destination"><button type="button" class="btn" id="route-test"><svg><use href="#i-gauge"/></svg><span>Test</span></button></span>
<small class="muted">A name, an address, or a URL: where it goes and which rule decides, with the saved rules</small>
<div id="route-test-result"></div>
</div>
</fieldset>
<fieldset class="card" id="set-accounts">
<legend><svg><use href="#i-accounts"/></svg>Accounts</legend>
<div class="set-list">
<div class="set-row">
<span class="set-ic"><svg><use href="#i-percent"/></svg></span>
<span class="set-text"><label for="f-threshold">Switch accounts at</label><small>The next account takes over when the active one has used this share of its data, without dropping connections</small></span>
<span class="set-ctl"><span class="suffix"><input id="f-threshold" name="accounts.switch_threshold_percent" type="number" min="1" max="100" step="1"><i>%</i></span></span>
</div>
</div>
</fieldset>
<fieldset class="card" id="set-advanced">
<legend><svg><use href="#i-tune"/></svg>Advanced</legend>
<p class="set-intro">The defaults suit almost everyone.</p>
<div class="set-list">
<div class="set-row">
<span class="set-ic"><svg><use href="#i-logs"/></svg></span>
<span class="set-text"><label for="f-verbose">Log destinations</label><small>Writes every site opened to the log (privacy sensitive)</small></span>
<span class="set-ctl"><label class="switch"><input type="checkbox" id="f-verbose" name="logging.verbose"><span></span></label></span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-server"/></svg></span>
<span class="set-text"><label for="f-upstream">Connections to Mozilla</label><small>Each device stays on one connection, so more only helps when several devices share the proxy</small></span>
<span class="set-ctl">
<select id="f-upstream" name="proxy.upstream_connections" data-int>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
</span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-accounts"/></svg></span>
<span class="set-text"><label for="f-max">Most connections at once</label><small>From applications to this proxy; 0 = no limit</small></span>
<span class="set-ctl"><input id="f-max" class="port" name="proxy.max_connections" type="number" min="0" data-int></span>
</div>
<div class="set-row">
<span class="set-ic"><svg><use href="#i-swap"/></svg></span>
<span class="set-text"><label for="f-relay">Relay for Mozilla's services</label><small>Only if your network blocks signing in to Mozilla: the address of a relay you set up yourself</small></span>
<span class="set-ctl"><input id="f-relay" name="network.api_relay" spellcheck="false" placeholder="https://relay.NAME.workers.dev/?key=…"></span>
</div>
</div>
</fieldset>
<div class="folders" id="data-dir"></div>
</div>
<div class="save-bar" id="save-bar">
<span class="save-note">Unsaved changes</span>
<span class="form-error" id="settings-error"></span>
<button type="button" class="btn ghost" id="settings-discard">Discard</button>
<button type="submit" class="btn primary">Save</button>
</div>
</form>
</section>
<!-- =========================================================== help -->
<section id="view-help" class="view" hidden>
<div class="help-grid">
<article class="card help-card wide" id="help-connect">
<h3>Connecting applications</h3>
<p>Any application that can use a SOCKS5 or HTTP proxy can use this one: v2rayN, v2rayNG, NekoBox, a browser, Telegram, and others. Their traffic to any website goes through Mozilla's VPN servers; it is not limited to Mozilla. The same address serves SOCKS5 and HTTP proxy clients.</p>
<div class="help-fields">
<div class="help-field"><span>SOCKS5 address</span><code id="help-socks-addr">127.0.0.1:10810</code><button type="button" class="btn sm" id="help-copy-addr"><svg><use href="#i-copy"/></svg><span>Copy</span></button></div>
<div class="help-field"><span>Link for v2rayN, v2rayNG, NekoBox</span><code id="help-socks-link">socks://Og@127.0.0.1:10810</code><button type="button" class="btn sm" id="help-copy-link"><svg><use href="#i-copy"/></svg><span>Copy</span></button></div>
</div>
<ul>
<li>v2rayN, v2rayNG, NekoBox: copy the link and import it from the clipboard, or add a SOCKS server with the address above.</li>
<li>Another device, such as a phone: set the SOCKS5 listen address to <code>0.0.0.0:10810</code> and a SOCKS5 username and password in Settings, then use this computer's network address instead of <code>127.0.0.1</code>.</li>
</ul>
</article>
<article class="card help-card" id="help-ports">
<h3>Only ports 80, 443, 8080, and 8443</h3>
<p>Mozilla's proxy connects to the web ports <strong>80, 443, 8080, and 8443</strong> only. Every other port is refused by Mozilla's server, for example <code>http://203.0.113.5:9898/</code>, SSH (22), or mail (25, 465, 587, 993). This program cannot change that, with two exceptions: git over SSH to GitHub goes to GitHub's SSH server on port 443 by itself, and DNS (53) sent through the proxy is answered by this program, with DNS over HTTPS through Mozilla.</p>
<ul>
<li>Serve your own site on one of the four ports (8080 and 8443 are the usual choices).</li>
<li>Or let the browser reach that address directly: Firefox, Settings, Network Settings, <em>No proxy for</em>.</li>
</ul>
</article>
<article class="card help-card" id="help-udp">
<h3>TCP only, no UDP</h3>
<p>Mozilla's proxy carries TCP connections. UDP does not go through it, so online games, voice and video calls in some applications, and other UDP traffic do not work through this proxy. Browsers are not affected: they use HTTP/2 over TCP when HTTP/3 is not available.</p>
</article>
<article class="card help-card" id="help-loop">
<h3>The program's own connections come back to it</h3>
<p>Another program sends this program's own traffic into its proxy, so it cannot reach Mozilla and nothing connects. In PassWall2 on a router, turn Localhost Proxy off. In another VPN program's TUN mode (v2rayN, Clash, sing-box), let firefox-vpn-core connect directly, with a process rule.</p>
</article>
<article class="card help-card" id="help-routing">
<h3>Your country's sites directly (routing)</h3>
<p>Optional, in Settings, Routing. The sites and networks of the chosen region (Iran by default; also China, Russia, Afghanistan, Turkey, Indonesia, or Brazil) then go directly through your own internet: faster, not refused for a foreign address, and without using the accounts' quota; everything else still goes through Mozilla. The lists of domains and networks are downloaded by themselves every 10 days. A site reached directly sees your real address.</p>
</article>
<article class="card help-card" id="help-logs">
<h3>Logs</h3>
<p>The Logs page shows the live log. The files are in the data folder's <code>logs</code> folder, one per day, kept for seven days.</p>
</article>
</div>
</section>
</main>
</div>
</div>
<dialog id="signin-dialog">
<form id="signin-form" method="dialog" class="dialog-body">
<div class="dialog-head">
<div class="brand-mark" aria-hidden="true"></div>
<div>
<h2>Add Firefox Account</h2>
<p class="muted small">The account joins the rotation at the end of the list.</p>
</div>
</div>
<p class="banner warn small" id="signin-warning" hidden>This dashboard is not on this computer. The Firefox Account password is sent over the network without encryption.</p>
<div id="signin-start">
<label class="field"><span>Email</span><input name="email" type="email" autocomplete="off" required></label>
<label class="field"><span>Password</span><input name="password" class="secret" autocomplete="off" spellcheck="false" autocapitalize="off" data-reveal data-1p-ignore data-lpignore="true" data-bwignore required></label>
<p class="muted small">The password is saved encrypted in the data folder. When the account's tokens stop working and cannot be renewed, the program uses it to sign in again by itself (Auto re-login).</p>
</div>
<div id="signin-step" hidden>
<p id="signin-message" class="step-message"></p>
<img id="signin-captcha" alt="CAPTCHA" hidden>
<label class="field" id="signin-input-label" hidden><span id="signin-input-caption">Code</span><input name="value" autocomplete="one-time-code"></label>
</div>
<p class="form-error" id="signin-error"></p>
<div class="dialog-actions">
<button type="button" id="signin-cancel" class="btn">Cancel</button>
<button type="submit" id="signin-submit" class="btn primary">Sign in</button>
</div>
</form>
</dialog>
<div id="toast" class="toast" hidden></div>
</body>
</html>