Added mastodon link

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/dac.css

@@ -16,6 +16,8 @@
 
     color: #1bff8d;
     line-height: 1.5;
+
+    font-size: 1rem;
 }
 
 .affiche-dac .content {
@@ -53,5 +55,5 @@
 
 .affiche-dac p {
     margin: 0;
-    margin-bottom: 10px;
+    margin-bottom: 0.5em;
 }

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;
@@ -128,13 +127,13 @@ main #description {
     grid-row: 1 / 5;
 }
 
-main .toolbar {
+#homepage .toolbar {
     grid-column: 1 / 3;
     text-align: right;
 }
 
 @media screen and (max-width: 889px){
-    main {
+    #homepage {
         grid-template-columns: 1fr;
         row-gap: 50px;
     }
@@ -160,9 +159,52 @@ 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 white;
+    background: black;
+    padding: 15px;
+}
+
+.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 .status-icon {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: center;
+}
+
 /* toolbar */
 
-main .toolbar button {
+#homepage .toolbar button {
     border: none;
     background: none;
     color: white;
@@ -170,12 +212,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;
 }
 

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

@@ -3,6 +3,8 @@
 <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">
 	<title>Laboratoire Ouvert Lyonnais</title>
 	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
 
@@ -35,12 +37,13 @@
 
 		<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://wiki.labolyon.fr/">Wiki</a>
 			<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
+			<a href="https://nerdculture.de/@labolyon">Fédiverse</a>
 		</nav>
 	</header>
 
-	<main>
+	<main id="homepage">
 		
 		<section id="description">
 
@@ -70,11 +73,18 @@
 		</section>
 
 		<aside id="main-info">
+			
 			<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>
 		</aside>
 
 		<section id="events">
@@ -85,7 +95,7 @@
 
 					<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>.
+						La <em>Digital Audio Community</em> se donne rendez-vous toutes les 2 semaines le mercredi (depuis le 8 Novembre 2023) à partir de <time datetime="18:30">18h30</time> au <a href="geo:45.7732495,4.8372366">LOL</a>.
 					</p>
 					<p>
 						<strong>Au Programme</strong> : Ateliers Livre-Coding, Discussions Informatique Musicale && Découverte Code Créatif.

js/status.js

@@ -0,0 +1,42 @@
+/**
+ * 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;
+}
+
+insertStatus(document.getElementById("status"))

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,19 @@
+#!/bin/bash
+
+SCRIPTPATH="$( cd "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
+
+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" "$SCRIPTPATH/index.html"
+fi
+
+if [ "$1" = "closed" ]; then
+    ln -sf "index.fermé.html" "$SCRIPTPATH/index.html"
+fi