Update README

Reviewed-on: #12
Reviewed-by: VincentP <vincent-peugnet@riseup.net>

README.md

@@ -38,3 +38,7 @@ PDF can be generated thanks to `pandoc` and the good old `curl` this way:
 ```sh
 curl -s https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw/download | pandoc -V geometry:margin=3cm -o assets/Camp-Interhack_Statuts.pdf
 ```
+
+## Generation de la page Guide.
+
+La page Guide est générée depuis un Hedgedocs, en markdown, via le fichier update-guide.sh qui utilise le fichier guide.template.html. Le contenu de la page est donc un HTML basique in fine.

assets/hackstub.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" height="789.98999" width="898.789" id="logo" sodipodi:docname="logo.svg" inkscape:version="0.92.1 r15371">
+  <metadata id="metadata41">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs39"/>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1051" id="namedview37" showgrid="false" inkscape:snap-page="true" inkscape:snap-bbox="true" inkscape:bbox-nodes="true" inkscape:zoom="0.855" inkscape:cx="500" inkscape:cy="406.43275" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="logo"/>
+  <style type="text/css" id="style2"><![CDATA[ polygon { fill:#ffffff; stroke-width:0; } ]]></style>
+  <path d="M 435.52926,-1.1488281e-4 404.34957,17.999885 V 133.40419 l -137.20703,80.65234 -0.10351,-0.0566 -15.24805,9.08203 -15.58203,9.1582 v 0.11915 l -0.0996,0.0605 0.23633,17.40039 0.14453,18.41992 0.10742,0.0605 0.002,0.11914 15.58789,8.7207 15.6211,8.85938 0.10351,-0.0605 136.4375,76.33985 v 80.66015 l -137.24219,81.09961 -0.0684,-0.0391 -17.12891,10.20117 -13.74024,8.11914 v 0.0625 l -0.0605,0.0371 0.25,18.31836 0.17969,17.57227 0.0586,0.0332 0.002,0.0762 15.86524,8.87696 15.42383,8.70312 0.0644,-0.0371 105.50586,59.0332 -135.43946,81.58399 0.66993,36 31.50976,17.41015 181.21875,-109.16015 0.14258,-0.084 15.14838,-8.74603 v -0.27734 l 0.24023,-0.14258 -0.002,-0.10547 0.0918,-0.0547 -0.33008,-17.70508 v -175.2012 l 64.91992,-38.36133 136.80078,79.79883 v 0.18945 l 15.69922,8.96876 15.24023,8.89062 0.16016,-0.0918 0.16016,0.0918 15.23437,-8.88672 15.70508,-8.97266 v -0.18945 l 137.0606,-79.95117 31.09961,-18.14062 -0.16016,-36 -167.91992,-95.95118 v -115.9082 l -31.17969,-18 -31.17969,18 v 116.09375 l -0.0801,0.0469 0.0801,18 v 139.5781 l -105.82617,-61.73242 -0.004,-0.29688 -15.45898,-8.72265 -15.37109,-8.9668 -0.25782,0.14844 -0.26172,-0.14844 -15.14843,8.95117 -15.5918,8.90821 -0.002,0.30664 -33.71875,19.92578 v -44.36914 l 0.24023,-0.14258 -0.24023,-17.64063 V 209.48622 l 135.12114,76.51367 31.0293,-18.25977 -0.30078,-36 -138.76563,-78.57812 101.05664,-59.402345 -0.28125,-36 -31.31836,-17.75977 -96.54101,56.74805 V 17.999885 Z M 404.34957,205.73817 v 85.08984 l -74.16211,-41.49609 z m -372.820304,26.26172 -31.17968777,18 V 383.85731 L -3.0767578e-5,401.36903 0.34957823,401.57997 v 194.41992 l 31.17968777,18 31.179686,-18 V 402.41786 l 75.640618,-41.65039 v 123.65625 l -0.35937,0.21679 0.35937,17.51954 v 17.83984 l 0.3711,0.21289 0.008,0.41797 15.30664,8.42383 15.49414,8.94531 0.36914,-0.21289 0.37109,0.20312 15.10938,-9.14062 15.32989,-8.84961 v -0.42383 l 146.57422,-88.66797 15.21679,-8.55859 0.008,-0.65039 0.56054,-0.33984 -0.35742,-17.45704 0.19922,-17.54296 -0.56641,-0.33594 -0.0137,-0.6543 -15.30078,-8.42187 -146.32031,-86.71289 v -0.23438 l -15.42188,-8.9043 -15.02734,-9.08593 -0.1582,0.0859 -0.16211,-0.0957 -0.20704,0.11719 -0.20312,-0.11719 -15.45898,8.92578 -91.361328,50.3086 v -81.23435 z m 699.179684,129.72852 74.46679,42.55078 -74.46679,43.43945 z m -530,0.98828 70.1289,41.55859 -70.1289,42.42383 z m 203.64062,152.64648 v 85.46484 l -74.28906,-41.5664 z" id="polygon4" style="fill:#ffffff;fill-opacity:1" inkscape:connector-curvature="0"/>
+</svg>

css/base.css

@@ -18,22 +18,28 @@ html, body {
     margin: 0;
 }
 
+img {
+    max-width: 100%;
+}
+
 a {
     text-decoration: none;
     color: black;
 }
 
 main {
-    background-color: #413f43;
+    /* background-color: #413f43;*/
-    background-image: url(../assets/background.jpg);
+    background: #058C9E;
-    background-repeat: no-repeat;
+    background: radial-gradient(at left top, #058C9E, #BC5180);
-    background-size: cover;
+    /* background-repeat: no-repeat;
+    background-size: cover; */
 }
 
 
-main h1, main h2 {
+main h1, main h2, main h3 {
     font-family: Banquise;
     color: white;
+    z-index: 2;
 }
 
 main h1 {
@@ -55,6 +61,7 @@ nav a, footer a, aside a {
     font-family: Dymo;
     font-size: 3em;
     display: inline-block;
+    margin-right: 1em;
 }
 
 nav a.current {
@@ -72,10 +79,12 @@ footer {
     text-align: center;
     display: flex;
     justify-content: space-evenly;
+    align-items: end;
 }
 
 @media (max-width: 600px) {
     footer {
         flex-direction: column;
+        align-items: center;
     }
-}
+}

css/drag.css

@@ -17,6 +17,28 @@ main img.draggable {
     filter: drop-shadow(5px 3px 2px #000000b7);
 }
 
+.draggable:hover {
+      /* Start the shake animation and make the animation last for 0.5 seconds */
+  animation: shake 3s;
+
+  /* When the animation is finished, start again */
+  animation-iteration-count: infinite;
+}
+
+@keyframes shake {
+  0% { transform: translate(1px, 1px) rotate(0deg); }
+  10% { transform: translate(-1px, -2px) rotate(-1deg); }
+  20% { transform: translate(-2px, 0px) rotate(1deg); }
+  30% { transform: translate(2px, 2px) rotate(0deg); }
+  40% { transform: translate(1px, -1px) rotate(1deg); }
+  50% { transform: translate(-1px, 2px) rotate(-1deg); }
+  60% { transform: translate(-3px, 1px) rotate(0deg); }
+  70% { transform: translate(2px, 1px) rotate(-1deg); }
+  80% { transform: translate(-1px, -1px) rotate(1deg); }
+  90% { transform: translate(1px, 2px) rotate(0deg); }
+  100% { transform: translate(1px, -2px) rotate(-1deg); }
+}
+
 span.draggable {
     display: inline-block;
     /* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */

css/guide.css

@@ -0,0 +1,112 @@
+body {
+    background-image: radial-gradient(at left top, #058C9E, #BC5180);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+main {
+    width: 100%;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    background: none;
+    padding-bottom: 100px;
+    font-family: Erika;
+    line-height: 1.5;
+}
+
+main > * {
+    width: 100%;
+    background: linear-gradient(to top, rgba(255,255,255,0.5)), url(../assets/notebook.jpg), white;
+    box-sizing: border-box;
+    margin: 0;
+    background-size: 100% auto;
+    padding-bottom: 1em;
+    filter: drop-shadow(5px 3px 2px #000000b7);
+    padding-left: 15px;
+    padding-right: 15px;
+    z-index: 1;
+    position: relative;
+    max-width: 100%;
+}
+
+main > img {
+    object-fit: scale-down;
+}
+
+main > .sticker {
+    background: none;
+    z-index: 0;
+}
+
+main > *.draggable:not(.sticker) {
+
+    &:not(h2) {
+        width: 100%;
+    }
+
+    &:not(h1):not(h2):hover {
+        animation: none;
+    }
+}
+
+
+main ul,
+main ol,
+main dl {
+    padding-left: calc(1em + 15px);
+}
+
+main h1 {
+    text-align: center;
+    font-size: 4rem;
+}
+
+main h1,
+main h2 {
+    background: none;
+    padding-top: 1.5em;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+@media screen and (max-width: 800px) {
+    main h2 {
+        padding-left: 1em;
+    }
+}
+
+main h1 + *,
+main h2 + * {
+    padding-top: 1em;
+}
+
+main h1 small {
+    display: block;
+    background: url(../assets/notebook.jpg);
+    color: black;
+    font-family: Erika;
+    font-size: 2.5rem;
+    width: fit-content;
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    transform: translateY(-0.3em) rotate(-2deg);
+}
+
+main pre {
+    white-space: pre-wrap;
+}
+
+main a {
+    text-decoration: underline;
+    color: teal;
+}
+
+main a:visited {
+    color: rebeccapurple;
+}
+
+footer {
+    padding: 1em;
+}

css/home.css

@@ -16,11 +16,21 @@ main h1 {
 }
 
 main h2 {
+    position: relative;
     margin: 4% auto;
     text-align: center;
     font-size: clamp(2.5em, 5vw, 4em);
 }
 
+main h3 {
+    position: relative;
+    text-align: center;
+    margin: auto;
+    width: 100%;
+    font-size: clamp(2em, 4vw, 4em);
+    margin-top: 5%;
+}
+
 main p {
     margin: 1%;
     padding: 1%;
@@ -29,6 +39,7 @@ main p {
     /* border: solid 1px; */
     opacity: 0.92;
     display: inline-block;
+    z-index: 3;
 }
 
 section {
@@ -38,6 +49,24 @@ section {
     font-family: Erika;
     margin: auto;
     margin-bottom: 100px;
-    columns: 560px;
     padding: 2%;
 }
+
+.logo {
+    width: 100%;
+    height: 100%;
+    max-width: 7em ;
+    padding: 0.2em;
+    background-color:rgba(99, 99, 99, 0.2);
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    margin: 1em;
+    z-index: 2;
+    position: relative;
+}
+
+.participants {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+}

guide.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/guide.css">
+    <link rel="stylesheet" href="css/drag.css">
+	<script src="js/drag.js" defer></script>
+    <title>Guide Interhack Camp 2026</title>
+</head>
+<body id="page-guide">
+    <nav>
+        <a href="index.html">home</a>
+        <a href="poster.html">poster</a>
+        <a href="guide.html" class="current">guide</a>
+    </nav>
+    <main>
+        <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
+        
+<h1 id="camp-interhack-2026-infos-pratiques">Camp Interhack 2026
+<small>Infos pratiques</small></h1>
+<p>Le Camp Interhack 2026 se déroulera du <strong>jeudi 2 Juillet au
+dimanche 5 Juillet 2026</strong> à <a
+href="https://www.lantenne.org/antenne-paulette/">l’Antenne Paulette</a>
+(<a
+href="https://www.openstreetmap.org/node/11826195369#map=18/47.541614/-2.091345">47.541451,
+-2.091871</a>). L’Antenne Paulette est un hackerspace qui se trouve à
+Sévérac en Loire Atlantique (44) entre Nantes et Redon, au sein <a
+href="https://www.lantenne.org/laccueil-de-groupes/">d’un ancien centre
+de vacances</a> de la Poste avec dortoir, hangard, champs et forêts…</p>
+<figure>
+<img
+src="https://www.lantenne.org/wp-content/uploads/2025/10/batiment-b-2048x1152.jpg"
+alt="Le Bâtiment B" />
+<figcaption aria-hidden="true">Le Bâtiment B</figcaption>
+</figure>
+<figure>
+<img
+src="https://www.lantenne.org/wp-content/uploads/2025/10/goldorak2-2048x1152.jpg"
+alt="Le Réfectoire" />
+<figcaption aria-hidden="true">Le Réfectoire</figcaption>
+</figure>
+<h2 id="tickets">Tickets</h2>
+<p>Nous attendons au maximum 200 personnes au Camp. Prenez votre ticket
+pour réserver votre place. Nous préfèrons ne pas dépasser la jauge de
+200 personnes pour éviter de surcharger les personnes qui organisent
+l’événement.</p>
+<p>Le ticket pour venir au Camp est à prix libre. Vous pouvez donner ce
+que vous pouvez ou voulez donner. Le prix des billet permet de financer
+la réservation du lieu, la nourriture sur place, la location du materiel
+et les autres frais de l’èvénement.</p>
+<p>Nous n’avons pas encore finalisé le système de réservation. Il est
+pas encore possible de prendre votre ticket.</p>
+<h2 id="dormir-sur-place">Dormir sur place</h2>
+<p>Il est possible de dormir sur place. Les dortoirs peuvent accueillir
+jusqu’a 54 personnes dasn un lit. Un espace camping est prévu pour poser
+une tente et un parking à l’ombre pour poser votre camion si vous dormez
+dedans.</p>
+<ul>
+<li>hébergement
+<ul>
+<li>camping</li>
+<li>dortoirs
+<ul>
+<li>À ce niveau, je pense qu’on doit attribuer les lits uniquement aux
+personnes qui en ont besoin en terme d’accessibilité. Donc on les
+propose uniquement aux personnes ayant besoin par exemple d’un accès
+PMR. À noter aussi que c’est des dortoirs, donc espace partagé.</li>
+<li>Je propose également que 2 dortoirs soit non-mixtes, soit 18 places
+non-mixtes PMR.</li>
+</ul>
+<pre><code>Le bâtiment A est composé de 6 dortoirs de 9 lits simples, soit une capacité totale de 54 lits.
+La jauge de 54 personnes est un impératif de sécurité. Merci de ne pas ajouter de couchage
+supplémentaire.
+Les matelas sont équipés d’alaises. Des oreillers et couettes sont à votre disposition.
+Il vous est demandé d’amener vos propres draps housses, housse de couettes et taies d’oreiller.</code></pre></li>
+</ul></li>
+</ul>
+<h2 id="proposer-une-activité">Proposer une activité</h2>
+<ul>
+<li>types d’activités
+<ul>
+<li>ateliers</li>
+<li>musique</li>
+<li>discussions</li>
+</ul></li>
+<li>pretalx en cours de préparation (cf Assia &amp; 12b, d’après la réu
+du 12 juillet)</li>
+</ul>
+<h2 id="participer-a-lorganisation">Participer a l’organisation</h2>
+<p>Le Camp est auto-organisé et tourne grâce aux personnes qui y
+participent, dans une ambiance joyeuse et démocratique. Vous pouvez
+également participer en proposant votre aide sur diverses choses, que
+vous soyez forte en organisation ou juste envie de passer dire coucou et
+nous donner de la force !</p>
+<p>Rendez-vous sur le groupe Matrix du camp :
+https://matrix.to/#/#camp-space:matrix.interhacker.space</p>
+<h2 id="comment">Comment ?</h2>
+<ul>
+<li>sanitaires</li>
+<li>accessibilité
+<ul>
+<li>les installations du lieu sont accessible PMR</li>
+<li>les espaces de forêt nécessitent un chantier pour être accessibles
+[à organiser]</li>
+<li>accpour lessibilité aux personnes aveugles et malvoyant’e’s :
+<ul>
+<li>informations sonores</li>
+</ul></li>
+<li>pour les personnes sourdes/malentendant’e’s :
+<ul>
+<li>informations visuelles</li>
+<li>pads</li>
+<li>ateliers non-oraux</li>
+</ul></li>
+<li>ambiance sensorielle</li>
+</ul></li>
+<li>réduction des risques
+<ul>
+<li>un groupe travaille dessus, rejoignez-le</li>
+</ul></li>
+<li>organisation : lire les pads et rejoindre les sous-groupes du <a
+href="https://matrix.to/#/#camp-space:matrix.interhacker.space">space
+Matrix</a> :
+<ul>
+<li>en cuisine - <a
+href="https://md.lqdn.fr/e8SZBv6yTy61x1OvKlc2dQ#">Groupe
+Cantine</a></li>
+<li>en coulisses - <a
+href="https://pad.lqdn.fr/p/Camp_Interhack_Logistique">Commission
+Logistique</a></li>
+<li>aux ateliers - <a href=""></a></li>
+<li>à l’accueil/coordination - <a
+href="https://md.lqdn.fr/pCRYD-TfRry4jSmUAfLRuQ#">Groupe
+Accueil</a></li>
+<li>à l’aménagement des espaces - <a href="">Groupe Ambiance &amp;
+spatialisation</a></li>
+</ul></li>
+<li>finances
+<ul>
+<li>budget prévisionnel</li>
+<li>prix libre</li>
+</ul></li>
+</ul>
+<h2 id="qui">qui ?</h2>
+<ul>
+<li>jauge : 200 personnes</li>
+<li><a href="https://lite.framacalc.org/52k47yrfqw-ah89">qui attend-on
+?</a></li>
+</ul>
+<h2 id="autre">Autre</h2>
+<!-- En cas d’urgence, contacter le numéro d’astreinte de l’Antenne : 06 24 95 95 34 -->
+    </main>
+    <footer>
+        <div>
+            <h2>Association</h2>
+            <a href="assets/Camp-Interhack_Statuts.pdf">statuts</a>
+        </div>
+        <div>
+            <h2>Interhack</h2>
+            <a href="https://interhacker.space">accueil</a>
+            <a href="https://wiki.interhacker.space">wiki</a>
+        </div>
+        <div>
+            <h2>Site Web</h2>
+            <a href="https://git.interhacker.space/interhack/2026.camp.public.website">source</a>
+        </div>
+        <div>
+            Dernière mise à jour du guide: 
+18/12/2025 11:11 UTC
+        </div>
+    </footer>
+</body>
+</html>

guide.template.html

@@ -0,0 +1,65 @@
+<!--
+ATTENTION : CETTE PAGE EST GÉNÉRÉE VIA LE FICHIER UPDATE-GUIDE.SH
+
+NE PAS MODIFIER À LA MAIN POUR LE CONTENUE, ÇA SERA ÉCRASÉ.
+
+BISOUS
+-->
+
+
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/guide.css">
+    <link rel="stylesheet" href="css/drag.css">
+	<script src="js/drag.js" defer></script>
+    <title>Guide Interhack Camp 2026</title>
+</head>
+<body id="page-guide">
+    <nav>
+        <a href="index.html">home</a>
+        <a href="poster.html">poster</a>
+        <a href="guide.html" class="current">guide</a>
+    </nav>
+    <main>
+        <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/arbre-hetre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/bac-e2.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clavier.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/clef.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/ecran.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/foin.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/machineacoudre.webp" alt="">
+        <img class="draggable randomStart sticker" src="assets/stickers/tracteur.webp" alt="">
+        <!-- EDGEDOC: A la place de ce commentaire, le contenu du Edgedoc https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA -->
+    </main>
+    <footer>
+        <div>
+            <h2>Association</h2>
+            <a href="assets/Camp-Interhack_Statuts.pdf">statuts</a>
+        </div>
+        <div>
+            <h2>Interhack</h2>
+            <a href="https://interhacker.space">accueil</a>
+            <a href="https://wiki.interhacker.space">wiki</a>
+        </div>
+        <div>
+            <h2>Site Web</h2>
+            <a href="https://git.interhacker.space/interhack/2026.camp.public.website">source</a>
+        </div>
+        <div>
+            Dernière mise à jour du guide: <!-- DATE: A la place de ce commentaire, la date et heure du jour -->
+        </div>
+    </footer>
+</body>
+</html>

index.html

@@ -14,6 +14,7 @@
 		<nav>
 			<a href="index.html" class="current">home</a>
 			<a href="poster.html">poster</a>
+			<a href="guide.html">guide</a>
 		</nav>
 		<main>
 
@@ -84,6 +85,26 @@
 					Seule exigence, respecter toutes les marginalités, originalités, bizarreries et normaleries de
 					chacun·es.</p>
 			</section>
+
+
+			<h3>
+				<span>Iels y participent</span>
+			</h3>
+
+			<section class="participants">
+					<a href="https://lqdn.fr">
+						<img class="logo" src="assets/lqdn.png" alt="La Quadrature Du Net">
+					</a>
+					<a href="https://datapaulette.org/">
+						<img class="logo" src="assets/datapaulette.jpg" alt="Datapaulette">
+					</a>
+					<a href="https://lebib.org"><img class="logo" src="assets/lebib.png" alt="Le Bib Net"></a>
+			</section>
+			<section class="participants">
+					<a href="https://hackstub.eu/"><img class="logo" src="assets/hackstub.svg" alt="La Hackstub"></a>
+					<a href="https://fuz.re"><img class="logo" src="assets/fuz.png" alt="Le Fuz"></a>
+
+			</section>
 		</main>
 		<footer>
 			<div>

js/drag.js

@@ -1,5 +1,10 @@
 const stepSize = 100;
 const main = document.querySelector('main');
+
+for(let guideDraggable of document.querySelectorAll("#page-guide main > *")) {
+    guideDraggable.classList.add("draggable");
+}
+
 const draggables = document.querySelectorAll(".draggable");
 const randomStarts = document.querySelectorAll(".randomStart");
 

poster.html

@@ -13,11 +13,21 @@
 <body>
     <nav>
         <a href="index.html">home</a>
+        <a href="guide.html" >guide</a>
         <a href="poster.html" class="current">poster</a>
     </nav>
+
+
     <aside>
         <a href="javascript:if(window.print)window.print()" class="print">🖨️ imprimer</a>
+            <section>
+        <p>
+        Vous pouvez arranger vous mêmes votre affiche en bougeant les informations et les autocollants !
+        </p>
+    </section>
     </aside>
+
+
     <main>
         <img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
         <img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
@@ -31,10 +41,23 @@
         <h1>
             <span class="draggable text">Camp</span>
             <span class="draggable text">Interhack</span>
+            <span class="draggable">2 au 5 Juillet</span>
             <span class="draggable">2026</span>
         </h1>
 
+			<h2>
+				<span class="draggable">à l'Antenne</span>
+				<span class="draggable">15 route de Saint Dolay 44530 Sévérac</span>
+            </h2>
+
+            <h2>
+				<span class="draggable">camp.interhacker.space</span>
+			</h2>
+
+
     </main>
+
+     <aside>Malheureusement, ce générateur ne fonctionne pas sur mobile pour le moment. <br> <a href="https://git.interhacker.space/interhack/2026.camp.public.website/issues/6">Aidez-nous à le réparer ?</a></aside>
 </body>
 
 </html>

update-guide.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+GUIDE_EDGEDOC_URL="https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA"
+
+DATE_CMD="date --utc '+%d/%m/%Y %H:%I UTC'"
+
+echo "Mise a jour du guide dans guide.html a partir du edgedoc"
+echo "$GUIDE_EDGEDOC_URL"
+
+set -e
+curl --silent --fail-with-body "$GUIDE_EDGEDOC_URL/download" > guide.tmp.md
+pandoc --from markdown --to html guide.tmp.md > guide.tmp.html
+cat guide.template.html \
+    | sed '/EDGEDOC/{
+        s/<!-- *EDGEDOC[^-]*-->//;
+        r guide.tmp.html
+    }' \
+    | sed -e "/DATE/{
+        s/<!-- *DATE[^-]*-->//;
+        n;
+        e $DATE_CMD
+    }" \
+    > guide.html
+
+rm guide.tmp.md guide.tmp.html