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
-====
-Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.  
+## 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,59 +61,182 @@
 
 			<hr>
 
-			<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>
+			<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>
 
-			<p>Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
-			Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils techniques qui nous entourent.</p>
+				<p>Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
+				Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils techniques qui nous entourent.</p>
 
-			<p>Nous revendiquons l'ouverture du code et des techniques.
-			Le partage des connaissances et l'autogestion.</p>
+				<p>Nous revendiquons l'ouverture du code et des techniques.
+				Le partage des connaissances et l'autogestion.</p>
 
-			<p>
-				<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>
+				<p>
+					<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>	
+
+			<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 property="description">
+					<p>Venez chiller avec nous, partager un thé ou une biere.</p>
 
-				<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>
-					
+					<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
 				</div>
 
+				<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-perm affiche">
-				<h1>Permanence du LOL</h1>
-				
-				<p>Venez nous rencontrer autours d'une pizza</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>
-
-				<p>Adhésion 5€ pour le mois</p>
+			<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