Files
LOLv333/index.html
T

226 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="style/default.css">
<link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/responsive.css">
<link rel="stylesheet" href="style/reduced.css">
<!-- TEST CCS OUVERTURE
<link rel="stylesheet" href="status/openStyle.css">
-->
<!--
<link rel="stylesheet" href="affiches/perm.css">
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
<link rel="stylesheet" href="affiches/algorave.css">
-->
<title>L(. O.)L &mdash; Laboratoire Ouvert Lyonnais</title>
<link rel="icon" type="image/svg" href="./assets/favicon.svg" />
</head>
<body>
<header>
<h1>
<img id="logo" src="./assets/logo/logo-forme.svg" alt="">
<span aria-hidden="true" class="cool-name">L<span class="trans-symbol"></span>L</span>
<span class="plain-name">L.O.L.</span>
</h1>
<nav>
<ul>
<li><a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a></li>
<li><a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a></li>
<li><a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a></li>
<li><a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a></li>
</ul>
</nav>
</header>
<main>
<section id="homeContent">
<!-- MESSAGE DE BIENVENUE -->
<aside>
<button type="button" name="msgBtn" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg">
<svg class="icon" viewBox="0 0 40.19 38.9">
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
</svg>
</button>
<div id="msgWindow" popover="auto">
<dialog class="floatingWindow">
<div class="title">
<h4>Bienvenue !</h4>
<button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide">
<svg viewBox="0 0 53.73 53.59" class="icon">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
</button>
</div>
<p>
hellooo, <br>
bienvenue sur le site du LOL ^^<br><br>
en ce moment on cherche du monde pour nous aider à faire fonctionner le lieu, le faire évoluer et le péreniser.<br><br>
si jamais ça t'intéresse<br><strong>contacte nous sur Matrix, <br>
ou passe nous voir au local </strong>directement, quand il est ouvert !<br>
</p>
</dialog>
</div>
</aside>
<section id="titleSection" class="solidBox">
<h2>
Hackerspace queer
<small><br>
Lieu de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</small>
</h2>
</section>
<section id="hourSection" class="solidBox">
<h3>Horaires d'ouverture</h3>
<ol>
<li>
Mar. <strong>15h &rarr; 23h</strong>
</li>
<li>
Sam. <strong>15h &rarr; 23h</strong>
</li>
</ol>
<!-- pour plus tard
<h3>Nocturne</h3>
<ol>
<li>Ven. <strong>21h &rarr; 5h</strong></li>
</ol>
-->
</section>
<address class="transparentBox">
7 place Chazette<br>
69001 Lyon<br>
<br>
45° 46' 23.698" N<br>
4° 50' 14.052" E
</address>
<div id="planSection" class="transparentBox">
<div id="planContainer" class="transparentBox">
<img src="./assets/plan.svg" id="plan" alt="Plan d'accès du local: sonnez à l'interphone Laboratoire Ouvert Lyonnais au 7 Place Chazette 69001, puis avancez tout droit, traversez la cour, et avancez encore, la porte se situe après l'ascenceur, sur la droite">
<svg id="fleche" viewBox="0 0 4215.93 2604.36">
<g>
<path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
<g>
<path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
<path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
<path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
<path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
<path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
<path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
<path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
<path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
<path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
<path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
<path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
<path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
</g>
</g>
<rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
</svg>
</div>
</div>
<div id="extLinkSection" class="transparentBox">
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
<img src="./assets/logo_hackerspaces_monde.png">
</a>
</div>
<div id="adhesionSection">
<button class="textBtnStyle" popovertarget="addUserWindow" popoveraction="show">Comment adhérer ?</button>
<div id="addUserWindow" popover="auto">
<dialog class="floatingWindow">
<div class="title">
<h4>Bienvenue !</h4>
<button class="iconBtnStyle" popovertarget="addUserWindow" popoveraction="hide">
<svg viewBox="0 0 53.73 53.59" class="icon">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
</button>
</div>
<p>
test adhésion
</p>
</dialog>
</div>
</div>
</section>
<section id="statuSection" class="solidBox">
<div id="statusDesc">
<p>
Le LOL peut ouvrir en dehors des horaires habituels.
En fonction de nos envies et disponibilités.
</p>
<p>
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
</p>
</div>
<a href="./status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
</section>
<section id="extraContent">
<section id="aboutSection" class="solidBox">
<p>
Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
</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, les objets, les techniques etc.
Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles, il y'a une place pour toi !
</p>
<p>
Nous revendiquons l'ouverture du code et des techniques,<br>
le partage des connaissances et l'autogestion,<br>
l'anti-capitalisme et l'anti-fascisme. <br><br>
Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
</p>
</section>
<section id="eventSection" class="transparentBox">
<h3>Événements <small>à venir</small></h3>
<article class="solidBox">
<h4>Permanence du mardi soir </h4>
<p class="date">↻ Tous les mardis</p>
<a href="/affiches/mardis/" class="iconBtnStyle" target="_blank">
<svg viewBox="0 0 53.73 53.59" class="icon">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
</a>
</article>
</section>
</section>
<noscript>
<video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop></video>
</noscript>
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
<canvas class="cute-texture"></canvas>
</main>
<!-- SCRIPT PRINCIPAL -->
<script type="module" src="./js/main.js"></script>
</body>
</html>