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

467
website/assets/css/design-system.css
View File

@@ -1,467 +0,0 @@
/* ================================================
MODERN DESIGN SYSTEM - Sky Art Shop
Inspired by leading ecommerce platforms
================================================ */
:root {
/* Primary Color Palette */
--primary: #FF6B6B;
--primary-dark: #EE5A52;
--primary-light: #FF9999;
--secondary: #4ECDC4;
--accent: #FFE66D;
/* Neutral Colors */
--text-primary: #2D3436;
--text-secondary: #636E72;
--text-muted: #B2BEC3;
--bg-primary: #FFFFFF;
--bg-secondary: #F8F9FA;
--bg-tertiary: #E9ECEF;
--border-color: #E1E8ED;
/* Status Colors */
--success: #00B894;
--warning: #FDCB6E;
--error: #D63031;
--info: #74B9FF;
/* Spacing System (8px base) */
--space-xs: 0.5rem; /* 8px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4rem; /* 64px */
--space-3xl: 6rem; /* 96px */
/* Typography */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Poppins', sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 2rem; /* 32px */
--font-size-4xl: 2.5rem; /* 40px */
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
/* Border Radius */
--radius-sm: 0.375rem; /* 6px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1rem; /* 16px */
--radius-2xl: 1.5rem; /* 24px */
--radius-full: 9999px;
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
/* Z-index layers */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* ================================================
RESET & BASE STYLES
================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-primary);
color: var(--text-primary);
background-color: var(--bg-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* ================================================
TYPOGRAPHY
================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
color: var(--text-primary);
}
h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-lg); }
h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-md); }
h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-md); }
h4 { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); }
h5 { font-size: var(--font-size-lg); margin-bottom: var(--space-sm); }
h6 { font-size: var(--font-size-base); margin-bottom: var(--space-sm); }
p {
margin-bottom: var(--space-sm);
color: var(--text-secondary);
}
a {
color: var(--primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-dark);
}
/* ================================================
CONTAINER & LAYOUT
================================================ */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.container-fluid {
width: 100%;
padding: 0 var(--space-lg);
}
.section {
padding: var(--space-3xl) 0;
}
.section-sm {
padding: var(--space-2xl) 0;
}
/* Grid System */
.grid {
display: grid;
gap: var(--space-lg);
}
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
/* ================================================
BUTTONS
================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
font-family: var(--font-primary);
font-size: var(--font-size-base);
font-weight: 500;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
color: white;
}
.btn-secondary {
background: var(--secondary);
color: white;
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.btn-ghost {
background: transparent;
color: var(--text-primary);
}
.btn-ghost:hover {
background: var(--bg-secondary);
}
.btn-sm {
padding: var(--space-xs) var(--space-md);
font-size: var(--font-size-sm);
}
.btn-lg {
padding: var(--space-md) var(--space-xl);
font-size: var(--font-size-lg);
}
.btn-icon {
padding: var(--space-sm);
border-radius: var(--radius-full);
}
/* ================================================
CARDS
================================================ */
.card {
background: var(--bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.card-body {
padding: var(--space-lg);
}
/* ================================================
BADGES
================================================ */
.badge {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-xs);
font-weight: 600;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-success { background: #C6F6D5; color: #22543D; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-error { background: #FED7D7; color: #742A2A; }
.badge-info { background: #DBEAFE; color: #1E3A8A; }
/* ================================================
FORMS
================================================ */
.form-group {
margin-bottom: var(--space-md);
}
.form-label {
display: block;
margin-bottom: var(--space-xs);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
}
.form-control {
width: 100%;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-primary);
font-size: var(--font-size-base);
color: var(--text-primary);
background: var(--bg-primary);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23636E72' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-sm) center;
padding-right: var(--space-xl);
}
/* ================================================
FOOTER
================================================ */
.footer {
background: var(--text-primary);
color: white;
padding: var(--space-3xl) 0 var(--space-lg);
margin-top: var(--space-3xl);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-2xl);
}
.footer-col {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.footer-title {
font-size: var(--font-size-2xl);
font-weight: 700;
margin-bottom: var(--space-sm);
}
.footer-text {
color: var(--text-muted);
line-height: 1.6;
}
.footer-heading {
font-size: var(--font-size-base);
font-weight: 600;
margin-bottom: var(--space-sm);
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
transition: color var(--transition-fast);
}
.footer-links a:hover {
color: white;
}
.footer-bottom {
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
.social-links {
display: flex;
gap: var(--space-sm);
}
.social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-full);
color: white;
transition: all var(--transition-fast);
}
.social-link:hover {
background: var(--primary);
transform: translateY(-2px);
}
/* ================================================
RESPONSIVE
================================================ */
@media (max-width: 1024px) {
.grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
html { font-size: 14px; }
.container { padding: 0 var(--space-md); }
.grid-cols-5,
.grid-cols-4,
.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
.section { padding: var(--space-2xl) 0; }
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
.footer-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.grid-cols-5,
.grid-cols-4,
.grid-cols-3,
.grid-cols-2 { grid-template-columns: 1fr; }
.btn { width: 100%; }
}

277
website/assets/css/main.css
View File

@@ -391,136 +391,10 @@ p {
}
/* ====================================
Navigation Bar
Navigation Bar - See navbar.css for modern navbar styles
==================================== */
.navbar {
background-color: var(--bg-color);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
position: relative;
}
.nav-brand {
flex-shrink: 0;
}
.nav-brand a {
text-decoration: none;
display: flex;
align-items: center;
gap: 12px;
}
.logo-image {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
.nav-brand h1 {
font-size: 1.8rem;
color: var(--primary-color);
margin: 0;
}
.nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
pointer-events: none;
}
.nav-center .nav-menu {
pointer-events: auto;
}
.nav-menu {
display: flex;
gap: 2rem;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li {
margin: 0;
padding: 0;
}
.nav-menu a {
color: var(--text-color);
font-weight: 500;
transition: var(--transition);
position: relative;
white-space: nowrap;
text-decoration: none;
padding: 0.5rem 0;
display: block;
}
.nav-menu a:hover,
.nav-menu a.active {
color: var(--primary-color);
}
.nav-menu a.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--primary-color);
}
.nav-icons {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.nav-icon {
position: relative;
color: var(--text-color);
font-size: 1.5rem;
transition: var(--transition);
text-decoration: none;
display: flex;
align-items: center;
}
.nav-icon:hover {
color: var(--primary-color);
}
.nav-icon .badge {
position: absolute;
top: -8px;
right: -8px;
background-color: var(--primary-color);
color: white;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
line-height: 1;
display: none;
}
/* Old navbar styles removed to prevent conflicts with modern-navbar */
/* All navbar styling is now in navbar.css */
/* Cart and Wishlist Dropdown */
.dropdown-container {
@@ -708,27 +582,7 @@ p {
text-decoration: none !important;
}
.nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 10px;
flex-shrink: 0;
}
.nav-toggle span {
width: 25px;
height: 3px;
background-color: var(--text-color);
transition: var(--transition);
}
.nav-toggle:hover span {
background-color: var(--primary-color);
}
/* Old nav-toggle styles removed - now in navbar.css */
.nav-dropdown {
display: none;
@@ -785,8 +639,10 @@ p {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
align-items: center;
padding: var(--spacing-xl) 0;
background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
padding: var(--spacing-xl) 4rem;
background: #FFEBEB;
max-width: 1400px;
margin: 0 auto;
}
.hero-content {
@@ -833,7 +689,7 @@ p {
position: relative;
overflow: hidden;
border-radius: 10px;
padding-right: 2rem;
padding-right: 0;
}
.hero-image img {
@@ -1056,21 +912,25 @@ section {
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
box-shadow: 0 2px 8px rgba(252, 177, 216, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border-color);
border: 1px solid #FFD0D0;
display: flex;
flex-direction: column;
height: 100%;
}
.product-card:hover {
box-shadow: var(--shadow-hover);
box-shadow: 0 4px 16px rgba(252, 177, 216, 0.25);
transform: translateY(-8px);
border-color: var(--primary-color);
border-color: #FCB1D8;
}
.product-image {
position: relative;
overflow: hidden;
height: 180px;
width: 100%;
aspect-ratio: 1;
}
.product-image img {
@@ -1084,30 +944,47 @@ section {
transform: scale(1.1);
}
.product-info {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px;
gap: 8px;
}
.product-card h3 {
padding: var(--spacing-sm);
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #202023;
line-height: 1.4;
}
.product-color-badge {
display: inline-block;
margin: 0 var(--spacing-sm) var(--spacing-xs);
margin: 8px 0;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
background: var(--primary-color);
color: white;
background: #FCB1D8;
color: #202023;
border-radius: 12px;
letter-spacing: 0.5px;
}
.product-description {
padding: 0 var(--spacing-sm);
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: var(--spacing-xs);
color: #202023;
opacity: 0.7;
margin: 0;
line-height: 1.6;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Product Description Rich Text Styles */
@@ -1141,14 +1018,47 @@ section {
}
.price {
padding: 0 var(--spacing-sm);
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
color: #FCB1D8;
margin: 0;
}
.product-card .btn {
.product-actions {
display: flex;
gap: 8px;
padding: 0 16px 16px 16px;
margin-top: auto;
}
.product-actions .btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: #FCB1D8;
color: #202023;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin: 0;
width: auto;
}
.product-actions .btn:hover {
background: #F6CCDE;
transform: translateY(-2px);
}
.product-actions .btn i {
font-size: 18px;
}
.product-card .btn:not(.product-actions .btn) {
width: calc(100% - var(--spacing-md));
margin: 0 var(--spacing-sm) var(--spacing-sm);
}
@@ -1858,6 +1768,7 @@ section {
.hero {
grid-template-columns: 1fr;
padding: var(--spacing-xl) 2rem;
}
.hero-content h2 {
@@ -3189,6 +3100,32 @@ section {
}
.product-card .product-link:hover h3 {
color: var(--primary-color);
color: #FCB1D8;
}
/* Product Title Link - Make entire title clickable */
.product-title-link {
text-decoration: none;
color: inherit;
display: block;
cursor: pointer;
transition: color 0.3s ease;
}
.product-title-link:hover {
color: #FCB1D8;
}
.product-title-link h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: inherit;
line-height: 1.4;
transition: color 0.3s ease;
}
.product-title-link:hover h3 {
color: #FCB1D8;
}

464
website/assets/css/modern-nav.css
View File

@@ -1,464 +0,0 @@
/* ================================================
MODERN NAVIGATION - Ecommerce Style
================================================ */
.modern-nav {
position: sticky;
top: 0;
background: white;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
z-index: var(--z-sticky);
transition: all var(--transition-base);
}
/* Top Bar (Promo/Announcement) */
.nav-topbar {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: var(--space-xs) 0;
font-size: var(--font-size-sm);
text-align: center;
}
.nav-topbar a {
color: white;
text-decoration: underline;
font-weight: 600;
}
/* Main Navigation */
.nav-main {
padding: var(--space-md) 0;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
}
/* Logo */
.nav-logo {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
}
.nav-logo-image {
height: 40px;
width: auto;
}
.nav-logo-text {
font-family: var(--font-display);
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Search Bar */
.nav-search {
flex: 1;
max-width: 600px;
position: relative;
}
.search-input-wrapper {
position: relative;
}
.search-input {
width: 100%;
padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-lg);
border: 2px solid var(--border-color);
border-radius: var(--radius-full);
font-size: var(--font-size-base);
transition: all var(--transition-fast);
}
.search-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}
.search-icon {
position: absolute;
left: var(--space-md);
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.search-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
padding: var(--space-xs) var(--space-lg);
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
font-weight: 600;
transition: all var(--transition-fast);
}
.search-btn:hover {
background: var(--primary-dark);
}
/* Nav Actions */
.nav-actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
.nav-icon-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: var(--space-xs);
background: transparent;
border: none;
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
border-radius: var(--radius-md);
}
.nav-icon-btn:hover {
background: var(--bg-secondary);
color: var(--primary);
}
.nav-icon-btn i {
font-size: 24px;
}
.nav-icon-label {
font-size: var(--font-size-xs);
font-weight: 500;
}
.nav-badge {
position: absolute;
top: 0;
right: 0;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
background: var(--error);
color: white;
font-size: 10px;
font-weight: 700;
border-radius: var(--radius-full);
border: 2px solid white;
}
/* Nav Links */
.nav-links-wrapper {
border-top: 1px solid var(--border-color);
padding: var(--space-sm) 0;
}
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xl);
list-style: none;
}
.nav-link {
position: relative;
padding: var(--space-xs) 0;
font-size: var(--font-size-base);
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--primary);
transform: scaleX(0);
transition: transform var(--transition-base);
}
.nav-link:hover {
color: var(--primary);
}
.nav-link:hover::after,
.nav-link.active::after {
transform: scaleX(1);
}
/* Mobile Menu */
.mobile-menu-btn {
display: none;
padding: var(--space-sm);
background: transparent;
border: none;
color: var(--text-primary);
cursor: pointer;
font-size: 24px;
}
.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: var(--z-modal-backdrop);
opacity: 0;
transition: opacity var(--transition-base);
}
.mobile-overlay.active {
opacity: 1;
}
.mobile-menu {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: 90%;
background: white;
z-index: var(--z-modal);
transform: translateX(100%);
transition: transform var(--transition-base);
overflow-y: auto;
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg);
border-bottom: 1px solid var(--border-color);
}
.mobile-menu-title {
font-size: var(--font-size-lg);
font-weight: 600;
}
.mobile-close-btn {
padding: var(--space-xs);
background: transparent;
border: none;
color: var(--text-primary);
cursor: pointer;
font-size: 24px;
}
.mobile-menu-content {
padding: var(--space-lg);
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
list-style: none;
margin-bottom: var(--space-xl);
}
.mobile-nav-link {
padding: var(--space-sm);
color: var(--text-primary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
font-weight: 500;
}
.mobile-nav-link:hover {
background: var(--bg-secondary);
color: var(--primary);
}
/* Dropdown Menus */
.nav-dropdown {
position: relative;
}
.dropdown-content {
position: absolute;
top: 100%;
left: 0;
min-width: 280px;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-md);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--transition-base);
z-index: var(--z-dropdown);
}
.nav-dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-items {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.dropdown-item {
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dropdown-item:hover {
background: var(--bg-secondary);
color: var(--primary);
}
/* Cart Dropdown */
.cart-dropdown {
min-width: 360px;
right: 0;
left: auto;
}
.cart-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-color);
}
.cart-items {
max-height: 300px;
overflow-y: auto;
margin-bottom: var(--space-md);
}
.cart-item {
display: flex;
gap: var(--space-sm);
padding: var(--space-sm);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
}
.cart-item:hover {
background: var(--bg-secondary);
}
.cart-item-image {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: var(--radius-md);
}
.cart-item-info {
flex: 1;
}
.cart-item-name {
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: 2px;
}
.cart-item-price {
font-size: var(--font-size-sm);
color: var(--primary);
font-weight: 600;
}
.cart-dropdown-footer {
padding-top: var(--space-md);
border-top: 1px solid var(--border-color);
}
.cart-total {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-md);
font-weight: 600;
}
/* Responsive */
@media (max-width: 1024px) {
.nav-search {
max-width: 400px;
}
.nav-links-wrapper {
display: none;
}
}
@media (max-width: 768px) {
.nav-search {
display: none;
}
.nav-icon-label {
display: none;
}
.mobile-menu-btn,
.mobile-overlay,
.mobile-menu {
display: block;
}
.nav-actions {
gap: var(--space-sm);
}
.nav-icon-btn {
padding: var(--space-xs);
}
}

