add aria-hidden to stickers

fix invisible links (closes #26 )
Merge pull request 'add progression system' (#25 ) from progression into main
2026-01-25 13:32:08 +01:00 · 2026-01-25 13:02:56 +01:00 · 2026-01-22 23:04:39 +00:00 · 2026-01-23 00:03:47 +01:00 · 2026-01-22 19:45:13 +01:00 · 2026-01-22 11:21:32 +00:00
36 changed files with 379 additions and 276 deletions
--- a/assets/Banquise-Regular.woff
+++ b/assets/Banquise-Regular.woff
--- a/assets/Dymo.ttf
+++ b/assets/Dymo.ttf
--- a/assets/Erika-Type.ttf
+++ b/assets/Erika-Type.ttf
--- a/assets/background.jpg
+++ b/assets/background.jpg
--- a/assets/fonts/MonTrappist-Black.woff
+++ b/assets/fonts/MonTrappist-Black.woff
--- a/assets/fonts/segoesc.ttf
+++ b/assets/fonts/segoesc.ttf
--- a/assets/logos/datapaulette.jpg
+++ b/assets/logos/datapaulette.jpg
--- a/assets/logos/fuz.png
+++ b/assets/logos/fuz.png
--- a/assets/logos/hackstub.svg
+++ b/assets/logos/hackstub.svg
--- a/assets/logos/lebib.png
+++ b/assets/logos/lebib.png
--- a/assets/logos/lol_logo_txt.png
+++ b/assets/logos/lol_logo_txt.png
--- a/assets/logos/lqdn.png
+++ b/assets/logos/lqdn.png
--- a/assets/notebook.jpg
+++ b/assets/notebook.jpg
--- a/assets/paper.avif
+++ b/assets/paper.avif
--- a/assets/stickers/arbre-hetre.webp
+++ b/assets/stickers/arbre-hetre.webp
--- a/assets/stickers/bac-e2.webp
+++ b/assets/stickers/bac-e2.webp
--- a/assets/stickers/clavier.webp
+++ b/assets/stickers/clavier.webp
--- a/assets/stickers/clef.webp
+++ b/assets/stickers/clef.webp
--- a/assets/stickers/ecran.png
+++ b/assets/stickers/ecran.png
--- a/assets/stickers/ecran.webp
+++ b/assets/stickers/ecran.webp
--- a/assets/stickers/ferasouder.png
+++ b/assets/stickers/ferasouder.png
--- a/assets/stickers/foin.webp
+++ b/assets/stickers/foin.webp
--- a/assets/stickers/machineacoudre.png
+++ b/assets/stickers/machineacoudre.png
--- a/assets/stickers/machineacoudre.webp
+++ b/assets/stickers/machineacoudre.webp
--- a/assets/stickers/tracteur.png
+++ b/assets/stickers/tracteur.png
--- a/assets/stickers/tracteur.webp
+++ b/assets/stickers/tracteur.webp
--- a/css/base.css
+++ b/css/base.css
@ -1,21 +1,31 @@
+
+/* 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 {
@ -23,45 +33,106 @@ img {
 }

 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 {
-    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-right: 1em;
+    margin: 0.1em 0.3em;
 }

 nav a.current {
@ -72,8 +143,6 @@ footer a:hover, nav a:hover {
    transform: rotate(-2deg);
 }

-
-
 footer {
    display: block;
    text-align: center;
@ -88,3 +157,58 @@ footer {
        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%;
+    line-height: 0.8em;
+}
+
+#interhack {
+    text-shadow: -5px 5px 0px var(--accent-orange), -10px 10px 0px var(--accent-violet);
+    color: var(--accent-yellow);
+    margin-right: 10%;
+    line-height: 0.5em;
+}
+
+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;
+}
+
+@media (max-width: 500px) {
+    /* Hide stickers on mobile */
+    .randomStart {
+        display: none;
+    }
+}
--- a/css/drag.css
+++ b/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;
 }


