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>
|
||||
|
||||
<template>
|
||||
<ul style="padding-top:60px"class="vertical">
|
||||
<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>
|
||||
<div class="container">
|
||||
|
||||
<ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
|
||||
<div class="topBar">
|
||||
<ul class="horizontal">
|
||||
<li title="Home">
|
||||
<a href="#home">
|
||||
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
||||
</a>
|
||||
</li>
|
||||
</a></li>
|
||||
<li title="Home">
|
||||
<a href="#home">
|
||||
<item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
||||
</a>
|
||||
</li>
|
||||
<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||
</a></li>
|
||||
<li style="float: right;" title="Account">
|
||||
<a href="#Account">
|
||||
<item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item>
|
||||
<a href="/login">
|
||||
<div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||
</a></li>
|
||||
<li style="float: right;" title="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>
|
||||
<li style="float: right;" title="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>
|
||||
</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>
|
||||
|
||||
<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{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 61px;
|
||||
top:0;
|
||||
left:0;
|
||||
padding: 25px 0 0;
|
||||
width: 70px ;
|
||||
background-color: rgb(53, 53, 53);
|
||||
border-right:5px;
|
||||
border-color:black;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
overflow:auto;
|
||||
overflow:;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
@ -76,7 +123,6 @@
|
||||
background-color: rgb(112, 112, 112);
|
||||
border-radius:6px;
|
||||
color: white;
|
||||
|
||||
transform: translate(0px ,1px);
|
||||
}
|
||||
|
||||
@ -91,11 +137,14 @@
|
||||
}
|
||||
ul.horizontal {
|
||||
z-index: 101;
|
||||
box-shadow: 0px 3px 3px rgb(0, 0, 0);
|
||||
display: block ;
|
||||
list-style-type:none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left:0;
|
||||
|
||||
position: fixed;
|
||||
height:61px;
|
||||
width: 100%;
|
||||
@ -121,7 +170,8 @@
|
||||
ul.vertical:hover {
|
||||
z-index: 100;
|
||||
width: 250px;
|
||||
border-radius: 40px;
|
||||
border-top-right-radius: 40px;
|
||||
box-shadow: 3px 0px 3px rgb(0, 0, 0);
|
||||
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);
|
||||
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 'vue3-toastify/dist/index.css';
|
||||
|
||||
import { createApp } from 'vue'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user