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

Updatweb

Browse Source
This commit is contained in:
Local Server
2025-12-19 20:44:46 -06:00
parent 701f799cde
commit e4b3de4a46
113 changed files with 16673 additions and 2174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
website/admin/css/admin-style.css
View File

@@ -378,32 +378,178 @@ body {
}
/* Responsive Design */
/* Mobile First - Base Styles */
@media (max-width: 768px) {
:root {
--sidebar-width: 0px;
}
.sidebar {
transform: translateX(-100%);
width: 280px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar.active {
transform: translateX(0);
}
/* Backdrop for mobile menu */
.sidebar.active::before {
content: '';
position: fixed;
top: 0;
left: 280px;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.main-content {
margin-left: 0;
padding: 15px;
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
display: block;
position: fixed;
top: 15px;
left: 15px;
z-index: 1001;
background: var(--primary-gradient);
color: white;
border: none;
border-radius: 8px;
width: 44px;
height: 44px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.mobile-menu-toggle:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
.top-bar {
flex-direction: column;
gap: 15px;
margin-top: 50px;
padding: 15px;
}
.top-bar h1 {
font-size: 1.5rem;
}
.actions-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.search-box {
max-width: 100%;
}
/* Table Responsive */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
min-width: 600px;
}
/* Cards Stack on Mobile */
.stats-grid {
grid-template-columns: 1fr !important;
}
/* Modal Adjustments */
.modal-dialog {
margin: 10px;
}
.modal-content {
max-height: calc(100vh - 20px);
overflow-y: auto;
}
/* Form Elements Full Width */
.form-control,
.btn {
font-size: 16px; /* Prevent iOS zoom */
}
/* Hide certain columns on mobile */
.hide-mobile {
display: none !important;
}
}
/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
:root {
--sidebar-width: 220px;
}
.sidebar {
width: 220px;
padding: 15px;
}
.sidebar-brand {
font-size: 1.3rem;
}
.sidebar-menu a {
padding: 10px 12px;
font-size: 0.9rem;
}
.main-content {
padding: 20px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.mobile-menu-toggle {
display: none;
}
}
/* Desktop Styles */
@media (min-width: 1025px) {
.mobile-menu-toggle {
display: none;
}
.sidebar {
width: var(--sidebar-width);
}
/* Larger cards grid */
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
}
/* Large Desktop */
@media (min-width: 1400px) {
:root {
--sidebar-width: 280px;
}
.container-large {
max-width: 1320px;
}
}
/* Utility Classes */

242
website/admin/dashboard-example.html Normal file
View File

@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Sky Art Shop - Admin Dashboard" />
<title>Dashboard - Sky Art Shop Admin</title>
<!-- Bootstrap CSS -->
<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.0/font/bootstrap-icons.css"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/admin-style.css" />
<link rel="stylesheet" href="../assets/css/utilities.css" />
</head>
<body>
<!-- Skip to main content link for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Sidebar -->
<aside class="sidebar" role="navigation" aria-label="Admin navigation">
<div class="sidebar-brand">
<i class="bi bi-shop" aria-hidden="true"></i> SkyArt Admin
</div>
<ul class="sidebar-menu">
<li>
<a href="dashboard.html" class="active" aria-current="page">
<i class="bi bi-speedometer2" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="products.html">
<i class="bi bi-box-seam" aria-hidden="true"></i>
<span>Products</span>
</a>
</li>
<li>
<a href="portfolio.html">
<i class="bi bi-images" aria-hidden="true"></i>
<span>Portfolio</span>
</a>
</li>
<li>
<a href="blog.html">
<i class="bi bi-file-text" aria-hidden="true"></i>
<span>Blog</span>
</a>
</li>
<li>
<a href="pages.html">
<i class="bi bi-file-earmark" aria-hidden="true"></i>
<span>Pages</span>
</a>
</li>
<li>
<a href="users.html">
<i class="bi bi-people" aria-hidden="true"></i>
<span>Users</span>
</a>
</li>
<li>
<a href="settings.html">
<i class="bi bi-gear" aria-hidden="true"></i>
<span>Settings</span>
</a>
</li>
<li>
<a href="#" onclick="logout(); return false;">
<i class="bi bi-box-arrow-right" aria-hidden="true"></i>
<span>Logout</span>
</a>
</li>
</ul>
</aside>
<!-- Main Content -->
<main class="main-content" id="main-content">
<header class="top-bar">
<div>
<h1>Dashboard</h1>
<p class="text-muted">Welcome back! Here's what's happening.</p>
</div>
<div>
<span id="userGreeting" aria-live="polite"></span>
</div>
</header>
<!-- Stats Grid -->
<section class="stats-grid" aria-label="Statistics overview">
<article class="stat-card">
<div class="stat-icon" style="background: #667eea" aria-hidden="true">
<i class="bi bi-box-seam"></i>
</div>
<div>
<h3>Products</h3>
<p
class="stat-value"
id="totalProducts"
aria-label="Total products"
>
<span class="spinner spinner-small"></span>
</p>
</div>
</article>
<article class="stat-card">
<div class="stat-icon" style="background: #28a745" aria-hidden="true">
<i class="bi bi-images"></i>
</div>
<div>
<h3>Portfolio Items</h3>
<p
class="stat-value"
id="totalPortfolio"
aria-label="Total portfolio items"
>
<span class="spinner spinner-small"></span>
</p>
</div>
</article>
<article class="stat-card">
<div class="stat-icon" style="background: #17a2b8" aria-hidden="true">
<i class="bi bi-file-text"></i>
</div>
<div>
<h3>Blog Posts</h3>
<p
class="stat-value"
id="totalBlogPosts"
aria-label="Total blog posts"
>
<span class="spinner spinner-small"></span>
</p>
</div>
</article>
<article class="stat-card">
<div class="stat-icon" style="background: #ffc107" aria-hidden="true">
<i class="bi bi-people"></i>
</div>
<div>
<h3>Users</h3>
<p class="stat-value" id="totalUsers" aria-label="Total users">
<span class="spinner spinner-small"></span>
</p>
</div>
</article>
</section>
<!-- Quick Actions -->
<section class="actions-section" aria-label="Quick actions">
<h2 class="section-heading">Quick Actions</h2>
<div class="actions-bar">
<a href="products.html?action=create" class="btn btn-primary">
<i class="bi bi-plus-circle" aria-hidden="true"></i>
<span>Add Product</span>
</a>
<a href="blog.html?action=create" class="btn btn-info">
<i class="bi bi-file-plus" aria-hidden="true"></i>
<span>New Blog Post</span>
</a>
<a href="portfolio.html?action=create" class="btn btn-success">
<i class="bi bi-image" aria-hidden="true"></i>
<span>Add Portfolio</span>
</a>
</div>
</section>
</main>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Utility Functions -->
<script src="../assets/js/utils.js"></script>
<!-- Authentication -->
<script src="js/auth.js"></script>
<!-- Dashboard Script -->
<script>
// Initialize dashboard
document.addEventListener("DOMContentLoaded", async function () {
// Check authentication
const authenticated = await checkAuth();
if (!authenticated) return;
// Display user greeting
if (window.adminAuth.user) {
const greeting = document.getElementById("userGreeting");
greeting.textContent = `Hello, ${escapeHtml(
window.adminAuth.user.username
)}!`;
}
// Load dashboard stats
loadDashboardStats();
});
// Load dashboard statistics
async function loadDashboardStats() {
try {
const data = await apiRequest("/api/admin/dashboard/stats");
if (data.success) {
// Update stats
document.getElementById("totalProducts").textContent =
data.stats.products || 0;
document.getElementById("totalPortfolio").textContent =
data.stats.portfolio || 0;
document.getElementById("totalBlogPosts").textContent =
data.stats.blogPosts || 0;
document.getElementById("totalUsers").textContent =
data.stats.users || 0;
// Announce to screen readers
announceToScreenReader("Dashboard statistics loaded");
} else {
throw new Error(data.message || "Failed to load stats");
}
} catch (error) {
showToast("Failed to load dashboard statistics", "error");
// Show fallback values
document.getElementById("totalProducts").textContent = "--";
document.getElementById("totalPortfolio").textContent = "--";
document.getElementById("totalBlogPosts").textContent = "--";
document.getElementById("totalUsers").textContent = "--";
}
}
</script>
</body>
</html>

2
website/admin/dashboard.html
View File

@@ -434,7 +434,7 @@
<a href="/index.html" target="_blank" class="btn-view-site me-2"
><i class="bi bi-eye"></i> View Site</a
>
<button class="btn-logout" onclick="logout()">
<button class="btn-logout" id="logoutBtn">
<i class="bi bi-box-arrow-right"></i> Logout
</button>
</div>

290
website/admin/js/auth.js
View File

@@ -7,8 +7,8 @@ window.adminAuth = {
isAuthenticated: false,
};
// Check authentication and redirect if needed
async function checkAuth() {
// Check authentication and redirect if needed - attach to window
window.checkAuth = async function () {
try {
const response = await fetch("/api/admin/session", {
credentials: "include",
@@ -18,36 +18,272 @@ async function checkAuth() {
});
if (!response.ok) {
redirectToLogin();
window.redirectToLogin();
return false;
}
const data = await response.json();
if (!data.authenticated) {
redirectToLogin();
window.redirectToLogin();
return false;
}
// Store user data
window.adminAuth.user = data.user;
window.adminAuth.isAuthenticated = true;
// Initialize mobile menu after auth check
window.initMobileMenu();
return true;
} catch (error) {
console.error("Authentication check failed:", error);
redirectToLogin();
// Only log in development
if (window.location.hostname === "localhost") {
console.error("Authentication check failed:", error);
}
window.redirectToLogin();
return false;
}
}
};
// Redirect to login page
function redirectToLogin() {
window.redirectToLogin = function () {
if (window.location.pathname !== "/admin/login.html") {
window.location.href = "/admin/login.html";
}
};
// Initialize mobile menu toggle
window.initMobileMenu = function () {
// Check if mobile menu button exists
let menuToggle = document.getElementById("mobileMenuToggle");
if (!menuToggle && window.innerWidth <= 768) {
// Create mobile menu button
menuToggle = document.createElement("button");
menuToggle.id = "mobileMenuToggle";
menuToggle.className = "mobile-menu-toggle";
menuToggle.setAttribute("aria-label", "Toggle navigation menu");
menuToggle.setAttribute("aria-expanded", "false");
menuToggle.innerHTML = '<i class="bi bi-list"></i>';
document.body.appendChild(menuToggle);
}
if (menuToggle) {
menuToggle.addEventListener("click", function () {
const sidebar = document.querySelector(".sidebar");
if (sidebar) {
const isActive = sidebar.classList.toggle("active");
this.setAttribute("aria-expanded", isActive ? "true" : "false");
this.innerHTML = isActive
? '<i class="bi bi-x"></i>'
: '<i class="bi bi-list"></i>';
}
});
// Close sidebar when clicking outside on mobile
document.addEventListener("click", function (event) {
const sidebar = document.querySelector(".sidebar");
const menuToggle = document.getElementById("mobileMenuToggle");
if (sidebar && menuToggle && window.innerWidth <= 768) {
if (
!sidebar.contains(event.target) &&
event.target !== menuToggle &&
!menuToggle.contains(event.target)
) {
if (sidebar.classList.contains("active")) {
sidebar.classList.remove("active");
menuToggle.setAttribute("aria-expanded", "false");
menuToggle.innerHTML = '<i class="bi bi-list"></i>';
}
}
}
});
// Close menu on link click (mobile)
const sidebarLinks = document.querySelectorAll(".sidebar-menu a");
sidebarLinks.forEach((link) => {
link.addEventListener("click", function () {
if (window.innerWidth <= 768) {
const sidebar = document.querySelector(".sidebar");
if (sidebar && sidebar.classList.contains("active")) {
sidebar.classList.remove("active");
if (menuToggle) {
menuToggle.setAttribute("aria-expanded", "false");
menuToggle.innerHTML = '<i class="bi bi-list"></i>';
}
}
}
});
});
}
// Handle window resize
let resizeTimer;
window.addEventListener("resize", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if (window.innerWidth > 768) {
const sidebar = document.querySelector(".sidebar");
if (sidebar) {
sidebar.classList.remove("active");
}
if (menuToggle) {
menuToggle.setAttribute("aria-expanded", "false");
menuToggle.innerHTML = '<i class="bi bi-list"></i>';
}
}
}, 250);
});
};
// Custom logout confirmation modal
window.showLogoutConfirm = function (onConfirm) {
// Create modal backdrop
const backdrop = document.createElement("div");
backdrop.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease;
`;
// Create modal
const modal = document.createElement("div");
modal.style.cssText = `
background: white;
border-radius: 12px;
padding: 30px;
max-width: 400px;
width: 90%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease;
`;
modal.innerHTML = `
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
<div style="text-align: center;">
<div style="font-size: 48px; margin-bottom: 15px;">
<i class="bi bi-box-arrow-right" style="color: #dc3545;"></i>
</div>
<h3 style="margin: 0 0 10px 0; color: #2c3e50; font-weight: 600;">Confirm Logout</h3>
<p style="color: #6c757d; margin: 0 0 25px 0;">Are you sure you want to logout?</p>
<div style="display: flex; gap: 10px; justify-content: center;">
<button id="cancelLogout" style="
padding: 10px 24px;
border: 2px solid #6c757d;
background: white;
color: #6c757d;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.2s;
">Cancel</button>
<button id="confirmLogout" style="
padding: 10px 24px;
border: none;
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
">Logout</button>
</div>
</div>
`;
backdrop.appendChild(modal);
document.body.appendChild(backdrop);
// Add hover effects
const cancelBtn = modal.querySelector("#cancelLogout");
const confirmBtn = modal.querySelector("#confirmLogout");
cancelBtn.addEventListener("mouseenter", function () {
this.style.background = "#6c757d";
this.style.color = "white";
});
cancelBtn.addEventListener("mouseleave", function () {
this.style.background = "white";
this.style.color = "#6c757d";
});
confirmBtn.addEventListener("mouseenter", function () {
this.style.transform = "translateY(-2px)";
this.style.boxShadow = "0 4px 12px rgba(220, 53, 69, 0.4)";
});
confirmBtn.addEventListener("mouseleave", function () {
this.style.transform = "translateY(0)";
this.style.boxShadow = "0 2px 8px rgba(220, 53, 69, 0.3)";
});
// Handle buttons
const closeModal = () => {
backdrop.style.animation = "fadeIn 0.2s ease reverse";
setTimeout(() => backdrop.remove(), 200);
};
cancelBtn.addEventListener("click", closeModal);
backdrop.addEventListener("click", function (e) {
if (e.target === backdrop) closeModal();
});
confirmBtn.addEventListener("click", function () {
closeModal();
onConfirm();
});
// ESC key to close
const escHandler = (e) => {
if (e.key === "Escape") {
closeModal();
document.removeEventListener("keydown", escHandler);
}
};
document.addEventListener("keydown", escHandler);
};
// Logout function - explicitly attach to window for onclick handlers
window.logout = async function (skipConfirm = false) {
if (!skipConfirm) {
window.showLogoutConfirm(async () => {
await performLogout();
});
return;
}
await performLogout();
};
// CRITICAL: Global function for inline onclick="logout()" handlers
// This must be at global scope so inline onclick can find it
function logout(skipConfirm = false) {
window.logout(skipConfirm);
}
// Logout function
async function logout() {
// Actual logout logic
async function performLogout() {
try {
const response = await fetch("/api/admin/logout", {
method: "POST",
@@ -58,15 +294,20 @@ async function logout() {
window.adminAuth.user = null;
window.adminAuth.isAuthenticated = false;
window.location.href = "/admin/login.html";
} else {
console.error("Logout failed with status:", response.status);
// Still redirect to login even if logout fails
window.location.href = "/admin/login.html";
}
} catch (error) {
console.error("Logout failed:", error);
console.error("Logout error:", error);
// Still redirect to login even if logout fails
window.location.href = "/admin/login.html";
}
}
// Show success notification
function showSuccess(message) {
window.showSuccess = function (message) {
const alert = document.createElement("div");
alert.className =
"alert alert-success alert-dismissible fade show position-fixed";
@@ -78,10 +319,10 @@ function showSuccess(message) {
`;
document.body.appendChild(alert);
setTimeout(() => alert.remove(), 5000);
}
};
// Show error notification
function showError(message) {
window.showError = function (message) {
const alert = document.createElement("div");
alert.className =
"alert alert-danger alert-dismissible fade show position-fixed";
@@ -93,12 +334,29 @@ function showError(message) {
`;
document.body.appendChild(alert);
setTimeout(() => alert.remove(), 5000);
}
};
// Auto-check authentication when this script loads
// Only run if we're not on the login page
if (window.location.pathname !== "/admin/login.html") {
document.addEventListener("DOMContentLoaded", function () {
checkAuth();
window.checkAuth();
// Attach logout event listeners to all logout buttons
const logoutButtons = document.querySelectorAll(
'.btn-logout, [data-logout], [onclick*="logout"]'
);
logoutButtons.forEach((button) => {
// Remove inline onclick if it exists
button.removeAttribute("onclick");
// Add proper event listener
button.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
window.logout();
});
});
});
}

263
website/admin/logout-debug.html Normal file
View File

@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logout Debug Tool</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="/admin/js/auth.js"></script>
<style>
body {
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
margin-bottom: 20px;
color: #333;
}
.test-result {
padding: 10px;
border-radius: 5px;
margin: 10px 0;
font-family: monospace;
}
.success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
.info {
background: #d1ecf1;
border: 1px solid #bee5eb;
color: #0c5460;
}
.btn-test {
margin: 10px 5px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">🔍 Logout Function Debug Tool</h1>
<div class="card">
<h3>📊 Function Availability Test</h3>
<div id="availabilityResults"></div>
<button class="btn btn-primary btn-test" onclick="checkAvailability()">
Run Availability Check
</button>
</div>
<div class="card">
<h3>🎯 Logout Button Tests</h3>
<p>Test different methods of calling the logout function:</p>
<!-- Method 1: Direct onclick (like in admin pages) -->
<button class="btn btn-danger btn-test" onclick="logout()">
Test 1: onclick="logout()" (Skip Confirm)
</button>
<!-- Method 2: Via window object -->
<button class="btn btn-warning btn-test" onclick="window.logout(true)">
Test 2: onclick="window.logout(true)"
</button>
<!-- Method 3: Via JavaScript function -->
<button class="btn btn-info btn-test" id="test3">
Test 3: addEventListener
</button>
<div id="testResults" class="mt-3"></div>
</div>
<div class="card">
<h3>🌐 API Direct Test</h3>
<button class="btn btn-success btn-test" onclick="testLogoutAPI()">
Test Logout API Directly
</button>
<div id="apiResults"></div>
</div>
<div class="card">
<h3>📝 Console Logs</h3>
<p class="text-muted">Check browser console (F12) for detailed logs</p>
<div
id="consoleOutput"
class="test-result info"
style="max-height: 200px; overflow-y: auto"
></div>
</div>
</div>
<script>
// Capture console logs
const consoleDiv = document.getElementById("consoleOutput");
const originalLog = console.log;
const originalError = console.error;
function addToConsoleOutput(msg, isError = false) {
const timestamp = new Date().toLocaleTimeString();
const line = document.createElement("div");
line.textContent = `[${timestamp}] ${msg}`;
line.style.color = isError ? "red" : "black";
consoleDiv.appendChild(line);
consoleDiv.scrollTop = consoleDiv.scrollHeight;
}
console.log = function (...args) {
originalLog.apply(console, args);
addToConsoleOutput(args.join(" "));
};
console.error = function (...args) {
originalError.apply(console, args);
addToConsoleOutput("ERROR: " + args.join(" "), true);
};
// Check availability
function checkAvailability() {
const results = document.getElementById("availabilityResults");
results.innerHTML = "";
const tests = [
{ name: "typeof logout", value: typeof logout },
{ name: "typeof window.logout", value: typeof window.logout },
{
name: "logout === window.logout",
value: typeof logout !== "undefined" && logout === window.logout,
},
{
name: "window.adminAuth exists",
value: typeof window.adminAuth !== "undefined",
},
{
name: "window.checkAuth exists",
value: typeof window.checkAuth === "function",
},
{
name: "window.showSuccess exists",
value: typeof window.showSuccess === "function",
},
{
name: "window.showError exists",
value: typeof window.showError === "function",
},
];
tests.forEach((test) => {
const div = document.createElement("div");
div.className =
"test-result " +
(test.value === "function" || test.value === true
? "success"
: "error");
div.textContent = `${test.name}: ${test.value}`;
results.appendChild(div);
});
console.log("Availability check completed");
}
// Test 3: Using addEventListener
document
.getElementById("test3")
.addEventListener("click", async function () {
const resultsDiv = document.getElementById("testResults");
resultsDiv.innerHTML =
'<div class="test-result info">Test 3: Calling logout via addEventListener...</div>';
console.log("Test 3: Calling window.logout(true)");
try {
if (typeof window.logout === "function") {
await window.logout(true);
resultsDiv.innerHTML +=
'<div class="test-result success">✓ Logout called successfully!</div>';
} else {
resultsDiv.innerHTML +=
'<div class="test-result error">✗ window.logout is not a function!</div>';
}
} catch (error) {
resultsDiv.innerHTML += `<div class="test-result error">✗ Error: ${error.message}</div>`;
console.error("Test 3 error:", error);
}
});
// Test logout API directly
async function testLogoutAPI() {
const resultsDiv = document.getElementById("apiResults");
resultsDiv.innerHTML =
'<div class="test-result info">Testing API endpoint...</div>';
console.log("Testing /api/admin/logout endpoint");
try {
const response = await fetch("/api/admin/logout", {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
if (response.ok) {
resultsDiv.innerHTML += `<div class="test-result success">✓ API Response: ${JSON.stringify(
data
)}</div>`;
console.log("API test successful:", data);
} else {
resultsDiv.innerHTML += `<div class="test-result error">✗ API Error: ${
response.status
} - ${JSON.stringify(data)}</div>`;
console.error("API test failed:", response.status, data);
}
} catch (error) {
resultsDiv.innerHTML += `<div class="test-result error">✗ Fetch Error: ${error.message}</div>`;
console.error("API test error:", error);
}
}
// Override logout temporarily to prevent redirect during testing
const originalLogout = window.logout;
window.logout = async function (skipConfirm = false) {
const resultsDiv = document.getElementById("testResults");
console.log("logout() called with skipConfirm:", skipConfirm);
resultsDiv.innerHTML =
'<div class="test-result info">Logout function called...</div>';
try {
// Call original function
await originalLogout(true); // Always skip confirm for testing
resultsDiv.innerHTML +=
'<div class="test-result success">✓ Logout executed! Should redirect to login...</div>';
} catch (error) {
resultsDiv.innerHTML += `<div class="test-result error">✗ Logout failed: ${error.message}</div>`;
console.error("Logout error:", error);
}
};
// Run availability check on load
window.addEventListener("DOMContentLoaded", function () {
console.log("Page loaded - running initial checks...");
checkAvailability();
});
</script>
</body>
</html>

746
website/admin/media-library.html
View File

@@ -14,82 +14,193 @@
/>
<link rel="stylesheet" href="/admin/css/admin-style.css" />
<style>
.media-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.toolbar {
background: #fff;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 10px;
}
.toolbar-right {
display: flex;
gap: 10px;
}
.breadcrumb {
background: transparent;
padding: 0;
margin: 0;
font-size: 14px;
}
.breadcrumb-item a {
color: #7c3aed;
text-decoration: none;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.selected-count {
background: #7c3aed;
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-height: 400px;
}
.media-item {
position: relative;
border: 2px solid #dee2e6;
border: 2px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
transition: all 0.2s;
background: #fff;
}
.media-item:hover {
border-color: #7c3aed;
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
.media-item.selected {
border-color: #7c3aed;
border-width: 3px;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.media-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.media-item-name {
padding: 10px;
background: #f8f9fa;
font-size: 12px;
word-break: break-all;
}
.media-item-actions {
.media-checkbox {
position: absolute;
top: 5px;
right: 5px;
display: none;
top: 8px;
left: 8px;
z-index: 10;
width: 24px;
height: 24px;
cursor: pointer;
}
.media-item:hover .media-item-actions {
.folder-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
height: 150px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
.folder-item i {
font-size: 48px;
color: #7c3aed;
margin-bottom: 10px;
}
.folder-name {
font-size: 13px;
font-weight: 500;
text-align: center;
word-break: break-word;
color: #374151;
}
.file-item img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
.file-name {
padding: 8px;
background: #f9fafb;
font-size: 11px;
text-align: center;
word-break: break-all;
color: #6b7280;
border-top: 1px solid #e5e7eb;
}
.upload-zone {
border: 3px dashed #dee2e6;
border: 3px dashed #d1d5db;
border-radius: 10px;
padding: 60px;
padding: 40px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background: #f8f9fa;
background: #f9fafb;
margin-bottom: 20px;
}
.upload-zone:hover,
.upload-zone.dragover {
border-color: #7c3aed;
background: #f3f0ff;
}
.upload-zone i {
font-size: 48px;
color: #7c3aed;
margin-bottom: 15px;
}
.toolbar {
background: #fff;
padding: 15px;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
.empty-state {
text-align: center;
padding: 60px 20px;
color: #9ca3af;
}
.empty-state i {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.5;
}
.selected-count {
background: #7c3aed;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
.progress-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 350px;
background: white;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
padding: 20px;
z-index: 1000;
}
.modal-content {
border-radius: 12px;
}
</style>
</head>
@@ -157,8 +268,18 @@
</div>
<div class="container-fluid">
<!-- Toolbar -->
<div class="toolbar">
<div>
<div class="toolbar-left">
<nav aria-label="breadcrumb">
<ol class="breadcrumb" id="breadcrumb">
<li class="breadcrumb-item">
<a href="#" onclick="navigateToFolder(null); return false;"
><i class="bi bi-house-door"></i> Root</a
>
</li>
</ol>
</nav>
<span
class="selected-count"
id="selectedCount"
@@ -166,30 +287,40 @@
>0 selected</span
>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" id="uploadBtn">
<div class="toolbar-right">
<button
class="btn btn-sm btn-success"
onclick="showCreateFolderModal()"
>
<i class="bi bi-folder-plus"></i> New Folder
</button>
<button class="btn btn-sm btn-primary" onclick="showUploadZone()">
<i class="bi bi-cloud-upload"></i> Upload Files
</button>
<button
class="btn btn-success"
id="selectBtn"
class="btn btn-sm btn-danger"
id="deleteSelectedBtn"
style="display: none"
onclick="handleDeleteSelected()"
>
<i class="bi bi-check-lg"></i> Select
</button>
<button class="btn btn-outline-secondary" id="closeBtn">
<i class="bi bi-x-lg"></i> Close
<i class="bi bi-trash"></i> Delete Selected
</button>
</div>
</div>
</div>
<div class="container-fluid p-4">
<!-- Upload Zone -->
<div class="upload-zone mb-4" id="uploadZone" style="display: none">
<i class="bi bi-cloud-arrow-up"></i>
<h4 class="mt-3">Drop files here or click to browse</h4>
<p class="text-muted">
<!-- Upload Zone (hidden by default) -->
<div
class="upload-zone"
id="uploadZone"
style="display: none"
ondrop="handleDrop(event)"
ondragover="event.preventDefault(); event.currentTarget.classList.add('dragover');"
ondragleave="event.currentTarget.classList.remove('dragover');"
onclick="document.getElementById('fileInput').click()"
>
<i class="bi bi-cloud-arrow-up d-block"></i>
<h5>Drop files here or click to browse</h5>
<p class="text-muted mb-0">
Supported: JPG, PNG, GIF, WebP (Max 5MB each)
</p>
<input
@@ -198,247 +329,296 @@
multiple
accept="image/*"
style="display: none"
onchange="handleFileSelect(event)"
/>
</div>
<!-- Upload Progress -->
<div id="uploadProgress" style="display: none" class="mb-4">
<div class="progress" style="height: 30px">
<!-- Progress Bar -->
<div
class="progress-container"
id="uploadProgress"
style="display: none"
>
<h6 class="mb-3">Uploading files...</h6>
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 0%"
id="progressBar"
style="width: 0%"
>
0%
</div>
</div>
</div>
<!-- Search and Filter -->
<div class="row mb-3">
<div class="col-md-6">
<input
type="text"
class="form-control"
id="searchInput"
placeholder="Search files..."
/>
</div>
<div class="col-md-3">
<select class="form-select" id="filterType">
<option value="all">All Types</option>
<option value="image">Images</option>
<option value="recent">Recently Uploaded</option>
</select>
</div>
<div class="col-md-3">
<button
class="btn btn-outline-danger w-100"
id="deleteSelectedBtn"
style="display: none"
>
<i class="bi bi-trash"></i> Delete Selected
</button>
</div>
</div>
<!-- Media Grid -->
<div class="media-grid" id="mediaGrid">
<!-- Media items will be loaded here -->
</div>
<!-- Empty State -->
<div id="emptyState" style="display: none" class="text-center py-5">
<i class="bi bi-images" style="font-size: 64px; color: #dee2e6"></i>
<h4 class="mt-3 text-muted">No files yet</h4>
<p class="text-muted">Upload your first image to get started</p>
<div class="empty-state">
<i class="bi bi-folder-x d-block"></i>
<h5>No files yet</h5>
<p>Upload files or create folders to get started</p>
</div>
</div>
</div>
</div>
<!-- Create Folder Modal -->
<div class="modal fade" id="createFolderModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create New Folder</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Folder Name</label>
<input
type="text"
class="form-control"
id="folderNameInput"
placeholder="Enter folder name"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
type="button"
class="btn btn-primary"
onclick="createFolder()"
>
Create Folder
</button>
</div>
</div>
</div>
</div>
<!-- End Main Content -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/admin/js/auth.js"></script>
<script>
let selectedFiles = [];
let currentFolderId = null;
let allFolders = [];
let allFiles = [];
let allowMultiple = false;
let selectedItems = new Set(); // Store IDs: 'f-{id}' for folders, 'u-{id}' for files
let folderPath = [];
// Initialize
document.addEventListener("DOMContentLoaded", function () {
checkAuth().then((authenticated) => {
if (authenticated) {
init();
}
});
});
function init() {
// Get parameters from URL
const urlParams = new URLSearchParams(window.location.search);
allowMultiple = urlParams.get("multiple") === "true";
const callback = urlParams.get("callback");
// Setup event listeners
document
.getElementById("uploadBtn")
.addEventListener("click", showUploadZone);
document
.getElementById("uploadZone")
.addEventListener("click", () =>
document.getElementById("fileInput").click()
);
document
.getElementById("fileInput")
.addEventListener("change", handleFileSelect);
document
.getElementById("selectBtn")
.addEventListener("click", handleSelect);
document
.getElementById("closeBtn")
.addEventListener("click", () => window.close());
document
.getElementById("deleteSelectedBtn")
.addEventListener("click", handleDeleteSelected);
document
.getElementById("searchInput")
.addEventListener("input", handleSearch);
document
.getElementById("filterType")
.addEventListener("change", handleFilter);
// Drag and drop
const uploadZone = document.getElementById("uploadZone");
uploadZone.addEventListener("dragover", (e) => {
e.preventDefault();
uploadZone.classList.add("dragover");
});
uploadZone.addEventListener("dragleave", () => {
uploadZone.classList.remove("dragover");
});
uploadZone.addEventListener("drop", handleDrop);
loadFiles();
async function init() {
await Promise.all([loadFolders(), loadFiles()]);
}
function showUploadZone() {
document.getElementById("uploadZone").style.display = "block";
}
async function loadFiles() {
async function loadFolders() {
try {
const response = await fetch("/api/admin/uploads", {
const response = await fetch("/api/admin/folders", {
credentials: "include",
});
const data = await response.json();
if (data.success) {
allFolders = data.folders;
}
} catch (error) {
console.error("Failed to load folders:", error);
}
}
async function loadFiles(folderId = null) {
try {
currentFolderId = folderId;
let url = "/api/admin/uploads";
if (folderId !== null) {
url += `?folder_id=${folderId}`;
} else {
url += "?folder_id=null";
}
const response = await fetch(url, {
credentials: "include",
});
const data = await response.json();
if (data.success) {
allFiles = data.files;
renderFiles(allFiles);
renderMedia();
updateBreadcrumb();
}
} catch (error) {
console.error("Failed to load files:", error);
alert("Failed to load media library");
}
}
function renderFiles(files) {
function renderMedia() {
const grid = document.getElementById("mediaGrid");
const emptyState = document.getElementById("emptyState");
if (files.length === 0) {
grid.style.display = "none";
emptyState.style.display = "block";
// Get subfolders of current folder
const subfolders = allFolders.filter(
(f) => f.parentId === currentFolderId
);
if (subfolders.length === 0 && allFiles.length === 0) {
grid.innerHTML = `
<div class="empty-state">
<i class="bi bi-folder-x d-block"></i>
<h5>No files yet</h5>
<p>Upload files or create folders to get started</p>
</div>
`;
return;
}
grid.style.display = "grid";
emptyState.style.display = "none";
let html = "";
grid.innerHTML = files
.map(
(file) => `
<div class="media-item" data-file="${file.filename}" onclick="toggleSelect('${file.filename}')">
<img src="/uploads/${file.filename}" alt="${file.filename}">
<div class="media-item-name">${file.filename}</div>
<div class="media-item-actions">
<button class="btn btn-sm btn-danger" onclick="deleteFile(event, '${file.filename}')">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
`
)
.join("");
}
function toggleSelect(filename) {
const item = document.querySelector(`[data-file="${filename}"]`);
if (!allowMultiple) {
// Clear other selections
document.querySelectorAll(".media-item.selected").forEach((el) => {
if (el.dataset.file !== filename) {
el.classList.remove("selected");
}
});
selectedFiles = [];
// Render folders first
for (const folder of subfolders) {
const isSelected = selectedItems.has(`f-${folder.id}`);
html += `
<div class="media-item ${
isSelected ? "selected" : ""
}" data-type="folder" data-id="${folder.id}">
<input type="checkbox" class="media-checkbox form-check-input"
${isSelected ? "checked" : ""}
onclick="toggleSelection('f-${folder.id}', event)" />
<div class="folder-item" ondblclick="navigateToFolder(${
folder.id
})">
<i class="bi bi-folder-fill"></i>
<div class="folder-name">${escapeHtml(folder.name)}</div>
<small class="text-muted">${folder.fileCount} files</small>
</div>
</div>
`;
}
const index = selectedFiles.indexOf(filename);
if (index > -1) {
selectedFiles.splice(index, 1);
item.classList.remove("selected");
// Render files
for (const file of allFiles) {
const isSelected = selectedItems.has(`u-${file.id}`);
html += `
<div class="media-item ${
isSelected ? "selected" : ""
}" data-type="file" data-id="${file.id}">
<input type="checkbox" class="media-checkbox form-check-input"
${isSelected ? "checked" : ""}
onclick="toggleSelection('u-${file.id}', event)" />
<div class="file-item">
<img src="${file.path}" alt="${escapeHtml(file.originalName)}"
onerror="this.src='/assets/images/placeholder.jpg'" />
<div class="file-name" title="${escapeHtml(
file.originalName
)}">${escapeHtml(file.originalName)}</div>
</div>
</div>
`;
}
grid.innerHTML = html;
}
function toggleSelection(itemId, event) {
event.stopPropagation();
if (selectedItems.has(itemId)) {
selectedItems.delete(itemId);
} else {
selectedFiles.push(filename);
item.classList.add("selected");
selectedItems.add(itemId);
}
updateSelection();
updateSelectionUI();
}
function updateSelection() {
function updateSelectionUI() {
const countEl = document.getElementById("selectedCount");
const selectBtn = document.getElementById("selectBtn");
const deleteBtn = document.getElementById("deleteSelectedBtn");
if (selectedFiles.length > 0) {
countEl.textContent = `${selectedFiles.length} selected`;
countEl.style.display = "block";
selectBtn.style.display = "block";
deleteBtn.style.display = "block";
if (selectedItems.size > 0) {
countEl.textContent = `${selectedItems.size} selected`;
countEl.style.display = "inline-block";
deleteBtn.style.display = "inline-block";
} else {
countEl.style.display = "none";
selectBtn.style.display = "none";
deleteBtn.style.display = "none";
}
renderMedia();
}
function handleSelect() {
if (window.opener && window.opener.receiveMediaFiles) {
const files = selectedFiles.map((f) => `/uploads/${f}`);
window.opener.receiveMediaFiles(allowMultiple ? files : files[0]);
window.close();
function navigateToFolder(folderId) {
selectedItems.clear();
updateSelectionUI();
if (folderId === null) {
folderPath = [];
} else {
// Build path
folderPath = [];
let currentId = folderId;
while (currentId !== null) {
const folder = allFolders.find((f) => f.id === currentId);
if (!folder) break;
folderPath.unshift({ id: folder.id, name: folder.name });
currentId = folder.parentId;
}
}
loadFiles(folderId);
}
async function handleFileSelect(e) {
const files = Array.from(e.target.files);
function updateBreadcrumb() {
const breadcrumb = document.getElementById("breadcrumb");
let html =
'<li class="breadcrumb-item"><a href="#" onclick="navigateToFolder(null); return false;"><i class="bi bi-house-door"></i> Root</a></li>';
for (const folder of folderPath) {
html += `<li class="breadcrumb-item"><a href="#" onclick="navigateToFolder(${
folder.id
}); return false;">${escapeHtml(folder.name)}</a></li>`;
}
breadcrumb.innerHTML = html;
}
function showUploadZone() {
const zone = document.getElementById("uploadZone");
zone.style.display = zone.style.display === "none" ? "block" : "none";
}
async function handleFileSelect(event) {
const files = Array.from(event.target.files);
await uploadFiles(files);
event.target.value = ""; // Reset input
}
async function handleDrop(e) {
e.preventDefault();
e.currentTarget.classList.remove("dragover");
async function handleDrop(event) {
event.preventDefault();
event.currentTarget.classList.remove("dragover");
const files = Array.from(e.dataTransfer.files);
const files = Array.from(event.dataTransfer.files);
await uploadFiles(files);
}
async function uploadFiles(files) {
if (files.length === 0) return;
const formData = new FormData();
files.forEach((file) => formData.append("files", file));
if (currentFolderId !== null) {
formData.append("folder_id", currentFolderId);
}
const progressBar = document.getElementById("progressBar");
const progressContainer = document.getElementById("uploadProgress");
progressContainer.style.display = "block";
@@ -460,10 +640,17 @@
if (data.success) {
setTimeout(() => {
progressContainer.style.display = "none";
progressBar.style.width = "0%";
document.getElementById("uploadZone").style.display = "none";
loadFiles();
loadFiles(currentFolderId);
}, 500);
} else {
alert("Upload failed: " + data.message);
progressContainer.style.display = "none";
}
} else {
alert("Upload failed");
progressContainer.style.display = "none";
}
});
@@ -477,58 +664,109 @@
}
}
async function deleteFile(event, filename) {
event.stopPropagation();
function showCreateFolderModal() {
const modal = new bootstrap.Modal(
document.getElementById("createFolderModal")
);
document.getElementById("folderNameInput").value = "";
modal.show();
}
if (!confirm("Delete this file?")) return;
async function createFolder() {
const nameInput = document.getElementById("folderNameInput");
const name = nameInput.value.trim();
if (!name) {
alert("Please enter a folder name");
return;
}
try {
const response = await fetch(`/api/admin/uploads/${filename}`, {
method: "DELETE",
const response = await fetch("/api/admin/folders", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({
name: name,
parent_id: currentFolderId,
}),
});
const data = await response.json();
if (data.success) {
loadFiles();
bootstrap.Modal.getInstance(
document.getElementById("createFolderModal")
).hide();
await loadFolders();
loadFiles(currentFolderId);
} else {
alert("Failed to create folder: " + data.error);
}
} catch (error) {
console.error("Failed to delete file:", error);
console.error("Failed to create folder:", error);
alert("Failed to create folder");
}
}
async function handleDeleteSelected() {
if (!confirm(`Delete ${selectedFiles.length} files?`)) return;
if (selectedItems.size === 0) return;
for (const filename of selectedFiles) {
await deleteFile(new Event("click"), filename);
const folderIds = Array.from(selectedItems)
.filter((id) => id.startsWith("f-"))
.map((id) => parseInt(id.substring(2)));
const fileIds = Array.from(selectedItems)
.filter((id) => id.startsWith("u-"))
.map((id) => parseInt(id.substring(2)));
const confirmMsg = `Delete ${selectedItems.size} item(s)?`;
if (!confirm(confirmMsg)) return;
try {
// Delete files
if (fileIds.length > 0) {
const response = await fetch("/api/admin/uploads/bulk-delete", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({ file_ids: fileIds }),
});
const data = await response.json();
if (!data.success) {
alert("Failed to delete some files: " + data.error);
}
}
// Delete folders
for (const folderId of folderIds) {
await fetch(`/api/admin/folders/${folderId}?delete_contents=true`, {
method: "DELETE",
credentials: "include",
});
}
selectedItems.clear();
await loadFolders();
loadFiles(currentFolderId);
} catch (error) {
console.error("Failed to delete items:", error);
alert("Failed to delete items");
}
selectedFiles = [];
updateSelection();
}
function handleSearch(e) {
const query = e.target.value.toLowerCase();
const filtered = allFiles.filter((f) =>
f.filename.toLowerCase().includes(query)
);
renderFiles(filtered);
function escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
function handleFilter(e) {
const filter = e.target.value;
let filtered = allFiles;
if (filter === "recent") {
filtered = allFiles
.slice()
.sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate))
.slice(0, 20);
}
renderFiles(filtered);
}
// Initialize after authentication is confirmed
document.addEventListener("DOMContentLoaded", async function () {
// Wait a bit for auth.js to check authentication
setTimeout(init, 100);
});
</script>
<script src="/admin/js/auth.js"></script>
</body>

535
website/admin/media-library.html.old Normal file
View File

@@ -0,0 +1,535 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Library - Sky Art Shop</title>
<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="/admin/css/admin-style.css" />
<style>
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
.media-item {
position: relative;
border: 2px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
}
.media-item:hover {
border-color: #7c3aed;
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);
}
.media-item.selected {
border-color: #7c3aed;
border-width: 3px;
}
.media-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.media-item-name {
padding: 10px;
background: #f8f9fa;
font-size: 12px;
word-break: break-all;
}
.media-item-actions {
position: absolute;
top: 5px;
right: 5px;
display: none;
}
.media-item:hover .media-item-actions {
display: block;
}
.upload-zone {
border: 3px dashed #dee2e6;
border-radius: 10px;
padding: 60px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background: #f8f9fa;
}
.upload-zone:hover,
.upload-zone.dragover {
border-color: #7c3aed;
background: #f3f0ff;
}
.upload-zone i {
font-size: 48px;
color: #7c3aed;
}
.toolbar {
background: #fff;
padding: 15px;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.selected-count {
background: #7c3aed;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-brand">🛍️ Sky Art Shop</div>
<ul class="sidebar-menu">
<li>
<a href="/admin/dashboard.html"
><i class="bi bi-speedometer2"></i> Dashboard</a
>
</li>
<li>
<a href="/admin/homepage.html"
><i class="bi bi-house"></i> Homepage Editor</a
>
</li>
<li>
<a href="/admin/products.html"><i class="bi bi-box"></i> Products</a>
</li>
<li>
<a href="/admin/portfolio.html"
><i class="bi bi-easel"></i> Portfolio</a
>
</li>
<li>
<a href="/admin/blog.html"><i class="bi bi-newspaper"></i> Blog</a>
</li>
<li>
<a href="/admin/pages.html"
><i class="bi bi-file-text"></i> Custom Pages</a
>
</li>
<li>
<a href="/admin/media-library.html" class="active"
><i class="bi bi-images"></i> Media Library</a
>
</li>
<li>
<a href="/admin/menu.html"><i class="bi bi-list"></i> Menu</a>
</li>
<li>
<a href="/admin/settings.html"><i class="bi bi-gear"></i> Settings</a>
</li>
<li>
<a href="/admin/users.html"><i class="bi bi-people"></i> Users</a>
</li>
</ul>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Top Bar -->
<div class="top-bar">
<div>
<h3>Media Library</h3>
<p class="mb-0 text-muted">Manage your images and media files</p>
</div>
<div>
<button class="btn-logout" onclick="logout()">
<i class="bi bi-box-arrow-right"></i> Logout
</button>
</div>
</div>
<div class="container-fluid">
<div class="toolbar">
<div>
<span
class="selected-count"
id="selectedCount"
style="display: none"
>0 selected</span
>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" id="uploadBtn">
<i class="bi bi-cloud-upload"></i> Upload Files
</button>
<button
class="btn btn-success"
id="selectBtn"
style="display: none"
>
<i class="bi bi-check-lg"></i> Select
</button>
<button class="btn btn-outline-secondary" id="closeBtn">
<i class="bi bi-x-lg"></i> Close
</button>
</div>
</div>
</div>
<div class="container-fluid p-4">
<!-- Upload Zone -->
<div class="upload-zone mb-4" id="uploadZone" style="display: none">
<i class="bi bi-cloud-arrow-up"></i>
<h4 class="mt-3">Drop files here or click to browse</h4>
<p class="text-muted">
Supported: JPG, PNG, GIF, WebP (Max 5MB each)
</p>
<input
type="file"
id="fileInput"
multiple
accept="image/*"
style="display: none"
/>
</div>
<!-- Upload Progress -->
<div id="uploadProgress" style="display: none" class="mb-4">
<div class="progress" style="height: 30px">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 0%"
id="progressBar"
>
0%
</div>
</div>
</div>
<!-- Search and Filter -->
<div class="row mb-3">
<div class="col-md-6">
<input
type="text"
class="form-control"
id="searchInput"
placeholder="Search files..."
/>
</div>
<div class="col-md-3">
<select class="form-select" id="filterType">
<option value="all">All Types</option>
<option value="image">Images</option>
<option value="recent">Recently Uploaded</option>
</select>
</div>
<div class="col-md-3">
<button
class="btn btn-outline-danger w-100"
id="deleteSelectedBtn"
style="display: none"
>
<i class="bi bi-trash"></i> Delete Selected
</button>
</div>
</div>
<!-- Media Grid -->
<div class="media-grid" id="mediaGrid">
<!-- Media items will be loaded here -->
</div>
<!-- Empty State -->
<div id="emptyState" style="display: none" class="text-center py-5">
<i class="bi bi-images" style="font-size: 64px; color: #dee2e6"></i>
<h4 class="mt-3 text-muted">No files yet</h4>
<p class="text-muted">Upload your first image to get started</p>
</div>
</div>
</div>
<!-- End Main Content -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/admin/js/auth.js"></script>
<script>
let selectedFiles = [];
let allFiles = [];
let allowMultiple = false;
// Initialize
document.addEventListener("DOMContentLoaded", function () {
checkAuth().then((authenticated) => {
if (authenticated) {
init();
}
});
});
function init() {
// Get parameters from URL
const urlParams = new URLSearchParams(window.location.search);
allowMultiple = urlParams.get("multiple") === "true";
const callback = urlParams.get("callback");
// Setup event listeners
document
.getElementById("uploadBtn")
.addEventListener("click", showUploadZone);
document
.getElementById("uploadZone")
.addEventListener("click", () =>
document.getElementById("fileInput").click()
);
document
.getElementById("fileInput")
.addEventListener("change", handleFileSelect);
document
.getElementById("selectBtn")
.addEventListener("click", handleSelect);
document
.getElementById("closeBtn")
.addEventListener("click", () => window.close());
document
.getElementById("deleteSelectedBtn")
.addEventListener("click", handleDeleteSelected);
document
.getElementById("searchInput")
.addEventListener("input", handleSearch);
document
.getElementById("filterType")
.addEventListener("change", handleFilter);
// Drag and drop
const uploadZone = document.getElementById("uploadZone");
uploadZone.addEventListener("dragover", (e) => {
e.preventDefault();
uploadZone.classList.add("dragover");
});
uploadZone.addEventListener("dragleave", () => {
uploadZone.classList.remove("dragover");
});
uploadZone.addEventListener("drop", handleDrop);
loadFiles();
}
function showUploadZone() {
document.getElementById("uploadZone").style.display = "block";
}
async function loadFiles() {
try {
const response = await fetch("/api/admin/uploads", {
credentials: "include",
});
const data = await response.json();
if (data.success) {
allFiles = data.files;
renderFiles(allFiles);
}
} catch (error) {
console.error("Failed to load files:", error);
}
}
function renderFiles(files) {
const grid = document.getElementById("mediaGrid");
const emptyState = document.getElementById("emptyState");
if (files.length === 0) {
grid.style.display = "none";
emptyState.style.display = "block";
return;
}
grid.style.display = "grid";
emptyState.style.display = "none";
grid.innerHTML = files
.map(
(file) => `
<div class="media-item" data-file="${file.filename}" onclick="toggleSelect('${file.filename}')">
<img src="/uploads/${file.filename}" alt="${file.filename}">
<div class="media-item-name">${file.filename}</div>
<div class="media-item-actions">
<button class="btn btn-sm btn-danger" onclick="deleteFile(event, '${file.filename}')">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
`
)
.join("");
}
function toggleSelect(filename) {
const item = document.querySelector(`[data-file="${filename}"]`);
if (!allowMultiple) {
// Clear other selections
document.querySelectorAll(".media-item.selected").forEach((el) => {
if (el.dataset.file !== filename) {
el.classList.remove("selected");
}
});
selectedFiles = [];
}
const index = selectedFiles.indexOf(filename);
if (index > -1) {
selectedFiles.splice(index, 1);
item.classList.remove("selected");
} else {
selectedFiles.push(filename);
item.classList.add("selected");
}
updateSelection();
}
function updateSelection() {
const countEl = document.getElementById("selectedCount");
const selectBtn = document.getElementById("selectBtn");
const deleteBtn = document.getElementById("deleteSelectedBtn");
if (selectedFiles.length > 0) {
countEl.textContent = `${selectedFiles.length} selected`;
countEl.style.display = "block";
selectBtn.style.display = "block";
deleteBtn.style.display = "block";
} else {
countEl.style.display = "none";
selectBtn.style.display = "none";
deleteBtn.style.display = "none";
}
}
function handleSelect() {
if (window.opener && window.opener.receiveMediaFiles) {
const files = selectedFiles.map((f) => `/uploads/${f}`);
window.opener.receiveMediaFiles(allowMultiple ? files : files[0]);
window.close();
}
}
async function handleFileSelect(e) {
const files = Array.from(e.target.files);
await uploadFiles(files);
}
async function handleDrop(e) {
e.preventDefault();
e.currentTarget.classList.remove("dragover");
const files = Array.from(e.dataTransfer.files);
await uploadFiles(files);
}
async function uploadFiles(files) {
const formData = new FormData();
files.forEach((file) => formData.append("files", file));
const progressBar = document.getElementById("progressBar");
const progressContainer = document.getElementById("uploadProgress");
progressContainer.style.display = "block";
try {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", (e) => {
if (e.lengthComputable) {
const percentComplete = (e.loaded / e.total) * 100;
progressBar.style.width = percentComplete + "%";
progressBar.textContent = Math.round(percentComplete) + "%";
}
});
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
if (data.success) {
setTimeout(() => {
progressContainer.style.display = "none";
document.getElementById("uploadZone").style.display = "none";
loadFiles();
}, 500);
}
}
});
xhr.open("POST", "/api/admin/upload");
xhr.withCredentials = true;
xhr.send(formData);
} catch (error) {
console.error("Upload failed:", error);
alert("Upload failed: " + error.message);
progressContainer.style.display = "none";
}
}
async function deleteFile(event, filename) {
event.stopPropagation();
if (!confirm("Delete this file?")) return;
try {
const response = await fetch(`/api/admin/uploads/${filename}`, {
method: "DELETE",
credentials: "include",
});
const data = await response.json();
if (data.success) {
loadFiles();
}
} catch (error) {
console.error("Failed to delete file:", error);
}
}
async function handleDeleteSelected() {
if (!confirm(`Delete ${selectedFiles.length} files?`)) return;
for (const filename of selectedFiles) {
await deleteFile(new Event("click"), filename);
}
selectedFiles = [];
updateSelection();
}
function handleSearch(e) {
const query = e.target.value.toLowerCase();
const filtered = allFiles.filter((f) =>
f.filename.toLowerCase().includes(query)
);
renderFiles(filtered);
}
function handleFilter(e) {
const filter = e.target.value;
let filtered = allFiles;
if (filter === "recent") {
filtered = allFiles
.slice()
.sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate))
.slice(0, 20);
}
renderFiles(filtered);
}
</script>
<script src="/admin/js/auth.js"></script>
</body>
</html>

