diff --git a/.gitignore b/.gitignore index 41f3019..32ff6e5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -*.blend? \ No newline at end of file +status/index.html \ No newline at end of file diff --git a/README.MD b/README.MD index 5aa5884..c33b0f9 100644 --- a/README.MD +++ b/README.MD @@ -1,9 +1,50 @@ -# Laboratoire Ouvert Lyonnais +# Le site internet du LOL: labolyon.fr -Vous retrouverez la version en ligne du site du lol, il n'y a pas de bootstrap sur cette version. -Il a été codé le plus simplement possible. -## TODO +## Démarrer un serveur de developpement -Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date. -Est-ce le git pourrait nous permettre de faire ça ? +``` +python3 -m http.server +``` + +Et ensuite, le site est disponible sur http://localhost:8000/ + +### Tester sur son tel + +Il faut démarrer le serveur avec la commande suivante: + +``` +python3 -m http.server -b 0.0.0.0 +``` + +Ensuite il faut obtenir l'adresse IP de son ordinateur +``` +ip a +``` + +Dans notre cas c'est `10.0.0.165` (voir l'exemple ci-dessous). +``` +1: lo: mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 + link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 + inet 127.0.0.1/8 scope host lo + valid_lft forever preferred_lft forever +2: eth0: mtu 1500 qdisc mq state UP group default qlen 1000 + link/ether c4:9d:ed:15:78:cc brd ff:ff:ff:ff:ff:ff + inet 10.0.0.165/24 brd 10.0.0.255 scope global dynamic noprefixroute mlan0 + valid_lft 5204sec preferred_lft 5204sec +``` + +Sur son tel, on peut alors acceder a http://10.0.0.165:8000/. +Si cela ne fonctionne pas, c'est peut être que le pare feu interdit la connexion depuis un autre ordinateur sur le port 8000. + +## Lien symbolique et ouverture => comment preview pour dev + +aller dans /status puis executer la commande en fonction du statut souhaité + + ./set-status.sh opened + +> statut ouvert + + ./set-status.sh closed + +> statut fermé \ No newline at end of file diff --git a/affiches/mardis/IMG001.jpg b/affiches/mardis/IMG001.jpg new file mode 100644 index 0000000..3b6da28 Binary files /dev/null and b/affiches/mardis/IMG001.jpg differ diff --git a/affiches/mardis/IMG002.jpg b/affiches/mardis/IMG002.jpg new file mode 100644 index 0000000..1c7d17b Binary files /dev/null and b/affiches/mardis/IMG002.jpg differ diff --git a/affiches/mardis/IMG333.jpg b/affiches/mardis/IMG333.jpg new file mode 100644 index 0000000..2ffe553 Binary files /dev/null and b/affiches/mardis/IMG333.jpg differ diff --git a/affiches/mardis/index.html b/affiches/mardis/index.html new file mode 100644 index 0000000..582eb7d --- /dev/null +++ b/affiches/mardis/index.html @@ -0,0 +1,136 @@ + + + + + Permanence du mardi soir + + + + + + +
+
+ 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 + 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 + 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 +
+ +
+

Permanences du LOL

+ +

Venez chiller avec nous, partager un thé ou une bière.

+ +

On échange technique et savoir-faire
sur tous les sujets : logiciel libre, hacking,
couture, bricole et bidouille en tout genre,
mais aussi sur nos projets personnels ou collectifs

+ + +

+ + Tous les mardis
à partir de 17h
+ + +  Tous les samedis
 à partir de 14h + +
+ au local du LOL
  → 7 Place Chazette, 69001 Lyon +

