-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdashboardSonno.html
111 lines (102 loc) · 5.58 KB
/
dashboardSonno.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
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>L.I.F.E | Dashboard Sonno</title>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Style nostri -->
<link rel="stylesheet" href="styles/general.css">
<link rel="stylesheet" href="styles/dashboard.css">
<link rel="stylesheet" href="styles/sonno.css">
<!-- import scripts -->
<script src="scripts/importHeaderNavbar.js"></script> <!-- Importa la Navbar e la Headbar -->
<script src="scripts/caricaJSON.js"></script>
<script src="scripts/utils.js"></script>
</head>
<body>
<!--INIZIO CONTAINER PRINCIPALE-->
<div class="container custom-container mt-5 px-md-5">
<!--TITOLO PAGINA -->
<div class="row mb-4 align-items-center">
<div class="col-12 col-md-9">
<h1 class="titoloPagina fw-bold">SONNO</h1>
</div>
<div class="col-12 col-md-3 text-right pb-1">
<button class="bottoneConsigliami bottonePersonalizzato px-4 py-1 mb-2 text-center fw-bold"
id="consigliamiBtn"><i class="bi bi-lightbulb-fill"></i> Consigliami</button>
</div>
<!-- INIZIO CONSIGLIO -->
<div class="pannelloAggiungiDato p-4 background-light mt-2 mb-3 consiglioAlert" id="consiglioAlert">
<b>Consiglio: </b><span id="textConsiglio">A simple warning alert—check it out!</span>
</div>
<!-- FINE CONSIGLIO -->
<!-- INIZIO PANNELLO SONNO -->
<div id="pannelloSonno mb-4">
<div class="sottotitoloCategoria d-flex justify-content-left">
<h4 class="fw-bold me-4">Ore di sonno</h4>
<button class="bottoneApriPannelloAggiungi bottonePersonalizzato px-4 py-1 mb-1 text-center fw-bold"
id="bottoneApriPannelloAggiungiSonno"><i class="bi bi-plus-lg"></i> Aggiungi</button>
</div>
<!-- INIZIO FORM AGGIUNTA ORE DI SONNO -->
<div class="pannelloAggiungiDato p-4 background-light mt-2 mb-3" id="pannelloAggiungiSonno">
<button class="bottoneChiudiDesktop position-absolute fw-bold" id="bottoneChiudiDesktopSonno"><i
class="bi bi-x fw-bold"></i></button><!-- BOTTONE PER DESKTOP -->
<h4 class="titoloPannelloAggiungiDato fw-bold d-flex"> <button class="bottoneChiudiMobile fw-bold"
id="bottoneChiudiMobileSonno"><i class="bi bi-chevron-left fw-bold"></i></button> Aggiungi
ore
di sonno
</h4>
<form class="row g-3" id="formAggiungiSonno">
<div class="col-auto">
<label for="aggiungiOreSonnoInput" class="form-label">Ore di Sonno</label>
<input type="number" class="form-control" id="aggiungiOreSonnoInput"
placeholder="Inserisci le ore di sonno" min="0" step="0.5">
</div>
<div class="col-auto align-self-end">
<button type="button" class="bottonePersonalizzato px-4 py-1 mb-1 text-center fw-bold"
id="btnAggiungiOreSonno">Invia</button>
</div>
</form>
</div>
<div id="pannelloDashboard mb-4">
<!-- Grafico Sonno -->
<div class="row mb-3 mt-3">
<!-- Crea un canvas per il grafico -->
<div class="col-12">
<div class="card">
<div class="card-body text-left">
<h5 class="card-title text-muted">Andamento Sonno</h5>
<div class="d-inline-block d-block d-flex">
<i class="fa-solid fa-moon fs-3"></i>
<h3 class="mb-1 fw-bold" id="mediaSonno"></h3>
</div>
<hr>
<div class="d-flex justify-content-center align-items-center">
<canvas id="graficoSonno" height="80"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- Resoconto Settimanale con scrollbar -->
<div class="row mt-4">
<div class="sottotitoloCategoria d-flex justify-content-left">
<h4 class="fw-bold me-4">Ultima settimana</h4>
</div>
<div class="col-12">
<div class="card-container d-flex mt-3" id="resocontoSettimanale">
<!-- Qui vengono inserite dinamicamente le card quadrate -->
</div>
</div>
</div>
</div>
<!-- FINE PANNELLO SONNO -->
</div>
<!--FINE CONTAINER PRINCIPALE-->
</body>
<script src="scripts/gestioneUtente.js"></script>
<script src="scripts/gestioneSonno.js"></script>
<script src="scripts/consiglio.js"></script>
</html>