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

Compare commits

base: vgaNAR6ta/LOLv333:b7a7583ad0d0e26933221b324765dafbaff345fd
vgaNAR6ta/LOLv333:REWORK vgaNAR6ta/LOLv333:vgaNAR6ta
..
compare: vgaNAR6ta/LOLv333:REWORK
vgaNAR6ta/LOLv333:REWORK vgaNAR6ta/LOLv333:vgaNAR6ta
42 Commits
b7a7583ad0 .. REWORK
Author SHA1 Message Date
epickiwi 376fb96df9 Warning dan le readme 2026-09-02 10:40:31 +02:00
vgaNAR6ta dda83b7d4d Modification du texte, du style et dequeerisation 2026-09-02 00:51:16 +02:00
vgaNAR6ta 24334511f3 btn désactivé et ajustement tex 2026-08-24 22:20:39 +02:00
vgaNAR6ta 7dc68ad0e5 accessibilité et open graph 2026-08-24 21:22:29 +02:00
vgaNAR6ta c7a07c3b7c edit: ajout du spaceapi 2026-08-24 03:29:49 +02:00
vgaNAR6ta 00b4c3e9bd lien matrix et reduced motion dans les index ouvert et fermé 2026-08-20 19:27:38 +02:00
vgaNAR6ta 0bd2747852 chemins absolu js 2026-08-20 18:35:30 +02:00
vgaNAR6ta 953281f3d2 chemin absolus & probleme flex-shrink 2026-08-20 18:33:51 +02:00
vgaNAR6ta 415fb46c99 reponsive bug fix 2026-08-19 20:33:37 +02:00
vgaNAR6ta cd766e3969 edit: random bug fix 2026-08-16 22:45:21 +02:00
vgaNAR6ta 2ed49a5fe1 add : fenetre adhesion sans contenu juste interactivité 2026-08-12 21:49:33 +02:00
vgaNAR6ta f435cb36b8 ménage et affiche permanence 2026-08-06 01:22:12 +02:00
vgaNAR6ta 407eeef09e edit: event mieux cadrés 2026-08-05 00:59:39 +02:00
vgaNAR6ta 198a0031f1 ménage 2026-08-05 00:41:31 +02:00
vgaNAR6ta c223ab281c edit: reduced motion mode 2026-08-04 23:05:28 +02:00
vgaNAR6ta db59f2ae48 edit: pb de scroll et responsive msg bienvenue 2026-08-04 16:27:07 +02:00
vgaNAR6ta e75f0443df todo 2026-08-04 16:16:49 +02:00
vgaNAR6ta af0b014581 add: message de bienvenue !!! 2026-08-04 05:55:01 +02:00
vgaNAR6ta 906c3a3ae2 section évènement v2 article avec lien vers affiche qui devient details avec import de l'affiche avec js 2026-08-03 02:39:52 +02:00
vgaNAR6ta e6c2fbf4d3 todo cochée 2026-08-02 20:56:04 +02:00
vgaNAR6ta c7c07beb76 Ajustement shader ouverture 2026-08-02 20:54:48 +02:00
epickiwi dc2f0013b0 Ajout du shader d'ouverture sur la page d'accueil 2026-08-02 15:31:56 +02:00
epickiwi 36d9ac4230 Ajout de la vidéo 2026-08-02 15:31:56 +02:00
epickiwi 3e7c9475e5 Première version GPU des effets de fond 2026-08-02 15:31:55 +02:00
epickiwi 9f67c28bc0 Ajout du script du lien symbolique 2026-08-02 15:31:55 +02:00
epickiwi 0170db486c Centrage du plan 2026-08-02 15:31:53 +02:00
epickiwi 94907c178e Ajout d'instructions de dev 2026-08-02 15:31:11 +02:00
vgaNAR6ta e95c848296 edit: html nouvelle section event sans js 2026-08-02 14:08:20 +02:00
vgaNAR6ta a9dabeb5eb edit: todo list 2026-08-01 21:48:59 +02:00
vgaNAR6ta 32a14714ec edit: animation se modifie avec le statut d'ouverture + bug css import dans main.css 2026-07-31 06:23:50 +02:00
vgaNAR6ta 384e8494e7 edit: réglages un peu mieux, problème cadrage vidéo sur tel 2026-07-30 21:31:35 +02:00
vgaNAR6ta 81f39a62a2 edit: animation avec js possible mtn, à régler mieux pour plus de précision 2026-07-30 21:24:37 +02:00
vgaNAR6ta e50b0819c7 edit: la fenetre évènement bouge sur pc ^^ + ajustement responsive 2026-07-30 20:31:19 +02:00
vgaNAR6ta 27f4c25b10 edit: tout prêt niveau front sans contenu ??? (à verifier) + orga js 2026-07-27 23:41:50 +02:00
vgaNAR6ta 6d95e9d80c edit: un peu de rangement, ajout bouton plus évènement, ok en version dégradée, problème itération (ne garde pas en mémoire les poster des évènements, null au 2e tour) et style qui ne change pas dans js 2026-07-27 22:00:13 +02:00
vgaNAR6ta ad50dd36cb edit: ajout du readme pour se souvenir des trucs à faire 2026-07-26 22:06:25 +02:00
vgaNAR6ta 79f51146c1 edit: création des pages statut, sans interactivité pcq je comprends pas comment faire ^^ 2026-07-26 20:54:12 +02:00
vgaNAR6ta 13b3b06d11 edit: version html css propre pour version dégradé sans js + responsive pour écrans larges 2026-07-26 19:55:23 +02:00
vgaNAR6ta 4e82328ff9 edit: évènements en version dégradée ? à voir + pb import js 2026-07-26 06:36:21 +02:00
vgaNAR6ta b7b3497a0b edit: version tel sans event + modif à faire + organisation des fichiers + css ouverture du local 2026-07-25 20:59:15 +02:00
vgaNAR6ta e6ae40dc51 edit: html tout propre et début css 2026-07-23 19:14:23 +02:00
vgaNAR6ta 1d622924fb init: version basique sans js et sans menu sur tel + division en 2 fichier html pour lolOpener 2026-07-23 02:57:36 +02:00
86 changed files with 2850 additions and 3590 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+1 -24
View File
@@ -1,24 +1 @@
# 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?
status/index.html
.vscode/extensions.json
Vendored
-3
View File
@@ -1,3 +0,0 @@
{
"recommendations": ["Vue.volar"]
}
README.md
-18
View File
@@ -1,18 +0,0 @@
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

