jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modifications de plusieurs éléments visuels dans default, footer, stripe et creatorFolio.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-07 15:46:38 -04:00
parent fcd72de2cb
commit 091c4327ae
5 changed files with 622 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

4
src/layouts/DefaultLayout.vue
View File

@@ -3,8 +3,8 @@
<body style="background-color: #f4f4f4;"> <body style="background-color: #f4f4f4;">
<!-- Version pour ordinateur --> <!-- Version pour ordinateur -->
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-sm-and-down" hidden-sm-and-down> <v-card style="z-index: 9000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
<v-container style="z-index: 2000; margin-bottom: .5%; margin-top: -.6%; margin-right: 1%;"> <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;"> <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-col cols="auto" class="d-flex align-end justify-end"> <v-col cols="auto" class="d-flex align-end justify-end">
<router-link :to="{ name: 'yourprofile' }"> <router-link :to="{ name: 'yourprofile' }">

22
src/layouts/FooterLayout.vue
View File

@@ -37,9 +37,10 @@
</v-container> </v-container>
<v-container class="text-center" style="flex-grow: 1;"> <v-container class="text-center" style="flex-grow: 1;">
<v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text"> <router-link v-for="link in links" :key="link" :to="getLinkUrl(link)"
{{ link }} class="mx-2 text-decoration-none text-black">
</v-btn> <v-btn class="black--text" rounded="xl" variant="text">{{ link }}</v-btn>
</router-link>
</v-container> </v-container>
<v-container class="text-black text-center "> <v-container class="text-black text-center ">
@@ -67,8 +68,21 @@ export default {
'conditions utilisation', 'conditions utilisation',
'anti-exploitation', 'anti-exploitation',
], ],
linkRoutes: {
'Aide & Contact': { name: 'home' },
'Conditions générales': { name: 'home' },
'Politique des contenus': { name: 'home' },
'Programme Ambassadeurs': { name: 'home' },
'conditions utilisation': { name: 'home' },
'anti-exploitation': { name: 'home' },
},
}), }),
} methods: {
getLinkUrl(link) {
return this.linkRoutes[link] || { name: 'home' };
},
},
};
</script> </script>
<style> <style>

125
src/views/StripePayment.vue
View File

@@ -1,42 +1,49 @@
<template> <template>
<v-container> <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="border-radius: 10px; 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-row>
<v-text-field label="Montant ($)" v-model="price"
style="border-radius: 10px; 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> <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
<template v-slot:default> <template v-slot:default>
<v-card> <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> </v-card>
</template> </template>
</v-dialog> </v-dialog>
</v-container> </v-container>
</template> </template>
<script setup> <script setup>
@@ -44,44 +51,44 @@ import { useClient } from '@/plugins/api.js';
import { loadStripe } from '@stripe/stripe-js'; import { loadStripe } from '@stripe/stripe-js';
import { onMounted, ref } from "vue"; 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> </script>

694
src/views/main/CreatorFolio.vue
View File