+
+
+ + \ No newline at end of file diff --git a/images/favicon.svg b/assets/favicon.svg similarity index 94% rename from images/favicon.svg rename to assets/favicon.svg index ef2b02f..b396f5f 100644 --- a/images/favicon.svg +++ b/assets/favicon.svg @@ -61,14 +61,14 @@ inkscape:pagecheckerboard="1" inkscape:deskcolor="#d1d1d1" /> + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/assets/fleche.svg b/assets/fleche.svg new file mode 100644 index 0000000..dab8f42 --- /dev/null +++ b/assets/fleche.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/about.svg b/assets/icons/about.svg new file mode 100644 index 0000000..edd3e8d --- /dev/null +++ b/assets/icons/about.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/back.svg b/assets/icons/back.svg new file mode 100644 index 0000000..7ed3714 --- /dev/null +++ b/assets/icons/back.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/close.svg b/assets/icons/close.svg new file mode 100644 index 0000000..3821cc9 --- /dev/null +++ b/assets/icons/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/contact.svg b/assets/icons/contact.svg new file mode 100644 index 0000000..296b560 --- /dev/null +++ b/assets/icons/contact.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/file.svg b/assets/icons/file.svg new file mode 100644 index 0000000..6f8cb9c --- /dev/null +++ b/assets/icons/file.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/folder.svg b/assets/icons/folder.svg new file mode 100644 index 0000000..258f9f5 --- /dev/null +++ b/assets/icons/folder.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/info.svg b/assets/icons/info.svg new file mode 100644 index 0000000..1262b3e --- /dev/null +++ b/assets/icons/info.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/link.svg b/assets/icons/link.svg new file mode 100644 index 0000000..a2ed00b --- /dev/null +++ b/assets/icons/link.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/msg.svg b/assets/icons/msg.svg new file mode 100644 index 0000000..7db9879 --- /dev/null +++ b/assets/icons/msg.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/next.svg b/assets/icons/next.svg new file mode 100644 index 0000000..ba6b56f --- /dev/null +++ b/assets/icons/next.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/pause.svg b/assets/icons/pause.svg new file mode 100644 index 0000000..ec47557 --- /dev/null +++ b/assets/icons/pause.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/play.svg b/assets/icons/play.svg new file mode 100644 index 0000000..bf16538 --- /dev/null +++ b/assets/icons/play.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/player.svg b/assets/icons/player.svg new file mode 100644 index 0000000..23a5063 --- /dev/null +++ b/assets/icons/player.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/prev.svg b/assets/icons/prev.svg new file mode 100644 index 0000000..904d3db --- /dev/null +++ b/assets/icons/prev.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/reload.svg b/assets/icons/reload.svg new file mode 100644 index 0000000..af82d98 --- /dev/null +++ b/assets/icons/reload.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/saved.svg b/assets/icons/saved.svg new file mode 100644 index 0000000..91c547c --- /dev/null +++ b/assets/icons/saved.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/logo/logo-contour.svg b/assets/logo/logo-contour.svg new file mode 100644 index 0000000..291cc0a --- /dev/null +++ b/assets/logo/logo-contour.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/logo/logo-contreforme.svg b/assets/logo/logo-contreforme.svg new file mode 100644 index 0000000..aa92ebd --- /dev/null +++ b/assets/logo/logo-contreforme.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/logo/logo-forme.svg b/assets/logo/logo-forme.svg new file mode 100644 index 0000000..a0000d6 --- /dev/null +++ b/assets/logo/logo-forme.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/logo_picto.svg b/assets/logo/logo_picto.svg similarity index 100% rename from images/logo_picto.svg rename to assets/logo/logo_picto.svg diff --git a/images/logo_hackerspaces_monde.png b/assets/logo_hackerspaces_monde.png similarity index 100% rename from images/logo_hackerspaces_monde.png rename to assets/logo_hackerspaces_monde.png diff --git a/images/plan-d-acces.blend b/assets/plan-d-acces.blend similarity index 100% rename from images/plan-d-acces.blend rename to assets/plan-d-acces.blend diff --git a/assets/plan.svg b/assets/plan.svg new file mode 100644 index 0000000..ebb4cb0 --- /dev/null +++ b/assets/plan.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/videos/background.webm b/assets/video/background.webm similarity index 100% rename from videos/background.webm rename to assets/video/background.webm diff --git a/assets/video/closed.webm b/assets/video/closed.webm new file mode 100644 index 0000000..c2da18b Binary files /dev/null and b/assets/video/closed.webm differ diff --git a/assets/video/open.webm b/assets/video/open.webm new file mode 100644 index 0000000..8008e55 Binary files /dev/null and b/assets/video/open.webm differ diff --git a/assets/webRings/DNNwebring.gif b/assets/webRings/DNNwebring.gif new file mode 100644 index 0000000..2a716d9 Binary files /dev/null and b/assets/webRings/DNNwebring.gif differ diff --git a/assets/webRings/berthe.cc.png b/assets/webRings/berthe.cc.png new file mode 100644 index 0000000..9723f00 Binary files /dev/null and b/assets/webRings/berthe.cc.png differ diff --git a/assets/webRings/murmure-cafe-webring.png b/assets/webRings/murmure-cafe-webring.png new file mode 100644 index 0000000..99583ab Binary files /dev/null and b/assets/webRings/murmure-cafe-webring.png differ diff --git a/css/affiches/Arvo-Bold.ttf b/css/affiches/Arvo-Bold.ttf deleted file mode 100644 index 38341b1..0000000 Binary files a/css/affiches/Arvo-Bold.ttf and /dev/null differ diff --git a/css/affiches/AzeretMono-VariableFont_wght.ttf b/css/affiches/AzeretMono-VariableFont_wght.ttf deleted file mode 100644 index 4e508e8..0000000 Binary files a/css/affiches/AzeretMono-VariableFont_wght.ttf and /dev/null differ diff --git a/css/affiches/PixelifySans-Regular.ttf b/css/affiches/PixelifySans-Regular.ttf deleted file mode 100644 index 37deb9a..0000000 Binary files a/css/affiches/PixelifySans-Regular.ttf and /dev/null differ diff --git a/css/affiches/agrandir.png b/css/affiches/agrandir.png deleted file mode 100644 index acc503b..0000000 Binary files a/css/affiches/agrandir.png and /dev/null differ diff --git a/css/affiches/agrandir.svg b/css/affiches/agrandir.svg deleted file mode 100644 index e0d0f20..0000000 --- a/css/affiches/agrandir.svg +++ /dev/null @@ -1,1825 +0,0 @@ - - - - diff --git a/css/affiches/algorave.css b/css/affiches/algorave.css deleted file mode 100644 index c815471..0000000 --- a/css/affiches/algorave.css +++ /dev/null @@ -1,51 +0,0 @@ -.affiche-algorave { - grid-row: span 2; - padding: 0; - font-family: monospace; - - img { - display: block; - width: 100%; - } - - &:hover .description, - &:active .description { - opacity: 1; - } - - .description { - opacity: 0; - - padding: 10px; - - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: stretch; - - background: rgba(0, 0, 0, 0.9); - - ul { - padding: 0; - list-style-type: none; - text-align: justify; - - flex: 1; - line-height: 2; - } - - ul li { - display: inline - } - - ul li:not(:last-child)::after { - content: ", "; - } - } -} \ No newline at end of file diff --git a/css/affiches/back.png b/css/affiches/back.png deleted file mode 100644 index fa313cc..0000000 Binary files a/css/affiches/back.png and /dev/null differ diff --git a/css/affiches/back.svg b/css/affiches/back.svg deleted file mode 100644 index a3fe245..0000000 --- a/css/affiches/back.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - - diff --git a/css/affiches/fermer.png b/css/affiches/fermer.png deleted file mode 100644 index 3eb0129..0000000 Binary files a/css/affiches/fermer.png and /dev/null differ diff --git a/css/affiches/fermer.svg b/css/affiches/fermer.svg deleted file mode 100644 index c1fc518..0000000 --- a/css/affiches/fermer.svg +++ /dev/null @@ -1,1787 +0,0 @@ - - - - diff --git a/css/affiches/forward.png b/css/affiches/forward.png deleted file mode 100644 index c4be5f8..0000000 Binary files a/css/affiches/forward.png and /dev/null differ diff --git a/css/affiches/forward.svg b/css/affiches/forward.svg deleted file mode 100644 index aa39ffa..0000000 --- a/css/affiches/forward.svg +++ /dev/null @@ -1,1494 +0,0 @@ - - - - diff --git a/css/affiches/home.png b/css/affiches/home.png deleted file mode 100644 index fcaf6b1..0000000 Binary files a/css/affiches/home.png and /dev/null differ diff --git a/css/affiches/home.svg b/css/affiches/home.svg deleted file mode 100644 index 81c131d..0000000 --- a/css/affiches/home.svg +++ /dev/null @@ -1,2519 +0,0 @@ - - - - diff --git a/css/affiches/jdll2024.css b/css/affiches/jdll2024.css deleted file mode 100644 index b013018..0000000 --- a/css/affiches/jdll2024.css +++ /dev/null @@ -1,147 +0,0 @@ -.affiche-jdll2024 { - border-top-color: #fafaf5ff; - border-left-color: #fafaf5ff; - border-bottom-color: #868381ff; - border-right-color: #868381ff; - border-style: solid; - border-width: 4px; - background-color: #d3cfc9ff; - padding: 0; - color: black; - - display: flex; - flex-direction: column; - justify-content: stretch; - align-items: stretch; - padding-bottom: 4px; -} - -.affiche-jdll2024 iframe { - flex: 1; - border-bottom-color: #fafaf5ff; - border-right-color: #fafaf5ff; - border-top-color: #868381ff; - border-left-color: #868381ff; - border-style: solid; - border-width: 2px; -} - -.affiche-jdll2024 button { - border-top-color: #fafaf5ff; - border-left-color: #fafaf5ff; - border-bottom-color: #868381ff; - border-right-color: #868381ff; - border-style: solid; - border-width: 2px; - background-color: #d3cfc9ff; -} - -.affiche-jdll2024 header { - height: 25px; - - display: flex; - justify-content: start; - align-items: center; - flex-direction: row; - - background: linear-gradient(to right, #112160ff, #a6c6f2ff); - padding: 2px 4px; - box-sizing: border-box; - - column-gap: 4px; - - border-bottom: solid 2px #d3cfc9ff; -} - -.affiche-jdll2024 > :not(header) { - margin-left: 4px; - margin-right: 4px; -} - -.affiche-jdll2024 header h1 { - flex: 1; - color: white; - margin: 0; - font-size: 1rem; -} - -.affiche-jdll2024 header > img { - height: 80%; -} - -.affiche-jdll2024 header > button { - height: 100%; - display: block; - padding: 2px; -} - -.affiche-jdll2024 button img { - height: 100%; - display: block; - box-sizing: border-box; -} - -.affiche-jdll2024 nav { - padding: 2px; - - display: flex; - justify-content: start; - align-items: center; - flex-direction: row; - - border-bottom: groove 2px #fafaf5ff; -} - -.affiche-jdll2024 nav:first-of-type { - height: 40px; -} - -.affiche-jdll2024 nav button { - height: 100%; - font-size: 0.6rem; - width: 50px; - - display: flex; - justify-content: space-around; - align-items: center; - flex-direction: column; -} - -.affiche-jdll2024 nav button img { - height: 15px; -} - -.affiche-jdll2024 nav hr { - flex: 1; - border: none; -} - -.affiche-jdll2024 nav > img { - height: 100%; - border-bottom-color: #fafaf5ff; - border-right-color: #fafaf5ff; - border-top-color: #868381ff; - border-left-color: #868381ff; - border-style: solid; - border-width: 1px; -} - -.affiche-jdll2024 nav input { - flex: 1; - border-bottom-color: #fafaf5ff; - border-right-color: #fafaf5ff; - border-top-color: #868381ff; - border-left-color: #868381ff; - border-style: solid; - border-width: 2px; - font-size: 0.7rem; -} - -.affiche-jdll2024 nav label { - font-size: 0.7rem; - margin-right: 1ex; -} - -.affiche-jdll2024 nav:last-of-type { - border-bottom: none; -} \ No newline at end of file diff --git a/css/affiches/perm.css b/css/affiches/perm.css deleted file mode 100644 index 382daef..0000000 --- a/css/affiches/perm.css +++ /dev/null @@ -1,35 +0,0 @@ -@font-face { - font-family: "Arvo"; - src: url("./Arvo-Bold.ttf"); - font-weight: bold; -} - -.affiche-perm { - background: black url("../../images/affiches/perm-bg.jpg"); - background-size: cover; - background-repeat: no-repeat; - - text-align: center; - - padding-left: 25px; - padding-right: 25px; - - font-size: 0.9rem; - line-height: 1.5; -} - -.affiche-perm h1 { - font-size: 1.8em; - margin-top: 50px; - font-weight: normal; - font-family: "Arvo", sans-serif; -} - -.affiche-perm .event-hours { - font-weight: bold; - text-align: center; - margin-top: 25px; - margin-bottom: 25px; - font-size: 1.2em; - font-family: "Arvo"; -} \ No newline at end of file diff --git a/css/affiches/reduire.png b/css/affiches/reduire.png deleted file mode 100644 index 06dde8e..0000000 Binary files a/css/affiches/reduire.png and /dev/null differ diff --git a/css/affiches/reduire.svg b/css/affiches/reduire.svg deleted file mode 100644 index c601f4e..0000000 --- a/css/affiches/reduire.svg +++ /dev/null @@ -1,1825 +0,0 @@ - - - - diff --git a/css/affiches/tux.png b/css/affiches/tux.png deleted file mode 100644 index 889dc3f..0000000 Binary files a/css/affiches/tux.png and /dev/null differ diff --git a/css/affiches/tux.svg b/css/affiches/tux.svg deleted file mode 100644 index 32cb165..0000000 --- a/css/affiches/tux.svg +++ /dev/null @@ -1,2489 +0,0 @@ - - - - diff --git a/css/grid.css b/css/grid.css deleted file mode 100644 index ea73197..0000000 --- a/css/grid.css +++ /dev/null @@ -1,67 +0,0 @@ -/* Computer */ -.grid_1 { width: 6.5%; } -.grid_2 { width: 15%; } -.grid_3 { width: 23.5%; } -.grid_4 { width: 32%; } -.grid_5 { width: 40.5%; } -.grid_6 { width: 49%; } -.grid_7 { width: 57.5%; } -.grid_8 { width: 66%; } -.grid_9 { width: 74.5%; } -.grid_10 { width: 83%; } -.grid_11 { width: 91.5%; } -.grid_12 { width: 100%; } - -.grid_1, -.grid_2, -.grid_3, -.grid_4, -.grid_5, -.grid_6, -.grid_7, -.grid_8, -.grid_9, -.grid_10, -.grid_11, -.grid_12 { - margin: 0 2% 1% 0; - float: left; - display: block; -} - -.alpha{margin-left:0;} -.omega{margin-right:0;} - -.container{ - width: 90%; /*width: 1000px;*/ - max-width: 1000px; - margin: auto; - -} - - - -.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1} - - - - -/* Mobile */ -@media screen and (max-width : 480px) { - -.grid_1, -.grid_2, -.grid_3, -.grid_4, -.grid_5, -.grid_6, -.grid_7, -.grid_8, -.grid_9, -.grid_10, -.grid_11, -.grid_12 { - width:100%; -} - -} \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index ffc91bc..0000000 --- a/css/normalize.css +++ /dev/null @@ -1,351 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - - html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - } - - /* Sections - ========================================================================== */ - - /** - * Remove the margin in all browsers. - */ - - body { - margin: 0; - } - - /** - * Render the `main` element consistently in IE. - */ - - main { - display: block; - } - - /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - - h1 { - font-size: 2em; - margin: 0.67em 0; - } - - /* Grouping content - ========================================================================== */ - - /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - - hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ - } - - /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - - pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ - } - - /* Text-level semantics - ========================================================================== */ - - /** - * Remove the gray background on active links in IE 10. - */ - - a { - background-color: transparent; - } - - /** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - - abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ - } - - /** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - - b, - strong { - font-weight: bolder; - } - - /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - - code, - kbd, - samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ - } - - /** - * Add the correct font size in all browsers. - */ - - small { - font-size: 80%; - } - - /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sub { - bottom: -0.25em; - } - - sup { - top: -0.5em; - } - - /* Embedded content - ========================================================================== */ - - /** - * Remove the border on images inside links in IE 10. - */ - - img { - border-style: none; - } - - /* Forms - ========================================================================== */ - - /** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - - button, - input, - optgroup, - select, - textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ - } - - /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - - button, - input { /* 1 */ - overflow: visible; - } - - /** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - - button, - select { /* 1 */ - text-transform: none; - } - - /** - * Correct the inability to style clickable types in iOS and Safari. - */ - - button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: button; - } - - /** - * Remove the inner border and padding in Firefox. - */ - - button::-moz-focus-inner, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; - } - - /** - * Restore the focus styles unset by the previous rule. - */ - - button:-moz-focusring, - [type="button"]:-moz-focusring, - [type="reset"]:-moz-focusring, - [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; - } - - /** - * Correct the padding in Firefox. - */ - - fieldset { - padding: 0.35em 0.75em 0.625em; - } - - /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - - legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ - } - - /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - - progress { - vertical-align: baseline; - } - - /** - * Remove the default vertical scrollbar in IE 10+. - */ - - textarea { - overflow: auto; - } - - /** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - - [type="checkbox"], - [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - } - - /** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - - [type="number"]::-webkit-inner-spin-button, - [type="number"]::-webkit-outer-spin-button { - height: auto; - } - - /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - - [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ - } - - /** - * Remove the inner padding in Chrome and Safari on macOS. - */ - - [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } - - /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - - ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ - } - - /* Interactive - ========================================================================== */ - - /* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - - details { - display: block; - } - - /* - * Add the correct display in all browsers. - */ - - summary { - display: list-item; - } - - /* Misc - ========================================================================== */ - - /** - * Add the correct display in IE 10+. - */ - - template { - display: none; - } - - /** - * Add the correct display in IE 10. - */ - - [hidden] { - display: none; - } - - diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 093ee08..0000000 --- a/css/style.css +++ /dev/null @@ -1,416 +0,0 @@ -html { - font-family: 'arial', sans-serif; - font-weight: 400; - font-size: 1em; - color: #cfcfcf; - max-width: 100%; - overflow-x: hidden; - background: url("../images/world_network.muted.jpg"); - background-color: black; - background-repeat: no-repeat; - background-size: 100% auto; -} - -body { - width: 100%; - max-width: 1000px; - margin-left: auto; - margin-right: auto; - -} - -/* global items */ - -img { - max-width: 100%; -} - -a:link { - color: yellow; - text-decoration: none; -} - -a:hover, a:focus { - color: white; - text-decoration: underline; -} - -a:visited { - color:yellow; -} - -hr { - border: none; - height: 2em; -} - -/* Header */ - -#main-header { - display: grid; - grid-template-columns: 95px 1fr 400px; - grid-template-rows: min-content; - align-items: center; - - gap: 15px; - - padding: 50px 10px 10px; - position: relative; - margin-bottom: 25px; -} - -#main-header > * { - grid-row: 1; -} - -#main-header h1 { - line-height: 25px; - font-size: 20px; - font-weight: normal; - font-family: monospace; - color: yellow; - - flex: 1; - grid-column: 2; -} - -#main-header nav { - grid-column: 3; -} - -@media screen and (max-width: 600px) { - #main-header { - grid-template-columns: 1fr 1fr; - grid-auto-rows: min-content; - } - - #main-header img { - grid-column: 1; - margin-left: auto; - } - - #main-header h1 { - grid-column: 2; - } - - #main-header #main-nav { - grid-row: 2; - grid-column: 1 / 3; - } -} - -/* main area */ - -#homepage { - display: grid; - grid-template-columns: 1fr 400px; - grid-auto-rows: min-content; - row-gap: 15px; - column-gap: 10px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 15vh; -} - -main #main-info { - grid-column: 2; - grid-row: 1 / 3; -} - -main #events { - grid-column: 1 / 3; - grid-row: 3; - - display: grid; - grid-template-columns: 1fr 1fr; - grid-auto-flow: row; - grid-auto-rows: min-content; - column-gap: 15px; - row-gap: 15px; -} - -main #description { - grid-column: 1; - grid-row: 2; - margin-bottom: 50px; -} - -#homepage .toolbar { - grid-column: 1; - grid-row: 1; - text-align: right; -} - -@media screen and (max-width: 889px){ - #homepage { - grid-template-columns: 1fr; - row-gap: 50px; - } - - main #main-info { - grid-row: 3; - grid-column: 1; - } - - main #events { - grid-column: 1; - grid-row: 5; - grid-template-columns: 1fr; - } - - main #description { - grid-column: 1; - grid-row: 2; - } - - main .toolbar { - grid-column: 1; - grid-row: 1; - } -} - -/* status page */ - -.status-page main { - width: 90%; - max-width: 300px; - margin-left: auto; - margin-right: auto; - margin-top: 15vh; - margin-bottom: 15vh; -} - -/* status block */ - -.status-container { - text-align: left; - display: grid; - grid-template-columns: minmax(min-content, 75px) 1fr; - align-items: center; - column-gap: 5px; - - border: solid 1px currentColor; - background: black; - padding: 15px; -} - -.status-container.no-icon { - grid-template-columns: min-content 1fr; -} - -.status-container > * { - grid-column: span 2; - text-align: center; - font-size: 0.8em; -} - -.status-container > *:first-child:not(img) { - grid-column: 2; - text-align: left; - font-size: inherit; -} - -.status-container.no-icon > *:first-child:not(img) { - text-align: center; -} - -.status-container .status-icon { - grid-column: 1; - grid-row: 1; - align-self: center; -} - -/* Join steps */ - -#join-steps { - padding: 0; - list-style-type: none; - - text-align: left; - - counter-reset: join-step; -} - -#join-steps li { - position: relative; - counter-increment: join-step; - margin-bottom: 1em; -} - -#join-steps li::before { - content: counter(join-step) "."; - font-size: 1.5em; - margin-right: 0.5em; -} - -#join-steps li:nth-child(2)::before { - position: absolute; - bottom: 100px; -} - -/* toolbar */ - -#homepage .toolbar button { - border: none; - background: none; - color: white; - font-size: 1.5em; - cursor: pointer; -} - -#homepage .toolbar button img { - height: 1em; - display: inline-block; -} - -#homepage .toolbar button img[hidden] { - display: none; -} - -/* description */ - -#description { - text-align: left; - line-height: 1.5; - - grid-column: 1; -} - -#description > *:first-child { - margin-top: 0; -} - -dl.definitions > * { - display: inline; - padding: 0; - margin: 0; -} - -dl.definitions > dt:not(:first-child)::before { - content: ""; - display: block; - margin-top: 1em; -} - -dl.definitions > dt { - font-weight: bold; -} - -.hackerspace-logo { - float: right; - width: 100px; -} - -#description marquee { - height:25px; - max-width:400px; - background-color:none; - font-family:arial; - font-size:12pt; - color:#ffffff; -} - -/* side */ - -main > aside { - grid-column: 2; - text-align: center; -} - -#main-info address { - display: inline; -} - -#main-info > * { - margin: 1.33em 0; - font-weight: bold; - color: yellow; -} - -@media screen and (max-width: 889px){ - #main-info { - text-align: center; - } -} - -/* background */ - -.fullscreen-background { - display: block !important; - position: absolute; - left: 0; - top: 0; - height: 100vh; - overflow: hidden; - z-index: -1; - width: 100%; - background: black; -} - -.fullscreen-background img, .fullscreen-background video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.fullscreen-background video { - opacity: 0.3; -} - -.fullscreen-background img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - transition: linear 1s opacity; -} - -.fullscreen-background img[hidden]{ - display: block; - opacity: 0; -} - -.fullscreen-background::after { - content: ""; - width: 100%; - height: 25vh; - position: absolute; - bottom: 0; - left: 0; - background: linear-gradient(to top, black, rgba(0,0,0,0)); -} - -/* nav */ - -#main-nav { - text-align: center; -} - -#main-nav > *:not(:last-child)::after { - content: " | "; - content: " | " / ""; - text-decoration: none !important; -} - -#main-nav > a { - display: inline-block; -} - -/* Affiches */ - -.affiche { - border: solid 1px currentColor; - padding: 10px; - background: black; - position: relative; -} - -.affiche .credits { - font-size: 0.5em; - text-align: right; -} - -.affiche .credits, .affiche .credits * { - color: inherit; -} \ No newline at end of file diff --git a/images/affiches/algorave-2025.png b/images/affiches/algorave-2025.png deleted file mode 100644 index f72bc4a..0000000 Binary files a/images/affiches/algorave-2025.png and /dev/null differ diff --git a/images/affiches/dac-background.png b/images/affiches/dac-background.png deleted file mode 100644 index b55cb4a..0000000 Binary files a/images/affiches/dac-background.png and /dev/null differ diff --git a/images/affiches/dac-notes.png b/images/affiches/dac-notes.png deleted file mode 100644 index b6f8054..0000000 Binary files a/images/affiches/dac-notes.png and /dev/null differ diff --git a/images/affiches/dac.png b/images/affiches/dac.png deleted file mode 100644 index 9423827..0000000 Binary files a/images/affiches/dac.png and /dev/null differ diff --git a/images/affiches/debian-background.png b/images/affiches/debian-background.png deleted file mode 100644 index f2f9cb5..0000000 Binary files a/images/affiches/debian-background.png and /dev/null differ diff --git a/images/affiches/drags-nerds-hackathon-header.png b/images/affiches/drags-nerds-hackathon-header.png deleted file mode 100644 index 79bb0be..0000000 Binary files a/images/affiches/drags-nerds-hackathon-header.png and /dev/null differ diff --git a/images/affiches/jamfetedelamusique.png b/images/affiches/jamfetedelamusique.png deleted file mode 100644 index 3038f0b..0000000 Binary files a/images/affiches/jamfetedelamusique.png and /dev/null differ diff --git a/images/affiches/perm-bg.jpg b/images/affiches/perm-bg.jpg deleted file mode 100644 index d487ada..0000000 Binary files a/images/affiches/perm-bg.jpg and /dev/null differ diff --git a/images/affiches/perm-bg.original.jpg b/images/affiches/perm-bg.original.jpg deleted file mode 100644 index e67f434..0000000 Binary files a/images/affiches/perm-bg.original.jpg and /dev/null differ diff --git a/images/affiches/perm-bg.xcf b/images/affiches/perm-bg.xcf deleted file mode 100644 index 32cde7a..0000000 Binary files a/images/affiches/perm-bg.xcf and /dev/null differ diff --git a/images/favicon.png b/images/favicon.png deleted file mode 100644 index e20e12d..0000000 Binary files a/images/favicon.png and /dev/null differ diff --git a/images/pause.svg b/images/pause.svg deleted file mode 100644 index 3e8bc1e..0000000 --- a/images/pause.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - diff --git a/images/plan-d-access.png b/images/plan-d-access.png deleted file mode 100644 index fa9793f..0000000 Binary files a/images/plan-d-access.png and /dev/null differ diff --git a/images/play.svg b/images/play.svg deleted file mode 100644 index d3df71c..0000000 --- a/images/play.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - diff --git a/images/world_network.jpg b/images/world_network.jpg deleted file mode 100644 index 91d272f..0000000 Binary files a/images/world_network.jpg and /dev/null differ diff --git a/images/world_network.muted.jpg b/images/world_network.muted.jpg deleted file mode 100644 index 183cb52..0000000 Binary files a/images/world_network.muted.jpg and /dev/null differ diff --git a/index.html b/index.html index b483d38..f412bd3 100644 --- a/index.html +++ b/index.html @@ -1,398 +1,239 @@ - - + + - - - - - - Laboratoire Ouvert Lyonnais - + + - + + + + + - + + + + - - - + Laboratoire Ouvert Lyonnais + + + + + + + + + + - - - - - -
- - -

Laboratoire
Ouvert
Lyonnais

- - -
- -
- -
- -
-
Hackerspace
-
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.
- -
Hackeuse, Hacker
-
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.
-
- -
- -
- -

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. - Le LOL est un lieu d'exploration des alternatives et de bidouille.

- -

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 techniques qui nous entourent.

- -

Nous revendiquons l'ouverture du code et des techniques. - Le partage des connaissances et l'autogestion.

- -

- - none of us is smarter than all of us - nul n'est plus intelligent·e que nous tou·tes réunis -

- -
-
- - - -
- -
-

Permanence du LOL

- -
-

Venez chiller avec nous, partager un thé ou une biere.

- -

On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs

-
- -

- Tous les mardis à partir de 19h -
- au local du LOL

- -

Adhésion conseillée (prix libre)

-
- - - - - - - - -
- -
- -
-
- - + +
+

+ + + LOL +

+ + +
+ +
+
+ +
+

+ Hackerspace +

+

+
+ Lieu autogéré
+ de réappropriation,
+ réparation & recyclage
+ des objets techniques
+ & technologiques +

+
+ +
+

Horaires d'ouverture

+
    +
  1. + Mar. 17h → 23h +
    2. +
  2. + Sam. 14h → 20h +
    3. +
+ +
+ +
+
+ 7 place Chazette
+ 69001 Lyon
+
+ 45° 46' 23.698" N
+ 4° 50' 14.052" E +
+ + +
+ + +
+
+ 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 + +
+
+ + + + + +
+
+
+

+ Le LOL peut ouvrir en dehors des horaires habituels. + En fonction de nos envies et disponibilités. +

+

+ Un capteur sur la porte d'entrée indique si le local est ouvert: +

+
+ Vérifier
si c'est
ouvert
→ → → +
+ + + + + +
+ + diff --git a/jdll2024/affiche.html b/jdll2024/affiche.html deleted file mode 100644 index 7f29da6..0000000 --- a/jdll2024/affiche.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - Le LOL aux JDLL 2024 - - -

Le LOL sera aux JDLL 2024 !

- -

C'est le 25 et le 26 mai à l'ENS ! Le LOL sera présent pendant tout l'événement pour se rencontrer, discuter et hacker ensemble. En plus de ça, nous allons proposer un temps d'expression libre sur le web.

- -

Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.
- Il n'y a aucun pré-requis, si ce n'est savoir utiliser un clavier.

- -

Venez nous rencontrer, hacker ou bien discuter sur le stand.

- - \ No newline at end of file diff --git a/js/background.js b/js/background.js deleted file mode 100644 index dc4630c..0000000 --- a/js/background.js +++ /dev/null @@ -1,32 +0,0 @@ -(function(){ - - var btn = document.getElementById("play-background"); - /** @type {HTMLVideoElement} */ - var video = document.getElementById("background-video"); - var poster = document.getElementById("background-poster"); - - btn.hidden = false - - btn.addEventListener("click", function(e) { - e.preventDefault() - - if(btn.classList.contains("playing")) { - video.pause(); - } else { - video.play() - } - }) - - video.addEventListener("pause", function(e) { - btn.querySelector(".play").hidden = false; - btn.querySelector(".pause").hidden = true; - btn.classList.remove("playing") - }) - - video.addEventListener("play", function(e) { - btn.querySelector(".play").hidden = true; - btn.querySelector(".pause").hidden = false; - poster.hidden = true; - btn.classList.add("playing") - }) -})() \ No newline at end of file diff --git a/js/cuteTexture.js b/js/cuteTexture.js new file mode 100644 index 0000000..148a2d5 --- /dev/null +++ b/js/cuteTexture.js @@ -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 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 +} \ No newline at end of file diff --git a/js/events.js b/js/events.js new file mode 100644 index 0000000..38660b4 --- /dev/null +++ b/js/events.js @@ -0,0 +1,54 @@ +export async function loadEvents(){ + const eventList = document.querySelectorAll('#eventSection > article'); + //console.log("event list: ", eventList); + + for (const event of eventList){ + const title = event.querySelector('h4'); + const date = event.querySelector('p.date'); + const posterLink = event.querySelector('a.iconBtnStyle').href; + const posterHTML = await getPoster(posterLink); + + const poster = posterHTML.querySelector('body > article'); + + const posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])') + + //console.log('entry data :', title, date, poster, posterStyle); + + const selectedEntry = createEntry(title, date, poster, posterStyle) + + //console.log('created new details :', selectedEntry); + + event.replaceChildren(selectedEntry); + } +} + +async function getPoster(link){ + const res = await fetch(link); + if (res.ok){ + const html_text = await res.text() + const html = new DOMParser().parseFromString(html_text, "text/html"); + return html + } else{ + console.log('error 333: something went wrong with this poster...'); + return + } + +} + +function createEntry(title, date, html, style){ + const newEntry = document.createElement('details'); + const newSummary = document.createElement('summary'); + newSummary.append(title, date); + + newEntry.append(newSummary); + + newEntry.append(html); + + newEntry.name = "eventList" + + for(const el of style){ + document.head.append(el); + } + + return newEntry +} diff --git a/js/floating.js b/js/floating.js new file mode 100644 index 0000000..5490408 --- /dev/null +++ b/js/floating.js @@ -0,0 +1,44 @@ +export function makeItFloat(target){ + const 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 = ''; + }) +} \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..caddd17 --- /dev/null +++ b/js/main.js @@ -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("is LOL open ???", status.open); + + let cuteTexture = initCuteTexture({ + shaderSource: status.shaderSource + }); + + cuteTexture.target.style.visibility = "visible" + }); + +// ======================================== floating message window + +makeItFloat(document.querySelector('#msgWindow')); diff --git a/js/status.js b/js/status.js index 1259a0f..e5296bb 100644 --- a/js/status.js +++ b/js/status.js @@ -1,43 +1,42 @@ -/** - * Fetch status content and insert main content into provided container - * @param {Element} containerEl Container to insert status into - */ -async function insertStatus(containerEl){ +import { getDocumentShaderSource } from './cuteTexture.js'; - const baseUrl = containerEl.href; - const res = await fetch(baseUrl, {cache:"no-cache"}); - - if(!res.ok){ - console.info(`Network error requesting status : ${res.status} ${res.statusText}`); - return; - } - - const dom = new DOMParser().parseFromString(await res.text(), "text/html"); +export async function loadStatus(){ + const uri = new URL('/status', document.baseURI); - let base = dom.createElement("base"); - base.href = containerEl.href; - dom.head.append(base); + const html = await (await fetch(uri, {cache: 'no-store'})).text(); - const main = dom.querySelector("main"); + const remoteDoc = new DOMParser().parseFromString(html, "text/html"); - if(!main) - throw new Error("Status page does not contain a
element"); + const base = remoteDoc.createElement('base'); + base.href = uri.toString(); + remoteDoc.head.prepend(base); - for(let it of main.querySelectorAll("[href],[src]")){ - if(it.hasAttribute("href")){ - it.href = it.href - } else { - it.src = it.src - } - } + //console.log('selected file:', remoteDoc); - containerEl.innerHTML = ""; - for(let node of main.childNodes){ - containerEl.append(document.importNode(node, true)); - } - containerEl.className = main.className; - containerEl.setAttribute("style", main.getAttribute("style")) + let shaderSource = getDocumentShaderSource(remoteDoc); + + let target = document.querySelector('#statuSection'); + + let hiddenBtn = target.querySelector('a'); + + hiddenBtn.style.visibility = 'collapse'; + + let status = remoteDoc.querySelector('#lolStatus'); + //console.log('current status:', status); + + let isOpen = status.innerText.includes('ouvert'); + + let icon = remoteDoc.querySelector('link[rel="icon"]'); + let style = remoteDoc.querySelector('link[data-import="status-style"]'); + let styleFile = style.href.split('/').at(-1); + style.href = uri + '/' + styleFile; + //console.log("selected style: ", style.href); + + document.head.append(icon); + document.head.append(style); + + target.appendChild(status); + + return { open: isOpen, shaderSource }; } - -insertStatus(document.getElementById("status")) \ No newline at end of file diff --git a/presentation.html b/presentation.html deleted file mode 100644 index 197407a..0000000 --- a/presentation.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - Présentation - Laboratoire Ouvert Lyonnais - - - - - - - - - - - -
- - -

Laboratoire
Ouvert
Lyonnais

- - -
- -
- -
- -
- -

Le Laboratoire Ouvert Lyonnais (L.O.L) est une association de loi 1901 destinéee à être un lieu d'échanges et d'expérimentations pour toute personne passionnée de technologie et/ou d'informatique. - Nous sommes centrés sur la réutilisation, le recyclage et le bidouillage de matériels dans le but de comprendre leur fonctionnement et de les utiliser dans un but bienveillant et éducatif.

- -

Nous aimons expérimenter et trouver de nouveaux usages à des objets. Nous sommes une communauté tournée vers le partage et l'apprentissage et nous hébergeons également nos propres services, par nos propres moyens. - Nous recyclons également du matériel informatique, afin d'aider les personnes à obtenir des ressources pour appendre et de continuer à fournir nos services de manière bénévole. Toute personne peut emprunter ou récupérer du matériel, quelle que soit sa situation.

- -

Nous sommes installé dans un local au 7 place Louis Chazette 69001 Lyon. Nous travaillons en collaboration avec l'assocation LALIS, dont nous aidons à héberger le site web et divers services internes.

- -

Numéro RNA : W691079861

- -
-
- -
- -
-
- - - - diff --git a/spaceapi/space.json b/spaceapi/space.json index adea104..83371fc 100644 --- a/spaceapi/space.json +++ b/spaceapi/space.json @@ -1,5 +1,8 @@ { - "api_compatibility": ["14", "15"], + "api_compatibility": [ + "14", + "15" + ], "space": "Laboratoire Ouvert Lyonnais", "logo": "https://labolyon.fr/images/logo_picto.svg", "url": "https://labolyon.fr/", @@ -14,7 +17,7 @@ "irc": "ircs://irc.geeknode.org:6697/labolyon", "ml": "discussions@listes.labolyon.fr", "mastodon": "@labolyon@nerdculture.de", - "matrix": "#general:chat.labolyon.fr" + "matrix": "#lol-space:chat.labolyon.fr" }, "state": { "icon": { diff --git a/status/24-12.fermé.html b/status/24-12.fermé.html deleted file mode 100644 index fcb01c1..0000000 --- a/status/24-12.fermé.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - Ouverture du local • Laboratoire Ouvert Lyonnais - - - - - - -
- -
- -
-

Le Laboratoire Ouvert Lyonnais
n’ouvrira pas le 24 et le 31 décembre

- -

De retour en 2025

-
- - - - - - diff --git a/status/closedStyle.css b/status/closedStyle.css new file mode 100644 index 0000000..af8858d --- /dev/null +++ b/status/closedStyle.css @@ -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; + } + } +} diff --git a/status/index.fermé.html b/status/index.fermé.html index f8688e5..82bfaa3 100644 --- a/status/index.fermé.html +++ b/status/index.fermé.html @@ -1,33 +1,60 @@ - - - + + - - - Ouverture du local • Laboratoire Ouvert Lyonnais - - + + + + + + + + + Le LOL est Fermé ... + + +
+
+

