melting-pot/index.html

113 lines
3.0 KiB
HTML

<!DOCTYPE html>
<html lang='fr' >
<head >
<title >MeltingPot - Où manger et boire ? - OSM Bliss</title >
<meta charset='utf-8' >
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' >
<link
rel='stylesheet'
href='styles/leaflet.css' />
<link
rel='stylesheet'
href='styles/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
<link rel="shortcut icon" href="img/french.png">
</head >
<body >
<div
id='heading'
class='padded' >
<h1 class="pull-left title">
<img class="icon" src="img/french.png" alt="plat avec sa cloche">
Melting Pot</h1>
<h2 class="pull-left title">Où manger et boire
<div id='spinning_icon' >
<div class='message-loading'>
chargement en cours...
</div>
<svg
id='star'
width='4cm'
height='4cm'
viewBox='0 0 700 400'
xmlns='http://www.w3.org/2000/svg'
version='1.1' >
<polygon
fill='red'
stroke='red'
stroke-width='10'
points='350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161' />
</svg >
</div >
</h2 >
<p >
Par
<a href='https://www.cipherbliss.com' >
CipherBliss.com
</a >
</p >
</div >
<div id='map' >
<div class='leaflet-control-container' >
<div class='leaflet-top leaflet-right' >
<div
id='overpass-api-controls'
class='leaflet-bar leaflet-control' >
<!-- <input-->
<!-- id='query-textfield'-->
<!-- value='amenity=restaurant'-->
<!-- size='50' >-->
<input
id='query-button'
type='button'
value='Chercher' >
</div >
</div >
</div >
</div >
<div
id='footer'
class='padded' >
<h2 class="title">
<img class="icon pull-left" src="img/fountain.png" alt="plat">
À propos de ce plan</h2 >
<p >
La carte thématique proposant des restaurants et autres lieux de ravitaillement, basée sur les données
d'OpenStreetMap.
</p >
<p>
Déplacez vous sur la carte et cliquez sur le bouton pour charger les données de l'emplacement actuel. <br >
Vous pouvez trouver grâce à cette carte non seulement des restaurants, mais aussi des food trucks, des fast food, le tout illustré selon le type de cuisine principale renseigné. Trouvez aussi les emplacements de points d'eau potable et des distributeurs.
</p>
<p>
<img class="icon" src="img/croissant.png" alt="croissant">
<img class="icon" src="img/icon_restaurant.png" alt="restaurant">
<img class="icon" src="img/vending_machine.png" alt="vending machine">
</p>
<p>
<br>
<br>
Fait par <a href="https://mastodon.cipherbliss.com/@tykayn" >Tykayn</a> - <a href="https://www.cipherbliss.com" >www.cipherbliss.com</a>
</p>
</div >
<script src='js/leaflet.js' ></script >
<script src='js/jquery-3.2.1.min.js' ></script >
<script src='js/osmtogeojson.js' ></script >
<script
type='module'
src='js/main.js' ></script >
</body >
</html >