update style and add tab behavior in osm license
Signed-off-by: tykayn <contact@cipherbliss.com>
This commit is contained in:
Tykayn
tykayn
parent
24af271111
commit
1b66a2d2e5
|
|
@ -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,16 +120,16 @@
|
||||||
<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
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
<a href="#" id="menu-icon"></a>
|
<a href="#" id="menu-icon"></a>
|
||||||
|
|
@ -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-->
|
||||||
|
<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 n’importe quoi d’autre !) à 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
|
||||||
|
d’une version dérivée, les conditions de l’ODbL s’appliquent
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
|
||||||
|
<!-- noun-open-padlock-5336638-->
|
||||||
|
<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>
|
||||||
|
|
||||||
-
|
|
||||||
<!-- 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 n’importe quoi d’autre !) à 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
|
|
||||||
d’une version dérivée, les conditions de l’ODbL s’appliquent
|
|
||||||
-
|
|
||||||
<!-- 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
|
|
||||||
sans ces
|
|
||||||
mesures
|
|
||||||
de protection
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -309,128 +341,147 @@
|
||||||
<div class="tabs-heading">
|
<div class="tabs-heading">
|
||||||
|
|
||||||
<!-- tabs:-->
|
<!-- tabs:-->
|
||||||
<!-- noun-contributions-4513764-->
|
<span class="tab-choice active" data-activate-tab="#crediting-box">
|
||||||
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg">
|
<!-- noun-contributions-4513764-->
|
||||||
Créditer /
|
<img alt="icon" class="custom-icon icon-noun" src="img/noun-contributions-4513764.svg">
|
||||||
<!-- noun-together-3266241-->
|
Créditer
|
||||||
<img alt="icon" class="icon icon-noun" src="img/noun-together-3266241.svg">
|
</span>
|
||||||
Contributeurs /
|
<span class="tab-choice" data-activate-tab="#contributors-box">
|
||||||
<!-- noun-import-1243585-->
|
<!-- noun-together-3266241-->
|
||||||
<img alt="icon" class="icon icon-noun" src="img/noun-import-1243585.svg">
|
<img alt="icon" class="custom-icon icon-noun" src="img/noun-together-3266241.svg">
|
||||||
Imports interdits /
|
Contributeurs
|
||||||
<!-- noun-thumb-5947085-->
|
</span>
|
||||||
<img alt="icon" class="icon icon-noun" src="img/noun-thumb-5947085.svg">
|
<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®
|
Marque OpenStreetMap®
|
||||||
<!-- noun-contributions-4513764-->
|
</span>
|
||||||
<img alt="icon" class="icon icon-noun" src="img/noun-contributions-4513764.svg">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tabs-body">
|
<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 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.
|
||||||
|
|
||||||
|
<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-->
|
||||||
|
<!-- d’usage, 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 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.
|
||||||
|
<a href="https://wiki.openstreetmap.org/wiki/Contributors">
|
||||||
|
→ Voir tous les contributeurs
|
||||||
|
</a>
|
||||||
|
<!-- (en anglais ; sur le wiki d’OpenStreetMap)-->
|
||||||
|
|
||||||
|
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 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
|
||||||
|
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 :
|
||||||
|
<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>
|
</div>
|
||||||
<div class="crediting-box">
|
|
||||||
<h2 id="crediting">
|
|
||||||
Créditer
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
<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">
|
|
||||||
|
|
||||||
<h2 id="contributors">
|
|
||||||
<!-- noun-together-3266241 -->
|
|
||||||
|
|
||||||
<img alt="icon" class="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
|
|
||||||
ê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.
|
|
||||||
<a href="https://wiki.openstreetmap.org/wiki/Contributors">
|
|
||||||
→ Voir tous les contributeurs
|
|
||||||
</a>
|
|
||||||
<!-- (en anglais ; sur le wiki d’OpenStreetMap)-->
|
|
||||||
|
|
||||||
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">
|
|
||||||
<h2 id="forbidden_imports">
|
|
||||||
<!-- noun-import-1243585 -->
|
|
||||||
Imports interdits
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
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 :
|
|
||||||
<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">
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -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