-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (106 loc) · 5.46 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="secundario.css">
<link rel="icon" type="image/x-icon" href="./img/icons8-sun-color-32.png" />
<script type="module" src="./index_def.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<title> HELIOS</title>
</head>
<body>
<div class="container" id="container">
<header id="header">
<h1 id="HELIOS">☀️ HELIOS ☀️</h1>
<span id="info-text" style="display: none;">
<b>HELIOS</b> es una aplicación web que permite al pasajero usuario de un vehículo saber en qué lado del mismo debe sentarse durante el trayecto para evitar el sol o la sombra, según su preferencia. Para ello, el usuario debe introducir la fecha y hora de salida y llegada, así como la localidad y país de origen y destino.
</span>
</header>
<main>
<form id="formulario">
<div class="form-group">
<label for="sun">Preferencia:</label>
<select id="sun">
<option name="sun" value=false>Sombra</option>
<option name="sun" value=true>Sol</option>
</select>
</div>
<div class="form-group">
<label for="cambio">¿Puedes cambiar de asiento una vez comenzado el viaje?:</label>
<select id="cambio">
<option name="cambio" value=false>No</option>
<option name="cambio" value=true>Sí</option>
</select>
</div>
<div class="form-group">
<label for="local">¿Quieres los resultados en hora local?:</label>
<small class="small">(Se entiende que en ese caso tu reloj se ajusta automáticamente)</small>
<select id="local">
<option name="reloj" value=false>No</option>
<option name="reloj" value=true>Sí</option>
</select>
</div>
<div class="form-group">
<label for="diasalida">Fecha de salida</label>
<input id="diasalida" type="date" name="diasalida">
</div>
<div class="form-group">
<label for="horasalida">Hora de salida</label>
<div class="time-inputs">
<input class="hora" id="horasalida" type="number" min="0" max="23" name="horaSalida" placeholder="23">
<label for="minutosalida">:</label>
<input class="hora" id="minutosalida" type="number" min="0" max="59" name="minutoSalida" placeholder="59">
</div>
</div>
<div class="form-group">
<label for="diallegada">Fecha de llegada</label>
<input id="diallegada" type="date" name="diallegada">
</div>
<div class="form-group">
<label for="horallegada">Hora de llegada</label>
<div class="time-inputs">
<input class="hora" id="horallegada" type="number" min="0" max="23" name="horaLlegada" placeholder="23">
<label for="minutollegada">:</label>
<input class="hora" id="minutollegada" type="number" min="0" max="59" name="minutoLlegada" placeholder="59">
</div>
</div>
<div class="form-group">
<label for="paisOrigen">¿De qué país sales?</label>
<select id="paisOrigen"></select>
</div>
<div class="form-group">
<label for="origen">¿De qué localidad sales?</label>
<input id="origen" type="text" name="origen" placeholder="p.ej: Coria del Río">
</div>
<div class="form-group">
<label for="paisDestino">¿A qué país vas?</label>
<select id="paisDestino"></select>
</div>
<div class="form-group">
<label for="destino">¿A qué localidad vas?</label>
<input id="destino" type="text" name="destino" placeholder="p.ej: Tokio">
</div>
<div class="form-group button-group">
<button id="submit" type="submit">Enviar</button>
<button id="reset" type="button">Borrar</button>
</div>
</form>
<div id="render"></div>
</main>
<footer id="footer">
<a href="https://github.com/V3RNE42/helios-seat-picker">
Web de Julio Cabanillas
</a>
</footer>
</div>
<div class="color-toggle-container">
<button id="color-toggle" class="color-toggle" >🌙</button>
<button id="camera" class="color-toggle" style="display:none;">📷</button>
</div>
</body>
</html>