-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (185 loc) · 9.5 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- POP APROPOS -->
<div class="pop">
<section>
<!-- TITLE -->
<article>
<span><img src="../calculateur/Images/icons8.png" style="border-radius:50%;" alt=""></span>
<span>
<h3>Travel calculator</h3>
</span>
</article>
<div>
<article>
<ion-icon name="close" id="close"></ion-icon>
</article>
</div>
<!-- DESCRIPTION -->
<article>
<p id="desc-1" class="content active">Bienvenue sur Travel Calculator, votre compagnon de voyage numérique dédié à rendre
chaque aventure aussi fluide que possible. Notre mission est de simplifier la planification de
voyage en mettant à votre disposition un outil intelligent et intuitif, conçu pour anticiper vos
besoins et vous offrir une expérience sans tracas.</p>
<p id="desc-2" class="content">Ce Que Nous Offrons <br>
Estimation Budgétaire Intelligente : Grâce à notre algorithme avancé, Travel Calculator évalue avec précision les coûts potentiels de votre voyage, vous permettant ainsi de planifier en toute confiance et d'éviter les surprises financières.
Gestion des Dépenses : Suivez et gérez vos dépenses en temps réel. Travel Calculator vous aide à rester dans votre budget en fournissant des mises à jour régulières sur vos coûts prévus et réels.
</p>
<p id="desc-3" class="content">Comment Ça Marche? <br>
Utiliser Travel Calculator est simple. Entrez vos préférences de voyage, votre budget, et laissez notre algorithme faire le reste. Nous mettons l'accent sur la convivialité et la transparence, vous permettant ainsi de prendre des décisions éclairées à chaque étape du processus. <br>
Merci de faire partie de la communauté Travel Calculator. Préparez-vous à explorer le monde sans soucis !
</p>
<p id="desc-4" class="content">Nous contacter <br>
Notre équipe dévouée est là pour répondre à toutes vos questions et écouter vos commentaires. Chez Travel Calculator, nous croyons en l'amélioration continue, et vos retours sont essentiels pour faire évoluer notre service. <br>
<a href="https://tojo-rasii.github.io/rasii-online/" target="_blank">Tojo-rasii.github.io</a>
</p>
</article>
<div class="pagination-slide" id="pagination-slide">
<a href="#" onclick="showContent('desc-1')"><span>1</span></a>
<a href="#" onclick="showContent('desc-2')"><span>2</span></a>
<a href="#" onclick="showContent('desc-3')"><span>3</span></a>
<a href="#" onclick="showContent('desc-4')"><span>4</span></a>
</div>
</section>
</div>
<main>
<div>
<fieldset>
<legend>
<span><img src="../calculateur/Images/icons8.png" style="border-radius:50%;" alt=""></span>
<span>
<h3>Travel calculator</h3>
</span>
<article>
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" id="svg"
height="40" viewBox="0,0,256,256">
<g fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<g transform="scale(2,2)">
<path
d="M64,6c-32,0 -58,26 -58,58c0,32 26,58 58,58c32,0 58,-26 58,-58c0,-32 -26,-58 -58,-58zM64,12c28.7,0 52,23.3 52,52c0,28.7 -23.3,52 -52,52c-28.7,0 -52,-23.3 -52,-52c0,-28.7 23.3,-52 52,-52zM64,30c-4.97056,0 -9,4.02944 -9,9c0,4.97056 4.02944,9 9,9c4.97056,0 9,-4.02944 9,-9c0,-4.97056 -4.02944,-9 -9,-9zM64,59c-5,0 -9,4 -9,9v24c0,5 4,9 9,9c5,0 9,-4 9,-9v-24c0,-5 -4,-9 -9,-9z">
</path>
</g>
</g>
</svg>
</article>
</legend>
<hr>
<form action="">
<!-- Main -->
<article>
<label for="">
<span>
<p>Nom</p>
</span>
<span id="input-border">
<ion-icon id="icon" name="person"></ion-icon>
<input type="text" id="name">
</span>
</label>
<label for="">
<span>
<p>Budget</p>
</span>
<span id="input-border">
<ion-icon id="icon" name="logo-euro"></ion-icon>
<input type="number" id="budget">
</span>
</label>
</article>
<article>
<label for="">
<span>
<p>Nombre de personne</p>
</span>
<span id="input-border">
<ion-icon id="icon" name="people"></ion-icon>
<input type="number" id="personne">
</span>
</label>
<label for="">
<span>
<p>Nombre du jour</p>
</span>
<span id="input-border">
<ion-icon id="icon" name="calendar"></ion-icon>
<input type="number" id="jour">
</span>
</label>
</article>
<article>
<label for="transport">
<span>
<p>Transport</p>
</span>
<span id="input-border">
<!-- <ion-icon id="icon" name="logo-model-s"></ion-icon> -->
<!-- <ion-icon id="icon" name="train"></ion-icon> -->
<ion-icon id="icon" name="airplane"></ion-icon>
<select name="transport" id="transport">
<option value="40000" data-icon="bus">Taxi-brousse</option>
<option value="50000" data-icon="bus">Avion</option>
<option value="30000" data-icon="bus">Voiture</option>
</select>
</span>
</label>
<label for="transport">
<span>
<p>Hebergement</p>
</span>
<span id="input-border">
<ion-icon id="icon" name="bed" id="icon"></ion-icon>
<select name="hebergement" id="hebergement">
<option value="40000">Hotel</option>
<option value="60000">Campaigne</option>
</select>
</span>
</label>
</article>
<article>
<label for="">
<span>
<p>Estimation repas</p>
</span>
<span id="input-border">
<ion-icon id="icon" name="pizza"></ion-icon>
<input type="number" id="repas">
</span>
</label>
<label for="">
<span>
<p>Estimation gouter (Revy)</p>
</span>
<span id="input-border">
<ion-icon id="icon" name="beer"></ion-icon>
<input type="number" id="boissons">
</span>
</label>
</article>
<article>
<figure id="calculer">
<span><ion-icon name="checkmark-circle-outline" id="icon-size"></ion-icon>
<img src="../calculateur/Images/roll.gif" alt="" id="img-size">
</span>
<span>Valider</span>
</figure>
</article>
</form>
<!-- RESULTAT -->
<section id="resultat"></section>
</fieldset>
</div>
</main>
<script src="script.js"></script>
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</body>
</html>