updateweb
This commit is contained in:
Local Server
@@ -1,57 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center min-vh-100">
|
||||
<div class="col-md-5">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<h2 class="fw-bold"><i class="bi bi-shop text-primary"></i> SkyArtShop</h2>
|
||||
<p class="text-muted">Admin Login</p>
|
||||
</div>
|
||||
<% 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">Email address</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
|
||||
<input type="email" class="form-control" id="email" name="email" required autofocus>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-box-arrow-in-right"></i> Login</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="text-center mt-4">
|
||||
<small class="text-muted"><a href="/" class="text-decoration-none"><i class="bi bi-arrow-left"></i> Back to website</a></small>
|
||||
</div>
|
||||
<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 class="text-center mt-3">
|
||||
<small class="text-muted">Default: admin@example.com / password</small>
|
||||
</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
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="back-link">
|
||||
<a href="/">Back to Website</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user