edit: ajout des panneaux donations et tickets

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

@@ -0,0 +1,118 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="donationPannel" class="windowStyle" ref="donationPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Nous faire une donation:
+        </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">
+          <p>Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
+          <div id="linkRow">
+            <a href="#" class="textBtnStyle">Lydia</a>
+            <a href="#" class="textBtnStyle">Paypal</a>
+            <a href="#" class="textBtnStyle">SumUp</a>
+          </div>
+      </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){}
+  */
+
+  #donationPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 366px;
+    left: 66px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  #donationPannel .windowContent p{
+    width: 90%;
+    text-align: left;
+    margin-bottom: 16.1px;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    line-height: 1.2em;
+  }
+
+  #linkRow{
+    width:100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  #linkRow .textBtnStyle{
+    width: 27%;
+    height: 50px;
+    margin-bottom: 16.1px;
+  }
+
+
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #donationPannel{
+      left:366px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'DonationPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.donationPannel;
+      console.log("Donation pannel is loaded!");
+    }
+  };
+</script>

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

@@ -63,7 +63,7 @@
   }
 
   #TsContainer{
-    top: -161%;
+    top: -155%;
     left: 131.2px;
   }
   #graffTs{

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

@@ -0,0 +1,136 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="ticketPannel" class="windowStyle" ref="ticketPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Réserver une place
+        </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">
+          <p>
+            Afin de pouvoir estimer le nombre
+            <br>
+            de participation, nous avons mis en place
+            <br>
+            un système de <strong>"prévente à prix libre"</strong>
+            <br>
+            <br>
+            Lors de la réservation, tu indiques
+            <br>
+            une intention de don le jour même,
+            <br>
+            c'est-à-dire la somme que tu penses
+            <br>
+            pouvoir donner le jour J.
+            <br>
+            <br>
+            Cette réservation ne t'engage
+            <br>
+            <strong>à rien en terme de paiement,</strong>
+            <br>
+            et tu pourras toujours revenir sur le montant indiqué, lors de l'évènement.
+            <br>
+            <br>
+            De notre coté, on s'engage à te garder une place <strong>jusqu'au début des shows,</strong>
+            <br>
+            si jamais la jauge est atteinte.
+          </p>
+          <a href="#" class="textBtnStyle">Je veux une place !</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){}
+  */
+
+  #ticketPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 200px;
+    left: 33px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  #ticketPannel .windowContent p{
+    width: 90%;
+    text-align: left;
+    margin-bottom: 16.1px;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    line-height: 1.2em;
+  }
+
+    #ticketPannel .windowContent p strong{
+      font-family: 'lineal';
+      font-weight: normal;
+    }
+
+  #ticketPannel .textBtnStyle{
+    width: 77%;
+    height: 50px;
+    margin-bottom: 16.1px;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #ticketPannel{
+      left:399px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'DonationPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.ticketPannel;
+      console.log("Donation pannel is loaded!");
+    }
+  };
+</script>

v1-com-officielle/src/infoComponents/InfoMenu.vue

@@ -42,6 +42,8 @@
           si tu as envie de participer !
           </p>
         <button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
+        <button type="button" class="textBtnStyle" @click="openPannel('donation')">NOUS FAIRE UNE DONATION</button>
+        <button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')">RÉSERVER MA PLACE!</button>
       </div>
       <div id="btnColumn">
         <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
@@ -110,6 +112,18 @@
       @focus="focusPannel('link')"
       :class="{zBase: isFocused!=='link', zFocus: isFocused==='link'}">
     </LinkPan>
+    <DonationPan
+      v-show="isActive.includes('donation')"
+      @close="closePannel('donation')"
+      @focus="focusPannel('donation')"
+      :class="{zBase: isFocused!=='donation', zFocus: isFocused==='donation'}">
+    </DonationPan>
+    <TicketPan
+      v-show="isActive.includes('ticket')"
+      @close="closePannel('ticket')"
+      @focus="focusPannel('ticket')"
+      :class="{zBase: isFocused!=='ticket', zFocus: isFocused==='ticket'}">
+    </TicketPan>
 </template>
 
 <style scoped>
@@ -194,6 +208,23 @@
   #welcomeTextContainer .textBtnStyle{
     height:44.4px;
     width: 70%;
+    margin-bottom: 7.77px;
+  }
+
+  #ticketButton.textBtnStyle{
+    position: absolute;
+    top: -80px;
+    left: 64%;
+    animation: float 1.61s infinite;
+    color: var(--main-color);
+    background-color: var(--accent-color);
+    width: 50%;
+  }
+  #ticketButton.textBtnStyle:hover{
+    background-color: var(--main-color);
+    animation: none;
+    border-color: var(--accent-color);
+    color: var(--accent-color);
   }
 
   /*================ MID FORMAT*/
@@ -225,6 +256,12 @@
       font-size: 22.2px;
     }
 
+    #ticketButton.textBtnStyle{
+      top: unset;
+      bottom: -85%;
+      left: -300px;
+    }
+
   }
 </style>
 

v1-com-officielle/src/main.js

@@ -23,6 +23,8 @@ import MessagePannel from './indieComponents/MessagePannel.vue'
 import FollowPannel from './indieComponents/FollowPannel.vue'
 import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
 import LinkPannel from './indieComponents/LinkPannel.vue'
+import DonationPannel from './indieComponents/DonationPannel.vue'
+import TicketPannel from './indieComponents/TicketPannel.vue'
 
 import Infobubble from './indieComponents/Infobulle.vue'
 
@@ -50,6 +52,8 @@ app.component('MessagePan', MessagePannel);
 app.component('FollowPan', FollowPannel);
 app.component('VisualizerPan', VisualizerPannel);
 app.component('LinkPan', LinkPannel);
+app.component('DonationPan', DonationPannel);
+app.component('TicketPan', TicketPannel);
 
 app.component('Infobulle', Infobubble);
 app.component('ColorPan', ColorBtn);