Ajout d'un bouton et d'un player audio sur la page d'acceuil pour

streamer la radio de l'interhack

.forgejo/workflows/build.yaml

@@ -1,4 +1,7 @@
-on: [push]
+on:
+  push:
+    branches:
+      - main
 jobs:
   build:
     runs-on: docker
@@ -6,19 +9,6 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Install Pandoc
-        run: |
-          apt-get update
-          apt-get install -y pandoc
-
-      - name: Generate guide.html
-        run: bash update-guide.sh
-
-      - name: Install Podman
-        run: |
-          apt-get update
-          apt-get install -y podman
-
       - name: Podman Login
         run: |
           echo "${{ secrets.DOCKER_PASSWORD }}" | podman login git.interhacker.space --username "${{ secrets.DOCKER_USERNAME }}" --password-stdin

Dockerfile

@@ -1,6 +1,20 @@
 FROM docker.io/nginx:1.29-alpine
 
+RUN apk add --update --no-cache wget unzip bash pandoc sed
+
+RUN wget -q https://git.interhacker.space/epickiwi/2026.camp.carte/releases/download/latest/dist.zip
+RUN unzip -q dist.zip -d /tmp/carte
+RUN mkdir -p /usr/share/nginx/html/carte
+RUN cp -r /tmp/carte/dist/* /usr/share/nginx/html/carte/
+RUN rm -rf /tmp/carte
+RUN rm -rf dist.zip
+
+COPY guide.template.html .
+COPY update-guide.sh .
+RUN bash update-guide.sh
+
 COPY *.html /usr/share/nginx/html
+RUN mv 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

assets/pause-solid-full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"/></svg>

assets/play-solid-full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z"/></svg>

contact.html

@@ -17,6 +17,7 @@
         <a href="index.html">maison</a>
         <a href="guide.html">guide</a>
         <a href="programme.html">programme</a>
+        <a href="carte/">carte</a>
         <a href="poster.html">poster</a>
         <a href="contact.html" class="current">contact</a>
     </nav>

css/home.css

@@ -157,3 +157,26 @@ font-size : 1.5em;
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
+
+/* Radio Interhack */
+
+#radio-player {
+    float: left;
+    z-index: 100000;
+    background-color: aqua;
+    height: 1em;
+    width: 1em;
+    position: absolute;
+        bottom: 1em;
+        right: 1em;
+    position: fixed;
+    border-radius: 10%;
+}
+
+#radio-button {
+    background: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+}

guide.template.html

@@ -23,6 +23,7 @@ BISOUS
         <a href="index.html">maison</a>
         <a href="guide.html" class="current">guide</a>
         <a href="programme.html">programme</a>
+        <a href="carte/">carte</a>
         <a href="poster.html">poster</a>
         <a href="contact.html">contact</a>
     </nav>

index.html

@@ -10,6 +10,7 @@
 		<script src="js/drag.js" defer></script>
 		<script src="js/progress.js" defer></script>
 		<script src="js/pop.js" defer></script>
+		<script src="js/radio.js" defer></script>
 		<link rel="icon" type="image/x-icon" href="assets/stickers/ecran.png">
 		<title>Camp Interhack</title>
 	</head>
@@ -19,6 +20,7 @@
 			<a href="index.html" class="current">maison</a>
 			<a href="guide.html">guide</a>
 			<a href="programme.html">programme</a>
+            <a href="carte/index.html">carte</a>
 			<a href="poster.html">poster</a>
         	<a href="contact.html">contact</a>
 		</nav>
@@ -109,7 +111,7 @@
 				<br>
 				<p>
 					C'est <b>complet</b> !
-					<br> 
+					<br>
 					Nous avons reçu en amont</p>
 				<div class="places">
 					<span class="bar">
@@ -119,10 +121,10 @@
 					</span>
 				</div>
 				<p>des dons dont nous avons besoin.</p>
-				
+
 				<p>
-					Merci !! 
-					<br> 
+					Merci !!
+					<br>
 					Et nous comptons sur vous pour continuer à vous mobiliser avant et durant le camp, pour que l'on puisse atteindre les 100% !
 				</p>
 			</section>
@@ -192,6 +194,16 @@
 						<p>et bien d'autres !<br> Rejoignez le canal Matrix sur <code>#interhack:matrix.interhacker.space</code></p>
 				</div>
 			</section>
+
+			<section id="radio-player">
+				<audio preload=”metadata”>
+					<source src="http://stream.p-node.org/interhack.mp3" type="audio/mp3">
+					😥
+				</audio>
+				<span id="radio-button">
+					<img src="assets/play-solid-full.svg" alt="play button">
+				</span>
+			</section>
 		</main>
 		<footer>
 			<div>

js/radio.js

@@ -0,0 +1,23 @@
+// Code Javascript pour la radio du Camp Interhack
+// Hébergé par P-Node
+// Propulsé par le Radio Operation Center
+// En live depuis l'Antenne
+
+const radioPlayer = document.getElementById("radio-player");
+const audio = document.querySelector('audio');
+const radioButton = document.getElementById("radio-button");
+
+let state = "paused" // Can be : "playing" or "paused"
+
+radioPlayer.addEventListener('click', () => {
+    if(state == "paused"){
+        state = "playing";
+        audio.play();
+        radioButton.innerHTML = '<img src="assets/pause-solid-full.svg" alt="pause button">';
+
+    } else {
+        state = "paused"
+        audio.pause();
+        radioButton.innerHTML = '<img src="assets/play-solid-full.svg" alt="play button">';
+    }
+});

poster.html

@@ -17,6 +17,7 @@
         <a href="index.html">maison</a>
         <a href="guide.html">guide</a>
         <a href="programme.html">programme</a>
+        <a href="carte/">carte</a>
         <a href="poster.html" class="current">poster</a>
         <a href="contact.html">contact</a>
     </nav>

programme.html

@@ -19,6 +19,7 @@
 			<a href="index.html">maison</a>
 			<a href="guide.html">guide</a>
 			<a href="programme.html" class="current">programme</a>
+            <a href="carte/">carte</a>
 			<a href="poster.html">poster</a>
         	<a href="contact.html">contact</a>
 		</nav>