edit: structure contenu contact, news & insta + panneau follow hors rezo + déplacement msgData.js plus haut dans dossiers

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{

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;
     }
   }

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>

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;
     }
   }

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>
 

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>

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>

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