Modification de CreatorFolio - Tweaking de la mise en page, changement du favicon et modification du component StripePayment pour le ui

src/views/StripePayment.vue

@@ -1,42 +1,49 @@
 <template>
   <v-container>
-    <v-row>
-      <v-col>
-        <v-text-field
-          label="Montant ($)"
-          v-model="price"
-          style="color: rgb(0, 109, 119); background-color: #f4f4f4">
-        </v-text-field>
-      </v-col>
 
-      <v-col>
+    <v-row>
-        <v-btn
+      <v-text-field label="Message"
-          @click="goPay()"
+        style=" margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
-          style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
+      </v-text-field>
-          >Envoyez
-        </v-btn>
-      </v-col>
     </v-row>
 
+
+    <v-row>
+      <v-text-field label="Montant ($)" v-model="price"
+        style="margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
+    </v-row>
+
+    <v-row justify="center">
+      <v-btn @click="goPay()"
+        style="margin-bottom: 10px; width: 200px;  background-color: #6b0065; color: white; font-weight: bold;">
+        <v-icon left style="margin-right: 10px;">
+          mdi-gift
+        </v-icon>
+        Envoyez
+      </v-btn>
+    </v-row>
+
+
     <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
       <template v-slot:default>
         <v-card>
-            <div id="checkout">
+          <div id="checkout">
-                <!-- Checkout will insert the payment form here -->
+            <!-- Checkout will insert the payment form here -->
-            </div>
+          </div>
-            <v-card-actions>
+          <v-card-actions>
-                <v-spacer></v-spacer>
+            <v-spacer></v-spacer>
-                <v-btn
+            <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
-                    text="Annuler"
+          </v-card-actions>
-                    @click="closeDialog()"
-                ></v-btn>
-            </v-card-actions>
         </v-card>
       </template>
     </v-dialog>
   </v-container>
 
 
+
+
+
 </template>
 
 <script setup>
@@ -44,44 +51,44 @@ import { useClient } from '@/plugins/api.js';
 import { loadStripe } from '@stripe/stripe-js';
 import { onMounted, ref } from "vue";
 
-  let stripe = null;
+let stripe = null;
-  const client = useClient();
+const client = useClient();
-  const price = ref(0);
+const price = ref(0);
-  const isPaymentDialogActive = ref(false);
+const isPaymentDialogActive = ref(false);
-  var checkout;
+var checkout;
 
-  onMounted(async () => {
+onMounted(async () => {
-    // I removed api key to push. Need to get it from backend.
+  // I removed api key to push. Need to get it from backend.
-    stripe = await loadStripe('');
+  stripe = await loadStripe('');
-  })
+})
 
-  const fetchClientSecret = async () => {
+const fetchClientSecret = async () => {
-    const clientSecret = await createCheckoutSession();
+  const clientSecret = await createCheckoutSession();
-    return clientSecret;
+  return clientSecret;
-  };
+};
 
