-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (152 loc) · 6.98 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="fr">
<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="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;900&display=swap" rel="stylesheet">
<script defer src="./script.js"></script>
<link rel="icon" href="/svg/terre.png" />
<title>Planetary Rhythms : HeartSync</title>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QHW87M57FJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QHW87M57FJ');
</script>
<body id="body" class="bodyGuide overflowHidden">
<!--
(ﾉ ◕ ヮ ◕)ﾉ
-->
<header id="header">
<nav>
<span id="nav">
<section class="navFlex">
<a>Theme</a>
<select name="" id="planet">
<option value="1">Veuillez choisir</option>
<option value="1">Soleil</option>
<option value="2">Lune</option>
<option value="3">Terre</option>
<option value="4">Jupiter</option>
<option value="5">Mars</option>
<option value="6">Venus</option>
</select>
</section>
<section class="navFlex">
<a>Rythme</a>
<select name="" id="rythme">
<option value="0">Veuillez choisir</option>
<option value="1">6/4</option>
<option value="2">5/5</option>
<option value="3">4/6</option>
<option value="4">3/7</option>
</select>
</section>
<section class="navFlex">
<a>Audio</a>
<select name="" id="sound">
<option value="0">Veuillez choisir</option>
<option value="1">Audio mute </option>
<option value="2">Ambient dream</option>
<option value="3">Lunar wind</option>
<option value="4">City of the future</option>
<option value="5">Spaceship ambience</option>
<option value="6">The ice fields voyager</option>
</select>
</section>
<section class="navFlex">
<a>Timer</a>
<select name="" id="compteur">
<option value="0">Veuillez choisir</option>
<option value="1">1 minute</option>
<option value="2">2 minutes</option>
<option value="3">3 minutes</option>
<option value="4">4 minutes</option>
<option value="5">5 minutes</option>
</select>
</section>
<a style="cursor: pointer;" class="guidePush" target="_blank" href="https://www.linkedin.com/in/%F0%9F%A6%9A-jimmy-omont%F0%9F%A6%A9-141471166/">
<div>App By Jimmy</div>
</a>
</span>
<span class="hidden" id="nav2">
<button class="btnClose"> Fermer</button>
<p id="timer"></p>
<button id="pause">Audio pause</button>
<button id="play">Audio lecture</button>
<a style="cursor: pointer; " class="guidePush" target="_blank" href="https://www.linkedin.com/in/%F0%9F%A6%9A-jimmy-omont%F0%9F%A6%A9-141471166/">
<div>App By Jimmy</div>
</a>
</span>
<audio class="hidden" autoplay controls="controls" id="piste">
<source src="" />
</audio>
</header>
</nav>
<main id="mainContent">
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
<div id="etoile">
<div class="etoile-filante"></div>
<div class="etoile-filante"></div>
<div class="etoile-filante"></div>
</div>
<article class="navTitle">
<p id="end" class="hidden">Fin de la relaxation</p>
<img class="svg hidden" id="svg">
<img class="svg floatbis svgHidden" src="/svg/sun.png" id="svgView">
<article id="main">
<h1 class="float">Planetary Rhythms : HeartSync</h1>
<p>Avez vous choisi vos options ?</p>
<a id="btn" target="_blank">Alors démarrons la relaxation</a>
<p class="intro">Plongez dans un voyage intérieur captivant avec Planetary Rhythms : HeartSync. Explorez les
énergies
apaisantes des planètes et découvrez l'harmonie profonde entre votre cœur et l'univers qui vous entoure.
Laissez-vous guider par les rythmes célestes alors que votre respiration s' alignez-vous naturellement avec
les pulsations de l'espace. Avec HeartSync, trouvez l'équilibre, la tranquillité et la sérénité en harmonisant
votre cœur avec les mystères célestes</p>
<p class="intro">La cohérence cardiaque est une pratique qui vise à réguler et à synchroniser les battements du
cœur avec la
respiration.</p>
<p class="intro">Elle repose sur l'idée que lorsque notre respiration et notre rythme cardiaque sont en
harmonie, cela peut
favoriser un état de relaxation, de calme et de bien-être.</p>
<a id="guidePush">
<div class="guideFlex">Conseils d'utilisation <img src="./svg/aide.png" alt="button aide"></div>
</a>
</article>
</article>
</main>
<div id="guide" class=" hidden">
<p class="guide-subtitle">Étape 1 : Choix du thème visuel</p>
<p>Sélectionnez le thème de planète pour créer une ambiance relaxante et immersive.</p>
<p class="guide-subtitle">Étape 2 : Réglage des rythmes de respiration</p>
<p>La cohérence cardiaque est basée sur des rythmes de respiration spécifiques.Nous utilisons les rythmes suivants :
6/4, 5/5, 4/6 et 3/7. Ces chiffres représentent le temps en secondes pour l'inspiration et l'expiration. Par
exemple, 6/4 signifie une inspiration de 6 secondes suivie d'une expiration de 4 secondes.</p>
<p class="guide-subtitle">Étape 3 : Sélection des thèmes musicaux d'ambiance</p>
<p>La musique peut aider à créer une atmosphère relaxante lors de la pratique de la cohérence cardiaque. Choisissez
un thème musical d'ambiance qui correspondent à vos préférences.</p>
<p class="guide-subtitle">Étape 4 : Réglage du minuteur </p>
<p>Un minuteur est essentiel pour vous guider pendant votre séance de cohérence cardiaque. Dans cette application,
vous aurez pouvez régler le minuteur pour des durées de 1, 2, 3, 4 ou 5 minutes.</p>
<p class="guide-subtitle">Étape 5 : Utilisation </p>
<p>Observez attentivement l'animation de la planète. Lorsque la planète grossit, cela indique le temps
d'inspiration, et lorsque la planète se rétrécit, cela indique le temps de l'expiration. Essayez de maintenir un
rythme régulier en suivant les mouvements de la planète.</p>
<p>Relaxez-vous bien !</p>
<button class="btnGuide"> Fermer</button>
</div>
<footer>
<p class="hidden" id="counter"></p>
</footer>
</body>
</html>