Login et agencement de la main page #51
11
frontend/login.html
Normal file
11
frontend/login.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Clyde - Login</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type=module src="/src/login.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -13,55 +13,102 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul style="padding-top:60px"class="vertical">
|
<div class="container">
|
||||||
<li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
|
|
||||||
<div class="text">Messages</div> </a></li>
|
|
||||||
<li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
|
|
||||||
<div class="text">Notifications</div></a></li>
|
|
||||||
<li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
|
|
||||||
<div class="text">Schedules</div></a></li>
|
|
||||||
<li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
|
|
||||||
<div class="text">Forum</div></a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
|
<div class="topBar">
|
||||||
|
<ul class="horizontal">
|
||||||
<li title="Home">
|
<li title="Home">
|
||||||
<a href="#home">
|
<a href="#home">
|
||||||
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
||||||
</a>
|
</a></li>
|
||||||
</li>
|
|
||||||
<li title="Home">
|
<li title="Home">
|
||||||
<a href="#home">
|
<a href="#home">
|
||||||
<item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||||
</a>
|
</a></li>
|
||||||
</li>
|
|
||||||
<li style="float: right;" title="Account">
|
<li style="float: right;" title="Account">
|
||||||
<a href="#Account">
|
<a href="/login">
|
||||||
<item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
<div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||||
</a></li>
|
</a></li>
|
||||||
<li style="float: right;" title="Notifications">
|
<li style="float: right;" title="Notifications">
|
||||||
<a href="#Notifications">
|
<a href="#Notifications">
|
||||||
<item class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||||
</a></li>
|
</a></li>
|
||||||
<li style="float: right;" title="Options">
|
<li style="float: right;" title="Options">
|
||||||
<a href="#Options">
|
<a href="#Options">
|
||||||
<item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||||
</a></li>
|
</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leftBar">
|
||||||
|
<ul class="vertical">
|
||||||
|
<li style="margin-top: 25px;" >
|
||||||
|
<a href="#Messages">
|
||||||
|
<div class="fa-solid fa-comment" style="font-size: 40px;"></div>
|
||||||
|
<div class="text">Messages</div>
|
||||||
|
</a></li>
|
||||||
|
<li >
|
||||||
|
<a href="#Notifications">
|
||||||
|
<div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
|
||||||
|
<div class="text">Notifications</div>
|
||||||
|
</a></li>
|
||||||
|
<li >
|
||||||
|
<a href="#Schedule">
|
||||||
|
<div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
|
||||||
|
<div class="text">Schedules</div>
|
||||||
|
</a></li>
|
||||||
|
<li ><a href="#Forum">
|
||||||
|
<div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
|
||||||
|
<div class="text">Forum</div></a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<div style="background-color: rgb(239,50,168); margin:50px;">Il FAUDRA INSERER LA PAGE ICI</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
|
.container{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
|
||||||
|
grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
|
||||||
|
grid-template-areas:
|
||||||
|
"topBar topBar"
|
||||||
|
"leftBar page";
|
||||||
|
row-gap:0px;
|
||||||
|
column-gap:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
grid-area:page;
|
||||||
|
place-self:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topBar{
|
||||||
|
grid-area:topBar;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftBar{
|
||||||
|
grid-area:leftBar;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
ul.vertical{
|
ul.vertical{
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin-top: 61px;
|
||||||
padding: 0;
|
top:0;
|
||||||
|
left:0;
|
||||||
|
padding: 25px 0 0;
|
||||||
width: 70px ;
|
width: 70px ;
|
||||||
background-color: rgb(53, 53, 53);
|
background-color: rgb(53, 53, 53);
|
||||||
border-right:5px;
|
border-right:5px;
|
||||||
border-color:black;
|
border-color:black;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
overflow:auto;
|
overflow:;
|
||||||
transition-duration: .3s;
|
transition-duration: .3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,7 +123,6 @@
|
|||||||
background-color: rgb(112, 112, 112);
|
background-color: rgb(112, 112, 112);
|
||||||
border-radius:6px;
|
border-radius:6px;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
transform: translate(0px ,1px);
|
transform: translate(0px ,1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,11 +137,14 @@
|
|||||||
}
|
}
|
||||||
ul.horizontal {
|
ul.horizontal {
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
|
box-shadow: 0px 3px 3px rgb(0, 0, 0);
|
||||||
display: block ;
|
display: block ;
|
||||||
list-style-type:none;
|
list-style-type:none;
|
||||||
margin:0;
|
margin:0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left:0;
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height:61px;
|
height:61px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -121,7 +170,8 @@
|
|||||||
ul.vertical:hover {
|
ul.vertical:hover {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
border-radius: 40px;
|
border-top-right-radius: 40px;
|
||||||
|
box-shadow: 3px 0px 3px rgb(0, 0, 0);
|
||||||
transition-duration: .3s;
|
transition-duration: .3s;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
105
frontend/src/Login.vue
Normal file
105
frontend/src/Login.vue
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<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">
|
||||||
|
<p>USERNAME</p>
|
||||||
|
<input type="text" required>
|
||||||
|
</div>
|
||||||
|
<div class="inputBox">
|
||||||
|
<p>PASSWORD</p>
|
||||||
|
<input type="password" required>
|
||||||
|
</div>
|
||||||
|
<div class="register">
|
||||||
|
<a>Register</a>
|
||||||
|
</div>
|
||||||
|
<div class="inputBox">
|
||||||
|
<input type="submit" value="Login">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -2,4 +2,3 @@ body {
|
|||||||
background-color: rgb(53, 25, 60);
|
background-color: rgb(53, 25, 60);
|
||||||
margin:0;
|
margin:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|||||||
|
|||||||
6
frontend/src/login.js
Normal file
6
frontend/src/login.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './Login.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import './assets/main.css'
|
import './assets/main.css'
|
||||||
|
|
||||||
import 'vue3-toastify/dist/index.css';
|
import 'vue3-toastify/dist/index.css';
|
||||||
tonitch
commented
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)
tonitch
commented
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 { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
|||||||
Reference in New Issue
Block a user
j'aime bien.