crapaud-fou/portail
2
0
Fork 0
Code Issues 1 Pull requests Releases Activity

Merge branch 'master' into update_chat_info

Browse source
This commit is contained in:
Mickael 2019-08-17 17:31:17 +02:00
commit 4bac49679a
6 changed files with 354 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
scripts/generate.sh
View file

@ -2,6 +2,7 @@
pip3 install -r requirements.txt
# idees
cp ./site/data/idees.sample.json ./site/data/idees.json
# chat
python3 ./script/generate_chat_info.py

52
site/crapaud-fou.css
View file

@ -1,11 +1,57 @@
.header {
background-color: #28a745;
padding-left: 5em;
font-size: .9em;
}
.header img {
position: absolute;
top: .1em;
left: .1em;
}
.entete {
background-color: rgb(36, 33, 32);
color: rgb(240, 233, 233);
}
.entete a, .footer a {
color: rgb(49, 167, 96);
}
.entete a:hover, .footer a:hover {
color: rgb(135, 243, 178);
}
.footer {
background-color: rgb(36, 33, 32);
color: rgb(240, 233, 233);
}
a {
color: #496;
color: rgb(59, 129, 87);
}
a:hover {
color: #162;
color: rgb(31, 73, 48);
}
ul {
list-style-position: inside;
padding-left: 0px;
}
li {
padding-left: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
list-style-type: square;
}
.card li:hover {
overflow: visible;
text-overflow: initial;
position: relative;
z-index: 99;
width: 100%;
}
.card li:hover a {
background-color: #fff;
padding-right: 1em;
}
.card:hover {
border: 1px solid #333;
border: 1px solid rgb(36, 33, 32);
box-shadow: -3px 3px 10px 2px #aaa;
}
.card-title {

27
site/crapaud-fou.js
View file

@ -1,4 +1,5 @@
$(document).ready(function() {
// chat
$.getJSON("data/chat.json", function(data) {
$(".chat .total .crapauds").text(data.crapauds.total);
$(".chat .total .canaux").text(data.canaux.total);
@ -15,15 +16,25 @@ $(document).ready(function() {
var li = $("<li>").append(link);
$(".chat ul").append(li);
});
console.log(data);
});
$(".chat").click(function(e) {
console.log(e.currentTarget);
// window.location = "https://coa.crapaud-fou.org";
// idees
$.getJSON("data/idees.json", function(data) {
$(".idees .total .crapauds").text(data.crapauds.total);
$(".idees .total .idees").text(data.idees.total);
$(".idees .total .commentaires").text(data.commentaires.total);
$(".idees .recent .crapauds").text(data.crapauds.recent);
$(".idees .recent .idees").text(data.idees.recent);
$(".idees .recent .commentaires").text(data.commentaires.recent);
$(".idees ul").text("");
$.each(data.idees.liste, function(index, idee) {
var link = $("<a>")
.attr("href", "https://idees.crapaud-fou.org/" + index)
.attr("class", "list-item")
.text(idee);
var li = $("<li>").append(link);
$(".idees ul").append(li);
});
});
$(".chat button").click(function(e) {
e.preventDefault();
});
});

26
site/data/idees.json Normal file
View file

@ -0,0 +1,26 @@
{
"crapauds": {
"total": 457,
"recent": 23
},
"idees": {
"total": 182,
"recent": 5,
"liste": {
"1674": "Démarrer un système (en partie) non monétaire, simultanément et par dizaine de milliers",
"1671": "Blueforest - une force commune pour la prise de conscience écologique.",
"1620": "Construire la Civilisation Humanité",
"1597": "Embarquer, organiser et coordonner un collectif de Paumé.e.s près à basculer pour le changement !",
"1573": "... et si on explorait une MACHINE DE VOTE MECANIQUE d'abord - recherche ingés mécanique-robotique",
"1567": "Site contre les violences gynecologiques et ou médicales",
"1564": "La Bascule - lobby citoyen",
"1559": "Informer et stimuler la réflexion",
"1538": "Textes à \"méditer\"",
"1524": "Protéger un maximun d'écosystèmes et de biodiversité sur le territoire français de façon pérenne"
}
},
"commentaires": {
"total": 566,
"recent": 12
}
}

26
site/data/idees.sample.json Normal file
View file

@ -0,0 +1,26 @@
{
"crapauds": {
"total": 457,
"recent": 23
},
"idees": {
"total": 182,
"recent": 5,
"liste": {
"1674": "Démarrer un système (en partie) non monétaire, simultanément et par dizaine de milliers",
"1671": "Blueforest - une force commune pour la prise de conscience écologique.",
"1620": "Construire la Civilisation Humanité",
"1597": "Embarquer, organiser et coordonner un collectif de Paumé.e.s près à basculer pour le changement !",
"1573": "... et si on explorait une MACHINE DE VOTE MECANIQUE d'abord - recherche ingés mécanique-robotique",
"1567": "Site contre les violences gynecologiques et ou médicales",
"1564": "La Bascule - lobby citoyen",
"1559": "Informer et stimuler la réflexion",
"1538": "Textes à \"méditer\"",
"1524": "Protéger un maximun d'écosystèmes et de biodiversité sur le territoire français de façon pérenne"
}
},
"commentaires": {
"total": 566,
"recent": 12
}
}

410
site/index.html
View file

@ -21,11 +21,11 @@
<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="https://crapaud-fou.org/images/crapaud_fou_sourire.jpg">
<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="https://crapaud-fou.org/images/crapovecto_small.svg">
<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">
@ -34,193 +34,222 @@
</head>
<body>
<div class="container-fluid p-0 header">
<img src="images/crapovecto_small.svg" height="90" class="float-left" />
<div class="container">
<div class="row pt-2 pb-2">
<div class="col">
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">
<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">
<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 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">
<div class="media">
<div class="media-body">
<h4 class="mt-0">Les crapauds fous</h4>
<p>Face aux dangers qui pèsent sur notre avenir, un grain de folie peut nous sortir de la depression.
</div>
<img src="images/crapovecto_small.svg" height="180"/>
</div>
</div>
<div class="col">
<h5 class="card-title">Le manifeste des crapauds fous</h5>
<p>En mai 2017, une trentaine de personnes se reunissent aux Treilles et donnent naissance au manifeste des Crapauds Fous.</p>
<p>
<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 class="row">
<div class="col-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>
</p>
<div class="col">
<iframe width="540" height="315" sandbox="allow-same-origin allow-scripts" src="https://thinkerview.video/videos/embed/5417c4b5-38ce-4e69-bbc7-19335ade44e4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col">
<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 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 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>
<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>
<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">
<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>Cette 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>Les dernières idées ajoutées</div>
<div>
<ul>
</ul>
</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> nouveaux messages</div>
</div>
</div>
</div>
<div>
<div>Les canaux les plus actifs sur 30 jours</div>
<div>
<ul class="list">
</ul>
<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>
<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 class="col">
<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> nouveaux messages</div>
</div>
</div>
</div>
<div>
<div>Les 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">
<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>
<div class="col">
<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 class="row mt-4">
<div class="col">
<div class="card">
<div class="card-body">
<img src="" class="card-img-top" alt="...">
<h4>Les 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">
<h4>Rencontres et evenements</h4>
<p></p>
</div>
<div class="col">
<h4>Cratube</h4>
</div>
</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 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>
@ -229,10 +258,17 @@
<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>
<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>
@ -241,10 +277,30 @@
<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>
<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>