PTS/SkyArtShop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

updateweb

Browse Source
This commit is contained in:
Local Server
2026-01-01 22:24:30 -06:00
parent 017c6376fc
commit 1919f6f8bb
185 changed files with 19860 additions and 17603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
website/admin/login.html
View File

@@ -5,121 +5,261 @@
<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.0/dist/css/bootstrap.min.css"
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 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
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;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
.login-card {
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 40px;
max-width: 400px;
width: 100%;
}
.login-header {
.logo-content {
text-align: center;
margin-bottom: 30px;
max-width: 1100px;
}
.login-header h1 {
color: #2c3e50;
font-size: 28px;
.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-header p {
color: #7f8c8d;
margin: 0;
.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-radius: 8px;
padding: 12px;
border: 2px solid #e0e0e0;
border: 2px solid #ddd;
padding: 12px 15px;
font-size: 1rem;
border-radius: 4px;
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px;
padding: 12px;
color: white;
font-weight: 600;
width: 100%;
transition: transform 0.2s;
background-color: white;
color: #333;
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
background-color: #333;
color: white;
}
.btn-login:disabled {
opacity: 0.6;
cursor: not-allowed;
.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 {
border-radius: 8px;
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-card">
<div class="login-header">
<h1>🛍️ Sky Art Shop</h1>
<p>Admin Panel Login</p>
<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>
<div class="alert alert-danger" role="alert" id="errorAlert"></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>
<form id="loginForm">
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input
type="email"
class="form-control"
id="email"
name="email"
required
placeholder="admin@example.com"
autocomplete="username"
/>
</div>
<div class="mb-4">
<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>
<button type="submit" class="btn btn-login" id="loginBtn">Sign In</button>
</form>
<div class="alert alert-danger" role="alert" id="errorAlert"></div>
<div class="text-center mt-4">
<a
href="/home.html"
class="text-decoration-none"
style="color: #667eea"
>← Back to Website</a
>
<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.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document
.getElementById("loginForm")
@@ -133,8 +273,8 @@
// Disable button during login
loginBtn.disabled = true;
loginBtn.textContent = "Signing in...";
errorAlert.style.display = "none";
loginBtn.textContent = "Logging in...";
errorAlert.classList.remove("show");
try {
const response = await fetch("/api/admin/login", {
@@ -150,20 +290,23 @@
if (response.ok && data.success) {
// Login successful - redirect to dashboard
window.location.href = "/admin/dashboard.html";
window.location.href = "/admin/dashboard";
} else {
// Show error
errorAlert.textContent = data.message || "Invalid credentials";
errorAlert.style.display = "block";
errorAlert.innerHTML =
'<i class="bi bi-exclamation-triangle"></i> ' +
(data.message || "Invalid credentials");
errorAlert.classList.add("show");
loginBtn.disabled = false;
loginBtn.textContent = "Sign In";
loginBtn.textContent = "Login";
}
} catch (error) {
console.error("Login error:", error);
errorAlert.textContent = "Login failed. Please try again.";
errorAlert.style.display = "block";
errorAlert.innerHTML =
'<i class="bi bi-exclamation-triangle"></i> Login failed. Please try again.';
errorAlert.classList.add("show");
loginBtn.disabled = false;
loginBtn.textContent = "Sign In";
loginBtn.textContent = "Login";
}
});
</script>