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

New CreatorMainpage more built with components

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-20 22:00:10 -04:00
parent 24ecff0d59
commit bb14c6071e
5 changed files with 167 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/layouts/DefaultLayout.vue
View File

@@ -3,16 +3,22 @@
<body style="background-color: #f4f4f4;"> <body style="background-color: #f4f4f4;">
<!-- PC Version --> <!-- PC Version -->
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" elevation="5"> <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" elevation="5">
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;"> <v-container fluid>
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;"> <v-row>
<v-menu> <v-menu>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-row> <v-row align="center"> <!-- Utilisation de align="center" pour aligner verticalement le contenu -->
<!-- Colonne de droite --> <v-col class="ml-4">
<v-col class="text-right d-flex align-center justify-end"> <router-link to="/">
<v-img src="/images/hutopymedia/icons/logohutopy.png" alt="Description de l'image"
style="height: 70px; width: 70px;" class="mr-2" :elevation="10"></v-img>
</router-link>
</v-col>
<v-col cols="auto" class="ml-auto"> <!-- Utilisation de ml-auto pour aligner à droite -->
<div class="d-flex align-center"> <div class="d-flex align-center">
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="header-profile-icon mr-2" alt="Logo"> class="header-profile-icon mr-2" alt="Logo">
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props" ref="walletActivator"> <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props" ref="walletActivator">
{{ currentUserName }} {{ currentUserName }}
</v-btn> </v-btn>
@@ -207,18 +213,15 @@ function openWalletDialog() {
padding-right: 24px; padding-right: 24px;
z-index: 1001; z-index: 1001;
} }
.mini-profile-picture { .mini-profile-picture {
border-radius: 100px; border-radius: 100px;
} }
.header-profile-icon { .header-profile-icon {
height: 60px; height: 60px;
width: 60px; width: 60px;
border-radius: 50px; border-radius: 50px;
border: 2px solid #a30e79; border: 2px solid #a30e79;
} }
.mobile-profile-picture { .mobile-profile-picture {
height: 40px; height: 40px;
border-radius: 50px; border-radius: 50px;
@@ -226,37 +229,11 @@ function openWalletDialog() {
border: 2px solid #a30e79; border: 2px solid #a30e79;
margin-right: 10px; margin-right: 10px;
} }
.header-banner {
border-top: 5px solid rgba(107, 0, 101, 1);
margin-top: 15%;
}
.social-container {
background-color: #006d77;
margin-top: -20%;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.social-container2 {
background-color: #0baab2;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.mobile-header { .mobile-header {
height: 50px; height: 50px;
width: auto; width: auto;
border-radius: 10px; border-radius: 10px;
} }
.mobile-navigation-container {
background-color: #a30e79;
}
.h1-navigation { .h1-navigation {
padding-left: 20%; padding-left: 20%;
font-size: 1.4rem; font-size: 1.4rem;

6
src/router/index.js
View File

@@ -13,6 +13,7 @@ import LoginView from '../views/LoginView.vue'
import PaymentCompleted from '../views/PayementCompleted.vue' import PaymentCompleted from '../views/PayementCompleted.vue'
import SignupView from '../views/SignupView.vue' import SignupView from '../views/SignupView.vue'
import ContactView from '../views/main/ContactView.vue' import ContactView from '../views/main/ContactView.vue'
import CreatorMainPage from '../views/main/CreatorMainPage.vue'
import CreatorFolio from '../views/main/CreatorFolio.vue' import CreatorFolio from '../views/main/CreatorFolio.vue'
import HomeView from '../views/main/HomeView.vue' import HomeView from '../views/main/HomeView.vue'
import UserBrowser from '../views/main/UsersBrowser.vue' import UserBrowser from '../views/main/UsersBrowser.vue'
@@ -143,6 +144,11 @@ const routes = [
path: '/creatorFolio', path: '/creatorFolio',
name: 'creatorFolio', name: 'creatorFolio',
component: CreatorFolio component: CreatorFolio
},
{
path: '/creatormainpage',
name: 'creatormainpage',
component: CreatorMainPage
} }
] ]

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

