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

edit: audioData est mtn const reactive() et playlist editor fonctionne coté client
tunnel: interface pour page admin sans backend + problème de gestion de la playlist (importé dans 2 script, l'un demande un focntion, l'autre une array et on est là hum...)
2026-07-07 16:05:56 +02:00 · 2026-07-07 01:23:27 +02:00 · 2026-07-06 22:32:41 +02:00 · 2026-07-06 04:21:38 +02:00 · 2026-07-06 00:33:14 +02:00 · 2026-07-05 23:59:43 +02:00
32 changed files with 2325 additions and 43 deletions
@@ -15,4 +15,6 @@ POUR LE STATUT D'OUVERTURE DU LIEU IL FAUT :

 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
@@ -0,0 +1,26 @@
+<template>
+  <eventEditor></eventEditor>
+  <linkEditor></linkEditor>
+  <playlistEditor></playlistEditor>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+
+  export default {
+    name : 'Admin',
+    data() {
+      return {
+      }
+    },
+    computed: {
+    },
+    methods: {
+    },
+    mounted(){
+      console.log("Admin app is fully loaded!");
+    }
+  };
+</script>
@@ -0,0 +1,359 @@
+<template>
+  <Teleport to="#event .windowContent" defer>
+    <div class="sectionTitle" v-show="eventPannel">
+      <p>{{newEventText}} &emsp; &emsp;&emsp;&emsp;&emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="newEventBtn" @click="toggleNewEvent">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="editor" v-show="newEvent">
+      <div class="inputDiv" id="title">
+        <p>&emsp; Titre &emsp;&emsp;&emsp; &rarr;</p>
+        <input type="text" name="eventTitle" v-model="title">
+      </div>
+      <div class="inputDiv" id="date">
+        <p>&emsp; Date &emsp;&emsp;&emsp; &rarr;</p>
+        <input type="text" name="eventDate" v-model="date">
+      </div>
+      <div class="inputDiv" id="time">
+        <p>&emsp; Heure &emsp;&emsp;&ensp; &rarr;</p>
+        <input type="text" name="eventTime" v-model="time">
+      </div>
+      <div class="inputDiv" id="subtitle">
+        <p>&emsp; Sous-titre &emsp; &rarr;</p>
+        <input type="text" name="eventSub" v-model="sub">
+      </div>
+      <div class="inputDiv" id="desc">
+        <p> ↙  Description &emsp; &emsp;</p>
+        <textarea name="eventDesc" rows="8" cols="80" v-model="desc"></textarea>
+      </div>
+      <button type="button" name="saveChanges" class="textBtnStyle" @click="saveEvent" :class="{alert: eventAlertActive}">SAUVEGARDER !</button>
+    </div>
+    <div class="sectionTitle" v-show="eventPannel">
+      <p>Éditer les évènements &ensp; &emsp;&emsp;&emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="oldEventBtn" @click="toggleOldEvent">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="content" v-show="oldEvent">
+      <div class="eventEntry" v-for="item of displayedEvents" ref="item.title">
+        <p>{{item.title}}</p>
+        <div class="controls">
+          <button type="button" name="edit" class="toggleBtn" id="edit" @click='editEvent(item)'>
+            <svg class="icon" viewBox="0 0 40.19 38.9">
+              <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+              <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+            </svg>
+          </button>
+          <button type="button" name="remove" class="toggleBtn" id="remove" @click='removeEvent(item)'>
+            <svg class="icon" viewBox="0 0 53.73 53.59">
+              <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+</template>
+
+<style scoped>
+  #event .windowContent{
+    .sectionTitle{
+      width: 100%;
+      height: 44px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      padding-right: 33px;
+      padding-left: 33px;
+      box-sizing: border-box;
+
+
+            p{
+              font-family: 'velvelyne';
+              font-weight: bold;
+              font-size: 16.1px;
+              color: var(--main-color);
+              margin: 0;
+            }
+    }
+
+    .editor{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 13.12px;
+      overflow-y: scroll;
+      padding-top: 7.77px;
+      padding-right: 7.77px;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      box-sizing: border-box;
+
+      .textBtnStyle{
+        margin-bottom: 16.1px;
+        margin-right: 16.1px;
+        min-height: 33px;
+      }
+
+      .textBtnStyle.alert{
+        color: var(--back-color);
+        background-color: var(--main-color);
+      }
+            .inputDiv{
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              color: var(--main-color);
+              width: 95%;
+              margin: 0;
+              padding: 0;
+              height: 44px;
+
+                    input{
+                      width: 60%;
+                      background-color: var(--back-color);
+                      height: 33px;
+                      padding-left: 16.1px;
+                      border-style: solid;
+                      border-color: var(--main-color);
+                      border-radius: 22px;
+                      border-width: thin;
+                    }
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-weight: normal;
+                      font-size: 16.1px;
+                      color: var(--main-color);
+                      margin: 0;
+                    }
+            }
+
+      #desc.inputDiv{
+        flex-direction: column;
+        align-items: flex-end;
+        height: 161px;
+        margin-bottom: 7.77px;
+
+        textarea{
+          width: 92%;
+          align-self: center;
+          background-color: var(--back-color);
+          height: 77px;
+          padding-left: 16.1px;
+          padding-right: 16.1px;
+          padding-top: 7.77px;
+          border-style: solid;
+          border-color: var(--main-color);
+          border-radius: 22px;
+          border-width: thin;
+          resize: none;
+          overflow-y: scroll;
+
+        }
+      }
+    }
+
+    .content{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: var(--main-color);
+      overflow-y: scroll;
+
+          .eventEntry{
+            width: 100%;
+            height: 44px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            border-style: solid;
+            border-color: var(--back-color);
+            border-radius: 0;
+            border-width: 0 0 1.61px 0;
+            padding-left: 16.1px;
+            padding-right: 16.1px;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: bold;
+                    font-size: 16.1px;
+                    color: var(--back-color);
+                    margin: 0;
+                  }
+
+                  .controls{
+                    width: auto;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 7.77px;
+
+                    .toggleBtn{
+                      transform: rotate(0);
+                      cursor: cell;
+                    }
+                  }
+          }
+
+    }
+  }
+</style>
+
+<script>
+  import { lolLinkList } from '/src/lolLinks.js'
+  import { lolEventsList } from '/src/lolEvents.js'
+  import { loadAudioData } from '/src/data/audioData.js'
+
+  import { pannelStatusList } from '../pannelStatus.js'
+
+  import { watch } from 'vue'
+
+  export default {
+    name : 'EventEditor',
+    data() {
+      return {
+        newEventText: 'Nouvel Évènement',
+        eventAlertActive: false,
+        hideTimer: null,
+        submitEventText: 'SAUVEGARDER',
+        newEvent: false,
+        oldEvent: false,
+        title: '',
+        date: '',
+        time: '',
+        sub: '',
+        desc: '',
+        eventDefault: {
+          title: 'Exemple de Titre',
+          date: '13/12/26',
+          time: '13h12',
+          sub: 'exemple de sous-titre',
+          desc: 'exemple de description \nsur plusieurs lignes'
+        },
+        editingEvent: null
+      }
+    },
+    computed: {
+      displayedEvents(){
+        return lolEventsList
+      },
+      eventPannel(){
+        return pannelStatusList.event;
+      }
+    },
+    methods: {
+      toggleNewEvent(){
+        this.newEvent = !this.newEvent;
+        if (this.newEvent){
+          this.oldEvent = false;
+          if(!this.editingEvent){
+            this.backToDefaultEvent();
+          }
+        }
+        this.$refs.newEventBtn.style.transform = this.newEvent ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldEventBtn.style.transform = this.oldEvent ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      toggleOldEvent(){
+        this.oldEvent = !this.oldEvent;
+        if (this.oldEvent){
+          this.newEvent = false;
+        }
+        this.$refs.newEventBtn.style.transform = this.newEvent ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldEventBtn.style.transform = this.oldEvent ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      backToDefaultEvent(){
+        this.title = this.eventDefault.title;
+        this.date = this.eventDefault.date;
+        this.time = this.eventDefault.time;
+        this.sub = this.eventDefault.sub;
+        this.desc = this.eventDefault.desc;
+        this.editingEvent = null;
+        this.newEventText = 'Nouvel Évènement';
+      },
+      createListEntry(){
+        let entry = {
+          title: this.title,
+          date: this.date,
+          time: this.time,
+          subtitle: this.sub,
+          desc: this.desc
+        }
+
+        return entry
+      },
+      saveEvent(){
+        let entry = this.createListEntry();
+        if(this.editingEvent){
+          Object.assign(this.editingEvent, {
+            title: this.title,
+            date: this.date,
+            time: this.time,
+            subtitle: this.sub,
+            desc: this.desc
+          })
+        } else {
+          this.displayedEvents.push(entry);
+        }
+        this.toggleOldEvent();
+        this.backToDefaultEvent();
+      },
+      removeEvent(obj){
+        let index = this.displayedEvents.indexOf(obj);
+        this.displayedEvents.splice(index, 1);
+      },
+      editEvent(obj){
+        console.log('selected :', obj)
+        this.editingEvent = obj;
+
+        this.title = obj.title;
+        this.date = obj.date;
+        this.time = obj.time;
+        this.sub = obj.subtitle;
+        this.desc = obj.desc;
+        this.newEventText = 'Éditer l\'évènement'
+        this.toggleNewEvent();
+      },
+      async eventSaveMsg(){
+        this.eventAlertActive = true;
+        this.submitEventText = "Enregistré !";
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.eventAlertActive = false;
+          this.submitEventText = 'SAUVEGARDER';
+        }, 1610)
+      }
+    },
+    mounted(){
+      watch( () => this.eventPannel, () => {
+        if(!this.eventPannel){
+          this.oldEvent = false;
+          this.newEvent = false;
+        }
+      })
+      console.log("Event editor is fully loaded!");
+    }
+  };
+</script>
@@ -0,0 +1,363 @@
+<template>
+  <Teleport to="#link .windowContent" defer>
+    <div class="sectionTitle" v-show="linkPannel">
+      <p>{{newLinkText}} &emsp; &emsp;&emsp; &ensp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="newLinkBtn" @click="toggleNewLink">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="editor" v-show="newLink">
+      <div class="inputDiv" id="title">
+        <p>&emsp; Titre &emsp;&emsp;&emsp; &rarr;</p>
+        <input type="text" name="linkTitle" v-model="title">
+      </div>
+      <div class="inputDiv" id="desc">
+        <p> ↙  Description &emsp; &emsp;</p>
+        <textarea name="linkDesc" rows="8" cols="80" v-model="desc"></textarea>
+      </div>
+      <div class="inputDiv" id="href">
+        <p> ↙  Lien &emsp; &emsp;</p>
+        <textarea name="linkDesc" rows="8" cols="80" v-model="href"></textarea>
+      </div>
+      <button type="button" name="saveChanges" class="textBtnStyle" @click="saveLink" :class="{alert: linkAlertActive}">SAUVEGARDER !</button>
+    </div>
+    <div class="sectionTitle" v-show="linkPannel">
+      <p>Éditer les liens &emsp; &emsp; &emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="oldLinkBtn" @click="toggleOldLink">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="content" v-show="oldLink">
+      <div class="linkEntry" v-for="item of displayedLinks" ref="item.title">
+        <p>{{item.title}}</p>
+        <div class="controls">
+          <button type="button" name="edit" class="toggleBtn" id="edit" @click='editLink(item)'>
+            <svg class="icon" viewBox="0 0 40.19 38.9">
+              <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+              <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+            </svg>
+          </button>
+          <button type="button" name="remove" class="toggleBtn" id="remove" @click='removeLink(item)'>
+            <svg class="icon" viewBox="0 0 53.73 53.59">
+              <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+</template>
+
+<style scoped>
+  #link .windowContent{
+    .sectionTitle{
+      width: 100%;
+      height: 44px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      padding-right: 33px;
+      padding-left: 33px;
+      box-sizing: border-box;
+
+
+            p{
+              font-family: 'velvelyne';
+              font-weight: bold;
+              font-size: 16.1px;
+              color: var(--main-color);
+              margin: 0;
+            }
+      }
+
+    .editor{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 13.12px;
+      overflow-y: scroll;
+      padding-top: 7.77px;
+      padding-right: 7.77px;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      box-sizing: border-box;
+
+      .textBtnStyle{
+        margin-bottom: 16.1px;
+        margin-right: 16.1px;
+        min-height: 33px;
+      }
+
+      .textBtnStyle.alert{
+        color: var(--back-color);
+        background-color: var(--main-color);
+      }
+
+            .inputDiv{
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              color: var(--main-color);
+              width: 95%;
+              margin: 0;
+              padding: 0;
+              height: 44px;
+
+                    input{
+                      width: 60%;
+                      background-color: var(--back-color);
+                      height: 33px;
+                      padding-left: 16.1px;
+                      border-style: solid;
+                      border-color: var(--main-color);
+                      border-radius: 22px;
+                      border-width: thin;
+                    }
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-weight: normal;
+                      font-size: 16.1px;
+                      color: var(--main-color);
+                      margin: 0;
+                    }
+            }
+
+      #desc.inputDiv{
+        flex-direction: column;
+        align-items: flex-end;
+        height: 161px;
+        margin-bottom: 7.77px;
+
+              textarea{
+                width: 92%;
+                align-self: center;
+                background-color: var(--back-color);
+                height: 77px;
+                padding-left: 16.1px;
+                padding-right: 16.1px;
+                padding-top: 7.77px;
+                border-style: solid;
+                border-color: var(--main-color);
+                border-radius: 22px;
+                border-width: thin;
+                resize: none;
+                overflow-y: scroll;
+
+              }
+      }
+
+      #href.inputDiv{
+        flex-direction: column;
+        align-items: flex-end;
+        height: 161px;
+        margin-bottom: 7.77px;
+
+              textarea{
+                width: 92%;
+                align-self: center;
+                background-color: var(--back-color);
+                height: 77px;
+                padding-left: 16.1px;
+                padding-right: 16.1px;
+                padding-top: 7.77px;
+                border-style: solid;
+                border-color: var(--main-color);
+                border-radius: 22px;
+                border-width: thin;
+                resize: none;
+                overflow-y: scroll;
+
+              }
+      }
+
+    }
+
+    .content{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: var(--main-color);
+      overflow-y: scroll;
+
+          .linkEntry{
+            width: 100%;
+            height: 44px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            border-style: solid;
+            border-color: var(--back-color);
+            border-radius: 0;
+            border-width: 0 0 1.61px 0;
+            padding-left: 16.1px;
+            padding-right: 16.1px;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: bold;
+                    font-size: 16.1px;
+                    color: var(--back-color);
+                    margin: 0;
+                  }
+
+                  .controls{
+                    width: auto;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 7.77px;
+
+                    .toggleBtn{
+                      transform: rotate(0);
+                      cursor: cell;
+                    }
+                  }
+          }
+
+    }
+  }
+</style>
+
+<script>
+  import { lolLinkList } from '/src/lolLinks.js'
+
+  import { pannelStatusList } from '../pannelStatus.js'
+
+  import { watch } from 'vue'
+
+  export default {
+    name : 'LinkEditor',
+    data() {
+      return {
+        newLinkText: 'Nouveau Lien',
+        linkAlertActive: false,
+        hideTimer: null,
+        submitLinkText: 'SAUVEGARDER',
+        newLink: false,
+        oldLink: false,
+        title: '',
+        href: '',
+        desc: '',
+        linkDefault: {
+          title: 'Exemple de Titre',
+          href: 'https://example.com/',
+          desc: 'exemple de description'
+        },
+        editingLink: null
+      }
+    },
+    computed: {
+      displayedLinks(){
+        return lolLinkList
+      },
+      linkPannel(){
+        return pannelStatusList.link;
+      }
+    },
+    methods: {
+      toggleNewLink(){
+        this.newLink = !this.newLink;
+        if (this.newLink){
+          this.oldLink = false;
+          if(!this.editingLink){
+            this.backToDefaultLink();
+          }
+        }
+        this.$refs.newLinkBtn.style.transform = this.newLink ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldLinkBtn.style.transform = this.oldLink ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      toggleOldLink(){
+        this.oldLink = !this.oldLink;
+        if (this.oldLink){
+          this.newLink = false;
+        }
+        this.$refs.newLinkBtn.style.transform = this.newLink ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.oldLinkBtn.style.transform = this.oldLink ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      backToDefaultLink(){
+        this.title = this.linkDefault.title;
+        this.href = this.linkDefault.href;
+        this.desc = this.linkDefault.desc;
+        this.editingLink = null;
+        this.newLinkText = 'Nouveau Lien';
+      },
+      createListEntry(){
+        let entry = {
+          title: this.title,
+          href: this.href,
+          desc: this.desc
+        }
+
+        return entry
+      },
+      saveLink(){
+        let entry = this.createListEntry();
+        if(this.editingLink){
+          Object.assign(this.editingLink, {
+            title: this.title,
+            href: this.href,
+            desc: this.desc
+          })
+        } else {
+          this.displayedLinks.push(entry);
+        }
+        this.toggleOldLink();
+        this.backToDefaultLink();
+      },
+      removeLink(obj){
+        let index = this.displayedLinks.indexOf(obj);
+        this.displayedLinks.splice(index, 1);
+      },
+      editLink(obj){
+        console.log('selected :', obj)
+        this.editingLink = obj;
+
+        this.title = obj.title;
+        this.href = obj.href
+        this.desc = obj.desc;
+        this.newLinkText = 'Éditer le lien'
+        this.toggleNewLink();
+      },
+      async linkSaveMsg(){
+        this.linkAlertActive = true;
+        this.submitLinkText = "Enregistré !";
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.eventAlertActive = false;
+          this.submitLinkText = 'SAUVEGARDER';
+        }, 1610)
+      }
+    },
+    mounted(){
+      watch( () => this.linkPannel, () => {
+        if(!this.linkPannel){
+          this.oldLink = false;
+          this.newLink = false;
+        }
+      })
+      console.log("Link editor is fully loaded!");
+    }
+  };
+</script>
@@ -0,0 +1,367 @@
+<template>
+  <Teleport to="#playlist .windowContent" defer>
+    <div class="sectionTitle" v-show="playlistPannel">
+      <p>{{newSongText}} &emsp; &emsp; &emsp; &emsp; &emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="newSongBtn" @click="toggleNewPlaylist">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="editor" v-show="newSong">
+      <div class="inputDiv" id="track">
+        <p>&emsp; Titre &emsp;&emsp; &emsp; &rarr;</p>
+        <input type="text" name="songTitle" v-model="track">
+      </div>
+      <div class="inputDiv" id="artist">
+        <p>&emsp; Artiste &emsp;&emsp;&ensp; &rarr;</p>
+        <input type="text" name="songArtist" v-model="artist">
+      </div>
+      <p v-show="editingSong" id="note">Note : Laisser vide pour conserver le fichier ↘</p>
+      <div class="inputDiv" id="src">
+        <p>&emsp; Fichier MP3 &ensp; &rarr;</p>
+        <input type="file" name="songFile" ref="audioFile" @change="modifyFile">
+      </div>
+      <button type="button" name="saveChanges" class="textBtnStyle" @click="savePlaylist" :class="{alert: playlistAlertActive}">SAUVEGARDER !</button>
+    </div>
+    <div class="sectionTitle" v-show="playlistPannel">
+      <p>Modifier la playlist &ensp; &emsp;&emsp;&emsp; &rarr; </p>
+      <button type="button" class="toggleBtn" ref="currentPlaylistBtn" @click="toggleCurrentPlaylist">
+        <svg class="icon" viewBox="0 0 53.73 53.59">
+          <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="content" v-show="currentPlaylist">
+      <div class="playlistEntry" v-for="item of displayedPlaylists" ref="item.track">
+        <p>{{item.track}} — {{item.artist}}</p>
+        <div class="controls">
+          <button type="button" name="edit" class="toggleBtn" id="edit" @click='editPlaylist(item)'>
+            <svg class="icon" viewBox="0 0 40.19 38.9">
+              <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+              <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+            </svg>
+          </button>
+          <button type="button" name="remove" class="toggleBtn" id="remove" @click='removePlaylist(item)'>
+            <svg class="icon" viewBox="0 0 53.73 53.59">
+              <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+</template>
+
+<style scoped>
+  #playlist .windowContent{
+    .sectionTitle{
+      width: 100%;
+      height: 44px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      padding-right: 33px;
+      padding-left: 33px;
+      box-sizing: border-box;
+
+
+            p{
+              font-family: 'velvelyne';
+              font-weight: bold;
+              font-size: 16.1px;
+              color: var(--main-color);
+              margin: 0;
+            }
+      }
+
+    .editor{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 13.12px;
+      overflow-y: scroll;
+      padding-top: 7.77px;
+      padding-right: 7.77px;
+      border-style: solid;
+      border-color: var(--main-color);
+      border-radius: 0;
+      border-width: 0 0 1.61px 0;
+      box-sizing: border-box;
+
+      .textBtnStyle{
+        margin-bottom: 16.1px;
+        margin-right: 22px;
+        height: 33px;
+      }
+
+      .textBtnStyle.alert{
+        color: var(--back-color);
+        background-color: var(--main-color);
+      }
+            #note{
+              width: 66%;
+              font-family: 'velvelyne';
+              font-weight: normal;
+              font-size: 13.12px;
+              color: var(--main-color);
+              margin: 0;
+              text-align: right;
+            }
+
+            .inputDiv{
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              color: var(--main-color);
+              width: 95%;
+              margin: 0;
+              padding: 0;
+              height: 44px;
+
+                    input{
+                      width: 60%;
+                      background-color: var(--back-color);
+                      height: 33px;
+                      padding-left: 16.1px;
+                      border-style: solid;
+                      border-color: var(--main-color);
+                      border-radius: 22px;
+                      border-width: thin;
+                    }
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-weight: normal;
+                      font-size: 16.1px;
+                      color: var(--main-color);
+                      margin: 0;
+                    }
+            }
+
+            #src.inputDiv{
+
+                  input[type=file]::file-selector-button{
+                    font-family: 'karrik';
+                    font-size: 10px;
+                    background-color: var(--back-color);
+                    color: var(--main-color);
+                    padding-left: 0;
+                    margin: 0;
+                    border-width:  0 1.61px 0 0;
+                    height: 100%;
+                    padding-left: 16.1px;
+                    padding-right: 7.77px;
+                    margin-left: -22px;
+                    margin-right: 7.77px;
+                    outline: none;
+                  }
+
+                  input[type=file]::file-selector-button:hover{
+                    font-family: 'karrik';
+                    font-size: 13.12px;
+                    background-color: var(--main-color);
+                    color: var(--back-color);
+                    padding-left: 0;
+                    margin: 0;
+                    border-width:  0 1.61px 0 0;
+                    height: 100%;
+                    padding-left: 16.1px;
+                    padding-right: 7.77px;
+                    margin-left: -22px;
+                    margin-right: 7.77px;
+                    outline: none;
+                  }
+            }
+
+    }
+
+    .content{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: var(--main-color);
+      overflow-y: scroll;
+
+          .playlistEntry{
+            width: 100%;
+            height: 44px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            border-style: solid;
+            border-color: var(--back-color);
+            border-radius: 0;
+            border-width: 0 0 1.61px 0;
+            padding-left: 16.1px;
+            padding-right: 16.1px;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: bold;
+                    font-size: 16.1px;
+                    color: var(--back-color);
+                    margin: 0;
+                  }
+
+                  .controls{
+                    width: auto;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 7.77px;
+
+                    .toggleBtn{
+                      transform: rotate(0);
+                      cursor: cell;
+                    }
+                  }
+          }
+
+    }
+  }
+</style>
+
+<script>
+  import { loadAudioData } from '/src/data/audioData.js'
+  import { watch } from 'vue'
+
+  import { pannelStatusList } from '../pannelStatus.js'
+
+  export default {
+    name : 'PlaylistEditor',
+    data() {
+      return {
+        newSongText: 'Nouveau Son',
+        playlistAlertActive: false,
+        hideTimer: null,
+        submitPlaylistText: 'SAUVEGARDER',
+        newSong: false,
+        currentPlaylist: false,
+        track: '',
+        artist: '',
+        src: null,
+        playlistDefault: {
+          track: 'exemple',
+          artist: 'exemple',
+          src: null
+        },
+        editingSong: null,
+        selectedInput: null
+      }
+    },
+    computed: {
+      displayedPlaylists(){
+        return loadAudioData
+      },
+      playlistPannel(){
+        return pannelStatusList.playlist;
+      }
+    },
+    methods: {
+      toggleNewPlaylist(){
+        this.newSong = !this.newSong;
+        if (this.newSong){
+          this.currentPlaylist = false;
+          if(!this.editingSong){
+            this.backToDefaultPlaylist();
+          }
+        }
+        this.$refs.newSongBtn.style.transform = this.newSong ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.currentPlaylistBtn.style.transform = this.currentPlaylist ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      toggleCurrentPlaylist(){
+        this.currentPlaylist = !this.currentPlaylist;
+        if (this.currentPlaylist){
+          this.newSong = false;
+        }
+        this.$refs.newSongBtn.style.transform = this.newSong ? 'rotate(0)' : 'rotate(45deg)';
+        this.$refs.currentPlaylistBtn.style.transform = this.currentPlaylist ? 'rotate(0)' : 'rotate(45deg)';
+      },
+      backToDefaultPlaylist(){
+        this.track = this.playlistDefault.track;
+        this.artist = this.playlistDefault.artist;
+        this.editingSong = null;
+        this.newSongText = 'Nouveau Son';
+      },
+      createListEntry(){
+        let entry = {
+          track: this.track,
+          artist: this.artist,
+          src: this.src
+        }
+        console.log('created or modified entry :', entry)
+        return entry
+      },
+      savePlaylist(){
+        let entry = this.createListEntry();
+        if(this.editingSong){
+          Object.assign(this.editingSong, {
+            track: this.track,
+            artist: this.artist,
+            src: this.src
+          })
+        } else {
+          this.displayedPlaylists.push(entry);
+        }
+        this.toggleCurrentPlaylist();
+        this.backToDefaultPlaylist();
+      },
+      removePlaylist(obj){
+        let index = this.displayedPlaylists.indexOf(obj);
+        this.displayedPlaylists.splice(index, 1);
+      },
+      editPlaylist(obj){
+        console.log('selected :', obj)
+        this.editingSong = obj;
+
+        this.track = obj.track;
+        this.artist = obj.artist;
+        this.src = obj.src;
+
+        this.newSongText = 'Éditer les infos'
+        this.toggleNewPlaylist();
+      },
+      async playlistSaveMsg(){
+        this.playlistAlertActive = true;
+        this.submitPlaylistText = "Enregistré !";
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.eventAlertActive = false;
+          this.submitPlaylistText = 'SAUVEGARDER';
+        }, 1610)
+      },
+      modifyFile(){
+        if (this.selectedInput.files[0]){
+          this.src = this.selectedInput.files[0];
+        }
+      }
+    },
+    mounted(){
+      this.selectedInput = this.$refs.audioFile;
+      console.log(this.selectedInput)
+      watch( () => this.playlistPannel, () => {
+        if(!this.playlistPannel){
+          this.newSong = false;
+          this.currentPlaylist = false;
+        }
+      })
+      console.log("Playlist editor is fully loaded!");
+    }
+  };
+</script>
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="94.468002"
+   height="94.468002"
+   viewBox="0 0 94.468002 94.468003"
+   sodipodi:docname="favicon.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="130.08"
+   inkscape:export-ydpi="130.08"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1341"
+     inkscape:window-height="927"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="4.8680853"
+     inkscape:cx="38.824299"
+     inkscape:cy="53.306379"
+     inkscape:current-layer="svg2"
+     inkscape:window-x="56"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:#ffff4d;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4542"
+     width="88.88665"
+     height="88.88665"
+     x="2.7906749"
+     y="2.7906749" />
+  <circle
+     style="opacity:1;fill:#ffff4d;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="circle868"
+     cx="47.234001"
+     cy="47.234001"
+     r="16.613539" />
+</svg>
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LOL : admin</title>
+    <link rel="icon" type="image/svg" href="./favicon.svg" />
+    <link type="text/css" rel="stylesheet" href="./style/css">
+  </head>
+  <body>
+    <div id="adminWelcome">
+      <p>
+        <strong>Bienvenue sur la page admin du LOL !</strong><br>
+        Ici tu peux éditer le contenu visible sur le site, dans les sections évènements & liens utiles, et aussi ajouter de la musique dans le player.<br>
+        On précise quand même (au cas où), que <strong>les auteurices des sons qu'on poste doivent avoir donné leur accord explicite avant que ça soit posté !</strong>
+      </p>
+    </div>
+    <div id="adminContainer">
+      <div class="">
+
+      </div>
+      <div class="adminSection" id="event">
+        <div class="windowStyle">
+          <div class="windowTitle">
+            <p>
+              Évènements affichés :
+            </p>
+            <button type="button" class="toggleBtn" id="eventBtn">
+              <svg class="icon" viewBox="0 0 53.73 53.59">
+                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="windowContent">
+          </div>
+        </div>
+      </div>
+      <div class="adminSection" id="other">
+        <div class="windowStyle" id="link">
+          <div class="windowTitle">
+            <p>
+              Panneau liens :
+            </p>
+            <button type="button" class="toggleBtn" id="linkBtn">
+              <svg class="icon" viewBox="0 0 53.73 53.59">
+                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="windowContent">
+          </div>
+        </div>
+        <div class="windowStyle" id="playlist">
+          <div class="windowTitle">
+            <p>
+              Playlist :
+            </p>
+            <button type="button" class="toggleBtn" id="playlistBtn">
+              <svg class="icon" viewBox="0 0 53.73 53.59">
+                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="windowContent">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="adminContent"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,62 @@
+import { createApp } from 'vue'
+// import css
+import './style.css'
+// import app racine pour page admin
+import Admin from './Admin.vue'
+// import composants
+import EventEditor from './components/EventEditor.vue'
+import LinkEditor from './components/LinkEditor.vue'
+import PlaylistEditor from './components/PlaylistEditor.vue'
+
+// creation app
+const app = createApp(Admin);
+// Composants
+app.component('eventEditor', EventEditor);
+app.component('linkEditor', LinkEditor);
+app.component('playlistEditor', PlaylistEditor)
+
+// montage dans div#adminContent
+app.mount('#adminContent');
+
+//import variables reactive
+import { pannelStatusList }  from './pannelStatus.js'
+
+document.documentElement.setAttribute('data-theme', 'main');
+
+let eventBtn = document.querySelector('#eventBtn');
+let eventTarget = document.querySelector('#event .windowContent');
+
+let linkBtn = document.querySelector('#linkBtn');
+let linkTarget = document.querySelector('#link .windowContent');
+
+let playlistBtn = document.querySelector('#playlistBtn');
+let playlistTarget = document.querySelector('#playlist .windowContent');
+
+
+eventBtn.addEventListener('click', () => {
+  pannelStatusList.event = !pannelStatusList.event;
+  eventTarget.style.height = pannelStatusList.event ? '75vh' : 'auto';
+  document.querySelector('#eventBtn .icon').style.transform = pannelStatusList.event ? 'rotate(45deg)' : 'rotate(0)'
+})
+
+linkBtn.addEventListener('click', () => {
+  pannelStatusList.link = !pannelStatusList.link;
+  if(pannelStatusList.link){
+    pannelStatusList.playlist = false;
+    playlistTarget.style.height = 'auto';
+    document.querySelector('#playlistBtn .icon').style.transform = 'rotate(45deg)'
+  }
+  linkTarget.style.height = pannelStatusList.link ? '64.5vh' : '0';
+  document.querySelector('#linkBtn .icon').style.transform = pannelStatusList.link ? 'rotate(45deg)' : 'rotate(0)'
+})
+
+playlistBtn.addEventListener('click', () => {
+  pannelStatusList.playlist = !pannelStatusList.playlist;
+  if(pannelStatusList.playlist){
+    pannelStatusList.link = false
+    linkTarget.style.height = 'auto';
+    document.querySelector('#linkBtn .icon').style.transform = 'rotate(45deg)'
+  }
+  playlistTarget.style.height = pannelStatusList.playlist ? '64.5vh' : 'auto';
+  document.querySelector('#playlistBtn .icon').style.transform = pannelStatusList.playlist ? 'rotate(45deg)' : 'rotate(0)'
+})
@@ -0,0 +1,7 @@
+import { reactive } from 'vue'
+
+export const pannelStatusList = reactive({
+  event: false,
+  link: false,
+  playlist: false
+})
@@ -0,0 +1,248 @@
+:root[data-theme="main"]{
+  --back-color: #FFFF4D;
+  --main-color: #000000;
+}
+
+/*====================Typo*/
+@font-face {
+  font-family: 'karrik';
+  src: url('/typo/Karrik-Italic.woff2').format('woff2');
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'karrik';
+  src: url('/typo/Karrik-Regular.woff2') format('woff2');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('/typo/Velvelyne-Book.ttf') format('truetype');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'avara';
+  src: url('/typo/Avara-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('/typo/PressStart2P-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('/typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*=============Désact défault*/
+input {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+
+a{
+  text-decoration: none;
+  color: inherit;
+  cursor: alias;
+}
+
+button{
+  cursor: cell;
+}
+
+a p{
+  cursor:inherit;
+}
+
+a button{
+  cursor: inherit;
+}
+
+p{
+  cursor: inherit;
+  pointer-events: none !important;
+}
+
+.dg{
+  display: none !important;
+  height: 0;
+  overflow: hidden;
+}
+
+/*====================BODY & BACKGROUND*/
+html, body{
+  margin: 0;
+  padding: 0;
+
+  background-color: var(--main-color);
+  width: 100%;
+  height:100%;
+  position: fixed;
+  inset: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: block;
+  scrollbar-color: var(--back-color) var(--main-color);
+  scrollbar-width: thin;
+  z-index: -33;
+  display: flex;
+  flex-direction: column;
+
+}
+
+/*=======================pseudo-Fenetres*/
+.windowStyle{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: var(--back-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--main-color);
+  overflow: hidden;
+  height: auto;
+  width: 95%;
+}
+
+.windowTitle{
+  width:100%;
+  height:44px;
+  background-color: var(--main-color);
+  border-radius: 0;
+  font-family: 'karrik';
+  font-weight: normal;
+  text-transform: uppercase;
+  font-size: 16.1px;
+  color: var(--back-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-left: 10px;
+  padding-right: 10px;
+  cursor: move;
+}
+
+
+.windowTitleLower{
+  font-family: 'velvelyne';
+  font-weight: bold;
+  font-size: 13.12px;
+}
+
+.toggleBtn{
+  color: var(--back-color);
+  background-color: var(--main-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--back-color);
+  width: 27px;
+  height: 27px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  transform: rotate(45deg);
+  cursor: copy;
+  padding: 0;
+}
+
+.toggleBtn:hover{
+  color: var(--main-color);
+  background-color: var(--back-color);
+}
+
+.windowContent{
+  height:77%;
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.icon{
+  fill: currentColor;
+  height: 13.12px;
+  width: auto;
+  pointer-events: none;
+  padding: 0;
+  margin: 0;
+}
+
+.textBtnStyle{
+  font-family: 'karrik';
+  font-size: 13.12px;
+  background-color: var(--back-color);
+  color: var(--main-color);
+  border-color: var(--main-color);
+  border-style: solid;
+  border-width: 1.75px;
+  border-radius: 16.1px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  width: 161px;
+  height: 77px;
+  align-self: flex-end;
+}
+
+.textBtnStyle:hover{
+  background-color: var(--main-color);
+  color: var(--back-color);
+  font-weight: bold;
+
+}
+
+/*==================INTERFACE*/
+#adminWelcome{
+  width: 100%;
+  height: 13.12vh;
+  padding: 13.12px;
+  padding-top: 7.77px;
+  margin: 0;
+  box-sizing: border-box;
+
+        p{
+          font-family: 'velvelyne';
+          font-weight: normal;
+          font-size: 13.12px;
+          color: var(--back-color);
+          margin: 0;
+        }
+
+        strong{
+          font-weight: bold;
+        }
+}
+
+#adminContainer{
+  width: 100%;
+  height: 90vh;
+  inset: 0;
+  overflow: hidden;
+  background-color: var(--back-color);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.adminSection{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 7.77px;
+  gap: 1vh;
+}
@@ -8,6 +8,8 @@
  </head>
  <body>
    <!--HORS VUE-->
+    <canvas id="canvas"></canvas>
+    <video autoplay muted loop src="./background.webm" id="background"></video>
    <div id="mainContainer">
      <div class="uiStyle" id="topBar">
        <div class="left">
@@ -86,13 +88,13 @@
          </svg>
        </div>
        <div class="uiStyle" id="lolOpener">
-          <p>Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :</p>
+          <p id="desc">Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :</p>
        </div>
      </div>
      <div id="aboutSection">
        <div class="uiStyle" id="aboutText">
          <p>
-            Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tout les passionné·es d'informatique, d'électronique et de technique,
+            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>
@@ -104,7 +106,7 @@
    			<p>
            Nous revendiquons l'ouverture du code et des techniques,
    				le partage des connaissances et l'autogestion,
-            la liberté et l'anti-fascisme. <br><br>
+            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>
@@ -1,3 +1,8 @@
+<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>
@@ -6,16 +11,90 @@
    <lolStatusDiv></lolStatusDiv>
  </Teleport>
  <eventDiv></eventDiv>
-  <eventPannel class="zFocus"></eventPannel>  
+  <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!");
    }
  };
@@ -0,0 +1,148 @@
+import { lolState } from './lolStatus.js'
+
+const arr = []
+for (let i = 0; i < 256; i++){
+  arr.push(i)
+}
+
+function createPermTable(){
+  let data = [...arr]
+  //console.log('base :', arr)
+  for (let i = data.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [data[i], data[j]] = [data[j], data[i]];
+  }
+  //console.log('result :', permutationTable)
+    return data
+}
+
+const perm = createPermTable();
+const p = [...perm, ...perm];
+
+const F2 = 0.5 * (Math.sqrt(3) - 1); // Skew factor for 2D
+const G2 = (3 - Math.sqrt(3)) / 6;   // Unskew factor for 2D
+const scale = 0.7
+
+const target = document.querySelector('#canvas');
+
+const ctx = target.getContext('2d');
+
+// 12 gradient vectors for 2D Simplex Noise
+const grad3 = [
+  [1, 1], [-1, 1], [1, -1], [-1, -1],
+  [1, 0], [-1, 0], [0, 1], [0, -1],
+  [1, 2], [-1, 2], [2, 1], [-2, 1]
+];
+
+function simplex(x, y) {
+  // Step 1: Skew input coordinates to simplex grid
+  const s = (x + y) * F2; // Skew factor
+  const i = Math.floor(x + s); // Simplex grid i
+  const j = Math.floor(y + s); // Simplex grid j
+
+  // Step 2: Unskew to get (x0, y0) in Cartesian space (distance to (i,j))
+  const t = (i + j) * G2;
+  const x0 = x - (i - t); // Unskewed x in [0,1)
+  const y0 = y - (j - t); // Unskewed y in [0,1)
+
+  // Step 3: Determine which simplex (triangle) the point is in
+  let i1, j1; // Offsets for the other two simplex vertices
+  if (x0 > y0) {
+    i1 = 1; j1 = 0; // Lower triangle (x0 > y0)
+  } else {
+    i1 = 0; j1 = 1; // Upper triangle (x0 ≤ y0)
+  }
+
+  // Step 4: Coordinates of the other two simplex vertices
+  const x1 = x0 - i1 + G2; // Distance to (i+i1, j+j1)
+  const y1 = y0 - j1 + G2;
+  const x2 = x0 - 1 + 2 * G2; // Distance to (i+1, j+1)
+  const y2 = y0 - 1 + 2 * G2;
+
+  // Step 5: Hash indices for the 3 simplex vertices
+  const ii = i & 255;
+  const jj = j & 255;
+  const gi0 = p[ii + p[jj]] % 12;    // (i,j) gradient index
+  const gi1 = p[ii + i1 + p[jj + j1]] % 12; // (i+i1,j+j1) gradient index
+  const gi2 = p[ii + 1 + p[jj + 1]] % 12;  // (i+1,j+1) gradient index
+
+  // Step 6: Compute contributions from each vertex
+  let t0 = 0.5 - x0 * x0 - y0 * y0; // Falloff (t^4 fade)
+  const n0 = t0 < 0 ? 0 : Math.pow(t0, 4) * (grad3[gi0][0] * x0 + grad3[gi0][1] * y0);
+
+  let t1 = 0.5 - x1 * x1 - y1 * y1;
+  const n1 = t1 < 0 ? 0 : Math.pow(t1, 4) * (grad3[gi1][0] * x1 + grad3[gi1][1] * y1);
+
+  let t2 = 0.5 - x2 * x2 - y2 * y2;
+  const n2 = t2 < 0 ? 0 : Math.pow(t2, 4) * (grad3[gi2][0] * x2 + grad3[gi2][1] * y2);
+
+  // Step 7: Sum contributions and normalize (2D Simplex ranges ~[-1, 1])
+  return 70 * (n0 + n1 + n2); // 70 scales to ~[-1, 1]
+}
+
+function analogLikeNoise(){
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let offset = 0;
+  let index = 0;
+  let brightness = 0;
+
+  for(let x = 0; x<tW; x++){
+    const sx = x * scale + offset
+    for(let y = 0; y<tH; y++){
+      let lum = Math.random()*161
+
+      //img.data[index++] = lum*150/255;
+      index++
+      img.data[index++] = lum;
+      img.data[index++] = lum;
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+
+  offset ++;
+  if(offset>1024){
+    offset = 0;
+  }
+}
+
+let time = 0
+
+function scanlines(){
+  time += 0.05;
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let index = 0;
+
+  for(let y = 0; y<tH; y++){
+    for(let x = 0; x<tW; x++){
+      let lum = (Math.sin(y*2 - time *2) * 50) +128;
+
+      //img.data[index++] = lum;
+      index++;
+      img.data[index++] = lum + Math.random()*16;
+      //img.data[index++] = lum + Math.random()*32;
+      index++
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+}
+
+export function cuteAndCyber(){
+  if(!(lolState.isOpen)){
+    document.querySelector('#background').style.visibility = 'hidden';
+    analogLikeNoise();
+    requestAnimationFrame(cuteAndCyber);
+  }else{
+    scanlines();
+    document.querySelector('#background').playbackRate = 0.777;
+    document.querySelector('#background').style.visibility = 'visible';
+    requestAnimationFrame(cuteAndCyber);
+  }
+}
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.67 16.63">
+  <path d="M5.28,0v16.63H0V0h5.28Z"/>
+  <path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
+</svg>
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
-  <path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
 </svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.51 84.66">
+  <path d="M18.91,0v49.74c-.47-.03-.94-.06-1.42-.06-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.35-3.41,5.02-7.6,5.02-12.56,0-.53-.03-1.05-.07-1.57V16h46.6v22.48c-.49-.04-.99-.07-1.49-.07-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.31-3.37,4.97-7.49,5.02-12.37h0V0H18.91Z"/>
+</svg>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.6 133.47">
+  <g id="Calque_1-2" data-name="Calque 1">
+    <path d="M78.6,113.9V0H0v113.9h0l.07,19.57,39.15-38.87,39.16,38.73.21-19.43h0ZM39.08,78.6l-23.08,20.85V16h46.6v83.5l-23.23-20.9h-.3Z"/>
+  </g>
+</svg>
@@ -46,6 +46,8 @@
            border-radius: 16.1px;
            flex-shrink: 0;
            gap: 0;
+            mix-blend-mode: exclusion;
+            filter: contrast(200%);

                  .titleSection{
                    width: 100%;
@@ -102,6 +104,7 @@
    .eventEntry:hover{
      background-color: var(--back-color);
      color: var(--main-color);
+      mix-blend-mode: normal;

      p{
        color: var(--main-color);
@@ -122,7 +125,12 @@
      openEvent(obj){
        console.log('updating...')
        dataStorage.selectedEvent = obj;
-        dataStorage.eventInfoActive = true;
+        if (dataStorage.activePannels.includes('event')){
+          dataStorage.focus = 'event'
+        } else {
+          dataStorage.activePannels.push('event')
+          dataStorage.focus = 'event'
+        }
      }
    },
    computed: {
@@ -3,7 +3,7 @@
 </script>

 <template>
-    <div id="eventPannel" class="windowStyle" ref="eventPannel" v-show="isActive">
+    <div id="eventPannel" class="windowStyle" ref="eventPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
      <Moveable
          className="moveable"
          :target="target"
@@ -38,6 +38,17 @@
    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;
@@ -63,13 +74,6 @@
                  }
          }
  }
-
-  /*================ PC LARGE*/
-  @media(min-width:650px){
-    #eventPannel{
-      left: 333px;
-    }
-  }
 </style>

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

          p{
            font-family: 'pressStart2P';
-            font-size: 13.12px;
+            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>
@@ -56,7 +63,7 @@
        this.statusText = this.lolCurrentStatus ? 'OUVERT !' : 'FERMÉ...';
        document.documentElement.setAttribute('data-theme' , currentTheme);
        document.querySelector('link').href = this.lolCurrentStatus ? './src/assets/favicon_open.svg' : './src/assets/favicon.svg'
-        this.$refs.lolStatus.style.animation = this.lolCurrentStatus ? 'blink 1.61s infinite' : 'none';
+        this.$refs.lolStatus.style.animation = this.lolCurrentStatus ? 'blink 3.33s infinite' : 'none';
      }
    },
    computed: {
@@ -0,0 +1,25 @@
+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
+    }
+  ]
+)
@@ -8,5 +8,6 @@ export const dataStorage = reactive({
    subtitle: '',
    desc: ''
  },
-  eventInfoActive: false
+  activePannels: [],
+  focus: ''
 })
@@ -0,0 +1,31 @@
+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: '#'
+    }
+  ]
+)
@@ -8,6 +8,8 @@ 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);

