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

Merged PR 9: Modification des pages afin qu'elle soient plus reactive.

Browse Source 
Modification des pages afin qu'elle soient plus reactive.
This commit is contained in:
Pascal Marchesseault
2024-03-19 19:43:59 +00:00
parent 04334c3130 166c6c1896
commit 4917314eef
5 changed files with 749 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/layouts/DefaultLayout.vue
View File

@@ -1,16 +1,20 @@
<template> <template>
<body style="background-color: #f4f4f4;">
<div class="md:flex hidden items-center justify-between flex-col"> <div class="md:flex hidden items-center justify-between flex-col">
<!-- Version pour ordinateur --> <!-- Version pour ordinateur -->
<v-container style="z-index: 2000;"> <v-container style="z-index: 2000; margin-bottom: 1.4%">
<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-card-text justify="end" style="max-width: 22%; margin-top: .2%; margin-bottom: -1.2%;"> <v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%; margin-bottom: -1.2%;">
<v-text-field append-inner-icon="mdi-magnify" density="compact" <v-text-field append-inner-icon="mdi-magnify" density="compact"
label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details single-line label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details
></v-text-field> single-line></v-text-field>
</v-card-text> </v-card-text>
<v-col cols="2" class="d-flex align-center"> <v-col cols="auto" class="d-flex align-center">
<router-link :to="{ name: 'yourprofile' }"> <router-link :to="{ name: 'yourprofile' }">
<v-row class="d-flex align-center"> <v-row class="d-flex align-center">
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture" <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
@@ -42,7 +46,8 @@
<v-col cols="auto"> <v-col cols="auto">
<!-- Photo de profil --> <!-- Photo de profil -->
<router-link :to="{ name: 'yourprofile' }" class="text-green-700"> <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo"> <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
alt="Logo">
</router-link> </router-link>
</v-col> </v-col>
</v-row> </v-row>
@@ -108,6 +113,8 @@
<main class="px-8 py-3 "> <main class="px-8 py-3 ">
<router-view /> <router-view />
</main> </main>
</body>
</template> </template>
<script setup> <script setup>

217
src/views/LoginView.vue
View File

