Compare commits

..
30 Commits
Author SHA1 Message Date
epickiwi 376fb96df9 Warning dan le readme 2026-09-02 10:40:31 +02:00
vgaNAR6ta dda83b7d4d Modification du texte, du style et dequeerisation 2026-09-02 00:51:16 +02:00
vgaNAR6ta 24334511f3 btn désactivé et ajustement tex 2026-08-24 22:20:39 +02:00
vgaNAR6ta 7dc68ad0e5 accessibilité et open graph 2026-08-24 21:22:29 +02:00
vgaNAR6ta c7a07c3b7c edit: ajout du spaceapi 2026-08-24 03:29:49 +02:00
vgaNAR6ta 00b4c3e9bd lien matrix et reduced motion dans les index ouvert et fermé 2026-08-20 19:27:38 +02:00
vgaNAR6ta 0bd2747852 chemins absolu js 2026-08-20 18:35:30 +02:00
vgaNAR6ta 953281f3d2 chemin absolus & probleme flex-shrink 2026-08-20 18:33:51 +02:00
vgaNAR6ta 415fb46c99 reponsive bug fix 2026-08-19 20:33:37 +02:00
vgaNAR6ta cd766e3969 edit: random bug fix 2026-08-16 22:45:21 +02:00
vgaNAR6ta 2ed49a5fe1 add : fenetre adhesion sans contenu juste interactivité 2026-08-12 21:49:33 +02:00
vgaNAR6ta f435cb36b8 ménage et affiche permanence 2026-08-06 01:22:12 +02:00
vgaNAR6ta 407eeef09e edit: event mieux cadrés 2026-08-05 00:59:39 +02:00
vgaNAR6ta 198a0031f1 ménage 2026-08-05 00:41:31 +02:00
vgaNAR6ta c223ab281c edit: reduced motion mode 2026-08-04 23:05:28 +02:00
vgaNAR6ta db59f2ae48 edit: pb de scroll et responsive msg bienvenue 2026-08-04 16:27:07 +02:00
vgaNAR6ta e75f0443df todo 2026-08-04 16:16:49 +02:00
vgaNAR6ta af0b014581 add: message de bienvenue !!! 2026-08-04 05:55:01 +02:00
vgaNAR6ta 906c3a3ae2 section évènement v2 article avec lien vers affiche qui devient details avec import de l'affiche avec js 2026-08-03 02:39:52 +02:00
vgaNAR6ta e6c2fbf4d3 todo cochée 2026-08-02 20:56:04 +02:00
vgaNAR6ta c7c07beb76 Ajustement shader ouverture 2026-08-02 20:54:48 +02:00
epickiwi dc2f0013b0 Ajout du shader d'ouverture sur la page d'accueil 2026-08-02 15:31:56 +02:00
epickiwi 36d9ac4230 Ajout de la vidéo 2026-08-02 15:31:56 +02:00
epickiwi 3e7c9475e5 Première version GPU des effets de fond 2026-08-02 15:31:55 +02:00
epickiwi 9f67c28bc0 Ajout du script du lien symbolique 2026-08-02 15:31:55 +02:00
epickiwi 0170db486c Centrage du plan 2026-08-02 15:31:53 +02:00
epickiwi 94907c178e Ajout d'instructions de dev 2026-08-02 15:31:11 +02:00
vgaNAR6ta e95c848296 edit: html nouvelle section event sans js 2026-08-02 14:08:20 +02:00
vgaNAR6ta a9dabeb5eb edit: todo list 2026-08-01 21:48:59 +02:00
vgaNAR6ta 32a14714ec edit: animation se modifie avec le statut d'ouverture + bug css import dans main.css 2026-07-31 06:23:50 +02:00
69 changed files with 1489 additions and 14582 deletions

No files matched your search

+1
View File
@@ -0,0 +1 @@
status/index.html
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

