melting-pot/index.html

122 lines
4.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">
<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>
</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 class="filters">
<h2>Filtres</h2>
<button id="toggle_restaurant" >restaurants</button>
<button id="toggle_fast_food" >fast food</button>
<button id="toggle_cafe" >cafés</button>
</div>
<div id="success_load" class="could-be-visible hidden">
Données reçues
</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-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>.
<a href="https://forge.chapril.org/tykayn/melting-pot">Sources disponibles sur la forge du Chapril.</a>
</p>
</div>
</body>
</html>