Update assets

Reviewed-on: #11
Reviewed-by: lateralus23 <pierrell@gmx.com>

.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 /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
-```

css/base.css

@@ -18,6 +18,10 @@ html, body {
     margin: 0;
 }
 
+img {
+    max-width: 100%;
+}
+
 a {
     text-decoration: none;
     color: black;
@@ -57,6 +61,7 @@ nav a, footer a, aside a {
     font-family: Dymo;
     font-size: 3em;
     display: inline-block;
+    margin-right: 1em;
 }
 
 nav a.current {
@@ -74,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/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

@@ -49,7 +49,6 @@ section {
     font-family: Erika;
     margin: auto;
     margin-bottom: 100px;
-    columns: 560px;
     padding: 2%;
 }
 

guide.template.html

@@ -0,0 +1,65 @@
+<!--
+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/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>
 

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");
 

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