Merged PR 6: Ménage dans les photos ainsi que modification de CreatorFolio afin de faire l...

Ménage dans les photos ainsi que modification de CreatorFolio afin de faire le profile et l'ajout d'un menu temporaire pour le créateur de voir ses montants et transactions

src/views/main/CreatorFolio.vue

@@ -32,7 +32,7 @@
 
             <RouterLink :to="{ name: 'home' }">
               <v-btn size="x-large"
-                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
+                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
                 elevation="0">
                 <v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
                 <div style="margin-left: 10%;"> Accueil</div>
@@ -42,31 +42,247 @@
 
             <RouterLink :to="{ name: 'contact' }">
               <v-btn size="x-large"
-                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
+                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
                 elevation="0">
-                <v-icon left class="icon-size" style="margin-left: -1%;">mdi-account-plus</v-icon>
+                <v-icon left class="icon-size" style="margin-left: -3%;">mdi-account-plus</v-icon>
-                <div style="margin-left: 10%;">Ajouter des amis</div>
+                <div style="margin-left: 6%;">Ajouter des amis</div>
               </v-btn>
             </RouterLink>
 
             <RouterLink :to="{ name: 'creatorfolio' }">
               <v-btn size="x-large"
-                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
+                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
                 elevation="0">
                 <v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
                 <div style="margin-left: 10%;">Contenu</div>
               </v-btn>
             </RouterLink>
+
+
+            <v-dialog transition="dialog-top-transition" width="auto">
+              <template v-slot:activator="{ props: activatorProps }">
+
+                <v-btn v-bind="activatorProps" text="Transition from Top" block size="x-large"
+                  style="margin-left: -8%; background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
+                  elevation="0">
+                  <v-icon color="black">mdi-wallet</v-icon>
+                  <div style="margin-left: 10%;" @click="isActive.value = false">PORTEFEUILLE</div>
+                </v-btn>
+
+
+
+
+              </template>
+              <template v-slot:default="{ isActive }">
+                <v-card style="border-radius: 30px;">
+                  <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
+                    <v-icon left size="48">mdi-wallet</v-icon>
+                    <v-toolbar title="PORTEFEUILLE"
+                      style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
+                  </div>
+
+                  <v-card-text class="text-h1 pa-12">
+
+
+
+                    <v-row>
+                      <v-col>
+                        <v-row>
+                          <v-col cols="7">
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
+
+
+
+                          </v-col>
+                          <v-col>
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
+
+                            <p></p>
+                          </v-col>
+                        </v-row>
+
+
+
+                      </v-col>
+
+                      <v-col>
+                        <v-row>
+                          <v-col cols="8">
+
+                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
+                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
+
+
+                          </v-col>
+                          <v-col>
+                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
+                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
+
+
+                            <p></p>
+                          </v-col>
+                        </v-row>
+                      </v-col>
+
+                    </v-row>
+
+
+                  </v-card-text>
+                  <v-card-actions class="justify-center">
+                    <v-btn text="Fermer" @click="isActive.value = false"></v-btn>
+                  </v-card-actions>
+                </v-card>
+
+                <v-card style="border-radius: 25pxo; margin-top: 3%; height: 30px;">
+                  <v-row>
+                    <v-col style="margin-right: -2%;" cols="1"
+                      class="text-truncate text-center font-weight-bold">T#</v-col>
+                    <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
+                      class="text-truncate text-center font-weight-bold">$</v-col>
+                    <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
+                    <v-col cols="3" class="text-truncate text-center font-weight-bold"
+                      style="margin-right: 2%; background-color: #fbccee">Name</v-col>
+                    <v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
+                  </v-row>
+                </v-card>
+
+                <v-card style=" border-radius: 25pxo; margin-top: .5%; max-height: 450px;">
+
+
+
+                  <v-row>
+                    <v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
+                    <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
+                      class="text-truncate">10$</v-col>
+                    <v-col cols="2" class="text-truncate">20-10-2025</v-col>
+                    <v-col cols="3" class="text-truncate"
+                      style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
+
+
+
+                    <v-col cols="5" class="text-truncate">Good Job</v-col>
+                  </v-row>
+
+
+
+                </v-card>
+
+              </template>
+            </v-dialog>
+
+
+
           </v-container>
