Ajout de la page contact

Merge pull request 'add progression system' (#25 ) from progression into main
Reviewed-on: interhack/2026.camp.public.website#25
2026-01-24 15:14:42 +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 · 2026-01-20 20:00:19 +01:00
8 changed files with 289 additions and 22 deletions
--- a/contact.html
+++ b/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/#/#interhack: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>
--- a/css/base.css
+++ b/css/base.css
@ -55,30 +55,44 @@ main h1 {

 main h2 {
    position: relative;
-    margin: 4% auto;
+    margin: 12% auto 5% auto;
    text-align: center;
-    font-size: clamp(1.5em, 4vw, 3em);
+    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;
-    text-align: center;
    margin: auto;
    width: 100%;
-    font-size: clamp(2em, 4vw, 4em);
+    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: 1%;
-    padding: 1%;
-    /* border: solid 1px; */
-    opacity: 0.90;
+    margin: 0 0 min(1em, 2%) 1%;
    display: inline-block;
    z-index: 3;
-    background-color: black;
+}

+main p:last-child {
+    margin-bottom: 0;
 }

 section {
@ -89,9 +103,14 @@ section {
    margin: auto;
    margin-bottom: 100px;
    padding: 2%;
-    padding-left: 0px;
+    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 {
@ -139,15 +158,21 @@ main > img {
    object-fit: scale-down;
 }

+figcaption {
+  font-size: 0.6em;
+  line-height: initial;
+}
+
 .btn-nice {
    color: #FFFFFF;
-    text-shadow: -5px 5px 0px var(--accent-orange), -10px 10px 0px var(--accent-violet);
+    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 {
@ -163,3 +188,23 @@ main > img {
    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/contact.css
+++ b/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;
+}
--- a/css/home.css
+++ b/css/home.css
@ -15,4 +15,44 @@
    justify-content: center;
    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/guide.template.html
+++ b/guide.template.html
@ -23,6 +23,7 @@ BISOUS
        <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>
--- a/index.html
+++ b/index.html
@ -1,4 +1,5 @@
-<html lang="en">
+<!DOCTYPE html>
+<html lang="fr">

 	<head>
 		<meta charset="UTF-8">
@ -7,6 +8,7 @@
 		<link rel="stylesheet" href="css/home.css">
 		<link rel="stylesheet" href="css/drag.css">
 		<script src="js/drag.js" defer></script>
+		<script src="js/progress.js" defer></script>
 		<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
 		<title>Camp Interhack</title>
 	</head>
@ -16,6 +18,7 @@
 			<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>

@ -29,11 +32,6 @@
 			<img class="draggable randomStart" src="assets/stickers/machineacoudre.png" alt="">
 			<img class="draggable randomStart" src="assets/stickers/tracteur.png" 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 id="camp" class="draggable">camp</span>
 				<br>
@ -84,8 +82,18 @@
 					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>
@ -122,4 +130,5 @@
 			</div>
 		</footer>
 	</body>
+	
 </html>
--- 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
@ -1,4 +1,5 @@
-<html lang="en">
+<!DOCTYPE html>
+<html lang="fr">

 <head>
    <meta charset="UTF-8">
@ -14,8 +15,9 @@
 <body>
    <nav>
        <a href="index.html">maison</a>
-        <a href="guide.html" >guide</a>
+        <a href="guide.html">guide</a>
        <a href="poster.html" class="current">poster</a>
+        <a href="contact.html">contact</a>
    </nav>
Author	SHA1	Message	Date
fougère	d585b9f7de	Ajout de la page contact	2026-01-24 15:14:42 +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