-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (112 loc) · 5.62 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="fr">
<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>Sleep Plan App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png" />
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body class="main">
<header>
<nav class="navbar">
<ul class="flex">
<li class="p-6"><a class="hov block text-gray-400" href="index.html">Sleep Plan</a></li>
<li class="p-6"><a class="hov block text-gray-400" href="more.html">En savoir plus</a></li>
</ul>
</nav>
</header>
<section class="section">
<div class="container title">
<h1 class="has-text-centered"> Sleep<i class="is-size-2 has-text-warning fas fa-moon"></i>Plan</h1>
</div>
<div class="container">
<form id="sleepform">
<!-- Error message -->
<div id="msg"></div>
<div class="field">
<label class="label" for="wakeup">Se lever à : </label>
<div class="control has-icons-left">
<input required class="input is-medium" type="time" id="wakeup" name="wakeup" value="06:00">
<span class="icon is-left"><i class="far fa-clock"></i></span>
</div>
</div>
<div class="field">
<label class="label" for="sleeptime">Heures de sommeil souhaitées : </label>
<div class="control has-icons-left">
<div class="select is-fullwidth is-medium">
<select id="sleeptime" name="sleeptime" placeholder="Sélectionnez votre temps" required>
<option value="" disabled selected="selected">Sélectionner une option</option>
<option value="03:00:2">3h</option>
<option value="04:30:3">4h</option>
<option value="04:30:3">5h</option>
<option value="06:00:4">6h</option>
<option value="07:30:5">7h</option>
<option value="07:30:5">8h</option>
<option value="09:00:6">9h</option>
<option value="10:30:7">10h</option>
</select>
</div>
<div class="icon is-left">
<i class="fas fa-bed"></i>
</div>
</div>
</div>
<div class="warning notification is-warning" style="display:none">
<p><i class="fas fa-exclamation-triangle"></i> Se contenter de 6h de sommeil par nuit peut avoir un effet
négatif sur votre santé. Une vraie <em>bonne nuit de sommeil</em> doit durer en moyenne 5-6 cycles
(7h30-9h00) pour un adulte. <br />
<span><a
href="https://www.sleepfoundation.org/sites/default/files/2018-10/NSF_sleep_duration_recommendations_chart.png">Source</a></span>
</p>
</div>
<div class="danger notification is-danger" style="display:none">
<p><i class="fas fa-exclamation-circle"></i> Dormir moins de 6h (4 cycles de sommeil) est
<strong>dévastateur</strong> pour votre santé générale et votre espérance de vie quel que soit votre âge.
Une <em>bonne nuit de sommeil</em> devrait durer au minimum 5-6 cycles (7h30-9h00). <br />
<span><a
href="https://www.sleepfoundation.org/sites/default/files/2018-10/NSF_sleep_duration_recommendations_chart.png">Source</a></span>
</p>
</div>
<div class="has-text-centered">
<input class="button is-large" type="submit" value="Calculer">
</div>
</form>
</div>
</section>
<section class="container">
<article id="result" class="message slide-in-bottom" style="display:none">
<div class="message-header is-size-4-desktop">
<p>Pour optimiser votre nuit :</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body is-size-5-desktop">
<p>📱 Eteignez vos écrans et tamisez les lumières autour de <i class="fas fa-clock"></i> <span id="screens"
class="time"></span>.<br />
💡 Eteignez la lumière et mettez-vous au lit à <i class="fas fa-clock"></i> <span id="lights"
class="time"></span>.<br />
Vous devriez vous endormir vers <i class="fas fa-clock"></i> <span id="zzz" class="time"></span> et vous
dormirez <span id="hoursofsleep"></span>, soit <span class="time" id="cycles"></span> cycles de sommeil.</p>
<p class="avis"><i class="fas fa-exclamation-triangle"></i> Ce test à valeur indicative se base sur des
approximations de durée de cycle de sommeil (~90 minutes) et de durée d'endormissement (~30 minutes). Il ne
remplace en aucun cas un avis médical. Vous êtes vivement encouragé.e à faire vos propres recherches. <a
href="more.html">Par où commencer ?</a></p>
</div>
</article>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
Made with ❤ in Switzerland<br />
Mis en page avec <a href="https://bulma.io/">Bulma</a> <a href=""></a> - Icônes : <a href="https://fontawesome.com/">Font Awesome</a> - Animations : <a href="http://animista.net">Animista</a><br />
<a href="https://github.com/DonPascualino/sleep-plan"><i class="fab fa-github"></i> Code source</a>
</p>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>