8 files changed, 134 insertions, 20 deletions

diff --git a/data/bingo_data.txt b/data/bingo_data.txt
index fbd3c07..92136b7 100644
--- a/data/bingo_data.txt
+++ b/data/bingo_data.txt
@@ -13,7 +13,7 @@
 "Allaitement","Ça abîme les seins.","Je ne savais pas que tu t'intéressais de si près à ma poitrine...","Je fais ce que je veux de mes nichons !"
 "Allaitement","Il faut espacer les tétées !","Surtout espacer le plus possible ce genre de remarque..."
 "Allaitement","Tu es fatiguée à cause de l'allaitement !","Surtout à cause de ce genre de remarque..."
-"Allaitement","...comparaison avec une vache à lait.","C'est toi qui es vache !","C'est la vache qui est une mère.","De quoi j'mammelle ?","Ben non, mon enfant n'est pas un veau !"
+"Allaitement","...comparaison avec une vache à lait.","De quoi j'mammelle ?","C'est toi qui es vache !","C'est la vache qui est une mère.","Ben non, mon enfant n'est pas un veau !","Meuuuuuh !"
 "Allaitement","Ça ne te fait pas mal ?","Si, mais tu sais que j'ai des penchants masochistes..."
 "Allaitement","Tu l'allaites encore ?","Ah non pas du tout pourquoi ?","Non, là j'accorde mon moteur de tracteur en la bémol","Ouais, t'en veux ?","Bah mon mari a essayé aussi, mais le bébé a pas aimé le goût, alors...","Non, j'ai arrêté il y a un bon bout de temps mais mon enfant continue..." 
 "Allaitement","Et la place du papa ?","Oh on a essayé, mais il ne produisait pas assez de lait."
diff --git a/data/changelog_data.txt b/data/changelog_data.txt
index d62ed50..5663eec 100644
--- a/data/changelog_data.txt
+++ b/data/changelog_data.txt
@@ -1,3 +1,8 @@
+"Version 0.25","30/07/2021","<ul>
+<li>Possibilité de sauvegarder les cases cochées (JS)</li>
+<li>Un peu d'efforts sur le CSS, quand même.</li>
+</ul>"
+
 "Version 0.21","29/07/2021","<p>Page ajoutée pour avoir la liste des répliques</p>"
 
 "Version 0.2","28/07/2021","<p>Mise en ligne de la bêta, c'est en cours !</p>
diff --git a/static/style.css b/static/style.css
index 3fc08f7..a35e7e7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,6 +1,56 @@
+/* général */
+body {
+        background-color: #CED6EB;
+        font-family: Sans-serif ;
+        margin-left: 2rem ;
+        margin-right: 2rem ;
+}
+
+h1 {
+        border-radius: 50px 20px ;
+        border: 5px solid #AA0000;
+        background: rgba(255, 255, 255, 0.5) ;
+        display: inline-block ;
+        padding-top: 20px ;
+        padding-bottom: 20px ;
+        padding-left: 30px ;
+        padding-right: 30px ;
+        color: #660000 ;
+        font-family: Fantasy ;
+        text-transform: uppercase;
+}
+
+h2, h3, h4, h5{
+        color: #660000 ;
+}
+
+hr {
+        color: #660000 ;
+        margin-left: 30px ;
+        margin-right: 30px ;
+}
+
+.titre {
+        text-align: center ;
+}
+
+nav {
+        position: fixed;
+        bottom: 1px;
+        border:solid 1px #660000 ;;
+        padding: 4px;
+        text-align: center ;
+        background-color: #BBD6E7 ;
+}
+
+#findepage {
+        margin-bottom: 100px;
+}
+
 /* Styles divers */
 .cliquable {
         text-decoration: underline;
+        font-size: 1rem ;
 }
 .cliquable:hover {
         cursor: pointer;
@@ -10,14 +60,55 @@
         font-size: 0.8em;
 }
 
+.toutpetit {
+        font-size: 0.6em ;
+}
+
+.lientop {
+        color: inherit ;
+}
+
+.score {
+        background-color: #746FF0 ;
+        border-radius: 5px ;
+        border: 1px solid black ;
+        padding: 10px ;
+        margin: 20px ;
+}
+
+
+span.reset {
+        background-color: #F6AC8E ;
+}
+
+div.reset {
+        margin-bottom: 2em ;
+}
+
+.bouton {
+        border-radius: 20px ;
+        border: 1px solid black ;
+        padding: 10px ; 
+        margin-left: 10px ;
+}
+
+
+
+.liensperma {
+        text-align: center ;
+}
 
 /* Grille du bingo */
 #grille {
