Toggle navigation
POP-T20 -
OkiCom
-
PasCherMontres
Notre guide de voyage (cartes)
Carte générale de l'archipel
Carte de l'histoire & géographie
Carte de l'île des ambiances
Carte de l'île de la découverte
Carte de l'île linguistique
Notre guide de voyage (textes)
1. Introduction
2. Préparer son voyage
3. Itinéraires
4. Histoire & géo
5. Ambiances
6. Découverte, bons plans & bonnes adresses
7. Linguistique
8. Risques, lieux à éviter et précautions à prendre
Guide de voyage complet en pdf
C'est quoi ce POP ?
C'est quoi, cette POP ?
Organisation du groupe
Inspirations
Archives
Guide de voyage en construction - brouillons
Archipel de Coopératif
Ile de la découverte
Ile des ambiances
Avec un outil
Avec libreoffice & pdf
Fonds de cartes
Images pour le POP
Aide
Rechercher
×
Se connecter
×
Se connecter
Email ou NomWiki
Mot de passe
Mot de passe perdu ?
Se souvenir de moi
S'inscrire
Aide
Gestion du site
Tableau de bord
Base de données
-
AubergeDeCannedda
Guide de voyage
... à l'attention de celles & ceux qui veulent s'aventurer en pays coopératif
-
OkiCom
Activer JavaScript pour joindre des fichiers.
Fichier
Annuler
Échoué
×
Télécharger le fichier
Texte du lien de téléchargement
Alignement de l'image
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Texte de remplacement
======Archipel coopératif / Île de la découverte ====== - Pour info : Correspondances carte=>texte : champs de idées => auberge des observators; port de la rétrospective => où manger, phare de l'espérance => où boire - Reste à faire : textes & images pour ces 3 vignettes "" <style> .img-overlay-wrap { position: relative; display: inline-block; transition: transform 150ms ease-in-out; } .img-overlay-wrap svg { position: absolute; top: 0; left: 0; } @keyframes buttonTransition { from { r: 10; } to { r: 13; } } circle { opacity: 0.5; cursor:pointer; stroke-dasharray: 95; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms ease; transform-origin: 0px 0px 0px; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite; animation-name: buttonTransition; } circle:hover { opacity: 0.7; stroke-dashoffset: 95px; stroke-width: 2.3px; transform="translate(5,14)" } svg { width: 100%; height:100%; } img { width: 100%; height: auto; } .overlay_bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay_bg:target { visibility: visible; opacity: 1; } .overlay_exit_link{ width: 100%; height: 100%; position: absolute; z-index: -1000; } .popup_page { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 2s ease-in-out; } .close_button { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #aaa; transition: all 0.2s ease; } .popup_page .popup_content { max-height: 30%; overflow: auto; } .content__title { font-size: 20px; font-family: sans-serif; padding: 1em 0.5em 0.25em 0.5em; text-align: center; color: #111; } .content__description { font-size: 15px; font-family: sans-serif; padding: 1em 0em; text-align: left; margin: 0; max-width: 90%; margin: auto; } .content__image { display: block; max-width: 90%; height: auto; margin: auto; } .content__image:hover { opacity: 0.8; transition: all 0.2s ease; } .close_button:hover { color: #34478b; transition: all 0.2s ease; text-decoration: none; } .content__button { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 2px solid #34478b; border-radius: 0.6em; color: #34478b; cursor: pointer; display: -webkit-box; display: flex; align-self: center; font-size: 1rem; font-weight: 400; line-height: 1; margin: 20px; padding: 1.2em 2.8em; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; max-width: 200px; margin: 2em auto 0.5em auto; justify-content: center; } .content__button:hover, .content__button:focus { color: #fff; outline: 0; box-shadow: 0 0 40px 40px #34478b inset; text-decoration: none; } </style> <html> <body> <div id="myDiv" class="img-overlay-wrap"> <img src="https://ferme.yeswiki.net/POP-T20/files/CarteD%C3%A9couverte_le_de_la_dcouverte_20201214114400_20210113220611.jpg" alt="Archipel" usemap="#workmap"> <svg id="mySvg"> </svg> </div> </body> </html> <script> var jsonObj = { points: [ { x: "19%", y: "34%", title: "La station des décisions", description: "Impossible ... une décision prise collectivement ? Détrompez-vous : différentes méthodes existent !", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#stationdesdecisions", color: "green", link_text:"Chaussez vos skis !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_Fraitve_ski_trail__panoramio_vignette_300_209_20201210145137_20201210145253.jpg" }, { x: "40%", y: "53%", title: "Animacoop", description: "Parfois il nous faut du calme pour collaborer. Et parfois, il nous faut de l'ébullition pour avancer : c'est le bon moment pour vous plonger dans la vie trépidante d'Animacoop !", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#capitaleanimacoop", color: "blue", link_text:"Prêt pour la capitale ?", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_capitale_20201210142611_20201210143205.jpg" }, { x: "50%", y: "45%", title: "Lac des communs", description: "Texte : La découverte paisible du Lac des Communs va vous faire rentrer dans le monde des biens communs où le collectif est la meilleure solution pour gérer les ressources", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#lacdescommuns", color: "red", link_text:"Les différentes ambiances", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_lac_vignette_300_209_20201210135139_20201210135557.jpg" }, { x: "69%", y: "52%", title: "Fôret des outils", description: "Un petit guide est à votre disposition pour découvrir la diversité des espèces d'outils", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#foretdesoutils", color: "blue", link_text:"Venez vous balader !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_foret_vignette_300_209_20201210140642_20201210142044.jpg" }, { x: "85%", y: "52%", title: "Les ruines du monde pyramidal", description: "Venez vous plonger dans le passé où la hiérarchie primait sur les décisions collectives", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#ruinesdumondepyramidal", color: "orange", link_text:"Le monde d'avant !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_ruines_pyramide_20201210143849_20201210144114.jpg" }, { x: "50%", y: "66%", title: "Champs des idées : Auberge des observatoros", description: "...", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#aubergedesobservators", color: "black", link_text:"Parlez-vous la langue ?", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "80%", y: "75%", title: "Port de la rétrospective : Où manger?", description: "...", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#oumanger", color: "purple", link_text:"A table !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "96%", y: "58%", title: "Phare de l'espérance : Où boire?", description: "...", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#ouboire", color: "purple", link_text:"Tchin !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" } ] }; window.onload = function() { var counter = 0; var svg = document.getElementById("mySvg"); var main = document.getElementById("myDiv"); jsonObj.points.forEach(point => { var child = `<a class="button" href="#popup${counter}"> <circle cx="${point.x}" cy="${point.y}" r="10" fill="${point.color}" stroke="#777" stroke-width="1.9"/> </a>`; var popup = `<div id="popup${counter}" class="overlay_bg"> <a href="#" class="overlay_exit_link"/> <div class="popup_page"> <a class="close_button" href="#">×</a> <div class="popup_content"> <h2 class="content__title">${point.title}</h2> <a class="content__link" href="${point.link}"> <img class="content__image" src="${point.image}" alt="some_alt"/> </a> <p class="content__description">${point.description}</p> <a class="content__button" href="${point.link}" target="blank">${point.link_text}</a> </div> </div>` svg.insertAdjacentHTML( 'beforeend', child ); main.insertAdjacentHTML( 'beforeend', popup ); counter++; }) }; </script> "" Partenaire : Nous sommes fiers de collaborer avec nos partenaires pour offrir des [[https://dev-maxime-guinard.fr/agence-seo/ solutions numériques innovantes et performantes]].
Sauver
Annuler
Thème
Protection anti-spam active
×
{{ actionGroup.label }}
Choisissez un Formulaire
{{ name }}
{{ needFormField ? 'Sous quelle forme voulez-vous afficher les données?' : 'Actions' }}
{{ action.label }}
{{ selectedAction.hint }}
{{ panel.params.title ? panel.params.title : 'Paramètres'}}
Code à include dans la page
×
Apparence de la page CarteDécouverte
Thème
base
bootstrap3
city
colibris
enercoop
far
margot
organic
pactecivique
yeswiki
Squelette
1col.tpl.html
2cols-left.tpl.html
2cols-right.tpl.html
Style
city.css
Paramètres avancés
Langue de la page
Català
English
Español, castellano
Français
Nederlands, Vlaams
Português
Choisir une page pour:
le menu horizontal
les raccourcis en haut à droite
l'entête (bandeau)
le pied de page
le menu vertical
Configuration graphique
×