Gitiles
Code Review Sign In
gerrit.avm99963.com / delefme-covid-tracability / main / 5c866a1377e721ac28f0f2de4a9cd540e459ffe5 / . / nova-ui.html
blob: 4a3caf89204ddb50e5a236a893c8002c65c3bf13 [file] [log] [blame]
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]1<!DOCTYPE html>
2<html lang="ca">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <!-- Load Jquery -->
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8
9 <style>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]10 body {
11 background-color: lightgray;
12 }
13
14 #outter-container {
15 margin: 40px 20px;
16 }
17
18 #inner-container {
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]19 width: 80%;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]20 background-color: white;
21 padding: 50px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]22 margin: 0 auto;
23 }
24
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]25 .label, .final {
26 font-size: 36px;
27 }
28
29 .final {
30 color: gray;
31 }
32
33 section {
34 padding: 10px 0;
35 }
36
37 .container {
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]38 /* flexbox setup */
39 display: -webkit-flex;
40 -webkit-flex-direction: row;
41
42 display: flex;
43 flex-direction: row;
44 flex-wrap: wrap;
45
46 justify-content: center;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]47 align-items : center;
48
49 height: 75vh;
50 overflow-y: auto;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]51 }
52
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]53 .button {
54 border: solid 2px #26bdff;
55 color: black;
56 font-size: 5vw;
57
58 flex: 1 0 20%;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]59 margin: 20px;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]60 padding: 40px 20px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]61
62 vertical-align: middle;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]63 text-align: center;
64 }
65
66 .selected {
67 background-color: #c3ddff;
68 }
69
70 #subject-container .button {
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]71 text-align: left;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]72 flex: 1 0 20%;
73 height: auto;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]74 }
75
76 .current-subject .title {
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]77 font-size: 18px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]78 }
79 .current-subject .subtitle {
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]80 font-size: 14px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]81 }
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]82
83 #send-button {
84 font-size: 48px;
85 width: 80%;
86 margin: 0 auto;
87 display: block;
88 margin-top: 50px;
89 padding: 50px 30px;
90 background-color: #26bdff;
91 color: white;
92 }
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]93 </style>
94 </head>
95
96 <body>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]97 <div id="outter-container">
98 <div id="inner-container">
99 <section id="subject-section">
100 <div class="showhide">
101 <span id="subject-label" class="label">Assignatura (Aula):</span>
102 <span id="subject-final" class="final"></span>
103 </div>
104 <div id="subject-container" class="container">
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]105 <div class="current-subject button" id="subject-1" onclick="js:clickButton(this.parentNode.id, this.id)">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]106 <div class="title">Àlgebra Lineal</div>
107 <div class="subtitle">Aula 001</div>
108 <div class="subtitle">9.00 - 10.00</div>
109 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]110 <div class="current-subject button" id="subject-2">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]111 <div class="title">Àlgebra Lineal</div>
112 <div class="subtitle">Aula 001</div>
113 <div class="subtitle">9.00 - 10.00</div>
114 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]115 <div class="current-subject button" id="subject-3">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]116 <div class="title">Àlgebra Lineal</div>
117 <div class="subtitle">Aula 001</div>
118 <div class="subtitle">9.00 - 10.00</div>
119 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]120 <div class="current-subject button" id="subject-4">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]121 <div class="title">Àlgebra Lineal</div>
122 <div class="subtitle">Aula 001</div>
123 <div class="subtitle">9.00 - 10.00</div>
124 </div>
125 </div>
126 </section>
127 <section id="number-section">
128 <div class="showhide">
129 <span id="number-label" class="label">Número de seient:</span>
130 <span id="number-final" class="final"></span>
131 </div>
132 <div id="number-container" class="container">
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]133 <div class="number button" id="number-1">1</div>
134 <div class="number button" id="number-2">2</div>
135 <div class="number button" id="number-3">3</div>
136 <div class="number button" id="number-4">4</div>
137 <div class="number button" id="number-5">5</div>
138 <div class="number button" id="number-6">6</div>
139 <div class="number button" id="number-7">7</div>
140 <div class="number button" id="number-8">8</div>
141 <div class="number button" id="number-9">9</div>
142 <div class="number button" id="number-10">10</div>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]143 </div>
144 </section>
145 <section id="letter-section">
146 <div class="showhide">
147 <span id="letter-label" class="label">Lletra de seient:</span>
148 <span id="letter-final" class="final"></span>
149 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]150 <div id="letter-container" class="container">
151 <div class="letter button" id="letter-A">A</div>
152 <div class="letter button" id="letter-B">B</div>
153 <div class="letter button" id="letter-C">C</div>
154 <div class="letter button" id="letter-D">D</div>
155 <div class="letter button" id="letter-E">E</div>
156 <div class="letter button" id="letter-F">F</div>
157 <div class="letter button" id="letter-G">G</div>
158 <div class="letter button" id="letter-H">H</div>
159 <div class="letter button" id="letter-I">I</div>
160 <div class="letter button" id="letter-J">J</div>
161 <div class="letter button" id="letter-K">K</div>
162 <div class="letter button" id="letter-L">L</div>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]163 </div>
164 </section>
165 <section id="date-section">
166 <div class="showhide">
167 <span id="date-label" class="label">Data:</span>
168 <span id="date-final" class="final">16/01/2020</span>
169 </div>
170 </section>
171 <section id="hour-section">
172 <div class="showhide">
173 <span id="hour-label" class="label">Hora:</span>
174 <span id="hour-final" class="final">09.00 - 10.00</span>
175 </div>
176 </section>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]177 <button id="send-button">
178 <span>Anar al formulari</span>
179 </button>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]180 </div>
181 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame^]182
183 <script>
184 var subjects_texts = {
185 "subject-1": "Àlgebra",
186 "subject-2": "Càlcul I",
187 "subject-3": "Topologia",
188 "subject-4": "Informàtica"
189 };
190
191 var elements = document.getElementsByClassName("button");
192 Array.from(elements).forEach(function(element) {
193 element.addEventListener('click', clickButton);
194 element.parent = element.parentNode.id;
195 console.log(element.id);
196 });
197
198 function clickButton(element) {
199 var parent = element.currentTarget.parent;
200 var id = element.currentTarget.id;
201 var final_text = (id.split("-")[0] == "subject" ? subjects_texts[id] : id.split("-")[1]);
202
203 console.log(parent);
204 console.log(id);
205
206 if (parent == "subject-container") {
207 // Canvi de background del button
208 $(".current-subject").css("background-color", "white");
209 $("#" + id).css("background-color", "#c3ddff");
210 // Canvi del text al final
211 $("#" + parent).parent().find(".final").html(final_text);
212 // Canvi JSON
213 // TODO
214 // Anchor següent pregunta
215 document.getElementById("number-section").scrollIntoView();
216 } else if (parent == "number-container") {
217 // Canvi de background del button
218 $(".number").css("background-color", "white");
219 $("#" + id).css("background-color", "#c3ddff");
220 // Canvi del text al final
221 $("#" + parent).parent().find(".final").html(final_text);
222 // Canvi JSON
223 // TODO
224 // Anchor següent pregunta
225 document.getElementById("letter-section").scrollIntoView();
226 } else if (parent == "letter-container") {
227 // Canvi de background del button
228 $(".letter").css("background-color", "white");
229 $("#" + id).css("background-color", "#c3ddff");
230 // Canvi del text al final
231 $("#" + parent).parent().find(".final").html(final_text);
232 // Canvi JSON
233 // TODO
234 // Anchor següent pregunta
235 document.getElementById("send-button").scrollIntoView();
236 }
237 }
238 </script>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]239 </body>
240</html>