1093 lines
30 KiB
Vue
1093 lines
30 KiB
Vue
<template>
|
||
<div style="background-color: #f4f4f4;">
|
||
<DefaultLayout></DefaultLayout>
|
||
|
||
<!-- Bannière -->
|
||
<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>
|
||
|
||
|
||
|
||
<!-- "profile xs sm md" -->
|
||
|
||
<v-card
|
||
style="margin-top: 2px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-color: rgba(11, 170, 178, 0); width: 101vw;"
|
||
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 style="z-index: 400;" class="social-container-mobile">
|
||
<h1 style="z-index: 400;" class="name-info-mobile">{{ name }}</h1>
|
||
</v-row>
|
||
<v-row class="social-container2-mobile">
|
||
<h1 class="occupation-info-mobile">{{ title }}</h1>
|
||
</v-row>
|
||
|
||
<v-col class="social-icon-group-mobile">
|
||
<v-row style="margin-left: 160px; margin-top: 5px; margin-bottom: 5px;">
|
||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||
<img class="socialicons-mobile" src="../../../images/facebookicon.png" alt="Description image 2">
|
||
</a>
|
||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||
<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-row>
|
||
<v-container style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"
|
||
class="social-icon-group-mobile">
|
||
<v-expansion-panels style="min-width: 320px;">
|
||
<v-col cols="12" offset="-1">
|
||
<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?"
|
||
title="À propos : Ma mission est claire :">
|
||
|
||
</v-expansion-panel>
|
||
</v-col>
|
||
</v-expansion-panels>
|
||
</v-container>
|
||
</v-row>
|
||
</v-card>
|
||
|
||
|
||
<!-- "Creator Core (Menu / Feed / Donation)" -->
|
||
<v-row>
|
||
<!-- "Menu" -->
|
||
<v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
||
<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-col>
|
||
|
||
|
||
</v-row>
|
||
|
||
<v-row style="height: 1400px;"></v-row>
|
||
|
||
<!-- Wallet -->
|
||
<v-row>
|
||
<v-dialog transition="dialog-top-transition" width="auto">
|
||
<template v-slot:activator="{ props: activatorProps }">
|
||
<v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
|
||
style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
|
||
<v-icon color="black">mdi-wallet</v-icon>
|
||
<div @click="isActive.value = false">PORTEFEUILLE</div>
|
||
</v-btn>
|
||
</template>
|
||
|
||
<!-- Wallet Modale -->
|
||
<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: 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>
|
||
<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: 25px; 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-row>
|
||
</v-col>
|
||
|
||
</v-col>
|
||
|
||
<!-- Profile Info Picture name title & description -->
|
||
<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>
|
||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||
<v-row>
|
||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||
<h1 class="name-info">{{ name }}</h1>
|
||
</v-col>
|
||
<v-col></v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||
<h1 class="occupation-info">{{ title }}</h1>
|
||
</v-col>
|
||
<v-col></v-col>
|
||
</v-row>
|
||
|
||
<v-row>
|
||
<v-spacer></v-spacer>
|
||
<v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;">
|
||
<v-col cols="11" style="margin-top: 1%; margin-bottom: -2%;">
|
||
<v-row justify-center align="center">
|
||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||
<img class="socialicons invert-color" src="../../../images/facebookicon.png" alt="Description image 2">
|
||
</a>
|
||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||
<img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
|
||
</a>
|
||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||
<img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
|
||
</a>
|
||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||
<img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
|
||
</a>
|
||
</v-row>
|
||
</v-col>
|
||
|
||
</v-col>
|
||
<v-col background-color="primary"></v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-container
|
||
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
|
||
<v-expansion-panels style="min-width: 320px;">
|
||
<v-col cols="12" offset="-1">
|
||
<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?"
|
||
title="À propos : Ma mission est claire :">
|
||
|
||
</v-expansion-panel>
|
||
</v-col>
|
||
</v-expansion-panels>
|
||
</v-container>
|
||
</v-row>
|
||
</v-container>
|
||
</v-container>
|
||
</v-container>
|
||
|
||
|
||
<!-- "Card youtube" -->
|
||
<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>
|
||
</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>
|
||
</v-container>
|
||
</div>
|
||
</v-card>
|
||
</v-container>
|
||
</v-col>
|
||
|
||
<!-- "Large-Monitor-RightCol" Donation -->
|
||
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
|
||
<v-row>
|
||
<v-col>
|
||
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
|
||
<!-- Donnation -->
|
||
<v-card style="border-radius: 20px;">
|
||
<v-container>
|
||
<v-row class="mb-0"
|
||
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
|
||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||
JE SOUTIENS!
|
||
</v-card-title>
|
||
</v-row>
|
||
|
||
<StripePayment></StripePayment>
|
||
</v-container>
|
||
</v-card>
|
||
</v-container>
|
||
<v-container style="height: 1600px;">
|
||
|
||
</v-container>
|
||
|
||
</v-col>
|
||
<v-spacer>
|
||
</v-spacer>
|
||
</v-row>
|
||
|
||
</v-col>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</v-row>
|
||
|
||
|
||
<!-- "Mobile" Donation -->
|
||
<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 -->
|
||
|
||
<v-btn @click="drawerbottom = !drawerbottom" elevation="0"
|
||
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
|
||
JE SOUTIENS
|
||
</v-btn>
|
||
</v-col>
|
||
<template>
|
||
<div>
|
||
|
||
|
||
|
||
<!-- Drawer du bas -->
|
||
<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;">
|
||
<h1 class="text-soutiens">JE SOUTIENS</h1>
|
||
<v-textarea style="color: white;" label="Votre message" placeholder="Écrivez votre message ici" rows="2"
|
||
auto-grow></v-textarea>
|
||
<StripePayment></StripePayment>
|
||
</v-container>
|
||
</v-bottom-sheet>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<FooterLayout></FooterLayout>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||
import StripePayment from '../StripePayment.vue';
|
||
</script>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imageSrc: '../../../images/guillaimeaime3x.png',
|
||
profilePicture: '../../../images/guillaume.png',
|
||
name: 'Guillaume Mousseau',
|
||
title: 'Créateur de contenus',
|
||
facebookLink: 'www.facebook.com',
|
||
instagramLink: 'www.instagram.com',
|
||
xLink: 'x.com',
|
||
tiktokLink: 'tiktok.com',
|
||
drawer: false,
|
||
drawerbottom: false,
|
||
|
||
items: [
|
||
{ title: 'Item 1' },
|
||
{ title: 'Item 2' },
|
||
{ title: 'Item 3' },
|
||
],
|
||
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' }
|
||
],
|
||
tools: [
|
||
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
|
||
]
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<style scoped>
|
||
.Hutopy-menu-sticky {
|
||
position: sticky;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
margin-top: -40px;
|
||
}
|
||
|
||
.sticky-bottom-label {
|
||
position: sticky;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.sticky-top-label {
|
||
position: sticky;
|
||
bottom: 0;
|
||
right: 10%;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
}
|
||
|
||
|
||
.text-soutiens {
|
||
margin-bottom: 15px;
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
letter-spacing: 7px;
|
||
text-align: center;
|
||
}
|
||
|
||
.name-info {
|
||
margin-top: -10px;
|
||
margin-left: 15%;
|
||
|
||
}
|
||
|
||
.occupation-info {
|
||
margin-left: 15%;
|
||
font-size: large;
|
||
}
|
||
|
||
.name-info-mobile {
|
||
|
||
margin-left: 38%;
|
||
font-size: larger
|
||
}
|
||
|
||
.occupation-info-mobile {
|
||
margin-left: 38%;
|
||
font-size: large;
|
||
margin-top: 2%;
|
||
margin-bottom: -2%
|
||
}
|
||
|
||
.invert-color {
|
||
filter: invert(1);
|
||
}
|
||
|
||
.main-background {
|
||
background-color: #f4f4f4;
|
||
}
|
||
|
||
.profile-container {
|
||
margin-top: -16%;
|
||
}
|
||
|
||
|
||
.btn-custom {
|
||
width: 100%;
|
||
background-color: transparent;
|
||
|
||
}
|
||
|
||
.logout-button {
|
||
max-width: 300px;
|
||
bottom: 10px;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
}
|
||
|
||
|
||
|
||
|
||
.video-container {
|
||
position: relative;
|
||
padding-bottom: 56.25%;
|
||
/* 16:9 aspect ratio */
|
||
height: 0;
|
||
overflow: hidden;
|
||
z-index: 100;
|
||
/* Positionne la vidéo au-dessus de la carte */
|
||
}
|
||
|
||
.video-container iframe {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
/* Assure que l'iframe de la vidéo est également au-dessus de la carte */
|
||
}
|
||
|
||
|
||
.background-profile-container {
|
||
background-color: #ececec;
|
||
color: white;
|
||
border-top: 3px solid #a30e79;
|
||
border-right: 3px solid #a30e79;
|
||
font-weight: 700;
|
||
font-size: 1.15rem;
|
||
border-radius: 25px;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||
}
|
||
|
||
.background-blue {
|
||
background-color: #aedcde;
|
||
color: white;
|
||
border-right: 3px solid #a30e79;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.background-pink {
|
||
background-color: #cc6f91;
|
||
color: white;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.border-radius {
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.label-text-name {
|
||
font-weight: 600;
|
||
margin-left: 3%;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.label-text {
|
||
font-weight: 400;
|
||
margin-left: 3%;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.profile-name {
|
||
margin-top: -15%;
|
||
}
|
||
|
||
.socialicons {
|
||
width: 35px;
|
||
max-width: 100px;
|
||
margin-top: 3px;
|
||
margin-left: 40px;
|
||
}
|
||
|
||
.socialicons-mobile {
|
||
width: 35px;
|
||
max-width: 100px;
|
||
margin-top: 15px;
|
||
margin-left: 40px;
|
||
}
|
||
|
||
.social-icon-group-mobile {}
|
||
|
||
.youtube-card {
|
||
margin-left: 2%;
|
||
margin-right: 2%;
|
||
border-radius: 15px;
|
||
|
||
|
||
|
||
background-color: #f4f4f4;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.4rem;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.card-date {
|
||
margin-left: 10px;
|
||
margin-top: -18px
|
||
}
|
||
|
||
.social-container {
|
||
background-color: #006d77;
|
||
border-top-right-radius: 30px;
|
||
border-bottom-right-radius: 30px;
|
||
font-size: 1.7rem;
|
||
font-weight: 600;
|
||
color: white;
|
||
|
||
|
||
}
|
||
|
||
.social-container2 {
|
||
background-color: #0baab2;
|
||
border-bottom-right-radius: 30px;
|
||
border-bottom-left-radius:30px;
|
||
font-size: 1.4rem;
|
||
font-weight: 500;
|
||
color: white;
|
||
|
||
}
|
||
|
||
.social-container-mobile {
|
||
background-color: #006d77;
|
||
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
color: white;
|
||
margin-top: -8%;
|
||
z-index: 1000;
|
||
|
||
|
||
}
|
||
|
||
.social-container2-mobile {
|
||
background-color: #0baab2;
|
||
z-index: 1000;
|
||
font-size: 1.2rem;
|
||
font-weight: 500;
|
||
color: white;
|
||
}
|
||
|
||
.social-icon-group-mobile {
|
||
background-color: #0baab2;
|
||
}
|
||
|
||
|
||
|
||
.mini-profile-picture {
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.btn-card-options {
|
||
background-color: #f4f4f4;
|
||
width: 50px;
|
||
margin-left: -12px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.5) translateY(25px);
|
||
|
||
border-radius: 100px;
|
||
height: 150px;
|
||
width: 150px;
|
||
|
||
border-radius: 50%;
|
||
max-width: 150px;
|
||
margin-left: 3%;
|
||
|
||
border: 4px solid white;
|
||
z-index: 200;
|
||
}
|
||
|
||
.mobile-header {
|
||
height: 50px;
|
||
margin-left: -13%;
|
||
margin-top: 6%;
|
||
|
||
}
|
||
|
||
.h1-navigation {
|
||
|
||
text-align: center;
|
||
font-weight: 600;
|
||
margin-bottom: 10%;
|
||
|
||
}
|
||
|
||
.mobile-profile-picture {
|
||
height: 40px;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||
/* Ajouter une ombre à la photo */
|
||
border: 2px solid #a30e79;
|
||
margin-right: 10px
|
||
}
|
||
|
||
.profile-banner {
|
||
margin-top: 25px;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.v-navigation-drawer {
|
||
max-height: 100vh;
|
||
|
||
|
||
/* 80% de la hauteur de l'écran */
|
||
}
|
||
|
||
@media (min-width: 150px) and (max-width: 599px) {
|
||
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.2) translateY(40%) translateX(7%);
|
||
}
|
||
|
||
.profile-container {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
}
|
||
|
||
.profile-container-mobile {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
margin-top: -112px;
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.occupation-info {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 250px;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
@media (min-width: 599px) and (max-width: 749px) {
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.2) translateY(40%) translateX(7%);
|
||
}
|
||
|
||
.profile-container {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
}
|
||
|
||
.profile-container-mobile {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
margin-top: -110px;
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.occupation-info {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 330px;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
@media (min-width: 750px) and (max-width: 960px) {
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.2) translateY(40%) translateX(7%);
|
||
}
|
||
|
||
.profile-container {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
}
|
||
|
||
.profile-container-mobile {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
margin-top: -110px;
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.occupation-info {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 425px;
|
||
}
|
||
|
||
}
|
||
|
||
@media (min-width: 959px) and (max-width: 1280px) {
|
||
|
||
.middle-col {
|
||
margin-left: -30px;
|
||
}
|
||
|
||
.text-soutiens {
|
||
font-size: 1.2rem;
|
||
letter-spacing: 5px;
|
||
|
||
}
|
||
|
||
|
||
.profile-container {
|
||
margin-top: -185px;
|
||
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 270px;
|
||
}
|
||
|
||
.Je-soutien-container {
|
||
min-width: 300px;
|
||
margin-left: -40px;
|
||
}
|
||
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(.9) translateY(63px) translateX(-40px);
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 1.3rem;
|
||
margin-left: 40px;
|
||
margin-top: -4px;
|
||
}
|
||
|
||
.social-container {
|
||
min-width: 300px;
|
||
|
||
}
|
||
}
|
||
|
||
|
||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||
.text-soutiens {
|
||
font-size: 1.3rem;
|
||
letter-spacing: 8px;
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.0) translateY(55px) translateX(-30px);
|
||
}
|
||
|
||
.profile-container {
|
||
margin-top: -180px;
|
||
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 290px;
|
||
}
|
||
|
||
.menu-col {
|
||
margin-left: -4%;
|
||
}
|
||
|
||
.Je-soutien-container {
|
||
min-width: 350px;
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 1.3rem;
|
||
margin-left: 50px;
|
||
margin-top: -4px;
|
||
}
|
||
|
||
.social-container {
|
||
min-width: 300px;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||
.text-soutiens {
|
||
font-size: 1.3rem;
|
||
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.1) translateY(40px) translateX(-25px);
|
||
}
|
||
|
||
.profile-container {
|
||
margin-top: -171px;
|
||
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 355px;
|
||
}
|
||
|
||
.menu-col {
|
||
margin-left: -4%;
|
||
}
|
||
|
||
.Je-soutien-container {
|
||
min-width: 400px;
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 1.4rem;
|
||
margin-left: 40px;
|
||
margin-top: -4px;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||
.text-soutiens {
|
||
font-size: 1.3rem;
|
||
|
||
}
|
||
|
||
.profile-container {
|
||
margin-top: -160px;
|
||
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 380px;
|
||
}
|
||
|
||
.Je-soutien-container {
|
||
min-width: 400px;
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.3) translateY(40px) translateX(-10px);
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 1.4rem;
|
||
margin-left: 40px;
|
||
margin-top: -4px;
|
||
}
|
||
|
||
.social-container {
|
||
margin-left: 150px;
|
||
|
||
}
|
||
|
||
.social-container2 {
|
||
margin-left: 80px;
|
||
min-width: 350px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 2560px) {
|
||
.card-youtube {
|
||
min-height: 380px;
|
||
}
|
||
|
||
.text-soutiens {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.name-info {
|
||
font-size: 2rem;
|
||
|
||
}
|
||
|
||
.social-container {
|
||
margin-left: 150px;
|
||
}
|
||
|
||
.social-container2 {
|
||
margin-left: 150px;
|
||
}
|
||
}
|
||
</style>
|