mirror of https://github.com/xfarrow/blink
new login page
This commit is contained in:
Alessandro Ferro
parent
bb86034835
commit
a94703acf8
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -1,41 +1,88 @@
|
||||||
<!DOCTYPE html>
|
<html>
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
<title>Log in - Blink</title>
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="../css/login-register.css">
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||||
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.divider:after,
|
||||||
|
.divider:before {
|
||||||
|
content: "";
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-custom {
|
||||||
|
height: calc(100% - 73px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
.h-custom {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- partial:index.partial.html -->
|
<section class="vh-100">
|
||||||
<div id="login-form-wrap">
|
<div class="container-fluid h-custom">
|
||||||
<h2>Login</h2>
|
<div class="row d-flex justify-content-center align-items-center h-100">
|
||||||
<form id="login-form" method="POST">
|
<div class="col-md-9 col-lg-6 col-xl-5">
|
||||||
|
<img id="image" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
|
||||||
|
<form>
|
||||||
|
|
||||||
<p>
|
<div class="divider d-flex align-items-center my-4">
|
||||||
<input type="email" id="email" name="email" placeholder="Email Address" required><i
|
<p class="text-center fw-bold mx-3 mb-0">Sign In</p>
|
||||||
class="validation"><span></span><span></span></i>
|
</div>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<!-- Email input -->
|
||||||
<input type="password" id="password" name="password" placeholder="Password" required><i
|
<div class="form-outline mb-4">
|
||||||
class="validation"><span></span><span></span></i>
|
<input type="email" id="email" class="form-control form-control-lg"
|
||||||
</p>
|
placeholder="Enter a valid email address" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>
|
<!-- Password input -->
|
||||||
<button type="button" onclick="login()">Login</button>
|
<div class="form-outline mb-3">
|
||||||
</p>
|
<input type="password" id="password" class="form-control form-control-lg" placeholder="Enter password" />
|
||||||
</form>
|
</div>
|
||||||
<div id="create-account-wrap">
|
|
||||||
<p>Not a member? <a href="./register.html">Create Account</a>
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<p>
|
<!-- Checkbox -->
|
||||||
|
<div class="form-check mb-0">
|
||||||
|
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
|
||||||
|
<label class="form-check-label" for="form2Example3">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<a href="#!" class="text-body">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center text-lg-start mt-4 pt-2">
|
||||||
|
<button type="button" onclick="login()" class="btn btn-primary btn-lg"
|
||||||
|
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
|
||||||
|
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="register.html"
|
||||||
|
class="link-danger">Register</a></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<script src="../js/constants.js"></script>
|
<script src="../js/constants.js"></script>
|
||||||
<script src="../js/utils.js"></script>
|
<script src="../js/utils.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
window.onload = function () {
|
||||||
|
loadImage();
|
||||||
|
}
|
||||||
|
|
||||||
async function login() {
|
async function login() {
|
||||||
const email = document.getElementById("email").value;
|
const email = document.getElementById("email").value;
|
||||||
const password = document.getElementById("password").value;
|
const password = document.getElementById("password").value;
|
||||||
|
|
@ -64,6 +111,17 @@
|
||||||
//callbackErrors(data.errors, alert);
|
//callbackErrors(data.errors, alert);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadImage(){
|
||||||
|
const random = Math.floor(Math.random() * 2);
|
||||||
|
if(random == 0){
|
||||||
|
document.getElementById('image').src = '../content/stock_photo_1.png';
|
||||||
|
}
|
||||||
|
else if(random == 1){
|
||||||
|
document.getElementById('image').src = '../content/stock_photo_2.png';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue