Project

General

Profile

Download (5.93 KB) Statistics
| Branch: | Tag: | Revision:

haketilo / html / settings.html @ 587c1a88

1
<!DOCTYPE html>
2
<!--
3
    SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
4

    
5
    Haketilo's settings page
6

    
7
    This file is part of Haketilo.
8

    
9
    Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org>
10

    
11
    File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both.
12

    
13
    This program is free software: you can redistribute it and/or modify
14
    it under the terms of the GNU General Public License as published by
15
    the Free Software Foundation, either version 3 of the License, or
16
    (at your option) any later version.
17

    
18
    This program is distributed in the hope that it will be useful,
19
    but WITHOUT ANY WARRANTY; without even the implied warranty of
20
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
21
    GNU General Public License for more details.
22

    
23
    You should have received a copy of the GNU General Public License
24
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
25

    
26
    I, Wojtek Kosior, thereby promise not to sue for violation of this file's
27
    licenses. Although I request that you do not make use of this code in a
28
    proprietary program, I am not going to enforce this in court.
29
  -->
30
<html>
31
  <head>
32
    <meta charset="utf-8"/>
33
    <title>Haketilo options</title>
34
#LOADCSS html/reset.css
35
#LOADCSS html/base.css
36
#LOADCSS html/grid.css
37
    <style>
38
      #loader, #indexeddb_error {
39
	  margin: auto;
40
	  padding: 1em;
41
	  max-width: 800px;
42
      }
43
      #indexeddb_error p {
44
	  margin-bottom: 1em;
45
      }
46

    
47
      /* Style top menu items. */
48
      #tab_heads>* {
49
	  background-color: #70AF70;
50
	  font-size: 115%;
51
	  padding: 0.6em;
52
	  display: inline-block;
53
	  cursor: pointer;
54
	  margin: 0.25em 0 0 0;
55
      }
56
      body {
57
	  /* 0.25em margin + 1em height + 2*0.6em padding, multiple font size */
58
	  --heading-height: calc(2.45em * 1.15);
59
	  --tab-content-height: calc(100vh - var(--heading-height));
60
      }
61
      #tab_heads>:hover {
62
	  box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
63
      }
64
      #tab_heads>.active_head {
65
	  background-color: #65A065;
66
	  color: #222;
67
	  box-shadow: none;
68
	  cursor: default;
69
      }
70

    
71
      /* Style the top menu itself. */
72
      #tab_heads {
73
	  -moz-user-select: none;
74
	  user-select: none;
75
	  background-color: #e0e0e0;
76
      }
77
      #top_menu_line {
78
	  position: absolute;
79
	  width: 100vw;
80
	  z-index: 1;
81
      }
82

    
83
      /* Style content */
84
      body {
85
	  --content-max-width: 1000px;
86
	  height: 100vh;
87
	  overflow-x: hidden;
88
	  overflow-y: hidden;
89
      }
90
      div.tab {
91
	  display: none;
92
      }
93
      div.tab.active_tab {
94
	  display: block;
95
      }
96

    
97
      /* Style the Script blocking and Repositories tabs. */
98
      #blocking_list_container, #allowing_list_container,
99
      #default_policy_dialog, #blocking_dialog_container,
100
      #repos_list_container, #repos_dialog_container {
101
	  padding: 0.8em 0.4em 0.4em 0.4em;
102
      }
103
      #blocking_editable_container, #blocking_dialog_container,
104
      #repos_list_container, #repos_dialog_container {
105
	  max-width: var(--content-max-width);
106
	  margin: 0 auto;
107
      }
108
      #blocking_editable_container {
109
	  /* Leave space for default policy dialog and headings. */
110
	  --content-height: calc(var(--tab-content-height) - 3em);
111
      }
112

    
113
      /* Pass height information to html in all tabs. */
114
      .tab {
115
	  --content-height: var(--tab-content-height);
116
      }
117
    </style>
118
  </head>
119
  <body>
120
    <!-- Those contain just templates, we can include them at the top -->
121
#INCLUDE html/dialog.html
122
#INCLUDE html/item_list.html
123
#INCLUDE html/item_preview.html
124
#INCLUDE html/text_entry_list.html
125
#INCLUDE html/payload_create.html
126
    <div id="loader">
127
      Loading settings page...
128
    </div>
129
    <div id="indexeddb_error" class="hide">
130
      <p>
131
	Cannot display settings page.
132
      </p>
133
      <p>
134
	Haketilo could not access IndexedDB. IndexedDB is an in-browser
135
	database in which Haketilo stores all its configuration. Without it, the
136
	settings page is non-operational.
137
      <p>
138
#IF MOZILLA
139
	<div id="indexeddb_private_mode_explanation" class="hide">
140
	  <p>
141
	    This issue is the result of using Haketilo in Private Browsing mode.
142
	    For privacy reasons your browser blocks access to IndexedDB in
143
	    private windows and this unfortunately also affects Haketilo's
144
	    settings page.
145
	  </p>
146
	  <p>
147
	    You can sacrifice this single privacy feature and enable IndexedDB
148
	    access in private windows by navigating to "about:config" in the URL
149
	    bar, agreeing to accept the risk and setting the
150
	    "dom.indexedDB.privateBrowsing.enabled" preference to "true". Those
151
	    pages that have their scripts blocked will still be unable to access
152
	    IndexedDB.
153
	  </p>
154
	  <p>
155
	    Alternatively, you can open Haketilo's settings in a separate,
156
	    non-private window. The configuration you make there will take
157
	    effect on pages opened in Private Browsing mode as well.
158
	  </p>
159
	</div>
160
#ENDIF
161
    </div>
162
    <div id="main_view" class="hide">
163
      <ul id="tab_heads">
164
	<li id="blocking_head"> Blocking </li>
165
	<li id="mappings_head"> Mappings </li>
166
	<li id="resources_head"> Resources </li>
167
	<li id="new_payload_head" class="active_head"> New payload </li>
168
	<li id="repos_head"> Repositories </li>
169
      </ul>
170
      <div id="top_menu_line" class="top_line"></div>
171
      <div id="blocking_tab" class="tab">
172
	<div id="blocking_editable_container" class="grid_2">
173
	  <div id="blocking_list_container">
174
	    <h3>Block scripts on</h3>
175
	  </div>
176
	  <div id="allowing_list_container">
177
	    <h3>Allow scripts on</h3>
178
	  </div>
179
	  <div id="default_policy_dialog" class="grid_col_both text_center">
180
#INCLUDE html/default_blocking_policy.html
181
	  </div>
182
	</div>
183
	<div id="blocking_dialog_container" class="hide"></div>
184
      </div>
185
      <div id="mappings_tab" class="tab"></div>
186
      <div id="resources_tab" class="tab"></div>
187
      <div id="new_payload_tab" class="tab active_tab"></div>
188
      <div id="repos_tab" class="tab">
189
	<div id="repos_list_container"></div>
190
	<div id="repos_dialog_container" class="hide"></div>
191
      </div>
192
    </div>
193
#LOADJS html/settings.js
194
  </body>
195
</html>
(24-24/27)