Gitiles
Code Review Sign In
gerrit.avm99963.com / delefme-covid-tracability / main / 0062c1cef337624a869f1574faa503620d365ac8 / . / nova-ui.html
blob: 95e0e2b30d20f66611d770c6de20df375e827309 [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 }
82 </style>
83 </head>
84
85 <body>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame^]86 <div id="outter-container">
87 <div id="inner-container">
88 <section id="subject-section">
89 <div class="showhide">
90 <span id="subject-label" class="label">Assignatura (Aula):</span>
91 <span id="subject-final" class="final"></span>
92 </div>
93 <div id="subject-container" class="container">
94 <div class="current-subject button">
95 <div class="title">Àlgebra Lineal</div>
96 <div class="subtitle">Aula 001</div>
97 <div class="subtitle">9.00 - 10.00</div>
98 </div>
99 <div class="current-subject button">
100 <div class="title">Àlgebra Lineal</div>
101 <div class="subtitle">Aula 001</div>
102 <div class="subtitle">9.00 - 10.00</div>
103 </div>
104 <div class="current-subject button">
105 <div class="title">Àlgebra Lineal</div>
106 <div class="subtitle">Aula 001</div>
107 <div class="subtitle">9.00 - 10.00</div>
108 </div>
109 <div class="current-subject button">
110 <div class="title">Àlgebra Lineal</div>
111 <div class="subtitle">Aula 001</div>
112 <div class="subtitle">9.00 - 10.00</div>
113 </div>
114 </div>
115 </section>
116 <section id="number-section">
117 <div class="showhide">
118 <span id="number-label" class="label">Número de seient:</span>
119 <span id="number-final" class="final"></span>
120 </div>
121 <div id="number-container" class="container">
122 <div class="number button">1</div>
123 <div class="number button">2</div>
124 <div class="number button">3</div>
125 <div class="number button">4</div>
126 <div class="number button">5</div>
127 <div class="number button">6</div>
128 <div class="number button">7</div>
129 <div class="number button">8</div>
130 <div class="number button">9</div>
131 <div class="number button">10</div>
132 </div>
133 </section>
134 <section id="letter-section">
135 <div class="showhide">
136 <span id="letter-label" class="label">Lletra de seient:</span>
137 <span id="letter-final" class="final"></span>
138 </div>
139 <div id="leter-container" class="container">
140 <div class="letter button">A</div>
141 <div class="letter button">B</div>
142 <div class="letter button">C</div>
143 <div class="letter button">D</div>
144 <div class="letter button">E</div>
145 <div class="letter button">F</div>
146 <div class="letter button">G</div>
147 <div class="letter button">H</div>
148 <div class="letter button">I</div>
149 <div class="letter button">J</div>
150 <div class="letter button">K</div>
151 <div class="letter button">L</div>
152 </div>
153 </section>
154 <section id="date-section">
155 <div class="showhide">
156 <span id="date-label" class="label">Data:</span>
157 <span id="date-final" class="final">16/01/2020</span>
158 </div>
159 </section>
160 <section id="hour-section">
161 <div class="showhide">
162 <span id="hour-label" class="label">Hora:</span>
163 <span id="hour-final" class="final">09.00 - 10.00</span>
164 </div>
165 </section>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]166 </div>
167 </div>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]168 </body>
169</html>