edit: ajout animation CSS class .blinking + cohérence lang fr

started: task#4 (responsive hauteur sur welcome + regen)

src/MainContent.vue

@@ -1,24 +1,25 @@
 <script setup>
+import { toRaw } from 'vue'
 </script>
 
 <template>
   <div class="mainContainer">
     <topbar></topbar>
-    <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in this.partOneItem" :key="item.id" :style="{
+    <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in partOneItem" :key="item.id" :style="{
                                                                                                 left: item.x + 'px',
                                                                                                 top: item.y + 'px'
                                                                                               }">
           <img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" :id="'image'+item.id">
 
     </div>
-    <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in this.partTwoItem" :key="item.id" :style="{
+    <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in partTwoItem" :key="item.id" :style="{
                                                                                                 left: item.x + 'px',
                                                                                                 top: item.y + 'px'
                                                                                               }">
           <img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" :id="'image'+item.id">
 
     </div>
-    <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in this.partThreeItem" :key="item.id" :style="{
+    <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in partThreeItem" :key="item.id" :style="{
                                                                                                 left: item.x + 'px',
                                                                                                 top: item.y + 'px'
                                                                                               }">
@@ -83,10 +84,17 @@
       .imgStyle{
         width:250px;
       }
-
+      @media (min-height:720px){
-      #regenBtn{
+        #regenBtn{
-        left:3.33%;
+          left:3.33%;
-        bottom:3.33%;
+          bottom:3.33%;
+        }
+      }
+      @media (max-height:720px){
+        #regenBtn{
+          left:3.33%;
+          bottom:6%;
+        }
       }
 
       /*Highlights size*/
@@ -187,9 +195,9 @@
     name : 'MainContent',
     methods:{
       divideItem(){
-        const half = Math.floor(this.maxItemCount/2);
+        const half = Math.floor(this.maxItemCount/2)+1;
-        this.partOne = this.getRandomInt(0,half);
+        this.partOne = this.getRandomInt(1,half);
-        this.partTwo = this.getRandomInt(0,half);
+        this.partTwo = this.getRandomInt(1,half);
         this.partThree = this.maxItemCount-this.partTwo-this.partOne;
         console.log(this.partOne,this.partTwo,this.partThree);
       },
@@ -199,15 +207,9 @@
         return Math.floor(Math.random() * (max - min+1)) + min;
       },
       createEmptyArray(){
-        for (let i = 0;i<this.partOne;i++){
+        this.partOneItem = this.randomItems.slice(0, this.partOne);
-          this.partOneItem.splice(i,0,this.randomItems[i]);
+        this.partTwoItem = this.randomItems.slice(this.partOne, this.partOne + this.partTwo);
-        }
+        this.partThreeItem = this.randomItems.slice(this.partOne + this.partTwo);
-        for (let j = this.partOne;j<this.partTwo+this.partOne-1;j++){
-          this.partTwoItem.splice(j,0,this.randomItems[j]);
-        }
-        for (let k = this.partTwo+this.partOne-1;k<this.randomItems.length;k++){
-          this.partThreeItem.splice(k,0,this.randomItems[k]);
-        }
         console.log(this.partOneItem,this.partTwoItem,this.partThreeItem);
       },
       genCoord(chain){
@@ -300,22 +302,10 @@
         console.log(this.marjTop,this.marjBot,this.marjSide);
       },
       selectHighlight(){
-        let index = [];
+        this.isHighlight.forEach(([id, level]) => {
-        let hClass = [];
+          const item = this.items.find(item => item.id === id);
-        for(let k=0; k<this.isHighlight.length; k++){
+          if (item) item.isHighlight = level;
-          index.splice(k,0,this.isHighlight[k][0]);
+        });
-          hClass.splice(k,0,this.isHighlight[k][1]);
-        };
-        console.log(index,hClass);
-        for (let i=0; i<this.items.length; i++){
-          let selectedItem = this.items[i].id;
-            if (index.includes(selectedItem)){
-              let selectIndex  = index.indexOf(selectedItem);
-              this.items[i].isHighlight = hClass[selectIndex];
-            }else{
-              continue
-            }
-        }
         console.log(this.items)
       },
       selectRandomGraffs(){
@@ -331,13 +321,13 @@
           c = this.getRandomInt(0,graffCount);
         } while (a == c || c == b);
         console.log(a,b,c);
-        this.items.push(this.graffs[a],this.graffs[b],this.graffs[c]);
+          this.randomItems.push({...this.graffs[a]},{...this.graffs[b]},{...this.graffs[c]});
       },
       generateContent(){
-        console.log(this.items);
+        console.log("before gen:",this.items);
+        this.randomItems = structuredClone(toRaw(this.items)).sort(() => Math.random()-0.5);
         this.selectRandomGraffs();
-        this.randomItems = this.items.sort(() => Math.random()-0.5),
+        console.log("random + graff:",this.randomItems);
-        console.log(this.randomItems);
         this.maxItemCount = this.randomItems.length;
         this.divideItem();
         this.createEmptyArray();
@@ -345,7 +335,7 @@
         this.genCoord(this.partOneItem);
         this.genCoord(this.partTwoItem);
         this.genCoord(this.partThreeItem);
-        console.log('Content has been generated!')
+        console.log('Content has been generated!');
       }
     },
     data(){
@@ -355,20 +345,20 @@
       const graffData = Object.values(impGraff);
       return{
         items: imgData.map((src, index) => ({
-          id: index,
+          id: "img-" + index,
           src: src,
           x: 0,
           y: 0,
           isHighlight: 0
         })),
         graffs: graffData.map((src, index) => ({
-          id: index,
+          id: "graff-" + index,
           src: src,
           x: 0,
           y: 0,
           isHighlight: 3
         })),
-        isHighlight:[[2,1],[6,1],[11,2]],
+        isHighlight:[['img-2',1],['img-6',1],['img-11',2]],
         randomItems: null,
         maxItemCount: 0,
         marjTop:0,

src/TopBar.vue

@@ -21,7 +21,9 @@
           <br>
           alors voici quelques infos sur mes pratiques :
           <br><br>
-          je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller PENDANT DES SIÈCLES!
+          je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller
+          <br>
+          PENDANT DES SIÈCLES!
           <br><br>
           je travaille une esthétique punk, brutaliste
           <br>
@@ -58,10 +60,10 @@
     <div id="plus_panel" ref="plusPannel" v-show="plusActive">
       <button type="button" class="btn_plusPan" id="ttt" @click="warnTattooToggle">TATTOO</button>
       <button type="button" class="btn_plusPan" id="contact" @click="contactToggle">CONTACT</button>
-      <button type="button" class="btn_plusPan" id="about_plus" @click="aboutToggle">ABOUT</button>
+      <button type="button" class="btn_plusPan" id="about_plus" @click="aboutToggle">À PROPOS</button>
     </div>
 
-    <div id="warn_tattoo" ref="tattooWarn" v-show="warnTattooActive">
+    <div id="warn_tattoo" class="blinking" ref="tattooWarn" v-show="warnTattooActive">
       <p id="question_tattoo">Vous allez être redirigé vers Instagram!</p>
       <div id="rep_tattoo">
         <a href="https://www.instagram.com/noeu_3/?utm_source=ig_web_button_share_sheet">
@@ -76,7 +78,7 @@
       <p>Your Contact Info (so i can reply ^^) :</p>
       <input type="text" ref="yourContact" class="formContact" id="your_contact" placeholder="Phone or E-mail or Instagram or Signal">
       <p>Your Message :</p>
-      <input type="text" ref="yourMessage" class="formContact" id="your_message" placeholder="Type whatever you want here ...">
+      <textarea ref="yourMessage" class="formContact" id="your_message" placeholder="Type whatever you want here ..." wrap="hard" cols="33"></textarea>
       <button type="button" id="sendMsg">SEND !</button>
     </div>
 
@@ -178,14 +180,27 @@
 }
 /*===============format large*/
 @media (min-width:500px){
-  #welcomeBtn{
+  @media (min-height:720px){
-    left:3.33%;
+    #welcomeBtn{
-    bottom:8.5%;
+      left:3.33%;
-  }
+      bottom:8.5%;
+    }
 
-  #welcome_pannel{
+    #welcome_pannel{
-    bottom:13.12%;
+      bottom:13.12%;
-    left:3.33%;
+      left:3.33%;
+    }
+  }
+  @media (max-height:720px){
+    #welcomeBtn{
+      left:3.33%;
+      bottom:13%;
+    }
+
+    #welcome_pannel{
+      bottom:20%;
+      left:3.33%;
+    }
   }
 }
 
