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

README.md

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

admin/Admin.vue

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

admin/components/EventEditor.vue

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

admin/components/LinkEditor.vue

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

admin/components/PlaylistEditor.vue

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

admin/favicon.svg

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

admin/index.html

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

admin/main.js

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

admin/pannelStatus.js

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

admin/style.css

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

index.html

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

src/App.vue

@@ -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!");
     }
   };

src/artAndTexture.js

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

src/assets/icons/pause.svg

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

src/assets/icons/play.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">
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
-  <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"/>
+  <path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
 </svg>

src/assets/icons/player.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>

src/assets/icons/saved.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>

src/components/EventContent.vue

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

src/components/EventInfoPannel.vue

@@ -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(){

src/components/LinkPannel.vue

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

src/components/PlayerPannel.vue

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

src/components/lolStatus.vue

@@ -8,30 +8,37 @@
   #lolStatusContainer{
     width: 161px;
     height: 33px;
-    background-color: transparent;
+    background-color: var(--main-color);
-    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: {

src/data/audioData.js

@@ -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
+    }
+  ]
+)

src/dataExchange.js

@@ -8,5 +8,6 @@ export const dataStorage = reactive({
     subtitle: '',
     desc: ''
   },
-  eventInfoActive: false
+  activePannels: [],
+  focus: ''
 })

src/lolLinks.js

@@ -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: '#'
+    }
+  ]
+)

src/main.js

@@ -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');

src/style.css

@@ -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,10 +586,9 @@ html, body{
             padding-left: 16.1px;
             height: 77px;
 
-                   #lolStatus{
+                    #desc{
                       width: 44%;
-                     align-self: center;
+                      box-sizing: border-box;
-                     margin-top: 7.77px;
                     }
           }
 
@@ -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{

vite.config.js

@@ -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'),
+      },
+    },
   }
 })