edit: icon player + modif noise fermé + panneau plus large en format tres grand écran

création structure hors vue (et sans js sur pc) pour infos 
essentielles
     création de l'interactivité pour indiquer l'ouverture du lieu (sans 
'backend', automatisation et lien avec capteur à faire)
     liens inactifs pour l'instant
     infos pour remplir et prévisualiser à mettre à jour en fonction de 
ce qu'on décide ^^
          c'est tout pour cette fois
}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

README.md

@@ -0,0 +1,20 @@
+yoooo
+
+petite propositionn de refonte du site du LOL
+(d'après qq idées perso et des remarques des utilisateurices)
+
+POUR LE STATUT D'OUVERTURE DU LIEU IL FAUT :
+
+  > IMPORTER LE FICHIER ./src/lolStatus.js idéalement :
+    import { lolState } from './src/lolStatus.js'
+
+  > ÉDITER LE PARAMÈTRE (boolean) lolState.isOpen
+        => true pour ouvert
+
+  > L'INTERFACE SE MET À JOUR AUTOMATIQUEMENT (déjà en place)
+
+NB: les infos indiquées sont surtout là pour prévisualiser, mais ne sont pour l'instant pas plus que des envies personelles par rapport au lieu (rien d'officiel pour l'instant, juste des idées)
+
+PS: BESOIN DE QQN POUR FAIRE LE BACKEND SVP <3 <3 <3
+
+333

admin/Admin.vue

@@ -0,0 +1,26 @@
+<template>
+  <eventEditor></eventEditor>
+  <linkEditor></linkEditor>
+  <playlistEditor></playlistEditor>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+
+  export default {
+    name : 'Admin',
+    data() {
+      return {
+      }
+    },
+    computed: {
+    },
+    methods: {
+    },
+    mounted(){
+      console.log("Admin app is fully loaded!");
+    }
+  };
+</script>

admin/components/EventEditor.vue

@@ -0,0 +1,359 @@
+<template>
+  <Teleport to="#event .windowContent" defer>
+    <div class="sectionTitle" v-show="eventPannel">
+      <p>{{newEventText}} &emsp; &emsp;&emsp;&emsp;&emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="newEventBtn" @click="toggleNewEvent">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="editor" v-show="newEvent">
+      <div class="inputDiv" id="title">
+        <p>&emsp; Titre &emsp;&emsp;&emsp; &rarr;</p>
+        <input type="text" name="eventTitle" v-model="title">
+      </div>
+      <div class="inputDiv" id="date">
+        <p>&emsp; Date &emsp;&emsp;&emsp; &rarr;</p>
+        <input type="text" name="eventDate" v-model="date">
+      </div>
+      <div class="inputDiv" id="time">
+        <p>&emsp; Heure &emsp;&emsp;&ensp; &rarr;</p>
+        <input type="text" name="eventTime" v-model="time">
+      </div>
+      <div class="inputDiv" id="subtitle">
+        <p>&emsp; Sous-titre &emsp; &rarr;</p>
+        <input type="text" name="eventSub" v-model="sub">
+      </div>
+      <div class="inputDiv" id="desc">
+        <p> ↙  Description &emsp; &emsp;</p>
+        <textarea name="eventDesc" rows="8" cols="80" v-model="desc"></textarea>
+      </div>
+      <button type="button" name="saveChanges" class="textBtnStyle" @click="saveEvent" :class="{alert: eventAlertActive}">SAUVEGARDER !</button>
+    </div>
+    <div class="sectionTitle" v-show="eventPannel">
+      <p>Éditer les évènements &ensp; &emsp;&emsp;&emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="oldEventBtn" @click="toggleOldEvent">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="content" v-show="oldEvent">
+      <div class="eventEntry" v-for="item of displayedEvents" ref="item.title">
+        <p>{{item.title}}</p>
+        <div class="controls">
+          <button type="button" name="edit" class="toggleBtn" id="edit" @click='editEvent(item)'>
+            <svg class="icon" viewBox="0 0 40.19 38.9">
+              <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+              <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+            </svg>
+          </button>
+          <button type="button" name="remove" class="toggleBtn" id="remove" @click='removeEvent(item)'>
+            <svg class="icon" viewBox="0 0 53.73 53.59">
+              <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+</template>
+
+<style scoped>
+  #event .windowContent{
+    .sectionTitle{
+      width: 100%;
+      height: 44px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      padding-right: 33px;
+      padding-left: 33px;
+      box-sizing: border-box;
+
+
+            p{
+              font-family: 'velvelyne';
+              font-weight: bold;
+              font-size: 16.1px;
+              color: var(--main-color);
+              margin: 0;
+            }
+    }
+
+    .editor{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 13.12px;
+      overflow-y: scroll;
+      padding-top: 7.77px;
+      padding-right: 7.77px;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      box-sizing: border-box;
+
+      .textBtnStyle{
+        margin-bottom: 16.1px;
+        margin-right: 16.1px;
+        min-height: 33px;
+      }
+
+      .textBtnStyle.alert{
+        color: var(--back-color);
+        background-color: var(--main-color);
+      }
+            .inputDiv{
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              color: var(--main-color);
+              width: 95%;
+              margin: 0;
+              padding: 0;
+              height: 44px;
+
+                    input{
+                      width: 60%;
+                      background-color: var(--back-color);
+                      height: 33px;
+                      padding-left: 16.1px;
+                      border-style: solid;
+                      border-color: var(--main-color);
+                      border-radius: 22px;
+                      border-width: thin;
+                    }
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-weight: normal;
+                      font-size: 16.1px;
+                      color: var(--main-color);
+                      margin: 0;
+                    }
+            }
+
+      #desc.inputDiv{
+        flex-direction: column;
+        align-items: flex-end;
+        height: 161px;
+        margin-bottom: 7.77px;
+
+        textarea{
+          width: 92%;
+          align-self: center;
+          background-color: var(--back-color);
+          height: 77px;
+          padding-left: 16.1px;
+          padding-right: 16.1px;
+          padding-top: 7.77px;
+          border-style: solid;
+          border-color: var(--main-color);
+          border-radius: 22px;
+          border-width: thin;
+          resize: none;
+          overflow-y: scroll;
+
+        }
+      }
+    }
+
+    .content{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: var(--main-color);
+      overflow-y: scroll;
+
+          .eventEntry{
+            width: 100%;
+            height: 44px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            border-style: solid;
+            border-color: var(--back-color);
+            border-radius: 0;
+            border-width: 0 0 1.61px 0;
+            padding-left: 16.1px;
+            padding-right: 16.1px;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: bold;
+                    font-size: 16.1px;
+                    color: var(--back-color);
+                    margin: 0;
+                  }
+
+                  .controls{
+                    width: auto;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 7.77px;
+
+                    .toggleBtn{
+                      transform: rotate(0);
+                      cursor: cell;
+                    }
+                  }
+          }
+
+    }
+  }
+</style>
+
+<script>
+  import { lolLinkList } from '/src/lolLinks.js'
+  import { lolEventsList } from '/src/lolEvents.js'
+  import { loadAudioData } from '/src/data/audioData.js'
+
+  import { pannelStatusList } from '../pannelStatus.js'
+
+  import { watch } from 'vue'
+
+  export default {
+    name : 'EventEditor',
+    data() {
+      return {
+        newEventText: 'Nouvel Évènement',
+        eventAlertActive: false,
+        hideTimer: null,
+        submitEventText: 'SAUVEGARDER',
+        newEvent: false,
+        oldEvent: false,
+        title: '',
+        date: '',
+        time: '',
+        sub: '',
+        desc: '',
+        eventDefault: {
+          title: 'Exemple de Titre',
+          date: '13/12/26',
+          time: '13h12',
+          sub: 'exemple de sous-titre',
+          desc: 'exemple de description \nsur plusieurs lignes'
+        },
+        editingEvent: null
+      }
+    },
+    computed: {
+      displayedEvents(){
+        return lolEventsList
+      },
+      eventPannel(){
+        return pannelStatusList.event;
+      }
+    },
+    methods: {
+      toggleNewEvent(){
+        this.newEvent = !this.newEvent;
+        if (this.newEvent){
+          this.oldEvent = false;
+          if(!this.editingEvent){
+            this.backToDefaultEvent();
+          }
+        }
+        this.$refs.newEventBtn.style.transform = this.newEvent ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldEventBtn.style.transform = this.oldEvent ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      toggleOldEvent(){
+        this.oldEvent = !this.oldEvent;
+        if (this.oldEvent){
+          this.newEvent = false;
+        }
+        this.$refs.newEventBtn.style.transform = this.newEvent ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldEventBtn.style.transform = this.oldEvent ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      backToDefaultEvent(){
+        this.title = this.eventDefault.title;
+        this.date = this.eventDefault.date;
+        this.time = this.eventDefault.time;
+        this.sub = this.eventDefault.sub;
+        this.desc = this.eventDefault.desc;
+        this.editingEvent = null;
+        this.newEventText = 'Nouvel Évènement';
+      },
+      createListEntry(){
+        let entry = {
+          title: this.title,
+          date: this.date,
+          time: this.time,
+          subtitle: this.sub,
+          desc: this.desc
+        }
+
+        return entry
+      },
+      saveEvent(){
+        let entry = this.createListEntry();
+        if(this.editingEvent){
+          Object.assign(this.editingEvent, {
+            title: this.title,
+            date: this.date,
+            time: this.time,
+            subtitle: this.sub,
+            desc: this.desc
+          })
+        } else {
+          this.displayedEvents.push(entry);
+        }
+        this.toggleOldEvent();
+        this.backToDefaultEvent();
+      },
+      removeEvent(obj){
+        let index = this.displayedEvents.indexOf(obj);
+        this.displayedEvents.splice(index, 1);
+      },
+      editEvent(obj){
+        console.log('selected :', obj)
+        this.editingEvent = obj;
+
+        this.title = obj.title;
+        this.date = obj.date;
+        this.time = obj.time;
+        this.sub = obj.subtitle;
+        this.desc = obj.desc;
+        this.newEventText = 'Éditer l\'évènement'
+        this.toggleNewEvent();
+      },
+      async eventSaveMsg(){
+        this.eventAlertActive = true;
+        this.submitEventText = "Enregistré !";
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.eventAlertActive = false;
+          this.submitEventText = 'SAUVEGARDER';
+        }, 1610)
+      }
+    },
+    mounted(){
+      watch( () => this.eventPannel, () => {
+        if(!this.eventPannel){
+          this.oldEvent = false;
+          this.newEvent = false;
+        }
+      })
+      console.log("Event editor is fully loaded!");
+    }
+  };
+</script>

admin/components/LinkEditor.vue