12
website/admin/menu.html
View File

@@ -402,18 +402,6 @@
alert("Failed to save menu");
}
}
async function logout() {
try {
const response = await fetch("/api/admin/logout", {
method: "POST",
credentials: "include",
});
if (response.ok) window.location.href = "/admin/login.html";
} catch (error) {
console.error("Logout failed:", error);
}
}
</script>
<script src="/admin/js/auth.js"></script>
</body>

159
website/admin/test-all-logout.html Normal file
View File

@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test All Logout Buttons</title>
<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">
<script src="/admin/js/auth.js"></script>
<style>
body { padding: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
.test-card { background: white; border-radius: 15px; padding: 30px; margin-bottom: 20px; }
.btn-logout {
background: #dc3545;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
margin: 10px;
font-size: 16px;
}
.btn-logout:hover { background: #c82333; }
.status { padding: 15px; border-radius: 8px; margin: 10px 0; }
.success { background: #d4edda; color: #155724; }
.info { background: #d1ecf1; color: #0c5460; }
</style>
</head>
<body>
<div class="container">
<div class="test-card">
<h1>🧪 Logout Button Test - All Scenarios</h1>
<p class="lead">Test that ALL logout buttons trigger the custom modal popup</p>
<div class="status info" id="status">
<strong>Status:</strong> Page loaded. Click any button below...
</div>
<hr>
<h3>Test Buttons:</h3>
<p>Each button simulates the logout button from different pages:</p>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<button class="btn-logout" data-page="homepage">
<i class="bi bi-box-arrow-right"></i> Homepage Editor
</button>
<button class="btn-logout" data-page="products">
<i class="bi bi-box-arrow-right"></i> Products
</button>
<button class="btn-logout" data-page="portfolio">
<i class="bi bi-box-arrow-right"></i> Portfolio
</button>
<button class="btn-logout" data-page="blog">
<i class="bi bi-box-arrow-right"></i> Blog
</button>
<button class="btn-logout" data-page="pages">
<i class="bi bi-box-arrow-right"></i> Pages
</button>
<button class="btn-logout" data-page="media-library">
<i class="bi bi-box-arrow-right"></i> Media Library
</button>
<button class="btn-logout" data-page="menu">
<i class="bi bi-box-arrow-right"></i> Menu
</button>
<button class="btn-logout" data-page="users">
<i class="bi bi-box-arrow-right"></i> Users
</button>
<button class="btn-logout" data-page="settings">
<i class="bi bi-box-arrow-right"></i> Settings
</button>
<button class="btn-logout" data-page="dashboard">
<i class="bi bi-box-arrow-right"></i> Dashboard
</button>
</div>
<hr>
<h3>✅ What Should Happen:</h3>
<ol>
<li>Click any button above</li>
<li><strong>Custom modal appears</strong> (NOT browser confirm)</li>
<li>Modal shows: Red logout icon, "Confirm Logout" heading</li>
<li>Two buttons: Gray "Cancel" (left) and Red "Logout" (right)</li>
<li>Click "Cancel" → Modal closes, status updates</li>
<li>Click "Logout" → Redirects to login page</li>
<li>Press ESC → Modal closes</li>
<li>Click outside modal → Modal closes</li>
</ol>
<div id="log" style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; margin-top: 20px;">
<strong>Console Log:</strong><br>
</div>
</div>
</div>
<script>
const statusDiv = document.getElementById('status');
const logDiv = document.getElementById('log');
function updateStatus(msg, type = 'info') {
statusDiv.className = `status ${type}`;
statusDiv.innerHTML = `<strong>Status:</strong> ${msg}`;
addLog(msg);
}
function addLog(msg) {
const time = new Date().toLocaleTimeString();
logDiv.innerHTML += `[${time}] ${msg}<br>`;
logDiv.scrollTop = logDiv.scrollHeight;
}
// Track button clicks
document.addEventListener('DOMContentLoaded', function() {
addLog('Page loaded - auth.js loaded');
addLog('Checking if window.logout exists: ' + (typeof window.logout === 'function' ? 'YES' : 'NO'));
addLog('Checking if window.showLogoutConfirm exists: ' + (typeof window.showLogoutConfirm === 'function' ? 'YES' : 'NO'));
// Add tracking to all buttons
const buttons = document.querySelectorAll('.btn-logout');
addLog(`Found ${buttons.length} logout buttons`);
buttons.forEach((btn, index) => {
const page = btn.getAttribute('data-page');
btn.addEventListener('click', function() {
addLog(`Button clicked: ${page}`);
updateStatus(`Testing logout from: ${page}`, 'info');
});
});
// Override performLogout temporarily to prevent actual redirect during testing
if (window.logout) {
const originalLogout = window.logout;
window.logout = function(skipConfirm) {
addLog(`window.logout() called with skipConfirm=${skipConfirm}`);
if (!skipConfirm) {
addLog('Showing custom modal...');
window.showLogoutConfirm(async () => {
addLog('User clicked LOGOUT button in modal');
updateStatus('User confirmed logout! (Redirect disabled for testing)', 'success');
// Don't actually logout in test mode
// await performLogout();
});
}
};
}
});
</script>
</body>
</html>

38
website/admin/test-inline-logout.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Test Inline Logout</title>
<script src="/admin/js/auth.js"></script>
</head>
<body>
<h1>Testing inline onclick="logout()"</h1>
<button class="btn-logout" onclick="logout()">
Test Inline onclick Logout
</button>
<div id="result" style="margin-top: 20px; font-family: monospace;"></div>
<script>
const resultDiv = document.getElementById('result');
function log(msg) {
resultDiv.innerHTML += msg + '<br>';
console.log(msg);
}
window.addEventListener('load', function() {
log('Page loaded');
log('typeof logout: ' + typeof logout);
log('typeof window.logout: ' + typeof window.logout);
log('typeof window.showLogoutConfirm: ' + typeof window.showLogoutConfirm);
if (typeof logout === 'function') {
log('✅ logout() function exists at global scope');
} else {
log('❌ logout() function NOT found at global scope');
}
});
</script>
</body>
</html>

40
website/admin/test-logout-click.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Logout Click Test</title>
<script src="/admin/js/auth.js"></script>
</head>
<body>
<h1>Testing Logout Button Click</h1>
<p>This page simulates the exact button setup from admin pages</p>
<button class="btn-logout" id="test1">Test Button 1 (class only)</button>
<button class="btn-logout" onclick="logout()">Test Button 2 (with onclick)</button>
<button data-logout id="test3">Test Button 3 (data attribute)</button>
<div id="results" style="margin-top: 20px; font-family: monospace;"></div>
<script>
function log(msg) {
const div = document.getElementById('results');
div.innerHTML += msg + '<br>';
console.log(msg);
}
window.addEventListener('DOMContentLoaded', function() {
log('Page loaded');
log('typeof window.logout: ' + typeof window.logout);
// Check if event listeners were attached
setTimeout(() => {
const buttons = document.querySelectorAll('.btn-logout, [data-logout]');
log('Found ' + buttons.length + ' logout buttons');
buttons.forEach((btn, i) => {
log('Button ' + (i+1) + ': ' + btn.outerHTML);
});
}, 500);
});
</script>
</body>
</html>

38
website/admin/test-logout-simple.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Logout Test</title>
<script src="/admin/js/auth.js"></script>
</head>
<body>
<h1>Simple Logout Test</h1>
<button onclick="testLogout()">Test Logout</button>
<div id="output"></div>
<script>
function log(msg) {
const output = document.getElementById('output');
output.innerHTML += msg + '<br>';
console.log(msg);
}
async function testLogout() {
log('Starting logout test...');
log('typeof window.logout: ' + typeof window.logout);
log('typeof logout: ' + typeof logout);
if (typeof window.logout === 'function') {
log('Calling window.logout(true)...');
try {
await window.logout(true);
log('Logout succeeded!');
} catch (err) {
log('Logout error: ' + err.message);
}
} else {
log('ERROR: window.logout is not a function!');
}
}
</script>
</body>
</html>

107
website/admin/test-logout.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Logout Button</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding: 50px;
font-family: Arial, sans-serif;
}
.test-result {
margin: 20px 0;
padding: 15px;
border-radius: 8px;
}
.success { background: #d4edda; border: 1px solid #c3e6cb; }
.info { background: #d1ecf1; border: 1px solid #bee5eb; }
.btn-logout {
background: #dc3545;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
}
.btn-logout:hover {
background: #c82333;
}
</style>
</head>
<body>
<div class="container">
<h1>🔓 Logout Button Test Page</h1>
<p class="lead">This page tests the logout functionality</p>
<div class="test-result info" id="loadStatus">
⏳ Loading auth.js...
</div>
<div class="test-result success" id="functionCheck" style="display: none;">
✓ window.logout function is available!
</div>
<div class="mt-4">
<h3>Click the button to test logout:</h3>
<button class="btn-logout" onclick="logout()">
🚪 Logout
</button>
</div>
<div class="mt-4">
<h4>What should happen:</h4>
<ol>
<li>Confirmation dialog appears: "Are you sure you want to logout?"</li>
<li>If you click OK, the logout API is called</li>
<li>You are redirected to /admin/login.html</li>
</ol>
</div>
<div class="mt-4">
<h4>Debug Info:</h4>
<pre id="debugInfo"></pre>
</div>
</div>
<script src="/admin/js/auth.js"></script>
<script>
window.addEventListener('load', function() {
const loadStatus = document.getElementById('loadStatus');
const functionCheck = document.getElementById('functionCheck');
const debugInfo = document.getElementById('debugInfo');
let debug = [];
// Check if window.logout exists
if (typeof window.logout === 'function') {
loadStatus.style.display = 'none';
functionCheck.style.display = 'block';
debug.push('✓ window.logout is defined');
} else {
loadStatus.innerHTML = '✗ window.logout NOT found!';
loadStatus.className = 'test-result alert alert-danger';
debug.push('✗ window.logout is NOT defined');
}
// Check other functions
['checkAuth', 'showSuccess', 'showError', 'redirectToLogin'].forEach(func => {
if (typeof window[func] === 'function') {
debug.push(`✓ window.${func} is defined`);
} else {
debug.push(`✗ window.${func} is NOT defined`);
}
});
// Check auth state
debug.push(`\nAuth State:`);
debug.push(` isAuthenticated: ${window.adminAuth?.isAuthenticated || false}`);
debug.push(` user: ${window.adminAuth?.user ? JSON.stringify(window.adminAuth.user) : 'null'}`);
debugInfo.textContent = debug.join('\n');
});
</script>
</body>
</html>

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

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

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

@@ -1707,6 +1707,60 @@ section {
margin-bottom: var(--spacing-lg);
}
/* Footer Grid Layout */
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
}
.footer-col {
display: flex;
flex-direction: column;
}
.footer-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.footer-text {
color: #CCCCCC;
margin-bottom: var(--spacing-md);
line-height: 1.6;
}
.footer-heading {
color: white;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: var(--spacing-xs);
}
.footer-links a {
color: #CCCCCC;
transition: var(--transition);
text-decoration: none;
}
.footer-links a:hover {
color: white;
padding-left: 5px;
}
.footer-brand h2 {
color: white;
margin-bottom: var(--spacing-sm);
@@ -1837,6 +1891,11 @@ section {
.footer-content {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
}
/* Mobile */
@@ -1851,6 +1910,11 @@ section {
padding: 0 var(--spacing-sm);
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
h1 {
font-size: 1.8rem;
}

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

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

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

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

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

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

1
website/assets/images/hero-image.jpg Symbolic link
View File

@@ -0,0 +1 @@
hero-craft.jpg

1
website/assets/images/inspiration.jpg Symbolic link
View File

@@ -0,0 +1 @@
craft-supplies.jpg

1
website/assets/images/placeholder.jpg Symbolic link
View File

@@ -0,0 +1 @@
products/placeholder.jpg

1
website/assets/images/products/journal-1.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-3.jpg

1
website/assets/images/products/markers-1.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-4.jpg

1
website/assets/images/products/paper-1.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-3.jpg

1
website/assets/images/products/stamps-1.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-4.jpg

1
website/assets/images/products/stickers-1.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-1.jpg

1
website/assets/images/products/stickers-2.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-1.jpg

1
website/assets/images/products/washi-1.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-2.jpg

1
website/assets/images/products/washi-2.jpg Symbolic link
View File

@@ -0,0 +1 @@
product-2.jpg

47
website/assets/js/shopping-prod.js Normal file
View File

@@ -0,0 +1,47 @@
// Production-ready wrapper for shopping.js
// Removes console statements for production
(function () {
"use strict";
class ShoppingCart {
constructor() {
this.cart = this.loadFromStorage("cart") || [];
this.wishlist = this.loadFromStorage("wishlist") || [];
this.setupEventListeners();
this.renderCart();
this.renderWishlist();
}
loadFromStorage(key) {
try {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : null;
} catch (e) {
// Silent error handling in production
return null;
}
}
saveToStorage(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
return true;
} catch (e) {
// Silent error handling in production
return false;
}
}
// Add other methods here...
}
// Initialize when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
window.shoppingCart = new ShoppingCart();
});
} else {
window.shoppingCart = new ShoppingCart();
}
})();

330
website/assets/js/utils.js Normal file
View File

@@ -0,0 +1,330 @@
// Utility Functions for SkyArtShop
// Centralized helper functions used across the application
/**
* API Request Handler with Error Management
* @param {string} url - API endpoint
* @param {object} options - Fetch options
* @returns {Promise} - Response data
*/
async function apiRequest(url, options = {}) {
const defaultOptions = {
credentials: "include",
headers: {
"Content-Type": "application/json",
...options.headers,
},
};
try {
const response = await fetch(url, { ...defaultOptions, ...options });
if (!response.ok) {
const error = await response.json().catch(() => ({
message: `HTTP ${response.status}: ${response.statusText}`,
}));
throw new Error(error.message || "Request failed");
}
return await response.json();
} catch (error) {
if (process.env.NODE_ENV !== "production") {
console.error(`API Request Failed [${url}]:`, error);
}
throw error;
}
}
/**
* Debounce function to limit execution rate
* @param {Function} func - Function to debounce
* @param {number} wait - Wait time in milliseconds
* @returns {Function} - Debounced function
*/
function debounce(func, wait = 300) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
/**
* Throttle function to limit execution frequency
* @param {Function} func - Function to throttle
* @param {number} limit - Limit in milliseconds
* @returns {Function} - Throttled function
*/
function throttle(func, limit = 300) {
let inThrottle;
return function executedFunction(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
/**
* Escape HTML to prevent XSS
* @param {string} text - Text to escape
* @returns {string} - Escaped text
*/
function escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
/**
* Format date to readable string
* @param {string} dateString - Date string to format
* @returns {string} - Formatted date
*/
function formatDate(dateString) {
if (!dateString) return "N/A";
const date = new Date(dateString);
if (isNaN(date.getTime())) return "Invalid Date";
return new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "short",
day: "numeric",
}).format(date);
}
/**
* Format currency
* @param {number} amount - Amount to format
* @param {string} currency - Currency code
* @returns {string} - Formatted currency
*/
function formatCurrency(amount, currency = "USD") {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: currency,
}).format(amount);
}
/**
* Show toast notification
* @param {string} message - Message to display
* @param {string} type - Type of notification (success, error, warning, info)
* @param {number} duration - Duration in milliseconds
*/
function showToast(message, type = "info", duration = 3000) {
// Remove existing toasts
const existingToast = document.querySelector(".toast-notification");
if (existingToast) {
existingToast.remove();
}
const toast = document.createElement("div");
toast.className = `toast-notification toast-${type}`;
toast.setAttribute("role", "alert");
toast.setAttribute("aria-live", "polite");
const icons = {
success: "✓",
error: "✗",
warning: "⚠",
info: "ℹ",
};
toast.innerHTML = `
<span class="toast-icon" aria-hidden="true">${
icons[type] || icons.info
}</span>
<span class="toast-message">${escapeHtml(message)}</span>
<button class="toast-close" onclick="this.parentElement.remove()" aria-label="Close notification">×</button>
`;
document.body.appendChild(toast);
// Trigger animation
setTimeout(() => toast.classList.add("show"), 10);
// Auto remove
setTimeout(() => {
toast.classList.remove("show");
setTimeout(() => toast.remove(), 300);
}, duration);
}
/**
* LocalStorage with error handling
*/
const storage = {
get(key, defaultValue = null) {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : defaultValue;
} catch (error) {
if (process.env.NODE_ENV !== "production") {
console.error("Storage get error:", error);
}
return defaultValue;
}
},
set(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
return true;
} catch (error) {
if (process.env.NODE_ENV !== "production") {
console.error("Storage set error:", error);
}
return false;
}
},
remove(key) {
try {
localStorage.removeItem(key);
return true;
} catch (error) {
if (process.env.NODE_ENV !== "production") {
console.error("Storage remove error:", error);
}
return false;
}
},
clear() {
try {
localStorage.clear();
return true;
} catch (error) {
if (process.env.NODE_ENV !== "production") {
console.error("Storage clear error:", error);
}
return false;
}
},
};
/**
* Validate email format
* @param {string} email - Email to validate
* @returns {boolean} - Valid or not
*/
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
/**
* Get image URL with fallback
* @param {string} imagePath - Image path from server
* @param {string} fallback - Fallback image path
* @returns {string} - Full image URL
*/
function getImageUrl(imagePath, fallback = "/assets/images/placeholder.png") {
if (!imagePath) return fallback;
// If already a full URL, return as is
if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
return imagePath;
}
// Handle relative paths
return imagePath.startsWith("/") ? imagePath : `/${imagePath}`;
}
/**
* Create accessible image element
* @param {string} src - Image source
* @param {string} alt - Alt text
* @param {string} className - CSS classes
* @returns {HTMLImageElement} - Image element
*/
function createImage(src, alt, className = "") {
const img = document.createElement("img");
img.src = getImageUrl(src);
img.alt = alt || "Image";
img.className = className;
img.loading = "lazy";
// Add error handler with fallback
img.onerror = function () {
this.src = "/assets/images/placeholder.png";
this.onerror = null; // Prevent infinite loop
};
return img;
}
/**
* Trap focus within modal for accessibility
* @param {HTMLElement} element - Element to trap focus in
*/
function trapFocus(element) {
const focusableElements = element.querySelectorAll(
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
);
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];
element.addEventListener("keydown", function (e) {
if (e.key !== "Tab") return;
if (e.shiftKey) {
if (document.activeElement === firstFocusable) {
lastFocusable.focus();
e.preventDefault();
}
} else {
if (document.activeElement === lastFocusable) {
firstFocusable.focus();
e.preventDefault();
}
}
});
// Focus first element
firstFocusable?.focus();
}
/**
* Announce to screen readers
* @param {string} message - Message to announce
* @param {string} priority - Priority level (polite, assertive)
*/
function announceToScreenReader(message, priority = "polite") {
const announcement = document.createElement("div");
announcement.setAttribute("role", "status");
announcement.setAttribute("aria-live", priority);
announcement.className = "sr-only";
announcement.textContent = message;
document.body.appendChild(announcement);
setTimeout(() => announcement.remove(), 1000);
}
// Export for use in other scripts
if (typeof module !== "undefined" && module.exports) {
module.exports = {
apiRequest,
debounce,
throttle,
escapeHtml,
formatDate,
formatCurrency,
showToast,
storage,
isValidEmail,
getImageUrl,
createImage,
trapFocus,
announceToScreenReader,
};
}

