From 81cce3e4968c301e6486c0f31969ae3719748cc3 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 14 Apr 2024 00:46:40 -0400
Subject: [PATCH] CreatorFolio - Modal paiement, Homeview positionnement
 contenu

---
 src/views/main/CreatorFolio.vue | 125 ++++++++++++++--
 src/views/main/HomeView.vue     | 256 +++++++++++---------------------
 src/views/main/YourProfile.vue  |  18 +--
 3 files changed, 202 insertions(+), 197 deletions(-)

diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 0925180..ddc7b25 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -124,8 +124,8 @@
                     <v-list-item>
                       <v-dialog transition="dialog-top-transition" width="auto">
                         <template v-slot:activator="{ props: activatorProps }">
-                          <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0"
-                                 outlined="false">
+                          <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
+                            elevation="0" outlined="false">
                             <v-icon left class="mr-4">mdi-wallet</v-icon>
                             <p @click="isActive.value = false">Bourse</p>
                           </v-btn>
@@ -137,7 +137,7 @@
                             <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>
+                                style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
                             </div>
                             <v-card-text class="text-h1 pa-12">
                               <v-row>
@@ -182,12 +182,12 @@
                           <v-card style="border-radius: 25px; 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>
+                                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>
+                                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>
+                                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>
@@ -196,10 +196,10 @@
                             <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>
+                                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>
+                                style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
                               <v-col cols="5" class="text-truncate">Good Job</v-col>
                             </v-row>
 
@@ -453,14 +453,111 @@
 
 
     <FooterLayout></FooterLayout>
+    <v-dialog v-model="accepted" max-width="500">
+      <template v-slot:activator="{ on }">
+        <div class="text-center pa-4">
+          <v-btn @click="accepted = true" v-on="on">
+            Approuve
+          </v-btn>
+        </div>
+      </template>
+
+      <!-- Your custom dialog content -->
+      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+        <v-container>
+          <v-row justify="center">
+            <v-col cols="12" class="text-center">
+              <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+            </v-col>
+          </v-row>
+
+          <v-row justify="center">
+            <v-col cols="12">
+              <v-card-text style="font-weight: 600;">
+                Paiement complété
+              </v-card-text>
+              <v-card-text style="margin-top: -24px;">
+                Transaction : #
+              </v-card-text>
+
+              <v-card-text style="font-size: 1.2rem; text-align: center;">
+                Merci de supporter
+              </v-card-text>
+              <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
+                Guillaume Mousseau
+              </v-card-text>
+
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+              <v-card-actions class="justify-end">
+                <v-btn text @click="accepted = false">Ok</v-btn>
+              </v-card-actions>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+
+
+
+    </v-dialog>
+
+    <v-dialog v-model="decline" max-width="500">
+      <template v-slot:activator="{ on }">
+        <div class="text-center pa-4">
+          <v-btn @click="decline = true" v-on="on">
+            Decline
+          </v-btn>
+        </div>
+      </template>
+
+      <!-- Your custom dialog content -->
+      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+        <v-container>
+          <v-row justify="center">
+            <v-col cols="12" class="text-center">
+              <v-icon color="black" size="250">mdi-cancel</v-icon>
+            </v-col>
+          </v-row>
+
+          <v-row justify="center">
+            <v-col cols="12">
+              <v-card-text style="font-size: 2rem; font-weight: 600; text-align: center;">
+                Paiement refusé
+              </v-card-text>
+
+
+              <v-card-text style="font-size: 1rem; text-align: center;">
+                Une erreur s'est produit
+              </v-card-text>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+              <v-card-actions class="justify-end">
+                <v-btn text @click="decline = false">Ok</v-btn>
+              </v-card-actions>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+
+
+
+    </v-dialog>
   </div>
 </template>
 
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
 import StripePayment from '../StripePayment.vue';
-
+const accepted = ref(false);
+const decline = ref(false);
 
 let imageSrc = '../../../images/guillaimeaime3x.png';
 let profilePicture = '../../../images/guillaume.png';
