webupdate
This commit is contained in:
Local Server
@@ -891,12 +891,22 @@ const settingsHandler = (key) => ({
|
|||||||
sendSuccess(res, { settings });
|
sendSuccess(res, { settings });
|
||||||
}),
|
}),
|
||||||
post: asyncHandler(async (req, res) => {
|
post: asyncHandler(async (req, res) => {
|
||||||
const settings = req.body;
|
const newSettings = req.body;
|
||||||
|
// Get existing settings first and merge
|
||||||
|
const existingResult = await query(
|
||||||
|
"SELECT settings FROM site_settings WHERE key = $1",
|
||||||
|
[key],
|
||||||
|
);
|
||||||
|
const existingSettings =
|
||||||
|
existingResult.rows.length > 0 ? existingResult.rows[0].settings : {};
|
||||||
|
// Merge new settings with existing (new settings overwrite existing for same keys)
|
||||||
|
const mergedSettings = { ...existingSettings, ...newSettings };
|
||||||
|
|
||||||
await query(
|
await query(
|
||||||
`INSERT INTO site_settings (key, settings, updatedat)
|
`INSERT INTO site_settings (key, settings, updatedat)
|
||||||
VALUES ($1, $2, NOW())
|
VALUES ($1, $2, NOW())
|
||||||
ON CONFLICT (key) DO UPDATE SET settings = $2, updatedat = NOW()`,
|
ON CONFLICT (key) DO UPDATE SET settings = $2, updatedat = NOW()`,
|
||||||
[key, JSON.stringify(settings)],
|
[key, JSON.stringify(mergedSettings)],
|
||||||
);
|
);
|
||||||
sendSuccess(res, { message: `${key} settings saved successfully` });
|
sendSuccess(res, { message: `${key} settings saved successfully` });
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -83,12 +83,15 @@ router.get(
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Get site settings
|
// Get site settings (from site_settings table with key='general')
|
||||||
router.get(
|
router.get(
|
||||||
"/settings",
|
"/settings",
|
||||||
asyncHandler(async (req, res) => {
|
asyncHandler(async (req, res) => {
|
||||||
const result = await query("SELECT * FROM sitesettings LIMIT 1");
|
const result = await query(
|
||||||
sendSuccess(res, { settings: result.rows[0] || {} });
|
"SELECT settings FROM site_settings WHERE key = 'general'",
|
||||||
|
);
|
||||||
|
const settings = result.rows.length > 0 ? result.rows[0].settings : {};
|
||||||
|
sendSuccess(res, settings);
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -64,6 +64,12 @@ app.use(
|
|||||||
],
|
],
|
||||||
connectSrc: ["'self'", "https://cdn.jsdelivr.net"],
|
connectSrc: ["'self'", "https://cdn.jsdelivr.net"],
|
||||||
objectSrc: ["'none'"],
|
objectSrc: ["'none'"],
|
||||||
|
frameSrc: [
|
||||||
|
"'self'",
|
||||||
|
"https://www.google.com",
|
||||||
|
"https://maps.google.com",
|
||||||
|
"https://www.openstreetmap.org",
|
||||||
|
],
|
||||||
upgradeInsecureRequests: !isDevelopment() ? [] : null,
|
upgradeInsecureRequests: !isDevelopment() ? [] : null,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -72,11 +78,11 @@ app.use(
|
|||||||
includeSubDomains: true,
|
includeSubDomains: true,
|
||||||
preload: true,
|
preload: true,
|
||||||
},
|
},
|
||||||
frameguard: { action: "deny" },
|
frameguard: { action: "sameorigin" },
|
||||||
xssFilter: true,
|
xssFilter: true,
|
||||||
noSniff: true,
|
noSniff: true,
|
||||||
referrerPolicy: { policy: "strict-origin-when-cross-origin" },
|
referrerPolicy: { policy: "strict-origin-when-cross-origin" },
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
// CORS configuration
|
// CORS configuration
|
||||||
@@ -85,7 +91,7 @@ if (process.env.CORS_ORIGIN) {
|
|||||||
cors({
|
cors({
|
||||||
origin: process.env.CORS_ORIGIN.split(","),
|
origin: process.env.CORS_ORIGIN.split(","),
|
||||||
credentials: true,
|
credentials: true,
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -95,7 +101,7 @@ app.set("trust proxy", 1);
|
|||||||
// Body parsers
|
// Body parsers
|
||||||
app.use(express.json({ limit: BODY_PARSER_LIMITS.JSON }));
|
app.use(express.json({ limit: BODY_PARSER_LIMITS.JSON }));
|
||||||
app.use(
|
app.use(
|
||||||
express.urlencoded({ extended: true, limit: BODY_PARSER_LIMITS.URLENCODED })
|
express.urlencoded({ extended: true, limit: BODY_PARSER_LIMITS.URLENCODED }),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Fallback middleware for missing product images
|
// Fallback middleware for missing product images
|
||||||
@@ -105,7 +111,7 @@ const productImageFallback = (req, res, next) => {
|
|||||||
"assets",
|
"assets",
|
||||||
"images",
|
"images",
|
||||||
"products",
|
"products",
|
||||||
req.path
|
req.path,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (fs.existsSync(imagePath)) {
|
if (fs.existsSync(imagePath)) {
|
||||||
@@ -117,7 +123,7 @@ const productImageFallback = (req, res, next) => {
|
|||||||
"assets",
|
"assets",
|
||||||
"images",
|
"images",
|
||||||
"products",
|
"products",
|
||||||
"placeholder.jpg"
|
"placeholder.jpg",
|
||||||
);
|
);
|
||||||
logger.debug("Serving placeholder image", { requested: req.path });
|
logger.debug("Serving placeholder image", { requested: req.path });
|
||||||
res.sendFile(placeholderPath);
|
res.sendFile(placeholderPath);
|
||||||
@@ -150,7 +156,7 @@ app.use(
|
|||||||
res.setHeader("Cache-Control", "public, max-age=86400"); // 1 day default
|
res.setHeader("Cache-Control", "public, max-age=86400"); // 1 day default
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
app.use(
|
app.use(
|
||||||
"/assets",
|
"/assets",
|
||||||
@@ -172,7 +178,7 @@ app.use(
|
|||||||
res.setHeader("Cache-Control", "public, max-age=86400"); // 1 day for images
|
res.setHeader("Cache-Control", "public, max-age=86400"); // 1 day for images
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
// Optimized image serving with aggressive caching
|
// Optimized image serving with aggressive caching
|
||||||
app.use("/uploads", imageOptimization(path.join(baseDir, "uploads")));
|
app.use("/uploads", imageOptimization(path.join(baseDir, "uploads")));
|
||||||
@@ -183,7 +189,7 @@ app.use(
|
|||||||
etag: true,
|
etag: true,
|
||||||
lastModified: true,
|
lastModified: true,
|
||||||
immutable: true,
|
immutable: true,
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Session middleware
|
// Session middleware
|
||||||
@@ -194,12 +200,12 @@ if (
|
|||||||
) {
|
) {
|
||||||
if (!isDevelopment()) {
|
if (!isDevelopment()) {
|
||||||
logger.error(
|
logger.error(
|
||||||
"CRITICAL: SESSION_SECRET environment variable must be set in production!"
|
"CRITICAL: SESSION_SECRET environment variable must be set in production!",
|
||||||
);
|
);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
logger.warn(
|
logger.warn(
|
||||||
"WARNING: Using insecure session secret. Set SESSION_SECRET in production!"
|
"WARNING: Using insecure session secret. Set SESSION_SECRET in production!",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -224,7 +230,7 @@ app.use(
|
|||||||
proxy: !isDevelopment(),
|
proxy: !isDevelopment(),
|
||||||
name: SESSION_CONFIG.SESSION_NAME,
|
name: SESSION_CONFIG.SESSION_NAME,
|
||||||
rolling: true, // Reset session expiration on each request
|
rolling: true, // Reset session expiration on each request
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Request logging
|
// Request logging
|
||||||
@@ -333,7 +339,7 @@ app.use(
|
|||||||
maxAge: "1d",
|
maxAge: "1d",
|
||||||
etag: true,
|
etag: true,
|
||||||
lastModified: true,
|
lastModified: true,
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Favicon route
|
// Favicon route
|
||||||
@@ -353,7 +359,7 @@ app.get("/health", async (req, res) => {
|
|||||||
try {
|
try {
|
||||||
const dbHealth = await healthCheck();
|
const dbHealth = await healthCheck();
|
||||||
const missingImages = CRITICAL_IMAGES.filter(
|
const missingImages = CRITICAL_IMAGES.filter(
|
||||||
(img) => !fs.existsSync(path.join(baseDir, img))
|
(img) => !fs.existsSync(path.join(baseDir, img)),
|
||||||
);
|
);
|
||||||
|
|
||||||
const assetsHealthy = missingImages.length === 0;
|
const assetsHealthy = missingImages.length === 0;
|
||||||
|
|||||||
@@ -34,8 +34,8 @@ server {
|
|||||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||||
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
|
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
|
||||||
|
|
||||||
# Content Security Policy - Allow only trusted CDNs
|
# Content Security Policy - Allow only trusted CDNs and Maps
|
||||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://cdn.ckeditor.com https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; img-src 'self' data: https:; connect-src 'self' https://cdn.jsdelivr.net https://cdn.ckeditor.com; frame-src 'none';" always;
|
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://cdn.ckeditor.com https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; img-src 'self' data: https:; connect-src 'self' https://cdn.jsdelivr.net https://cdn.ckeditor.com; frame-src https://www.google.com https://maps.google.com https://www.openstreetmap.org;" always;
|
||||||
|
|
||||||
# Prevent clickjacking
|
# Prevent clickjacking
|
||||||
add_header X-Permitted-Cross-Domain-Policies "none" always;
|
add_header X-Permitted-Cross-Domain-Policies "none" always;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Blog Management - Sky Art Shop</title>
|
<title>Blog Management - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Customer Management - Sky Art Shop</title>
|
<title>Customer Management - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Sky Art Shop - Admin Dashboard" />
|
<meta name="description" content="Sky Art Shop - Admin Dashboard" />
|
||||||
<title>Dashboard - Sky Art Shop Admin</title>
|
<title>Dashboard - Sky Art Shop Admin</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link
|
<link
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Admin Dashboard - Sky Art Shop</title>
|
<title>Admin Dashboard - Sky Art Shop</title>
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
BIN
website/admin/favicon.png
Normal file
BIN
website/admin/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Homepage Editor - Sky Art Shop</title>
|
<title>Homepage Editor - Sky Art Shop</title>
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Admin Login - Sky Art Shop</title>
|
<title>Admin Login - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Logout Debug Tool</title>
|
<title>Logout Debug Tool</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Media Library - Sky Art Shop</title>
|
<title>Media Library - Sky Art Shop</title>
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
|
|
||||||
<!-- Immediate select mode detection to prevent flash -->
|
<!-- Immediate select mode detection to prevent flash -->
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Media Library - Sky Art Shop Admin</title>
|
<title>Media Library - Sky Art Shop Admin</title>
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
|
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Menu Management - Sky Art Shop</title>
|
<title>Menu Management - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Menu Manager - Sky Art Shop Admin</title>
|
<title>Menu Manager - Sky Art Shop Admin</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Custom Pages - Sky Art Shop</title>
|
<title>Custom Pages - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Custom Pages - Sky Art Shop Admin</title>
|
<title>Custom Pages - Sky Art Shop Admin</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Portfolio Management - Sky Art Shop</title>
|
<title>Portfolio Management - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Products Management - Sky Art Shop</title>
|
<title>Products Management - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Settings - Sky Art Shop</title>
|
<title>Settings - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Settings - Sky Art Shop Admin</title>
|
<title>Settings - Sky Art Shop Admin</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
@@ -1163,13 +1164,14 @@
|
|||||||
// Load settings
|
// Load settings
|
||||||
async function loadSettings() {
|
async function loadSettings() {
|
||||||
try {
|
try {
|
||||||
const response = await fetch("/api/settings", {
|
const response = await fetch("/api/admin/settings", {
|
||||||
credentials: "include",
|
credentials: "include",
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) throw new Error("Failed to load settings");
|
if (!response.ok) throw new Error("Failed to load settings");
|
||||||
|
|
||||||
settings = await response.json();
|
const data = await response.json();
|
||||||
|
settings = data.settings || {};
|
||||||
populateForm();
|
populateForm();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error loading settings:", error);
|
console.error("Error loading settings:", error);
|
||||||
@@ -1406,8 +1408,8 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch("/api/settings", {
|
const response = await fetch("/api/admin/settings", {
|
||||||
method: "PUT",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
credentials: "include",
|
credentials: "include",
|
||||||
body: JSON.stringify(data),
|
body: JSON.stringify(data),
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Team Members - Admin</title>
|
<title>Team Members - Admin</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Test All Logout Buttons</title>
|
<title>Test All Logout Buttons</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||||
<script src="/admin/js/auth.js"></script>
|
<script src="/admin/js/auth.js"></script>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Test Inline Logout</title>
|
<title>Test Inline Logout</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<script src="/admin/js/auth.js"></script>
|
<script src="/admin/js/auth.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Logout Click Test</title>
|
<title>Logout Click Test</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<script src="/admin/js/auth.js"></script>
|
<script src="/admin/js/auth.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Logout Fix Test - Sky Art Shop</title>
|
<title>Logout Fix Test - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Logout Test</title>
|
<title>Logout Test</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<script src="/admin/js/auth.js"></script>
|
<script src="/admin/js/auth.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Test Logout Button</title>
|
<title>Test Logout Button</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Notification System Demo</title>
|
<title>Notification System Demo</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Products Button Test</title>
|
<title>Products Button Test</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Toast Notification Demo</title>
|
<title>Toast Notification Demo</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>User Management API Tests</title>
|
<title>User Management API Tests</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>User Management - Sky Art Shop</title>
|
<title>User Management - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -705,7 +705,9 @@ body {
|
|||||||
|
|
||||||
.product-card {
|
.product-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--bg-card);
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #ffffff;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: var(--transition-smooth);
|
transition: var(--transition-smooth);
|
||||||
@@ -721,15 +723,16 @@ body {
|
|||||||
.product-image {
|
.product-image {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 100%;
|
aspect-ratio: 1 / 1;
|
||||||
background: var(--primary-pink-light);
|
background: #ffffff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-image img {
|
.product-image img {
|
||||||
position: absolute;
|
display: block;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@@ -1431,7 +1434,7 @@ body {
|
|||||||
============================================ */
|
============================================ */
|
||||||
.about-hero {
|
.about-hero {
|
||||||
text-align: center;
|
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%);
|
background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1830,7 +1833,7 @@ body {
|
|||||||
============================================ */
|
============================================ */
|
||||||
.page-header {
|
.page-header {
|
||||||
background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
|
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;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
content="About Sky Art Shop - Your creative stationery destination"
|
content="About Sky Art Shop - Your creative stationery destination"
|
||||||
/>
|
/>
|
||||||
<title>About Us - Sky Art Shop</title>
|
<title>About Us - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -24,13 +25,10 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
href="/assets/css/mobile-fixes.css?v=20260118fix30"
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/assets/css/mobile-fixes.css?v=20260118editor"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -54,10 +52,10 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* White background content area */
|
/* Light pink background content area - matches shop page */
|
||||||
.about-content-wrapper {
|
.about-content-wrapper {
|
||||||
background: #ffffff;
|
background: var(--bg-light);
|
||||||
padding-top: var(--spacing-2xl);
|
padding-top: var(--spacing-xl);
|
||||||
padding-bottom: var(--spacing-2xl);
|
padding-bottom: var(--spacing-2xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -207,7 +205,7 @@
|
|||||||
.about-dynamic-content .about-cat-logo {
|
.about-dynamic-content .about-cat-logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
margin: var(--spacing-lg) auto;
|
margin: 0 auto var(--spacing-lg) auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -226,6 +224,44 @@
|
|||||||
grid-template-columns: 1fr;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -277,15 +313,25 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 id="pageTitle">About Us</h1>
|
<h1 id="pageTitle">About Us</h1>
|
||||||
<p id="pageSubtitle">Learn more about Sky Art Shop</p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- White Background Content Wrapper -->
|
<!-- White Background Content Wrapper -->
|
||||||
<div class="about-content-wrapper">
|
<div class="about-content-wrapper">
|
||||||
<!-- Dynamic Content Section -->
|
<!-- Dynamic Content Section -->
|
||||||
<section class="section" style="padding-top: 0; padding-bottom: 3rem">
|
<section
|
||||||
<div class="container">
|
class="section"
|
||||||
<div class="about-dynamic-content" id="dynamicContent">
|
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 -->
|
<!-- Cat Logo Image - floats right -->
|
||||||
<img
|
<img
|
||||||
src="/uploads/cat_logo_bgremoved-1768630281197.png"
|
src="/uploads/cat_logo_bgremoved-1768630281197.png"
|
||||||
@@ -469,15 +515,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -506,9 +600,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -557,7 +651,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- 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/customer-auth.js?v=20260118a"></script>
|
||||||
<script src="/assets/js/dynamic-page.js?v=20260118b"></script>
|
<script src="/assets/js/dynamic-page.js?v=20260118b"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>My Account | Sky Art Shop</title>
|
<title>My Account | Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||||
|
|||||||
@@ -340,10 +340,14 @@ body {
|
|||||||
@media (max-width: 576px) {
|
@media (max-width: 576px) {
|
||||||
.section {
|
.section {
|
||||||
padding: var(--spacing-xl) 0 !important;
|
padding: var(--spacing-xl) 0 !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 0 var(--spacing-md) !important;
|
padding: 0 var(--spacing-md) !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
@@ -358,10 +362,14 @@ body {
|
|||||||
@media (min-width: 577px) and (max-width: 768px) {
|
@media (min-width: 577px) and (max-width: 768px) {
|
||||||
.section {
|
.section {
|
||||||
padding: var(--spacing-xl) 0 !important;
|
padding: var(--spacing-xl) 0 !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 0 var(--spacing-lg) !important;
|
padding: 0 var(--spacing-lg) !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
@@ -372,6 +380,8 @@ body {
|
|||||||
@media (min-width: 769px) and (max-width: 1024px) {
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||||||
.container {
|
.container {
|
||||||
padding: 0 var(--spacing-xl) !important;
|
padding: 0 var(--spacing-xl) !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
@@ -382,25 +392,63 @@ body {
|
|||||||
/* === PRODUCT GRID RESPONSIVE === */
|
/* === PRODUCT GRID RESPONSIVE === */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.products-grid {
|
.products-grid {
|
||||||
|
display: grid !important;
|
||||||
grid-template-columns: repeat(2, 1fr) !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 {
|
.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;
|
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 {
|
.product-info {
|
||||||
padding: var(--spacing-sm) !important;
|
padding: var(--spacing-sm) !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-name {
|
.product-name {
|
||||||
font-size: 0.85rem !important;
|
font-size: 0.8rem !important;
|
||||||
display: -webkit-box;
|
word-break: break-word !important;
|
||||||
-webkit-box-orient: vertical;
|
hyphens: auto !important;
|
||||||
-webkit-line-clamp: 2;
|
overflow-wrap: break-word !important;
|
||||||
line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-price {
|
.product-price {
|
||||||
@@ -420,14 +468,45 @@ body {
|
|||||||
|
|
||||||
@media (min-width: 481px) and (max-width: 768px) {
|
@media (min-width: 481px) and (max-width: 768px) {
|
||||||
.products-grid {
|
.products-grid {
|
||||||
|
display: grid !important;
|
||||||
grid-template-columns: repeat(2, 1fr) !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 {
|
.product-name {
|
||||||
font-size: 0.9rem !important;
|
font-size: 0.9rem !important;
|
||||||
|
word-break: break-word !important;
|
||||||
|
hyphens: auto !important;
|
||||||
|
overflow-wrap: break-word !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-price {
|
.product-price {
|
||||||
font-size: 1.1rem !important;
|
font-size: 1.1rem !important;
|
||||||
}
|
}
|
||||||
@@ -435,8 +514,35 @@ body {
|
|||||||
|
|
||||||
@media (min-width: 769px) and (max-width: 1024px) {
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||||||
.products-grid {
|
.products-grid {
|
||||||
|
display: grid !important;
|
||||||
grid-template-columns: repeat(3, 1fr) !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;
|
padding: 12px 0 10px !important;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header .container {
|
.page-header .container {
|
||||||
padding: 0 16px !important;
|
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 {
|
.page-header h1 {
|
||||||
font-size: 1.3rem !important;
|
font-size: 1.3rem !important;
|
||||||
margin-bottom: 2px !important;
|
margin-bottom: 2px !important;
|
||||||
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header p {
|
.page-header p {
|
||||||
font-size: 0.78rem !important;
|
font-size: 0.78rem !important;
|
||||||
margin-bottom: 4px !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 INLINE - All breadcrumbs on same line */
|
||||||
.breadcrumb,
|
.breadcrumb,
|
||||||
.page-header .breadcrumb,
|
.page-header .breadcrumb,
|
||||||
.container .breadcrumb,
|
.about-hero .breadcrumb,
|
||||||
.section .breadcrumb {
|
.contact-hero .breadcrumb {
|
||||||
display: inline-flex !important;
|
display: block !important;
|
||||||
flex-direction: row !important;
|
|
||||||
flex-wrap: nowrap !important;
|
|
||||||
align-items: center !important;
|
|
||||||
gap: 6px !important;
|
|
||||||
width: auto !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 *,
|
||||||
.breadcrumb span,
|
.breadcrumb > *,
|
||||||
.page-header .breadcrumb a,
|
.page-header .breadcrumb *,
|
||||||
.page-header .breadcrumb span,
|
.page-header .breadcrumb > *,
|
||||||
.container .breadcrumb a,
|
.about-hero .breadcrumb *,
|
||||||
.container .breadcrumb span {
|
.about-hero .breadcrumb > *,
|
||||||
|
.contact-hero .breadcrumb *,
|
||||||
|
.contact-hero .breadcrumb > * {
|
||||||
display: inline !important;
|
display: inline !important;
|
||||||
white-space: nowrap !important;
|
white-space: nowrap !important;
|
||||||
font-size: 0.85rem !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;
|
flex-shrink: 0 !important;
|
||||||
|
float: none !important;
|
||||||
|
position: static !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Product page breadcrumb - left aligned */
|
.breadcrumb a,
|
||||||
.section .breadcrumb,
|
.page-header .breadcrumb a,
|
||||||
.container .breadcrumb {
|
.about-hero .breadcrumb a,
|
||||||
justify-content: flex-start !important;
|
.contact-hero .breadcrumb a {
|
||||||
|
color: var(--text-secondary) !important;
|
||||||
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Page header breadcrumb - center aligned */
|
.breadcrumb span,
|
||||||
.page-header .breadcrumb {
|
.page-header .breadcrumb span,
|
||||||
justify-content: center !important;
|
.about-hero .breadcrumb span,
|
||||||
margin-top: 2px !important;
|
.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 */
|
/* Minimal section spacing */
|
||||||
.section {
|
.section {
|
||||||
padding: 8px 0 20px !important;
|
padding: 8px 0 20px !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/* === SHOP LAYOUT === */
|
|
||||||
.shop-layout {
|
/* === EXTRA SMALL SCREENS - More compact breadcrumb === */
|
||||||
display: flex !important;
|
@media (max-width: 375px) {
|
||||||
flex-direction: column !important;
|
.breadcrumb,
|
||||||
gap: 10px !important;
|
.page-header .breadcrumb,
|
||||||
|
.about-hero .breadcrumb,
|
||||||
|
.contact-hero .breadcrumb {
|
||||||
|
font-size: 0.8rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar - use flexbox with wrap for horizontal filter chips */
|
.breadcrumb > *,
|
||||||
.shop-sidebar {
|
.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;
|
width: 100% !important;
|
||||||
display: flex !important;
|
max-width: 100% !important;
|
||||||
flex-wrap: wrap !important;
|
padding: 0 !important;
|
||||||
align-items: flex-start !important;
|
margin: 0 !important;
|
||||||
gap: 8px !important;
|
box-sizing: border-box !important;
|
||||||
margin-bottom: 8px !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 */
|
/* Search card - FULL WIDTH, first row */
|
||||||
@@ -608,76 +821,93 @@ body {
|
|||||||
/* FILTER CHIPS - Same row, auto width */
|
/* FILTER CHIPS - Same row, auto width */
|
||||||
.shop-sidebar .filter-card:nth-child(2),
|
.shop-sidebar .filter-card:nth-child(2),
|
||||||
.shop-sidebar .filter-card:nth-child(3),
|
.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;
|
flex: 0 0 auto !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
margin: 0 !important;
|
margin: 0 4px 0 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
order: 2 !important;
|
order: 2 !important;
|
||||||
position: relative !important; /* For dropdown positioning */
|
position: relative !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Filter chip button style */
|
/* ===== DETAILS/SUMMARY DROPDOWN STYLES ===== */
|
||||||
.shop-sidebar .filter-card:not(:first-child) .filter-title {
|
|
||||||
|
/* 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;
|
display: inline-flex !important;
|
||||||
|
visibility: visible !important;
|
||||||
align-items: center !important;
|
align-items: center !important;
|
||||||
padding: 8px 14px !important;
|
justify-content: center !important;
|
||||||
margin: 0 !important;
|
padding: 10px 16px !important;
|
||||||
font-size: 0.72rem !important;
|
font-size: 0.85rem !important;
|
||||||
font-weight: 600 !important;
|
font-weight: 600 !important;
|
||||||
text-transform: uppercase !important;
|
font-family: inherit !important;
|
||||||
letter-spacing: 0.3px !important;
|
background: #ffffff !important;
|
||||||
background: #fff !important;
|
border: 2px solid #d0d0d0 !important;
|
||||||
border: 1px solid #ddd !important;
|
border-radius: 8px !important;
|
||||||
border-radius: 20px !important;
|
color: #333 !important;
|
||||||
color: #555 !important;
|
|
||||||
cursor: pointer !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;
|
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 {
|
details.filter-dropdown > summary.filter-title:active {
|
||||||
background: #fff5f8 !important;
|
background: #f0f0f0 !important;
|
||||||
|
transform: scale(0.98) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.filter-dropdown[open] > summary.filter-title {
|
||||||
|
background: #fff !important;
|
||||||
border-color: #f8c8dc !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 {
|
/* Dropdown CLOSED - hide options */
|
||||||
content: '▼' !important;
|
details.filter-dropdown:not([open]) > .filter-options {
|
||||||
font-size: 8px !important;
|
display: none !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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Rotate arrow when open */
|
/* Dropdown OPEN - show options */
|
||||||
.shop-sidebar .filter-card:not(:first-child):not(.collapsed) .filter-title::after {
|
details.filter-dropdown[open] > .filter-options {
|
||||||
transform: rotate(180deg) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Filter dropdown - visible when NOT collapsed */
|
|
||||||
.shop-sidebar .filter-card:not(:first-child):not(.collapsed) .filter-options {
|
|
||||||
display: block !important;
|
display: block !important;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: 100% !important;
|
top: calc(100% + 6px) !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
z-index: 1000 !important;
|
z-index: 9999 !important;
|
||||||
min-width: 200px !important;
|
min-width: 200px !important;
|
||||||
|
width: max-content !important;
|
||||||
|
max-width: 280px !important;
|
||||||
padding: 12px !important;
|
padding: 12px !important;
|
||||||
margin-top: 6px !important;
|
background: #ffffff !important;
|
||||||
background: #fff !important;
|
|
||||||
border: 1px solid #ddd !important;
|
border: 1px solid #ddd !important;
|
||||||
border-radius: 12px !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 */
|
/* Filter option items */
|
||||||
.shop-sidebar .filter-card:not(:first-child).collapsed .filter-options {
|
details.filter-dropdown .filter-option {
|
||||||
display: none !important;
|
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 */
|
/* Shop main section */
|
||||||
@@ -824,8 +1054,14 @@ body {
|
|||||||
.about-content-wrapper .container,
|
.about-content-wrapper .container,
|
||||||
.about-hero .container,
|
.about-hero .container,
|
||||||
.policy-container {
|
.policy-container {
|
||||||
padding-left: 20px !important;
|
padding-left: 12px !important;
|
||||||
padding-right: 20px !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 */
|
/* Make policy container wider */
|
||||||
@@ -854,18 +1090,35 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.about-content-wrapper .container {
|
.about-content-wrapper .container {
|
||||||
padding-left: 15px !important;
|
padding-left: 10px !important;
|
||||||
padding-right: 15px !important;
|
padding-right: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-hero .container {
|
.about-hero .container {
|
||||||
padding-left: 15px !important;
|
padding-left: 10px !important;
|
||||||
padding-right: 15px !important;
|
padding-right: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-container {
|
.policy-container {
|
||||||
padding-left: 15px !important;
|
padding-left: 10px !important;
|
||||||
padding-right: 15px !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 {
|
.about-text h2 {
|
||||||
@@ -907,6 +1160,8 @@ body {
|
|||||||
.product-gallery,
|
.product-gallery,
|
||||||
.product-details {
|
.product-details {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-gallery-main {
|
.product-gallery-main {
|
||||||
@@ -920,6 +1175,60 @@ body {
|
|||||||
.product-price-main {
|
.product-price-main {
|
||||||
font-size: 1.5rem !important;
|
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) === */
|
/* === LANDSCAPE MODE FIXES (Mobile) === */
|
||||||
@@ -1688,18 +1997,76 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === PRODUCT PAGE RECOMMENDATIONS === */
|
/* === PRODUCT PAGE RECOMMENDATIONS - HORIZONTAL SCROLL === */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 992px) {
|
||||||
|
/* Related products section container */
|
||||||
#relatedProducts.products-grid {
|
#relatedProducts.products-grid {
|
||||||
grid-template-columns: repeat(2, 1fr) !important;
|
display: flex !important;
|
||||||
gap: var(--spacing-sm) !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) {
|
@media (max-width: 480px) {
|
||||||
#relatedProducts.products-grid {
|
#relatedProducts.products-grid .product-card {
|
||||||
grid-template-columns: 1fr !important;
|
width: 140px !important;
|
||||||
gap: var(--spacing-md) !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;
|
transform: scale(0.98) !important;
|
||||||
opacity: 0.9 !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;
|
||||||
}
|
}
|
||||||
@@ -233,6 +233,7 @@ body {
|
|||||||
|
|
||||||
.nav-brand {
|
.nav-brand {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--spacing-md);
|
gap: var(--spacing-md);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -306,8 +307,9 @@ body {
|
|||||||
.nav-actions {
|
.nav-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
gap: var(--spacing-md);
|
gap: var(--spacing-md);
|
||||||
flex-shrink: 0;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-icon-btn {
|
.nav-icon-btn {
|
||||||
@@ -712,7 +714,9 @@ body {
|
|||||||
|
|
||||||
.product-card {
|
.product-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--bg-card);
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #ffffff;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: var(--transition-smooth);
|
transition: var(--transition-smooth);
|
||||||
@@ -728,15 +732,16 @@ body {
|
|||||||
.product-image {
|
.product-image {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 100%;
|
aspect-ratio: 1 / 1;
|
||||||
background: var(--primary-pink-light);
|
background: #ffffff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-image img {
|
.product-image img {
|
||||||
position: absolute;
|
display: block;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@@ -840,10 +845,8 @@ body {
|
|||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-sm);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
display: -webkit-box;
|
word-break: break-word;
|
||||||
-webkit-line-clamp: 2;
|
hyphens: auto;
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-name a {
|
.product-name a {
|
||||||
@@ -1459,7 +1462,7 @@ body {
|
|||||||
============================================ */
|
============================================ */
|
||||||
.about-hero {
|
.about-hero {
|
||||||
text-align: center;
|
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%);
|
background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1872,7 +1875,7 @@ body {
|
|||||||
============================================ */
|
============================================ */
|
||||||
.page-header {
|
.page-header {
|
||||||
background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
|
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;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1891,12 +1894,20 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
display: flex;
|
display: block !important;
|
||||||
align-items: center;
|
text-align: center !important;
|
||||||
justify-content: center;
|
|
||||||
gap: var(--spacing-sm);
|
|
||||||
margin-top: var(--spacing-md);
|
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 {
|
.breadcrumb a {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
content="Sky Art Shop Blog - Creative tips, tutorials, and inspiration"
|
content="Sky Art Shop Blog - Creative tips, tutorials, and inspiration"
|
||||||
/>
|
/>
|
||||||
<title>Blog - Sky Art Shop</title>
|
<title>Blog - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -26,11 +27,11 @@
|
|||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
href="/assets/css/modern-theme.css?v=fix33"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
href="/assets/css/mobile-fixes.css?v=20260118fix10"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -847,9 +848,7 @@
|
|||||||
Creative tips, tutorials, and inspiration for your crafting journey
|
Creative tips, tutorials, and inspiration for your crafting journey
|
||||||
</p>
|
</p>
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
<a href="/home">Home</a>
|
<a href="/home">Home</a> <span>/</span> <span>Blog</span>
|
||||||
<span>/</span>
|
|
||||||
<span>Blog</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -922,15 +921,15 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a href="#" class="social-link" id="footerFacebook" style="display:none;"><i class="bi bi-facebook"></i></a>
|
||||||
<a href="#" class="social-link"
|
<a href="#" class="social-link" id="footerInstagram" style="display:none;"><i class="bi bi-instagram"></i></a>
|
||||||
><i class="bi bi-instagram"></i
|
<a href="#" class="social-link" id="footerTwitter" style="display:none;"><i class="bi bi-twitter-x"></i></a>
|
||||||
></a>
|
<a href="#" class="social-link" id="footerYoutube" style="display:none;"><i class="bi bi-youtube"></i></a>
|
||||||
<a href="#" class="social-link"
|
<a href="#" class="social-link" id="footerPinterest" style="display:none;"><i class="bi bi-pinterest"></i></a>
|
||||||
><i class="bi bi-pinterest"></i
|
<a href="#" class="social-link" id="footerTiktok" style="display:none;"><i class="bi bi-tiktok"></i></a>
|
||||||
></a>
|
<a href="#" class="social-link" id="footerWhatsapp" style="display:none;"><i class="bi bi-whatsapp"></i></a>
|
||||||
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
|
<a href="#" class="social-link" id="footerLinkedin" style="display:none;"><i class="bi bi-linkedin"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -959,9 +958,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1101,7 +1100,7 @@
|
|||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="/assets/js/mobile-touch-fix.js"></script>
|
<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 src="/assets/js/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", async () => {
|
document.addEventListener("DOMContentLoaded", async () => {
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Checkout - Sky Art Shop" />
|
<meta name="description" content="Checkout - Sky Art Shop" />
|
||||||
<title>Checkout - Sky Art Shop</title>
|
<title>Checkout - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -21,7 +22,7 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- 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" />
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260118c" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -369,7 +370,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="phone">Phone Number</label>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -381,7 +382,7 @@
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="address"
|
id="address"
|
||||||
placeholder="123 Creative Lane"
|
placeholder="Belmopan, Cayo District"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -549,6 +550,64 @@
|
|||||||
Your creative journey starts here. Quality supplies for every
|
Your creative journey starts here. Quality supplies for every
|
||||||
artist.
|
artist.
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
@@ -573,9 +632,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -624,7 +683,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- 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/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
@@ -691,16 +750,15 @@
|
|||||||
const tax = subtotal * 0.08; // 8% tax
|
const tax = subtotal * 0.08; // 8% tax
|
||||||
const total = subtotal + shipping + tax;
|
const total = subtotal + shipping + tax;
|
||||||
|
|
||||||
document.getElementById(
|
document.getElementById("summarySubtotal").textContent =
|
||||||
"summarySubtotal"
|
`$${subtotal.toFixed(2)}`;
|
||||||
).textContent = `$${subtotal.toFixed(2)}`;
|
|
||||||
document.getElementById("summaryShipping").textContent =
|
document.getElementById("summaryShipping").textContent =
|
||||||
shipping === 0 ? "FREE" : `$${shipping.toFixed(2)}`;
|
shipping === 0 ? "FREE" : `$${shipping.toFixed(2)}`;
|
||||||
document.getElementById("summaryTax").textContent = `$${tax.toFixed(
|
document.getElementById("summaryTax").textContent = `$${tax.toFixed(
|
||||||
2
|
2,
|
||||||
)}`;
|
)}`;
|
||||||
document.getElementById("summaryTotal").textContent = `$${total.toFixed(
|
document.getElementById("summaryTotal").textContent = `$${total.toFixed(
|
||||||
2
|
2,
|
||||||
)}`;
|
)}`;
|
||||||
|
|
||||||
// Enable place order button
|
// Enable place order button
|
||||||
@@ -760,7 +818,7 @@
|
|||||||
|
|
||||||
// Show success message (in a real app, this would submit to the server)
|
// Show success message (in a real app, this would submit to the server)
|
||||||
alert(
|
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
|
// Clear cart
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
content="Contact Sky Art Shop - We'd love to hear from you"
|
content="Contact Sky Art Shop - We'd love to hear from you"
|
||||||
/>
|
/>
|
||||||
<title>Contact Us - Sky Art Shop</title>
|
<title>Contact Us - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -24,8 +25,11 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- 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" />
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="/assets/css/mobile-fixes.css?v=20260118fix10"
|
||||||
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.contact-hero {
|
.contact-hero {
|
||||||
@@ -34,14 +38,21 @@
|
|||||||
var(--primary-pink-light) 0%,
|
var(--primary-pink-light) 0%,
|
||||||
var(--primary-pink) 100%
|
var(--primary-pink) 100%
|
||||||
);
|
);
|
||||||
padding: 0;
|
padding: var(--spacing-lg) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-hero-content {
|
.contact-hero-content {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 1fr 1fr;
|
justify-content: center;
|
||||||
gap: var(--spacing-2xl);
|
|
||||||
align-items: 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 {
|
.contact-hero-text h1 {
|
||||||
@@ -53,10 +64,16 @@
|
|||||||
.contact-hero-text p {
|
.contact-hero-text p {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
|
max-width: 450px;
|
||||||
|
margin: 0 auto var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-hero-text .breadcrumb {
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-hero-image {
|
.contact-hero-image {
|
||||||
text-align: center;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-hero-image img {
|
.contact-hero-image img {
|
||||||
@@ -135,13 +152,84 @@
|
|||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.contact-hero-content {
|
.contact-hero-content {
|
||||||
grid-template-columns: 1fr;
|
flex-direction: column;
|
||||||
text-align: center;
|
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 {
|
.contact-methods {
|
||||||
grid-template-columns: 1fr;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -199,6 +287,9 @@
|
|||||||
Have a question, suggestion, or just want to say hello? We'd
|
Have a question, suggestion, or just want to say hello? We'd
|
||||||
love to hear from you! Our team is here to help.
|
love to hear from you! Our team is here to help.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<a href="/home">Home</a> <span>/</span> <span>Contact</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="contact-hero-image"
|
class="contact-hero-image"
|
||||||
@@ -207,7 +298,7 @@
|
|||||||
<img
|
<img
|
||||||
src="/uploads/get-in-touch-1768630843511-885498786.png"
|
src="/uploads/get-in-touch-1768630843511-885498786.png"
|
||||||
alt="Contact Us"
|
alt="Contact Us"
|
||||||
style="width: 50%; height: auto; max-width: 300px"
|
style="width: 100%; height: auto; max-width: 200px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -224,8 +315,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<h3>Email Us</h3>
|
<h3>Email Us</h3>
|
||||||
<p>Send us a message anytime</p>
|
<p>Send us a message anytime</p>
|
||||||
<a href="mailto:hello@skyartshop.com" id="contactEmailLink"
|
<a href="mailto:skyartshop12.11@gmail.com" id="contactEmailLink"
|
||||||
>hello@skyartshop.com</a
|
>skyartshop12.11@gmail.com</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-method">
|
<div class="contact-method">
|
||||||
@@ -235,7 +326,7 @@
|
|||||||
<h3>Call Us</h3>
|
<h3>Call Us</h3>
|
||||||
<p id="contactBusinessHoursShort">Mon-Fri, 9am-5pm EST</p>
|
<p id="contactBusinessHoursShort">Mon-Fri, 9am-5pm EST</p>
|
||||||
<a href="tel:+15551234567" id="contactPhoneLink"
|
<a href="tel:+15551234567" id="contactPhoneLink"
|
||||||
>(555) 123-4567</a
|
>(501) 608-0409</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-method">
|
<div class="contact-method">
|
||||||
@@ -244,7 +335,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<h3>Visit Us</h3>
|
<h3>Visit Us</h3>
|
||||||
<p id="contactAddressDisplay">
|
<p id="contactAddressDisplay">
|
||||||
123 Creative Lane<br />Artville, CA 90210
|
Belmopan, Cayo District<br />Artville, CA 90210
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -295,26 +386,89 @@
|
|||||||
<h4>Follow Us</h4>
|
<h4>Follow Us</h4>
|
||||||
<div
|
<div
|
||||||
class="footer-social"
|
class="footer-social"
|
||||||
|
id="contactSocialLinks"
|
||||||
style="margin-top: var(--spacing-sm)"
|
style="margin-top: var(--spacing-sm)"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="social-link"
|
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
|
><i class="bi bi-facebook"></i
|
||||||
></a>
|
></a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="social-link"
|
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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -374,33 +528,34 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Map -->
|
<!-- Map -->
|
||||||
<div class="map-section">
|
<div class="map-section" style="position: relative">
|
||||||
<div class="map-placeholder">
|
<!-- OpenStreetMap Embed - No API key required -->
|
||||||
<div class="map-image">
|
<iframe
|
||||||
<img
|
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"
|
||||||
src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1200&q=80"
|
width="100%"
|
||||||
alt="Los Angeles City View"
|
height="100%"
|
||||||
/>
|
style="border: 0"
|
||||||
<div class="map-overlay">
|
allowfullscreen=""
|
||||||
<div class="map-pin">
|
loading="lazy"
|
||||||
<i class="bi bi-geo-alt-fill"></i>
|
title="Sky Art Shop Location - Belmopan, Belize"
|
||||||
</div>
|
>
|
||||||
<div class="map-info">
|
</iframe>
|
||||||
<h4>Sky Art Shop</h4>
|
<a
|
||||||
<p>123 Creative Lane</p>
|
href="https://www.google.com/maps/search/Belmopan,+Belize"
|
||||||
<p>Los Angeles, CA 90012</p>
|
target="_blank"
|
||||||
<a
|
rel="noopener noreferrer"
|
||||||
href="https://maps.google.com/?q=Los+Angeles+CA"
|
style="
|
||||||
target="_blank"
|
display: block;
|
||||||
rel="noopener"
|
text-align: center;
|
||||||
class="btn btn-sm btn-primary"
|
padding: 12px;
|
||||||
>
|
background: var(--primary-pink-light);
|
||||||
<i class="bi bi-map"></i> Open in Google Maps
|
color: var(--text-primary);
|
||||||
</a>
|
text-decoration: none;
|
||||||
</div>
|
font-weight: 500;
|
||||||
</div>
|
"
|
||||||
</div>
|
>
|
||||||
</div>
|
<i class="bi bi-geo-alt"></i> Open in Google Maps
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -423,15 +578,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -460,9 +663,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -511,7 +714,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- 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/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Load contact page data from API
|
// 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
|
// Load page data on DOMContentLoaded
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
loadContactPageData();
|
loadContactPageData();
|
||||||
|
loadContactSocialLinks();
|
||||||
});
|
});
|
||||||
|
|
||||||
document
|
document
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>FAQ - Sky Art Shop</title>
|
<title>FAQ - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
content="Frequently Asked Questions - Sky Art Shop"
|
content="Frequently Asked Questions - Sky Art Shop"
|
||||||
/>
|
/>
|
||||||
<title>FAQ - Sky Art Shop</title>
|
<title>FAQ - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -24,7 +25,7 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- 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" />
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260118c" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -206,15 +207,15 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a href="#" class="social-link" id="footerFacebook" style="display:none;"><i class="bi bi-facebook"></i></a>
|
||||||
<a href="#" class="social-link"
|
<a href="#" class="social-link" id="footerInstagram" style="display:none;"><i class="bi bi-instagram"></i></a>
|
||||||
><i class="bi bi-instagram"></i
|
<a href="#" class="social-link" id="footerTwitter" style="display:none;"><i class="bi bi-twitter-x"></i></a>
|
||||||
></a>
|
<a href="#" class="social-link" id="footerYoutube" style="display:none;"><i class="bi bi-youtube"></i></a>
|
||||||
<a href="#" class="social-link"
|
<a href="#" class="social-link" id="footerPinterest" style="display:none;"><i class="bi bi-pinterest"></i></a>
|
||||||
><i class="bi bi-pinterest"></i
|
<a href="#" class="social-link" id="footerTiktok" style="display:none;"><i class="bi bi-tiktok"></i></a>
|
||||||
></a>
|
<a href="#" class="social-link" id="footerWhatsapp" style="display:none;"><i class="bi bi-whatsapp"></i></a>
|
||||||
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
|
<a href="#" class="social-link" id="footerLinkedin" style="display:none;"><i class="bi bi-linkedin"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -243,9 +244,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -296,7 +297,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- 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/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Load FAQ page data from API
|
// Load FAQ page data from API
|
||||||
|
|||||||
BIN
website/public/favicon.png
Normal file
BIN
website/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -8,6 +8,7 @@
|
|||||||
content="Sky Art Shop - Your one-stop shop for scrapbooking, journaling, cardmaking, and collaging stationery."
|
content="Sky Art Shop - Your one-stop shop for scrapbooking, journaling, cardmaking, and collaging stationery."
|
||||||
/>
|
/>
|
||||||
<title>Sky Art Shop - Creative Stationery & Crafting Supplies</title>
|
<title>Sky Art Shop - Creative Stationery & Crafting Supplies</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -24,10 +25,7 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
|
||||||
rel="stylesheet"
|
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
|
||||||
/>
|
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
||||||
@@ -170,6 +168,71 @@
|
|||||||
grid-template-columns: 1fr;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -398,15 +461,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -435,9 +546,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -536,7 +647,7 @@
|
|||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="/assets/js/mobile-touch-fix.js"></script>
|
<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 src="/assets/js/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Homepage settings cache
|
// Homepage settings cache
|
||||||
@@ -567,7 +678,7 @@
|
|||||||
SkyArtShop.initSlider();
|
SkyArtShop.initSlider();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load products - only show featured products (max 4)
|
// Load products - show all featured products (horizontal scroll)
|
||||||
const featuredProducts = await API.loadFeaturedProducts();
|
const featuredProducts = await API.loadFeaturedProducts();
|
||||||
const featuredGrid = document.getElementById("featuredProductsGrid");
|
const featuredGrid = document.getElementById("featuredProductsGrid");
|
||||||
|
|
||||||
@@ -578,8 +689,8 @@
|
|||||||
titleEl.textContent = homepageSettings.featuredProducts.title;
|
titleEl.textContent = homepageSettings.featuredProducts.title;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Store products for detail view - only featured products, max 4
|
// Store products for detail view - show all featured products
|
||||||
const homepageProducts = featuredProducts.slice(0, 4);
|
const homepageProducts = featuredProducts;
|
||||||
|
|
||||||
if (featuredGrid) {
|
if (featuredGrid) {
|
||||||
if (homepageProducts.length > 0) {
|
if (homepageProducts.length > 0) {
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Sky Art Shop</title>
|
<title>Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<script>
|
<script>
|
||||||
// Redirect to React app
|
// Redirect to React app
|
||||||
window.location.href = "/app/";
|
window.location.href = "/app/";
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Cat Logo Preview</title>
|
<title>Cat Logo Preview</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: "Inter", sans-serif;
|
font-family: "Inter", sans-serif;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title id="pageTitle">Loading... - Sky Art Shop</title>
|
<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" />
|
<meta name="description" id="pageDescription" content="Sky Art Shop" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
content="Portfolio - Sky Art Shop creative projects and inspiration"
|
content="Portfolio - Sky Art Shop creative projects and inspiration"
|
||||||
/>
|
/>
|
||||||
<title>Portfolio - Sky Art Shop</title>
|
<title>Portfolio - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -26,11 +27,11 @@
|
|||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
href="/assets/css/modern-theme.css?v=fix33"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
href="/assets/css/mobile-fixes.css?v=20260118fix10"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -404,9 +405,7 @@
|
|||||||
masterpiece
|
masterpiece
|
||||||
</p>
|
</p>
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
<a href="/home">Home</a>
|
<a href="/home">Home</a> <span>/</span> <span>Portfolio</span>
|
||||||
<span>/</span>
|
|
||||||
<span>Portfolio</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -523,15 +522,15 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a href="#" class="social-link" id="footerFacebook" style="display:none;"><i class="bi bi-facebook"></i></a>
|
||||||
<a href="#" class="social-link"
|
<a href="#" class="social-link" id="footerInstagram" style="display:none;"><i class="bi bi-instagram"></i></a>
|
||||||
><i class="bi bi-instagram"></i
|
<a href="#" class="social-link" id="footerTwitter" style="display:none;"><i class="bi bi-twitter-x"></i></a>
|
||||||
></a>
|
<a href="#" class="social-link" id="footerYoutube" style="display:none;"><i class="bi bi-youtube"></i></a>
|
||||||
<a href="#" class="social-link"
|
<a href="#" class="social-link" id="footerPinterest" style="display:none;"><i class="bi bi-pinterest"></i></a>
|
||||||
><i class="bi bi-pinterest"></i
|
<a href="#" class="social-link" id="footerTiktok" style="display:none;"><i class="bi bi-tiktok"></i></a>
|
||||||
></a>
|
<a href="#" class="social-link" id="footerWhatsapp" style="display:none;"><i class="bi bi-whatsapp"></i></a>
|
||||||
<a href="#" class="social-link"><i class="bi bi-youtube"></i></a>
|
<a href="#" class="social-link" id="footerLinkedin" style="display:none;"><i class="bi bi-linkedin"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -560,9 +559,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -612,7 +611,7 @@
|
|||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="/assets/js/mobile-touch-fix.js"></script>
|
<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 src="/assets/js/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
let allProjects = [];
|
let allProjects = [];
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Privacy Policy - Sky Art Shop</title>
|
<title>Privacy Policy - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Privacy Policy - Sky Art Shop" />
|
<meta name="description" content="Privacy Policy - Sky Art Shop" />
|
||||||
<title>Privacy Policy - Sky Art Shop</title>
|
<title>Privacy Policy - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -21,25 +22,26 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
|
||||||
rel="stylesheet"
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=fix32" />
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/assets/css/mobile-fixes.css?v=20260118editor"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.policy-container {
|
.policy-container {
|
||||||
max-width: 900px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: var(--bg-white);
|
background: var(--bg-white);
|
||||||
padding: var(--spacing-2xl);
|
padding: 50px 60px 50px 100px !important;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.policy-container {
|
||||||
|
padding: 24px 24px !important;
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.policy-container h2 {
|
.policy-container h2 {
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
@@ -183,15 +185,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -220,9 +270,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -273,7 +323,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- 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/customer-auth.js"></script>
|
||||||
<script src="/assets/js/accessibility.js"></script>
|
<script src="/assets/js/accessibility.js"></script>
|
||||||
<script>
|
<script>
|
||||||
@@ -358,8 +408,8 @@
|
|||||||
<p>${escapeHtml(box.message || "If you have any questions about this Privacy Policy, please contact us:")}</p>
|
<p>${escapeHtml(box.message || "If you have any questions about this Privacy Policy, please contact us:")}</p>
|
||||||
<div style="margin-top: var(--spacing-lg)">
|
<div style="margin-top: var(--spacing-lg)">
|
||||||
<p><strong>Email:</strong> ${escapeHtml(box.email || "privacy@skyartshop.com")}</p>
|
<p><strong>Email:</strong> ${escapeHtml(box.email || "privacy@skyartshop.com")}</p>
|
||||||
<p><strong>Phone:</strong> ${escapeHtml(box.phone || "(555) 123-4567")}</p>
|
<p><strong>Phone:</strong> ${escapeHtml(box.phone || "(501) 608-0409")}</p>
|
||||||
<p><strong>Mail:</strong> ${escapeHtml(box.address || "Sky Art Shop, 123 Creative Lane, City, ST 12345")}</p>
|
<p><strong>Mail:</strong> ${escapeHtml(box.address || "Sky Art Shop, Belmopan, Cayo District, City, ST 12345")}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -372,8 +422,8 @@
|
|||||||
<p>If you have any questions about this Privacy Policy, please contact us:</p>
|
<p>If you have any questions about this Privacy Policy, please contact us:</p>
|
||||||
<div style="margin-top: var(--spacing-lg)">
|
<div style="margin-top: var(--spacing-lg)">
|
||||||
<p><strong>Email:</strong> privacy@skyartshop.com</p>
|
<p><strong>Email:</strong> privacy@skyartshop.com</p>
|
||||||
<p><strong>Phone:</strong> (555) 123-4567</p>
|
<p><strong>Phone:</strong> (501) 608-0409</p>
|
||||||
<p><strong>Mail:</strong> Sky Art Shop, 123 Creative Lane, City, ST 12345</p>
|
<p><strong>Mail:</strong> Sky Art Shop, Belmopan, Cayo District, City, ST 12345</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -435,8 +485,8 @@
|
|||||||
<p>If you have any questions about this Privacy Policy, please contact us:</p>
|
<p>If you have any questions about this Privacy Policy, please contact us:</p>
|
||||||
<div style="margin-top: var(--spacing-lg)">
|
<div style="margin-top: var(--spacing-lg)">
|
||||||
<p><strong>Email:</strong> privacy@skyartshop.com</p>
|
<p><strong>Email:</strong> privacy@skyartshop.com</p>
|
||||||
<p><strong>Phone:</strong> (555) 123-4567</p>
|
<p><strong>Phone:</strong> (501) 608-0409</p>
|
||||||
<p><strong>Mail:</strong> Sky Art Shop, 123 Creative Lane, City, ST 12345</p>
|
<p><strong>Mail:</strong> Sky Art Shop, Belmopan, Cayo District, City, ST 12345</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Product Details - Sky Art Shop" />
|
<meta name="description" content="Product Details - Sky Art Shop" />
|
||||||
<title>Product - Sky Art Shop</title>
|
<title>Product - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -21,14 +22,8 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix34" />
|
||||||
rel="stylesheet"
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260119fix3" />
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Product page breadcrumb - force single line */
|
/* Product page breadcrumb - force single line */
|
||||||
@@ -66,6 +61,64 @@
|
|||||||
gap: 3px !important;
|
gap: 3px !important;
|
||||||
margin-bottom: 12px !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 {
|
.product-detail {
|
||||||
@@ -529,6 +582,34 @@
|
|||||||
.product-gallery {
|
.product-gallery {
|
||||||
position: static;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -765,15 +846,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -802,9 +931,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -854,7 +983,7 @@
|
|||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="/assets/js/mobile-touch-fix.js"></script>
|
<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 src="/assets/js/customer-auth.js?v=20260116c"></script>
|
||||||
<script>
|
<script>
|
||||||
let currentProduct = null;
|
let currentProduct = null;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Returns & Refunds - Sky Art Shop</title>
|
<title>Returns & Refunds - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
content="Returns & Refunds Policy - Sky Art Shop"
|
content="Returns & Refunds Policy - Sky Art Shop"
|
||||||
/>
|
/>
|
||||||
<title>Returns & Refunds - Sky Art Shop</title>
|
<title>Returns & Refunds - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -24,25 +25,26 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
|
||||||
rel="stylesheet"
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=fix32" />
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/assets/css/mobile-fixes.css?v=20260118editor"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.policy-container {
|
.policy-container {
|
||||||
max-width: 900px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: var(--bg-white);
|
background: var(--bg-white);
|
||||||
padding: var(--spacing-2xl);
|
padding: 50px 60px 50px 100px !important;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.policy-container {
|
||||||
|
padding: 24px 24px !important;
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.policy-container h2 {
|
.policy-container h2 {
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
@@ -197,15 +199,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -234,9 +284,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -287,7 +337,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- 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/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Load returns page data from API
|
// Load returns page data from API
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Cart/Wishlist Safeguard Tests</title>
|
<title>Cart/Wishlist Safeguard Tests</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Shipping Information - Sky Art Shop</title>
|
<title>Shipping Information - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Shipping Information - Sky Art Shop" />
|
<meta name="description" content="Shipping Information - Sky Art Shop" />
|
||||||
<title>Shipping Information - Sky Art Shop</title>
|
<title>Shipping Information - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -21,25 +22,26 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix33" />
|
||||||
rel="stylesheet"
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=fix32" />
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/assets/css/mobile-fixes.css?v=20260118editor"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.policy-container {
|
.policy-container {
|
||||||
max-width: 900px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: var(--bg-white);
|
background: var(--bg-white);
|
||||||
padding: var(--spacing-2xl);
|
padding: 50px 60px 50px 100px !important;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.policy-container {
|
||||||
|
padding: 24px 24px !important;
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.policy-container h2 {
|
.policy-container h2 {
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
@@ -236,15 +238,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -273,9 +323,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -326,7 +376,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- 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/customer-auth.js"></script>
|
||||||
<script src="/assets/js/accessibility.js"></script>
|
<script src="/assets/js/accessibility.js"></script>
|
||||||
<script>
|
<script>
|
||||||
@@ -341,7 +391,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const pageData = data.pagedata || {};
|
const pageData = data.page?.pagedata || data.pagedata || {};
|
||||||
|
|
||||||
// Update header if data exists
|
// Update header if data exists
|
||||||
if (pageData.header) {
|
if (pageData.header) {
|
||||||
@@ -365,13 +415,23 @@
|
|||||||
sectionHtml += `<h2>${escapeHtml(section.title)}</h2>`;
|
sectionHtml += `<h2>${escapeHtml(section.title)}</h2>`;
|
||||||
}
|
}
|
||||||
if (section.content) {
|
if (section.content) {
|
||||||
// Split content by newlines and render as paragraphs
|
// Check if content already has HTML tags
|
||||||
const paragraphs = section.content
|
if (
|
||||||
.split("\n")
|
section.content.includes("<p>") ||
|
||||||
.filter((p) => p.trim());
|
section.content.includes("<br") ||
|
||||||
paragraphs.forEach((p) => {
|
section.content.includes("<ul>")
|
||||||
sectionHtml += `<p>${escapeHtml(p)}</p>`;
|
) {
|
||||||
});
|
// 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) {
|
if (section.listItems && section.listItems.length > 0) {
|
||||||
sectionHtml +=
|
sectionHtml +=
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Shop all products - Sky Art Shop" />
|
<meta name="description" content="Shop all products - Sky Art Shop" />
|
||||||
<title>Shop - Sky Art Shop</title>
|
<title>Shop - Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@@ -21,14 +22,163 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modern Theme CSS -->
|
<!-- Modern Theme CSS -->
|
||||||
<link
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix34" />
|
||||||
rel="stylesheet"
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260119fix1" />
|
||||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
<style>
|
||||||
/>
|
/* Mobile & Tablet: Shop page layout fixes */
|
||||||
<link
|
@media (max-width: 992px) {
|
||||||
rel="stylesheet"
|
/* Container - reduce padding on mobile */
|
||||||
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
@@ -82,9 +232,7 @@
|
|||||||
Explore our complete collection of stationery and crafting supplies
|
Explore our complete collection of stationery and crafting supplies
|
||||||
</p>
|
</p>
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
<a href="/home">Home</a>
|
<a href="/home">Home</a> <span>/</span> <span>Shop</span>
|
||||||
<span>/</span>
|
|
||||||
<span>Shop</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -96,8 +244,7 @@
|
|||||||
<!-- Sidebar Filters -->
|
<!-- Sidebar Filters -->
|
||||||
<aside class="shop-sidebar">
|
<aside class="shop-sidebar">
|
||||||
<!-- Search -->
|
<!-- Search -->
|
||||||
<div class="filter-card">
|
<div class="filter-card" id="searchCard">
|
||||||
<h3 class="filter-title">Search</h3>
|
|
||||||
<div class="search-box" style="position: relative">
|
<div class="search-box" style="position: relative">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -106,8 +253,8 @@
|
|||||||
style="
|
style="
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 40px 12px 16px;
|
padding: 12px 40px 12px 16px;
|
||||||
border: 2px solid var(--border-light);
|
border: 2px solid #ddd;
|
||||||
border-radius: var(--radius-md);
|
border-radius: 8px;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
@@ -118,59 +265,139 @@
|
|||||||
right: 14px;
|
right: 14px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: var(--text-light);
|
color: #888;
|
||||||
"
|
"
|
||||||
></i>
|
></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Categories -->
|
<!-- Mobile Filter Dropdowns - Native SELECT elements -->
|
||||||
<div class="filter-card">
|
<div
|
||||||
<h3 class="filter-title">Categories</h3>
|
class="mobile-filter-row"
|
||||||
<div class="filter-options" id="categoryFilters">
|
id="mobileFilters"
|
||||||
<label class="filter-option">
|
style="
|
||||||
<input type="checkbox" value="all" checked />
|
display: flex;
|
||||||
<span>All Products</span>
|
flex-wrap: wrap;
|
||||||
</label>
|
gap: 8px;
|
||||||
<!-- Categories loaded via JavaScript -->
|
margin-top: 12px;
|
||||||
</div>
|
"
|
||||||
|
>
|
||||||
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<!-- Price Range -->
|
<!-- Desktop Filter Cards (hidden on mobile via CSS) -->
|
||||||
<div class="filter-card">
|
<div class="desktop-filters" id="desktopFilters">
|
||||||
<h3 class="filter-title">Price Range</h3>
|
<!-- Categories -->
|
||||||
<div class="filter-options">
|
<div class="filter-card" id="filterCard1">
|
||||||
<label class="filter-option">
|
<h3 class="filter-title">Categories</h3>
|
||||||
<input type="checkbox" name="price" value="0-10" />
|
<div class="filter-options" id="filterOptions1">
|
||||||
<span>Under $10</span>
|
<label class="filter-option">
|
||||||
</label>
|
<input type="checkbox" value="all" checked />
|
||||||
<label class="filter-option">
|
<span>All Products</span>
|
||||||
<input type="checkbox" name="price" value="10-25" />
|
</label>
|
||||||
<span>$10 - $25</span>
|
<!-- Categories loaded via JavaScript -->
|
||||||
</label>
|
</div>
|
||||||
<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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Availability -->
|
<!-- Price Range -->
|
||||||
<div class="filter-card">
|
<div class="filter-card" id="filterCard2">
|
||||||
<h3 class="filter-title">Availability</h3>
|
<h3 class="filter-title">Price Range</h3>
|
||||||
<div class="filter-options">
|
<div class="filter-options" id="filterOptions2">
|
||||||
<label class="filter-option">
|
<label class="filter-option">
|
||||||
<input type="checkbox" name="stock" value="in-stock" />
|
<input type="checkbox" name="price" value="0-10" />
|
||||||
<span>In Stock</span>
|
<span>Under $10</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="filter-option">
|
<label class="filter-option">
|
||||||
<input type="checkbox" name="stock" value="featured" />
|
<input type="checkbox" name="price" value="10-25" />
|
||||||
<span>Featured</span>
|
<span>$10 - $25</span>
|
||||||
</label>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
@@ -221,15 +448,63 @@
|
|||||||
collaging stationery. Quality products for all your creative
|
collaging stationery. Quality products for all your creative
|
||||||
needs.
|
needs.
|
||||||
</p>
|
</p>
|
||||||
<div class="footer-social">
|
<div class="footer-social" id="footerSocialLinks">
|
||||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
<a
|
||||||
<a href="#" class="social-link"
|
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
|
><i class="bi bi-instagram"></i
|
||||||
></a>
|
></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
|
><i class="bi bi-pinterest"></i
|
||||||
></a>
|
></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -258,9 +533,9 @@
|
|||||||
<div class="footer-column">
|
<div class="footer-column">
|
||||||
<h4>Contact Us</h4>
|
<h4>Contact Us</h4>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
||||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
||||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -310,7 +585,7 @@
|
|||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="/assets/js/mobile-touch-fix.js"></script>
|
<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 src="/assets/js/customer-auth.js"></script>
|
||||||
<script>
|
<script>
|
||||||
let allProducts = [];
|
let allProducts = [];
|
||||||
@@ -323,17 +598,32 @@
|
|||||||
|
|
||||||
// Load categories
|
// Load categories
|
||||||
const categories = await API.loadCategories();
|
const categories = await API.loadCategories();
|
||||||
const categoryFilters = document.getElementById("categoryFilters");
|
const categoryFilters = document.getElementById("filterOptions1");
|
||||||
if (categoryFilters && categories.length > 0) {
|
const mobileCategorySelect = document.getElementById("categoryFilter");
|
||||||
categories.forEach((cat) => {
|
|
||||||
const label = document.createElement("label");
|
if (categories.length > 0) {
|
||||||
label.className = "filter-option";
|
// Populate desktop checkboxes
|
||||||
label.innerHTML = `
|
if (categoryFilters) {
|
||||||
<input type="checkbox" name="category" value="${cat}">
|
categories.forEach((cat) => {
|
||||||
<span>${cat}</span>
|
const label = document.createElement("label");
|
||||||
`;
|
label.className = "filter-option";
|
||||||
categoryFilters.appendChild(label);
|
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
|
// Render products
|
||||||
@@ -342,6 +632,9 @@
|
|||||||
// Setup filters
|
// Setup filters
|
||||||
setupFilters();
|
setupFilters();
|
||||||
|
|
||||||
|
// Initialize collapsible filters AFTER everything is loaded
|
||||||
|
setTimeout(initCollapsibleFilters, 200);
|
||||||
|
|
||||||
// Setup product card click to navigate to product page
|
// Setup product card click to navigate to product page
|
||||||
document.addEventListener("click", (e) => {
|
document.addEventListener("click", (e) => {
|
||||||
const card = e.target.closest(".product-card");
|
const card = e.target.closest(".product-card");
|
||||||
@@ -396,21 +689,36 @@
|
|||||||
searchTimeout = setTimeout(applyFilters, 300);
|
searchTimeout = setTimeout(applyFilters, 300);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Category checkboxes
|
// Category checkboxes (desktop)
|
||||||
document.querySelectorAll('input[name="category"]').forEach((cb) => {
|
document.querySelectorAll('input[name="category"]').forEach((cb) => {
|
||||||
cb.addEventListener("change", applyFilters);
|
cb.addEventListener("change", applyFilters);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Price checkboxes
|
// Price checkboxes (desktop)
|
||||||
document.querySelectorAll('input[name="price"]').forEach((cb) => {
|
document.querySelectorAll('input[name="price"]').forEach((cb) => {
|
||||||
cb.addEventListener("change", applyFilters);
|
cb.addEventListener("change", applyFilters);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Stock checkboxes
|
// Stock checkboxes (desktop)
|
||||||
document.querySelectorAll('input[name="stock"]').forEach((cb) => {
|
document.querySelectorAll('input[name="stock"]').forEach((cb) => {
|
||||||
cb.addEventListener("change", applyFilters);
|
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
|
// Sort
|
||||||
document
|
document
|
||||||
.getElementById("sortSelect")
|
.getElementById("sortSelect")
|
||||||
@@ -421,15 +729,37 @@
|
|||||||
const searchTerm = document
|
const searchTerm = document
|
||||||
.getElementById("searchInput")
|
.getElementById("searchInput")
|
||||||
.value.toLowerCase();
|
.value.toLowerCase();
|
||||||
const selectedCategories = Array.from(
|
|
||||||
|
// Get desktop checkbox values
|
||||||
|
let selectedCategories = Array.from(
|
||||||
document.querySelectorAll('input[name="category"]:checked'),
|
document.querySelectorAll('input[name="category"]:checked'),
|
||||||
).map((cb) => cb.value);
|
).map((cb) => cb.value);
|
||||||
const selectedPrices = Array.from(
|
let selectedPrices = Array.from(
|
||||||
document.querySelectorAll('input[name="price"]:checked'),
|
document.querySelectorAll('input[name="price"]:checked'),
|
||||||
).map((cb) => cb.value);
|
).map((cb) => cb.value);
|
||||||
const stockFilters = Array.from(
|
let stockFilters = Array.from(
|
||||||
document.querySelectorAll('input[name="stock"]:checked'),
|
document.querySelectorAll('input[name="stock"]:checked'),
|
||||||
).map((cb) => cb.value);
|
).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;
|
const sortBy = document.getElementById("sortSelect").value;
|
||||||
|
|
||||||
filteredProducts = allProducts.filter((product) => {
|
filteredProducts = allProducts.filter((product) => {
|
||||||
@@ -491,65 +821,79 @@
|
|||||||
renderProducts();
|
renderProducts();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Collapsible Filters for Mobile/Tablet
|
// Collapsible Filters for Mobile/Tablet - SIMPLE VERSION
|
||||||
function initCollapsibleFilters() {
|
function initCollapsibleFilters() {
|
||||||
const isMobile = window.innerWidth <= 992;
|
if (window.innerWidth > 992) return; // Only for mobile/tablet
|
||||||
|
|
||||||
const filterCards = document.querySelectorAll(".filter-card");
|
const filterCards = document.querySelectorAll(".filter-card");
|
||||||
|
|
||||||
filterCards.forEach((card, index) => {
|
filterCards.forEach((card, index) => {
|
||||||
// Skip the search filter (first one)
|
if (index === 0) return; // Skip search
|
||||||
if (index === 0) return;
|
|
||||||
|
|
||||||
const title = card.querySelector(".filter-title");
|
const title = card.querySelector(".filter-title");
|
||||||
if (!title) return;
|
const options = card.querySelector(".filter-options");
|
||||||
|
|
||||||
// Start collapsed on mobile (except search)
|
if (!title || !options) return;
|
||||||
if (isMobile) {
|
|
||||||
card.classList.add("collapsed");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle on click
|
// Initially hide all dropdowns
|
||||||
title.addEventListener("click", (e) => {
|
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();
|
e.stopPropagation();
|
||||||
|
|
||||||
// Close other open dropdowns first
|
// Check current state
|
||||||
filterCards.forEach((otherCard, otherIndex) => {
|
const isHidden = options.style.display === "none";
|
||||||
if (otherIndex !== 0 && otherCard !== card) {
|
|
||||||
otherCard.classList.add("collapsed");
|
// 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
|
// Close when clicking outside
|
||||||
document.addEventListener("click", (e) => {
|
document.onclick = function (e) {
|
||||||
if (window.innerWidth <= 992 && !e.target.closest(".filter-card")) {
|
if (!e.target.closest(".filter-card")) {
|
||||||
filterCards.forEach((card, index) => {
|
filterCards.forEach((card, index) => {
|
||||||
if (index > 0) {
|
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
|
// Run after page loads
|
||||||
document.addEventListener("DOMContentLoaded", initCollapsibleFilters);
|
window.onload = function () {
|
||||||
|
setTimeout(initCollapsibleFilters, 500);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<script src="/assets/js/accessibility.js"></script>
|
<script src="/assets/js/accessibility.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Sign In | Sky Art Shop</title>
|
<title>Sign In | Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Create Account | Sky Art Shop</title>
|
<title>Create Account | Sky Art Shop</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Sticky Test - Inline CSS</title>
|
<title>Sticky Test - Inline CSS</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<style>
|
<style>
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Sticky Navbar Test</title>
|
<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/navbar.css?v=1768450104" />
|
||||||
<link rel="stylesheet" href="/assets/css/page-overrides.css?v=1768450104" />
|
<link rel="stylesheet" href="/assets/css/page-overrides.css?v=1768450104" />
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Sticky Test</title>
|
<title>Sticky Test</title>
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user