315
website/public/about.html
View File

@@ -1,47 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About - Sky Art Shop</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
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="/assets/css/main.css" />
<link rel="stylesheet" href="/assets/css/navbar.css" />
<link rel="stylesheet" href="/assets/css/shopping.css" />
</head>
</head>
<body>
<!-- Modern Navigation -->
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
<img
src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg"
alt="Sky Art Shop Logo"
class="brand-logo"
/>
<span class="brand-name">Sky Art Shop</span>
</a>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
<li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link active">About</a></li>
<li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
<li class="nav-item">
<a href="/home.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/shop.html" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="/portfolio.html" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link active">About</a>
</li>
<li class="nav-item">
<a href="/blog.html" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link">Contact</a>
</li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
<button
class="action-btn"
id="wishlistToggle"
aria-label="Wishlist"
>
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
<button class="dropdown-close" id="wishlistClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
@@ -51,16 +79,22 @@
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
<button
class="action-btn"
id="cartToggle"
aria-label="Shopping Cart"
>
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
<button class="dropdown-close" id="cartClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
@@ -70,12 +104,14 @@
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
<a href="/checkout.html" class="btn-primary-full"
>Proceed to Checkout</a
>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
@@ -83,11 +119,13 @@
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
<button class="mobile-close" id="mobileMenuClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
@@ -99,157 +137,116 @@
</ul>
</div>
</nav>
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
<span class="brand-name">Sky Art Shop</span>
</a>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
<li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
</div>
<div class="dropdown-foot">
<a href="/shop.html" class="btn-outline">Continue Shopping</a>
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
</div>
<div class="dropdown-foot">
<div class="cart-summary">
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
<li><a href="/shop.html" class="mobile-link">Shop</a></li>
<li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
<li><a href="/about.html" class="mobile-link">About</a></li>
<li><a href="/blog.html" class="mobile-link">Blog</a></li>
<li><a href="/contact.html" class="mobile-link">Contact</a></li>
</ul>
</div>
</nav>
<section class="about-hero">
<div class="container">
<h1>About Sky Art Shop</h1>
<p class="hero-subtitle">Your creative journey starts here</p>
</div>
<div class="container">
<h1>About Sky Art Shop</h1>
<p class="hero-subtitle">Your creative journey starts here</p>
</div>
</section>
<section class="about-content">
<div class="container">
<div class="about-layout">
<div class="about-main-content">
<div class="about-text">
<h2>Our Story</h2>
<p>Sky Art Shop specializes in scrapbooking, journaling, cardmaking, and collaging stationery. We are passionate about helping people express their creativity and preserve their memories.</p>
<p>Our mission is to promote mental health and wellness through creative art activities. We believe that crafting is more than just a hobby—it's a therapeutic journey that brings joy, mindfulness, and self-expression.</p>
<div class="container">
<div class="about-layout">
<div class="about-main-content">
<div class="about-text">
<h2>Our Story</h2>
<p>
Sky Art Shop specializes in scrapbooking, journaling,
cardmaking, and collaging stationery. We are passionate about
helping people express their creativity and preserve their
memories.
</p>
<p>
Our mission is to promote mental health and wellness through
creative art activities. We believe that crafting is more than
just a hobby—it's a therapeutic journey that brings joy,
mindfulness, and self-expression.
</p>
<h2>What We Offer</h2>
<p>Our carefully curated collection includes:</p>
<ul>
<li>Washi tape in various designs and patterns</li>
<li>Unique stickers for journaling and scrapbooking</li>
<li>High-quality journals and notebooks</li>
<li>Card making supplies and kits</li>
<li>Collage materials and ephemera</li>
<li>Creative tools and accessories</li>
</ul>
<h2>What We Offer</h2>
<p>Our carefully curated collection includes:</p>
<ul>
<li>Washi tape in various designs and patterns</li>
<li>Unique stickers for journaling and scrapbooking</li>
<li>High-quality journals and notebooks</li>
<li>Card making supplies and kits</li>
<li>Collage materials and ephemera</li>
<li>Creative tools and accessories</li>
</ul>
<h2>Why Choose Us</h2>
<p>We hand-select every item in our store to ensure the highest quality and uniqueness. Whether you're a seasoned crafter or just starting your creative journey, we have something special for everyone.</p>
<p>Join our community of creative minds and let your imagination soar!</p>
</div>
</div>
<h2>Why Choose Us</h2>
<p>
We hand-select every item in our store to ensure the highest
quality and uniqueness. Whether you're a seasoned crafter or
just starting your creative journey, we have something special
for everyone.
</p>
<p>
Join our community of creative minds and let your imagination
soar!
</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h2>Sky Art Shop</h2>
<p>Follow Us</p>
<div class="social-links">
<a href="#instagram" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="/shop.html">Shop</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 by Sky Art Shop. All rights reserved.</p>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h3 class="footer-title">Sky Art Shop</h3>
<p class="footer-text">
Your destination for unique art pieces and creative supplies.
</p>
<div class="social-links">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
</div>
</div>
<div class="footer-col">
<h4 class="footer-heading">Shop</h4>
<ul class="footer-links">
<li><a href="/shop.html">All Products</a></li>
<li><a href="/shop.html?category=paintings">Paintings</a></li>
<li><a href="/shop.html?category=prints">Prints</a></li>
<li><a href="/shop.html?category=supplies">Art Supplies</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">About</h4>
<ul class="footer-links">
<li><a href="/about.html">Our Story</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">Customer Service</h4>
<ul class="footer-links">
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Sky Art Shop. All rights reserved.</p>
</div>
</div>
</footer>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/cart.js"></script>
<script src="/assets/js/shopping.js"></script>
</body>
<script src="/assets/js/shopping.js"></script>
</body>
</html>

