init: version basique sans js et sans menu sur tel + division en 2 fichier html pour lolOpener

.gitignore

@@ -1,24 +0,0 @@
-# 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

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

README.md

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

admin/Admin.vue

@@ -1,26 +0,0 @@
-<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

@@ -1,359 +0,0 @@
-<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

@@ -1,363 +0,0 @@
-<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

@@ -1,367 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-<!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

@@ -1,62 +0,0 @@
-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

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

admin/style.css

@@ -1,248 +0,0 @@
-: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;
-}

index-ferme.html

@@ -1,20 +1,20 @@
 <!doctype html>
-<html lang="fr">
+<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="" />
+    <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
+    <link rel="stylesheet" href="./style.css">
     <title>L(. O.)L</title>
   </head>
   <body>
-    <!--HORS VUE-->
-    <canvas id="canvas"></canvas>
-    <video autoplay muted loop src="./background.webm" id="background"></video>
+    <!--<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="./src/assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
-          <p>L<strong>⚧</strong>L</p>
+          <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>
@@ -52,7 +52,7 @@
             4° 50' 14.052" E
           </p>
           <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
-            <img src="./src/assets/logo_hackerspaces_monde.png">
+            <img src="./assets/logo_hackerspaces_monde.png">
           </a>
         </div>
         <div class="uiStyle" id="openingHours">
@@ -65,7 +65,7 @@
           </p>
         </div>
         <div id="planContainer">
-          <img src="./src/assets/plan.svg" id="plan">
+          <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"/>
@@ -89,6 +89,9 @@
         </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">
@@ -118,8 +121,5 @@
         </div>
       </div>
     </div>
-    <!--VUE ROOT APP-->
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

index-ouvert.html

@@ -0,0 +1,125 @@
+<!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.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/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">
+          <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">&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>

package.json

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

src/App.vue

@@ -1,101 +0,0 @@
-<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

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

@@ -1,76 +0,0 @@
-<?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

