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

Login prototype

Browse Source
This commit is contained in:
Wawilski 2024-02-29 15:30:42 +01:00
parent 88108918dd
commit 1c1035ba95
3 changed files with 110 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/login.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<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>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2
frontend/src/App.vue
View File

@ -26,7 +26,7 @@
</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> <item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item>
</a></li> </a></li>
<li style="float: right;" title="Notifications"> <li style="float: right;" title="Notifications">

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

@ -3,3 +3,83 @@ body {
margin:0; margin:0;
} }
.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{
width: px;
}
.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;
}