- diff --git a/search.html b/search.html index e60c932..b3c9bc1 100644 --- a/search.html +++ b/search.html @@ -49,7 +49,6 @@
- diff --git a/seating.html b/seating.html index ac0a59b..ed64770 100644 --- a/seating.html +++ b/seating.html @@ -52,7 +52,6 @@
- diff --git a/server.js b/server.js index cc1ea45..5690812 100644 --- a/server.js +++ b/server.js @@ -14,6 +14,10 @@ app.use((req, res, next) => { // Middleware to parse JSON bodies app.use(express.json()); +// Serve static frontend files +app.use(express.static(__dirname)); + + // Gracefully handle malformed JSON bodies app.use((err, req, res, next) => { if (err instanceof SyntaxError && err.status === 400 && 'body' in err) { diff --git a/story.html b/story.html index f96e3eb..4e65b53 100644 --- a/story.html +++ b/story.html @@ -48,7 +48,6 @@
- diff --git a/style.css b/style.css index 6b58ded..77ba046 100644 --- a/style.css +++ b/style.css @@ -12,7 +12,7 @@ html { } body { - padding-top: 70px; + padding-top: 110px; background-color: var(--bg); color: var(--text); @@ -21,6 +21,7 @@ body { color 0.3s ease; } + :root { --golden-hour: #f1b555; --antique-brown: #9b281a; @@ -140,18 +141,29 @@ li { } .nav-badge { - background: #ff0055; - color: var(--white); + background: #F57C00; + color: #ffffff; border-radius: 50%; - padding: 2px 6px; + width: 18px; + height: 18px; + min-width: 18px; + padding: 0; font-size: 10px; - position: absolute; - top: -8px; - right: -8px; font-weight: 700; + position: absolute; + top: -5px; + right: -6px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 6px rgba(245, 124, 0, 0.35); + border: 1.5px solid #ffffff; + line-height: 1; display: none; } + + .g-one-half { gap: 1.5rem; } @@ -260,47 +272,90 @@ img { header { position: fixed; - top: 0; + top: 22px; left: 0; right: 0; z-index: 1000; - background: var(--nav-bg); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border-bottom: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); - transition: - background 0.3s ease, - box-shadow 0.3s ease; - padding: 20px; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + display: flex; + justify-content: center; + pointer-events: none; + padding: 0 1rem; + transition: all 0.3s ease; +} + +.navbar { + pointer-events: auto; + width: min(95%, 1600px); + height: 72px; + background: #FFFFFF; + border-radius: 9999px; + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08); + padding: 0 32px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + transition: all 0.3s ease; +} + +header.navbar-scrolled { + top: 14px; +} + +header.navbar-scrolled .navbar { + box-shadow: 0 16px 45px rgba(0, 0, 0, 0.12); } .logo { - font-size: 1.5rem; + font-size: 24px; + font-weight: 800; + letter-spacing: 1px; text-transform: uppercase; - font-weight: bold; + color: #111111; white-space: nowrap; flex-shrink: 0; + display: flex; + align-items: center; + gap: 1px; + transition: opacity 0.25s ease; +} + +.logo .logo-dot { + color: #F57C00; +} + +.logo:hover { + opacity: 0.85; +} + +.nav-divider { + width: 1px; + height: 28px; + background-color: #EAEAEA; + margin: 0 16px; + flex-shrink: 0; } .icon { - font-size: 1.1rem; - /* added additional stylings */ + font-size: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; - transition: 0.3s ease-in-out; - padding: 0.5rem; - color: var(--text); + transition: color 0.25s ease, transform 0.25s ease; + padding: 0.35rem; + border-radius: 50%; + color: #222222; } .icon:hover { - color: var(--golden-hour); - transform: scale(1.2); + color: #F57C00; + transform: scale(1.08); + background: transparent; } + + /* */ .navList { position: fixed; @@ -2495,36 +2550,90 @@ input:focus { } @media screen and (min-width: 900px) { - .navList { + .navList, + [data-theme="dark"] .navList, + body.dark-mode .navList { position: static; width: auto; height: auto; - background: transparent; - box-shadow: none; + background: transparent !important; + background-color: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; + border: none !important; padding: 0; flex-direction: row; - gap: 1.8rem; + gap: 36px; visibility: visible !important; right: auto; z-index: auto; transition: none; overflow: visible; display: flex !important; + align-items: center; } .navList[aria-hidden="true"] { visibility: visible; } + .navList li, + .navList .link, + [data-theme="dark"] .navList li, + [data-theme="dark"] .navList .link, + body.dark-mode .navList li, + body.dark-mode .navList .link { + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + border: none !important; + } + .navList .link { - font-size: 0.95rem; - color: var(--back); + position: relative; + font-size: 16px; + color: #222222; font-weight: 500; text-transform: capitalize; + padding: 0.25rem 0; + transition: color 0.3s ease, transform 0.3s ease; + display: inline-block; + } + + .navList .link::after { + content: ''; + position: absolute; + bottom: -8px; + left: 50%; + width: 0; + height: 2px; + background: #F57C00; + border-radius: 999px; + transition: width 0.3s ease, left 0.3s ease; } .navList .link:hover { - color: var(--antique-brown); - transform: none; + color: #F57C00; + transform: translateY(-2px); + } + + .navList .link:hover::after { + width: 100%; + left: 0; + } + + .navList .link.active, + .navList .link[aria-current="page"] { + color: #F57C00; + font-weight: 600; + } + + .navList .link.active::after, + .navList .link[aria-current="page"]::after { + width: 100%; + left: 0; + background: #F57C00; + box-shadow: none; } .nav-close-item, @@ -2536,6 +2645,7 @@ input:focus { } } + @media screen and (max-width: 899px) { .navList { position: fixed; @@ -2543,14 +2653,46 @@ input:focus { right: -100%; width: 300px; height: 100vh; - background: var(--antique-brown); + background: #FFFFFF; + border-left: 1px solid #EAEAEA; + box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08); + padding: 6rem 2.5rem 3rem 2.5rem; + display: flex; + flex-direction: column; + gap: 1.5rem; visibility: hidden; - transition: right 0.45s cubic-bezier(0.77, 0, 0.175, 1); + transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease; + z-index: 1001; + } + + .navList .link { + font-size: 1.15rem; + color: #222222; + text-transform: capitalize; + font-weight: 500; + transition: color 0.25s ease, transform 0.25s ease; + display: inline-block; + } + + .navList .link:hover, + .navList .link.active { + color: #F57C00; + transform: translateX(6px); + } + + .nav-close-btn { + background: #F5F5F5; } + .nav-close-btn i { + color: #222222; + } + #menu { - display: block !important; + display: flex !important; } } + + /* ============================================ LIVE FORM VALIDATION ============================================ */ @@ -2770,15 +2912,83 @@ input:focus { } } -body.dark-mode { - background-color: #121212; - color: white; +/* Dark Theme High-Contrast Floating Pill Navbar */ +[data-theme="dark"] .navbar, +body.dark-mode .navbar { + background: #1E212A !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } -body.dark-mode .navbar { - background-color: #1e1e1e; +[data-theme="dark"] header.navbar-scrolled .navbar, +body.dark-mode header.navbar-scrolled .navbar { + box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; + border-color: rgba(255, 255, 255, 0.18) !important; +} + +[data-theme="dark"] .logo, +body.dark-mode .logo { + color: #FFFFFF !important; +} + +[data-theme="dark"] .navList .link, +body.dark-mode .navList .link, +[data-theme="dark"] .navList li, +body.dark-mode .navList li { + color: #E4E4E7 !important; + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; +} + +[data-theme="dark"] .navList .link:hover, +body.dark-mode .navList .link:hover, +[data-theme="dark"] .navList .link.active, +body.dark-mode .navList .link.active { + color: #F57C00 !important; + background: transparent !important; + background-color: transparent !important; +} + + +[data-theme="dark"] .nav-divider, +body.dark-mode .nav-divider { + background-color: rgba(255, 255, 255, 0.15) !important; +} + +[data-theme="dark"] .icon, +body.dark-mode .icon { + color: #E4E4E7 !important; +} + +[data-theme="dark"] .icon:hover, +body.dark-mode .icon:hover { + color: #F57C00 !important; } +[data-theme="dark"] .nav-badge, +body.dark-mode .nav-badge { + border-color: #1E212A !important; +} + +@media screen and (max-width: 899px) { + [data-theme="dark"] .navList, + body.dark-mode .navList { + background: #1C1E24 !important; + border-left: 1px solid rgba(255, 255, 255, 0.12) !important; + box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important; + } + [data-theme="dark"] .nav-close-btn, + body.dark-mode .nav-close-btn { + background: rgba(255, 255, 255, 0.1) !important; + } + [data-theme="dark"] .nav-close-btn i, + body.dark-mode .nav-close-btn i { + color: #FFFFFF !important; + } +} + + body.dark-mode .product-card { background-color: #222; color: white; @@ -2834,16 +3044,6 @@ span, color: #cccccc; } -[data-theme="dark"] header { - background: var(--nav-bg); - border-bottom: 1px solid var(--nav-border); - box-shadow: var(--nav-shadow); -} - -[data-theme="dark"] .navList { - background: var(--surface); - border-left: 1px solid var(--border); -} [data-theme="dark"] .bed-details { background-color: rgba(30, 30, 30, 0.8); @@ -2866,32 +3066,80 @@ span, background: rgba(0, 0, 0, 0.6); } -/* Theme Toggle Button */ +/* ── Theme Toggle Button (Sun ↔ Moon animated switch) ── */ .theme-toggle { background: none; border: none; - color: var(--text); - font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; - transition: - transform 0.3s ease, - color 0.3s ease; - padding: 0.5rem; + position: relative; + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; + padding: 0; + color: #222222; + transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease; + flex-shrink: 0; } .theme-toggle:hover { - color: var(--accent); - transform: scale(1.1); + color: #F57C00; + transform: scale(1.08); + opacity: 0.9; } .theme-toggle:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; + outline: 2px solid #F57C00; + outline-offset: 3px; } +/* Sun and Moon SVG icons inside the toggle */ +.theme-toggle .ts-icon { + position: absolute; + width: 20px; + height: 20px; + transition: + transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + pointer-events: none; +} + +/* Light mode: Sun visible, Moon hidden below */ +.theme-toggle .ts-sun { + transform: scale(1) translateY(0); + opacity: 1; +} +.theme-toggle .ts-moon { + transform: scale(0.5) translateY(20px); + opacity: 0; +} + +/* Dark mode: Moon visible, Sun hidden below */ +[data-theme="dark"] .theme-toggle .ts-sun, +body.dark-mode .theme-toggle .ts-sun { + transform: scale(0.5) translateY(20px); + opacity: 0; +} +[data-theme="dark"] .theme-toggle .ts-moon, +body.dark-mode .theme-toggle .ts-moon { + transform: scale(1) translateY(0); + opacity: 1; +} + +/* Dark mode icon color */ +[data-theme="dark"] .theme-toggle, +body.dark-mode .theme-toggle { + color: #E4E4E7; +} +[data-theme="dark"] .theme-toggle:hover, +body.dark-mode .theme-toggle:hover { + color: #F57C00; +} + + /* Fix product card shadow */ .product-card { background-color: var(--bg); @@ -3067,24 +3315,7 @@ img.lazy-image-fade.loaded { -/* Theme Toggle Enhancements */ -.theme-toggle { - background: none; - border: none; - cursor: pointer; - font-size: 1.3rem; - color: var(--text); - padding: 0; - display: flex; - align-items: center; - justify-content: center; - transition: color 0.3s ease, transform 0.3s ease; -} -.theme-toggle:hover { - color: var(--golden-hour); - transform: scale(1.1); -} /* Respect users who prefer reduced motion */ @@ -3168,3 +3399,4 @@ body.has-custom-cursor .btn { } } + diff --git a/tables.html b/tables.html index 406ec0a..8091150 100644 --- a/tables.html +++ b/tables.html @@ -52,7 +52,6 @@
- diff --git a/app.js b/app.js index da6e333..0307971 100644 --- a/app.js +++ b/app.js @@ -1,7 +1,39 @@ +// Navbar Scroll Listener & Active Link Handler +window.addEventListener("scroll", () => { + const header = document.querySelector("header"); + if (header) { + if (window.scrollY > 20) { + header.classList.add("navbar-scrolled"); + } else { + header.classList.remove("navbar-scrolled"); + } + } +}); + +document.addEventListener("DOMContentLoaded", () => { + const links = document.querySelectorAll(".navList .link"); + const currentPath = window.location.pathname.toLowerCase(); + + links.forEach((link) => { + const href = link.getAttribute("href"); + if (!href) return; + const cleanHref = href.toLowerCase(); + + if ( + (cleanHref !== "#" && currentPath.endsWith(cleanHref)) || + (cleanHref === "index.html" && (currentPath.endsWith("/") || currentPath.endsWith("index.html") || currentPath === "")) + ) { + link.classList.add("active"); + link.setAttribute("aria-current", "page"); + } + }); +}); + const menuBtn = document.getElementById("menu"); const navList = document.getElementById("list"); const navClose = document.getElementById("navClose"); + if (menuBtn && navList) { menuBtn.addEventListener("click", (e) => { e.preventDefault(); @@ -996,55 +1028,74 @@ function shareProduct(title, urlEnding) { -/* ---- THEME TOGGLE LOGIC ---- */ -document.addEventListener("DOMContentLoaded", () => { - const themeToggle = document.getElementById("themeToggle"); - const themeIcon = document.getElementById("themeIcon"); +/* ---- THEME TOGGLE LOGIC (Sun ↔ Moon animated switch) ---- */ +(function () { + // Inline SVG markup for Sun and Moon — matches lucide-react icon paths + const SUN_SVG = ``; + + const MOON_SVG = ``; + + function injectIcons() { + document.querySelectorAll('.theme-toggle').forEach(function (btn) { + // Only inject once + if (btn.querySelector('.ts-sun')) return; + // Clear any existing children (FontAwesome icon etc.) + btn.innerHTML = SUN_SVG + MOON_SVG; + btn.setAttribute('aria-label', 'Toggle light / dark mode'); + }); + } function applyTheme(theme) { - document.documentElement.setAttribute("data-theme", theme); - if (themeIcon) { - if (theme === "dark") { - themeIcon.classList.remove("fa-moon"); - themeIcon.classList.add("fa-sun"); - } else { - themeIcon.classList.remove("fa-sun"); - themeIcon.classList.add("fa-moon"); - } - } + document.documentElement.setAttribute('data-theme', theme); + document.documentElement.classList.toggle('dark', theme === 'dark'); + // Update aria-pressed on all toggle buttons + document.querySelectorAll('.theme-toggle').forEach(function (btn) { + btn.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false'); + }); } - const currentTheme = - document.documentElement.getAttribute("data-theme") || "light"; - applyTheme(currentTheme); - - if (themeToggle) { - themeToggle.addEventListener("click", () => { - const current = document.documentElement.getAttribute("data-theme"); - const next = current === "dark" ? "light" : "dark"; - - // Rotating icon animation - if (themeIcon) { - themeIcon.style.transform = "rotate(180deg) scale(0)"; - themeIcon.style.transition = "transform 0.15s ease-in-out"; - - setTimeout(() => { - applyTheme(next); - localStorage.setItem("theme", next); - - themeIcon.style.transform = "rotate(360deg) scale(1)"; - setTimeout(() => { - themeIcon.style.transition = ""; - themeIcon.style.transform = ""; - }, 150); - }, 150); - } else { + function init() { + // Resolve initial theme (init-theme.js may have already set it) + const saved = localStorage.getItem('theme'); + const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + const initial = saved || (prefersDark ? 'dark' : 'light'); + + injectIcons(); + applyTheme(initial); + + document.querySelectorAll('.theme-toggle').forEach(function (btn) { + btn.addEventListener('click', function () { + const current = document.documentElement.getAttribute('data-theme') || 'light'; + const next = current === 'dark' ? 'light' : 'dark'; + localStorage.setItem('theme', next); applyTheme(next); - localStorage.setItem("theme", next); - } + }); }); } -}); + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); + diff --git a/cart.html b/cart.html index 047d252..91175d0 100644 --- a/cart.html +++ b/cart.html @@ -53,19 +53,19 @@
- diff --git a/furniture.html b/furniture.html index 86dbdcb..2cc8301 100644 --- a/furniture.html +++ b/furniture.html @@ -43,19 +43,19 @@
Order Placed Successfully!
-
diff --git a/designers.html b/designers.html
index 7ff42ff..472d733 100644
--- a/designers.html
+++ b/designers.html
@@ -47,19 +47,19 @@
-
+
+
+
diff --git a/faq.html b/faq.html
index d74fc4f..0e7db08 100644
--- a/faq.html
+++ b/faq.html
@@ -48,7 +48,6 @@