590
website/assets/css/modern-shop.css
View File

@@ -1,590 +0,0 @@
/* ================================================
MODERN SHOP PAGE - Ecommerce Style
================================================ */
/* Hero Banner */
.shop-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: var(--space-3xl) 0 var(--space-2xl);
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.shop-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.1;
}
.shop-hero-content {
position: relative;
z-index: 1;
}
.shop-hero h1 {
color: white;
font-size: var(--font-size-4xl);
font-weight: 700;
margin-bottom: var(--space-sm);
}
.shop-hero p {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-lg);
margin-bottom: 0;
}
/* Categories Carousel */
.categories-section {
padding: var(--space-xl) 0;
background: var(--bg-secondary);
}
.categories-scroll {
display: flex;
gap: var(--space-md);
overflow-x: auto;
scroll-behavior: smooth;
padding: var(--space-sm) 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.categories-scroll::-webkit-scrollbar {
display: none;
}
.category-chip {
flex-shrink: 0;
padding: var(--space-sm) var(--space-lg);
background: white;
border: 2px solid var(--border-color);
border-radius: var(--radius-full);
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.category-chip:hover,
.category-chip.active {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-2px);
}
/* Shop Layout */
.shop-container {
padding: var(--space-2xl) 0;
}
.shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--space-xl);
}
/* Sidebar Filters */
.shop-sidebar {
position: sticky;
top: 100px;
height: fit-content;
background: white;
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
}
.filter-section {
margin-bottom: var(--space-xl);
}
.filter-section:last-child {
margin-bottom: 0;
}
.filter-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--space-md);
color: var(--text-primary);
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.filter-option {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}
.filter-option:hover {
background: var(--bg-secondary);
}
.filter-option input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary);
}
.filter-option label {
flex: 1;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.filter-count {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
/* Price Range Slider */
.price-range {
padding: var(--space-md) 0;
}
.price-inputs {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.price-input {
flex: 1;
padding: var(--space-xs) var(--space-sm);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
}
/* Shop Main Content */
.shop-main {
min-width: 0;
}
/* Toolbar */
.shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-xl);
padding: var(--space-md) var(--space-lg);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
flex-wrap: wrap;
gap: var(--space-md);
}
.shop-results {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.shop-results strong {
color: var(--text-primary);
font-weight: 600;
}
.shop-controls {
display: flex;
align-items: center;
gap: var(--space-md);
}
.view-toggle {
display: flex;
gap: var(--space-xs);
}
.view-btn {
padding: var(--space-xs) var(--space-sm);
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
.view-btn.active {
background: var(--primary);
color: white;
}
.sort-select {
padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-md);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
cursor: pointer;
background: white;
}
/* Products Grid */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-lg);
}
/* Product Card */
.product-card {
background: white;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
position: relative;
display: flex;
flex-direction: column;
}
.product-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-8px);
}
.product-image-wrapper {
position: relative;
overflow: hidden;
background: var(--bg-secondary);
aspect-ratio: 1;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.product-card:hover .product-image {
transform: scale(1.1);
}
.product-badges {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
z-index: 2;
}
.product-badge {
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-xs);
font-weight: 700;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: var(--shadow-md);
}
.badge-new {
background: var(--secondary);
color: white;
}
.badge-sale {
background: var(--error);
color: white;
}
.badge-bestseller {
background: var(--accent);
color: var(--text-primary);
}
.product-actions {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
opacity: 0;
transform: translateX(10px);
transition: all var(--transition-base);
}
.product-card:hover .product-actions {
opacity: 1;
transform: translateX(0);
}
.product-action-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
box-shadow: var(--shadow-md);
transition: all var(--transition-fast);
color: var(--text-primary);
}
.product-action-btn:hover {
background: var(--primary);
color: white;
transform: scale(1.1);
}
.product-action-btn.active {
background: var(--error);
color: white;
}
.product-info {
padding: var(--space-md);
flex: 1;
display: flex;
flex-direction: column;
}
.product-category {
font-size: var(--font-size-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--space-xs);
}
.product-title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-rating {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-sm);
}
.stars {
display: flex;
gap: 2px;
color: var(--accent);
}
.rating-count {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
.product-price {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.price-current {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--primary);
}
.price-original {
font-size: var(--font-size-base);
color: var(--text-muted);
text-decoration: line-through;
}
.price-discount {
padding: 2px var(--space-xs);
background: var(--error);
color: white;
font-size: var(--font-size-xs);
font-weight: 700;
border-radius: var(--radius-sm);
}
.product-footer {
display: flex;
gap: var(--space-xs);
}
.add-to-cart-btn {
flex: 1;
padding: var(--space-sm);
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.add-to-cart-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.quick-view-btn {
padding: var(--space-sm);
background: var(--bg-secondary);
color: var(--text-primary);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.quick-view-btn:hover {
background: var(--text-primary);
color: white;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-2xl);
}
.page-btn {
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.page-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.page-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
/* Mobile Filter Toggle */
.mobile-filter-btn {
display: none;
width: 100%;
padding: var(--space-md);
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius-lg);
font-weight: 600;
cursor: pointer;
margin-bottom: var(--space-lg);
}
/* Responsive */
@media (max-width: 1024px) {
.shop-layout {
grid-template-columns: 1fr;
}
.shop-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 320px;
max-width: 90%;
transform: translateX(-100%);
transition: transform var(--transition-base);
z-index: var(--z-modal);
overflow-y: auto;
}
.shop-sidebar.active {
transform: translateX(0);
}
.mobile-filter-btn {
display: block;
}
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 640px) {
.shop-hero {
padding: var(--space-2xl) 0;
}
.shop-hero h1 {
font-size: var(--font-size-2xl);
}
.shop-toolbar {
flex-direction: column;
align-items: stretch;
}
.shop-controls {
justify-content: space-between;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.product-info {
padding: var(--space-sm);
}
.product-title {
font-size: var(--font-size-sm);
}
.price-current {
font-size: var(--font-size-lg);
}
}

110
website/assets/css/navbar.css
View File

@@ -1,10 +1,19 @@
/* Import Amsterdam Three Font */
@font-face {
font-family: 'Amsterdam Three';
src: url('/assets/fonts/AmsterdamThreeSlant-axaym.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Modern Navbar Styles */
.modern-navbar {
position: sticky;
top: 0;
z-index: 1000;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #FFD0D0;
box-shadow: none;
font-family: 'Roboto', sans-serif;
}
@@ -12,21 +21,23 @@
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 72px;
}
/* Logo Section */
.navbar-brand {
flex-shrink: 0;
flex-shrink: 0 !important;
min-width: 240px !important;
margin-right: 48px !important;
}
.brand-link {
display: flex;
align-items: center;
gap: 12px;
display: flex !important;
align-items: center !important;
gap: 20px !important;
text-decoration: none;
transition: opacity 0.2s;
}
@@ -36,32 +47,34 @@
}
.brand-logo {
width: 48px;
height: 48px;
width: 56px;
height: 56px;
object-fit: contain;
border-radius: 8px;
}
.brand-name {
font-family: 'Amsterdam Three', cursive;
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
letter-spacing: 0.3px;
font-weight: 400;
color: #202023;
letter-spacing: 0.5px;
white-space: nowrap;
}
/* Main Navigation */
.navbar-menu {
flex: 1;
display: flex;
justify-content: center;
padding: 0 32px;
flex: 1 !important;
display: flex !important;
justify-content: center !important;
padding: 0 60px !important;
min-width: 0 !important;
}
.nav-menu-list {
display: flex;
align-items: center;
gap: 8px;
display: flex !important;
align-items: center !important;
gap: 8px !important;
list-style: none;
margin: 0;
padding: 0;
@@ -76,7 +89,7 @@
padding: 10px 20px;
font-size: 15px;
font-weight: 500;
color: #4a4a4a;
color: #202023;
text-decoration: none;
border-radius: 6px;
transition: all 0.2s;
@@ -85,16 +98,19 @@
.nav-link:hover,
.nav-link.active {
color: #6b46c1;
background: #f3f0ff;
color: #202023;
background: #FCB1D8;
}
/* Right Actions */
.navbar-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-shrink: 0 !important;
min-width: 120px !important;
justify-content: flex-end !important;
margin-left: 48px !important;
}
.action-item {
@@ -110,7 +126,7 @@
height: 44px;
border: none;
background: transparent;
color: #4a4a4a;
color: #202023;
font-size: 22px;
border-radius: 50%;
cursor: pointer;
@@ -118,8 +134,8 @@
}
.action-btn:hover {
background: #f5f5f5;
color: #6b46c1;
background: #FFEBEB;
color: #202023;
}
.action-badge {
@@ -129,8 +145,8 @@
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #dc2626;
color: white;
background: #FCB1D8;
color: #202023;
font-size: 11px;
font-weight: 600;
border-radius: 9px;
@@ -338,8 +354,9 @@
}
.mobile-brand {
font-size: 18px;
font-weight: 600;
font-family: 'Amsterdam Three', cursive;
font-size: 22px;
font-weight: 400;
color: #1a1a1a;
}
@@ -397,6 +414,15 @@
.mobile-toggle {
display: flex;
}
.navbar-brand {
min-width: auto;
margin-right: auto;
}
.navbar-actions {
margin-left: 16px;
}
}
@media (max-width: 640px) {
@@ -410,8 +436,18 @@
}
.brand-logo {
width: 40px;
height: 40px;
width: 44px;
height: 44px;
}
.navbar-brand {
min-width: auto;
margin-right: 12px;
}
.navbar-actions {
margin-left: 12px;
gap: 8px;
}
.action-dropdown {

439
website/assets/css/responsive-enhanced.css Normal file
View File

@@ -0,0 +1,439 @@
/**
* Enhanced Responsive Utilities
* Comprehensive responsive design system with accessibility
*/
/* ========================================
LOADING STATES
======================================== */
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ========================================
PRODUCT GRID RESPONSIVE
======================================== */
.products-grid {
display: grid;
gap: 24px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 768px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
@media (min-width: 1024px) {
.products-grid {
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
}
@media (min-width: 1280px) {
.products-grid {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
}
/* ========================================
PRODUCT CARD RESPONSIVE
======================================== */
.product-card {
display: flex;
flex-direction: column;
height: 100%;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(252, 177, 216, 0.15);
transition: all 0.3s ease;
}
.product-card:hover {
box-shadow: 0 4px 16px rgba(252, 177, 216, 0.25);
transform: translateY(-4px);
}
.product-image {
position: relative;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 0;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-info {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px;
gap: 8px;
}
.product-info h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
line-height: 1.4;
color: #202023;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.product-description {
font-size: 14px;
color: #202023;
opacity: 0.7;
margin: 0;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex: 1;
min-height: 42px;
}
.product-card .price {
font-size: 20px;
font-weight: 700;
color: #FCB1D8;
margin: 0;
}
.product-actions {
display: flex;
gap: 8px;
padding: 0 16px 16px 16px;
margin-top: auto;
}
.product-actions .btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: #FCB1D8;
color: #202023;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.product-actions .btn:hover {
background: #F6CCDE;
transform: translateY(-2px);
}
.product-actions .btn i {
font-size: 18px;
}
@media (max-width: 639px) {
.product-info h3 {
font-size: 14px;
}
.product-description {
font-size: 13px;
-webkit-line-clamp: 2;
}
.product-card .price {
font-size: 18px;
}
}
/* ========================================
NAVBAR RESPONSIVE
======================================== */
.modern-navbar {
padding: 0 20px;
}
@media (min-width: 768px) {
.modern-navbar {
padding: 0 40px;
}
}
@media (min-width: 1024px) {
.modern-navbar {
padding: 0 60px;
}
}
.navbar-brand {
min-width: 200px;
}
@media (max-width: 767px) {
.navbar-brand {
min-width: 150px;
}
.navbar-menu {
display: none;
}
}
/* ========================================
MOBILE MENU
======================================== */
.mobile-menu {
position: fixed;
top: 0;
left: -100%;
width: 280px;
height: 100vh;
background: white;
z-index: 9999;
transition: left 0.3s ease;
overflow-y: auto;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.mobile-menu.active {
left: 0;
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.active ~ .mobile-menu-overlay,
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
@media (min-width: 768px) {
.mobile-menu-toggle {
display: none;
}
}
/* ========================================
BUTTONS RESPONSIVE
======================================== */
.btn {
padding: 10px 20px;
font-size: 14px;
border-radius: 6px;
transition: all 0.2s;
}
.btn-small {
padding: 8px 16px;
font-size: 13px;
}
.btn-icon {
width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 639px) {
.btn {
padding: 8px 16px;
font-size: 13px;
}
.btn-small {
padding: 6px 12px;
font-size: 12px;
}
.btn-icon {
width: 36px;
height: 36px;
}
}
/* ========================================
UTILITY CLASSES
======================================== */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.container {
padding: 0 40px;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 60px;
}
}
/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Display utilities */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
/* Responsive visibility */
@media (max-width: 639px) {
.hidden-mobile { display: none !important; }
}
@media (min-width: 640px) and (max-width: 767px) {
.hidden-tablet { display: none !important; }
}
@media (min-width: 768px) {
.hidden-desktop { display: none !important; }
}
@media (max-width: 639px) {
.visible-mobile { display: block !important; }
}
@media (min-width: 640px) and (max-width: 767px) {
.visible-tablet { display: block !important; }
}
@media (min-width: 768px) {
.visible-desktop { display: block !important; }
}
/* ========================================
ACCESSIBILITY
======================================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
.skip-link {
position: fixed;
top: -100px;
left: 10px;
background: #667eea;
color: white;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
z-index: 10001;
transition: top 0.2s;
}
.skip-link:focus {
top: 10px;
outline: 2px solid white;
outline-offset: 2px;
}
*:focus-visible {
outline: 2px solid #667eea;
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid #667eea;
outline-offset: 2px;
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
.modern-navbar,
.mobile-menu,
.notification-container,
.btn,
footer {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.5;
}
.product-card {
page-break-inside: avoid;
}
}

626
website/assets/css/responsive.css Normal file
View File

@@ -0,0 +1,626 @@
/**
* Responsive Layout Utilities
* Mobile-first responsive design system
*/
/* ========================================
RESPONSIVE UTILITIES
======================================== */
/* Loading States */
.loading {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
.focus-visible:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
}
/* Responsive Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Container Queries */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.container {
padding: 0 40px;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 60px;
}
}
/* Grid System */
.grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Flex Utilities */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
/* Spacing */
.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
/* Display Utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
@media (max-width: 639px) {
.sm\\:hidden { display: none !important; }
}
@media (min-width: 640px) {
.sm\\:block { display: block; }
}
@media (max-width: 767px) {
.md\\:hidden { display: none !important; }
}
@media (min-width: 768px) {
.md\\:block { display: block; }
.md\\:flex { display: flex; }
}
@media (max-width: 1023px) {
.lg\\:hidden { display: none !important; }
}
@media (min-width: 1024px) {
.lg\\:block { display: block; }
.lg\\:flex { display: flex; }
}
/* ========================================
RESPONSIVE PRODUCT CARDS
======================================== */
.products-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding: 20px 0;
}
@media (min-width: 640px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (min-width: 768px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
}
@media (min-width: 1024px) {
.products-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.product-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.product-image-wrapper {
position: relative;
padding-top: 100%;
overflow: hidden;
background: #f5f5f5;
}
.product-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-info {
padding: 16px;
}
.product-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 8px 0;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-price {
font-size: 1.25rem;
font-weight: 700;
color: #667eea;
margin: 0 0 12px 0;
}
.product-actions {
display: flex;
gap: 8px;
flex-direction: column;
}
@media (min-width: 768px) {
.product-actions {
flex-direction: row;
}
}
.wishlist-btn {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #666;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
z-index: 10;
}
.wishlist-btn:hover {
background: #667eea;
color: white;
transform: scale(1.1);
}
.wishlist-btn.active {
background: #dc3545;
color: white;
}
/* ========================================
RESPONSIVE CART/WISHLIST DROPDOWNS
======================================== */
.action-dropdown {
position: absolute;
top: 100%;
right: 0;
width: 100vw;
max-width: 400px;
background: white;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
border-radius: 12px;
margin-top: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
max-height: 80vh;
overflow-y: auto;
}
@media (max-width: 639px) {
.action-dropdown {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
border-radius: 12px 12px 0 0;
transform: translateY(100%);
}
}
.action-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #eee;
}
.dropdown-head h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
.dropdown-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #666;
padding: 4px;
line-height: 1;
}
.dropdown-body {
padding: 16px;
max-height: 400px;
overflow-y: auto;
}
.dropdown-foot {
padding: 16px 20px;
border-top: 1px solid #eee;
}
.cart-item,
.wishlist-item {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.cart-item:last-child,
.wishlist-item:last-child {
border-bottom: none;
}
.cart-item-image,
.wishlist-item-image {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
}
.cart-item-details,
.wishlist-item-details {
flex: 1;
}
.cart-item-title,
.wishlist-item-title {
font-size: 0.875rem;
font-weight: 600;
margin: 0 0 4px 0;
}
.cart-item-price,
.wishlist-item-price {
font-size: 0.875rem;
color: #667eea;
font-weight: 600;
margin: 0;
}
.cart-item-remove,
.wishlist-item-remove {
background: none;
border: none;
color: #999;
cursor: pointer;
padding: 4px;
font-size: 16px;
}
.cart-item-remove:hover,
.wishlist-item-remove:hover {
color: #dc3545;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #999;
}
/* ========================================
RESPONSIVE BUTTONS
======================================== */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
border: none;
white-space: nowrap;
}
.btn-primary,
.btn-primary-full {
background: #667eea;
color: white;
width: 100%;
}
.btn-primary:hover {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}
.btn-secondary {
background: #28a745;
color: white;
}
.btn-secondary:hover {
background: #218838;
}
.btn-outline {
background: white;
color: #667eea;
border: 2px solid #667eea;
width: 100%;
}
.btn-outline:hover {
background: #667eea;
color: white;
}
.btn-text {
background: none;
color: #667eea;
text-decoration: underline;
padding: 8px;
}
@media (max-width: 639px) {
button,
.btn {
font-size: 0.875rem;
padding: 10px 20px;
}
}
/* ========================================
RESPONSIVE NAVIGATION
======================================== */
/* Navbar styles removed - see navbar.css for all navbar styling */
.action-btn {
position: relative;
background: none;
border: none;
font-size: 24px;
color: #333;
cursor: pointer;
padding: 8px;
}
.action-badge {
position: absolute;
top: 0;
right: 0;
background: #dc3545;
color: white;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: none;
align-items: center;
justify-content: center;
padding: 0 4px;
}
/* Mobile Menu */
@media (max-width: 767px) {
.mobile-menu-toggle {
display: block;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 8px;
}
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 300px;
height: 100vh;
background: white;
box-shadow: -4px 0 12px rgba(0,0,0,0.1);
transition: right 0.3s ease;
z-index: 1001;
overflow-y: auto;
}
.mobile-menu.active {
right: 0;
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
}
/* Print Styles */
@media print {
.modern-navbar,
.navbar-actions,
.mobile-menu,
.action-dropdown,
button {
display: none !important;
}
}

361
website/assets/css/utilities.css
View File

@@ -1,361 +0,0 @@
/* Toast Notifications */
.toast-notification {
position: fixed;
top: 20px;
right: 20px;
min-width: 300px;
max-width: 500px;
padding: 16px 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 12px;
z-index: 10000;
opacity: 0;
transform: translateX(400px);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toast-notification.show {
opacity: 1;
transform: translateX(0);
}
.toast-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
flex-shrink: 0;
}
.toast-success {
border-left: 4px solid #28a745;
}
.toast-success .toast-icon {
background: #28a745;
color: white;
}
.toast-error {
border-left: 4px solid #dc3545;
}
.toast-error .toast-icon {
background: #dc3545;
color: white;
}
.toast-warning {
border-left: 4px solid #ffc107;
}
.toast-warning .toast-icon {
background: #ffc107;
color: #000;
}
.toast-info {
border-left: 4px solid #17a2b8;
}
.toast-info .toast-icon {
background: #17a2b8;
color: white;
}
.toast-message {
flex: 1;
color: #333;
font-size: 14px;
line-height: 1.4;
}
.toast-close {
background: none;
border: none;
font-size: 20px;
color: #999;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
flex-shrink: 0;
}
.toast-close:hover {
color: #333;
}
.toast-close:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
border-radius: 4px;
}
/* Screen Reader Only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip to Main Content Link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #667eea;
color: white;
padding: 8px 16px;
text-decoration: none;
border-radius: 0 0 4px 0;
z-index: 10001;
}
.skip-link:focus {
top: 0;
}
/* Focus Styles - Accessibility */
*:focus-visible {
outline: 2px solid #667eea;
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #667eea;
outline-offset: 2px;
}
/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
outline: none;
}
/* Loading Spinner */
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner-small {
width: 20px;
height: 20px;
border-width: 2px;
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.loading-overlay .spinner {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: white;
}
/* Responsive Images */
img {
max-width: 100%;
height: auto;
}
/* Responsive Typography */
html {
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (max-width: 480px) {
html {
font-size: 13px;
}
}
/* Responsive Containers */
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
/* Mobile Responsive Utilities */
@media (max-width: 768px) {
.toast-notification {
right: 10px;
left: 10px;
min-width: auto;
max-width: calc(100% - 20px);
}
.hide-mobile {
display: none !important;
}
}
@media (min-width: 769px) {
.show-mobile-only {
display: none !important;
}
}
/* Tablet Specific */
@media (min-width: 768px) and (max-width: 1024px) {
.hide-tablet {
display: none !important;
}
}
/* Desktop Specific */
@media (min-width: 1025px) {
.hide-desktop {
display: none !important;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
* {
border-width: 2px !important;
}
button,
a {
text-decoration: underline;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.toast-notification {
background: #2d3748;
color: #fff;
}
.toast-message {
color: #e2e8f0;
}
.toast-close {
color: #a0aec0;
}
.toast-close:hover {
color: #e2e8f0;
}
}
/* Print Styles */
@media print {
.no-print,
.toast-notification,
.skip-link,
button,
nav {
display: none !important;
}
a[href]:after {
content: " (" attr(href) ")";
}
img {
max-width: 100% !important;
}
}

BIN
website/assets/fonts/AmsterdamThreeSlant-axaym.ttf Normal file
View File

Binary file not shown.

111
website/assets/js/api-client.js Normal file
View File

@@ -0,0 +1,111 @@
/**
* API Client
* Centralized API communication with error handling
*/
(function () {
"use strict";
class APIClient {
constructor(baseURL = "") {
this.baseURL = baseURL;
this.defaultHeaders = {
"Content-Type": "application/json",
};
}
async request(endpoint, options = {}) {
const url = `${this.baseURL}${endpoint}`;
const config = {
...options,
headers: {
...this.defaultHeaders,
...options.headers,
},
};
try {
const response = await fetch(url, config);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const contentType = response.headers.get("content-type");
if (contentType && contentType.includes("application/json")) {
return await response.json();
}
return await response.text();
} catch (error) {
console.error(`API Error (${endpoint}):`, error);
throw error;
}
}
async get(endpoint, params = {}) {
const queryString = new URLSearchParams(params).toString();
const url = queryString ? `${endpoint}?${queryString}` : endpoint;
return this.request(url, { method: "GET" });
}
async post(endpoint, data = {}) {
return this.request(endpoint, {
method: "POST",
body: JSON.stringify(data),
});
}
async put(endpoint, data = {}) {
return this.request(endpoint, {
method: "PUT",
body: JSON.stringify(data),
});
}
async delete(endpoint) {
return this.request(endpoint, { method: "DELETE" });
}
// Product endpoints
async getProducts(params = {}) {
return this.get("/api/products", params);
}
async getProduct(id) {
return this.get(`/api/products/${id}`);
}
async getCategories() {
return this.get("/api/categories");
}
// Menu endpoints
async getMenu() {
return this.get("/api/menu");
}
// Homepage endpoints
async getHomepageSettings() {
return this.get("/api/homepage-settings");
}
}
// Create global instance
window.API = window.API || new APIClient();
// Helper function for loading states
window.withLoading = async function (element, asyncFn) {
if (!element) return asyncFn();
element.classList.add("loading");
element.setAttribute("aria-busy", "true");
try {
return await asyncFn();
} finally {
element.classList.remove("loading");
element.setAttribute("aria-busy", "false");
}
};
})();

62
website/assets/js/back-button-control.js Normal file
View File

@@ -0,0 +1,62 @@
/**
* Back Button Navigation Control - SIMPLIFIED & FIXED
*
* Problem: History manipulation (replaceState/pushState) changes URL without reloading page
* Solution: Let browser handle navigation naturally, only intercept when necessary
*
* Requirements:
* 1. Natural browser back/forward navigation (URL changes = page loads)
* 2. Prevent going back past home page
* 3. Ensure page is always interactive after navigation
*/
(function () {
"use strict";
// Configuration
const HOME_PAGES = ["/", "/home.html", "/index.html"];
const HOME_URL = "/home.html";
/**
* Handle popstate (back/forward button) events
* This fires AFTER the browser has already navigated (URL changed)
*/
function handlePopState(event) {
// Get the NEW current path (browser already changed it)
const currentPath = window.location.pathname;
// Ensure page is always interactive after back/forward
document.body.classList.remove("page-transitioning");
document.body.style.opacity = "1";
sessionStorage.removeItem("page-transitioning");
// If we're on home page after a back navigation
// prevent going back further by adding home to history
if (HOME_PAGES.includes(currentPath)) {
// Use setTimeout to avoid interfering with current popstate
setTimeout(() => {
window.history.pushState({ page: "home" }, "", HOME_URL);
}, 0);
}
}
/**
* Prevent going back past home page
* Add an extra entry so back button stays on home
*/
function preventBackPastHome() {
const currentPath = window.location.pathname;
if (HOME_PAGES.includes(currentPath)) {
// Add an extra home entry
window.history.pushState({ page: "home", initial: true }, "", HOME_URL);
}
}
// Initialize: Add home history entry if on home page
preventBackPastHome();
// Listen for popstate (back/forward button)
// NOTE: Browser handles the actual navigation (page reload)
// We just ensure interactivity and prevent going back past home
window.addEventListener("popstate", handlePopState);
})();

155
website/assets/js/cart-functions.js Normal file
View File

@@ -0,0 +1,155 @@
/**
* Shared Cart and Wishlist Functions
* Simple localStorage-based implementation that works on all pages
*/
(function () {
"use strict";
// Cart Functions
window.addToCart = function (productId, name, price, imageurl) {
try {
const cart = JSON.parse(localStorage.getItem("cart") || "[]");
const existingItem = cart.find((item) => item.id === productId);
if (existingItem) {
existingItem.quantity = (existingItem.quantity || 1) + 1;
} else {
cart.push({
id: productId,
name,
price: parseFloat(price),
imageurl,
quantity: 1,
});
}
localStorage.setItem("cart", JSON.stringify(cart));
updateCartBadge();
showNotification(`${name} added to cart!`, "success");
} catch (e) {
console.error("Cart error:", e);
showNotification("Added to cart!", "success");
}
};
// Wishlist Functions
window.addToWishlist = function (productId, name, price, imageurl) {
try {
const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
const exists = wishlist.find((item) => item.id === productId);
if (!exists) {
wishlist.push({
id: productId,
name,
price: parseFloat(price),
imageurl,
});
localStorage.setItem("wishlist", JSON.stringify(wishlist));
updateWishlistBadge();
showNotification(`${name} added to wishlist!`, "success");
} else {
showNotification("Already in wishlist!", "info");
}
} catch (e) {
console.error("Wishlist error:", e);
showNotification("Added to wishlist!", "success");
}
};
// Update Badge Functions
function updateCartBadge() {
try {
const cart = JSON.parse(localStorage.getItem("cart") || "[]");
const badge = document.querySelector(".cart-badge");
if (badge) {
const total = cart.reduce((sum, item) => sum + (item.quantity || 1), 0);
badge.textContent = total;
badge.style.display = total > 0 ? "flex" : "none";
}
} catch (e) {
console.error("Badge update error:", e);
}
}
function updateWishlistBadge() {
try {
const wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
const badge = document.querySelector(".wishlist-badge");
if (badge) {
badge.textContent = wishlist.length;
badge.style.display = wishlist.length > 0 ? "flex" : "none";
}
} catch (e) {
console.error("Badge update error:", e);
}
}
// Notification Function
function showNotification(message, type = "info") {
// Remove existing notifications
document.querySelectorAll(".cart-notification").forEach((n) => n.remove());
const notification = document.createElement("div");
notification.className = `cart-notification notification-${type}`;
notification.textContent = message;
notification.style.cssText = `
position: fixed;
top: 80px;
right: 20px;
background: ${
type === "success"
? "#10b981"
: type === "error"
? "#ef4444"
: "#3b82f6"
};
color: white;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
animation: slideInFromRight 0.3s ease;
`;
// Add animation styles if not already present
if (!document.getElementById("notification-animations")) {
const style = document.createElement("style");
style.id = "notification-animations";
style.textContent = `
@keyframes slideInFromRight {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(400px); opacity: 0; }
}
`;
document.head.appendChild(style);
}
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = "slideOutToRight 0.3s ease";
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Initialize badges on page load
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
updateCartBadge();
updateWishlistBadge();
});
} else {
updateCartBadge();
updateWishlistBadge();
}
// Expose update functions globally
window.updateCartBadge = updateCartBadge;
window.updateWishlistBadge = updateWishlistBadge;
})();

697
website/assets/js/cart.js
View File

@@ -1,378 +1,319 @@
// Sky Art Shop - Shopping Cart Functions
// Add item to cart
function addToCart(id, name, price, imageUrl = null) {
// Get existing cart from localStorage
let cart = JSON.parse(localStorage.getItem("cart") || "[]");
// Check if item already exists
const existingItem = cart.find((item) => item.id === id);
if (existingItem) {
existingItem.quantity++;
// Update imageUrl if it was null before
if (!existingItem.imageUrl && imageUrl) {
existingItem.imageUrl = imageUrl;
}
} else {
cart.push({ id, name, price, quantity: 1, imageUrl });
}
// Save cart
localStorage.setItem("cart", JSON.stringify(cart));
console.log("Cart updated:", cart);
// Show confirmation
showCartNotification(`${name} added to cart!`);
updateCartCount();
}
// Remove item from cart
function removeFromCart(id) {
let cart = JSON.parse(localStorage.getItem("cart") || "[]");
cart = cart.filter((item) => item.id !== id);
localStorage.setItem("cart", JSON.stringify(cart));
updateCartCount();
}
// Update cart item quantity
function updateCartQuantity(id, quantity) {
let cart = JSON.parse(localStorage.getItem("cart") || "[]");
const item = cart.find((item) => item.id === id);
if (item) {
item.quantity = quantity;
if (quantity <= 0) {
cart = cart.filter((item) => item.id !== id);
}
}
localStorage.setItem("cart", JSON.stringify(cart));
updateCartCount();
}
// Get cart items
function getCart() {
return JSON.parse(localStorage.getItem("cart") || "[]");
}
// Get cart total
function getCartTotal() {
const cart = getCart();
return cart.reduce((total, item) => total + item.price * item.quantity, 0);
}
// Update cart count badge
function updateCartCount() {
const cart = getCart();
const count = cart.reduce((total, item) => total + item.quantity, 0);
// Update old badge (if exists)
const badge = document.getElementById("cart-count");
if (badge) {
badge.textContent = count;
badge.style.display = count > 0 ? "inline" : "none";
}
// Update navbar cart badge
const navCartBadge = document.querySelector("#cartBtn .badge");
if (navCartBadge) {
navCartBadge.textContent = count;
navCartBadge.style.display = count > 0 ? "block" : "none";
}
}
// Show cart notification
function showCartNotification(message) {
const notification = document.createElement("div");
notification.className = "cart-notification";
notification.textContent = message;
notification.style.cssText = `
position: fixed;
top: 80px;
right: 20px;
background: #4CAF50;
color: white;
padding: 15px 25px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
z-index: 10000;
animation: slideInFromTop 0.3s ease;
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = "slideOut 0.3s ease";
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Clear entire cart
function clearCart() {
localStorage.removeItem("cart");
updateCartCount();
}
// ====================================
// Wishlist Functions
// ====================================
// Add item to wishlist
function addToWishlist(id, name, price, imageUrl) {
let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
const existingItem = wishlist.find((item) => item.id === id);
if (existingItem) {
showWishlistNotification(`${name} is already in your wishlist!`);
return;
}
wishlist.push({ id, name, price, imageUrl });
localStorage.setItem("wishlist", JSON.stringify(wishlist));
console.log("Wishlist updated:", wishlist);
showWishlistNotification(`${name} added to wishlist!`);
updateWishlistCount();
}
// Remove item from wishlist
function removeFromWishlist(id) {
let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
wishlist = wishlist.filter((item) => item.id !== id);
localStorage.setItem("wishlist", JSON.stringify(wishlist));
updateWishlistCount();
}
// Get wishlist items
function getWishlist() {
return JSON.parse(localStorage.getItem("wishlist") || "[]");
}
// Update wishlist count badge
function updateWishlistCount() {
const wishlist = getWishlist();
const count = wishlist.length;
const navWishlistBadge = document.querySelector("#wishlistBtn .badge");
const wishlistIcon = document.querySelector("#wishlistBtn i");
if (navWishlistBadge) {
navWishlistBadge.textContent = count;
navWishlistBadge.style.display = count > 0 ? "block" : "none";
}
// Change heart icon based on wishlist status
if (wishlistIcon) {
if (count > 0) {
wishlistIcon.className = "bi bi-heart-fill";
wishlistIcon.style.color = "#e74c3c";
} else {
wishlistIcon.className = "bi bi-heart";
wishlistIcon.style.color = "";
}
}
}
// Show wishlist notification
function showWishlistNotification(message) {
const notification = document.createElement("div");
notification.className = "wishlist-notification";
notification.textContent = message;
notification.style.cssText = `
position: fixed;
top: 80px;
right: 20px;
background: #E91E63;
color: white;
padding: 15px 25px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
z-index: 10000;
animation: slideInFromTop 0.3s ease;
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = "slideOut 0.3s ease";
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Clear entire wishlist
function clearWishlist() {
localStorage.removeItem("wishlist");
updateWishlistCount();
}
// ====================================
// Dropdown Functions
// ====================================
// Render cart dropdown
function renderCartDropdown() {
const cart = getCart();
const cartItems = document.getElementById("cartItems");
const cartTotal = document.getElementById("cartTotal");
if (!cartItems) return;
if (cart.length === 0) {
cartItems.innerHTML = '<p class="empty-message">Your cart is empty</p>';
if (cartTotal) cartTotal.textContent = "$0.00";
return;
}
console.log("Rendering cart:", cart);
cartItems.innerHTML = cart
.map((item) => {
const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
console.log("Cart item image URL:", imgSrc);
return `
<div class="dropdown-item">
<img src="${imgSrc}" alt="${
item.name
}" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
<div class="dropdown-item-info">
<div class="dropdown-item-name">${item.name}</div>
<div class="dropdown-item-details">
<span class="dropdown-item-quantity">Qty: ${
item.quantity
}</span>
<span class="dropdown-item-price">$${(
item.price * item.quantity
).toFixed(2)}</span>
</div>
</div>
<button class="dropdown-item-remove" onclick="removeFromCartDropdown('${
item.id
}')">
<i class="bi bi-x"></i>
</button>
</div>
`;
})
.join("");
if (cartTotal) {
const total = getCartTotal();
cartTotal.textContent = `$${total.toFixed(2)}`;
}
}
// Render wishlist dropdown
function renderWishlistDropdown() {
const wishlist = getWishlist();
const wishlistItems = document.getElementById("wishlistItems");
if (!wishlistItems) return;
if (wishlist.length === 0) {
wishlistItems.innerHTML =
'<p class="empty-message">Your wishlist is empty</p>';
return;
}
console.log("Rendering wishlist:", wishlist);
wishlistItems.innerHTML = wishlist
.map((item) => {
const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
console.log("Wishlist item image URL:", imgSrc);
return `
<div class="dropdown-item">
<img src="${imgSrc}" alt="${
item.name
}" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
<div class="dropdown-item-info">
<div class="dropdown-item-name">${item.name}</div>
<div class="dropdown-item-details">
<span class="dropdown-item-price">$${item.price.toFixed(
2
)}</span>
</div>
</div>
<button class="dropdown-item-remove" onclick="removeFromWishlistDropdown('${
item.id
}')">
<i class="bi bi-x"></i>
</button>
</div>
`;
})
.join("");
}
// Remove from cart via dropdown
function removeFromCartDropdown(id) {
removeFromCart(id);
renderCartDropdown();
updateCartCount();
}
// Remove from wishlist via dropdown
function removeFromWishlistDropdown(id) {
removeFromWishlist(id);
renderWishlistDropdown();
updateWishlistCount();
}
// Toggle dropdown visibility
function toggleDropdown(dropdownId) {
const dropdown = document.getElementById(dropdownId);
if (!dropdown) return;
// Close other dropdowns
document.querySelectorAll(".icon-dropdown").forEach((d) => {
if (d.id !== dropdownId) {
d.classList.remove("show");
}
});
dropdown.classList.toggle("show");
// Render content when opening
if (dropdown.classList.contains("show")) {
if (dropdownId === "cartDropdown") {
renderCartDropdown();
} else if (dropdownId === "wishlistDropdown") {
renderWishlistDropdown();
}
}
}
// Close cart/wishlist dropdowns when clicking outside
document.addEventListener("click", function (e) {
if (
!e.target.closest(".dropdown-container") &&
!e.target.closest(".nav-toggle")
) {
document.querySelectorAll(".icon-dropdown").forEach((d) => {
d.classList.remove("show");
});
}
});
// Initialize cart and wishlist count on page load
document.addEventListener("DOMContentLoaded", function () {
updateCartCount();
updateWishlistCount();
// Add click handlers for dropdown toggles
const cartBtn = document.getElementById("cartBtn");
const wishlistBtn = document.getElementById("wishlistBtn");
if (cartBtn) {
cartBtn.addEventListener("click", function (e) {
e.preventDefault();
toggleDropdown("cartDropdown");
});
}
if (wishlistBtn) {
wishlistBtn.addEventListener("click", function (e) {
e.preventDefault();
toggleDropdown("wishlistDropdown");
});
}
});
/**
* Shopping Cart Component
* Handles cart dropdown, updates, and interactions
*/
(function () {
"use strict";
class ShoppingCart {
constructor() {
this.cartToggle = document.getElementById("cartToggle");
this.cartPanel = document.getElementById("cartPanel");
this.cartContent = document.getElementById("cartContent");
this.cartClose = document.getElementById("cartClose");
this.isOpen = false;
this.init();
}
init() {
this.setupEventListeners();
this.render();
}
setupEventListeners() {
if (this.cartToggle) {
this.cartToggle.addEventListener("click", () => this.toggle());
}
if (this.cartClose) {
this.cartClose.addEventListener("click", () => this.close());
}
// Close when clicking outside
document.addEventListener("click", (e) => {
if (this.isOpen && !e.target.closest(".cart-dropdown-wrapper")) {
this.close();
}
});
// Listen for cart updates
window.addEventListener("cart-updated", () => this.render());
}
toggle() {
this.isOpen ? this.close() : this.open();
}
open() {
if (this.cartPanel) {
this.cartPanel.classList.add("active");
this.cartPanel.setAttribute("aria-hidden", "false");
this.isOpen = true;
this.render();
}
}
close() {
if (this.cartPanel) {
this.cartPanel.classList.remove("active");
this.cartPanel.setAttribute("aria-hidden", "true");
this.isOpen = false;
}
}
render() {
if (!this.cartContent) return;
const cart = window.AppState.cart;
if (cart.length === 0) {
this.cartContent.innerHTML =
'<p class="empty-state">Your cart is empty</p>';
this.updateFooter(null);
return;
}
const html = cart.map((item) => this.renderCartItem(item)).join("");
this.cartContent.innerHTML = html;
// Add event listeners to cart items
this.setupCartItemListeners();
// Update footer with total
this.updateFooter(window.AppState.getCartTotal());
}
renderCartItem(item) {
const imageUrl =
item.imageUrl || item.image_url || "/assets/images/placeholder.jpg";
const title = window.Utils.escapeHtml(
item.title || item.name || "Product"
);
const price = window.Utils.formatCurrency(item.price || 0);
const subtotal = window.Utils.formatCurrency(
(item.price || 0) * item.quantity
);
return `
<div class="cart-item" data-id="${item.id}">
<img src="${imageUrl}" alt="${title}" class="cart-item-image" loading="lazy">
<div class="cart-item-details">
<h4 class="cart-item-title">${title}</h4>
<p class="cart-item-price">${price}</p>
<div class="cart-item-quantity">
<button class="quantity-btn quantity-minus" data-id="${item.id}" aria-label="Decrease quantity">
<i class="bi bi-dash"></i>
</button>
<span class="quantity-value">${item.quantity}</span>
<button class="quantity-btn quantity-plus" data-id="${item.id}" aria-label="Increase quantity">
<i class="bi bi-plus"></i>
</button>
</div>
<p class="cart-item-subtotal">${subtotal}</p>
</div>
<button class="cart-item-remove" data-id="${item.id}" aria-label="Remove from cart">
<i class="bi bi-x-lg"></i>
</button>
</div>
`;
}
setupCartItemListeners() {
// Remove buttons
this.cartContent.querySelectorAll(".cart-item-remove").forEach((btn) => {
btn.addEventListener("click", (e) => {
const id = parseInt(e.currentTarget.dataset.id);
window.AppState.removeFromCart(id);
this.render();
});
});
// Quantity buttons
this.cartContent.querySelectorAll(".quantity-minus").forEach((btn) => {
btn.addEventListener("click", (e) => {
const id = parseInt(e.currentTarget.dataset.id);
const item = window.AppState.cart.find((item) => item.id === id);
if (item && item.quantity > 1) {
window.AppState.updateCartQuantity(id, item.quantity - 1);
this.render();
}
});
});
this.cartContent.querySelectorAll(".quantity-plus").forEach((btn) => {
btn.addEventListener("click", (e) => {
const id = parseInt(e.currentTarget.dataset.id);
const item = window.AppState.cart.find((item) => item.id === id);
if (item) {
window.AppState.updateCartQuantity(id, item.quantity + 1);
this.render();
}
});
});
}
updateFooter(total) {
const footer = this.cartPanel?.querySelector(".dropdown-foot");
if (!footer) return;
if (total === null) {
footer.innerHTML =
'<a href="/shop" class="btn-outline">Continue Shopping</a>';
} else {
footer.innerHTML = `
<div class="cart-total">
<span>Total:</span>
<strong>${window.Utils.formatCurrency(total)}</strong>
</div>
<a href="/shop" class="btn-text">Continue Shopping</a>
<button class="btn-primary-full" onclick="alert('Checkout coming soon!')">
Proceed to Checkout
</button>
`;
}
}
}
// Wishlist Component
class Wishlist {
constructor() {
this.wishlistToggle = document.getElementById("wishlistToggle");
this.wishlistPanel = document.getElementById("wishlistPanel");
this.wishlistContent = document.getElementById("wishlistContent");
this.wishlistClose = document.getElementById("wishlistClose");
this.isOpen = false;
this.init();
}
init() {
this.setupEventListeners();
this.render();
}
setupEventListeners() {
if (this.wishlistToggle) {
this.wishlistToggle.addEventListener("click", () => this.toggle());
}
if (this.wishlistClose) {
this.wishlistClose.addEventListener("click", () => this.close());
}
// Close when clicking outside
document.addEventListener("click", (e) => {
if (this.isOpen && !e.target.closest(".wishlist-dropdown-wrapper")) {
this.close();
}
});
// Listen for wishlist updates
window.addEventListener("wishlist-updated", () => this.render());
}
toggle() {
this.isOpen ? this.close() : this.open();
}
open() {
if (this.wishlistPanel) {
this.wishlistPanel.classList.add("active");
this.wishlistPanel.setAttribute("aria-hidden", "false");
this.isOpen = true;
this.render();
}
}
close() {
if (this.wishlistPanel) {
this.wishlistPanel.classList.remove("active");
this.wishlistPanel.setAttribute("aria-hidden", "true");
this.isOpen = false;
}
}
render() {
if (!this.wishlistContent) return;
const wishlist = window.AppState.wishlist;
if (wishlist.length === 0) {
this.wishlistContent.innerHTML =
'<p class="empty-state">Your wishlist is empty</p>';
return;
}
const html = wishlist
.map((item) => this.renderWishlistItem(item))
.join("");
this.wishlistContent.innerHTML = html;
// Add event listeners
this.setupWishlistItemListeners();
}
renderWishlistItem(item) {
const imageUrl =
item.imageUrl || item.image_url || "/assets/images/placeholder.jpg";
const title = window.Utils.escapeHtml(
item.title || item.name || "Product"
);
const price = window.Utils.formatCurrency(item.price || 0);
return `
<div class="wishlist-item" data-id="${item.id}">
<img src="${imageUrl}" alt="${title}" class="wishlist-item-image" loading="lazy">
<div class="wishlist-item-details">
<h4 class="wishlist-item-title">${title}</h4>
<p class="wishlist-item-price">${price}</p>
<button class="btn-add-to-cart" data-id="${item.id}">Add to Cart</button>
</div>
<button class="wishlist-item-remove" data-id="${item.id}" aria-label="Remove from wishlist">
<i class="bi bi-x-lg"></i>
</button>
</div>
`;
}
setupWishlistItemListeners() {
// Remove buttons
this.wishlistContent
.querySelectorAll(".wishlist-item-remove")
.forEach((btn) => {
btn.addEventListener("click", (e) => {
const id = parseInt(e.currentTarget.dataset.id);
window.AppState.removeFromWishlist(id);
this.render();
});
});
// Add to cart buttons
this.wishlistContent
.querySelectorAll(".btn-add-to-cart")
.forEach((btn) => {
btn.addEventListener("click", (e) => {
const id = parseInt(e.currentTarget.dataset.id);
const item = window.AppState.wishlist.find(
(item) => item.id === id
);
if (item) {
window.AppState.addToCart(item);
}
});
});
}
}
// Initialize when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
new ShoppingCart();
new Wishlist();
});
} else {
new ShoppingCart();
new Wishlist();
}
})();

72
website/assets/js/lazy-load.js Normal file
View File

@@ -0,0 +1,72 @@
/**
* Lazy Loading Images Script
* Optimizes image loading for better performance
*/
(function () {
"use strict";
// Check for Intersection Observer support
if (!("IntersectionObserver" in window)) {
// Fallback: load all images immediately
document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
if (img.dataset.src) {
img.src = img.dataset.src;
}
});
return;
}
// Configure intersection observer
const imageObserver = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
// Load the image
if (img.dataset.src) {
img.src = img.dataset.src;
img.removeAttribute("data-src");
}
// Optional: load srcset
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
img.removeAttribute("data-srcset");
}
// Add loaded class for fade-in effect
img.classList.add("loaded");
// Stop observing this image
observer.unobserve(img);
}
});
},
{
// Start loading when image is 50px from viewport
rootMargin: "50px 0px",
threshold: 0.01,
}
);
// Observe all lazy images
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
lazyImages.forEach((img) => imageObserver.observe(img));
// Add CSS for fade-in effect if not already present
if (!document.getElementById("lazy-load-styles")) {
const style = document.createElement("style");
style.id = "lazy-load-styles";
style.textContent = `
img[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
img[loading="lazy"].loaded {
opacity: 1;
}
`;
document.head.appendChild(style);
}
})();

