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

Compare commits

base: vgaNAR6ta/LOLv333:REWORK
vgaNAR6ta/LOLv333:REWORK vgaNAR6ta/LOLv333:vgaNAR6ta
..
compare: vgaNAR6ta/LOLv333:4bdd4561a8805c645d2144906967e7950fe0a2cb
vgaNAR6ta/LOLv333:REWORK vgaNAR6ta/LOLv333:vgaNAR6ta
7 Commits
REWORK .. 4bdd4561a8
Author SHA1 Message Date
vgaNAR6ta 4bdd4561a8 edit: interface évènement + modif typo texte (légèrement +gras) 2026-07-04 19:32:56 +02:00
vgaNAR6ta 80629f785a edit: bug responsive n°1312 plan qui passait sous interface + ajout des liens 2026-07-03 22:38:18 +02:00
vgaNAR6ta a5e64c49e5 edit: favicon change de couleur à l'ouverture ^^ 2026-07-03 18:38:03 +02:00
vgaNAR6ta 126d3f81b9 edit: bug responsive n°333 corrigé en fixant la taille des ligne de la grid display (dans #mainInfo) 2026-07-03 17:59:07 +02:00
vgaNAR6ta 4ab2e8d6f3 edit: read me à jour 2026-07-03 17:37:06 +02:00
vgaNAR6ta bcfc5b318f tunnel: { 
création structure hors vue (et sans js sur pc) pour infos 
essentielles
     création de l'interactivité pour indiquer l'ouverture du lieu (sans 
'backend', automatisation et lien avec capteur à faire)
     liens inactifs pour l'instant
     infos pour remplir et prévisualiser à mettre à jour en fonction de 
ce qu'on décide ^^
          c'est tout pour cette fois
}
 2026-07-03 17:27:45 +02:00
vgaNAR6ta 8bea3c547e init: empty vite + vue3 template 2026-07-01 14:09:16 +02:00
79 changed files with 2932 additions and 2864 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+24 -1
View File
@@ -1 +1,24 @@
status/index.html # Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.vscode/extensions.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}
README.md
+18
View File
@@ -0,0 +1,18 @@
yoooo
petite propositionn de refonte du site du LOL
(d'après qq idées perso et des remarques des utilisateurices)
POUR LE STATUT D'OUVERTURE DU LIEU IL FAUT :
> IMPORTER LE FICHIER ./src/lolStatus.js idéalement :
import { lolState } from './src/lolStatus.js'
> ÉDITER LE PARAMÈTRE (boolean) lolState.isOpen
=> true pour ouvert
> L'INTERFACE SE MET À JOUR AUTOMATIQUEMENT (déjà en place)
NB: les infos indiquées sont surtout là pour prévisualiser, mais ne sont pour l'instant pas plus que des envies personelles par rapport au lieu (rien d'officiel pour l'instant, juste des idées)
333
affiches/mardis/IMG001.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 MiB

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

Before

Width:  |  Height:  |  Size: 4.3 MiB

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

Before

Width:  |  Height:  |  Size: 4.2 MiB

affiches/mardis/index.html
-136
View File
@@ -1,136 +0,0 @@
<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>
affiches/test/index.html
-51
View File
@@ -1,51 +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.svg" />
<title>TEST EVENT</title>
<style data-import="no-import">
/*=========================== INFROMATIONS AFFICHES :
le style 'no-import' est filtrée
ici on place les eléments qui entre en conflit avec
la page principale
les suivant sont inclus
IMPORTANT : il faut nommer le <article> avec un id unique
pour éviter les conflit avec les reste du site
====================================================*/
body{
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
</style>
<style media="screen">
#testAffiche{
width: 333px;
height: 333px;
background-color: green;
}
#testAffiche p{
color: black;
font-size: 33px;
}
</style>
</head>
<body>
<article id="testAffiche">
<p>test affiche !</p>
</article>
</body>
</html>
affiches/test333/index.html
-52
View File
@@ -1,52 +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.svg" />
<link rel="stylesheet" href="./closedStyle.css">
<link rel="stylesheet" href="../style/animation.css">
<link rel="stylesheet" href="/style/typo.css">
<title>TEST EVENT 333</title>
<style data-import="no-import">
/*=========================== INFROMATIONS AFFICHES :
la balise style data-import="no-import" est filtrée
ici on place les eléments qui entre en conflit avec la page principale
les suivant sont inclus
IMPORTANT : il faut nommer le main avec un id unique pour éviter les conflit avec les reste du site
====================================================*/
body{
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
</style>
<style media="screen">
#testAffiche333{
width: 333px;
height: 333px;
background-color: red;
}
#testAffiche333 p{
color: black;
font-size: 33px;
}
</style>
</head>
<body>
<article id="testAffiche333">
<p>test affiche 333 !</p>
</article>
</body>
</html>
assets/icons/msg.svg
-4
View File
@@ -1,4 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 285 B

assets/icons/pause.svg
-5
View File
@@ -1,5 +0,0 @@
<?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 13.67 16.63">
<path d="M5.28,0v16.63H0V0h5.28Z"/>
<path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 228 B

assets/icons/play.svg
-4
View File
@@ -1,4 +0,0 @@
<?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 18.25 17.52">
<path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 219 B

assets/icons/player.svg
-4
View File
@@ -1,4 +0,0 @@
<?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 97.51 84.66">
<path d="M18.91,0v49.74c-.47-.03-.94-.06-1.42-.06-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.35-3.41,5.02-7.6,5.02-12.56,0-.53-.03-1.05-.07-1.57V16h46.6v22.48c-.49-.04-.99-.07-1.49-.07-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.31-3.37,4.97-7.49,5.02-12.37h0V0H18.91Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 626 B

assets/icons/saved.svg
-6
View File
@@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.6 133.47">
<g id="Calque_1-2" data-name="Calque 1">
<path d="M78.6,113.9V0H0v113.9h0l.07,19.57,39.15-38.87,39.16,38.73.21-19.43h0ZM39.08,78.6l-23.08,20.85V16h46.6v83.5l-23.23-20.9h-.3Z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 337 B

assets/logo/logo_picto.svg
-143
View File
@@ -1,143 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

