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
parent ad50dd36cb
commit 6d95e9d80c
52 changed files with 307 additions and 20 deletions
@@ -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: ", ";
-        }
-    }
-}
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Le LOL aux JDLL 2024</title>
-</head>
-<body>
-    <h1>Le LOL sera aux <a href="https://jdll.org/">JDLL 2024</a> !</h1>
-
-    <p>C'est le 25 et le 26 mai à l'<a href="https://www.openstreetmap.org/?mlat=45.73257&mlon=4.83185#map=19/45.73257/4.83185" target="_blank">ENS</a> ! Le LOL sera présent pendant tout l'événement pour se rencontrer, discuter et hacker ensemble. En plus de ça, nous allons proposer un temps d'expression libre sur le web.</p>
-
-    <p>Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.<br/>
-    Il n'y a aucun pré-requis, si ce n'est savoir utiliser un clavier.</p>
-
-    <p>Venez nous rencontrer, hacker ou bien discuter sur le stand.</p>
-</body>
-</html>
@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="4.6079388mm"
-   height="3.1703224mm"
-   viewBox="0 0 4.6079388 3.1703224"
-   version="1.1"
-   id="svg5"
-   xml:space="preserve"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs2"><linearGradient
-       id="linearGradient22086"><stop
-         style="stop-color:#ffffff;stop-opacity:1;"
-         offset="0"
-         id="stop22082" /><stop
-         style="stop-color:#d4d4d4;stop-opacity:1;"
-         offset="1"
-         id="stop22084" /></linearGradient><linearGradient
-       xlink:href="#linearGradient22086"
-       id="linearGradient22088"
-       x1="24.94607"
-       y1="37.351017"
-       x2="25.431881"
-       y2="37.910633"
-       gradientUnits="userSpaceOnUse" /><linearGradient
-       xlink:href="#linearGradient22086"
-       id="linearGradient22096"
-       x1="27.680107"
-       y1="37.517262"
-       x2="28.045597"
-       y2="37.891655"
-       gradientUnits="userSpaceOnUse" /></defs><g
-     id="layer4"
-     transform="translate(-24.106776,-36.438155)"><g
-       id="g18540"
-       style="display:inline;fill:#bdbdbd;fill-opacity:1"><path
-         style="fill:url(#linearGradient22088);fill-opacity:1;stroke:#07077d;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 24.297671,37.95924 1.296798,-1.216447 0.0019,0.646007 1.376938,0.0036 -0.01322,1.089295 -1.296188,-0.01308 -0.0089,0.827227 z"
-         id="path14411" /><circle
-         style="opacity:1;fill:url(#linearGradient22096);fill-opacity:1;stroke:#07077d;stroke-width:0.210988;stroke-linejoin:round;stroke-miterlimit:10.5;stroke-opacity:1;paint-order:markers fill stroke"
-         id="path14465"
-         cx="28.041388"
-         cy="37.955338"
-         r="0.56783295" /></g></g></svg>
@@ -1,148 +0,0 @@
-.affiche-jdll2024 {
-    border-top-color: #fafaf5ff;
-    border-left-color: #fafaf5ff;
-    border-bottom-color: #868381ff;
-    border-right-color: #868381ff;
-    border-style: solid;
-    border-width: 4px;
-    background-color: #d3cfc9ff;
-    padding: 0;
-    color: black;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-items: stretch;
-    padding-bottom: 4px;
-}
-
-.affiche-jdll2024 iframe {
-    flex: 1;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-}
-
-.affiche-jdll2024 button {
-    border-top-color: #fafaf5ff;
-    border-left-color: #fafaf5ff;
-    border-bottom-color: #868381ff;
-    border-right-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-    background-color: #d3cfc9ff;
-}
-
-.affiche-jdll2024 header {
-    height: 25px;
-
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-
-    background: linear-gradient(to right, #112160ff, #a6c6f2ff);
-    padding: 2px 4px;
-    box-sizing: border-box;
-
-    column-gap: 4px;
-
-    border-bottom: solid 2px #d3cfc9ff;
-}
-
-.affiche-jdll2024 > :not(header) {
-    margin-left: 4px;
-    margin-right: 4px;
-}
-
-.affiche-jdll2024 header h1 {
-    flex: 1;
-    color: white;
-    margin: 0;
-    font-size: 1rem;
-    font-family: sans-serif;
-}
-
-.affiche-jdll2024 header > img {
-    height: 80%;
-}
-
-.affiche-jdll2024 header > button {
-    height: 100%;
-    display: block;
-    padding: 2px;
-}
-
-.affiche-jdll2024 button img {
-    height: 100%;
-    display: block;
-    box-sizing: border-box;
-}
-
-.affiche-jdll2024 nav {
-    padding: 2px;
-
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-
-    border-bottom: groove 2px #fafaf5ff;
-}
-
-.affiche-jdll2024 nav:first-of-type {
-    height: 40px;
-}
-
-.affiche-jdll2024 nav button {
-    height: 100%;
-    font-size: 0.6rem;
-    width: 50px;
-
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-}
-
-.affiche-jdll2024 nav button img {
-    height: 15px;
-}
-
-.affiche-jdll2024 nav hr {
-    flex: 1;
-    border: none;
-}
-
-.affiche-jdll2024 nav > img {
-    height: 100%;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 1px;
-}
-
-.affiche-jdll2024 nav input {
-    flex: 1;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-    font-size: 0.7rem;
-}
-
-.affiche-jdll2024 nav label {
-    font-size: 0.7rem;
-    margin-right: 1ex;
-}
-
-.affiche-jdll2024 nav:last-of-type {
-    border-bottom: none;
-}
@@ -1,35 +0,0 @@
-@font-face {
-    font-family: "Arvo";
-    src: url("./Arvo-Bold.ttf");
-    font-weight: bold;
-}
-
-.affiche-perm {
-    background: black url("./perm-bg.jpg");
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    text-align: center;
-
-    padding-left: 25px;
-    padding-right: 25px;
-
-    font-size: 0.9rem;
-    line-height: 1.5;
-}
-
-.affiche-perm h1 {
-    font-size: 1.8em;
-    margin-top: 50px;
-    font-weight: normal;
-    font-family: "Arvo", sans-serif;
-}
-
-.affiche-perm .event-hours {
-    font-weight: bold;
-    text-align: center;
-    margin-top: 25px;
-    margin-bottom: 25px;
-    font-size: 1.2em;
-    font-family: "Arvo";
-}
@@ -0,0 +1,49 @@
+<!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>
+      /*=========================== INFROMATIONS AFFICHES :
+
+      la première balise style 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">
+      #testAffiche{
+        width: 333px;
+        height:  333px;
+        background-color: green;
+      }
+
+      #testAffiche p{
+        color: black;
+        font-size: 33px;
+      }
+    </style>
+</head>
+<body>
+    <main id="testAffiche">
+        <p>test affiche !</p>
+    </main>
+</body>
+</html>
@@ -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>
+      /*=========================== INFROMATIONS AFFICHES :
+
+      la première balise style 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>
+    <main id="testAffiche333">
+        <p>test affiche 333 !</p>
+    </main>
+</body>
+</html>