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

Compare commits

base: PGL:21a42737a2caffba56f10541a14a262a6ce38cc3
Branches Tags
PGL:master PGL:tonitch/fix/scrollIsue PGL:tonitch/max/front/fix/vue PGL:Schedule/master PGL:wal/front/temp
PGL:JalonB PGL:jalonA
..
compare: PGL:9850f2145cb5aeeab6607c2193393bc6468c67b6
Branches Tags
PGL:master PGL:tonitch/fix/scrollIsue PGL:tonitch/max/front/fix/vue PGL:Schedule/master PGL:wal/front/temp
PGL:JalonB PGL:jalonA

6 Commits
21a42737a2 ... 9850f2145c

Author SHA1 Message Date
Anthony Debucquoy
9850f2145c Fixing the login page availability
All checks were successful
Build and test backend / Build-backend (push) Successful in 2m8s
Details
Build and test backend / Test-backend (push) Successful in 1m24s
Details
deploy to production / deploy-frontend (push) Successful in 23s
Details
deploy to production / deploy-backend (push) Successful in 2m20s
Details
Build and test FrontEnd / Build-frontend (push) Successful in 20s
Details 
To access the login page you need login.html. Then this page loads the
login.js that generate the login.vue in the div#app (with the '#app')
 2024-03-04 19:42:57 +01:00
Wawilski
25fe568148 Convert login.html to Login.vue 2024-03-04 19:42:57 +01:00
Wawilski
672d17cf0e New file for login's style 2024-03-04 19:42:57 +01:00
Wawilski
49196caccc Grid setup frontend 2024-03-04 19:42:57 +01:00
Wawilski
0b0fe9ae78 Table for navigation bars 2024-03-04 19:42:57 +01:00
Wawilski
057d8ff001 Login prototype 2024-03-04 19:42:57 +01:00
6 changed files with 197 additions and 27 deletions
Expand all files Collapse all files

11
frontend/login.html Normal file
View 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>

100
frontend/src/App.vue
View File

@ -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>
</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> </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
View 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>

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

@ -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
View File

@ -0,0 +1,6 @@
import './assets/main.css'
import { createApp } from 'vue'
import App from './Login.vue'
createApp(App).mount('#app')

1
frontend/src/main.js
View File

@ -1,5 +1,4 @@
import './assets/main.css' import './assets/main.css'
import 'vue3-toastify/dist/index.css'; import 'vue3-toastify/dist/index.css';
import { createApp } from 'vue' import { createApp } from 'vue'