167
website/public/blog.html
View File

@@ -137,125 +137,6 @@
</ul>
</div>
</nav>
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img
src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg"
alt="Sky Art Shop Logo"
class="brand-logo"
/>
<span class="brand-name">Sky Art Shop</span>
</a>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item">
<a href="/home.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/shop.html" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="/portfolio.html" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="/blog.html" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link">Contact</a>
</li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button
class="action-btn"
id="wishlistToggle"
aria-label="Wishlist"
>
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
</div>
<div class="dropdown-foot">
<a href="/shop.html" class="btn-outline">Continue Shopping</a>
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button
class="action-btn"
id="cartToggle"
aria-label="Shopping Cart"
>
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
</div>
<div class="dropdown-foot">
<div class="cart-summary">
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full"
>Proceed to Checkout</a
>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
<li><a href="/shop.html" class="mobile-link">Shop</a></li>
<li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
<li><a href="/about.html" class="mobile-link">About</a></li>
<li><a href="/blog.html" class="mobile-link">Blog</a></li>
<li><a href="/contact.html" class="mobile-link">Contact</a></li>
</ul>
</div>
</nav>
<section class="about-hero">
<div class="container">
@@ -295,27 +176,53 @@
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h2>Sky Art Shop</h2>
<p>Follow Us</p>
<div class="footer-grid">
<div class="footer-col">
<h3 class="footer-title">Sky Art Shop</h3>
<p class="footer-text">
Your destination for unique art pieces and creative supplies.
</p>
<div class="social-links">
<a href="#instagram" aria-label="Instagram"
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
</div>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="/shop.html">Shop</a></li>
<li><a href="/about.html">About</a></li>
<div class="footer-col">
<h4 class="footer-heading">Shop</h4>
<ul class="footer-links">
<li><a href="/shop.html">All Products</a></li>
<li><a href="/shop.html?category=paintings">Paintings</a></li>
<li><a href="/shop.html?category=prints">Prints</a></li>
<li><a href="/shop.html?category=supplies">Art Supplies</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">About</h4>
<ul class="footer-links">
<li><a href="/about.html">Our Story</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">Customer Service</h4>
<ul class="footer-links">
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 by Sky Art Shop. All rights reserved.</p>
<p>&copy; 2025 Sky Art Shop. All rights reserved.</p>
</div>
</div>
</footer>

