348 lines
9.4 KiB
HTML
348 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Admin Login - Sky Art Shop</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css"
|
|
/>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
.login-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
.logo-section {
|
|
flex: 1;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
}
|
|
.logo-content {
|
|
text-align: center;
|
|
max-width: 1100px;
|
|
}
|
|
.logo-image {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.form-section {
|
|
flex: 1;
|
|
background-color: #ffd0d0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.login-box {
|
|
background: white;
|
|
border: 2px solid #333;
|
|
padding: 60px 50px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.login-title {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
}
|
|
.login-subtitle {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
font-size: 1rem;
|
|
}
|
|
.form-control {
|
|
border: 2px solid #ddd;
|
|
padding: 12px 15px;
|
|
font-size: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
.form-control:focus {
|
|
border-color: #333;
|
|
box-shadow: none;
|
|
}
|
|
.btn-group-custom {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.btn-custom {
|
|
flex: 1;
|
|
padding: 12px 20px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border: 2px solid #333;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.btn-login {
|
|
background-color: white;
|
|
color: #333;
|
|
}
|
|
.btn-login:hover {
|
|
background-color: #333;
|
|
color: white;
|
|
}
|
|
.btn-reset {
|
|
background-color: white;
|
|
color: #333;
|
|
}
|
|
.btn-reset:hover {
|
|
background-color: #333;
|
|
color: white;
|
|
}
|
|
.back-link {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
.back-link a {
|
|
color: #ff6b6b;
|
|
text-decoration: none;
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
.back-link a:hover {
|
|
color: #ff5252;
|
|
text-decoration: underline;
|
|
}
|
|
.alert {
|
|
margin-bottom: 25px;
|
|
border-radius: 4px;
|
|
padding: 12px 15px;
|
|
display: none;
|
|
}
|
|
.alert.show {
|
|
display: block;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.login-container {
|
|
flex-direction: column;
|
|
}
|
|
.logo-section,
|
|
.form-section {
|
|
flex: none;
|
|
height: 50vh;
|
|
}
|
|
.color-code {
|
|
font-size: 18px;
|
|
}
|
|
.login-box {
|
|
padding: 40px 30px;
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
.login-box {
|
|
padding: 30px 20px;
|
|
}
|
|
.login-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<!-- Left Section - Logo -->
|
|
<div class="logo-section">
|
|
<div class="logo-content">
|
|
<img
|
|
src="/uploads/cat-logo-template-page-20251224-194356-0000-1766724728795-173839741.png"
|
|
alt="Sky Art Shop Logo"
|
|
class="logo-image"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
|
|
/>
|
|
<div style="display: none">
|
|
<svg
|
|
width="400"
|
|
height="300"
|
|
viewBox="0 0 400 300"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<!-- Cat Silhouette -->
|
|
<path
|
|
d="M120 80 Q100 60 90 80 L80 100 Q70 120 80 140 L100 160 Q110 180 140 180 L160 185 Q180 190 200 180 L220 160 Q230 140 220 120 L210 100 Q200 80 180 80 Z"
|
|
fill="#000"
|
|
/>
|
|
<circle cx="110" cy="100" r="8" fill="#000" />
|
|
<circle cx="170" cy="100" r="8" fill="#000" />
|
|
<!-- Text -->
|
|
<text
|
|
x="50"
|
|
y="240"
|
|
font-family="'Brush Script MT', cursive"
|
|
font-size="48"
|
|
fill="#000"
|
|
>
|
|
Sky Art Shop
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section - Form -->
|
|
<div class="form-section">
|
|
<div class="login-box">
|
|
<h1 class="login-title">Sky Art Shop</h1>
|
|
<p class="login-subtitle">Admin Panel Login</p>
|
|
|
|
<div class="alert alert-danger" role="alert" id="errorAlert"></div>
|
|
|
|
<form id="loginForm">
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Username:</label>
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
placeholder="Enter your email"
|
|
autocomplete="username"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password:</label>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
placeholder="Enter your password"
|
|
autocomplete="current-password"
|
|
/>
|
|
</div>
|
|
|
|
<div class="btn-group-custom">
|
|
<button type="submit" class="btn-custom btn-login" id="loginBtn">
|
|
Login
|
|
</button>
|
|
<button type="reset" class="btn-custom btn-reset">Reset</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="back-link">
|
|
<a href="/">Back to Website</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const loginForm = document.getElementById("loginForm");
|
|
const emailInput = document.getElementById("email");
|
|
const passwordInput = document.getElementById("password");
|
|
const errorAlert = document.getElementById("errorAlert");
|
|
const loginBtn = document.getElementById("loginBtn");
|
|
|
|
async function handleLogin(e) {
|
|
if (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
// Check if form is valid
|
|
if (!loginForm.checkValidity()) {
|
|
loginForm.reportValidity();
|
|
return false;
|
|
}
|
|
|
|
const email = emailInput.value.trim();
|
|
const password = passwordInput.value;
|
|
|
|
if (!email || !password) {
|
|
errorAlert.innerHTML =
|
|
'<i class="bi bi-exclamation-triangle"></i> Please enter both email and password';
|
|
errorAlert.classList.add("show");
|
|
return false;
|
|
}
|
|
|
|
// Disable button during login
|
|
loginBtn.disabled = true;
|
|
loginBtn.textContent = "Logging in...";
|
|
errorAlert.classList.remove("show");
|
|
|
|
try {
|
|
const response = await fetch("/api/admin/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
credentials: "include",
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok && data.success) {
|
|
// Login successful - redirect to dashboard
|
|
window.location.href = "/admin/dashboard";
|
|
} else {
|
|
// Show error
|
|
errorAlert.innerHTML =
|
|
'<i class="bi bi-exclamation-triangle"></i> ' +
|
|
(data.message || "Invalid credentials");
|
|
errorAlert.classList.add("show");
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = "Login";
|
|
}
|
|
} catch (error) {
|
|
console.error("Login error:", error);
|
|
errorAlert.innerHTML =
|
|
'<i class="bi bi-exclamation-triangle"></i> Login failed. Please try again.';
|
|
errorAlert.classList.add("show");
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = "Login";
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
// Handle form submission
|
|
loginForm.addEventListener("submit", handleLogin);
|
|
|
|
// Handle Enter key on both fields
|
|
function handleEnterKey(e) {
|
|
if (e.key === "Enter" || e.keyCode === 13 || e.which === 13) {
|
|
handleLogin(e);
|
|
}
|
|
}
|
|
|
|
emailInput.addEventListener("keydown", handleEnterKey);
|
|
passwordInput.addEventListener("keydown", handleEnterKey);
|
|
</script>
|
|
</body>
|
|
</html>
|