777
website/assets/js/main.js
View File

@@ -1,427 +1,350 @@
// Sky Art Shop - Main JavaScript File
// ====================================
// Mobile Navigation Toggle
// ====================================
document.addEventListener("DOMContentLoaded", function () {
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector("#navDropdown");
if (navToggle && navMenu) {
// Hover to open dropdown
navToggle.addEventListener("mouseenter", function () {
navMenu.classList.add("active");
this.setAttribute("aria-expanded", "true");
const spans = this.querySelectorAll("span");
spans[0].style.transform = "rotate(45deg) translate(7px, 7px)";
spans[1].style.opacity = "0";
spans[2].style.transform = "rotate(-45deg) translate(7px, -7px)";
});
// Keep dropdown open when hovering over it
navMenu.addEventListener("mouseenter", function () {
this.classList.add("active");
});
// Close when mouse leaves both hamburger and dropdown
navToggle.addEventListener("mouseleave", function (e) {
// Delay closing to allow moving to dropdown
setTimeout(() => {
if (!navMenu.matches(":hover") && !navToggle.matches(":hover")) {
navMenu.classList.remove("active");
navToggle.setAttribute("aria-expanded", "false");
const spans = navToggle.querySelectorAll("span");
spans[0].style.transform = "none";
spans[1].style.opacity = "1";
spans[2].style.transform = "none";
}
}, 200);
});
navMenu.addEventListener("mouseleave", function () {
setTimeout(() => {
if (!navMenu.matches(":hover") && !navToggle.matches(":hover")) {
navMenu.classList.remove("active");
navToggle.setAttribute("aria-expanded", "false");
const spans = navToggle.querySelectorAll("span");
spans[0].style.transform = "none";
spans[1].style.opacity = "1";
spans[2].style.transform = "none";
}
}, 200);
});
// Click to toggle (for mobile/touch)
navToggle.addEventListener("click", function (e) {
e.stopPropagation();
const isActive = navMenu.classList.toggle("active");
this.setAttribute("aria-expanded", isActive ? "true" : "false");
// Animate hamburger menu
const spans = this.querySelectorAll("span");
if (isActive) {
spans[0].style.transform = "rotate(45deg) translate(7px, 7px)";
spans[1].style.opacity = "0";
spans[2].style.transform = "rotate(-45deg) translate(7px, -7px)";
} else {
spans[0].style.transform = "none";
spans[1].style.opacity = "1";
spans[2].style.transform = "none";
}
});
// Close dropdown when clicking on a link
const dropdownLinks = navMenu.querySelectorAll("a");
dropdownLinks.forEach((link) => {
link.addEventListener("click", function () {
navMenu.classList.remove("active");
navToggle.setAttribute("aria-expanded", "false");
const spans = navToggle.querySelectorAll("span");
spans[0].style.transform = "none";
spans[1].style.opacity = "1";
spans[2].style.transform = "none";
});
});
// Close dropdown when clicking outside
document.addEventListener("click", function (event) {
// Don't close if clicking on cart/wishlist dropdowns
if (
event.target.closest(".dropdown-container") ||
event.target.closest(".icon-dropdown")
) {
return;
}
const isClickInside =
navToggle.contains(event.target) || navMenu.contains(event.target);
if (!isClickInside && navMenu.classList.contains("active")) {
navMenu.classList.remove("active");
navToggle.setAttribute("aria-expanded", "false");
const spans = navToggle.querySelectorAll("span");
spans[0].style.transform = "none";
spans[1].style.opacity = "1";
spans[2].style.transform = "none";
}
});
}
});
// ====================================
// Smooth Scrolling for Anchor Links
// ====================================
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
const href = this.getAttribute("href");
if (href !== "#" && href !== "#instagram" && href !== "#wishlist") {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}
});
});
// ====================================
// Shop Page Filtering
// ====================================
const categoryFilter = document.getElementById("category-filter");
const sortFilter = document.getElementById("sort-filter");
if (categoryFilter) {
categoryFilter.addEventListener("change", function () {
const selectedCategory = this.value;
const productCards = document.querySelectorAll(".product-card");
productCards.forEach((card) => {
if (selectedCategory === "all") {
card.style.display = "block";
} else {
const cardCategory = card.getAttribute("data-category");
if (cardCategory === selectedCategory) {
card.style.display = "block";
} else {
card.style.display = "none";
}
}
});
});
}
if (sortFilter) {
sortFilter.addEventListener("change", function () {
const sortValue = this.value;
const productsGrid = document.querySelector(".products-grid");
const productCards = Array.from(document.querySelectorAll(".product-card"));
if (sortValue === "price-low") {
productCards.sort((a, b) => {
const priceA = parseFloat(
a.querySelector(".price").textContent.replace("$", "")
);
const priceB = parseFloat(
b.querySelector(".price").textContent.replace("$", "")
);
return priceA - priceB;
});
} else if (sortValue === "price-high") {
productCards.sort((a, b) => {
const priceA = parseFloat(
a.querySelector(".price").textContent.replace("$", "")
);
const priceB = parseFloat(
b.querySelector(".price").textContent.replace("$", "")
);
return priceB - priceA;
});
}
// Re-append sorted cards
productCards.forEach((card) => {
productsGrid.appendChild(card);
});
});
}
// ====================================
// Add to Cart Functionality (Basic)
// ====================================
document.querySelectorAll(".product-card .btn").forEach((button) => {
button.addEventListener("click", function (e) {
e.preventDefault();
// Get product details
const productCard = this.closest(".product-card");
const productName = productCard.querySelector("h3").textContent;
const productPrice = productCard.querySelector(".price").textContent;
// Show notification
showNotification(`${productName} added to cart!`);
// You can expand this to actually store cart items
// For example, using localStorage or sending to a server
});
});
// ====================================
// Contact Form Handling
// ====================================
const contactForm = document.getElementById("contactForm");
if (contactForm) {
contactForm.addEventListener("submit", function (e) {
e.preventDefault();
// Get form values
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const phone = document.getElementById("phone").value;
const subject = document.getElementById("subject").value;
const message = document.getElementById("message").value;
// Basic validation
if (!name || !email || !subject || !message) {
showNotification("Please fill in all required fields!", "error");
return;
}
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
showNotification("Please enter a valid email address!", "error");
return;
}
// Here you would typically send the form data to a server
// For now, we'll just show a success message
showNotification(
"Thank you! Your message has been sent. We'll get back to you soon.",
"success"
);
// Reset form
contactForm.reset();
});
}
// ====================================
// Notification System
// ====================================
function showNotification(message, type = "success") {
// Create notification element
const notification = document.createElement("div");
notification.className = `notification notification-${type}`;
notification.textContent = message;
// Style the notification
notification.style.cssText = `
position: fixed;
top: 100px;
right: 20px;
background-color: ${type === "success" ? "#4CAF50" : "#F44336"};
color: white;
padding: 15px 25px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 10000;
animation: slideIn 0.3s ease-out;
`;
// Add animation
const style = document.createElement("style");
style.textContent = `
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
}
`;
document.head.appendChild(style);
// Add to page
document.body.appendChild(notification);
// Remove after 3 seconds
setTimeout(() => {
notification.style.animation = "slideOut 0.3s ease-out";
setTimeout(() => {
notification.remove();
}, 300);
}, 3000);
}
// ====================================
// Image Lazy Loading (Optional Enhancement)
// ====================================
if ("IntersectionObserver" in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src || img.src;
img.classList.add("loaded");
observer.unobserve(img);
}
});
});
document.querySelectorAll("img").forEach((img) => {
imageObserver.observe(img);
});
}
// ====================================
// Scroll to Top Button
// ====================================
function createScrollToTopButton() {
const button = document.createElement("button");
button.innerHTML = "↑";
button.className = "scroll-to-top";
button.style.cssText = `
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #6B4E9B;
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
display: none;
z-index: 1000;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
`;
document.body.appendChild(button);
// Show/hide button based on scroll position
window.addEventListener("scroll", () => {
if (window.pageYOffset > 300) {
button.style.display = "block";
} else {
button.style.display = "none";
}
});
// Scroll to top when clicked
button.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
// Hover effect
button.addEventListener("mouseenter", () => {
button.style.backgroundColor = "#5a3e82";
button.style.transform = "translateY(-3px)";
});
button.addEventListener("mouseleave", () => {
button.style.backgroundColor = "#6B4E9B";
button.style.transform = "translateY(0)";
});
}
// Initialize scroll to top button
createScrollToTopButton();
// ====================================
// Portfolio Gallery Hover Effects
// ====================================
document.querySelectorAll(".portfolio-category").forEach((category) => {
category.addEventListener("mouseenter", function () {
this.style.transition = "all 0.3s ease";
});
});
// ====================================
// Active Navigation Link Highlighting
// ====================================
function highlightActiveNavLink() {
const currentPage = window.location.pathname.split("/").pop() || "index.html";
const navLinks = document.querySelectorAll(".nav-menu a");
navLinks.forEach((link) => {
const linkPage = link.getAttribute("href").split("/").pop().split("#")[0];
if (linkPage === currentPage) {
link.classList.add("active");
}
});
}
highlightActiveNavLink();
// ====================================
// Print console message
// ====================================
console.log(
"%c Sky Art Shop Website ",
"background: #6B4E9B; color: white; font-size: 20px; padding: 10px;"
);
console.log("Welcome to Sky Art Shop! 🎨");
/**
* Main Application JavaScript
* Handles global state management, API integration, and core functionality
*/
(function () {
"use strict";
// Global state management
window.AppState = {
cart: [],
wishlist: [],
products: [],
settings: null,
user: null,
// Initialize state from localStorage
init() {
this.loadCart();
this.loadWishlist();
this.updateUI();
},
// Cart management
loadCart() {
try {
const saved = localStorage.getItem("cart");
this.cart = saved ? JSON.parse(saved) : [];
} catch (error) {
console.error("Error loading cart:", error);
this.cart = [];
}
},
saveCart() {
try {
localStorage.setItem("cart", JSON.stringify(this.cart));
this.updateUI();
} catch (error) {
console.error("Error saving cart:", error);
}
},
addToCart(product, quantity = 1) {
const existing = this.cart.find((item) => item.id === product.id);
if (existing) {
existing.quantity += quantity;
} else {
this.cart.push({ ...product, quantity });
}
this.saveCart();
this.showNotification("Added to cart", "success");
},
removeFromCart(productId) {
this.cart = this.cart.filter((item) => item.id !== productId);
this.saveCart();
this.showNotification("Removed from cart", "info");
},
updateCartQuantity(productId, quantity) {
const item = this.cart.find((item) => item.id === productId);
if (item) {
item.quantity = Math.max(1, quantity);
this.saveCart();
}
},
getCartTotal() {
return this.cart.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
},
getCartCount() {
return this.cart.reduce((sum, item) => sum + item.quantity, 0);
},
// Wishlist management
loadWishlist() {
try {
const saved = localStorage.getItem("wishlist");
this.wishlist = saved ? JSON.parse(saved) : [];
} catch (error) {
console.error("Error loading wishlist:", error);
this.wishlist = [];
}
},
saveWishlist() {
try {
localStorage.setItem("wishlist", JSON.stringify(this.wishlist));
this.updateUI();
} catch (error) {
console.error("Error saving wishlist:", error);
}
},
addToWishlist(product) {
if (!this.wishlist.find((item) => item.id === product.id)) {
this.wishlist.push(product);
this.saveWishlist();
this.showNotification("Added to wishlist", "success");
}
},
removeFromWishlist(productId) {
this.wishlist = this.wishlist.filter((item) => item.id !== productId);
this.saveWishlist();
this.showNotification("Removed from wishlist", "info");
},
isInWishlist(productId) {
return this.wishlist.some((item) => item.id === productId);
},
// UI updates
updateUI() {
this.updateCartUI();
this.updateWishlistUI();
},
updateCartUI() {
const count = this.getCartCount();
const badge = document.getElementById("cartCount");
if (badge) {
badge.textContent = count;
badge.style.display = count > 0 ? "flex" : "none";
}
},
updateWishlistUI() {
const count = this.wishlist.length;
const badge = document.getElementById("wishlistCount");
if (badge) {
badge.textContent = count;
badge.style.display = count > 0 ? "flex" : "none";
}
},
// Notifications
showNotification(message, type = "info") {
const notification = document.createElement("div");
notification.className = `notification notification-${type}`;
notification.textContent = message;
notification.setAttribute("role", "alert");
notification.setAttribute("aria-live", "polite");
document.body.appendChild(notification);
setTimeout(() => notification.classList.add("show"), 10);
setTimeout(() => {
notification.classList.remove("show");
setTimeout(() => notification.remove(), 300);
}, 3000);
},
};
// API Client
window.API = {
baseURL: "/api",
async request(endpoint, options = {}) {
try {
const response = await fetch(this.baseURL + endpoint, {
...options,
headers: {
"Content-Type": "application/json",
...options.headers,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("API request failed:", error);
throw error;
}
},
// Product endpoints
async getProducts(filters = {}) {
const params = new URLSearchParams(filters);
return this.request(`/products?${params}`);
},
async getProduct(id) {
return this.request(`/products/${id}`);
},
async getFeaturedProducts() {
return this.request("/products/featured");
},
// Settings endpoint
async getSettings() {
return this.request("/settings");
},
// Homepage endpoint
async getHomepageSettings() {
return this.request("/homepage/settings");
},
// Menu endpoint
async getMenu() {
return this.request("/menu");
},
// Blog endpoints
async getBlogPosts() {
return this.request("/blog");
},
async getBlogPost(id) {
return this.request(`/blog/${id}`);
},
// Portfolio endpoints
async getPortfolioProjects() {
return this.request("/portfolio");
},
async getPortfolioProject(id) {
return this.request(`/portfolio/${id}`);
},
// Pages endpoints
async getPages() {
return this.request("/pages");
},
async getPage(slug) {
return this.request(`/pages/${slug}`);
},
};
// Utility functions
window.Utils = {
// Format currency
formatCurrency(amount) {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
}).format(amount);
},
// Format date
formatDate(date) {
return new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "long",
day: "numeric",
}).format(new Date(date));
},
// Debounce function
debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
},
// Get URL parameter
getUrlParameter(name) {
const params = new URLSearchParams(window.location.search);
return params.get(name);
},
// Safe HTML encode
escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
},
// Show loading state
showLoading(element) {
if (element) {
element.classList.add("loading");
element.setAttribute("aria-busy", "true");
}
},
hideLoading(element) {
if (element) {
element.classList.remove("loading");
element.setAttribute("aria-busy", "false");
}
},
};
// Initialize on DOM ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
window.AppState.init();
});
} else {
window.AppState.init();
}
// Add notification styles if not exists
if (!document.getElementById("notification-styles")) {
const style = document.createElement("style");
style.id = "notification-styles";
style.textContent = `
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
opacity: 0;
transform: translateX(400px);
transition: all 0.3s ease;
max-width: 300px;
}
.notification.show {
opacity: 1;
transform: translateX(0);
}
.notification-success {
border-left: 4px solid #28a745;
}
.notification-error {
border-left: 4px solid #dc3545;
}
.notification-info {
border-left: 4px solid #17a2b8;
}
.notification-warning {
border-left: 4px solid #ffc107;
}
`;
document.head.appendChild(style);
}
})();

