From 0694466f949bccf0477fcfc6656a3192d37e312e Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Fri, 20 Mar 2026 07:02:53 +0100
Subject: [PATCH] =?UTF-8?q?edit:=20structure=20contenu=20contact,=20news?=
 =?UTF-8?q?=20&=20insta=20+=20panneau=20follow=20hors=20rezo=20+=20d=C3=A9?=
 =?UTF-8?q?placement=20msgData.js=20plus=20haut=20dans=20dossiers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v1-com-officielle/src/assets/style.css        |  4 +-
 .../src/indieComponents/ContactPannel.vue     | 47 +++++++++--
 .../src/indieComponents/FollowPannel.vue      | 82 ++++++++++++++++++
 .../src/indieComponents/InstaPannel.vue       | 44 +++++++++-
 .../src/indieComponents/NewsletterPannel.vue  | 83 ++++++++++++++++++-
 .../src/infoComponents/InboxContent.vue       |  2 +-
 .../src/infoComponents/InfoMenu.vue           |  8 +-
 v1-com-officielle/src/main.js                 |  2 +
 .../src/{infoComponents => }/msgData.js       |  0
 9 files changed, 255 insertions(+), 17 deletions(-)
 create mode 100644 v1-com-officielle/src/indieComponents/FollowPannel.vue
 rename v1-com-officielle/src/{infoComponents => }/msgData.js (100%)

diff --git a/v1-com-officielle/src/assets/style.css b/v1-com-officielle/src/assets/style.css
index 9d58263..7d3165e 100644
--- a/v1-com-officielle/src/assets/style.css
+++ b/v1-com-officielle/src/assets/style.css
@@ -37,8 +37,8 @@
 
 /*=============Désact défault*/
 input {
-  -webkit-appearance: none;
-  appearance: none;
+  -webkit-appearance: none !important;
+  appearance: none !important;
 }
 
 a{
diff --git a/v1-com-officielle/src/indieComponents/ContactPannel.vue b/v1-com-officielle/src/indieComponents/ContactPannel.vue
index 4285a84..bbfeec8 100644
--- a/v1-com-officielle/src/indieComponents/ContactPannel.vue
+++ b/v1-com-officielle/src/indieComponents/ContactPannel.vue
@@ -19,8 +19,16 @@
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
-      <div class="windowContent">
-
+      <div class="windowContent" id="contactContent">
+        <div id="contactText">
+          <p>Si tu veux nous contacter directement, tu peux:<br>&emsp;- nous envoyer un mail<br>&emsp;- ou un DM sur insta</p>
+        </div>
+        <a href="#" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+          E-MAIL
+        </a>
+        <a href="#" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+          INSTA
+        </a>
       </div>
     </div>
 </template>
@@ -42,15 +50,44 @@
   #contactPannel{
     position: fixed;
     width: 333px;
-    height: 333px;
+    height: 350px;
     top: 154px;
     left: 66px;
   }
+
+  #contactContent{
+    width:100%;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  #contactText{
+    width:90%;
+    height:16.1%;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 16.1px;
+  }
+
+  #contactContent .textBtnStyle{
+    width: 90%;
+    height: 77px;
+    margin-top: 16.1px;
+  }
+
   /*================ PC LARGE*/
   @media(min-width:1300px){
     #contactPannel{
-      height: 444px;
-      width: 444px;
+      height: 333px;
+      width: 350px;
       left: 366px;
     }
   }
diff --git a/v1-com-officielle/src/indieComponents/FollowPannel.vue b/v1-com-officielle/src/indieComponents/FollowPannel.vue
new file mode 100644
index 0000000..f7f39cc
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/FollowPannel.vue
@@ -0,0 +1,82 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="followPannel" class="windowStyle" ref="followPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          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')">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="followContent">
+
+      </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){}
+  */
+
+  #followPannel{
+    position: fixed;
+    width: 333px;
+    height: 444px;
+    top: 400px;
+    left: 50px;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #followPannel{
+      left:444px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'FollowPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.followPannel;
+      console.log("Follow off-socials pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/indieComponents/InstaPannel.vue b/v1-com-officielle/src/indieComponents/InstaPannel.vue
index 601f322..52a5583 100644
--- a/v1-com-officielle/src/indieComponents/InstaPannel.vue
+++ b/v1-com-officielle/src/indieComponents/InstaPannel.vue
@@ -19,8 +19,13 @@
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
-      <div class="windowContent">
-
+      <div class="windowContent" id="warnContent">
+        <div id="warnText">
+          <p>Vous allez quiter le site<br>pour aller sur <strong>Instragram!</strong></p>
+        </div>
+        <a href="#" class="textBtnStyle" @mousedown.stop @touchstart.stop target="_blank" @click="$emit('close')">
+          OK !
+        </a>
       </div>
     </div>
 </template>
@@ -46,11 +51,42 @@
     top: 333px;
     left: 33px;
   }
+
+  #warnContent{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    width: 100%;
+  }
+
+  #warnText{
+    height:100%;
+    width: 66.6%;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  #warnText strong{
+    font-family: 'lineal';
+    font-weight: normal;
+  }
+
+
+
+  #warnContent .textBtnStyle{
+    height:33px;
+    width: 77px;
+  }
   /*================ PC LARGE*/
   @media(min-width:1300px){
     #instaPannel{
-      height: 250px;
-      width: 444px;
       left:333px;
     }
   }
