edit: theme switch button, réglages couleurs & minor bug fix

v1-com-officielle/src/App.vue

@@ -45,7 +45,7 @@
   export default {
     name : 'App',
     mounted(){
-      document.documentElement.setAttribute("data-theme", "light");
+      document.documentElement.setAttribute("data-theme", "light")
       console.log("Vue root app is fully loaded!");
     }
   };

v1-com-officielle/src/components/TitleContent.vue

@@ -3,6 +3,7 @@
       <PlayerDiv></PlayerDiv>
       <GeneratedDiv></GeneratedDiv>
       <TitleTextDiv></TitleTextDiv>
+      <ColorPan></ColorPan>
     </div>
 </template>
 

v1-com-officielle/src/indieComponents/MessagePannel.vue

@@ -24,7 +24,7 @@
     <div class="windowContent">
       <div class="msgReact">
         <p class="reactStatStyle">{{selectedMsg.like}}</p>
-        <button type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
+        <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
           <CloseIcon name="test" class="icon"/>
         </button>
         <p v-show="selectedMsg.isEvent" class="reactStatStyle">{{selectedMsg.going}}</p>
@@ -74,6 +74,7 @@
     justify-content: flex-start;
     font-family: 'lineal';
     font-weight: normal;
+    color: var(--main-color);
     padding: 0;
   }
   .windowContent .reactStatStyle{

v1-com-officielle/src/main.js

@@ -10,6 +10,7 @@ import InfoContent from './components/InfoContent.vue'
 import TitleText from './titleComponents/TitleText.vue'
 import GeneratedContent from './titleComponents/GeneratedContent.vue'
 import MusicPlayer from './titleComponents/MusicPlayer.vue'
+import ColorBtn from './titleComponents/ColorBtn.vue'
   //info
 import InfoMenu from './infoComponents/InfoMenu.vue'
 import InboxContent from './infoComponents/InboxContent.vue'
@@ -49,6 +50,7 @@ app.component('VisualizerPan', VisualizerPannel);
 app.component('LinkPan', LinkPannel);
 
 app.component('Infobulle', Infobubble);
+app.component('ColorPan', ColorBtn);
 
 
 //Montage dans div#app de index.html

v1-com-officielle/src/titleComponents/ColorBtn.vue

@@ -0,0 +1,134 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="colorBtnContainer">
+      <CloseIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
+      <label class="switch">
+        <input type="checkbox" @click="toggleTheme">
+        <span class="slider round"></span>
+      </label>
+      <CloseIcon name="solar" class="icon" :class="{checkedIcon: !isChecked}"/>
+    </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){}
+  */
+
+  #colorBtnContainer{
+    position:absolute;
+    right: -16.1px;
+    top: 222px;
+    height: 117px;
+    width: 77px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 333;
+  }
+
+  .checkedIcon{
+    color: var(--back-color);
+    fill: var(--accent-color);
+   }
+
+  /*==========================Toggle*/
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 60px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--accent-color);
+    border-color: var(--main-color);
+    border-style: solid;
+    border-width: thin;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 3.33px;
+    bottom: 4px;
+    background-color: var(--main-color);
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: var(--accent-color);
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateY(-26px);
+    -ms-transform: translateY(-26px);
+    transform: translateY(-26px);
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #colorBtnContainer{
+      right: unset;
+      left: -3.33px;
+      top: 444px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'InfoContent',
+    data(){
+      return{
+        isChecked: false
+      }
+    },
+    methods:{
+      toggleTheme(){
+        if(this.isChecked){
+          this.isChecked = false;
+          return document.documentElement.setAttribute("data-theme", "light")
+        }else{
+          this.isChecked = true;
+          return document.documentElement.setAttribute("data-theme", "dark")
+        }
+      }
+    },
+    mounted(){
+      console.log("Theme button is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/titleComponents/MusicPlayer.vue

@@ -71,6 +71,8 @@
     font-family: 'velvelyne';
     font-size: 16.1px;
     font-weight: bold;
+    white-space: pre;
+    line-height: 1.0em;
   }
 
 
@@ -86,6 +88,7 @@
     #playerCreditStyle{
       margin-left: 33px;
       width: 33.3%;
+      white-space: inherit;
     }
   }
 </style>
@@ -114,7 +117,7 @@
         this.target.pause();
         this.selectedSong = this.audioData[this.trackCount];
         this.audioFile = this.selectedSong.src;
-        this.audioCredits = this.selectedSong.artist +'-'+ this.selectedSong.track;
+        this.audioCredits = ' ' + this.selectedSong.track +' - \n         '+ this.selectedSong.artist;
         this.target.volume = 1;
         this.target.load();
         if(this.isPlaying){

v1-com-officielle/src/titleComponents/TitleText.vue

@@ -11,7 +11,7 @@
           <p id="numberTwo"></p>
         </div>
         <div class="subtitleTextStyle">
-          <p id="subAccent">Drag shows + musique électronique, synthés vidéos<br>et autre performances nerds</p>
+          <p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autre performances nerds</p>
         </div>
         <div id="infoContainer">
           <div class="subtitleTextStyle">
@@ -19,7 +19,6 @@
               <p><strong>22 Mai</strong></p>
               <p>2026</p>
               <p>
-              <br>
               &emsp;&emsp;&emsp;&emsp;&emsp;&ensp;16h00
               <br>
               &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; - 01h00
@@ -70,6 +69,7 @@
   .titleTextStyle{
     position: absolute;
     background-color: var(--back-color);
+    color: var(--main-color);
     width: 85%;
     height: 27px;
     padding-bottom: 16.1px;
@@ -81,6 +81,9 @@
     align-items: center;
     z-index: 1;
   }
+  .titleTextStyle p{
+    color: (--main-color);
+  }
   #drag{
     margin-top: -100px;
     margin-left: 33px;
@@ -119,6 +122,7 @@
   #subAccent{
     font-family: 'lineal';
     font-weight: normal;
+    margin-bottom: 4.44px;
   }
 
   #infoContainer{
@@ -193,6 +197,7 @@
       padding-bottom: 16.1px;
       padding-left: 33px;
       font-size: 33px;
+      color: (--main-color);
     }
     #drag{
       margin-top: -150px;