PGL/Clyde
PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

Login et agencement de la main page #51

Merged
Wal merged 9 commits from loginProto into master 2024-03-04 19:42:58 +01:00
Conversation 0 Commits 9 Files Changed 6 +83 -83
4 changed files with 83 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a45e38b1f6 - Show all commits

10
frontend/login.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<div class="logBoxCenterer">
<div class='loginBox'>
<body>
<div class="logBoxCenterer">
<div class='loginBox'>
<div class="form">
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
<div class="inputBox">
@ -20,10 +20,10 @@
<input type="submit" value="Login">
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
tonitch commented 2024-03-02 22:30:45 +01:00
Outdated
Review
Copy Link

(*) référencé plus tard

(*) référencé plus tard
</body>
</body>
</html>

77
frontend/src/assets/main.css
View File

@ -2,80 +2,3 @@ body {
background-color: rgb(53, 25, 60);
margin:0;
}
tonitch commented 2024-03-02 22:32:59 +01:00
Outdated
Review
Copy Link

j'aime bien.

j'aime bien.
.logBoxCenterer {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loginBox {
background-color: rgb(24,24,24);
position : absolute;
width: 400px;
display:flex;
justify-content: center;
padding: 40px;
border-radius: 20px;
box-shadow:0 5px 25px #000000;
}
.form {
position:relative;
width:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
gap: 15px;
}
.inputBox input {
width:100%;
background:rgb(255, 0 255);
border: none;
margin-right: 50px;
padding-left: 10px;
padding-top:10px;
padding-bottom:10px;
outline:none;
border-radius: 4px;
font-size:1.35em;
}
.inputBox p{
position:relative;
z-index: 100;
font-family:sans-serif ;
color:rgb(239,60,168);
transition:0.5;
}
.register{
color:rgb(239,60,168);
width: 100%;
align-items:center;
display:flex;
justify-content: center;
cursor: pointer;
}
input[type = "submit"] {
background-color: rgb(239,60,168);
cursor: pointer;
padding:10px;
font-size:1.35em;
}
input[type = "submit"]:active{
opacity:0.8;
}

77
frontend/src/assets/styleLogin.css Normal file
View File

@ -0,0 +1,77 @@
.logBoxCenterer {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loginBox {
background-color: rgb(24,24,24);
position : absolute;
width: 400px;
display:flex;
justify-content: center;
padding: 40px;
border-radius: 20px;
box-shadow:0 5px 25px #000000;
}
.form {
position:relative;
width:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
gap: 15px;
}
.inputBox input {
width:100%;
background:rgb(255, 0 255);
border: none;
margin-right: 50px;
padding-left: 10px;
padding-top:10px;
padding-bottom:10px;
outline:none;
border-radius: 4px;
font-size:1.35em;
}
.inputBox p{
position:relative;
z-index: 100;
font-family:sans-serif ;
color:rgb(239,60,168);
transition:0.5;
}
.register{
color:rgb(239,60,168);
width: 100%;
align-items:center;
display:flex;
justify-content: center;
cursor: pointer;
}
input[type = "submit"] {
background-color: rgb(239,60,168);
cursor: pointer;
padding:10px;
font-size:1.35em;
}
input[type = "submit"]:active{
opacity:0.8;
}

2
frontend/src/main.js
View File

@ -1,5 +1,5 @@
import './assets/main.css'
import './assets/styleLogin.css'
tonitch commented 2024-03-02 22:32:29 +01:00
Outdated
Review
Copy Link

Le fait de mettre le style ici fait que cette feuille de style est chargé pour tout le site (dont la page principale) ce qui pourrait ne pas être désirable.

Le mieux est soit d'utiliser le propre main.js pour la page de login (genre login.js) et de tout refaire dedans (pour ainsi profiter de vue.js dans la page de login)

soit comme c'est le cas maintenant de faire la page en pure html/css sans vue.js et du coup de pas charger ce script et de suprimer le chargement (ligne * référencé). La méthode actuellement n'est pas correcte car elle tente de charger une page Vue dans #app qui n'éxiste pas. (tu peux le voir dans la console quand tu vas sur la page de login)

Le fait de mettre le style ici fait que cette feuille de style est chargé pour tout le site (dont la page principale) ce qui pourrait ne pas être désirable. Le mieux est soit d'utiliser le propre main.js pour la page de login (genre login.js) et de tout refaire dedans (pour ainsi profiter de vue.js dans la page de login) soit comme c'est le cas maintenant de faire la page en pure html/css sans vue.js et du coup de pas charger ce script et de suprimer le chargement (ligne * référencé). La méthode actuellement n'est pas correcte car elle tente de charger une page Vue dans #app qui n'éxiste pas. (tu peux le voir dans la console quand tu vas sur la page de login)
👍 1
tonitch commented 2024-03-02 22:36:58 +01:00
Outdated
Review
Copy Link

ps: Si tu souhaite que je clean tout ça moi même ça ne me dérange pas non plus.

ps: Si tu souhaite que je clean tout ça moi même ça ne me dérange pas non plus.
import 'vue3-toastify/dist/index.css';
import { createApp } from 'vue'