diff --git a/v1-com-officielle/src/indieComponents/NewsletterPannel.vue b/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
index 4e3a1de..63c63a5 100644
--- a/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
+++ b/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
@@ -19,8 +19,14 @@
           <CloseIcon name="close" class="icon"/>
         </button>
       </div>
-      <div class="windowContent">
-
+      <div class="windowContent" id="newsletterContent">
+        <div id="newsletterText">
+          <p>Pour t'inscrire à la newsletter Drags & Nerds,<br>renseigne ton E-MAIL ici :</p>
+        </div>
+        <form id="newsletterForm">
+          <input type="text" name="emailIn" placeholder="example@drags-nerds.net" @touchstart.stop @mousedown.stop>
+          <button type="submit" name="subscribeNews" class="textBtnStyle" @touchstart.stop @mousedown.stop>S'INSCRIRE !</button>
+        </form>
       </div>
     </div>
 </template>
@@ -42,17 +48,86 @@
   #newsletterPannel{
     position: fixed;
     width: 333px;
-    height: 161px;
+    height: 200px;
     top: 77px;
     left: 33px;
   }
+
+  #newsletterContent{
+    width:100%;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  #newsletterText{
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    width:95%;
+    height:16.1%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding-top: 20px;
+    margin-left: 0;
+  }
+
+  #newsletterForm{
+    width:100%;
+    height:75%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-around;
+    padding-top: 16.1px;
+  }
+  #newsletterForm input{
+    width:60%;
+    height:50px;
+    padding-left: 16.1px;
+    background-color: transparent;
+    color: var(--main-color);
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    border-radius: 50px;
+    border-style: solid;
+    border-width: thin;
+    border-color: var(--main-color);
+  }
+  #newsletterForm input:focus{
+    color: var(--accent-color);
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+    border-width: thin;
+    outline: none;
+  }
+  #newsletterForm .textBtnStyle{
+    height: 50px;
+    width: 77px;
+    border-radius: 50px;
+  }
   /*================ PC LARGE*/
   @media(min-width:1300px){
     #newsletterPannel{
-      height: 250px;
+      height: 190px;
       width: 444px;
       left:333px;
     }
+
+    #newsletterText{
+        width: 100%;
+        margin-left: -93px;
+    }
+
+    #newsletterForm .textBtnStyle{
+      width:100px;
+    }
   }
 </style>
 
diff --git a/v1-com-officielle/src/infoComponents/InboxContent.vue b/v1-com-officielle/src/infoComponents/InboxContent.vue
index 3b82e56..6f1730f 100644
--- a/v1-com-officielle/src/infoComponents/InboxContent.vue
+++ b/v1-com-officielle/src/infoComponents/InboxContent.vue
@@ -1,6 +1,6 @@
 <script setup>
   import CloseIcon from '../assets/icons/close.svg'
-  import { msgDataList } from './msgData.js'
+  import { msgDataList } from '../msgData.js'
 </script>
 
 <template>
diff --git a/v1-com-officielle/src/infoComponents/InfoMenu.vue b/v1-com-officielle/src/infoComponents/InfoMenu.vue
index c3b95a4..3276eee 100644
--- a/v1-com-officielle/src/infoComponents/InfoMenu.vue
+++ b/v1-com-officielle/src/infoComponents/InfoMenu.vue
@@ -11,7 +11,7 @@
           <br>
           Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
         </p>
-        <button type="button" class="textBtnStyle">NOUS SUIVRE HORS DES RÉSEAUX!</button>
+        <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')">
@@ -60,6 +60,12 @@
       @focus="focusPannel('msg')"
       :class="{zBase: isFocused!=='msg', zFocus: isFocused==='msg'}">
     </MessagePan>
+    <FollowPan
+      v-show="isActive.includes('follow')"
+      @close="closePannel('follow')"
+      @focus="focusPannel('follow')"
+      :class="{zBase: isFocused!=='follow', zFocus: isFocused==='follow'}">
+    </FollowPan>
 </template>
 
 <style scoped>
diff --git a/v1-com-officielle/src/main.js b/v1-com-officielle/src/main.js
index 7f1036a..6384b98 100644
--- a/v1-com-officielle/src/main.js
+++ b/v1-com-officielle/src/main.js
@@ -19,6 +19,7 @@ import NewsletterPannel from './indieComponents/NewsletterPannel.vue'
 import ContactPannel from './indieComponents/ContactPannel.vue'
 import InstaPannel from './indieComponents/InstaPannel.vue'
 import MessagePannel from './indieComponents/MessagePannel.vue'
+import FollowPannel from './indieComponents/FollowPannel.vue'
 
 // création app racine
 const app = createApp(App);
@@ -39,6 +40,7 @@ app.component('NewsPan', NewsletterPannel);
 app.component('ContactPan', ContactPannel);
 app.component('InstaPan', InstaPannel);
 app.component('MessagePan', MessagePannel);
+app.component('FollowPan', FollowPannel);
 
 //Montage dans div#app de index.html
 app.mount('#app');
diff --git a/v1-com-officielle/src/infoComponents/msgData.js b/v1-com-officielle/src/msgData.js
similarity index 100%
rename from v1-com-officielle/src/infoComponents/msgData.js
rename to v1-com-officielle/src/msgData.js