Initial commit: MSPE website - full site with admin panel, API, and public pages
This commit is contained in:
Executable
+141
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||
<title>Admin Login - MSPE</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="/admin/css/admin.css">
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="login-logo">
|
||||
<i class="fas fa-cube"></i>
|
||||
<span>MSPE</span>
|
||||
</div>
|
||||
<h1>Admin Panel</h1>
|
||||
<p>Sign in to manage your website</p>
|
||||
</div>
|
||||
|
||||
<form id="login-form" class="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<div class="input-icon">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" id="username" name="username" required placeholder="Enter username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<div class="input-icon">
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" id="password" name="password" required placeholder="Enter password">
|
||||
<button type="button" class="toggle-password" tabindex="-1">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-options">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" name="remember">
|
||||
<span>Remember me</span>
|
||||
</label>
|
||||
<a href="/admin/reset-password.html" class="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">
|
||||
<span>Sign In</span>
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</button>
|
||||
|
||||
<div class="login-message" id="login-message"></div>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
<p>MSPE Admin Panel</p>
|
||||
<p>Secure access for authorized personnel only</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-bg">
|
||||
<div class="bg-shape bg-shape-1"></div>
|
||||
<div class="bg-shape bg-shape-2"></div>
|
||||
<div class="bg-shape bg-shape-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle password visibility
|
||||
document.querySelector('.toggle-password').addEventListener('click', function() {
|
||||
const input = document.getElementById('password');
|
||||
const icon = this.querySelector('i');
|
||||
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
icon.className = 'fas fa-eye-slash';
|
||||
} else {
|
||||
input.type = 'password';
|
||||
icon.className = 'fas fa-eye';
|
||||
}
|
||||
});
|
||||
|
||||
// Login form handler
|
||||
document.getElementById('login-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const remember = this.querySelector('input[name="remember"]').checked;
|
||||
const message = document.getElementById('login-message');
|
||||
const btn = this.querySelector('button[type="submit"]');
|
||||
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing in...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth.php', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: 'login',
|
||||
username,
|
||||
password,
|
||||
remember
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
message.className = 'login-message success';
|
||||
message.innerHTML = '<i class="fas fa-check-circle"></i> Login successful! Redirecting...';
|
||||
message.style.display = 'block';
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = '/admin/dashboard.html';
|
||||
}, 1000);
|
||||
} else {
|
||||
throw new Error(data.message || 'Invalid credentials');
|
||||
}
|
||||
} catch (error) {
|
||||
message.className = 'login-message error';
|
||||
message.innerHTML = '<i class="fas fa-exclamation-circle"></i> ' + error.message;
|
||||
message.style.display = 'block';
|
||||
|
||||
btn.innerHTML = '<span>Sign In</span><i class="fas fa-arrow-right"></i>';
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user