@@ -1,19 +1,26 @@
<template> <template>
<v-container style="margin-top: 5%;"> <v-app style="background-color: #f4f4f4;">
<v-row> <div class="sm:flex hidden items-center justify-between flex-col"
<v-col cols="9"> style="background-color: #f4f4f4; margin-top: 3%;">
<img style="border-radius: 20px; max-width: 90%;" src="../../../images/loginpage/loginhutopy.png">
</v-col>
<v-col style="margin-left: -5%; margin-top: 6%;">
<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 <body style="background-color: #f4f4f4;">
vous connecter à <v-container style="background-color: #f4f4f4;">
votre compte?</h2> <v-row align="center" justify="center">
<!-- Colonne de l'image -->
<v-col cols="8" lg="8" style="align-items: center;">
<img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
src="../../../images/loginpage/loginhutopy.png">
</v-col>
<!-- Colonne du contenu -->
<v-col cols="3" lg="4" md="5" sm="6" xs="6">
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2>
<v-card-text> <v-card-text>
<v-form> <v-form class="label-mail-password">
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail" <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
class="text-start"></v-text-field> label="E-mail" class="text-start"></v-text-field>
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password" <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
label="Mot de passe" class="text-start"></v-text-field> label="Mot de passe" class="text-start"></v-text-field>
</v-form> </v-form>
@@ -32,27 +39,64 @@
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn> <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
</v-card-actions> </v-card-actions>
<div class="text-center"> <div class="text-center">
<h2 class="text-center display-3 h2-connexion">
<h2 class="text-center display-3" style="font-size: 1.5rem; margin-top: 6%; margin-bottom: 20px;">
Pas encore Pas encore
inscrit?</h2> inscrit?</h2>
<router-link :to="{ name: 'contact' }"> <router-link :to="{ name: 'contact' }">
<v-btn color="#6b0065" <v-btn color="#6b0065"
style="height: 60px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn> style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
</router-link> </router-link>
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</body>
<FooterLayout></FooterLayout> <FooterLayout></FooterLayout>
</div>
<div class="sm:hidden flex flex-col items-center justify-start"
style="background-color: #f4f4f4; height: 100vh;">
<img style="box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; "
src="../../../images/loginpage/loginhutopy.png">
<h1 class="text-center">Connexion</h1>
<h2 class="text-center">Comment souhaitez-vous
vous connecter à votre compte?</h2>
<v-form style="max-width: 400px; width: 350px;">
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"></v-text-field>
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
label="Mot de passe"></v-text-field>
</v-form>
<v-card-actions>
<div class="flex-grow-1"></div>
<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>
<div class="text-center">
<h2 class="text-center display-3 h2-connexion">
Pas encore
inscrit?</h2>
<router-link :to="{ name: 'contact' }">
<v-btn color="#6b0065"
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
</router-link>
</div>
</div>
</v-app>
</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';
@@ -81,3 +125,138 @@ async function login() {
} }
</script> </script>
<style>
.h1-connexion {
font-size: 0.55em;
}
.h2-connexion {
font-size: 0.55em;
}
.label-mail-password {
margin-bottom: -10%;
}
.logincol {
cols: 3;
}
@media (max-width: 475px) {
.h1-connexion {
font-size: 1em;
}
}
@media (min-width: 476px) and (max-width: 640px) {
.h1-connexion {
font-size: 1em;
}
}
@media (min-width: 641px) and (max-width: 768px) {
.h1-connexion {
font-size: 1em;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
}
.headermarginleft {
margin-left: 4%;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.h1-connexion {
font-size: 1em;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
}
.headermarginleft {
margin-left: 4%;
}
}
@media (min-width: 1025px) and (max-width: 1272px) {
.h1-connexion {
font-size: 3em;
margin-top: 15%;
margin-bottom: 1%;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
}
.label-mail-password {
margin-bottom: -10%;
}
.headermarginleft {
margin-left: -10%;
min-width: 700px;
}
}
@media (min-width: 1537px) and (max-width: 1920px) {
.h1-connexion {
font-size: 3.0em;
margin-top: 18%;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
}
.label-mail-password {
margin-bottom: 0%;
}
.headermarginleft {
margin-left: 0%;
}
}
@media (min-width: 1921px) {
.h1-connexion {
font-size: 6.2em;
}
.h2-connexion {
font-size: 1.7em;
margin-bottom: 5%;
}
.label-mail-password {
margin-bottom: 0%;
}
.insriptionbutton {
font-size: 1.2em
}
.headermarginleft {
margin-left: 0%;
}
}
</style>

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

@@ -1,16 +1,9 @@
<template> <template>
<!--PC --> <!--PC -->
<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%;">
<v-container class="d-flex justify-center align-center"> <v-container class="d-flex justify-center align-center" sty>
<div style="margin-left: 20%; margin-bottom: 3%;"> <div style="margin-left: 20%; margin-bottom: 3%;">
<v-row> <v-row>
@@ -28,28 +21,43 @@
</div> </div>
</v-container> </v-container>
<main class="top-aligned-column grid grid-cols-3 gap-4">
<div class="column"></div>
<div class="center-column" style="width: 100vw; margin: auto;">
<div class="grid grid-cols-2 gap-4" style="margin-bottom: 5%;">
<div class="rectangular-image h-full flex justify-center items-center">
<img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
style="width: 700px; margin-top: 14%; height: auto; float: right;">
</div> </div>
<div>
<h1 style="font-size: 3rem; margin-top: -.5%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au <v-container>
développement de </h1> <v-row justify="center" align="center">
<v-col cols="auto">
<img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
style="max-width: 400px; margin-top: 14%; height: auto; float: right;">
</v-col>
<v-col style="max-width: 700px;">
<h1 style=" font-size: 3rem; margin-bottom: 5%;" class="h1-inscription-beta">Participez au
développement</h1>
<p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">Rejoignez l'aventure Hutopy : une <v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
<v-text-field label="Courriel ($)" 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"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<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>
</v-col>
</v-row>
</v-container>
<v-container style="max-width: 1200px;">
<p class="para-inscription" style="margin-top: -4%; font-size: 1.3rem;">Rejoignez l'aventure
Hutopy : une
invitation à façonner l'avenir de la création. invitation à façonner l'avenir de la création.
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
@@ -69,33 +77,9 @@
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite. 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 Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
dans le ciel de notre utopie partagée. dans le ciel de notre utopie partagée.
</p> </p>
<v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field> </v-container>
<v-text-field label="Courriel ($)"
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"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<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 class="column"></div>
</main>
</div>
<!-- Mobile --> <!-- Mobile -->

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

@@ -2,7 +2,7 @@
<DefaultLayout></DefaultLayout> <DefaultLayout></DefaultLayout>
<!-- PC--> <!-- PC-->
<div class="md:flex hidden items-center justify-between flex-col"> <div class="md:flex hidden items-center justify-between flex-col" style="background-color: #f4f4f4;">
<!-- Banner + Profile--> <!-- Banner + Profile-->
<div style="margin-top: -1.6%;"> <div style="margin-top: -1.6%;">
@@ -10,68 +10,75 @@
<v-col cols="12"> <v-col cols="12">
<img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière" <img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);"> style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
<v-card class="label-paiement-color" <v-container class="pa-0" style="margin-left: 1%; margin: 0;">
style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
</v-card>
<v-container class="pa-0">
<v-row no-gutters class="justify-center"> <v-row no-gutters class="justify-center">
<!-- Left menu --> <!-- Left menu -->
<v-col cols="2" class="mx-0"> <v-col cols="2" class="mx-0" style="min-width: 300px;">
<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>
<v-col>
</v-col>
<v-row style="align-items: start;">
<RouterLink :to="{ name: 'home' }"> <RouterLink :to="{ name: 'home' }">
<v-btn size="x-large" <v-btn size="x-large"
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);" style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 5%; transform: scale(1.3);"
elevation="0"> elevation="0">
<v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon> <v-icon left class="icon-size">mdi-home</v-icon>
<div style="margin-left: 10%;"> Accueil</div> <div style="margin-left: 10%;"> Accueil</div>
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-row>
<v-row style="align-items: start;">
<RouterLink :to="{ name: 'contact' }"> <RouterLink :to="{ name: 'contact' }">
<v-btn size="x-large" <v-btn size="x-large"
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);" style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
elevation="0"> elevation="0">
<v-icon left class="icon-size" style="margin-left: -3%;">mdi-account-plus</v-icon> <v-icon left class="icon-size">mdi-account-plus</v-icon>
<div style="margin-left: 6%;">Ajouter des amis</div> <div>Ajouter des amis</div>
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-row>
<v-row style="align-items: start;">
<RouterLink :to="{ name: 'creatorfolio' }"> <RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="x-large" <v-btn size="x-large"
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);" style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
elevation="0"> elevation="0">
<v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon> <v-icon left class="icon-size">mdi-newspaper</v-icon>
<div style="margin-left: 10%; ">Contenu</div> <div style="margin-left: 10%; ">Contenu</div>
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-row>
<v-row style="align-items: start;">
<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="Transition from Top" block size="x-large" <v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
style="margin-left: -8%; background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);" style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
elevation="0">
<v-icon color="black">mdi-wallet</v-icon> <v-icon color="black">mdi-wallet</v-icon>
<div style="margin-left: 10%;" @click="isActive.value = false">PORTEFEUILLE</div> <div @click="isActive.value = false">PORTEFEUILLE</div>
</v-btn> </v-btn>
</template> </template>
<template v-slot:default="{ isActive }"> <template v-slot:default="{ isActive }">
<v-card style="border-radius: 30px;"> <v-card style="border-radius: 30px;">
@@ -173,29 +180,16 @@
</template> </template>
</v-dialog> </v-dialog>
</v-row>
</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">
<v-container> <v-container style="min-width: 800px ;">
<v-col> <v-col>
<v-img src="../../../images/guillaume.png" class="image-profile elevation-4" <v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
@@ -286,9 +280,9 @@
<v-card class="flow-menu m-0" <v-card class="flow-menu m-0"
style="background-color: #f4f4f4; 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: 675px; 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" style="background-color: #f4f4f4"> <!-- 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;">
PODCAST #01</h1> PODCAST #01</h1>
@@ -376,9 +370,9 @@
</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: 675px; 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" style="background-color: #f4f4f4"> <!-- 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>
@@ -471,7 +465,7 @@
<!-- tips menu --> <!-- tips menu -->
<v-card <v-card
style=" background-color: #f4f4f4; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;"> style="margin-left: 15%; background-color: #f4f4f4; min-width: 300px; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
<v-container class="text-center d-flex align-center justify-center" <v-container class="text-center d-flex align-center justify-center"
style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; "> style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">

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