After

Width:  |  Height:  |  Size: 4.0 MiB

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

After

Width:  |  Height:  |  Size: 4.3 MiB

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

After

Width:  |  Height:  |  Size: 4.2 MiB

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

src/assets/favicon_open.svg → 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

src/assets/fleche.svg → 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

src/assets/icons/about.svg → 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

src/assets/icons/back.svg → 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

src/assets/icons/close.svg → 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

src/assets/icons/contact.svg → 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

src/assets/icons/file.svg → 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

src/assets/icons/folder.svg → 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

src/assets/icons/info.svg → 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

src/assets/icons/link.svg → 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/msg.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

src/assets/icons/next.svg → 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/pause.svg → assets/icons/pause.svg
View File
File renamed without changes.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 228 B

After

Width:  |  Height:  |  Size: 228 B

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

Before

Width:  |  Height:  |  Size: 219 B

After

Width:  |  Height:  |  Size: 219 B

assets/icons/player.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 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

After

Width:  |  Height:  |  Size: 626 B

src/assets/icons/prev.svg → 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

src/assets/icons/reload.svg → 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

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

Before

Width:  |  Height:  |  Size: 337 B

After

Width:  |  Height:  |  Size: 337 B

src/assets/logo/logo-contour.svg → 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

src/assets/logo/logo-contreforme.svg → 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

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

After

Width:  |  Height:  |  Size: 5.0 KiB

src/assets/logo_hackerspaces_monde.png → 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

src/assets/plan.svg → 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