+
+
+
+
+
+
+
         </v-col>
 
 
 
+
+
         <!-- center menu -->
 
         <v-col cols="7" class="mx-0">
 
 
+          <v-container>
+
+            <v-col>
+              <v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
+                style="margin-left: 0%; width: 25%;"></v-img>
+            </v-col>
+            <v-row>
+              <v-col cols="2">
+
+              </v-col>
+
+              <v-col style="margin-top: -18%;">
+                <v-container
+                  style="border-top: 4px solid #a40e79; border-right: 4px solid #a40e79; margin: 0; margin-left: -10%;  background-color: #cc6f91;border-top-right-radius: 25px;">
+                  <v-row>
+                    <v-col cols="0">
+
+                    </v-col>
+                    <v-col cols="6">
+                      <h1 style="margin-bottom: -1%; font-size: 2rem; color: white;">Guillaume Mousseau </h1>
+                    </v-col>
+
+                    <v-col cols="3">
+                      <v-row>
+
+                        <v-img style="margin-top: 3%; height: 50px;" src="../../../images/facebookicon.png"></v-img>
+                        <v-img style="margin-top: 2%; height: 50px;" src="../../../images/instawhite.png"></v-img>
+                        <v-img style="margin-top: 2%; height: 50px;" src="../../../images/xicon.png"></v-img>
+                        <v-img style="margin-top: 2%; height: 50px;" src="../../../images/tiktok.png"></v-img>
+                      </v-row>
+                    </v-col>
+                  </v-row>
+
+                </v-container>
+
+                <v-container
+                  style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; margin-bottom: -2%;  background-color: #aedcde;">
+                  <v-row>
+                    <v-col cols="0">
+
+                    </v-col>
+                    <v-col cols="6">
+                      <h1 style="margin-bottom: -5%; font-size: 2rem; color: white;">Créateur de contenus</h1>
+                    </v-col>
+                    <v-col cols="3">
+                      <v-row>
+                        <v-img style="margin-top: 3%; height: 50px;" src="../../../images/icons/messenger.png"></v-img>
+                        <v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/bookmark.png"></v-img>
+                        <v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/share.png"></v-img>
+
+                      </v-row>
+                    </v-col>
+                  </v-row>
+
+                </v-container>
+
+                <v-container
+                  style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%;  background-color: #aedcde;border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;">
+                  <v-row>
+                    <v-col>
+
+                    </v-col>
+                    <v-col cols="10">
+                      <v-expansion-panels>
+                        <v-col cols="12" offset="-1">
+                          <v-expansion-panel
+                            style=" margin-left: 2%; font-size: 1.2rem; background-color: #0baab2; color: white;"
+                            :key="i"
+                            text="Ma mission est claire : mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
+                            title="À propos"></v-expansion-panel>
+                        </v-col>
+                      </v-expansion-panels>
+
+
+                    </v-col>
+                  </v-row>
+
+                </v-container>
+
+
+              </v-col>
+
+            </v-row>
+
+
+
+
+          </v-container>
 
 
           <v-card class="flow-menu m-0"
@@ -94,8 +310,12 @@
               style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
               <v-container>
 
-                <iframe width=100% height="650px" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
+                <iframe style="margin-left: 2.1%;" width=96% height="650px"
-                </iframe>
+                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen></iframe>
+
+
 
 
                 <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
@@ -406,8 +626,8 @@ export default {
 
   margin-left: 15%;
   margin-top: -7%;
-  border: 10px solid white;
+  border: 4px solid white;
-  z-index: 9999;
+  z-index: 200;
 
 }