115 lines
3.0 KiB
HTML
115 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>
|
|
|
|
|
|
<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 class="research_display">
|
|
<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 >
|
|
</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 >
|