@@ -1,145 +0,0 @@
-<template>
-  <Teleport to="#eventSection" defer>
-    <div id="eventContainer">
-      <div class="eventEntry" v-for="item of displayedEvents" :key="item.title" @click="openEvent(item)">
-        <div class="titleSection">
-          <p class="title">{{item.title}}</p>
-          <p class="date">{{item.date}} &rarr; {{item.time}}</p>
-        </div>
-        <div class="subtitleSection">
-          <p class="subtitle">{{item.subtitle}}</p>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-  #eventContainer{
-    width:100%;
-    height: auto;
-    max-height: 90vh;
-    overflow-y: scroll;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 7.77px;
-    padding-top: 7.77px;
-    box-sizing: border-box;
-
-    @media(min-width: 700px){
-      max-height: 54vh;
-    }
-    @media(min-width: 1300px){
-      max-height: 46.5vh;
-    }
-
-          .eventEntry{
-            width: 90%;
-            height: auto;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            border-color: var(--back-color);
-            border-style: solid;
-            border-width: thin;
-            border-radius: 16.1px;
-            flex-shrink: 0;
-            gap: 0;
-            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

@@ -1,115 +0,0 @@
-<script setup>
-    import CloseIcon from '../assets/icons/close.svg'
-</script>
-
-<template>
-    <div id="eventPannel" class="windowStyle" ref="eventPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
-      <Moveable
-          className="moveable"
-          :target="target"
-          :draggable="true"
-          @drag="onDrag"
-      />
-      <div class="windowTitle">
-        <p>
-          {{displayedEvent.title}}
-        </p>
-        <button type="button" class="closeBtn" @mousedown.stop="closePannel" @touchstart.stop="closePannel">
-          <CloseIcon name="close" class="icon"/>
-        </button>
-      </div>
-      <div class="windowContent" id="eventContent">
-        <p class="date">
-          {{displayedEvent.date}} &rarr; {{displayedEvent.time}}
-        </p>
-        <p>{{displayedEvent.desc}}</p>
-      </div>
-    </div>
-</template>
-
-<style scoped>
-
-  #eventPannel{
-    position: fixed;
-    width: 250px;
-    height: auto;
-    max-height: 250px;
-    top: 161px;
-    left: 77px;
-    padding-bottom: 3.33px;
-
-    @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

@@ -1,141 +0,0 @@
-<script setup>
-    import CloseIcon from '../assets/icons/close.svg'
-</script>
-
-<template>
-    <div id="linkPannel" class="windowStyle" ref="linkPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
-      <Moveable
-          className="moveable"
-          :target="target"
-          :draggable="true"
-          @drag="onDrag"
-      />
-      <div class="windowTitle">
-        <p>
-          Liens utiles
-        </p>
-        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
-        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
-          <CloseIcon name="close" class="icon"/>
-        </button>
-      </div>
-      <div class="windowContent" id="linkContent">
-        <p id="info">Par ici on poste pleins de truc qu'on trouve utiles, n'hésite pas à fouiller </p>
-        <a id="linkItem" v-for="item of displayedLinks" :href="item.href" class="textBtnStyle">
-          <p><strong>{{item.title}}</strong><br>{{item.desc}}</p>
-        </a>
-      </div>
-    </div>
-</template>
-
-<style scoped>
-  /*================= Mise en page:
-    => Mobile First : par défaut, moins de 500px
-    => Tablette et PC format haut : de 500 à 1000px
-    => PC large : à partir de 1000px
-  */
-
-  /*+++++++++++++++++ COPYBOX
-      ================ PC HAUT/IPAD
-      @media(min-width:650px){}
-      ================ PC LARGE
-      @media(min-width:1300px){}
-  */
-
-  #linkPannel{
-    position: fixed;
-    width: 222px;
-    height: 333px;
-    top: 222px;
-    left: 117px;
-
-    @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>

src/components/PlayerPannel.vue

@@ -1,204 +0,0 @@
-<script setup>
-    import CloseIcon from '../assets/icons/close.svg'
-
-    import PlayIcon from '../assets/icons/play.svg'
-    import PauseIcon from '../assets/icons/pause.svg'
-    import NextIcon from '../assets/icons/next.svg'
-    import PrevIcon from '../assets/icons/prev.svg'
-</script>
-
-<template>
-    <div id="playerPannel" class="windowStyle" ref="playerPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
-      <Moveable
-          className="moveable"
-          :target="target"
-          :draggable="true"
-          @drag="onDrag"
-      />
-      <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
-        <CloseIcon name="close" class="icon"/>
-      </button>
-      <div class="windowContent" id="playerContent">
-        <div id="credits">
-          <marquee direction="left" behavior="scroll" scrollamount="7" width="100%">{{selectedSong.track}} — {{selectedSong.artist}}</marquee>
-        </div>
-        <div id="controls">
-          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop @click="prevTrack" data-tooltip="précédente">
-            <PrevIcon name="prev" class="icon"/>
-          </button>
-          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop @click="toggleAudio" data-tooltip="lancer">
-            <component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
-          </button>
-          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop @click="nextTrack" data-tooltip="suivante">
-            <NextIcon name="next" class="icon"/>
-          </button>
-        </div>
-
-        <audio ref="selectedAudio" @ended="nextTrack">
-          <source :src="audioFile" type="audio/mpeg">
-        </audio>
-
-      </div>
-    </div>
-</template>
-
-<style scoped>
-  /*================= Mise en page:
-    => Mobile First : par défaut, moins de 500px
-    => Tablette et PC format haut : de 500 à 1000px
-    => PC large : à partir de 1000px
-  */
-
-  /*+++++++++++++++++ COPYBOX
-      ================ PC HAUT/IPAD
-      @media(min-width:650px){}
-      ================ PC LARGE
-      @media(min-width:1300px){}
-  */
-
-  #playerPannel{
-    position: fixed;
-    width: 222px;
-    height: auto;
-    top: 222px;
-    left: 117px;
-    box-sizing: border-box;
-    cursor: move;
-
-    @media(min-width:700px){
-        left: 477px;
-    }
-
-    @media(min-width: 1300px){
-      width: 333px;
-      top: 333px;
-      left: 333px;
-    }
-
-    .closeBtn{
-      position: absolute;
-      align-self: flex-end;
-      margin-right: 3.33px;
-      margin-top: 3.33px;
-    }
-  }
-
-  #playerContent{
-    margin-top: 40px;
-
-          #credits{
-            width: 100%;
-            height: 44px;
-            background-color: var(--main-color);
-            padding-left: 7.77px;
-            padding-right: 7.77px;
-            padding-top: 13.12px;
-            margin-bottom: 13.12px;
-
-                  marquee{
-                    color: var(--back-color);
-                    font-family: 'pressStart2P';
-                    font-size: 22px;
-                    font-weight: normal;
-                  }
-          }
-
-          #controls{
-            width: 100%;
-            height: auto;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-around;
-            margin-bottom: 13.12px;
-
-            .iconBtnStyle{
-              width: 33px;
-              height: 33px;
-            }
-
-          }
-  }
-</style>
-
-<script>
-import { loadAudioData } from '../data/audioData.js'
-
-  import Moveable from 'vue3-moveable';
-
-  export default {
-    name : 'PlayerPannel',
-    components:{
-      Moveable
-    },
-    data(){
-      return{
-        target: null,
-        audioTarget: null,
-        selectedSong:{
-          track: "",
-          artist: "",
-          src: ""
-        },
-        audioFile:"",
-        audioCredits:"",
-        trackCount: 0,
-        isPlaying: false
-      }
-    },
-    computed: {
-      audioData(){
-        return loadAudioData
-      }
-    },
-    emits: ['close','focus'],
-    methods: {
-      onDrag({ target, transform }) {
-        target.style.transform = transform;
-      },
-      loadAudio(){
-        //console.log(this.target);
-        this.audioTarget.pause();
-        this.selectedSong = this.audioData[this.trackCount];
-        this.audioFile = this.selectedSong.src;
-        this.audioCredits = ' ' + this.selectedSong.track +' - '+ this.selectedSong.artist;
-        this.audioTarget.volume = 1;
-        this.audioTarget.load();
-        if(this.isPlaying){
-          this.audioTarget.play();
-        }
-      },
-      toggleAudio(){
-        if(this.isPlaying){
-        this.audioTarget.pause();
-        }else{
-          this.audioTarget.play();
-        }
-        this.isPlaying = !this.isPlaying;
-      },
-      prevTrack(){
-        this.trackCount -= 1;
-        if (this.trackCount<0){
-          this.trackCount = this.audioData.length - 1;
-        }
-        //console.log('prev:', this.trackCount);
-        this.loadAudio();
-      },
-      nextTrack(){
-        this.trackCount += 1;
-        if (this.trackCount>=this.audioData.length){
-          this.trackCount = 0;
-        }
-        //console.log('next:', this.trackCount);
-        this.loadAudio();
-      }
-    },
-    async mounted(){
-      this.target = this.$refs.playerPannel;
-      this.audioTarget = this.$refs.selectedAudio;
-      console.log('AUDIO/', this.audioData);
-      this.loadAudio();
-
-      console.log("Player pannel is loaded!");
-    }
-  };
-</script>