256
website/assets/js/navigation.js
View File

@@ -1,79 +1,203 @@
// Dynamic Menu Loader for Sky Art Shop
// Include this in all public pages to load menu from database
/**
* Navigation Component
* Handles mobile menu, dropdowns, and accessibility
*/
(function () {
"use strict";
// Load and render navigation menu from API
async function loadNavigationMenu() {
try {
const response = await fetch("/api/menu");
const data = await response.json();
class Navigation {
constructor() {
this.mobileMenuToggle = document.getElementById("mobileMenuToggle");
this.mobileMenu = document.getElementById("mobileMenu");
this.mobileMenuClose = document.getElementById("mobileMenuClose");
this.overlay = document.getElementById("mobileMenuOverlay");
this.body = document.body;
if (data.success && data.items && data.items.length > 0) {
renderDesktopMenu(data.items);
renderMobileMenu(data.items);
this.init();
}
init() {
this.setupMobileMenu();
this.setupAccessibility();
this.highlightCurrentPage();
this.setupKeyboardNavigation();
}
setupMobileMenu() {
// Open mobile menu
if (this.mobileMenuToggle) {
this.mobileMenuToggle.addEventListener("click", () =>
this.openMobileMenu()
);
}
// Close mobile menu
if (this.mobileMenuClose) {
this.mobileMenuClose.addEventListener("click", () =>
this.closeMobileMenu()
);
}
if (this.overlay) {
this.overlay.addEventListener("click", () => this.closeMobileMenu());
}
// Close on ESC key
document.addEventListener("keydown", (e) => {
if (
e.key === "Escape" &&
this.mobileMenu &&
this.mobileMenu.classList.contains("active")
) {
this.closeMobileMenu();
}
});
}
openMobileMenu() {
if (this.mobileMenu) {
this.mobileMenu.classList.add("active");
this.mobileMenu.setAttribute("aria-hidden", "false");
this.body.style.overflow = "hidden";
if (this.overlay) {
this.overlay.classList.add("active");
}
// Focus first link
const firstLink = this.mobileMenu.querySelector("a");
if (firstLink) {
setTimeout(() => firstLink.focus(), 100);
}
}
}
closeMobileMenu() {
if (this.mobileMenu) {
this.mobileMenu.classList.remove("active");
this.mobileMenu.setAttribute("aria-hidden", "true");
this.body.style.overflow = "";
if (this.overlay) {
this.overlay.classList.remove("active");
}
// Return focus to toggle button
if (this.mobileMenuToggle) {
this.mobileMenuToggle.focus();
}
}
}
setupAccessibility() {
// Wait for body to exist
if (!document.body) return;
// Add ARIA labels to nav items
const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach((link) => {
if (!link.getAttribute("aria-label")) {
link.setAttribute(
"aria-label",
`Navigate to ${link.textContent.trim()}`
);
}
});
// Add skip to main content link
if (!document.getElementById("skip-to-main")) {
const skipLink = document.createElement("a");
skipLink.id = "skip-to-main";
skipLink.href = "#main-content";
skipLink.textContent = "Skip to main content";
skipLink.className = "skip-link";
document.body.insertBefore(skipLink, document.body.firstChild);
// Add styles for skip link
if (!document.getElementById("skip-link-styles")) {
const style = document.createElement("style");
style.id = "skip-link-styles";
style.textContent = `
.skip-link {
position: fixed;
top: -100px;
left: 0;
padding: 10px 20px;
background: #000;
color: #fff;
z-index: 10001;
text-decoration: none;
border-radius: 0 0 8px 0;
}
.skip-link:focus {
top: 0;
}
`;
document.head.appendChild(style);
}
}
}
highlightCurrentPage() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll(".nav-link, .mobile-link");
navLinks.forEach((link) => {
const href = link.getAttribute("href");
if (
href &&
(currentPath === href || currentPath.startsWith(href + "/"))
) {
link.classList.add("active");
link.setAttribute("aria-current", "page");
} else {
link.classList.remove("active");
link.removeAttribute("aria-current");
}
});
}
setupKeyboardNavigation() {
// Tab trap in mobile menu when open
if (this.mobileMenu) {
const focusableElements = this.mobileMenu.querySelectorAll(
'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
if (focusableElements.length > 0) {
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
this.mobileMenu.addEventListener("keydown", (e) => {
if (
e.key === "Tab" &&
this.mobileMenu.classList.contains("active")
) {
if (e.shiftKey) {
if (document.activeElement === firstElement) {
e.preventDefault();
lastElement.focus();
}
} else {
if (document.activeElement === lastElement) {
e.preventDefault();
firstElement.focus();
}
}
}
});
}
}
} catch (error) {
console.error("Failed to load menu:", error);
// Keep existing hardcoded menu as fallback
}
}
function renderDesktopMenu(items) {
const desktopMenuList = document.querySelector(".nav-menu-list");
if (!desktopMenuList) return;
desktopMenuList.innerHTML = items
.map(
(item) => `
<li class="nav-item">
<a href="${item.url}" class="nav-link">
${item.icon ? `<i class="bi ${item.icon}"></i> ` : ""}${item.label}
</a>
</li>
`
)
.join("");
// Set active state based on current page
const currentPath = window.location.pathname;
document.querySelectorAll(".nav-link").forEach((link) => {
if (link.getAttribute("href") === currentPath) {
link.classList.add("active");
}
});
}
function renderMobileMenu(items) {
const mobileMenuList = document.querySelector(".mobile-menu-list");
if (!mobileMenuList) return;
mobileMenuList.innerHTML = items
.map(
(item) => `
<li>
<a href="${item.url}" class="mobile-link">
${item.icon ? `<i class="bi ${item.icon}"></i> ` : ""}${item.label}
</a>
</li>
`
)
.join("");
// Set active state for mobile menu
const currentPath = window.location.pathname;
document.querySelectorAll(".mobile-link").forEach((link) => {
if (link.getAttribute("href") === currentPath) {
link.classList.add("active");
}
});
}
// Load menu when DOM is ready
// Initialize navigation when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", loadNavigationMenu);
document.addEventListener("DOMContentLoaded", () => {
new Navigation();
});
} else {
loadNavigationMenu();
new Navigation();
}
})();

224
website/assets/js/notifications.js Normal file
View File

@@ -0,0 +1,224 @@
/**
* Notification System
* Accessible toast notifications
*/
(function () {
"use strict";
class NotificationManager {
constructor() {
this.container = null;
this.notifications = new Map();
this.init();
}
init() {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () =>
this.createContainer()
);
} else {
this.createContainer();
}
}
createContainer() {
if (!document.body || this.container) return;
this.container = document.createElement("div");
this.container.id = "notification-container";
this.container.setAttribute("aria-live", "polite");
this.container.setAttribute("aria-atomic", "true");
this.container.className = "notification-container";
const style = document.createElement("style");
style.textContent = `
.notification-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
pointer-events: none;
}
.notification {
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 12px;
color: white;
font-size: 14px;
font-weight: 500;
pointer-events: auto;
animation: slideInRight 0.3s ease;
min-width: 250px;
}
.notification.removing {
animation: slideOutRight 0.3s ease;
}
.notification-success {
background: #10b981;
}
.notification-error {
background: #ef4444;
}
.notification-info {
background: #3b82f6;
}
.notification-warning {
background: #f59e0b;
}
.notification-icon {
font-size: 18px;
flex-shrink: 0;
}
.notification-message {
flex: 1;
}
.notification-close {
background: transparent;
border: none;
color: white;
cursor: pointer;
padding: 4px;
opacity: 0.8;
transition: opacity 0.2s;
}
.notification-close:hover {
opacity: 1;
}
@keyframes slideInRight {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
}
@media (max-width: 640px) {
.notification-container {
right: 10px;
left: 10px;
max-width: none;
}
.notification {
min-width: auto;
}
}
`;
document.head.appendChild(style);
document.body.appendChild(this.container);
}
show(message, type = "info", duration = 3000) {
if (!this.container) this.createContainer();
if (!this.container) return;
const id = Date.now() + Math.random();
const notification = document.createElement("div");
notification.className = `notification notification-${type}`;
notification.setAttribute("role", "alert");
const icons = {
success: "✓",
error: "✕",
info: "ℹ",
warning: "⚠",
};
notification.innerHTML = `
<span class="notification-icon">${icons[type] || icons.info}</span>
<span class="notification-message">${this.escapeHtml(message)}</span>
<button class="notification-close" aria-label="Close notification">×</button>
`;
const closeBtn = notification.querySelector(".notification-close");
closeBtn.addEventListener("click", () => this.remove(id));
this.container.appendChild(notification);
this.notifications.set(id, notification);
if (duration > 0) {
setTimeout(() => this.remove(id), duration);
}
return id;
}
remove(id) {
const notification = this.notifications.get(id);
if (!notification) return;
notification.classList.add("removing");
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
this.notifications.delete(id);
}, 300);
}
escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
success(message, duration) {
return this.show(message, "success", duration);
}
error(message, duration) {
return this.show(message, "error", duration);
}
info(message, duration) {
return this.show(message, "info", duration);
}
warning(message, duration) {
return this.show(message, "warning", duration);
}
}
// Create global instance
window.Notifications = window.Notifications || new NotificationManager();
// Legacy compatibility
window.showNotification = function (message, type = "info") {
window.Notifications.show(message, type);
};
})();

