update style and add tab behavior in osm license
Signed-off-by: tykayn <contact@cipherbliss.com>
This commit is contained in:
parent
24af271111
commit
1b66a2d2e5
|
|
@ -8,9 +8,11 @@
|
|||
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
|
||||
<link href="style.css"
|
||||
media="screen, print"
|
||||
rel="stylesheet">
|
||||
<!-- <script src="https://www.openstreetmap.org/assets/application-57cd01faad75101f62e68d5f3bb3c1f019aeb72d3418a41b8b251be58fc09df2.js"></script>-->
|
||||
<!-- <script src="https://www.openstreetmap.org/assets/i18n/fr-05ae7302303275076d6ae97c266a9bcb5b3a518ca4e009b707d61f59649b0200.js"></script>-->
|
||||
|
||||
<link href="https://www.openstreetmap.org/assets/screen-ltr-ca0aa65af2fe5fbc646694d87d9b5d73d80c1e27ba166ad1b99a297bccc1f756.css"
|
||||
media="screen"
|
||||
rel="stylesheet">
|
||||
|
|
@ -118,13 +120,13 @@
|
|||
<div id="content">
|
||||
<header class="closed clearfix">
|
||||
<h1>
|
||||
<a ="https://www.openstreetmap.org/" class="geolink">
|
||||
<a class="geolink" href="https://www.openstreetmap.org/">
|
||||
<picture>
|
||||
<source srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg"
|
||||
<source srcset="https://www.openstreetmap.org//assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg"
|
||||
type="image/svg+xml">
|
||||
<img alt="Logo d’OpenStreetMap"
|
||||
class="logo"
|
||||
src="/assets/osm_logo-9391021d40a7acdafd2ac5d5622dfe0e469c61421fdb2975365c183f5edaa270.png"
|
||||
src="https://www.openstreetmap.org//assets/osm_logo-9391021d40a7acdafd2ac5d5622dfe0e469c61421fdb2975365c183f5edaa270.png"
|
||||
srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg">
|
||||
</picture>
|
||||
OpenStreetMap
|
||||
|
|
@ -234,25 +236,25 @@
|
|||
<div class="content-inner">
|
||||
|
||||
|
||||
<div class="lang-selector">
|
||||
This page is also available in ENGLISH / FRANÇAIS / ...
|
||||
<select id="lang" name="lang">
|
||||
<option value="FR_fr">Français</option>
|
||||
<option value="EN_en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
<article>
|
||||
|
||||
<div class="heading-box">
|
||||
|
||||
<h1 id="head">
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-heart-5454846.svg">
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-heart-5454846.svg">
|
||||
<!-- noun-heart-5454846-->
|
||||
OpenStreetMap : la base de données cartographique ouverte, collaborative et mondiale
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
|
||||
<div class="lang-selector">
|
||||
<!-- TODO -->
|
||||
This page is also available in
|
||||
<select class="btn" id="lang" name="lang">
|
||||
<option value="EN_en">English</option>
|
||||
<option value="FR_fr">Français</option>
|
||||
</select>
|
||||
</div>
|
||||
</p>
|
||||
Chacun est libre de contribuer et d’utiliser les données à condition de protéger et de
|
||||
contribuer à faire
|
||||
|
|
@ -267,41 +269,71 @@
|
|||
(ODbL)
|
||||
(ODbL) par la Fondation OpenStreetMap (OSMF).
|
||||
Vous êtes autorisé à :
|
||||
<ul class="allowances">
|
||||
<li>
|
||||
|
||||
-
|
||||
<!-- noun-cc-share-573489-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-cc-share-573489.svg">
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-cc-share-573489.svg">
|
||||
Partager : copier, distribuer et utiliser la base de données
|
||||
-
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<!-- noun-build-3136692-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-build-3136692.svg">
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-build-3136692.svg">
|
||||
Créer : produire des cartes (ou n’importe quoi d’autre !) à partir de la base de données
|
||||
-
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<!-- noun-layer-1159947-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-layer-1159947.svg">
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-layer-1159947.svg">
|
||||
Adapter : modifier, transformer et construire avec la base de données
|
||||
Et tout cela, pour un usage noun-artist-4516845 personnel tout autant que noun-dollar-1324742
|
||||
Et tout cela, pour un usage
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-artist-4516845.svg">
|
||||
<!-- noun-artist-4516845-->
|
||||
personnel tout autant que
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-dollar-1324742.svg">
|
||||
<!-- noun-dollar-1324742-->
|
||||
commercial
|
||||
Selon les conditions suivantes :
|
||||
<ul class="conditions">
|
||||
<li>
|
||||
|
||||
-
|
||||
<!-- noun-contributions-4513764-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg">
|
||||
Attribution : vous devez créditer OpenStreetMap pour tout usage public ou travail
|
||||
<img alt="icon" class="custom-icon icon-noun"
|
||||
src="img/noun-contributions-4513764.svg">
|
||||
Attribution : vous devez créditer OpenStreetMap pour tout usage public ou
|
||||
travail
|
||||
dérivé de la base de données
|
||||
-
|
||||
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<!-- noun-refresh-1815798-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-refresh-1815798.svg">
|
||||
Partage sous les mêmes conditions : si vous faites un usage public de la base de données ou
|
||||
<img alt="icon" class="custom-icon icon-noun"
|
||||
src="img/noun-refresh-1815798.svg">
|
||||
Partage sous les mêmes conditions : si vous faites un usage public de la base de
|
||||
données ou
|
||||
d’une version dérivée, les conditions de l’ODbL s’appliquent
|
||||
-
|
||||
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<!-- noun-open-padlock-5336638-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-open-padlock-5336638.svg">
|
||||
Préserver l’ouverture : si vous redistribuez la base de données ou une version dérivée
|
||||
avec des mesures de protection (comme des DRM), vous devez alors également fournir une version
|
||||
<img alt="icon" class="custom-icon icon-noun"
|
||||
src="img/noun-open-padlock-5336638.svg">
|
||||
Préserver l’ouverture : si vous redistribuez la base de données ou une version
|
||||
dérivée
|
||||
avec des mesures de protection (comme des DRM), vous devez alors également
|
||||
fournir une version
|
||||
sans ces
|
||||
mesures
|
||||
de protection
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -309,27 +341,35 @@
|
|||
<div class="tabs-heading">
|
||||
|
||||
<!-- tabs:-->
|
||||
<span class="tab-choice active" data-activate-tab="#crediting-box">
|
||||
<!-- noun-contributions-4513764-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg">
|
||||
Créditer /
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-contributions-4513764.svg">
|
||||
Créditer
|
||||
</span>
|
||||
<span class="tab-choice" data-activate-tab="#contributors-box">
|
||||
<!-- noun-together-3266241-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-together-3266241.svg">
|
||||
Contributeurs /
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-together-3266241.svg">
|
||||
Contributeurs
|
||||
</span>
|
||||
<span class="tab-choice" data-activate-tab="#forbidden-imports-box">
|
||||
<!-- noun-import-1243585-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-import-1243585.svg">
|
||||
Imports interdits /
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-import-1243585.svg">
|
||||
Imports interdits
|
||||
</span>
|
||||
<span class="tab-choice" data-activate-tab="#brand-box">
|
||||
<!-- noun-thumb-5947085-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-thumb-5947085.svg">
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-thumb-5947085.svg">
|
||||
Marque OpenStreetMap®
|
||||
<!-- noun-contributions-4513764-->
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg">
|
||||
</div>
|
||||
<div class="tabs-body">
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="crediting-box">
|
||||
<div class="tabs-body">
|
||||
<div class="crediting-box tab-item active" id="crediting-box">
|
||||
<h2 id="crediting">
|
||||
<!-- noun-contributions-4513764-->
|
||||
<img alt="icon" class="custom-icon icon-noun"
|
||||
src="img/noun-contributions-4513764.svg">
|
||||
Créditer
|
||||
</h2>
|
||||
|
||||
|
|
@ -342,25 +382,27 @@
|
|||
<a href="https://wiki.osmfoundation.org/wiki/Licence/Attribution_Guidelines/fr">
|
||||
→ Voir tous les usages
|
||||
</a>
|
||||
</div>
|
||||
<!-- NB : au lieu de renvoyer vers une page externe, ça mériterait de développer un outil qui couvre la majorité des cas-->
|
||||
<!-- d’usage, du type Choose a License-->
|
||||
|
||||
<div class="contributors-box">
|
||||
</div>
|
||||
<div class="contributors-box tab-item" id="contributors-box">
|
||||
|
||||
<h2 id="contributors">
|
||||
<!-- noun-together-3266241 -->
|
||||
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-together-3266241.svg">
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-together-3266241.svg">
|
||||
Contributeurs
|
||||
</h2>
|
||||
|
||||
Les données d’OpenStreetMap sont créées par des milliers de personnes. Ces contributeurs peuvent
|
||||
Les données d’OpenStreetMap sont créées par des milliers de personnes. Ces contributeurs
|
||||
peuvent
|
||||
être
|
||||
bénévoles
|
||||
ou
|
||||
professionnels.
|
||||
Nous incluons également des données publiées sous licence ouverte par des agences nationales de
|
||||
Nous incluons également des données publiées sous licence ouverte par des agences
|
||||
nationales de
|
||||
cartographie
|
||||
et
|
||||
d’autres sources de données ouvertes.
|
||||
|
|
@ -369,26 +411,31 @@
|
|||
</a>
|
||||
<!-- (en anglais ; sur le wiki d’OpenStreetMap)-->
|
||||
|
||||
L’inclusion de données dans OpenStreetMap n’implique pas que les fournisseurs d’origine du
|
||||
L’inclusion de données dans OpenStreetMap n’implique pas que les fournisseurs d’origine
|
||||
du
|
||||
contenu
|
||||
approuvent
|
||||
OpenStreetMap, ni qu’ils garantissent ou acceptent quelque responsabilité que ce soit.
|
||||
|
||||
</div>
|
||||
<div class="forbidden-imports-box">
|
||||
<div class="forbidden-imports-box tab-item" id="forbidden-imports-box">
|
||||
<h2 id="forbidden_imports">
|
||||
<!-- noun-import-1243585 -->
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-import-1243585.svg">
|
||||
Imports interdits
|
||||
</h2>
|
||||
|
||||
Nous rappelons aux contributeurs d’OSM qu’ils ne doivent jamais ajouter de données provenant de
|
||||
Nous rappelons aux contributeurs d’OSM qu’ils ne doivent jamais ajouter de données
|
||||
provenant de
|
||||
sources
|
||||
protégées
|
||||
par le droit d’auteur (copyright) ou des droits voisins (par ex. Google Maps ou des cartes
|
||||
par le droit d’auteur (copyright) ou des droits voisins (par ex. Google Maps ou des
|
||||
cartes
|
||||
imprimées) sans
|
||||
autorisation explicite de la part des détenteurs de ces droits.
|
||||
|
||||
Si vous pensez que des données protégées par des droits d’auteur ont été ajoutées de manière
|
||||
Si vous pensez que des données protégées par des droits d’auteur ont été ajoutées de
|
||||
manière
|
||||
inappropriée à
|
||||
la
|
||||
base
|
||||
|
|
@ -400,16 +447,15 @@
|
|||
→ Page de signalement en ligne (en anglais)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- noun-thumb-5947085 -->
|
||||
<div class="brand-box">
|
||||
<div class="brand-box tab-item" id="brand-box">
|
||||
<h2>
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-thumb-5947085.svg">
|
||||
<!-- noun-thumb-5947085 -->
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-thumb-5947085.svg">
|
||||
Marque OpenStreetMap®
|
||||
</h2>
|
||||
|
||||
Les termes OpenStreetMap et State of the Map ainsi que le logo en forme de loupe sont des
|
||||
Les termes OpenStreetMap et State of the Map ainsi que le logo en forme de loupe sont
|
||||
des
|
||||
marques déposées
|
||||
de la
|
||||
Fondation OpenStreetMap.
|
||||
|
|
@ -419,18 +465,23 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<!-- noun-guideline-5892826-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="clarification-box">
|
||||
|
||||
<h2>
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-guideline-5892826.svg">
|
||||
<!-- noun-guideline-5892826-->
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-guideline-5892826.svg">
|
||||
Clarifications d’utilisation
|
||||
</h2>
|
||||
|
||||
La fondation OpenStreetMap détaille ses directives pour les nombreuses possibilité spécifiques
|
||||
La fondation OpenStreetMap détaille ses directives pour les nombreuses possibilité
|
||||
spécifiques
|
||||
d’utilisation
|
||||
des
|
||||
données : création d’une carte web ou imprimée, utilisation des données via une API, combinaison
|
||||
données : création d’une carte web ou imprimée, utilisation des données via une API,
|
||||
combinaison
|
||||
avec des
|
||||
bases
|
||||
des données tierces …
|
||||
|
|
@ -438,6 +489,7 @@
|
|||
→ Directives générales
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="contact-box">
|
||||
|
||||
<h2>
|
||||
|
|
@ -455,7 +507,7 @@
|
|||
<div class="warning-box">
|
||||
|
||||
<h2>
|
||||
<img alt="icon" class="icon icon-noun" src="img/noun-warning-170417.svg">
|
||||
<img alt="icon" class="custom-icon icon-noun" src="img/noun-warning-170417.svg">
|
||||
Avertissement
|
||||
</h2>
|
||||
|
||||
|
|
@ -479,6 +531,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
let tab_choices = document.querySelectorAll('.tab-choice')
|
||||
let tabs_content = document.querySelectorAll('.tab-item')
|
||||
|
||||
console.log('tab_choices', tab_choices)
|
||||
tab_choices.forEach(element => {
|
||||
element.addEventListener('click', (event) => {
|
||||
console.log('clicked', event)
|
||||
let attribut = element.getAttribute('data-activate-tab')
|
||||
console.log('tab_choices', tab_choices)
|
||||
tabs_content.forEach(element => {
|
||||
element.classList.remove('active')
|
||||
})
|
||||
tab_choices.forEach(element => {
|
||||
element.classList.remove('active')
|
||||
})
|
||||
element.classList.add('active')
|
||||
document.querySelector(attribut).classList.add('active')
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
.icon-noun {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
/*margin-top: 0.1em;*/
|
||||
}
|
||||
|
||||
article {
|
||||
padding-bottom: 20vh;
|
||||
}
|
||||
|
||||
article > div {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
article a {
|
||||
border-radius: 0.25em;
|
||||
color: #7ebc6f;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
article .warning-box a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
article a:hover {
|
||||
background-color: #7ebc6f;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.lang-selector {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
select {
|
||||
background: white;
|
||||
border: solid 1px #7ebc6f !important;
|
||||
margin-left: 1ch !important;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.tabs-heading .tab-choice {
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.tabs-heading .tab-choice.active {
|
||||
border-bottom: 1px solid #7ebc6f;
|
||||
}
|
||||
|
||||
.tabs-body .tab-item {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
|
||||
}
|
||||
|
||||
.tabs-body .tab-item.active {
|
||||
height: auto;
|
||||
padding: 2rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tabs-box {
|
||||
border: solid 1px #ccc;
|
||||
border-left: solid 3px #ccc;
|
||||
padding-left: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
Loading…
Reference in New Issue