src/components/lolStatus.vue

@@ -1,82 +0,0 @@
-<template>
-  <div id="lolStatusContainer">
-    <p ref="lolStatus">{{statusText}}</p>
-  </div>
-</template>
-
-<style scoped>
-  #lolStatusContainer{
-    width: 161px;
-    height: 33px;
-    background-color: var(--main-color);
-    color: var(--back-color);
-    border-color: var(--main-color);
-    border-style: solid;
-    border-width: thin;
-    border-radius: 33px;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    padding-bottom: 7.77px;
-    margin-left: 1.61vw;
-    padding-left: 3.33px;
-    filter: contrast(200%) saturate(200%);
-
-          p{
-            font-family: 'pressStart2P';
-            font-size: 16.1px;
-            letter-spacing: 1.61px;
-            font-weight: normal;
-          }
-  }
-
-  #lolOpener #lolStatusContainer{
-    padding-top: 3.33px;
-    margin-left: 0;
-    width: 90%;
-    align-self: center;
-
-    @media(min-width: 700px){
-      width: 44%;
-    }
-  }
-
-</style>
-
-<script>
-  import { lolState } from '../lolStatus.js'
-  import { watch } from 'vue'
-
-  export default {
-    name : 'lolStatus',
-    data(){
-      return{
-        statusText: 'FERMÉ...'
-      }
-    },
-    methods: {
-      updateVisibleStatus(){
-        let currentTheme = this.lolCurrentStatus ? 'open' : 'closed';
-        let pageIcon = document.querySelector('link');
-        //console.log(currentTheme);
-        console.log(pageIcon.href);
-        this.statusText = this.lolCurrentStatus ? 'OUVERT !' : 'FERMÉ...';
-        document.documentElement.setAttribute('data-theme' , currentTheme);
-        document.querySelector('link').href = this.lolCurrentStatus ? './src/assets/favicon_open.svg' : './src/assets/favicon.svg'
-        this.$refs.lolStatus.style.animation = this.lolCurrentStatus ? 'blink 3.33s infinite' : 'none';
-      }
-    },
-    computed: {
-      lolCurrentStatus(){
-        return lolState.isOpen
-      }
-    },
-    onMounted(){
-      watch(() => this.lolCurrentStatus, () => this.updateVisibleStatus())
-    },
-    mounted(){
-      this.updateVisibleStatus();
-      console.log("LOL status is loaded!");
-    }
-  };
-</script>

