tykayn/scripts
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

update style and add tab behavior in osm license

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
license-osm/index.html
View File

@ -8,9 +8,11 @@
<meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport"> <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/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" <link href="https://www.openstreetmap.org/assets/screen-ltr-ca0aa65af2fe5fbc646694d87d9b5d73d80c1e27ba166ad1b99a297bccc1f756.css"
media="screen" media="screen"
rel="stylesheet"> rel="stylesheet">
@ -118,13 +120,13 @@
<div id="content"> <div id="content">
<header class="closed clearfix"> <header class="closed clearfix">
<h1> <h1>
<a ="https://www.openstreetmap.org/" class="geolink"> <a class="geolink" href="https://www.openstreetmap.org/">
<picture> <picture>
<source srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg" <source srcset="https://www.openstreetmap.org//assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg"
type="image/svg+xml"> type="image/svg+xml">
<img alt="Logo d’OpenStreetMap" <img alt="Logo d’OpenStreetMap"
class="logo" class="logo"
src="/assets/osm_logo-9391021d40a7acdafd2ac5d5622dfe0e469c61421fdb2975365c183f5edaa270.png" src="https://www.openstreetmap.org//assets/osm_logo-9391021d40a7acdafd2ac5d5622dfe0e469c61421fdb2975365c183f5edaa270.png"
srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg"> srcset="/assets/osm_logo-4afddaae0230a5a46687fdc751ed256dfdccde144118cb02a7d7960f207a4b92.svg">
</picture> </picture>
OpenStreetMap OpenStreetMap
@ -234,25 +236,25 @@
<div class="content-inner"> <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> <article>
<div class="heading-box"> <div class="heading-box">
<h1 id="head"> <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--> <!-- noun-heart-5454846-->
OpenStreetMap : la base de données cartographique ouverte, collaborative et mondiale OpenStreetMap : la base de données cartographique ouverte, collaborative et mondiale
</h1> </h1>
<p> <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> </p>
Chacun est libre de contribuer et d’utiliser les données à condition de protéger et de Chacun est libre de contribuer et d’utiliser les données à condition de protéger et de
contribuer à faire contribuer à faire
@ -267,41 +269,71 @@
(ODbL) (ODbL)
(ODbL) par la Fondation OpenStreetMap (OSMF). (ODbL) par la Fondation OpenStreetMap (OSMF).
Vous êtes autorisé à : Vous êtes autorisé à :
<ul class="allowances">
<li>
-
<!-- noun-cc-share-573489--> <!-- 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 Partager : copier, distribuer et utiliser la base de données
- </li>
<li>
<!-- noun-build-3136692--> <!-- 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 Créer : produire des cartes (ou n’importe quoi d’autre !) à partir de la base de données
- </li>
<li>
<!-- noun-layer-1159947--> <!-- 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 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 commercial
Selon les conditions suivantes : Selon les conditions suivantes :
<ul class="conditions">
<li>
-
<!-- noun-contributions-4513764--> <!-- noun-contributions-4513764-->
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg"> <img alt="icon" class="custom-icon icon-noun"
Attribution : vous devez créditer OpenStreetMap pour tout usage public ou travail 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 dérivé de la base de données
-
</li>
<li>
<!-- noun-refresh-1815798--> <!-- noun-refresh-1815798-->
<img alt="icon" class="icon icon-noun" src="img/noun-refresh-1815798.svg"> <img alt="icon" class="custom-icon icon-noun"
Partage sous les mêmes conditions : si vous faites un usage public de la base de données ou 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 d’une version dérivée, les conditions de l’ODbL s’appliquent
-
</li>
<li>
<!-- noun-open-padlock-5336638--> <!-- noun-open-padlock-5336638-->
<img alt="icon" class="icon icon-noun" src="img/noun-open-padlock-5336638.svg"> <img alt="icon" class="custom-icon icon-noun"
Préserver l’ouverture : si vous redistribuez la base de données ou une version dérivée src="img/noun-open-padlock-5336638.svg">
avec des mesures de protection (comme des DRM), vous devez alors également fournir une version 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 sans ces
mesures mesures
de protection de protection
</li>
</ul>
</li>
</ul>
</div> </div>
@ -309,27 +341,35 @@
<div class="tabs-heading"> <div class="tabs-heading">
<!-- tabs:--> <!-- tabs:-->
<span class="tab-choice active" data-activate-tab="#crediting-box">
<!-- noun-contributions-4513764--> <!-- noun-contributions-4513764-->
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg"> <img alt="icon" class="custom-icon icon-noun" src="img/noun-contributions-4513764.svg">
Créditer / Créditer
</span>
<span class="tab-choice" data-activate-tab="#contributors-box">
<!-- noun-together-3266241--> <!-- 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 / Contributeurs
</span>
<span class="tab-choice" data-activate-tab="#forbidden-imports-box">
<!-- noun-import-1243585--> <!-- noun-import-1243585-->
<img alt="icon" class="icon icon-noun" src="img/noun-import-1243585.svg"> <img alt="icon" class="custom-icon icon-noun" src="img/noun-import-1243585.svg">
Imports interdits / Imports interdits
</span>
<span class="tab-choice" data-activate-tab="#brand-box">
<!-- noun-thumb-5947085--> <!-- 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® Marque OpenStreetMap®
<!-- noun-contributions-4513764--> </span>
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg">
</div>
<div class="tabs-body">
</div> </div>
</div> <div class="tabs-body">
<div class="crediting-box"> <div class="crediting-box tab-item active" id="crediting-box">
<h2 id="crediting"> <h2 id="crediting">
<!-- noun-contributions-4513764-->
<img alt="icon" class="custom-icon icon-noun"
src="img/noun-contributions-4513764.svg">
Créditer Créditer
</h2> </h2>
@ -342,25 +382,27 @@
<a href="https://wiki.osmfoundation.org/wiki/Licence/Attribution_Guidelines/fr"> <a href="https://wiki.osmfoundation.org/wiki/Licence/Attribution_Guidelines/fr">
→ Voir tous les usages → Voir tous les usages
</a> </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--> <!-- 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--> <!-- d’usage, du type Choose a License-->
<div class="contributors-box"> </div>
<div class="contributors-box tab-item" id="contributors-box">
<h2 id="contributors"> <h2 id="contributors">
<!-- noun-together-3266241 --> <!-- 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 Contributeurs
</h2> </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 être
bénévoles bénévoles
ou ou
professionnels. 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 cartographie
et et
d’autres sources de données ouvertes. d’autres sources de données ouvertes.
@ -369,26 +411,31 @@
</a> </a>
<!-- (en anglais ; sur le wiki d’OpenStreetMap)--> <!-- (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 contenu
approuvent approuvent
OpenStreetMap, ni qu’ils garantissent ou acceptent quelque responsabilité que ce soit. OpenStreetMap, ni qu’ils garantissent ou acceptent quelque responsabilité que ce soit.
</div> </div>
<div class="forbidden-imports-box"> <div class="forbidden-imports-box tab-item" id="forbidden-imports-box">
<h2 id="forbidden_imports"> <h2 id="forbidden_imports">
<!-- noun-import-1243585 --> <!-- noun-import-1243585 -->
<img alt="icon" class="custom-icon icon-noun" src="img/noun-import-1243585.svg">
Imports interdits Imports interdits
</h2> </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 sources
protégées 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 imprimées) sans
autorisation explicite de la part des détenteurs de ces droits. 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 à inappropriée à
la la
base base
@ -400,16 +447,15 @@
→ Page de signalement en ligne (en anglais) → Page de signalement en ligne (en anglais)
</a> </a>
</div> </div>
<div class="brand-box tab-item" id="brand-box">
<!-- noun-thumb-5947085 -->
<div class="brand-box">
<h2> <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® Marque OpenStreetMap®
</h2> </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 marques déposées
de la de la
Fondation OpenStreetMap. Fondation OpenStreetMap.
@ -419,18 +465,23 @@
</a> </a>
</div> </div>
<!-- noun-guideline-5892826-->
</div>
</div>
<div class="clarification-box"> <div class="clarification-box">
<h2> <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 Clarifications d’utilisation
</h2> </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 d’utilisation
des 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 avec des
bases bases
des données tierces … des données tierces …
@ -438,6 +489,7 @@
→ Directives générales → Directives générales
</a> </a>
</div> </div>
<div class="contact-box"> <div class="contact-box">
<h2> <h2>
@ -455,7 +507,7 @@
<div class="warning-box"> <div class="warning-box">
<h2> <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 Avertissement
</h2> </h2>
@ -479,6 +531,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="script.js"></script>
</body> </body>
</html> </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;
}