@@ -0,0 +1,363 @@
+<template>
+  <Teleport to="#link .windowContent" defer>
+    <div class="sectionTitle" v-show="linkPannel">
+      <p>{{newLinkText}} &emsp; &emsp;&emsp; &ensp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="newLinkBtn" @click="toggleNewLink">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="editor" v-show="newLink">
+      <div class="inputDiv" id="title">
+        <p>&emsp; Titre &emsp;&emsp;&emsp; &rarr;</p>
+        <input type="text" name="linkTitle" v-model="title">
+      </div>
+      <div class="inputDiv" id="desc">
+        <p> ↙  Description &emsp; &emsp;</p>
+        <textarea name="linkDesc" rows="8" cols="80" v-model="desc"></textarea>
+      </div>
+      <div class="inputDiv" id="href">
+        <p> ↙  Lien &emsp; &emsp;</p>
+        <textarea name="linkDesc" rows="8" cols="80" v-model="href"></textarea>
+      </div>
+      <button type="button" name="saveChanges" class="textBtnStyle" @click="saveLink" :class="{alert: linkAlertActive}">SAUVEGARDER !</button>
+    </div>
+    <div class="sectionTitle" v-show="linkPannel">
+      <p>Éditer les liens &emsp; &emsp; &emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="oldLinkBtn" @click="toggleOldLink">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="content" v-show="oldLink">
+      <div class="linkEntry" v-for="item of displayedLinks" ref="item.title">
+        <p>{{item.title}}</p>
+        <div class="controls">
+          <button type="button" name="edit" class="toggleBtn" id="edit" @click='editLink(item)'>
+            <svg class="icon" viewBox="0 0 40.19 38.9">
+              <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+              <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+            </svg>
+          </button>
+          <button type="button" name="remove" class="toggleBtn" id="remove" @click='removeLink(item)'>
+            <svg class="icon" viewBox="0 0 53.73 53.59">
+              <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+</template>
+
+<style scoped>
+  #link .windowContent{
+    .sectionTitle{
+      width: 100%;
+      height: 44px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      padding-right: 33px;
+      padding-left: 33px;
+      box-sizing: border-box;
+
+
+            p{
+              font-family: 'velvelyne';
+              font-weight: bold;
+              font-size: 16.1px;
+              color: var(--main-color);
+              margin: 0;
+            }
+      }
+
+    .editor{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 13.12px;
+      overflow-y: scroll;
+      padding-top: 7.77px;
+      padding-right: 7.77px;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      box-sizing: border-box;
+
+      .textBtnStyle{
+        margin-bottom: 16.1px;
+        margin-right: 16.1px;
+        min-height: 33px;
+      }
+
+      .textBtnStyle.alert{
+        color: var(--back-color);
+        background-color: var(--main-color);
+      }
+
+            .inputDiv{
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              color: var(--main-color);
+              width: 95%;
+              margin: 0;
+              padding: 0;
+              height: 44px;
+
+                    input{
+                      width: 60%;
+                      background-color: var(--back-color);
+                      height: 33px;
+                      padding-left: 16.1px;
+                      border-style: solid;
+                      border-color: var(--main-color);
+                      border-radius: 22px;
+                      border-width: thin;
+                    }
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-weight: normal;
+                      font-size: 16.1px;
+                      color: var(--main-color);
+                      margin: 0;
+                    }
+            }
+
+      #desc.inputDiv{
+        flex-direction: column;
+        align-items: flex-end;
+        height: 161px;
+        margin-bottom: 7.77px;
+
+              textarea{
+                width: 92%;
+                align-self: center;
+                background-color: var(--back-color);
+                height: 77px;
+                padding-left: 16.1px;
+                padding-right: 16.1px;
+                padding-top: 7.77px;
+                border-style: solid;
+                border-color: var(--main-color);
+                border-radius: 22px;
+                border-width: thin;
+                resize: none;
+                overflow-y: scroll;
+
+              }
+      }
+
+      #href.inputDiv{
+        flex-direction: column;
+        align-items: flex-end;
+        height: 161px;
+        margin-bottom: 7.77px;
+
+              textarea{
+                width: 92%;
+                align-self: center;
+                background-color: var(--back-color);
+                height: 77px;
+                padding-left: 16.1px;
+                padding-right: 16.1px;
+                padding-top: 7.77px;
+                border-style: solid;
+                border-color: var(--main-color);
+                border-radius: 22px;
+                border-width: thin;
+                resize: none;
+                overflow-y: scroll;
+
+              }
+      }
+
+    }
+
+    .content{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: var(--main-color);
+      overflow-y: scroll;
+
+          .linkEntry{
+            width: 100%;
+            height: 44px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            border-style: solid;
+            border-color: var(--back-color);
+            border-radius: 0;
+            border-width: 0 0 1.61px 0;
+            padding-left: 16.1px;
+            padding-right: 16.1px;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: bold;
+                    font-size: 16.1px;
+                    color: var(--back-color);
+                    margin: 0;
+                  }
+
+                  .controls{
+                    width: auto;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 7.77px;
+
+                    .toggleBtn{
+                      transform: rotate(0);
+                      cursor: cell;
+                    }
+                  }
+          }
+
+    }
+  }
+</style>
+
+<script>
+  import { lolLinkList } from '/src/lolLinks.js'
+
+  import { pannelStatusList } from '../pannelStatus.js'
+
+  import { watch } from 'vue'
+
+  export default {
+    name : 'LinkEditor',
+    data() {
+      return {
+        newLinkText: 'Nouveau Lien',
+        linkAlertActive: false,
+        hideTimer: null,
+        submitLinkText: 'SAUVEGARDER',
+        newLink: false,
+        oldLink: false,
+        title: '',
+        href: '',
+        desc: '',
+        linkDefault: {
+          title: 'Exemple de Titre',
+          href: 'https://example.com/',
+          desc: 'exemple de description'
+        },
+        editingLink: null
+      }
+    },
+    computed: {
+      displayedLinks(){
+        return lolLinkList
+      },
+      linkPannel(){
+        return pannelStatusList.link;
+      }
+    },
+    methods: {
+      toggleNewLink(){
+        this.newLink = !this.newLink;
+        if (this.newLink){
+          this.oldLink = false;
+          if(!this.editingLink){
+            this.backToDefaultLink();
+          }
+        }
+        this.$refs.newLinkBtn.style.transform = this.newLink ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldLinkBtn.style.transform = this.oldLink ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      toggleOldLink(){
+        this.oldLink = !this.oldLink;
+        if (this.oldLink){
+          this.newLink = false;
+        }
+        this.$refs.newLinkBtn.style.transform = this.newLink ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldLinkBtn.style.transform = this.oldLink ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      backToDefaultLink(){
+        this.title = this.linkDefault.title;
+        this.href = this.linkDefault.href;
+        this.desc = this.linkDefault.desc;
+        this.editingLink = null;
+        this.newLinkText = 'Nouveau Lien';
+      },
+      createListEntry(){
+        let entry = {
+          title: this.title,
+          href: this.href,
+          desc: this.desc
+        }
+
+        return entry
+      },
+      saveLink(){
+        let entry = this.createListEntry();
+        if(this.editingLink){
+          Object.assign(this.editingLink, {
+            title: this.title,
+            href: this.href,
+            desc: this.desc
+          })
+        } else {
+          this.displayedLinks.push(entry);
+        }
+        this.toggleOldLink();
+        this.backToDefaultLink();
+      },
+      removeLink(obj){
+        let index = this.displayedLinks.indexOf(obj);
+        this.displayedLinks.splice(index, 1);
+      },
+      editLink(obj){
+        console.log('selected :', obj)
+        this.editingLink = obj;
+
+        this.title = obj.title;
+        this.href = obj.href
+        this.desc = obj.desc;
+        this.newLinkText = 'Éditer le lien'
+        this.toggleNewLink();
+      },
+      async linkSaveMsg(){
+        this.linkAlertActive = true;
+        this.submitLinkText = "Enregistré !";
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.eventAlertActive = false;
+          this.submitLinkText = 'SAUVEGARDER';
+        }, 1610)
+      }
+    },
+    mounted(){
+      watch( () => this.linkPannel, () => {
+        if(!this.linkPannel){
+          this.oldLink = false;
+          this.newLink = false;
+        }
+      })
+      console.log("Link editor is fully loaded!");
+    }
+  };
+</script>

admin/components/PlaylistEditor.vue

@@ -0,0 +1,367 @@
+<template>
+  <Teleport to="#playlist .windowContent" defer>
+    <div class="sectionTitle" v-show="playlistPannel">
+      <p>{{newSongText}} &emsp; &emsp; &emsp; &emsp; &emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="newSongBtn" @click="toggleNewPlaylist">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="editor" v-show="newSong">
+      <div class="inputDiv" id="track">
+        <p>&emsp; Titre &emsp;&emsp; &emsp; &rarr;</p>
+        <input type="text" name="songTitle" v-model="track">
+      </div>
+      <div class="inputDiv" id="artist">
+        <p>&emsp; Artiste &emsp;&emsp;&ensp; &rarr;</p>
+        <input type="text" name="songArtist" v-model="artist">
+      </div>
+      <p v-show="editingSong" id="note">Note : Laisser vide pour conserver le fichier ↘</p>
+      <div class="inputDiv" id="src">
+        <p>&emsp; Fichier MP3 &ensp; &rarr;</p>
+        <input type="file" name="songFile" ref="audioFile" @change="modifyFile">
+      </div>
+      <button type="button" name="saveChanges" class="textBtnStyle" @click="savePlaylist" :class="{alert: playlistAlertActive}">SAUVEGARDER !</button>
+    </div>
+    <div class="sectionTitle" v-show="playlistPannel">
+      <p>Modifier la playlist &ensp; &emsp;&emsp;&emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="currentPlaylistBtn" @click="toggleCurrentPlaylist">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="content" v-show="currentPlaylist">
+      <div class="playlistEntry" v-for="item of displayedPlaylists" ref="item.track">
+        <p>{{item.track}} — {{item.artist}}</p>
+        <div class="controls">
+          <button type="button" name="edit" class="toggleBtn" id="edit" @click='editPlaylist(item)'>
+            <svg class="icon" viewBox="0 0 40.19 38.9">
+              <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+              <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+            </svg>
+          </button>
+          <button type="button" name="remove" class="toggleBtn" id="remove" @click='removePlaylist(item)'>
+            <svg class="icon" viewBox="0 0 53.73 53.59">
+              <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+</template>
+
+<style scoped>
+  #playlist .windowContent{
+    .sectionTitle{
+      width: 100%;
+      height: 44px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      padding-right: 33px;
+      padding-left: 33px;
+      box-sizing: border-box;
+
+
+            p{
+              font-family: 'velvelyne';
+              font-weight: bold;
+              font-size: 16.1px;
+              color: var(--main-color);
+              margin: 0;
+            }
+      }
+
+    .editor{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 13.12px;
+      overflow-y: scroll;
+      padding-top: 7.77px;
+      padding-right: 7.77px;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      box-sizing: border-box;
+
+      .textBtnStyle{
+        margin-bottom: 16.1px;
+        margin-right: 22px;
+        height: 33px;
+      }
+
+      .textBtnStyle.alert{
+        color: var(--back-color);
+        background-color: var(--main-color);
+      }
+            #note{
+              width: 66%;
+              font-family: 'velvelyne';
+              font-weight: normal;
+              font-size: 13.12px;
+              color: var(--main-color);
+              margin: 0;
+              text-align: right;
+            }
+
+            .inputDiv{
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              color: var(--main-color);
+              width: 95%;
+              margin: 0;
+              padding: 0;
+              height: 44px;
+
+                    input{
+                      width: 60%;
+                      background-color: var(--back-color);
+                      height: 33px;
+                      padding-left: 16.1px;
+                      border-style: solid;
+                      border-color: var(--main-color);
+                      border-radius: 22px;
+                      border-width: thin;
+                    }
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-weight: normal;
+                      font-size: 16.1px;
+                      color: var(--main-color);
+                      margin: 0;
+                    }
+            }
+
+            #src.inputDiv{
+
+                  input[type=file]::file-selector-button{
+                    font-family: 'karrik';
+                    font-size: 10px;
+                    background-color: var(--back-color);
+                    color: var(--main-color);
+                    padding-left: 0;
+                    margin: 0;
+                    border-width:  0 1.61px 0 0;
+                    height: 100%;
+                    padding-left: 16.1px;
+                    padding-right: 7.77px;
+                    margin-left: -22px;
+                    margin-right: 7.77px;
+                    outline: none;
+                  }
+
+                  input[type=file]::file-selector-button:hover{
+                    font-family: 'karrik';
+                    font-size: 13.12px;
+                    background-color: var(--main-color);
+                    color: var(--back-color);
+                    padding-left: 0;
+                    margin: 0;
+                    border-width:  0 1.61px 0 0;
+                    height: 100%;
+                    padding-left: 16.1px;
+                    padding-right: 7.77px;
+                    margin-left: -22px;
+                    margin-right: 7.77px;
+                    outline: none;
+                  }
+            }
+
+    }
+
+    .content{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: var(--main-color);
+      overflow-y: scroll;
+
+          .playlistEntry{
+            width: 100%;
+            height: 44px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            border-style: solid;
+            border-color: var(--back-color);
+            border-radius: 0;
+            border-width: 0 0 1.61px 0;
+            padding-left: 16.1px;
+            padding-right: 16.1px;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: bold;
+                    font-size: 16.1px;
+                    color: var(--back-color);
+                    margin: 0;
+                  }
+
+                  .controls{
+                    width: auto;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 7.77px;
+
+                    .toggleBtn{
+                      transform: rotate(0);
+                      cursor: cell;
+                    }
+                  }
+          }
+
+    }
+  }
+</style>
+
+<script>
+  import { loadAudioData } from '/src/data/audioData.js'
+  import { watch } from 'vue'
+
+  import { pannelStatusList } from '../pannelStatus.js'
+
+  export default {
+    name : 'PlaylistEditor',
+    data() {
+      return {
+        newSongText: 'Nouveau Son',
+        playlistAlertActive: false,
+        hideTimer: null,
+        submitPlaylistText: 'SAUVEGARDER',
+        newSong: false,
+        currentPlaylist: false,
+        track: '',
+        artist: '',
+        src: null,
+        playlistDefault: {
+          track: 'exemple',
+          artist: 'exemple',
+          src: null
+        },
+        editingSong: null,
+        selectedInput: null
+      }
+    },
+    computed: {
+      displayedPlaylists(){
+        return loadAudioData
+      },
+      playlistPannel(){
+        return pannelStatusList.playlist;
+      }
+    },
+    methods: {
+      toggleNewPlaylist(){
+        this.newSong = !this.newSong;
+        if (this.newSong){
+          this.currentPlaylist = false;
+          if(!this.editingSong){
+            this.backToDefaultPlaylist();
+          }
+        }
+        this.$refs.newSongBtn.style.transform = this.newSong ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.currentPlaylistBtn.style.transform = this.currentPlaylist ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      toggleCurrentPlaylist(){
+        this.currentPlaylist = !this.currentPlaylist;
+        if (this.currentPlaylist){
+          this.newSong = false;
+        }
+        this.$refs.newSongBtn.style.transform = this.newSong ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.currentPlaylistBtn.style.transform = this.currentPlaylist ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      backToDefaultPlaylist(){
+        this.track = this.playlistDefault.track;
+        this.artist = this.playlistDefault.artist;
+        this.editingSong = null;
+        this.newSongText = 'Nouveau Son';
+      },
+      createListEntry(){
+        let entry = {
+          track: this.track,
+          artist: this.artist,
+          src: this.src
+        }
+        console.log('created or modified entry :', entry)
+        return entry
+      },
+      savePlaylist(){
+        let entry = this.createListEntry();
+        if(this.editingSong){
+          Object.assign(this.editingSong, {
+            track: this.track,
+            artist: this.artist,
+            src: this.src
+          })
+        } else {
+          this.displayedPlaylists.push(entry);
+        }
+        this.toggleCurrentPlaylist();
+        this.backToDefaultPlaylist();
+      },
+      removePlaylist(obj){
+        let index = this.displayedPlaylists.indexOf(obj);
+        this.displayedPlaylists.splice(index, 1);
+      },
+      editPlaylist(obj){
+        console.log('selected :', obj)
+        this.editingSong = obj;
+
+        this.track = obj.track;
+        this.artist = obj.artist;
+        this.src = obj.src;
+
+        this.newSongText = 'Éditer les infos'
+        this.toggleNewPlaylist();
+      },
+      async playlistSaveMsg(){
+        this.playlistAlertActive = true;
+        this.submitPlaylistText = "Enregistré !";
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.eventAlertActive = false;
+          this.submitPlaylistText = 'SAUVEGARDER';
+        }, 1610)
+      },
+      modifyFile(){
+        if (this.selectedInput.files[0]){
+          this.src = this.selectedInput.files[0];
+        }
+      }
+    },
+    mounted(){
+      this.selectedInput = this.$refs.audioFile;
+      console.log(this.selectedInput)
+      watch( () => this.playlistPannel, () => {
+        if(!this.playlistPannel){
+          this.newSong = false;
+          this.currentPlaylist = false;
+        }
+      })
+      console.log("Playlist editor is fully loaded!");
+    }
+  };
+</script>

