Ajout de l'ouverture du LOL

README.MD

@@ -1,9 +1,28 @@
-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 ?
+
+## Oyverture du local
+
+La partie `/status/` du site informe sour l'ouverture du local.
+
+Il suffit de changer le lien symbolique `/status/index.html` vers `/status/index.ouvert.html` ou `/status/index.fermé.html` pour switcher entre le local *Ouvert* ou *Fermé*.
+
+Les commandes suivantes permettent de mettre à jour l'ouverture du local.
+Elles doivent être éxécutées à la racine du site.
+
+Pour passer le local en mode *Ouvert*
+```
+ln -s -f index.ouvert.html status/index.html
+```
+
+Pour passer le local en mode *Fermé*
+```
+ln -s -f index.fermé.html status/index.html
+```

css/style.css

@@ -117,98 +117,128 @@ a:visited {
     width:50px;
 }
 
-/* Tablet */
+/* Status */
-@media screen and (max-width: 1024px) {
 
-#logo {
+.status-container > * {
-	width: 100%;
 	text-align: center;
 }
 
-#nav {
+a.status-container > p {
-	width:100%;
+	text-align: inherit;
-	margin:10px 0;
 }
 
-.navigation{
+.status-container.opened strong {
+	color: green;
+	font-weight: bold;
+}
+
+.status-container.closed strong {
+	color: red;
+	font-weight: bold;
+}
+
+img.status-icon {
+	max-width: 125px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* Tablet */
+@media screen and (max-width: 1024px) {
+
+	#logo {
+		width: 100%;
+		text-align: center;
+	}
+
+	#nav {
+		width:100%;
+		margin:10px 0;
+	}
+
+	.navigation{
 		width: 100%;
 		list-style: none;
 		margin: 0;
 		padding:0;
-}
+	}
 
-.navigation li{
+	.navigation li{
 		float: left;
 		width:25%;
 		padding:0;
-}
+	}
 
-.slide{
+	.slide{
 		background-attachment: fixed;
 		width:100%;
 		position: relative;
 		padding:140px 0 0 0;
-}
+	}
 
-#decorative {
+	#decorative {
 		display:none;
-}
+	}
 
-#content {
+	#content {
 		text-align:center;
 		width:100%;
-}
+	}
 
-#slide1 h1 {
+	#slide1 h1 {
 		line-height: 1em;
-}
+	}
-#slide1 h2 {
+	#slide1 h2 {
 		line-height: 1em;
+	}
+
 }
 
 /* Mobile */
 @media screen and (max-width: 480px) {
 
-#logo {
+	#logo {
 		width: 100%;
 		text-align: center;
-}
+	}
 
-#nav {
+	#nav {
 		width:100%;
 		margin:5px 0;
-}
+	}
 
-.navigation{
+	.navigation{
 		width: 100%;
 		float: left;
 		list-style: none;
 		margin: 0;
 		padding:0;
-}
+	}
 
-.navigation li{
+	.navigation li{
 		float: left;
 		width:25%;
-}
+	}
 
-.slide{
+	.slide{
 		background-attachment: fixed;
 		width:100%;
 		position: relative;
 		padding:150px 0;
-}
+	}
 
-#slide1 h1 {
+	#slide1 h1 {
 		line-height: 1em;
-}
+	}
-#slide1 h2 {
+	#slide1 h2 {
 		line-height: 1em;
+	}
+
 }
 
 @media only screen and (max-width: 767px) {
-
+	#slide1 {
-#slide1{
+		text-align:justify;
-
+	}
-text-align:justify;
 }

index.html

@@ -59,6 +59,8 @@
 			    <div>
 				   <h4>Permanence : mardis à partir de 19h00</h4>
 				   <h4>Adresse : 7 Place Louis Chazette 69001 Lyon</h4>
+				   <a href="/status/" id="status">Vérifier si le local est ouvert 🠖</a>
+				   <script src="/js/status.js"></script>
 				</div>
 			     <h3>Canaux</h3>
 			     <div>

js/status.js

@@ -0,0 +1,26 @@
+/**
+ * Fetch status content and insert main content into provided container
+ * @param {Element} containerEl Container to insert status into
+ */
+async function insertStatus(containerEl){
+
+    const baseUrl = new URL("/status/", containerEl.baseURI)
+    const res = await fetch(baseUrl);
+
+    if(!res.ok){
+        console.info(`Network error requesting status : ${res.status} ${res.statusText}`);
+        return;
+    }
+
+    const dom = new DOMParser().parseFromString(await res.text(), "text/html");
+
+    const main = dom.querySelector("main");
+
+    if(!main)
+        throw new Error("Status page does not contain a <main> element");
+
+    containerEl.innerHTML = main.innerHTML;
+    containerEl.className = main.className;
+}
+
+insertStatus(document.getElementById("status"))

status/index.fermé.html

@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
+<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
+<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
+	<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/grid.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+</head>
+<body>
+
+	<div class="menu">
+		<div class="container clearfix">
+			<div id="logo" class="grid_3">
+				<img src="/images/logo_picto.svg">
+			</div>
+		</div>
+	</div>
+
+
+	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
+		<div class="container clearfix">
+			<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>
+            <p><a href="..">🠔 Retour au site</a></p>
+        </div>
+    </div>
+</body>
+</html>

status/index.html

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

status/index.ouvert.html

@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
+<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
+<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
+	<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/grid.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+</head>
+<body>
+
+	<div class="menu">
+		<div class="container clearfix">
+			<div id="logo" class="grid_3">
+				<img src="/images/logo_picto.svg">
+			</div>
+		</div>
+	</div>
+
+
+	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
+		<div class="container clearfix">
+			<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>
+            <p><a href="..">🠔 Retour au site</a></p>
+        </div>
+    </div>
+</body>
+</html>