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

Merged PR 27: Modification - Fiche profile, Modification homeview et creatorview

Browse Source 
-Fiche profile de a à z
-Modification de quelques éléments dans homeview
-Creatorview ajout de deux modales très simple succes / decline.
This commit is contained in:
Pascal Marchesseault
2024-04-15 02:53:56 +00:00
parent 4b1989587c 9d3228c087
commit d812b15c8f
5 changed files with 599 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/anonymelarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

47
src/layouts/DefaultLayout.vue
View File

@@ -3,20 +3,35 @@
<body style="background-color: #f4f4f4;">
<!-- Version pour ordinateur -->
<v-card style="z-index: 9000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-col cols="auto" class="d-flex align-end justify-end">
<router-link :to="{ name: 'yourprofile' }">
<v-row class="d-flex align-center">
<v-menu :location="location">
<template v-slot:activator="{ props }">
<div class="d-flex align-center" v-bind="attrs" v-on="on">
<img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
<h1 class="mb-0 text-h5">ANONYME</h1>
</v-row>
</router-link>
</v-col>
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
ANONYME
</v-btn>
</div>
</template>
<v-list style="padding: 0;"> <!-- Supprimer le padding pour que les boutons occupent toute la largeur -->
<v-list-item>
<router-link :to="{ name: 'yourprofile' }">
<v-btn class="full-width-btn" flat>Mon profile</v-btn>
</router-link>
</v-list-item>
<v-list-item>
<v-btn class="full-width-btn" flat>Déconnexion</v-btn>
</v-list-item>
</v-list>
</v-menu>
</v-row>
</v-container>
</v-card>
@@ -108,6 +123,18 @@ export default {
</script>
<style scoped>
.full-width-btn {
width: 100%;
text-align: left;
padding-left: 24px;
padding-right: 24px;
z-index: 1001;
}
.mini-profile-picture {
border-radius: 100px;
}

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

@@ -124,8 +124,8 @@
<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-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>
@@ -137,7 +137,7 @@
<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>
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
</div>
<v-card-text class="text-h1 pa-12">
<v-row>
@@ -182,12 +182,12 @@
<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>
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>
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>
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>
@@ -196,10 +196,10 @@
<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>
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>
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
<v-col cols="5" class="text-truncate">Good Job</v-col>
</v-row>
@@ -210,13 +210,7 @@
</v-list>
</v-col>
<!-- Log-out -->
<v-col cols="12" class="px-0 logout-button">
<v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
<v-icon left class="mr-4">mdi-logout</v-icon>
Déconnexion
</v-btn>
</v-col>
</v-container>
</v-col>
@@ -453,14 +447,111 @@
<FooterLayout></FooterLayout>
<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>
<!-- Your custom dialog content -->
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
<v-container>
<v-row justify="center">
<v-col cols="12" class="text-center">
<v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
</v-col>
</v-row>
<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>
<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>
<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>
<!-- Your custom dialog content -->
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
<v-container>
<v-row justify="center">
<v-col cols="12" class="text-center">
<v-icon color="black" size="250">mdi-cancel</v-icon>
</v-col>
</v-row>
<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>
<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';
@@ -469,9 +560,9 @@ 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' }
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
{ 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' },
@@ -479,8 +570,8 @@ let tools = [
let items = [
{icon: "icon", text: "text"},
{icon: "icon2", text: "text2"},
{ icon: "icon", text: "text" },
{ icon: "icon2", text: "text2" },
]
</script>

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

@@ -5,270 +5,220 @@
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons -->
<v-container class="d-flex justify-center align-center">
<div style="margin-left: 20%;">
<v-row>
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }">
<v-btn size="large"
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
light elevation="0">
Connexion
</v-btn>
</RouterLink>
<RouterLink :to="{ name: 'contact' }">
<v-btn size="large"
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="0">
Inscription
</v-btn>
</RouterLink>
</v-row>
</div>
<v-container class="d-flex justify-center align-center container-spacer header-container">
<v-row justify="center" align="center">
<v-col></v-col>
<v-col cols="5" xl="4" xxl="4">
<v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
</v-col>
<v-col>
<v-row>
<RouterLink :to="{ name: 'login' }">
<v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
Connexion
</v-btn>
</RouterLink>
<RouterLink :to="{ name: 'contact' }">
<v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
Inscription
</v-btn>
</RouterLink>
</v-row>
</v-col>
</v-row>
</v-container>
<div>
<v-container style="margin: 0; padding: 0;">
<v-row style="justify-content: center;">
<img src="../../../images/homepage/bannierehomepage.png"
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
</v-row>
</v-container>
</div>
<!-- Colonnes Créer Partager Inspirer-->
<v-container>
<!--Header -->
<v-container class="container-spacer">
<v-row>
<!-- vide de gauche -->
<v-col cols="1" class="ml-4 ml-sm-0">
</v-col>
<!-- Colonne Centre -->
<v-col cols="9" style="margin-left: 4%;">
<!-- Créer Profiter Inspirer -->
<div class="d-flex justify-center align-center">
<div>
<div style="margin-top: 40px;">
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
<v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/creer.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
CRÉER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">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-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
<div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/partager.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text"
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
PROFITER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">
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>
</v-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
<div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/inspirer.png"
style="border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text"
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
INSPIRER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">
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-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
</v-container>
</div>
</div>
</div>
</v-col>
<!-- vide de droite -->
<v-col cols="2" class="mr-4 mr-sm-0">
<v-spacer></v-spacer>
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
<v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
style="border-radius: 20px;"></v-img>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-container>
<!-- Description D'hutopy -->
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
<v-row class="justify-center">
<v-col cols="6">
<v-col cols="11" class="d-flex justify-center align-center">
<v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col>
<v-col cols="auto" md="10">
<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
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 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
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 cols="auto" class="d-flex justify-center align-center">
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
elevation="0">
Inscription
</v-btn>
</RouterLink>
<!-- Créer Profiter Inspirer -->
<v-container class="container-spacer">
<v-row class="d-flex justify-center creer-profiter-inspirer-row">
<v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
<v-row justify="center" align="center" class="créer-profiter-inspirer-row">
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
<v-img src="../../../images/homepage/creer.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">CRÉER
</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">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-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
</v-col>
</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">
<v-img src="../../../images/homepage/partager.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
PROFITER
</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">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>
</v-card>
</v-container>
</v-overlay>
</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">
<v-img src="../../../images/homepage/inspirer.png"
style="border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
INSPIRER
</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">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-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
</v-col>
</v-row>
</v-col>
<!-- Colonne de droite -->
<v-col cols="3">
<v-img src="../../../images/homepage/grinding.png"
style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></v-img>
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
</v-col>
<v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
<v-img src="../../../images/homepage/girlvr.png"
style="border-radius: 30px; min-width: 250px; max-height: 350;"></v-img>
</v-row>
</v-container>
<!-- Votre Hutopy -->
<v-container class="container-spacer">
<v-row justify="center">
<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">
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
<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
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 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
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 cols="12" class="text-center">
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
elevation="0">
Inscription
</v-btn>
</RouterLink>
</v-col>
</v-col>
<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">
<v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
class="hidden-md-and-down" hidden-and-down></v-img>
</v-col>
<v-col cols="6" sm="12" md="12" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
</v-col>
<v-col cols="6" sm="12" md="6" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
</v-col>
<v-col cols="6" sm="6" md="6" lg="6">
<v-img style="border-radius: 30px;" class="d-none d-md-block"
src="../../../images/homepage/girlvr.png"></v-img>
</v-col>
</v-row>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
<!-- ILS SONT SUR HUTOPY -->
<v-container style="max-width: 1500px;">
<v-card-text>
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
<v-row style="margin-top: 40px; margin-bottom: 60px;">
<v-spacer></v-spacer>
<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-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
<v-spacer></v-spacer>
<v-col>
<v-row justify="center" class="profile-images">
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image ">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image ">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-container>
</v-card-text>
</v-container>
<!-- Fin Description D'hutopy -->
</div>
@@ -277,7 +227,8 @@
<div>
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
style="margin-top: -100px;">
<div>
<v-card-text>
@@ -392,18 +343,19 @@
</v-snackbar>
<v-list style="background-color: #F4F4F4;" lines="one">
<v-list-item v-for=" item in itemList " :key="item" :title="item.firstName" :subtitle="item.lastName"></v-list-item>
<v-list-item v-for=" item in itemList " :key="item" :title="item.firstName"
:subtitle="item.lastName"></v-list-item>
</v-list>
<FooterLayout></FooterLayout>
</div>
s
</template>
<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import {useClient} from "@/plugins/api.js";
import { useClient } from "@/plugins/api.js";
import { ref } from 'vue';
import { useRouter } from 'vue-router';
@@ -436,116 +388,37 @@ const goToLoginPage = () => {
<style src="../../cssstyle/homeView.css"></style>
<style scoped>
.phototexte {
margin-left: 10px;
margin-right: 10px;
}
.layer1-background {
background-color: rgba(163, 14, 121, 0.03);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.layer1-backgroundmobile {
background-color: rgba(163, 14, 121, 0.1);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.layer2-backgroundmobile {
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.layer2-background {
background-color: rgba(107, 0, 101, 0.02);
border-radius: 20px;
}
.v-container {
.container-spacer {
margin-bottom: 50px;
/* Augmente l'espace entre les v-containers */
}
.h2ilssontsurutopy {
font-weight: bold;
font-size: 2rem;
margin-bottom: 100px;
/* Ajoute de l'espace en bas du titre */
margin-top: 25px;
}
.h2ilssontsurutopytitle {
color: rgba(107, 0, 101, 0.85);
}
.profile-images {
gap: 90px;
/* Espace entre les images */
margin-top: 50px;
/* Ajoute de l'espace en haut des images */
gap: 15px;
transform: scale(.92);
}
.profile-image {
width: auto;
/* Largeur des images */
/* Hauteur des images */
border-radius: 35px;
/* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
.image-wrapper {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 30px;
}
.image-container {
position: relative;
width: 23vw;
/* Utilisation de 20% de la largeur de la vue */
margin: 5px 8px;
}
.image {
width: 100%;
height: auto;
border-radius: 8px;
}
.v-card-text h2 {
margin-bottom: 20px;
/* Ajoute de l'espace en bas du titre h2 */
font-size: 2rem;
/* Taille du texte */
font-weight: bold;
/* Texte en gras */
color: rgba(163, 14, 121, 0.85);
/* Couleur du texte (utilisez la couleur souhaitée) */
}
.v-card-text p {
font-size: 1rem;
/* Taille du texte */
}
.textjustify {
text-align: justify;
}
.overlay {
@@ -560,17 +433,13 @@ const goToLoginPage = () => {
display: flex;
text-align: left;
font-size: 1.5rem;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.banner-image {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
/* Ombre douce */
}
.image-container:hover .overlay {
@@ -587,8 +456,6 @@ const goToLoginPage = () => {
position: relative;
max-width: 100vw;
/* Limiter la largeur de la v-container à la largeur de l'écran */
}
.v-card {
@@ -602,61 +469,189 @@ const goToLoginPage = () => {
border-radius: 8px;
}
.overlay p.image-text {
display: none;
}
.overlay:hover p.image-text {
display: block;
}
body {
background-color: #F4F4F4;
}
.votre_hutopy_fontsize {
font-size: .2em;
}
@media (max-width: 475px) {
@media (max-width: 600px) {
.votre_hutopy_fontsize {
font-size: 0.55em;
}
}
@media (min-width: 476px) and (max-width: 640px) {
@media (min-width: 601px) and (max-width: 889px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
font-size: 1.06em;
}
.créer-profiter-inspirer-row {
margin-left: -120px;
margin-top: -120px
}
.card-size {
transform: scale(.7);
}
.banner-homepage {
transform: scale(1.19)
}
.votre-hutopy-img {
margin-top: -30px;
}
.header-container {
margin-top: 30px;
}
}
@media (min-width: 641px) and (max-width: 768px) {
@media (min-width: 890px) and (max-width: 960px) {
.header-container {
margin-top: 30px;
}
.votre_hutopy_fontsize {
font-size: 0.9em;
font-size: 1.2em;
}
.card-size {
transform: scale(.75);
}
.créer-profiter-inspirer-row {
margin-left: -80px;
margin-top: -130px
}
.banner-homepage {
transform: scale(1.07)
}
.votre-hutopy-img {
margin-top: -40px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 1025px) and (max-width: 1536px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 1537px) and (max-width: 1920px) {
@media (min-width: 961px) and (max-width: 1280px) {
.votre_hutopy_fontsize {
font-size: 1.1em;
}
}
@media (min-width: 1921px) {
.votre_hutopy_fontsize {
font-size: 1.5em;
.banner-homepage {
transform: scale(1.06)
}
.card-size {
transform: scale(.90);
}
.créer-profiter-inspirer-row {
margin-left: -55px;
margin-top: -90px
}
.in-between-image {
margin-left: -100px;
}
.profile-images {
gap: 15px;
transform: scale(.72);
}
.votre-hutopy-img {
margin-top: -30px;
}
}
@media (min-width: 1281px) and (max-width: 1920px) {
.votre_hutopy_fontsize {
font-size: 1.2em;
}
.card-size {
transform: scale(1);
}
.banner-homepage {
transform: scale(1.03)
}
.créer-profiter-inspirer-row {
margin-left: -25px;
margin-top: -70px
}
.profile-images {
gap: 15px;
transform: scale(.64);
}
.votre-hutopy-img {
margin-top: 65px;
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.votre_hutopy_fontsize {
font-size: 1.2em;
}
.créer-profiter-inspirer-row {
margin-top: -60px;
}
.banner-homepage {
transform: scale(1.0)
}
.profile-images {
gap: 15px;
transform: scale(.90);
}
.votre-hutopy-img {
margin-top: 65px;
}
}
@media (min-width: 2561px) {
.votre_hutopy_fontsize {
font-size: 1.2em;
}
.créer-profiter-inspirer-row {
margin-top: -50px;
}
.card-size {
transform: scale(.98);
}
.banner-homepage {
transform: scale(.98)
}
.profile-images {
gap: 15px;
transform: scale(.978);
}
.votre-hutopy-img {
margin-top: -10px;
}
}
</style>

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

@@ -1,24 +1,116 @@
<template>
<DefaultLayout></DefaultLayout>
<main class="top-aligned-column">
<body style="background-color:#f4f4f4">
<DefaultLayout></DefaultLayout>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
<v-row justify="center">
<v-col cols="12">
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row style="background-color: #6b0065; height: 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-col>
</v-row>
<v-row justify="center">
</v-row>
<div class="column">
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
<v-container>
<v-row>
<v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
<v-row style="margin-bottom: 20px;">
<v-spacer></v-spacer>
<v-col style="margin-top: -70px;">
<v-row>
<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-icon>mdi-pencil</v-icon>
</v-btn>
</v-col>
</div>
</v-col>
<v-spacer></v-spacer>
</v-row>
<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>
<div class="center-column column">
<p>YourProfile</p>
</div>
<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>
<div class="column">
</v-form>
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
</div>
</main>
<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-col>
</v-col>
</v-row>
</v-container>
</v-container>
<FooterLayout></FooterLayout>
</body>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
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>
.your-profile-picture {
width: 300px;
border-radius: 40px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.row-shadow {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.col-shadow {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
</style>