background.webm → assets/video/background.webm
View File
File renamed without changes.
assets/video/closed.webm
BIN
View File
Binary file not shown.
assets/video/open.webm
BIN
View File
Binary file not shown.
index.html
+224 -121
View File
@@ -1,125 +1,228 @@
<!doctype html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="" />
<title>L(. O.)L</title>
</head>
<body>
<!--HORS VUE-->
<canvas id="canvas"></canvas>
<video autoplay muted loop src="./background.webm" id="background"></video>
<div id="mainContainer">
<div class="uiStyle" id="topBar">
<div class="left">
<img src="./src/assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
<p>L<strong>⚧</strong>L</p>
</div>
<div class="right">
<a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
<a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
<a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
<a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
</div>
<button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
<svg class="icon" viewBox="0 0 53.73 53.59">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
</button>
</div>
<div id="mainInfo">
<div class="uiStyle" id="title">
<p>
Hackerspace queer
</p>
<p id="desc">
Lieu de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</p>
</div>
<div id="address">
<p>
7 place Chazette
<br>
69001 Lyon
<br> <br>
45° 46' 23.698" N
<br>
4° 50' 14.052" E
</p>
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
<img src="./src/assets/logo_hackerspaces_monde.png">
</a>
</div>
<div class="uiStyle" id="openingHours">
<p>
Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
&ensp; &rarr; nocturne : &ensp;<br>
Ven. &emsp; <strong>21h &rarr; 5h</strong>
</p>
</div>
<div id="planContainer">
<img src="./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 :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="style/default.css">
<link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/main.css">
<!--REPONSIVE-->
<link rel="stylesheet" href="style/responsive.css">
<!--REDUCED MOTION-->
<link rel="stylesheet" href="style/reduced.css">
<title>Laboratoire Ouvert Lyonnais</title>
<!--OPEN GRAPHS-->
<meta property="og:title" content="Laboratoire Ouvert Lyonnais">
<meta property="og:description" content="Hackerspace Queer">
<meta property="og:url" content="https://labolyon.fr/">
<meta property="og:image" content="assets/logo/logo_picto.svg">
<meta property="og:type" content="website">
<link rel="icon" type="image/svg" href="assets/favicon.svg">
</head>
<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>
<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>
<!--VUE ROOT APP-->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<section id="statuSection" class="solidBox">
<div id="statusDesc">
<h3>
Le LOL peut ouvrir en dehors des horaires habituels.
En fonction de nos envies et disponibilités.
</h3>
<p>
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
</p>
</div>
<a href="status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
</section>
<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>
<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>
<section id="eventSection" class="transparentBox">
<h3>Événements <small>à venir</small></h3>
<article class="solidBox">
<h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p>
<a href="/affiches/mardis/" class="iconBtnStyle" target="_blank" aria-label="Plus d'infos sur cet évènement">
<svg viewBox="0 0 53.73 53.59" class="icon" 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>
</a>
</article>
</section>
</aside>
<noscript>
<video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop aria-hidden="true"></video>
</noscript>
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop aria-hidden="true"></video>
<canvas class="cute-texture" aria-hidden="true"></canvas>
</main>
<!-- SCRIPT PRINCIPAL -->
<script type="module" src="js/main.js"></script>
</body>
</html>
js/cuteTexture.js
+348
View File
@@ -0,0 +1,348 @@
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
@@ -0,0 +1,140 @@
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
@@ -0,0 +1,44 @@
export function makeItFloat(target){
let startTarget = target.querySelector('.title');
console.log('selected target :', startTarget);
let startX, startY;
let clicked = false;
let selectedPointer;
startTarget.addEventListener('pointerdown', (event) => {
selectedPointer = event.pointerId;
startX = event.pageX;
startY = event.pageY;
console.log('clicking...')
})
document.addEventListener('pointermove', (event) => {
if(event.pointerId === selectedPointer){
event.preventDefault();
document.querySelector('html').style.overflow = 'hidden';
console.log('moving...')
let currentX = event.pageX;
let currentY = event.pageY;
let moveX = target.offsetLeft + currentX - startX;
target.style.left = moveX + 'px';
let moveY = target.offsetTop + currentY - startY;
target.style.top = moveY + 'px';
startX = currentX;
startY = currentY;
}
});
document.addEventListener('pointerup', () => {
console.log('STOP !')
selectedPointer = null;
document.querySelector('html').style.overflow = '';
})
document.addEventListener('pointercancel', () => {
console.log('STOP !')
selectedPointer = null;
document.querySelector('html').style.overflow = '';
})
}
js/index.js
+22
View File
@@ -0,0 +1,22 @@
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
@@ -0,0 +1,21 @@
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
@@ -0,0 +1,32 @@
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
@@ -1,20 +0,0 @@
{
"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"
}
}
readMe.MD
+1
View File
@@ -0,0 +1 @@
> **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
@@ -0,0 +1,34 @@
{
"api_compatibility": [
"14",
"15"
],
"space": "Laboratoire Ouvert Lyonnais",
"logo": "https://labolyon.fr/images/logo_picto.svg",
"url": "https://labolyon.fr/",
"location": {
"address": "7 Place Louis Chazette 69001 Lyon, France",
"lon": 4.8372366,
"lat": 45.7732494,
"country_code": "FR",
"timezone": "Europe/Paris"
},
"contact": {
"irc": "ircs://irc.geeknode.org:6697/labolyon",
"ml": "discussions@listes.labolyon.fr",
"mastodon": "@labolyon@nerdculture.de",
"matrix": "#lol-space:chat.labolyon.fr"
},
"state": {
"icon": {
"closed": "https://labolyon.fr/status/status.ferm%C3%A9.png",
"open": "https://labolyon.fr/status/status.ouvert.png"
},
"open": false,
"lastchange": 1788302721
},
"projects": [
"https://git.labolyon.fr/",
"https://wiki.labolyon.fr/"
]
}
src/App.vue
-102
View File
@@ -1,102 +0,0 @@
<script setup>
import PlayerIcon from './assets/icons/play.svg'
import LinkIcon from './assets/icons/folder.svg'
</script>
<template>
<Teleport to="#topBar .left" defer>
<lolStatusDiv></lolStatusDiv>
</Teleport>
<Teleport to="#lolOpener.uiStyle" defer>
<lolStatusDiv></lolStatusDiv>
</Teleport>
<eventDiv></eventDiv>
<eventPannel
v-show="pannelStatus.activePannels.includes('event')"
@focus="focusPannel('event')"
@close="closePannel('event')"
:class="{zBase: pannelStatus.focus !== 'event', zFocus: pannelStatus.focus === 'event'}"
></eventPannel>
<playerPannel
v-show="pannelStatus.activePannels.includes('player')"
@focus="focusPannel('player')"
@close="closePannel('player')"
:class="{zBase: pannelStatus.focus !== 'player', zFocus: pannelStatus.focus === 'player'}"
></playerPannel>
<linkPannel
v-show="pannelStatus.activePannels.includes('link')"
@focus="focusPannel('link')"
@close="closePannel('link')"
:class="{zBase: pannelStatus.focus !== 'link', zFocus: pannelStatus.focus === 'link'}"
></linkPannel>
<Teleport to="#openingHours" defer>
<div id="btnContainer">
<button type="button" name="link" class="iconBtnStyle" @click="openPannel('link')">
<LinkIcon name="close" class="icon"/>
</button>
<button type="button" name="player" class="iconBtnStyle" @click="openPannel('player')">
<PlayerIcon name="close" class="icon"/>
</button>
</div>
</Teleport>
</template>
<style scoped>
#btnContainer{
position: absolute;
left: 7.77px;
display: flex;
flex-direction: column;
gap: 7.77px;
margin-top: -88px;
.iconBtnStyle{
width: 33px;
height: 33px;
border-radius: 16.1px;
}
}
</style>
<script>
import { dataStorage } from './dataExchange.js'
import { cuteAndCyber } from './artAndTexture.js'
export default {
name : 'App',
computed: {
pannelStatus(){
return dataStorage
}
},
methods: {
focusPannel(str){
if(this.pannelStatus.activePannels.includes(str)){
this.pannelStatus.focus = str
}
},
closePannel(str){
console.log('closing...')
const index = this.pannelStatus.activePannels.indexOf(str)
if( index !== -1){
this.pannelStatus.activePannels.splice(index, 1)
if(this.pannelStatus.focus === str){
this.pannelStatus.focus = null
}
}
},
openPannel(str){
if(!(this.pannelStatus.activePannels.includes(str))){
this.pannelStatus.activePannels.push(str)
} else {
this.focusPannel(str)
}
}
},
mounted(){
cuteAndCyber();
console.log("Vue root app is fully loaded!");
}
};
</script>
src/artAndTexture.js
-147
View File
@@ -1,147 +0,0 @@
import { lolState } from './lolStatus.js'
const arr = []
for (let i = 0; i < 256; i++){
arr.push(i)
}
function createPermTable(){
let data = [...arr]
//console.log('base :', arr)
for (let i = data.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[data[i], data[j]] = [data[j], data[i]];
}
//console.log('result :', permutationTable)
return data
}
const perm = createPermTable();
const p = [...perm, ...perm];
const F2 = 0.5 * (Math.sqrt(3) - 1); // Skew factor for 2D
const G2 = (3 - Math.sqrt(3)) / 6; // Unskew factor for 2D
const scale = 0.7
const target = document.querySelector('#canvas');
const ctx = target.getContext('2d');
// 12 gradient vectors for 2D Simplex Noise
const grad3 = [
[1, 1], [-1, 1], [1, -1], [-1, -1],
[1, 0], [-1, 0], [0, 1], [0, -1],
[1, 2], [-1, 2], [2, 1], [-2, 1]
];
function simplex(x, y) {
// Step 1: Skew input coordinates to simplex grid
const s = (x + y) * F2; // Skew factor
const i = Math.floor(x + s); // Simplex grid i
const j = Math.floor(y + s); // Simplex grid j
// Step 2: Unskew to get (x0, y0) in Cartesian space (distance to (i,j))
const t = (i + j) * G2;
const x0 = x - (i - t); // Unskewed x in [0,1)
const y0 = y - (j - t); // Unskewed y in [0,1)
// Step 3: Determine which simplex (triangle) the point is in
let i1, j1; // Offsets for the other two simplex vertices
if (x0 > y0) {
i1 = 1; j1 = 0; // Lower triangle (x0 > y0)
} else {
i1 = 0; j1 = 1; // Upper triangle (x0 ≤ y0)
}
// Step 4: Coordinates of the other two simplex vertices
const x1 = x0 - i1 + G2; // Distance to (i+i1, j+j1)
const y1 = y0 - j1 + G2;
const x2 = x0 - 1 + 2 * G2; // Distance to (i+1, j+1)
const y2 = y0 - 1 + 2 * G2;
// Step 5: Hash indices for the 3 simplex vertices
const ii = i & 255;
const jj = j & 255;
const gi0 = p[ii + p[jj]] % 12; // (i,j) gradient index
const gi1 = p[ii + i1 + p[jj + j1]] % 12; // (i+i1,j+j1) gradient index
const gi2 = p[ii + 1 + p[jj + 1]] % 12; // (i+1,j+1) gradient index
// Step 6: Compute contributions from each vertex
let t0 = 0.5 - x0 * x0 - y0 * y0; // Falloff (t^4 fade)
const n0 = t0 < 0 ? 0 : Math.pow(t0, 4) * (grad3[gi0][0] * x0 + grad3[gi0][1] * y0);
let t1 = 0.5 - x1 * x1 - y1 * y1;
const n1 = t1 < 0 ? 0 : Math.pow(t1, 4) * (grad3[gi1][0] * x1 + grad3[gi1][1] * y1);
let t2 = 0.5 - x2 * x2 - y2 * y2;
const n2 = t2 < 0 ? 0 : Math.pow(t2, 4) * (grad3[gi2][0] * x2 + grad3[gi2][1] * y2);
// Step 7: Sum contributions and normalize (2D Simplex ranges ~[-1, 1])
return 70 * (n0 + n1 + n2); // 70 scales to ~[-1, 1]
}
function analogLikeNoise(){
let tH = target.height;
let tW = target.width;
//console.log('window dimensions :', tH, tW)
const img = ctx.createImageData(tW, tH);
let offset = 0;
let index = 0;
let brightness = 0;
for(let x = 0; x<tW; x++){
const sx = x * scale + offset
for(let y = 0; y<tH; y++){
let lum = Math.random()*200
//img.data[index++] = lum;
index++
img.data[index++] = lum;
img.data[index++] = lum;
img.data[index++] = 255;
}
}
ctx.putImageData(img, 0, 0);
offset ++;
if(offset>1024){
offset = 0;
}
}
let time = 0
function scanlines(){
time += 0.05;
let tH = target.height;
let tW = target.width;
//console.log('window dimensions :', tH, tW)
const img = ctx.createImageData(tW, tH);
let index = 0;
for(let y = 0; y<tH; y++){
for(let x = 0; x<tW; x++){
let lum = (Math.sin(y*2 - time *2) * 50) +128;
//img.data[index++] = lum;
index++;
img.data[index++] = lum + Math.random()*16;
//img.data[index++] = lum + Math.random()*32;
index++
img.data[index++] = 255;
}
}
ctx.putImageData(img, 0, 0);
}
export function cuteAndCyber(){
if(!(lolState.isOpen)){
document.querySelector('#background').style.visibility = 'hidden';
analogLikeNoise();
requestAnimationFrame(cuteAndCyber);
}else{
scanlines();
document.querySelector('#background').style.visibility = 'visible';
requestAnimationFrame(cuteAndCyber);
}
}
src/components/EventContent.vue
-142
View File
@@ -1,142 +0,0 @@
<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: 54vh;
}
@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;
if (dataStorage.activePannels.includes('event')){
dataStorage.focus = 'event'
} else {
dataStorage.activePannels.push('event')
dataStorage.focus = 'event'
}
}
},
computed: {
displayedEvents(){
return lolEventsList
}
},
mounted(){
console.log("Event list is loaded!");
}
};
</script>
src/components/EventInfoPannel.vue
-111
View File
@@ -1,111 +0,0 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="eventPannel" class="windowStyle" ref="eventPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<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: 161px;
left: 77px;
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: 333px;
}
}
</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(){
this.$emit('close')
}
},
mounted(){
this.target = this.$refs.eventPannel;
console.log("Event info pannel is loaded!");
}
};
</script>
src/components/LinkPannel.vue
-137
View File
@@ -1,137 +0,0 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="linkPannel" class="windowStyle" ref="linkPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
Liens utiles
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent" id="linkContent">
<p id="info">Par ici on poste pleins de truc qu'on trouve utiles, n'hésite pas à fouiller </p>
<a id="linkItem" v-for="item of displayedLinks" :href="item.href" class="textBtnStyle">
<p><strong>{{item.title}}</strong><br>{{item.desc}}</p>
</a>
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#linkPannel{
position: fixed;
width: 222px;
height: 333px;
top: 222px;
left: 117px;
}
#linkContent{
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
p#info{
padding-right: 7.77px;
padding-left: 7.77px;
font-family: 'velvelyne';
font-weight: normal;
font-size: 13.12px;
color: var(--main-color);
border-width: 0 0 1.61px 0;
border-style: solid;
border-color: var(--main-color);
padding-bottom: 7.77px;
margin-bottom: 0;
}
}
#linkItem{
width: 100%;
padding-right: 13.12px;
padding-left: 13.12px;
font-family: 'velvelyne';
font-size: 13.12px;
border-radius: 0;
border-width: 0 0 1.61px 0;
text-align: left;
justify-content: flex-start;
box-sizing: border-box;
strong{
text-transform: uppercase;
font-family: 'karrik';
font-weight: normal;
font-size: 16.1px;
}
p{
border-width: 0;
padding-bottom: 0;
margin-bottom: 7.77px;;
}
}
/*================ PC LARGE*/
@media(min-width:650px){
#linkPannel{
left: 477px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
import { lolLinkList } from '../lolLinks.js'
export default {
name : 'LinkPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
computed: {
displayedLinks(){
return lolLinkList
}
},
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.linkPannel;
console.log("Link pannel is loaded!");
}
};
</script>
src/components/PlayerPannel.vue
-198
View File
@@ -1,198 +0,0 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
import PlayIcon from '../assets/icons/play.svg'
import PauseIcon from '../assets/icons/pause.svg'
import NextIcon from '../assets/icons/next.svg'
import PrevIcon from '../assets/icons/prev.svg'
import { loadAudioData } from '@/data/audioData.js'
</script>
<template>
<div id="playerPannel" class="windowStyle" ref="playerPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
<div class="windowContent" id="playerContent">
<div id="credits">
<marquee direction="left" behavior="scroll" scrollamount="7" width="100%">{{selectedSong.track}} — {{selectedSong.artist}}</marquee>
</div>
<div id="controls">
<button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
<PrevIcon name="prev" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
<component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
<NextIcon name="next" class="icon"/>
</button>
</div>
<audio ref="selectedAudio" @ended="nextTrack">
<source :src="audioFile" type="audio/mpeg">
</audio>
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#playerPannel{
position: fixed;
width: 222px;
height: auto;
top: 222px;
left: 117px;
box-sizing: border-box;
cursor: move;
.closeBtn{
position: absolute;
align-self: flex-end;
margin-right: 3.33px;
margin-top: 3.33px;
}
}
#playerContent{
margin-top: 40px;
#credits{
width: 100%;
height: 44px;
background-color: var(--main-color);
padding-left: 7.77px;
padding-right: 7.77px;
padding-top: 13.12px;
margin-bottom: 13.12px;
marquee{
color: var(--back-color);
font-family: 'pressStart2P';
font-size: 22px;
font-weight: normal;
}
}
#controls{
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: 13.12px;
.iconBtnStyle{
width: 33px;
height: 33px;
}
}
}
/*================ PC LARGE*/
@media(min-width:650px){
#playerPannel{
left: 477px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'PlayerPannel',
components:{
Moveable
},
data(){
return{
target: null,
audioTarget: null,
audioData: [],
selectedSong:{
track: "",
artist: "",
src: ""
},
audioFile:"",
audioCredits:"",
trackCount: 0,
isPlaying: false
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
},
loadAudio(){
//console.log(this.target);
this.audioTarget.pause();
this.selectedSong = this.audioData[this.trackCount];
this.audioFile = this.selectedSong.src;
this.audioCredits = ' ' + this.selectedSong.track +' - '+ this.selectedSong.artist;
this.audioTarget.volume = 1;
this.audioTarget.load();
if(this.isPlaying){
this.audioTarget.play();
}
},
toggleAudio(){
if(this.isPlaying){
this.audioTarget.pause();
}else{
this.audioTarget.play();
}
this.isPlaying = !this.isPlaying;
},
prevTrack(){
this.trackCount -= 1;
if (this.trackCount<0){
this.trackCount = this.audioData.length - 1;
}
//console.log('prev:', this.trackCount);
this.loadAudio();
},
nextTrack(){
this.trackCount += 1;
if (this.trackCount>=this.audioData.length){
this.trackCount = 0;
}
//console.log('next:', this.trackCount);
this.loadAudio();
}
},
async mounted(){
this.target = this.$refs.playerPannel;
this.audioData = await loadAudioData();
this.audioTarget = this.$refs.selectedAudio;
//console.log('AUDIO/', this.audioData);
this.loadAudio();
console.log("Player pannel is loaded!");
}
};
</script>
src/components/lolStatus.vue
-75
View File
@@ -1,75 +0,0 @@
<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/data/audioData.js
-25
View File
@@ -1,25 +0,0 @@
import audio01 from './juste-tek.mp3'
import audio02 from './sinking-into-.mp3'
import audio03 from './technoloooogia.mp3'
export async function loadAudioData() {
let audioFiles = [
{
track: 'the sink',
artist: '333',
src: audio02
},
{
track: 'just tek',
artist: '333',
src: audio01
},
{
track: 'Technolooooogia',
artist: '333',
src: audio03
}
]
//console.log(audioFiles);
return audioFiles
}
src/data/juste-tek.mp3
BIN
View File
Binary file not shown.
src/data/sinking-into-.mp3
BIN
View File
Binary file not shown.
src/data/technoloooogia.mp3
BIN
View File
Binary file not shown.
src/dataExchange.js
-13
View File
@@ -1,13 +0,0 @@
import { reactive } from 'vue'
export const dataStorage = reactive({
selectedEvent: {
title: '',
date: '',
time: '',
subtitle: '',
desc: ''
},
activePannels: [],
focus: ''
})
src/lolEvents.js
-34
View File
@@ -1,34 +0,0 @@
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/lolLinks.js
-31
View File
@@ -1,31 +0,0 @@
import { reactive } from 'vue'
export const lolLinkList = reactive(
[
{
title: 'test',
desc: 'blah blah description du truc test',
href: '#'
},
{
title: 'test 0002',
desc: 'blah blah description du truc test',
href: '#'
},
{
title: 'test 333',
desc: 'encore une autre description du truc test',
href: '#'
},
{
title: 'test 0002',
desc: 'blah blah description du truc test',
href: '#'
},
{
title: 'test 333',
desc: 'encore une autre description du truc test',
href: '#'
}
]
)
src/lolStatus.js
-7
View File
@@ -1,7 +0,0 @@
import { reactive } from 'vue'
export const lolState = reactive(
{
isOpen: false
}
)
src/main.js
-37
View File
@@ -1,37 +0,0 @@
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'
import PlayerPannel from './components/PlayerPannel.vue'
import LinkPannel from './components/LinkPannel.vue'
// création app racine
const app = createApp(App);
//Composants
app.component('lolStatusDiv', lolStatus);
app.component('eventDiv', EventContent);
app.component('eventPannel', EventInfoPannel);
app.component('playerPannel', PlayerPannel);
app.component('linkPannel', LinkPannel);
//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
-727
View File
@@ -1,727 +0,0 @@
: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;
}
#canvas{
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: screen;
z-index: -2;
opacity: .25;
}
#background{
position: fixed;
right: 0;
bottom: 0;
width: auto;
height: 200%;
overflow: hidden;
pointer-events: none;
z-index: -1;
opacity: 1;
visibility: hidden;
filter: contrast(200%) saturate(333%) grayscale();
transform: rotate(180deg);
mix-blend-mode: difference;
}
#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);
font-weight: bold;
}
.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: 333;
}
.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: 333;
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: 3.33px;
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;
mix-blend-mode: exclusion;
#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: 13.12px;
padding-right: 13.12px;
padding-bottom: 13.12px;
overflow-y: scroll;
@media(min-width: 700px){
height: 60vh;
}
@media(min-width: 1300px){
height: 50vh;
padding-left: 33px;
}
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
@@ -0,0 +1,88 @@
: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
@@ -0,0 +1,59 @@
<!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
@@ -0,0 +1,59 @@
<!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
@@ -0,0 +1,118 @@
: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
Executable
+24
View File
@@ -0,0 +1,24 @@
#!/bin/bash
if [ "$#" = "0" ]; then
echo "Usage set-status.sh [new-status]"
echo ""
echo "[new-status] can be \"opened\" or \"closed\""
echo ""
exit 1
fi
#SPACE_JSON=/var/www/html/spaceapi/space.json
SPACE_JSON="$(dirname $0)/../spaceapi/space.json"
if [ "$1" = "opened" ]; then
ln -sf "index.ouvert.html" "$(dirname $0)/index.html"
jq "setpath([\"state\", \"open\"]; true) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
mv -f $SPACE_JSON.new $SPACE_JSON
fi
if [ "$1" = "closed" ]; then
ln -sf "index.fermé.html" "$(dirname $0)/index.html"
jq "setpath([\"state\", \"open\"]; false) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
mv -f $SPACE_JSON.new $SPACE_JSON
fi
style/animation.css
+37
View File
@@ -0,0 +1,37 @@
@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
@@ -0,0 +1,188 @@
.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
@@ -0,0 +1,39 @@
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
@@ -0,0 +1,619 @@
/*================ 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
@@ -0,0 +1,12 @@
@media (prefers-reduced-motion: reduce){
noscript > video,
.cute-texture,
.cute-texture-video{
visibility: collapse !important;
display: none !important;
}
main aside #openMsg{
animation: none !important;
}
}
style/responsive.css
+317
View File
@@ -0,0 +1,317 @@
/*===========================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
@@ -0,0 +1,33 @@
@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;
}
public/typo/Avara-Black.woff2 → style/typo/Avara-Black.woff2
View File
File renamed without changes.
public/typo/Karrik-Italic.woff2 → style/typo/Karrik-Italic.woff2
View File
File renamed without changes.
public/typo/Karrik-Regular.woff2 → style/typo/Karrik-Regular.woff2
View File
File renamed without changes.
public/typo/Lineal-Heavy.ttf → style/typo/Lineal-Heavy.ttf
View File
File renamed without changes.
public/typo/PressStart2P-Regular.ttf → style/typo/PressStart2P-Regular.ttf
View File
File renamed without changes.
public/typo/Velvelyne-Bold.ttf → style/typo/Velvelyne-Bold.ttf
View File
File renamed without changes.
public/typo/Velvelyne-Book.ttf → style/typo/Velvelyne-Book.ttf
View File
File renamed without changes.
public/typo/Velvelyne-Light.ttf → style/typo/Velvelyne-Light.ttf
View File
File renamed without changes.
vite.config.js
-18
View File
@@ -1,18 +0,0 @@
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')
}
}
})