Merged PR 27: Modification - Fiche profile, Modification homeview et creatorview
-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
BIN
images/anonymelarge.png
Normal file
BIN
images/anonymelarge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@@ -3,20 +3,35 @@
|
|||||||
<body style="background-color: #f4f4f4;">
|
<body style="background-color: #f4f4f4;">
|
||||||
|
|
||||||
<!-- Version pour ordinateur -->
|
<!-- 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-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-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
|
||||||
|
|
||||||
|
<v-menu :location="location">
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
<v-col cols="auto" class="d-flex align-end justify-end">
|
<div class="d-flex align-center" v-bind="attrs" v-on="on">
|
||||||
<router-link :to="{ name: 'yourprofile' }">
|
|
||||||
<v-row class="d-flex align-center">
|
|
||||||
<img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
|
<img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
|
||||||
<h1 class="mb-0 text-h5">ANONYME</h1>
|
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
|
||||||
</v-row>
|
ANONYME
|
||||||
</router-link>
|
</v-btn>
|
||||||
</v-col>
|
</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-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-card>
|
</v-card>
|
||||||
@@ -108,6 +123,18 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.full-width-btn {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
padding-left: 24px;
|
||||||
|
|
||||||
|
padding-right: 24px;
|
||||||
|
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
.mini-profile-picture {
|
.mini-profile-picture {
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -124,8 +124,8 @@
|
|||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-dialog transition="dialog-top-transition" width="auto">
|
<v-dialog transition="dialog-top-transition" width="auto">
|
||||||
<template v-slot:activator="{ props: activatorProps }">
|
<template v-slot:activator="{ props: activatorProps }">
|
||||||
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0"
|
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
|
||||||
outlined="false">
|
elevation="0" outlined="false">
|
||||||
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
||||||
<p @click="isActive.value = false">Bourse</p>
|
<p @click="isActive.value = false">Bourse</p>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
@@ -137,7 +137,7 @@
|
|||||||
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
||||||
<v-icon left size="48">mdi-wallet</v-icon>
|
<v-icon left size="48">mdi-wallet</v-icon>
|
||||||
<v-toolbar title="PORTEFEUILLE"
|
<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>
|
</div>
|
||||||
<v-card-text class="text-h1 pa-12">
|
<v-card-text class="text-h1 pa-12">
|
||||||
<v-row>
|
<v-row>
|
||||||
@@ -182,12 +182,12 @@
|
|||||||
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
|
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col style="margin-right: -2%;" cols="1"
|
<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"
|
<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="2" class="text-truncate text-center font-weight-bold">Date</v-col>
|
||||||
<v-col cols="3" class="text-truncate text-center font-weight-bold"
|
<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-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-card>
|
</v-card>
|
||||||
@@ -196,10 +196,10 @@
|
|||||||
<v-row>
|
<v-row>
|
||||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
<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"
|
<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="2" class="text-truncate">20-10-2025</v-col>
|
||||||
<v-col cols="3" class="text-truncate"
|
<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-col cols="5" class="text-truncate">Good Job</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
@@ -210,13 +210,7 @@
|
|||||||
</v-list>
|
</v-list>
|
||||||
</v-col>
|
</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-container>
|
||||||
|
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -453,14 +447,111 @@
|
|||||||
|
|
||||||
|
|
||||||
<FooterLayout></FooterLayout>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
import StripePayment from '../StripePayment.vue';
|
import StripePayment from '../StripePayment.vue';
|
||||||
|
const accepted = ref(false);
|
||||||
|
const decline = ref(false);
|
||||||
|
|
||||||
let imageSrc = '../../../images/guillaimeaime3x.png';
|
let imageSrc = '../../../images/guillaimeaime3x.png';
|
||||||
let profilePicture = '../../../images/guillaume.png';
|
let profilePicture = '../../../images/guillaume.png';
|
||||||
@@ -469,9 +560,9 @@ let name = 'Guillaume Mousseau'
|
|||||||
let title = 'Créateur de contenus'
|
let title = 'Créateur de contenus'
|
||||||
let drawerbottom = false
|
let drawerbottom = false
|
||||||
let navigationItems = [
|
let navigationItems = [
|
||||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||||
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
|
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
|
||||||
{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
|
{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
|
||||||
];
|
];
|
||||||
let tools = [
|
let tools = [
|
||||||
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
|
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
|
||||||
@@ -479,8 +570,8 @@ let tools = [
|
|||||||
|
|
||||||
|
|
||||||
let items = [
|
let items = [
|
||||||
{icon: "icon", text: "text"},
|
{ icon: "icon", text: "text" },
|
||||||
{icon: "icon2", text: "text2"},
|
{ icon: "icon2", text: "text2" },
|
||||||
]
|
]
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -5,270 +5,220 @@
|
|||||||
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
|
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
|
||||||
|
|
||||||
<!--Logo & bouttons -->
|
<!--Logo & bouttons -->
|
||||||
<v-container class="d-flex justify-center align-center">
|
<v-container class="d-flex justify-center align-center container-spacer header-container">
|
||||||
<div style="margin-left: 20%;">
|
<v-row justify="center" align="center">
|
||||||
<v-row>
|
<v-col></v-col>
|
||||||
|
<v-col cols="5" xl="4" xxl="4">
|
||||||
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
|
<v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
|
||||||
<RouterLink :to="{ name: 'login' }">
|
</v-col>
|
||||||
<v-btn size="large"
|
<v-col>
|
||||||
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
|
<v-row>
|
||||||
light elevation="0">
|
<RouterLink :to="{ name: 'login' }">
|
||||||
Connexion
|
<v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
|
||||||
</v-btn>
|
Connexion
|
||||||
</RouterLink>
|
</v-btn>
|
||||||
<RouterLink :to="{ name: 'contact' }">
|
</RouterLink>
|
||||||
<v-btn size="large"
|
<RouterLink :to="{ name: 'contact' }">
|
||||||
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
|
<v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
|
||||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
Inscription
|
||||||
Inscription
|
</v-btn>
|
||||||
</v-btn>
|
</RouterLink>
|
||||||
</RouterLink>
|
</v-row>
|
||||||
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
<div>
|
<!--Header -->
|
||||||
<v-container style="margin: 0; padding: 0;">
|
<v-container class="container-spacer">
|
||||||
<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>
|
|
||||||
<v-row>
|
<v-row>
|
||||||
<!-- vide de gauche -->
|
<v-spacer></v-spacer>
|
||||||
<v-col cols="1" class="ml-4 ml-sm-0">
|
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
|
||||||
</v-col>
|
<v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
|
||||||
<!-- Colonne Centre -->
|
style="border-radius: 20px;"></v-img>
|
||||||
<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-col>
|
</v-col>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
<!-- Description D'hutopy -->
|
<!-- Créer Profiter Inspirer -->
|
||||||
|
<v-container class="container-spacer">
|
||||||
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
|
<v-row class="d-flex justify-center creer-profiter-inspirer-row">
|
||||||
<v-row class="justify-center">
|
<v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
|
||||||
<v-col cols="6">
|
<v-row justify="center" align="center" class="créer-profiter-inspirer-row">
|
||||||
<v-col cols="11" class="d-flex justify-center align-center">
|
<v-col cols="4" sm="4" md="4">
|
||||||
<v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
|
<v-hover v-slot="{ isHovering, props }">
|
||||||
</v-col>
|
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
|
||||||
<v-col cols="auto" md="10">
|
<v-img src="../../../images/homepage/creer.png"
|
||||||
<p class="text-center text-justify votre_hutopy_fontsize"
|
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||||||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
|
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
|
||||||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
<v-container>
|
||||||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
|
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">CRÉER
|
||||||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
</h3>
|
||||||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur Hutopy,
|
||||||
la créativité.
|
où
|
||||||
</p>
|
chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
|
||||||
<p class="text-center text-justify votre_hutopy_fontsize"
|
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||||||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
|
</v-card>
|
||||||
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
|
</v-container>
|
||||||
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
|
</v-overlay>
|
||||||
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
|
</v-card>
|
||||||
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
|
</v-hover>
|
||||||
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>
|
|
||||||
</v-col>
|
</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>
|
</v-col>
|
||||||
|
|
||||||
<!-- Colonne de droite -->
|
</v-row>
|
||||||
<v-col cols="3">
|
</v-container>
|
||||||
<v-img src="../../../images/homepage/grinding.png"
|
|
||||||
style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></v-img>
|
<!-- Votre Hutopy -->
|
||||||
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
|
<v-container class="container-spacer">
|
||||||
</v-col>
|
<v-row justify="center">
|
||||||
<v-col cols="3" style>
|
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
|
||||||
<v-img src="../../../images/homepage/microphone.png"
|
<v-row justify="center">
|
||||||
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
|
<v-col cols="6" md="7" lg="6">
|
||||||
<v-img src="../../../images/homepage/girlvr.png"
|
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
|
||||||
style="border-radius: 30px; min-width: 250px; max-height: 350;"></v-img>
|
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-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
<!-- ILS SONT SUR HUTOPY -->
|
|
||||||
<v-container style="max-width: 1500px;">
|
|
||||||
<v-card-text>
|
<v-row style="margin-top: 40px; margin-bottom: 60px;">
|
||||||
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
|
<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>
|
Ils sont sur Hutopy.</h1>
|
||||||
|
|
||||||
|
<v-spacer></v-spacer>
|
||||||
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
|
<v-col>
|
||||||
|
|
||||||
|
|
||||||
<v-row justify="center" class="profile-images">
|
<v-row justify="center" class="profile-images">
|
||||||
|
|
||||||
<v-col>
|
<v-col>
|
||||||
<router-link :to="{ name: 'creatorfolio' }">
|
<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>
|
</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>
|
||||||
|
|
||||||
<v-col>
|
<v-col>
|
||||||
<router-link :to="{ name: 'creatorfolio' }">
|
<router-link :to="{ name: 'creatorfolio' }">
|
||||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||||
|
|
||||||
</router-link>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
<v-col>
|
<v-col>
|
||||||
<router-link :to="{ name: 'creatorfolio' }">
|
<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>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
</v-row>
|
</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>
|
</div>
|
||||||
|
|
||||||
@@ -277,7 +227,8 @@
|
|||||||
<div>
|
<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>
|
<div>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
@@ -392,18 +343,19 @@
|
|||||||
</v-snackbar>
|
</v-snackbar>
|
||||||
|
|
||||||
<v-list style="background-color: #F4F4F4;" lines="one">
|
<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>
|
</v-list>
|
||||||
<FooterLayout></FooterLayout>
|
<FooterLayout></FooterLayout>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
s
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script async setup>
|
<script async setup>
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
import {useClient} from "@/plugins/api.js";
|
import { useClient } from "@/plugins/api.js";
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
@@ -436,116 +388,37 @@ const goToLoginPage = () => {
|
|||||||
<style src="../../cssstyle/homeView.css"></style>
|
<style src="../../cssstyle/homeView.css"></style>
|
||||||
|
|
||||||
<style scoped>
|
<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 {
|
.layer1-backgroundmobile {
|
||||||
background-color: rgba(163, 14, 121, 0.1);
|
background-color: rgba(163, 14, 121, 0.1);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer2-backgroundmobile {
|
.layer2-backgroundmobile {
|
||||||
|
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-spacer {
|
||||||
|
|
||||||
.layer2-background {
|
|
||||||
background-color: rgba(107, 0, 101, 0.02);
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-container {
|
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
/* Augmente l'espace entre les v-containers */
|
/* 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 {
|
.profile-images {
|
||||||
gap: 90px;
|
gap: 15px;
|
||||||
/* Espace entre les images */
|
transform: scale(.92);
|
||||||
margin-top: 50px;
|
|
||||||
/* Ajoute de l'espace en haut des images */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-image {
|
.profile-image {
|
||||||
width: auto;
|
width: auto;
|
||||||
/* Largeur des images */
|
|
||||||
|
|
||||||
/* Hauteur des images */
|
|
||||||
border-radius: 35px;
|
border-radius: 35px;
|
||||||
/* Coins arrondis */
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
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 {
|
.image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 8px;
|
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 {
|
.overlay {
|
||||||
@@ -560,17 +433,13 @@ const goToLoginPage = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease-in-out;
|
transition: opacity 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-image {
|
.banner-image {
|
||||||
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||||||
/* Ombre douce */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-container:hover .overlay {
|
.image-container:hover .overlay {
|
||||||
@@ -587,8 +456,6 @@ const goToLoginPage = () => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
/* Limiter la largeur de la v-container à la largeur de l'écran */
|
/* Limiter la largeur de la v-container à la largeur de l'écran */
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-card {
|
.v-card {
|
||||||
@@ -602,61 +469,189 @@ const goToLoginPage = () => {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay p.image-text {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay:hover p.image-text {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #F4F4F4;
|
background-color: #F4F4F4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.votre_hutopy_fontsize {
|
|
||||||
font-size: .2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 475px) {
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
.votre_hutopy_fontsize {
|
.votre_hutopy_fontsize {
|
||||||
font-size: 0.55em;
|
font-size: 0.55em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 476px) and (max-width: 640px) {
|
|
||||||
|
@media (min-width: 601px) and (max-width: 889px) {
|
||||||
.votre_hutopy_fontsize {
|
.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 {
|
.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) {
|
@media (min-width: 961px) and (max-width: 1280px) {
|
||||||
.votre_hutopy_fontsize {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1537px) and (max-width: 1920px) {
|
|
||||||
.votre_hutopy_fontsize {
|
.votre_hutopy_fontsize {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1921px) {
|
.banner-homepage {
|
||||||
.votre_hutopy_fontsize {
|
transform: scale(1.06)
|
||||||
font-size: 1.5em;
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
@@ -1,24 +1,116 @@
|
|||||||
<template>
|
<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">
|
<v-form @submit.prevent="updateProfile">
|
||||||
<p>YourProfile</p>
|
<v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
|
||||||
</div>
|
<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>
|
<router-link :to="{ name: 'creatorfolio' }" class="">
|
||||||
</main>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
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>
|
</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>
|
||||||
|
|||||||
Reference in New Issue
Block a user