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

324
src/views/LoginView.vue
View File

@@ -6,14 +6,13 @@
<body style="background-color: #f4f4f4;">
<v-container style=" background-color: #f4f4f4;">
<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">
<!-- Header -->
<v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
<img class="login-picture" src="../../../images/loginpage/loginhutopy.png">
</v-col>
<!-- Colonne du contenu -->
<v-col cols="3" lg="4" md="5" sm="6" xs="6">
<!-- Connexion-objects -->
<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>
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2>
@@ -34,16 +33,16 @@
<v-card-actions>
<div class="flex-grow-1"></div>
<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>
<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>
<div class="text-center">
<h2 class="text-center display-3 h2-connexion">
<h2 class="text-center display-3 h2pasinscrit">
Pas encore
inscrit?</h2>
<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>
</router-link>
</div>
@@ -58,11 +57,11 @@
<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; "
<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">
<h1 class="text-center">Connexion</h1>
<h2 class="text-center">Comment souhaitez-vous
<h1 class="h1-connexion">Connexion</h1>
<h2 class="h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2>
<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-card-actions>
<div class="text-center">
<h2 class="text-center display-3 h2-connexion">
<h2 class="h2pasinscrit">
Pas encore
inscrit?</h2>
<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>
</router-link>
</div>
@@ -111,6 +110,7 @@ let errorSnackBar = ref(false);
const goHome = () => {
router.push('/');
}
@@ -126,7 +126,7 @@ async function login() {
</script>
<style>
<style scoped>
.h1-connexion {
font-size: 0.55em;
}
@@ -139,99 +139,273 @@ async function login() {
margin-bottom: -10%;
}
.logincol {
cols: 3;
}
@media (max-width: 475px) {
@media (min-width: 300px) {
.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;
font-size: 2em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1em;
font-size: 1.1em;
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 {
margin-left: 4%;
}
.label-mail-password {
margin-bottom: -3%;
width: 425px;
margin-left: 6%;
}
@media (min-width: 769px) and (max-width: 1024px) {
.h1-connexion {
.btnhome {
font-size: 1em;
justify-content: center;
transform: matrix(1, 0, 0, 1, -160, 0);
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
.headermarginleft {
margin-left: 4%;
}
.inscriptionbtn {
transform: scale(.8);
}
@media (min-width: 1025px) and (max-width: 1272px) {
}
@media (min-width: 769px) and (max-width: 1280px) {
.h1-connexion {
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 {
font-size: 1em;
margin-bottom: 5%;
font-weight: 500;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.3em;
}
.h2-pasinscrit {
margin-bottom: -10%;
}
.label-mail-password {
margin-bottom: -10%;
}
.headermarginleft {
margin-left: -10%;
min-width: 700px;
}
margin-top: -4%;
}
@media (min-width: 1537px) and (max-width: 1920px) {
.h1-connexion {
font-size: 3.0em;
margin-top: 18%;
.inscriptionbtn {
transform: scale(.6);
margin-top: -5%;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
}
.label-mail-password {
margin-bottom: 0%;
}
.headermarginleft {
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) {
.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 {
font-size: 6.2em;
}
@@ -241,8 +415,15 @@ async function login() {
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-bottom: 0%;
margin-left: 10%;
width: auto;
}
.insriptionbutton {
@@ -250,12 +431,25 @@ async function login() {
}
.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>
<v-app style="background-color: #F4F4F4;">
<div style="background-color: #F4F4F4;">
<!--PC -->
@@ -27,9 +30,7 @@
</v-row>
<v-row>
</v-row>
</div>
</v-container>
@@ -71,7 +72,8 @@
CRÉER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
réalité.
</p>
</v-card>
</v-container>
@@ -97,8 +99,10 @@
PROFITER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">
Plongez dans l'univers Hutopy et
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques,
des
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
sens
et enrichir votre quotidien.</p>
</v-card>
</v-container>
@@ -154,7 +158,8 @@
<v-row class="justify-center">
<v-col cols="6">
<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 cols="auto" md="10">
<p class="text-center text-justify votre_hutopy_fontsize"
@@ -319,7 +324,8 @@
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
<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
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
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>
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
partageant votre vision,
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
les
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
d'inspiration.</p>
@@ -394,6 +401,8 @@
</v-list>
<FooterLayout></FooterLayout>
</div>
</v-app>
</template>
<script async setup>
@@ -644,6 +653,8 @@ body {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 1537px) and (max-width: 1920px) {