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

#30 Merge fix + some more image location change

Browse Source
This commit is contained in:
Dominic Villemure
2024-04-21 14:14:40 -04:00
parent 5d37cefec1 722265b5c1
commit 0b5988fd4c
30 changed files with 1393 additions and 1866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/main/ContactView.vue
View File

@@ -4,14 +4,13 @@
<div class="hutopy-backgroud-color">
<div class="hidden-xs flex-col items-center page-margin">
<v-container>
<!-- Banner -->
<v-row class="text-center align-center row-between-logo-text home-row">
<v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
<img class="hutopy-header-image" src="../../../public/images/hutopy.png">
<v-col class="ml-0 text-left ">
<!-- Home btn -->
<RouterLink :to="{ name: 'home' }">
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
</RouterLink>
@@ -19,34 +18,33 @@
</v-row>
</v-container>
<!-- Home btn -->
<v-container class="row-between-logo-text">
<v-row>
<v-spacer></v-spacer>
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
<v-row>
<!-- Contact image -->
<v-col>
<img class="contact-image" src="../../../public/images/contactpage/contactpicture.png">
</v-col>
<!-- Form Information -->
<v-col class="row-joinus">
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
<v-text-field label="Nom ($)" style="color: rgb(107, 0, 101);"></v-text-field>
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
<v-text-field label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
<v-text-field label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<RouterLink :to="{ name: 'home' }">
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
class="mt-4 send-btn" block>Envoyez </v-btn>
</RouterLink>
</v-col>
</v-row>
<!-- Text about joining us -->
<v-row>
<v-container>
<p class="h3-text paragraph">Rejoignez l'aventure
@@ -80,30 +78,38 @@
</v-container>
</v-row>
</v-col>
<!-- Offset -->
<v-spacer></v-spacer>
</v-row>
</v-container>
</div>
<!-- Mobile low dimensions -->
<div class="hidden-sm-and-up flex-col items-center justify-center">
<!-- Offset -->
<v-spacer style="margin-bottom: 25px;"></v-spacer>
<v-img src="../../../images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
<!-- Contact image -->
<v-img src="../../../public/images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>
<!-- Title -->
<v-row class="labelgroup">
<v-col cols="12">
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
</v-col>
</v-row>
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
<v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
<!-- Form Information -->
<v-text-field class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
<v-text-field class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
label="Pourquoi voulez-vous participer au développement" placeholder="Écrivez votre message ici" rows="3"
label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
auto-grow></v-textarea>
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
label="Avez-vous déjà des comptes sur les réseaux sociaux ?" placeholder="Écrivez votre message ici" rows="3"
label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
auto-grow></v-textarea>
<RouterLink :to="{ name: 'home' }">
<v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
@@ -112,6 +118,8 @@
</v-btn>
</RouterLink>
<!-- Text about joining us -->
<p class="h3-text paragraph">Rejoignez l'aventure
Hutopy : une
invitation à façonner l'avenir de la création.
@@ -142,9 +150,7 @@
dans le ciel de notre utopie partagée.
</p>
</div>
<FooterLayout></FooterLayout>
</div>
</template>

16
src/views/main/CreatorFeed.vue
View File

@@ -1,16 +0,0 @@
<v-container>
<v-container>
<div>
<img src="../../../public/images/guillaimeaime.png" class="banner-creator "
style="width: 98.25%; height: 100%; object-fit: cover; border-top-left-radius: 50px; border-top-right-radius: 50px;">
</div>
<v-countainer >
<v-card style="width: 100%; height: 600px;">
</v-card>
</v-countainer>
</v-container>
</v-container>

776
src/views/main/CreatorFolio copy.vue
View File