@@ -1,12 +1,15 @@
<template> <template>
<main style="background-color:#F4F4F4 ;"> <div style="background-color: #F4F4F4;">
<!--PC --> <!--PC -->
<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 -->
<v-container class="d-flex justify-center align-center"> <v-container class="d-flex justify-center align-center">
<div style="margin-left: 20%;"> <div style="margin-left: 20%;">
<v-row> <v-row>
<img style=" max-width: 60%;" src="../../../images/hutopy.png"> <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }"> <RouterLink :to="{ name: 'login' }">
<v-btn size="large" <v-btn size="large"
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;" style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
@@ -23,139 +26,139 @@
</RouterLink> </RouterLink>
</v-row> </v-row>
<v-row>
</v-row>
</div> </div>
</v-container> </v-container>
<div> <div>
<v-container style="margin: 0;"> <v-container style="margin: 0; padding: 0;">
<v-row> <v-row style="justify-content: center;">
<img src="../../../images/homepage/bannierehomepage.png" <img src="../../../images/homepage/bannierehomepage.png"
style="max-width: 1600px; width: auto; max-height: 30%; object-fit: cover; border-radius: 20px; "> 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-row>
</v-container> </v-container>
</div> </div>
<!-- Colonnes Créer Partager Inspirer-->
<!-- Colonnes -->
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="1" class="ml-4 ml-sm-0">
<!-- vide de gauche --> <!-- vide de gauche -->
<v-col cols="1" class="ml-4 ml-sm-0">
</v-col> </v-col>
<!-- Colonne Centre -->
<v-col cols="9" style="margin-left: 4%;"> <v-col cols="9" style="margin-left: 4%;">
<!-- Créer Profiter Inspirer --> <!-- Créer Profiter Inspirer -->
<div class="d-flex justify-center align-center"> <div class="d-flex justify-center align-center">
<div> <div>
<div style="margin-top: 40px;"> <div style="margin-top: 40px;">
<v-container class="d-flex "> <v-container class="d-flex justify-center align-center" style="width: 128vh;">
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px;" class=" mx-auto" max-width="600" v-bind="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" <v-img src="../../../images/homepage/creer.png"
style="border-radius: 20px; min-width: 500px;"></v-img> style="min-width: 325px; border-radius: 20px; width: 80vw;"></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="600" 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
Hutopy, Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
de possibilités </p>
infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
</v-card> </v-card>
</v-container> </v-container>
</v-overlay> </v-overlay>
</v-card> </v-card>
</v-hover> </v-hover>
<div style="margin-left: 50px;"></div> <div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px;" class="mx-auto" max-width="600" v-bind="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" <v-img src="../../../images/homepage/partager.png"
style="border-radius: 20px; min-width: 500px;"></v-img> style="min-width: 325px; border-radius: 20px; width: 80vw;"></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; @media screen and (min-width: 768px) { font-size: 2vw; }">
PROFITER</h3> PROFITER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em; ">Plongez dans l'univers Hutopy <p class="text-justify pa-4" style="font-size: 1.2em;">
et découvrez un Plongez dans l'univers Hutopy et
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
interactions authentiques interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens
et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre et enrichir votre quotidien.</p>
quotidien.</p>
</v-card> </v-card>
</v-container> </v-container>
</v-overlay> </v-overlay>
</v-card> </v-card>
</v-hover> </v-hover>
<div style="margin-left: 50px;"> </div> <div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px;" class="mx-auto" max-width="500" v-bind="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" <v-img src="../../../images/homepage/inspirer.png"
style="border-radius: 20px; min-width: 500px;"></v-img> style="border-radius: 20px; width: 80vw;"></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="500px" 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; @media screen and (min-width: 768px) { font-size: 2vw; }">
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;">
d'inspiration sur Hutopy, en Devenez une source d'inspiration
partageant votre vision, votre talent et vos histoires. Influencez positivement la sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
communauté, éveillez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
vertueux de créativité et
d'inspiration.</p>
</v-card> </v-card>
</v-container> </v-container>
</v-overlay> </v-overlay>
</v-card> </v-card>
</v-hover> </v-hover>
</v-container> </v-container>
</div> </div>
</div> </div>
</div> </div>
</v-col>
<!-- vide de droite -->
<v-col cols="2" class="mr-4 mr-sm-0">
</v-col>
</v-row>
</v-container>
<!-- Description D'hutopy --> <!-- Description D'hutopy -->
<v-container style=" margin-left:0% ; margin-top: 4%; max-width: 1700px;">
<v-row> <v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
<v-row class="justify-center">
<v-col cols="6"> <v-col cols="6">
<v-col style="margin-left: 5%;" cols="11" class="d-flex justify-center align-center"> <v-col cols="11" class="d-flex justify-center align-center">
<v-img style="max-width: 750px;" src="../../../images/homepage/votrehutopy.png"></v-img> <v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col> </v-col>
<v-col cols="12" md="10" offset-md="1"> <v-col cols="auto" md="10">
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
<p class="text-center text-justify"
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 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 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 écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
@@ -163,66 +166,48 @@
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
la créativité. la créativité.
</p> </p>
<p class="text-center text-justify votre_hutopy_fontsize"
<p class="text-center text-justify" style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
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 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 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 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 autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
prendre vie. prendre vie.
</p> </p>
<v-col cols="auto" class="d-flex justify-center align-center">
<v-col cols="12" class="d-flex justify-center align-center">
<RouterLink style="width: 450px;" :to="{ name: 'contact' }"> <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
outlined elevation="0"> elevation="0">
Inscription Inscription
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-col> </v-col>
</v-col> </v-col>
</v-col> </v-col>
<!-- Colonne de droite --> <!-- Colonne de droite -->
<v-col cols="3"> <v-col cols="3">
<v-img src="../../../images/homepage/grinding.png" <v-img src="../../../images/homepage/grinding.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img> style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
<v-img src="../../../images/homepage/girlarmy.png" <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
style="border-radius: 30px; min-width: 344px;"></v-img>
</v-col> </v-col>
<v-col cols="3" style> <v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png" <v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img> style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
<v-img src="../../../images/homepage/girlvr.png" <v-img src="../../../images/homepage/girlvr.png"
style="border-radius: 30px; min-width: 344px; max-height: 350;"></v-img> style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<!-- Fin Description D'hutopy -->
<!-- ILS SONT SUR HUTOPY --> <!-- ILS SONT SUR HUTOPY -->
<v-container> <v-container style="max-width: 1500px;">
<v-card-text> <v-card-text>
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c"> <h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1> Ils sont sur Hutopy.</h1>
<v-container style="margin-top: 25px; margin-bottom: -6%;"> <v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
<v-row justify="center" class="profile-images"> <v-row justify="center" class="profile-images">
@@ -234,11 +219,12 @@
</router-link> </router-link>
<RouterLink :to="{ name: 'creatorfolio' }"> <RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;" <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="0"> color="rgb(107, 0, 101)" outlined elevation="10">
Inscription Inscription
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-col> </v-col>
<v-col> <v-col>
@@ -248,11 +234,12 @@
</router-link> </router-link>
<RouterLink :to="{ name: 'creatorfolio' }"> <RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;" <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="0"> color="rgb(107, 0, 101)" outlined elevation="10">
Inscription Inscription
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-col> </v-col>
@@ -263,11 +250,12 @@
</router-link> </router-link>
<RouterLink :to="{ name: 'creatorfolio' }"> <RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;" <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="0"> color="rgb(107, 0, 101)" outlined elevation="10">
Inscription Inscription
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-col> </v-col>
@@ -277,14 +265,10 @@
</v-container> </v-container>
</v-card-text> </v-card-text>
</v-container> </v-container>
</v-col>
<!-- vide de droite --> <!-- Fin Description D'hutopy -->
<v-col cols="2" class="mr-4 mr-sm-0">
</v-col>
</v-row>
</v-container>
</div> </div>
<!-- Mobile --> <!-- Mobile -->
@@ -365,18 +349,18 @@
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;"> style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
<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: auto;" />
</router-link> </router-link>
<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: 0 20px; width: 120px; height: 120px;" /> style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
</router-link> </router-link>
<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-left: 20px; width: 120px; height: 120px;" /> style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
</router-link> </router-link>
</div> </div>
@@ -409,7 +393,7 @@
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item> <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> </div>
</template> </template>
<script async setup> <script async setup>
@@ -449,7 +433,7 @@ const goToLoginPage = () => {
<style src="../../cssstyle/homeView.css"></style> <style src="../../cssstyle/homeView.css"></style>
<style> <style scoped>
.phototexte { .phototexte {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
@@ -514,7 +498,7 @@ const goToLoginPage = () => {
.profile-image { .profile-image {
width: auto; width: auto;
/* Largeur des images */ /* Largeur des images */
height: 300px;
/* Hauteur des images */ /* Hauteur des images */
border-radius: 35px; border-radius: 35px;
/* Coins arrondis */ /* Coins arrondis */
@@ -627,4 +611,50 @@ const goToLoginPage = () => {
body { body {
background-color: #F4F4F4; background-color: #F4F4F4;
} }
.votre_hutopy_fontsize {
font-size: .2em;
}
@media (max-width: 475px) {
.votre_hutopy_fontsize {
font-size: 0.55em;
}
}
@media (min-width: 476px) and (max-width: 640px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 641px) and (max-width: 768px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 1025px) and (max-width: 1536px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 1537px) and (max-width: 1920px) {
.votre_hutopy_fontsize {
font-size: 1.1em;
}
}
@media (min-width: 1921px) {
.votre_hutopy_fontsize {
font-size: 1.5em;
}
}
</style> </style>