From 1b66a2d2e56a38805de42fdca6cefe7b85587d61 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 14 Aug 2023 12:02:32 +0200 Subject: [PATCH] update style and add tab behavior in osm license Signed-off-by: tykayn --- license-osm/index.html | 380 +++++++++++++++++++++++------------------ license-osm/script.js | 19 +++ license-osm/style.css | 72 ++++++++ 3 files changed, 307 insertions(+), 164 deletions(-) create mode 100644 license-osm/script.js create mode 100644 license-osm/style.css diff --git a/license-osm/index.html b/license-osm/index.html index dded8c73..8b82d29c 100644 --- a/license-osm/index.html +++ b/license-osm/index.html @@ -8,9 +8,11 @@ - + - + @@ -118,16 +120,16 @@

- - - - - - OpenStreetMap + + + + + + OpenStreetMap

@@ -234,25 +236,25 @@
-
- This page is also available in ENGLISH / FRANÇAIS / ... - -

- icon + icon OpenStreetMap : la base de données cartographique ouverte, collaborative et mondiale

- +

+ + This page is also available in + +

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é à : +
    +
  • + + + icon + Partager : copier, distribuer et utiliser la base de données +
    • +
  • + + + icon + Créer : produire des cartes (ou n’importe quoi d’autre !) à partir de la base de données +
    • +
  • + + + icon + Adapter : modifier, transformer et construire avec la base de données + Et tout cela, pour un usage + icon + + personnel tout autant que + icon + + commercial + Selon les conditions suivantes : +
      +
    • + + + icon + Attribution : vous devez créditer OpenStreetMap pour tout usage public ou + travail + dérivé de la base de données + +
      • +
    • + + + icon + 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 + +
      • +
    • + + + icon + 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 +
      • +
    +
    • +
- - - - icon - Partager : copier, distribuer et utiliser la base de données - - - - icon - Créer : produire des cartes (ou n’importe quoi d’autre !) à partir de la base de données - - - - icon - 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 : - - - - icon - Attribution : vous devez créditer OpenStreetMap pour tout usage public ou travail - dérivé de la base de données - - - - icon - 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 - - - - icon - 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
@@ -309,128 +341,147 @@
- - icon - Créditer / - - icon - Contributeurs / - - icon - Imports interdits / - - icon + + + icon + Créditer + + + + icon + Contributeurs + + + + icon + Imports interdits + + + + icon Marque OpenStreetMap® - - icon + + +
+
+

+ + icon + Créditer +

+ + Lorsque vous utilisez des données d’OpenStreetMap, vous devez effectuer les deux choses + suivantes : + + Donnez crédit à OpenStreetMap en affichant notre avis des droits d’auteur. + Indiquez clairement que les données sont disponibles sous la Licence Open Database. + + + → Voir tous les usages + + + + +
+
+ +

+ + + icon + Contributeurs +

+ + 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 + cartographie + et + d’autres sources de données ouvertes. + + → Voir tous les contributeurs + + + + 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. + +
+
+

+ + icon + Imports interdits +

+ + 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 + 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 + inappropriée à + la + base + de données OpenStreetMap : + + → Procédure de retrait (en anglais) + + + → Page de signalement en ligne (en anglais) + +
+
+

+ + icon + Marque OpenStreetMap® +

+ + 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. + + + → Politique relative aux marques (en anglais) + +
+
-
-

- Créditer -

- - Lorsque vous utilisez des données d’OpenStreetMap, vous devez effectuer les deux choses - suivantes : - - Donnez crédit à OpenStreetMap en affichant notre avis des droits d’auteur. - Indiquez clairement que les données sont disponibles sous la Licence Open Database. - - - → Voir tous les usages - -
- - - -
- -

- - - icon - Contributeurs -

- - 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 - cartographie - et - d’autres sources de données ouvertes. - - → Voir tous les contributeurs - - - - 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. - -
-
-

- - Imports interdits -

- - 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 - 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 - inappropriée à - la - base - de données OpenStreetMap : - - → Procédure de retrait (en anglais) - - - → Page de signalement en ligne (en anglais) - -
- - - -
-

- icon - Marque OpenStreetMap® -

- - 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. - - - → Politique relative aux marques (en anglais) - -
- -

- icon + + icon Clarifications d’utilisation

- 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
+

@@ -455,7 +507,7 @@

- icon + icon Avertissement

@@ -479,6 +531,6 @@

- + diff --git a/license-osm/script.js b/license-osm/script.js new file mode 100644 index 00000000..22070a58 --- /dev/null +++ b/license-osm/script.js @@ -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') + }) +}) \ No newline at end of file diff --git a/license-osm/style.css b/license-osm/style.css new file mode 100644 index 00000000..f80d64f5 --- /dev/null +++ b/license-osm/style.css @@ -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; +} \ No newline at end of file