This repository has been archived by the owner on Dec 6, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
executable file
·2154 lines (2120 loc) · 137 KB
/
options.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
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
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
//================================================
/*
Turn Off the Lights
The entire page will be fading to dark, so you can watch the video as if you were in the cinema.
Copyright (C) 2020 Stefan vd
www.stefanvd.net
www.turnoffthelights.com
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
To view a copy of this license, visit http://creativecommons.org/licenses/GPL/2.0/
*/
//================================================
-->
<title data-i18n="optionpagetitle"></title>
<link rel="stylesheet" type="text/css" href="css/options.css">
<link rel="stylesheet" type="text/css" href="css/Chart.min.css">
<script type="text/javascript" src="js/constants.js"></script>
<script type="text/javascript" src="js/options.js"></script>
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript" src="js/eco-preview.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="light">
<div id="loading">
<div id="loadingcenter">
<div id="productwelcomeimageload">
<div class="icon">
<img id="loadinglamp" loading="lazy" alt="Browser Lamp Icon" width="16" height="16" src="icons/icon16.png" srcset="icons/icon16.png 1x, icons/[email protected] 2x">Turn Off the Lights™</div>
</div>
<div id="progressbar"><div id="progress"><div id="pbaranim"></div></div></div>
</div>
<span id="loadinghelp"><span data-i18n="pagestillloading"></span> <a href="https://www.turnoffthelights.com/support" target="_blank" data-i18n="pagehelp" rel="noopener"></a>!</span>
</div>
<div id="main-content" role="main">
<header>
<div class="messagehead">
</div>
<div class="masterhead">
<div class="title" id="titleex">
<div class="icon">
<img id="headlamp" loading="lazy" width="16" height="16" alt="Turn Off the Lights Browser extension lamp" src="icons/icon16.png" srcset="icons/icon16.png 1x, icons/[email protected] 2x">
</div>
Turn Off the Lights™</div>
<div class="search">
<div class="searchicon"><svg id="btnsearchicon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"><g><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 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"></path></g></svg>
</div>
<input type="search" id="appsearch" placeholder="" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-label="Search through site content">
</div>
<div class="rightmenu" id="dotmenu">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 24 24"><g><path d="M 12 3 C 10.894531 3 10 3.894531 10 5 C 10 6.105469 10.894531 7 12 7 C 13.105469 7 14 6.105469 14 5 C 14 3.894531 13.105469 3 12 3 Z M 12 10 C 10.894531 10 10 10.894531 10 12 C 10 13.105469 10.894531 14 12 14 C 13.105469 14 14 13.105469 14 12 C 14 10.894531 13.105469 10 12 10 Z M 12 17 C 10.894531 17 10 17.894531 10 19 C 10 20.105469 10.894531 21 12 21 C 13.105469 21 14 20.105469 14 19 C 14 17.894531 13.105469 17 12 17 Z "></path></g></svg>
</div>
</div>
</header>
<input type="checkbox" id="reveal-menu" role="checkbox" aria-checked="false" aria-label="The button to open the 3 dots menu">
<div id="md-home">
<label for="reveal-menu" id="menu">
<div id="menuToggle">
<span></span>
<span></span>
<span></span>
</div>
</label>
</div>
<aside id="darkpanel"></aside>
<div id="navbar-container">
<ul id="navbar">
<li><a id="tabbasic" accesskey="b" data-tab="#tab1" class="navbar-item navbar-item-selected">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 10.699219 1.101563 C 5.699219 1.699219 1.601563 5.699219 1 10.800781 C 0.300781 17.398438 5.5 23 12 23 C 12.601563 23 13.199219 22.898438 13.699219 22.699219 C 16.199219 22 17.300781 18.898438 15.800781 16.699219 C 15 15.601563 15.898438 14 17.300781 14 L 21 14 C 22.101563 14 23 13.101563 23 12 C 23 5.5 17.398438 0.300781 10.699219 1.101563 Z M 12 21 C 10.898438 21 10 20.101563 10 19 C 10 17.898438 10.898438 17 12 17 C 13.101563 17 14 17.898438 14 19 C 14 20.101563 13.101563 21 12 21 Z M 18.5 11 C 17.699219 11 17 10.300781 17 9.5 C 17 8.699219 17.699219 8 18.5 8 C 19.300781 8 20 8.699219 20 9.5 C 20 10.300781 19.300781 11 18.5 11 Z M 14.5 7 C 13.699219 7 13 6.300781 13 5.5 C 13 4.699219 13.699219 4 14.5 4 C 15.300781 4 16 4.699219 16 5.5 C 16 6.300781 15.300781 7 14.5 7 Z M 9.5 7 C 8.699219 7 8 6.300781 8 5.5 C 8 4.699219 8.699219 4 9.5 4 C 10.300781 4 11 4.699219 11 5.5 C 11 6.300781 10.300781 7 9.5 7 Z M 5.5 10 C 4.699219 10 4 9.300781 4 8.5 C 4 7.699219 4.699219 7 5.5 7 C 6.300781 7 7 7.699219 7 8.5 C 7 9.300781 6.300781 10 5.5 10 Z M 4.5 15 C 3.699219 15 3 14.300781 3 13.5 C 3 12.699219 3.699219 12 4.5 12 C 5.300781 12 6 12.699219 6 13.5 C 6 14.300781 5.300781 15 4.5 15 Z "></path></g></svg>
<span data-i18n="basicsettings"></span>
</a></li>
<li><a id="tabvisual" accesskey="v" data-tab="#tab2" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 4 4 C 2.898438 4 2 4.898438 2 6 L 2 18 C 2 19.101563 2.898438 20 4 20 L 20 20 C 21.101563 20 22 19.101563 22 18 L 22 6 C 22 4.898438 21.101563 4 20 4 Z M 4 6 L 20 6 L 20 18 L 4 18 Z M 5 7 L 5 17 L 19 17 L 19 7 Z M 7 9 L 17 9 L 17 15 L 7 15 Z "></path></g></svg>
<span data-i18n="visualeffects"></span></a></li>
<li><a id="tabadvan" accesskey="o" data-tab="#tab3" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 8.40625 2 C 8.207031 2 8 2.207031 8 2.40625 L 7.8125 4.40625 C 7.3125 4.605469 6.804688 4.886719 6.40625 5.1875 L 4.40625 4.40625 C 4.207031 4.304688 4.007813 4.394531 3.90625 4.59375 L 2.3125 7.40625 C 2.210938 7.605469 2.207031 7.804688 2.40625 7.90625 L 4.09375 9.09375 C 3.992188 9.394531 4 9.699219 4 10 C 4 10.300781 3.992188 10.613281 4.09375 10.8125 L 2.40625 12 C 2.207031 12.101563 2.210938 12.300781 2.3125 12.5 L 3.90625 15.3125 C 4.007813 15.511719 4.207031 15.5 4.40625 15.5 L 6.3125 14.59375 C 6.710938 14.894531 7.1875 15.207031 7.6875 15.40625 L 8 17.59375 C 8 17.792969 8.207031 18 8.40625 18 L 10 18 L 10 13.1875 C 8.199219 13.1875 6.8125 11.800781 6.8125 10 C 6.8125 8.199219 8.199219 6.8125 10 6.8125 C 11.800781 6.8125 13.1875 8.199219 13.1875 10 L 16 10 C 16 9.699219 16.007813 9.386719 15.90625 9.1875 L 17.59375 8 C 17.792969 7.898438 17.789063 7.699219 17.6875 7.5 L 16.09375 4.6875 C 15.992188 4.488281 15.792969 4.5 15.59375 4.5 L 13.6875 5.40625 C 13.289063 5.105469 12.8125 4.792969 12.3125 4.59375 L 12 2.40625 C 12 2.207031 11.792969 2 11.59375 2 Z M 13 11 C 12.476563 11 11.941406 11.183594 11.5625 11.5625 C 11.183594 11.941406 11 12.476563 11 13 L 11 20 C 11 20.523438 11.183594 21.058594 11.5625 21.4375 C 11.941406 21.816406 12.476563 22 13 22 L 20 22 C 20.523438 22 21.058594 21.816406 21.4375 21.4375 C 21.816406 21.058594 22 20.523438 22 20 L 22 13 C 22 12.476563 21.816406 11.941406 21.4375 11.5625 C 21.058594 11.183594 20.523438 11 20 11 Z M 13 15 L 20 15 L 20 20 L 13 20 Z M 17.5625 15.875 L 16 17.4375 L 15.34375 16.78125 L 14.28125 17.84375 L 16 19.5625 L 18.625 16.9375 Z "></path></g></svg>
<span data-i18n="advancedoptions"></span></a>
</li>
<li><a id="tabnight" accesskey="n" data-tab="#tab5" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 18.65625 2 C 18.871094 2.453125 19 2.9375 19 3.46875 C 19 5.402344 17.433594 6.96875 15.5 6.96875 C 15.445313 6.96875 15.398438 6.972656 15.34375 6.96875 C 15.902344 8.15625 17.101563 8.96875 18.5 8.96875 C 20.433594 8.96875 22 7.402344 22 5.46875 C 22 3.589844 20.515625 2.085938 18.65625 2 Z M 9 9.96875 L 2 21.96875 L 22 21.96875 L 17 13.96875 L 14.0625 18.65625 Z "></path></g></svg>
<span data-i18n="nightoptions"></span></a></li>
<li><a id="tabmotion" accesskey="c" data-tab="#tab7" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 4 6 C 2.898438 6 2 6.898438 2 8 L 2 16 C 2 17.101563 2.898438 18 4 18 L 15 18 C 16.101563 18 17 17.101563 17 16 L 17 8 C 17 6.898438 16.101563 6 15 6 Z M 8 7 L 10.03125 7 C 10.160156 7 10.269531 7.089844 10.28125 7.21875 L 10.4375 8.53125 C 10.765625 8.664063 11.039063 8.847656 11.3125 9.0625 L 12.53125 8.5 C 12.648438 8.445313 12.78125 8.515625 12.84375 8.625 L 13.875 10.375 C 13.9375 10.484375 13.886719 10.644531 13.78125 10.71875 L 12.71875 11.46875 C 12.742188 11.640625 12.78125 11.824219 12.78125 12 C 12.78125 12.175781 12.742188 12.359375 12.71875 12.53125 L 13.78125 13.28125 C 13.886719 13.355469 13.941406 13.515625 13.875 13.625 L 12.84375 15.375 C 12.78125 15.484375 12.648438 15.554688 12.53125 15.5 L 11.3125 14.9375 C 11.039063 15.152344 10.765625 15.335938 10.4375 15.46875 L 10.28125 16.78125 C 10.269531 16.910156 10.160156 17 10.03125 17 L 8 17 C 7.871094 17 7.761719 16.910156 7.75 16.78125 L 7.625 15.46875 C 7.296875 15.335938 6.992188 15.152344 6.71875 14.9375 L 5.53125 15.5 C 5.414063 15.554688 5.28125 15.484375 5.21875 15.375 L 4.1875 13.625 C 4.125 13.515625 4.144531 13.355469 4.25 13.28125 L 5.3125 12.53125 C 5.289063 12.359375 5.28125 12.179688 5.28125 12 C 5.28125 11.820313 5.289063 11.640625 5.3125 11.46875 L 4.25 10.71875 C 4.144531 10.644531 4.125 10.484375 4.1875 10.375 L 5.21875 8.625 C 5.28125 8.515625 5.414063 8.445313 5.53125 8.5 L 6.71875 9.0625 C 6.992188 8.847656 7.296875 8.664063 7.625 8.53125 L 7.75 7.21875 C 7.761719 7.089844 7.871094 7 8 7 Z M 22 7 L 18 10 L 18 14 L 22 17 Z M 9.03125 10 C 7.925781 10 7.03125 10.894531 7.03125 12 C 7.03125 13.105469 7.925781 14 9.03125 14 C 10.136719 14 11.03125 13.105469 11.03125 12 C 11.03125 10.894531 10.136719 10 9.03125 10 Z "></path></g></svg>
<span data-i18n="motionoptions"></span></a></li>
<li><a id="tabspeech" accesskey="s" data-tab="#tab8" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 2 2 L 2 22 L 4 22 L 4 21 C 4 20 4.894531 19 6 19 C 7.652344 19 8.992188 17.648438 9 16 L 6 15 L 9 14 L 9 13 L 10.5625 12 C 11.007813 11.703125 11.117188 11.113281 10.84375 10.65625 L 8 8 C 8 3.484375 5.257813 2 2 2 Z M 18 7 L 14.8125 16.40625 L 13.625 14 L 10 14 L 10 16 L 12.375 16 L 15 22 L 18.09375 12.90625 L 19.3125 16 L 22 16 L 22 14 L 20.6875 14 Z "></path></g></svg>
<span data-i18n="speechoption"></span></a></li>
<li><a id="tabguide" accesskey="g" data-tab="#tab4" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 5 4 L 5 22 L 12 19 L 19 22 L 19 4 C 19 2.898438 18.101563 2 17 2 L 7 2 C 5.898438 2 5 2.898438 5 4 Z "></path></g></svg>
<span data-i18n="guide"></span></a></li>
<li><a id="tabanalytics" accesskey="a" data-tab="#tab10" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 20 2 C 18.894531 2 18 2.894531 18 4 C 18 4.339844 18.101563 4.65625 18.25 4.9375 L 16.53125 7.0625 C 16.363281 7.015625 16.183594 7 16 7 C 15.511719 7 15.066406 7.179688 14.71875 7.46875 L 12 6.09375 C 12 6.0625 12 6.03125 12 6 C 12 4.894531 11.105469 4 10 4 C 8.894531 4 8 4.894531 8 6 C 8 6.03125 8 6.0625 8 6.09375 L 5.28125 7.46875 C 4.933594 7.179688 4.488281 7 4 7 C 2.894531 7 2 7.894531 2 9 C 2 10.105469 2.894531 11 4 11 C 5.105469 11 6 10.105469 6 9 C 6 8.957031 6.003906 8.917969 6 8.875 L 8.71875 7.53125 C 9.066406 7.820313 9.511719 8 10 8 C 10.488281 8 10.933594 7.820313 11.28125 7.53125 L 14 8.875 C 13.996094 8.917969 14 8.957031 14 9 C 14 10.105469 14.894531 11 16 11 C 17.105469 11 18 10.105469 18 9 C 18 8.660156 17.898438 8.34375 17.75 8.0625 L 19.46875 5.9375 C 19.636719 5.984375 19.816406 6 20 6 C 21.105469 6 22 5.105469 22 4 C 22 2.894531 21.105469 2 20 2 Z M 20 13 C 18.894531 13 18 13.894531 18 15 C 18 15.316406 18.089844 15.609375 18.21875 15.875 L 16.5 18.0625 C 16.339844 18.019531 16.171875 18 16 18 C 15.660156 18 15.34375 18.101563 15.0625 18.25 L 12.9375 16.53125 C 12.984375 16.363281 13 16.183594 13 16 C 13 14.894531 12.105469 14 11 14 C 9.992188 14 9.167969 14.746094 9.03125 15.71875 L 5.53125 16.71875 C 5.164063 16.28125 4.617188 16 4 16 C 2.894531 16 2 16.894531 2 18 C 2 19.105469 2.894531 20 4 20 C 5.007813 20 5.832031 19.253906 5.96875 18.28125 L 9.5 17.28125 C 9.867188 17.710938 10.390625 18 11 18 C 11.324219 18 11.632813 17.917969 11.90625 17.78125 L 14.0625 19.46875 C 14.015625 19.636719 14 19.816406 14 20 C 14 21.105469 14.894531 22 16 22 C 17.105469 22 18 21.105469 18 20 C 18 19.660156 17.898438 19.34375 17.75 19.0625 L 19.4375 16.90625 C 19.617188 16.960938 19.804688 17 20 17 C 21.105469 17 22 16.105469 22 15 C 22 13.894531 21.105469 13 20 13 Z "></path></g></svg>
<span data-i18n="analyticsoption"></span></a></li>
<li><a id="tabhelp" accesskey="h" data-tab="#tab9" class="navbar-item">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="16" height="16"
viewBox="0 0 24 24"><g><path d="M 12 2 C 6.5 2 2 6.5 2 12 C 2 17.5 6.5 22 12 22 C 17.5 22 22 17.5 22 12 C 22 6.5 17.5 2 12 2 Z M 12 4 C 16.398438 4 20 7.601563 20 12 C 20 16.398438 16.398438 20 12 20 C 7.601563 20 4 16.398438 4 12 C 4 7.601563 7.601563 4 12 4 Z M 11.90625 7 C 8.605469 7 9 10 9 10 L 11 10 C 11 8.601563 11.699219 8.5 12 8.5 C 12.800781 8.5 13 9.414063 13 9.8125 C 13 11.914063 11 11.398438 11 14 L 13 14 C 13 12.300781 15 12.210938 15 9.8125 C 15 8.914063 14.507813 7 11.90625 7 Z M 11 15 L 11 17 L 13 17 L 13 15 Z "></path></g></svg>
<span data-i18n="help"></span></a></li>
</ul>
</div>
<div id="mainview">
<h1 data-i18n="optionpagetitle" class="hidden"></h1>
<div id="managed-prefs-banner">
<span id="managed-prefs-icon">
<a class="donatebutton" target="_blank" href="https://www.turnoffthelights.com/donate.html" data-i18n="titledonatebutton" rel="noopener"></a>
</span>
<span id="managed-prefs-text" data-i18n="donatepromotext"></span>
<div id="managed-prefs-text-close">x</div>
</div>
<div id="mainview-content">
<div id="tab1" class="page">
<h2 data-i18n="basicsettings"></h2>
<div class="sharemenu">
<div data-i18n="titelsharethis"></div> <div id="shareboxyoutube"></div> <div id="shareboxfacebook"></div> <div id="shareboxtwitter"></div>
</div>
<br>
<div id="example1"></div>
<div id="stefanvddynamicbackground"></div>
<table class="youtubepreview" aria-hidden="true" role="none">
<tr>
<td class="youtubeviewpanel">
<iframe id="dont-turn-off-the-lights" title="YouTube video" type="text/html" width="auto" height="auto" src="" frameborder="0" allowfullscreen>Your browser does not support iframes.</iframe>
<div id="sampletitle" class="youtubetitel" aria-disabled="true">Stefan vd</div>
<div id="samplechannel" class="youtube_container_head">
<div class="embedytsub">
<div class="subchannelicon">S</div>
<div class="subchanneldes">
<div class="subchannelname">Stefan Van Damme</div>
<div class="subaction"><div class="subbtn">Subscribe</div></div>
</div>
</div>
</div>
<div id="videochannel" class="youtube_video_head">
<div class="youtubevideobutton" aria-disabled="true"><span>55 videos</span></div>
</div>
<div id="samplelikebar" class="youtuberating">
<div id="sampleview" class="youtubeviewnumbers" aria-disabled="true">4,301,189</div>
<div class="youtuberatingsparkbarlikes"></div>
<div class="youtuberatingsparkbardislikes"></div>
</div>
<br>
<div id="sampledislikebutton" class="youtubelikebar" aria-disabled="true">
<div class="youtubelikebutton" aria-disabled="true">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="20" height="20"
viewBox="0 0 24 24"
fill="#000000"><g><path d="M 13.5625 2.25 L 7.5625 8.25 C 7.210938 8.601563 7 9.097656 7 9.59375 L 7 19.125 C 7 20.160156 7.839844 21 8.875 21 L 17.03125 21 C 17.773438 21 18.449219 20.554688 18.75 19.875 L 21.75 13.125 C 21.914063 12.75 22 12.347656 22 11.9375 L 22 11 C 22 9.964844 21.035156 9 20 9 L 14 9 C 14 9 15.4375 5.148438 15.4375 4.46875 C 15.4375 2.710938 13.5625 2.25 13.5625 2.25 Z M 2 9 L 2 21 L 5 21 L 5 9 Z "></path></g></svg>
<span>4k</span></div>
<div class="youtubedislikebutton" aria-disabled="true">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="20" height="20"
viewBox="0 0 24 24"
fill="#000000"><g><path d="M 2 3 L 2 15 L 5 15 L 5 3 Z M 8.875 3 C 7.839844 3 7 3.839844 7 4.875 L 7 14.40625 C 7 14.902344 7.210938 15.398438 7.5625 15.75 L 13.5625 21.75 C 13.5625 21.75 15.4375 21.289063 15.4375 19.53125 C 15.4375 18.851563 14 15 14 15 L 20 15 C 21.035156 15 22 14.035156 22 13 L 22 12.0625 C 22 11.652344 21.914063 11.25 21.75 10.875 L 18.75 4.125 C 18.449219 3.445313 17.773438 3 17.03125 3 Z "></path></g></svg>
<span>0</span></div>
</div>
<div id="sampleaddbutton" class="youtubeaddtobutton" aria-disabled="true"><span>Save</span></div>
<div id="samplesharebutton" class="youtubesharebutton" aria-disabled="true"><span>Share</span></div>
<div id="sampleinforbar" class="youtubeinforbar" aria-disabled="true">
<div class="youtubecommentsupload">Published on Sep 22, 2011</div>
<div class="youtubecommentsdescribe">The new introduction video from Stefan vd.</div>
</div>
</td>
<td class="youtubesuggpanel">
<div id="samplesug" class="youtubesuggestionbar">
<table>
<tr>
<td><div class="youtubevideoframegeen"></div></td>
<td class="yttopframe"><span class="youtubesuggestiontitel" aria-disabled="true">Stefan vd video: update now in the air</span><br><span class="youtubesuggestionby" aria-disabled="true">by Stefan</span></td>
</tr>
</table>
<table>
<tr>
<td><div class="youtubevideoframeblue"></div></td>
<td class="yttopframe"><span class="youtubesuggestiontitel" aria-disabled="true">Stefan video: Speech Recognition feature</span><br><span class="youtubesuggestionby" aria-disabled="true">by Stefan</span></td>
</tr>
</table>
<table>
<tr>
<td><div class="youtubevideoframeyellow"></div></td>
<td class="yttopframe"><span class="youtubesuggestiontitel" aria-disabled="true">Stefan video: Night Mode feature</span><br><span class="youtubesuggestionby" aria-disabled="true">by Stefan</span></td>
</tr>
</table>
<table>
<tr>
<td><div class="youtubevideoframered"></div></td>
<td class="yttopframe"><span class="youtubesuggestiontitel" aria-disabled="true">Stefan video: Camera Motion feature</span><br><span class="youtubesuggestionby" aria-disabled="true">by Stefan</span></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="tabbar">
<div class="tabbarintern">
<div id="sub1" class="tabbutton tabhighlight" title="Dark Layer Color">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
fill="#000000"><g><path fill="#E91E63" d="M 24 5 L 24 24 L 14.5 7.546875 Z "></path><path fill="#FF5722" d="M 33.5 7.546875 L 40.453125 14.5 L 24 24 Z "></path><path fill="#F44336" d="M 24 5 L 33.5 7.546875 L 24 24 Z "></path><path fill="#8BC34A" d="M 24 43 L 24 24 L 33.5 40.453125 Z "></path><path fill="#03A9F4" d="M 14.5 40.453125 L 7.546875 33.5 L 24 24 Z "></path><path fill="#4CAF50" d="M 24 43 L 14.5 40.453125 L 24 24 Z "></path><path fill="#FF9800" d="M 43 24 L 24 24 L 40.453125 14.5 Z "></path><path fill="#FFEB3B" d="M 40.453125 33.5 L 33.5 40.453125 L 24 24 Z "></path><path fill="#FFC107" d="M 43 24 L 40.453125 33.5 L 24 24 Z "></path><path fill="#3F51B5" d="M 5 24 L 24 24 L 7.546875 33.5 Z "></path><path fill="#9C27B0" d="M 7.546875 14.5 L 14.5 7.546875 L 24 24 Z "></path><path fill="#673AB7" d="M 5 24 L 7.546875 14.5 L 24 24 Z "></path></g></svg>
</div>
</div>
<div id="sub2" class="tabbutton" title="Linear Gradient Color">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 252 252"
fill="#000000"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" mix-blend-mode="normal"><path d="M0,252v-252h252v252z" fill="none"></path><path d="M126,220.5c-52.19091,0 -94.5,-42.30909 -94.5,-94.5v0c0,-52.19091 42.30909,-94.5 94.5,-94.5v0c52.19091,0 94.5,42.30909 94.5,94.5v0c0,52.19091 -42.30909,94.5 -94.5,94.5z" fill="#ffffff"></path><g fill="#000000"><g><path d="M126,21c-57.75,0 -105,47.25 -105,105c0,57.75 47.25,105 105,105c57.75,0 105,-47.25 105,-105c0,-57.75 -47.25,-105 -105,-105zM126,42c46.1836,0 84,37.81641 84,84c0,46.1836 -37.8164,84 -84,84z"></path></g></g><path d="M126,252c-69.58788,0 -126,-56.41212 -126,-126v0c0,-69.58788 56.41212,-126 126,-126v0c69.58788,0 126,56.41212 126,126v0c0,69.58788 -56.41212,126 -126,126z" fill="none"></path><path d="M126,246.96c-66.80436,0 -120.96,-54.15564 -120.96,-120.96v0c0,-66.80436 54.15564,-120.96 120.96,-120.96h0c66.80436,0 120.96,54.15564 120.96,120.96v0c0,66.80436 -54.15564,120.96 -120.96,120.96z" fill="none"></path></g></svg>
</div>
</div>
<div id="sub3" class="tabbutton" title="Background Image">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
fill="#000000"><g><path fill="#F57C00" d="M 40 41 L 8 41 C 5.800781 41 4 39.199219 4 37 L 4 11 C 4 8.800781 5.800781 7 8 7 L 40 7 C 42.199219 7 44 8.800781 44 11 L 44 37 C 44 39.199219 42.199219 41 40 41 Z "></path><path fill="#FFF9C4" d="M 38 16 C 38 17.65625 36.65625 19 35 19 C 33.34375 19 32 17.65625 32 16 C 32 14.34375 33.34375 13 35 13 C 36.65625 13 38 14.34375 38 16 Z "></path><path fill="#942A09" d="M 20 16 L 9 32 L 31 32 Z "></path><path fill="#BF360C" d="M 31 22 L 23 32 L 39 32 Z "></path></g></svg>
</div>
</div>
<div id="sub4" class="tabbutton" title="Dynamic Background">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 252 252"
fill="#000000"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" mix-blend-mode="normal"><path d="M0,252v-252h252v252z" fill="none"></path><g><g><path d="M31.5,52.5c0,-11.60742 9.39258,-21 21,-21h147c11.60742,0 21,9.39258 21,21v147c0,11.58691 -9.39258,21 -21,21h-147c-11.60742,0 -21,-9.41309 -21,-21z" fill="#333333"></path><path d="M89.25,68.25h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M89.25,84h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M89.25,105h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M89.25,126h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M89.25,152.25h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M89.25,183.75h10.5v10.5h-10.5z" fill="#7f8c8d"></path><path d="M89.25,52.5h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M89.25,42h10.5v5.25h-10.5z" fill="#ffffff"></path><path d="M131.25,42h10.5v5.25h-10.5z" fill="#ffffff"></path><path d="M47.25,78.75h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M47.25,94.5h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M47.25,115.5h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M47.25,136.5h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M47.25,162.75h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M47.25,194.25h10.5v10.5h-10.5z" fill="#7f8c8d"></path><path d="M47.25,63h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M68.25,42h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M47.25,42h10.5v15.75h-10.5z" fill="#ffffff"></path><path d="M68.25,57.75h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M68.25,78.75h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M68.25,99.75h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M68.25,131.25h10.5v10.5h-10.5z" fill="#7f8c8d"></path><path d="M110.25,57.75h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M110.25,73.5h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M110.25,94.5h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M110.25,115.5h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M110.25,141.75h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M110.25,173.25h10.5v10.5h-10.5z" fill="#7f8c8d"></path><path d="M110.25,42h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M131.25,84h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M131.25,99.75h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M131.25,120.75h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M131.25,141.75h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M131.25,168h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M131.25,199.5h10.5v10.5h-10.5z" fill="#7f8c8d"></path><path d="M131.25,68.25h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M131.25,52.5h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M194.25,78.75h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M194.25,94.5h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M194.25,115.5h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M194.25,136.5h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M194.25,162.75h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M194.25,194.25h10.5v10.5h-10.5z" fill="#7f8c8d"></path><path d="M194.25,63h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M194.25,42h10.5v15.75h-10.5z" fill="#ffffff"></path><path d="M173.25,63h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M173.25,78.75h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M173.25,99.75h10.5v10.5h-10.5z" fill="#ecf0f1"></path><path d="M173.25,120.75h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M173.25,147h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M173.25,178.5h10.5v10.5h-10.5z" fill="#7f8c8d"></path><path d="M173.25,42h10.5v15.75h-10.5z" fill="#ffffff"></path><path d="M152.25,57.75h10.5v10.5h-10.5z" fill="#bdc3c7"></path><path d="M152.25,42h10.5v10.5h-10.5z" fill="#ffffff"></path><path d="M152.25,73.5h10.5v10.5h-10.5z" fill="#cccccc"></path><path d="M152.25,99.75h10.5v10.5h-10.5z" fill="#7f8c8d"></path></g></g></g></svg>
</div>
</div>
<div id="sub5" class="tabbutton" title="Blur Effect">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
fill="#2196F3"><g><path d="M 24 44 C 16.832031 44 11 38.183594 11 31.027344 C 11 24 24 4 24 4 C 24 4 37 24 37 31.027344 C 37 38.183594 31.167969 44 24 44 Z "></path></g></svg>
</div>
</div>
<div id="btnmultiopacity" class="tabbutton tabspecial" title="Multiple Website Opacity">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 24 24"
fill="#333333"><g><path d="M 4 4 C 2.894531 4 2 4.894531 2 6 L 2 13 C 2 14.105469 2.894531 15 4 15 L 7 15 L 7 11 C 7 9.34375 8.34375 8 10 8 L 16 8 L 16 6 C 16 4.894531 15.105469 4 14 4 Z M 10 9 C 8.894531 9 8 9.894531 8 11 L 8 18 C 8 19.105469 8.894531 20 10 20 L 20 20 C 21.105469 20 22 19.105469 22 18 L 22 11 C 22 9.894531 21.105469 9 20 9 Z "></path></g></svg>
</div>
</div>
<div class="dimrange">
<div>
<span data-i18n="titelopacity"></span>:
</div>
<div class="tabopacityslider">
<input type="range" id="slider" min="0" max="100" step="1" value="0" role="slider" aria-label="The opacity value from the slider" aria-valuemin="1" aria-valuemax="100" aria-valuenow="0">
</div>
<div>
<input type="number" id="interval" min="0" max="100" step="1" value="0" maxlength="3" size="4" aria-label="The opacity value from the number box" aria-valuemin="1" aria-valuemax="100" aria-valuenow="0">
</div>
</div>
</div>
</div>
<section>
<h3 data-i18n="titelscreen" id="screen"></h3>
<div id="darklayersettings" role="radiogroup" aria-labelledby="screen">
<div id="colorpanel" class="">
<div class="md-radio">
<input id="lightimagen" type="radio" name="bcklightimage" value="never" role="radio" aria-checked="true" aria-labelledby="screen" aria-label="choose your color">
<label for="lightimagen"><div><span data-i18n="titelcolor"></span></div></label>
</div>
<div class="md-color md-subgroup">
<div class="input-color-container"><input id="lightcolor" type="color" list="datalightcolor" aria-label="The dark layer color">
<datalist id="datalightcolor">
<option>#FFFFFF</option>
<option>#FF0000</option>
<option>#FF7700</option>
<option>#FFEE00</option>
<option>#00FF00</option>
<option>#008000</option>
<option>#3CB4FE</option>
<option>#0000FF</option>
<option>#808080</option>
<option>#000000</option>
</datalist>
</div>
<span data-i18n="descolorfixcolor"></span>
</div>
</div>
<div id="gradientpanel" class="hidden">
<div class="md-radio">
<input id="lightimagelin" type="radio" name="bcklightimage" value="linear" role="group" aria-checked="false" aria-labelledby="screen" aria-label="Set to lineair gradient background">
<label for="lightimagelin"><div><span data-i18n="titellinear"></span></div></label>
</div>
<div class="md-selectfield md-subgroup">
<select id="linearsq" role="listbox" class="browser-default">
<option value="top" data-i18n="top" role="option"></option>
<option value="bottom" data-i18n="bottom" role="option"></option>
<option value="right" data-i18n="right" role="option"></option>
<option value="left" data-i18n="left" role="option"></option>
</select>
</div>
<div class="md-color md-subgroup">
<div class="input-color-container">
<input id="colora" type="color" class="color" list="datalightcolor">
</div>
<label for="colora"><div><span data-i18n="titelcolora"></span></div></label>
</div>
<input type="number" id="intervallina" min="0" max="100" step="1" value="0" maxlength="3" size="4">
<div class="md-color md-subgroup">
<div class="input-color-container">
<input id="colorb" type="color" class="color" list="datalightcolor">
</div>
<label for="colorb"><div><span data-i18n="titelcolorb"></span></div></label>
</div>
<input type="number" id="intervallinb" min="0" max="100" step="1" value="0" maxlength="3" size="4">
</div>
<div id="imagepanel" class="hidden">
<div class="md-radio md-subgroup">
<input id="lightimagea" type="radio" name="bcklightimage" value="only" role="group" aria-checked="false" aria-labelledby="screen" aria-label="Set to the image background">
<label for="lightimagea"><div><span data-i18n="titelimage"></span></div></label>
</div>
<div>
<button type="button" id="wallpapershow" data-i18n="titellessmore"></button>
<button type="button" id="wallpaperhide" data-i18n="titelshowmore"></button>
<input id="lightimage" type="url" pattern="(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|f(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|ftp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})tp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)" aria-label="The image address">
</div>
<div id="imagegallery" class="hidden">
<div class="hoveroptionbox">
<div class="hoveroptionwall1"><div class="wall1showme"><button type="button" id="totlswallpaper1" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckimage1" alt="Background Wallpaper 1" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptionwall2"><div class="wall2showme"><button type="button" id="totlswallpaper2" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckimage2" alt="Background Wallpaper 2" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptionwall3"><div class="wall3showme"><button type="button" id="totlswallpaper3" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckimage3" alt="Background Wallpaper 3" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptionwall4"><div class="wall4showme"><button type="button" id="totlswallpaper4" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckimage4" alt="Background Wallpaper 4" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptionwall5"><div class="wall5showme"><button type="button" id="totlswallpaper5" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckimage5" alt="Background Wallpaper 5" height="70" src="" width="100" class="dynamicshaduw">
</div>
</div>
</div>
<div id="dynamicpanel" class="hidden">
<div id="customDynamicGroup">
<label>
<input id="dynamic1" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicfishtank"></span>
</label>
<label>
<input id="dynamic2" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicblocks"></span>
</label>
<label>
<input id="dynamic3" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicraindrops"></span>
</label>
<label>
<input id="dynamic4" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamiccloud"></span>
</label>
<label>
<input id="dynamic5" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicspace"></span>
</label>
<label>
<input id="dynamic6" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicsmoke"></span>
</label>
<label>
<input id="dynamic7" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicdotscolor"></span>
</label> <label>
<input id="dynamic8" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicstorm"></span>
</label>
<label>
<input id="dynamic9" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamictriangulation"></span>
</label>
<label>
<input id="dynamic10" type="radio" name="dynamicbackground" role="radio" aria-labelledby="dynamic">
<span data-i18n="desdynamicstars"></span>
</label>
</div>
<div class="md-checkbox">
<input id="dynamic" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="dynamic">
<label for="dynamic"><div><span data-i18n="titeldynamic"></span></div></label>
</div>
<div class="relative">
<button type="button" id="dynamicshow" data-i18n="titellessmore"></button>
<button type="button" id="dynamichide" data-i18n="titelshowmore"></button>
<input id="lightdynamic" type="url" readonly>
<div id="extradyn">
<div class="md-checkbox md-subgroup">
<input id="hoveroptiondyn5" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="hoveroptiondyn5">
<label for="hoveroptiondyn5"><div><span data-i18n="hoveroptiondyn5"></span></div></label>
</div>
</div>
</div>
<div id="dynamicgallery" class="hidden">
<div class="hoveroptionbox">
<div class="hoveroptiondyn1"><div class="dyn1showme"><button type="button" id="totldynpaper1" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn1" alt="Dynamic Background Shot 1" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn2"><div class="dyn2showme"><button type="button" id="totldynpaper2" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn2" alt="Dynamic Background Shot 2" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn3"><div class="dyn3showme"><button type="button" id="totldynpaper3" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn3" alt="Dynamic Background Shot 3" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn4"><div class="dyn4showme"><button type="button" id="totldynpaper4" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn4" alt="Dynamic Background Shot 4" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn5"><div class="dyn5showme">
<button type="button" id="totldynpaper5" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn5" alt="Dynamic Background Shot 5" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn6"><div class="dyn6showme"><button type="button" id="totldynpaper6" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn6" alt="Dynamic Background Shot 6" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn7"><div class="dyn7showme"><button type="button" id="totldynpaper7" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn7" alt="Dynamic Background Shot 7" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn8"><div class="dyn8showme"><button type="button" id="totldynpaper8" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn8" alt="Dynamic Background Shot 8" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn9"><div class="dyn9showme"><button type="button" id="totldynpaper9" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn9" alt="Dynamic Background Shot 9" height="70" src="" width="100" class="dynamicshaduw">
</div>
<div class="hoveroptionbox">
<div class="hoveroptiondyn10"><div class="dyn10showme"><button type="button" id="totldynpaper10" data-i18n="hoveroptionapply"></button></div></div>
<img id="bckdyn10" alt="Dynamic Background Shot 10" height="70" src="" width="100" class="dynamicshaduw">
</div>
</div>
</div>
<div id="blurpanel" class="hidden">
<div class="md-checkbox md-subgroup">
<input id="blur" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="blur">
<label for="blur"><div><span data-i18n="titelblur"></span></div></label>
</div>
</div>
</div>
</section>
<section id="sectionmobileappbox">
<div id="mobileappbox">
<div id="matllo"><span data-i18n="desmobileapp"></span></div>
<div id="mant"><span data-i18n="nothanks"></span></div>
<div id="magetapp"><span data-i18n="downloadtheapp"></span></div>
</div>
</section>
<section>
<h3 data-i18n="titelautoplay"></h3>
<div>
<div id="helpautoplay" class="helpwhatproblem" data-i18n="helpautoplay"></div>
<div class="md-checkbox md-subgroup">
<input id="autoplay" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="autoplay">
<label for="autoplay"><div><span data-i18n="desautoplay"></span></div></label>
</div>
(
<div class="md-checkbox md-subgroup">
<input id="aplay" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="aplay">
<label for="aplay"><div><span data-i18n="desaplay"></span></div></label>
</div>
<div class="md-checkbox md-subgroup">
<input id="apause" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="apause">
<label for="apause"><div><span data-i18n="desapause"></span></div></label>
</div>
<div class="md-checkbox md-subgroup">
<input id="astop" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="astop">
<label for="astop"><div><span data-i18n="desastop"></span></div></label>
</div>)
<div class="md-checkbox md-subin">
<input id="autoplaydelay" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="autoplaydelay">
<label for="autoplaydelay"><div><span data-i18n="desautoplaydelay"></span> <input id="autoplaydelaytime" type="number" min="0" max="10" step="1" value="0" maxlength="1" size="1"> <span data-i18n="desautoplaydelayend"></span>.</div></label>
</div>
<div class="md-checkbox">
<input id="autoplayonly" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="autoplayonly">
<label for="autoplayonly"><div><span data-i18n="desautoplayonly"></span></div></label>
</div>
<div role="radiogroup" aria-labelledby="autoplayonly">
<div class="md-radio md-subin">
<input id="autoplaychecklistwhite" type="radio" name="autoplaychecklist" value="true" role="radio" aria-labelledby="autoplayonly">
<label for="autoplaychecklistwhite"><div><span data-i18n="titelautoplaywhitelist"></span></div></label>
</div>
<div class="md-radio md-subin">
<input id="autoplaychecklistblack" type="radio" name="autoplaychecklist" value="black" role="radio" aria-labelledby="autoplayonly">
<label for="autoplaychecklistblack"><div><span data-i18n="titelautoplayblacklist"></span></div></label>
</div>
</div>
<form id="formautoplay">
<table id="autoplaywhitelist">
<tr>
<td><span data-i18n="titelwebsite"></span>:</td>
<td><input id="autoplaywebsiteurl" type="url" required pattern="(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|f(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|ftp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})tp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)" placeholder="https://www.example.com" aria-label="The URL box to type a website for the AutoDim feature"></td>
<td><button type="submit" id="autoplayaddbutton" name="add"><span data-i18n="addbutton"></span></button></td>
</tr>
<tr>
<td colspan="2"><select id="autoplayDomainsBox" role="listbox" name="autoplayentryList" size="5" multiple="" aria-label="All the URLs in the box for the AutoDim feature"></select></td>
<td valign="top"><button type="button" id="autoplayremovebutton" name="delete"><span data-i18n="deletebutton"></span></button></td>
</tr>
</table>
</form>
</div>
</section>
<section>
<h3 data-i18n="titelautostop"></h3>
<div>
<div class="md-checkbox">
<input id="autostop" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="autostop">
<label for="autostop"><div><span data-i18n="desautostop"></span></div></label>
</div>
<div role="radiogroup" aria-labelledby="autostop">
<div class="md-radio md-subin">
<input id="autostopred" type="radio" name="autostopbanner" value="red" role="radio" aria-labelledby="autostop">
<label for="autostopred"><div><span data-i18n="autostopbannerred"></span></div></label>
</div>
<div class="md-radio md-subin">
<input id="autostoptrans" type="radio" name="autostopbanner" value="trans" role="radio" aria-labelledby="autostop">
<label for="autostoptrans"><div><span data-i18n="autostopbannertrans"></span></div></label>
</div>
</div>
<div class="md-checkbox">
<input id="autostoponly" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="autostoponly">
<label for="autostoponly"><div><span data-i18n="desautostoponly"></span></div></label>
</div>
<div role="radiogroup" aria-labelledby="autostoponly">
<div class="md-radio md-subin">
<input id="autostopchecklistwhite" type="radio" name="autostopchecklist" value="true" role="radio" aria-labelledby="autostoponly">
<label for="autostopchecklistwhite"><div><span data-i18n="titelautostopwhitelist"></span> - <span data-i18n="desautostopfeaturewhite"></span></div></label>
</div>
<div class="md-radio md-subin">
<input id="autostopchecklistblack" type="radio" name="autostopchecklist" value="black" role="radio" aria-labelledby="autostoponly">
<label for="autostopchecklistblack"><div><span data-i18n="titelautostopblacklist"></span> - <span data-i18n="desautostopfeatureblack"></span></div></label>
</div>
</div>
<form id="formautostop">
<table id="autostopwhitelist">
<tr>
<td><span data-i18n="titelwebsite"></span>:</td>
<td><input id="autostopwebsiteurl" type="url" required pattern="(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|f(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|ftp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})tp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)" placeholder="https://www.example.com" aria-label="The URL box to type a website for the AutoDim feature"></td>
<td><button type="submit" id="autostopaddbutton" name="add"><span data-i18n="addbutton"></span></button></td>
</tr>
<tr>
<td colspan="2"><select id="autostopDomainsBox" role="listbox" name="autoplayentryList" size="5" multiple="" aria-label="All the URLs in the box for the AutoStop feature"></select></td>
<td valign="top"><button type="button" id="autostopremovebutton" name="delete"><span data-i18n="deletebutton"></span></button></td>
</tr>
</table>
</form>
</div>
</section>
<section id="sectionreviewbox">
<div id="reviewextensionbox">
<div class="stars">★★★★★</div>
<div id="ayh"><span data-i18n="areyouhappy"></span></div>
<div id="tllo"><span data-i18n="tellothers"></span></div>
<div id="nt"><span data-i18n="nothanks"></span></div>
<div id="war"><span data-i18n="writeareview"></span></div>
</div>
</section>
<section>
<h3>YouTube™</h3>
<div>
<table class="tablefirstyt">
<tr>
<td><span class="item" data-i18n="titelplaylist"></span></td>
<td>
<div class="md-checkbox">
<input id="playlist" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="playlist">
<label for="playlist"><div><span data-i18n="desplaylist"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titelinfobar"></span></td>
<td>
<div class="md-checkbox">
<input id="infobar" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="infobar">
<label for="infobar"><div><span data-i18n="desinfobar"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titellikebutton"></span></td>
<td>
<div class="md-checkbox">
<input id="likebutton" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="likebutton">
<label for="likebutton"><div><span data-i18n="deslikebutton"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titeladdvideobutton"></span></td>
<td>
<div class="md-checkbox">
<input id="addvideobutton" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="addvideobutton">
<label for="addvideobutton"><div><span data-i18n="desaddvideobutton"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titelhead"></span></td>
<td>
<div class="md-checkbox">
<input id="head" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="head">
<label for="head"><div><span data-i18n="deshead"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titelsharebutton"></span></td>
<td>
<div class="md-checkbox">
<input id="sharebutton" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="sharebutton">
<label for="sharebutton"><div><span data-i18n="dessharebutton"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titelsuggestions"></span></td>
<td>
<div class="md-checkbox">
<input id="suggestions" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="suggestions">
<label for="suggestions"><div><span data-i18n="dessuggestions"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titelvideoheadline"></span></td>
<td>
<div class="md-checkbox md-subgroup">
<input id="videoheadline" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="videoheadline">
<label for="videoheadline"><div><span data-i18n="desvideoheadline"></span></div></label>
</div>
<div class="md-color md-subgroup">
<div class="input-color-container">
<input id="titleinvertcolor" type="color" class="color" list="datalightcolor" aria-label="Choose the invert color for the video title">
</div>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titelviewcount"></span></td>
<td>
<div class="md-checkbox">
<input id="viewcount" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="viewcount">
<label for="viewcount"><div><span data-i18n="desviewcount"></span></div></label>
</div>
</td>
</tr>
<tr>
<td><span class="item" data-i18n="titellikebar"></span></td>
<td>
<div class="md-checkbox">
<input id="likebar" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="likebar">
<label for="likebar"><div><span data-i18n="deslikebar"></span></div></label>
</div>
</td>
</tr>
</table>
</div>
</section>
<section>
<h3 role="none"></h3>
<div>
<table>
<tr>
<td>
<div class="md-checkbox">
<input id="autowidthyoutube" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="autowidthyoutube">
<label for="autowidthyoutube"><div><span data-i18n="titelautowidthyoutube"></span></div></label>
</div>
</td>
</tr>
<tr>
<td>
<div class="md-checkbox subgroup">
<input id="customqualityyoutube" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="customqualityyoutube">
<label for="customqualityyoutube"><div><span data-i18n="titelqualityyoutube"></span></div></label>
</div>
<div class="md-selectfield md-subgroup">
<label><span data-i18n="titelmaxqualityyoutube"></span></label>
<select id="youtubequality" role="listbox" class="browser-default" aria-label="Choose the default video quality for YouTube">
<option value="highres" role="option">highres</option>
<option value="hd4320" role="option">4320p (8k)</option>
<option value="hd2880" role="option">2880p (5K)</option>
<option value="hd2160" role="option">2160p (4k)</option>
<option value="hd1440" role="option">1440p</option>
<option value="hd1080" role="option">1080p</option>
<option value="hd720" role="option">720p</option>
<option value="large" role="option">480p</option>
<option value="medium" role="option">360p</option>
<option value="small" role="option">240p</option>
<option value="tiny" role="option">144p</option>
<option value="default" role="option">default</option>
</select>
</div>
<div class="md-checkbox md-subgroup">
<input id="block60fps" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="block60fps">
<label for="block60fps"><div><span data-i18n="titelblock60fps"></span></div></label>
</div>
</td>
</tr>
<tr>
<td>
<div class="md-checkbox">
<input id="cinemaontop" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="cinemaontop">
<label for="cinemaontop"><div><span data-i18n="titelcinemaontop"></span></div></label>
</div>
</td>
</tr>
<tr>
<td>
<div class="md-checkbox">
<input id="no360youtube" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="no360youtube">
<label for="no360youtube"><div><span data-i18n="titel360youtube"></span></div></label>
</div>
</td>
</tr>
</table>
</div>
</section>
</div>
<div id="tab2" class="page hidden">
<h2 data-i18n="visualeffects"></h2>
<section>
<div id="example2"></div>
<div class="atmosbox">
<video id="beeld" controls crossOrigin="anonymous" preload="none" poster="https://www.turnoffthelights.com/extension/video/big_buck_bunny_640x360.jpg" data-video="1">
<source src="https://www.turnoffthelights.com/extension/video/big_buck_bunny_640x360_2.28.mp4" type="video/mp4">
<source src="https://www.turnoffthelights.com/extension/video/big_buck_bunny_640x360_2.28.ogv" type="video/ogv">
<track label="English - subtitles" kind="subtitles" srclang="en" src="https://www.turnoffthelights.com/extension/video/captions/vtt/bunny-en.vtt">
<track label="English - captions" kind="captions" srclang="en" src="https://www.turnoffthelights.com/extension/video/captions/vtt/bunny-en.vtt">
<track label="English - descriptions" kind="descriptions" srclang="en" src="https://www.turnoffthelights.com/extension/video/captions/vtt/bunny-en.vtt">
</video>
<canvas id="stefanvdvivideffect1" data-video="1" class="stefanvdvivideffect"></canvas>
</div>
</section>
<section id="sectionauroraplayerappbox">
<div id="auroraplayerappbox">
<div id="apicon"><img id="auroraplayericon" alt="Aurora Player" loading="lazy" width="32" height="32" src="images/aurora-player_32x32.webp" srcset="images/aurora-player_32x32.webp 1x, images/[email protected] 2x"></div>
<div id="apname"><span>Aurora Player</span></div>
<div id="aptllo"><span data-i18n="desauroraplayer"></span></div>
<div id="apnt"><span data-i18n="nothanks"></span></div>
<div id="apgetapp"><span data-i18n="downloadtheapp"></span></div>
</div>
</section>
<div class="tabbar">
<div class="tabbarintern">
<div id="tv1" class="tabbutton tabhighlight" title="Atmosphere Lighting">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
fill="#333333"><line fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="37" y1="11" x2="5" y2="43"></line><line fill="none" stroke="#607D8B" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="28.5" y1="19.5" x2="13.5" y2="34.5"></line><line fill="none" stroke="#D84315" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="38" y1="10" x2="29" y2="19"></line><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="28" y1="5" x2="28" y2="35"></line><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="25.284" y1="12.995" x2="31.688" y2="30"></line><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="23" y1="7" x2="24.144" y2="10.003"></line><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="13" y1="20" x2="43" y2="20"></line><g><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="17" y1="9" x2="39" y2="31"></line></g><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="28" y1="20" x2="39" y2="9"></line><circle fill="#FFC107" cx="33" cy="33" r="1"></circle><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="23.762" y1="31" x2="23" y2="33"></line><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="31.906" y1="10" x2="24.905" y2="28"></line><circle fill="#FFC107" cx="33" cy="7" r="1"></circle><line fill="none" stroke="#FFC107" stroke-width="2";stroke-linecap="round" stroke-miterlimit="10" x1="15" y1="25" x2="41" y2="15"></line><line fill="none" stroke="#FFC107" stroke-width="2";stroke-linecap="round" stroke-miterlimit="10" x1="38.996" y1="24.237" x2="41" y2="25"></line><line fill="none" stroke="#FFC107" stroke-width="2";stroke-linecap="round" stroke-miterlimit="10" x1="20.997" y1="17.312" x2="35.996" y2="23.094"></line><line fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="15" y1="15" x2="17.004" y2="15.772"></line><circle fill="#FFECB3" cx="28" cy="20" r="2"></circle></svg>
</div>
</div>
<div id="tv2" class="tabbutton" title="One Solid Color">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
fill="#333333"><g><path fill="#263238" d="M 23 44 L 25 44 L 28 41 L 20 41 "></path><path fill="#9FA8DA" d="M 26 42 L 22 42 C 19.800781 42 18 40.199219 18 38 L 18 34 L 30 34 L 30 38 C 30 40.199219 28.199219 42 26 42 Z "></path><path fill="#5C6BC0" d="M 30 38 L 18.398438 39.601563 C 18.699219 40.300781 19.300781 41 20 41.398438 L 29.398438 40.101563 C 29.800781 39.5 30 38.800781 30 38 Z "></path><path fill="#5C6BC0" d="M 18 35.699219 L 18 37.699219 L 30 36 L 30 34 Z "></path><path fill="#FFC107" d="M 18 34 C 15 32.101563 9 26 9 19 C 9 10.699219 15.699219 4 24 4 C 32.300781 4 39 10.699219 39 19 C 39 26 33 32.101563 30 34 Z "></path><path fill="#FFF176" d="M 30.601563 17.199219 L 27.601563 15.199219 C 27.300781 15 26.800781 15 26.5 15.199219 L 24 16.800781 L 21.601563 15.199219 C 21.300781 15 20.800781 15 20.5 15.199219 L 17.5 17.199219 C 17.300781 17.398438 17.101563 17.601563 17.101563 17.898438 C 17.101563 18.199219 17.101563 18.5 17.300781 18.699219 L 21.101563 23.398438 L 21.101563 34 L 23.101563 34 L 23.101563 23 C 23.101563 22.800781 23 22.601563 22.898438 22.398438 L 19.601563 18.300781 L 21.101563 17.300781 L 23.5 18.898438 C 23.800781 19.101563 24.300781 19.101563 24.601563 18.898438 L 27 17.300781 L 28.5 18.300781 L 25.199219 22.398438 C 25.101563 22.601563 25 22.800781 25 23 L 25 34 L 27 34 L 27 23.398438 L 30.800781 18.699219 C 31 18.5 31.101563 18.199219 31 17.898438 C 30.898438 17.601563 30.800781 17.300781 30.601563 17.199219 Z "></path></g></svg>
</div>
</div>
<div id="tv3" class="tabbutton" title="Four Solid Colors">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 252 252"
fill="#333333"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" mix-blend-mode="normal"><path d="M0,252v-252h252v252z" fill="none"></path><g><g><path d="M31.5,52.5v147c0,11.5459 9.4541,21 21,21h147c11.5459,0 21,-9.4541 21,-21v-147c0,-11.5459 -9.4541,-21 -21,-21h-147c-11.5459,0 -21,9.4541 -21,21" fill="#222222"></path><path d="M84,42c-23.15332,0 -42,18.84668 -42,42c0,23.15332 18.84668,42 42,42c23.15332,0 42,-18.84668 42,-42c0,-23.15332 -18.84668,-42 -42,-42z" fill="#333333"></path><path d="M84,126c-23.15332,0 -42,18.84668 -42,42c0,23.15332 18.84668,42 42,42c23.15332,0 42,-18.84668 42,-42c0,-23.15332 -18.84668,-42 -42,-42z" fill="#333333"></path><path d="M168,126c-23.15332,0 -42,18.84668 -42,42c0,23.15332 18.84668,42 42,42c23.15332,0 42,-18.84668 42,-42c0,-23.15332 -18.84668,-42 -42,-42z" fill="#333333"></path><path d="M168,42c-23.15332,0 -42,18.84668 -42,42c0,23.15332 18.84668,42 42,42c23.15332,0 42,-18.84668 42,-42c0,-23.15332 -18.84668,-42 -42,-42z" fill="#333333"></path><path d="M199.5,84c0,17.39063 -14.10937,31.5 -31.5,31.5c-17.39062,0 -31.5,-14.10937 -31.5,-31.5c0,-17.39062 14.10938,-31.5 31.5,-31.5c17.39063,0 31.5,14.10938 31.5,31.5z" fill="#f4c20d"></path><path d="M115.5,84c0,17.39063 -14.10937,31.5 -31.5,31.5c-17.39062,0 -31.5,-14.10937 -31.5,-31.5c0,-17.39062 14.10938,-31.5 31.5,-31.5c17.39063,0 31.5,14.10938 31.5,31.5z" fill="#3cba54"></path><path d="M199.5,168c0,17.39063 -14.10937,31.5 -31.5,31.5c-17.39062,0 -31.5,-14.10937 -31.5,-31.5c0,-17.39062 14.10938,-31.5 31.5,-31.5c17.39063,0 31.5,14.10938 31.5,31.5z" fill="#4885ed"></path><path d="M115.5,168c0,17.39063 -14.10937,31.5 -31.5,31.5c-17.39062,0 -31.5,-14.10937 -31.5,-31.5c0,-17.39062 14.10938,-31.5 31.5,-31.5c17.39063,0 31.5,14.10938 31.5,31.5z" fill="#db3236"></path><path d="M89.25,68.25c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#3cba54"></path><path d="M105,78.75c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#3cba54"></path><path d="M173.25,68.25c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#f4c20d"></path><path d="M189,78.75c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#f4c20d"></path><path d="M89.25,152.25c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#db3236"></path><path d="M105,162.75c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#db3236"></path><path d="M173.25,152.25c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#4885ed"></path><path d="M189,162.75c0,2.8916 -2.3584,5.25 -5.25,5.25c-2.8916,0 -5.25,-2.3584 -5.25,-5.25c0,-2.8916 2.3584,-5.25 5.25,-5.25c2.8916,0 5.25,2.3584 5.25,5.25z" fill="#4885ed"></path></g></g></g></svg>
</div>
</div>
<div id="tv4" class="tabbutton" title="Real Vivid mode">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
fill="#333333"><polyline fill="#263238" points="23.095,46 25.095,46 28.095,43 20.095,43 "></polyline><path fill="#9FA8DA" d="M26.312,44h-4.625C20.209,44,19,42.791,19,41.313V36h10v5.313C29,42.791,27.791,44,26.312,44z"></path><g><path fill="#5C6BC0" d="M19.005,41.517c0.015,0.778,0.389,1.466,0.958,1.921l8.924-1.265C28.953,41.948,29,41.714,29,41.469 v-1.331L19.005,41.517z"></path><polygon fill="#5C6BC0" points="19,37.559 19,39.559 29,38 29,36"></polygon></g><path fill="#CFD8DC" d="M24,16h-8.607c-0.677,0-1.158,0.653-0.954,1.298C15.271,19.94,17,26.347,17,34l2,2h5h5l2-2 c0-7.653,1.729-14.06,2.562-16.702C33.765,16.653,33.284,16,32.607,16H24z"></path><polygon fill="#B0BEC5" points="19,36 24,36 29,36 31,34 17,34 "></polygon><path fill="#CDDC39" d="M24,2c-1.912,0-3.567,0.074-5,0.206L21,16h3h3l2-13.794C27.567,2.074,25.912,2,24,2z"></path><path fill="#8BC34A" d="M29,2.206c-0.622-0.057-1.293-0.101-2.001-0.135L26,16h1h1l2.979-13.508l0.006-0.041 C30.371,2.357,29.723,2.272,29,2.206z"></path><path fill="#FFEB3B" d="M21.001,2.07C20.293,2.105,19.622,2.148,19,2.206c-0.723,0.066-1.371,0.152-1.985,0.246l0.006,0.041 L20,16h1h1L21.001,2.07z"></path><g><path fill="#4CAF50" d="M32.951,2.832c-0.585-0.143-1.242-0.269-1.966-0.38l-0.006,0.041L28,16h1h2l3.859-12.567 C34.317,3.214,33.687,3.011,32.951,2.832z"></path></g><path fill="#2962FF" d="M34.859,3.433L34.859,3.433L31,16h1.764c0.76,0,1.452-0.426,1.789-1.106C35.652,12.681,38,7.851,38,7 C38,5.918,37.466,4.487,34.859,3.433z"></path><g><path fill="#FFC107" d="M17.021,2.492l-0.006-0.041c-0.724,0.111-1.381,0.237-1.966,0.38 c-0.736,0.18-1.366,0.383-1.908,0.602L17,16h2h1L17.021,2.492z"></path></g><path fill="#FF5722" d="M13.141,3.433C10.534,4.487,10,5.918,10,7c0,0.804,2.35,5.664,3.448,7.889 C13.785,15.572,14.478,16,15.239,16H17L13.141,3.433L13.141,3.433z"></path></svg>
</div>
</div>
<div id="tv5" class="tabbutton" title="Atmosphere Lighting range">
<div class="tabicon">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 48 48"
fill="#333333"><g><path fill="#FFC107" d="M 44 40 C 44 42.199219 38.601563 44 32 44 C 25.898438 44 20.898438 42.5 20.101563 40.5 C 20 40.398438 6 10 6 10 L 11 7 C 11 7 41.5 37.101563 43.199219 38.601563 C 43.699219 39 44 39.5 44 40 Z "></path><path fill="#455A64" d="M 5.398438 14 L 5.898438 10 L 10.300781 6.5 L 14.199219 6.898438 Z "></path><path fill="#546E7A" d="M 10.300781 6.5 L 5.898438 10 L 4.398438 8.300781 C 3.699219 7.398438 3.898438 6.199219 4.699219 5.5 L 6 4.5 C 6.898438 3.800781 8.101563 3.898438 8.800781 4.800781 Z "></path><path fill="#607D8B" d="M 7.300781 13.699219 L 5.898438 10 L 10.300781 6.5 L 13.5 8.699219 Z "></path><path fill="#FFEB3B" d="M 44 40 C 44 37.789063 38.628906 36 32 36 C 25.371094 36 20 37.789063 20 40 C 20 42.210938 25.371094 44 32 44 C 38.628906 44 44 42.210938 44 40 Z "></path></g></svg>
</div>
</div>
<div class="dimrange">
<div>
<span data-i18n="titelon"></span>
</div>
<div class="tabopacityslider">
<input type="range" id="onoffrange" min="0" max="1" step="1" value="0" name="onoffrange" role="slider" aria-label="The ON and OFF switch" aria-valuemin="1" aria-valuemax="1" aria-valuenow="0">
</div>
<div>
<span data-i18n="titeloff"></span>
</div>
</div>
</div>
</div>
<section>
<h3 data-i18n="titelambilight"></h3>
<div>
<div id="atmospanel">
<div class="md-checkbox md-subgroup">
<input id="ambilight" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="ambilight">
<label for="ambilight"><div><span data-i18n="desambilight"></span></div></label>
</div>
(
<div class="md-checkbox md-subgroup">
<input id="vpause" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="vpause">
<label for="vpause"><div><span data-i18n="desapause"></span></div></label>
</div>)
<div class="grey-text"><span data-i18n="titelsupportatmos"></span></div>
</div>
<div id="atmosonepanel" class="hidden">
<div class="md-radio">
<input id="ambilightfixcolor" type="radio" name="ambilightcolor" value="fixed" role="radio" aria-labelledby="ambilight">
<label for="ambilightfixcolor"><div><span data-i18n="desambilightfixcolor"></span></div></label>
</div>
<div class="md-color">
<div class="input-color-container">
<input id="ambilightcolorhex" type="color" class="color" list="datalightambilight">
</div>
<label for="ambilightcolorhex"><div><span data-i18n="desatmossolidcolor"></span></div></label>
</div>
</div>
<div id="atmosfourpanel" class="hidden">
<div class="md-radio">
<input id="ambilight4color" type="radio" name="ambilightcolor" value="4" role="radio" aria-labelledby="ambilight">
<label for="ambilight4color"><div><span data-i18n="desambilight4color"></span></div></label>
</div>
<div class="md-color">
<div class="input-color-container">
<input id="ambilight1colorhex" type="color" class="color" list="datalightambilight">
</div>
<label for="ambilight1colorhex"><div><span data-i18n="top"></span></div></label>
</div>
<div class="md-color">
<div class="input-color-container">
<input id="ambilight2colorhex" type="color" class="color" list="datalightambilight">
</div>
<label for="ambilight2colorhex"><div><span data-i18n="bottom"></span></div></label>
</div>
<div class="md-color">
<div class="input-color-container">
<input id="ambilight3colorhex" type="color" class="color" list="datalightambilight">
</div>
<label for="ambilight3colorhex"><div><span data-i18n="right"></span></div></label>
</div>
<div class="md-color">
<div class="input-color-container">
<input id="ambilight4colorhex" type="color" class="color" list="datalightambilight">
</div>
<label for="ambilight4colorhex"><div><span data-i18n="left"></span></div></label>
</div>
</div>
<div id="atmosvividpanel" class="hidden">
<div class="md-radio">
<input id="ambilightvarcolor" type="radio" name="ambilightcolor" value="real" role="radio" aria-labelledby="ambilight">
<label for="ambilightvarcolor"><div><span data-i18n="desambilightvarcolor"></span></div></label>
</div>
<div id="showwarningambilight" class="warningambilight">
<span class="warning" data-i18n="warning"></span><br><span data-i18n="warningtextambilight"></span>
<span><a href="https://www.turnoffthelights.com/browser/atmosphere-lighting-backlight-for-html5-videos.html" target="_blank" rel="noopener"><span data-i18n="titelwikiatmos"></span></a>.</span>
</div>
<div class="md-checkbox">
<input id="atmosvivid" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="atmosvivid">
<label for="atmosvivid"><div><span data-i18n="desatmosvivid"></span></div></label>
</div>
<div class="md-radio md-subin" id="boxfpsauto">
<input id="atmosfpsauto" type="radio" name="fpstype" value="mathframe" role="radio" aria-labelledby="atmosvivid">
<label for="atmosfpsauto"><div><span data-i18n="desatmosfpsauto"></span></div></label>
</div>
<div class="md-radio md-subin">
<input id="atmosfpsmanual" type="radio" name="fpstype" value="manually" role="radio" aria-labelledby="atmosvivid">
<label for="atmosfpsmanual"><div><span data-i18n="desatmosfpsmanual"></span>, <input type="number" min="1" max="60" step="1" value="12" name="drawatmosfps" id="drawatmosfps" maxlength="3" size="4">FPS</div></label>
</div>
<datalist id="datalightambilight">
<option>#FFFFFF</option>
<option>#FF0000</option>
<option>#FF7700</option>
<option>#FFEE00</option>
<option>#00FF00</option>
<option>#008000</option>
<option>#3CB4FE</option>
<option>#0000FF</option>
<option>#808080</option>
<option>#000000</option>
</datalist>
</div>
<div id="atmossettingspanel" class="hidden">
<div class="atmosrangebox">
<div class="attitle"><span class="item" data-i18n="titelblurradius"></span></div>
<div class="atrest"><input type="range" min="30" max="250" step="1" value="0" name="arangeblur" id="arangeblur"></div>
<div class="atrest"><input type="number" min="30" max="250" step="1" value="0" name="ambilightrangeblurradius" id="ambilightrangeblurradius" maxlength="3" size="4"></div>
</div>
<label><span data-i18n="desambilightrangeblurradius"></span></label>
<br>
<div class="atmosrangebox">
<div class="attitle"><span class="item" data-i18n="titelspreadradius"></span></div>
<div class="atrest"><input type="range" min="0" max="50" step="1" value="0" name="arangespread" id="arangespread"></div>
<div class="atrest"><input type="number" min="0" max="50" step="1" value="0" name="ambilightrangespreadradius" id="ambilightrangespreadradius" maxlength="3" size="4"></div>
</div>
<label><span data-i18n="desambilightrangespreadradius"></span></label>
<br>
<div class="md-checkbox">
<input id="atmosontotlmode" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="atmosontotlmode">
<label for="atmosontotlmode"><div><span data-i18n="desatmosontotlmode"></span></div></label>
</div>
<div class="md-checkbox">
<input id="atmosphereonly" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="atmosphereonly">
<label for="atmosphereonly"><div><span data-i18n="desatmosphereonly"></span></div></label>
</div>
<form id="formatmospherelighting">
<table id="atmospherewhitelist">
<tr>
<td><span data-i18n="titelwebsite"></span>:</td>
<td><input id="atmospherewebsiteurl" type="url" required pattern="(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|f(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|((https?|ftp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})tp)://)?(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))|https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)" placeholder="https://www.example.com"></td>
<td><button type="submit" id="atmosphereaddbutton" name="add"><span data-i18n="addbutton"></span></button></td>
</tr>
<tr>
<td colspan="2"><select id="atmosphereDomainsBox" role="listbox" name="atmosphereentryList" size="5" multiple=""></select></td>
<td valign="top"><button type="button" id="atmosphereremovebutton" name="delete"><span data-i18n="deletebutton"></span></button></td>
</tr>
</table>
</form>
<br>
<div class="grey-text"><span data-i18n="titelvideosample"></span>: <span>Big Buck Bunny © Copyright 2008 Blender Foundation.</span></div>
</div>
</div>
</section>
<section>
<h3 data-i18n="titelfadein"></h3>
<div>
<div class="md-checkbox">
<input id="fadein" type="checkbox" role="checkbox" aria-checked="false" aria-labelledby="fadein">