From 460f7f637dd4569af0066b6af65f11c1abc0a5d5 Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Sun, 22 Mar 2026 04:14:40 +0100
Subject: [PATCH] edit: infobulle sur pc

---
 v1-com-officielle/src/App.vue                 |  1 +
 v1-com-officielle/src/assets/style.css        | 32 +++++-
 .../src/components/InfoContent.vue            |  1 +
 .../src/indieComponents/ArtistPannel.vue      |  4 +-
 .../src/indieComponents/ContactPannel.vue     |  2 +-
 .../src/indieComponents/FollowPannel.vue      |  2 +-
 .../src/indieComponents/Infobulle.vue         | 98 +++++++++++++++++++
 .../src/indieComponents/InstaPannel.vue       |  2 +-
 .../src/indieComponents/LinkPannel.vue        |  2 +-
 .../src/indieComponents/MessagePannel.vue     |  2 +-
 .../src/indieComponents/NewsletterPannel.vue  |  2 +-
 .../src/indieComponents/VisualizerPannel.vue  |  2 +-
 .../src/infoComponents/InboxContent.vue       |  6 +-
 .../src/infoComponents/InfoMenu.vue           | 10 +-
 v1-com-officielle/src/main.js                 |  3 +
 .../src/titleComponents/MusicPlayer.vue       |  6 +-
 .../src/titleComponents/TitleText.vue         | 17 +++-
 17 files changed, 170 insertions(+), 22 deletions(-)
 create mode 100644 v1-com-officielle/src/indieComponents/Infobulle.vue

diff --git a/v1-com-officielle/src/App.vue b/v1-com-officielle/src/App.vue
index 1cefe86..213dc6b 100644
--- a/v1-com-officielle/src/App.vue
+++ b/v1-com-officielle/src/App.vue
@@ -1,5 +1,6 @@
 <template>
     <div id="mainContainer">
+      <Infobulle></Infobulle>
       <TitleDiv></TitleDiv>
       <InfoDiv></InfoDiv>
     </div>
diff --git a/v1-com-officielle/src/assets/style.css b/v1-com-officielle/src/assets/style.css
index 7d3165e..2fbb8ad 100644
--- a/v1-com-officielle/src/assets/style.css
+++ b/v1-com-officielle/src/assets/style.css
@@ -35,6 +35,35 @@
   font-weight: bold;
 }
 
