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

Ui Updated - Modification de LoginView.vue et ContactView.vue

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-13 17:49:04 -04:00
parent db29b20e42
commit 5380626ec9
20 changed files with 360 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,34 +1,49 @@
<template>
<main>
<main style="background-color:#F4F4F4 ;">
<!--PC -->
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 2%;">
<v-container style="margin-bottom: -.1%;">
<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 justify="end">
<v-col cols="1">
<RouterLink :to="{ name: 'contact' }">
<v-btn size="x-large" style="min-width: 200; max-width: 200;" 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%;">
<v-row>
<img style=" max-width: 60%;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }">
<v-btn size="large"
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
light elevation="0">
Connexion
</v-btn>
</RouterLink>
</v-col>
<v-col cols="1">
<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
</v-btn>
</RouterLink>
</v-col>
</v-row>
</v-row>
</div>
</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 -->
</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>
<div style="margin-top: 30px;">
<div style="margin-top: 40px;">
<v-container class="d-flex ">
<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"
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"
contained>
<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;">
CRÉER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur
@@ -72,12 +87,12 @@
</v-card>
</v-hover>
<div style="margin-left: 30px;"></div>
<div style="margin-left: 50px;"></div>
<v-hover v-slot="{ isHovering, props }">
<v-card class="mx-auto" max-width="400" v-bind="props">
<v-img src="../../../images/homepage/profiter.png"
style="border-radius: 20px; min-width: 344px;"></v-img>
<v-card style="border-radius: 20px;" class="mx-auto" max-width="600" v-bind="props">
<v-img src="../../../images/homepage/partager.png"
style="border-radius: 20px; min-width: 500px;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
@@ -96,18 +111,18 @@
</v-card>
</v-hover>
<div style="margin-left: 30px;"> </div>
<div style="margin-left: 50px;"> </div>
<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"
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"
contained>
<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;">
INSPIRER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
@@ -130,45 +145,68 @@
<!-- Description D'hutopy -->
<v-container style="margin-top: 4%;">
<v-container style=" margin-left:0% ; margin-top: 4%; max-width: 1700px;">
<v-row>
<v-col>
<h1 style="margin-bottom: 5%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">C'est
quoi Hutopy</h1>
<p style="margin-bottom: 5%; font-size: 1.2rem; text-align: justify;">Découvrez Hutopy, une plateforme
révolutionnaire
conçue pour célébrer la
créativité, l'authenticité
et l'inspiration. Ici, chaque créateur trouve un espace pour exprimer sa passion et partager ses
œuvres avec une communauté engagée. Hutopy se distingue par son engagement envers une expérience
numérique enrichissante, offrant une interface intuitive où profiter, créer et inspirer deviennent
un quotidien enrichi et significatif. Hutopy n'est pas seulement une plateforme, c'est un mouvement
vers une interaction plus humaine et créative dans l'espace numérique. Avec un modèle économique
équitable et une variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où
les idées prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos vies.
Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de notre communauté
mondiale. Ensemble, façonnons l'avenir de la création et du partage de contenu. Bienvenue sur
Hutopy, où vous pouvez créer votre propre univers.</p>
<v-col cols="6">
<v-col style="margin-left: 5%;" cols="11" class="d-flex justify-center align-center">
<v-img style="max-width: 750px;" src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col>
<v-col cols="12" md="10" offset-md="1">
<v-row>
<v-col>
<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
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>
<RouterLink :to="{ name: 'contact' }">
<v-btn color="rgb(0, 0, 0)" style="width: 300px;" class="ml-auto">CRÉER UN COMPTE</v-btn>
<v-col cols="12" 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-row>
</v-col>
</v-col>
<v-col>
<v-img src="../../../images/homepage/cestquoihutopy.png"
style="border-radius: 90px; min-width: 344px;"></v-img>
<!-- Colonne de droite -->
<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 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-container>
@@ -180,33 +218,61 @@
<!-- ILS SONT SUR HUTOPY -->
<v-container>
<v-card-text>
<h1
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>
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
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">
<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' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
style="border: 3px solid rgb(163, 14, 121);">
</router-link>
<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-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>
<div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-top: 70px;">
</div>
</v-container>
</v-card-text>
@@ -290,7 +356,7 @@
<v-card-text>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
</div>
<h1 style="text-align: center; color: #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>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
</div>
@@ -300,6 +366,7 @@
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
</router-link>
<router-link :to="{ name: 'creatorfolio' }">
@@ -327,24 +394,19 @@
<v-snackbar v-model="errorNoAccessSnackBar">
Vous n'etes pas connecter !
<template v-slot:actions>
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
Fermer
</v-btn>
<v-btn color="green" variant="text" @click="goToLoginPage()">
Se connecter
</v-btn>
</template>
Vous n'etes pas connecter !
<template v-slot:actions>
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
Fermer
</v-btn>
<v-btn color="green" variant="text" @click="goToLoginPage()">
Se connecter
</v-btn>
</template>
</v-snackbar>
<v-list lines="one">
<v-list-item
v-for="item in itemList"
:key="item"
:title="item.id"
:subtitle="item.title"
></v-list-item>
<v-list style="background-color: #F4F4F4;" lines="one">
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
</v-list>
<FooterLayout></FooterLayout>
</main>
@@ -352,10 +414,10 @@
<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from '@/plugins/clientPlugin';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import FooterLayout from '@/layouts/FooterLayout.vue';
const router = useRouter()
@@ -452,9 +514,9 @@ const goToLoginPage = () => {
.profile-image {
width: auto;
/* Largeur des images */
height: 180px;
height: 300px;
/* Hauteur des images */
border-radius: 20%;
border-radius: 35px;
/* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
@@ -561,4 +623,8 @@ const goToLoginPage = () => {
.overlay:hover p.image-text {
display: block;
}
body {
background-color: #F4F4F4;
}
</style>