assets/video/background.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
+118 -223
View File
@@ -1,228 +1,123 @@
<!DOCTYPE html> <!doctype html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; 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="" />
<link rel="stylesheet" href="style/typo.css"> <title>L(. O.)L</title>
<link rel="stylesheet" href="style/default.css"> </head>
<link rel="stylesheet" href="style/common.css"> <body>
<link rel="stylesheet" href="style/animation.css"> <!--HORS VUE-->
<link rel="stylesheet" href="style/main.css"> <div id="mainContainer">
<div class="uiStyle" id="topBar">
<!--REPONSIVE--> <div class="left">
<link rel="stylesheet" href="style/responsive.css"> <img src="./src/assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
<!--REDUCED MOTION--> <p>L<strong>⚧</strong>L</p>
<link rel="stylesheet" href="style/reduced.css"> </div>
<div class="right">
<title>Laboratoire Ouvert Lyonnais</title> <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>
<!--OPEN GRAPHS--> <a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
<meta property="og:title" content="Laboratoire Ouvert Lyonnais"> <a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
<meta property="og:description" content="Hackerspace Queer"> <a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
<meta property="og:url" content="https://labolyon.fr/"> </div>
<meta property="og:image" content="assets/logo/logo_picto.svg"> <button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
<meta property="og:type" content="website"> <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>
<link rel="icon" type="image/svg" href="assets/favicon.svg"> </button>
</head>
<body>
<header>
<h1>
<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">LOL</span>
<span class="plain-name">LOL</span>
</h1>
<nav aria-label="outils numériques du LOL">
<ul>
<li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" target="_blank">Git</a></li>
<li><a href="https://wiki.labolyon.fr/" class="textBtnStyle" target="_blank">Wiki</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" class="textBtnStyle" target="_blank">Fediverse</a></li>
</ul>
</nav>
</header>
<main>
<div id="homeContent">
<section id="titleSection" class="solidBox">
<h2>
Hackerspace
</h2>
<p>
<br>
Lieu autogéré <br>
de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</p>
</section>
<section id="hourSection" class="solidBox">
<h3>Horaires d'ouverture</h3>
<ol>
<li>
Mar. <strong>17h &rarr; 23h</strong>
</li>
<li>
Sam. <strong>14h &rarr; 20h</strong>
</li>
</ol>
<!-- pour plus tard
<h3>Nocturne</h3>
<ol>
<li>Ven. <strong>21h &rarr; 5h</strong></li>
</ol>
-->
</section>
<div class="access-info-box transparentBox">
<address aria-label="Adresse du lieu">
7 place Chazette<br>
69001 Lyon<br>
<br>
45° 46' 23.698" N<br>
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" aria-label="Plan d'accès du local">
<div id="planContainer" class="transparentBox">
<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 aria-hidden="true" id="fleche" viewBox="0 0 4215.93 2604.36">
<g>
<path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
<g>
<path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
<path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
<path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
<path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
<path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
<path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
<path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
<path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
<path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
<path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
<path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
<path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
</g>
</g>
<rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
</svg>
</div>
</div>
<div id="extLinkSection" class="transparentBox" aria-label="Liens externes">
<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" aria-hidden="true" alt="">
</a>
</div>
<!-- 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> </div>
<section id="statuSection" class="solidBox"> <div id="mainInfo">
<div id="statusDesc"> <div class="uiStyle" id="title">
<h3> <p>
Le LOL peut ouvrir en dehors des horaires habituels. Hackerspace queer
En fonction de nos envies et disponibilités. </p>
</h3> <p id="desc">
<p> Lieu de réappropriation, <br>
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small> réparation & recyclage <br>
</p> des objets techniques <br>
</div> & technologiques
<a href="status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
</section>
<aside id="extraContent">
<div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
<p>
Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
<br><br>
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 !
<br><br>
Nous revendiquons l'ouverture du code et des techniques,<br>
le partage des connaissances et l'autogestion,<br>
l'anti-capitalisme et l'anti-fascisme. <br><br>
Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
</p> </p>
<dl>
<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> </div>
<div id="address">
<section id="eventSection" class="transparentBox"> <p>
<h3>Événements <small>à venir</small></h3> 7 place Chazette
<article class="solidBox"> <br>
<h4>Permanences du LOL</h4> 69001 Lyon
<p class="date">↻ Mardi & Samedi</p> <br> <br>
<a href="/affiches/mardis/" class="iconBtnStyle" target="_blank" aria-label="Plus d'infos sur cet évènement"> 45° 46' 23.698" N
<svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true"> <br>
<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"/> 4° 50' 14.052" E
</svg> </p>
</a> <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
</article> <img src="./src/assets/logo_hackerspaces_monde.png">
</section> </a>
</aside> </div>
<noscript> <div class="uiStyle" id="openingHours">
<video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop aria-hidden="true"></video> <p>
</noscript> Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop aria-hidden="true"></video> Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
<canvas class="cute-texture" aria-hidden="true"></canvas> Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
</main> &ensp; &rarr; nocturne : &ensp;<br>
<!-- SCRIPT PRINCIPAL --> Ven. &emsp; <strong>21h &rarr; 5h</strong>
<script type="module" src="js/main.js"></script> </p>
</body> </div>
<div id="planContainer">
<img src="./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>Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :</p>
</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 tout 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,
la liberté 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>
<!--VUE ROOT APP-->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html> </html>
js/cuteTexture.js
-348
View File
@@ -1,348 +0,0 @@
const DEFAULT_VERTEX_SHADER = `
attribute float aVertexIndex;
varying highp vec2 vTextureCoord;
// 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.
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;
}
`
const FRAGMENT_SHADER_UTILITIES = `
highp float noise1(highp vec2 co){
return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
}
// Color spaces from https://github.com/tobspr/GLSL-Color-Spaces/blob/master/ColorSpaces.inc.glsl
const highp float HCV_EPSILON = 1e-10;
const highp float HSL_EPSILON = 1e-10;
highp vec3 hue_to_rgb(highp float hue)
{
highp float R = abs(hue * 6.0 - 3.0) - 1.0;
highp float G = 2.0 - abs(hue * 6.0 - 2.0);
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
}
}
}
/**
* @param {WebGLRenderingContext} ctx
*/
function initMainShader(ctx, options){
let fragmentShaderCode = options?.shaderSource;
const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
ctx.compileShader(vertexShader)
if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) {
throw new Error(`Le vertex shader n'a pas pu être compilé: ${ctx.getShaderInfoLog(vertexShader)}`)
ctx.deleteShader(vertexShader)
return null
}
if(!fragmentShaderCode){
fragmentShaderCode = getDocumentShaderSource(document);
}
if(!fragmentShaderCode){
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.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,
}
}
/**
* @param {HTMLCanvasElement} target
* @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 getDocumentShaderSource(doc=document){
return doc.querySelector(`script[type="x-shader/glsl+fragment"]`)?.innerHTML
}
js/events.js
-140
View File
@@ -1,140 +0,0 @@
export async function loadEvents(){
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)
let displayWindow = document.querySelector('#posterWindow');
let displayContainer = document.querySelector('#posterContainer');
let closeBtn = document.querySelector('#posterCloseBtn');
closeBtn.addEventListener('mousedown', () => {
displayWindow.style.visibility = 'collapse';
displayContainer.replaceChildren();
})
closeBtn.addEventListener('touchstart', () => {
displayWindow.style.visibility = 'collapse';
displayContainer.replaceChildren();
})
async function getPoster(src){
let res = await fetch(src);
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
}
}
let eventList = [];
if( btnList.length > 0 ){
for (let btn of btnList ){
let link = btn.children[0];
link.style.pointerEvents = 'none';
//console.log(link.href);
let posterPage = await getPoster(link.href);
//console.log('selected poster: ', posterPage)
let titleData = posterPage.querySelector('title');
//console.log(titleData);
let styleList = Array.from(posterPage.querySelectorAll('head > style'));
//console.log(styleList)
styleList.splice(0,1);
//console.log(styleList)
eventList.push(
{
content: posterPage.querySelector('main'),
title: titleData.innerText,
stylesheet: styleList,
sourceBtn: btn
}
);
}
}
//console.log("event list : ", eventList);
if (eventList.length > 0){
eventList.forEach( (obj) =>{
let btn = obj.sourceBtn;
let content = obj.content;
let title = obj.title;
for (let style of obj.stylesheet){
document.head.append(style);
}
btn.addEventListener( 'click', () => {
//console.log("selection :", content)
displayWindow.style.visibility = 'visible';
let targetTitle = displayWindow.querySelector('h4');
targetTitle.innerText = title;
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
-44
View File
@@ -1,44 +0,0 @@
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 = '';
})
}
js/index.js
-22
View File
@@ -1,22 +0,0 @@
async function importOuverture(){
const res = await fetch("/status/index.html")
if(!res.ok){
throw new Error(`Server responded with status ${res.status} ${res.statusText}`)
}
let html_text = await res.text()
let html = new DOMParser().parseFromString(html_text, "text/html");
for(let style of html.querySelectorAll("head > style")) {
document.head.append(style)
}
let textStatus = html.querySelector("#statusText").textContent;
let statusBox = document.querySelector('#statusText');
statusBox.textContent = textStatus;
}
importOuverture()
for( let btn of document.querySelectorAll(".iconBtnStyle")){
btn.style.visibility = 'visible';
}
js/main.js
-21
View File
@@ -1,21 +0,0 @@
import { loadEvents } from '/js/events.js'
import { loadStatus } from '/js/status.js'
import { initCuteTexture } from '/js/cuteTexture.js'
import { makeItFloat } from '/js/floating.js';
// ======================================== events & statut d'ouverture
loadEvents();
loadStatus()
.then((status) => {
console.log("Status actuel du LOL", status);
let cuteTexture = initCuteTexture({
shaderSource: status.shaderSource
});
cuteTexture.target.style.visibility = "visible"
});
// ======================================== floating message window
makeItFloat(document.querySelector('#msgWindow'));
js/status.js
-32
View File
@@ -1,32 +0,0 @@
import { getDocumentShaderSource } from './cuteTexture.js';
export async function loadStatus(){
let res = await fetch('/status/index.html');
let html_text = await res.text()
let html = new DOMParser().parseFromString(html_text, "text/html");
let shaderSource = getDocumentShaderSource(html);
let target = document.querySelector('#statuSection');
let hiddenBtn = target.querySelector('a');
hiddenBtn.style.visibility = 'collapse';
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 style = html.querySelectorAll('link[rel="stylesheet"]')[0];
//console.log("selected script: ", script);
document.head.append(icon);
document.head.append(style);
target.appendChild(status);
return { open: isOpen, shaderSource };
}
package-lock.json
Generated
+1600
View File
File diff suppressed because it is too large. Load diff
package.json
+20
View File
@@ -0,0 +1,20 @@
{
"name": "lolv333",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vite-svg-loader": "^5.1.1",
"vue": "^3.5.39",
"vue3-moveable": "^0.28.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.7",
"vite": "^8.1.1"
}
}
style/typo/Avara-Black.woff2 → public/typo/Avara-Black.woff2
View File
File renamed without changes.
style/typo/Karrik-Italic.woff2 → public/typo/Karrik-Italic.woff2
View File
File renamed without changes.
style/typo/Karrik-Regular.woff2 → public/typo/Karrik-Regular.woff2
View File
File renamed without changes.
style/typo/Lineal-Heavy.ttf → public/typo/Lineal-Heavy.ttf
View File
File renamed without changes.
style/typo/PressStart2P-Regular.ttf → public/typo/PressStart2P-Regular.ttf
View File
File renamed without changes.
style/typo/Velvelyne-Bold.ttf → public/typo/Velvelyne-Bold.ttf
View File
File renamed without changes.
style/typo/Velvelyne-Book.ttf → public/typo/Velvelyne-Book.ttf
View File
File renamed without changes.
style/typo/Velvelyne-Light.ttf → public/typo/Velvelyne-Light.ttf
View File
File renamed without changes.
readMe.MD
-1
View File
@@ -1 +0,0 @@
> **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
spaceapi/space.json
-34
View File
@@ -1,34 +0,0 @@
{
"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/"
]
}
src/App.vue
+22
View File
@@ -0,0 +1,22 @@
<template>
<Teleport to="#topBar .left" defer>
<lolStatusDiv></lolStatusDiv>
</Teleport>
<Teleport to="#lolOpener.uiStyle" defer>
<lolStatusDiv></lolStatusDiv>
</Teleport>
<eventDiv></eventDiv>
<eventPannel class="zFocus"></eventPannel>
</template>
<style scoped>
</style>
<script>
export default {
name : 'App',
mounted(){
console.log("Vue root app is fully loaded!");
}
};
</script>
assets/favicon.svg → src/assets/favicon.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

assets/favicon_open.svg → src/assets/favicon_open.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

assets/fleche.svg → src/assets/fleche.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

assets/icons/about.svg → src/assets/icons/about.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 433 B

assets/icons/back.svg → src/assets/icons/back.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 620 B

After

Width:  |  Height:  |  Size: 620 B

assets/icons/close.svg → src/assets/icons/close.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 304 B

assets/icons/contact.svg → src/assets/icons/contact.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

assets/icons/file.svg → src/assets/icons/file.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 851 B

After

Width:  |  Height:  |  Size: 851 B

assets/icons/folder.svg → src/assets/icons/folder.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 420 B

After

Width:  |  Height:  |  Size: 420 B

assets/icons/info.svg → src/assets/icons/info.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 543 B

After

Width:  |  Height:  |  Size: 543 B

assets/icons/link.svg → src/assets/icons/link.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 260 B

After

Width:  |  Height:  |  Size: 260 B

assets/icons/next.svg → src/assets/icons/next.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 257 B

After

Width:  |  Height:  |  Size: 257 B

src/assets/icons/play.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 73.5 73.4">
<path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

assets/icons/prev.svg → src/assets/icons/prev.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 255 B

assets/icons/reload.svg → src/assets/icons/reload.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 865 B

After

Width:  |  Height:  |  Size: 865 B

assets/logo/logo-contour.svg → src/assets/logo/logo-contour.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

assets/logo/logo-contreforme.svg → src/assets/logo/logo-contreforme.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

assets/logo/logo-forme.svg → src/assets/logo/logo-forme.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 849 B

After

Width:  |  Height:  |  Size: 849 B

assets/logo_hackerspaces_monde.png → src/assets/logo_hackerspaces_monde.png
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/plan.svg → src/assets/plan.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

src/components/EventContent.vue
+137
View File
@@ -0,0 +1,137 @@
<template>
<Teleport to="#eventSection" defer>
<div id="eventContainer">
<div class="eventEntry" v-for="item of displayedEvents" :key="item.title" @click="openEvent(item)">
<div class="titleSection">
<p class="title">{{item.title}}</p>
<p class="date">{{item.date}} &rarr; {{item.time}}</p>
</div>
<div class="subtitleSection">
<p class="subtitle">{{item.subtitle}}</p>
</div>
</div>
</div>
</Teleport>
</template>
<style scoped>
#eventContainer{
width:100%;
height: auto;
max-height: 90vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
gap: 7.77px;
padding-top: 7.77px;
box-sizing: border-box;
@media(min-width: 700px){
max-height: 50vh;
}
@media(min-width: 1300px){
max-height: 46.5vh;
}
.eventEntry{
width: 90%;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
border-color: var(--back-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
flex-shrink: 0;
gap: 0;
.titleSection{
width: 100%;
height: 44px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding-top: 7.77px;
pointer-events: none;
p{
font-family: 'velvelyne';
font-size: 16.1px;
font-weight: bold;
color: var(--back-color);
height: 50%;
margin: 0;
padding: 0;
text-transform: uppercase;
}
p.date{
font-family: 'karrik';
font-weight: normal;
font-size: 9px;
text-transform: none;
}
}
.subtitleSection{
width: 100%;
height: auto;
padding-right: 16.1px;
padding-left: 16.1px;
box-sizing: border-box;
position: relative;
margin-top: 0;
padding-top: 0;
pointer-events: none;
p{
font-family: 'velvelyne';
font-size: 13.12px;
font-weight: normal;
color: var(--back-color);
white-space: pre-line;
}
}
}
.eventEntry:hover{
background-color: var(--back-color);
color: var(--main-color);
p{
color: var(--main-color);
}
}
}
</style>
<script>
import { watch } from 'vue'
import { lolEventsList } from '../lolEvents.js'
import { dataStorage } from '../dataExchange.js'
export default {
name : 'EventContent',
methods: {
openEvent(obj){
console.log('updating...')
dataStorage.selectedEvent = obj;
dataStorage.eventInfoActive = true;
}
},
computed: {
displayedEvents(){
return lolEventsList
}
},
mounted(){
console.log("Event list is loaded!");
}
};
</script>
src/components/EventInfoPannel.vue
+111
View File
@@ -0,0 +1,111 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="eventPannel" class="windowStyle" ref="eventPannel" v-show="isActive">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
{{displayedEvent.title}}
</p>
<button type="button" class="closeBtn" @mousedown.stop="closePannel" @touchstart.stop="closePannel">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent" id="eventContent">
<p class="date">
{{displayedEvent.date}} &rarr; {{displayedEvent.time}}
</p>
<p>{{displayedEvent.desc}}</p>
</div>
</div>
</template>
<style scoped>
#eventPannel{
position: fixed;
width: 250px;
height: auto;
max-height: 250px;
top: 222px;
left: 117px;
padding-bottom: 3.33px;
#eventContent{
padding: 7.77px;
align-items: flex-start;
justify-content: start;
overflow-y: scroll;
p{
font-family: 'velvelyne';
font-weight: normal;
font-size: 13.12;
color: var(--main-color);
margin: 0;
padding: 0;
margin-bottom: 3.33px;
margin-left: 7.77px;
margin-right: 13.12px;
white-space: pre-line;
}
p.date{
font-family: 'karrik';
}
}
}
/*================ PC LARGE*/
@media(min-width:650px){
#eventPannel{
left: 477px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
import { dataStorage } from '../dataExchange.js'
export default {
name : 'EventInfoPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
computed: {
displayedEvent(){
return dataStorage.selectedEvent
},
isActive(){
return dataStorage.eventInfoActive
}
},
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
},
closePannel(){
dataStorage.eventInfoActive = false;
}
},
mounted(){
this.target = this.$refs.eventPannel;
console.log("Event info pannel is loaded!");
}
};
</script>
src/components/lolStatus.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<div id="lolStatusContainer">
<p ref="lolStatus">{{statusText}}</p>
</div>
</template>
<style scoped>
#lolStatusContainer{
width: 161px;
height: 33px;
background-color: transparent;
color: var(--main-color);
border-color: var(--main-color);
border-style: solid;
border-width: thin;
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-around;
padding-bottom: 3.33px;
margin-left: 1.61vw;
p{
font-family: 'pressStart2P';
font-size: 13.12px;
letter-spacing: 1.61px;
font-weight: normal;
}
}
#lolOpener #lolStatusContainer{
margin-left: 0;
width: 90%;
align-self: center;
}
</style>
<script>
import { lolState } from '../lolStatus.js'
import { watch } from 'vue'
export default {
name : 'lolStatus',
data(){
return{
statusText: 'FERMÉ...'
}
},
methods: {
updateVisibleStatus(){
let currentTheme = this.lolCurrentStatus ? 'open' : 'closed';
let pageIcon = document.querySelector('link');
//console.log(currentTheme);
console.log(pageIcon.href);
this.statusText = this.lolCurrentStatus ? 'OUVERT !' : 'FERMÉ...';
document.documentElement.setAttribute('data-theme' , currentTheme);
document.querySelector('link').href = this.lolCurrentStatus ? './src/assets/favicon_open.svg' : './src/assets/favicon.svg'
this.$refs.lolStatus.style.animation = this.lolCurrentStatus ? 'blink 1.61s infinite' : 'none';
}
},
computed: {
lolCurrentStatus(){
return lolState.isOpen
}
},
onMounted(){
watch(() => this.lolCurrentStatus, () => this.updateVisibleStatus())
},
mounted(){
this.updateVisibleStatus();
console.log("LOL status is loaded!");
}
};
</script>
src/dataExchange.js
+12
View File
@@ -0,0 +1,12 @@
import { reactive } from 'vue'
export const dataStorage = reactive({
selectedEvent: {
title: '',
date: '',
time: '',
subtitle: '',
desc: ''
},
eventInfoActive: false
})
src/lolEvents.js
+34
View File
@@ -0,0 +1,34 @@
import { reactive } from 'vue'
export const lolEventsList = reactive(
[
{
title: 'test-01',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 001',
desc: 'ça marche !'
},
{
title: 'test-02',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 002',
desc: 'oui je crois bien'
},
{
title: 'test-333',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 333 \n test event 333 \n test event 333 \n test event 333',
desc: 'super !'
},
{
title: 'test-004',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 004',
desc: 'test de très longue description: \n 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.'
}
]
)
src/lolStatus.js
+7
View File
@@ -0,0 +1,7 @@
import { reactive } from 'vue'
export const lolState = reactive(
{
isOpen: false
}
)
src/main.js
+33
View File
@@ -0,0 +1,33 @@
import { createApp } from 'vue'
// import CSS global
import './style.css'
// import app vue racine
import App from './App.vue'
// import composants
import lolStatus from './components/lolStatus.vue'
import EventContent from './components/EventContent.vue'
import EventInfoPannel from './components/EventInfoPannel.vue'
// création app racine
const app = createApp(App);
//Composants
app.component('lolStatusDiv', lolStatus);
app.component('eventDiv', EventContent);
app.component('eventPannel', EventInfoPannel);
//Démarrage dans div#app de index.html
app.mount('#app');
let menuActive = false;
document.documentElement.setAttribute('data-theme', 'closed');
document.querySelector('#menuBtn').addEventListener('click', () => {
let target = document.querySelector('#mainContainer .right');
let btnIcon = document.querySelector('#menuBtn .icon')
menuActive = !menuActive
target.style.display = menuActive ? 'flex' : 'none';
target.style.visibility = menuActive ? 'visible' : 'collapse';
btnIcon.classList.toggle('rotated');
})
src/style.css
+696
View File
@@ -0,0 +1,696 @@
:root[data-theme="closed"]{
--back-color: #FFFF4D;
--main-color: #000000;
}
:root[data-theme="open"]{
--back-color: #00FF44;
--main-color: #000000;
}
/*====================Typo*/
@font-face {
font-family: 'karrik';
src: url('./typo/Karrik-Italic.woff2').format('woff2');
font-style: italic;
}
@font-face {
font-family: 'karrik';
src: url('./typo/Karrik-Regular.woff2') format('woff2');
font-style: normal;
}
@font-face {
font-family: 'velvelyne';
src: url('./typo/Velvelyne-Book.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: 'avara';
src: url('./typo/Avara-Black.woff2') format('woff2');
}
@font-face {
font-family: 'pressStart2P';
src: url('./typo/PressStart2P-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'velvelyne';
src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
font-weight: bold;
}
/*===================Animation*/
@keyframes blink {
0% { color: var(--back-color);}
15% { color: var(--main-color);}
35% { color: var(--main-color);}
50% { color: var(--back-color);}
65% { color: var(--main-color);}
85% { color: var(--main-color);}
100% { color: var(--back-color);}
}
@keyframes blinkBack {
0% { background-color: var(--back-color);}
15% { background-color: var(--main-color);}
35% { background-color: var(--main-color);}
50% { background-color: var(--back-color);}
65% { background-color: var(--main-color);}
85% { background-color: var(--main-color);}
100% { background-color: var(--back-color);}
}
@keyframes blinkBorder {
0% { border-color: var(--main-color);}
15% { border-color: var(--accent-color);}
35% { border-color: var(--accent-color);}
50% { border-color: var(--main-color);}
65% { border-color: var(--accent-color);}
85% { border-color: var(--accent-color);}
100% { border-color: var(--main-color);}
}
@keyframes float {
0% { transform: translateY(0px); }
35% { transform: translateY(1px); }
50% { transform: translateY(-10px); }
65% { transform: translateY(1px); }
100% { transform: translateY(0px); }
}
/*=============Désact défault*/
input {
-webkit-appearance: none !important;
appearance: none !important;
}
a{
text-decoration: none;
color: inherit;
cursor: alias;
}
button{
cursor: cell;
}
a p{
cursor:inherit;
}
a button{
cursor: inherit;
}
p{
cursor: inherit;
pointer-events: none !important;
}
.dg{
display: none !important;
height: 0;
overflow: hidden;
}
/*==========================Moveable*/
.moveable-control-box {
display: none !important;
}
/*=============Body & background*/
html, body{
margin: 0;
padding: 0;
background-color: var(--main-color);
width: 100%;
height:100%;
position: fixed;
inset: 0;
overflow-x: hidden;
overflow-y: scroll;
display: block;
scrollbar-color: var(--back-color) var(--main-color);
scrollbar-width: thin;
z-index: -33;
}
#mainContainer{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
height: auto;
gap: 0;
}
/*=====================BUTTONS*/
.textBtnStyle{
font-family: 'karrik';
font-size: 13.12px;
background-color: var(--back-color);
color: var(--main-color);
border-color: var(--main-color);
border-style: solid;
border-width: 1.75px;
border-radius: 16.1px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.textBtnStyle:hover{
background-color: var(--main-color);
color: var(--back-color);
}
.iconBtnStyle{
background-color: var(--back-color);
color: var(--main-color);
border-color: var(--main-color);
border-style: solid;
border-width: thin;
border-radius: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.iconBtnStyle:hover{
background-color: var(--main-color);
color: var(--back-color);
}
/*==============FENETRES*/
.windowStyle{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: var(--back-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--main-color);
overflow: hidden;
}
.zBase{
z-index: 33;
}
.zFocus{
z-index: revert;
z-index: 1312;
}
.windowTitle{
width:100%;
height:50px;
background-color: var(--main-color);
border-radius: 0;
font-family: 'velvelyne';
font-weight: bold;
text-transform: uppercase;
font-size: 22px;
color: var(--back-color);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
cursor: move;
}
.windowTitleLower{
font-family: 'velvelyne';
font-weight: bold;
font-size: 13.12px;
}
.closeBtn{
color: var(--back-color);
background-color: var(--main-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--back-color);
width: 33px;
height: 33px;
align-items: center;
}
.closeBtn:hover{
color: var(--main-color);
background-color: var(--back-color);
}
.windowContent{
height:77%;
width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/*=============INTERFACE*/
.uiStyle{
background-color: var(--back-color);
border-color: var(--main-color);
border-style: solid;
border-width: thin;
}
.icon{
height: 16.1px;
width: auto;
fill: currentColor;
pointer-events: none;
}
#topBar{
position: relative;
top: 0;
left: 0;
width: 100vw;
height: 50px;
z-index: 3;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
color: var(--main-color);
padding-left: 7.77px;
padding-right: 16.1px;
gap: 7.77px;
box-sizing: border-box;
p{
font-family: 'velvelyne';
font-size: 40px;
font-weight: bold;
padding-top: 7.77px;
}
#mainLogo{
height: auto;
width: 50px;
}
.left{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: auto;
gap: 7.77px;
height: 100%;
}
.right{
display: none;
visibility: collapse;
flex-direction: column;
align-items: center;
justify-content: space-around;
width:33%;
height: 200px;
position: absolute;
top: 55px;
right: 7.77px;
z-index: 3;
.textBtnStyle{
width: 16.1%;
min-width: 93px;
height: 33px;
text-transform: uppercase;
}
.textBtnStyle:hover{
border-color: var(--back-color);
}
}
.iconBtnStyle{
width: 33px;
height: 33px;
}
#menuBtn{
.icon.rotated{
transform: rotate(0);
}
.icon{
transform: rotate(45deg);
}
}
@media(min-width: 700px){
#menuBtn{
display: none;
visibility: collapse;
}
.right{
display: flex;
visibility: visible;
flex-direction: row;
align-items: center;
justify-content: space-around;
width:70%;
height: 100%;
position: relative;
top: 0;
left: 0;
}
}
}
#mainInfo{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
grid-template-areas:
"topL topR"
"midL midR"
"botL botR";
box-sizing: border-box;
width: 100vw;
height: auto;
align-items: stretch;
.uiStyle{
width:100%;
height: auto;
padding-left: 7.77px;
box-sizing: border-box;
font-family: 'velvelyne';
font-size: 13.12px;
font-weight: bold;
}
#planContainer{
width: 200%;
height: auto;
color: var(--back-color);
display: flex;
flex-direction: column;
align-items: center;
#plan{
position: relative;
width: 90%;
margin-bottom: 13.12px;
}
#fleche{
position: absolute;
width: 90%;
fill: currentColor;
z-index: -1;
}
@media(max-width: 700px){
grid-row: 2;
grid-column: 1 / 2;
}
}
#title{
grid-area: topL;
font-size: 22px;
line-height: .7;
height: 100%;
#desc{
font-family: 'velvelyne';
font-style: normal;
font-size: 13.12px;
line-height: 1em;
text-transform: uppercase;
}
}
#address{
grid-area: topR;
font-family: 'karrik';
color: var(--back-color);
font-style: normal;
font-size: 13.12px;
line-height: 1em;
text-transform: uppercase;
padding-left: 13.12px;
#hackerLogo{
width: 77px;
height: 50px;
display:inline-block;
position: absolute;
right: 13.12px;
top: 117px;
z-index: 33;
img{
width: 77px;
height: auto;
pointer-events: none;
cursor: inherit;
}
}
}
#openingHours{
grid-area: botL;
text-align: right;
padding-right: 13.12px;
font-weight: normal;
line-height: 1em;
margin-top: -13.12px;
strong{
font-weight: bold;
}
}
#lolOpener{
grid-area: botR;
font-weight: normal;
padding-right: 7.77px;
line-height: 1em;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
gap: 0;
height: auto;
#lolStatus{
width:90%;
height: 44px;
border-color: var(--main-color);
border-style: solid;
border-width: thin;
border-radius: 0;
align-self: center;
margin-bottom: 7.77px;
}
}
@media(min-width: 700px){
grid-template-columns: 1fr 2fr;
grid-template-rows: 161px 222px 77px;
height: auto;
.uiStyle{
font-size: 16.1px;
}
#planContainer{
height: 90%;
width: auto;
grid-row: 2;
grid-column: 2;
margin-left: 0;
margin-top: -100px;
#plan{
width:90%;
height: auto;
margin-bottom: 0;
max-height: 333px;
}
#fleche{
width:60%;
height: auto;
box-sizing: border-box;
max-height: 333px;
}
}
#openingHours{
grid-area: midL;
height: 60%
}
#lolOpener{
width: 300%;
grid-column: 1 / 2;
grid-row: 3;
flex-direction: row;
gap: 7.77px;
align-items: center;
justify-content: space-between;
padding-left: 16.1px;
height: 77px;
#lolStatus{
width: 44%;
align-self: center;
margin-top: 7.77px;
}
}
#title{
margin-bottom: 3.33px;
font-size: 27px;
line-height: 0;
#desc{
font-size: 16.1px;
}
}
#address #hackerLogo{
grid-area: midL;
position: relative;
top: 0;
left: 7.77px;
right: unset;
}
}
@media(min-width: 1300px){
grid-template-rows: 222px 500px 77px;
.uiStyle{
font-size: 16.1px;
}
#lolOpener{
font-size: 22px;
}
#address{
font-size: 22px;
#hackerLogo{
width: 117px;
}
}
#openingHours{
font-size: 33px;
}
#title{
margin-bottom: 3.33px;
font-size: 44px;
line-height: 0;
#desc{
font-size: 22px;
}
}
#planContainer {
margin-top: -117px;
margin-bottom: 77px;
#fleche{
width: 60%;
max-height: 666px;
}
#plan{
max-height: 666px;
}
}
}
}
#aboutSection{
position: relative;
top: 0;
left: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
height: 50vh;
#aboutText{
width: 60%;
height: auto;
padding-left: 4.44px;
padding-right: 13.12px;
padding-bottom: 13.12px;
overflow-y: scroll;
@media(min-width: 700px){
height: 50vh;
}
@media(min-width: 1300px){
height: 50vh;
}
p{
font-family: 'velvelyne';
font-weight: normal;
font-size: 13.12px;
color: var(--main-color);
@media(min-width: 1300px){
font-size: 20px;
}
}
}
#eventSection{
width: 40%;
height: 100%;
position: relative;
#title{
height: 44px;
padding-top: 7.77px;
padding-left: 7.77px;
box-sizing: border-box;
font-family: 'karrik';
font-style: italic;
font-size: 13.12px;
text-transform: uppercase;
color: var(--main-color);
pointer-events: none !important;
cursor: inherit;
}
}
}
status/closedStyle.css
-88
View File
@@ -1,88 +0,0 @@
:root {
--back-color: #FFFF4D;
--main-color: #000000;
}
/*======================= Page Statut LOL fermé ===*/
#lolIsClosed {
position: relative;
top: 0;
left: 0;
margin: 0;
width: 100vw;
height: 100vh;
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{
width:100%;
height: 100%;
border-radius: 33px;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
section{
width: 333px;
height: 117px;
background-color: var(--back-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 33px;
margin-top: -77px;
border-radius: 33px;
p{
padding: 0;
margin: 0;
text-transform: none;
font-size: 22px;
font-family: 'velvelyne';
font-weight: bold;
color: var(--main-color);
}
h3{
width: 277px;
height: 50px;
background-color: var(--main-color);
color: var(--back-color);
border-radius: 33px;
text-transform: uppercase;
text-align: center;
font-size: 33px;
font-family: 'karrik';
font-weight: normal;
padding: 0;
margin: 0;
padding-top: 7.77px;
}
}
}
status/index.fermé.html
-59
View File
@@ -1,59 +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.svg" />
<link rel="stylesheet" href="status/closedStyle.css">
<link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="style/reduced.css">
<title>Le LOL est Fermé ...</title>
</head>
<body id="lolIsClosed">
<canvas data-cute-texture class="cute-texture"></canvas>
<main id="closedContainer">
<section>
<p>Le LOL est actuellement</p>
<h3 id="lolStatus">fermé ...</h3>
</section>
</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>
</html>
status/index.ouvert.html
-59
View File
@@ -1,59 +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.svg" />
<link rel="stylesheet" href="status/closedStyle.css">
<link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="style/reduced.css">
<title>Le LOL est Fermé ...</title>
</head>
<body id="lolIsClosed">
<canvas data-cute-texture class="cute-texture"></canvas>
<main id="closedContainer">
<section>
<p>Le LOL est actuellement</p>
<h3 id="lolStatus">fermé ...</h3>
</section>
</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>
</html>
status/openStyle.css
-118
View File
@@ -1,118 +0,0 @@
:root {
--back-color: #00FF44;
--main-color: #000000;
}
.closedBackground{
visibility: collapse;
}
.openBackground{
position: absolute;
visibility: visible;
opacity: 1;
z-index: -20
}
.openBackground#texture{
z-index: -30;
}
.openBackground#background{
mix-blend-mode: difference;
filter: brightness(133%) saturate(33%) grayscale();
transform: rotate(180deg);
position: absolute;
margin-top: -9%;
height: 120%;
opacity: .777;
}
/*======================= Page Statut LOL ouvert ===*/
#lolIsOpen {
position: relative;
top: 0;
left: 0;
margin: 0;
width: 100vw;
height: 100vh;
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{
width:100%;
height: 100%;
border-radius: 33px;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
section{
width: 333px;
height: 117px;
background-color: var(--back-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 33px;
margin-top: -77px;
border-radius: 33px;
p{
padding: 0;
margin: 0;
text-transform: none;
font-size: 22px;
font-family: 'velvelyne';
font-weight: bold;
color: var(--main-color);
}
h3{
width: 277px;
height: 50px;
background-color: var(--main-color);
color: var(--back-color);
border-radius: 33px;
text-transform: uppercase;
text-align: center;
font-size: 33px;
font-family: 'karrik';
font-weight: normal;
padding: 0;
margin: 0;
padding-top: 7.77px;
}
}
}
#lolStatus{
animation: blink 3.33s infinite;
}
status/set-status.sh
-24
View File
@@ -1,24 +0,0 @@
#!/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
style/animation.css
-37
View File
@@ -1,37 +0,0 @@
@keyframes blink {
0% { color: var(--main-color);}
15% { color: var(--back-color);}
35% { color: var(--back-color);}
50% { color: var(--main-color);}
65% { color: var(--back-color);}
85% { color: var(--back-color);}
100% { color: var(--main-color);}
}
@keyframes blinkBack {
0% { background-color: var(--back-color);}
15% { background-color: var(--main-color);}
35% { background-color: var(--main-color);}
50% { background-color: var(--back-color);}
65% { background-color: var(--main-color);}
85% { background-color: var(--main-color);}
100% { background-color: var(--back-color);}
}
@keyframes blinkBorder {
0% { border-color: var(--main-color);}
15% { border-color: var(--accent-color);}
35% { border-color: var(--accent-color);}
50% { border-color: var(--main-color);}
65% { border-color: var(--accent-color);}
85% { border-color: var(--accent-color);}
100% { border-color: var(--main-color);}
}
@keyframes float {
0% { transform: translateY(0px); }
35% { transform: translateY(1px); }
50% { transform: translateY(-10px); }
65% { transform: translateY(1px); }
100% { transform: translateY(0px); }
}
style/common.css
-188
View File
@@ -1,188 +0,0 @@
.textBtnStyle{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
border-radius: 16.1px;
border-style: solid;
border-width: thin;
padding: 3.33px;
padding-left: 7.77px;
font-family: 'karrik';
font-size: 16.1px;
text-transform: uppercase;
border-color: var(--main-color);
color: var(--main-color);
background-color: var(--back-color);
}
.textBtnStyle:hover{
color: var(--back-color);
background-color: var(--main-color);
border-color: var(--back-color);
}
.iconBtnStyle{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
border-radius: 16.1px;
border-style: solid;
border-width: thin;
border-color: var(--main-color);
color: var(--main-color);
background-color: var(--back-color);
}
.icon{
height: 16.1px;
width: auto;
fill: currentColor;
pointer-events: none;
}
.iconBtnStyle:hover{
color: var(--back-color);
background-color: var(--main-color);
border-color: var(--back-color);
animation: none;
}
@media(min-width: 1300px){
.textBtnStyle{
font-size: 19px;
}
.iconBtnStyle{
font-size: 19px;
}
}
.solidBox{
width: 100%;
height: 100%;
position: relative;
z-index: 0;
border-radius: 0;
border-style: solid;
border-width: thin;
padding: 7.77px;
border-color: var(--main-color);
color: var(--main-color);
background-color: var(--back-color);
font-family: 'velvelyne';
font-weight: bold;
font-size: 16.1px;
box-sizing: border-box;
}
.transparentBox{
width: 100%;
height: 100%;
position: relative;
z-index: 0;
padding: 7.77px;
color: var(--back-color);
background-color: transparent;
font-family: 'karrik';
text-transform: uppercase;
font-size: 16.1px;
box-sizing: border-box;
}
.borderBox{
width: 95%;
height: 95%;
position: relative;
z-index: 0;
border-radius: 0;
border-style: solid;
border-width: medium;
padding: 7.77px;
padding-right: 13.12px;
border-color: var(--main-color);
color: var(--back-color);
background-color: transparent;
box-sizing: border-box;
}
.floatingWindow{
position: relative;
z-index: 3333;
width: auto;
height: auto;
background-color: var(--back-color);
border-color: var(--main-color);
border-radius: 16.1px;
border-style: solid;
border-width: thin;
overflow: hidden;
box-sizing: content-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.title{
position: relative;
top: 0;
width: 100%;
height: 44px;
background-color: var(--main-color);
color: var(--back-color);
text-transform: none;
font-size: 15px;
font-family: 'velvelyne';
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-left: 16.1px;
padding-right: 7.77px;
box-sizing: border-box;
cursor: move;
h4{
pointer-events: none;
}
.iconBtnStyle{
width: 27px;
height: 27px;
pointer-events: all;
.icon{
height: 13.12px;
width: auto;
}
}
}
}
style/default.css
-39
View File
@@ -1,39 +0,0 @@
input {
-webkit-appearance: none !important;
appearance: none !important;
}
a{
text-decoration: none;
color: inherit;
cursor: alias;
}
button{
cursor: cell;
}
a p{
cursor:inherit;
}
a button{
cursor: inherit;
}
p,h1,h2,h3,h4{
cursor: inherit;
pointer-events: none;
padding: 0;
margin: 0;
}
ul,ol {
padding: 0;
margin: 0;
list-style-type: none;
}
dialog{
padding: 0;
}
style/main.css
-619
View File
@@ -1,619 +0,0 @@
/*================ GAMME COLOR ======================*/
:root{
--back-color: #FFFF4D;
--main-color: #000000;
}
/*================ BODY ======================*/
html{
margin: 0;
padding: 0;
scrollbar-color: var(--back-color) var(--main-color);
background-color: var(--main-color);
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
z-index: -33;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: auto;
overflow-y: hidden;
position: relative;
z-index: -33;
box-sizing: border-box;
}
/*================ STRUCTURE ======================*/
header{
width: 100%;
height: 93px;
margin: 0;
position: relative;
top:0;
z-index: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-style: solid;
border-width: 0 0 1.61px 0;
border-color: var(--main-color);
background-color: var(--back-color);
h1{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 13.12px;
padding-left: 13.12px;
margin-bottom: 13.12px;
img{
height: 50px;
width: auto;
}
.cool-name{
font-family: 'pressStart';
font-size: 50px;
padding-top: 13.12px;
.trans-symbol{
font-family: 'velvelyne';
font-weight: bold;
}
}
.plain-name{
position: relative;
z-index: -33;
opacity: 0;
width: 0;
}
}
nav > ul{
width: auto;
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-right: 7.77px;
margin-top: 13.12px;
.textBtnStyle{
border-radius: 0;
width: 117px;
}
}
}
noscript > video{
height: 110%;
width: auto;
position: absolute;
inset: 0;
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{
visibility: collapse;
}
main{
position: relative;
z-index: -33;
overflow: hidden;
#homeContent{
height: 66vh;
width: 100%;
position:relative;
z-index: 0;
display: grid;
grid-template-columns: 2.5fr 2fr 1fr;
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{
grid-column: 1;
grid-row: 1;
width: 100%;
height: 100%;
h2{
text-transform: uppercase;
font-family: 'karrik';
font-size: 22px;
line-height: 1em;
}
small{
text-transform: none;
font-size: 15px;
font-family: 'velvelyne';
font-weight: bold;
line-height: 0.3em;
padding-left: 7.77px;
}
}
#hourSection{
grid-column: 3;
grid-row: 2;
width: 100%;
height: 77%;
align-self: end;
justify-self: end;
padding: 0;
h3{
width: 100%;
margin-bottom: 16.1px;
font-family: 'karrik';
text-transform: uppercase;
font-weight: normal;
font-size: 14px;
border-radius: 0;
border-style: solid;
border-width: thin;
padding: 3.33px;
margin-bottom: 3.33px;
box-sizing: border-box;
border-color: var(--main-color);
}
ol{
padding-left: 3.33px;
font-family: 'karrik';
text-transform: uppercase;
font-weight: normal;
font-size: 11px;
strong{
font-family: 'velvelyne';
font-weight: bold;
font-size: 16.1px;
}
li{
margin-top: 16.1px;
}
}
}
#planSection{
grid-column: 1 / 3;
grid-row: 2;
color: var(--back-color);
justify-self: end;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
#planContainer{
width: 100%;
height: max-content;
margin-left: 13.12px;
margin-top: 0;
}
img{
position: relative;
z-index: 0;
width: 90%;
height: auto;
}
svg{
fill: currentColor;
position: absolute;
z-index: -1;
width: 90%;
height: auto;
top: 4.44px;
left: -1.61px;
}
}
#extLinkSection{
grid-column: 3;
grid-row: 1;
width: 77%;
height: 122%;
justify-self: end;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
margin-right: 16.1px;
margin-top: 7.77px;
gap: 13.12px;
a{
cursor: alias;
img{
width: auto;
height: 55px;
pointer-events: none;
}
}
}
#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{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 0;
height: 20vh;
.textBtnStyle{
width: 66px;
font-size: 11px;
margin-right: 7.77px;
}
#statusDesc{
width: 77%;
padding: 7.77px;
padding-right: 33px;
font-size: 16.1px;
line-height: 1.1em;
small{
font-size: 13.12px;
line-height: 0.333em;
}
}
#lolStatus{
position: relative;
z-index: 33;
width: 40%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
font-family: 'karrik';
text-transform: uppercase;
font-size: 22px;
line-height: 1em;
padding-left: 16.1px;
box-sizing: border-box;
border-radius: 22px 0 0 22px;
background-color: var(--main-color);
color: var(--back-color);
small{
font-size: 1px;
opacity: 0;
}
}
}
#extraContent{
width: 100%;
height:auto;
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: 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{
padding: 13.12px;
padding-right: 33px;
font-size: 16.1px;
line-height: 1.333em;
}
#eventSection{
position: relative;
z-index: -1;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 0;
padding-bottom: 16.1px;
padding-right: 16.1px;
overflow-y: scroll;
h3{
position: relative;
margin-bottom: 7.77px;
}
article{
h4{
padding: 16.1px;
}
a{
margin-right: 33px;
}
.date{
padding: 16.1px;
}
}
.solidBox{
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
box-sizing: border-box;
flex-shrink: 0;
}
.solidBox:has(details[open]){
color: var(--back-color);
background-color: var(--main-color);
border-color: var(--back-color);
border-radius: 16.1px;
margin-top: 7.77px;
overflow: hidden;
margin-bottom: 7.77px;
details{
cursor: default;
}
}
.iconBtnStyle{
width: 33px;
height: 33px;
.icon{
transform: rotate(45deg);
}
}
details{
width: 100%;
height: 100%;
cursor: copy;
overflow: hidden;
summary{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
list-style-type: none;
padding: 16.1px;
}
article{
width: 100%;
cursor: default;
text-transform: none;
}
}
}
}
}
style/reduced.css
-12
View File
@@ -1,12 +0,0 @@
@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
-317
View File
@@ -1,317 +0,0 @@
/*===========================Moyen format : Tablette et petite fenêtres PC ===*/
@media(min-width: 650px){
header{
height: 60px;
h1{
margin-bottom: 5px;
img{
height: 40px;
}
}
nav > ul{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
height: 44px;
margin-top: 16.1px;
margin-right: 13.12px;
min-width: 444px;
box-sizing: border-box;
li{
height: 100%;
}
.textBtnStyle{
border-radius: 0;
width: 93px;
height: 100%;
}
}
}
main{
#homeContent{
height: 77vh;
grid-template-columns: 2fr 2fr 1fr;
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{
height: 110%;
h2{
font-size: 27px;
}
p{
font-size: 20px;
}
}
#hourSection{
grid-column: 1;
width: 50%;
height: 100%;
justify-self: start;
}
address{
padding-top: 16.1px;
}
#planSection{
grid-column: 2 / 4;
#planContainer{
width: 110%;
height: auto;
margin-left: -88px;
margin-top: -50px;
@media(min-width: 800px){
margin-top: -88px;
}
}
}
#extLinkSection{
justify-content: flex-start;
padding-top: 33px;
}
#adhesionSection{
justify-content: flex-end;
margin-top: 0;
margin-bottom: 33px;
width: 77%;
}
}
#statuSection{
.textBtnStyle{
font-size: 16.1px;
width: 117px;
margin-right: 33px;
}
#statusDesc{
font-size: 16.1px;
padding-left: 33px;
}
}
#extraContent{
#aboutSection{
}
#eventSection{
#eventContent{
li{
.iconBtnStyle{
right: 3.33%;
}
}
}
}
}
}
}
/*===========================Grand format : écrans larges et grands ===*/
@media(min-width: 1300px){
header{
nav > ul{
font-size: 27px;
li{
height: 100%;
}
.textBtnStyle{
padding-left: 16.1px;
width: 133px;
}
}
}
main{
#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{
width: 90%;
}
#hourSection{
height: 77%;
width: 44%;
h3{
font-size: 20px;
}
ol{
font-size: 16.1px;
padding-left: 16.1px;
strong{
font-size: 22px;
}
}
}
address{
font-size: 22px;
margin-top: 13.12px;
}
#planSection{
#planContainer{
width: 100%;
height: auto;
margin-left: -88px;
margin-top: -133px;
}
}
#extLinkSection{
a img{
height: 77px;
}
}
#adhesionSection{
width: 50%;
margin-left: 16.1px;
margin-bottom: 77px;
.textBtnStyle{
height: 44px;
font-size: 20px;
}
}
}
#statuSection{
#statusDesc{
padding-left: 77px;
font-size: 20px;
}
#lolStatus{
font-size: 33px;
height: 77px;
width: 50%;
border-radius: 33px 0 0 33px;
}
.textBtnStyle{
font-size: 22px;
margin-right: 33px;
padding-left: 16.1px;
}
}
#extraContent{
height: 90vh;
flex-direction: row;
overflow: hidden;
#aboutSection{
font-size: 22px;
}
#eventSection{
#eventContent{
li{
.iconBtnStyle{
width: 44px;
height: 44px;
border-radius: 22px;
right: 1.61%;
}
.icon{
height: 22px;
}
}
details{
summary{
.title{
font-size: 22px;
h4{
font-size: 27px;
}
}
.resume{
font-size: 16.1px;
}
}
.description{
font-size: 16.1px;
}
}
}
}
}
}
}
style/typo.css
-33
View File
@@ -1,33 +0,0 @@
@font-face {
font-family: 'karrik';
src: url('typo/Karrik-Italic.woff2') format('woff2');
font-style: italic;
}
@font-face {
font-family: 'karrik';
src: url('typo/Karrik-Regular.woff2') format('woff2');
font-style: normal;
}
@font-face {
font-family: 'velvelyne';
src: url('typo/Velvelyne-Book.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: 'avara';
src: url('typo/Avara-Black.woff2') format('woff2');
}
@font-face {
font-family: 'pressStart';
src: url('typo/PressStart2P-Regular.ttf');
}
@font-face {
font-family: 'velvelyne';
src:url('typo/Velvelyne-Bold.ttf') format('truetype');
font-weight: bold;
}
vite.config.js
+18
View File
@@ -0,0 +1,18 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import svgLoader from 'vite-svg-loader'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), svgLoader()],
server: {
host: '0.0.0.0',
port: 8080
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})