@@ -469,9 +566,9 @@ let name = 'Guillaume Mousseau'
 let title = 'Créateur de contenus'
 let drawerbottom = false
 let navigationItems = [
-    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-    { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
-    { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
+  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+  { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
+  { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
 ];
 let tools = [
   { icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
@@ -479,8 +576,8 @@ let tools = [
 
 
 let items = [
-  {icon: "icon", text: "text"},
-  {icon: "icon2", text: "text2"},
+  { icon: "icon", text: "text" },
+  { icon: "icon2", text: "text2" },
 ]
 
 </script>
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index 6e2894d..06e910f 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -5,10 +5,10 @@
     <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
 
       <!--Logo & bouttons -->
-      <v-container class="d-flex justify-center align-center">
+      <v-container class="d-flex justify-center align-center container-spacer header-container">
         <v-row justify="center" align="center">
           <v-col></v-col>
-          <v-col cols="5">
+          <v-col cols="5" xl="4" xxl="4">
             <v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
           </v-col>
           <v-col>
@@ -29,10 +29,10 @@
       </v-container>
 
       <!--Header -->
-      <v-container>
+      <v-container class="container-spacer">
         <v-row>
           <v-spacer></v-spacer>
-          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
+          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
             <v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
               style="border-radius: 20px;"></v-img>
           </v-col>
@@ -41,9 +41,9 @@
       </v-container>
 
       <!-- Créer Profiter Inspirer  -->
-      <v-container>
+      <v-container class="container-spacer">
         <v-row class="d-flex justify-center creer-profiter-inspirer-row">
-          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
+          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
             <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
               <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
@@ -115,10 +115,9 @@
       </v-container>
 
       <!-- Votre Hutopy  -->
-      <v-container>
+      <v-container class="container-spacer">
         <v-row justify="center">
-
-          <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="7" xxl="7">
+          <v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
             <v-row justify="center">
               <v-col cols="6" md="7" lg="6">
                 <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
@@ -150,27 +149,24 @@
                     </v-btn>
                   </RouterLink>
                 </v-col>
-
               </v-col>
 
 
               <v-col cols="6" md="5" lg="6">
-                <v-row justify="center">
+                <v-row justify="center" class="votre-hutopy-img">
                   <v-col cols="6" sm="12" md="12" lg="6">
                     <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
                       class="hidden-md-and-down" hidden-and-down></v-img>
-
                   </v-col>
                   <v-col cols="6" sm="12" md="12" lg="6">
                     <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
-
                   </v-col>
-                  <v-col cols="6" sm="3" md="12" lg="6">
+                  <v-col cols="6" sm="12" md="6" lg="6">
                     <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
                   </v-col>
-                  <v-col cols="6" sm="3" md="12" lg="6">
-                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlvr.png"
-                      class="hidden-md-and-down" hidden-and-down></v-img>
+                  <v-col cols="6" sm="6" md="6" lg="6">
+                    <v-img style="border-radius: 30px;" class="d-none d-md-block"
+                      src="../../../images/homepage/girlvr.png"></v-img>
                   </v-col>
                 </v-row>
               </v-col>
@@ -181,67 +177,48 @@
 
 
 
+      <v-row style="margin-top: 40px; margin-bottom: 60px;">
+        <v-spacer></v-spacer>
 
-
-      <!-- ILS SONT SUR HUTOPY -->
-      <v-container style="max-width: 1500px;">
-        <v-card-text>
-          <h1 style="text-align: center;  margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
+        <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
+          <h1 style=" margin-bottom: 70px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
             Ils sont sur Hutopy.</h1>
 
-
-          <v-container style="margin-top: 25px; margin-bottom: -6%; max-width:  1200px;">
+          <v-spacer></v-spacer>
+          <v-col>
 
 
             <v-row justify="center" class="profile-images">
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
                   <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
-
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-
-                </RouterLink>
-
-
               </v-col>
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
                   <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
-
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-
-                </RouterLink>
-
-
               </v-col>
-
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
                   <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
-
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-
-                </RouterLink>
-
-
               </v-col>
 
-
             </v-row>
+          </v-col>
+          <v-spacer></v-spacer>
+
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+
+
+
 
 
-          </v-container>
-        </v-card-text>
-      </v-container>
 
 
-      <!-- Fin Description D'hutopy -->
 
     </div>
 
@@ -411,116 +388,37 @@ const goToLoginPage = () => {
 <style src="../../cssstyle/homeView.css"></style>
 
 <style scoped>
-.phototexte {
-  margin-left: 10px;
-  margin-right: 10px;
-
-}
-
-.layer1-background {
-  background-color: rgba(163, 14, 121, 0.03);
-  border-radius: 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-
-}
-
 .layer1-backgroundmobile {
   background-color: rgba(163, 14, 121, 0.1);
   border-radius: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
 }
 
 .layer2-backgroundmobile {
-
   border-radius: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
 }
 
-
-
-.layer2-background {
-  background-color: rgba(107, 0, 101, 0.02);
-  border-radius: 20px;
-}
-
-.v-container {
+.container-spacer {
   margin-bottom: 50px;
   /* Augmente l'espace entre les v-containers */
 }
 
-.h2ilssontsurutopy {
-  font-weight: bold;
-  font-size: 2rem;
-  margin-bottom: 100px;
-  /* Ajoute de l'espace en bas du titre */
-  margin-top: 25px;
-}
-
-.h2ilssontsurutopytitle {
-  color: rgba(107, 0, 101, 0.85);
-}
-
 .profile-images {
-  gap: 90px;
-  /* Espace entre les images */
-  margin-top: 50px;
-  /* Ajoute de l'espace en haut des images */
-
-
-
+  gap: 15px;
+  transform: scale(.92);
 }
 
 .profile-image {
   width: auto;
-  /* Largeur des images */
-
-  /* Hauteur des images */
   border-radius: 35px;
-  /* Coins arrondis */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
 }
 
-.image-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-.image-container {
-  position: relative;
-  width: 23vw;
-  /* Utilisation de 20% de la largeur de la vue */
-  margin: 5px 8px;
-}
-
 .image {
   width: 100%;
   height: auto;
   border-radius: 8px;
-
-}
-
-.v-card-text h2 {
-  margin-bottom: 20px;
-  /* Ajoute de l'espace en bas du titre h2 */
-  font-size: 2rem;
-  /* Taille du texte */
-  font-weight: bold;
-  /* Texte en gras */
-  color: rgba(163, 14, 121, 0.85);
-  /* Couleur du texte (utilisez la couleur souhaitée) */
-}
-
-.v-card-text p {
-  font-size: 1rem;
-  /* Taille du texte */
-}
-
-.textjustify {
-  text-align: justify;
 }
 
 .overlay {
@@ -535,17 +433,13 @@ const goToLoginPage = () => {
   display: flex;
   text-align: left;
   font-size: 1.5rem;
-
-
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
 
 .banner-image {
-
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-  /* Ombre douce */
 }
 
 .image-container:hover .overlay {
@@ -562,8 +456,6 @@ const goToLoginPage = () => {
   position: relative;
   max-width: 100vw;
   /* Limiter la largeur de la v-container à la largeur de l'écran */
-
-
 }
 
 .v-card {
@@ -577,21 +469,11 @@ const goToLoginPage = () => {
   border-radius: 8px;
 }
 
-.overlay p.image-text {
-  display: none;
-}
-
-.overlay:hover p.image-text {
-  display: block;
-}
-
 body {
   background-color: #F4F4F4;
 }
 
-.votre_hutopy_fontsize {
-  font-size: .2em;
-}
+
 
 @media (max-width: 600px) {
   .votre_hutopy_fontsize {
@@ -602,10 +484,9 @@ body {
 
 @media (min-width: 601px) and (max-width: 889px) {
   .votre_hutopy_fontsize {
-    font-size: 0.9em;
+    font-size: 1.06em;
   }
 
-
   .créer-profiter-inspirer-row {
     margin-left: -120px;
     margin-top: -120px
@@ -613,26 +494,34 @@ body {
 
   .card-size {
     transform: scale(.7);
-
   }
 
   .banner-homepage {
     transform: scale(1.19)
   }
 
+  .votre-hutopy-img {
+    margin-top: -30px;
+  }
 
-
+  .header-container {
+    margin-top: 30px;
+  }
 }
 
 
 @media (min-width: 890px) and (max-width: 960px) {
+
+  .header-container {
+    margin-top: 30px;
+  }
+
   .votre_hutopy_fontsize {
-    font-size: 0.9em;
+    font-size: 1.2em;
   }
 
   .card-size {
     transform: scale(.75);
-
   }
 
   .créer-profiter-inspirer-row {
@@ -644,10 +533,12 @@ body {
     transform: scale(1.07)
   }
 
-
-
+  .votre-hutopy-img {
+    margin-top: -40px;
+  }
 }
 
+
 @media (min-width: 961px) and (max-width: 1280px) {
   .votre_hutopy_fontsize {
     font-size: 1.1em;
@@ -659,7 +550,6 @@ body {
 
   .card-size {
     transform: scale(.90);
-
   }
 
   .créer-profiter-inspirer-row {
@@ -669,23 +559,28 @@ body {
 
   .in-between-image {
     margin-left: -100px;
-
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.72);
+  }
 
+  .votre-hutopy-img {
+    margin-top: -30px;
+  }
 }
 
+
 @media (min-width: 1281px) and (max-width: 1920px) {
   .votre_hutopy_fontsize {
-    font-size: 1.1em;
+    font-size: 1.2em;
   }
 
   .card-size {
     transform: scale(1);
   }
 
-
-
   .banner-homepage {
     transform: scale(1.03)
   }
@@ -695,11 +590,19 @@ body {
     margin-top: -70px
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.64);
+  }
+
+  .votre-hutopy-img {
+    margin-top: 65px;
+  }
 }
 
 @media (min-width: 1921px) and (max-width: 2560px) {
   .votre_hutopy_fontsize {
-    font-size: 1.3em;
+    font-size: 1.2em;
   }
 
   .créer-profiter-inspirer-row {
@@ -713,29 +616,42 @@ body {
     transform: scale(1.0)
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.90);
+  }
+
+  .votre-hutopy-img {
+    margin-top: 65px;
+  }
+
 }
 
 @media (min-width: 2561px) {
   .votre_hutopy_fontsize {
-    font-size: 1.4em;
-
-
+    font-size: 1.2em;
   }
 
   .créer-profiter-inspirer-row {
     margin-top: -50px;
-
   }
 
-
   .card-size {
     transform: scale(.98);
   }
 
-
   .banner-homepage {
     transform: scale(.98)
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.978);
+  }
+
+  .votre-hutopy-img {
+    margin-top: -10px;
+  }
+
 }
 </style>
diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index c57356e..b41365c 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -1,24 +1,16 @@
 <template>
   <DefaultLayout></DefaultLayout>
   <main class="top-aligned-column">
-
-
-    <div class="column">
-
-    </div>
-
     <div class="center-column column">
       <p>YourProfile</p>
     </div>
-
-    <div class="column">
-
-    </div>
   </main>
+
+ 
 </template>
-  
+
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+
+
 </script>
-  
- 
\ No newline at end of file