Merge branch 'master' into update_chat_info

scripts/generate.sh

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

site/crapaud-fou.css

@@ -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 {

site/crapaud-fou.js

@@ -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) {
+  // idees
-    console.log(e.currentTarget);
+  $.getJSON("data/idees.json", function(data) {
-    // window.location = "https://coa.crapaud-fou.org";
+    $(".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();
   });
 
 });

site/data/idees.json

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

site/data/idees.sample.json

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

site/index.html

@@ -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,22 +34,28 @@
 </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">
-      <div class="media">
+          <h2 class="card-title mt-0">Les crapauds fous</h4>
-        <div class="media-body">
+          <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>
-        <h4 class="mt-0">Les crapauds fous</h4>
+          <p>En avril 2017, une trentaine de personnes se reunissent aux Treilles et donnent naissance au manifeste des Crapauds Fous.</p>
-        <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>
+          <h2>&nbsp;</h2>
-          <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>
@@ -58,15 +64,18 @@
             <li><a href="">Le manifeste en librairie</a></li>
           </ul>
         </div>
-          </p>
+        <div class="col align-middle">
-    <div class="col">
+          <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>
-      <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>
+  </div>
+
+  <div class="container">
 
     <div class="row">
-    <div class="col">
+      <div class="col-4">
         <div class="card idees">
           <div class="card-body">
             <div class="link">
@@ -99,25 +108,17 @@
               <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">
@@ -126,7 +127,7 @@
                 ... 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>
+              <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">
@@ -212,6 +213,26 @@
       </div>
     </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 class="modal fade" id="helpid" tabindex="-1" role="dialog">
       <div class="modal-dialog" role="document">
@@ -222,6 +243,14 @@
               <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>
 
@@ -234,6 +263,13 @@
             <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>
 
@@ -246,6 +282,26 @@
             <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>