+136
View File
@@ -0,0 +1,136 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Permanence du mardi soir</title>
<link rel="stylesheet" href="/style/typo.css">
<link rel="stylesheet" href="/style/default.css">
<style data-import="no-import">
html{
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
background-color: var(--mardi-back-color);
}
body{
height: 100%;
max-width: 1000px;
background-color: var(--mardi-accent-color);
margin: 0;
}
</style>
<style>
:root{
--mardi-back-color: rgb(37, 1, 65);
--mardi-main-color: rgb(255, 74, 231);
--mardi-accent-color: rgb(0, 255, 21);
}
.afficheMardis{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
background-color: var(--mardi-main-color);
@container( width > 650px ){
flex-direction: row;
}
}
#imgContainer{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
max-height: 33vh;
box-sizing: border-box;
overflow: hidden;
gap: 3.33px;
padding-top: 3.33px;
img{
max-width: 34%;
box-sizing: border-box;
}
}
#textContainer{
padding: 13.12px;
color: var(--mardi-back-color);
h4{
font-family: 'karrik';
text-transform: uppercase;
font-size: 33px;
margin-bottom: 3.33px;
}
p{
font-family: 'velvelyne';
font-family: 16.1px;
margin-bottom: 7.77px;
}
.event-hours{
margin-left: 44px;
font-size: 22px;
font-weight: bold;
span[property="location"]{
font-size: 16.1px;
margin-left: -22px;
}
}
}
}
@container( width < 650px ){
.afficheMardis{
flex-direction: column;
}
}
</style>
</head>
<body>
<article class="afficheMardis" property="event" typeof="Event">
<div id="imgContainer">
<img src="/affiches/mardis/IMG001.jpg" alt="une lampe d'atelier sur un grand plan de travail un peu désorganisé, quelques chaises un peu disparates, on distingue un empilement de caisses et cartons à l'arrière plan">
<img src="/affiches/mardis/IMG002.jpg" alt="un coin atelier bien équipé et éclairé, beaucoup d'outils, une échelle au bord du cadre, et on aperçoit un espace avec un ordinateur sur une mezzanine, éclairé d'une lumière rouge vive">
<img src="/affiches/mardis/IMG333.jpg" alt="un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle">
</div>
<div id="textContainer" property="description">
<h4 property="name">Permanences du LOL</h1>
<p>Venez chiller avec nous, partager un thé ou une bière.</p>
<p>On échange technique et savoir-faire<br>sur tous les sujets : logiciel libre, hacking,<br> couture, bricole et bidouille en tout genre,<br> mais aussi sur nos projets personnels ou collectifs</p>
<p class="event-hours">
<span property="eventSchedule" typeof="Schedule">
<data property="byDay" content="Tuesday">Tous les mardis</data><br> à partir de&nbsp;<data property="startTime" content="17:00">17h</data><br>
</span>
<span property="eventSchedule" typeof="Schedule">
<data property="byDay" content="Saturday">&emsp;Tous les samedis</data><br>&emsp;à partir de&nbsp;<data property="startTime" content="14:00">14h</data>
</span>
<br>
<span property="location" href="https://labolyon.fr/">au local du LOL<br>&ensp; &rarr; 7 Place Chazette, 69001 Lyon</span>
</p>
</div>
</article>
</body>
</html>
+8 -6
View File
@@ -5,15 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="../assets/favicon.svg" /> <link rel="icon" type="image/svg" href="../assets/favicon.svg" />
<title>TEST EVENT</title> <title>TEST EVENT</title>
<style> <style data-import="no-import">
/*=========================== INFROMATIONS AFFICHES : /*=========================== INFROMATIONS AFFICHES :
la première balise style est filtrée le style 'no-import' est filtrée
ici on place les eléments qui entre en conflit avec la page principale ici on place les eléments qui entre en conflit avec
la page principale
les suivant sont inclus les suivant sont inclus
IMPORTANT : il faut nommer le main avec un id unique pour éviter les conflit avec les reste du site IMPORTANT : il faut nommer le <article> avec un id unique
pour éviter les conflit avec les reste du site
====================================================*/ ====================================================*/
@@ -42,8 +44,8 @@
</style> </style>
</head> </head>
<body> <body>
<main id="testAffiche"> <article id="testAffiche">
<p>test affiche !</p> <p>test affiche !</p>
</main> </article>
</body> </body>
</html> </html>
+4 -4
View File
@@ -8,10 +8,10 @@
<link rel="stylesheet" href="../style/animation.css"> <link rel="stylesheet" href="../style/animation.css">
<link rel="stylesheet" href="/style/typo.css"> <link rel="stylesheet" href="/style/typo.css">
<title>TEST EVENT 333</title> <title>TEST EVENT 333</title>
<style> <style data-import="no-import">
/*=========================== INFROMATIONS AFFICHES : /*=========================== INFROMATIONS AFFICHES :
la première balise style est filtrée la balise style data-import="no-import" est filtrée
ici on place les eléments qui entre en conflit avec la page principale ici on place les eléments qui entre en conflit avec la page principale
les suivant sont inclus les suivant sont inclus
@@ -45,8 +45,8 @@
</style> </style>
</head> </head>
<body> <body>
<main id="testAffiche333"> <article id="testAffiche333">
<p>test affiche 333 !</p> <p>test affiche 333 !</p>
</main> </article>
</body> </body>
</html> </html>
Binary file not shown.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 738 KiB

-51
View File
@@ -1,51 +0,0 @@
.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: ", ";
}
}
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 341 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 365 KiB

Binary file not shown.
Binary file not shown.
-18
View File
@@ -1,18 +0,0 @@
<!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>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 992 B

File diff suppressed because it is too large. Load diff

Before

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

-47
View File
@@ -1,47 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

File diff suppressed because it is too large. Load diff

Before

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

File diff suppressed because it is too large. Load diff

Before

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

File diff suppressed because it is too large. Load diff

Before

Width:  |  Height:  |  Size: 171 KiB

-148
View File
@@ -1,148 +0,0 @@
.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;
font-family: sans-serif;
}
.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;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 933 B

File diff suppressed because it is too large. Load diff

Before

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

File diff suppressed because it is too large. Load diff

Before

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.
-35
View File
@@ -1,35 +0,0 @@
@font-face {
font-family: "Arvo";
src: url("./Arvo-Bold.ttf");
font-weight: bold;
}
.affiche-perm {
background: black url("./perm-bg.jpg");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
padding-left: 25px;
padding-right: 25px;
font-size: 0.9rem;
line-height: 1.5;
}
.affiche-perm h1 {
font-size: 1.8em;
margin-top: 50px;
font-weight: normal;
font-family: "Arvo", sans-serif;
}
.affiche-perm .event-hours {
font-weight: bold;
text-align: center;
margin-top: 25px;
margin-bottom: 25px;
font-size: 1.2em;
font-family: "Arvo";
}
-125
View File
@@ -1,125 +0,0 @@
<!doctype html>
<html lang="fr" data-theme="closed">
<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="icon" type="image/svg" href="./assets/favicon.svg" />
<link rel="stylesheet" href="./style.old.css">
<title>L(. O.)L</title>
</head>
<body>
<!--<video autoplay muted loop src="./assets/video/background.webm" id="anim"></video>-->
<video autoplay muted loop src="./assets/video/close.webm" id="texture"></video>
<div id="mainContainer">
<div class="uiStyle" id="topBar">
<div class="left">
<img src="./assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
<p>L<strong>. ⚧. </strong>L<strong>. </strong></p>
</div>
<div class="right">
<a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
<a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
<a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
<a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
</div>
<button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
<svg class="icon" viewBox="0 0 53.73 53.59">
<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>
<div id="mainInfo">
<div class="uiStyle" id="title">
<p>
Hackerspace queer
</p>
<p id="desc">
Lieu de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</p>
</div>
<div id="address">
<p>
7 place Chazette
<br>
69001 Lyon
<br> <br>
45° 46' 23.698" N
<br>
4° 50' 14.052" E
</p>
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
<img src="./assets/logo_hackerspaces_monde.png">
</a>
</div>
<div class="uiStyle" id="openingHours">
<p>
Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
&ensp; &rarr; nocturne : &ensp;<br>
Ven. &emsp; <strong>21h &rarr; 5h</strong>
</p>
</div>
<div id="planContainer">
<img src="./assets/plan.svg" id="plan">
<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 class="uiStyle" id="lolOpener">
<p id="desc">Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :</p>
<div class="lolStatus">
<p id="closedStatus">FERMÉ...</p>
</div>
</div>
</div>
<div id="aboutSection">
<div class="uiStyle" id="aboutText">
<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 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,
le partage des connaissances et l'autogestion,
l'anti-capitalisme et l'anti-fascisme. <br><br>
Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
</p>
</div>
<div id="eventSection">
<div class="uiStyle" id="title">
évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
</div>
</div>
</div>
</div>
</body>
</html>
-128
View File
@@ -1,128 +0,0 @@
<!doctype html>
<html lang="fr" data-theme="open">
<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="icon" type="image/svg" href="./assets/favicon_open.svg" />
<link rel="stylesheet" href="./style.old.css">
<script src="./js/components/svg.js"></script>
<title>L(. O.)L</title>
</head>
<body>
<video autoplay muted loop src="./assets/video/background.webm" id="anim"></video>
<video autoplay muted loop src="./assets/video/open.webm" id="texture"></video>
<div id="mainContainer">
<div class="uiStyle" id="topBar">
<div class="left">
<img src="./assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
<p>L<strong>. ⚧. </strong>L<strong>. </strong></p>
</div>
<div class="right">
<a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
<a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
<a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
<a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
</div>
<button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
<svg class="icon" viewBox="0 0 53.73 53.59">
<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>
<div id="mainInfo">
<div class="uiStyle" id="title">
<p>
Hackerspace queer
</p>
<p id="desc">
Lieu de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</p>
</div>
<div id="address">
<p>
7 place Chazette
<br>
69001 Lyon
<br> <br>
45° 46' 23.698" N
<br>
4° 50' 14.052" E
</p>
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
<img src="./assets/logo_hackerspaces_monde.png">
</a>
</div>
<div class="uiStyle" id="openingHours">
<p>
Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
&ensp; &rarr; nocturne : &ensp;<br>
Ven. &emsp; <strong>21h &rarr; 5h</strong>
</p>
</div>
<div id="planContainer">
<img src="./assets/plan.svg" id="plan">
<lol-svg>
<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>
</lol-svg>
</div>
<div class="uiStyle" id="lolOpener">
<p id="desc">&uarr; &uarr; &uarr; Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte</p>
<div class="lolStatus">
<p id="openStatus">Ouvert !</p>
</div>
</div>
</div>
<div id="aboutSection">
<div class="uiStyle" id="aboutText">
<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 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,
le partage des connaissances et l'autogestion,
l'anti-capitalisme et l'anti-fascisme. <br><br>
Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
</p>
</div>
<div id="eventSection">
<div class="uiStyle" id="title">
évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
</div>
</div>
</div>
</div>
</body>
</html>
File diff suppressed because it is too large. Load diff
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" 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>

After

Width:  |  Height:  |  Size: 285 B

+143
View File
@@ -0,0 +1,143 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2"
version="1.1"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
width="94.468437"
height="67.160767"
viewBox="0 0 94.468437 67.160767"
sodipodi:docname="logo_picto.svg"
inkscape:export-filename="/home/nwa/Documents/Lyon Open Lab/Collectif LOL/parallax and responsive/images/logo.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<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="1366"
inkscape:window-height="691"
id="namedview4"
showgrid="false"
inkscape:zoom="4.8680853"
inkscape:cx="38.498621"
inkscape:cy="32.522625"
inkscape:current-layer="svg2"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:4.70173216;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4542"
width="89.766708"
height="62.459038"
x="2.3508661"
y="2.3508661" />
<circle
r="4.0235658"
cy="44.207626"
cx="68.418625"
id="circle822"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
ry="1.525695"
y="40.821571"
x="34.42173"
height="6.7451782"
width="11.456149"
id="rect838"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.5829103;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<circle
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle842"
cx="54.284214"
cy="44.207626"
r="4.0235658" />
<circle
r="4.0235658"
cy="44.207626"
cx="26.015396"
id="circle846"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect852"
width="14.782129"
height="6.7451782"
x="57.660061"
y="28.948668"
ry="1.525695" />
<rect
ry="1.525695"
y="28.948668"
x="39.825947"
height="6.7451782"
width="14.782129"
id="rect858"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect860"
width="14.782129"
height="6.7451782"
x="21.991831"
y="28.948668"
ry="1.525695" />
<circle
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle862"
cx="68.418625"
cy="20.461821"
r="4.0235658" />
<rect
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.5829103;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect864"
width="11.456149"
height="6.7451782"
x="34.42173"
y="17.075764"
ry="1.525695" />
<circle
r="4.0235658"
cy="20.461821"
cx="54.284214"
id="circle866"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<circle
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle868"
cx="26.015396"
cy="20.461821"
r="4.0235658" />
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.
Binary file not shown.
Binary file not shown.
+144 -420
View File
@@ -3,89 +3,104 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/typo.css"> <link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="style/default.css"> <link rel="stylesheet" href="style/default.css">
<link rel="stylesheet" href="style/common.css"> <link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/animation.css"> <link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<!--REPONSIVE-->
<link rel="stylesheet" href="style/responsive.css"> <link rel="stylesheet" href="style/responsive.css">
<!-- TEST CCS OUVERTURE <!--REDUCED MOTION-->
<link rel="stylesheet" href="status/openStyle.css"> <link rel="stylesheet" href="style/reduced.css">
-->
<!-- <title>Laboratoire Ouvert Lyonnais</title>
<link rel="stylesheet" href="affiches/perm.css">
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css"> <!--OPEN GRAPHS-->
<link rel="stylesheet" href="affiches/algorave.css"> <meta property="og:title" content="Laboratoire Ouvert Lyonnais">
--> <meta property="og:description" content="Hackerspace Queer">
<title>L(. O.)L &mdash; Laboratoire Ouvert Lyonnais</title> <meta property="og:url" content="https://labolyon.fr/">
<link rel="icon" type="image/svg" href="./assets/favicon.svg" /> <meta property="og:image" content="assets/logo/logo_picto.svg">
<meta property="og:type" content="website">
<link rel="icon" type="image/svg" href="assets/favicon.svg">
</head> </head>
<body> <body>
<header> <header>
<h1> <h1>
<img id="logo" src="./assets/logo/logo-forme.svg" alt=""> <img id="logo" src="assets/logo/logo-forme.svg" alt="Logo du LOL : en jaune sur fond noir, la transcription visuelle des lettre L, O et L en morse, encadré d'un épaisse bordure">
<span aria-hidden="true" class="cool-name">L<span class="trans-symbol">⚧</span>L</span> <span aria-hidden="true" class="cool-name">LOL</span>
<span class="plain-name">L.O.L.</span> <span class="plain-name">LOL</span>
</h1> </h1>
<nav> <nav aria-label="outils numériques du LOL">
<ul> <ul>
<li><a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a></li> <li><a href="https://git.labolyon.fr/explore/repos" 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://wiki.labolyon.fr/" 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://matrix.to/#/#lol-space:chat.labolyon.fr" class="textBtnStyle" target="_blank">Matrix</a></li>
<li><a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a></li> <li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle" target="_blank">Fediverse</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<main> <main>
<section id="homeContent"> <div id="homeContent">
<section id="titleSection" class="solidBox"> <section id="titleSection" class="solidBox">
<h2> <h2>
Hackerspace queer Hackerspace
<small><br>
Lieu de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</small>
</h2> </h2>
<p>
<br>
Lieu autogéré <br>
de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</p>
</section> </section>
<section id="hourSection" class="solidBox"> <section id="hourSection" class="solidBox">
<h3>Horaires d'ouverture</h3> <h3>Horaires d'ouverture</h3>
<ol> <ol>
<li> <li>
Dim. <strong>15h &rarr; 23h</strong> Mar. <strong>17h &rarr; 23h</strong>
</li> </li>
<li> <li>
Lun. <strong>15h &rarr; 23h</strong> Sam. <strong>14h &rarr; 20h</strong>
</li>
<li>
Mar. <strong>15h &rarr; 23h</strong>
</li> </li>
</ol> </ol>
<!-- pour plus tard
<h3>Nocturne</h3> <h3>Nocturne</h3>
<ol> <ol>
<li>Ven. <strong>21h &rarr; 5h</strong></li> <li>Ven. <strong>21h &rarr; 5h</strong></li>
</ol> </ol>
-->
</section> </section>
<address class="transparentBox"> <div class="access-info-box transparentBox">
7 place Chazette<br> <address aria-label="Adresse du lieu">
69001 Lyon<br> 7 place Chazette<br>
<br> 69001 Lyon<br>
45° 46' 23.698" N<br> <br>
4° 50' 14.052" E 45° 46' 23.698" N<br>
</address> 4° 50' 14.052" E
</address>
<ul aria-label="Téléphones du lieu">
<li> &#128439; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
<li> &#9990; Tel EPVPN : <a href="tel:5256">5256</a></li>
<li> &#128439; Fax EPVPN : <a href="tel:5257">5257</a></li>
</ul>
</div>
<div id="planSection" class="transparentBox">
<div id="planSection" class="transparentBox" aria-label="Plan d'accès du local">
<div id="planContainer" 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"> <img src="assets/plan.svg" id="plan" alt="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"> <svg aria-hidden="true" id="fleche" viewBox="0 0 4215.93 2604.36">
<g> <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"/> <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> <g>
@@ -108,397 +123,106 @@
</div> </div>
</div> </div>
<div id="extLinkSection" class="transparentBox"> <div id="extLinkSection" class="transparentBox" aria-label="Liens externes">
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank"> <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank" aria-label="hackerspace.org est un site qui recense les hackerspaces en Europe">
<img src="./assets/logo_hackerspaces_monde.png"> <img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt="">
</a> </a>
</div> </div>
</section>
<!-- MESSAGE DE BIENVENUE -->
<aside>
<button type="button" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
<svg class="icon" viewBox="0 0 40.19 38.9" aria-hidden="true">
<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" aria-label="Message de bienvenue du LOL">
<h4 class="title">
Bienvenue sur le site du LOL!
<button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide" aria-label="Fermer la fenêtre">
<svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
<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>
</h4>
<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>
</div>
<section id="statuSection" class="solidBox"> <section id="statuSection" class="solidBox">
<div id="statusDesc"> <div id="statusDesc">
<p> <h3>
Le LOL peut ouvrir en dehors des horaires habituels. Le LOL peut ouvrir en dehors des horaires habituels.
En fonction de nos envies et disponibilités. En fonction de nos envies et disponibilités.
</p> </h3>
<p> <p>
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small> <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
</p> </p>
</div> </div>
<a href="./status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a> <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>
<section id="extraContent"> <aside id="extraContent">
<section id="aboutSection" class="solidBox"> <div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
<p> <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, 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> 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. Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
</p> <br><br>
<p> Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
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.
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 !
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 ! <br><br>
</p> Nous revendiquons l'ouverture du code et des techniques,<br>
<p> le partage des connaissances et l'autogestion,<br>
Nous revendiquons l'ouverture du code et des techniques,<br> l'anti-capitalisme et l'anti-fascisme. <br><br>
le partage des connaissances et l'autogestion,<br> Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
l'anti-capitalisme et l'anti-fascisme. <br><br> Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br> </p>
Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
</p> <dl>
</section> <dt>Hackerspace</dt>
<dd>
n.m. : Tiers lieu de réunion et de rencontre entre personnes désirant comprendre, créer ou détourner des objets techniques ou technologiques.
</dd>
<dt>Hackeuse, Hacker</dt>
<dd>
n. : Personne ayant un intérêt dans la technique ou la technologie et faisant un usage creatif et/ou utile de celle-ci par le détournement.
</dd>
</dt>
</dl>
</div>
<section id="eventSection" class="transparentBox"> <section id="eventSection" class="transparentBox">
<h3>Événements <small>à venir</small></h3> <h3>Événements <small>à venir</small></h3>
<ul id="eventContent" class="borderBox"> <article class="solidBox">
<li class="eventEntry"> <h4>Permanences du LOL</h4>
<button type="button" name="plus" class="iconBtnStyle"> <p class="date">↻ Mardi & Samedi</p>
<a href="./affiches/test/" target="_blank"> <a href="/affiches/mardis/" class="iconBtnStyle" target="_blank" aria-label="Plus d'infos sur cet évènement">
<svg viewBox="0 0 53.73 53.59" class="icon"> <svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
<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"/> <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> </svg>
</a> </a>
</button> </article>
<details closed name="event"> </section>
<summary> </aside>
<div class="title"> <noscript>
<h4>Test évènement</h4> <video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop aria-hidden="true"></video>
<p class="date">13/12</p> </noscript>
</div> <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop aria-hidden="true"></video>
<p class="resume">Résumé de l'évènement </p> <canvas class="cute-texture" aria-hidden="true"></canvas>
</summary>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</details>
</li>
<li class="eventEntry">
<button type="button" name="plus" class="iconBtnStyle">
<a href="./affiches/test333/" 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>
</button>
<details closed name="event">
<summary>
<div class="title">
<h4>Test évènement 333</h4>
<p class="date">13/12</p>
</div>
<p class="resume">Résumé de l'évènement </p>
</summary>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</details>
</li>
</ul>
<!--
<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>
<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 affiche-drags-nerds-hackathon">
<style>
@font-face {
font-family: "Press Start 2P";
src: url("./affiches/dragsnerds/PressStart2P-Regular-DogiNJoF.ttf");
font-weight: normal;
}
@font-face {
font-family: velvelyne;
src: url("./affiches/dragsnerds/Velvelyne-Light-C9f5yZCm.ttf") format("truetype");
}
@font-face {
font-family: velvelyne;
src: url("./affiches/dragsnerds/Velvelyne-Bold-CR91h96S.ttf") format("truetype");
font-weight: bold;
}
.affiche-drags-nerds-hackathon {
background: white;
grid-row: span 2;
color: black;
padding: 0;
border-color: white;
line-height: 1.4;
font-family: monospace;
font-size: 1rem;
padding-bottom: 35px;
}
.affiche-drags-nerds-hackathon > h2 {
padding: 15px;
margin: 0;
font-family: velvelyne;
}
.affiche-drags-nerds-hackathon > p,
.affiche-drags-nerds-hackathon > ul {
padding: 5px 15px;
margin: 0;
margin-top: 7px;
margin-bottom: 7px;
padding-right: 15px;
}
.affiche-drags-nerds-hackathon > ul {
padding-left: 30px;
}
.affiche-drags-nerds-hackathon li {
margin-top: 10px;
margin-bottom: 10px;
}
.affiche-drags-nerds-hackathon li::marker {
content: "> ";
}
.affiche-drags-nerds-hackathon > img:first-of-type {
display: block;
width: 100%;
}
.affiche-drags-nerds-hackathon > p:first-of-type {
background: black;
color: white;
margin-top: 0;
margin-bottom: 15px;
padding: 20px;
padding-top: 0;
font-weight: bold;
}
.affiche-drags-nerds-hackathon a {
color: inherit;
font-weight: bold;
text-decoration: underline;
}
</style>
<img src="./affiches/dragsnerds/drags-nerds-hackathon-header.png" alt="Drags & Nerds #2: Une image en noir et blanc avec le titre de l'événement et des photos détourées de drag queens.">
<p>
A tous&middot;tes les drags, tous&middot;tes les nerds et l'ensemble des personnes entre les deux.
Vous êtes invité·es à la grande soirée Drags&Nerds du 22 mai 2026 au Grrrnd Zero !
</p>
<h2>&gt; Résidence et Hackathon</h2>
<p>
Pour se rencontrer et construire ensemble, une grande Résidence/Hackathon se déroulera du <strong><time datetime="2026-04-17T10:00:00">17</time> au <time datetime="2026-04-19T19:00:00">19&nbsp;Avril&nbsp;2026</time></strong>.
<strong>Ça se passe au Laboratoire Ouvert Lyonnais</strong>, un Hackerspace queer de Lyon. 7 Place Louis Chazette 69001 Lyon.
</p>
<p>
On construira nos performances, nos costumes, nos makeups, nos mises en scène...
Tu as envie de faire du lip sync ? De jouer de ton synthé ? D'expérimenter de nouveaux sons ?
Ou juste de donner un coup de pouce à des drags pour leurs show ?
Il y a une place pour toi.
</p>
<ul>
<li>Repas végétaliens le midi</li>
<li>Outils pour souder, coudre, coder, couper, clouer et imprimer en 3D en libre service</li>
<li>Masques FFP2 pour l'autodéfense sanitaire</li>
</ul>
<p style="text-align: center;">
Inscrivez vous en envoyant un email à<br/><a href="mailto:drags-nerds@epickiwi.fr">drags‑nerds@epickiwi.fr</a><br/>
Ou rendez vous sur <a href="https://drags-nerds.net/" target="_blank">drags‑nerds.net</a>
</p>
</article>
<article class="event affiche affiche-debian-release-party" property="event" typeof="Event">
<style>
.affiche-debian-release-party {
line-height: 1.4;
grid-row: span 2;
background: url("affiches/debian-background.png");
background-size: cover;
background-position: 50% 0;
color: white;
a {
color: #c91043;
font-weight: bold;
}
li {
margin-bottom: 1em;
}
small {
display: block;
opacity: 0.9;
font-style: italic;
margin-top: 1ex;
}
}
</style>
<h1 property="name" style="text-shadow: 3px 0 0 #c91043; text-transform: uppercase; text-align: center;">Debian Trixie<br/>release party</h1>
<p>
<a href="https://www.debian.org/releases/trixie/index.fr.html">Debian Trixie</a> sort <a href="https://lists.debian.org/debian-devel-announce/2025/07/msg00003.html">samedi 9 Août</a> !
Pour marquer le coup (et aussi pour ne pas manquer une bonne occasion de bidouiller des ordinateurs ensemble) on va s'organiser une release party ce <strong>Samedi 9 Août à partir de 17h au LOL</strong>.
</p>
<p>
<a href="https://www.debian.org/">Debian</a> c'est l'une des distributions Linux les plus populaires. Un système exploitation alternatif qui remplace <a href="https://endof10.org/fr/">Windows</a>. Elle est basée sur Linux et (majoritairement) composée de logiciels libres.
</p>
<p>
Et <a href="https://www.debian.org/releases/trixie/index.fr.html">Trixie</a> c'est le petit nom de la nouvelle version stable de Debian. C'est pas tous les jours qu'une nouvelle version de Debian sort et ça représente un gros travail bénévole. Donc fêtons cette sortie !
</p>
<p>
Il y aura des frites à prix libre proposés par l'<a href="https://wiki.labolyon.fr/doku.php?id=adelfrite">Adelfrite</a> aux alentours de 20h.
</p>
<ol style="list-style-type: disc;">
<li>17h00 – <strong>Backup Tea Time</strong>. Il parait qu'il faut sauvegarder régulièrement ses données ? On va voir comment faire. <small>Apportez un support de stockage (Disque Dur externe, clé USB, etc...)</small></li>
<li>19h00 – <strong>Install & full-upgrade Party</strong> On lance les installations (si vous voulez installer Debian) ou les mise à jour de nos machines vers Trixie. <small>Apportez vos laptops et vos serveurs !</small></li>
</ol>
<p>
Vous pouvez venir avec un ordinateur Windows, un Linux ou même sans, juste pour voir.
Il n'y a pas d'autre pré-requis que d'être curieux·euse et de savoir utiliser un clavier.
</p>
<p style="text-align: right; font-style: italic;">
Rejoignez nous sur matrix:<br/>
<code>#trixiereleaseparty-lyon:club1.fr</code>
</p>
</article>
<article class="event affiche affiche-jamfetedelamusique" property="event" typeof="Event">
<img src="/affiches/jamfetedelamusique.png" alt="Affiche de la jam ouverte du 21 Juin 2025 : Un motif abstrait généré de manière electronique." aria-labelledby="jam21062025-decription" />
<div class="description" id="jam21062025-description">
<h1 property="name">JAM OUVERTE</h1>
<p property="description">La fête de la musique approche !
C'est avec plaisir que nous vous invitons à venir bricoler, jouer, experimenter les sons, les images, les mélodies et le vacarme technique dans une JAM expérimentale et ouverte à tous·tes !
Pour les novices, curieux, connaisseurs ou encore tous•tes celles et ceux qui veulent juste découvrir la musique et la vidéo décalée et experimentale, vous êtes les bienvenu•e•s !
Rendez-vous 7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)
La JAM se déroule de 14h à 18h, afin de laisser la soirée libre pour les nombreux événements de la ville en ce jour festif :)
Ramenez vos synthés audio et vidéo, vos ordis ou vos contre-basses, tout est permis pour cette après-midi festive que nous vous proposons !
</p>
<p property="location">7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)</p>
<p>
<time datetime="2025-06-21T14:00:00" content="2025-06-21T14:00:00" property="startDate">21 Juin 14h</time>
-
<time datetime="2025-06-21T18:00:00" content="2025-06-21T18:00:00" property="endDate">18h</time>
</p>
<p>Prix libre, No CB, adhésion libre</p>
<p property="abstract">Experimentations visuelles et sonores ouverte</p>
<p>poster by CCC</p>
</div>
</article>
<article class="event affiche-jdll2024 affiche">
<header>
<img src="/assets/favicon.svg" alt="Favicon du LOL" />
<h1 id="jdll-2024-title">Le LOL aux JDLL 2024</h1>
<button>
<img src="/affiches/jdll2024/reduire.png" alt="Reduire" />
</button>
<button>
<img src="/affiches/jdll2024/agrandir.png" alt="Agrandir" />
</button>
<button>
<img src="/affiches/jdll2024/fermer.png" alt="Fermer" />
</button>
</header>
<nav>
<button id="jdll-2024-back">
<img src="/affiches/jdll2024/back.png" alt="Back" />
Back
</button>
<button id="jdll-2024-forward">
<img src="/affiches/jdll2024/forward.png" alt="Back" />
Forward
</button>
<button id="jdll-2024-home">
<img src="/affiches/jdll2024/home.png" alt="Home" />
Home
</button>
<hr>
<img src="/affiches/jdll2024/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="/affiches/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>
</section>
<video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
<video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
<video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
<canvas></canvas>
</main> </main>
<section class="floatingWindow" id="posterWindow">
<div class="posterTitle">
<h4>test</h4>
<button type="button" name="close" class="iconBtnStyle" id="posterCloseBtn">
<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>
<article id="posterContainer"></article>
</section>
<!-- SCRIPT PRINCIPAL --> <!-- SCRIPT PRINCIPAL -->
<script type="module" src="./js/main.js"></script> <script type="module" src="js/main.js"></script>
</body> </body>
</html> </html>
+329 -52
View File
@@ -1,71 +1,348 @@
const target = document.querySelector('canvas'); const DEFAULT_VERTEX_SHADER = `
attribute float aVertexIndex;
varying highp vec2 vTextureCoord;
const ctx = target.getContext('2d'); // This vertex shader produces the following, when drawn using indices 0..3:
//
// 1 | 0-----x.....2
// 0 | | s | . ´
// -1 | x_____x´
// -2 | : .´
// -3 | 1´
// +---------------
// -1 0 1 2 3
//
// The axes are clip-space x and y. The region marked s is the visible region.
// The digits in the corners of the right-angled triangle are the vertex
// indices.
//
// The top-left has UV 0,0, the bottom-left has 0,2, and the top-right has 2,0.
// This means that the UV gets interpolated to 1,1 at the bottom-right corner
// of the clip-space rectangle that is at 1,-1 in clip space.
export let lolState = false; void main() {
vec2 uv = vec2(floor(aVertexIndex / 2.0), floor(mod(aVertexIndex, 2.0))) * 2.0;
gl_Position = vec4(uv * vec2(2.0, -2.0) + vec2(-1.0, 1.0), 0.0, 1.0);
vTextureCoord = uv;
}
`
let scale = 0.7; const FRAGMENT_SHADER_UTILITIES = `
highp float noise1(highp vec2 co){
return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
}
function analogLikeNoise(){ // Color spaces from https://github.com/tobspr/GLSL-Color-Spaces/blob/master/ColorSpaces.inc.glsl
let tH = target.height;
let tW = target.width;
//console.log('window dimensions :', tH, tW)
const img = ctx.createImageData(tW, tH);
let offset = 0;
let index = 0;
let brightness = 0;
for(let x = 0; x<tW; x++){ const highp float HCV_EPSILON = 1e-10;
const sx = x * scale + offset const highp float HSL_EPSILON = 1e-10;
for(let y = 0; y<tH; y++){
let lum = Math.random()*161
//img.data[index++] = lum*150/255; highp vec3 hue_to_rgb(highp float hue)
index++ {
img.data[index++] = lum; highp float R = abs(hue * 6.0 - 3.0) - 1.0;
img.data[index++] = lum; highp float G = 2.0 - abs(hue * 6.0 - 2.0);
img.data[index++] = 255; highp float B = 2.0 - abs(hue * 6.0 - 4.0);
} return clamp(vec3(R,G,B), vec3(0), vec3(1));
}
// Converts from HSL to linear RGB
highp vec3 hsl_to_rgb(highp vec3 hsl)
{
highp vec3 rgb = hue_to_rgb(hsl.x);
highp float C = (1.0 - abs(2.0 * hsl.z - 1.0)) * hsl.y;
return (rgb - 0.5) * C + hsl.z;
}
// Converts a value from linear RGB to HCV (Hue, Chroma, Value)
highp vec3 rgb_to_hcv(highp vec3 rgb)
{
// Based on work by Sam Hocevar and Emil Persson
highp vec4 P = (rgb.g < rgb.b) ? vec4(rgb.bg, -1.0, 2.0/3.0) : vec4(rgb.gb, 0.0, -1.0/3.0);
highp vec4 Q = (rgb.r < P.x) ? vec4(P.xyw, rgb.r) : vec4(rgb.r, P.yzx);
highp float C = Q.x - min(Q.w, Q.y);
highp float H = abs((Q.w - Q.y) / (6.0 * C + HCV_EPSILON) + Q.z);
return vec3(H, C, Q.x);
}
// Converts from linear rgb to HSL
highp vec3 rgb_to_hsl(highp vec3 rgb)
{
highp vec3 HCV = rgb_to_hcv(rgb);
highp float L = HCV.z - HCV.y * 0.5;
highp float S = HCV.y / (1.0 - abs(L * 2.0 - 1.0) + HSL_EPSILON);
return vec3(HCV.x, S, L);
}
highp vec4 hue_rotate(highp vec4 rgb_input, highp float amount) {
highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
hsl.x = mod(hsl.x+amount,1.0);
return vec4(hsl_to_rgb(hsl), rgb_input.w);
}
highp vec4 grayscale(highp vec4 rgb_input, highp float amount) {
highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
hsl.y = 1.0 - amount;
return vec4(hsl_to_rgb(hsl), rgb_input.w);
}
`
const FRAGMENT_SHADER_UTILITIES_N_LINES = FRAGMENT_SHADER_UTILITIES.split(/\n/g).length
const DEFAULT_FRAGMENT_SHADER = `
// Some random values computed for each frame
uniform highp vec4 uRandom;
// Size (in logical pixel) of current CuteTexture canvas
uniform lowp vec2 uCanvasSize;
// Number of seconds since canvas was initialized
uniform lowp float uTime;
// Current frame of first video with [data-cute-texture-video] attribute
uniform sampler2D uVideo;
// Size (in pixels) of current video frame in uVideo
uniform lowp vec2 uVideoSize;
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
varying highp vec2 vTextureCoord;
void main() {
gl_FragColor = vec4(vTextureCoord.x, vTextureCoord.y, 0.0, 1.0);
}
`
/**
* Initialise un canvas d'arrière plan "CuteTexture" avec les options données
*/
export function initCuteTexture(options){
let shaderSourceOption = options?.shaderSource;
/** @type {HTMLCanvasElement} */
const targetCanvas = document.querySelector("canvas[data-cute-texture]") || document.querySelector("canvas.cute-texture") || document.querySelector("canvas");
if(!targetCanvas)
throw new Error(`Aucun élément <canvas> trouvé sur la page`)
{
let computedStyle = getComputedStyle(targetCanvas)
let elementWidth = parseFloat(computedStyle.width)
let elementHeight = parseFloat(computedStyle.height)
targetCanvas.width = elementWidth
targetCanvas.height = elementHeight
}
const ctx = targetCanvas.getContext("webgl");
if(ctx == null)
throw new Error("WebGL n'ext pas supporté sur votre machine")
let mainShader = initMainShader(ctx, {
shaderSource: shaderSourceOption
})
console.log("Shader CuteTexture initialisé", mainShader)
const initTime = Date.now()
function startRender(){
renderCuteTexture(targetCanvas, mainShader, initTime)
requestAnimationFrame(startRender)
}
startRender()
return {
target: targetCanvas,
initTime,
resize: function(width, height) {
targetCanvas.width = width
targetCanvas.height = height
} }
ctx.putImageData(img, 0, 0);
offset ++;
if(offset>1024){
offset = 0;
} }
} }
let time = 0 /**
* @param {WebGLRenderingContext} ctx
*/
function initMainShader(ctx, options){
let fragmentShaderCode = options?.shaderSource;
function scanlines(){ const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
time += 0.05; ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
let tH = target.height; ctx.compileShader(vertexShader)
let tW = target.width;
//console.log('window dimensions :', tH, tW)
const img = ctx.createImageData(tW, tH);
let index = 0;
for(let y = 0; y<tH; y++){ if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) {
for(let x = 0; x<tW; x++){ throw new Error(`Le vertex shader n'a pas pu être compilé: ${ctx.getShaderInfoLog(vertexShader)}`)
let lum = (Math.sin(y*2 - time*3.1415) * 44) + 161; ctx.deleteShader(vertexShader)
return null
}
//img.data[index++] = lum; if(!fragmentShaderCode){
index++; fragmentShaderCode = getDocumentShaderSource(document);
img.data[index++] = lum; }
//img.data[index++] = lum + Math.random()*32;
index++ if(!fragmentShaderCode){
img.data[index++] = 255; fragmentShaderCode = DEFAULT_FRAGMENT_SHADER
}
const fragmentShader = ctx.createShader(ctx.FRAGMENT_SHADER)
ctx.shaderSource(fragmentShader, FRAGMENT_SHADER_UTILITIES+fragmentShaderCode)
ctx.compileShader(fragmentShader)
if (!ctx.getShaderParameter(fragmentShader, ctx.COMPILE_STATUS)) {
let error = ctx.getShaderInfoLog(fragmentShader)
let errorLine = error.match(/\d+:(\d+):/)
if(errorLine) {
let lineNum = parseInt(errorLine[1])
let lineNumeWithoutUtils = lineNum-FRAGMENT_SHADER_UTILITIES_N_LINES;
if(lineNumeWithoutUtils >= 0){
error = `Ligne ${lineNumeWithoutUtils}: ${error}`
} }
} }
ctx.putImageData(img, 0, 0);
ctx.deleteShader(fragmentShader)
throw new Error(`Le fragment shader n'a pas pu être compilé: ${error}`)
}
const shaderProgram = ctx.createProgram()
ctx.attachShader(shaderProgram, vertexShader)
ctx.attachShader(shaderProgram, fragmentShader)
ctx.linkProgram(shaderProgram)
if (!ctx.getProgramParameter(shaderProgram, ctx.LINK_STATUS)) {
throw new Error(`Le shader n'a pas pu être linké: ${ctx.getProgramInfoLog(shaderProgram)}`)
ctx.deleteShader(vertexShader)
ctx.deleteShader(fragmentShader)
ctx.deleteProgram(shaderProgram)
return null
}
let videoElement, videoTexture = null;
if(ctx.getUniformLocation(shaderProgram, "uVideo") != null){
videoElement = document.querySelector("video[data-cute-texture-video]") || document.querySelector("video");
if(!videoElement){
console.warn("Aucune vidéo avec l'attribut [data-cute-texture-video] n'a été trouvé sur la page");
} else {
videoTexture = ctx.createTexture();
ctx.bindTexture(ctx.TEXTURE_2D, videoTexture)
ctx.texImage2D(
ctx.TEXTURE_2D,
0,
ctx.RGBA,
1, 1,
0,
ctx.RGBA,
ctx.UNSIGNED_BYTE,
new Uint8Array([0, 0, 0, 255])
)
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
}
}
const vertexIndexBuffer = ctx.createBuffer()
ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexIndexBuffer)
ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([0, 1, 2]), ctx.STATIC_DRAW)
return {
program: shaderProgram,
vertexShader,
fragmentShader,
videoElement,
videoTexture,
aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"),
uRandom: ctx.getUniformLocation(shaderProgram, "uRandom"),
uCanvasSize: ctx.getUniformLocation(shaderProgram, "uCanvasSize"),
uTime: ctx.getUniformLocation(shaderProgram, "uTime"),
uVideo: ctx.getUniformLocation(shaderProgram, "uVideo"),
uVideoSize: ctx.getUniformLocation(shaderProgram, "uVideoSize"),
vertexIndexBuffer,
}
} }
export function scanlinesAnimation(){ /**
scanlines(); * @param {HTMLCanvasElement} target
requestAnimationFrame(scanlinesAnimation); * @param {*} mainShader
*/
function renderCuteTexture(target, mainShader, initTime){
let ctx = target.getContext("webgl")
ctx.clearColor(0, 0, 0, 0)
ctx.clearDepth(1.0)
ctx.enable(ctx.DEPTH_TEST)
ctx.depthFunc(ctx.LEQUAL)
ctx.clear(ctx.COLOR_BUFFER_BIT)
ctx.bindBuffer(ctx.ARRAY_BUFFER, mainShader.vertexIndexBuffer)
ctx.vertexAttribPointer(
mainShader.aVertexIndex, // location
1, // pull out 1 value per iteration
ctx.FLOAT, // the data in the buffer is 32bit floats
false, // don't normalize
0, // how many bytes to get from one set of values to the next
0 // how many bytes inside the buffer to start from
)
ctx.enableVertexAttribArray(mainShader.aVertexIndex)
ctx.useProgram(mainShader.program)
if(mainShader.uRandom){
ctx.uniform4f(
mainShader.uRandom,
Math.random(),
Math.random(),
Math.random(),
Math.random()
)
}
if(mainShader.uCanvasSize){
ctx.uniform2f(
mainShader.uCanvasSize,
target.width,
target.height
)
}
if(mainShader.uTime){
ctx.uniform1f(
mainShader.uTime,
(Date.now() - initTime)/1000
)
}
if(mainShader.uVideo){
ctx.activeTexture(ctx.TEXTURE0);
ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
ctx.uniform1i(
mainShader.uVideo,
0
)
}
if(mainShader.uVideo && mainShader.videoElement && mainShader.videoTexture){
ctx.activeTexture(ctx.TEXTURE0);
ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
ctx.texImage2D(
ctx.TEXTURE_2D,
0,
ctx.RGBA,
ctx.RGBA,
ctx.UNSIGNED_BYTE,
mainShader.videoElement,
);
ctx.uniform1i(
mainShader.uVideo,
0
)
}
if(mainShader.uVideoSize && mainShader.videoElement) {
ctx.uniform2f(
mainShader.uVideoSize,
mainShader.videoElement.videoWidth,
mainShader.videoElement.videoHeight
)
}
ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3);
} }
export function noiseAnimation(){ export function getDocumentShaderSource(doc=document){
analogLikeNoise(); return doc.querySelector(`script[type="x-shader/glsl+fragment"]`)?.innerHTML
requestAnimationFrame(noiseAnimation); }
}
+55 -2
View File
@@ -1,5 +1,27 @@
export async function loadEvents(){ export async function loadEvents(){
let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle'); let eventList = document.querySelectorAll('#eventSection > article');
//console.log("event list: ", eventList);
for (let event of eventList){
let title = event.querySelector('h4');
let date = event.querySelector('p.date');
let posterLink = event.querySelector('a.iconBtnStyle').href;
let posterHTML = await getPoster(posterLink);
let poster = posterHTML.querySelector('body > article');
let posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])')
console.log('entry data :', title, date, poster, posterStyle);
let selectedEntry = createEntry(title, date, poster, posterStyle)
console.log('created new details :', selectedEntry);
event.replaceChildren(selectedEntry);
}
/* let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');
//console.log("source buttons : ", btnList) //console.log("source buttons : ", btnList)
@@ -83,5 +105,36 @@ export async function loadEvents(){
displayContainer.replaceChildren(content); displayContainer.replaceChildren(content);
}) })
}) })
} } */
}
async function getPoster(link){
let res = await fetch(link);
if (res.ok){
let html_text = await res.text()
let html = new DOMParser().parseFromString(html_text, "text/html");
return html
} else{
console.log('error 333');
return
}
}
function createEntry(title, date, html, style){
let newEntry = document.createElement('details');
let newSummary = document.createElement('summary');
newSummary.append(title, date);
newEntry.append(newSummary);
newEntry.append(html);
newEntry.name = "eventList"
for(let el of style){
document.head.append(el);
}
return newEntry
} }
+44
View File
@@ -0,0 +1,44 @@
export function makeItFloat(target){
let startTarget = target.querySelector('.title');
console.log('selected target :', startTarget);
let startX, startY;
let clicked = false;
let selectedPointer;
startTarget.addEventListener('pointerdown', (event) => {
selectedPointer = event.pointerId;
startX = event.pageX;
startY = event.pageY;
console.log('clicking...')
})
document.addEventListener('pointermove', (event) => {
if(event.pointerId === selectedPointer){
event.preventDefault();
document.querySelector('html').style.overflow = 'hidden';
console.log('moving...')
let currentX = event.pageX;
let currentY = event.pageY;
let moveX = target.offsetLeft + currentX - startX;
target.style.left = moveX + 'px';
let moveY = target.offsetTop + currentY - startY;
target.style.top = moveY + 'px';
startX = currentX;
startY = currentY;
}
});
document.addEventListener('pointerup', () => {
console.log('STOP !')
selectedPointer = null;
document.querySelector('html').style.overflow = '';
})
document.addEventListener('pointercancel', () => {
console.log('STOP !')
selectedPointer = null;
document.querySelector('html').style.overflow = '';
})
}
+15 -80
View File
@@ -1,86 +1,21 @@
import { loadEvents } from './events.js' import { loadEvents } from '/js/events.js'
import { loadStatus } from './status.js' import { loadStatus } from '/js/status.js'
import { scanlinesAnimation } from './cuteTexture.js' import { initCuteTexture } from '/js/cuteTexture.js'
import { noiseAnimation } from './cuteTexture.js' import { makeItFloat } from '/js/floating.js';
// ======================================== events & statut d'ouverture
loadEvents(); loadEvents();
loadStatus(); loadStatus()
.then((status) => {
console.log("Status actuel du LOL", status);
// =================================== background texture let cuteTexture = initCuteTexture({
let textureVideo = document.querySelectorAll('main > #texture'); shaderSource: status.shaderSource
});
for (let video of textureVideo){ cuteTexture.target.style.visibility = "visible"
video.style.visibility = 'collapse'; });
}
let textureCanvas = document.querySelector('main > canvas'); // ======================================== floating message window
textureCanvas.style.visibility = 'visible';
console.log(textureCanvas); makeItFloat(document.querySelector('#msgWindow'));
//console.log(textureVideo)
scanlinesAnimation();
// ======================================== stops here !
let target = document.querySelector('#posterWindow');
let startTarget = target.querySelector('.posterTitle');
console.log('selected target :', startTarget);
let startX, startY;
let clicked = false;
startTarget.addEventListener('mousedown', (event) => {
startX = event.pageX;
startY = event.pageY;
clicked = true;
console.log('clicking...')
})
startTarget.addEventListener('touchstart', (event) => {
startX = event.pageX;
startY = event.pageY;
clicked = true;
console.log('touching...')
})
document.addEventListener('mousemove', (event) => {
if(clicked){
console.log('moving...')
let currentX = event.pageX;
let currentY = event.pageY;
let moveX = target.offsetLeft + currentX - startX;
target.style.left = moveX + 'px';
let moveY = target.offsetTop + currentY - startY;
target.style.top = moveY + 'px';
startX = currentX;
startY = currentY;
}
});
document.addEventListener('touchmove', (event) => {
if(clicked){
console.log('moving...')
let currentX = event.pageX;
let currentY = event.pageY;
let moveX = target.offsetLeft + currentX - startX;
target.style.left = moveX + 'px';
let moveY = target.offsetTop + currentY - startY;
target.style.top = moveY + 'px';
startX = currentX;
startY = currentY;
}
});
document.addEventListener('mouseup', () => {
console.log('STOP !')
clicked = false;
})
document.addEventListener('touchend', () => {
console.log('STOP !')
clicked = false;
})
+12 -2
View File
@@ -1,8 +1,12 @@
import { getDocumentShaderSource } from './cuteTexture.js';
export async function loadStatus(){ export async function loadStatus(){
let res = await fetch('/status/index.ouvert.html'); let res = await fetch('/status/index.html');
let html_text = await res.text() let html_text = await res.text()
let html = new DOMParser().parseFromString(html_text, "text/html"); let html = new DOMParser().parseFromString(html_text, "text/html");
let shaderSource = getDocumentShaderSource(html);
let target = document.querySelector('#statuSection'); let target = document.querySelector('#statuSection');
@@ -11,12 +15,18 @@ export async function loadStatus(){
hiddenBtn.style.visibility = 'collapse'; hiddenBtn.style.visibility = 'collapse';
let status = html.querySelector('#lolStatus'); let status = html.querySelector('#lolStatus');
console.log('current status:', status.innerText);
let isOpen = status.innerText.includes('ouvert');
let icon = html.querySelector('link[rel="icon"]'); let icon = html.querySelector('link[rel="icon"]');
let style = html.querySelectorAll('link[rel="stylesheet"]')[0]; let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
//console.log("selected style : ", style); //console.log("selected script: ", script);
document.head.append(icon); document.head.append(icon);
document.head.append(style); document.head.append(style);
target.appendChild(status); target.appendChild(status);
return { open: isOpen, shaderSource };
} }
+1 -17
View File
@@ -1,17 +1 @@
Ce document sert à échanger et partager des idées et trucs à faire pour continuer la mise à jour du site du LOL : > **CE REPOSITORY N'EST PLUS UTILISÉ !** Nous avons merge ce site dans la [Pull Request #3 du repository labolyon.fr](https://git.labolyon.fr/LOL/labolyon.fr/pulls/3). Veuillez continuer le developpement sur le repository [labolyon.fr](https://git.labolyon.fr/LOL/labolyon.fr). Merci
>si possible écrire tous les noms de variables en Pascal Case (pas sur du nom maisUnTrucCommeCa), je trouve ça plus lisible
> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" voir dernière entrée (***)
> j'attends vos retours pour savoir qu'est ce qu'il faut rajouter/ modifier ?
> je sais tjrs pas comment désactiver la video pour les personnes qui veulent pas d'effets visuels
> ajout du bouton plus pour les évènements => création d'event sur des pages séparées, importées avec js (remplacé par lien en version dégradé )
>(***) mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire)
modifier le lien vers le dossier au lieu de ''index.ouvert.html' dans la page principale
changer le fetch dans status.js
> problème de gestion des évènement tactiles, rien ne marche ...
+34
View File
@@ -0,0 +1,34 @@
{
"api_compatibility": [
"14",
"15"
],
"space": "Laboratoire Ouvert Lyonnais",
"logo": "https://labolyon.fr/images/logo_picto.svg",
"url": "https://labolyon.fr/",
"location": {
"address": "7 Place Louis Chazette 69001 Lyon, France",
"lon": 4.8372366,
"lat": 45.7732494,
"country_code": "FR",
"timezone": "Europe/Paris"
},
"contact": {
"irc": "ircs://irc.geeknode.org:6697/labolyon",
"ml": "discussions@listes.labolyon.fr",
"mastodon": "@labolyon@nerdculture.de",
"matrix": "#lol-space:chat.labolyon.fr"
},
"state": {
"icon": {
"closed": "https://labolyon.fr/status/status.ferm%C3%A9.png",
"open": "https://labolyon.fr/status/status.ouvert.png"
},
"open": false,
"lastchange": 1788302721
},
"projects": [
"https://git.labolyon.fr/",
"https://wiki.labolyon.fr/"
]
}
+16 -1
View File
@@ -4,13 +4,28 @@
} }
/*======================= Page Statut LOL fermé ===*/ /*======================= Page Statut LOL fermé ===*/
#lolIsClosed{ #lolIsClosed {
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
margin: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: var(--main-color); background-color: var(--main-color);
#closedContainer {
padding: 15px;
box-sizing: border-box;
}
.cute-texture {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
} }
#closedContainer{ #closedContainer{
+43 -4
View File
@@ -3,18 +3,57 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="../assets/favicon.svg" /> <link rel="icon" type="image/svg" href="assets/favicon.svg" />
<link rel="stylesheet" href="/status/closedStyle.css"> <link rel="stylesheet" href="status/closedStyle.css">
<link rel="stylesheet" href="../style/animation.css"> <link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="/style/typo.css"> <link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="style/reduced.css">
<title>Le LOL est Fermé ...</title> <title>Le LOL est Fermé ...</title>
</head> </head>
<body id="lolIsClosed"> <body id="lolIsClosed">
<canvas data-cute-texture class="cute-texture"></canvas>
<main id="closedContainer"> <main id="closedContainer">
<section> <section>
<p>Le LOL est actuellement</p> <p>Le LOL est actuellement</p>
<h3 id="lolStatus">fermé ...</h3> <h3 id="lolStatus">fermé ...</h3>
</section> </section>
</main> </main>
<script type="x-shader/glsl+fragment">
// Some random values computed for each frame
uniform highp vec4 uRandom;
// Size (in logical pixel) of current CuteTexture canvas
uniform highp vec2 uCanvasSize;
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
varying highp vec2 vTextureCoord;
void main() {
highp float pixelSize = 50.0;
highp vec2 coords = floor((uCanvasSize.xy * vTextureCoord.xy) / pixelSize);
highp float lum = (noise1(uRandom.yz+coords) * 0.631372549);
lowp float opacity = 0.5;
highp vec4 baseColor = vec4(
0.0,
lum,
lum,
1.0
);
highp vec4 rotatedColor = hue_rotate(baseColor, 13.12);
gl_FragColor = vec4(
rotatedColor.x*opacity,
rotatedColor.y*opacity,
rotatedColor.z*opacity,
1.0
);
}
</script>
<script type="module">
import {initCuteTexture} from "../js/cuteTexture.js"
initCuteTexture()
</script>
</body> </body>
</html> </html>
-20
View File
@@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="/assets/favicon_open.svg" />
<style>
:root {
--back-color: #00FF44;
--main-color: #000000;
}
</style>
<title>Le LOL est Ouvert</title>
</head>
<body>
<main>
<p id="statusText">Ouvert !</p>
</main>
</body>
</html>
+47 -9
View File
@@ -3,19 +3,57 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="../assets/favicon_open.svg" /> <link rel="icon" type="image/svg" href="assets/favicon.svg" />
<!-- STYLE A IMPORTER EN 1ER --> <link rel="stylesheet" href="status/closedStyle.css">
<link rel="stylesheet" href="/status/openStyle.css"> <link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="../style/animation.css"> <link rel="stylesheet" href="style/reduced.css">
<title>Le LOL est Ouvert</title> <title>Le LOL est Fermé ...</title>
</head> </head>
<body id="lolIsOpen"> <body id="lolIsClosed">
<main id="openContainer"> <canvas data-cute-texture class="cute-texture"></canvas>
<main id="closedContainer">
<section> <section>
<p>Le LOL est actuellement</p> <p>Le LOL est actuellement</p>
<h3 id="lolStatus">ouvert !</h3> <h3 id="lolStatus">fermé ...</h3>
</section> </section>
</main> </main>
<script type="x-shader/glsl+fragment">
// Some random values computed for each frame
uniform highp vec4 uRandom;
// Size (in logical pixel) of current CuteTexture canvas
uniform highp vec2 uCanvasSize;
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
varying highp vec2 vTextureCoord;
void main() {
highp float pixelSize = 50.0;
highp vec2 coords = floor((uCanvasSize.xy * vTextureCoord.xy) / pixelSize);
highp float lum = (noise1(uRandom.yz+coords) * 0.631372549);
lowp float opacity = 0.5;
highp vec4 baseColor = vec4(
0.0,
lum,
lum,
1.0
);
highp vec4 rotatedColor = hue_rotate(baseColor, 13.12);
gl_FragColor = vec4(
rotatedColor.x*opacity,
rotatedColor.y*opacity,
rotatedColor.z*opacity,
1.0
);
}
</script>
<script type="module">
import {initCuteTexture} from "../js/cuteTexture.js"
initCuteTexture()
</script>
</body> </body>
</html> </html>
+22 -4
View File
@@ -8,32 +8,50 @@
} }
.openBackground{ .openBackground{
position: absolute;
visibility: visible; visibility: visible;
opacity: .333; opacity: 1;
z-index: -20
} }
.openBackground#texture{ .openBackground#texture{
z-index: -31; z-index: -30;
} }
.openBackground#background{ .openBackground#background{
mix-blend-mode: difference; mix-blend-mode: difference;
z-index: -30;
filter: brightness(133%) saturate(33%) grayscale(); filter: brightness(133%) saturate(33%) grayscale();
transform: rotate(180deg); transform: rotate(180deg);
position: absolute; position: absolute;
margin-top: -9%; margin-top: -9%;
height: 120%; height: 120%;
opacity: .777;
} }
/*======================= Page Statut LOL ouvert ===*/ /*======================= Page Statut LOL ouvert ===*/
#lolIsOpen{
#lolIsOpen {
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
margin: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: var(--main-color); background-color: var(--main-color);
#openContainer {
padding: 15px;
box-sizing: border-box;
}
.cute-texture, .cute-texture-video {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
} }
#openContainer{ #openContainer{
+24
View File
@@ -0,0 +1,24 @@
#!/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
#SPACE_JSON=/var/www/html/spaceapi/space.json
SPACE_JSON="$(dirname $0)/../spaceapi/space.json"
if [ "$1" = "opened" ]; then
ln -sf "index.ouvert.html" "$(dirname $0)/index.html"
jq "setpath([\"state\", \"open\"]; true) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
mv -f $SPACE_JSON.new $SPACE_JSON
fi
if [ "$1" = "closed" ]; then
ln -sf "index.fermé.html" "$(dirname $0)/index.html"
jq "setpath([\"state\", \"open\"]; false) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
mv -f $SPACE_JSON.new $SPACE_JSON
fi
+25 -6
View File
@@ -24,6 +24,7 @@
.textBtnStyle:hover{ .textBtnStyle:hover{
color: var(--back-color); color: var(--back-color);
background-color: var(--main-color); background-color: var(--main-color);
border-color: var(--back-color);
} }
.iconBtnStyle{ .iconBtnStyle{
@@ -45,12 +46,24 @@
height: 16.1px; height: 16.1px;
width: auto; width: auto;
fill: currentColor; fill: currentColor;
pointer-events: none;
} }
.iconBtnStyle:hover{ .iconBtnStyle:hover{
color: var(--back-color); color: var(--back-color);
background-color: var(--main-color); background-color: var(--main-color);
border-color: var(--back-color); border-color: var(--back-color);
animation: none;
}
@media(min-width: 1300px){
.textBtnStyle{
font-size: 19px;
}
.iconBtnStyle{
font-size: 19px;
}
} }
.solidBox{ .solidBox{
@@ -111,7 +124,7 @@
} }
.floatingWindow{ .floatingWindow{
position: fixed; position: relative;
z-index: 3333; z-index: 3333;
width: auto; width: auto;
@@ -131,7 +144,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.posterTitle{ .title{
position: relative; position: relative;
top: 0; top: 0;
width: 100%; width: 100%;
@@ -150,8 +163,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-left: 33px; padding-left: 16.1px;
padding-right: 16.1px; padding-right: 7.77px;
box-sizing: border-box; box-sizing: border-box;
cursor: move; cursor: move;
@@ -161,8 +174,14 @@
} }
.iconBtnStyle{ .iconBtnStyle{
width: 33px; width: 27px;
height: 33px; height: 27px;
pointer-events: all;
.icon{
height: 13.12px;
width: auto;
}
} }
} }
+5 -2
View File
@@ -23,10 +23,9 @@ a button{
p,h1,h2,h3,h4{ p,h1,h2,h3,h4{
cursor: inherit; cursor: inherit;
pointer-events: none !important; pointer-events: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
user-select: none;
} }
ul,ol { ul,ol {
@@ -34,3 +33,7 @@ ul,ol {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
} }
dialog{
padding: 0;
}
+291 -223
View File
@@ -4,28 +4,30 @@
--main-color: #000000; --main-color: #000000;
} }
/*================ ANIMATION ======================*/
@import url("/animation.css");
/*================ DESACT DEFAULT ======================*/
@import url("/default.css");
/*================ BODY ======================*/ /*================ BODY ======================*/
html, body{ html{
margin: 0; margin: 0;
padding: 0; padding: 0;
scrollbar-color: var(--back-color) var(--main-color); scrollbar-color: var(--back-color) var(--main-color);
background-color: var(--main-color); background-color: var(--main-color);
min-height: 100vh; height: 100%;
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll;
position: relative; position: relative;
z-index: -33; z-index: -33;
} }
/*================ CLASSES COMMUNES ======================*/ body{
@import url("/common.css"); margin: 0;
padding: 0;
width: 100%;
height: auto;
overflow-y: hidden;
position: relative;
z-index: -33;
box-sizing: border-box;
}
/*================ STRUCTURE ======================*/ /*================ STRUCTURE ======================*/
header{ header{
@@ -61,9 +63,10 @@ header{
} }
.cool-name{ .cool-name{
font-family: 'karrik'; font-family: 'pressStart';
font-size: 50px; font-size: 50px;
padding-top: 13.12px; padding-top: 13.12px;
.trans-symbol{ .trans-symbol{
font-family: 'velvelyne'; font-family: 'velvelyne';
@@ -99,17 +102,29 @@ header{
} }
video{ noscript > video{
height: 110%; height: 110%;
width: auto; width: auto;
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: -30; z-index: -32;
} }
.closedBackground{ .cute-texture-video{
opacity: .5; opacity: 0;
mix-blend-mode: exclusion; position: absolute;
top: 0;
left: 0;
z-index: -33;
}
.cute-texture{
position: absolute;
width: 100%;
height: 110%;
top: 0;
left: 0;
z-index: -33;
} }
.openBackground{ .openBackground{
@@ -131,26 +146,116 @@ main{
grid-template-columns: 2.5fr 2fr 1fr; grid-template-columns: 2.5fr 2fr 1fr;
grid-template-rows: 1fr 1.5fr; grid-template-rows: 1fr 1.5fr;
.access-info-box {
grid-column: 2 / 4;
grid-row: 1;
font-size: 15px;
z-index: 5;
padding-top: 50px;
address {
margin-bottom: 2em;
}
}
aside{
grid-row: 2;
grid-column: 2;
align-self: end;
justify-self: end;
color: var(--main-color);
position: relative;
z-index: 33;
margin-bottom: 13.12px;
margin-right: 13.12px;
#openMsg{
width: 33px;
height: 33px;
animation: float 1.61s infinite;
box-sizing: border-box;
border-radius: 13.12px;
}
#openMsg:hover{
animation: none;
}
#msgWindow{
border-style: none;
background-color: transparent;
position: fixed;
top: 117px;
left: 33px;
animation: none;
z-index: 1312;
margin: 0;
.floatingWindow{
width: 277px;
height: auto;
margin-top: 33px;
text-transform: none;
font-size: 15px;
font-family: 'velvelyne';
font-weight: bold;
padding-bottom: 13.12px;
border-width: 3.33px;
border-style: double solid solid;
h4{
user-select: none;
pointer-events: all;
}
p{
padding: 7.77px;
padding-right: 16.1px;
strong{
font-family: 'karrik';
font-weight: normal;
text-transform: uppercase;
font-size: 16.1px;
}
}
}
}
#msgWindow::backdrop{
background-color: var(--back-color);
opacity: .333;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
}
#titleSection{ #titleSection{
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
h2{ h2{
text-transform: uppercase; text-transform: uppercase;
font-family: 'karrik'; font-family: 'karrik';
font-size: 22px; font-size: 22px;
line-height: 1em; line-height: 1em;
}
small{ small{
text-transform: none; text-transform: none;
font-size: 15px; font-size: 15px;
font-family: 'velvelyne'; font-family: 'velvelyne';
font-weight: bold; font-weight: bold;
line-height: 0.3em; line-height: 0.3em;
padding-left: 7.77px; padding-left: 7.77px;
}
} }
} }
@@ -165,7 +270,7 @@ main{
h3{ h3{
width: 100%; width: 100%;
padding-bottom: 13.12px; margin-bottom: 16.1px;
font-family: 'karrik'; font-family: 'karrik';
text-transform: uppercase; text-transform: uppercase;
@@ -198,28 +303,25 @@ main{
} }
li{ li{
margin-bottom: 7.77px; margin-top: 16.1px;
} }
} }
} }
address{
grid-column: 2;
grid-row: 1;
width: 150%;
font-size: 15px;
padding-top: 33px;
}
#planSection{ #planSection{
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 2; grid-row: 2;
color: var(--back-color); color: var(--back-color);
justify-self: end; justify-self: end;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
#planContainer{ #planContainer{
width: 100%; width: 100%;
height: 100%; height: max-content;
margin-left: 13.12px; margin-left: 13.12px;
margin-top: 0; margin-top: 0;
} }
@@ -246,7 +348,7 @@ main{
grid-column: 3; grid-column: 3;
grid-row: 1; grid-row: 1;
width: 77%; width: 77%;
height: 133%; height: 122%;
justify-self: end; justify-self: end;
display: flex; display: flex;
@@ -267,6 +369,70 @@ main{
} }
} }
#adhesionSection{
visibility: collapse;
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
.textBtnStyle{
position: relative;
z-index: 33;
width: 90%;
height: 33px;
font-size: 13.12px;
margin-top: 13.12px;
}
#addUserWindow{
border-style: none;
background-color: transparent;
position: fixed;
top: 77px;
left: 16.1px;
animation: none;
z-index: 1312;
margin: 0;
.floatingWindow{
width: 333px;
height: auto;
margin-top: 33px;
text-transform: none;
font-size: 15px;
font-family: 'velvelyne';
font-weight: bold;
padding-bottom: 13.12px;
border-width: 3.33px;
border-style: double solid solid;
p{
padding: 7.77px;
padding-right: 16.1px;
strong{
font-family: 'karrik';
font-weight: normal;
text-transform: uppercase;
font-size: 16.1px;
}
}
}
}
#addUserWindow::backdrop{
background-color: var(--back-color);
opacity: .333;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
}
} }
#statuSection{ #statuSection{
@@ -286,7 +452,7 @@ main{
#statusDesc{ #statusDesc{
width: 77%; width: 77%;
padding: 7.77px; padding: 7.77px;
padding-right: 16.1px; padding-right: 33px;
font-size: 16.1px; font-size: 16.1px;
line-height: 1.1em; line-height: 1.1em;
@@ -317,10 +483,10 @@ main{
background-color: var(--main-color); background-color: var(--main-color);
color: var(--back-color); color: var(--back-color);
small{ small{
font-size: 1px; font-size: 1px;
opacity: 0; opacity: 0;
} }
} }
} }
@@ -334,6 +500,19 @@ main{
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
dl dt {
clear: both;
float: left;
margin-right: 1ex;
font-family: "karrik", sans-serif;
text-transform: uppercase;
}
dl dd {
margin-left: 0;
margin-bottom: 1em;
}
#aboutSection{ #aboutSection{
padding: 13.12px; padding: 13.12px;
padding-right: 33px; padding-right: 33px;
@@ -344,208 +523,97 @@ main{
#eventSection{ #eventSection{
position: relative; position: relative;
z-index: -1; z-index: -1;
height: auto; height: 100%;
width: 100%; width: 100%;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
gap: 0; gap: 0;
padding-bottom: 16.1px; padding-bottom: 16.1px;
padding-right: 16.1px;
#eventContent{ overflow-y: scroll;
width: 100%;
max-height: 77vh;
margin-top: 7.77px;
overflow-y: scroll;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
justify-content: flex-start;
gap: 13.12px;
li{ h3{
position: relative;
margin-bottom: 7.77px;
}
article{
h4{
padding: 16.1px;
}
a{
margin-right: 33px;
}
.date{
padding: 16.1px;
}
}
.solidBox{
width: 100%; width: 100%;
height: auto; height: auto;
position: relative; display: flex;
z-index: 33; flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
box-sizing: border-box;
flex-shrink: 0;
}
a{ .solidBox:has(details[open]){
width: 100%; color: var(--back-color);
height: 100%; background-color: var(--main-color);
display: flex; border-color: var(--back-color);
flex-direction: column; border-radius: 16.1px;
align-items: center; margin-top: 7.77px;
justify-content: space-around; overflow: hidden;
margin-bottom: 7.77px;
details{
cursor: default;
} }
.iconBtnStyle{ }
position: absolute;
z-index: 34; .iconBtnStyle{
width: 33px; width: 33px;
height: 33px; height: 33px;
right: 1%;
top: 33px;
}
.icon{ .icon{
transform: rotate(45deg); transform: rotate(45deg);
pointer-events: none;
} }
} }
details{ details{
padding: 0; width: 100%;
position: relative; height: 100%;
z-index: 0; cursor: copy;
pointer-events: all; overflow: hidden;
width: 95%;
height: 99px;
border-radius: 33px;
border-style: solid;
border-width: thin;
border-color: var(--main-color);
background-color: var(--back-color);
color: var(--main-color);
summary { summary{
padding-left: 33px; display: flex;
padding-top: 7.77px; flex-direction: row;
height:50px; align-items: center;
position: relative; justify-content: space-between;
z-index: 0; width: 100%;
box-sizing: border-box;
list-style-type: none;
padding: 16.1px;
}
article{
.title{ width: 100%;
position: relative; cursor: default;
display: flex; text-transform: none;
flex-direction: row; }
justify-content: space-between; }
align-items: center;
width: 77%;
box-sizing: border-box;
height: 16.1px;
padding-top: 3.33px;
padding-left: 33px;
margin-bottom: 13.12px;
font-family: 'velvelyne';
font-weight: bold;
font-size: 16.1px;
p{
margin: 0;
}
h4{
margin: 0;
font-family: 'velvelyne';
font-weight: bold;
font-size: 16.1px;
}
}
.resume{
font-family: 'velvelyne';
font-weight: bold;
font-size: 13.12px;
text-transform: none;
padding-left: 33px;
width: 90%;
height: 33px;
border-radius: 16.1px;
border-style: solid;
border-width: thin;
border-color: var(--main-color);
box-sizing: border-box;
}
}
::marker{
color: var(--back-color);
}
.description{
margin-left: 44px;
margin-bottom: 33px;
height: auto;
width: 95%;
overflow-y: scroll;
background-color: var(--back-color);
border-radius: 16.1px;
border-style: solid;
border-width: thin;
border-color: var(--main-color);
margin-top: 44px;
padding: 13.12px;
padding-right: 33px;
box-sizing: border-box;
font-size: 13.12px;
font-family: 'velvelyne';
font-weight: bold;
text-transform: none;
}
}
details:hover{
}
details[open]{
height: auto;
border-color: var(--back-color);
color: var(--back-color);
background-color: var(--main-color);
summary .resume{
border-color: var(--back-color);
}
::marker{
color: var(--main-color);
}
.description{
color: var(--main-color);
}
}
} }
}
} }
} }
#posterWindow{
visibility: collapse;
top: 5vh;
left: 5vw;
}
#posterContainer{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
canvas{
visibility: collapse;
height: 110%;
width: auto;
position: absolute;
inset: 0;
z-index: -32;
opacity: .5;
filter: hue-rotate(13.12deg);
}
+12
View File
@@ -0,0 +1,12 @@
@media (prefers-reduced-motion: reduce){
noscript > video,
.cute-texture,
.cute-texture-video{
visibility: collapse !important;
display: none !important;
}
main aside #openMsg{
animation: none !important;
}
}
+74 -6
View File
@@ -40,13 +40,30 @@
grid-template-columns: 2fr 2fr 1fr; grid-template-columns: 2fr 2fr 1fr;
grid-template-rows: 0.7fr 2fr; grid-template-rows: 0.7fr 2fr;
.access-info-box {
padding-top: 0;
}
aside{
grid-column: 3;
margin-bottom: 33px;
margin-right: 33px;
#msgWindow{
left: unset;
right: 77px;
top: 161px;
}
}
#titleSection{ #titleSection{
height: 110%; height: 110%;
h2{ h2{
font-size: 27px; font-size: 27px;
small{ }
font-size: 20px;
} p{
font-size: 20px;
} }
} }
@@ -80,6 +97,13 @@
padding-top: 33px; padding-top: 33px;
} }
#adhesionSection{
justify-content: flex-end;
margin-top: 0;
margin-bottom: 33px;
width: 77%;
}
} }
#statuSection{ #statuSection{
.textBtnStyle{ .textBtnStyle{
@@ -90,6 +114,7 @@
#statusDesc{ #statusDesc{
font-size: 16.1px; font-size: 16.1px;
padding-left: 33px;
} }
} }
@@ -135,7 +160,40 @@
main{ main{
#homeContent{ #homeContent{
aside{
margin-bottom: 77px;
margin-right: 77px;
#msgWindow{
left: unset;
right: 33px;
top: 33vh;
}
#openMsg{
width: 44px;
height: 44px;
}
.icon{
height: 22px;
width: auto;
}
dialog{
.title{
font-size: 22px;
height: 50px;
.iconBtnStyle{
width: 36px;
height: 36px;
border-radius: 22px;
}
}
}
}
#titleSection{ #titleSection{
width: 90%; width: 90%;
@@ -151,6 +209,7 @@
ol{ ol{
font-size: 16.1px; font-size: 16.1px;
padding-left: 16.1px;
strong{ strong{
font-size: 22px; font-size: 22px;
} }
@@ -159,6 +218,7 @@
address{ address{
font-size: 22px; font-size: 22px;
margin-top: 13.12px;
} }
#planSection{ #planSection{
@@ -176,6 +236,17 @@
} }
} }
#adhesionSection{
width: 50%;
margin-left: 16.1px;
margin-bottom: 77px;
.textBtnStyle{
height: 44px;
font-size: 20px;
}
}
} }
#statuSection{ #statuSection{
@@ -188,7 +259,6 @@
height: 77px; height: 77px;
width: 50%; width: 50%;
border-radius: 33px 0 0 33px; border-radius: 33px 0 0 33px;
margin-left: -88px;
} }
.textBtnStyle{ .textBtnStyle{
@@ -244,6 +314,4 @@
} }
} }
} }
} }