+/*===================Animation*/
+@keyframes blink {
+  0%   { color: var(--accent-color);}
+  15%  { color: var(--main-color);}
+  35%  { color: var(--main-color);}
+  50%  { color: var(--accent-color);}
+  65%  { color: var(--main-color);}
+  85%  { color: var(--main-color);}
+  100%  { color: var(--accent-color);}
+}
+
+@keyframes blinkBack {
+  0%   { background-color: var(--accent-color);}
+  15%  { background-color: var(--main-color);}
+  35%  { background-color: var(--main-color);}
+  50%  { background-color: var(--accent-color);}
+  65%  { background-color: var(--main-color);}
+  85%  { background-color: var(--main-color);}
+  100%  { background-color: var(--accent-color);}
+}
+
+@keyframes float {
+  0%   { transform: translateY(0px); }
+  35%  { transform: translateY(1px); }
+  50%  { transform: translateY(-10px); }
+  65%  { transform: translateY(1px); }
+  100% { transform: translateY(0px); }
+}
+
 /*=============Désact défault*/
 input {
   -webkit-appearance: none !important;
@@ -137,6 +166,7 @@ canvas {
   width: 16.1px;
   height: auto;
   fill: currentColor;
+  pointer-events: none;
 }
 
 .iconBtnStyle{
@@ -202,7 +232,7 @@ canvas {
 }
 
 .zFocus{
-  z-index: 333;
+  z-index: 1312;
   border-color: var(--accent-color);
   border-width: thick;
 }
diff --git a/v1-com-officielle/src/components/InfoContent.vue b/v1-com-officielle/src/components/InfoContent.vue
index 426cb8a..701bc8c 100644
--- a/v1-com-officielle/src/components/InfoContent.vue
+++ b/v1-com-officielle/src/components/InfoContent.vue
@@ -41,6 +41,7 @@
 <script>
   export default {
     name : 'InfoContent',
+    emits:['hideBubble'],
     mounted(){
       console.log("Info content is loaded!");
     }
diff --git a/v1-com-officielle/src/indieComponents/ArtistPannel.vue b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
index 70c8259..4262f80 100644
--- a/v1-com-officielle/src/indieComponents/ArtistPannel.vue
+++ b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
@@ -24,10 +24,10 @@
         </p>
         <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
         <div class="dblBtnContainer">
-          <button type="button" class="iconBtnStyle" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot">
+          <button type="button" class="iconBtnStyle" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot" data-tooltip="retour">
             <BackIcon name="backwoods" class="icon"/>
           </button>
-          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
+          <button type="button" class="iconBtnStyle" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked" data-tooltip="fermer">
             <CloseIcon name="close" class="icon"/>
           </button>
         </div>
diff --git a/v1-com-officielle/src/indieComponents/ContactPannel.vue b/v1-com-officielle/src/indieComponents/ContactPannel.vue
index bbfeec8..b1b00d9 100644
--- a/v1-com-officielle/src/indieComponents/ContactPannel.vue
+++ b/v1-com-officielle/src/indieComponents/ContactPannel.vue
@@ -15,7 +15,7 @@
           Contacter l'orga :
         </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')">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
diff --git a/v1-com-officielle/src/indieComponents/FollowPannel.vue b/v1-com-officielle/src/indieComponents/FollowPannel.vue
index f7f39cc..c546980 100644
--- a/v1-com-officielle/src/indieComponents/FollowPannel.vue
+++ b/v1-com-officielle/src/indieComponents/FollowPannel.vue
@@ -15,7 +15,7 @@
           Nous Suivre Hors des Réseaux !
         </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')">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
diff --git a/v1-com-officielle/src/indieComponents/Infobulle.vue b/v1-com-officielle/src/indieComponents/Infobulle.vue
new file mode 100644
index 0000000..44a41d7
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/Infobulle.vue
@@ -0,0 +1,98 @@
+<template>
+    <div id="infoBulleContainer" :style="{top: posY + 'px', left: posX + 'px'}">
+      <div v-show="isActive">{{bubbleContent}}</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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #infoBulleContainer{
+    width:161px;
+    position:fixed;
+    height:20px;
+    background-color: transparent;
+    z-index: 333;
+    pointer-events: none;
+  }
+
+  #infoBulleContainer div{
+    visibility: hidden;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    color: var(--back-color);
+    border-color: var(--main-color);
+    border-style: solid;
+    border-width: thin;
+    font-family: 'velvelyne';
+    font-weight: bold;
+    font-size: 10px;
+    line-height: 0.5em;
+    padding: 0;
+    margin: 0;
+    border-radius: 33px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    animation: blinkBack 1.61s infinite;
+    pointer-events: none;
+  }
+
+
+
+  /*================ PC LARGE*/
+  @media(min-width:800px){
+    #infoBulleContainer div{
+      visibility: visible;
+      font-size: 13.12px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'Infobulle',
+    data(){
+      return{
+        isActive: false,
+        posX: 0,
+        posY: 0,
+        bubbleContent:""
+      }
+    },
+    methods:{
+      loadBubble(event){
+        let item = event.target
+        if (!item.dataset.tooltip) {
+          this.hideBubble();
+          return
+        }
+        this.bubbleContent = item.dataset.tooltip;
+        this.posX = event.clientX - 200;
+        this.posY = event.clientY + 20;
+        this.isActive = true;
+      },
+      hideBubble(){
+        this.isActive = false
+      }
+    },
+    mounted(){
+      document.addEventListener('mousemove', this.loadBubble);
+      document.addEventListener('hideBubble', this.hideBubble);
+      console.log("Info-bubble is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/indieComponents/InstaPannel.vue b/v1-com-officielle/src/indieComponents/InstaPannel.vue
index 52a5583..a2ea505 100644
--- a/v1-com-officielle/src/indieComponents/InstaPannel.vue
+++ b/v1-com-officielle/src/indieComponents/InstaPannel.vue
@@ -15,7 +15,7 @@
           ATTENTION!
         </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')">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
diff --git a/v1-com-officielle/src/indieComponents/LinkPannel.vue b/v1-com-officielle/src/indieComponents/LinkPannel.vue
index defb62e..5b4aca1 100644
--- a/v1-com-officielle/src/indieComponents/LinkPannel.vue
+++ b/v1-com-officielle/src/indieComponents/LinkPannel.vue
@@ -15,7 +15,7 @@
           {{selectedLink.caption}}
         </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')">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
diff --git a/v1-com-officielle/src/indieComponents/MessagePannel.vue b/v1-com-officielle/src/indieComponents/MessagePannel.vue
index 8f276fa..7c7269b 100644
--- a/v1-com-officielle/src/indieComponents/MessagePannel.vue
+++ b/v1-com-officielle/src/indieComponents/MessagePannel.vue
@@ -17,7 +17,7 @@
         {{selectedMsg.title}}
       </p>
       <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
-      <button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="closeMsg" @click="closeMsg">
+      <button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="closeMsg" @click="closeMsg" data-tooltip="fermer">
         <CloseIcon name="close" class="icon"/>
       </button>
     </div>
diff --git a/v1-com-officielle/src/indieComponents/NewsletterPannel.vue b/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
index 63c63a5..7767128 100644
--- a/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
+++ b/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
@@ -15,7 +15,7 @@
           Newsletter
         </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')">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
diff --git a/v1-com-officielle/src/indieComponents/VisualizerPannel.vue b/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
index 01d2e05..442b388 100644
--- a/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
+++ b/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
@@ -15,7 +15,7 @@
           {{selectedImg.caption}}
         </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')">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
diff --git a/v1-com-officielle/src/infoComponents/InboxContent.vue b/v1-com-officielle/src/infoComponents/InboxContent.vue
index 64903c2..0139f86 100644
--- a/v1-com-officielle/src/infoComponents/InboxContent.vue
+++ b/v1-com-officielle/src/infoComponents/InboxContent.vue
@@ -9,7 +9,7 @@
         <div id="inboxTitle">
           <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
         </div>
-        <div id="msgNumberStyle">
+        <div id="msgNumberStyle" data-tooltip="message.s non lu.s">
           <p>{{msgNumber}}</p>
         </div>
       </div>
@@ -78,6 +78,10 @@
     padding-right: 44px;
   }
 
+  #msgNumberStyle p{
+    pointer-events: none;
+  }
+
   #inboxList{
     width:100%;
     height: 75%;
diff --git a/v1-com-officielle/src/infoComponents/InfoMenu.vue b/v1-com-officielle/src/infoComponents/InfoMenu.vue
index 2088d9e..5a86924 100644
--- a/v1-com-officielle/src/infoComponents/InfoMenu.vue
+++ b/v1-com-officielle/src/infoComponents/InfoMenu.vue
@@ -14,21 +14,21 @@
         <button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
       </div>
       <div id="btnColumn">
-        <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')">
+        <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
           <CloseIcon name="test" class="icon"/>
         </button>
-        <button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')">
+        <button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
           <CloseIcon name="test" class="icon"/>
         </button>
-        <button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')">
+        <button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
           <CloseIcon name="test" class="icon"/>
         </button>
-        <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')">
+        <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
           <CloseIcon name="test" class="icon"/>
         </button>
       </div>
     </div>
-    <!--'msg' 'insta' 'news' 'contact' 'artist'-->
+    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
     <InboxDiv @open="openPannel('msg')"></InboxDiv>
     <ArtistPan
       v-show="isActive.includes('artist')"
diff --git a/v1-com-officielle/src/main.js b/v1-com-officielle/src/main.js
index e34a74e..b0ae893 100644
--- a/v1-com-officielle/src/main.js
+++ b/v1-com-officielle/src/main.js
@@ -23,6 +23,7 @@ import FollowPannel from './indieComponents/FollowPannel.vue'
 import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
 import LinkPannel from './indieComponents/LinkPannel.vue'
 
+import Infobubble from './indieComponents/Infobulle.vue'
 
 // création app racine
 const app = createApp(App);
@@ -47,6 +48,8 @@ app.component('FollowPan', FollowPannel);
 app.component('VisualizerPan', VisualizerPannel);
 app.component('LinkPan', LinkPannel);
 
+app.component('Infobulle', Infobubble);
+
 
 //Montage dans div#app de index.html
 app.mount('#app');
diff --git a/v1-com-officielle/src/titleComponents/MusicPlayer.vue b/v1-com-officielle/src/titleComponents/MusicPlayer.vue
index 2006775..599de2a 100644
--- a/v1-com-officielle/src/titleComponents/MusicPlayer.vue
+++ b/v1-com-officielle/src/titleComponents/MusicPlayer.vue
@@ -8,13 +8,13 @@
       <div id="playerCreditStyle">
         <p>{{audioCredits}}</p>
       </div>
-      <button type="button" class="iconBtnStyle" @click="prevTrack">
+      <button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
         <CloseIcon name="prev" class="icon"/>
       </button>
-      <button type="button" class="iconBtnStyle" @click="toggleAudio">
+      <button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
         <CloseIcon name="toggle" class="icon"/>
       </button>
-      <button type="button" class="iconBtnStyle" @click="nextTrack">
+      <button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
         <CloseIcon name="next" class="icon"/>
       </button>
     </div>
diff --git a/v1-com-officielle/src/titleComponents/TitleText.vue b/v1-com-officielle/src/titleComponents/TitleText.vue
index 12254e7..da0d6c3 100644
--- a/v1-com-officielle/src/titleComponents/TitleText.vue
+++ b/v1-com-officielle/src/titleComponents/TitleText.vue
@@ -11,13 +11,19 @@
           <p id="numberTwo"></p>
         </div>
         <div class="subtitleTextStyle">
-          <p>Drag shows, musique électronique, synthés vidéos et autre performances nerds</p>
+          <p id="subAccent">Drag shows + musique électronique, synthés vidéos<br>et autre performances nerds</p>
         </div>
         <div id="infoContainer">
           <div class="subtitleTextStyle">
-            <time datetime="2026-05-22" id="timeInfo">
+            <time datetime="2026-05-22T16:00" id="timeInfo">
               <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
+              </p>
             </time>
           </div>
           <div id="placeInfo" class="subtitleTextStyle">
@@ -48,7 +54,7 @@
   */
 
   #titleTextContainer{
-    width:100%;
+    width:99.8%;
     height:24%;
   }
 
@@ -108,6 +114,11 @@
     padding: 0;
     margin-left: 16.1px;
     margin-right: 16.1px;
+    line-height: 1.117em;
+  }
+  #subAccent{
+    font-family: 'lineal';
+    font-weight: normal;
   }
 
   #infoContainer{