-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (156 loc) · 9.77 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
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Cyclo location | Réserve ton vélo en quelques cliques</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<meta name="description" content="Réserve ton vélo en moins d'une minute, où que tu sois !" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Cyclo-location" />
<meta name="twitter:creator" content="Sébastien Sénéchal" />
<meta property="og:url" content="https://localhost/cyclocation/" />
<meta property="og:title" content="Cyclo location | Réserve ton vélo en quelques cliques" />
<meta property="og:description" content="Réserve ton vélo en moins d'une minute, où que tu sois !" />
<meta property="og:image" content="public/img/topo2.png" />
<meta property="og:type" content="website" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preload" href="https://unpkg.com/[email protected]/dist/leaflet.css" as="style" onload="this.rel='stylesheet'" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="">
<noscript><link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""></noscript>
<link rel="preconnect" href="https://unpkg.com/"/>
<!-- SASS to CSS -->
<link rel="stylesheet" href="public/css/main.min.css" async>
</head>
<body>
<main id="grid">
<section id="diaporamaSection" class="slider">
<header id="mainHeader" class="mainHeader">
<h1 class="mainHeader__title"><span class="mainHeader__title--subtitle">Réserve ton vélo en quelques cliques.</span><br>
Cyclo location</h1>
</header>
<div id="diaporama" class="diaporama">
<div id="arrowLeft">
<div class="arrow-left"></div>
</div>
<figure class="slide diaporama__slide" id="slide1">
<img src="public/img/roue-velo-blanc.svg" alt="">
<figcaption class="slide__figcaption diaporama__figcaption">
<h2>Comment ça marche ?</h2>
<p>Nous avons conçu ce service pour une utilisation tous terrains.<br>
Pour réserver un vélo c'est simple, laisse-toi guider.</p>
</figcaption>
</figure>
<figure class="slide diaporama__slide" id="slide2">
<img src="public/img/markers-fig2.png" alt="">
<figcaption class="slide__figcaption diaporama__figcaption">
<h2>Carte simplifiée</h2>
<p>Déplace toi sur la carte ci-dessous et sélectionne une station.</p>
</figcaption>
</figure>
<figure class="slide diaporama__slide" id="slide3">
<img src="public/img/topo-jaune.svg" alt="">
<figcaption class="slide__figcaption diaporama__figcaption">
<h2>Choisi ta station</h2>
<p>État de la station, ouverte ou fermée<br>
Vélos et places disponibles.<br>
Choisi la station qui te convient.</p>
</figcaption>
</figure>
<figure class="slide diaporama__slide" id="slide4">
<figcaption class="slide__figcaption diaporama__figcaption">
<h2>Réserve / Annule</h2>
<p>Clique sur «Réserver», renseigne ton prénom, ton nom et signe.<br>
Tu as vingt minutes pour récupérer ton vélo ou annuler.</p>
</figcaption>
</figure>
<div id="arrowRight">
<div class="arrow-right"></div>
</div>
<div id="control">
<button class="controls" id="pauseSlide"><span>Mettre en pause le diaporama</span><img src="public/img/pause-blue.svg" alt="" width="44px" height="44px" id="pauseSlideImg" /></button>
<a href="#cartographie" title="Voir plus bas"><img src="public/img/arrow_down_blue.svg" alt="" width="44px" height="44px" class="arrow_down" /></a>
</div>
</div>
</section>
<section id="cartographie">
<article class="map">
<div id="map" class="map__embed">
<!-- Carte -->
</div>
<div id="infoStation" class="map__info"> <!-- Bloc d'information sur les stations -->
<h2>Station</h2>
<p id="infoBeforeBooking">Sélectionne une station pour en savoir plus.<br>
Si celle-ci est ouverte et qu'un vélo est disponible, réserve en moins d'une minute.</p>
<!-- Liste des informations sur la station -->
<ul id="listeInfo" class="map__station">
<li>Nom : <span id="nomStation"></span></li>
<li>Etat : <span id="etatStation"></span></li>
<li>Vélos disponibles : <span id="veloDispo"></span></li>
<li>Places disponibles : <span id="attacheDispo"></span></li>
</ul>
<span id="buttonReserv"><button>Réserver</button></span>
<span id="errorReserv">Non disponible</span>
<span id="missingInfo">Veuillez renseigner tous les champs</span>
<div id="reservationBlock" class="map__reserv">
<h2>Réservation</h2>
<!-- Formulaire de réservation -->
<form class="map__form">
<label class="map__label" for="firstname">Nom (requis)</label>
<input class="map__input" type="text" id="firstname" name="firstname" placeholder="* Prénom" title="Prénom requis" onchange="StorageForm.populateStorage()" required />
<label class="map__label" for="lastname">Prénom (requis)</label>
<input class="map__input" type="text" id="lastname" name="lastname" placeholder="* Nom" title="Nom requis" onchange="StorageForm.populateStorage()" required />
</form>
<!-- Canvas et container -->
<p><abbr title="Signature requise">*</abbr> Signature</p>
<canvas id="paint">
Votre navigateur est obsolète, vous devez le mettre à niveau pour signer
</canvas>
<div>
<span id="buttonClear"><button>Effacer signature</button></span>
<span id="buttonValid"><button>Je réserve</button></span>
</div>
</div>
<aside id="reservationValide">
<p>Merci <span id="firstnameReservation"></span> <span id="lastnameReservation"></span> !<br>
Location validée à la station <span id="stationReservation"></span> pour une durée de <span id="reservationTimer"></span>.</p>
<span id="buttonCancel"><button>J'annule ma réservation</button></span>
</aside>
</div> <!-- fin cadre informations sur la station sélectionnée -->
</article>
</section>
<footer class="footer">
<section>
<h2>Cyclo location</h2>
<article class="footer__content">
<ul class="footer__list">
<li><address>
34 Boulevard Foche<br>
75005 Paris
</address></li>
<li><a href="tel:+3314594010101" title="Nous contacter par téléphone">+33 1 45 01 01 01</a></li>
<li><a href="mailto:[email protected]" title="Nous adresser un couriel">[email protected]</a></li>
</ul>
<ul class="footer__list">
<li><a href="#" title="Conditions générales d'utilisation">CGU</a></li>
<li><a href="#">Mentions légales</a></li>
<li><a href="#" title="Réglement général pour la protection des données">Données personnelles</a></li>
</ul>
</article>
</section>
</footer>
</main>
<!-- ======== Scripts and CSS ======== -->
<!-- diaporama.js -->
<script src="public/js/Slideshow.js" async></script>
<!-- map.js + markers -->
<script src="public/js/map.js"></script>
<!-- leaflet -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<!-- reservation.js -->
<script src="public/js/reservation.js" async></script>
<script>Maps.initMap();</script>
<!-- canvas.js -->
<script src="public/js/canvas.js" defer></script>
</body>
</html>