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