Spaces:
Sleeping
Sleeping
<!-- | |
This is the login page template for the RedMindGPT application. | |
It contains a login form where users can enter their username and password to sign in. | |
The form includes validation to ensure that both fields are filled out before submission. | |
The page also includes styling using CSS and utilizes the AdminLTE and Font Awesome libraries for additional design elements. | |
--> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style> | |
/* CSS styles for the login page */ | |
.login-box-msg { | |
color: grey; | |
font-size: larger; | |
font-weight: bold; | |
} | |
.remember-me { | |
text-align: center; | |
} | |
</style> | |
<title>RedMindGPT</title> | |
<!-- AdminLTE CSS --> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css"> | |
<!-- Font Awesome --> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
</head> | |
<body class="hold-transition login-page" style="background-image: url('static/img/AI.jpg'); background-size: cover;"> | |
<div class="login-box"> | |
<div class="card"> | |
<!-- Logo --> | |
<div style="align-items: center;"> | |
<a href="#" style="color: blue; | |
font-size: 30px; | |
font-weight: bold; | |
margin-left: 80px; | |
margin-top: 20px; | |
"><b>RedMindGPT</b></a> | |
</div> | |
<form action='/validate-user' name='loginForm' method="post" onsubmit="return validateForm()"> | |
<div class="card-body login-card-body"> | |
<p class="login-box-msg">Sign in</p> | |
<div class="input-group mb-3"> | |
<input type="text" class="form-control" placeholder="Username" name="username" required> | |
<div class="input-group-append"> | |
<div class="input-group-text"> | |
<span class="fas fa-user"></span> | |
</div> | |
</div> | |
</div> | |
<div class="input-group mb-3"> | |
<input type="password" class="form-control" placeholder="Password" name="password" required> | |
<div class="input-group-append"> | |
<div class="input-group-text"> | |
<span class="fas fa-lock"></span> | |
</div> | |
</div> | |
</div> | |
<div class="row" style="align-content: center;"> | |
<div class="col-8"> | |
<div class="icheck-primary"> | |
<input type="checkbox" id="remember"> | |
<label for="remember"> | |
Remember Me | |
</label> | |
</div> | |
</div> | |
</div> | |
<div class="row" style="align-content: center;"> | |
<div class="col-4"> | |
<button type="submit" class="btn btn-primary btn-block">Sign In</button> | |
</div> | |
<div class="col-4"> | |
<button type="reset" class="btn btn-secondary btn-block">Clear</button> | |
</div> | |
</div> | |
</div> | |
</form> | |
</div> | |
</div> | |
<!-- jQuery --> | |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
<!-- Bootstrap 4 --> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> | |
<!-- AdminLTE App --> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script> | |
<script> | |
// JavaScript function to validate the login form | |
function validateForm() { | |
//alert("Validating form"); | |
var username = document.forms["loginForm"]["username"].value; | |
var password = document.forms["loginForm"]["password"].value; | |
if (username == "" || password == "") { | |
alert("Username and Password must be filled out"); | |
return false; | |
} | |
} | |
</script> | |
</body> | |
</html> | |