872
website/public/contact.html
View File

@@ -1,47 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Sky Art Shop</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us - Sky Art Shop</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
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="/assets/css/main.css" />
<link rel="stylesheet" href="/assets/css/navbar.css" />
<link rel="stylesheet" href="/assets/css/shopping.css" />
</head>
<style>
@media (max-width: 768px) {
#contactForm > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
</style>
</head>
<body>
<!-- Modern Navigation -->
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
<img
src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg"
alt="Sky Art Shop Logo"
class="brand-logo"
/>
<span class="brand-name">Sky Art Shop</span>
</a>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
<li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="/contact.html" class="nav-link active">Contact</a></li>
<li class="nav-item">
<a href="/home.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/shop.html" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="/portfolio.html" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="/blog.html" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link active">Contact</a>
</li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
<button
class="action-btn"
id="wishlistToggle"
aria-label="Wishlist"
>
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
<button class="dropdown-close" id="wishlistClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
@@ -51,16 +86,22 @@
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
<button
class="action-btn"
id="cartToggle"
aria-label="Shopping Cart"
>
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
<button class="dropdown-close" id="cartClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
@@ -70,12 +111,14 @@
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
<a href="/checkout.html" class="btn-primary-full"
>Proceed to Checkout</a
>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
@@ -83,11 +126,13 @@
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
<button class="mobile-close" id="mobileMenuClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
@@ -99,157 +144,654 @@
</ul>
</div>
</nav>
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
<span class="brand-name">Sky Art Shop</span>
</a>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
<li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
</div>
<div class="dropdown-foot">
<a href="/shop.html" class="btn-outline">Continue Shopping</a>
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
</div>
<div class="dropdown-foot">
<div class="cart-summary">
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
<li><a href="/shop.html" class="mobile-link">Shop</a></li>
<li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
<li><a href="/about.html" class="mobile-link">About</a></li>
<li><a href="/blog.html" class="mobile-link">Blog</a></li>
<li><a href="/contact.html" class="mobile-link">Contact</a></li>
</ul>
</div>
</nav>
<section class="about-hero">
<div class="container">
<h1>About Sky Art Shop</h1>
<p class="hero-subtitle">Your creative journey starts here</p>
</div>
<!-- Contact Hero -->
<section
class="contact-hero"
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80px 0 60px;
color: white;
text-align: center;
"
>
<div class="container">
<h1 style="font-size: 2.5rem; margin-bottom: 16px; font-weight: 700">
Get In Touch
</h1>
<p
style="
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
"
>
Have questions or feedback? We'd love to hear from you. Send us a
message and we'll respond as soon as possible.
</p>
</div>
</section>
<section class="about-content">
<div class="container">
<div class="about-layout">
<div class="about-main-content">
<div class="about-text">
<h2>Our Story</h2>
<p>Sky Art Shop specializes in scrapbooking, journaling, cardmaking, and collaging stationery. We are passionate about helping people express their creativity and preserve their memories.</p>
<p>Our mission is to promote mental health and wellness through creative art activities. We believe that crafting is more than just a hobby—it's a therapeutic journey that brings joy, mindfulness, and self-expression.</p>
<h2>What We Offer</h2>
<p>Our carefully curated collection includes:</p>
<ul>
<li>Washi tape in various designs and patterns</li>
<li>Unique stickers for journaling and scrapbooking</li>
<li>High-quality journals and notebooks</li>
<li>Card making supplies and kits</li>
<li>Collage materials and ephemera</li>
<li>Creative tools and accessories</li>
</ul>
<h2>Why Choose Us</h2>
<p>We hand-select every item in our store to ensure the highest quality and uniqueness. Whether you're a seasoned crafter or just starting your creative journey, we have something special for everyone.</p>
<p>Join our community of creative minds and let your imagination soar!</p>
</div>
</div>
</div>
<!-- Business Contact Information -->
<section style="padding: 60px 0 40px; background: white">
<div class="container" style="max-width: 1000px">
<div style="text-align: center; margin-bottom: 48px">
<h2
style="
font-size: 2rem;
font-weight: 700;
color: #2d3436;
margin-bottom: 12px;
"
>
Our Contact Information
</h2>
<p style="font-size: 1rem; color: #636e72">
Reach out to us through any of these channels
</p>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
"
>
<!-- Phone -->
<div
style="
background: #f8f9fa;
padding: 32px 24px;
border-radius: 12px;
text-align: center;
border: 2px solid #e1e8ed;
transition: all 0.3s;
"
onmouseover="this.style.borderColor='#667eea'; this.style.transform='translateY(-4px)';"
onmouseout="this.style.borderColor='#e1e8ed'; this.style.transform='translateY(0)';"
>
<div
style="
width: 64px;
height: 64px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
"
>
<i
class="bi bi-telephone"
style="font-size: 28px; color: white"
></i>
</div>
<h3
style="
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: #2d3436;
"
>
Phone
</h3>
<p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">
Give us a call
</p>
<a
href="tel:+1234567890"
style="
color: #667eea;
font-weight: 600;
text-decoration: none;
font-size: 16px;
"
>+1 (234) 567-8900</a
>
</div>
<!-- Email -->
<div
style="
background: #f8f9fa;
padding: 32px 24px;
border-radius: 12px;
text-align: center;
border: 2px solid #e1e8ed;
transition: all 0.3s;
"
onmouseover="this.style.borderColor='#667eea'; this.style.transform='translateY(-4px)';"
onmouseout="this.style.borderColor='#e1e8ed'; this.style.transform='translateY(0)';"
>
<div
style="
width: 64px;
height: 64px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
"
>
<i
class="bi bi-envelope"
style="font-size: 28px; color: white"
></i>
</div>
<h3
style="
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: #2d3436;
"
>
Email
</h3>
<p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">
Send us an email
</p>
<a
href="mailto:support@skyartshop.com"
style="
color: #667eea;
font-weight: 600;
text-decoration: none;
font-size: 16px;
"
>support@skyartshop.com</a
>
</div>
<!-- Location -->
<div
style="
background: #f8f9fa;
padding: 32px 24px;
border-radius: 12px;
text-align: center;
border: 2px solid #e1e8ed;
transition: all 0.3s;
"
onmouseover="this.style.borderColor='#667eea'; this.style.transform='translateY(-4px)';"
onmouseout="this.style.borderColor='#e1e8ed'; this.style.transform='translateY(0)';"
>
<div
style="
width: 64px;
height: 64px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
"
>
<i
class="bi bi-geo-alt"
style="font-size: 28px; color: white"
></i>
</div>
<h3
style="
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: #2d3436;
"
>
Location
</h3>
<p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">
Visit our shop
</p>
<p
style="
color: #667eea;
font-weight: 600;
margin: 0;
font-size: 16px;
line-height: 1.6;
"
>
123 Creative Street<br />Art District, CA 90210
</p>
</div>
</div>
<!-- Business Hours -->
<div
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
padding: 32px;
margin-top: 40px;
text-align: center;
color: white;
"
>
<h3 style="font-size: 20px; font-weight: 600; margin-bottom: 16px">
Business Hours
</h3>
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
max-width: 600px;
margin: 0 auto;
"
>
<div>
<p style="margin: 0; font-weight: 500; opacity: 0.9">
Monday - Friday
</p>
<p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 600">
9:00 AM - 6:00 PM
</p>
</div>
<div>
<p style="margin: 0; font-weight: 500; opacity: 0.9">Saturday</p>
<p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 600">
10:00 AM - 4:00 PM
</p>
</div>
<div>
<p style="margin: 0; font-weight: 500; opacity: 0.9">Sunday</p>
<p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 600">
Closed
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Form Section -->
<section
class="contact-section"
style="padding: 80px 0; background: #f8f9fa"
>
<div class="container" style="max-width: 800px">
<div style="text-align: center; margin-bottom: 40px">
<h2
style="
font-size: 2rem;
font-weight: 700;
color: #2d3436;
margin-bottom: 12px;
"
>
Send Us a Message
</h2>
<p style="font-size: 1rem; color: #636e72">
Fill out the form below and we'll get back to you within 24 hours
</p>
</div>
<div
class="contact-form-wrapper"
style="
background: white;
border-radius: 16px;
padding: 48px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
"
>
<form
id="contactForm"
style="display: flex; flex-direction: column; gap: 16px"
>
<!-- Name and Email Row -->
<div
style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px"
>
<!-- Name Field -->
<div class="form-group">
<label
for="name"
style="
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #2d3436;
font-size: 15px;
"
>
Full Name <span style="color: #ff6b6b">*</span>
</label>
<input
type="text"
id="name"
name="name"
required
placeholder="John Doe"
style="
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e8ed;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
font-family: 'Roboto', sans-serif;
"
onfocus="this.style.borderColor='#667eea'; this.style.outline='none';"
onblur="this.style.borderColor='#e1e8ed';"
/>
</div>
<!-- Email Field -->
<div class="form-group">
<label
for="email"
style="
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #2d3436;
font-size: 15px;
"
>
Email Address <span style="color: #ff6b6b">*</span>
</label>
<input
type="email"
id="email"
name="email"
required
placeholder="john@example.com"
style="
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e8ed;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
font-family: 'Roboto', sans-serif;
"
onfocus="this.style.borderColor='#667eea'; this.style.outline='none';"
onblur="this.style.borderColor='#e1e8ed';"
/>
</div>
</div>
<!-- Phone and Subject Row -->
<div
style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px"
>
<!-- Phone Field -->
<div class="form-group">
<label
for="phone"
style="
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #2d3436;
font-size: 15px;
"
>
Phone Number
<span style="color: #999; font-weight: 400">(Optional)</span>
</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="(123) 456-7890"
style="
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e8ed;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
font-family: 'Roboto', sans-serif;
"
onfocus="this.style.borderColor='#667eea'; this.style.outline='none';"
onblur="this.style.borderColor='#e1e8ed';"
/>
</div>
<!-- Subject Field -->
<div class="form-group">
<label
for="subject"
style="
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #2d3436;
font-size: 15px;
"
>
Subject <span style="color: #ff6b6b">*</span>
</label>
<input
type="text"
id="subject"
name="subject"
required
placeholder="How can we help you?"
style="
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e8ed;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
font-family: 'Roboto', sans-serif;
"
onfocus="this.style.borderColor='#667eea'; this.style.outline='none';"
onblur="this.style.borderColor='#e1e8ed';"
/>
</div>
</div>
<!-- Message Field -->
<div class="form-group">
<label
for="message"
style="
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #2d3436;
font-size: 15px;
"
>
Message <span style="color: #ff6b6b">*</span>
</label>
<textarea
id="message"
name="message"
required
rows="6"
placeholder="Tell us more about your inquiry..."
style="
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e8ed;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
resize: vertical;
font-family: 'Roboto', sans-serif;
line-height: 1.6;
"
onfocus="this.style.borderColor='#667eea'; this.style.outline='none';"
onblur="this.style.borderColor='#e1e8ed';"
></textarea>
</div>
<!-- Submit Button -->
<div style="margin-top: 8px">
<button
type="submit"
style="
width: 100%;
padding: 16px 32px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
font-family: 'Roboto', sans-serif;
"
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(102,126,234,0.4)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';"
>
<i class="bi bi-send" style="margin-right: 8px"></i>
Send Message
</button>
</div>
<!-- Success/Error Message -->
<div
id="formMessage"
style="
display: none;
padding: 16px;
border-radius: 8px;
text-align: center;
font-weight: 500;
"
></div>
</form>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h2>Sky Art Shop</h2>
<p>Follow Us</p>
<div class="social-links">
<a href="#instagram" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="/shop.html">Shop</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 by Sky Art Shop. All rights reserved.</p>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h3 class="footer-title">Sky Art Shop</h3>
<p class="footer-text">
Your destination for unique art pieces and creative supplies.
</p>
<div class="social-links">
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
</div>
</div>
<div class="footer-col">
<h4 class="footer-heading">Shop</h4>
<ul class="footer-links">
<li><a href="/shop.html">All Products</a></li>
<li><a href="/shop.html?category=paintings">Paintings</a></li>
<li><a href="/shop.html?category=prints">Prints</a></li>
<li><a href="/shop.html?category=supplies">Art Supplies</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">About</h4>
<ul class="footer-links">
<li><a href="/about.html">Our Story</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">Customer Service</h4>
<ul class="footer-links">
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Sky Art Shop. All rights reserved.</p>
</div>
</div>
</footer>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/cart.js"></script>
<script src="/assets/js/shopping.js"></script>
</body>
<script src="/assets/js/shopping.js"></script>
<script>
// Handle contact form submission
document
.getElementById("contactForm")
.addEventListener("submit", async function (e) {
e.preventDefault();
const formMessage = document.getElementById("formMessage");
const submitButton = e.target.querySelector('button[type="submit"]');
const originalButtonText = submitButton.innerHTML;
// Disable button and show loading state
submitButton.disabled = true;
submitButton.innerHTML =
'<i class="bi bi-hourglass-split" style="margin-right: 8px;"></i>Sending...';
// Get form data
const formData = {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
phone: document.getElementById("phone").value,
subject: document.getElementById("subject").value,
message: document.getElementById("message").value,
timestamp: new Date().toISOString(),
};
try {
// Simulate API call (replace with actual endpoint when ready)
await new Promise((resolve) => setTimeout(resolve, 1500));
// Show success message
formMessage.style.display = "block";
formMessage.style.background = "#d4edda";
formMessage.style.color = "#155724";
formMessage.style.border = "1px solid #c3e6cb";
formMessage.innerHTML =
'<i class="bi bi-check-circle" style="margin-right: 8px;"></i>Thank you! Your message has been sent successfully. We\'ll get back to you soon.';
// Reset form
e.target.reset();
// Log to console (for now)
console.log("Contact form submitted:", formData);
} catch (error) {
// Show error message
formMessage.style.display = "block";
formMessage.style.background = "#f8d7da";
formMessage.style.color = "#721c24";
formMessage.style.border = "1px solid #f5c6cb";
formMessage.innerHTML =
'<i class="bi bi-exclamation-circle" style="margin-right: 8px;"></i>Oops! Something went wrong. Please try again or email us directly.';
console.error("Contact form error:", error);
} finally {
// Re-enable button
submitButton.disabled = false;
submitButton.innerHTML = originalButtonText;
// Hide message after 5 seconds
setTimeout(() => {
formMessage.style.display = "none";
}, 5000);
}
});
</script>
</body>
</html>

267
website/public/home.html
View File

@@ -22,94 +22,127 @@
<link rel="stylesheet" href="/assets/css/navbar.css" />
<link rel="stylesheet" href="/assets/css/shopping.css" />
</head>
<body> <!-- Modern Navigation -->
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg" alt="Sky Art Shop Logo" class="brand-logo" />
<span class="brand-name">Sky Art Shop</span>
</a>
<body>
<!-- Modern Navigation -->
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img
src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg"
alt="Sky Art Shop Logo"
class="brand-logo"
/>
<span class="brand-name">Sky Art Shop</span>
</a>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item">
<a href="/home.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/shop.html" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="/portfolio.html" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="/blog.html" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link">Contact</a>
</li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button
class="action-btn"
id="wishlistToggle"
aria-label="Wishlist"
>
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
</div>
<div class="dropdown-foot">
<a href="/shop.html" class="btn-outline">Continue Shopping</a>
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button
class="action-btn"
id="cartToggle"
aria-label="Shopping Cart"
>
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
</div>
<div class="dropdown-foot">
<div class="cart-summary">
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full"
>Proceed to Checkout</a
>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</button>
</div>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item"><a href="/home.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/shop.html" class="nav-link">Shop</a></li>
<li class="nav-item"><a href="/portfolio.html" class="nav-link">Portfolio</a></li>
<li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="/blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a></li>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
<li><a href="/shop.html" class="mobile-link">Shop</a></li>
<li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
<li><a href="/about.html" class="mobile-link">About</a></li>
<li><a href="/blog.html" class="mobile-link">Blog</a></li>
<li><a href="/contact.html" class="mobile-link">Contact</a></li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button class="action-btn" id="wishlistToggle" aria-label="Wishlist">
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose"><i class="bi bi-x-lg"></i></button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
</div>
<div class="dropdown-foot">
<a href="/shop.html" class="btn-outline">Continue Shopping</a>
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button class="action-btn" id="cartToggle" aria-label="Shopping Cart">
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose"><i class="bi bi-x-lg"></i></button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
</div>
<div class="dropdown-foot">
<div class="cart-summary">
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full">Proceed to Checkout</a>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose"><i class="bi bi-x-lg"></i></button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
<li><a href="/shop.html" class="mobile-link">Shop</a></li>
<li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
<li><a href="/about.html" class="mobile-link">About</a></li>
<li><a href="/blog.html" class="mobile-link">Blog</a></li>
<li><a href="/contact.html" class="mobile-link">Contact</a></li>
</ul>
</div>
</nav>
</nav>
<!-- Hero Section -->
<section class="hero">
@@ -190,37 +223,53 @@
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h2 id="footerSiteName">Sky Art Shop</h2>
<p>Follow Us</p>
<div class="footer-grid">
<div class="footer-col">
<h3 class="footer-title" id="footerSiteName">Sky Art Shop</h3>
<p class="footer-text">
Your destination for unique art pieces and creative supplies.
</p>
<div class="social-links">
<a href="#instagram" aria-label="Instagram">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
/>
</svg>
</a>
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
</div>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="/shop.html">Shop</a></li>
<li><a href="/about.html">About</a></li>
<div class="footer-col">
<h4 class="footer-heading">Shop</h4>
<ul class="footer-links">
<li><a href="/shop.html">All Products</a></li>
<li><a href="/shop.html?category=paintings">Paintings</a></li>
<li><a href="/shop.html?category=prints">Prints</a></li>
<li><a href="/shop.html?category=supplies">Art Supplies</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">About</h4>
<ul class="footer-links">
<li><a href="/about.html">Our Story</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="/admin/login.html">Admin</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">Customer Service</h4>
<ul class="footer-links">
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p id="footerText">© 2025 by Sky Art Shop. All rights reserved.</p>
<p id="footerText">&copy; 2025 Sky Art Shop. All rights reserved.</p>
</div>
</div>
</footer>
@@ -309,5 +358,5 @@
loadFeaturedProducts();
</script>
<script src="/assets/js/shopping.js"></script>
</body>
</body>
</html>

167
website/public/portfolio.html
View File

@@ -137,125 +137,6 @@
</ul>
</div>
</nav>
<nav class="modern-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand">
<a href="/home.html" class="brand-link">
<img
src="/uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg"
alt="Sky Art Shop Logo"
class="brand-logo"
/>
<span class="brand-name">Sky Art Shop</span>
</a>
</div>
<div class="navbar-menu">
<ul class="nav-menu-list">
<li class="nav-item">
<a href="/home.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/shop.html" class="nav-link">Shop</a>
</li>
<li class="nav-item">
<a href="/portfolio.html" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="/blog.html" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link">Contact</a>
</li>
</ul>
</div>
<div class="navbar-actions">
<div class="action-item wishlist-dropdown-wrapper">
<button
class="action-btn"
id="wishlistToggle"
aria-label="Wishlist"
>
<i class="bi bi-heart"></i>
<span class="action-badge" id="wishlistCount">0</span>
</button>
<div class="action-dropdown wishlist-dropdown" id="wishlistPanel">
<div class="dropdown-head">
<h3>My Wishlist</h3>
<button class="dropdown-close" id="wishlistClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="wishlistContent">
<p class="empty-state">Your wishlist is empty</p>
</div>
<div class="dropdown-foot">
<a href="/shop.html" class="btn-outline">Continue Shopping</a>
</div>
</div>
</div>
<div class="action-item cart-dropdown-wrapper">
<button
class="action-btn"
id="cartToggle"
aria-label="Shopping Cart"
>
<i class="bi bi-cart3"></i>
<span class="action-badge" id="cartCount">0</span>
</button>
<div class="action-dropdown cart-dropdown" id="cartPanel">
<div class="dropdown-head">
<h3>Shopping Cart</h3>
<button class="dropdown-close" id="cartClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="dropdown-body" id="cartContent">
<p class="empty-state">Your cart is empty</p>
</div>
<div class="dropdown-foot">
<div class="cart-summary">
<span class="summary-label">Subtotal:</span>
<span class="summary-value" id="cartSubtotal">$0.00</span>
</div>
<a href="/checkout.html" class="btn-primary-full"
>Proceed to Checkout</a
>
<a href="/shop.html" class="btn-text">Continue Shopping</a>
</div>
</div>
</div>
<button class="mobile-toggle" id="mobileMenuToggle" aria-label="Menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-header">
<span class="mobile-brand">Sky Art Shop</span>
<button class="mobile-close" id="mobileMenuClose">
<i class="bi bi-x-lg"></i>
</button>
</div>
<ul class="mobile-menu-list">
<li><a href="/home.html" class="mobile-link">Home</a></li>
<li><a href="/shop.html" class="mobile-link">Shop</a></li>
<li><a href="/portfolio.html" class="mobile-link">Portfolio</a></li>
<li><a href="/about.html" class="mobile-link">About</a></li>
<li><a href="/blog.html" class="mobile-link">Blog</a></li>
<li><a href="/contact.html" class="mobile-link">Contact</a></li>
</ul>
</div>
</nav>
<section class="about-hero">
<div class="container">
@@ -301,27 +182,53 @@
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h2>Sky Art Shop</h2>
<p>Follow Us</p>
<div class="footer-grid">
<div class="footer-col">
<h3 class="footer-title">Sky Art Shop</h3>
<p class="footer-text">
Your destination for unique art pieces and creative supplies.
</p>
<div class="social-links">
<a href="#instagram" aria-label="Instagram"
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-link"
><i class="bi bi-instagram"></i
></a>
<a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
<a href="#" class="social-link"
><i class="bi bi-pinterest"></i
></a>
</div>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="/shop.html">Shop</a></li>
<li><a href="/about.html">About</a></li>
<div class="footer-col">
<h4 class="footer-heading">Shop</h4>
<ul class="footer-links">
<li><a href="/shop.html">All Products</a></li>
<li><a href="/shop.html?category=paintings">Paintings</a></li>
<li><a href="/shop.html?category=prints">Prints</a></li>
<li><a href="/shop.html?category=supplies">Art Supplies</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">About</h4>
<ul class="footer-links">
<li><a href="/about.html">Our Story</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="footer-heading">Customer Service</h4>
<ul class="footer-links">
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 by Sky Art Shop. All rights reserved.</p>
<p>&copy; 2025 Sky Art Shop. All rights reserved.</p>
</div>
</div>
</footer>

48
website/public/product.html
View File

@@ -121,7 +121,7 @@
}
try {
const response = await fetch(\`/api/products/\${productId}\`);
const response = await fetch(`/api/products/${productId}`);
const data = await response.json();
if (!data.success || !data.product) {
@@ -129,9 +129,9 @@
}
const product = data.product;
document.title = \`\${product.name} - Sky Art Shop\`;
document.title = `${product.name} - Sky Art Shop`;
document.getElementById('productDetail').innerHTML = \`
document.getElementById('productDetail').innerHTML = `
<div style="font-family: 'Roboto', sans-serif;">
<nav style="background: white; padding: 16px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px;">
@@ -139,7 +139,7 @@
<span style="color: #d1d5db;">/</span>
<a href="/shop.html" style="color: #6b7280; text-decoration: none;">Shop</a>
<span style="color: #d1d5db;">/</span>
<span style="color: #6b7280;">\${product.name}</span>
<span style="color: #6b7280;">${product.name}</span>
</div>
</nav>
@@ -147,48 +147,48 @@
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px;">
<div>
<div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<img src="\${product.imageurl || '/assets/images/placeholder.jpg'}"
alt="\${product.name}"
<img src="${product.imageurl || '/assets/images/placeholder.jpg'}"
alt="${product.name}"
style="width: 100%; height: auto; display: block;"
onerror="this.src='/assets/images/placeholder.jpg'" />
</div>
</div>
<div style="padding: 20px 0;">
<h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">\${product.name}</h1>
<h1 style="font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; line-height: 1.2;">${product.name}</h1>
<div style="display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px;">
<p style="font-size: 36px; font-weight: 700; color: #6b46c1; margin: 0;">$\${parseFloat(product.price).toFixed(2)}</p>
\${product.stockquantity > 0 ?
\`<span style="color: #10b981; font-weight: 500;">In Stock (\${product.stockquantity} available)</span>\` :
\`<span style="color: #ef4444; font-weight: 500;">Out of Stock</span>\`
<p style="font-size: 36px; font-weight: 700; color: #6b46c1; margin: 0;">$${parseFloat(product.price).toFixed(2)}</p>
${product.stockquantity > 0 ?
`<span style="color: #10b981; font-weight: 500;">In Stock (${product.stockquantity} available)</span>` :
`<span style="color: #ef4444; font-weight: 500;">Out of Stock</span>`
}
</div>
\${product.shortdescription ? \`
<p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">\${product.shortdescription}</p>
\` : ''}
${product.shortdescription ? `
<p style="font-size: 18px; color: #4b5563; line-height: 1.6; margin-bottom: 24px;">${product.shortdescription}</p>
` : ''}
\${product.description ? \`
${product.description ? `
<div style="margin-bottom: 32px;">
<h3 style="font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px;">Description</h3>
<p style="color: #6b7280; line-height: 1.7;">\${product.description}</p>
<p style="color: #6b7280; line-height: 1.7;">${product.description}</p>
</div>
\` : ''}
` : ''}
\${product.category ? \`
${product.category ? `
<p style="margin-bottom: 16px;">
<span style="font-weight: 500; color: #6b7280;">Category:</span>
<span style="display: inline-block; margin-left: 8px; padding: 4px 12px; background: #f3f4f6; border-radius: 6px; font-size: 14px;">\${product.category}</span>
<span style="display: inline-block; margin-left: 8px; padding: 4px 12px; background: #f3f4f6; border-radius: 6px; font-size: 14px;">${product.category}</span>
</p>
\` : ''}
` : ''}
\${product.color ? \`
${product.color ? `
<p style="margin-bottom: 24px;">
<span style="font-weight: 500; color: #6b7280;">Color:</span>
<span style="margin-left: 8px;">\${product.color}</span>
<span style="margin-left: 8px;">${product.color}</span>
</p>
\` : ''}
` : ''}
<div style="display: flex; gap: 12px; margin-top: 32px;">
<button onclick="addToCart()"
@@ -213,7 +213,7 @@
</div>
</div>
</div>
\`;
`;
document.getElementById('loading').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';

1056
website/public/shop.html
View File

File diff suppressed because it is too large Load Diff

102
website/public/test-products.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<title>Products Test</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.product-card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
}
.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 4px;
}
.product-card h3 {
margin: 10px 0;
font-size: 16px;
}
.product-card .price {
color: #ff6b6b;
font-weight: bold;
font-size: 18px;
}
.loading {
text-align: center;
padding: 40px;
}
</style>
</head>
<body>
<h1>Product API Test</h1>
<div id="status" class="loading">Loading products...</div>
<div id="products" class="product-grid"></div>
<script>
async function testProducts() {
const statusDiv = document.getElementById("status");
const productsDiv = document.getElementById("products");
try {
console.log("Fetching products from /api/products...");
const response = await fetch("/api/products");
console.log("Response status:", response.status);
const data = await response.json();
console.log("Response data:", data);
if (data.success && data.products) {
const products = data.products;
statusDiv.innerHTML = `<strong>Success!</strong> Loaded ${products.length} products`;
statusDiv.style.color = "green";
productsDiv.innerHTML = products
.map(
(p) => `
<div class="product-card">
<img src="${
p.imageurl || "/assets/images/placeholder.jpg"
}"
alt="${p.name}"
onerror="this.src='/assets/images/placeholder.jpg'">
<h3>${p.name}</h3>
<p>${p.shortdescription || p.description || ""}</p>
<p class="price">$${parseFloat(p.price).toFixed(
2
)}</p>
</div>
`
)
.join("");
console.log("Products rendered successfully");
} else {
statusDiv.innerHTML = "<strong>Error:</strong> No products found";
statusDiv.style.color = "red";
console.error("No products in response");
}
} catch (error) {
statusDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
statusDiv.style.color = "red";
console.error("Error loading products:", error);
}
}
testProducts();
</script>
</body>
</html>

24
website/public/test-shop.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="margin: 0; padding: 20px; background: white;">
<h1>Products Grid Test</h1>
<div id="productsGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;">
<div style="border: 1px solid #ccc; padding: 16px; border-radius: 8px;">
<img src="/assets/images/products/washi-1.jpg" style="width: 100%; height: 200px; object-fit: cover;" alt="Test">
<h3>Test Product 1</h3>
<p style="color: #ff6b6b; font-weight: bold;">$15.99</p>
</div>
<div style="border: 1px solid #ccc; padding: 16px; border-radius: 8px;">
<img src="/assets/images/products/washi-2.jpg" style="width: 100%; height: 200px; object-fit: cover;" alt="Test">
<h3>Test Product 2</h3>
<p style="color: #ff6b6b; font-weight: bold;">$8.99</p>
</div>
</div>
<script>
console.log('Test page loaded');
</script>
</body>
</html>