--- a/css/guide.css
+++ b/css/guide.css
@ -1,112 +0,0 @@
-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;
-}
--- a/css/home.css
+++ b/css/home.css
@ -1,63 +1,9 @@
-main {
-    display: block;
-    color: black;
-    overflow: hidden;
-    width: 100%;
-    min-height: 1000px;
-}
-
-main h1 {
-    position: relative;
-    text-align: center;
-    margin: auto;
-    width: 100%;
-    font-size: clamp(4em, 14vw, 8em);
-    margin-top: 5%;
-}
-
-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%;
-    background: white;
-    background: url(../assets/notebook.jpg);
-    /* border: solid 1px; */
-    opacity: 0.92;
-    display: inline-block;
-    z-index: 3;
-}
-
-section {
-    max-width: 1400px;
-    font-size: 1.5em;
-    text-align: center;
-    font-family: Erika;
-    margin: auto;
-    margin-bottom: 100px;
-    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;
@ -70,3 +16,43 @@ section {
    align-items: center;
    height: 200px;
 }
+
+/* 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;
+color:black;
+}
--- a/css/poster.css
+++ b/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 {
--- a/guide.template.html
+++ b/guide.template.html
@ -13,35 +13,48 @@ BISOUS
    <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>
+    <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">home</a>
+        <a href="index.html">maison</a>
        <a href="guide.html" class="current">guide</a>
        <a href="poster.html">poster</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="">
+        <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>
    </main>
    <footer>
        <div>
--- a/index.html
+++ b/index.html
@ -1,4 +1,5 @@
-<html lang="en">
+<!DOCTYPE html>
+<html lang="fr">

 	<head>
 		<meta charset="UTF-8">
@ -7,38 +8,33 @@
 		<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>
+		<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>
 		</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>
@ -85,26 +81,37 @@
 					Seule exigence, respecter toutes les marginalités, originalités, bizarreries et normaleries de
 					chacun·es.</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. Ouverture prochaine des inscriptions !</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 (voir le détail des comptes)</p>
+			</section>
 			<h3>
 				<span>Iels y participent</span>
 			</h3>

-			<section class="participants">
+			<div class="participants">
 					<a href="https://lqdn.fr">
-						<img class="logo" src="assets/lqdn.png" alt="La Quadrature Du Net">
+						<img class="logo" src="assets/logos/lqdn.png" alt="La Quadrature Du Net">
 					</a>
 					<a href="https://datapaulette.org/">
-						<img class="logo" src="assets/datapaulette.jpg" alt="Datapaulette">
+						<img class="logo" src="assets/logos/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>
+					<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>

-			</section>
+			</div>
 		</main>
 		<footer>
 			<div>
@ -122,4 +129,5 @@
 			</div>
 		</footer>
 	</body>
+	
 </html>
--- a/js/drag.js
+++ b/js/drag.js
@ -1,10 +1,6 @@
-const stepSize = 100;
+const stepSize = 1;
 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");

@ -24,8 +20,6 @@ function stepedSize(n) {
 function move(e) {
    e.preventDefault();
    let target = e.target;
-    target.style['z-index'] = zIndex;
-    zIndex++;

    target.moving = true;

@ -68,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";
    }
 }

--- a/js/progress.js
+++ b/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 = 250;
+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);
--- a/poster.html
+++ b/poster.html
@ -7,12 +7,13 @@
    <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>
    </nav>
@ -20,23 +21,20 @@

    <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>
+        <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>
Author	SHA1	Message	Date
Pierre de Lacroix	bfa57e3fc8	add aria-hidden to stickers	2026-01-25 13:32:08 +01:00
Pierre de Lacroix	fc5ae9031c	fix invisible links (closes #26 )	2026-01-25 13:02:56 +01:00
lateralus23	2ae53d4997	Merge pull request 'add progression system' (#25 ) from progression into main Reviewed-on: interhack/2026.camp.public.website#25	2026-01-22 23:04:39 +00:00
Pierre de Lacroix	e18381fc17	plug progression system to camp-api	2026-01-23 00:03:47 +01:00
Marne	d3d1672b2f	add progression system	2026-01-22 19:45:13 +01:00
Nono	6c26735680	Merge pull request '- Modification des tailles et espacements des titres' (#23 ) from fougere/2026.camp.public.website:fix/guide-style into main Reviewed-on: interhack/2026.camp.public.website#23 Reviewed-by: Nono <nono@noreply.interhacker.space>	2026-01-22 11:21:32 +00:00
fougère	b9fbe5f681	Ajout du doctype sur index.html pour corriger l'espacement entre titre principal et le sous-titre	2026-01-20 20:00:19 +01:00
fougère	6ea6888c46	Correction du centrage du titre des participant.e.s	2026-01-20 19:25:12 +01:00
fougère	0c22455783	- Modification des tailles et espacements des titres - Réduction de la taille des légendes d'images - Ajout d'un fond derrière les balises <code> pour mettre en valeur le matrix - Masquage des stickers quand la largeur de la fenêtre est inférieure à 500px (mobile)	2026-01-17 23:40:17 +01:00
Nono	e7d4435002	Merge pull request 'Ajout du logo du LoL' (#20 ) from feat/add-logos into main Reviewed-on: interhack/2026.camp.public.website#20 Reviewed-by: VincentP <vincent-peugnet@riseup.net>	2026-01-06 13:21:06 +00:00
Nono	d8af8caace	Ajout du LoL	2026-01-06 13:39:02 +01:00
Nono	c7dd800859	Ajout du logo du LoL	2026-01-06 13:36:31 +01:00
Nono	651b726862	Merge pull request 'Mise à jour du nouveau design :D' (#16 ) from feat/new-design into main Reviewed-on: interhack/2026.camp.public.website#16 Reviewed-by: VincentP <vincent-peugnet@riseup.net>	2025-12-29 16:08:26 +00:00
Nono	131f0ecdb6	Remove old css asset	2025-12-29 17:07:00 +01:00
Nono	f5f4e6d8aa	Remove call to guide.css that doesn't exists anymore	2025-12-29 16:33:27 +01:00
vincent-peugnet	ee9dd6bdc4	empêche la page de déborder horizontalement	2025-12-28 15:54:16 +01:00
vincent-peugnet	378d7521ed	ajuste la taille de la section contenant le texte réduit la largeur max pour éviter d'avoir des super longues lignes à lire. réduit un peu la police pour que ça soit moins énorme.	2025-12-28 15:53:23 +01:00
Nono	e2ae37d9f9	Ajustements suite au retour de Vincent - taille de la police des logos - Commentaires en trop - Classes liées à la suppression des stickers	2025-12-23 18:45:37 +01:00
Nono	aa94638ac8	Suppression de la classe sticker	2025-12-23 18:45:20 +01:00
vincent-peugnet	63af8d89f5	retire l'ombre et la transparence des nav, footer et aside c'était à l'époque du papier, maintenant c'est caduc	2025-12-20 17:45:05 +01:00
vincent-peugnet	6d108c74e5	recentre les liens du footer la marge à droite marchait pour le nav, mais pas pour le footer où les liens étaient décallés	2025-12-20 17:39:03 +01:00
vincent-peugnet	6fb923d8ae	empêche les stickers de dépasser à droite suite à l'augmentation de leur taille	2025-12-20 17:33:13 +01:00
vincent-peugnet	84cd5dc2f7	maison partout	2025-12-20 17:18:13 +01:00
vincent-peugnet	f04afb1b5a	répare l'affichage du fond du poster	2025-12-20 17:12:47 +01:00
Nono	6ff0b2ef88	Adjust z-indexes and add nice button class	2025-12-19 17:07:02 +01:00
Nono	cebb060352	Add favicon	2025-12-19 17:06:50 +01:00
Nono	8b022848a6	Add padding for nav	2025-12-19 12:30:11 +01:00
Nono	b967d8c0b5	Update HTML pages	2025-12-19 12:28:11 +01:00
Nono	8cd02cdb76	Update CSS	2025-12-19 12:28:01 +01:00
Nono	9b307813d6	Smaller step size, add random rotation, remove z-index increments	2025-12-19 12:27:07 +01:00
vincent-peugnet	bbf60b8ae8	organize assets folder	2025-12-18 18:37:14 +01:00
vincent-peugnet	8481dab297	use new stickers	2025-12-18 18:29:42 +01:00
Nono	4e0dd99eaa	Update assets	2025-12-18 17:48:37 +01:00
Nono	ef8e90eeb0	Merge pull request 'fix menu order' (#17 ) from fix/menu-order into main Reviewed-on: interhack/2026.camp.public.website#17 Reviewed-by: Nono <nono@noreply.interhacker.space>	2025-12-18 16:48:24 +00:00