2025-12-13 17:53:34 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2026-01-01 22:24:30 -06:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title><%= title %></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: #f8f9fa;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 40px;
|
|
|
|
|
}
|
|
|
|
|
.logo-content {
|
|
|
|
|
text-align: center;
|
|
|
|
|
max-width: 500px;
|
|
|
|
|
}
|
|
|
|
|
.logo-image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
height: auto;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
.form-section {
|
|
|
|
|
flex: 1;
|
|
|
|
|
background-color: #ffd0d0;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 40px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.color-code {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
.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: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
@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="color-code">#ffd0d0</div>
|
|
|
|
|
<div class="login-box">
|
|
|
|
|
<h1 class="login-title">Sky Art Shop</h1>
|
|
|
|
|
<p class="login-subtitle">Admin Panel Login</p>
|
|
|
|
|
|
|
|
|
|
<% if (error === 'invalid') { %>
|
|
|
|
|
<div class="alert alert-danger">
|
|
|
|
|
<i class="bi bi-exclamation-triangle"></i> Invalid email or password
|
|
|
|
|
</div>
|
|
|
|
|
<% } else if (error === 'server') { %>
|
|
|
|
|
<div class="alert alert-danger">
|
|
|
|
|
<i class="bi bi-exclamation-triangle"></i> Server error. Please try
|
|
|
|
|
again.
|
|
|
|
|
</div>
|
|
|
|
|
<% } %>
|
|
|
|
|
|
|
|
|
|
<form method="POST" action="/admin/login">
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="email" class="form-label">Username:</label>
|
|
|
|
|
<input
|
|
|
|
|
type="email"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="email"
|
|
|
|
|
name="email"
|
|
|
|
|
placeholder="Enter your email"
|
|
|
|
|
required
|
|
|
|
|
autofocus
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="password" class="form-label">Password:</label>
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
class="form-control"
|
|
|
|
|
id="password"
|
|
|
|
|
name="password"
|
|
|
|
|
placeholder="Enter your password"
|
|
|
|
|
required
|
|
|
|
|
/>
|
2025-12-13 17:53:34 -06:00
|
|
|
</div>
|
2026-01-01 22:24:30 -06:00
|
|
|
|
|
|
|
|
<div class="btn-group-custom">
|
|
|
|
|
<button type="submit" class="btn-custom btn-login">Login</button>
|
|
|
|
|
<button type="reset" class="btn-custom btn-reset">Reset</button>
|
2025-12-13 17:53:34 -06:00
|
|
|
</div>
|
2026-01-01 22:24:30 -06:00
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<div class="back-link">
|
|
|
|
|
<a href="/">Back to Website</a>
|
2025-12-13 17:53:34 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 22:24:30 -06:00
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
</body>
|
2025-12-13 17:53:34 -06:00
|
|
|
</html>
|
