modif texteexplicatif dons

Reviewed-on: interhack/2026.camp.public.website#44
Reviewed-by: Nono <nono@noreply.interhacker.space>
Reviewed-by: kholah <kholah@alternatique.fr>

.gitignore

@@ -0,0 +1 @@
+guide.html

Dockerfile

@@ -1,6 +1,6 @@
 FROM docker.io/nginx:1.29-alpine
 
-COPY index.html poster.html /usr/share/nginx/html
+COPY index.html poster.html guide.html contact.html /usr/share/nginx/html
 COPY assets /usr/share/nginx/html/assets
 COPY css /usr/share/nginx/html/css
 COPY js /usr/share/nginx/html/js

README.md

@@ -1,6 +1,28 @@
 # Interhack Camp Website 2026
 
-## Build the Docker image
+## How to deploy :
+
+### generate statuses PDF
+
+Statuses are stored in [this online pad](https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw).
+
+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.
+
+```sh
+bash update-guide.sh
+```
+
+### Build the Docker image
+
+Please generate
 
 We use Docker for deploying on the Interhack infra. Until we have a proper CI, we need to build manually.
 
@@ -28,13 +50,3 @@ docker push git.interhacker.space/interhack/camp-website-2026:latest
 The pull process is triggered every five minutes.
 So you may wait at least this amount of time before the website is up-to-date!
 (and Ctrl + Shift + R is useful to nuke cache)