@@ -2,113 +2,155 @@
<div style="background-color: #f4f4f4;"> <div style="background-color: #f4f4f4;">
<DefaultLayout></DefaultLayout> <DefaultLayout></DefaultLayout>
<!-- Bannière -->
<v-row class="fluid" style="margin-top: -25px; position: relative; z-index: 0;"> <!-- "Mobile -->
<v-row class="fluid hidden-md-and-up social-mobile-container"
style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;"> <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover <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> style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col> </v-col>
</v-row> </v-row>
<!-- "PurpleLine" -->
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
<!-- "Mobile-Profile" -->
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
</v-row>
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
hidden-md-and-down>
<v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<v-img class="socialicons-mobile invert-color" src="../../../images/facebookicon.png"
alt="Facebook"></v-img>
</a>
</v-col>
<!-- "profile xs sm md" --> <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<a href="https://www.instagram.com/">
<v-img class="socialicons-mobile" src="../../../images/instaicon.png" alt="Instagram"></v-img>
</a>
</v-col>
<v-card <v-col cols="4" sm="4" xs="0" class="hidden-xs">
style="margin-top: 2px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-color: rgba(11, 170, 178, 0); width: 101vw;" <v-row class="d-flex justify-center align-center">
class="profile-container-mobile hidden-md-and-up" hidden-md-and-down> <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
</v-row>
</v-col>
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator "></v-img> <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<a href="https://www.x.com/">
<v-img class="socialicons-mobile invert-color" src="../../../images/xicon.png" alt="X"></v-img>
</a>
</v-col>
<v-row style="z-index: 400;" class="social-container-mobile"> <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
<h1 style="z-index: 400;" class="name-info-mobile">{{ name }}</h1> <a href="https://www.tiktok.com/">
</v-row> <v-img class="socialicons-mobile invert-color" src="../../../images/tiktok.png" alt="TikTok"></v-img>
<v-row class="social-container2-mobile"> </a>
<h1 class="occupation-info-mobile">{{ title }}</h1> </v-col>
</v-row> </v-row>
<v-col class="social-icon-group-mobile"> <v-row class="social-container-mobile social-container-mobile-spacer">
<v-row style="margin-left: 160px; margin-top: 5px; margin-bottom: 5px;"> <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <v-row justify="center name-info-mobile">
<img class="socialicons-mobile" src="../../../images/facebookicon.png" alt="Description image 2"> <v-typography>{{ name }}</v-typography>
</a> </v-row>
<a href="https://www.facebook.com/profile.php?id=61556819217561"> </v-col>
<img class="socialicons-mobile invert-color" src="../../../images/instaicon.png" alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons-mobile " src="../../../images/xicon.png" alt="Description image 2">
</a>
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="socialicons-mobile " src="../../../images/tiktok.png" alt="Description image 2">
</a>
</v-row>
</v-col>
<v-spacer xs="12" sm="4"></v-spacer>
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
<v-row justify="center name-info-mobile">
<v-typography>{{ title }}</v-typography>
</v-row>
</v-col>
</v-row>
<v-row> <v-row>
<v-container style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;" <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
class="social-icon-group-mobile"> class="social-icon-group-mobile">
<v-expansion-panels style="min-width: 320px;"> <v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1"> <v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink" style="color: white;" :key="i" <v-expansion-panel class="background-pink" style="color: white;" :key="i"
text="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?" text="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 : Ma mission est claire :"> title="À propos : Ma mission est claire :"></v-expansion-panel>
</v-expansion-panel>
</v-col> </v-col>
</v-expansion-panels> </v-expansion-panels>
</v-container> </v-container>
</v-row> </v-row>
</v-card> </v-container>
<!-- "Mobile-End" -->
<!-- Bannière Pc -->
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
hidden-sm-and-up>
<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 class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
hidden-sm-and-up>
</v-row>
<!-- "Creator Core (Menu / Feed / Donation)" --> <!-- "Core (Menu / Center / Donation)" -->
<v-row> <v-row>
<!-- "Menu" --> <!-- "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-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> </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: 1400px;"></v-row>
<!-- Wallet --> <!-- Wallet -->
<v-row> <v-row>
@@ -172,7 +214,7 @@
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;"> <v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
<v-row> <v-row>
<v-col style="margin-right: -2%;" cols="1" <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" <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="2" class="text-truncate text-center font-weight-bold">Date</v-col>
@@ -198,10 +240,11 @@
</v-dialog> </v-dialog>
</v-row> </v-row>
</v-col> </v-col>
</v-col> </v-col>
<!-- Profile Info Picture name title & description --> <!-- 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 class="middle-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 class="profile-container hidden-sm-and-down" hidden-md-and-up>
<v-container> <v-container>
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img> <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
@@ -258,7 +301,6 @@
</v-container> </v-container>
</v-container> </v-container>
<!-- "Card youtube" --> <!-- "Card youtube" -->
<v-container> <v-container>
<v-card class="flow-menu m-0 youtube-card"> <v-card class="flow-menu m-0 youtube-card">
@@ -271,7 +313,7 @@
<v-col class="text-right"> <v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0"> <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-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>
@@ -284,12 +326,12 @@
<div <div
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;"> style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
<v-container> <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" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe> 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 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 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 créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
@@ -306,7 +348,60 @@
</div> </div>
<!-- Comments --> <!-- Comments -->
<v-text-field style="margin-left: 2%;" <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: #6e6e6e; 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
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> placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
</v-container> </v-container>
</div> </div>
@@ -315,43 +410,36 @@
</v-col> </v-col>
<!-- "Large-Monitor-RightCol" Donation --> <!-- "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-container>
</v-card> <v-container style="height: 1600px;">
</v-container> </v-container>
</v-col>
<v-spacer>
</v-spacer>
</v-row>
</v-col> </v-col>
</v-row> </v-row>
<!-- "Mobile" Donation --> <!-- "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;"> style="background-color: #6b0065; margin-top: 30px; text-align: center;">
<!-- Barre cliquable pour ouvrir le drawer --> <!-- Barre cliquable pour ouvrir le drawer -->
@@ -363,23 +451,11 @@
</v-col> </v-col>
<template> <template>
<div> <div>
<!-- Drawer du bas --> <!-- Drawer du bas -->
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay> <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;"> <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
<h1 class="text-soutiens">JE SOUTIENS</h1> <h1 class="text-soutiens">JE SOUTIENS</h1>
<v-textarea style="color: white;" label="Votre message" placeholder="Écrivez votre message ici" rows="2" <StripePayment></StripePayment>
auto-grow></v-textarea>
<v-text-field style="color: white;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="2"
auto-grow></v-text-field>
<v-btn class="mx-auto">
<v-icon left class="mr-4">
mdi-gift
</v-icon>
Donnez
</v-btn>
</v-container> </v-container>
</v-bottom-sheet> </v-bottom-sheet>
@@ -398,6 +474,7 @@
<script setup> <script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue'; import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue'; import FooterLayout from '@/layouts/FooterLayout.vue';
import StripePayment from '../StripePayment.vue';
</script> </script>
<script> <script>
@@ -414,6 +491,7 @@ export default {
tiktokLink: 'tiktok.com', tiktokLink: 'tiktok.com',
drawer: false, drawer: false,
drawerbottom: false, drawerbottom: false,
items: [ items: [
{ title: 'Item 1' }, { title: 'Item 1' },
{ title: 'Item 2' }, { title: 'Item 2' },
@@ -436,6 +514,16 @@ export default {
<style scoped> <style scoped>
.Hutopy-menu-sticky {
position: sticky;
top: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
margin-top: -40px;
}
.sticky-bottom-label { .sticky-bottom-label {
position: sticky; position: sticky;
top: 0; top: 0;
@@ -443,6 +531,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
margin-top: 20px;
} }
.sticky-top-label { .sticky-top-label {
@@ -457,15 +546,15 @@ export default {
.text-soutiens { .text-soutiens {
margin-bottom: 15px; margin-bottom: 15px;
color: white; color: white;
font-size: 2rem; font-size: 1.5rem;
letter-spacing: 10px; letter-spacing: 7px;
text-align: center; text-align: center;
} }
.name-info { .name-info {
margin-top: -10px; margin-top: -10px;
margin-left: 15%; margin-left: 15%;
font-size: larger
} }
.occupation-info { .occupation-info {
@@ -475,8 +564,8 @@ export default {
.name-info-mobile { .name-info-mobile {
margin-left: 38%; margin-left: 22px;
font-size: larger font-size: 1.3rem
} }
.occupation-info-mobile { .occupation-info-mobile {
@@ -590,15 +679,17 @@ export default {
.socialicons-mobile { .socialicons-mobile {
width: 35px; width: 35px;
max-width: 100px; max-width: 100px;
margin-top: 15px; margin-top: 27px;
margin-left: 40px; margin-left: 20px;
} }
.social-icon-group-mobile {}
.youtube-card { .youtube-card {
margin-left: 2%; margin-left: 2%;
margin-right: 2%; margin-right: 2%;
border-radius: 15px;
background-color: #f4f4f4; background-color: #f4f4f4;
@@ -640,12 +731,19 @@ export default {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
color: white; color: white;
margin-top: -8%;
z-index: 1000; z-index: 1000;
margin: auto;
/* Centre verticalement */
text-align: center;
/* Centre horizontalement */
} }
.social-container2-mobile { .social-container2-mobile {
background-color: #0baab2; background-color: #0baab2;
z-index: 1000; z-index: 1000;
@@ -673,7 +771,7 @@ export default {
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.5) translateY(25px);
border-radius: 100px; border-radius: 100px;
height: 150px; height: 150px;
@@ -681,10 +779,10 @@ export default {
border-radius: 50%; border-radius: 50%;
max-width: 150px; max-width: 150px;
margin-left: 3%;
border: 4px solid white; border: 4px solid white;
z-index: 200; z-index: 1000;
} }
.mobile-header { .mobile-header {
@@ -725,18 +823,38 @@ export default {
/* 80% de la hauteur de l'écran */ /* 80% de la hauteur de l'écran */
} }
@media (min-width: 150px) and (max-width: 599px) { @media (min-width: 150px) and (max-width: 474px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(-30%) translateX(0%);
}
.socialicons-mobile {
width: 35px;
max-width: 100px;
margin-top: 0px;
margin-left: 20px;
}
}
@media (min-width: 475px) and (max-width: 599px) {
.socialicons-mobile {
width: 35px;
max-width: 100px;
margin-top: 0px;
margin-left: px;
}
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.2) translateY(40%) translateX(7%); transform: scale(1.5) translateY(-30%) translateX(0%);
} }
.profile-container {
width: 110%;
margin-left: -3%;
}
.profile-container-mobile { .profile-container-mobile {
@@ -745,22 +863,31 @@ export default {
margin-top: -112px; margin-top: -112px;
} }
.name-info {
font-size: 1.2rem;
}
.occupation-info { .occupation-info {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 250px;
}
.name-info-mobile {
font-size: 1.6rem;
}
} }
@media (min-width: 599px) and (max-width: 749px) { @media (min-width: 599px) and (max-width: 749px) {
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.2) translateY(40%) translateX(7%); transform: scale(1.5) translateY(25%) translateX(0%);
} }
.profile-container { .profile-container {
@@ -784,12 +911,19 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 330px;
}
} }
@media (min-width: 750px) and (max-width: 960px) { @media (min-width: 750px) and (max-width: 960px) {
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.2) translateY(40%) translateX(7%); transform: scale(1.8) translateY(25%) translateX(0%);
} }
.profile-container { .profile-container {
@@ -813,17 +947,80 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.card-youtube {
min-height: 425px;
}
} }
@media (min-width: 959px) and (max-width: 1280px) { @media (min-width: 960px) and (max-width: 1280px) {
.middle-col {
margin-left: -30px;
}
.text-soutiens {
font-size: 1.2rem;
letter-spacing: 5px;
}
.profile-container { .profile-container {
margin-top: -16%; margin-top: -185px;
min-width: 480px
}
.card-youtube {
min-height: 270px;
}
.Je-soutien-container {
min-width: 325px;
margin-left: -35px;
} }
.mobile-profile-picture-creator {
transform: scale(1.3) translateY(25%) translateX(-50px);
}
.name-info {
font-size: 1.2rem;
margin-left: 20px;
margin-top: -6px
}
.occupation-info {
margin-left: 40px;
margin-top: -8px
}
.social-container {
margin-left: 80px;
min-width: 270px;
max-height: 40px
}
.social-container2 {
margin-left: 50px;
min-width: 250px;
max-height: 35px
}
.socialicons {
width: 34px;
max-width: 100px;
margin-top: 15px;
margin-left: 25px;
}
} }
@@ -834,42 +1031,219 @@ export default {
} }
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.2) translateY(25px) translateX(-8px); transform: scale(1.3) translateY(25%) translateX(-50px);
} }
.profile-container { .profile-container {
margin-top: -25%; margin-top: -180px;
} }
.card-youtube {
min-height: 290px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 350px;
}
.name-info {
font-size: 1.2rem;
margin-left: 20px;
margin-top: -6px
}
.social-container {
margin-left: 90px;
min-width: 350;
max-height: 40px
}
.occupation-info {
margin-left: 70px;
margin-top: -8px
}
.social-container2 {
margin-left: 40px;
min-width: 290px;
max-height: 35px
}
.socialicons {
width: 34px;
max-width: 100px;
margin-top: 15px;
margin-left: 25px;
}
} }
@media (min-width: 1600px) and (max-width: 1919px) { @media (min-width: 1600px) and (max-width: 1919px) {
.text-soutiens { .text-soutiens {
font-size: 1.5rem; font-size: 1.3rem;
} }
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.3) translateY(25px) translateX(-5px); transform: scale(1.4) translateY(25%) translateX(-40px);
} }
.profile-container { .profile-container {
margin-top: -20%; margin-top: -171px;
} }
.card-youtube {
min-height: 355px;
}
.menu-col {
margin-left: -4%;
}
.Je-soutien-container {
min-width: 400px;
}
.name-info {
font-size: 1.5rem;
margin-top: -4px;
margin-left: 35px;
}
.occupation-info {
font-size: 1.3rem;
margin-left: 75px;
margin-top: -2px
}
.social-container2 {
margin-left: 70px;
min-width: 300px;
}
} }
@media (min-width: 1920px) and (max-width: 2559px) { @media (min-width: 1920px) and (max-width: 2559px) {
.text-soutiens { .text-soutiens {
font-size: 1.5rem; font-size: 1.3rem;
} }
.profile-container { .profile-container {
margin-top: -12%; margin-top: -160px;
} }
.card-youtube {
min-height: 380px;
}
.Je-soutien-container {
min-width: 400px;
}
.mobile-profile-picture-creator {
transform: scale(1.4) translateY(25%) translateX(-40px);
}
.name-info {
font-size: 1.5rem;
margin-left: 35px;
margin-top: -4px;
}
.social-container {
margin-left: 100px;
}
.occupation-info {
font-size: 1.3rem;
margin-left: 110px;
margin-top: -4px
}
.social-container2 {
margin-left: 30px;
min-width: 360px;
}
.socialicons {
width: 38px;
max-width: 100px;
margin-top: 13px;
margin-left: 40px;
}
} }
@media (min-width: 2559px) {} @media (min-width: 2560px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(25%) translateX(-20px);
}
.card-youtube {
min-height: 380px;
}
.text-soutiens {
font-size: 1.5rem;
}
.name-info {
font-size: 2rem;
}
.social-container {
margin-left: 140px;
}
.social-container2 {
margin-left: 130px;
}
.occupation-info {
font-size: 1.5rem;
margin-left: 65px;
margin-top: -6px
}
.socialicons {
width: 45px;
max-width: 100px;
margin-top: 15px;
margin-left: 40px;
}
}
</style> </style>