-        background-color: #F8F8F8 ;
+        background-color: #746FF0 ;
         padding: 1px ;
-        margin: 30px ;
+        margin-left: 20px ;
+        margin-right: 20px ;
+        margin-top: 20px ;
+        margin-bottom: 20px ;
         border: 1px solid black ;
         table-layout: fixed;
+        border-radius: 5px ;
 }
 
 #grille td {
@@ -45,9 +136,18 @@
 
 /* Formulaire page custom */
 .texte {
-        width:20em
+        width:30rem
 }
 
 .data {
-        width:3em
+        width:3rem
+}
+
+input {
+        background-color: #F0F3FA ;
+        font-size: 1rem ;
+}
 
+.veuxgrille {
+        background-color: #A889E8 ;
+}
diff --git a/templates/apropos.html b/templates/apropos.html
index 4ee449f..413e011 100644
--- a/templates/apropos.html
+++ b/templates/apropos.html
@@ -1,20 +1,21 @@
 {% extends "base.html" %}
 {% block contenu %}
+<div class="titre">
 <h1>Bingo de l'allaitement (ou autre), infos</h1>
+</div>
 
 <div id="contenu">
         
         <h2>C'est quoi ce truc ?</h2>
 
-<p>Jeune maman (ou jeune papa) tu en as assez des remarques aussi inutiles que désagréables sur ta façon de t'occuper de TES enfants ? « Mais tu vas l'allaiter jusqu'à quand ? », « Laisse-le pleurer, il finira par s'endormir », « Le bébé de Untel, il fait ses nuits, LUI », etc etc. Sache bien une chose : tu n'es pas seul(e) :). Et tous ces charmants "conseils" (hem hem) remarques sont régulièrement "offertes" par la famille, les inconnus, ou même le personnel médical et merci, on s'en passerait bien !</p>
-
-<p>Crée ton bingo personnalisé, et emporte-le avec toi la prochaine fois que tu vas voir belle-maman, le médecin, la voisine qui radote, etc. Coche les cases quand tu entends les remarques débiles et crie « Bingo ! » quand tu complètes une ligne devant le regard médusé de ton interlocuteur. Tu peux même jouer avec tes potes parents à qui fait le meilleur score !</p>
+<p>Jeune maman (ou jeune papa) tu en as assez des remarques aussi inutiles que désagréables sur ta façon de t'occuper de TES enfants ? « Mais tu vas l'allaiter jusqu'à quand ? », « Laisse-le pleurer, il finira par s'endormir », « Le bébé de Untel, il fait ses nuits, LUI », etc etc. Sache bien une chose : tu n'es pas seul(e) :). Et tous ces charmants "conseils" (hem hem) nous sont régulièrement "offerts" par la famille, les inconnus, ou même le personnel médical ; et merci, on s'en passerait bien !</p>
 
-<p>Il/elle ne comprendra pas pourquoi, mais au moins tu auras rigolé un bon coup !</p>
+<p>Crée ton bingo personnalisé, et emporte-le avec toi la prochaine fois que tu vas voir belle-maman, le pédiatre vieux-jeu, la voisine qui radote, etc. Coche les cases quand tu entends les remarques débiles et crie « Bingo ! » quand tu complètes une ligne devant le regard médusé de ton interlocuteur. Tu peux même jouer avec tes ami(e)s à qui fait le meilleur score !</p>
 
-<p>Remarque importante si l'allaitement n'est pas ton truc : ceci n'a absolument pas pour but de faire culpabiliser celles et ceux qui donnent le biberon, ce n'est absolument pas le sujet ! On fait ce qu'on veut avec ses propres nichons, et les parents prennent leur décision "au mieux" en fonction de ce qu'ils souhaitent et peuvent pour leur bébé d'amour. Sein ou pas, vous êtes des parents formidables, si si !</p>
+<p>Ça ne changera probablement pas son attitude, ni le monde, mais au moins tu auras rigolé un bon coup ! :)</p>
 
-<p>Mais de toutes façons, tu as dû le remarquer, qu'on allaite ou pas, il y aura toujours des gens qui font des remarques idiotes et pleines de jugement, sous prétexte de nous "aider". Envoyez-moi vos remarques débiles catégorie "biberon" je les ajoute avec plaisir !
+<p>Remarque importante si l'allaitement n'est pas ton truc : ceci n'a absolument pas pour but de faire culpabiliser celles et ceux qui donnent le biberon, promis ! On fait ce qu'on veut avec ses propres nichons, et les parents prennent leur décision "au mieux" en fonction de ce qu'ils souhaitent et peuvent pour leur bébé d'amour. Sein ou pas, tu es certainement une maman ou un papa formidable, si si !
+<br>C'est juste qu'ayant moi-même allaité, je n'ai pas reçu de remarque cinglante et désagréable sur le biberon. Mais je ne doute pas qu'il y en ait, et je ne serais pas surprise que ces mêmes gens pénibles savent faire des remarques tout aussi assassines sur le biberon. Envoie-moi tes remarques dans la catégorie "biberon" et je les ajoute avec plaisir !
 </p>
 
         <h2>Ça marche comment ?</h2>