admin/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LOL : admin</title>
+    <link rel="icon" type="image/svg" href="./favicon.svg" />
+    <link type="text/css" rel="stylesheet" href="./style/css">
+  </head>
+  <body>
+    <div id="adminWelcome">
+      <p>
+        <strong>Bienvenue sur la page admin du LOL !</strong><br>
+        Ici tu peux éditer le contenu visible sur le site, dans les sections évènements & liens utiles, et aussi ajouter de la musique dans le player.<br>
+        On précise quand même (au cas où), que <strong>les auteurices des sons qu'on poste doivent avoir donné leur accord explicite avant que ça soit posté !</strong>
+      </p>
+    </div>
+    <div id="adminContainer">
+      <div class="">
+
+      </div>
+      <div class="adminSection" id="event">
+        <div class="windowStyle">
+          <div class="windowTitle">
+            <p>
+              Évènements affichés :
+            </p>
+            <button type="button" class="toggleBtn" id="eventBtn">
+              <svg class="icon" viewBox="0 0 53.73 53.59">
+                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="windowContent">
+          </div>
+        </div>
+      </div>
+      <div class="adminSection" id="other">
+        <div class="windowStyle" id="link">
+          <div class="windowTitle">
+            <p>
+              Panneau liens :
+            </p>
+            <button type="button" class="toggleBtn" id="linkBtn">
+              <svg class="icon" viewBox="0 0 53.73 53.59">
+                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="windowContent">
+          </div>
+        </div>
+        <div class="windowStyle" id="playlist">
+          <div class="windowTitle">
+            <p>
+              Playlist :
+            </p>
+            <button type="button" class="toggleBtn" id="playlistBtn">
+              <svg class="icon" viewBox="0 0 53.73 53.59">
+                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="windowContent">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="adminContent"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

admin/main.js

@@ -0,0 +1,62 @@
+import { createApp } from 'vue'
+// import css
+import './style.css'
+// import app racine pour page admin
+import Admin from './Admin.vue'
+// import composants
+import EventEditor from './components/EventEditor.vue'
+import LinkEditor from './components/LinkEditor.vue'
+import PlaylistEditor from './components/PlaylistEditor.vue'
+
+// creation app
+const app = createApp(Admin);
+// Composants
+app.component('eventEditor', EventEditor);
+app.component('linkEditor', LinkEditor);
+app.component('playlistEditor', PlaylistEditor)
+
+// montage dans div#adminContent
+app.mount('#adminContent');
+
+//import variables reactive
+import { pannelStatusList }  from './pannelStatus.js'
+
+document.documentElement.setAttribute('data-theme', 'main');
+
+let eventBtn = document.querySelector('#eventBtn');
+let eventTarget = document.querySelector('#event .windowContent');
+
+let linkBtn = document.querySelector('#linkBtn');
+let linkTarget = document.querySelector('#link .windowContent');
+
+let playlistBtn = document.querySelector('#playlistBtn');
+let playlistTarget = document.querySelector('#playlist .windowContent');
+
+
+eventBtn.addEventListener('click', () => {
+  pannelStatusList.event = !pannelStatusList.event;
+  eventTarget.style.height = pannelStatusList.event ? '75vh' : 'auto';
+  document.querySelector('#eventBtn .icon').style.transform = pannelStatusList.event ? 'rotate(45deg)' : 'rotate(0)'
+})
+
+linkBtn.addEventListener('click', () => {
+  pannelStatusList.link = !pannelStatusList.link;
+  if(pannelStatusList.link){
+    pannelStatusList.playlist = false;
+    playlistTarget.style.height = 'auto';
+    document.querySelector('#playlistBtn .icon').style.transform = 'rotate(45deg)'
+  }
+  linkTarget.style.height = pannelStatusList.link ? '64.5vh' : '0';
+  document.querySelector('#linkBtn .icon').style.transform = pannelStatusList.link ? 'rotate(45deg)' : 'rotate(0)'
+})
+
+playlistBtn.addEventListener('click', () => {
+  pannelStatusList.playlist = !pannelStatusList.playlist;
+  if(pannelStatusList.playlist){
+    pannelStatusList.link = false
+    linkTarget.style.height = 'auto';
+    document.querySelector('#linkBtn .icon').style.transform = 'rotate(45deg)'
+  }
+  playlistTarget.style.height = pannelStatusList.playlist ? '64.5vh' : 'auto';
+  document.querySelector('#playlistBtn .icon').style.transform = pannelStatusList.playlist ? 'rotate(45deg)' : 'rotate(0)'
+})

admin/pannelStatus.js

@@ -0,0 +1,7 @@
+import { reactive } from 'vue'
+
+export const pannelStatusList = reactive({
+  event: false,
+  link: false,
+  playlist: false
+})

admin/style.css

