vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: vgaNAR6ta/LOLv333:dc2f0013b04b8dfb38ebaa4f6bc9c949b45afa34
Branches Tags
vgaNAR6ta/LOLv333:REWORK vgaNAR6ta/LOLv333:vgaNAR6ta
..
compare: vgaNAR6ta/LOLv333:REWORK
Branches Tags
vgaNAR6ta/LOLv333:REWORK vgaNAR6ta/LOLv333:vgaNAR6ta
13 Commits
dc2f0013b0 .. REWORK
Author SHA1 Message Date
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
59 changed files with 698 additions and 13965 deletions
Expand all files Collapse all files
affiches/mardis/IMG001.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

affiches/mardis/IMG002.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 MiB

affiches/mardis/IMG333.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

affiches/mardis/index.html
+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 &ensp; &rarr; 7 Place Chazette, 69001 Lyon</span>
</p>
</div>
</article>
</body>
</html>
affiches/test/index.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>
affiches/test333/index.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>
archives/affiches/Arvo-Bold.ttf
BIN
View File
Binary file not shown.
archives/affiches/algorave-2025.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 738 KiB

archives/affiches/algorave.css
-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: ", ";
}
}
}
archives/affiches/dac-background.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

archives/affiches/dac-notes.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

archives/affiches/dac.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.9 KiB

archives/affiches/debian-background.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 341 KiB

archives/affiches/dragsnerds/PressStart2P-Regular-DogiNJoF.ttf
BIN
View File
Binary file not shown.
archives/affiches/dragsnerds/Velvelyne-Bold-CR91h96S.ttf
BIN
View File
Binary file not shown.
archives/affiches/dragsnerds/Velvelyne-Light-C9f5yZCm.ttf
BIN
View File
Binary file not shown.
archives/affiches/dragsnerds/drags-nerds-hackathon-header.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 KiB

archives/affiches/jamfetedelamusique.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 365 KiB

archives/affiches/jdll2024/AzeretMono-VariableFont_wght.ttf
BIN
View File
Binary file not shown.
archives/affiches/jdll2024/Lineal-Heavy-CrzaFlqD.ttf
BIN
View File
Binary file not shown.
archives/affiches/jdll2024/PixelifySans-Regular.ttf
BIN
View File
Binary file not shown.
archives/affiches/jdll2024/affiche.html
-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>
archives/affiches/jdll2024/agrandir.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 992 B

archives/affiches/jdll2024/agrandir.svg
-1825
View File
File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 133 KiB

archives/affiches/jdll2024/back.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.4 KiB

archives/affiches/jdll2024/back.svg
-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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

archives/affiches/jdll2024/fermer.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

archives/affiches/jdll2024/fermer.svg
-1787
View File
File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 131 KiB

archives/affiches/jdll2024/forward.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.4 KiB

archives/affiches/jdll2024/forward.svg
-1494
View File
File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 108 KiB

archives/affiches/jdll2024/home.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

archives/affiches/jdll2024/home.svg
-2519
View File
File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 171 KiB

archives/affiches/jdll2024/jdll2024.css
-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;
}
archives/affiches/jdll2024/reduire.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 933 B

archives/affiches/jdll2024/reduire.svg
-1825
View File
File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 133 KiB

archives/affiches/jdll2024/tux.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 87 KiB

archives/affiches/jdll2024/tux.svg
-2489
View File
File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 169 KiB

archives/affiches/perm-bg.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 123 KiB

archives/affiches/perm-bg.original.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 MiB

archives/affiches/perm-bg.xcf
BIN
View File
Binary file not shown.
archives/affiches/perm.css
-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";
}
archives/index-ferme.html
-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>
archives/index-ouvert.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>
archives/style.old.css
-1233
View File
File diff suppressed because it is too large Load Diff
assets/icons/msg.svg
+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>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

