Project

General

Profile

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

haketilo / html / settings.html @ 57ce414c

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
      /* Style top menu items. */
39
      #tab_heads>* {
40
	  background-color: #70AF70;
41
	  font-size: 115%;
42
	  padding: 0.6em;
43
	  display: inline-block;
44
	  cursor: pointer;
45
	  margin: 0.25em 0 0 0;
46
      }
47
      body {
48
	  /* 0.25em margin + 1em height + 2*0.6em padding, multiple font size */
49
	  --heading-height: calc(2.45em * 1.15);
50
	  --tab-content-height: calc(100vh - var(--heading-height));
51
      }
52
      #tab_heads>:hover {
53
	  box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
54
      }
55
      #tab_heads>.active_head {
56
	  background-color: #65A065;
57
	  color: #222;
58
	  box-shadow: none;
59
	  cursor: default;
60
      }
61

    
62
      /* Style the top menu itself. */
63
      #tab_heads {
64
	  -moz-user-select: none;
65
	  user-select: none;
66
	  background-color: #e0e0e0;
67
      }
68
      #top_menu_line {
69
	  position: absolute;
70
	  width: 100vw;
71
	  z-index: 1;
72
      }
73

    
74
      /* Style content */
75
      body {
76
	  --content-max-width: 1000px;
77
	  height: 100vh;
78
	  overflow-x: hidden;
79
	  overflow-y: hidden;
80
      }
81
      div.tab {
82
	  display: none;
83
      }
84
      div.tab.active_tab {
85
	  display: block;
86
      }
87

    
88
      /* Style the Script blocking and Repositories tabs. */
89
      #blocking_list_container, #allowing_list_container,
90
      #default_policy_dialog, #blocking_dialog_container,
91
      #repos_list_container, #repos_dialog_container {
92
	  padding: 0.8em 0.4em 0.4em 0.4em;
93
      }
94
      #blocking_editable_container, #blocking_dialog_container,
95
      #repos_list_container, #repos_dialog_container {
96
	  max-width: var(--content-max-width);
97
	  margin: 0 auto;
98
      }
99
      #blocking_editable_container {
100
	  /* Leave space for default policy dialog and headings. */
101
	  --content-height: calc(var(--tab-content-height) - 3em);
102
      }
103

    
104
      /* Pass height information to html in all tabs. */
105
      .tab {
106
	  --content-height: var(--tab-content-height);
107
      }
108
    </style>
109
  </head>
110
  <body>
111
    <!-- Those contain just templates, we can include them at the top -->
112
#INCLUDE html/dialog.html
113
#INCLUDE html/item_list.html
114
#INCLUDE html/item_preview.html
115
#INCLUDE html/text_entry_list.html
116
#INCLUDE html/payload_create.html
117
    <ul id="tab_heads">
118
      <li id="blocking_head"> Blocking </li>
119
      <li id="mappings_head"> Mappings </li>
120
      <li id="resources_head"> Resources </li>
121
      <li id="new_payload_head" class="active_head"> New payload </li>
122
      <li id="repos_head"> Repositories </li>
123
    </ul>
124
    <div id="top_menu_line" class="top_line"></div>
125
    <div id="blocking_tab" class="tab">
126
      <div id="blocking_editable_container" class="grid_2">
127
	<div id="blocking_list_container">
128
	  <h3>Block scripts on</h3>
129
	</div>
130
	<div id="allowing_list_container">
131
	  <h3>Allow scripts on</h3>
132
	</div>
133
	<div id="default_policy_dialog" class="grid_col_both text_center">
134
#INCLUDE html/default_blocking_policy.html
135
	</div>
136
      </div>
137
      <div id="blocking_dialog_container" class="hide"></div>
138
    </div>
139
    <div id="mappings_tab" class="tab"></div>
140
    <div id="resources_tab" class="tab"></div>
141
    <div id="new_payload_tab" class="tab active_tab"></div>
142
    <div id="repos_tab" class="tab">
143
      <div id="repos_list_container"></div>
144
      <div id="repos_dialog_container" class="hide"></div>
145
    </div>
146
#LOADJS html/settings.js
147
  </body>
148
</html>
(24-24/27)