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

Updated - LoginView 100% reactif

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-20 00:43:08 -04:00
parent 166c6c1896
commit 77404f1f0a
2 changed files with 650 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/views/LoginView.vue
View File

@@ -4,16 +4,15 @@
style="background-color: #f4f4f4; margin-top: 3%;"> style="background-color: #f4f4f4; margin-top: 3%;">
<body style="background-color: #f4f4f4;"> <body style="background-color: #f4f4f4;">
<v-container style="background-color: #f4f4f4;"> <v-container style=" background-color: #f4f4f4;">
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<!-- Colonne de l'image --> <!-- Header -->
<v-col cols="8" lg="8" style="align-items: center;"> <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
<img class="headermarginleft" style="border-radius: 20px; max-width: 90%;" <img class="login-picture" src="../../../images/loginpage/loginhutopy.png">
src="../../../images/loginpage/loginhutopy.png">
</v-col> </v-col>
<!-- Colonne du contenu --> <!-- Connexion-objects -->
<v-col cols="3" lg="4" md="5" sm="6" xs="6"> <v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
<h1 class="text-center display-6 h1-connexion">Connexion</h1> <h1 class="text-center display-6 h1-connexion">Connexion</h1>
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous <h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2> vous connecter à votre compte?</h2>
@@ -34,16 +33,16 @@
<v-card-actions> <v-card-actions>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<router-link :to="{ name: 'home' }"> <router-link :to="{ name: 'home' }">
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn> <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
</router-link> </router-link>
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn> <v-btn color="primary" class="ma-2 btnhome" @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 h2pasinscrit">
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" class="inscriptionbtn"
style="height: 50px; 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>
@@ -58,11 +57,11 @@
<div class="sm:hidden flex flex-col items-center justify-start" <div class="sm:hidden flex flex-col items-center justify-start"
style="background-color: #f4f4f4; height: 100vh;"> 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; " <img style="margin-top: 10%; width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
src="../../../images/loginpage/loginhutopy.png"> src="../../../images/loginpage/loginhutopy.png">
<h1 class="text-center">Connexion</h1> <h1 class="h1-connexion">Connexion</h1>
<h2 class="text-center">Comment souhaitez-vous <h2 class="h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2> vous connecter à votre compte?</h2>
<v-form style="max-width: 400px; width: 350px;"> <v-form style="max-width: 400px; width: 350px;">
@@ -79,11 +78,11 @@
<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="h2pasinscrit">
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" class="inscriptionbtn"
style="height: 50px; 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>
@@ -111,6 +110,7 @@ let errorSnackBar = ref(false);
const goHome = () => { const goHome = () => {
router.push('/'); router.push('/');
} }
@@ -126,7 +126,7 @@ async function login() {
</script> </script>
<style> <style scoped>
.h1-connexion { .h1-connexion {
font-size: 0.55em; font-size: 0.55em;
} }
@@ -139,99 +139,273 @@ async function login() {
margin-bottom: -10%; margin-bottom: -10%;
} }
.logincol {
cols: 3;
}
@media (max-width: 475px) { @media (min-width: 300px) {
.h1-connexion { .h1-connexion {
font-size: 1em; font-size: 2em;
} margin-bottom: 5%;
}
@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 { .h2-connexion {
font-size: 1em; font-size: 1.1em;
margin-bottom: 5%; margin-bottom: 5%;
text-align: center;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.inscriptionbtn {
transform: scale(.7);
}
}
@media (min-width: 450px) and (max-width: 670px) {
.h1-connexion {
font-size: 2em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
text-align: center;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.inscriptionbtn {
transform: scale(.7);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 641px) and (max-width: 770px) {
.h1-connexion {
font-size: 2.5em;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.1em;
} }
.headermarginleft { .headermarginleft {
margin-left: 4%; margin-left: 4%;
} }
.label-mail-password {
margin-bottom: -3%;
width: 425px;
margin-left: 6%;
}
.btnhome {
font-size: 1em;
justify-content: center;
transform: matrix(1, 0, 0, 1, -160, 0);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
.inscriptionbtn {
transform: scale(.8);
}
} }
@media (min-width: 769px) and (max-width: 1024px) { @media (min-width: 769px) and (max-width: 1280px) {
.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 { .h1-connexion {
font-size: 3em; font-size: 3em;
margin-top: 15%; }
margin-bottom: 1%;
.h2-connexion {
font-size: 1.2em;
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-bottom: -3%;
width: 550px;
margin-left: 9%;
}
.headermarginleft {
margin-left: 4%;
}
.inscriptionbtn {
transform: scale(.8);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
.btnhome {
font-size: 1em;
justify-content: center;
}
}
@media (min-width: 1279px) and (max-width: 1920px) {
.h1-connexion {
font-size: 2em;
margin-top: 4%;
font-weight: 600;
} }
.h2-connexion { .h2-connexion {
font-size: 1em; font-size: 1em;
margin-bottom: 5%; margin-bottom: 5%;
font-weight: 500;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.3em;
}
.h2-pasinscrit {
margin-bottom: -10%;
} }
.label-mail-password { .label-mail-password {
margin-bottom: -10%; margin-bottom: -10%;
margin-top: -4%;
} }
.headermarginleft {
margin-left: -10%; .inscriptionbtn {
min-width: 700px; transform: scale(.6);
margin-top: -5%;
} }
}
@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 { .headermarginleft {
margin-left: 0%; margin-left: 0%;
} }
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
} }
@media (min-width: 1921px) { @media (min-width: 1921px) {
.h1-connexion {
font-size: 4.2em;
}
.h2-connexion {
font-size: 1.3em;
margin-bottom: 5%;
margin-left: 6%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-left: 5%;
margin-bottom: 0%;
width: auto;
}
.insriptionbutton {
font-size: 1.2em;
}
.headermarginleft {
margin-left: 0%;
}
.connexion-container {
margin-left: -7%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -10%;
}
}
@media (min-width: 2500px) and (max-width: 4000px) {
.h1-connexion { .h1-connexion {
font-size: 6.2em; font-size: 6.2em;
} }
@@ -241,8 +415,15 @@ async function login() {
margin-bottom: 5%; margin-bottom: 5%;
} }
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password { .label-mail-password {
margin-bottom: 0%; margin-bottom: 0%;
margin-left: 10%;
width: auto;
} }
.insriptionbutton { .insriptionbutton {
@@ -250,12 +431,25 @@ async function login() {
} }
.headermarginleft { .headermarginleft {
margin-left: 0%; margin-left: 1%;
} }
.inscriptionbtn {
transform: scale(1);
}
.connexion-container {
margin-left: -3%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
} }

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

@@ -1,4 +1,7 @@
<template> <template>
<v-app style="background-color: #F4F4F4;">
<div style="background-color: #F4F4F4;"> <div style="background-color: #F4F4F4;">
<!--PC --> <!--PC -->
@@ -27,9 +30,7 @@
</v-row> </v-row>
<v-row>
</v-row>
</div> </div>
</v-container> </v-container>
@@ -71,7 +72,8 @@
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, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité. rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
réalité.
</p> </p>
</v-card> </v-card>
</v-container> </v-container>
@@ -97,8 +99,10 @@
PROFITER</h3> PROFITER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;"> <p class="text-justify pa-4" style="font-size: 1.2em;">
Plongez dans l'univers Hutopy et Plongez dans l'univers Hutopy et
découvrez un 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,
interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens des
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
sens
et enrichir votre quotidien.</p> et enrichir votre quotidien.</p>
</v-card> </v-card>
</v-container> </v-container>
@@ -154,7 +158,8 @@
<v-row class="justify-center"> <v-row class="justify-center">
<v-col cols="6"> <v-col cols="6">
<v-col cols="11" class="d-flex justify-center align-center"> <v-col cols="11" class="d-flex justify-center align-center">
<v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img> <v-img style="margin-top: -5%; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col> </v-col>
<v-col cols="auto" md="10"> <v-col cols="auto" md="10">
<p class="text-center text-justify votre_hutopy_fontsize" <p class="text-center text-justify votre_hutopy_fontsize"
@@ -319,7 +324,8 @@
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile"> <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img> <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un <p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et une espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
une
expérience expérience
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p> personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
@@ -330,7 +336,8 @@
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img> <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en <p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
partageant votre vision, partageant votre vision,
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
les
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
d'inspiration.</p> d'inspiration.</p>
@@ -394,6 +401,8 @@
</v-list> </v-list>
<FooterLayout></FooterLayout> <FooterLayout></FooterLayout>
</div> </div>
</v-app>
</template> </template>
<script async setup> <script async setup>
@@ -644,6 +653,8 @@ body {
.votre_hutopy_fontsize { .votre_hutopy_fontsize {
font-size: 0.9em; font-size: 0.9em;
} }
} }
@media (min-width: 1537px) and (max-width: 1920px) { @media (min-width: 1537px) and (max-width: 1920px) {