@@ -16,6 +18,8 @@ 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');
@@ -138,6 +138,39 @@ html, body{
  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{
@@ -169,6 +202,7 @@ html, body{
 .textBtnStyle:hover{
  background-color: var(--main-color);
  color: var(--back-color);
+  font-weight: bold;
 }

 .iconBtnStyle{
@@ -204,7 +238,7 @@ html, body{
 }

 .zBase{
-  z-index: 33;
+  z-index: 333;
 }

 .zFocus{
@@ -329,7 +363,7 @@ html, body{
          height: 200px;
          position: absolute;
          top: 55px;
-          right: 7.77px;
+          right: 3.33px;
          z-index: 3;

                .textBtnStyle{
@@ -457,6 +491,7 @@ html, body{
          line-height: 1em;
          text-transform: uppercase;
          padding-left: 13.12px;
+          mix-blend-mode: exclusion;

          #hackerLogo{
            width: 77px;
@@ -501,18 +536,6 @@ html, body{
          position: relative;
          gap: 0;
          height: auto;
-
-                #lolStatus{
-                  width:90%;
-                  height: 44px;
-                  border-color: var(--main-color);
-                  border-style: solid;
-                  border-width: thin;
-                  border-radius: 0;
-                  align-self: center;
-                  margin-bottom: 7.77px;
-
-                }
        }

  @media(min-width: 700px){
@@ -563,11 +586,10 @@ html, body{
            padding-left: 16.1px;
            height: 77px;

-                   #lolStatus{
-                     width: 44%;
-                     align-self: center;
-                     margin-top: 7.77px;
-                   }
+                    #desc{
+                      width: 44%;
+                      box-sizing: border-box;
+                    }
          }

          #title{
@@ -650,7 +672,7 @@ html, body{
        #aboutText{
          width: 60%;
          height: auto;
-          padding-left: 4.44px;
+          padding-left: 13.12px;
          padding-right: 13.12px;
          padding-bottom: 13.12px;
          overflow-y: scroll;
@@ -660,6 +682,7 @@ html, body{
          }
          @media(min-width: 1300px){
            height: 50vh;
+            padding-left: 33px;
          }

                p{
@@ -14,5 +14,13 @@ export default defineConfig({
    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'),
+      },
+    },
  }
 })
Author	SHA1	Message	Date
vgaNAR6ta	9f7e957979	edit: icon player + modif noise fermé + panneau plus large en format tres grand écran	2026-07-07 16:05:56 +02:00
vgaNAR6ta	7c25390ead	edit: audioData est mtn const reactive() et playlist editor fonctionne coté client	2026-07-07 01:23:27 +02:00
vgaNAR6ta	874226a140	tunnel: interface pour page admin sans backend + problème de gestion de la playlist (importé dans 2 script, l'un demande un focntion, l'autre une array et on est là hum...)	2026-07-06 22:32:41 +02:00
vgaNAR6ta	eaba21e126	edit: style de l'indicateur d'ouverture	2026-07-06 04:21:38 +02:00
vgaNAR6ta	55bf14fc73	edit: recadrage video fond + blend mode event pour lisibilité	2026-07-06 00:33:14 +02:00
vgaNAR6ta	9b9ba2bbdd	edit: animationn en mode ouvert un peu plus trql mais + saturé	2026-07-05 23:59:43 +02:00
vgaNAR6ta	b7a7583ad0	edit: background animé réactif à l'ouverture	2026-07-05 23:50:23 +02:00
vgaNAR6ta	45b54193d6	edit: explication du panneau lien utiles	2026-07-05 23:49:28 +02:00
vgaNAR6ta	ad870bd070	edit: interface pour le player et le panneau liens + fix z-index	2026-07-05 06:13:26 +02:00