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

webupdate

Browse Source
This commit is contained in:
Local Server
2026-01-19 01:17:43 -06:00
parent 5b86f796d6
commit f8068ba54c
65 changed files with 2165 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
website/public/about.html
View File

@@ -8,6 +8,7 @@
content="About Sky Art Shop - Your creative stationery destination"
/>
<title>About Us - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -24,13 +25,10 @@
/>
<!-- Modern Theme CSS -->
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260118editor"
href="/assets/css/mobile-fixes.css?v=20260118fix30"
/>
<style>
@@ -54,10 +52,10 @@
margin-bottom: 0;
}
/* White background content area */
/* Light pink background content area - matches shop page */
.about-content-wrapper {
background: #ffffff;
padding-top: var(--spacing-2xl);
background: var(--bg-light);
padding-top: var(--spacing-xl);
padding-bottom: var(--spacing-2xl);
}
@@ -207,7 +205,7 @@
.about-dynamic-content .about-cat-logo {
width: 100%;
max-width: 320px;
margin: var(--spacing-lg) auto;
margin: 0 auto var(--spacing-lg) auto;
}
}
@@ -226,6 +224,44 @@
grid-template-columns: 1fr;
}
}
/* Desktop - add more horizontal padding and justify text */
@media (min-width: 993px) {
.about-content-wrapper .container,
.about-hero .container {
max-width: 1000px !important;
margin: 0 auto !important;
padding-left: 60px !important;
padding-right: 60px !important;
}
.about-dynamic-content {
padding: var(--spacing-2xl) var(--spacing-xl) !important;
text-align: justify !important;
}
.about-dynamic-content p {
text-align: justify !important;
}
.about-dynamic-content h1,
.about-dynamic-content h2,
.about-dynamic-content h3,
.about-dynamic-content h4,
.about-dynamic-content h5,
.about-dynamic-content h6 {
text-align: left !important;
}
}
@media (min-width: 1200px) {
.about-content-wrapper .container,
.about-hero .container {
max-width: 1100px !important;
padding-left: 80px !important;
padding-right: 80px !important;
}
}
</style>
</head>
<body>
@@ -277,15 +313,25 @@
<div class="container">
<h1 id="pageTitle">About Us</h1>
<p id="pageSubtitle">Learn more about Sky Art Shop</p>
<div class="breadcrumb">
<a href="/home">Home</a> <span>/</span> <span>About</span>
</div>
</div>
</div>
<!-- White Background Content Wrapper -->
<div class="about-content-wrapper">
<!-- Dynamic Content Section -->
<section class="section" style="padding-top: 0; padding-bottom: 3rem">
<div class="container">
<div class="about-dynamic-content" id="dynamicContent">
<section
class="section"
style="padding-top: 0; padding-bottom: 3rem; margin-top: 0"
>
<div class="container" style="padding-top: 0; margin-top: 0">
<div
class="about-dynamic-content"
id="dynamicContent"
style="padding-top: 0; margin-top: 0"
>
<!-- Cat Logo Image - floats right -->
<img
src="/uploads/cat_logo_bgremoved-1768630281197.png"
@@ -469,15 +515,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -506,9 +600,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -557,7 +651,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118f"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js?v=20260118a"></script>
<script src="/assets/js/dynamic-page.js?v=20260118b"></script>
<script>

1
website/public/account.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Account | Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"

591
website/public/assets/css/mobile-fixes.css
View File