assets/video/close.webm
BIN
View File
Binary file not shown.
assets/video/closed.webm
BIN
View File
Binary file not shown.
assets/video/open.webm
BIN
View File
Binary file not shown.
index.html
+73 -30
View File
@@ -10,6 +10,8 @@
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/responsive.css"> <link rel="stylesheet" href="style/responsive.css">
<link rel="stylesheet" href="style/reduced.css">
<!-- TEST CCS OUVERTURE <!-- TEST CCS OUVERTURE
<link rel="stylesheet" href="status/openStyle.css"> <link rel="stylesheet" href="status/openStyle.css">
--> -->
@@ -22,7 +24,6 @@
<link rel="icon" type="image/svg" href="./assets/favicon.svg" /> <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="">
@@ -42,6 +43,39 @@
<main> <main>
<section id="homeContent"> <section id="homeContent">
<!-- MESSAGE DE BIENVENUE -->
<aside>
<button type="button" name="msgBtn" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg">
<svg class="icon" viewBox="0 0 40.19 38.9">
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
</svg>
</button>
<div id="msgWindow" popover="auto">
<dialog class="floatingWindow">
<div class="title">
<h4>Bienvenue !</h4>
<button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide">
<svg viewBox="0 0 53.73 53.59" class="icon">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
</button>
</div>
<p>
hellooo, <br>
bienvenue sur le site du LOL ^^<br><br>
en ce moment on cherche du monde pour nous aider à faire fonctionner le lieu, le faire évoluer et le péreniser.<br><br>
si jamais ça t'intéresse<br><strong>contacte nous sur Matrix, <br>
ou passe nous voir au local </strong>directement, quand il est ouvert !<br>
</p>
</dialog>
</div>
</aside>
<section id="titleSection" class="solidBox"> <section id="titleSection" class="solidBox">
<h2> <h2>
Hackerspace queer Hackerspace queer
@@ -58,20 +92,18 @@
<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"> <address class="transparentBox">
@@ -112,7 +144,28 @@
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank"> <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
<img src="./assets/logo_hackerspaces_monde.png"> <img src="./assets/logo_hackerspaces_monde.png">
</a> </a>
</div> </div>
<div id="adhesionSection">
<button class="textBtnStyle" popovertarget="addUserWindow" popoveraction="show">Comment adhérer ?</button>
<div id="addUserWindow" popover="auto">
<dialog class="floatingWindow">
<div class="title">
<h4>Bienvenue !</h4>
<button class="iconBtnStyle" popovertarget="addUserWindow" popoveraction="hide">
<svg viewBox="0 0 53.73 53.59" class="icon">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
</button>
</div>
<p>
test adhésion
</p>
</dialog>
</div>
</div>
</section> </section>
<section id="statuSection" class="solidBox"> <section id="statuSection" class="solidBox">
@@ -149,34 +202,24 @@
</section> </section>
<section id="eventSection" class="transparentBox"> <section id="eventSection" class="transparentBox">
<h3>Événements <small>à venir</small></h3> <h3>Événements <small>à venir</small></h3>
<article class="solidBox"> <article class="solidBox">
<h4>Test évènement 333</h4> <h4>Permanences du LOL</h4>
<p class="date">13/12</p> <p class="date">↻ Mardi & Samedi</p>
<a href="./affiches/test333/" class="iconBtnStyle" target="_blank"> <a href="/affiches/mardis/" class="iconBtnStyle" target="_blank">
<svg viewBox="0 0 53.73 53.59" class="icon"> <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"/> <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>
</article> </article>
</section> </section>
</section> </section>
<noscript>
<video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop></video>
</noscript>
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video> <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
<canvas class="cute-texture"></canvas> <canvas class="cute-texture"></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>
js/events.js
+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
} }
js/floating.js
+34
View File
@@ -0,0 +1,34 @@
export function makeItFloat(target){
let startTarget = target.querySelector('.title');
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...')
})
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('mouseup', () => {
console.log('STOP !')
clicked = false;
})
}
js/main.js
+6 -36
View File
@@ -1,6 +1,7 @@
import { loadEvents } from './events.js' import { loadEvents } from './events.js'
import { loadStatus } from './status.js' import { loadStatus } from './status.js'
import { initCuteTexture } from './cuteTexture.js' import { initCuteTexture } from './cuteTexture.js'
import { makeItFloat } from './floating.js';
// ======================================== events & statut d'ouverture // ======================================== events & statut d'ouverture
loadEvents(); loadEvents();
@@ -15,44 +16,12 @@ loadStatus()
cuteTexture.target.style.visibility = "visible" cuteTexture.target.style.visibility = "visible"
}); });
// ======================================== floating event window // ======================================== floating message window
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...')
})
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('mouseup', () => {
console.log('STOP !')
clicked = false;
})
makeItFloat(document.querySelector('#msgWindow'));
makeItFloat(document.querySelector('#addUserWindow'));
/*
//================================ tentative de gestion des écran tactiles //================================ tentative de gestion des écran tactiles
startTarget.addEventListener('touchstart', (event) => { startTarget.addEventListener('touchstart', (event) => {
startX = event.pageX; startX = event.pageX;
@@ -79,3 +48,4 @@ document.addEventListener('touchend', () => {
console.log('STOP !') console.log('STOP !')
clicked = false; clicked = false;
}) })
*/
readMe.MD
+31 -4
View File
@@ -18,16 +18,29 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont
> problème import css directement dans main.css > problème import css directement dans main.css
* [ ] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche * [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche
* [ ] performance arrière plan avec un shader * [x] auto scale affiche dans son conteneur
> problème à gérer dans la conception des affiches
* [x] message de bienvenue !!!
* [x] tester section event avec des vraies affiches !!!
> problème de cohérence interface / contenu sur pc, le panneau event est très large et dois afficher des affiches format vertical donc très haut si rescale sur width ou très petit si rescale sur hauteur + si format aléatoire je sais pas comment scale
* [x] performance arrière plan avec un shader
> OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg > OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg
+ video noir & blanc au dessus en mix blend difference, opacité 0.777 + video noir & blanc au dessus en mix blend difference, opacité 0.777
> FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg > FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg
* [ ] désactiver la video pour les personnes qui veulent pas d'effets visuels * [x] désactiver la video pour les personnes qui veulent pas d'effets visuels
* [ ] réglages padding section statut * [x] fond video en version dégradée + scale video un peu plus grand car bande noire en bas
* [x] réglages padding section statut
* [ ] section adhésion et explication financement
(à discuter pour le contenu)
# Démarrer un serveur de developpement # Démarrer un serveur de developpement
@@ -64,3 +77,17 @@ Dans notre cas c'est `10.0.0.165` (voir l'exemple ci-dessous).
Sur son tel, on peut alors acceder a http://10.0.0.165:8000/. Sur son tel, on peut alors acceder a http://10.0.0.165:8000/.
Si cela ne fonctionne pas, c'est peut être que le pare feu interdit la connexion depuis un autre ordinateur sur le port 8000. Si cela ne fonctionne pas, c'est peut être que le pare feu interdit la connexion depuis un autre ordinateur sur le port 8000.
## Lien symbolique et ouverture => comment preview pour dev
aller dans /status puis executer la commande en fonction du statut souhaité
./set-status.sh opened
> statut ouvert
./set-status.sh closed
> statut fermé
status/index.ouvert.html
+4 -4
View File
@@ -36,7 +36,7 @@ void main() {
highp float waveSize = 10.0; highp float waveSize = 10.0;
highp vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize; highp vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize;
highp float lum = abs(sin(coords.y-uTime)) + 0.631372549; highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
lowp float opacity = 0.5; lowp float opacity = 0.25;
gl_FragColor = vec4( gl_FragColor = vec4(
0.0, 0.0,
@@ -44,8 +44,6 @@ void main() {
0.0, 0.0,
1.0 1.0
); );
gl_FragColor = hue_rotate(gl_FragColor, 13.12);
gl_FragColor = vec4( gl_FragColor = vec4(
gl_FragColor.rgb * opacity, gl_FragColor.rgb * opacity,
@@ -56,7 +54,9 @@ void main() {
highp vec4 videoPix = clamp(( grayscale(texture2D(uVideo, videoCoords), 1.0) * 2.0 ), vec4(0), vec4(1)); highp vec4 videoPix = clamp(( grayscale(texture2D(uVideo, videoCoords), 1.0) * 2.0 ), vec4(0), vec4(1));
videoPix *= 0.777; videoPix *= 0.777;
gl_FragColor = abs( videoPix - gl_FragColor ); gl_FragColor = abs( (videoPix*1.2) - gl_FragColor );
gl_FragColor.xyz *= 0.9;
gl_FragColor.a = 1.0; gl_FragColor.a = 1.0;
} }
style/common.css
+24 -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,13 @@
} }
.iconBtnStyle{ .iconBtnStyle{
width: 33px; width: 27px;
height: 33px; height: 27px;
.icon{
height: 13.12px;
width: auto;
}
} }
} }
style/default.css
+4 -1
View File
@@ -26,7 +26,6 @@ p,h1,h2,h3,h4{
pointer-events: none !important; pointer-events: none !important;
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;
}
style/main.css
+237 -147
View File
@@ -4,28 +4,30 @@
--main-color: #000000; --main-color: #000000;
} }
/*================ ANIMATION ======================*/
/*================ DESACT DEFAULT ======================*/
/*================ 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{
margin: 0;
padding: 0;
width: 100%;
height: auto;
overflow-y: hidden;
position: relative;
z-index: -33;
box-sizing: border-box;
}
/*================ STRUCTURE ======================*/ /*================ STRUCTURE ======================*/
header{ header{
@@ -99,7 +101,7 @@ header{
} }
video{ noscript > video{
height: 110%; height: 110%;
width: auto; width: auto;
position: absolute; position: absolute;
@@ -107,6 +109,23 @@ video{
z-index: -32; z-index: -32;
} }
.cute-texture-video{
opacity: 0;
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{
visibility: collapse; visibility: collapse;
} }
@@ -126,6 +145,79 @@ 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;
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;
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;
@@ -160,7 +252,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;
@@ -193,7 +285,7 @@ main{
} }
li{ li{
margin-bottom: 7.77px; margin-top: 16.1px;
} }
} }
} }
@@ -211,7 +303,7 @@ main{
grid-row: 2; grid-row: 2;
color: var(--back-color); color: var(--back-color);
justify-self: end; justify-self: end;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@@ -267,6 +359,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 +442,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 +473,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;
} }
} }
} }
@@ -353,152 +509,86 @@ main{
align-items: flex-start; align-items: flex-start;
gap: 0; gap: 0;
padding-bottom: 16.1px; padding-bottom: 16.1px;
padding-right: 16.1px;
h3{ h3{
position: sticky; position: relative;
margin-bottom: 7.77px; margin-bottom: 7.77px;
} }
article{
h4{
padding: 16.1px;
}
a{
margin-right: 33px;
}
.date{
padding: 16.1px;
}
}
.solidBox{ .solidBox{
width: 100%; width: 100%;
height: 77px; height: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-left: 16.1px; padding: 0;
padding-right: 33px; box-sizing: border-box;
}
summary { .solidBox:has(details[open]){
padding-left: 33px; color: var(--back-color);
padding-top: 7.77px; background-color: var(--main-color);
height:50px; border-color: var(--back-color);
position: relative; border-radius: 16.1px;
z-index: 0; margin-top: 7.77px;
list-style-type: none; overflow: hidden;
margin-bottom: 7.77px;
details{
cursor: default;
}
.title{ }
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 77%; .iconBtnStyle{
box-sizing: border-box; width: 33px;
height: 16.1px; height: 33px;
padding-top: 3.33px;
padding-left: 33px;
margin-bottom: 13.12px;
font-family: 'velvelyne'; .icon{
font-weight: bold; transform: rotate(45deg);
font-size: 16.1px; }
}
p{ details{
margin: 0; width: 100%;
} height: 100%;
cursor: copy;
overflow: hidden;
h4{ summary{
margin: 0; display: flex;
font-family: 'velvelyne'; flex-direction: row;
font-weight: bold; align-items: center;
font-size: 16.1px; justify-content: space-between;
} width: 100%;
} box-sizing: border-box;
list-style-type: none;
padding: 16.1px;
}
.resume{ article{
font-family: 'velvelyne'; width: 100%;
font-weight: bold; cursor: default;
font-size: 13.12px; text-transform: none;
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;
}
}
.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: -30;
}
style/reduced.css
+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;
}
}
style/responsive.css
+66 -1
View File
@@ -40,6 +40,18 @@
grid-template-columns: 2fr 2fr 1fr; grid-template-columns: 2fr 2fr 1fr;
grid-template-rows: 0.7fr 2fr; grid-template-rows: 0.7fr 2fr;
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{
@@ -80,6 +92,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 +109,7 @@
#statusDesc{ #statusDesc{
font-size: 16.1px; font-size: 16.1px;
padding-left: 33px;
} }
} }
@@ -135,7 +155,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 +204,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 +213,7 @@
address{ address{
font-size: 22px; font-size: 22px;
margin-top: 13.12px;
} }
#planSection{ #planSection{
@@ -176,6 +231,17 @@
} }
} }
#adhesionSection{
width: 50%;
margin-left: 16.1px;
margin-bottom: 77px;
.textBtnStyle{
height: 44px;
font-size: 20px;
}
}
} }
#statuSection{ #statuSection{
@@ -188,7 +254,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{