up icons
This commit is contained in:
Tykayn
tykayn
parent
01767971dc
commit
023a6ddf89
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
214
index.html
214
index.html
|
|
@ -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>
|
||||||
|
|
|
||||||
318792
js/data.json
318792
js/data.json
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1034
js/main.js
1034
js/main.js
File diff suppressed because it is too large
Load Diff
128
styles/style.css
128
styles/style.css
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue