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

Merged PR 5: Ui Updated - Modification de LoginView.vue et ContactView.vue

Browse Source 
Ui Updated - Modification de LoginView.vue et ContactView.vue
This commit is contained in:
Dominic Villemure
2024-03-16 16:21:33 +00:00
parent db29b20e42 5380626ec9
commit a298f155b9
20 changed files with 360 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/contactpage/contactpicture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 741 KiB

BIN
images/facebookiconblackpink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
images/homepage/bannierehomepage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
images/homepage/creer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 998 KiB

After

Width:  |  Height:  |  Size: 852 KiB

BIN
images/homepage/girlarmy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/homepage/girlvr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
images/homepage/grinding.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 724 KiB

BIN
images/homepage/inspirer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 979 KiB

After

Width:  |  Height:  |  Size: 975 KiB

BIN
images/homepage/microphone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 791 KiB

BIN
images/homepage/partager.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
images/homepage/profiter.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/homepage/votrehutopy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
images/instagramblackpink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/loginpage/loginhutopy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/xblackpink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

31
src/layouts/FooterLayout.vue
View File

@@ -1,28 +1,29 @@
<template> <template>
<div style="background-color: rgb(107, 0, 101, 1); min-height: 10vh; display: flex; flex-direction: column;"> <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;">
<v-container style="background-color: rgb(107, 0, 101, 1);"> <v-container style="background-color: #f4f4f4">
<v-row justify="center" style="margin-top: 30px;"> <v-row justify="center" style="margin-top: 30px;">
<v-row cols="auto" class="d-flex justify-center"> <v-row cols="auto" class="d-flex justify-center align-center">
<img src="../../../images/hutopy.png" style="height: 70px; margin-right: 2%;">
<a href="https://www.facebook.com/profile.php?id=61556819217561"><img src="../../../images/facebookicon.png" <a href="https://www.facebook.com/profile.php?id=61556819217561"><img
alt="Description image 2" style="width: 50px; height: 50px; margin-right: 40px;"></a> src="../../../images/facebookiconblackpink.png" alt="Description image 2"
<a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instafacebook.png" style="width: 50px; height: 50px; margin-right: 40px; "></a>
alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px;"></a> <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instagramblackpink.png"
alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px; "></a>
<router-link :to="{ name: 'home' }"> <router-link :to="{ name: 'home' }">
<img src="../../../images/ChevronBlanc.png" alt="Description image 1" <img src="../../../images/xblackpink.png" alt="Description image 1"
style="width: 50px; height: 50px; margin-right: 40px;"> style="width: 50px; height: 50px; margin-right: 40px; "></router-link>
</router-link>
</v-row> </v-row>
</v-row> </v-row>
</v-container> </v-container>
<v-container class="text-center" style="flex-grow: 1;"> <v-container class="text-center" style="flex-grow: 1;">
<v-btn v-for="link in links" :key="link" class="mx-2" color="white" rounded="xl" variant="text"> <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
{{ link }} {{ link }}
</v-btn> </v-btn>
</v-container> </v-container>
<v-container class="text-white text-center"> <v-container class="text-black text-center">
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong> {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</v-container> </v-container>
@@ -52,9 +53,9 @@ export default {
<style> <style>
.custom-footer { .custom-footer {
background-color: rgb(107, 0, 101, 1);
padding: 10px; padding: 10px;
/* Ajoute un rembourrage intérieur de 10px autour du contenu du footer */ /* Ajoute un rembourrage intérieur de 10px autour du contenu du footer * 107, 0, 101, 1/
margin: 0; margin: 0;
/* Réinitialise les marges à zéro */ /* Réinitialise les marges à zéro */
} }

67
src/views/LoginView.vue
View File

@@ -1,48 +1,63 @@
<template> <template>
<v-row align="center" justify="center"> <v-container style="margin-top: 5%;">
<v-col cols="4"> <v-row>
<v-container> <v-col cols="9">
<v-card> <img style="border-radius: 20px; max-width: 90%;" src="../../../images/loginpage/loginhutopy.png">
<v-toolbar color="primary" :dark="true"> </v-col>
<v-toolbar-title>Login</v-toolbar-title> <v-col style="margin-left: -5%; margin-top: 6%;">
</v-toolbar> <h1 class="text-center display-6" style="font-size: 5rem;">Connexion</h1>
<h2 class="text-center display-3" style="font-size: 1.5rem; margin-bottom: 20px;">Comment souhaitez-vous
vous connecter à
votre compte?</h2>
<v-card-text> <v-card-text>
<v-form> <v-form>
<v-text-field prepend-icon="person" type="text" v-model="user.email" label="E-mail"></v-text-field> <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"
<v-text-field class="text-start"></v-text-field>
prepend-icon="lock" <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
type="password" label="Mot de passe" class="text-start"></v-text-field>
v-model="user.password"
label="password"
></v-text-field>
</v-form> </v-form>
<v-snackbar v-model="errorSnackBar"> <v-snackbar v-model="errorSnackBar">
Email ou mot de passe invalide. Email ou mot de passe invalide.
<template v-slot:actions> <template v-slot:actions>
<v-btn color="red" variant="text" @click="errorSnackBar = false"> <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
Fermer
</v-btn>
</template> </template>
</v-snackbar> </v-snackbar>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<v-btn color="primary" @click="login">Login</v-btn> <router-link :to="{ name: 'home' }">
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
</router-link>
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
</v-card-actions> </v-card-actions>
</v-card> <div class="text-center">
<v-btn color="red" @click="goHome()">Continuer sans se connecter</v-btn>
</v-container> <h2 class="text-center display-3" style="font-size: 1.5rem; margin-top: 6%; margin-bottom: 20px;">
</v-col> Pas encore
</v-row> inscrit?</h2>
<router-link :to="{ name: 'contact' }">
<v-btn color="#6b0065"
style="height: 60px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
</router-link>
</div>
</v-col>
</v-row>
</v-container>
<FooterLayout></FooterLayout>
</template> </template>
<script setup> <script setup>
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from '@/plugins/clientPlugin'; import { useClient } from '@/plugins/clientPlugin';
import { useAuthStore } from '@/plugins/store/authStore'; import { useAuthStore } from '@/plugins/store/authStore';
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const authStore = useAuthStore(); const authStore = useAuthStore();
const client = useClient(); const client = useClient();
const router = useRouter() const router = useRouter()
@@ -54,7 +69,9 @@ const goHome = () => {
router.push('/'); router.push('/');
} }
async function login(){
async function login() {
try { try {
await authStore.login(client, user.value.email, user.value.password) await authStore.login(client, user.value.email, user.value.password)
router.push('/'); router.push('/');

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

@@ -2,69 +2,80 @@
<!--PC --> <!--PC -->
<div class="md:flex hidden items-center justify-between flex-col">
<v-container style="margin-bottom: -.1%; margin-top: 2%;">
<v-row justify="center">
<v-col style="margin-left: 4%;" cols="6">
<img src="../../../images/hutopyblack.png" height="100px">
</v-col>
</v-row>
<v-row style="margin-bottom: -4%;" justify="end">
<v-col cols="auto">
<router-link :to="{ name: 'home' }">
<v-btn size="x-large" style="min-width: 200px; max-width: 200px;" elevation="0">
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
<v-container class="d-flex justify-center align-center">
<div style="margin-left: 20%; margin-bottom: 3%;">
<v-row>
<img style=" max-width: 60%;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'home' }">
<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">
Accueil Accueil
</v-btn> </v-btn>
</router-link> </RouterLink>
</v-col>
</v-row>
</v-row>
</div>
</v-container> </v-container>
<img src="../../../images/homepage/bannierenousjoindre.png" class="banner-image" alt="Bannière"
style="min-height: 500px; margin-top: 3%;">
<main class="top-aligned-column grid grid-cols-3 gap-4"> <main class="top-aligned-column grid grid-cols-3 gap-4">
<div class="column"></div> <div class="column"></div>
<div class="center-column" style="width: 100vw; margin: auto;"> <div class="center-column" style="width: 100vw; margin: auto;">
<h1 style="font-size: 3rem; margin-top: 7%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
développement de </h1>
<div class="grid grid-cols-2 gap-4" style="margin-bottom: 10%;"> <div class="grid grid-cols-2 gap-4" style="margin-bottom: 5%;">
<div class="rectangular-image h-full flex justify-center items-center"> <div class="rectangular-image h-full flex justify-center items-center">
<img src="../../../images/homepage/love.png" alt="Bannière" class="contactpicture" style="float: right;"> <img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
style="width: 700px; margin-top: 14%; height: auto; float: right;">
</div> </div>
<div> <div>
<h1 style="font-size: 3rem; margin-top: -.5%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
développement de </h1>
<p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;"> <p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">Rejoignez l'aventure Hutopy : une
Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et invitation à façonner l'avenir de la création.
nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde. inspirer.
Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
idées.
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
l'innovation.
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
dans le ciel de notre utopie partagée.
</p> </p>
<v-text-field label="Nom ($)" <v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
<v-text-field label="Courriel ($)" <v-text-field label="Courriel ($)"
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field> style="color: rgb(107, 0, 101); background-color: #F4F4F4"></v-text-field>
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement" <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> placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
@@ -72,8 +83,11 @@
<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> placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
class="mt-4" block>Envoyez</v-btn> <RouterLink :to="{ name: 'home' }">
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
class="mt-4" block>Envoyez</v-btn>
</RouterLink>
</div> </div>
</div> </div>
</div> </div>
@@ -89,7 +103,7 @@
<div class="md:hidden flex flex-col items-center justify-center"> <div class="md:hidden flex flex-col items-center justify-center">
<DefaultLayout></DefaultLayout> <DefaultLayout></DefaultLayout>
<h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1> <h1 class="h1-inscription-betacolor" style=" margin-bottom: 35px;">Hutopy</h1>
@@ -97,11 +111,23 @@
<img src="../../../images/contactpicturemobile.png" alt="Bannière"> <img src="../../../images/contactpicturemobile.png" alt="Bannière">
</div> </div>
<p class="text-justify pa-4" style="font-size: 1em;"> <p class="text-justify pa-4" style="font-size: 1em;">
Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et Rejoignez l'aventure Hutopy : une invitation à façonner l'avenir de la création.
nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme plateforme,
passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie collective. Ici, votre
rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et inspirer.
utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde. Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un écosystème
florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser votre empreinte,
d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes idées.
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir votre
réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en profession,
d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et l'innovation.
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre numéro
de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite. Votre
aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile dans le ciel de
notre utopie partagée.
</p> </p>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;"> <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
@@ -169,6 +195,7 @@ import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
/* Centrer le texte */ /* Centrer le texte */
margin-top: 20px; margin-top: 20px;
margin-bottom: 5px; margin-bottom: 5px;
color: #24393c;
} }

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

@@ -28,33 +28,40 @@
<v-col cols="2" class="mx-0"> <v-col cols="2" class="mx-0">
<v-container style="position: sticky; top: 0;"> <v-container style="position: sticky; top: 0;">
<v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300" <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> style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
<RouterLink :to="{ name: 'home' }"> <RouterLink :to="{ name: 'home' }">
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0"> <v-btn size="x-large"
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
elevation="0">
<v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon> <v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
Accueil <div style="margin-left: 10%;"> Accueil</div>
</v-btn> </v-btn>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'contact' }"> <RouterLink :to="{ name: 'contact' }">
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0"> <v-btn size="x-large"
<v-icon left class="icon-size">mdi-account-plus</v-icon> style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
Ajouter des amis elevation="0">
<v-icon left class="icon-size" style="margin-left: -1%;">mdi-account-plus</v-icon>
<div style="margin-left: 10%;">Ajouter des amis</div>
</v-btn> </v-btn>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'creatorfolio' }"> <RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0"> <v-btn size="x-large"
<v-icon left class="icon-size" style="margin-left: -75%;">mdi-newspaper</v-icon> style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
Contenu elevation="0">
<v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
<div style="margin-left: 10%;">Contenu</div>
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-container> </v-container>
</v-col> </v-col>
<!-- center menu --> <!-- center menu -->
<v-col cols="7" class="mx-0"> <v-col cols="7" class="mx-0">
@@ -63,25 +70,22 @@
<v-card class="flow-menu m-0" <v-card class="flow-menu m-0"
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;"> style="background-color: #f4f4f4; max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
<div class="card-header"> <!-- Div pour l'en-tête de la carte --> <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
<v-col> <v-col>
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;"> <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
MA MISSION</h1> PODCAST #01</h1>
</v-col> </v-col>
<v-col> <v-col cols="2">
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left"> <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
10-03-2024</h1> 10-03-2024</h1>
</v-col> </v-col>
<v-col style="margin-right: 4%;" class="text-right"> <v-col style="margin-right: 4%;" class="text-right">
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn> style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
</v-col> </v-col>
</div> </div>
@@ -102,28 +106,31 @@
comprises. Et toi, quel est ton objectif pour cette année?</p> comprises. Et toi, quel est ton objectif pour cette année?</p>
<div <div
style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;"> style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div> </div>
<v-row> <v-row style="z-index: 200;">
<v-row class="fill-height"> <v-row class="fill-height">
<!-- Bouton Like --> <!-- Bouton Like -->
<v-col cols="3" class="text-center" style="margin-left: 3%;"> <v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500;" elevation="0"> <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> <v-icon left class="icon-size">mdi-thumb-up</v-icon>
Aime J'aime
</v-btn> </v-btn>
</v-col> </v-col>
<!-- Bouton Dislike --> <!-- Bouton Dislike -->
<v-col cols="3" class="text-center"> <v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0"> <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> <v-icon left class="icon-size">mdi-thumb-down</v-icon>
Je n'aime pas Je n'aime pas
</v-btn> </v-btn>
</v-col> </v-col>
<!-- Bouton Partager --> <!-- Bouton Partager -->
<v-col cols="3" class="text-center"> <v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0"> <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> <v-icon left class="icon-size">mdi-share-variant</v-icon>
Partagez Partagez
</v-btn> </v-btn>
@@ -148,28 +155,23 @@
</div> </div>
</v-card> </v-card>
<v-card class="flow-menu m-0" <v-card class="flow-menu m-0"
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;"> style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
<div class="card-header"> <!-- Div pour l'en-tête de la carte --> <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
<v-col> <v-col>
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;"> <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
MA MISSION</h1> MA MISSION</h1>
</v-col> </v-col>
<v-col> <v-col cols="2">
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left"> <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
10-03-2024</h1> 10-03-2024</h1>
</v-col> </v-col>
<v-col style="margin-right: 4%;" class="text-right"> <v-col style="margin-right: 4%;" class="text-right">
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn> style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
</v-col> </v-col>
</div> </div>
@@ -178,9 +180,8 @@
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;"> style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
<v-container> <v-container>
<v-img <v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>
style="margin-top: -2%; border-top: 6px solid rgb(107, 0, 101); border-bottom: 6px solid rgb(163, 14, 121);"
src="../../../images/guillaumepublication.jpg"></v-img>
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire : <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
@@ -191,28 +192,31 @@
comprises. Et toi, quel est ton objectif pour cette année?</p> comprises. Et toi, quel est ton objectif pour cette année?</p>
<div <div
style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;"> style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div> </div>
<v-row> <v-row style="z-index: 200;">
<v-row class="fill-height"> <v-row class="fill-height">
<!-- Bouton Like --> <!-- Bouton Like -->
<v-col cols="3" class="text-center" style="margin-left: 3%;"> <v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500;" elevation="0"> <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> <v-icon left class="icon-size">mdi-thumb-up</v-icon>
Aime J'aime
</v-btn> </v-btn>
</v-col> </v-col>
<!-- Bouton Dislike --> <!-- Bouton Dislike -->
<v-col cols="3" class="text-center"> <v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0"> <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> <v-icon left class="icon-size">mdi-thumb-down</v-icon>
Je n'aime pas Je n'aime pas
</v-btn> </v-btn>
</v-col> </v-col>
<!-- Bouton Partager --> <!-- Bouton Partager -->
<v-col cols="3" class="text-center"> <v-col cols="3" class="text-center">
<v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0"> <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> <v-icon left class="icon-size">mdi-share-variant</v-icon>
Partagez Partagez
</v-btn> </v-btn>
@@ -238,85 +242,51 @@
</v-card> </v-card>
</v-col> </v-col>
<!-- Right menu --> <!-- Right menu -->
<v-col cols="2" class="mx-0"> <v-col cols="2" class="mx-0">
<!-- Profile menu --> <!-- tips menu -->
<v-card <v-card
style="margin-top: -25%; border-top-left-radius: 25px; border-top-right-radius: 25px; height: auto; max-height: 400; min-width: 200; min-height: 325; position: sticky; top: 0;"> style=" background-color: #f4f4f4; 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" style="background-color: #6b0065; margin-bottom: -10px;"> <v-container class="text-center d-flex align-center justify-center"
<h1 style="font-size:3rem; color: white;"> style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
<h1 style="font-size: 2rem; color: white; margin: 0; text-orientation: upright;">
Je soutiens! Je soutiens!
</h1> </h1>
</v-container> </v-container>
<v-img src="../../../images/guillaume.jpg"></v-img> <v-row style=" margin-top: 30px; ">
<v-col cols="6" style="background-color: #f4f4f4">
<v-container style="background-color: #6b0065; margin-bottom: -1px"> <v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
<h1 style="font-size:1.5rem; color: white;">Guillaume Mousseau</h1>
</v-container>
<v-container style="background-color: #a30e79;">
<h1 style="font-size:1.5rem; color: white;">Créateur de contenus</h1>
</v-container>
<v-expansion-panels style="margin-top: -50px;">
<v-expansion-panel
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-expansion-panels>
<v-row style="margin-top: 20px;">
<v-col cols="6">
<v-sheet class="mx-auto" width="150">
<v-form @submit.prevent> <v-form @submit.prevent>
<v-text-field label="Montant ($)" <v-text-field label="Montant ($)"
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field> style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
</v-form> </v-form>
</v-sheet> </v-sheet>
</v-col> </v-col>
<v-col cols="6"> <v-col cols="6" class="d-flex align-center">
<v-btn <v-btn
style=" margin-left: -15px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;" 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> class="mt-4" block>Envoyez</v-btn>
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-textarea style="color: rgb(107, 0, 101)" label="Votre message" placeholder="Écrivez votre message ici" <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
rows="3" auto-grow></v-textarea> label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
</v-row> </v-row>
<v-container>
<v-row justify="center" style="margin-top: 10px;">
<router-link to="lien_facebook" class="mr-13">
<img src="../../../images/facebook.svg" alt="Facebook" width="40">
</router-link>
<router-link to="lien_tiktok" class="mr-13">
<img src="../../../images/tiktok.svg" alt="TikTok" width="40">
</router-link>
<router-link to="lien_instagram" class="mr-13">
<img src="../../../images/instagram.svg" alt="Instagram" width="40">
</router-link>
<router-link to="lien_x">
<img src="../../../images/x.svg" alt="X" width="40">
</router-link>
</v-row>
</v-container>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>

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

@@ -1,34 +1,49 @@
<template> <template>
<main> <main style="background-color:#F4F4F4 ;">
<!--PC --> <!--PC -->
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 2%;"> <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
<v-container style="margin-bottom: -.1%;"> <v-container class="d-flex justify-center align-center">
<v-row justify="center"> <div style="margin-left: 20%;">
<v-col style="margin-left: 4%;" cols="6"> <v-row>
<img src="../../../images/hutopyblack.png" height="100px">
</v-col> <img style=" max-width: 60%;" src="../../../images/hutopy.png">
</v-row> <RouterLink :to="{ name: 'login' }">
<v-row justify="end"> <v-btn size="large"
<v-col cols="1"> style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
<RouterLink :to="{ name: 'contact' }"> light elevation="0">
<v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0">
Connexion Connexion
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-col>
<v-col cols="1">
<RouterLink :to="{ name: 'contact' }"> <RouterLink :to="{ name: 'contact' }">
<v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0"> <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 Inscription
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-col>
</v-row> </v-row>
</div>
</v-container> </v-container>
<img src="../../../images/homepage/banniere.png" class="banner-image" alt="Bannière" style="min-height: 500px;">
<div>
<v-container style="margin: 0;">
<v-row>
<img src="../../../images/homepage/bannierehomepage.png"
style="max-width: 1600px; width: auto; max-height: 30%; object-fit: cover; border-radius: 20px; ">
</v-row>
</v-container>
</div>
@@ -40,7 +55,7 @@
<!-- vide de gauche --> <!-- vide de gauche -->
</v-col> </v-col>
<v-col cols="9" style="margin-left: 3%;"> <v-col cols="9" style="margin-left: 4%;">
@@ -48,17 +63,17 @@
<div class="d-flex justify-center align-center"> <div class="d-flex justify-center align-center">
<div> <div>
<div style="margin-top: 30px;"> <div style="margin-top: 40px;">
<v-container class="d-flex "> <v-container class="d-flex ">
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card class=" mx-auto" max-width="400" v-bind="props"> <v-card style="border-radius: 20px;" class=" mx-auto" max-width="600" v-bind="props">
<v-img src="../../../images/homepage/creer.png" <v-img src="../../../images/homepage/creer.png"
style="border-radius: 20px; min-width: 344px;"></v-img> style="border-radius: 20px; min-width: 500px;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained> contained>
<v-container> <v-container>
<v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79"> <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;"> <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
CRÉER</h3> CRÉER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur <p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur
@@ -72,12 +87,12 @@
</v-card> </v-card>
</v-hover> </v-hover>
<div style="margin-left: 30px;"></div> <div style="margin-left: 50px;"></div>
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card class="mx-auto" max-width="400" v-bind="props"> <v-card style="border-radius: 20px;" class="mx-auto" max-width="600" v-bind="props">
<v-img src="../../../images/homepage/profiter.png" <v-img src="../../../images/homepage/partager.png"
style="border-radius: 20px; min-width: 344px;"></v-img> style="border-radius: 20px; min-width: 500px;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained> contained>
<v-container> <v-container>
@@ -96,18 +111,18 @@
</v-card> </v-card>
</v-hover> </v-hover>
<div style="margin-left: 30px;"> </div> <div style="margin-left: 50px;"> </div>
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card class="mx-auto" max-width="400" v-bind="props"> <v-card style="border-radius: 20px;" class="mx-auto" max-width="500" v-bind="props">
<v-img src="../../../images/homepage/inspirer.png" <v-img src="../../../images/homepage/inspirer.png"
style="border-radius: 20px; min-width: 344px;"></v-img> style="border-radius: 20px; min-width: 500px;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained> contained>
<v-container> <v-container>
<v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79"> <v-card class="mx-auto" max-width="500px" v-bind="props" color="#a30e79">
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;"> <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
INSPIRER</h3> INSPIRER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source <p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
@@ -130,45 +145,68 @@
<!-- Description D'hutopy --> <!-- Description D'hutopy -->
<v-container style="margin-top: 4%;"> <v-container style=" margin-left:0% ; margin-top: 4%; max-width: 1700px;">
<v-row> <v-row>
<v-col> <v-col cols="6">
<h1 style="margin-bottom: 5%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">C'est <v-col style="margin-left: 5%;" cols="11" class="d-flex justify-center align-center">
quoi Hutopy</h1> <v-img style="max-width: 750px;" src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col>
<p style="margin-bottom: 5%; font-size: 1.2rem; text-align: justify;">Découvrez Hutopy, une plateforme <v-col cols="12" md="10" offset-md="1">
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>
<v-row> <p class="text-center text-justify"
<v-col> style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; 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>
</v-col> <p class="text-center text-justify"
style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; max-width: 902px;">
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-col cols="12" class="d-flex justify-center align-center">
<RouterLink :to="{ name: 'contact' }"> <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn color="rgb(0, 0, 0)" style="width: 300px;" class="ml-auto">CRÉER UN COMPTE</v-btn> <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)"
outlined elevation="0">
Inscription
</v-btn>
</RouterLink> </RouterLink>
</v-col> </v-col>
</v-row>
</v-col>
</v-col> </v-col>
<v-col>
<v-img src="../../../images/homepage/cestquoihutopy.png" <!-- Colonne de droite -->
style="border-radius: 90px; min-width: 344px;"></v-img> <v-col cols="3">
<v-img src="../../../images/homepage/grinding.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
<v-img src="../../../images/homepage/girlarmy.png"
style="border-radius: 30px; min-width: 344px;"></v-img>
</v-col> </v-col>
<v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
<v-img src="../../../images/homepage/girlvr.png"
style="border-radius: 30px; min-width: 344px; max-height: 350;"></v-img>
</v-col>
</v-row> </v-row>
</v-container> </v-container>
@@ -180,33 +218,61 @@
<!-- ILS SONT SUR HUTOPY --> <!-- ILS SONT SUR HUTOPY -->
<v-container> <v-container>
<v-card-text> <v-card-text>
<h1 <h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
style="text-align: center; margin-top: 4%; margin-bottom: 2%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);"> Ils sont sur Hutopy.</h1>
Ils sont sur Hutopy</h1>
<v-container style="margin-top: 25px;"> <v-container style="margin-top: 25px; margin-bottom: -6%;">
<div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-bottom: 70px;">
</div>
<v-row justify="center" class="profile-images"> <v-row justify="center" class="profile-images">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
style="border: 3px solid rgb(163, 14, 121);">
</router-link>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
style="border: 3px solid rgb(163, 14, 121);">
</router-link>
<router-link :to="{ name: 'creatorfolio' }"> <v-col>
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image" <router-link :to="{ name: 'creatorfolio' }">
style="border: 3px solid rgb(163, 14, 121);"> <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="0">
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="0">
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="0">
Inscription
</v-btn>
</RouterLink>
</v-col>
</v-row> </v-row>
<div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-top: 70px;">
</div>
</v-container> </v-container>
</v-card-text> </v-card-text>
@@ -290,7 +356,7 @@
<v-card-text> <v-card-text>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;"> <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
</div> </div>
<h1 style="text-align: center; color: #a30e79; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY <h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
</h1> </h1>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;"> <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
</div> </div>
@@ -300,6 +366,7 @@
<router-link :to="{ name: 'creatorfolio' }"> <router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image" <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" /> style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
</router-link> </router-link>
<router-link :to="{ name: 'creatorfolio' }"> <router-link :to="{ name: 'creatorfolio' }">
@@ -327,24 +394,19 @@
<v-snackbar v-model="errorNoAccessSnackBar"> <v-snackbar v-model="errorNoAccessSnackBar">
Vous n'etes pas connecter ! Vous n'etes pas connecter !
<template v-slot:actions> <template v-slot:actions>
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false"> <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
Fermer Fermer
</v-btn> </v-btn>
<v-btn color="green" variant="text" @click="goToLoginPage()"> <v-btn color="green" variant="text" @click="goToLoginPage()">
Se connecter Se connecter
</v-btn> </v-btn>
</template> </template>
</v-snackbar> </v-snackbar>
<v-list lines="one"> <v-list style="background-color: #F4F4F4;" lines="one">
<v-list-item <v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
v-for="item in itemList"
:key="item"
:title="item.id"
:subtitle="item.title"
></v-list-item>
</v-list> </v-list>
<FooterLayout></FooterLayout> <FooterLayout></FooterLayout>
</main> </main>
@@ -352,10 +414,10 @@
<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 { useClient } from '@/plugins/clientPlugin'; import { useClient } from '@/plugins/clientPlugin';
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import FooterLayout from '@/layouts/FooterLayout.vue';
const router = useRouter() const router = useRouter()
@@ -452,9 +514,9 @@ const goToLoginPage = () => {
.profile-image { .profile-image {
width: auto; width: auto;
/* Largeur des images */ /* Largeur des images */
height: 180px; height: 300px;
/* Hauteur des images */ /* Hauteur des images */
border-radius: 20%; border-radius: 35px;
/* Coins arrondis */ /* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
} }
@@ -561,4 +623,8 @@ const goToLoginPage = () => {
.overlay:hover p.image-text { .overlay:hover p.image-text {
display: block; display: block;
} }
body {
background-color: #F4F4F4;
}
</style> </style>