src/data/audioData.js

@@ -1,25 +0,0 @@
-import { reactive } from 'vue'
-
-import audio01 from './juste-tek.mp3'
-import audio02 from './sinking-into-.mp3'
-import audio03 from './technoloooogia.mp3'
-
-export const loadAudioData = reactive (
-  [
-    {
-      track: 'the sink',
-      artist: '333',
-      src: audio02
-    },
-    {
-      track: 'just tek',
-      artist: '333',
-      src: audio01
-    },
-    {
-      track: 'Technolooooogia',
-      artist: '333',
-      src: audio03
-    }
-  ]
-)

src/dataExchange.js

@@ -1,13 +0,0 @@
-import { reactive } from 'vue'
-
-export const dataStorage = reactive({
-  selectedEvent: {
-    title: '',
-    date: '',
-    time: '',
-    subtitle: '',
-    desc: ''
-  },
-  activePannels: [],
-  focus: ''
-})

src/lolEvents.js

@@ -1,34 +0,0 @@
-import { reactive } from 'vue'
-
-export const lolEventsList = reactive(
-  [
-    {
-      title: 'test-01',
-      date: '13/12/26',
-      time: '13h12',
-      subtitle: 'test event 001',
-      desc: 'ça marche !'
-    },
-    {
-      title: 'test-02',
-      date: '13/12/26',
-      time: '13h12',
-      subtitle: 'test event 002',
-      desc: 'oui je crois bien'
-    },
-    {
-      title: 'test-333',
-      date: '13/12/26',
-      time: '13h12',
-      subtitle: 'test event 333 \n test event 333 \n test event 333 \n test event 333',
-      desc: 'super !'
-    },
-    {
-      title: 'test-004',
-      date: '13/12/26',
-      time: '13h12',
-      subtitle: 'test event 004',
-      desc: 'test de très longue description: \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-    }
-  ]
-)

src/lolLinks.js

@@ -1,31 +0,0 @@
-import { reactive } from 'vue'
-
-export const lolLinkList = reactive(
-  [
-    {
-      title: 'test',
-      desc: 'blah blah description du truc test',
-      href: '#'
-    },
-    {
-      title: 'test 0002',
-      desc: 'blah blah description du truc test',
-      href: '#'
-    },
-    {
-      title: 'test 333',
-      desc: 'encore une autre description du truc test',
-      href: '#'
-    },
-    {
-      title: 'test 0002',
-      desc: 'blah blah description du truc test',
-      href: '#'
-    },
-    {
-      title: 'test 333',
-      desc: 'encore une autre description du truc test',
-      href: '#'
-    }
-  ]
-)

src/lolStatus.js

@@ -1,7 +0,0 @@
-import { reactive } from 'vue'
-
-export const lolState = reactive(
-  {
-    isOpen: false
-  }
-)

src/main.js

@@ -1,37 +0,0 @@
-import { createApp } from 'vue'
-// import CSS global
-import './style.css'
-// import app vue racine
-import App from './App.vue'
-// import composants
-import lolStatus from './components/lolStatus.vue'
-import EventContent from './components/EventContent.vue'
-
-import EventInfoPannel from './components/EventInfoPannel.vue'
-import PlayerPannel from './components/PlayerPannel.vue'
-import LinkPannel from './components/LinkPannel.vue'
-// création app racine
-const app = createApp(App);
-
-//Composants
-app.component('lolStatusDiv', lolStatus);
-app.component('eventDiv', EventContent);
-
-app.component('eventPannel', EventInfoPannel);
-app.component('playerPannel', PlayerPannel);
-app.component('linkPannel', LinkPannel);
-
-//Démarrage dans div#app de index.html
-app.mount('#app');
-
-let menuActive = false;
-document.documentElement.setAttribute('data-theme', 'closed');
-document.querySelector('#menuBtn').addEventListener('click', () => {
-  let target = document.querySelector('#mainContainer .right');
-  let btnIcon = document.querySelector('#menuBtn .icon')
-  menuActive = !menuActive
-
-  target.style.display = menuActive ? 'flex' : 'none';
-  target.style.visibility = menuActive ? 'visible' : 'collapse';
-  btnIcon.classList.toggle('rotated');
-})

src/style.css

@@ -1,719 +0,0 @@
-:root[data-theme="closed"]{
-  --back-color: #FFFF4D;
-  --main-color: #000000;
-}
-
-:root[data-theme="open"]{
-  --back-color: #00FF44;
-  --main-color: #000000;
-}
-
-/*====================Typo*/
-@font-face {
-  font-family: 'karrik';
-  src: url('./typo/Karrik-Italic.woff2').format('woff2');
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'karrik';
-  src: url('./typo/Karrik-Regular.woff2') format('woff2');
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'velvelyne';
-  src: url('./typo/Velvelyne-Book.ttf') format('truetype');
-  font-weight: normal;
-}
-
-@font-face {
-  font-family: 'avara';
-  src: url('./typo/Avara-Black.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'pressStart2P';
-  src: url('./typo/PressStart2P-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'velvelyne';
-  src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
-  font-weight: bold;
-}
-
-/*===================Animation*/
-@keyframes blink {
-  0%   { color: var(--back-color);}
-  15%  { color: var(--main-color);}
-  35%  { color: var(--main-color);}
-  50%  { color: var(--back-color);}
-  65%  { color: var(--main-color);}
-  85%  { color: var(--main-color);}
-  100%  { color: var(--back-color);}
-}
-
-@keyframes blinkBack {
-  0%   { background-color: var(--back-color);}
-  15%  { background-color: var(--main-color);}
-  35%  { background-color: var(--main-color);}
-  50%  { background-color: var(--back-color);}
-  65%  { background-color: var(--main-color);}
-  85%  { background-color: var(--main-color);}
-  100%  { background-color: var(--back-color);}
-}
-
-@keyframes blinkBorder {
-  0%   { border-color: var(--main-color);}
-  15%  { border-color: var(--accent-color);}
-  35%  { border-color: var(--accent-color);}
-  50%  { border-color: var(--main-color);}
-  65%  { border-color: var(--accent-color);}
-  85%  { border-color: var(--accent-color);}
-  100%  { border-color: var(--main-color);}
-}
-
-@keyframes float {
-  0%   { transform: translateY(0px); }
-  35%  { transform: translateY(1px); }
-  50%  { transform: translateY(-10px); }
-  65%  { transform: translateY(1px); }
-  100% { transform: translateY(0px); }
-}
-
-/*=============Désact défault*/
-input {
-  -webkit-appearance: none !important;
-  appearance: none !important;
-}
-
-a{
-  text-decoration: none;
-  color: inherit;
-  cursor: alias;
-}
-
-button{
-  cursor: cell;
-}
-
-a p{
-  cursor:inherit;
-}
-
-a button{
-  cursor: inherit;
-}
-
-p{
-  cursor: inherit;
-  pointer-events: none !important;
-}
-
-.dg{
-  display: none !important;
-  height: 0;
-  overflow: hidden;
-}
-
-/*==========================Moveable*/
-.moveable-control-box {
-  display: none !important;
-}
-
-/*=============Body & background*/
-html, body{
-  margin: 0;
-  padding: 0;
-
-  background-color: var(--main-color);
-  width: 100%;
-  height:100%;
-  position: fixed;
-  inset: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  display: block;
-  scrollbar-color: var(--back-color) var(--main-color);
-  scrollbar-width: thin;
-  z-index: -33;
-
-}
-
-#canvas{
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  mix-blend-mode: screen;
-  z-index: -2;
-  opacity: .25;
-  filter: saturate(333%);
-}
-
-#background{
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  width: auto;
-  height: 133%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: -1;
-  opacity: 1;
-  visibility: hidden;
-  filter: contrast(200%) saturate(33%) grayscale();
-  transform: rotate(180deg);
-  mix-blend-mode: difference;
-
-  @media(min-width: 700px){
-    height: 200%;
-  }
-}
-
-#mainContainer{
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  height: auto;
-  gap: 0;
-}
-
-/*=====================BUTTONS*/
-.textBtnStyle{
-  font-family: 'karrik';
-  font-size: 13.12px;
-  background-color: var(--back-color);
-  color: var(--main-color);
-  border-color: var(--main-color);
-  border-style: solid;
-  border-width: 1.75px;
-  border-radius: 16.1px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-around;
-}
-
-.textBtnStyle:hover{
-  background-color: var(--main-color);
-  color: var(--back-color);
-  font-weight: bold;
-}
-
-.iconBtnStyle{
-  background-color: var(--back-color);
-  color: var(--main-color);
-  border-color: var(--main-color);
-  border-style: solid;
-  border-width: thin;
-  border-radius: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-around;
-}
-
-.iconBtnStyle:hover{
-  background-color: var(--main-color);
-  color: var(--back-color);
-}
-
-/*==============FENETRES*/
-.windowStyle{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: var(--back-color);
-  border-style: solid;
-  border-width: thin;
-  border-radius: 16.1px;
-  border-color: var(--main-color);
-  overflow: hidden;
-}
-
-.zBase{
-  z-index: 333;
-}
-
-.zFocus{
-  z-index: revert;
-  z-index: 1312;
-}
-
-.windowTitle{
-  width:100%;
-  height:50px;
-  background-color: var(--main-color);
-  border-radius: 0;
-  font-family: 'velvelyne';
-  font-weight: bold;
-  text-transform: uppercase;
-  font-size: 22px;
-  color: var(--back-color);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding-left: 10px;
-  padding-right: 10px;
-  cursor: move;
-}
-
-
-.windowTitleLower{
-  font-family: 'velvelyne';
-  font-weight: bold;
-  font-size: 13.12px;
-}
-
-.closeBtn{
-  color: var(--back-color);
-  background-color: var(--main-color);
-  border-style: solid;
-  border-width: thin;
-  border-radius: 16.1px;
-  border-color: var(--back-color);
-  width: 33px;
-  height: 33px;
-  align-items: center;
-}
-
-.closeBtn:hover{
-  color: var(--main-color);
-  background-color: var(--back-color);
-}
-
-.windowContent{
-  height:77%;
-  width:100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-/*=============INTERFACE*/
-.uiStyle{
-  background-color: var(--back-color);
-  border-color: var(--main-color);
-  border-style: solid;
-  border-width: thin;
-}
-
-.icon{
-  height: 16.1px;
-  width: auto;
-  fill: currentColor;
-  pointer-events: none;
-}
-
-#topBar{
-  position: relative;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 50px;
-  z-index: 333;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--main-color);
-  padding-left: 7.77px;
-  padding-right: 16.1px;
-  gap: 7.77px;
-  box-sizing: border-box;
-
-        p{
-          font-family: 'velvelyne';
-          font-size: 40px;
-          font-weight: bold;
-          padding-top: 7.77px;
-        }
-
-        #mainLogo{
-          height: auto;
-          width: 50px;
-        }
-
-        .left{
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: space-around;
-          width: auto;
-          gap: 7.77px;
-          height: 100%;
-        }
-
-        .right{
-          display: none;
-          visibility: collapse;
-          flex-direction: column;
-          align-items: center;
-          justify-content: space-around;
-          width:33%;
-          height: 200px;
-          position: absolute;
-          top: 55px;
-          right: 3.33px;
-          z-index: 3;
-
-                .textBtnStyle{
-                  width: 16.1%;
-                  min-width: 93px;
-                  height: 33px;
-                  text-transform: uppercase;
-                }
-
-                .textBtnStyle:hover{
-                  border-color: var(--back-color);
-                }
-        }
-
-        .iconBtnStyle{
-          width: 33px;
-          height: 33px;
-        }
-
-        #menuBtn{
-          .icon.rotated{
-            transform: rotate(0);
-          }
-
-          .icon{
-            transform: rotate(45deg);
-          }
-        }
-
-        @media(min-width: 700px){
-          #menuBtn{
-            display: none;
-            visibility: collapse;
-          }
-
-          .right{
-            display: flex;
-            visibility: visible;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-around;
-            width:70%;
-            height: 100%;
-            position: relative;
-            top: 0;
-            left: 0;
-          }
-        }
-}
-
-#mainInfo{
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 2fr 1fr;
-  grid-template-areas:
-    "topL topR"
-    "midL midR"
-    "botL botR";
-  box-sizing: border-box;
-  width: 100vw;
-  height: auto;
-  align-items: stretch;
-
-
-
-        .uiStyle{
-          width:100%;
-          height: auto;
-          padding-left: 7.77px;
-          box-sizing: border-box;
-          font-family: 'velvelyne';
-          font-size: 13.12px;
-          font-weight: bold;
-        }
-
-        #planContainer{
-          width: 200%;
-          height: auto;
-          color: var(--back-color);
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-                #plan{
-                  position: relative;
-                  width: 90%;
-
-                  margin-bottom: 13.12px;
-                }
-                #fleche{
-                  position: absolute;
-
-                  width: 90%;
-                  fill: currentColor;
-                  z-index: -1;
-                }
-          @media(max-width: 700px){
-            grid-row: 2;
-            grid-column: 1 / 2;
-          }
-        }
-
-        #title{
-          grid-area: topL;
-          font-size: 22px;
-          line-height: .7;
-          height: 100%;
-
-                #desc{
-                  font-family: 'velvelyne';
-                  font-style: normal;
-                  font-size: 13.12px;
-                  line-height: 1em;
-                  text-transform: uppercase;
-
-                }
-        }
-
-        #address{
-          grid-area: topR;
-          font-family: 'karrik';
-          color: var(--back-color);
-          font-style: normal;
-          font-size: 13.12px;
-          line-height: 1em;
-          text-transform: uppercase;
-          padding-left: 13.12px;
-          mix-blend-mode: exclusion;
-
-          #hackerLogo{
-            width: 77px;
-            height: 50px;
-            display:inline-block;
-            position: absolute;
-            right: 13.12px;
-            top: 117px;
-            z-index: 33;
-
-            img{
-              width: 77px;
-              height: auto;
-              pointer-events: none;
-              cursor: inherit;
-            }
-          }
-
-        }
-
-        #openingHours{
-          grid-area: botL;
-          text-align: right;
-          padding-right: 13.12px;
-          font-weight: normal;
-          line-height: 1em;
-          margin-top: -13.12px;
-
-                strong{
-                  font-weight: bold;
-                }
-        }
-
-        #lolOpener{
-          grid-area: botR;
-          font-weight: normal;
-          padding-right: 7.77px;
-          line-height: 1em;
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          position: relative;
-          gap: 0;
-          height: auto;
-        }
-
-  @media(min-width: 700px){
-    grid-template-columns: 1fr 2fr;
-    grid-template-rows: 161px 222px 77px;
-    height: auto;
-
-          .uiStyle{
-            font-size: 16.1px;
-          }
-
-          #planContainer{
-            height: 90%;
-            width: auto;
-            grid-row: 2;
-            grid-column: 2;
-            margin-left: 0;
-            margin-top: -100px;
-
-                  #plan{
-                    width:90%;
-                    height: auto;
-                    margin-bottom: 0;
-                    max-height: 333px;
-
-                  }
-                  #fleche{
-                    width:60%;
-                    height: auto;
-                    box-sizing: border-box;
-                    max-height: 333px;
-                  }
-          }
-
-          #openingHours{
-            grid-area: midL;
-            height: 60%
-          }
-
-          #lolOpener{
-            width: 300%;
-            grid-column: 1 / 2;
-            grid-row: 3;
-            flex-direction: row;
-            gap: 7.77px;
-            align-items: center;
-            justify-content: space-between;
-            padding-left: 16.1px;
-            height: 77px;
-
-                    #desc{
-                      width: 44%;
-                      box-sizing: border-box;
-                    }
-          }
-
-          #title{
-            margin-bottom: 3.33px;
-            font-size: 27px;
-            line-height: 0;
-
-            #desc{
-              font-size: 16.1px;
-            }
-          }
-
-          #address #hackerLogo{
-            grid-area: midL;
-            position: relative;
-            top: 0;
-            left: 7.77px;
-            right: unset;
-          }
-        }
-
-        @media(min-width: 1300px){
-          grid-template-rows: 222px 500px 77px;
-
-          .uiStyle{
-            font-size: 16.1px;
-          }
-
-          #lolOpener{
-            font-size: 22px;
-          }
-          #address{
-            font-size: 22px;
-
-            #hackerLogo{
-              width: 117px;
-            }
-          }
-          #openingHours{
-            font-size: 33px;
-          }
-
-          #title{
-            margin-bottom: 3.33px;
-            font-size: 44px;
-            line-height: 0;
-
-            #desc{
-              font-size: 22px;
-            }
-          }
-
-          #planContainer {
-            margin-top: -117px;
-            margin-bottom: 77px;
-
-                  #fleche{
-                    width: 60%;
-                    max-height: 666px;
-                  }
-
-                  #plan{
-                    max-height: 666px;
-                  }
-          }
-        }
-}
-
-#aboutSection{
-  position: relative;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  box-sizing: border-box;
-  height: 50vh;
-
-        #aboutText{
-          width: 60%;
-          height: auto;
-          padding-left: 13.12px;
-          padding-right: 13.12px;
-          padding-bottom: 13.12px;
-          overflow-y: scroll;
-
-          @media(min-width: 700px){
-            height: 60vh;
-          }
-          @media(min-width: 1300px){
-            height: 50vh;
-            padding-left: 33px;
-          }
-
-                p{
-                  font-family: 'velvelyne';
-                  font-weight: normal;
-                  font-size: 13.12px;
-                  color: var(--main-color);
-
-                  @media(min-width: 1300px){
-                    font-size: 20px;
-                  }
-                }
-        }
-
-        #eventSection{
-          width: 40%;
-          height: 100%;
-          position: relative;
-
-                #title{
-                  height: 44px;
-                  padding-top: 7.77px;
-                  padding-left: 7.77px;
-                  box-sizing: border-box;
-                  font-family: 'karrik';
-                  font-style: italic;
-                  font-size: 13.12px;
-                  text-transform: uppercase;
-                  color: var(--main-color);
-                  pointer-events: none !important;
-                  cursor: inherit;
-                }
-        }
-}

vite.config.js

@@ -1,26 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import svgLoader from 'vite-svg-loader'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [vue(), svgLoader()],
-  server: {
-    host: '0.0.0.0',
-    port: 8080
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src')
-    }
-  },
-  build: {
-    rollupOptions: {
-      input: {
-        main: path.resolve(import.meta.dirname, 'index.html'),
-        admin: path.resolve(import.meta.dirname, 'admin/index.html'),
-      },
-    },
-  }
-})