This commit is contained in:
Tykayn 2024-02-26 13:29:09 +01:00 committed by tykayn
parent 01767971dc
commit 023a6ddf89
6 changed files with 319173 additions and 8387 deletions

BIN
img/pad-thai.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

View File

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

318794
js/data.json

File diff suppressed because it is too large Load Diff

7390
js/data_.json Normal file

File diff suppressed because it is too large Load Diff

1034
js/main.js

File diff suppressed because it is too large Load Diff

View File

@ -1,16 +1,19 @@
html, body{ html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
html, p{
font-family: Calibri, Roboto, Arial,"Ubuntu Mono"; html, p {
font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
font-size: 1rem; font-size: 1rem;
} }
p{
p {
font-size: 1.25rem; font-size: 1.25rem;
} }
@ -20,18 +23,21 @@ p{
margin: 0; margin: 0;
border: solid 2px; border: solid 2px;
} }
.padded{
.padded {
padding: 1rem; padding: 1rem;
} }
#heading{
#heading {
background: #000; background: #000;
color: #ddd; color: #ddd;
min-height: 5%; min-height: 5%;
height:4rem; height: 4rem;
width: 100%; width: 100%;
padding-left: 1em; padding-left: 1em;
} }
.icon{
.icon {
width: 2rem !important; width: 2rem !important;
height: 2rem !important; height: 2rem !important;
display: inline-block; display: inline-block;
@ -43,14 +49,16 @@ p{
float: left; float: left;
} }
.title{ .title {
margin-right: 1em; margin-right: 1em;
line-height: 1.5rem; line-height: 1.5rem;
} }
h2{
h2 {
font-weight: normal; font-weight: normal;
} }
#success_load{
#success_load {
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
position: fixed; position: fixed;
@ -65,13 +73,16 @@ h2{
box-sizing: border-box; box-sizing: border-box;
line-height: 2em; line-height: 2em;
} }
.could-be-visible{
.could-be-visible {
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.hidden { .hidden {
opacity: 0; opacity: 0;
} }
.visible{
.visible {
opacity: 1; opacity: 1;
} }
@ -88,7 +99,7 @@ h2{
display: inline; display: inline;
} }
img.leaflet-marker-icon{ img.leaflet-marker-icon {
background: #fff; background: #fff;
-webkit-border-radius: 100%; -webkit-border-radius: 100%;
-moz-border-radius: 100%; -moz-border-radius: 100%;
@ -99,54 +110,82 @@ img.leaflet-marker-icon{
margin-top: -20px; margin-top: -20px;
box-shadow: 0 0 0.5em green; box-shadow: 0 0 0.5em green;
} }
img.leaflet-marker-icon.tag-amenity_drinking_water{
img.leaflet-marker-icon.tag-amenity_drinking_water {
box-shadow: 0 0 1em cornflowerblue; box-shadow: 0 0 1em cornflowerblue;
} }
img.leaflet-marker-icon.diet--vegetarian_yes{ img.leaflet-marker-icon.diet--vegetarian_yes {
border: solid 3px green; border: solid 3px green;
} }
button{
padding: 0.5em;
border-radius: 0.25em;
border: none;
margin-bottom: 2px;
margin-right: 2px;
cursor: pointer;
}
#query-button, #query-button,
.edit-button{ .edit-button {
background: #497cd3; background: #497cd3;
padding: 0.5em; padding: 0.5em;
border-radius: 0.25em; border-radius: 0.25em;
color: white; color: white;
border: solid 1px #497CD3FF; border: solid 1px #497CD3FF;
float:right;
margin-left: 1rem;
} }
#query-button:hover, #query-button:hover,
.edit-button:hover{ .edit-button:hover {
background: #0d377b; background: #0d377b;
border: solid 1px #08285c; border: solid 1px #08285c;
cursor:pointer; cursor: pointer;
} }
.edit-button{
.edit-button {
margin-left: 1ch; margin-left: 1ch;
} }
#query-button{ #query-button {
min-width: 10em; min-width: 10em;
} }
.pull-left{ .pull-left {
float:left; float: left;
} }
.description{
min-height: 3rem;
min-width: 10rem;
}
/** /**
mettre en valeur les restaurants qui n'ont pas renseigné leurs horaires d'ouverture mettre en valeur les restaurants qui n'ont pas renseigné leurs horaires d'ouverture
*/ */
.tag-no-opening-hours.tag-amenity_restaurant{ .tag-no-opening-hours.tag-amenity_restaurant {
background: #333333 !important; border-color: #888 !important;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(359deg); } transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
} }
a{
a {
color: #3388ff; color: #3388ff;
} }
#spinning_icon{
#spinning_icon {
position: fixed; position: fixed;
top: 11rem; top: 11rem;
left: 3.5rem; left: 3.5rem;
@ -154,7 +193,8 @@ a{
background: white; background: white;
font-size: 2rem; font-size: 2rem;
} }
#spinning_icon svg{
#spinning_icon svg {
position: fixed; position: fixed;
top: 1.5rem; top: 1.5rem;
left: 0.8rem; left: 0.8rem;
@ -163,11 +203,35 @@ a{
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
#spinning_icon svg{
#spinning_icon svg {
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
} }
#footer{ #footer {
max-width: 70ch; max-width: 70ch;
margin: 0 auto; margin: 0 auto;
} }
.is-open-today-true{
border-color: lawngreen;
}
.filters button{
width:100%;
}
.filters {
position: absolute;
width: 10rem;
padding: 1rem;
top: calc(6rem + 2px);
z-index: 3000;
background: white;
right: 0;
border: solid 3px white;
}
.unknown-name{
font-style: italic;
color: #888;
}