Ajout de l'affiche de l'algorave

This reverts commit 7473a263af6c617b73a2892346e13dc636ded458.

.gitignore

@@ -0,0 +1 @@
+*.blend?

README.MD

@@ -1,11 +1,9 @@
-La dérniere version est sur la branche V2
+# Laboratoire Ouvert Lyonnais
 
-Laboratoire Ouvert Lyonnais
-===========================
 Vous retrouverez la version en ligne du site du lol, il n'y a pas de bootstrap sur cette version.
 Il a été codé le plus simplement possible.
 
-TODO
-====
+## TODO
+
 Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.
 Est-ce le git pourrait nous permettre de faire ça ?

css/affiches/algorave.css

@@ -0,0 +1,51 @@
+.affiche-algorave {
+    grid-row: span 2;
+    padding: 0;
+    font-family: monospace;
+
+    img {
+        display: block;
+        width: 100%;
+    }
+
+    &:hover .description,
+    &:active .description {
+        opacity: 1;
+    }
+
+    .description {
+        opacity: 0;
+
+        padding: 10px;
+        
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+
+        background: rgba(0, 0, 0, 0.9);
+
+        ul {
+            padding: 0;
+            list-style-type: none;
+            text-align: justify;
+
+            flex: 1;
+            line-height: 2;
+        }
+
+        ul li {
+            display: inline
+        }
+
+        ul li:not(:last-child)::after {
+            content: ", ";
+        }
+    }
+}

css/affiches/back.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="4.6079388mm"
+   height="3.1703224mm"
+   viewBox="0 0 4.6079388 3.1703224"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2"><linearGradient
+       id="linearGradient22086"><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop22082" /><stop
+         style="stop-color:#d4d4d4;stop-opacity:1;"
+         offset="1"
+         id="stop22084" /></linearGradient><linearGradient
+       xlink:href="#linearGradient22086"
+       id="linearGradient22088"
+       x1="24.94607"
+       y1="37.351017"
+       x2="25.431881"
+       y2="37.910633"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#linearGradient22086"
+       id="linearGradient22096"
+       x1="27.680107"
+       y1="37.517262"
+       x2="28.045597"
+       y2="37.891655"
+       gradientUnits="userSpaceOnUse" /></defs><g
+     id="layer4"
+     transform="translate(-24.106776,-36.438155)"><g
+       id="g18540"
+       style="display:inline;fill:#bdbdbd;fill-opacity:1"><path
+         style="fill:url(#linearGradient22088);fill-opacity:1;stroke:#07077d;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 24.297671,37.95924 1.296798,-1.216447 0.0019,0.646007 1.376938,0.0036 -0.01322,1.089295 -1.296188,-0.01308 -0.0089,0.827227 z"
+         id="path14411" /><circle
+         style="opacity:1;fill:url(#linearGradient22096);fill-opacity:1;stroke:#07077d;stroke-width:0.210988;stroke-linejoin:round;stroke-miterlimit:10.5;stroke-opacity:1;paint-order:markers fill stroke"
+         id="path14465"
+         cx="28.041388"
+         cy="37.955338"
+         r="0.56783295" /></g></g></svg>

css/affiches/cafe.css

@@ -1,34 +0,0 @@
-@font-face {
-    font-family: "Azeret Mono";
-    src: url("./AzeretMono-VariableFont_wght.ttf");
-}
-
-.affiche-cafe {
-    font-family: "Azeret Mono", monospace;
-    line-height: 1.3;
-    font-size: 0.9rem;
-}
-
-.affiche-cafe > * {
-    margin: 0;
-    margin-bottom: 0.9rem;
-}
-
-.affiche-cafe > *:last-child {
-    margin-bottom: 0;
-}
-
-@keyframes cursor-blink {
-    0% {opacity: 0;}
-    65% {opacity: 1;}
-    100% {opacity: 1;}
-}
-
-.affiche-cafe .cursor {
-    animation: cursor-blink 1.5s steps(1) infinite;
-}
-
-.affiche-cafe h1 {
-    font-weight: normal;
-    font-size: 2em;
-}