@@ -4,10 +4,10 @@
<!-- "Mobile --> <!-- "Mobile -->
<v-row class="fluid hidden-md-and-up social-mobile-container" <v-row class="fluid hidden-md-and-up social-mobile-container"
style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down> style="margin-top: -10px; position: relative; z-index: 0;">
<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>
@@ -22,22 +22,21 @@
</v-row> </v-row>
<!-- User Social Network Links --> <!-- User Social Network Links -->
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons" <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons">
hidden-md-and-down>
<!-- Facebook --> <!-- Facebook -->
<v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;"> <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"> <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/GuillaumeMousseau222"> <a href="https://www.facebook.com/GuillaumeMousseau222">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png" <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Facebook"></v-img> alt="Facebook"></v-img>
</a> </a>
</v-col> </v-col>
<!-- Instagram --> <!-- Instagram -->
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center"> <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/guillaumeaime/"> <a href="https://www.instagram.com/guillaumeaime/">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png" <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Instagram"></v-img> alt="Instagram"></v-img>
</a> </a>
</v-col> </v-col>
<!-- Profile picture - Small --> <!-- Profile picture - Small -->
@@ -51,16 +50,11 @@
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center"> <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/@guillaumeaime"> <a href="https://www.tiktok.com/@guillaumeaime">
<v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png" <v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
alt="TikTok"></v-img> alt="TikTok"></v-img>
</a> </a>
</v-col> </v-col>
<v-spacer class="hidden-xs"> </v-spacer> <v-spacer class="hidden-xs"> </v-spacer>
</v-row> </v-row>
<!-- User informations Name title and description --> <!-- User informations Name title and description -->
@@ -79,14 +73,12 @@
</v-row> </v-row>
<v-row> <v-row>
<v-container style="border-bottom-left-radius: 15px; margin-top: -12px; 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 text-justify" style="color: white;" <v-expansion-panel class="background-pink text-justify" style="color: white;"
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>
@@ -95,21 +87,19 @@
</v-container> </v-container>
<!-- Bannière Pc --> <!-- Bannière Pc -->
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; " <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-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>
<v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);" <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> </v-row>
<!-- "Core (Menu / Center / Donation)" --> <!-- "Core (Menu / Center / Donation)" -->
<v-row> <v-row>
<!-- "Menu" --> <!-- "Menu" -->
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down> <v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col">
<v-col style="margin: 0;"> <v-col style="margin: 0;">
<v-row class="Hutopy-menu-sticky-mobile"> <v-row class="Hutopy-menu-sticky-mobile">
<v-spacer></v-spacer> <v-spacer></v-spacer>
@@ -118,12 +108,11 @@
<!-- Nav-Btn --> <!-- Nav-Btn -->
<v-col cols="12" class="px-0"> <v-col cols="12" class="px-0">
<v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image" <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img> style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
<v-list dense class="main-background"> <v-list dense class="main-background">
<v-list-item v-for="item in navigationItems" :key="item.link"> <v-list-item v-for="item in navigationItems" :key="item.link">
<router-link :to="item.link"> <router-link :to="item.link">
<v-btn text class="d-flex align-start align-center main-background" elevation="0" <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> <v-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }} {{ item.text }}
</v-btn> </v-btn>
@@ -142,7 +131,7 @@
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8"> <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
<v-row class="d-flex justify-center align-center"> <v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8"> <v-col xl="10" xxl="8">
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up> <v-container class="profile-container hidden-sm-and-down">
<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>
<!-- User informations Name & title --> <!-- User informations Name & title -->
@@ -167,16 +156,16 @@
<v-row> <v-row>
<a href="https://www.facebook.com/GuillaumeMousseau222"> <a href="https://www.facebook.com/GuillaumeMousseau222">
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png" <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2"> alt="Description image 2">
</a> </a>
<a href="https://www.instagram.com/p/C2f-3UnNdfX/"> <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png" <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Description image 2"> alt="Description image 2">
</a> </a>
<a href="https://www.tiktok.com/@guillaumeaime"> <a href="https://www.tiktok.com/@guillaumeaime">
<img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png" <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
alt="Description image 2"> alt="Description image 2">
</a> </a>
</v-row> </v-row>
</v-col> </v-col>
@@ -186,12 +175,12 @@
<!-- Description --> <!-- Description -->
<v-row> <v-row>
<v-container <v-container
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;"> style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
<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 text-justify" style="color: white;" <v-expansion-panel class="background-pink text-justify" style="color: white;"
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>
@@ -209,84 +198,92 @@
</v-col> </v-col>
</v-row> </v-row>
<!-- Card youtube balado --> <!-- Example carte dynamique avec expension -->
<v-row class="d-flex justify-center align-center"> <v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8"> <v-col xl="10" xxl="8">
<v-container> <v-container>
<v-card class="flow-menu m-0 youtube-card"> <v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col> <v-col>
<v-row> <v-row>
<v-col class="text-center"> <v-col class="text-center">
<h1 class="card-title"> <h1 class="card-title">POST DYNAMIQUE</h1>
MON PREMIER BALADO</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-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>
</v-col> </v-col>
<v-img :src="imageSrc" title="Guillaumem"></v-img>
<p class="text-justify pa-10" style="margin-bottom: -10px; font-size: 1em">
C’est un honneur de vous présenter mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement.
</p>
<div v-if="showMore">
<v-row no-gutters>
<v-col cols="6" class="text-center pa-0">
<v-img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png" @click="openCarousel(0)" class="image-full"></v-img>
</v-col>
<v-col cols="6" class="text-center pa-0">
<v-img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png" @click="openCarousel(1)" class="image-full"></v-img>
</v-col>
</v-row>
<p class="text-justify pa-10" style="font-size: 1em; margin-bottom: -25px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- Card core Video/image & text --> <p class="text-justify pa-10" style="font-size: 1em;">
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<v-container> </p>
<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>
<!-- Date --> <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
<v-row class="text-right"> src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
<v-col> allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date"> allowfullscreen></iframe>
24-04-2024
</h1>
</v-col>
</v-row>
<p class="text-justify pa-10" style="font-size: 1em;">
<p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
présenter </p>
mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la
suite,
je
partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à
travers
le
Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de
mon
agence
créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
personnelle,
"Guillaume aime", où je partage tout ce qui me passionne.</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; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
</div> </div>
<!-- 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-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire"></v-text-field>
<v-row>
<v-col class="text-right" style="margin-right: 25px">
<v-btn variant="plain" @click="toggleShowMore" class="text-body-2" style="margin-bottom: 10px; font-weight: bold">
{{ showMore ? 'AFFICHER MOINS' : 'AFFICHER PLUS' }}
</v-btn>
</v-col>
</v-row>
</v-card> </v-card>
</v-container> </v-container>
</v-col> </v-col>
<v-dialog v-model="carouselVisible" max-width="600px">
<v-carousel v-model="currentImage">
<v-carousel-item v-for="(image, index) in images" :key="index">
<v-img :src="image"></v-img>
</v-carousel-item>
</v-carousel>
</v-dialog>
</v-row> </v-row>
<!-- Card youtube balado -->
</v-col> </v-col>
<!-- "Large-Monitor-RightCol" Donation --> <!-- "Large-Monitor-RightCol" Donation -->
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up> <v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down">
<v-row> <v-row>
<v-col> <v-col>
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;"> <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
@@ -294,7 +291,7 @@
<v-card style="border-radius: 20px;"> <v-card style="border-radius: 20px;">
<v-container> <v-container>
<v-row class="mb-0" <v-row class="mb-0"
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;"> 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;"> <v-card-title class="text-soutiens" style="margin-top: 15px;">
JE SOUTIENS! JE SOUTIENS!
</v-card-title> </v-card-title>
@@ -313,12 +310,11 @@
</v-row> </v-row>
<!-- "Mobile" Donation --> <!-- "Mobile" Donation -->
<v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down <v-col class="hidden-md-and-up sticky-bottom-label"
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 -->
<v-btn @click="drawerbottom = !drawerbottom" elevation="0" <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens "> style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
JE SOUTIENS JE SOUTIENS
</v-btn> </v-btn>
</v-col> </v-col>
@@ -332,7 +328,6 @@
<StripePayment></StripePayment> <StripePayment></StripePayment>
</v-container> </v-container>
</v-bottom-sheet> </v-bottom-sheet>
</div> </div>
</template> </template>
@@ -346,17 +341,39 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
import PostContentMenu from '@/layouts/PostContentMenu.vue'; import PostContentMenu from '@/layouts/PostContentMenu.vue';
import { ref } from 'vue'; import { ref } from 'vue';
import StripePayment from '../StripePayment.vue'; import StripePayment from '../StripePayment.vue';
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png'; let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png'; let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
let name = 'Guillaume Mousseau' let name = 'Guillaume Mousseau';
let title = 'Créateur de contenus' let title = 'Créateur de contenus';
let drawerbottom = ref(false) let drawerbottom = ref(false);
let navigationItems = [ let navigationItems = [
{ icon: 'mdi-home', text: 'Accueil', link: 'home' }, { icon: 'mdi-home', text: 'Accueil', link: 'home' },
{ icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' }, { icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' }, { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
]; ];
// Ajouter la variable réactive pour gérer l'état d'affichage du contenu
let showMore = ref(false);
// Ajouter les variables et méthodes pour gérer le carrousel
let carouselVisible = ref(false);
let currentImage = ref(0);
let images = [
'/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
'/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg',
// Ajoutez ici toutes les images que vous souhaitez afficher dans le carrousel
];
const toggleShowMore = () => {
showMore.value = !showMore.value;
};
const openCarousel = (index) => {
currentImage.value = index;
carouselVisible.value = true;
};
</script> </script>
<style scoped> <style scoped>
@@ -364,7 +381,6 @@ let navigationItems = [
filter: invert(1); filter: invert(1);
} }
.Hutopy-menu-sticky-mobile { .Hutopy-menu-sticky-mobile {
position: sticky; position: sticky;
top: 0; top: 0;
@@ -490,8 +506,6 @@ let navigationItems = [
font-size: .8rem; font-size: .8rem;
} }
.social-container { .social-container {
background-color: #006d77; background-color: #006d77;
border-top-right-radius: 30px; border-top-right-radius: 30px;
@@ -897,9 +911,6 @@ let navigationItems = [
} }
@media (min-width: 2560px) { @media (min-width: 2560px) {
.mobile-profile-picture-creator { .mobile-profile-picture-creator {
transform: scale(1.5) translateY(25%) translateX(-20px); transform: scale(1.5) translateY(25%) translateX(-20px);
} }
@@ -914,7 +925,6 @@ let navigationItems = [
.name-info { .name-info {
font-size: 2rem; font-size: 2rem;
} }
.social-container { .social-container {
@@ -938,4 +948,4 @@ let navigationItems = [
margin-left: 40px; margin-left: 40px;
} }
} }
</style> </style>

11
src/views/main/CreatorMainPage.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<default-layout></default-layout>
<banner></banner>
<FooterLayout></FooterLayout>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import Banner from '@/views/main/CreatorViewComponents/Banner.vue';
</script>

21
src/views/main/CreatorViewComponents/Banner.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<v-container fluid>
<!-- Bannière Pc -->
<v-row style="margin-top: -15px; position: relative; z-index: 0; width: 100vw;">
<v-col cols="12" class="pa-0">
<v-img class="profile-banner" max-height="375" max-width="100%" :src="imageSrc" cover
style="width: 100%; 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>
</v-container>
</template>
<script setup>
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
</script>