@@ -340,10 +340,14 @@ body {
@media (max-width: 576px) {
.section {
padding: var(--spacing-xl) 0 !important;
overflow-x: hidden !important;
}
.container {
padding: 0 var(--spacing-md) !important;
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.section-title {
@@ -358,10 +362,14 @@ body {
@media (min-width: 577px) and (max-width: 768px) {
.section {
padding: var(--spacing-xl) 0 !important;
overflow-x: hidden !important;
}
.container {
padding: 0 var(--spacing-lg) !important;
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.section-title {
@@ -372,6 +380,8 @@ body {
@media (min-width: 769px) and (max-width: 1024px) {
.container {
padding: 0 var(--spacing-xl) !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.section-title {
@@ -382,25 +392,63 @@ body {
/* === PRODUCT GRID RESPONSIVE === */
@media (max-width: 480px) {
.products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--spacing-sm) !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.product-card {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
box-sizing: border-box !important;
background: #ffffff !important;
}
.product-card img,
.product-image img {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
}
.product-image {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
background: #ffffff !important;
aspect-ratio: 1 / 1 !important;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.product-info {
padding: var(--spacing-sm) !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.product-name {
font-size: 0.85rem !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
font-size: 0.8rem !important;
word-break: break-word !important;
hyphens: auto !important;
overflow-wrap: break-word !important;
}
.product-price {
@@ -420,14 +468,45 @@ body {
@media (min-width: 481px) and (max-width: 768px) {
.products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--spacing-md) !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.product-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
background: #ffffff !important;
}
.product-image {
width: 100% !important;
max-width: 100% !important;
background: #ffffff !important;
aspect-ratio: 1 / 1 !important;
}
.product-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.product-name {
font-size: 0.9rem !important;
word-break: break-word !important;
hyphens: auto !important;
overflow-wrap: break-word !important;
}
.product-price {
font-size: 1.1rem !important;
}
@@ -435,8 +514,35 @@ body {
@media (min-width: 769px) and (max-width: 1024px) {
.products-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--spacing-lg) !important;
gap: 16px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.product-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
background: #ffffff !important;
}
.product-image {
width: 100% !important;
max-width: 100% !important;
background: #ffffff !important;
aspect-ratio: 1 / 1 !important;
}
.product-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
@@ -506,80 +612,187 @@ body {
padding: 12px 0 10px !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
text-align: center !important;
}
.page-header .container {
padding: 0 16px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
.page-header h1 {
font-size: 1.3rem !important;
margin-bottom: 2px !important;
text-align: center !important;
}
.page-header p {
font-size: 0.78rem !important;
margin-bottom: 4px !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Center everything in page header container */
.page-header .container,
.about-hero .container,
.contact-hero .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Breadcrumb INLINE - All breadcrumbs on same line */
.breadcrumb,
.page-header .breadcrumb,
.container .breadcrumb,
.section .breadcrumb {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 6px !important;
.about-hero .breadcrumb,
.contact-hero .breadcrumb {
display: block !important;
width: auto !important;
max-width: 100% !important;
text-align: center !important;
margin: 6px auto 0 auto !important;
padding: 0 !important;
background: none !important;
font-size: 0 !important;
line-height: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
}
.breadcrumb a,
.breadcrumb span,
.page-header .breadcrumb a,
.page-header .breadcrumb span,
.container .breadcrumb a,
.container .breadcrumb span {
.breadcrumb *,
.breadcrumb > *,
.page-header .breadcrumb *,
.page-header .breadcrumb > *,
.about-hero .breadcrumb *,
.about-hero .breadcrumb > *,
.contact-hero .breadcrumb *,
.contact-hero .breadcrumb > * {
display: inline !important;
white-space: nowrap !important;
font-size: 0.85rem !important;
line-height: 1.2 !important;
padding: 0 !important;
margin: 0 !important;
vertical-align: baseline !important;
flex: none !important;
flex-shrink: 0 !important;
float: none !important;
position: static !important;
}
/* Product page breadcrumb - left aligned */
.section .breadcrumb,
.container .breadcrumb {
justify-content: flex-start !important;
.breadcrumb a,
.page-header .breadcrumb a,
.about-hero .breadcrumb a,
.contact-hero .breadcrumb a {
color: var(--text-secondary) !important;
text-decoration: none !important;
}
/* Page header breadcrumb - center aligned */
.page-header .breadcrumb {
justify-content: center !important;
margin-top: 2px !important;
.breadcrumb span,
.page-header .breadcrumb span,
.about-hero .breadcrumb span,
.contact-hero .breadcrumb span {
color: var(--text-light) !important;
}
/* Page breadcrumbs - centered on mobile for hero sections */
.page-header .breadcrumb,
.about-hero .breadcrumb,
.contact-hero .breadcrumb {
text-align: center !important;
display: block !important;
width: 100% !important;
margin: 6px auto 0 auto !important;
}
/* Minimal section spacing */
.section {
padding: 8px 0 20px !important;
}
/* === SHOP LAYOUT === */
.shop-layout {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* === EXTRA SMALL SCREENS - More compact breadcrumb === */
@media (max-width: 375px) {
.breadcrumb,
.page-header .breadcrumb,
.about-hero .breadcrumb,
.contact-hero .breadcrumb {
font-size: 0.8rem !important;
}
/* Sidebar - use flexbox with wrap for horizontal filter chips */
.shop-sidebar {
.breadcrumb > *,
.page-header .breadcrumb > *,
.about-hero .breadcrumb > *,
.contact-hero .breadcrumb > * {
font-size: 0.8rem !important;
}
.breadcrumb span,
.page-header .breadcrumb span,
.about-hero .breadcrumb span,
.contact-hero .breadcrumb span {
padding: 0 2px !important;
}
}
@media (min-width: 376px) and (max-width: 992px) {
.breadcrumb span,
.page-header .breadcrumb span,
.about-hero .breadcrumb span,
.contact-hero .breadcrumb span {
padding: 0 3px !important;
}
}
@media (max-width: 992px) {
/* === SHOP LAYOUT === */
.shop-layout {
display: block !important;
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 8px !important;
margin-bottom: 8px !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Shop main content area - prevent overflow */
.shop-main {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Products grid - ensure it fits within container */
.shop-main .products-grid,
.shop-layout .products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Sidebar - stacked layout for mobile */
.shop-sidebar {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin-bottom: 16px !important;
box-sizing: border-box !important;
}
/* Search card - FULL WIDTH, first row */
@@ -608,76 +821,93 @@ body {
/* FILTER CHIPS - Same row, auto width */
.shop-sidebar .filter-card:nth-child(2),
.shop-sidebar .filter-card:nth-child(3),
.shop-sidebar .filter-card:nth-child(4) {
.shop-sidebar .filter-card:nth-child(4),
.shop-sidebar details.filter-dropdown {
flex: 0 0 auto !important;
width: auto !important;
background: transparent !important;
box-shadow: none !important;
margin: 0 !important;
margin: 0 4px 0 0 !important;
padding: 0 !important;
order: 2 !important;
position: relative !important; /* For dropdown positioning */
position: relative !important;
}
/* Filter chip button style */
.shop-sidebar .filter-card:not(:first-child) .filter-title {
/* ===== DETAILS/SUMMARY DROPDOWN STYLES ===== */
/* Hide default marker */
details.filter-dropdown > summary {
list-style: none !important;
}
details.filter-dropdown > summary::-webkit-details-marker {
display: none !important;
}
/* Summary button styling */
details.filter-dropdown > summary.filter-title {
display: inline-flex !important;
visibility: visible !important;
align-items: center !important;
padding: 8px 14px !important;
margin: 0 !important;
font-size: 0.72rem !important;
justify-content: center !important;
padding: 10px 16px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
background: #fff !important;
border: 1px solid #ddd !important;
border-radius: 20px !important;
color: #555 !important;
font-family: inherit !important;
background: #ffffff !important;
border: 2px solid #d0d0d0 !important;
border-radius: 8px !important;
color: #333 !important;
cursor: pointer !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
white-space: nowrap !important;
min-height: 44px !important;
user-select: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
}
.shop-sidebar .filter-card:not(:first-child) .filter-title:hover {
background: #fff5f8 !important;
details.filter-dropdown > summary.filter-title:active {
background: #f0f0f0 !important;
transform: scale(0.98) !important;
}
details.filter-dropdown[open] > summary.filter-title {
background: #fff !important;
border-color: #f8c8dc !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}
.shop-sidebar .filter-card:not(:first-child) .filter-title::after {
content: '▼' !important;
font-size: 8px !important;
margin-left: 8px !important;
margin-right: 0 !important;
transition: transform 0.2s ease !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
border: none !important;
/* Dropdown CLOSED - hide options */
details.filter-dropdown:not([open]) > .filter-options {
display: none !important;
}
/* Rotate arrow when open */
.shop-sidebar .filter-card:not(:first-child):not(.collapsed) .filter-title::after {
transform: rotate(180deg) !important;
}
/* Filter dropdown - visible when NOT collapsed */
.shop-sidebar .filter-card:not(:first-child):not(.collapsed) .filter-options {
/* Dropdown OPEN - show options */
details.filter-dropdown[open] > .filter-options {
display: block !important;
position: absolute !important;
top: 100% !important;
top: calc(100% + 6px) !important;
left: 0 !important;
z-index: 1000 !important;
z-index: 9999 !important;
min-width: 200px !important;
width: max-content !important;
max-width: 280px !important;
padding: 12px !important;
margin-top: 6px !important;
background: #fff !important;
background: #ffffff !important;
border: 1px solid #ddd !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}
/* Filter dropdown - hidden when collapsed */
.shop-sidebar .filter-card:not(:first-child).collapsed .filter-options {
display: none !important;
/* Filter option items */
details.filter-dropdown .filter-option {
display: flex !important;
align-items: center !important;
padding: 10px 8px !important;
border-bottom: 1px solid #eee !important;
gap: 8px !important;
}
details.filter-dropdown .filter-option:last-child {
border-bottom: none !important;
}
/* Shop main section */
@@ -824,8 +1054,14 @@ body {
.about-content-wrapper .container,
.about-hero .container,
.policy-container {
padding-left: 20px !important;
padding-right: 20px !important;
padding-left: 12px !important;
padding-right: 12px !important;
max-width: 100% !important;
}
/* Dynamic content section - even wider */
.about-dynamic-content {
padding: 0 15px !important;
}
/* Make policy container wider */
@@ -854,18 +1090,35 @@ body {
}
.about-content-wrapper .container {
padding-left: 15px !important;
padding-right: 15px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.about-hero .container {
padding-left: 15px !important;
padding-right: 15px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.policy-container {
padding-left: 15px !important;
padding-right: 15px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.about-dynamic-content {
padding: 0 10px !important;
}
/* Remove extra space above cat logo */
.about-dynamic-content .about-cat-logo,
.about-dynamic-content img.about-cat-logo {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove top padding from container as well */
.about-dynamic-content #aboutTextContent {
padding-top: 0 !important;
margin-top: 0 !important;
}
.about-text h2 {
@@ -907,6 +1160,8 @@ body {
.product-gallery,
.product-details {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.product-gallery-main {
@@ -920,6 +1175,60 @@ body {
.product-price-main {
font-size: 1.5rem !important;
}
/* Product detail container fixes */
.product-detail {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: var(--spacing-md) 0 !important;
box-sizing: border-box !important;
}
.product-detail .product-gallery {
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: var(--spacing-lg) !important;
}
.product-detail .main-image {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: 0 !important;
padding-bottom: 100% !important;
overflow: hidden !important;
border-radius: var(--radius-lg) !important;
}
.product-detail .main-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.product-detail .thumbnail-gallery {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
}
.product-detail .product-details {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.product-detail h1,
.product-detail #productName {
font-size: 1.4rem !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
}
/* === LANDSCAPE MODE FIXES (Mobile) === */
@@ -1688,18 +1997,76 @@ body {
}
}
/* === PRODUCT PAGE RECOMMENDATIONS === */
@media (max-width: 768px) {
/* === PRODUCT PAGE RECOMMENDATIONS - HORIZONTAL SCROLL === */
@media (max-width: 992px) {
/* Related products section container */
#relatedProducts.products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--spacing-sm) !important;
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
gap: 12px !important;
padding: 8px 0 16px 0 !important;
margin: 0 -12px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Hide scrollbar for cleaner look but keep functionality */
#relatedProducts.products-grid::-webkit-scrollbar {
height: 6px !important;
}
#relatedProducts.products-grid::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 10px !important;
}
#relatedProducts.products-grid::-webkit-scrollbar-thumb {
background: var(--primary-pink-dark, #fcb1d8) !important;
border-radius: 10px !important;
}
#relatedProducts.products-grid::-webkit-scrollbar-thumb:hover {
background: var(--primary-pink, #ffd0d0) !important;
}
/* Each product card in the horizontal scroll */
#relatedProducts.products-grid .product-card {
flex: 0 0 auto !important;
width: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
scroll-snap-align: start !important;
}
#relatedProducts.products-grid .product-card .product-name {
font-size: 0.8rem !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
#relatedProducts.products-grid .product-card .product-price {
font-size: 0.95rem !important;
}
}
@media (max-width: 480px) {
#relatedProducts.products-grid {
grid-template-columns: 1fr !important;
gap: var(--spacing-md) !important;
#relatedProducts.products-grid .product-card {
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
}
#relatedProducts.products-grid .product-card .product-name {
font-size: 0.75rem !important;
}
#relatedProducts.products-grid .product-card .product-price {
font-size: 0.9rem !important;
}
}
@@ -1816,4 +2183,24 @@ body {
transform: scale(0.98) !important;
opacity: 0.9 !important;
}
}
/* === GLOBAL PRODUCT CARD FIX - Remove pink divider === */
.product-card {
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
}
.product-image {
background: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.product-image img {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}

47
website/public/assets/css/modern-theme.css
View File

@@ -233,6 +233,7 @@ body {
.nav-brand {
display: flex;
flex: 1;
align-items: center;
gap: var(--spacing-md);
text-decoration: none;
@@ -306,8 +307,9 @@ body {
.nav-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-md);
flex-shrink: 0;
flex: 1;
}
.nav-icon-btn {
@@ -712,7 +714,9 @@ body {
.product-card {
position: relative;
background: var(--bg-card);
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-smooth);
@@ -728,15 +732,16 @@ body {
.product-image {
position: relative;
width: 100%;
padding-top: 100%;
background: var(--primary-pink-light);
aspect-ratio: 1 / 1;
background: #ffffff;
overflow: hidden;
flex-shrink: 0;
margin: 0;
padding: 0;
}
.product-image img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
@@ -840,10 +845,8 @@ body {
color: var(--text-primary);
margin-bottom: var(--spacing-sm);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
hyphens: auto;
}
.product-name a {
@@ -1459,7 +1462,7 @@ body {
============================================ */
.about-hero {
text-align: center;
padding: var(--spacing-2xl) 0;
padding: var(--spacing-lg) 0;
background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
}
@@ -1872,7 +1875,7 @@ body {
============================================ */
.page-header {
background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
padding: var(--spacing-2xl) 0;
padding: var(--spacing-lg) 0;
text-align: center;
}
@@ -1891,12 +1894,20 @@ body {
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
display: block !important;
text-align: center !important;
margin-top: var(--spacing-md);
font-size: 0.9rem;
font-size: 0 !important;
line-height: 0 !important;
white-space: nowrap !important;
}
.breadcrumb * {
display: inline !important;
white-space: nowrap !important;
font-size: 0.9rem !important;
line-height: 1.2 !important;
vertical-align: baseline !important;
}
.breadcrumb a {

44
website/public/assets/js/modern-theme.js
View File

@@ -1130,3 +1130,47 @@ window.AutoRefresh = AutoRefresh;
);
});
})();
// Load and display social media links in footer
(function loadFooterSocialLinks() {
document.addEventListener("DOMContentLoaded", async () => {
try {
const response = await fetch("/api/settings");
if (!response.ok) return;
const settings = await response.json();
// Map of social platform to element ID and URL format
const socialMap = {
socialFacebook: { id: "footerFacebook", url: (v) => v },
socialInstagram: { id: "footerInstagram", url: (v) => v },
socialTwitter: { id: "footerTwitter", url: (v) => v },
socialYoutube: { id: "footerYoutube", url: (v) => v },
socialPinterest: { id: "footerPinterest", url: (v) => v },
socialTiktok: { id: "footerTiktok", url: (v) => v },
socialWhatsapp: {
id: "footerWhatsapp",
url: (v) =>
v.startsWith("http")
? v
: `https://wa.me/${v.replace(/[^0-9]/g, "")}`,
},
socialLinkedin: { id: "footerLinkedin", url: (v) => v },
};
for (const [key, config] of Object.entries(socialMap)) {
const value = settings[key];
const el = document.getElementById(config.id);
if (el && value && value.trim()) {
el.href = config.url(value.trim());
el.target = "_blank";
el.rel = "noopener noreferrer";
el.style.display = "";
}
}
} catch (error) {
console.log("Could not load social links:", error);
}
});
})();

35
website/public/blog.html
View File

@@ -8,6 +8,7 @@
content="Sky Art Shop Blog - Creative tips, tutorials, and inspiration"
/>
<title>Blog - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -26,11 +27,11 @@
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
href="/assets/css/modern-theme.css?v=fix33"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260119touch"
href="/assets/css/mobile-fixes.css?v=20260118fix10"
/>
<style>
@@ -847,9 +848,7 @@
Creative tips, tutorials, and inspiration for your crafting journey
</p>
<div class="breadcrumb">
<a href="/home">Home</a>
<span>/</span>
<span>Blog</span>
<a href="/home">Home</a> <span>/</span> <span>Blog</span>
</div>
</div>
</div>
@@ -922,15 +921,15 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<div class="footer-social" id="footerSocialLinks">
<a href="#" class="social-link" id="footerFacebook" style="display:none;"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link" id="footerInstagram" style="display:none;"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-link" id="footerTwitter" style="display:none;"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="social-link" id="footerYoutube" style="display:none;"><i class="bi bi-youtube"></i></a>
<a href="#" class="social-link" id="footerPinterest" style="display:none;"><i class="bi bi-pinterest"></i></a>
<a href="#" class="social-link" id="footerTiktok" style="display:none;"><i class="bi bi-tiktok"></i></a>
<a href="#" class="social-link" id="footerWhatsapp" style="display:none;"><i class="bi bi-whatsapp"></i></a>
<a href="#" class="social-link" id="footerLinkedin" style="display:none;"><i class="bi bi-linkedin"></i></a>
</div>
</div>
@@ -959,9 +958,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -1101,7 +1100,7 @@
<!-- Scripts -->
<script src="/assets/js/mobile-touch-fix.js"></script>
<script src="/assets/js/modern-theme.js?v=20260119touch"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
document.addEventListener("DOMContentLoaded", async () => {

86
website/public/checkout.html
View File

@@ -1,10 +1,11 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Checkout - Sky Art Shop" />
<title>Checkout - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -21,7 +22,7 @@
/>
<!-- Modern Theme CSS -->
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=20260118drawer" />
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260118c" />
<style>
@@ -369,7 +370,7 @@
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" placeholder="+1 (555) 123-4567" />
<input type="tel" id="phone" placeholder="+1 (501) 608-0409" />
</div>
</div>
@@ -381,7 +382,7 @@
<input
type="text"
id="address"
placeholder="123 Creative Lane"
placeholder="Belmopan, Cayo District"
required
/>
</div>
@@ -549,6 +550,64 @@
Your creative journey starts here. Quality supplies for every
artist.
</p>
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
<div class="footer-column">
@@ -573,9 +632,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -624,7 +683,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
@@ -691,16 +750,15 @@
const tax = subtotal * 0.08; // 8% tax
const total = subtotal + shipping + tax;
document.getElementById(
"summarySubtotal"
).textContent = `$${subtotal.toFixed(2)}`;
document.getElementById("summarySubtotal").textContent =
`$${subtotal.toFixed(2)}`;
document.getElementById("summaryShipping").textContent =
shipping === 0 ? "FREE" : `$${shipping.toFixed(2)}`;
document.getElementById("summaryTax").textContent = `$${tax.toFixed(
2
2,
)}`;
document.getElementById("summaryTotal").textContent = `$${total.toFixed(
2
2,
)}`;
// Enable place order button
@@ -760,7 +818,7 @@
// Show success message (in a real app, this would submit to the server)
alert(
"Thank you for your order! This is a demo - no actual order was placed."
"Thank you for your order! This is a demo - no actual order was placed.",
);
// Clear cart

350
website/public/contact.html
View File

@@ -8,6 +8,7 @@
content="Contact Sky Art Shop - We'd love to hear from you"
/>
<title>Contact Us - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -24,8 +25,11 @@
/>
<!-- Modern Theme CSS -->
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=20260118drawer" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260118c" />
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260118fix10"
/>
<style>
.contact-hero {
@@ -34,14 +38,21 @@
var(--primary-pink-light) 0%,
var(--primary-pink) 100%
);
padding: 0;
padding: var(--spacing-lg) 0;
}
.contact-hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-xl);
max-width: 900px;
margin: 0 auto;
}
.contact-hero-text {
text-align: center;
flex: 1;
}
.contact-hero-text h1 {
@@ -53,10 +64,16 @@
.contact-hero-text p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 450px;
margin: 0 auto var(--spacing-md);
}
.contact-hero-text .breadcrumb {
justify-content: center;
}
.contact-hero-image {
text-align: center;
flex-shrink: 0;
}
.contact-hero-image img {
@@ -135,13 +152,84 @@
@media (max-width: 992px) {
.contact-hero-content {
grid-template-columns: 1fr;
flex-direction: column;
text-align: center;
}
.contact-hero-text {
text-align: center;
}
.contact-hero-text .breadcrumb {
justify-content: center !important;
text-align: center !important;
display: flex !important;
width: 100% !important;
}
.contact-methods {
grid-template-columns: 1fr;
}
/* Contact page mobile layout fixes */
.container {
max-width: 100% !important;
padding: 0 16px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.contact-section {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.contact-info,
.contact-form {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: var(--spacing-lg) !important;
padding: var(--spacing-md) !important;
}
.contact-form input,
.contact-form textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.form-group {
width: 100% !important;
max-width: 100% !important;
}
.contact-item {
flex-wrap: wrap !important;
}
.map-section {
width: 100% !important;
max-width: 100% !important;
height: 300px !important;
}
.map-section iframe {
width: 100% !important;
max-width: 100% !important;
}
.contact-method {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.contact-method a {
word-break: break-all !important;
}
}
</style>
</head>
@@ -199,6 +287,9 @@
Have a question, suggestion, or just want to say hello? We'd
love to hear from you! Our team is here to help.
</p>
<div class="breadcrumb">
<a href="/home">Home</a> <span>/</span> <span>Contact</span>
</div>
</div>
<div
class="contact-hero-image"
@@ -207,7 +298,7 @@
<img
src="/uploads/get-in-touch-1768630843511-885498786.png"
alt="Contact Us"
style="width: 50%; height: auto; max-width: 300px"
style="width: 100%; height: auto; max-width: 200px"
/>
</div>
</div>
@@ -224,8 +315,8 @@
</div>
<h3>Email Us</h3>
<p>Send us a message anytime</p>
<a href="mailto:hello@skyartshop.com" id="contactEmailLink"
>hello@skyartshop.com</a
<a href="mailto:skyartshop12.11@gmail.com" id="contactEmailLink"
>skyartshop12.11@gmail.com</a
>
</div>
<div class="contact-method">
@@ -235,7 +326,7 @@
<h3>Call Us</h3>
<p id="contactBusinessHoursShort">Mon-Fri, 9am-5pm EST</p>
<a href="tel:+15551234567" id="contactPhoneLink"
>(555) 123-4567</a
>(501) 608-0409</a
>
</div>
<div class="contact-method">
@@ -244,7 +335,7 @@
</div>
<h3>Visit Us</h3>
<p id="contactAddressDisplay">
123 Creative Lane<br />Artville, CA 90210
Belmopan, Cayo District<br />Artville, CA 90210
</p>
</div>
</div>
@@ -295,26 +386,89 @@
<h4>Follow Us</h4>
<div
class="footer-social"
id="contactSocialLinks"
style="margin-top: var(--spacing-sm)"
>
<a
href="#"
class="social-link"
style="background: var(--primary-pink-light)"
id="contactFacebook"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
style="background: var(--primary-pink-light)"
id="contactInstagram"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-instagram"></i
></a>
<a
href="#"
class="social-link"
style="background: var(--primary-pink-light)"
id="contactTwitter"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="contactYoutube"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="contactPinterest"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-pinterest"></i
></a>
<a
href="#"
class="social-link"
id="contactTiktok"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="contactWhatsapp"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="contactLinkedin"
style="
background: var(--primary-pink-light);
display: none;
"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
</div>
@@ -374,33 +528,34 @@
</div>
<!-- Map -->
<div class="map-section">
<div class="map-placeholder">
<div class="map-image">
<img
src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1200&q=80"
alt="Los Angeles City View"
/>
<div class="map-overlay">
<div class="map-pin">
<i class="bi bi-geo-alt-fill"></i>
</div>
<div class="map-info">
<h4>Sky Art Shop</h4>
<p>123 Creative Lane</p>
<p>Los Angeles, CA 90012</p>
<a
href="https://maps.google.com/?q=Los+Angeles+CA"
target="_blank"
rel="noopener"
class="btn btn-sm btn-primary"
>
<i class="bi bi-map"></i> Open in Google Maps
</a>
</div>
</div>
</div>
</div>
<div class="map-section" style="position: relative">
<!-- OpenStreetMap Embed - No API key required -->
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=-88.85%2C17.20%2C-88.70%2C17.30&layer=mapnik&marker=17.25%2C-88.77"
width="100%"
height="100%"
style="border: 0"
allowfullscreen=""
loading="lazy"
title="Sky Art Shop Location - Belmopan, Belize"
>
</iframe>
<a
href="https://www.google.com/maps/search/Belmopan,+Belize"
target="_blank"
rel="noopener noreferrer"
style="
display: block;
text-align: center;
padding: 12px;
background: var(--primary-pink-light);
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
"
>
<i class="bi bi-geo-alt"></i> Open in Google Maps
</a>
</div>
</div>
</section>
@@ -423,15 +578,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -460,9 +663,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -511,7 +714,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
// Load contact page data from API
@@ -582,9 +785,52 @@
}
}
// Load social links for the "Follow Us" section
async function loadContactSocialLinks() {
try {
const response = await fetch("/api/settings");
if (!response.ok) return;
const settings = await response.json();
// Map of social platform to element ID and URL format
const socialMap = {
socialFacebook: { id: "contactFacebook", url: (v) => v },
socialInstagram: { id: "contactInstagram", url: (v) => v },
socialTwitter: { id: "contactTwitter", url: (v) => v },
socialYoutube: { id: "contactYoutube", url: (v) => v },
socialPinterest: { id: "contactPinterest", url: (v) => v },
socialTiktok: { id: "contactTiktok", url: (v) => v },
socialWhatsapp: {
id: "contactWhatsapp",
url: (v) =>
v.startsWith("http")
? v
: `https://wa.me/${v.replace(/[^0-9]/g, "")}`,
},
socialLinkedin: { id: "contactLinkedin", url: (v) => v },
};
for (const [key, config] of Object.entries(socialMap)) {
const value = settings[key];
const el = document.getElementById(config.id);
if (el && value && value.trim()) {
el.href = config.url(value.trim());
el.target = "_blank";
el.rel = "noopener noreferrer";
el.style.display = "";
}
}
} catch (error) {
console.log("Could not load contact social links:", error);
}
}
// Load page data on DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
loadContactPageData();
loadContactSocialLinks();
});
document

1
website/public/faq-old.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAQ - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
rel="stylesheet"

29
website/public/faq.html
View File

@@ -8,6 +8,7 @@
content="Frequently Asked Questions - Sky Art Shop"
/>
<title>FAQ - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -24,7 +25,7 @@
/>
<!-- Modern Theme CSS -->
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=20260118drawer" />
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260118c" />
<style>
@@ -206,15 +207,15 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<div class="footer-social" id="footerSocialLinks">
<a href="#" class="social-link" id="footerFacebook" style="display:none;"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link" id="footerInstagram" style="display:none;"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-link" id="footerTwitter" style="display:none;"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="social-link" id="footerYoutube" style="display:none;"><i class="bi bi-youtube"></i></a>
<a href="#" class="social-link" id="footerPinterest" style="display:none;"><i class="bi bi-pinterest"></i></a>
<a href="#" class="social-link" id="footerTiktok" style="display:none;"><i class="bi bi-tiktok"></i></a>
<a href="#" class="social-link" id="footerWhatsapp" style="display:none;"><i class="bi bi-whatsapp"></i></a>
<a href="#" class="social-link" id="footerLinkedin" style="display:none;"><i class="bi bi-linkedin"></i></a>
</div>
</div>
@@ -243,9 +244,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -296,7 +297,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
// Load FAQ page data from API

BIN
website/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

143
website/public/home.html
View File

@@ -8,6 +8,7 @@
content="Sky Art Shop - Your one-stop shop for scrapbooking, journaling, cardmaking, and collaging stationery."
/>
<title>Sky Art Shop - Creative Stationery & Crafting Supplies</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -24,10 +25,7 @@
/>
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260119touch"
@@ -170,6 +168,71 @@
grid-template-columns: 1fr;
}
}
/* Featured Products - Horizontal Scroll */
#featuredProductsGrid.products-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 20px;
padding: 8px 0 16px 0;
}
#featuredProductsGrid.products-grid::-webkit-scrollbar {
height: 8px;
}
#featuredProductsGrid.products-grid::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
#featuredProductsGrid.products-grid::-webkit-scrollbar-thumb {
background: var(--primary-pink-dark, #fcb1d8);
border-radius: 10px;
}
#featuredProductsGrid.products-grid::-webkit-scrollbar-thumb:hover {
background: var(--primary-pink, #ffd0d0);
}
/* Product cards in horizontal scroll */
#featuredProductsGrid.products-grid .product-card {
flex: 0 0 280px;
min-width: 280px;
max-width: 280px;
scroll-snap-align: start;
}
/* Tablet */
@media (max-width: 992px) {
#featuredProductsGrid.products-grid .product-card {
flex: 0 0 220px;
min-width: 220px;
max-width: 220px;
}
}
/* Mobile */
@media (max-width: 576px) {
#featuredProductsGrid.products-grid .product-card {
flex: 0 0 180px;
min-width: 180px;
max-width: 180px;
}
#featuredProductsGrid.products-grid .product-card .product-name {
font-size: 0.85rem;
}
#featuredProductsGrid.products-grid .product-card .product-price {
font-size: 1rem;
}
}
</style>
</head>
<body>
@@ -398,15 +461,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -435,9 +546,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -536,7 +647,7 @@
<!-- Scripts -->
<script src="/assets/js/mobile-touch-fix.js"></script>
<script src="/assets/js/modern-theme.js?v=20260119touch"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
// Homepage settings cache
@@ -567,7 +678,7 @@
SkyArtShop.initSlider();
}
// Load products - only show featured products (max 4)
// Load products - show all featured products (horizontal scroll)
const featuredProducts = await API.loadFeaturedProducts();
const featuredGrid = document.getElementById("featuredProductsGrid");
@@ -578,8 +689,8 @@
titleEl.textContent = homepageSettings.featuredProducts.title;
}
// Store products for detail view - only featured products, max 4
const homepageProducts = featuredProducts.slice(0, 4);
// Store products for detail view - show all featured products
const homepageProducts = featuredProducts;
if (featuredGrid) {
if (homepageProducts.length > 0) {

1
website/public/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<script>
// Redirect to React app
window.location.href = "/app/";

1
website/public/logo-preview.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<title>Cat Logo Preview</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<style>
body {
font-family: "Inter", sans-serif;

1
website/public/page.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="pageTitle">Loading... - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="description" id="pageDescription" content="Sky Art Shop" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

35
website/public/portfolio.html
View File

@@ -8,6 +8,7 @@
content="Portfolio - Sky Art Shop creative projects and inspiration"
/>
<title>Portfolio - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -26,11 +27,11 @@
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
href="/assets/css/modern-theme.css?v=fix33"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260119touch"
href="/assets/css/mobile-fixes.css?v=20260118fix10"
/>
<style>
@@ -404,9 +405,7 @@
masterpiece
</p>
<div class="breadcrumb">
<a href="/home">Home</a>
<span>/</span>
<span>Portfolio</span>
<a href="/home">Home</a> <span>/</span> <span>Portfolio</span>
</div>
</div>
</div>
@@ -523,15 +522,15 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<div class="footer-social" id="footerSocialLinks">
<a href="#" class="social-link" id="footerFacebook" style="display:none;"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link" id="footerInstagram" style="display:none;"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-link" id="footerTwitter" style="display:none;"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="social-link" id="footerYoutube" style="display:none;"><i class="bi bi-youtube"></i></a>
<a href="#" class="social-link" id="footerPinterest" style="display:none;"><i class="bi bi-pinterest"></i></a>
<a href="#" class="social-link" id="footerTiktok" style="display:none;"><i class="bi bi-tiktok"></i></a>
<a href="#" class="social-link" id="footerWhatsapp" style="display:none;"><i class="bi bi-whatsapp"></i></a>
<a href="#" class="social-link" id="footerLinkedin" style="display:none;"><i class="bi bi-linkedin"></i></a>
</div>
</div>
@@ -560,9 +559,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -612,7 +611,7 @@
<!-- Scripts -->
<script src="/assets/js/mobile-touch-fix.js"></script>
<script src="/assets/js/modern-theme.js?v=20260119touch"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
let allProjects = [];

1
website/public/privacy-old.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Privacy Policy - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
rel="stylesheet"

100
website/public/privacy.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Privacy Policy - Sky Art Shop" />
<title>Privacy Policy - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -21,25 +22,26 @@
/>
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260118editor"
/>
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=fix32" />
<style>
.policy-container {
max-width: 900px;
max-width: 800px;
margin: 0 auto;
background: var(--bg-white);
padding: var(--spacing-2xl);
padding: 50px 60px 50px 100px !important;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
.policy-container {
padding: 24px 24px !important;
margin: 0 16px;
}
}
.policy-container h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
@@ -183,15 +185,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -220,9 +270,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -273,7 +323,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script src="/assets/js/accessibility.js"></script>
<script>
@@ -358,8 +408,8 @@
<p>${escapeHtml(box.message || "If you have any questions about this Privacy Policy, please contact us:")}</p>
<div style="margin-top: var(--spacing-lg)">
<p><strong>Email:</strong> ${escapeHtml(box.email || "privacy@skyartshop.com")}</p>
<p><strong>Phone:</strong> ${escapeHtml(box.phone || "(555) 123-4567")}</p>
<p><strong>Mail:</strong> ${escapeHtml(box.address || "Sky Art Shop, 123 Creative Lane, City, ST 12345")}</p>
<p><strong>Phone:</strong> ${escapeHtml(box.phone || "(501) 608-0409")}</p>
<p><strong>Mail:</strong> ${escapeHtml(box.address || "Sky Art Shop, Belmopan, Cayo District, City, ST 12345")}</p>
</div>
</div>
`;
@@ -372,8 +422,8 @@
<p>If you have any questions about this Privacy Policy, please contact us:</p>
<div style="margin-top: var(--spacing-lg)">
<p><strong>Email:</strong> privacy@skyartshop.com</p>
<p><strong>Phone:</strong> (555) 123-4567</p>
<p><strong>Mail:</strong> Sky Art Shop, 123 Creative Lane, City, ST 12345</p>
<p><strong>Phone:</strong> (501) 608-0409</p>
<p><strong>Mail:</strong> Sky Art Shop, Belmopan, Cayo District, City, ST 12345</p>
</div>
</div>
`;
@@ -435,8 +485,8 @@
<p>If you have any questions about this Privacy Policy, please contact us:</p>
<div style="margin-top: var(--spacing-lg)">
<p><strong>Email:</strong> privacy@skyartshop.com</p>
<p><strong>Phone:</strong> (555) 123-4567</p>
<p><strong>Mail:</strong> Sky Art Shop, 123 Creative Lane, City, ST 12345</p>
<p><strong>Phone:</strong> (501) 608-0409</p>
<p><strong>Mail:</strong> Sky Art Shop, Belmopan, Cayo District, City, ST 12345</p>
</div>
</div>
`;

163
website/public/product.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Product Details - Sky Art Shop" />
<title>Product - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -21,14 +22,8 @@
/>
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260119touch"
/>
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix34" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260119fix3" />
<style>
/* Product page breadcrumb - force single line */
@@ -66,6 +61,64 @@
gap: 3px !important;
margin-bottom: 12px !important;
}
/* Product detail mobile fixes */
.product-detail {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: var(--spacing-md) 0 !important;
box-sizing: border-box !important;
}
.product-gallery {
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: var(--spacing-lg) !important;
}
.main-image {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: 0 !important;
padding-bottom: 100% !important;
overflow: hidden !important;
border-radius: var(--radius-lg) !important;
}
.main-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.thumbnail-gallery {
width: 100% !important;
max-width: 100% !important;
}
.product-details {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.product-details h1,
#productName {
font-size: 1.3rem !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
.product-detail {
@@ -529,6 +582,34 @@
.product-gallery {
position: static;
}
/* Related Products - Horizontal Scroll on Mobile/Tablet */
#relatedProducts.products-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 12px;
padding-bottom: 12px;
}
#relatedProducts.products-grid .product-card {
flex: 0 0 160px;
min-width: 160px;
max-width: 160px;
scroll-snap-align: start;
}
}
@media (max-width: 480px) {
#relatedProducts.products-grid .product-card {
flex: 0 0 140px;
min-width: 140px;
max-width: 140px;
}
}
</style>
</head>
@@ -765,15 +846,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -802,9 +931,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -854,7 +983,7 @@
<!-- Scripts -->
<script src="/assets/js/mobile-touch-fix.js"></script>
<script src="/assets/js/modern-theme.js?v=20260119touch"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js?v=20260116c"></script>
<script>
let currentProduct = null;

1
website/public/returns-old.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Returns & Refunds - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
rel="stylesheet"

88
website/public/returns.html
View File

@@ -8,6 +8,7 @@
content="Returns & Refunds Policy - Sky Art Shop"
/>
<title>Returns & Refunds - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -24,25 +25,26 @@
/>
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260118editor"
/>
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=fix32" />
<style>
.policy-container {
max-width: 900px;
max-width: 800px;
margin: 0 auto;
background: var(--bg-white);
padding: var(--spacing-2xl);
padding: 50px 60px 50px 100px !important;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
.policy-container {
padding: 24px 24px !important;
margin: 0 16px;
}
}
.policy-container h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
@@ -197,15 +199,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -234,9 +284,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -287,7 +337,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
// Load returns page data from API

1
website/public/safeguard-tests.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cart/Wishlist Safeguard Tests</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<style>
body {
font-family: system-ui, -apple-system, sans-serif;

1
website/public/shipping-info-old.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shipping Information - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
rel="stylesheet"

114
website/public/shipping-info.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Shipping Information - Sky Art Shop" />
<title>Shipping Information - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -21,25 +22,26 @@
/>
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260118editor"
/>
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=fix32" />
<style>
.policy-container {
max-width: 900px;
max-width: 800px;
margin: 0 auto;
background: var(--bg-white);
padding: var(--spacing-2xl);
padding: 50px 60px 50px 100px !important;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
.policy-container {
padding: 24px 24px !important;
margin: 0 16px;
}
}
.policy-container h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
@@ -236,15 +238,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -273,9 +323,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -326,7 +376,7 @@
</div>
<!-- Scripts -->
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script src="/assets/js/accessibility.js"></script>
<script>
@@ -341,7 +391,7 @@
}
const data = await response.json();
const pageData = data.pagedata || {};
const pageData = data.page?.pagedata || data.pagedata || {};
// Update header if data exists
if (pageData.header) {
@@ -365,13 +415,23 @@
sectionHtml += `<h2>${escapeHtml(section.title)}</h2>`;
}
if (section.content) {
// Split content by newlines and render as paragraphs
const paragraphs = section.content
.split("\n")
.filter((p) => p.trim());
paragraphs.forEach((p) => {
sectionHtml += `<p>${escapeHtml(p)}</p>`;
});
// Check if content already has HTML tags
if (
section.content.includes("<p>") ||
section.content.includes("<br") ||
section.content.includes("<ul>")
) {
// Content already has HTML, use it directly
sectionHtml += section.content;
} else {
// Split content by newlines and render as paragraphs
const paragraphs = section.content
.split("\n")
.filter((p) => p.trim());
paragraphs.forEach((p) => {
sectionHtml += `<p>${escapeHtml(p)}</p>`;
});
}
}
if (section.listItems && section.listItems.length > 0) {
sectionHtml +=

588
website/public/shop.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Shop all products - Sky Art Shop" />
<title>Shop - Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -21,14 +22,163 @@
/>
<!-- Modern Theme CSS -->
<link
rel="stylesheet"
href="/assets/css/modern-theme.css?v=20260118drawer"
/>
<link
rel="stylesheet"
href="/assets/css/mobile-fixes.css?v=20260119touch"
/>
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix34" />
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260119fix1" />
<style>
/* Mobile & Tablet: Shop page layout fixes */
@media (max-width: 992px) {
/* Container - reduce padding on mobile */
.section .container {
padding: 0 12px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Shop layout - single column, no overflow */
.shop-layout {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Shop sidebar - filters container */
.shop-sidebar {
background: transparent !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 16px !important;
}
/* Search card */
#searchCard {
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 12px !important;
box-sizing: border-box !important;
}
#searchCard .search-box {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#searchCard input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Mobile filter dropdowns */
#mobileFilters {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-top: 8px !important;
}
#mobileFilters select {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 10px 8px !important;
font-size: 0.8rem !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
#desktopFilters {
display: none !important;
}
/* Shop main content */
.shop-main {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Shop header with sort */
.shop-header {
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 12px !important;
}
/* Products grid - proper 2-column layout */
.products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Product cards - fill grid cell */
.product-card {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
background: #ffffff !important;
}
.product-image {
background: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
}
.product-image img {
display: block !important;
margin: 0 !important;
}
}
/* Tablet specific (larger screens) */
@media (min-width: 768px) and (max-width: 992px) {
.section .container {
padding: 0 20px !important;
}
.products-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
}
#mobileFilters select {
padding: 12px 12px !important;
font-size: 0.85rem !important;
}
}
/* Desktop: hide native dropdowns, show desktop filters */
@media (min-width: 993px) {
#mobileFilters {
display: none !important;
}
#desktopFilters {
display: block !important;
}
}
</style>
</head>
<body>
<!-- Navigation -->
@@ -82,9 +232,7 @@
Explore our complete collection of stationery and crafting supplies
</p>
<div class="breadcrumb">
<a href="/home">Home</a>
<span>/</span>
<span>Shop</span>
<a href="/home">Home</a> <span>/</span> <span>Shop</span>
</div>
</div>
</div>
@@ -96,8 +244,7 @@
<!-- Sidebar Filters -->
<aside class="shop-sidebar">
<!-- Search -->
<div class="filter-card">
<h3 class="filter-title">Search</h3>
<div class="filter-card" id="searchCard">
<div class="search-box" style="position: relative">
<input
type="text"
@@ -106,8 +253,8 @@
style="
width: 100%;
padding: 12px 40px 12px 16px;
border: 2px solid var(--border-light);
border-radius: var(--radius-md);
border: 2px solid #ddd;
border-radius: 8px;
font-size: 0.95rem;
"
/>
@@ -118,59 +265,139 @@
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
color: #888;
"
></i>
</div>
</div>
<!-- Categories -->
<div class="filter-card">
<h3 class="filter-title">Categories</h3>
<div class="filter-options" id="categoryFilters">
<label class="filter-option">
<input type="checkbox" value="all" checked />
<span>All Products</span>
</label>
<!-- Categories loaded via JavaScript -->
</div>
<!-- Mobile Filter Dropdowns - Native SELECT elements -->
<div
class="mobile-filter-row"
id="mobileFilters"
style="
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
"
>
<!-- Categories Dropdown -->
<select
id="categoryFilter"
style="
padding: 12px 16px;
font-size: 0.9rem;
font-weight: 600;
border: 2px solid #d0d0d0;
border-radius: 8px;
background: #fff;
color: #333;
cursor: pointer;
min-height: 44px;
appearance: auto;
"
>
<option value="">Categories</option>
<option value="all">All Products</option>
<!-- More categories loaded via JS -->
</select>
<!-- Price Range Dropdown -->
<select
id="priceFilter"
style="
padding: 12px 16px;
font-size: 0.9rem;
font-weight: 600;
border: 2px solid #d0d0d0;
border-radius: 8px;
background: #fff;
color: #333;
cursor: pointer;
min-height: 44px;
appearance: auto;
"
>
<option value="">Price Range</option>
<option value="0-10">Under $10</option>
<option value="10-25">$10 - $25</option>
<option value="25-50">$25 - $50</option>
<option value="50+">$50 & Above</option>
</select>
<!-- Availability Dropdown -->
<select
id="stockFilter"
style="
padding: 12px 16px;
font-size: 0.9rem;
font-weight: 600;
border: 2px solid #d0d0d0;
border-radius: 8px;
background: #fff;
color: #333;
cursor: pointer;
min-height: 44px;
appearance: auto;
"
>
<option value="">Availability</option>
<option value="in-stock">In Stock</option>
<option value="featured">Featured</option>
</select>
</div>
<!-- Price Range -->
<div class="filter-card">
<h3 class="filter-title">Price Range</h3>
<div class="filter-options">
<label class="filter-option">
<input type="checkbox" name="price" value="0-10" />
<span>Under $10</span>
</label>
<label class="filter-option">
<input type="checkbox" name="price" value="10-25" />
<span>$10 - $25</span>
</label>
<label class="filter-option">
<input type="checkbox" name="price" value="25-50" />
<span>$25 - $50</span>
</label>
<label class="filter-option">
<input type="checkbox" name="price" value="50+" />
<span>$50 & Above</span>
</label>
<!-- Desktop Filter Cards (hidden on mobile via CSS) -->
<div class="desktop-filters" id="desktopFilters">
<!-- Categories -->
<div class="filter-card" id="filterCard1">
<h3 class="filter-title">Categories</h3>
<div class="filter-options" id="filterOptions1">
<label class="filter-option">
<input type="checkbox" value="all" checked />
<span>All Products</span>
</label>
<!-- Categories loaded via JavaScript -->
</div>
</div>
</div>
<!-- Availability -->
<div class="filter-card">
<h3 class="filter-title">Availability</h3>
<div class="filter-options">
<label class="filter-option">
<input type="checkbox" name="stock" value="in-stock" />
<span>In Stock</span>
</label>
<label class="filter-option">
<input type="checkbox" name="stock" value="featured" />
<span>Featured</span>
</label>
<!-- Price Range -->
<div class="filter-card" id="filterCard2">
<h3 class="filter-title">Price Range</h3>
<div class="filter-options" id="filterOptions2">
<label class="filter-option">
<input type="checkbox" name="price" value="0-10" />
<span>Under $10</span>
</label>
<label class="filter-option">
<input type="checkbox" name="price" value="10-25" />
<span>$10 - $25</span>
</label>
<label class="filter-option">
<input type="checkbox" name="price" value="25-50" />
<span>$25 - $50</span>
</label>
<label class="filter-option">
<input type="checkbox" name="price" value="50+" />
<span>$50 & Above</span>
</label>
</div>
</div>
<!-- Availability -->
<div class="filter-card" id="filterCard3">
<h3 class="filter-title">Availability</h3>
<div class="filter-options" id="filterOptions3">
<label class="filter-option">
<input type="checkbox" name="stock" value="in-stock" />
<span>In Stock</span>
</label>
<label class="filter-option">
<input type="checkbox" name="stock" value="featured" />
<span>Featured</span>
</label>
</div>
</div>
</div>
</aside>
@@ -221,15 +448,63 @@
collaging stationery. Quality products for all your creative
needs.
</p>
<div class="footer-social">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
<div class="footer-social" id="footerSocialLinks">
<a
href="#"
class="social-link"
id="footerFacebook"
style="display: none"
><i class="bi bi-facebook"></i
></a>
<a
href="#"
class="social-link"
id="footerInstagram"
style="display: none"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"
<a
href="#"
class="social-link"
id="footerTwitter"
style="display: none"
><i class="bi bi-twitter-x"></i
></a>
<a
href="#"
class="social-link"
id="footerYoutube"
style="display: none"
><i class="bi bi-youtube"></i
></a>
<a
href="#"
class="social-link"
id="footerPinterest"
style="display: none"
><i class="bi bi-pinterest"></i
></a>
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
<a
href="#"
class="social-link"
id="footerTiktok"
style="display: none"
><i class="bi bi-tiktok"></i
></a>
<a
href="#"
class="social-link"
id="footerWhatsapp"
style="display: none"
><i class="bi bi-whatsapp"></i
></a>
<a
href="#"
class="social-link"
id="footerLinkedin"
style="display: none"
><i class="bi bi-linkedin"></i
></a>
</div>
</div>
@@ -258,9 +533,9 @@
<div class="footer-column">
<h4>Contact Us</h4>
<ul class="footer-links">
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
</ul>
</div>
</div>
@@ -310,7 +585,7 @@
<!-- Scripts -->
<script src="/assets/js/mobile-touch-fix.js"></script>
<script src="/assets/js/modern-theme.js?v=20260119touch"></script>
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
<script src="/assets/js/customer-auth.js"></script>
<script>
let allProducts = [];
@@ -323,17 +598,32 @@
// Load categories
const categories = await API.loadCategories();
const categoryFilters = document.getElementById("categoryFilters");
if (categoryFilters && categories.length > 0) {
categories.forEach((cat) => {
const label = document.createElement("label");
label.className = "filter-option";
label.innerHTML = `
<input type="checkbox" name="category" value="${cat}">
<span>${cat}</span>
`;
categoryFilters.appendChild(label);
});
const categoryFilters = document.getElementById("filterOptions1");
const mobileCategorySelect = document.getElementById("categoryFilter");
if (categories.length > 0) {
// Populate desktop checkboxes
if (categoryFilters) {
categories.forEach((cat) => {
const label = document.createElement("label");
label.className = "filter-option";
label.innerHTML = `
<input type="checkbox" name="category" value="${cat}">
<span>${cat}</span>
`;
categoryFilters.appendChild(label);
});
}
// Populate mobile dropdown
if (mobileCategorySelect) {
categories.forEach((cat) => {
const option = document.createElement("option");
option.value = cat;
option.textContent = cat;
mobileCategorySelect.appendChild(option);
});
}
}
// Render products
@@ -342,6 +632,9 @@
// Setup filters
setupFilters();
// Initialize collapsible filters AFTER everything is loaded
setTimeout(initCollapsibleFilters, 200);
// Setup product card click to navigate to product page
document.addEventListener("click", (e) => {
const card = e.target.closest(".product-card");
@@ -396,21 +689,36 @@
searchTimeout = setTimeout(applyFilters, 300);
});
// Category checkboxes
// Category checkboxes (desktop)
document.querySelectorAll('input[name="category"]').forEach((cb) => {
cb.addEventListener("change", applyFilters);
});
// Price checkboxes
// Price checkboxes (desktop)
document.querySelectorAll('input[name="price"]').forEach((cb) => {
cb.addEventListener("change", applyFilters);
});
// Stock checkboxes
// Stock checkboxes (desktop)
document.querySelectorAll('input[name="stock"]').forEach((cb) => {
cb.addEventListener("change", applyFilters);
});
// Mobile filter dropdowns
const categoryFilter = document.getElementById("categoryFilter");
const priceFilter = document.getElementById("priceFilter");
const stockFilter = document.getElementById("stockFilter");
if (categoryFilter) {
categoryFilter.addEventListener("change", applyFilters);
}
if (priceFilter) {
priceFilter.addEventListener("change", applyFilters);
}
if (stockFilter) {
stockFilter.addEventListener("change", applyFilters);
}
// Sort
document
.getElementById("sortSelect")
@@ -421,15 +729,37 @@
const searchTerm = document
.getElementById("searchInput")
.value.toLowerCase();
const selectedCategories = Array.from(
// Get desktop checkbox values
let selectedCategories = Array.from(
document.querySelectorAll('input[name="category"]:checked'),
).map((cb) => cb.value);
const selectedPrices = Array.from(
let selectedPrices = Array.from(
document.querySelectorAll('input[name="price"]:checked'),
).map((cb) => cb.value);
const stockFilters = Array.from(
let stockFilters = Array.from(
document.querySelectorAll('input[name="stock"]:checked'),
).map((cb) => cb.value);
// Also check mobile select dropdowns
const mobileCategoryFilter = document.getElementById("categoryFilter");
const mobilePriceFilter = document.getElementById("priceFilter");
const mobileStockFilter = document.getElementById("stockFilter");
if (
mobileCategoryFilter &&
mobileCategoryFilter.value &&
mobileCategoryFilter.value !== "all"
) {
selectedCategories = [mobileCategoryFilter.value];
}
if (mobilePriceFilter && mobilePriceFilter.value) {
selectedPrices = [mobilePriceFilter.value];
}
if (mobileStockFilter && mobileStockFilter.value) {
stockFilters = [mobileStockFilter.value];
}
const sortBy = document.getElementById("sortSelect").value;
filteredProducts = allProducts.filter((product) => {
@@ -491,65 +821,79 @@
renderProducts();
}
// Collapsible Filters for Mobile/Tablet
// Collapsible Filters for Mobile/Tablet - SIMPLE VERSION
function initCollapsibleFilters() {
const isMobile = window.innerWidth <= 992;
if (window.innerWidth > 992) return; // Only for mobile/tablet
const filterCards = document.querySelectorAll(".filter-card");
filterCards.forEach((card, index) => {
// Skip the search filter (first one)
if (index === 0) return;
if (index === 0) return; // Skip search
const title = card.querySelector(".filter-title");
if (!title) return;
const options = card.querySelector(".filter-options");
// Start collapsed on mobile (except search)
if (isMobile) {
card.classList.add("collapsed");
}
if (!title || !options) return;
// Toggle on click
title.addEventListener("click", (e) => {
// Initially hide all dropdowns
options.style.display = "none";
options.style.position = "absolute";
options.style.top = "100%";
options.style.left = "0";
options.style.zIndex = "9999";
options.style.minWidth = "200px";
options.style.padding = "12px";
options.style.marginTop = "6px";
options.style.background = "#fff";
options.style.border = "1px solid #ddd";
options.style.borderRadius = "12px";
options.style.boxShadow = "0 8px 24px rgba(0,0,0,0.2)";
// Click handler
const handleClick = function (e) {
e.preventDefault();
e.stopPropagation();
// Close other open dropdowns first
filterCards.forEach((otherCard, otherIndex) => {
if (otherIndex !== 0 && otherCard !== card) {
otherCard.classList.add("collapsed");
// Check current state
const isHidden = options.style.display === "none";
// Close all other dropdowns first
filterCards.forEach((c, i) => {
if (i > 0 && c !== card) {
const opts = c.querySelector(".filter-options");
if (opts) opts.style.display = "none";
}
});
card.classList.toggle("collapsed");
});
// Toggle this dropdown
if (isHidden) {
options.style.display = "block";
} else {
options.style.display = "none";
}
};
// Attach click event
title.onclick = handleClick;
});
// Close dropdowns when clicking outside
document.addEventListener("click", (e) => {
if (window.innerWidth <= 992 && !e.target.closest(".filter-card")) {
// Close when clicking outside
document.onclick = function (e) {
if (!e.target.closest(".filter-card")) {
filterCards.forEach((card, index) => {
if (index > 0) {
card.classList.add("collapsed");
const opts = card.querySelector(".filter-options");
if (opts) opts.style.display = "none";
}
});
}
});
// Handle resize
window.addEventListener("resize", () => {
const nowMobile = window.innerWidth <= 992;
filterCards.forEach((card, index) => {
if (index === 0) return;
if (nowMobile) {
card.classList.add("collapsed");
} else {
card.classList.remove("collapsed");
}
});
});
};
}
// Initialize collapsible filters when DOM is ready
document.addEventListener("DOMContentLoaded", initCollapsibleFilters);
// Run after page loads
window.onload = function () {
setTimeout(initCollapsibleFilters, 500);
};
</script>
<script src="/assets/js/accessibility.js"></script>
</body>

1
website/public/signin.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign In | Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"

1
website/public/signup.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create Account | Sky Art Shop</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"

1
website/public/sticky-test-inline.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Test - Inline CSS</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

1
website/public/test-sticky-navbar.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<title>Sticky Navbar Test</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" href="/assets/css/navbar.css?v=1768450104" />
<link rel="stylesheet" href="/assets/css/page-overrides.css?v=1768450104" />
<style>

1
website/public/test-sticky.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Test</title>
<link rel="icon" type="image/png" href="/favicon.png" />
<style>
body {
margin: 0;