css/affiches/dac.css

@@ -1,57 +0,0 @@
-@font-face {
-    font-family: "Pixelify Sans";
-    src: url("./PixelifySans-Regular.ttf");
-}
-
-.affiche-dac {
-    background-color: transparent;
-    border: none;
-    background-image: url("/images/affiches/dac-background.png");
-    border-color: white;
-    font-family: "Pixelify Sans", monospace;
-
-    background-size: 550px;
-    background-position: center top;
-    background-repeat: no-repeat;
-
-    color: #1bff8d;
-    line-height: 1.5;
-}
-
-.affiche-dac .content {
-    width: 350px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 25px;
-}
-
-@media screen and (max-width: 880px) {
-    .affiche-dac {
-        padding-bottom: 200px;
-    }
-}
-
-.affiche-dac .notes {
-    float: right;
-    margin: 10px;
-}
-
-.affiche-dac em {
-    color: #ebff00;
-    font-style: normal;
-    font-weight: normal;
-}
-
-.affiche-dac strong {
-    text-decoration-color: #00ffff;
-    text-decoration-line: underline;
-    text-decoration-thickness: 3px;
-    text-decoration-style: dotted;
-    font-style: normal;
-    font-weight: normal;
-}
-
-.affiche-dac p {
-    margin: 0;
-    margin-bottom: 10px;
-}

css/affiches/jdll2024.css