-  async function createCheckoutSession() {
+async function createCheckoutSession() {
-    let clientSecret = await client.post('/api/Stripe', {
+  let clientSecret = await client.post('/api/Stripe', {
-      price: price.value * 100
+    price: price.value * 100
-    });
-
-    let secret = clientSecret["data"];
-    return secret;
-  }
-
-  function closeDialog(){
-    isPaymentDialogActive.value = false;
-    checkout.destroy();
-  }
-
-  async function goPay() {
-    isPaymentDialogActive.value = true;
-
-    checkout = await stripe.initEmbeddedCheckout({
-      fetchClientSecret,
   });
 
-    await checkout.mount('#checkout');
+  let secret = clientSecret["data"];
-  }
+  return secret;
+}
+
+function closeDialog() {
+  isPaymentDialogActive.value = false;
+  checkout.destroy();
+}
+
+async function goPay() {
+  isPaymentDialogActive.value = true;
+
+  checkout = await stripe.initEmbeddedCheckout({
+    fetchClientSecret,
+  });
+
+  await checkout.mount('#checkout');
+}
 
 </script>

src/views/main/CreatorFolio.vue

@@ -3,12 +3,15 @@
     <DefaultLayout></DefaultLayout>
 
     <!-- Bannière -->
-    <v-row class="fluid" style="margin-top: -25px; position: relative; z-index: 0;">
+    <v-row class="fluid" style="margin-top: -50px; position: relative; z-index: 0;">
       <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
         <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
           style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
       </v-col>
     </v-row>
+    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+
+    </v-row>
 
 
 
@@ -65,50 +68,57 @@
     <!-- "Creator Core (Menu / Feed / Donation)" -->
     <v-row>
       <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="2" xl="3" xxl="3" class="hidden-sm-and-down" hidden-sm-and-down>
+      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
-
-        <v-img src="../../../images/hutopy.png" alt="Description de l'image" style="height: 150px; width: 300px;"
-          class="mx-auto" :elevation="10"></v-img>
         <v-col style="margin: 0;">
+          <v-row class="Hutopy-menu-sticky">
+            <v-spacer></v-spacer>
+            <v-col>
+              <v-container style=" overflow-y: hidden;">
+                <!-- Nav-Btn -->
+                <v-col cols="12" class="px-0">
+                  <v-img src="../../../images/hutopy.png" alt="Description de l'image"
+                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
+                  <v-list dense class="main-background">
+                    <v-list-item-group>
+                      <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
+                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
+                          outlined="false">
+                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                          {{ item.text }}
+                        </v-btn>
+                      </router-link>
+                    </v-list-item-group>
+                  </v-list>
+                </v-col>
+                <!-- Tools -->
+                <v-col cols="12" class="px-0">
+                  <v-list dense class="d-flex align-start align-center main-background">
 
+                    <v-list-item-group>
+                      <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
+                        <v-btn text class="btn-custom" elevation="0" outlined="false">
+                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                          {{ item.text }}
+                        </v-btn>
+                      </router-link>
+                    </v-list-item-group>
+                  </v-list>
+                </v-col>
+                <!-- Log-out -->
+                <v-col cols="12" class="px-0 logout-button">
+                  <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
+                    <v-icon left class="mr-4">mdi-logout</v-icon>
+                    Déconnexion
+                  </v-btn>
+                </v-col>
+              </v-container>
 
-          <v-container style=" overflow-y: hidden;">
-            <!-- Nav-Btn -->
-            <v-col cols="12" class="px-0">
-              <v-list dense class="main-background">
-                <v-list-item-group>
-                  <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
-                    <v-btn text class="d-flex align-start align-center main-background" elevation="0" outlined="false">
-                      <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                      {{ item.text }}
-                    </v-btn>
-                  </router-link>
-                </v-list-item-group>
-              </v-list>
             </v-col>
-            <!-- Tools -->
-            <v-col cols="12" class="px-0">
-              <v-list dense class="d-flex align-start align-center main-background">
 
-                <v-list-item-group>
-                  <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
-                    <v-btn text class="btn-custom" elevation="0" outlined="false">
-                      <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                      {{ item.text }}
-                    </v-btn>
-                  </router-link>
-                </v-list-item-group>
-              </v-list>
-            </v-col>
-            <!-- Log-out -->
-            <v-col cols="12" class="px-0 logout-button">
-              <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
-                <v-icon left class="mr-4">mdi-logout</v-icon>
-                Déconnexion
-              </v-btn>
-            </v-col>
-          </v-container>
 
+          </v-row>
+
+          <v-row style="height: 1000px;"></v-row>
 
           <!-- Wallet -->
           <v-row>
@@ -198,10 +208,11 @@
             </v-dialog>
           </v-row>
         </v-col>
+
       </v-col>
 
       <!-- Profile Info Picture name title & description -->
-      <v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="9" lg="7" xl="6" xxl="6">
+      <v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
         <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
           <v-container>
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
@@ -284,12 +295,65 @@
             <div
               style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
               <v-container>
-                <iframe style="margin-left: 2.1%; width: 96%;" src="https://www.youtube.com/embed/pf95whtA_xs?start=0"
+                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                  title="Guillaumem" frameborder="0"
+                  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 :
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">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?</p>
+
+
+                <!-- Like dislike commment Section -->
+                <div style="height: 20px;"></div>
+                <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Comments -->
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+              </v-container>
+            </div>
+          </v-card>
+        </v-container>
+
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <v-col>
+              <v-row>
+                <v-col>
+                  <h1 class="card-title">
+                    PODCAST #01</h1>
+                </v-col>
+
+                <v-col class="text-right">
+                  <v-btn class="btn-card-options" flat tile elevation="0">
+                    <v-icon style="color: rgb(11, 170, 178); font-size: 24px;">mdi-dots-vertical</v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <v-row>
+                <h1 class="card-date">
+                  10-03-2024</h1>
+              </v-row>
+            </v-col>
+
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+              <v-container>
+                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                  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: 1em">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
@@ -315,31 +379,33 @@
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="3" xxl="3" class="hidden-md-and-down" hidden-md-and-up>
+      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
-        <v-container class="sticky-bottom-label" style="max-width: 400px ;  bottom: 0; z-index: 1000;">
+        <v-row>
-          <!-- Donnation -->
+          <v-col>
-          <v-card style="border-radius: 20px;">
+            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
-            <v-container>
+              <!-- Donnation -->
-              <v-row class="mb-0"
+              <v-card style="border-radius: 20px;">
-                style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
+                <v-container>
-                <v-card-title class="text-soutiens" style="margin-top: 15px;">
+                  <v-row class="mb-0"
-                  JE SOUTIENS!
+                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                </v-card-title>
+                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
-              </v-row>
+                      JE SOUTIENS!
-              <v-spacer style="height: 20px;"></v-spacer>
+                    </v-card-title>
-              <v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3"
+                  </v-row>
-                auto-grow></v-textarea>
+
-              <v-text-field style="color: #a30e79;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="3"
+                  <StripePayment></StripePayment>
-                auto-grow></v-text-field>
+                </v-container>
-              <v-btn block class="ma-auto" style="width: 200px;">
+              </v-card>
-                <v-icon left>
-                  mdi-gift
-                </v-icon>
-                Donnez
-              </v-btn>
             </v-container>
-          </v-card>
+            <v-container style="height: 1000px;">
-        </v-container>
+
+            </v-container>
+
+          </v-col>
+          <v-spacer>
+          </v-spacer>
+        </v-row>
+
       </v-col>
 
 
@@ -351,7 +417,7 @@
 
 
     <!-- "Mobile" Donation -->
-    <v-col class="hidden-lg-and-up sticky-bottom-label" hidden-md-and-down
+    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
       style="background-color: #6b0065; margin-top: 30px; text-align: center;">
 
       <!-- Barre cliquable pour ouvrir le drawer -->
@@ -398,6 +464,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import StripePayment from '../StripePayment.vue';
 </script>
 
 <script>
@@ -414,6 +481,7 @@ export default {
       tiktokLink: 'tiktok.com',
       drawer: false,
       drawerbottom: false,
+
       items: [
         { title: 'Item 1' },
         { title: 'Item 2' },
@@ -436,6 +504,15 @@ export default {
 
 
 <style scoped>
+.Hutopy-menu-sticky {
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
 .sticky-bottom-label {
   position: sticky;
   top: 0;
@@ -457,8 +534,8 @@ export default {
 .text-soutiens {
   margin-bottom: 15px;
   color: white;
-  font-size: 2rem;
+  font-size: 1.5rem;
-  letter-spacing: 10px;
+  letter-spacing: 7px;
   text-align: center;
 }
 
@@ -599,6 +676,8 @@ export default {
 .youtube-card {
   margin-left: 2%;
   margin-right: 2%;
+  border-radius: 15px;
+
 
 
   background-color: #f4f4f4;
@@ -753,6 +832,10 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 250px;
+  }
+
 }
 
 
@@ -784,6 +867,10 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 330px;
+  }
+
 }
 
 
@@ -813,17 +900,37 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 425px;
+  }
+
 }
 
 @media (min-width: 959px) and (max-width: 1280px) {
 
-
+  .text-soutiens {
+    font-size: 1.2rem;
+    letter-spacing: 5px;
+  }
 
 
   .profile-container {
     margin-top: -16%;
 
   }
+
+  .card-youtube {
+    min-height: 270px;
+  }
+
+  .Je-soutien-container {
+    min-width: 300px;
+    margin-left: -45px;
+  }
+
+
+
+
 }
 
 
@@ -842,12 +949,25 @@ export default {
 
   }
 
+  .card-youtube {
+    min-height: 290px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 350px;
+  }
+
 }
 
 
 @media (min-width: 1600px) and (max-width: 1919px) {
   .text-soutiens {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
+
   }
 
   .mobile-profile-picture-creator {
@@ -858,18 +978,47 @@ export default {
     margin-top: -20%;
 
   }
+
+  .card-youtube {
+    min-height: 355px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
 }
 
 @media (min-width: 1920px) and (max-width: 2559px) {
   .text-soutiens {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
+
   }
 
   .profile-container {
     margin-top: -12%;
 
   }
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
 }
 
-@media (min-width: 2559px) {}
+@media (min-width: 2559px) {
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .text-soutiens {
+    font-size: 1.5rem;
+  }
+}
 </style>