portail/site/index.html
2019-08-19 17:09:45 +08:00

320 lines
14 KiB
HTML

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Les Crapauds fous</title>
<meta name="description" content="La Fable Moderne d'un Monde Libre et juste un peu Fou">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="twitter:title" content="Les Crapauds fous">
<meta name="twitter:domain" content="crapaud-fou.org">
<meta name="twitter:description" content="La Fable Moderne d'un Monde Libre et juste un peu Fou">
<meta property="og:locale" content="fr_FR">
<meta property="og:type" content="article">
<meta property="og:title" content="Les Crapauds fous">
<meta property="og:description" content="La Fable Moderne d'un Monde Libre et juste un peu Fou">
<meta property="og:url" content="https://crapaud-fou.org/index.html">
<meta property="og:site_name" content="Les Crapauds Fous">
<meta property="og:image" content="images/crapaud_fou_sourire.jpg">
<meta property="og:video" content="https://www.youtube.com/embed/ZV4zuepujSc">
<link rel="canonical" href="https://crapaud-fou.org/">
<link rel="shortcut icon" href="images/crapovecto_small.svg">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="crapaud-fou.css" type="text/css">
</head>
<body>
<div class="container-fluid p-0 header">
<div class="container">
<div class="row pt-2 pb-2">
<div class="col-12">
<img src="images/crapovecto_small.svg" height="64" class="float-left" />
La mare des crapauds fous est un lieu de rencontre et de collaboration sur des sujets divers comme: écologie réelle, neurodiversité, éducation alternative, dégafamisation, logiciel libre, végétalisation urbaine, intelligence collective, parentalité responsable, monnaies libres, gouvernances partagées, open hardware, lutte contre l'obsolecense, permaculture, santé raisonnée, inclusion sociale, et beaucoup d'autres sujets.
</div>
</div>
</div>
</div>
<div class="container-fluid entete pt-2 pb-2 mb-3">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 col-lg-4">
<h2 class="card-title mt-0">Les crapauds fous</h4>
<p>Face aux dangers qui pèsent sur notre avenir, seul un grain de folie peut nous sortir de l'ornière (et de la déprime passive).</p>
<p>En avril 2017, une trentaine de personnes se reunissent aux Treilles et donnent naissance au manifeste des Crapauds Fous.</p>
</div>
<div class="col-12 col-md-4 col-lg-3">
<h2>&nbsp;</h2>
<ul>
<li><a href="">Le manifeste</a></li>
<li><a href="">Compte Rendu</a></li>
<li><a href="">Les 3 tsunamis</a></li>
<li><a href="">9 cercles de reflexion</a></li>
<li><a href="">Le manifeste en librairie</a></li>
</ul>
</div>
<div class="col-12 col-lg-5 align-middle">
<iframe width="420" height="240" sandbox="allow-same-origin allow-scripts" src="https://thinkerview.video/videos/embed/5417c4b5-38ce-4e69-bbc7-19335ade44e4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card idees">
<div class="card-body">
<div class="link">
<h5 class="card-title text-center">
Avoir des idées ...<br>
<a href="https://idees.crapaud-fou.org" class="badge badge-success stretched-link">https://idees.crapaud-fou.org</a>
</h5>
<p>Les idées folles ne sont que des rêves tant qu'on ne les explique pas. Notre boite à idées part du principe qu'il n'y a pas d'idée stupide.</p>
</div>
<div class="row mb-3">
<div class="col stats">
<div class="stats-title">Depuis novembre 2017</div>
<div class="total">
<div title="Nombre de comptes ouverts"><span class="nombre crapauds">0</span> crapauds</div>
<div title="Nombre d'idées proposées"><span class="nombre idees">0</span> idées</div>
<div title="Nombre de commentaires sur les idées proposées"><span class="nombre commentaires">0</span> commentaires</div>
</div>
</div>
<div class="col stats">
<div class="stats-title">Sur les 30 derniers jours</div>
<div class="recent">
<div title="Nombre d'utilisateurs s'étant connecté au moins une fois"><span class="nombre crapauds">0</span> crapauds actifs</div>
<div title="Nombre d'idées récentes"><span class="nombre idees">0</span> nouvelles idées</div>
<div title="Nombre de nouveaux commentaires"><span class="nombre commentaires">0</span> commentaires</div>
</div>
</div>
</div>
<div>
<div>Les dernières idées ajoutées</div>
<div>
<ul>
</ul>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary btn-outline btn-block" data-toggle="modal" data-target="#helpid">Comment proposer une idée</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card chat">
<div class="card-body">
<div class="link">
<h5 class="card-title text-center">
... en discuter ...<br>
<a href="https://coa.crapaud-fou.org" class="badge badge-success stretched-link">https://coa.crapaud-fou.org</a>
</h5>
<p>Cet espace de discussion en temps réel est un vrai espace social, pour débattre et partager. C'est là qu'on trouve la force du lien avec les autres crapauds.</p>
</div>
<div class="row mb-3">
<div class="col stats">
<div class="stats-title">Depuis novembre 2017</div>
<div class="total">
<div><span class="nombre crapauds">0</span> crapauds</div>
<div><span class="nombre canaux">0</span> canaux</div>
<div><span class="nombre messages">0</span> messages</div>
</div>
</div>
<div class="col stats">
<div class="stats-title">Sur les 30 derniers jours</div>
<div class="recent">
<div><span class="nombre crapauds">0</span> crapauds actifs</div>
<div><span class="nombre canaux">0</span> canaux actifs</div>
<div><span class="nombre messages">0</span> messages</div>
</div>
</div>
</div>
<div>
<div>Les 10 canaux les plus actifs sur 30 jours</div>
<div>
<ul class="list">
</ul>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary btn-outline btn-block" data-toggle="modal" data-target="#helpchat">Les premiers pas dans le Chat</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card wiki">
<div class="card-body">
<div class="link">
<h5 class="card-title text-center">
... et agir!<br>
<a href="https://wiki.crapaud-fou.org" class="badge badge-success stretched-link">https://wiki.crapaud-fou.org</a>
</h5>
<p>Le wiki permet de formaliser des plans d'action mais aussi et surtout de partager les méthodes pour que tout le monde puisse en profiter.</p>
</div>
<div class="row mb-3">
<div class="col stats">
<div class="stats-title">Depuis mars 2018</div>
<div class="total">
<div><span class="nombre crapauds">0</span> crapauds</div>
<div><span class="nombre pages">0</span> pages</div>
<div><span class="nombre photos">0</span> photos</div>
</div>
</div>
<div class="col stats">
<div class="stats-title">Sur les 30 derniers jours</div>
<div class="recent">
<div><span class="nombre crapauds">0</span> crapauds actifs</div>
<div><span class="nombre pages">0</span> pages modifiées</div>
<div><span class="nombre photos">0</span> nouvelles photos</div>
</div>
</div>
</div>
<div>
<div>Les dernières pages modifiées</div>
<ul>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
<li><a href="">#general</a></li>
</ul>
</div>
<div>
<button type="button" class="btn btn-outline-primary btn-outline btn-block" data-toggle="modal" data-target="#helpwiki">Mode d'emploi du wiki</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src="images/cohortes.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4>Cohortes de crapauds fous</h4>
<p>Quand on ne suit pas le troupeau, on peut parffois se sentir un peu seul. Les cohortes sont des groupes locaux qui se rencontrent de temps en temps pour échanger, en dehors de l'internet.</p>
<p>Suivez leur activité sur la <a href="https://wiki.crapaud-fou.org/Cohortes">page wiki des cohortes</a>.</p>
<p>Chaque cohorte a aussi en général un canal dedié dans le chat. Regardez un peu sur la <a href="https://framacarte.org/fr/map/crapauds-fous_26200#6/49.354/7.866">framacarte des crapauds fous</a> peut-etre qu'il y a du monde pas loin de chez vous.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src="images/rencontres.jpg" class="card-img-top" alt="Rencontre des Treilles, avril 2017">
<div class="card-body">
<h4>Rencontres et evenements</h4>
<p></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h4>Cratube</h4>
</div>
</div>
<div class="modal fade" id="helpid" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Comment proposer une idée</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpchat" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Les premiers pas dans le Chat</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpwiki" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Mode d'emploi du Wiki</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid footer mt-5">
<div class="container pt-5 pb-3">
<div class="row">
<div class="col">
Non, il n'y a pas de page facebook.
</div>
<div class="col text-right">
Fait avec les doigts.
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="crapaud-fou.js"></script>
</body>
</html>