@@ -0,0 +1,147 @@
+.affiche-jdll2024 {
+    border-top-color: #fafaf5ff;
+    border-left-color: #fafaf5ff;
+    border-bottom-color: #868381ff;
+    border-right-color: #868381ff;
+    border-style: solid;
+    border-width: 4px;
+    background-color: #d3cfc9ff;
+    padding: 0;
+    color: black;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+    padding-bottom: 4px;
+}
+
+.affiche-jdll2024 iframe {
+    flex: 1;
+    border-bottom-color: #fafaf5ff;
+    border-right-color: #fafaf5ff;
+    border-top-color: #868381ff;
+    border-left-color: #868381ff;
+    border-style: solid;
+    border-width: 2px;
+}
+
+.affiche-jdll2024 button {
+    border-top-color: #fafaf5ff;
+    border-left-color: #fafaf5ff;
+    border-bottom-color: #868381ff;
+    border-right-color: #868381ff;
+    border-style: solid;
+    border-width: 2px;
+    background-color: #d3cfc9ff;
+}
+
+.affiche-jdll2024 header {
+    height: 25px;
+
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-direction: row;
+
+    background: linear-gradient(to right, #112160ff, #a6c6f2ff);
+    padding: 2px 4px;
+    box-sizing: border-box;
+
+    column-gap: 4px;
+
+    border-bottom: solid 2px #d3cfc9ff;
+}
+
+.affiche-jdll2024 > :not(header) {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.affiche-jdll2024 header h1 {
+    flex: 1;
+    color: white;
+    margin: 0;
+    font-size: 1rem;
+}
+
+.affiche-jdll2024 header > img {
+    height: 80%;
+}
+
+.affiche-jdll2024 header > button {
+    height: 100%;
+    display: block;
+    padding: 2px;
+}
+
+.affiche-jdll2024 button img {
+    height: 100%;
+    display: block;
+    box-sizing: border-box;
+}
+
+.affiche-jdll2024 nav {
+    padding: 2px;
+
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-direction: row;
+
+    border-bottom: groove 2px #fafaf5ff;
+}
+
+.affiche-jdll2024 nav:first-of-type {
+    height: 40px;
+}
+
+.affiche-jdll2024 nav button {
+    height: 100%;
+    font-size: 0.6rem;
+    width: 50px;
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+
+.affiche-jdll2024 nav button img {
+    height: 15px;
+}
+
+.affiche-jdll2024 nav hr {
+    flex: 1;
+    border: none;
+}
+
+.affiche-jdll2024 nav > img {
+    height: 100%;
+    border-bottom-color: #fafaf5ff;
+    border-right-color: #fafaf5ff;
+    border-top-color: #868381ff;
+    border-left-color: #868381ff;
+    border-style: solid;
+    border-width: 1px;
+}
+
+.affiche-jdll2024 nav input {
+    flex: 1;
+    border-bottom-color: #fafaf5ff;
+    border-right-color: #fafaf5ff;
+    border-top-color: #868381ff;
+    border-left-color: #868381ff;
+    border-style: solid;
+    border-width: 2px;
+    font-size: 0.7rem;
+}
+
+.affiche-jdll2024 nav label {
+    font-size: 0.7rem;
+    margin-right: 1ex;
+}
+
+.affiche-jdll2024 nav:last-of-type {
+    border-bottom: none;
+}

css/style.css

@@ -32,7 +32,6 @@ a:link {
 
 a:hover, a:focus {
 	color: white;
-	background-color:black;
     text-decoration: underline;
 }
 
@@ -102,7 +101,7 @@ hr {
 
 /* main area */
 
-main {
+#homepage {
     display: grid;
     grid-template-columns: 1fr 400px;
     grid-auto-rows: min-content;
@@ -115,26 +114,35 @@ main {
 
 main #main-info {
     grid-column: 2;
-    grid-row: 1;
+    grid-row: 1 / 3;
 }
 
 main #events {
-    grid-column: 2;
-    grid-row: 2;
+    grid-column: 1 / 3;
+    grid-row: 3;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: row;
+    grid-auto-rows: min-content;
+    column-gap: 15px;
+    row-gap: 15px;
 }
 
 main #description {
     grid-column: 1;
-    grid-row: 1 / 5;
+    grid-row: 2;
+    margin-bottom: 50px;
 }
 
-main .toolbar {
-    grid-column: 1 / 3;
+#homepage .toolbar {
+    grid-column: 1;
+    grid-row: 1;
     text-align: right;
 }
 
 @media screen and (max-width: 889px){
-    main {
+    #homepage {
         grid-template-columns: 1fr;
         row-gap: 50px;
     }
@@ -147,6 +155,7 @@ main .toolbar {
     main #events {
         grid-column: 1;
         grid-row: 5;
+        grid-template-columns: 1fr;
     }
     
     main #description {
@@ -160,9 +169,88 @@ main .toolbar {
     }
 }
 
+/* status page */
+
+.status-page main {
+    width: 90%;
+    max-width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 15vh;
+    margin-bottom: 15vh;
+}
+
+/* status block */
+
+.status-container {
+    text-align: left;
+    display: grid;
+    grid-template-columns: minmax(min-content, 75px) 1fr;
+    align-items: center;
+    column-gap: 5px;
+
+    border: solid 1px currentColor;
+    background: black;
+    padding: 15px;
+}
+
+.status-container.no-icon {
+    grid-template-columns: min-content 1fr;
+}
+
+.status-container > * {
+    grid-column: span 2;
+    text-align: center;
+    font-size: 0.8em;
+}
+
+.status-container > *:first-child:not(img) {
+    grid-column: 2;
+    text-align: left;
+    font-size: inherit;
+}
+
+.status-container.no-icon > *:first-child:not(img) {
+    text-align: center;
+}
+
+.status-container .status-icon {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: center;
+}
+
+/* Join steps */
+
+#join-steps {
+    padding: 0;
+    list-style-type: none;
+
+    text-align: left;
+
+    counter-reset: join-step;
+}
+
+#join-steps li {
+    position: relative;
+    counter-increment: join-step;
+    margin-bottom: 1em;
+}
+
+#join-steps li::before {
+    content: counter(join-step) ".";
+    font-size: 1.5em;
+    margin-right: 0.5em;
+}
+
+#join-steps li:nth-child(2)::before {
+    position: absolute;
+    bottom: 100px;
+}
+
 /* toolbar */
 