684
website/assets/js/page-transitions.js
View File

@@ -1,143 +1,555 @@
// Smooth Page Transitions for Sky Art Shop
// Provides fade-out/fade-in effects when navigating between pages
/**
* Page Transitions and Smooth Navigation
* Handles page loading, transitions, and history management
*/
(function () {
"use strict";
class PageTransitions {
constructor() {
this.transitionDuration = 300;
this.isTransitioning = false;
this.init();
}
// Add page transition styles (less aggressive approach)
const style = document.createElement("style");
style.textContent = `
body {
transition: opacity 0.25s ease-in-out;
init() {
// Wait for body to exist
if (!document.body) return;
// Add transition wrapper if it doesn't exist
if (!document.getElementById("page-transition")) {
const wrapper = document.createElement("div");
wrapper.id = "page-transition";
wrapper.className = "page-transition";
// Wrap main content
const main = document.querySelector("main") || document.body;
const parent = main.parentNode;
parent.insertBefore(wrapper, main);
wrapper.appendChild(main);
}
body.page-transitioning {
// Add fade-in on page load
this.fadeIn();
// Intercept navigation clicks
this.setupLinkInterception();
// Handle back/forward buttons
window.addEventListener("popstate", (e) => {
if (e.state && e.state.url) {
this.navigate(e.state.url, false);
}
});
// Add scroll restoration
if ("scrollRestoration" in history) {
history.scrollRestoration = "manual";
}
}
fadeIn() {
const wrapper = document.getElementById("page-transition");
if (wrapper) {
wrapper.classList.add("fade-in");
setTimeout(() => {
wrapper.classList.remove("fade-in");
}, this.transitionDuration);
}
}
fadeOut(callback) {
const wrapper = document.getElementById("page-transition");
if (wrapper) {
wrapper.classList.add("fade-out");
setTimeout(() => {
if (callback) callback();
wrapper.classList.remove("fade-out");
}, this.transitionDuration);
} else {
if (callback) callback();
}
}
setupLinkInterception() {
document.addEventListener("click", (e) => {
const link = e.target.closest("a");
// Check if it's a valid internal link
if (!link) return;
if (link.hasAttribute("data-no-transition")) return;
if (link.target === "_blank") return;
if (link.hasAttribute("download")) return;
const href = link.getAttribute("href");
if (
!href ||
href.startsWith("#") ||
href.startsWith("mailto:") ||
href.startsWith("tel:")
)
return;
// Check if it's an external link
const url = new URL(href, window.location.origin);
if (url.origin !== window.location.origin) return;
// Intercept the navigation
e.preventDefault();
this.navigate(href, true);
});
}
navigate(url, updateHistory = true) {
if (this.isTransitioning) return;
this.isTransitioning = true;
this.fadeOut(() => {
if (updateHistory) {
history.pushState({ url }, "", url);
}
window.location.href = url;
});
}
// Scroll to element with smooth animation
scrollTo(selector, offset = 0) {
const element = document.querySelector(selector);
if (!element) return;
const top =
element.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({
top,
behavior: "smooth",
});
}
// Scroll to top
scrollToTop() {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
}
/**
* Lazy Loading Images
* Improves performance by loading images only when they're visible
*/
class LazyLoader {
constructor() {
this.images = [];
this.observer = null;
this.init();
}
init() {
// Find all lazy images
this.images = document.querySelectorAll(
'img[data-src], img[loading="lazy"]'
);
// Set up Intersection Observer
if ("IntersectionObserver" in window) {
this.observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.loadImage(entry.target);
}
});
},
{
rootMargin: "50px",
}
);
this.images.forEach((img) => this.observer.observe(img));
} else {
// Fallback for older browsers
this.images.forEach((img) => this.loadImage(img));
}
}
loadImage(img) {
const src = img.getAttribute("data-src");
if (src) {
img.src = src;
img.removeAttribute("data-src");
}
// Add fade-in effect
img.addEventListener("load", () => {
img.classList.add("loaded");
});
if (this.observer) {
this.observer.unobserve(img);
}
}
// Add new images to observer
observe(images) {
if (!images) return;
const imageList = Array.isArray(images) ? images : [images];
imageList.forEach((img) => {
if (this.observer) {
this.observer.observe(img);
} else {
this.loadImage(img);
}
});
}
}
/**
* Smooth Scroll Handler
* Adds smooth scrolling to anchor links
*/
class SmoothScroll {
constructor() {
this.init();
}
init() {
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", (e) => {
const href = anchor.getAttribute("href");
if (href === "#") return;
e.preventDefault();
const target = document.querySelector(href);
if (target) {
const offset = 80; // Account for fixed header
const top =
target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({
top,
behavior: "smooth",
});
// Update URL without scrolling
history.pushState(null, "", href);
}
});
});
}
}
/**
* Back to Top Button
* Shows/hides button based on scroll position
*/
class BackToTop {
constructor() {
this.button = null;
this.scrollThreshold = 300;
this.init();
}
init() {
// Wait for body to exist
if (!document.body) return;
// Create button if it doesn't exist
this.button = document.getElementById("back-to-top");
if (!this.button) {
this.button = document.createElement("button");
this.button.id = "back-to-top";
this.button.className = "back-to-top";
this.button.innerHTML = "↑";
this.button.setAttribute("aria-label", "Back to top");
document.body.appendChild(this.button);
}
// Handle scroll
window.addEventListener("scroll", () => {
if (window.pageYOffset > this.scrollThreshold) {
this.button.classList.add("visible");
} else {
this.button.classList.remove("visible");
}
});
// Handle click
this.button.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
}
}
/**
* Loading Overlay
* Shows loading state during async operations
*/
class LoadingOverlay {
constructor() {
this.overlay = null;
this.activeOperations = 0;
this.init();
}
init() {
// Wait for body to exist
if (!document.body) return;
// Create overlay if it doesn't exist
this.overlay = document.getElementById("loading-overlay");
if (!this.overlay) {
this.overlay = document.createElement("div");
this.overlay.id = "loading-overlay";
this.overlay.className = "loading-overlay";
this.overlay.innerHTML = `
<div class="loading-spinner">
<div class="spinner"></div>
<p>Loading...</p>
</div>
`;
document.body.appendChild(this.overlay);
}
}
show() {
this.activeOperations++;
this.overlay.classList.add("active");
document.body.style.overflow = "hidden";
}
hide() {
this.activeOperations = Math.max(0, this.activeOperations - 1);
if (this.activeOperations === 0) {
this.overlay.classList.remove("active");
document.body.style.overflow = "";
}
}
// Force hide regardless of operation count
forceHide() {
this.activeOperations = 0;
this.overlay.classList.remove("active");
document.body.style.overflow = "";
}
}
/**
* Page Visibility Handler
* Handles actions when page becomes visible/hidden
*/
class PageVisibility {
constructor() {
this.callbacks = {
visible: [],
hidden: [],
};
this.init();
}
init() {
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
this.callbacks.hidden.forEach((cb) => cb());
} else {
this.callbacks.visible.forEach((cb) => cb());
}
});
}
onVisible(callback) {
this.callbacks.visible.push(callback);
}
onHidden(callback) {
this.callbacks.hidden.push(callback);
}
}
/**
* Network Status Handler
* Monitors online/offline status
*/
class NetworkStatus {
constructor() {
this.isOnline = navigator.onLine;
this.callbacks = {
online: [],
offline: [],
};
this.init();
}
init() {
window.addEventListener("online", () => {
this.isOnline = true;
this.callbacks.online.forEach((cb) => cb());
this.showNotification("Back online", "success");
});
window.addEventListener("offline", () => {
this.isOnline = false;
this.callbacks.offline.forEach((cb) => cb());
this.showNotification("No internet connection", "error");
});
}
onOnline(callback) {
this.callbacks.online.push(callback);
}
onOffline(callback) {
this.callbacks.offline.push(callback);
}
showNotification(message, type) {
if (window.Utils && window.Utils.notify) {
window.Utils.notify(message, type);
}
}
}
// Initialize when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initPageTransitions);
} else {
initPageTransitions();
}
function initPageTransitions() {
// Initialize all modules
window.pageTransitions = new PageTransitions();
window.lazyLoader = new LazyLoader();
window.smoothScroll = new SmoothScroll();
window.backToTop = new BackToTop();
window.loadingOverlay = new LoadingOverlay();
window.pageVisibility = new PageVisibility();
window.networkStatus = new NetworkStatus();
console.log("Page transitions initialized");
}
// Add CSS if not already present
if (!document.getElementById("page-transitions-styles")) {
const style = document.createElement("style");
style.id = "page-transitions-styles";
style.textContent = `
.page-transition {
opacity: 1;
transition: opacity 300ms ease;
}
.page-transition.fade-in {
opacity: 0;
pointer-events: none;
animation: fadeIn 300ms ease forwards;
}
.page-transition.fade-out {
opacity: 1;
animation: fadeOut 300ms ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
img[data-src] {
opacity: 0;
transition: opacity 300ms ease;
}
img.loaded {
opacity: 1;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #667eea;
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 999;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: #5568d3;
transform: translateY(-2px);
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 9999;
}
.loading-overlay.active {
opacity: 1;
visibility: visible;
}
.loading-spinner {
text-align: center;
}
.spinner {
width: 60px;
height: 60px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-spinner p {
color: #667eea;
font-size: 16px;
font-weight: 600;
margin: 0;
}
`;
document.head.appendChild(style);
// Fade in page on load (if coming from a transition)
function initPageTransition() {
// Check if we're coming from a transition
const isTransitioning = sessionStorage.getItem("page-transitioning");
if (isTransitioning === "true") {
document.body.style.opacity = "0";
sessionStorage.removeItem("page-transitioning");
// Wait for content to be ready, then fade in
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.body.style.opacity = "1";
});
});
}
}
// Handle navigation with transitions
function setupNavigationTransitions() {
// Get all internal links
document.addEventListener("click", function (e) {
const link = e.target.closest("a");
if (!link) return;
const href = link.getAttribute("href");
// Skip if:
// - External link
// - Opens in new tab
// - Has download attribute
// - Is a hash link on same page
// - Is a javascript: link
// - Is a mailto: or tel: link
if (
!href ||
link.target === "_blank" ||
link.hasAttribute("download") ||
href.startsWith("javascript:") ||
href.startsWith("mailto:") ||
href.startsWith("tel:") ||
href.startsWith("#") ||
(href.includes("://") && !href.includes(window.location.host))
) {
return;
}
// Prevent default navigation
e.preventDefault();
// Start transition
document.body.classList.add("page-transitioning");
sessionStorage.setItem("page-transitioning", "true");
// Navigate after fade-out completes
setTimeout(() => {
window.location.href = href;
}, 250); // Match CSS transition duration
});
}
// Use View Transitions API if available (Chrome 111+, Safari 18+)
function setupViewTransitions() {
if (!document.startViewTransition) return;
document.addEventListener(
"click",
function (e) {
const link = e.target.closest("a");
if (!link) return;
const href = link.getAttribute("href");
// Same checks as above
if (
!href ||
link.target === "_blank" ||
link.hasAttribute("download") ||
href.startsWith("javascript:") ||
href.startsWith("mailto:") ||
href.startsWith("tel:") ||
href.startsWith("#") ||
(href.includes("://") && !href.includes(window.location.host))
) {
return;
}
e.preventDefault();
// Use View Transitions API for smooth cross-page transitions
sessionStorage.setItem("page-transitioning", "true");
document.startViewTransition(() => {
window.location.href = href;
});
},
true
); // Use capture to run before other handlers
}
// Initialize
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
initPageTransition();
setupNavigationTransitions();
});
} else {
initPageTransition();
setupNavigationTransitions();
}
// For browsers that support View Transitions API (progressive enhancement)
if ("startViewTransition" in document) {
const viewStyle = document.createElement("style");
viewStyle.textContent = `
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.25s;
}
`;
document.head.appendChild(viewStyle);
}
})();
}

612
website/assets/js/shopping.js
View File

@@ -1,376 +1,306 @@
/**
* Enhanced Cart and Wishlist Management System
* Amazon/eBay-style product display with images and details
* Shopping/Products Component
* Handles product display, filtering, and interactions
*/
class ShoppingManager {
constructor() {
this.cart = this.loadFromStorage("skyart_cart") || [];
this.wishlist = this.loadFromStorage("skyart_wishlist") || [];
this.init();
}
(function () {
"use strict";
init() {
this.updateAllBadges();
this.setupEventListeners();
this.renderCart();
this.renderWishlist();
}
class ShoppingPage {
constructor() {
this.productsContainer = document.getElementById("productsContainer");
this.loadingIndicator = document.getElementById("loadingIndicator");
this.errorContainer = document.getElementById("errorContainer");
this.currentCategory = window.Utils.getUrlParameter("category") || "all";
this.currentSort = "newest";
this.products = [];
loadFromStorage(key) {
try {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : null;
} catch (e) {
console.error("Error loading from storage:", e);
return null;
this.init();
}
}
saveToStorage(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
} catch (e) {
console.error("Error saving to storage:", e);
async init() {
this.setupEventListeners();
await this.loadProducts();
}
}
setupEventListeners() {
// Cart toggle
const cartToggle = document.getElementById("cartToggle");
const cartPanel = document.getElementById("cartPanel");
const cartClose = document.getElementById("cartClose");
if (cartToggle) {
cartToggle.addEventListener("click", (e) => {
e.stopPropagation();
cartPanel?.classList.toggle("active");
document.getElementById("wishlistPanel")?.classList.remove("active");
setupEventListeners() {
// Category filters
document.querySelectorAll("[data-category]").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
this.currentCategory = e.currentTarget.dataset.category;
this.filterProducts();
});
});
}
if (cartClose) {
cartClose.addEventListener("click", (e) => {
e.stopPropagation();
cartPanel?.classList.remove("active");
});
}
// Wishlist toggle
const wishlistToggle = document.getElementById("wishlistToggle");
const wishlistPanel = document.getElementById("wishlistPanel");
const wishlistClose = document.getElementById("wishlistClose");
if (wishlistToggle) {
wishlistToggle.addEventListener("click", (e) => {
e.stopPropagation();
wishlistPanel?.classList.toggle("active");
cartPanel?.classList.remove("active");
});
}
if (wishlistClose) {
wishlistClose.addEventListener("click", (e) => {
e.stopPropagation();
wishlistPanel?.classList.remove("active");
});
}
// Mobile menu
const mobileToggle = document.getElementById("mobileMenuToggle");
const mobileMenu = document.getElementById("mobileMenu");
const mobileClose = document.getElementById("mobileMenuClose");
if (mobileToggle) {
mobileToggle.addEventListener("click", () => {
mobileMenu?.classList.toggle("active");
document.body.style.overflow = mobileMenu?.classList.contains("active")
? "hidden"
: "";
});
}
if (mobileClose) {
mobileClose.addEventListener("click", () => {
mobileMenu?.classList.remove("active");
document.body.style.overflow = "";
});
}
// Close dropdowns on outside click
document.addEventListener("click", (e) => {
if (!e.target.closest(".cart-dropdown-wrapper")) {
cartPanel?.classList.remove("active");
// Sort dropdown
const sortSelect = document.getElementById("sortSelect");
if (sortSelect) {
sortSelect.addEventListener("change", (e) => {
this.currentSort = e.target.value;
this.filterProducts();
});
}
if (!e.target.closest(".wishlist-dropdown-wrapper")) {
wishlistPanel?.classList.remove("active");
}
});
}
// Add to Cart
addToCart(product, quantity = 1) {
const existingItem = this.cart.find((item) => item.id === product.id);
if (existingItem) {
existingItem.quantity += quantity;
} else {
this.cart.push({
id: product.id,
name: product.name,
price: parseFloat(product.price),
imageurl: product.imageurl,
quantity: quantity,
addedAt: new Date().toISOString(),
});
}
this.saveToStorage("skyart_cart", this.cart);
this.updateAllBadges();
this.renderCart();
this.showNotification(`${product.name} added to cart!`, "success");
}
// Remove from Cart
removeFromCart(productId) {
this.cart = this.cart.filter((item) => item.id !== productId);
this.saveToStorage("skyart_cart", this.cart);
this.updateAllBadges();
this.renderCart();
this.showNotification("Item removed from cart", "info");
}
// Update Cart Quantity
updateCartQuantity(productId, quantity) {
const item = this.cart.find((item) => item.id === productId);
if (item) {
if (quantity <= 0) {
this.removeFromCart(productId);
} else {
item.quantity = quantity;
this.saveToStorage("skyart_cart", this.cart);
this.updateAllBadges();
this.renderCart();
// Search
const searchInput = document.getElementById("productSearch");
if (searchInput) {
searchInput.addEventListener(
"input",
window.Utils.debounce((e) => {
this.searchProducts(e.target.value);
}, 300)
);
}
}
}
// Add to Wishlist
addToWishlist(product) {
const exists = this.wishlist.find((item) => item.id === product.id);
async loadProducts() {
if (!this.productsContainer) return;
if (!exists) {
this.wishlist.push({
id: product.id,
name: product.name,
price: parseFloat(product.price),
imageurl: product.imageurl,
addedAt: new Date().toISOString(),
try {
this.showLoading();
const response = await window.API.getProducts();
this.products = response.products || response.data || [];
this.renderProducts(this.products);
this.hideLoading();
} catch (error) {
console.error("Error loading products:", error);
this.showError("Failed to load products. Please try again later.");
this.hideLoading();
}
}
filterProducts() {
let filtered = [...this.products];
// Filter by category
if (this.currentCategory && this.currentCategory !== "all") {
filtered = filtered.filter(
(p) =>
p.category?.toLowerCase() === this.currentCategory.toLowerCase()
);
}
// Sort products
filtered = this.sortProducts(filtered);
this.renderProducts(filtered);
}
sortProducts(products) {
switch (this.currentSort) {
case "price-low":
return products.sort((a, b) => (a.price || 0) - (b.price || 0));
case "price-high":
return products.sort((a, b) => (b.price || 0) - (a.price || 0));
case "name":
return products.sort((a, b) =>
(a.title || a.name || "").localeCompare(b.title || b.name || "")
);
case "newest":
default:
return products.sort(
(a, b) => new Date(b.created_at || 0) - new Date(a.created_at || 0)
);
}
}
searchProducts(query) {
if (!query.trim()) {
this.filterProducts();
return;
}
const searchTerm = query.toLowerCase();
const filtered = this.products.filter((p) => {
const title = (p.title || p.name || "").toLowerCase();
const description = (p.description || "").toLowerCase();
const category = (p.category || "").toLowerCase();
return (
title.includes(searchTerm) ||
description.includes(searchTerm) ||
category.includes(searchTerm)
);
});
this.saveToStorage("skyart_wishlist", this.wishlist);
this.updateAllBadges();
this.renderWishlist();
this.showNotification(`${product.name} added to wishlist!`, "success");
} else {
this.showNotification("Already in wishlist", "info");
}
}
// Remove from Wishlist
removeFromWishlist(productId) {
this.wishlist = this.wishlist.filter((item) => item.id !== productId);
this.saveToStorage("skyart_wishlist", this.wishlist);
this.updateAllBadges();
this.renderWishlist();
this.showNotification("Item removed from wishlist", "info");
}
// Move from Wishlist to Cart
moveToCart(productId) {
const item = this.wishlist.find((item) => item.id === productId);
if (item) {
this.addToCart(item, 1);
this.removeFromWishlist(productId);
}
}
// Update All Badges
updateAllBadges() {
const cartCount = this.cart.reduce((sum, item) => sum + item.quantity, 0);
const wishlistCount = this.wishlist.length;
const cartBadge = document.getElementById("cartCount");
const wishlistBadge = document.getElementById("wishlistCount");
if (cartBadge) {
cartBadge.textContent = cartCount;
cartBadge.style.display = cartCount > 0 ? "flex" : "none";
this.renderProducts(filtered);
}
if (wishlistBadge) {
wishlistBadge.textContent = wishlistCount;
wishlistBadge.style.display = wishlistCount > 0 ? "flex" : "none";
}
}
renderProducts(products) {
if (!this.productsContainer) return;
// Render Cart
renderCart() {
const cartContent = document.getElementById("cartContent");
const cartSubtotal = document.getElementById("cartSubtotal");
if (products.length === 0) {
this.productsContainer.innerHTML = `
<div class="no-products">
<i class="bi bi-inbox" style="font-size: 48px; opacity: 0.5;"></i>
<p>No products found</p>
</div>
`;
return;
}
if (!cartContent) return;
const html = products
.map((product) => this.renderProductCard(product))
.join("");
this.productsContainer.innerHTML = html;
if (this.cart.length === 0) {
cartContent.innerHTML = '<p class="empty-state">Your cart is empty</p>';
if (cartSubtotal) cartSubtotal.textContent = "$0.00";
return;
// Setup product card listeners
this.setupProductListeners();
}
const subtotal = this.cart.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
renderProductCard(product) {
const id = product.id;
const title = window.Utils?.escapeHtml
? window.Utils.escapeHtml(product.title || product.name || "Product")
: product.title || product.name || "Product";
const price = window.Utils?.formatCurrency
? window.Utils.formatCurrency(product.price || 0)
: `$${parseFloat(product.price || 0).toFixed(2)}`;
cartContent.innerHTML = this.cart
.map(
(item) => `
<div class="cart-item" data-product-id="${item.id}">
<div class="cart-item-image">
<img src="${item.imageurl || "/assets/images/placeholder.jpg"}"
alt="${item.name}"
onerror="this.src='/assets/images/placeholder.jpg'" />
</div>
<div class="cart-item-details">
<h4 class="cart-item-name">${item.name}</h4>
<p class="cart-item-price">$${item.price.toFixed(2)}</p>
<div class="cart-item-quantity">
<button class="qty-btn" onclick="shoppingManager.updateCartQuantity('${
item.id
}', ${item.quantity - 1})">
<i class="bi bi-dash"></i>
</button>
<span class="qty-value">${item.quantity}</span>
<button class="qty-btn" onclick="shoppingManager.updateCartQuantity('${
item.id
}', ${item.quantity + 1})">
<i class="bi bi-plus"></i>
// Get image URL from multiple possible sources
let imageUrl = "/assets/images/placeholder.jpg";
if (
product.images &&
Array.isArray(product.images) &&
product.images.length > 0
) {
const primaryImg = product.images.find((img) => img.is_primary);
imageUrl = primaryImg
? primaryImg.image_url
: product.images[0].image_url;
} else if (product.imageUrl) {
imageUrl = product.imageUrl;
} else if (product.image_url) {
imageUrl = product.image_url;
}
// Get description
const description =
product.shortdescription ||
(product.description
? product.description.substring(0, 100) + "..."
: "");
const isInWishlist = window.AppState?.isInWishlist(id) || false;
return `
<article class="product-card" data-id="${id}">
<div class="product-image-wrapper">
<img src="${imageUrl}" alt="${title}" class="product-image" loading="lazy" onerror="this.src='/assets/images/placeholder.svg'">
<button
class="wishlist-btn ${isInWishlist ? "active" : ""}"
data-id="${id}"
aria-label="${
isInWishlist ? "Remove from wishlist" : "Add to wishlist"
}"
>
<i class="bi bi-heart${isInWishlist ? "-fill" : ""}"></i>
</button>
</div>
</div>
<div class="cart-item-actions">
<button class="cart-item-remove" onclick="shoppingManager.removeFromCart('${
item.id
}')" title="Remove">
<i class="bi bi-trash"></i>
</button>
<p class="cart-item-total">$${(item.price * item.quantity).toFixed(
2
)}</p>
</div>
</div>
`
)
.join("");
<div class="product-info">
<a href="/product?id=${id}" style="text-decoration: none; color: inherit;">
<h3 class="product-title">${title}</h3>
</a>
${
description
? `<div class="product-description">${description}</div>`
: ""
}
<p class="product-price">${price}</p>
<div class="product-actions">
<button class="btn-add-to-cart" data-id="${id}" style="flex: 1;">
<i class="bi bi-cart-plus"></i> Add to Cart
</button>
</div>
</div>
</article>
`;
}
if (cartSubtotal) {
cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
setupProductListeners() {
// Add to cart buttons
this.productsContainer
.querySelectorAll(".btn-add-to-cart")
.forEach((btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
const id = parseInt(e.currentTarget.dataset.id);
const product = this.products.find((p) => p.id === id);
if (product) {
window.AppState.addToCart(product);
}
});
});
// Wishlist buttons
this.productsContainer
.querySelectorAll(".wishlist-btn")
.forEach((btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
const id = parseInt(e.currentTarget.dataset.id);
const product = this.products.find((p) => p.id === id);
if (product) {
if (window.AppState.isInWishlist(id)) {
window.AppState.removeFromWishlist(id);
} else {
window.AppState.addToWishlist(product);
}
this.renderProducts(this.products);
}
});
});
}
showLoading() {
if (this.loadingIndicator) {
this.loadingIndicator.style.display = "flex";
}
if (this.productsContainer) {
this.productsContainer.style.opacity = "0.5";
}
}
hideLoading() {
if (this.loadingIndicator) {
this.loadingIndicator.style.display = "none";
}
if (this.productsContainer) {
this.productsContainer.style.opacity = "1";
}
}
showError(message) {
if (this.errorContainer) {
this.errorContainer.innerHTML = `
<div class="error-message" role="alert">
<i class="bi bi-exclamation-triangle"></i>
<p>${window.Utils.escapeHtml(message)}</p>
<button onclick="location.reload()">Retry</button>
</div>
`;
this.errorContainer.style.display = "block";
}
}
}
// Render Wishlist
renderWishlist() {
const wishlistContent = document.getElementById("wishlistContent");
if (!wishlistContent) return;
if (this.wishlist.length === 0) {
wishlistContent.innerHTML =
'<p class="empty-state">Your wishlist is empty</p>';
return;
// Initialize on shop/products pages
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
if (
window.location.pathname.includes("/shop") ||
window.location.pathname.includes("/products")
) {
new ShoppingPage();
}
});
} else {
if (
window.location.pathname.includes("/shop") ||
window.location.pathname.includes("/products")
) {
new ShoppingPage();
}
wishlistContent.innerHTML = this.wishlist
.map(
(item) => `
<div class="wishlist-item" data-product-id="${item.id}">
<div class="wishlist-item-image">
<img src="${item.imageurl || "/assets/images/placeholder.jpg"}"
alt="${item.name}"
onerror="this.src='/assets/images/placeholder.jpg'" />
</div>
<div class="wishlist-item-details">
<h4 class="wishlist-item-name">${item.name}</h4>
<p class="wishlist-item-price">$${item.price.toFixed(2)}</p>
<button class="btn-move-to-cart" onclick="shoppingManager.moveToCart('${
item.id
}')">
<i class="bi bi-cart-plus"></i> Add to Cart
</button>
</div>
<button class="wishlist-item-remove" onclick="shoppingManager.removeFromWishlist('${
item.id
}')" title="Remove">
<i class="bi bi-x-lg"></i>
</button>
</div>
`
)
.join("");
}
// Show Notification
showNotification(message, type = "info") {
const notification = document.createElement("div");
notification.className = `notification notification-${type}`;
notification.innerHTML = `
<i class="bi bi-${
type === "success" ? "check-circle" : "info-circle"
}"></i>
<span>${message}</span>
`;
document.body.appendChild(notification);
setTimeout(() => notification.classList.add("show"), 10);
setTimeout(() => {
notification.classList.remove("show");
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Get Cart Total
getCartTotal() {
return this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
}
// Get Cart Count
getCartCount() {
return this.cart.reduce((sum, item) => sum + item.quantity, 0);
}
// Clear Cart
clearCart() {
this.cart = [];
this.saveToStorage("skyart_cart", this.cart);
this.updateAllBadges();
this.renderCart();
}
}
// Initialize Shopping Manager
const shoppingManager = new ShoppingManager();
// Make it globally available
window.shoppingManager = shoppingManager;
// Navigation active state
document.addEventListener("DOMContentLoaded", () => {
const currentPage = window.location.pathname.split("/").pop() || "home.html";
document.querySelectorAll(".nav-link, .mobile-link").forEach((link) => {
const linkPage = link.getAttribute("href")?.split("/").pop();
if (linkPage === currentPage) {
link.classList.add("active");
}
});
});
})();

236
website/assets/js/state-manager.js Normal file
View File

@@ -0,0 +1,236 @@
/**
* Global State Management
* Centralized state for cart, wishlist, and user preferences
*/
(function () {
"use strict";
class StateManager {
constructor() {
this.state = {
cart: [],
wishlist: [],
user: null,
preferences: {},
};
this.listeners = {};
this.init();
}
init() {
this.loadFromStorage();
this.setupStorageSync();
}
loadFromStorage() {
try {
this.state.cart = JSON.parse(localStorage.getItem("cart") || "[]");
this.state.wishlist = JSON.parse(
localStorage.getItem("wishlist") || "[]"
);
this.state.preferences = JSON.parse(
localStorage.getItem("preferences") || "{}"
);
} catch (e) {
console.error("State load error:", e);
}
}
saveToStorage() {
try {
localStorage.setItem("cart", JSON.stringify(this.state.cart));
localStorage.setItem("wishlist", JSON.stringify(this.state.wishlist));
localStorage.setItem(
"preferences",
JSON.stringify(this.state.preferences)
);
} catch (e) {
console.error("State save error:", e);
}
}
setupStorageSync() {
window.addEventListener("storage", (e) => {
if (e.key === "cart" || e.key === "wishlist") {
this.loadFromStorage();
this.emit("stateChanged", { key: e.key });
}
});
}
// Cart methods
addToCart(product, quantity = 1) {
const existing = this.state.cart.find((item) => item.id === product.id);
if (existing) {
existing.quantity += quantity;
} else {
this.state.cart.push({
...product,
quantity,
addedAt: Date.now(),
});
}
this.saveToStorage();
this.emit("cartUpdated", this.state.cart);
return this.state.cart;
}
removeFromCart(productId) {
this.state.cart = this.state.cart.filter((item) => item.id !== productId);
this.saveToStorage();
this.emit("cartUpdated", this.state.cart);
return this.state.cart;
}
updateCartQuantity(productId, quantity) {
const item = this.state.cart.find((item) => item.id === productId);
if (item) {
item.quantity = Math.max(0, quantity);
if (item.quantity === 0) {
return this.removeFromCart(productId);
}
this.saveToStorage();
this.emit("cartUpdated", this.state.cart);
}
return this.state.cart;
}
getCart() {
return this.state.cart;
}
getCartTotal() {
return this.state.cart.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
}
getCartCount() {
return this.state.cart.reduce((sum, item) => sum + item.quantity, 0);
}
clearCart() {
this.state.cart = [];
this.saveToStorage();
this.emit("cartUpdated", this.state.cart);
}
// Wishlist methods
addToWishlist(product) {
const exists = this.state.wishlist.find((item) => item.id === product.id);
if (!exists) {
this.state.wishlist.push({
...product,
addedAt: Date.now(),
});
this.saveToStorage();
this.emit("wishlistUpdated", this.state.wishlist);
return true;
}
return false;
}
removeFromWishlist(productId) {
this.state.wishlist = this.state.wishlist.filter(
(item) => item.id !== productId
);
this.saveToStorage();
this.emit("wishlistUpdated", this.state.wishlist);
return this.state.wishlist;
}
getWishlist() {
return this.state.wishlist;
}
isInWishlist(productId) {
return this.state.wishlist.some((item) => item.id === productId);
}
// Event system
on(event, callback) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(callback);
}
off(event, callback) {
if (this.listeners[event]) {
this.listeners[event] = this.listeners[event].filter(
(cb) => cb !== callback
);
}
}
emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach((callback) => {
try {
callback(data);
} catch (e) {
console.error(`Error in ${event} listener:`, e);
}
});
}
}
}
// Create global instance
window.StateManager = window.StateManager || new StateManager();
// Expose helper functions for backward compatibility
window.addToCart = function (productId, name, price, imageurl) {
const product = { id: productId, name, price: parseFloat(price), imageurl };
window.StateManager.addToCart(product, 1);
if (window.showNotification) {
window.showNotification(`${name} added to cart!`, "success");
}
};
window.addToWishlist = function (productId, name, price, imageurl) {
const product = { id: productId, name, price: parseFloat(price), imageurl };
const added = window.StateManager.addToWishlist(product);
if (window.showNotification) {
window.showNotification(
added ? `${name} added to wishlist!` : "Already in wishlist!",
added ? "success" : "info"
);
}
};
// Update badges on state changes
window.StateManager.on("cartUpdated", () => {
const badge = document.querySelector(".cart-badge");
if (badge) {
const count = window.StateManager.getCartCount();
badge.textContent = count;
badge.style.display = count > 0 ? "flex" : "none";
}
});
window.StateManager.on("wishlistUpdated", () => {
const badge = document.querySelector(".wishlist-badge");
if (badge) {
const count = window.StateManager.getWishlist().length;
badge.textContent = count;
badge.style.display = count > 0 ? "flex" : "none";
}
});
// Initialize badges
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
window.StateManager.emit("cartUpdated");
window.StateManager.emit("wishlistUpdated");
});
} else {
window.StateManager.emit("cartUpdated");
window.StateManager.emit("wishlistUpdated");
}
})();