@@ -218,7 +233,7 @@
   border-width: thin;
   border-style: solid;
   color:var(--light-color);
-  width:94%;
+  width:300px;
   font-weight:lighter;
   border-radius: 30px;
   background-color: var(--dark-color);
@@ -235,6 +250,10 @@
 
 #your_message{
   height: 150px;
+  width:290px;
+  padding-top:5px;
+  padding-right: 15px;
+  border-radius: 20px;
 }
 
 #sendMsg{

src/assets/main_pageStyle.css

@@ -82,11 +82,16 @@ a{
   text-decoration: none;
 }
 
+/*=====================Animation*/
 .floating {
   position: fixed;
   animation: float 1s ease-in-out infinite;
 }
 
+.floating:hover{
+  animation: none;
+}
+
 @keyframes float {
   0%   { transform: translateY(0px); }
   35%  { transform: translateY(1px); }
@@ -95,6 +100,18 @@ a{
   100% { transform: translateY(0px); }
 }
 
+.blinking{
+  animation: blink 3.33s ease-in-out infinite;
+}
+
+@keyframes blink {
+  0%   { border-color: var(--accent-color);}
+  25%  { border-color: var(--dark-color);}
+  50%  { border-color: var(--accent-color);}
+  75%  { border-color: var(--dark-color);}
+  100%  { border-color: var(--accent-color);}
+}
+
 /*=====================================================*/
 /*===================Player musique*/
 .player{
@@ -313,7 +330,7 @@ header {
 #about{
   position:fixed;
   background-color: var(--dark-color);
-  height: auto;
+  height: 500px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -345,6 +362,9 @@ header {
   font-size:16px;
   color: var(--light-color);
   font-weight: lighter;
+  padding-right: 10px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
 }
 
 /*===============format haut*/
@@ -388,8 +408,7 @@ header {
   align-items: center;
   padding: 10px;
   border-style: solid;
-  border-width: medium;
+  border-width: thick;
-  border-color: var(--accent-color);
   z-index: 11;
 }