-main .toolbar button {
+#homepage .toolbar button {
     border: none;
     background: none;
     color: white;
@@ -170,12 +258,12 @@ main .toolbar button {
     cursor: pointer;
 }
 
-main .toolbar button img {
+#homepage .toolbar button img {
     height: 1em;
     display: inline-block;
 }
 
-main .toolbar button img[hidden] {
+#homepage .toolbar button img[hidden] {
     display: none;
 }
 
@@ -314,14 +402,6 @@ main > aside {
     position: relative;
 }
 
-.affiche:not(:first-child){
-    margin-top: 25px;
-}
-
-.affiche:not(:last-child){
-    margin-bottom: 25px;
-}
-
 .affiche .credits {
     font-size: 0.5em;
     text-align: right;

images/favicon.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="94.468002"
+   height="94.468002"
+   viewBox="0 0 94.468002 94.468003"
+   sodipodi:docname="favicon.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="130.08"
+   inkscape:export-ydpi="130.08"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata8">
+    <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="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1341"
+     inkscape:window-height="927"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="4.8680853"
+     inkscape:cx="38.824299"
+     inkscape:cy="53.306379"
+     inkscape:current-layer="svg2"
+     inkscape:window-x="56"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4542"
+     width="88.88665"
+     height="88.88665"
+     x="2.7906749"
+     y="2.7906749" />
+  <circle
+     style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="circle868"
+     cx="47.234001"
+     cy="47.234001"
+     r="16.613539" />
+</svg>

index.html

@@ -1,8 +1,11 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="fr" vocab="http://schema.org/">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="shortcut icon" href="/images/favicon.svg" type="image/svg+xml">
+	<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
+	<link rel="me" href="https://nerdculture.de/@labolyon" />
 	<title>Laboratoire Ouvert Lyonnais</title>
 	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
 
@@ -15,10 +18,11 @@
 	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
 
 	<link rel="stylesheet" href="css/affiches/perm.css">
-	<link rel="stylesheet" href="css/affiches/dac.css">
+	<link rel="stylesheet" href="css/affiches/jdll2024.css">
+	<link rel="stylesheet" href="css/affiches/algorave.css">
 </head>
 
-<body>
+<body typeof="Organization Place" resource="https://labolyon.fr/">
 
 	<div class="fullscreen-background" aria-hidden="true">
 		<video muted loop poster="images/world_network.jpg" id="background-video">
@@ -29,18 +33,21 @@
 	</div>
 
 	<header id="main-header">
-		<img class="logo" src="images/logo_picto.svg" alt="Logo du laboratoire ouvert lyonnais : un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." />
+		<img property="logo" class="logo" src="images/logo_picto.svg" alt="Logo du laboratoire ouvert lyonnais : un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." />
 
-		<h1>Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
+		<h1 property="name">Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
 
 		<nav id="main-nav">
-			<a href="https://git.labolyon.fr/explore/repos ">Dépots Git</a>
-			<a href="https://team.labolyon.fr/">Wiki</a>
-			<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
+			<link property="url" href="https://labolyon.fr/">
+			<a property="url" href="https://git.labolyon.fr/explore/repos">Dépots Git</a>
+			<a property="url" href="https://wiki.labolyon.fr/">Wiki</a>
+			<a property="url" href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
+			<a property="url" href="https://nerdculture.de/@labolyon">Fédiverse</a>
+			<a property="url" href="https://matrix.to/#/#general:chat.labolyon.fr">Salon Matrix</a>
 		</nav>
 	</header>
 
-	<main>
+	<main id="homepage">
 		
 		<section id="description">
 
@@ -54,6 +61,8 @@
 
 			<hr>
 
+			<div property="abstract">
+				
 				<p>Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tout les passionné·es d'informatique, d'électronique et de technique.
 				Le LOL est un lieu d'exploration des alternatives et de bidouille.</p>
 
@@ -67,46 +76,167 @@
 					<a href="https://www.hackerspaces.org/" class="hackerspace-logo" target="_blank"><img class="icons" src="images/logo_hackerspaces_monde.png" alt="Hackerspaces.org"></a>
 					<marquee direction="left" behavior="scroll" scrollamount="3">none of us is smarter than all of us - nul n'est plus intelligent·e que nous tou·tes réunis</marquee>
 				</p>
+
+			</div>
 		</section>
 
 		<aside id="main-info">
-			<address><a href="geo:45.7732495,4.8372366">
+			
+			<address property="address"><a href="geo:45.7732495,4.8372366">
 				7 Place Louis Chazette 69001 Lyon<br/>
 				45° 46' 23.698" N 4° 50' 14.052" E 
 			</a></address>
+
 			<p> Ouvert tous les mardis à partir de 19h</p>
+
+			<section class="status-section">
+				<a href="/status/" id="status">Vérifier si le local est ouvert 🠖</a>
+				<script src="/js/status.js"></script>
+			</section>
+
+			<ol id="join-steps">
+				<li>Sonnez à l’interphone</li>
+				<li><img src="/images/plan-d-access.png" alt="Plan d'acces au locaux du LOL : En entrant depuis la place, tout au bout en traversant une cour. Sur la droite avant les escaliers" title="En entrant depuis la place, tout au bout en traversant une cour. Sur la droite avant les escaliers" /></li>
+			</ol>
 		</aside>
 
 		<section id="events">
 
-			<article class="event affiche affiche-dac">
+			<article class="event affiche-perm affiche" property="event" typeof="Event">
+				<h1 property="name">Permanence du LOL</h1>
 				
-				<div class="content">
-
-					<img src="/images/affiches/dac-notes.png" alt="Quelques notes de musique" class="notes"/>
-					<p>
-						La <em>Digital Audio Community</em> se donne rendez-vous le <time datetime="2023-10-11">Mercredi 25&nbsp;Octobre</time> à partir de <time datetime="18:30">18h30</time> au LOL, <a href="geo:45.7732495,4.8372366">7&nbsp;place Louis Chazette</a>.
-					</p>
-					<p>
-						<strong>Au Programme</strong> : Ateliers Livre-Coding, Discussions Informatique Musicale && Découverte Code Créatif.
-					</p>
-					
-				</div>
-
-			</article>
-
-			<article class="event affiche-perm affiche">
-				<h1>Permanence du LOL</h1>
-				
-				<p>Venez nous rencontrer autours d'une pizza</p>
+				<div property="description">
+					<p>Venez chiller avec nous, partager un thé ou une biere.</p>
 
 					<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
-				<p class="event-hours"><strong>Tous les mardis à partir de&nbsp;19h <br/>
-					au local du LOL</strong></p>
+				</div>
 
-				<p>Adhésion 5€ pour le mois</p>
+				<p class="event-hours"><strong><span property="eventSchedule" typeof="Schedule">
+					Tous les <data property="byDay" content="Tuesday">mardis</data> à partir de&nbsp;<data property="startTime" content="19:00">19h</data>
+				</span><br/>
+					au <span property="location" href="https://labolyon.fr/">local du LOL</span></strong></p>
+
+				<p>Adhésion conseillée (prix libre)</p>
 			</article>
 
+			<article class="event affiche affiche-algorave" property="event" typeof="Event">
+				<img src="./images/affiches/algorave-2025.png" alt="Affiche de l'algorave 2025: Une ville en noir et blanc en vue isometrique avec du texte rouge." aria-labelledby="algorave-decription" />
+				<div class="description" id="algorave-description">
+					<h1 property="name">Algorave</h1>
+					<p property="description">Nuit de livre coding</p>
+					<p property="location">Grrrnd zero; 60 avenue de Bohlen 69120 Vaulx-en-Velin</p>
+					<p>
+						<time datetime="2025-05-24T18:00:00" content="2025-05-24T18:00:00" property="startDate">24 Mai 18h</time>
+						-
+						<time datetime="2025-05-25T06:00:00" content="2025-05-25T06:00:00" property="endDate">6h</time>
+					</p>
+					<p>Prix libre, No CB, 8 euros conseillé</p>
+					<p property="abstract">Performances visuelles et sonores de 39 artistes</p>
+					<p>Restauration sur place</p>
+					<ul>
+						<li>emilie_breslavetz</li>
+						<li>z0rg</li>
+						<li>peregrine</li>
+						<li>lbvp</li>
+						<li>libre_&change_trio</li>
+						<li>polymorphic_engine</li>
+						<li>parvagues</li>
+						<li>crash_server</li>
+						<li>maeertt</li>
+						<li>th4</li>
+						<li>bubobubo && ralt144mi</li>
+						<li>sara_adkins</li>
+						<li>nabir</li>
+						<li>jaxa</li>
+						<li>lucky.jvj</li>
+						<li>syntonic</li>
+						<li>2mo</li>
+						<li>fronssons</li>
+						<li>three_nagthi_bois</li>
+						<li>plot</li>
+						<li>marlen</li>
+						<li>kaamtar</li>
+						<li>ungual</li>
+						<li>dok</li>
+						<li>nesso && bruno_gola</li>
+						<li>neon_delice</li>
+						<li>bleuje</li>
+						<li>gcode</li>
+						<li>c_robo</li>
+						<li>azertype</li>
+						<li>afalfi</li>
+					</ul>
+					<p>Organisé par ordinateur dans la tête</p>
+					<p>21472 bytes poster by adel faure</p>
+					<p>Greetz to Mistigris, Textmode Friends, 1-Bit Bad Bitches and Cookie collective</p>
+				</div>
+			</article>
+
+			<!--<article class="event affiche-jdll2024 affiche">
+				<header>
+					<img src="/images/favicon.png" alt="Favicon du LOL" />
+					<h1 id="jdll-2024-title">Le LOL aux JDLL 2024</h1>
+
+					<button>
+						<img src="/css/affiches/reduire.png" alt="Reduire" />
+					</button>
+					<button>
+						<img src="/css/affiches/agrandir.png" alt="Agrandir" />
+					</button>
+					<button>
+						<img src="/css/affiches/fermer.png" alt="Fermer" />
+					</button>
+				</header>
+				<nav>
+					<button id="jdll-2024-back">
+						<img src="/css/affiches/back.png" alt="Back" />
+						Back
+					</button>
+					<button id="jdll-2024-forward">
+						<img src="/css/affiches/forward.png" alt="Back" />
+						Forward
+					</button>
+					<button id="jdll-2024-home">
+						<img src="/css/affiches/home.png" alt="Home" />
+						Home
+					</button>
+					<hr>
+					<img src="/css/affiches/tux.png" alt="Tux" />
+				</nav>
+				<nav>
+					<label for="jdll-2024-location">Location : </label>
+					<input type="url" name="location" id="jdll-2024-location" value="/jdll2024/affiche.html"/>
+				</nav>
+				<iframe src="/jdll2024/affiche.html" id="jdll-2024-iframe" frameborder="0"></iframe>
+			</article>
+
+			<script>
+				(() => {
+					const iframe = document.getElementById("jdll-2024-iframe");
+					const initialValue = iframe.src;
+
+					iframe.addEventListener("load", () => {
+						document.getElementById("jdll-2024-location").value = iframe.src
+						document.getElementById("jdll-2024-title").textContent = iframe.contentWindow.document.title
+					})
+
+					document.getElementById("jdll-2024-location").addEventListener("change", e => {
+						iframe.src = e.target.value
+					})
+
+					document.getElementById("jdll-2024-back").addEventListener("click", () => {
+						iframe.contentWindow.history.back()
+					})
+
+					document.getElementById("jdll-2024-forward").addEventListener("click", () => {
+						iframe.contentWindow.history.forward()
+					})
+
+					document.getElementById("jdll-2024-home").addEventListener("click", () => {
+						iframe.src = initialValue
+					})
+				})()
+			</script> -->
 		</section>
 
 		<div class="toolbar">

jdll2024/affiche.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Le LOL aux JDLL 2024</title>
+</head>
+<body>
+    <h1>Le LOL sera aux <a href="https://jdll.org/">JDLL 2024</a> !</h1>
+
+    <p>C'est le 25 et le 26 mai à l'<a href="https://www.openstreetmap.org/?mlat=45.73257&mlon=4.83185#map=19/45.73257/4.83185" target="_blank">ENS</a> ! Le LOL sera présent pendant tout l'événement pour se rencontrer, discuter et hacker ensemble. En plus de ça, nous allons proposer un temps d'expression libre sur le web.</p>
+
+    <p>Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.<br/>
+    Il n'y a aucun pré-requis, si ce n'est savoir utiliser un clavier.</p>
+
+    <p>Venez nous rencontrer, hacker ou bien discuter sur le stand.</p>
+</body>
+</html>

js/status.js

@@ -0,0 +1,43 @@
+/**
+ * Fetch status content and insert main content into provided container
+ * @param {Element} containerEl Container to insert status into
+ */
+async function insertStatus(containerEl){
+
+    const baseUrl = containerEl.href;
+    const res = await fetch(baseUrl, {cache:"no-cache"});
+
+    if(!res.ok){
+        console.info(`Network error requesting status : ${res.status} ${res.statusText}`);
+        return;
+    }
+
+    const dom = new DOMParser().parseFromString(await res.text(), "text/html");
+
+
+    let base = dom.createElement("base");
+    base.href = containerEl.href;
+    dom.head.append(base);
+
+    const main = dom.querySelector("main");
+
+    if(!main)
+        throw new Error("Status page does not contain a <main> element");
+
+    for(let it of main.querySelectorAll("[href],[src]")){
+        if(it.hasAttribute("href")){
+            it.href = it.href
+        } else {
+            it.src = it.src
+        }
+    }
+
+    containerEl.innerHTML = "";
+    for(let node of main.childNodes){
+        containerEl.append(document.importNode(node, true));
+    }
+    containerEl.className = main.className;
+    containerEl.setAttribute("style", main.getAttribute("style"))
+}
+
+insertStatus(document.getElementById("status"))

status/24-12.fermé.html

@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
+	<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+</head>
+
+<body class="status-page">
+
+	<header id="main-header">
+		<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
+	</header>
+
+	<main id="content" class="status-container closed no-icon" style="color: crimson">
+		<p>Le Laboratoire Ouvert Lyonnais<br/>n’ouvrira pas le 24 et le 31 décembre</p>
+
+		<p>De retour en 2025</p>
+	</main>
+
+	<nav>
+		<a href="..">🠔 Retour au site</a>
+	</nav>
+
+</body>
+
+</html>

status/index.fermé.html

@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
+	<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+</head>
+
+<body class="status-page">
+
+	<header id="main-header">
+		<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
+	</header>
+
+	<main id="content" class="status-container closed">
+		<p>Le local du LOL est actuellement <strong>Fermé</strong></p>
+
+		<img class="status-icon" src="/status/status.fermé.png" alt="Cercle rouge indiquant que le local est fermé"
+			title="Le local est fermé" />
+
+		<p>Venez pendant les horaires de permanence ou envoyez nous un petit message ;)</p>
+	</main>
+
+	<nav>
+		<a href="..">🠔 Retour au site</a>
+	</nav>
+
+</body>
+
+</html>

status/index.html

@@ -0,0 +1 @@
+index.fermé.html

status/index.ouvert.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
+	<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+</head>
+
+<body class="status-page">
+
+	<header id="main-header">
+		<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
+	</header>
+
+	<main id="content" class="status-container opened">
+		<p>Le local du LOL est actuellement <strong>Ouvert</strong> !</p>
+
+		<img class="status-icon" src="/status/status.ouvert.png" alt="Cercle vert indiquant que le local est ouvert"
+			title="Le local est ouvert" />
+	</main>
+
+	<nav>
+		<a href="..">🠔 Retour au site</a>
+	</nav>
+
+</body>
+
+</html>

status/set-status.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+if [ "$#" = "0" ]; then
+    echo "Usage set-status.sh [new-status]"
+    echo ""
+    echo "[new-status] can be \"opened\" or \"closed\""
+    echo ""
+    exit 1
+fi
+
+if [ "$1" = "opened" ]; then
+    ln -sf "index.ouvert.html" "/var/www/html/status/index.html"
+fi
+
+if [ "$1" = "closed" ]; then
+    ln -sf "index.fermé.html" "/var/www/html/status/index.html"
+fi