Le LOL est actuellement

+

fermé ...

+
+
- + + - diff --git a/status/index.html b/status/index.html deleted file mode 120000 index a67130b..0000000 --- a/status/index.html +++ /dev/null @@ -1 +0,0 @@ -index.fermé.html \ No newline at end of file diff --git a/status/index.ouvert.html b/status/index.ouvert.html index 59e8817..87e0fe8 100644 --- a/status/index.ouvert.html +++ b/status/index.ouvert.html @@ -1,31 +1,71 @@ - - - + + - - - Ouverture du local • Laboratoire Ouvert Lyonnais - - + + + + + + + + + Le LOL est Ouvert + + + +
+
+

Le LOL est actuellement

+

ouvert !

+
+
- + + + - diff --git a/status/openStyle.css b/status/openStyle.css new file mode 100644 index 0000000..99dd0f3 --- /dev/null +++ b/status/openStyle.css @@ -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; +} diff --git a/status/set-status.sh b/status/set-status.sh index a5cec25..3b71623 100755 --- a/status/set-status.sh +++ b/status/set-status.sh @@ -8,16 +8,17 @@ if [ "$#" = "0" ]; then exit 1 fi -SPACE_JSON=/var/www/html/spaceapi/space.json +#SPACE_JSON=/var/www/html/spaceapi/space.json +SPACE_JSON="$(dirname $0)/../spaceapi/space.json" if [ "$1" = "opened" ]; then - ln -sf "index.ouvert.html" "/var/www/html/status/index.html" + 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 + mv -f $SPACE_JSON.new $SPACE_JSON fi if [ "$1" = "closed" ]; then - ln -sf "index.fermé.html" "/var/www/html/status/index.html" + 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 + mv -f $SPACE_JSON.new $SPACE_JSON fi diff --git a/style/animation.css b/style/animation.css new file mode 100644 index 0000000..f2a2da9 --- /dev/null +++ b/style/animation.css @@ -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); } +} \ No newline at end of file diff --git a/style/common.css b/style/common.css new file mode 100644 index 0000000..c81a6e3 --- /dev/null +++ b/style/common.css @@ -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; + } + } + + } +} diff --git a/style/default.css b/style/default.css new file mode 100644 index 0000000..79fc63b --- /dev/null +++ b/style/default.css @@ -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; +} diff --git a/style/main.css b/style/main.css new file mode 100644 index 0000000..029f098 --- /dev/null +++ b/style/main.css @@ -0,0 +1,663 @@ +/*================ 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: 27px; + + 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; + flex-shrink: 0; + box-sizing: border-box; + } + + #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; + } + + h4:hover{ + color: var(--back-color); + background-color: var(--main-color); + } + + 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:hover{ + color: var(--back-color); + background-color: var(--main-color); + border-color: var(--back-color); + } + + .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; + } + } + } + } + + #webRingSection{ + width: 100%; + padding: 13.12px; + padding-bottom: 16.1px; + min-height: 44px; + display: grid; + background-color: var(--back-color); + border-color: var(--main-color); + border-style: solid; + border-width: thin 0 0 0; + grid-template-columns: repeat(4, 1fr); + gap: 7.77px; + + a{ + width: 100%; + height: 31px; + + img{ + width: 100%; + } + + .needOutline{ + border-color: var(--main-color); + border-style: solid; + border-width: thin; + } + } + + + } +} diff --git a/style/reduced.css b/style/reduced.css new file mode 100644 index 0000000..22c67ab --- /dev/null +++ b/style/reduced.css @@ -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; + } +} \ No newline at end of file diff --git a/style/responsive.css b/style/responsive.css new file mode 100644 index 0000000..a39f4b6 --- /dev/null +++ b/style/responsive.css @@ -0,0 +1,328 @@ +/*===========================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%; + } + } + } + } + } + + #webRingSection{ + grid-template-columns: repeat(6, 1fr); + min-height: 66px; + } + } + } + + + +/*===========================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: 100%; + flex-direction: row; + overflow: hidden; + + #aboutSection{ + font-size: 22px; + max-width: 50vw; + } + + #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; + } + } + } + } + } + + #webRingSection{ + grid-template-columns: repeat(8, 1fr); + min-height: 77px; + } + } +} diff --git a/style/typo.css b/style/typo.css new file mode 100644 index 0000000..a632e36 --- /dev/null +++ b/style/typo.css @@ -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; +} diff --git a/style/typo/Avara-Black.woff2 b/style/typo/Avara-Black.woff2 new file mode 100644 index 0000000..24a6617 Binary files /dev/null and b/style/typo/Avara-Black.woff2 differ diff --git a/style/typo/Karrik-Italic.woff2 b/style/typo/Karrik-Italic.woff2 new file mode 100644 index 0000000..203f936 Binary files /dev/null and b/style/typo/Karrik-Italic.woff2 differ diff --git a/style/typo/Karrik-Regular.woff2 b/style/typo/Karrik-Regular.woff2 new file mode 100644 index 0000000..8754815 Binary files /dev/null and b/style/typo/Karrik-Regular.woff2 differ diff --git a/css/affiches/Lineal-Heavy-CrzaFlqD.ttf b/style/typo/Lineal-Heavy.ttf similarity index 100% rename from css/affiches/Lineal-Heavy-CrzaFlqD.ttf rename to style/typo/Lineal-Heavy.ttf diff --git a/css/affiches/PressStart2P-Regular-DogiNJoF.ttf b/style/typo/PressStart2P-Regular.ttf similarity index 100% rename from css/affiches/PressStart2P-Regular-DogiNJoF.ttf rename to style/typo/PressStart2P-Regular.ttf diff --git a/css/affiches/Velvelyne-Bold-CR91h96S.ttf b/style/typo/Velvelyne-Bold.ttf similarity index 100% rename from css/affiches/Velvelyne-Bold-CR91h96S.ttf rename to style/typo/Velvelyne-Bold.ttf diff --git a/style/typo/Velvelyne-Book.ttf b/style/typo/Velvelyne-Book.ttf new file mode 100644 index 0000000..7a4dd9e Binary files /dev/null and b/style/typo/Velvelyne-Book.ttf differ diff --git a/css/affiches/Velvelyne-Light-C9f5yZCm.ttf b/style/typo/Velvelyne-Light.ttf similarity index 100% rename from css/affiches/Velvelyne-Light-C9f5yZCm.ttf rename to style/typo/Velvelyne-Light.ttf diff --git a/videos/background.mp4 b/videos/background.mp4 deleted file mode 100644 index c6c3509..0000000 Binary files a/videos/background.mp4 and /dev/null differ