diff --git a/templates/base.html b/templates/base.html
index a3f57d1..e647237 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -15,10 +15,10 @@
                 
                 {% block contenu %}{% endblock %}
                 
-        <hr>
+        <hr id="findepage">
 <div id="basdepage">
                 <nav>
-                <a href="/">Grille aléatoire</a> |
+                <a href="/">Jouer (grille aléatoire)</a> |
                 <a href="/custom">Créer une grille personnalisée</a> |
                 <a href="/liste">Liste complète des remarques</a> |
                 <a href="/apropos">À propos</a> 
diff --git a/templates/custom.html b/templates/custom.html
index 1ad1324..17047cc 100644
--- a/templates/custom.html
+++ b/templates/custom.html
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% block contenu %}
+<div class="titre">
 <h1>Créer une grille personnalisée</h1>
+</div>
 
 {% if e | length >0 %}
 <div id="erreurs">
@@ -45,7 +47,7 @@
         
 </ul>
 
-<input type="submit" name="zou" value="Je veux une grille !">
+<input type="submit" name="zou" class="bouton veuxgrille cliquable" value="Je veux une grille !">
 
 </form>
 
diff --git a/templates/index.html b/templates/index.html
index f97ec5f..b43f63e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -18,7 +18,9 @@ window.onload = function charger() {
 
 </script>
 
+<div class="titre">
 <h1>{{ conf.titre }}</h1>
+</div>
 
 {% if e | length >0 %}
 <div id="erreurs">
@@ -36,6 +38,9 @@ window.onload = function charger() {
 <p>Clique sur la case dès que tu entends une de ces répliques idiotes et essaie de faire le meilleur score !</p>
 {% if conf.reponses_presentes %}
 <p>Un deuxième clic permet d'afficher (ou de masquer) une réponse épique (ou pas).</p>{%endif %}
+
+<div> <span class="score">Score : <span id="score">0</span></span></div>
+
 <table id="grille">
 {% for ligne in bingo %}
 <tr>{% for elt in ligne %}
@@ -55,14 +60,13 @@ window.onload = function charger() {
 {% endfor %}
 </table>
 
-<p>Score : <span id="score">0</span></p>
-
-<p onclick="effacegrille()" class="cliquable">Effacer la grille</p>
+<div class="reset"> <span onclick="effacegrille()" class="cliquable reset bouton">Effacer la grille</span></div>
 
 <hr>
+<div class="liensperma">
 <a href="/?grille={{ chainecode }}" id="permalien">Lien permanent (grille vide)</a> |
 <a href="/?grille={{ chainecode }}" id="permalien_infosjeu">Lien permanent (grille remplie)</a>
-
+</div>
 
 </div>
 
diff --git a/templates/liste.html b/templates/liste.html
index 8d87d12..e7cc53e 100644
--- a/templates/liste.html
+++ b/templates/liste.html
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% block contenu %}
+<div class="titre">
 <h1>Liste des répliques</h1>
+</div>
 <p>Pour se préparer au maximum avant, ou rigoler comme un(e) andouille...</p>
 
 <div id="contenu">
@@ -16,12 +18,12 @@
 {% for i in range(lcateg|length) %}
 {% set qr = tableqr[i] %}
 
-<h3 id="{{ lcateg[i] }}">{{ lcateg[i] }}</h3>
+<h3 id="{{ lcateg[i] }}">{{ lcateg[i] }} <a class="lientop" href="#">&#9650;</a></h3>
 <ul>
         {% for i in range (qr | length) %}
         {% set (q, r) = qr[i] %}
         <li>{{ q }} 
-        {% if r | length > 0 %}<span class="petit"><span onclick='affiche_cache(this.parentNode.parentNode.children[1], this)' class="cliquable">Afficher</span> le(s) réponse(s) de choc.</span>
+        {% if r | length > 0 %}<span class="petit"><span onclick='affiche_cache(this.parentNode.parentNode.children[1], this)' class="cliquable petit">Afficher</span> le(s) réponse(s) de choc.</span>
         <ul class="reponse">
                 {% for elt in r %}
                         <li>{{ elt }}</li>