1080 lines
32 KiB
Vue
1080 lines
32 KiB
Vue
<template>
|
||
<div style="background-color: #f4f4f4;">
|
||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||
|
||
<!-- "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-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>
|
||
|
||
<!-- "PurpleLine" -->
|
||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||
</v-row>
|
||
|
||
<!-- "Mobile-Profile" -->
|
||
<!-- "Profile picture" -->
|
||
<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>
|
||
|
||
<!-- User Social Network Links -->
|
||
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
|
||
hidden-md-and-down>
|
||
|
||
<!-- Facebook -->
|
||
<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>
|
||
<!-- Instagram -->
|
||
<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>
|
||
<!-- Profile picture - Small -->
|
||
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
|
||
<v-row class="d-flex justify-center align-center">
|
||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||
</v-row>
|
||
</v-col>
|
||
<!-- X -->
|
||
<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>
|
||
<!-- TikTok -->
|
||
<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.tiktok.com/">
|
||
<v-img class="socialicons-mobile invert-color" src="../../../images/tiktok.png" alt="TikTok"></v-img>
|
||
</a>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- User informations Name title and description -->
|
||
<v-row class="social-container-mobile">
|
||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||
<v-row justify="center name-info-mobile">
|
||
<v-typography>{{ name }}</v-typography>
|
||
</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-container style="border-bottom-left-radius: 15px; margin-top: -12px; 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-container>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- "Core (Menu / Center / 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-mobile">
|
||
<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 v-for="item in navigationItems">
|
||
<router-link :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>
|
||
<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-icon left class="mr-4">mdi-wallet</v-icon>
|
||
<p @click="isActive.value = false">Bourse</p>
|
||
</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-list-item>
|
||
</v-list>
|
||
</v-col>
|
||
</v-container>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row style="height: 1400px;"></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>
|
||
<!-- User informations Name & title -->
|
||
<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>
|
||
|
||
<!-- User Social Network Links -->
|
||
<v-row>
|
||
<v-spacer></v-spacer>
|
||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||
<v-row>
|
||
<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 background-color="primary"></v-col>
|
||
</v-row>
|
||
|
||
<!-- Description -->
|
||
<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">
|
||
<!-- Title, date and btn -->
|
||
<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> (a intégrer) -->
|
||
</v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<h1 class="card-date">
|
||
10-03-2024</h1>
|
||
</v-row>
|
||
</v-col>
|
||
|
||
<!-- Card core Video/image & text -->
|
||
<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>
|
||
|
||
<!-- Drawer du bas -->
|
||
<template>
|
||
<div>
|
||
<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>
|
||
<StripePayment></StripePayment>
|
||
</v-container>
|
||
</v-bottom-sheet>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<FooterLayout></FooterLayout>
|
||
|
||
<!-- Approuve btn -->
|
||
<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>
|
||
|
||
|
||
<!-- Approuve and decline Modale -->
|
||
<!-- Completed paiement -->
|
||
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
|
||
<v-container>
|
||
<v-row justify="center">
|
||
<!-- Icon Check -->
|
||
<v-col cols="12" class="text-center">
|
||
<v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- Informations -->
|
||
<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>
|
||
|
||
<!-- Ok btn -->
|
||
<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>
|
||
|
||
<!-- Decline btn -->
|
||
<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>
|
||
|
||
<!-- Decline paiement -->
|
||
|
||
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
|
||
<v-container>
|
||
<v-row justify="center">
|
||
<!-- Icon Cancel -->
|
||
<v-col cols="12" class="text-center">
|
||
<v-icon color="black" size="250">mdi-cancel</v-icon>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- Informations -->
|
||
<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>
|
||
|
||
<!-- Ok btn -->
|
||
<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';
|
||
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' }
|
||
];
|
||
</script>
|
||
|
||
<style scoped>
|
||
.invert-color {
|
||
filter: invert(1);
|
||
}
|
||
|
||
.Hutopy-menu-sticky-mobile {
|
||
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: 22px;
|
||
font-size: 1.3rem
|
||
}
|
||
|
||
.main-background {
|
||
background-color: #f4f4f4;
|
||
}
|
||
|
||
.profile-container {
|
||
margin-top: -16%;
|
||
}
|
||
|
||
.btn-custom {
|
||
width: 100%;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.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-pink {
|
||
background-color: #cc6f91;
|
||
color: white;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.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: 27px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.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;
|
||
font-size: 1.4rem;
|
||
font-weight: 500;
|
||
color: white;
|
||
}
|
||
|
||
.social-container-mobile {
|
||
background-color: #006d77;
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
color: white;
|
||
z-index: 1000;
|
||
margin: auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.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 {
|
||
border-radius: 100px;
|
||
height: 150px;
|
||
width: 150px;
|
||
border-radius: 50%;
|
||
max-width: 150px;
|
||
border: 4px solid white;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.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);
|
||
border: 2px solid #a30e79;
|
||
margin-right: 10px
|
||
}
|
||
|
||
.profile-banner {
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.v-navigation-drawer {
|
||
max-height: 100vh;
|
||
}
|
||
|
||
@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 {
|
||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||
}
|
||
|
||
.profile-container-mobile {
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
margin-top: -112px;
|
||
}
|
||
|
||
.occupation-info {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.card-youtube {
|
||
min-height: 250px;
|
||
}
|
||
|
||
.name-info-mobile {
|
||
font-size: 1.6rem;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 599px) and (max-width: 749px) {
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||
}
|
||
|
||
.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.8) translateY(25%) translateX(0%);
|
||
}
|
||
|
||
.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: 960px) and (max-width: 1280px) {
|
||
.middle-col {
|
||
margin-left: -30px;
|
||
}
|
||
|
||
.text-soutiens {
|
||
font-size: 1.2rem;
|
||
letter-spacing: 5px;
|
||
}
|
||
|
||
.profile-container {
|
||
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;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||
.text-soutiens {
|
||
font-size: 1.3rem;
|
||
letter-spacing: 8px;
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||
}
|
||
|
||
.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.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) {
|
||
.text-soutiens {
|
||
font-size: 1.3rem;
|
||
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||
}
|
||
|
||
.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.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) {
|
||
.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.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: 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> |