-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
212 lines (204 loc) · 8.32 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>HCI project</title>
<style>
#Personas{
display:flex;
flex-direction:column;
}#Personas h2{margin:0 0 10px 0;}
.persona{
background-color: var(--div);
border-radius: 10px;
margin:10px;
padding:10px
}
.persona span{
color:var(--txt2);
}
table{
width:100%;
border-spacing: 5px;
padding:5px;
}
td{
vertical-align: top;
padding:5px;
}
td:first-child {
font-weight: bold;
text-align: right;
color:var(--txt2);
}
td:last-child{
background-color:var(--div2);
}
.portrait{
border:10px solid var(--border);
margin-left:auto;
margin-right:auto;
width:100px;
}
.figure{
box-sizing: border-box;
margin:5px;
width:100%;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
user-select: none;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<script>
const root = document.querySelector(':root');
const colors = {
'dark':{
'bg':'#222222',
'txt':'#dddddd',
'div':'#333333',
'border':'#444444'
},
'light':{
'bg':'#eeeeee',
'txt':'#333333',
'div':'#dddddd',
'border':'#cccccc'
},
'custom':{
'bg':'#eeeeee',
'txt':'#333333',
'div':'#dddddd',
'border':'#cccccc'
}
}
function updateColors(){
console.log('UPDATE COLORS');
update('bg');
update('txt');
update('div');
update('border');
custom();
}
function update(input){
let value = document.getElementById(input).value.trim();
if (value != ''){
colors['custom'][input] = '#' + document.getElementById(input).value
}
}
function show(id) {
//shows element it is given
console.log('SHOW ' + id);
document.getElementById(id).style.display = "block";
}
function hide(id) {
console.log('HIDE ' + id);
//hides element it is given
document.getElementById(id).style.display = "none";
}
function showhide(id) {
//hides or shows element it is given based on its current state
var display = document.getElementById(id).style.display;
if (display == "none") {
show(id);
} else {
hide(id);
}
}
function dark_mode(){
console.log('DARK MODE');
document.getElementById('dkm').style.backgroundColor = "#222222";
document.getElementById('hcm').style.backgroundColor = "#dddddd";
document.getElementById('csm').style.backgroundColor = "#dddddd";
change_colors("dark");
}
function high_contrast(){
console.log('LIGHT MODE');
document.getElementById('dkm').style.backgroundColor = "#dddddd";
document.getElementById('hcm').style.backgroundColor = "#222222";
document.getElementById('csm').style.backgroundColor = "#dddddd";
change_colors("light");
}
function custom(){
console.log('CUSTOM MODE');
document.getElementById('dkm').style.backgroundColor = "#dddddd";
document.getElementById('hcm').style.backgroundColor = "#dddddd";
document.getElementById('csm').style.backgroundColor = "#222222";
change_colors("custom");
}
function change_colors(mode){
console.log('CHANGE COLORS ' + mode);
root.style.setProperty('--bg', colors[mode]['bg'])
root.style.setProperty('--txt', colors[mode]['txt'])
root.style.setProperty('--div', colors[mode]['div'])
root.style.setProperty('--border', colors[mode]['border'])
}
// set css variable
root.style.setProperty('--my-color', 'blue');
</script>
</head>
<body>
<div id="extension-icon" onclick="showhide('extension-popup')">
<div class="icon" ><span class="material-symbols-outlined">
nightlight
</span>
</div>
</div>
<div id="extension-popup" style="display:none">
<ul>
<li><button style="background-color:#222222" id="dkm" onclick="dark_mode()"></button>Dark Mode</li>
<li><button id="hcm" onclick="high_contrast()"></button>High Contrast Mode</li>
<li><button id="csm" onclick="custom()"></button>Custom Colors</li>
<li>custom colors:</li>
<li><label for="bg">background</label>
<input type="text" id="bg" name="bg" required minlength="2" maxlength="8" size="10" /></li>
<li><label for="txt">text</label>
<input type="text" id="txt" name="txt" required minlength="2" maxlength="8" size="10" /></li>
<li><label for="div">container</label>
<input type="text" id="div" name="div" required minlength="2" maxlength="8" size="10" /></li>
<li><label for="border">border</label>
<input type="text" id="border" name="border" required minlength="2" maxlength="8" size="10" /></li>
<li><div id="custom_submit" onclick="updateColors()">submit</div></li>
</ul>
</div>
<div id="container">
<h1>Suspendisse Vel Nulla Vehicula</h1>
<section id="problem">
<h2>Duis Sed Sapien:</h2>
<div class="wrapper">
<div>
Cras luctus felis a commodo congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur nec vehicula purus, suscipit ullamcorper nisl. Aliquam ex eros, rhoncus vitae est in, ultricies euismod ipsum. Etiam velit orci, dapibus ut nisl eu, tincidunt tincidunt libero. Nulla gravida aliquam nunc, eget hendrerit massa vestibulum vitae. Donec at enim sit amet neque pulvinar interdum eu non purus. Aliquam ac cursus nisi, tincidunt ultricies quam. Phasellus ornare sodales hendrerit. Etiam quis volutpat arcu, nec congue ipsum. Fusce ultrices lectus pharetra tristique tempor. Duis vel commodo velit, accumsan tempor risus. Vivamus nec augue felis. In rutrum viverra eleifend. Mauris eleifend luctus porta. Quisque a semper justo. Vivamus rutrum mauris ac cursus ornare. Donec.
</div>
<div style="border:none;">
<img class="figure" src="images/chart1.png">
<p>fig.1</p>
<img class="figure" src="images/chart2.png">
<p>fig.2</p>
</div>
</div><!--wrapper-->
</section><!--problem-->
<section id="diagram">
<h2>Vehicula:</h2>
<div style="margin:10px">
<img src="images/diagram.png" style="width:100%;border-radius:20px;background-color:white;">
</div>
</section><!--diagram-->
<section id="scenario">
<h2>Etiam Varius Leo:</h2>
<div class="wrapper">
<div>
Sed malesuada accumsan pulvinar. Vestibulum cursus nulla commodo nisl tincidunt, eu egestas urna bibendum. Nunc eu libero vitae libero laoreet ornare. Suspendisse vitae elementum lorem. Nam porttitor tincidunt lorem a vehicula. Donec maximus faucibus efficitur. Phasellus et blandit arcu. Suspendisse vel elit tristique, malesuada felis et, venenatis ligula. Nunc sit amet orci nunc. Donec placerat efficitur tempus. Pellentesque vitae semper sem. Sed a lacus a justo efficitur egestas. Curabitur ornare metus nibh, et suscipit augue viverra finibus. Suspendisse potenti. Nunc quam dui, hendrerit at pulvinar a, auctor ornare lorem. Integer sed diam massa.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras a nisi cursus, ultrices urna consectetur, lacinia dui. Aliquam interdum enim non imperdiet molestie. Cras et dui at nisl venenatis sodales dapibus non metus. Sed venenatis finibus orci eget venenatis. Mauris mollis augue a massa mollis lacinia. Aenean lectus erat, hendrerit vel nisl vitae, porttitor ornare nisi. Mauris gravida tincidunt dolor faucibus pulvinar. Vivamus tempor quam nec nibh aliquet, ac facilisis ligula aliquet. Pellentesque eget est non sapien suscipit porta. Duis maximus odio vitae lorem viverra eleifend. </div>
</div><!--wrapper-->
</section><!--scenario-->
</div><!--container-->
</body>
</html>