-
-## generate statuses PDF
-
-Statuses are stored in [this online pad](https://md.interhacker.space/u2VNUSO6S36xx5Ensc3FCw).
-
-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
-```

assets/logos/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>

contact.html

@@ -0,0 +1,64 @@
+<!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/contact.css">
+    <link rel="stylesheet" href="css/drag.css">
+    <script src="js/drag.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
+    <title>Camp Interhack 2026 – Contact</title>
+</head>
+
+<body>
+    <nav>
+        <a href="index.html">maison</a>
+        <a href="guide.html">guide</a>
+        <a href="poster.html">poster</a>
+        <a href="contact.html" class="current">contact</a>
+    </nav>
+
+    <main>
+        <img class="draggable randomStart" src="assets/stickers/ecran.png" alt="">
+        <img class="draggable randomStart" src="assets/stickers/ferasouder.png" alt="">
+        <img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt="">
+        <img class="draggable randomStart" src="assets/stickers/tracteur.png" alt="">
+        <h1>
+            <span id="camp" class="draggable">camp</span>
+            <br>
+            <span id="interhack" class="draggable">interhack</span>
+            <span class="draggable">contact</span>
+        </h1>
+        <h2>
+        </h2>
+        <section id="contact">
+            <div>
+                <h3>Mail :</h3>
+                <a href="mailto:orga@camp.interhacker.space">orga@camp.interhacker.space</a>
+            </div>
+            <div>
+                <h3>Matrix :</h3>
+                <a href="https://matrix.to/#/#camp-space:matrix.interhacker.space" class="matrix-link">#interhack:matrix.interhacker.space</a>
+            </div>
+        </section>
+    </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>
+    </footer>
+</body>
+
+</html>

css/base.css

@@ -1,62 +1,142 @@
+
+/* Primary Font */
 @font-face {
-    font-family: Banquise;
-    src: url(../assets/Banquise-Regular.woff);
+    font-family: MonTrappist;
+    src: url(../assets/fonts/MonTrappist-Black.woff);
 }
 
+/* Secondary Font */
 @font-face {
-    font-family: Dymo;
-    src: url(../assets/Dymo.ttf);
+    font-family: Segoesc;
+    src: url(../assets/fonts/segoesc.ttf);
 }
 
-@font-face {
-    font-family: Erika;
-    src: url(../assets/Erika-Type.ttf);
+:root {
+    --primary-bg-color: black; /* global scope */
+    --accent-violet:  #8800FF;
+    --accent-yellow:  #ffbf3e;
+    --accent-orange: #FF4E00 ;
+    --accent-minor-blue: #33D8D8;
+    --text-color-primary: #FFFFFF;
 }
 
 html, body {
-    height: 100%;
     margin: 0;
+    font-family: "Verdana", "Helvetica", "Arial", sans-serif;
+    color: var(--text-color-primary);
+    background: var(--primary-bg-color);
+    overflow-x: hidden; /* empêche les stickers de déborder horizontalement */
+}
+
+img {
+    max-width: 100%;
 }
 
 a {
-    text-decoration: none;
+    color: inherit;
+}
+
+nav a, footer a {
     color: black;
+    text-decoration: none;
 }
 
-main {
-    /* background-color: #413f43;*/
-    background: #058C9E;
-    background: radial-gradient(at left top, #058C9E, #BC5180);
-    /* background-repeat: no-repeat;
-    background-size: cover; */
-}
-
-
 main h1, main h2, main h3 {
-    font-family: Banquise;
+    font-family: MonTrappist;
     color: white;
-    z-index: 2;
+    z-index: 20;
+}
+
+main h1 span, main h2 span, main h3 {
+    background-color: #000000b8;
 }
 
 main h1 {
-    font-size: 8em;
+    position: relative;
+    text-align: center;
+    margin: auto;
+    width: 50%;
+    font-size: clamp(4em, 14vw, 8em);
+    margin-top: 5%;
+    max-width: 1400px;
+}
+
+main h2 {
+    position: relative;
+    margin: 12% auto 5% auto;
+    text-align: center;
+    font-size: clamp(1.5em, 12vw, 4em);
+    font-family: segoesc;
+}
+
+main h2:first-of-type {
+    font-size: clamp(1.5em, 5vw, 5em);
+    margin: 1em auto 0.5em auto;
+}
+
+main h3 {
+    position: relative;
+    margin: auto;
+    width: 100%;
+    font-size: clamp(1.8em, 3vw, 4em);
+    margin-top: 5%;
+    margin-bottom: 2%;
+    font-weight: lighter;
+    text-align: center;
+}
+
+main section h3 {
+    text-align: left;
+}
+
+main h4 {
+  margin: 0.8em 0;
+}
+
+main p {
+    margin: 0 0 min(1em, 2%) 1%;
+    display: inline-block;
+    z-index: 3;
+}
+
+main p:last-child {
+    margin-bottom: 0;
+}
+
+section {
+    position: relative;
+    max-width: 900px;
+    font-size: 1.5em;
+    line-height: 1.3em;
+    margin: auto;
+    margin-bottom: 100px;
+    padding: 2%;
+    padding-left: min(1em, 2%);
+    z-index: 1000;
+    box-shadow: -5px 5px 0px var(--accent-yellow), -10px 10px 0px var(--accent-orange), -15px 15px 0px var(--accent-violet);
+    background-color: #000000b8;
+}
+
+section :is(h1, h2, h3, h4, h5, h6) {
+    line-height: 1em;
 }
 
 nav, footer, aside {
-    background: #d7d7d7;
-    background: url(../assets/paper.avif);
+    background: var(--accent-violet);
     padding: 5px;
-    font-family: Erika;
+    font-family: MonTrappist;
     z-index: 10000;
     position: relative;
-    opacity: 0.95;
-    box-shadow: 0px 0px 10px #00000070;
+}
+
+nav {
+    padding-left: 10%;
 }
 
 nav a, footer a, aside a {
-    font-family: Dymo;
     font-size: 3em;
     display: inline-block;
+    margin: 0.1em 0.3em;
 }
 
 nav a.current {
@@ -67,17 +147,89 @@ footer a:hover, nav a:hover {
     transform: rotate(-2deg);
 }
 
-
-
 footer {
     display: block;
     text-align: center;
     display: flex;
     justify-content: space-evenly;
+    align-items: end;
 }
 
 @media (max-width: 600px) {
     footer {
         flex-direction: column;
+        align-items: center;
     }
-}
+}
+
+main > img {
+    object-fit: scale-down;
+}
+
+figcaption {
+  font-size: 0.6em;
+  line-height: initial;
+}
+
+.btn-nice {
+    color: #FFFFFF;
+    text-shadow: -2px 2px 0px var(--accent-orange), -4px 4px 0px var(--accent-violet);
+    color: var(--accent-yellow);
+    font-size: 1.2em;
+    text-align: center;
+    margin: auto;
+    position: relative;
+    display: block;
+    font-weight: bold;
+}
+
+#camp {
+    font-family: segoesc;
+    float: left;
+    margin-left: 10%;
+}
+
+#interhack {
+    text-shadow: -5px 5px 0px var(--accent-orange), -10px 10px 0px var(--accent-violet);
+    color: var(--accent-yellow);
+    margin-right: 10%;
+}
+
+#progress {
+    display: block;
+    text-align: center;
+}
+
+#gauge-bar {
+    float: left;
+}
+
+#fundraising-bar {
+    float: left;
+}
+
+code {
+    background: #ffffff1f;
+    padding: 0.2em 0.4em;
+    border-radius: 0.2em;
+    margin-right: 0.5ex;
+}
+
+.btn-nice code {
+    background: none;
+    padding: 0;
+    margin-right: 0;
+}
+
+div#maj-guide {
+    text-align: center;
+    margin: 2em 1em;
+}
+
+
+@media (max-width: 500px) {
+    /* Hide stickers on mobile */
+    .randomStart {
+        display: none;
+    }
+}

css/contact.css

@@ -0,0 +1,15 @@
+#contact {
+    display: flex;
+    align-items: last baseline;
+    gap: 2em;
+    justify-content: space-between;
+}
+
+h1 span:nth-of-type(n+3) {
+    position: relative;
+    text-align: center;
+    font-size: clamp(1.5rem, 5vw, 5rem);
+    font-family: segoesc;
+    display: block;
+    margin: 1em auto 0.5em auto;
+}

css/drag.css

@@ -1,10 +1,10 @@
 
 
 main img.draggable {
-    max-width: 150px;
-    max-height: 150px;
+    max-width: 200px;
+    max-height: 200px;
     position: absolute;
-    filter: saturate(2);
+    z-index: 1;
 }
 
 

css/home.css

@@ -1,43 +1,109 @@
-main {
-    display: block;
-    color: black;
-    overflow: hidden;
-    width: 100%;
-    min-height: 1000px;
-}
 
-main h1 {
+.logo {
+    width: 100%;
+    height: 100%;
+    max-width: 7em ;
+    padding: 0.2em;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    margin: 1em;
+    z-index: 2;
     position: relative;
-    text-align: center;
-    margin: auto;
-    width: 100%;
-    font-size: clamp(4em, 14vw, 8em);
-    margin-top: 5%;
 }
 
-main h2 {
-    margin: 4% auto;
-    text-align: center;
-    font-size: clamp(2.5em, 5vw, 4em);
+.participants {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
 }
 
-main p {
-    margin: 1%;
-    padding: 1%;
-    background: white;
-    background: url(../assets/notebook.jpg);
-    /* border: solid 1px; */
-    opacity: 0.92;
-    display: inline-block;
+/* Section des dons */
+
+#don > div {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
 }
 
-section {
-    max-width: 1400px;
-    font-size: 1.5em;
-    text-align: center;
-    font-family: Erika;
-    margin: auto;
-    margin-bottom: 100px;
-    columns: 560px;
-    padding: 2%;
+#don button {
+    flex-grow: 1;
+    width: 3em;
+    color: white;
+    font-size: 2em;
+    border: none;
+    font-family: MonTrappist;
+    margin: 0.2em;
+    padding: 0.3em;
+    background: var(--primary-bg-color);
+    background: linear-gradient(0deg,rgba(136, 0, 255, 1) 0%, rgba(255, 191, 62, 1) 50%, rgba(255, 78, 0, 1) 100%);
+    box-shadow: -5px 5px 0px var(--accent-yellow), -10px 10px 0px var(--accent-orange), -15px 15px 0px var(--accent-violet);
+    cursor: pointer;
+}
+
+#don > hr {
+    margin-top: 1em;
+}
+
+#don p {
+    text-align: justify;
+    text-align: center;
+}
+
+@keyframes bang {
+  from {
+    transform: translate3d(0,0,0);
+    opacity: 1;
+  }
+}
+
+.btn-pop i {
+    /* position: ; */
+    display:run-in;
+    left: 0px;
+    top: 0px;
+    width: 1px;
+    height: 1px;
+    background: red;
+    opacity: 0;
+}
+
+/* Barre de progression */
+
+.progression {
+animation: 3s loadbar;
+width:auto;
+background-color: white;
+display: inline-block;
+padding: 0.7em 0.5em 0.5em 0.5em;
+text-wrap: nowrap;
+}
+
+@keyframes loadbar {
+  0% { width:0%; }
+}
+
+.bar {
+width : 50%;
+margin : auto;
+border : 2px solid white;
+display: inline-block;
+}
+.progression > span {
+
+display: inline-block;
+width: 100%;
+font-family: MonTrappist;
+font-size : 1.5em;
+}
+
+.lessthanhalf span {
+    padding-left: 100%;
+    color: white;
+    padding-left: calc(100% + 1em);
+}
+
+.morethanhalf {
+    text-align : end;
+    background: linear-gradient(90deg,rgba(136, 0, 255, 1) 0%, rgba(255, 78, 0, 1) 42%, rgba(255, 191, 62, 1) 100%);
 }

css/poster.css

@@ -4,7 +4,6 @@ body {
 }
 
 aside {
-    background: url(../assets/notebook.jpg);
     width: fit-content;
     margin-top: 10px;
 }
@@ -16,6 +15,7 @@ main {
     box-shadow: 5px 5px 5px #00000085;
     margin: 50px auto;
     position: relative;
+    background: var(--primary-bg-color);
 }
 
 @page {

guide.template.html

@@ -0,0 +1,80 @@
+<!--
+ATTENTION : CETTE PAGE EST UN TEMPLATE, UTILISÉ PAR 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/drag.css">
+	<script src="js/drag.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
+    <title>Guide Interhack Camp 2026</title>
+</head>
+<body id="page-guide">
+    <nav>
+        <a href="index.html">maison</a>
+        <a href="guide.html" class="current">guide</a>
+        <a href="poster.html">poster</a>
+        <a href="contact.html">contact</a>
+    </nav>
+
+    <main>
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/ecran.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/ferasouder.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/machineacoudre.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/tracteur.png" alt="">
+
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/ecran.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/ferasouder.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/machineacoudre.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/tracteur.png" alt="">
+
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/ecran.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/ferasouder.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/machineacoudre.png" alt="">
+        <img class="draggable randomStart " aria-hidden="true" src="assets/stickers/tracteur.png" alt="">
+
+        <h1>
+            <span id="camp" class="draggable">camp</span>
+            <br>
+            <span id="interhack" class="draggable">interhack</span>
+        </h1>
+
+        <h2>
+            <span class="draggable">Informations pratiques</span>
+        </h2>
+
+        <section>
+        <!-- EDGEDOC: A la place de ce commentaire, le contenu du Edgedoc https://md.lqdn.fr/H0gKhjbKTfeM41L9bG9zUA -->
+
+        </section>
+
+        <div id="maj-guide">
+            Dernière mise à jour du guide: <!-- DATE: A la place de ce commentaire, la date et heure du jour -->
+        </div>
+    </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>
+    </footer>
+</body>
+</html>

index.html

@@ -1,4 +1,5 @@
-<html lang="en">
+<!DOCTYPE html>
+<html lang="fr">
 
 	<head>
 		<meta charset="UTF-8">
@@ -7,37 +8,35 @@
 		<link rel="stylesheet" href="css/home.css">
 		<link rel="stylesheet" href="css/drag.css">
 		<script src="js/drag.js" defer></script>
-		<title>Camp Interhack 2026</title>
+		<script src="js/progress.js" defer></script>
+		<script src="js/pop.js" defer></script>
+		<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
+		<title>Camp Interhack</title>
 	</head>
 
 	<body>
 		<nav>
-			<a href="index.html" class="current">home</a>
+			<a href="index.html" class="current">maison</a>
+			<a href="guide.html">guide</a>
 			<a href="poster.html">poster</a>
+        	<a href="contact.html">contact</a>
 		</nav>
 		<main>
 
-			<img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/arbre-hetre.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/bac-e2.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
-			<img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/ecran.png" alt="">
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/ferasouder.png" alt="">
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/machineacoudre.png" alt="">
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/tracteur.png" alt="">
+
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/ecran.png" alt="">
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/ferasouder.png" alt="">
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/machineacoudre.png" alt="">
+			<img class="draggable randomStart" aria-hidden="true" src="assets/stickers/tracteur.png" alt="">
 
 			<h1>
-				<span class="draggable">Camp</span>
-				<span class="draggable">Interhack</span>
-				<span class="draggable">2026</span>
+				<span id="camp" class="draggable">camp</span>
+				<br>
+				<span id="interhack" class="draggable">interhack</span>
 			</h1>
 
 			<h2>
@@ -83,7 +82,93 @@
 					collective.<br>
 					Seule exigence, respecter toutes les marginalités, originalités, bizarreries et normaleries de
 					chacun·es.</p>
+
+				<p>
+					<h3>
+						<a class="btn-nice" href="https://grist.interhacker.space/o/camp/forms/jhWe1wCu16LGEu81RTn3Um/4">S'inscrire</a>
+					</h3>
+				</p>
+				</section>
+
+			<h3>
+				<span>Où en est-on ?</span>
+			</h3>
+			<section id="progress">
+				<p>Il y a</p>
+
+				<div class="places">
+					<span class="bar">
+						<span id="gauge-bar" style="width:0" class="progression lessthanhalf">
+							<span id="gauge-text">?/200</span>
+						</span>
+					</span>
+				</div>
+
+				<p>places déjà réservées.</p>
+				<br>
+				<p>Et nous avons reçu</p>
+				<div class="places">
+					<span class="bar">
+						<span id="fundraising-bar" style="width:0" class="progression lessthanhalf">
+							<span id="fundraising-text">? %</span>
+						</span>
+					</span>
+				</div>
+				<p>des dons dont nous avons besoin.</p>
 			</section>
+
+
+
+			<h3>
+				<span>Faire un don</span>
+			</h3>
+			<section id="don">
+				<p>Nous avons besoin de sous avant le débût du Camp pour financer l'achat de fournitures, payer la réservation du lieu et monter la logistique.</p>
+				<div>
+					<a class="btn-pop" href="https://pay.qonto.com/payment-links/019c09a8-c97f-784c-ab19-841c0700837d?resource_id=019c09a8-c976-797d-b213-4ac052e5d786"><button>5€</button></a>
+					<a class="btn-pop"  href="https://pay.qonto.com/payment-links/019c09a9-76e2-7086-9b69-436a09ff801d?resource_id=019c09a9-76db-7325-b239-f0f80d056b74"><button>1€</button></a>
+					<a class="btn-pop"  href="https://pay.qonto.com/payment-links/019c09a9-f4d1-7cf5-a1b0-eff390954dd0?resource_id=019c09a9-f4cb-7335-9fa4-6b599f072969"><button>10€</button></a>
+					<a class="btn-pop"  href="https://pay.qonto.com/payment-links/019c09aa-85db-7edd-9508-f6b7f03e1594?resource_id=019c09aa-85d4-7a19-889b-6c09cd7e4ae5"><button>20€</button></a>
+					<a class="btn-pop"  href="https://pay.qonto.com/payment-links/019c09ab-25d1-724a-9156-a8af734ddcc6?resource_id=019c09ab-25c8-7e9c-a0b0-72655c28b87e"><button>40€</button></a>
+					<a class="btn-pop"  href="https://pay.qonto.com/payment-links/019c09ab-9f99-72fa-8151-0722830429a8?resource_id=019c09ab-9f93-78cb-9825-11af0c12f080"><button>50€</button></a>
+					<a class="btn-pop"  href="https://pay.qonto.com/payment-links/019c0ff1-9272-7c10-b8b0-22c0fdc9f080?resource_id=019c0ff1-926d-7146-a0c4-5056a719e7ea"><button>75€</button></a>
+					<a class="btn-pop"  href="https://pay.qonto.com/payment-links/019c09ac-a6b9-76e9-9988-fe53c940ff06?resource_id=019c09ac-a6b3-735a-a13b-11d1698ba31a"><button>100€</button></a>
+				</div>
+
+				<hr>
+				<div>
+					<p>Nous estimons avoir un budget de 10 000 ~ 15 000€ et être autour de 200 personnes, et aurons donc besoin d'au moins autant pour que le camp soit à l'équilibre.</p>
+					<a href="https://grist.interhacker.space/o/docs/pUsyFia9Papk/Untitled-document">Voir le détail des comptes</a>
+				</div>
+				<hr>
+				<div>
+					<p>Si tu ne sais pas quel prix libre donner, et/ou que tu veux de l'aide pour définir un prix libre juste et éclairé pour ta participation au camp, voici un thunomètre rapide qui peut répondre au besoin.</p>
+					<a href="assets/Thunometre-participanxes.pdf">Thunomètre</a>
+				</div>
+			</section>
+
+
+
+			<h3>
+				<span>Iels y participent</span>
+			</h3>
+
+			<div class="participants">
+					<a href="https://lqdn.fr">
+						<img class="logo" src="assets/logos/lqdn.png" alt="La Quadrature Du Net">
+					</a>
+					<a href="https://datapaulette.org/">
+						<img class="logo" src="assets/logos/datapaulette.jpg" alt="Datapaulette">
+					</a>
+					<a href="https://lebib.org"><img class="logo" src="assets/logos/lebib.png" alt="Le Bib Net"></a>
+				</div>
+
+			<div class="participants">
+					<a href="https://hackstub.eu/"><img class="logo" src="assets/logos/hackstub.svg" alt="La Hackstub"></a>
+					<a href="https://fuz.re"><img class="logo" src="assets/logos/fuz.png" alt="Le Fuz"></a>
+					<a href="https://labolyon.fr/"><img class="logo" src="assets/logos/lol_logo_txt.png" alt="Le Laboratoire Ouvert Lyonnais"></a>
+					<a href="https://fdn.fr/"><img class="logo" src="assets/logos/fdn.png" alt="La French Data Network"></a>
+			</div>
 		</main>
 		<footer>
 			<div>
@@ -101,4 +186,5 @@
 			</div>
 		</footer>
 	</body>
+
 </html>

js/drag.js

@@ -1,5 +1,6 @@
-const stepSize = 100;
+const stepSize = 1;
 const main = document.querySelector('main');
+
 const draggables = document.querySelectorAll(".draggable");
 const randomStarts = document.querySelectorAll(".randomStart");
 
@@ -8,8 +9,8 @@ var zIndex = 2;
 activateDraggables();
 
 /**
- * 
- * @param {number} n 
+ *
+ * @param {number} n
  * @returns {number}
  */
 function stepedSize(n) {
@@ -19,8 +20,6 @@ function stepedSize(n) {
 function move(e) {
     e.preventDefault();
     let target = e.target;
-    target.style['z-index'] = zIndex;
-    zIndex++;
 
     target.moving = true;
 
@@ -63,13 +62,14 @@ function activateDraggables() {
 }
 
 function randomizeDragables() {
-    maxX = main.offsetWidth - 150;
+    maxX = main.offsetWidth - 250;
     maxY = main.offsetHeight - 150;
     for (var randomStart of randomStarts) {
         randX = Math.floor(Math.random() * maxX);
         randY = Math.floor(Math.random() * maxY);
         randomStart.style.left = randX + "px";
         randomStart.style.top = randY + "px";
+        randomStart.style.rotate = Math.floor(Math.random() * 61) - 30 + "deg";
     }
 }
 

js/pop.js

@@ -0,0 +1,31 @@
+document.querySelectorAll('button').forEach(function(button) {
+  button.addEventListener('mouseenter', function() {
+    function random(max) {
+      return Math.random() * (max - 0) + 0;
+    }
+
+    var c = document.createDocumentFragment();
+    for (var i = 0; i < 100; i++) {
+      var styles = 'position: absolute;' +
+                   'left: ' + (random(100)) + '30%;' +  // Limit the position to within the button
+                   'top: ' + (random(60)) + '30%;' +   // Limit the position to within the button
+                   'width: 3px; height: 6px; ' +        // Increase size
+                   'transform: translate(-50%, -50%) rotate(' + random(360) + 'deg);' +
+                   'background: hsla(' + random(360) + ', 100%, 50%, 1);' +
+                   'animation: bang 2000ms ease-out forwards;' +
+                   'opacity: 0;' +
+                   'z-index: 10;';  // Set a high z-index
+
+      var e = document.createElement("i");
+      e.style.cssText = styles;
+      c.appendChild(e);
+    }
+    button.appendChild(c);
+    setTimeout(() => {
+        // Create an array of the <i> elements to remove
+        let childrenToRemove = Array.from(button.querySelectorAll('i'));
+        // Remove each <i> element
+        childrenToRemove.forEach(child => button.removeChild(child));
+    }, 3000);
+  });
+});

js/progress.js

@@ -0,0 +1,91 @@
+const gauge_url = "https://api.camp.interhacker.space/api/gauge"
+const fundraising_url = "https://api.camp.interhacker.space/api/fundraising"
+const gaugeMax = 200;
+const fundraisingTotalMax = 20000;
+
+async function getGauge() {
+    // // REMOVE WHEN SIGNUP FORM IS OPEN
+    // return 0;
+
+    try {
+        const response = await fetch(gauge_url);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        return result.gauge
+    } catch (error) {
+        console.error(error.message);
+
+        return null;
+    }
+}
+
+async function getFundraisingTotal() {
+    try {
+        const response = await fetch(fundraising_url);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        return result.total
+    } catch (error) {
+        console.error(error.message);
+
+        return null;
+    }
+}
+
+function percentRatio(ratio) {
+    return Math.floor(ratio * 100);
+}
+
+function setAboveHalf(ratio, element) {
+    if (ratio > 0.5) {
+        element.classList.remove("lessthanhalf");
+        element.classList.add("morethanhalf");
+    }
+}
+
+async function setGauge() {
+    const gauge = await getGauge();
+
+    if (gauge !== null) {
+        const gaugeBar = document.getElementById("gauge-bar");
+        const gaugeText = document.getElementById("gauge-text");
+
+        const gaugeRatio = gauge / gaugeMax;
+
+        gaugeBar.style.setProperty("width", percentRatio(gaugeRatio) + "%");
+        gaugeText.innerText = gauge + " / " + gaugeMax;
+
+        setAboveHalf(gaugeRatio, gaugeBar);
+    }
+}
+
+async function setFundraisingTotal() {
+    const fundraising_total = await getFundraisingTotal();
+
+    if (fundraising_total !== null) {
+        const fundraisingBar = document.getElementById("fundraising-bar");
+        const fundraisingText = document.getElementById("fundraising-text");
+
+        const fundraisingRatio = fundraising_total / fundraisingTotalMax;
+
+        fundraisingBar.style.setProperty("width", percentRatio(fundraisingRatio) + "%");
+        fundraisingText.innerText = percentRatio(fundraisingRatio) + " %";
+
+        setAboveHalf(fundraisingRatio, fundraisingBar);
+    }
+}
+
+async function setProgress() {
+    setGauge();
+    setFundraisingTotal();
+}
+
+document.addEventListener("DOMContentLoaded", setProgress);

poster.html

@@ -1,4 +1,5 @@
-<html lang="en">
+<!DOCTYPE html>
+<html lang="fr">
 
 <head>
     <meta charset="UTF-8">
@@ -7,34 +8,56 @@
     <link rel="stylesheet" href="css/poster.css">
     <link rel="stylesheet" href="css/drag.css">
     <script src="js/drag.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
     <title>Camp Interhack 2026 – Poster</title>
 </head>
 
 <body>
     <nav>
-        <a href="index.html">home</a>
+        <a href="index.html">maison</a>
+        <a href="guide.html">guide</a>
         <a href="poster.html" class="current">poster</a>
+        <a href="contact.html">contact</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="">
-        <img class="draggable randomStart" src="assets/stickers/clavier.webp" alt="">
-        <img class="draggable randomStart" src="assets/stickers/clef.webp" alt="">
-        <img class="draggable randomStart" src="assets/stickers/ecran.webp" alt="">
-        <img class="draggable randomStart" src="assets/stickers/foin.webp" alt="">
-        <img class="draggable randomStart" src="assets/stickers/machineacoudre.webp" alt="">
-        <img class="draggable randomStart" src="assets/stickers/tracteur.webp" alt="">
+
+        <img class="draggable randomStart" src="assets/stickers/ecran.png" alt="">
+        <img class="draggable randomStart" src="assets/stickers/ferasouder.png" alt="">
+        <img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt="">
+        <img class="draggable randomStart" src="assets/stickers/tracteur.png" alt="">
 
         <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