@@ -0,0 +1,248 @@
+:root[data-theme="main"]{
+  --back-color: #FFFF4D;
+  --main-color: #000000;
+}
+
+/*====================Typo*/
+@font-face {
+  font-family: 'karrik';
+  src: url('/typo/Karrik-Italic.woff2').format('woff2');
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'karrik';
+  src: url('/typo/Karrik-Regular.woff2') format('woff2');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('/typo/Velvelyne-Book.ttf') format('truetype');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'avara';
+  src: url('/typo/Avara-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('/typo/PressStart2P-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('/typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*=============Désact défault*/
+input {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+
+a{
+  text-decoration: none;
+  color: inherit;
+  cursor: alias;
+}
+
+button{
+  cursor: cell;
+}
+
+a p{
+  cursor:inherit;
+}
+
+a button{
+  cursor: inherit;
+}
+
+p{
+  cursor: inherit;
+  pointer-events: none !important;
+}
+
+.dg{
+  display: none !important;
+  height: 0;
+  overflow: hidden;
+}
+
+/*====================BODY & BACKGROUND*/
+html, body{
+  margin: 0;
+  padding: 0;
+
+  background-color: var(--main-color);
+  width: 100%;
+  height:100%;
+  position: fixed;
+  inset: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: block;
+  scrollbar-color: var(--back-color) var(--main-color);
+  scrollbar-width: thin;
+  z-index: -33;
+  display: flex;
+  flex-direction: column;
+
+}
+
+/*=======================pseudo-Fenetres*/
+.windowStyle{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: var(--back-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--main-color);
+  overflow: hidden;
+  height: auto;
+  width: 95%;
+}
+
+.windowTitle{
+  width:100%;
+  height:44px;
+  background-color: var(--main-color);
+  border-radius: 0;
+  font-family: 'karrik';
+  font-weight: normal;
+  text-transform: uppercase;
+  font-size: 16.1px;
+  color: var(--back-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-left: 10px;
+  padding-right: 10px;
+  cursor: move;
+}
+
+
+.windowTitleLower{
+  font-family: 'velvelyne';
+  font-weight: bold;
+  font-size: 13.12px;
+}
+
+.toggleBtn{
+  color: var(--back-color);
+  background-color: var(--main-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--back-color);
+  width: 27px;
+  height: 27px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  transform: rotate(45deg);
+  cursor: copy;
+  padding: 0;
+}
+
+.toggleBtn:hover{
+  color: var(--main-color);
+  background-color: var(--back-color);
+}
+
+.windowContent{
+  height:77%;
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.icon{
+  fill: currentColor;
+  height: 13.12px;
+  width: auto;
+  pointer-events: none;
+  padding: 0;
+  margin: 0;
+}
+
+.textBtnStyle{
+  font-family: 'karrik';
+  font-size: 13.12px;
+  background-color: var(--back-color);
+  color: var(--main-color);
+  border-color: var(--main-color);
+  border-style: solid;
+  border-width: 1.75px;
+  border-radius: 16.1px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  width: 161px;
+  height: 77px;
+  align-self: flex-end;
+}
+
+.textBtnStyle:hover{
+  background-color: var(--main-color);
+  color: var(--back-color);
+  font-weight: bold;
+
+}
+
+/*==================INTERFACE*/
+#adminWelcome{
+  width: 100%;
+  height: 13.12vh;
+  padding: 13.12px;
+  padding-top: 7.77px;
+  margin: 0;
+  box-sizing: border-box;
+
+        p{
+          font-family: 'velvelyne';
+          font-weight: normal;
+          font-size: 13.12px;
+          color: var(--back-color);
+          margin: 0;
+        }
+
+        strong{
+          font-weight: bold;
+        }
+}
+
+#adminContainer{
+  width: 100%;
+  height: 90vh;
+  inset: 0;
+  overflow: hidden;
+  background-color: var(--back-color);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.adminSection{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 7.77px;
+  gap: 1vh;
+}

affiches/test/index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="../assets/favicon.svg" />
-    <title>TEST EVENT</title>
-    <style>
-      /*=========================== 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>

affiches/test333/index.html

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="../assets/favicon.svg" />
-    <link rel="stylesheet" href="./closedStyle.css">
-    <link rel="stylesheet" href="../style/animation.css">
-    <link rel="stylesheet" href="/style/typo.css">
-    <title>TEST EVENT 333</title>
-    <style>
-      /*=========================== 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>

archives/affiches/algorave.css

@@ -1,51 +0,0 @@
-.affiche-algorave {
-    grid-row: span 2;
-    padding: 0;
-    font-family: monospace;
-
-    img {
-        display: block;
-        width: 100%;
-    }
-
-    &:hover .description,
-    &:active .description {
-        opacity: 1;
-    }
-
-    .description {
-        opacity: 0;
-
-        padding: 10px;
-        
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: stretch;
-
-        background: rgba(0, 0, 0, 0.9);
-
-        ul {
-            padding: 0;
-            list-style-type: none;
-            text-align: justify;
-
-            flex: 1;
-            line-height: 2;
-        }
-
-        ul li {
-            display: inline
-        }
-
-        ul li:not(:last-child)::after {
-            content: ", ";
-        }
-    }
-}

archives/affiches/jdll2024/affiche.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Le LOL aux JDLL 2024</title>
-</head>
-<body>
-    <h1>Le LOL sera aux <a href="https://jdll.org/">JDLL 2024</a> !</h1>
-
-    <p>C'est le 25 et le 26 mai à l'<a href="https://www.openstreetmap.org/?mlat=45.73257&mlon=4.83185#map=19/45.73257/4.83185" target="_blank">ENS</a> ! Le LOL sera présent pendant tout l'événement pour se rencontrer, discuter et hacker ensemble. En plus de ça, nous allons proposer un temps d'expression libre sur le web.</p>
-
-    <p>Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.<br/>
-    Il n'y a aucun pré-requis, si ce n'est savoir utiliser un clavier.</p>
-
-    <p>Venez nous rencontrer, hacker ou bien discuter sur le stand.</p>
-</body>
-</html>

archives/affiches/jdll2024/back.svg

@@ -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>

archives/affiches/jdll2024/jdll2024.css

@@ -1,148 +0,0 @@
-.affiche-jdll2024 {
-    border-top-color: #fafaf5ff;
-    border-left-color: #fafaf5ff;
-    border-bottom-color: #868381ff;
-    border-right-color: #868381ff;
-    border-style: solid;
-    border-width: 4px;
-    background-color: #d3cfc9ff;
-    padding: 0;
-    color: black;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-items: stretch;
-    padding-bottom: 4px;
-}
-
-.affiche-jdll2024 iframe {
-    flex: 1;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-}
-
-.affiche-jdll2024 button {
-    border-top-color: #fafaf5ff;
-    border-left-color: #fafaf5ff;
-    border-bottom-color: #868381ff;
-    border-right-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-    background-color: #d3cfc9ff;
-}
-
-.affiche-jdll2024 header {
-    height: 25px;
-
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-
-    background: linear-gradient(to right, #112160ff, #a6c6f2ff);
-    padding: 2px 4px;
-    box-sizing: border-box;
-
-    column-gap: 4px;
-
-    border-bottom: solid 2px #d3cfc9ff;
-}
-
-.affiche-jdll2024 > :not(header) {
-    margin-left: 4px;
-    margin-right: 4px;
-}
-
-.affiche-jdll2024 header h1 {
-    flex: 1;
-    color: white;
-    margin: 0;
-    font-size: 1rem;
-    font-family: sans-serif;
-}
-
-.affiche-jdll2024 header > img {
-    height: 80%;
-}
-
-.affiche-jdll2024 header > button {
-    height: 100%;
-    display: block;
-    padding: 2px;
-}
-
-.affiche-jdll2024 button img {
-    height: 100%;
-    display: block;
-    box-sizing: border-box;
-}
-
-.affiche-jdll2024 nav {
-    padding: 2px;
-
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-
-    border-bottom: groove 2px #fafaf5ff;
-}
-
-.affiche-jdll2024 nav:first-of-type {
-    height: 40px;
-}
-
-.affiche-jdll2024 nav button {
-    height: 100%;
-    font-size: 0.6rem;
-    width: 50px;
-
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-}
-
-.affiche-jdll2024 nav button img {
-    height: 15px;
-}
-
-.affiche-jdll2024 nav hr {
-    flex: 1;
-    border: none;
-}
-
-.affiche-jdll2024 nav > img {
-    height: 100%;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 1px;
-}
-
-.affiche-jdll2024 nav input {
-    flex: 1;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-    font-size: 0.7rem;
-}
-
-.affiche-jdll2024 nav label {
-    font-size: 0.7rem;
-    margin-right: 1ex;
-}
-
-.affiche-jdll2024 nav:last-of-type {
-    border-bottom: none;
-}

archives/affiches/perm.css

@@ -1,35 +0,0 @@
-@font-face {
-    font-family: "Arvo";
-    src: url("./Arvo-Bold.ttf");
-    font-weight: bold;
-}
-
-.affiche-perm {
-    background: black url("./perm-bg.jpg");
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    text-align: center;
-
-    padding-left: 25px;
-    padding-right: 25px;
-
-    font-size: 0.9rem;
-    line-height: 1.5;
-}
-
-.affiche-perm h1 {
-    font-size: 1.8em;
-    margin-top: 50px;
-    font-weight: normal;
-    font-family: "Arvo", sans-serif;
-}
-
-.affiche-perm .event-hours {
-    font-weight: bold;
-    text-align: center;
-    margin-top: 25px;
-    margin-bottom: 25px;
-    font-size: 1.2em;
-    font-family: "Arvo";
-}

archives/index-ferme.html

@@ -1,125 +0,0 @@
-<!doctype html>
-<html lang="fr" data-theme="closed">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
-    <link rel="stylesheet" href="./style.old.css">
-    <title>L(. O.)L</title>
-  </head>
-  <body>
-    <!--<video autoplay muted loop src="./assets/video/background.webm" id="anim"></video>-->
-    <video autoplay muted loop src="./assets/video/close.webm" id="texture"></video>
-    <div id="mainContainer">
-      <div class="uiStyle" id="topBar">
-        <div class="left">
-          <img src="./assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
-          <p>L<strong>. ⚧. </strong>L<strong>. </strong></p>
-        </div>
-        <div class="right">
-          <a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
-          <a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
-          <a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
-          <a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
-          <a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
-        </div>
-        <button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
-          <svg class="icon" viewBox="0 0 53.73 53.59">
-            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="mainInfo">
-        <div class="uiStyle" id="title">
-          <p>
-            Hackerspace queer
-          </p>
-          <p id="desc">
-              Lieu de réappropriation, <br>
-              réparation & recyclage <br>
-              des objets techniques <br>
-              & technologiques
-          </p>
-        </div>
-        <div id="address">
-          <p>
-            7 place Chazette
-            <br>
-            69001 Lyon
-            <br> <br>
-            45° 46' 23.698" N
-            <br>
-            4° 50' 14.052" E
-          </p>
-          <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
-            <img src="./assets/logo_hackerspaces_monde.png">
-          </a>
-        </div>
-        <div class="uiStyle" id="openingHours">
-          <p>
-            Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
-            &ensp; &rarr; nocturne : &ensp;<br>
-            Ven. &emsp; <strong>21h &rarr; 5h</strong>
-          </p>
-        </div>
-        <div id="planContainer">
-          <img src="./assets/plan.svg" id="plan">
-          <svg id="fleche" viewBox="0 0 4215.93 2604.36">
-            <g>
-              <path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
-              <g>
-                <path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
-                <path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
-                <path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-              </g>
-            </g>
-            <rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
-          </svg>
-        </div>
-        <div class="uiStyle" id="lolOpener">
-          <p id="desc">Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :</p>
-          <div class="lolStatus">
-            <p id="closedStatus">FERMÉ...</p>
-          </div>
-        </div>
-      </div>
-      <div id="aboutSection">
-        <div class="uiStyle" id="aboutText">
-          <p>
-            Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
-            qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
-    				Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes.
-          </p>
-  				<p>
-            Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
-    				Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc.
-            Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles il y'a une place pour toi !
-          </p>
-    			<p>
-            Nous revendiquons l'ouverture du code et des techniques,
-    				le partage des connaissances et l'autogestion,
-            l'anti-capitalisme et l'anti-fascisme. <br><br>
-            Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
-            Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
-          </p>
-        </div>
-        <div id="eventSection">
-          <div class="uiStyle" id="title">
-            évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>

archives/index-ouvert.html

@@ -1,128 +0,0 @@
-<!doctype html>
-<html lang="fr" data-theme="open">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="./assets/favicon_open.svg" />
-    <link rel="stylesheet" href="./style.old.css">
-    <script src="./js/components/svg.js"></script>
-    <title>L(. O.)L</title>
-  </head>
-  <body>
-    <video autoplay muted loop src="./assets/video/background.webm" id="anim"></video>
-    <video autoplay muted loop src="./assets/video/open.webm" id="texture"></video>
-    <div id="mainContainer">
-      <div class="uiStyle" id="topBar">
-        <div class="left">
-          <img src="./assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
-          <p>L<strong>. ⚧. </strong>L<strong>. </strong></p>
-        </div>
-        <div class="right">
-          <a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
-          <a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
-          <a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
-          <a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
-          <a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
-        </div>
-        <button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
-          <svg class="icon" viewBox="0 0 53.73 53.59">
-            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="mainInfo">
-        <div class="uiStyle" id="title">
-          <p>
-            Hackerspace queer
-          </p>
-          <p id="desc">
-              Lieu de réappropriation, <br>
-              réparation & recyclage <br>
-              des objets techniques <br>
-              & technologiques
-          </p>
-        </div>
-        <div id="address">
-          <p>
-            7 place Chazette
-            <br>
-            69001 Lyon
-            <br> <br>
-            45° 46' 23.698" N
-            <br>
-            4° 50' 14.052" E
-          </p>
-          <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
-            <img src="./assets/logo_hackerspaces_monde.png">
-          </a>
-        </div>
-        <div class="uiStyle" id="openingHours">
-          <p>
-            Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
-            &ensp; &rarr; nocturne : &ensp;<br>
-            Ven. &emsp; <strong>21h &rarr; 5h</strong>
-          </p>
-        </div>
-        <div id="planContainer">
-          <img src="./assets/plan.svg" id="plan">
-          <lol-svg>
-            <svg id="fleche" viewBox="0 0 4215.93 2604.36">
-            <g>
-              <path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
-              <g>
-                <path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
-                <path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
-                <path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-              </g>
-            </g>
-            <rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
-          </svg>
-          </lol-svg>
-        </div>
-        <div class="uiStyle" id="lolOpener">
-          <p id="desc">&uarr; &uarr; &uarr; Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte</p>
-          <div class="lolStatus">
-            <p id="openStatus">Ouvert !</p>
-          </div>
-        </div>
-      </div>
-      <div id="aboutSection">
-        <div class="uiStyle" id="aboutText">
-          <p>
-            Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
-            qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
-    				Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes.
-          </p>
-  				<p>
-            Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
-    				Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc.
-            Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles il y'a une place pour toi !
-          </p>
-    			<p>
-            Nous revendiquons l'ouverture du code et des techniques,
-    				le partage des connaissances et l'autogestion,
-            l'anti-capitalisme et l'anti-fascisme. <br><br>
-            Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
-            Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
-          </p>
-        </div>
-        <div id="eventSection">
-          <div class="uiStyle" id="title">
-            évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>

index.html

@@ -1,90 +1,71 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
   <head>
-    <meta charset="UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style/typo.css">
-    <link rel="stylesheet" href="style/default.css">
-    <link rel="stylesheet" href="style/common.css">
-    <link rel="stylesheet" href="style/animation.css">
-    <link rel="stylesheet" href="style/main.css">
-
-    <link rel="stylesheet" href="style/responsive.css">
-      <!-- TEST CCS OUVERTURE
-        <link rel="stylesheet" href="status/openStyle.css">
-      -->
-    <!--
-    	<link rel="stylesheet" href="affiches/perm.css">
-    	<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
-    	<link rel="stylesheet" href="affiches/algorave.css">
-    -->
-    <title>L(. O.)L &mdash; Laboratoire Ouvert Lyonnais</title>
-  <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
+    <link rel="icon" type="image/svg" href="" />
+    <title>L(. O.)L</title>
   </head>
   <body>
-
-    <header>
-        <h1>
-            <img id="logo" src="./assets/logo/logo-forme.svg" alt="">
-            <span aria-hidden="true" class="cool-name">L<span class="trans-symbol">⚧</span>L</span>
-            <span class="plain-name">L.O.L.</span>
-        </h1>
-
-        <nav>
-            <ul>
-                <li><a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a></li>
-                <li><a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a></li>
-                <li><a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a></li>
-                <li><a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a></li>
-            </ul>
-        </nav>
-    </header>
-
-    <main>
-      <section id="homeContent">
-          <section id="titleSection" class="solidBox">
-              <h2>
+    <!--HORS VUE-->
+    <canvas id="canvas"></canvas>
+    <video autoplay muted loop src="./background.webm" id="background"></video>
+    <div id="mainContainer">
+      <div class="uiStyle" id="topBar">
+        <div class="left">
+          <img src="./src/assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
+          <p>L<strong>⚧</strong>L</p>
+        </div>
+        <div class="right">
+          <a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
+          <a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
+          <a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
+          <a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
+          <a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
+        </div>
+        <button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
+          <svg class="icon" viewBox="0 0 53.73 53.59">
+            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+          </svg>
+        </button>
+      </div>
+      <div id="mainInfo">
+        <div class="uiStyle" id="title">
+          <p>
             Hackerspace queer
-                  <small><br>
+          </p>
+          <p id="desc">
               Lieu de réappropriation, <br>
               réparation & recyclage <br>
               des objets techniques <br>
               & technologiques
-                  </small>
-              </h2>
-          </section>
-
-          <section id="hourSection" class="solidBox">
-            <h3>Horaires d'ouverture</h3>
-            <ol>
-                <li>
-                    Dim. <strong>15h &rarr; 23h</strong>
-                </li>
-                <li>
-                    Lun. <strong>15h &rarr; 23h</strong>
-                </li>
-                <li>
-                    Mar. <strong>15h &rarr; 23h</strong>
-                </li>
-            </ol>
-
-            <h3>Nocturne</h3>
-            <ol>
-                <li>Ven. <strong>21h &rarr; 5h</strong></li>
-            </ol>
-          </section>
-
-          <address class="transparentBox">
-              7 place Chazette<br>
-              69001 Lyon<br>
+          </p>
+        </div>
+        <div id="address">
+          <p>
+            7 place Chazette
+            <br>
+            69001 Lyon
+            <br> <br>
+            45° 46' 23.698" N
             <br>
-              45° 46' 23.698" N<br>
             4° 50' 14.052" E
-          </address>
-
-          <div id="planSection" class="transparentBox">
-            <div id="planContainer" class="transparentBox">
-      				<img src="./assets/plan.svg" id="plan" alt="Plan d'accès du local: 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">
+          </p>
+          <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
+            <img src="./src/assets/logo_hackerspaces_monde.png">
+          </a>
+        </div>
+        <div class="uiStyle" id="openingHours">
+          <p>
+            Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
+            Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
+            Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
+            &ensp; &rarr; nocturne : &ensp;<br>
+            Ven. &emsp; <strong>21h &rarr; 5h</strong>
+          </p>
+        </div>
+        <div id="planContainer">
+          <img src="./src/assets/plan.svg" id="plan">
           <svg id="fleche" viewBox="0 0 4215.93 2604.36">
             <g>
               <path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
@@ -106,399 +87,39 @@
             <rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
           </svg>
         </div>
+        <div class="uiStyle" id="lolOpener">
+          <p id="desc">Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :</p>
         </div>
-
-          <div id="extLinkSection" class="transparentBox">
-            <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
-                <img src="./assets/logo_hackerspaces_monde.png">
-            </a>
       </div>
-      </section>
-
-      <section id="statuSection" class="solidBox">
-        <div id="statusDesc">
-            <p>
-                Le LOL peut ouvrir en dehors des horaires habituels.
-                En fonction de nos envies et disponibilités.
-            </p>
-            <p>
-                <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
-            </p>
-        </div>
-        <a href="./status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
-        </section>
-      <section id="extraContent">
-        <section id="aboutSection" class="solidBox">
+      <div id="aboutSection">
+        <div class="uiStyle" id="aboutText">
           <p>
             Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
             qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
-                  Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
+    				Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes.
           </p>
   				<p>
             Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
     				Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc.
-                  Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles, il y'a une place pour toi !
+            Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles il y'a une place pour toi !
           </p>
     			<p>
-                Nous revendiquons l'ouverture du code et des techniques,<br>
-                le partage des connaissances et l'autogestion,<br>
+            Nous revendiquons l'ouverture du code et des techniques,
+    				le partage des connaissances et l'autogestion,
             l'anti-capitalisme et l'anti-fascisme. <br><br>
-                Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
-                Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
+            Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
+            Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
           </p>
-          </section>
-        <section id="eventSection" class="transparentBox">
-  			       <h3>Événements <small>à venir</small></h3>
-               <ul id="eventContent" class="borderBox">
-                 <li class="eventEntry">
-                   <button type="button" name="plus" class="iconBtnStyle">
-                     <a href="./affiches/test/" target="_blank">
-                       <svg viewBox="0 0 53.73 53.59" class="icon">
-                         <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-                       </svg>
-                     </a>
-                   </button>
-                   <details closed name="event">
-                     <summary>
-                       <div class="title">
-                         <h4>Test évènement</h4>
-                         <p class="date">13/12</p>
         </div>
-                       <p class="resume">Résumé de l'évènement </p>
-                     </summary>
-                     <p class="description">
-                       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                     </p>
-                   </details>
-                 </li>
-                 <li class="eventEntry">
-                   <button type="button" name="plus" class="iconBtnStyle">
-                     <a href="./affiches/test333/" target="_blank">
-                       <svg viewBox="0 0 53.73 53.59" class="icon">
-                         <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-                       </svg>
-                     </a>
-                   </button>
-                   <details closed name="event">
-                     <summary>
-                       <div class="title">
-                         <h4>Test évènement 333</h4>
-                         <p class="date">13/12</p>
+        <div id="eventSection">
+          <div class="uiStyle" id="title">
+            évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
           </div>
-                       <p class="resume">Résumé de l'évènement </p>
-                     </summary>
-                     <p class="description">
-                       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                     </p>
-                   </details>
-                 </li>
-               </ul>
-                    <!--
-          			<article class="event affiche-perm affiche" property="event" typeof="Event">
-          				<h1 property="name">Permanence du LOL</h1>
-
-          				<div property="description">
-          					<p>Venez chiller avec nous, partager un thé ou une biere.</p>
-
-          					<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
         </div>
-
-          				<p class="event-hours"><strong><span property="eventSchedule" typeof="Schedule">
-          					Tous les <data property="byDay" content="Tuesday">mardis</data> à partir de&nbsp;<data property="startTime" content="19:00">19h</data>
-          				</span><br/>
-          					au <span property="location" href="https://labolyon.fr/">local du LOL</span></strong></p>
-
-          				<p>Adhésion conseillée (prix libre)</p>
-          			</article>
-
-          			<article class="event affiche affiche-drags-nerds-hackathon">
-          				<style>
-          					@font-face {
-          						font-family: "Press Start 2P";
-          						src: url("./affiches/dragsnerds/PressStart2P-Regular-DogiNJoF.ttf");
-          						font-weight: normal;
-          					}
-
-          					@font-face {
-          						font-family: velvelyne;
-          						src: url("./affiches/dragsnerds/Velvelyne-Light-C9f5yZCm.ttf") format("truetype");
-          					}
-
-          					@font-face {
-          						font-family: velvelyne;
-          						src: url("./affiches/dragsnerds/Velvelyne-Bold-CR91h96S.ttf") format("truetype");
-          						font-weight: bold;
-          					}
-
-          					.affiche-drags-nerds-hackathon {
-          						background: white;
-          						grid-row: span 2;
-          						color: black;
-          						padding: 0;
-          						border-color: white;
-                      			line-height: 1.4;
-          						font-family: monospace;
-          						font-size: 1rem;
-          						padding-bottom: 35px;
-          					}
-
-          					.affiche-drags-nerds-hackathon > h2 {
-          						padding: 15px;
-          						margin: 0;
-          						font-family: velvelyne;
-          					}
-
-          					.affiche-drags-nerds-hackathon > p,
-          					.affiche-drags-nerds-hackathon > ul {
-          						padding: 5px 15px;
-          						margin: 0;
-          						margin-top: 7px;
-          						margin-bottom: 7px;
-          						padding-right: 15px;
-          					}
-
-          					.affiche-drags-nerds-hackathon > ul {
-          						padding-left: 30px;
-          					}
-
-          					.affiche-drags-nerds-hackathon li {
-          						margin-top: 10px;
-          						margin-bottom: 10px;
-          					}
-
-          					.affiche-drags-nerds-hackathon li::marker {
-          						content: "> ";
-          					}
-
-          					.affiche-drags-nerds-hackathon > img:first-of-type {
-          						display: block;
-          						width: 100%;
-          					}
-
-          					.affiche-drags-nerds-hackathon > p:first-of-type {
-          						background: black;
-          						color: white;
-          						margin-top: 0;
-          						margin-bottom: 15px;
-          						padding: 20px;
-          						padding-top: 0;
-          						font-weight: bold;
-          					}
-
-          					.affiche-drags-nerds-hackathon a {
-          						color: inherit;
-          						font-weight: bold;
-          						text-decoration: underline;
-          					}
-          				</style>
-
-          				<img src="./affiches/dragsnerds/drags-nerds-hackathon-header.png" alt="Drags & Nerds #2: Une image en noir et blanc avec le titre de l'événement et des photos détourées de drag queens.">
-
-          				<p>
-          					A tous&middot;tes les drags, tous&middot;tes les nerds et l'ensemble des personnes entre les deux.
-          					Vous êtes invité·es à la grande soirée Drags&Nerds du 22 mai 2026 au Grrrnd Zero !
-          				</p>
-
-          				<h2>&gt; Résidence et Hackathon</h2>
-
-          				<p>
-          					Pour se rencontrer et construire ensemble, une grande Résidence/Hackathon se déroulera du <strong><time datetime="2026-04-17T10:00:00">17</time> au <time datetime="2026-04-19T19:00:00">19&nbsp;Avril&nbsp;2026</time></strong>.
-          					<strong>Ça se passe au Laboratoire Ouvert Lyonnais</strong>, un Hackerspace queer de Lyon. 7 Place Louis Chazette 69001 Lyon.
-          				</p>
-
-          				<p>
-          					On construira nos performances, nos costumes, nos makeups, nos mises en scène...
-          					Tu as envie de faire du lip sync ? De jouer de ton synthé ? D'expérimenter de nouveaux sons ?
-          					Ou juste de donner un coup de pouce à des drags pour leurs show ?
-          					Il y a une place pour toi.
-          				</p>
-
-          				<ul>
-          					<li>Repas végétaliens le midi</li>
-          					<li>Outils pour souder, coudre, coder, couper, clouer et imprimer en 3D en libre service</li>
-          					<li>Masques FFP2 pour l'autodéfense sanitaire</li>
-          				</ul>
-
-          				<p style="text-align: center;">
-          					Inscrivez vous en envoyant un email à<br/><a href="mailto:drags-nerds@epickiwi.fr">drags‑nerds@epickiwi.fr</a><br/>
-          					Ou rendez vous sur <a href="https://drags-nerds.net/" target="_blank">drags‑nerds.net</a>
-          				</p>
-          			</article>
-
-          			<article class="event affiche affiche-debian-release-party" property="event" typeof="Event">
-          				<style>
-          					.affiche-debian-release-party {
-
-          						line-height: 1.4;
-          						grid-row: span 2;
-          						background: url("affiches/debian-background.png");
-          						background-size: cover;
-          						background-position: 50% 0;
-                                  color: white;
-
-          						a {
-          							color: #c91043;
-          							font-weight: bold;
-          						}
-
-          						li {
-          							margin-bottom: 1em;
-          						}
-
-          						small {
-          							display: block;
-          							opacity: 0.9;
-          							font-style: italic;
-          							margin-top: 1ex;
-          						}
-          					}
-          				</style>
-
-          				<h1 property="name" style="text-shadow: 3px 0 0 #c91043; text-transform: uppercase; text-align: center;">Debian Trixie<br/>release party</h1>
-
-          				<p>
-          					<a href="https://www.debian.org/releases/trixie/index.fr.html">Debian Trixie</a> sort <a href="https://lists.debian.org/debian-devel-announce/2025/07/msg00003.html">samedi 9 Août</a> !
-          					Pour marquer le coup (et aussi pour ne pas manquer une bonne occasion de bidouiller des ordinateurs ensemble) on va s'organiser une release party ce <strong>Samedi 9 Août à partir de 17h au LOL</strong>.
-          				</p>
-
-          				<p>
-          					<a href="https://www.debian.org/">Debian</a> c'est l'une des distributions Linux les plus populaires. Un système exploitation alternatif qui remplace <a href="https://endof10.org/fr/">Windows</a>. Elle est basée sur Linux et (majoritairement) composée de logiciels libres.
-          				</p>
-
-          				<p>
-          					Et <a href="https://www.debian.org/releases/trixie/index.fr.html">Trixie</a> c'est le petit nom de la nouvelle version stable de Debian. C'est pas tous les jours qu'une nouvelle version de Debian sort et ça représente un gros travail bénévole. Donc fêtons cette sortie !
-          				</p>
-
-          				<p>
-          					Il y aura des frites à prix libre proposés par l'<a href="https://wiki.labolyon.fr/doku.php?id=adelfrite">Adelfrite</a> aux alentours de 20h.
-          				</p>
-
-          				<ol style="list-style-type: disc;">
-          					<li>17h00 – <strong>Backup Tea Time</strong>. Il parait qu'il faut sauvegarder régulièrement ses données ? On va voir comment faire. <small>Apportez un support de stockage (Disque Dur externe, clé USB, etc...)</small></li>
-          					<li>19h00 – <strong>Install & full-upgrade Party</strong> On lance les installations (si vous voulez installer Debian) ou les mise à jour de nos machines vers Trixie. <small>Apportez vos laptops et vos serveurs !</small></li>
-          				</ol>
-
-          				<p>
-          					Vous pouvez venir avec un ordinateur Windows, un Linux ou même sans, juste pour voir.
-          					Il n'y a pas d'autre pré-requis que d'être curieux·euse et de savoir utiliser un clavier.
-          				</p>
-
-          				<p style="text-align: right; font-style: italic;">
-          					Rejoignez nous sur matrix:<br/>
-          					<code>#trixiereleaseparty-lyon:club1.fr</code>
-          				</p>
-          			</article>
-
-          			<article class="event affiche affiche-jamfetedelamusique" property="event" typeof="Event">
-          				<img src="/affiches/jamfetedelamusique.png" alt="Affiche de la jam ouverte du 21 Juin 2025 : Un motif abstrait généré de manière electronique." aria-labelledby="jam21062025-decription" />
-          				<div class="description" id="jam21062025-description">
-          					<h1 property="name">JAM OUVERTE</h1>
-          					<p property="description">La fête de la musique approche !
-                      C'est avec plaisir que nous vous invitons à venir bricoler, jouer, experimenter les sons, les images, les mélodies et le vacarme technique dans une JAM expérimentale et ouverte à tous·tes !
-                      Pour les novices, curieux, connaisseurs ou encore tous•tes celles et ceux qui veulent juste découvrir la musique et la vidéo décalée et experimentale, vous êtes les bienvenu•e•s !
-                      Rendez-vous 7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)
-                      La JAM se déroule de 14h à 18h, afin de laisser la soirée libre pour les nombreux événements de la ville en ce jour festif :)
-                      Ramenez vos synthés audio et vidéo, vos ordis ou vos contre-basses, tout est permis pour cette après-midi festive que nous vous proposons !
-                    </p>
-          					<p property="location">7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)</p>
-          					<p>
-          						<time datetime="2025-06-21T14:00:00" content="2025-06-21T14:00:00" property="startDate">21 Juin 14h</time>
-          						-
-          						<time datetime="2025-06-21T18:00:00" content="2025-06-21T18:00:00" property="endDate">18h</time>
-          					</p>
-          					<p>Prix libre, No CB, adhésion libre</p>
-          					<p property="abstract">Experimentations visuelles et sonores ouverte</p>
-          					<p>poster by CCC</p>
       </div>
-          			</article>
-
-          			<article class="event affiche-jdll2024 affiche">
-          				<header>
-          					<img src="/assets/favicon.svg" alt="Favicon du LOL" />
-          					<h1 id="jdll-2024-title">Le LOL aux JDLL 2024</h1>
-
-          					<button>
-          						<img src="/affiches/jdll2024/reduire.png" alt="Reduire" />
-          					</button>
-          					<button>
-          						<img src="/affiches/jdll2024/agrandir.png" alt="Agrandir" />
-          					</button>
-          					<button>
-          						<img src="/affiches/jdll2024/fermer.png" alt="Fermer" />
-          					</button>
-          				</header>
-          				<nav>
-          					<button id="jdll-2024-back">
-          						<img src="/affiches/jdll2024/back.png" alt="Back" />
-          						Back
-          					</button>
-          					<button id="jdll-2024-forward">
-          						<img src="/affiches/jdll2024/forward.png" alt="Back" />
-          						Forward
-          					</button>
-          					<button id="jdll-2024-home">
-          						<img src="/affiches/jdll2024/home.png" alt="Home" />
-          						Home
-          					</button>
-          					<hr>
-          					<img src="/affiches/jdll2024/tux.png" alt="Tux" />
-          				</nav>
-          				<nav>
-          					<label for="jdll-2024-location">Location : </label>
-          					<input type="url" name="location" id="jdll-2024-location" value="/jdll2024/affiche.html"/>
-          				</nav>
-          				<iframe src="/affiches/jdll2024/affiche.html" id="jdll-2024-iframe" frameborder="0"></iframe>
-          			</article>
-
-          			<script>
-          				(() => {
-          					const iframe = document.getElementById("jdll-2024-iframe");
-          					const initialValue = iframe.src;
-
-          					iframe.addEventListener("load", () => {
-          						document.getElementById("jdll-2024-location").value = iframe.src
-          						document.getElementById("jdll-2024-title").textContent = iframe.contentWindow.document.title
-          					})
-
-          					document.getElementById("jdll-2024-location").addEventListener("change", e => {
-          						iframe.src = e.target.value
-          					})
-
-          					document.getElementById("jdll-2024-back").addEventListener("click", () => {
-          						iframe.contentWindow.history.back()
-          					})
-
-          					document.getElementById("jdll-2024-forward").addEventListener("click", () => {
-          						iframe.contentWindow.history.forward()
-          					})
-
-          					document.getElementById("jdll-2024-home").addEventListener("click", () => {
-          						iframe.src = initialValue
-          					})
-          				})()
-          			</script>
-              -->
-          </section>
-      </section>
-      <video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
-      <video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
-      <video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
-      <canvas></canvas>
-    </main>
-
-    <section class="floatingWindow" id="posterWindow">
-      <div class="posterTitle">
-        <h4>test</h4>
-        <button type="button" name="close" class="iconBtnStyle" id="posterCloseBtn">
-          <svg viewBox="0 0 53.73 53.59" class="icon">
-            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-          </svg>
-        </button>
     </div>
-      <article id="posterContainer"></article>
-    </section>
-    <!-- SCRIPT PRINCIPAL -->
-        <script type="module" src="./js/main.js"></script>
-
+    <!--VUE ROOT APP-->
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

js/cuteTexture.js

@@ -1,71 +0,0 @@
-const target = document.querySelector('canvas');
-
-const ctx = target.getContext('2d');
-
-export let lolState = false;
-
-let scale = 0.7;
-
-function analogLikeNoise(){
-  let tH = target.height;
-  let tW = target.width;
-  //console.log('window dimensions :', tH, tW)
-  const img = ctx.createImageData(tW, tH);
-  let offset = 0;
-  let index = 0;
-  let brightness = 0;
-
-  for(let x = 0; x<tW; x++){
-    const sx = x * scale + offset
-    for(let y = 0; y<tH; y++){
-      let lum = Math.random()*161
-
-      //img.data[index++] = lum*150/255;
-      index++
-      img.data[index++] = lum;
-      img.data[index++] = lum;
-      img.data[index++] = 255;
-      }
-    }
-  ctx.putImageData(img, 0, 0);
-
-  offset ++;
-  if(offset>1024){
-    offset = 0;
-  }
-}
-
-let time = 0
-
-function scanlines(){
-  time += 0.05;
-  let tH = target.height;
-  let tW = target.width;
-  //console.log('window dimensions :', tH, tW)
-  const img = ctx.createImageData(tW, tH);
-  let index = 0;
-
-  for(let y = 0; y<tH; y++){
-    for(let x = 0; x<tW; x++){
-      let lum = (Math.sin(y*2 - time*3.1415) * 44) + 161;
-
-      //img.data[index++] = lum;
-      index++;
-      img.data[index++] = lum;
-      //img.data[index++] = lum + Math.random()*32;
-      index++
-      img.data[index++] = 255;
-      }
-    }
-  ctx.putImageData(img, 0, 0);
-}
-
-export function scanlinesAnimation(){
-    scanlines();
-    requestAnimationFrame(scanlinesAnimation);
-}
-
-export function noiseAnimation(){
-    analogLikeNoise();
-    requestAnimationFrame(noiseAnimation);
-}

js/events.js

@@ -1,87 +0,0 @@
-export async function loadEvents(){
-  let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');
-
-  //console.log("source buttons : ", btnList)
-
-  let displayWindow = document.querySelector('#posterWindow');
-
-  let displayContainer = document.querySelector('#posterContainer');
-
-  let closeBtn = document.querySelector('#posterCloseBtn');
-
-  closeBtn.addEventListener('mousedown', () => {
-    displayWindow.style.visibility  = 'collapse';
-    displayContainer.replaceChildren();
-  })
-
-  closeBtn.addEventListener('touchstart', () => {
-    displayWindow.style.visibility  = 'collapse';
-    displayContainer.replaceChildren();
-  })
-
-  async function getPoster(src){
-    let res = await fetch(src);
-    if (res.ok){
-      let html_text = await res.text()
-      let html = new DOMParser().parseFromString(html_text, "text/html");
-        return html
-    } else{
-      console.log('error 333');
-        return
-    }
-  }
-
-  let eventList = [];
-
-  if( btnList.length > 0 ){
-    for (let btn of btnList ){
-      let link = btn.children[0];
-      link.style.pointerEvents = 'none';
-
-      //console.log(link.href);
-
-      let posterPage = await getPoster(link.href);
-
-      //console.log('selected poster: ', posterPage)
-
-      let titleData = posterPage.querySelector('title');
-      //console.log(titleData);
-
-      let styleList = Array.from(posterPage.querySelectorAll('head > style'));
-      //console.log(styleList)
-
-      styleList.splice(0,1);
-      //console.log(styleList)
-
-      eventList.push(
-        {
-          content: posterPage.querySelector('main'),
-          title: titleData.innerText,
-          stylesheet: styleList,
-          sourceBtn: btn
-        }
-      );
-    }
-  }
-
-  //console.log("event list : ", eventList);
-
-  if (eventList.length > 0){
-
-    eventList.forEach( (obj) =>{
-      let btn = obj.sourceBtn;
-      let content = obj.content;
-      let title = obj.title;
-      for (let style of obj.stylesheet){
-        document.head.append(style);
-      }
-      btn.addEventListener( 'click', () => {
-        //console.log("selection :", content)
-        displayWindow.style.visibility = 'visible';
-        let targetTitle = displayWindow.querySelector('h4');
-        targetTitle.innerText = title;
-        displayContainer.replaceChildren(content);
-      })
-    })
-  }
-}

js/index.js

@@ -1,22 +0,0 @@
-async function importOuverture(){
-    const res = await fetch("/status/index.html")
-    if(!res.ok){
-        throw new Error(`Server responded with status ${res.status} ${res.statusText}`)
-    }
-    let html_text = await res.text()
-    let html = new DOMParser().parseFromString(html_text, "text/html");
-
-    for(let style of html.querySelectorAll("head > style")) {
-        document.head.append(style)
-    }
-
-    let textStatus = html.querySelector("#statusText").textContent;
-    let statusBox = document.querySelector('#statusText');
-    statusBox.textContent = textStatus;
-}
-
-importOuverture()
-
-for( let btn of document.querySelectorAll(".iconBtnStyle")){
-  btn.style.visibility = 'visible';
-}

js/main.js

@@ -1,86 +0,0 @@
-import { loadEvents } from './events.js'
-import { loadStatus } from './status.js'
-import { scanlinesAnimation } from './cuteTexture.js'
-import { noiseAnimation } from './cuteTexture.js'
-
-loadEvents();
-loadStatus();
-
-// =================================== background texture
- let textureVideo = document.querySelectorAll('main > #texture');
-
-for (let video of textureVideo){
-  video.style.visibility = 'collapse';
-}
-
-let textureCanvas = document.querySelector('main > canvas');
-textureCanvas.style.visibility = 'visible';
-
-console.log(textureCanvas);
-
-//console.log(textureVideo)
-
-scanlinesAnimation();
-// ======================================== stops here !
-
-
-let target = document.querySelector('#posterWindow');
-
-let startTarget = target.querySelector('.posterTitle');
-
-console.log('selected target :', startTarget);
-
-let startX, startY;
-let clicked = false;
-
-startTarget.addEventListener('mousedown', (event) => {
-  startX = event.pageX;
-  startY = event.pageY;
-  clicked = true;
-  console.log('clicking...')
-})
-
-startTarget.addEventListener('touchstart', (event) => {
-  startX = event.pageX;
-  startY = event.pageY;
-  clicked = true;
-  console.log('touching...')
-})
-
-document.addEventListener('mousemove', (event) => {
-  if(clicked){
-    console.log('moving...')
-    let currentX = event.pageX;
-    let currentY = event.pageY;
-    let moveX = target.offsetLeft + currentX - startX;
-    target.style.left =  moveX + 'px';
-    let moveY = target.offsetTop + currentY - startY;
-    target.style.top = moveY + 'px';
-    startX = currentX;
-    startY = currentY;
-  }
-});
-
-document.addEventListener('touchmove', (event) => {
-  if(clicked){
-    console.log('moving...')
-    let currentX = event.pageX;
-    let currentY = event.pageY;
-    let moveX = target.offsetLeft + currentX - startX;
-    target.style.left =  moveX + 'px';
-    let moveY = target.offsetTop + currentY - startY;
-    target.style.top = moveY + 'px';
-    startX = currentX;
-    startY = currentY;
-  }
-});
-
-document.addEventListener('mouseup', () => {
-  console.log('STOP !')
-  clicked = false;
-})
-
-document.addEventListener('touchend', () => {
-  console.log('STOP !')
-  clicked = false;
-})

js/status.js

@@ -1,22 +0,0 @@
-export async function loadStatus(){
-  let res = await fetch('/status/index.ouvert.html');
-
-  let html_text = await res.text()
-  let html = new DOMParser().parseFromString(html_text, "text/html");
-
-  let target = document.querySelector('#statuSection');
-
-  let hiddenBtn = target.querySelector('a');
-
-  hiddenBtn.style.visibility = 'collapse';
-
-  let status = html.querySelector('#lolStatus');
-  let icon = html.querySelector('link[rel="icon"]');
-  let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
-  //console.log("selected style : ", style);
-
-  document.head.append(icon);
-  document.head.append(style);
-
-  target.appendChild(status);
-}

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "lolv333",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vite-svg-loader": "^5.1.1",
+    "vue": "^3.5.39",
+    "vue3-moveable": "^0.28.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "vite": "^8.1.1"
+  }
+}

readMe.MD

@@ -1,17 +0,0 @@
-Ce document sert à échanger et partager des idées et trucs à faire pour continuer la mise à jour du site du LOL :
-
->si possible écrire tous les noms de variables en Pascal Case (pas sur du nom maisUnTrucCommeCa), je trouve ça plus lisible
-
-> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" voir dernière entrée (***)
-
-> j'attends vos retours pour savoir qu'est ce qu'il faut rajouter/ modifier ?
-
-> je sais tjrs pas comment désactiver la video pour les personnes qui veulent pas d'effets visuels
-
-> ajout du bouton plus pour les évènements => création d'event sur des pages séparées, importées avec js (remplacé par lien en version dégradé )
-
->(***) mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire)
-        modifier le lien vers le dossier au lieu de ''index.ouvert.html' dans la page principale
-        changer le fetch dans status.js
-
-> problème de gestion des évènement tactiles, rien ne marche ...

src/App.vue

@@ -0,0 +1,101 @@
+<script setup>
+  import PlayerIcon from './assets/icons/player.svg'
+  import LinkIcon from './assets/icons/folder.svg'
+</script>
+
+<template>
+  <Teleport to="#topBar .left" defer>
+    <lolStatusDiv></lolStatusDiv>
+  </Teleport>
+  <Teleport to="#lolOpener.uiStyle" defer>
+    <lolStatusDiv></lolStatusDiv>
+  </Teleport>
+  <eventDiv></eventDiv>
+  <eventPannel
+      v-show="pannelStatus.activePannels.includes('event')"
+      @focus="focusPannel('event')"
+      @close="closePannel('event')"
+      :class="{zBase: pannelStatus.focus !== 'event', zFocus: pannelStatus.focus === 'event'}"
+    ></eventPannel>
+  <playerPannel
+      v-show="pannelStatus.activePannels.includes('player')"
+      @focus="focusPannel('player')"
+      @close="closePannel('player')"
+      :class="{zBase: pannelStatus.focus !== 'player', zFocus: pannelStatus.focus === 'player'}"
+    ></playerPannel>
+  <linkPannel
+      v-show="pannelStatus.activePannels.includes('link')"
+      @focus="focusPannel('link')"
+      @close="closePannel('link')"
+      :class="{zBase: pannelStatus.focus !== 'link', zFocus: pannelStatus.focus === 'link'}"
+    ></linkPannel>
+    <Teleport to="#openingHours" defer>
+      <div id="btnContainer">
+        <button type="button" name="link" class="iconBtnStyle" @click="openPannel('link')">
+          <LinkIcon name="close" class="icon"/>
+        </button>
+        <button type="button" name="player" class="iconBtnStyle" @click="openPannel('player')">
+          <PlayerIcon name="close" class="icon"/>
+        </button>
+      </div>
+    </Teleport>
+</template>
+
+<style scoped>
+  #btnContainer{
+    position: absolute;
+    left: 7.77px;
+    display: flex;
+    flex-direction: column;
+    gap: 7.77px;
+    margin-top: -88px;
+
+    .iconBtnStyle{
+      width: 33px;
+      height: 33px;
+      border-radius: 16.1px;
+    }
+  }
+</style>
+
+<script>
+  import { dataStorage } from './dataExchange.js'
+
+  import { cuteAndCyber } from './artAndTexture.js'
+
+  export default {
+    name : 'App',
+    computed: {
+      pannelStatus(){
+        return dataStorage
+      }
+    },
+    methods: {
+      focusPannel(str){
+        if(this.pannelStatus.activePannels.includes(str)){
+          this.pannelStatus.focus = str
+        }
+      },
+      closePannel(str){
+        console.log('closing...')
+        const index = this.pannelStatus.activePannels.indexOf(str)
+        if( index !== -1){
+          this.pannelStatus.activePannels.splice(index, 1)
+          if(this.pannelStatus.focus === str){
+            this.pannelStatus.focus = null
+          }
+        }
+      },
+      openPannel(str){
+        if(!(this.pannelStatus.activePannels.includes(str))){
+          this.pannelStatus.activePannels.push(str)
+        }
+        this.focusPannel(str)
+      }
+    },
+    mounted(){
+      cuteAndCyber();
+      console.log("Vue root app is fully loaded!");
+    }
+  };
+</script>

src/artAndTexture.js

@@ -0,0 +1,148 @@
+import { lolState } from './lolStatus.js'
+
+const arr = []
+for (let i = 0; i < 256; i++){
+  arr.push(i)
+}
+
+function createPermTable(){
+  let data = [...arr]
+  //console.log('base :', arr)
+  for (let i = data.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [data[i], data[j]] = [data[j], data[i]];
+  }
+  //console.log('result :', permutationTable)
+    return data
+}
+
+const perm = createPermTable();
+const p = [...perm, ...perm];
+
+const F2 = 0.5 * (Math.sqrt(3) - 1); // Skew factor for 2D
+const G2 = (3 - Math.sqrt(3)) / 6;   // Unskew factor for 2D
+const scale = 0.7
+
+const target = document.querySelector('#canvas');
+
+const ctx = target.getContext('2d');
+
+// 12 gradient vectors for 2D Simplex Noise
+const grad3 = [
+  [1, 1], [-1, 1], [1, -1], [-1, -1],
+  [1, 0], [-1, 0], [0, 1], [0, -1],
+  [1, 2], [-1, 2], [2, 1], [-2, 1]
+];
+
+function simplex(x, y) {
+  // Step 1: Skew input coordinates to simplex grid
+  const s = (x + y) * F2; // Skew factor
+  const i = Math.floor(x + s); // Simplex grid i
+  const j = Math.floor(y + s); // Simplex grid j
+
+  // Step 2: Unskew to get (x0, y0) in Cartesian space (distance to (i,j))
+  const t = (i + j) * G2;
+  const x0 = x - (i - t); // Unskewed x in [0,1)
+  const y0 = y - (j - t); // Unskewed y in [0,1)
+
+  // Step 3: Determine which simplex (triangle) the point is in
+  let i1, j1; // Offsets for the other two simplex vertices
+  if (x0 > y0) {
+    i1 = 1; j1 = 0; // Lower triangle (x0 > y0)
+  } else {
+    i1 = 0; j1 = 1; // Upper triangle (x0 ≤ y0)
+  }
+
+  // Step 4: Coordinates of the other two simplex vertices
+  const x1 = x0 - i1 + G2; // Distance to (i+i1, j+j1)
+  const y1 = y0 - j1 + G2;
+  const x2 = x0 - 1 + 2 * G2; // Distance to (i+1, j+1)
+  const y2 = y0 - 1 + 2 * G2;
+
+  // Step 5: Hash indices for the 3 simplex vertices
+  const ii = i & 255;
+  const jj = j & 255;
+  const gi0 = p[ii + p[jj]] % 12;    // (i,j) gradient index
+  const gi1 = p[ii + i1 + p[jj + j1]] % 12; // (i+i1,j+j1) gradient index
+  const gi2 = p[ii + 1 + p[jj + 1]] % 12;  // (i+1,j+1) gradient index
+
+  // Step 6: Compute contributions from each vertex
+  let t0 = 0.5 - x0 * x0 - y0 * y0; // Falloff (t^4 fade)
+  const n0 = t0 < 0 ? 0 : Math.pow(t0, 4) * (grad3[gi0][0] * x0 + grad3[gi0][1] * y0);
+
+  let t1 = 0.5 - x1 * x1 - y1 * y1;
+  const n1 = t1 < 0 ? 0 : Math.pow(t1, 4) * (grad3[gi1][0] * x1 + grad3[gi1][1] * y1);
+
+  let t2 = 0.5 - x2 * x2 - y2 * y2;
+  const n2 = t2 < 0 ? 0 : Math.pow(t2, 4) * (grad3[gi2][0] * x2 + grad3[gi2][1] * y2);
+
+  // Step 7: Sum contributions and normalize (2D Simplex ranges ~[-1, 1])
+  return 70 * (n0 + n1 + n2); // 70 scales to ~[-1, 1]
+}
+
+function analogLikeNoise(){
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let offset = 0;
+  let index = 0;
+  let brightness = 0;
+
+  for(let x = 0; x<tW; x++){
+    const sx = x * scale + offset
+    for(let y = 0; y<tH; y++){
+      let lum = Math.random()*161
+
+      //img.data[index++] = lum*150/255;
+      index++
+      img.data[index++] = lum;
+      img.data[index++] = lum;
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+
+  offset ++;
+  if(offset>1024){
+    offset = 0;
+  }
+}
+
+let time = 0
+
+function scanlines(){
+  time += 0.05;
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let index = 0;
+
+  for(let y = 0; y<tH; y++){
+    for(let x = 0; x<tW; x++){
+      let lum = (Math.sin(y*2 - time *2) * 50) +128;
+
+      //img.data[index++] = lum;
+      index++;
+      img.data[index++] = lum + Math.random()*16;
+      //img.data[index++] = lum + Math.random()*32;
+      index++
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+}
+
+export function cuteAndCyber(){
+  if(!(lolState.isOpen)){
+    document.querySelector('#background').style.visibility = 'hidden';
+    analogLikeNoise();
+    requestAnimationFrame(cuteAndCyber);
+  }else{
+    scanlines();
+    document.querySelector('#background').playbackRate = 0.777;
+    document.querySelector('#background').style.visibility = 'visible';
+    requestAnimationFrame(cuteAndCyber);
+  }
+}

src/assets/favicon.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="94.468002"
+   height="94.468002"
+   viewBox="0 0 94.468002 94.468003"
+   sodipodi:docname="favicon.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="130.08"
+   inkscape:export-ydpi="130.08"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1341"
+     inkscape:window-height="927"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="4.8680853"
+     inkscape:cx="38.824299"
+     inkscape:cy="53.306379"
+     inkscape:current-layer="svg2"
+     inkscape:window-x="56"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:#ffff4d;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4542"
+     width="88.88665"
+     height="88.88665"
+     x="2.7906749"
+     y="2.7906749" />
+  <circle
+     style="opacity:1;fill:#ffff4d;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="circle868"
+     cx="47.234001"
+     cy="47.234001"
+     r="16.613539" />
+</svg>

src/components/EventContent.vue

@@ -0,0 +1,145 @@
+<template>
+  <Teleport to="#eventSection" defer>
+    <div id="eventContainer">
+      <div class="eventEntry" v-for="item of displayedEvents" :key="item.title" @click="openEvent(item)">
+        <div class="titleSection">
+          <p class="title">{{item.title}}</p>
+          <p class="date">{{item.date}} &rarr; {{item.time}}</p>
+        </div>
+        <div class="subtitleSection">
+          <p class="subtitle">{{item.subtitle}}</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+  #eventContainer{
+    width:100%;
+    height: auto;
+    max-height: 90vh;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 7.77px;
+    padding-top: 7.77px;
+    box-sizing: border-box;
+
+    @media(min-width: 700px){
+      max-height: 54vh;
+    }
+    @media(min-width: 1300px){
+      max-height: 46.5vh;
+    }
+
+          .eventEntry{
+            width: 90%;
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            border-color: var(--back-color);
+            border-style: solid;
+            border-width: thin;
+            border-radius: 16.1px;
+            flex-shrink: 0;
+            gap: 0;
+            mix-blend-mode: exclusion;
+            filter: contrast(200%);
+
+                  .titleSection{
+                    width: 100%;
+                    height: 44px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: flex-start;
+                    align-items: center;
+                    box-sizing: border-box;
+                    padding-top: 7.77px;
+                    pointer-events: none;
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-size: 16.1px;
+                      font-weight: bold;
+                      color: var(--back-color);
+                      height: 50%;
+                      margin: 0;
+                      padding: 0;
+                      text-transform: uppercase;
+                    }
+
+                    p.date{
+                      font-family: 'karrik';
+                      font-weight: normal;
+                      font-size: 9px;
+                      text-transform: none;
+                    }
+
+            }
+
+            .subtitleSection{
+              width: 100%;
+              height: auto;
+              padding-right: 16.1px;
+              padding-left: 16.1px;
+              box-sizing: border-box;
+              position: relative;
+              margin-top: 0;
+              padding-top: 0;
+              pointer-events: none;
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-size: 13.12px;
+                      font-weight: normal;
+                      color: var(--back-color);
+                      white-space: pre-line;
+                    }
+            }
+    }
+
+    .eventEntry:hover{
+      background-color: var(--back-color);
+      color: var(--main-color);
+      mix-blend-mode: normal;
+
+      p{
+        color: var(--main-color);
+      }
+    }
+  }
+
+</style>
+
+<script>
+  import { watch } from 'vue'
+  import { lolEventsList } from '../lolEvents.js'
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'EventContent',
+    methods: {
+      openEvent(obj){
+        console.log('updating...')
+        dataStorage.selectedEvent = obj;
+        if (dataStorage.activePannels.includes('event')){
+          dataStorage.focus = 'event'
+        } else {
+          dataStorage.activePannels.push('event')
+          dataStorage.focus = 'event'
+        }
+      }
+    },
+    computed: {
+      displayedEvents(){
+        return lolEventsList
+      }
+    },
+    mounted(){
+      console.log("Event list is loaded!");
+    }
+  };
+</script>

src/components/EventInfoPannel.vue

@@ -0,0 +1,115 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="eventPannel" class="windowStyle" ref="eventPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          {{displayedEvent.title}}
+        </p>
+        <button type="button" class="closeBtn" @mousedown.stop="closePannel" @touchstart.stop="closePannel">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="eventContent">
+        <p class="date">
+          {{displayedEvent.date}} &rarr; {{displayedEvent.time}}
+        </p>
+        <p>{{displayedEvent.desc}}</p>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+
+  #eventPannel{
+    position: fixed;
+    width: 250px;
+    height: auto;
+    max-height: 250px;
+    top: 161px;
+    left: 77px;
+    padding-bottom: 3.33px;
+
+    @media(min-width:650px){
+        left: 333px;
+    }
+
+    @media(min-width: 1300px){
+      width: 333px;
+      max-height: 333px;
+      top: 222px;
+      left: 1000px;
+    }
+
+
+          #eventContent{
+            padding: 7.77px;
+            align-items: flex-start;
+            justify-content: start;
+            overflow-y: scroll;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: normal;
+                    font-size: 13.12;
+                    color: var(--main-color);
+                    margin: 0;
+                    padding: 0;
+                    margin-bottom: 3.33px;
+                    margin-left: 7.77px;
+                    margin-right: 13.12px;
+                    white-space: pre-line;
+                  }
+
+                  p.date{
+                    font-family: 'karrik';
+                  }
+          }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'EventInfoPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      displayedEvent(){
+        return dataStorage.selectedEvent
+      },
+      isActive(){
+        return dataStorage.eventInfoActive
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      closePannel(){
+        this.$emit('close')
+      }
+    },
+    mounted(){
+      this.target = this.$refs.eventPannel;
+      console.log("Event info pannel is loaded!");
+    }
+  };
+</script>

src/components/LinkPannel.vue

@@ -0,0 +1,141 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="linkPannel" class="windowStyle" ref="linkPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Liens utiles
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="linkContent">
+        <p id="info">Par ici on poste pleins de truc qu'on trouve utiles, n'hésite pas à fouiller </p>
+        <a id="linkItem" v-for="item of displayedLinks" :href="item.href" class="textBtnStyle">
+          <p><strong>{{item.title}}</strong><br>{{item.desc}}</p>
+        </a>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #linkPannel{
+    position: fixed;
+    width: 222px;
+    height: 333px;
+    top: 222px;
+    left: 117px;
+
+    @media(min-width:650px){
+        left: 477px;
+    }
+
+    @media(min-width: 1300px){
+      width: 333px;
+      height: 444px;
+      top: 420px;
+      left: 555px;
+    }
+  }
+
+  #linkContent{
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+          p#info{
+            padding-right: 7.77px;
+            padding-left: 7.77px;
+            font-family: 'velvelyne';
+            font-weight: normal;
+            font-size: 13.12px;
+            color: var(--main-color);
+            border-width:  0 0 1.61px 0;
+            border-style: solid;
+            border-color: var(--main-color);
+            padding-bottom: 7.77px;
+            margin-bottom: 0;
+          }
+  }
+
+  #linkItem{
+    width: 100%;
+    padding-right: 13.12px;
+    padding-left: 13.12px;
+    font-family: 'velvelyne';
+    font-size: 13.12px;
+    border-radius: 0;
+    border-width: 0 0 1.61px 0;
+    text-align: left;
+    justify-content: flex-start;
+    box-sizing: border-box;
+
+          strong{
+            text-transform: uppercase;
+            font-family: 'karrik';
+            font-weight: normal;
+            font-size: 16.1px;
+          }
+
+          p{
+            border-width: 0;
+            padding-bottom: 0;
+            margin-bottom: 7.77px;;
+          }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { lolLinkList } from '../lolLinks.js'
+
+  export default {
+    name : 'LinkPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      displayedLinks(){
+        return lolLinkList
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.linkPannel;
+      console.log("Link pannel is loaded!");
+    }
+  };
+</script>