@@ -1,776 +0,0 @@
<template>
<DefaultLayout></DefaultLayout>
<!-- PC-->
<div class="md:flex hidden items-center justify-between flex-col" style="background-color: #f4f4f4;">
<!-- Banner + Profile-->
<div style="margin-top: -1.6%;">
<v-row>
<v-col cols="12">
<img src="../../../public/images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
</v-col>
</v-row>
</div>
<v-container class="pa-0" style="margin-left: 1%; margin: 0;">
<v-row no-gutters class="justify-center">
<!-- Left menu -->
<v-col cols="2" class="mx-0" style="min-width: 300px;">
<v-container style="position: sticky; top: 0;">
<v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
<v-col>
</v-col>
<v-row style="align-items: start;">
<RouterLink :to="{ name: 'home' }">
<v-btn size="x-large"
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 5%; transform: scale(1.3);"
elevation="0">
<v-icon left class="icon-size">mdi-home</v-icon>
<div style="margin-left: 10%;"> Accueil</div>
</v-btn>
</RouterLink>
</v-row>
<v-row style="align-items: start;">
<RouterLink :to="{ name: 'contact' }">
<v-btn size="x-large"
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
elevation="0">
<v-icon left class="icon-size">mdi-account-plus</v-icon>
<div>Ajouter des amis</div>
</v-btn>
</RouterLink>
</v-row>
<v-row style="align-items: start;">
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="x-large"
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
elevation="0">
<v-icon left class="icon-size">mdi-newspaper</v-icon>
<div style="margin-left: 10%; ">Contenu</div>
</v-btn>
</RouterLink>
</v-row>
<v-row style="align-items: start;">
<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>
<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: 25pxo; 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: 25pxo; 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-container>
</v-col>
<!-- center menu -->
<v-col cols="7" class="mx-0">
<v-container style="min-width: 800px ;">
<v-col>
<v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
style="margin-left: 0%; width: 25%;"></v-img>
</v-col>
<v-row>
<v-col cols="2">
</v-col>
<v-col style="margin-top: -18%;">
<v-container
style="border-top: 4px solid #a40e79; border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; background-color: #cc6f91;border-top-right-radius: 25px;">
<v-row>
<v-col cols="0">
</v-col>
<v-col cols="6">
<h1 style="margin-bottom: -1%; font-size: 2rem; color: white;">Guillaume Mousseau </h1>
</v-col>
<v-col cols="3">
<v-row>
<v-img style="margin-top: 3%; height: 50px;" src="../../../images/facebookicon.png"></v-img>
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/instawhite.png"></v-img>
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/xicon.png"></v-img>
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/tiktok.png"></v-img>
</v-row>
</v-col>
</v-row>
</v-container>
<v-container
style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; margin-bottom: -2%; background-color: #aedcde;">
<v-row>
<v-col cols="0">
</v-col>
<v-col cols="6">
<h1 style="margin-bottom: -5%; font-size: 2rem; color: white;">Créateur de contenus</h1>
</v-col>
<v-col cols="3">
<v-row>
<v-img style="margin-top: 3%; height: 50px;" src="../../../images/icons/messenger.png"></v-img>
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/bookmark.png"></v-img>
<v-img style="margin-top: 2%; height: 50px;" src="../../../images/icons/share.png"></v-img>
</v-row>
</v-col>
</v-row>
</v-container>
<v-container
style="border-right: 4px solid #a40e79; margin: 0; margin-left: -10%; background-color: #aedcde;border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;">
<v-row>
<v-col>
</v-col>
<v-col cols="10">
<v-expansion-panels>
<v-col cols="12" offset="-1">
<v-expansion-panel
style=" margin-left: 2%; font-size: 1.2rem; background-color: #0baab2; color: white;"
:key="i"
text="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?"
title="À propos"></v-expansion-panel>
</v-col>
</v-expansion-panels>
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</v-container>
<v-card class="flow-menu m-0"
style="background-color: #f4f4f4; max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
<v-col>
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
PODCAST #01</h1>
</v-col>
<v-col cols="2">
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
10-03-2024</h1>
</v-col>
<v-col style="margin-right: 4%;" class="text-right">
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
</v-col>
</div>
<div
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
<v-container>
<iframe style="margin-left: 2.1%;" width=96% height="650px"
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
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>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<v-row style="z-index: 200;">
<v-row class="fill-height">
<!-- Bouton Like -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
elevation="0">
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
J'aime
</v-btn>
</v-col>
<!-- Bouton Dislike -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
elevation="0">
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
Je n'aime pas
</v-btn>
</v-col>
<!-- Bouton Partager -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
elevation="0">
<v-icon left class="icon-size">mdi-share-variant</v-icon>
Partagez
</v-btn>
</v-col>
</v-row>
</v-row>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Champ Commentaire -->
<v-text-field style="margin-left: 2%;"
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
</v-container>
</div>
</v-card>
<v-card class="flow-menu m-0"
style="max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%; ">
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
<v-col>
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
MA MISSION</h1>
</v-col>
<v-col cols="2">
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
10-03-2024</h1>
</v-col>
<v-col style="margin-right: 4%;" class="text-right">
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
</v-col>
</div>
<div
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
<v-container>
<v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">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>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<v-row style="z-index: 200;">
<v-row class="fill-height">
<!-- Bouton Like -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
elevation="0">
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
J'aime
</v-btn>
</v-col>
<!-- Bouton Dislike -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
elevation="0">
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
Je n'aime pas
</v-btn>
</v-col>
<!-- Bouton Partager -->
<v-col cols="3" class="text-center">
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
elevation="0">
<v-icon left class="icon-size">mdi-share-variant</v-icon>
Partagez
</v-btn>
</v-col>
</v-row>
</v-row>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Champ Commentaire -->
<v-text-field style="margin-left: 2%;"
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
</v-container>
</div>
</v-card>
</v-col>
<!-- Right menu -->
<v-col cols="2" class="mx-0">
<!-- tips menu -->
<v-card
style="margin-left: 15%; background-color: #f4f4f4; min-width: 300px; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
<v-container class="text-center d-flex align-center justify-center"
style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
<h1 style="font-size: 2rem; color: white; margin: 0; text-orientation: upright;">
Je soutiens!
</h1>
</v-container>
<v-row style=" margin-top: 30px; ">
<v-col cols="6" style="background-color: #f4f4f4">
<v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
<v-form @submit.prevent>
<v-text-field label="Montant ($)"
style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
</v-form>
</v-sheet>
</v-col>
<v-col cols="6" class="d-flex align-center">
<v-btn
style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
class="mt-4" block>Envoyez</v-btn>
</v-col>
</v-row>
<v-row>
<v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
</v-row>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
<!-- DonateMobile-->
<div class="md:hidden flex flex-col items-center justify-center">
<v-container style="width: 105%;">
<v-card class="vcard-descriptions-mobile">
<h1 class="h1profilemobile">Ma mission</h1>
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
<v-img src="../../../images/guillaumepublication.jpg"></v-img>
<p class="text-justify pa-4" style="font-size: 1.2em">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>
</v-card>
<SimpleVideoCard> </SimpleVideoCard>
</v-container>
<v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
<h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
<v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
don</v-btn>
</v-container>
</div>
<FooterLayout></FooterLayout>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
</script>
<script>
export default {
data() {
return {
overlayMenu: false,
};
},
};
</script>
<style scoped>
/*Banner */
.image-container {
width: 100%;
overflow: hidden;
}
.image-banner {
width: 90%;
/* 100% de la largeur de la fenêtre visible */
margin: 0;
/* Enlève les marges par défaut */
z-index: -1000;
/* Met l'image en arrière-plan */
}
/*Profile */
.image-profile {
border-radius: 50%;
margin-left: 15%;
margin-top: -7%;
border: 4px solid white;
z-index: 200;
}
.description-text {
font-size: 1.3rem;
text-align: left;
align-items: center;
color: white
}
/*LeftMenu */
.icon-size {
font-size: 30px;
/* ou toute autre taille de votre choix */
}
.sticky-column {
position: sticky;
top: 0;
}
.profile-picture-position {
margin-top: 25;
}
.label-paiement-color {
color: rgba(163, 14, 121, 0.5);
/* Couleur du texte (utilisez la couleur souhaitée) */
background-color: rgba(255, 255, 255, 0.2);
/* Couleur de fond */
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
/* Ombre */
}
.card-header {
background-color: rgba(255, 255, 255, 0.6);
/* Couleur de l'en-tête */
padding: 10px;
/* Marge intérieure */
display: flex;
/* Utilisation de flexbox */
justify-content: space-between;
/* Alignement des éléments sur l'en-tête */
margin: 0 -24px 0;
}
.tips-h1 {
text-align: center;
font-weight: bold;
color: rgba(163, 14, 121, 0.85);
/* Couleur du texte (utilisez la couleur souhaitée) */
font-size: 25px;
}
.test-color {
background-color: rgba(163, 14, 121, 0.1);
}
.label-tips {
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
}
.menu-creator-position {
margin-top: -25px;
position: relative;
}
.flow-menu {
background-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.smooth-picture {
border-radius: 13px;
}
.column-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.column-creatorFolio {
flex-grow: 1.2;
/* La colonne centrale peut agrandir de 20% */
flex-shrink: 0;
/* Empêche la colonne centrale de rétrécir */
flex-basis: auto;
/* La colonne centrale prend sa taille de base */
text-align: center;
width: 100%;
}
.column-creatorFolio-side {
flex-grow: 0;
/* Les colonnes latérales ne peuvent pas agrandir */
flex-shrink: 0;
/* Empêche les colonnes latérales de rétrécir */
flex-basis: 200px;
/* Largeur fixe pour les colonnes latérales */
text-align: center;
}
.rgb-background {
background-color: rgba(163, 14, 121, 0.1);
width: 300px;
padding: 20px;
}
.top-aligned-column {
display: flex;
justify-content: center;
align-items: flex-start;
}
.center-column {
text-align: center;
}
.column {
flex: 1;
}
</style>

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

@@ -1,7 +1,6 @@
<template>
<div style="background-color: #f4f4f4;">
<DefaultLayout></DefaultLayout>
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
<!-- "Mobile -->
<v-row class="fluid hidden-md-and-up social-mobile-container"
@@ -17,11 +16,16 @@
</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">
@@ -29,25 +33,25 @@
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>
@@ -55,22 +59,20 @@
</v-col>
</v-row>
<v-row class="social-container-mobile social-container-mobile-spacer">
<!-- 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">
@@ -84,7 +86,6 @@
</v-container>
</v-row>
</v-container>
<!-- "Mobile-End" -->
<!-- Bannière Pc -->
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
@@ -103,7 +104,7 @@
<!-- "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-row class="Hutopy-menu-sticky-mobile">
<v-spacer></v-spacer>
<v-col>
<v-container style=" overflow-y: hidden;">
@@ -156,7 +157,6 @@
</v-col>
</v-row>
</v-col>
<v-col>
<v-row>
<v-col cols="8">
@@ -171,7 +171,6 @@
</v-row>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="justify-center">
@@ -202,24 +201,17 @@
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 -->
@@ -227,6 +219,7 @@
<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">
@@ -241,6 +234,7 @@
<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%;">
@@ -262,6 +256,8 @@
</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;">
@@ -270,7 +266,6 @@
<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>
@@ -280,9 +275,10 @@
</v-container>
</v-container>
<!-- "Card youtube" -->
<!-- Card youtube -->
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col>
@@ -291,9 +287,9 @@
</v-col>
<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: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn>
</v-btn> (a intégrer) -->
</v-col>
</v-row>
<v-row>
@@ -302,6 +298,7 @@
</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>
@@ -317,7 +314,6 @@
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
@@ -334,58 +330,6 @@
</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 -->
@@ -402,14 +346,12 @@
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>
@@ -422,15 +364,15 @@
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>
<!-- 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>
@@ -441,12 +383,9 @@
</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">
@@ -456,15 +395,19 @@
</div>
</template>
<!-- Your custom dialog content -->
<!-- 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;">
@@ -480,10 +423,10 @@
<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">
@@ -493,11 +436,9 @@
</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">
@@ -507,28 +448,30 @@
</div>
</template>
<!-- Your custom dialog content -->
<!-- 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">
@@ -538,10 +481,8 @@
</v-row>
</v-container>
</v-card>
</v-dialog>
</div>
</template>
@@ -550,12 +491,12 @@ 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
@@ -564,20 +505,14 @@ let navigationItems = [
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
];
let tools = [
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
]
let items = [
{ icon: "icon", text: "text" },
{ icon: "icon2", text: "text2" },
]
</script>
<style scoped>
.Hutopy-menu-sticky {
.invert-color {
filter: invert(1);
}
.Hutopy-menu-sticky-mobile {
position: sticky;
top: 0;
bottom: 0;
@@ -605,7 +540,6 @@ let items = [
z-index: 1000;
}
.text-soutiens {
margin-bottom: 15px;
color: white;
@@ -617,7 +551,6 @@ let items = [
.name-info {
margin-top: -10px;
margin-left: 15%;
}
.occupation-info {
@@ -626,22 +559,10 @@ let items = [
}
.name-info-mobile {
margin-left: 22px;
font-size: 1.3rem
}
.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;
}
@@ -650,44 +571,11 @@ let items = [
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;
@@ -699,29 +587,12 @@ let items = [
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%;
@@ -746,15 +617,10 @@ let items = [
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)
}
@@ -776,8 +642,6 @@ let items = [
font-size: 1.7rem;
font-weight: 600;
color: white;
}
.social-container2 {
@@ -790,23 +654,14 @@ let items = [
.social-container-mobile {
background-color: #006d77;
font-size: 1.4rem;
font-weight: 600;
color: white;
z-index: 1000;
margin: auto;
/* Centre verticalement */
text-align: center;
/* Centre horizontalement */
}
.social-container2-mobile {
background-color: #0baab2;
z-index: 1000;
@@ -819,8 +674,6 @@ let items = [
background-color: #0baab2;
}
.mini-profile-picture {
border-radius: 100px;
}
@@ -832,18 +685,12 @@ let items = [
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;
}
@@ -852,21 +699,17 @@ let items = [
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
}
@@ -875,19 +718,11 @@ let items = [
margin-top: 25px;
}
.v-navigation-drawer {
max-height: 100vh;
/* 80% de la hauteur de l'écran */
}
@media (min-width: 150px) and (max-width: 474px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(-30%) translateX(0%);
}
@@ -898,14 +733,10 @@ let items = [
margin-top: 0px;
margin-left: 20px;
}
}
@media (min-width: 475px) and (max-width: 599px) {
.socialicons-mobile {
width: 35px;
max-width: 100px;
@@ -913,21 +744,16 @@ let items = [
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;
}
@@ -936,19 +762,12 @@ let items = [
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%);
}
@@ -977,26 +796,19 @@ let items = [
.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;
@@ -1013,11 +825,9 @@ let items = [
.card-youtube {
min-height: 425px;
}
}
@media (min-width: 960px) and (max-width: 1280px) {
.middle-col {
margin-left: -30px;
}
@@ -1025,10 +835,8 @@ let items = [
.text-soutiens {
font-size: 1.2rem;
letter-spacing: 5px;
}
.profile-container {
margin-top: -185px;
min-width: 480px
@@ -1041,16 +849,12 @@ let items = [
.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;
@@ -1058,7 +862,6 @@ let items = [
}
.occupation-info {
margin-left: 40px;
margin-top: -8px
}
@@ -1069,9 +872,7 @@ let items = [
max-height: 40px
}
.social-container2 {
margin-left: 50px;
min-width: 250px;
max-height: 35px
@@ -1083,10 +884,8 @@ let items = [
margin-top: 15px;
margin-left: 25px;
}
}
@media (min-width: 1280px) and (max-width: 1600px) {
.text-soutiens {
font-size: 1.3rem;
@@ -1099,7 +898,6 @@ let items = [
.profile-container {
margin-top: -180px;
}
.card-youtube {
@@ -1114,7 +912,6 @@ let items = [
min-width: 350px;
}
.name-info {
font-size: 1.2rem;
margin-left: 20px;
@@ -1127,15 +924,11 @@ let items = [
max-height: 40px
}
.occupation-info {
margin-left: 70px;
margin-top: -8px
}
.social-container2 {
margin-left: 40px;
@@ -1149,10 +942,8 @@ let items = [
margin-top: 15px;
margin-left: 25px;
}
}
@media (min-width: 1600px) and (max-width: 1919px) {
.text-soutiens {
font-size: 1.3rem;
@@ -1165,7 +956,6 @@ let items = [
.profile-container {
margin-top: -171px;
}
.card-youtube {
@@ -1184,8 +974,6 @@ let items = [
font-size: 1.5rem;
margin-top: -4px;
margin-left: 35px;
}
.occupation-info {
@@ -1194,29 +982,19 @@ let items = [
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 {
@@ -1239,7 +1017,6 @@ let items = [
.social-container {
margin-left: 100px;
}
.occupation-info {
@@ -1248,13 +1025,9 @@ let items = [
margin-top: -4px
}
.social-container2 {
margin-left: 30px;
min-width: 360px;
}
.socialicons {
@@ -1263,8 +1036,6 @@ let items = [
margin-top: 13px;
margin-left: 40px;
}
}
@media (min-width: 2560px) {
@@ -1272,7 +1043,6 @@ let items = [
transform: scale(1.5) translateY(25%) translateX(-20px);
}
.card-youtube {
min-height: 380px;
}
@@ -1306,7 +1076,5 @@ let items = [
margin-top: 15px;
margin-left: 40px;
}
}
</style>

64
src/views/main/CreatorFolioLeftMenu.vue
View File

@@ -1,64 +0,0 @@
<template>
<v-card
class="mx-auto"
width="256"
>
<v-layout>
<v-navigation-drawer absolute permanent>
<h1>Test</h1>
<v-divider></v-divider>
<v-list
:lines="false"
density="compact"
nav
>
<v-list-item
v-for="(item, i) in items"
:key="i"
:value="item"
color="primary"
>
<template v-slot:prepend>
<v-icon :icon="item.icon"></v-icon>
</template>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-main style="height: 354px;"></v-main>
</v-layout>
</v-card>
</template>
<script setup>
const items = [
{ text: 'My Files', icon: 'mdi-folder' },
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
{ text: 'Starred', icon: 'mdi-star' },
{ text: 'Recent', icon: 'mdi-history' },
{ text: 'Offline', icon: 'mdi-check-circle' },
{ text: 'Uploads', icon: 'mdi-upload' },
{ text: 'Backups', icon: 'mdi-cloud-upload' },
]
</script>
<script>
export default {
data: () => ({
items: [
{ text: 'My Files', icon: 'mdi-folder' },
{ text: 'Shared with me', icon: 'mdi-account-multiple' },
{ text: 'Starred', icon: 'mdi-star' },
{ text: 'Recent', icon: 'mdi-history' },
{ text: 'Offline', icon: 'mdi-check-circle' },
{ text: 'Uploads', icon: 'mdi-upload' },
{ text: 'Backups', icon: 'mdi-cloud-upload' },
],
}),
}
</script>

248
src/views/main/HomeView.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style="background-color: #F4F4F4;">
<DefaultLayout></DefaultLayout>
<!--PC -->
<!--PC ---------------------------------------------------------------------------------------------->
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons -->
@@ -65,6 +65,7 @@
</v-card>
</v-hover>
</v-col>
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
@@ -86,6 +87,7 @@
</v-card>
</v-hover>
</v-col>
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
@@ -110,7 +112,6 @@
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
@@ -120,9 +121,12 @@
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
<v-row justify="center">
<v-col cols="6" md="7" lg="6">
<!-- Subtitle : Votre Hutopy -->
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
<!-- Your Hutopy text-->
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
@@ -132,6 +136,7 @@
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
la créativité.
</p>
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
@@ -151,7 +156,7 @@
</v-col>
</v-col>
<!-- 4 pictures -->
<v-col cols="6" md="5" lg="6">
<v-row justify="center" class="votre-hutopy-img">
<v-col cols="6" sm="12" md="12" lg="6">
@@ -176,18 +181,18 @@
</v-container>
<!-- They are on the Hutopy section -->
<v-row style="margin-top: 40px; margin-bottom: 60px;">
<v-spacer></v-spacer>
<!-- Subtitle :Ils sont sur Hutopy -->
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
<h1 style=" margin-bottom: 70px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
<v-spacer></v-spacer>
<v-col>
<!-- Account links -->
<v-row justify="center" class="profile-images">
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
@@ -204,132 +209,154 @@
<img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
</v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
</v-col>
<v-spacer></v-spacer>
</v-row>
</div>
<!-- Mobile -->
<!-- Mobile ---------------------------------------------------------------------------------------->
<div class="md:hidden flex flex-col items-center justify-center">
<div>
<!--Banner -->
<img src="../../../public/images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
<!-- Créer -->
<v-row style="margin-top: 30px;" align="center">
<v-col cols="6">
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
src="../../../images/homepage/creer.png"></v-img>
</v-col>
<v-col>
<p style="margin: 20px; text-align: justify;" class="center-vertical">Libérez votre créativité sur Hutopy,
où chaque idée trouve sa
place et chaque
créateur détient la clé
d'un monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
</v-col>
</v-row>
<img src="../../../public/images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
style="margin-top: -100px;">
<!-- Partager -->
<v-row align="center">
<v-col>
<p style=" margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
Hutopy, en partageant
votre vision, votre
talent et vos histoires.
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
rêves dans un cercle vertueux de créativité et d'inspiration.</p>
</v-col>
<v-col cols="6">
<v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
src="../../../images/homepage/partager.png"></v-img>
</v-col>
</v-row>
<div>
<v-card-text>
<div>
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
par son engagement envers une expérience numérique enrichissante, offrant une interface
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
</div>
<!-- Inspirer -->
<v-row align="center">
<v-col cols="6">
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
src="../../../images/homepage/inspirer.png"></v-img>
</v-col>
<v-col>
<p style="margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
Hutopy, en partageant
votre vision, votre
talent et vos histoires.
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
rêves dans un cercle vertueux de créativité et d'inspiration.</p>
</v-col>
</v-row>
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
<router-link :to="{ name: 'contact' }">
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
CONNECTEZ-VOUS
</v-btn>
</router-link>
<!-- Votre Hutopy : Title -->
<v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
</v-card-text>
</div>
<!-- Votre Hutopy : Text -->
<v-row align="center">
<v-col cols="11" style="margin: 4%;">
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
la créativité.
</p>
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
prendre vie.
</p>
</v-col>
</v-row>
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
</v-container>
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
une
expérience
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
<!-- 4 pictures -->
<v-row style="margin-left: 15px; margin-right: 15px;">
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/microphone.png"></v-img>
</v-col>
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/grinding.png"></v-img>
</v-col>
</v-row>
<v-row style="margin-left: 15px; margin-right: 15px;">
<v-col style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlarmy.png"></v-img>
</v-col>
<v-col style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlvr.png"></v-img>
</v-col>
</v-row>
<!-- Inscription Btn -->
<v-container align="center">
<RouterLink :to="{ name: 'contact' }">
<v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
elevation="4">
Inscription
</v-btn>
</RouterLink>
</v-container>
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
partageant votre vision,
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
les
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
d'inspiration.</p>
<!-- They are on the Hutopy section -->
<h1
style="margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 3rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
</v-container>
<v-container>
<v-card-text>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
</div>
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
</h1>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
</div>
<div class="d-flex justify-content-center"
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
<v-col>
<v-row justify="center" class="profile-images">
<v-col cols="8">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
<img src="../../../public/images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
</v-col>
<v-col cols="8">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
<img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image ">
</router-link>
</v-col>
<v-col cols="8">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
<img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
</div>
</v-card-text>
</v-container>
</v-col>
</v-row>
</v-col>
</div>
</div>
<!-- Back-end tools -->
<v-btn variant="outlined" @click="callBackend()">
Get items
</v-btn>
<v-snackbar v-model="errorNoAccessSnackBar">
Vous n'etes pas connecter !
<template v-slot:actions>
@@ -359,10 +386,8 @@ import { useClient } from "@/plugins/api.js";
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const client = useClient();
let itemList = ref([]);
let errorNoAccessSnackBar = ref(false);
@@ -380,14 +405,16 @@ const goToLoginPage = () => {
router.push('/login');
}
</script>
<style src="../../cssstyle/index.css"></style>
<style src="../../cssstyle/homeView.css"></style>
<style scoped>
.center-vertical {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.layer1-backgroundmobile {
background-color: rgba(163, 14, 121, 0.1);
border-radius: 20px;
@@ -401,7 +428,6 @@ const goToLoginPage = () => {
.container-spacer {
margin-bottom: 50px;
/* Augmente l'espace entre les v-containers */
}
.profile-images {
@@ -429,7 +455,6 @@ const goToLoginPage = () => {
width: 100%;
height: 100%;
background-color: rgba(163, 14, 121, 0.80);
/* Voile noir avec une opacité de 0.5 */
display: flex;
text-align: left;
font-size: 1.5rem;
@@ -440,6 +465,7 @@ const goToLoginPage = () => {
.banner-image {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
margin-top: 60px;
}
.image-container:hover .overlay {
@@ -455,17 +481,14 @@ const goToLoginPage = () => {
.custom-container {
position: relative;
max-width: 100vw;
/* Limiter la largeur de la v-container à la largeur de l'écran */
}
.v-card {
max-width: calc(100% - 20px);
/* Limiter la largeur de la v-card à la largeur des trois photos avec un espacement de 10px de chaque côté */
}
.v-card-imagecontainerpos {
margin-top: 55px;
/* Déplace l'image vers le bas de 10 pixels */
border-radius: 8px;
}
@@ -607,11 +630,8 @@ body {
.créer-profiter-inspirer-row {
margin-top: -60px;
}
.banner-homepage {
transform: scale(1.0)
}
@@ -624,7 +644,6 @@ body {
.votre-hutopy-img {
margin-top: 65px;
}
}
@media (min-width: 2561px) {
@@ -652,6 +671,5 @@ body {
.votre-hutopy-img {
margin-top: -10px;
}
}
</style>

43
src/views/main/ProjectRoadmap.vue
View File

@@ -1,43 +0,0 @@
<template>
<DefaultLayout></DefaultLayout>
<v-container>
<v-img class="roadmap-image" src="../../../images/roadmapbanner.png"></v-img>
</v-container>
<FooterLayout></FooterLayout>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
</script>
<style>
.footer-donate {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
.footer-donate-container {
background-color: rgb(255, 255, 255);
}
.roadmap-image {
border-radius: 35px;
width: 50%;
/* reduces width by 50% */
height: auto;
/* maintains aspect ratio */
}
</style>

35
src/views/main/YourProfile.vue
View File

@@ -13,7 +13,7 @@
</v-row>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
<v-col cols="12" class="text-right">
<v-btn style="margin-right: 3%" @click="editBannerImage"> <v-icon>mdi-pencil</v-icon></v-btn>
<v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
</v-col>
</v-row>
@@ -33,7 +33,7 @@
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
</v-row>
<v-col>
<v-btn style="margin-top: -30px; margin-left: " @click="editProfilePicture">
<v-btn style="margin-top: -30px;">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</v-col>
@@ -44,10 +44,11 @@
<p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
<v-form @submit.prevent="updateProfile">
<v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
<v-text-field v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
<v-text-field v-model="description" label="Description" :readonly="!isEditing"></v-text-field>
<v-form>
<v-text-field v-model="firstName" label="Prénom"></v-text-field>
<v-text-field v-model="lastName" label="Nom"></v-text-field>
<v-text-field v-model="titre" label="Titre"></v-text-field>
<v-text-field v-model="description" label="Description"></v-text-field>
</v-form>
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
@@ -55,8 +56,8 @@
<router-link :to="{ name: 'creatorfolio' }" class="">
<v-btn style="margin-right: 20px;">Retour</v-btn>
</router-link>
<v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
<v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
<v-btn>Éditer</v-btn>
</v-col>
</v-col>
@@ -78,24 +79,6 @@ import { ref } from 'vue';
const profilePictureUrl = ref('../../../images/guillaume.png');
const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
let userName = 'Guillaume Mousseau';
const firstName = ref('Votre prénom');
const lastName = ref('Votre nom');
const description = ref('Votre description');
const password = ref('Votre mot de passe');
const isEditing = ref(false);
const editProfilePicture = () => {
// Mettez ici la logique pour changer la photo de profil
};
const editBannerImage = () => {
// Mettez ici la logique pour changer la bannière de profil
};
const updateProfile = () => {
// Mettez ici la logique pour mettre à jour le profil
};
</script>
<style>