edit: ajout du 2 animé + MAXI REGLAGE (responsive, couleur, positionnement etc.) + ajout vue liste panneau dans panneau à propos + likes dans images + class gen reactBar

v1-com-officielle/src/titleComponents/ColorBtn.vue

@@ -111,7 +111,7 @@
       left: 4.44px;
       width: 50px;
       height: 161px;
-      top: 38%;
+      top: 28%;
     }
   }
 </style>

v1-com-officielle/src/titleComponents/GeneratedContent.vue

@@ -9,7 +9,7 @@
                                                                                                   left: item.x + 'px',
                                                                                                   top: item.y + 'px'
                                                                                                 }">
-            <img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
+            <img loading="lazy" :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
 
       </div>
     </div>
@@ -47,7 +47,7 @@
     width: 44px;
     height: 44px;
     border-radius: 22px;
-    top: 50%;
+    top: 47%;
     left: 7.77px;
     animation: float 1.61s infinite;
   }
@@ -121,7 +121,7 @@
     }
 
     #reloadBtnStyle{
-      top: 59%;
+      top: 49%;
       left: 44.4px;
       width: 77px;
       height: 77px;

v1-com-officielle/src/titleComponents/TitleText.vue

@@ -1,3 +1,8 @@
+<script setup>
+  import TwoGraff from '../assets/icons/2graff.svg'
+  import TwoExtra from '../assets/icons/2extra.svg'
+</script>
+
 <template>
     <div id="titleTextContainer" class="uiStyle">
       <div id="mainTitleContainer">
@@ -8,8 +13,9 @@
         <div class="titleTextStyle" id="nerd">
           <p><strong>NERDs</strong></p>
           <p>#</p>
-          <p id="numberTwo"></p>
         </div>
+        <TwoGraff name="graffTwo" class="numberTwo" id="graffTwo"/>
+        <TwoExtra name="extraTwo" class="numberTwo" id="extraTwo"/>
         <div class="subtitleTextStyle">
           <p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autre performances nerds</p>
         </div>
@@ -47,10 +53,58 @@
 
   /*+++++++++++++++++ COPYBOX
       ================ PC HAUT/IPAD
-      @media(min-width:500px){}
+      @media(min-width:650px){}
       ================ PC LARGE
-      @media(min-width:1000px){}
+      @media(min-width:1300px){}
   */
+  .numberTwo{
+    fill: currentColor;
+    position: absolute;
+    z-index: 1;
+  }
+
+  #graffTwo{
+    height: 161px;
+    width: auto;
+    margin-left: 285px;
+    margin-top: -99px;
+    color: var(--main-color);
+  }
+  #extraTwo{
+    height: 144px;
+    width: auto;
+    margin-left: 285px;
+    margin-top: -99px;
+    animation: blink 3.33s infinite;
+    mix-blend-mode: difference;
+  }
+
+  /*================ PC HAUT/IPAD*/
+  @media(min-width:650px){
+    #graffTwo{
+      height: 200px;
+      margin-left: 500px;
+      margin-top: -110px;
+    }
+    #extraTwo{
+      height: 161px;
+      margin-left: 500px;
+      margin-top: -100px;
+    }
+  }
+  /*================ PC LARGE*/
+  @media(min-width:900px){
+    #graffTwo{
+      height: 333px;
+      margin-left: 633px;
+      margin-top: -233px;
+    }
+    #extraTwo{
+      height: 277px;
+      margin-left: 640px;
+      margin-top: -233px;
+    }
+  }
 
   #titleTextContainer{
     width:99.8%;
@@ -84,7 +138,7 @@
     z-index: 1;
   }
   .titleTextStyle p{
-    color: (--main-color);
+    color: var(--main-color);
   }
   #drag{
     margin-top: -100px;
@@ -199,7 +253,7 @@
       padding-bottom: 16.1px;
       padding-left: 33px;
       font-size: 33px;
-      color: (--main-color);
+      color: var(--main-color);
     }
     #drag{
       margin-top: -150px;
@@ -209,6 +263,7 @@
       margin-top: -75px;
       margin-left: -75px;
       justify-content: space-between;
+      margin-right: 161px;
     }
     .titleTextStyle strong{
       font-size: 77px;