update style and add tab behavior in osm license

Signed-off-by: tykayn <contact@cipherbliss.com>
This commit is contained in:
Tykayn 2023-08-14 12:02:32 +02:00 committed by tykayn
parent 24af271111
commit 1b66a2d2e5
3 changed files with 307 additions and 164 deletions

View File

@ -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,16 +120,16 @@
<div id="content">
<header class="closed clearfix">
<h1>
<a ="https://www.openstreetmap.org/" class="geolink">
<picture>
<source srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg"
type="image/svg+xml">
<img alt="Logo dOpenStreetMap"
class="logo"
src="/assets/osm_logo-9391021d40a7acdafd2ac5d5622dfe0e469c61421fdb2975365c183f5edaa270.png"
srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg">
</picture>
OpenStreetMap
<a class="geolink" href="https://www.openstreetmap.org/">
<picture>
<source srcset="https://www.openstreetmap.org//assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg"
type="image/svg+xml">
<img alt="Logo dOpenStreetMap"
class="logo"
src="https://www.openstreetmap.org//assets/osm_logo-9391021d40a7acdafd2ac5d5622dfe0e469c61421fdb2975365c183f5edaa270.png"
srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg">
</picture>
OpenStreetMap
</a>
</h1>
<a href="#" id="menu-icon"></a>
@ -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 dutiliser 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="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="custom-icon icon-noun" src="img/noun-build-3136692.svg">
Créer : produire des cartes (ou nimporte quoi dautre !) à partir de la base de données
</li>
<li>
<!-- noun-layer-1159947-->
<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
<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="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="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
dune version dérivée, les conditions de lODbL sappliquent
</li>
<li>
<!-- noun-open-padlock-5336638-->
<img alt="icon" class="custom-icon icon-noun"
src="img/noun-open-padlock-5336638.svg">
Préserver louverture : 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>
-
<!-- noun-cc-share-573489-->
<img alt="icon" class="icon icon-noun" src="img/noun-cc-share-573489.svg">
Partager : copier, distribuer et utiliser la base de données
-
<!-- noun-build-3136692-->
<img alt="icon" class="icon icon-noun" src="img/noun-build-3136692.svg">
Créer : produire des cartes (ou nimporte quoi dautre !) à partir de la base de données
-
<!-- noun-layer-1159947-->
<img alt="icon" class="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
commercial
Selon les conditions suivantes :
-
<!-- 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
dérivé de la base de données
-
<!-- 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
dune version dérivée, les conditions de lODbL sappliquent
-
<!-- noun-open-padlock-5336638-->
<img alt="icon" class="icon icon-noun" src="img/noun-open-padlock-5336638.svg">
Préserver louverture : 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
</div>
@ -309,128 +341,147 @@
<div class="tabs-heading">
<!-- tabs:-->
<!-- noun-contributions-4513764-->
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg">
Créditer /
<!-- noun-together-3266241-->
<img alt="icon" class="icon icon-noun" src="img/noun-together-3266241.svg">
Contributeurs /
<!-- noun-import-1243585-->
<img alt="icon" class="icon icon-noun" src="img/noun-import-1243585.svg">
Imports interdits /
<!-- noun-thumb-5947085-->
<img alt="icon" class="icon icon-noun" src="img/noun-thumb-5947085.svg">
<span class="tab-choice active" data-activate-tab="#crediting-box">
<!-- noun-contributions-4513764-->
<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="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="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="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">
</span>
</div>
<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>
Lorsque vous utilisez des données dOpenStreetMap, vous devez effectuer les deux choses
suivantes :
Donnez crédit à OpenStreetMap en affichant notre avis des droits dauteur.
Indiquez clairement que les données sont disponibles sous la Licence Open Database.
<a href="https://wiki.osmfoundation.org/wiki/Licence/Attribution_Guidelines/fr">
→ Voir tous les usages
</a>
<!-- NB : au lieu de renvoyer vers une page externe, ça mériterait de développer un outil qui couvre la majorité des cas-->
<!-- dusage, du type Choose a License-->
</div>
<div class="contributors-box tab-item" id="contributors-box">
<h2 id="contributors">
<!-- noun-together-3266241 -->
<img alt="icon" class="custom-icon icon-noun" src="img/noun-together-3266241.svg">
Contributeurs
</h2>
Les données dOpenStreetMap 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
cartographie
et
dautres sources de données ouvertes.
<a href="https://wiki.openstreetmap.org/wiki/Contributors">
→ Voir tous les contributeurs
</a>
<!-- (en anglais ; sur le wiki dOpenStreetMap)-->
Linclusion de données dans OpenStreetMap nimplique pas que les fournisseurs dorigine
du
contenu
approuvent
OpenStreetMap, ni quils garantissent ou acceptent quelque responsabilité que ce soit.
</div>
<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 dOSM quils ne doivent jamais ajouter de données
provenant de
sources
protégées
par le droit dauteur (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 dauteur ont été ajoutées de
manière
inappropriée à
la
base
de données OpenStreetMap :
<a href="https://wiki.osmfoundation.org/wiki/Takedown_procedure">
→ Procédure de retrait (en anglais)
</a>
<a href="https://dmca.openstreetmap.org/">
→ Page de signalement en ligne (en anglais)
</a>
</div>
<div class="brand-box tab-item" id="brand-box">
<h2>
<!-- 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
marques déposées
de la
Fondation OpenStreetMap.
<a href="https://wiki.osmfoundation.org/wiki/Trademark_Policy">
→ Politique relative aux marques (en anglais)
</a>
</div>
</div>
</div>
<div class="crediting-box">
<h2 id="crediting">
Créditer
</h2>
Lorsque vous utilisez des données dOpenStreetMap, vous devez effectuer les deux choses
suivantes :
Donnez crédit à OpenStreetMap en affichant notre avis des droits dauteur.
Indiquez clairement que les données sont disponibles sous la Licence Open Database.
<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-->
<!-- dusage, du type Choose a License-->
<div class="contributors-box">
<h2 id="contributors">
<!-- noun-together-3266241 -->
<img alt="icon" class="icon icon-noun" src="img/noun-together-3266241.svg">
Contributeurs
</h2>
Les données dOpenStreetMap 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
cartographie
et
dautres sources de données ouvertes.
<a href="https://wiki.openstreetmap.org/wiki/Contributors">
→ Voir tous les contributeurs
</a>
<!-- (en anglais ; sur le wiki dOpenStreetMap)-->
Linclusion de données dans OpenStreetMap nimplique pas que les fournisseurs dorigine du
contenu
approuvent
OpenStreetMap, ni quils garantissent ou acceptent quelque responsabilité que ce soit.
</div>
<div class="forbidden-imports-box">
<h2 id="forbidden_imports">
<!-- noun-import-1243585 -->
Imports interdits
</h2>
Nous rappelons aux contributeurs dOSM quils ne doivent jamais ajouter de données provenant de
sources
protégées
par le droit dauteur (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 dauteur ont été ajoutées de manière
inappropriée à
la
base
de données OpenStreetMap :
<a href="https://wiki.osmfoundation.org/wiki/Takedown_procedure">
→ Procédure de retrait (en anglais)
</a>
<a href="https://dmca.openstreetmap.org/">
→ Page de signalement en ligne (en anglais)
</a>
</div>
<!-- noun-thumb-5947085 -->
<div class="brand-box">
<h2>
<img alt="icon" class="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
marques déposées
de la
Fondation OpenStreetMap.
<a href="https://wiki.osmfoundation.org/wiki/Trademark_Policy">
→ Politique relative aux marques (en anglais)
</a>
</div>
<!-- noun-guideline-5892826-->
<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 dutilisation
</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
dutilisation
des
données : création dune carte web ou imprimée, utilisation des données via une API, combinaison
données : création dune 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>

19
license-osm/script.js Normal file
View File

@ -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')
})
})

72
license-osm/style.css Normal file
View File

@ -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;
}