2026-01-18 02:22:05 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>Sign In | Sky Art Shop</title>
|
2026-01-19 01:17:43 -06:00
|
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
2026-01-18 02:22:05 -06:00
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
|
|
|
/>
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
|
|
|
<link
|
|
|
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
|
|
|
|
<style>
|
|
|
|
|
* {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--color-bg-main: #ffebeb;
|
|
|
|
|
--color-bg-secondary: #ffd0d0;
|
|
|
|
|
--color-bg-promotion: #f6ccde;
|
|
|
|
|
--color-accent: #fcb1d8;
|
|
|
|
|
--color-text-main: #202023;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
135deg,
|
|
|
|
|
#ffebeb 0%,
|
|
|
|
|
#ffd0d0 50%,
|
|
|
|
|
#f6ccde 100%
|
|
|
|
|
);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Decorative elements */
|
|
|
|
|
.bg-decoration {
|
|
|
|
|
position: fixed;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
filter: blur(60px);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
z-index: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-decoration.one {
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 400px;
|
|
|
|
|
background: #fcb1d8;
|
|
|
|
|
top: -100px;
|
|
|
|
|
left: -100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-decoration.two {
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
background: #f6ccde;
|
|
|
|
|
bottom: -50px;
|
|
|
|
|
right: -50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-decoration.three {
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
background: #ffd0d0;
|
|
|
|
|
top: 50%;
|
|
|
|
|
right: 20%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.auth-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 450px;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Logo Section */
|
|
|
|
|
.logo-section {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logo-wrapper {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 120px;
|
|
|
|
|
margin: 0 auto 20px;
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
box-shadow: 0 10px 40px rgba(252, 177, 216, 0.4),
|
|
|
|
|
0 0 0 8px rgba(255, 255, 255, 0.5);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logo-wrapper img {
|
|
|
|
|
width: 90px;
|
|
|
|
|
height: 90px;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logo-section h1 {
|
|
|
|
|
font-size: 1.75rem;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: var(--color-text-main);
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logo-section p {
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 0.95rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Form Card */
|
|
|
|
|
.form-card {
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 24px;
|
|
|
|
|
padding: 40px 36px;
|
|
|
|
|
box-shadow: 0 20px 60px rgba(252, 177, 216, 0.25),
|
|
|
|
|
0 8px 20px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Form Fields */
|
|
|
|
|
.form-group {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-group label {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: var(--color-text-main);
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field i.field-icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 16px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
transition: color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 15px 48px 15px 48px;
|
|
|
|
|
border: 2px solid #f0f0f0;
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
background: #fafafa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field input:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
border-color: var(--color-accent);
|
|
|
|
|
background: white;
|
|
|
|
|
box-shadow: 0 0 0 4px rgba(252, 177, 216, 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field input:focus + i.field-icon,
|
|
|
|
|
.input-field input:focus ~ i.field-icon {
|
|
|
|
|
color: var(--color-accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field .toggle-password {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 16px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
color: #999;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
transition: color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field .toggle-password:hover {
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Options Row */
|
|
|
|
|
.options-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.remember-check {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.remember-check input[type="checkbox"] {
|
|
|
|
|
width: 18px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
accent-color: var(--color-accent);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.remember-check span {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
color: #555;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.forgot-link {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
color: #e85a9c;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
transition: color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.forgot-link:hover {
|
|
|
|
|
color: #d14485;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Submit Button */
|
|
|
|
|
.btn-signin {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
background: linear-gradient(135deg, #fcb1d8 0%, #f6ccde 100%);
|
|
|
|
|
color: var(--color-text-main);
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-signin::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
transparent,
|
|
|
|
|
rgba(255, 255, 255, 0.4),
|
|
|
|
|
transparent
|
|
|
|
|
);
|
|
|
|
|
transition: left 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-signin:hover::before {
|
|
|
|
|
left: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-signin:hover {
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
box-shadow: 0 12px 28px rgba(252, 177, 216, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-signin:disabled {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Spinner */
|
|
|
|
|
.spinner {
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border: 2px solid rgba(32, 32, 35, 0.2);
|
|
|
|
|
border-top-color: var(--color-text-main);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: spin 0.8s linear infinite;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Divider */
|
|
|
|
|
.divider {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 28px 0;
|
|
|
|
|
color: #999;
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.divider::before,
|
|
|
|
|
.divider::after {
|
|
|
|
|
content: "";
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.divider span {
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Social Buttons */
|
|
|
|
|
.social-btns {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.social-btn {
|
|
|
|
|
padding: 14px 12px;
|
|
|
|
|
border: 2px solid #f0f0f0;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
background: white;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.social-btn:hover {
|
|
|
|
|
border-color: var(--color-accent);
|
|
|
|
|
background: #fff9fc;
|
|
|
|
|
transform: translateY(-1px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.social-btn.google {
|
|
|
|
|
color: #ea4335;
|
|
|
|
|
}
|
|
|
|
|
.social-btn.facebook {
|
|
|
|
|
color: #1877f2;
|
|
|
|
|
}
|
|
|
|
|
.social-btn.apple {
|
|
|
|
|
color: #000000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Footer Link */
|
|
|
|
|
.form-footer {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 28px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-footer p {
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 0.95rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-footer a {
|
|
|
|
|
color: #e85a9c;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
transition: color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-footer a:hover {
|
|
|
|
|
color: #d14485;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Toast Notification */
|
|
|
|
|
.toast {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 24px;
|
|
|
|
|
right: 24px;
|
|
|
|
|
padding: 16px 24px;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 0.95rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
transform: translateX(120%);
|
|
|
|
|
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.show {
|
|
|
|
|
transform: translateX(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.success {
|
|
|
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.error {
|
|
|
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.info {
|
|
|
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Error State */
|
|
|
|
|
.input-field.error input {
|
|
|
|
|
border-color: #ef4444;
|
|
|
|
|
background: #fef2f2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field.error i.field-icon {
|
|
|
|
|
color: #ef4444;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error-message {
|
|
|
|
|
color: #ef4444;
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field.error + .error-message {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Back to home link */
|
|
|
|
|
.back-home {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-home a {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
color: #666;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-home a:hover {
|
|
|
|
|
color: var(--color-text-main);
|
|
|
|
|
background: rgba(252, 177, 216, 0.2);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Background decorations -->
|
|
|
|
|
<div class="bg-decoration one"></div>
|
|
|
|
|
<div class="bg-decoration two"></div>
|
|
|
|
|
<div class="bg-decoration three"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Toast Notification -->
|
|
|
|
|
<div class="toast" id="toast">
|
|
|
|
|
<i class="bi bi-check-circle"></i>
|
|
|
|
|
<span id="toastMessage">Message</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="auth-container">
|
|
|
|
|
<!-- Logo Section -->
|
|
|
|
|
<div class="logo-section">
|
|
|
|
|
<div class="logo-wrapper">
|
|
|
|
|
<img
|
|
|
|
|
src="/uploads/cat-logo-only-1766962993568-201212396.png"
|
|
|
|
|
alt="Sky Art Shop"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<h1>Welcome Back!</h1>
|
|
|
|
|
<p>Sign in to continue your creative journey</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Form Card -->
|
|
|
|
|
<div class="form-card">
|
|
|
|
|
<form id="signinForm" novalidate>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="email">Email Address</label>
|
|
|
|
|
<div class="input-field">
|
|
|
|
|
<input
|
|
|
|
|
type="email"
|
|
|
|
|
id="email"
|
|
|
|
|
name="email"
|
|
|
|
|
placeholder="you@example.com"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<i class="bi bi-envelope field-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="error-message">Please enter a valid email address</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="password">Password</label>
|
|
|
|
|
<div class="input-field">
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
id="password"
|
|
|
|
|
name="password"
|
|
|
|
|
placeholder="Enter your password"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<i class="bi bi-lock field-icon"></i>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="toggle-password"
|
|
|
|
|
onclick="togglePassword()"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-eye" id="toggleIcon"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="error-message">Password is required</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="options-row">
|
|
|
|
|
<label class="remember-check">
|
|
|
|
|
<input type="checkbox" name="remember" id="remember" />
|
|
|
|
|
<span>Remember me</span>
|
|
|
|
|
</label>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="forgot-link"
|
|
|
|
|
onclick="showToast('Password reset coming soon!', 'info'); return false;"
|
|
|
|
|
>Forgot password?</a
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button type="submit" class="btn-signin" id="submitBtn">
|
|
|
|
|
<i class="bi bi-box-arrow-in-right"></i>
|
|
|
|
|
<span id="btnText">Sign In</span>
|
|
|
|
|
<div class="spinner" id="spinner"></div>
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<div class="divider">
|
|
|
|
|
<span>or continue with</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="social-btns">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="social-btn google"
|
|
|
|
|
onclick="showToast('Google login coming soon!', 'info')"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-google"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="social-btn facebook"
|
|
|
|
|
onclick="showToast('Facebook login coming soon!', 'info')"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-facebook"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="social-btn apple"
|
|
|
|
|
onclick="showToast('Apple login coming soon!', 'info')"
|
|
|
|
|
>
|
|
|
|
|
<i class="bi bi-apple"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-footer">
|
|
|
|
|
<p>Don't have an account?<a href="/signup">Create one</a></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="back-home">
|
|
|
|
|
<a href="/"><i class="bi bi-arrow-left"></i> Back to Shop</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Toggle password visibility
|
|
|
|
|
function togglePassword() {
|
|
|
|
|
const passwordInput = document.getElementById("password");
|
|
|
|
|
const toggleIcon = document.getElementById("toggleIcon");
|
|
|
|
|
|
|
|
|
|
if (passwordInput.type === "password") {
|
|
|
|
|
passwordInput.type = "text";
|
|
|
|
|
toggleIcon.classList.remove("bi-eye");
|
|
|
|
|
toggleIcon.classList.add("bi-eye-slash");
|
|
|
|
|
} else {
|
|
|
|
|
passwordInput.type = "password";
|
|
|
|
|
toggleIcon.classList.remove("bi-eye-slash");
|
|
|
|
|
toggleIcon.classList.add("bi-eye");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Toast notification
|
|
|
|
|
function showToast(message, type = "success") {
|
|
|
|
|
const toast = document.getElementById("toast");
|
|
|
|
|
const toastMessage = document.getElementById("toastMessage");
|
|
|
|
|
const icon = toast.querySelector("i");
|
|
|
|
|
|
|
|
|
|
toastMessage.textContent = message;
|
|
|
|
|
toast.className = "toast " + type;
|
|
|
|
|
|
|
|
|
|
// Update icon based on type
|
|
|
|
|
icon.className = "bi";
|
|
|
|
|
if (type === "success") icon.classList.add("bi-check-circle");
|
|
|
|
|
else if (type === "error") icon.classList.add("bi-exclamation-circle");
|
|
|
|
|
else if (type === "info") icon.classList.add("bi-info-circle");
|
|
|
|
|
|
|
|
|
|
toast.classList.add("show");
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
toast.classList.remove("show");
|
|
|
|
|
}, 4000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Form submission
|
|
|
|
|
document
|
|
|
|
|
.getElementById("signinForm")
|
|
|
|
|
.addEventListener("submit", async function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
const email = document.getElementById("email").value.trim();
|
|
|
|
|
const password = document.getElementById("password").value;
|
|
|
|
|
const remember = document.getElementById("remember").checked;
|
|
|
|
|
|
|
|
|
|
// Clear previous errors
|
|
|
|
|
document
|
|
|
|
|
.querySelectorAll(".input-field")
|
|
|
|
|
.forEach((f) => f.classList.remove("error"));
|
|
|
|
|
|
|
|
|
|
// Validate
|
|
|
|
|
let hasError = false;
|
|
|
|
|
|
|
|
|
|
if (!email || !email.includes("@")) {
|
|
|
|
|
document
|
|
|
|
|
.getElementById("email")
|
|
|
|
|
.parentElement.classList.add("error");
|
|
|
|
|
hasError = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!password) {
|
|
|
|
|
document
|
|
|
|
|
.getElementById("password")
|
|
|
|
|
.parentElement.classList.add("error");
|
|
|
|
|
hasError = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (hasError) return;
|
|
|
|
|
|
|
|
|
|
// Show loading state
|
|
|
|
|
const submitBtn = document.getElementById("submitBtn");
|
|
|
|
|
const btnText = document.getElementById("btnText");
|
|
|
|
|
const spinner = document.getElementById("spinner");
|
|
|
|
|
|
|
|
|
|
submitBtn.disabled = true;
|
|
|
|
|
btnText.style.display = "none";
|
|
|
|
|
submitBtn.querySelector("i").style.display = "none";
|
|
|
|
|
spinner.style.display = "block";
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch("/api/customers/login", {
|
|
|
|
|
method: "POST",
|
|
|
|
|
headers: { "Content-Type": "application/json" },
|
|
|
|
|
body: JSON.stringify({ email, password }),
|
|
|
|
|
credentials: "include",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
|
|
|
|
if (data.success) {
|
|
|
|
|
// Store customer data
|
|
|
|
|
localStorage.setItem("customer", JSON.stringify(data.customer));
|
|
|
|
|
|
|
|
|
|
if (remember) {
|
|
|
|
|
localStorage.setItem("rememberCustomer", "true");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showToast("Welcome back! Redirecting...", "success");
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = "/account";
|
|
|
|
|
}, 1200);
|
|
|
|
|
} else {
|
|
|
|
|
showToast(data.message || "Invalid email or password", "error");
|
|
|
|
|
|
|
|
|
|
// Reset button
|
|
|
|
|
submitBtn.disabled = false;
|
|
|
|
|
btnText.style.display = "inline";
|
|
|
|
|
submitBtn.querySelector("i").style.display = "inline";
|
|
|
|
|
spinner.style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("Login error:", error);
|
|
|
|
|
showToast("Connection error. Please try again.", "error");
|
|
|
|
|
|
|
|
|
|
// Reset button
|
|
|
|
|
submitBtn.disabled = false;
|
|
|
|
|
btnText.style.display = "inline";
|
|
|
|
|
submitBtn.querySelector("i").style.display = "inline";
|
|
|
|
|
spinner.style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Check if already logged in
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
const customer = localStorage.getItem("customer");
|
|
|
|
|
if (customer) {
|
|
|
|
|
try {
|
|
|
|
|
const parsed = JSON.parse(customer);
|
|
|
|
|
if (parsed && parsed.email) {
|
|
|
|
|
// Already logged in, redirect to account
|
|
|
|
|
window.location.href = "/account";
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
