feat: implement responsive mobile menu and navigation enhancements across all pages
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
George Birikorang 2025-09-08 20:52:51 -07:00
parent d8d9f1a584
commit 228095ed83
11 changed files with 3592 additions and 49 deletions

170
blog.html
View file

@ -20,6 +20,16 @@
color: #b8873f !important; color: #b8873f !important;
font-weight: 500; font-weight: 500;
} }
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style> </style>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
@ -29,7 +39,7 @@
<body class="bg-white font-sans text-gray-800"> <body class="bg-white font-sans text-gray-800">
<!-- Header --> <!-- Header -->
<header <header
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50" class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
> >
<nav class="h-full"> <nav class="h-full">
<div <div
@ -40,12 +50,12 @@
<img <img
src="assets/images/khy_logo.png" src="assets/images/khy_logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm" class="h-12 sm:h-20 w-auto drop-shadow-sm"
/> />
</div> </div>
<!-- Navigation --> <!-- Desktop Navigation -->
<ul class="flex space-x-10"> <ul class="hidden sm:flex space-x-10">
<li> <li>
<a <a
href="index.html" href="index.html"
@ -103,13 +113,149 @@
> >
</li> </li>
</ul> </ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
<!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div
class="flex items-center justify-between p-5 border-b border-gray-200"
>
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="index.html#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="index.html#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="index.html#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main> <main>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-80 mt-28"> <section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image --> <!-- Background Image -->
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<img <img
@ -140,7 +286,7 @@
<div class="max-w-7xl mx-auto px-5"> <div class="max-w-7xl mx-auto px-5">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-16"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
<!-- Main Blog Content --> <!-- Main Blog Content -->
<div class="lg:col-span-2"> <div class="lg:col-span-2 order-2 lg:order-1">
<div id="main-blog-content"> <div id="main-blog-content">
<!-- Blog posts will be dynamically loaded here --> <!-- Blog posts will be dynamically loaded here -->
</div> </div>
@ -182,9 +328,11 @@
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="lg:col-span-1"> <div class="lg:col-span-1 order-1 lg:order-2 flex flex-col">
<!-- Search --> <!-- Search -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8"> <div
class="bg-white p-6 rounded-lg shadow-sm mb-8 order-3 lg:order-1"
>
<div class="relative"> <div class="relative">
<input <input
id="blog-search-input" id="blog-search-input"
@ -201,7 +349,9 @@
</div> </div>
<!-- Categories --> <!-- Categories -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8"> <div
class="bg-white p-6 rounded-lg shadow-sm mb-8 order-2 lg:order-2"
>
<h3 class="font-playfair font-medium text-2xl text-black mb-6"> <h3 class="font-playfair font-medium text-2xl text-black mb-6">
Categories Categories
</h3> </h3>
@ -211,7 +361,7 @@
</div> </div>
<!-- Recent Posts --> <!-- Recent Posts -->
<div class="bg-white p-6 rounded-lg shadow-sm"> <div class="bg-white p-6 rounded-lg shadow-sm order-1 lg:order-3">
<h3 class="font-playfair font-medium text-2xl text-black mb-6"> <h3 class="font-playfair font-medium text-2xl text-black mb-6">
Recent Posts Recent Posts
</h3> </h3>

View file

@ -20,6 +20,16 @@
color: #b8873f !important; color: #b8873f !important;
font-weight: 500; font-weight: 500;
} }
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style> </style>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
@ -29,7 +39,7 @@
<body class="bg-white font-sans text-gray-800"> <body class="bg-white font-sans text-gray-800">
<!-- Header --> <!-- Header -->
<header <header
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50" class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
> >
<nav class="h-full"> <nav class="h-full">
<div <div
@ -40,12 +50,12 @@
<img <img
src="assets/images/khy_logo.png" src="assets/images/khy_logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm" class="h-12 sm:h-20 w-auto drop-shadow-sm"
/> />
</div> </div>
<!-- Navigation --> <!-- Desktop Navigation -->
<ul class="flex space-x-10"> <ul class="hidden sm:flex space-x-10">
<li> <li>
<a <a
href="index.html" href="index.html"
@ -103,13 +113,149 @@
> >
</li> </li>
</ul> </ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
<!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div
class="flex items-center justify-between p-5 border-b border-gray-200"
>
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="index.html#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="index.html#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="index.html#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main> <main>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-80 mt-28"> <section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image --> <!-- Background Image -->
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<img <img

View file

@ -157,6 +157,16 @@
.product-card:hover .product-card-description { .product-card:hover .product-card-description {
color: #666; color: #666;
} }
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style> </style>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
@ -166,7 +176,7 @@
<body class="bg-gray-50 font-sans text-gray-800"> <body class="bg-gray-50 font-sans text-gray-800">
<!-- Header --> <!-- Header -->
<header <header
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50" class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
> >
<nav class="h-full"> <nav class="h-full">
<div <div
@ -177,12 +187,12 @@
<img <img
src="assets/images/khy_logo.png" src="assets/images/khy_logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm" class="h-12 sm:h-20 w-auto drop-shadow-sm"
/> />
</div> </div>
<!-- Navigation --> <!-- Desktop Navigation -->
<ul class="flex space-x-10"> <ul class="hidden sm:flex space-x-10">
<li> <li>
<a <a
href="index.html" href="index.html"
@ -240,13 +250,149 @@
> >
</li> </li>
</ul> </ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
<!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div
class="flex items-center justify-between p-5 border-b border-gray-200"
>
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main> <main>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-screen mt-28"> <section class="relative h-screen mt-20 sm:mt-28">
<!-- Background Image --> <!-- Background Image -->
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<img <img

View file

@ -5,6 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Catalog - KHY</title> <title>Product Catalog - KHY</title>
<link rel="stylesheet" href="styles/main.css" /> <link rel="stylesheet" href="styles/main.css" />
<style>
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet" rel="stylesheet"
@ -12,7 +23,7 @@
</head> </head>
<body class="bg-white font-sans text-gray-800"> <body class="bg-white font-sans text-gray-800">
<!-- Header --> <!-- Header -->
<header class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"> <header class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50">
<nav class="h-full"> <nav class="h-full">
<div <div
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5" class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
@ -22,12 +33,12 @@
<img <img
src="assets/images/khy_logo.png" src="assets/images/khy_logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm" class="h-12 sm:h-20 w-auto drop-shadow-sm"
/> />
</div> </div>
<!-- Navigation --> <!-- Desktop Navigation -->
<ul class="flex space-x-10"> <ul class="hidden sm:flex space-x-10">
<li> <li>
<a <a
href="index.html" href="index.html"
@ -85,12 +96,137 @@
> >
</li> </li>
</ul> </ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div>
</nav> </nav>
</header> </header>
<!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div class="flex items-center justify-between p-5 border-b border-gray-200">
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="index.html#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="index.html#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="index.html#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main> <main>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-80 mt-28"> <section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image --> <!-- Background Image -->
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<img <img

View file

@ -5,6 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Comparison - KHY</title> <title>Product Comparison - KHY</title>
<link rel="stylesheet" href="styles/main.css" /> <link rel="stylesheet" href="styles/main.css" />
<style>
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet" rel="stylesheet"
@ -13,7 +24,7 @@
<body class="bg-white font-sans text-gray-800"> <body class="bg-white font-sans text-gray-800">
<!-- Header --> <!-- Header -->
<header <header
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50" class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
> >
<nav class="h-full"> <nav class="h-full">
<div <div
@ -24,12 +35,12 @@
<img <img
src="assets/images/khy_logo.png" src="assets/images/khy_logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm" class="h-12 sm:h-20 w-auto drop-shadow-sm"
/> />
</div> </div>
<!-- Navigation --> <!-- Desktop Navigation -->
<ul class="flex space-x-10"> <ul class="hidden sm:flex space-x-10">
<li> <li>
<a <a
href="index.html" href="index.html"
@ -87,11 +98,147 @@
> >
</li> </li>
</ul> </ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
<main class="pt-28"> <!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div
class="flex items-center justify-between p-5 border-b border-gray-200"
>
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="index.html#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="index.html#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="index.html#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main class="pt-20 sm:pt-28">
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-80"> <section class="relative h-80">
<!-- Background Image --> <!-- Background Image -->

View file

@ -5,6 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Detail - KHY</title> <title>Product Detail - KHY</title>
<link rel="stylesheet" href="styles/main.css" /> <link rel="stylesheet" href="styles/main.css" />
<style>
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet" rel="stylesheet"
@ -13,7 +24,7 @@
<body class="bg-white font-sans text-gray-800"> <body class="bg-white font-sans text-gray-800">
<!-- Header --> <!-- Header -->
<header <header
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50" class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
> >
<nav class="h-full"> <nav class="h-full">
<div <div
@ -24,12 +35,12 @@
<img <img
src="assets/images/khy_logo.png" src="assets/images/khy_logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm" class="h-12 sm:h-20 w-auto drop-shadow-sm"
/> />
</div> </div>
<!-- Navigation --> <!-- Desktop Navigation -->
<ul class="flex space-x-10"> <ul class="hidden sm:flex space-x-10">
<li> <li>
<a <a
href="index.html" href="index.html"
@ -87,11 +98,147 @@
> >
</li> </li>
</ul> </ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
<main class="pt-28"> <!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div
class="flex items-center justify-between p-5 border-b border-gray-200"
>
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="index.html#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="index.html#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="index.html#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main class="pt-20 sm:pt-28">
<!-- Product Details Section --> <!-- Product Details Section -->
<section class="relative w-full bg-white py-6"> <section class="relative w-full bg-white py-6">
<div class="max-w-7xl mx-auto px-5"> <div class="max-w-7xl mx-auto px-5">

View file

@ -20,6 +20,16 @@
color: #b8873f !important; color: #b8873f !important;
font-weight: 500; font-weight: 500;
} }
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style> </style>
<link <link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
@ -29,7 +39,7 @@
<body class="bg-white font-sans text-gray-800"> <body class="bg-white font-sans text-gray-800">
<!-- Header --> <!-- Header -->
<header <header
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50" class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
> >
<nav class="h-full"> <nav class="h-full">
<div <div
@ -40,12 +50,12 @@
<img <img
src="assets/images/khy_logo.png" src="assets/images/khy_logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm" class="h-12 sm:h-20 w-auto drop-shadow-sm"
/> />
</div> </div>
<!-- Navigation --> <!-- Desktop Navigation -->
<ul class="flex space-x-10"> <ul class="hidden sm:flex space-x-10">
<li> <li>
<a <a
href="index.html" href="index.html"
@ -103,13 +113,149 @@
> >
</li> </li>
</ul> </ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div> </div>
</nav> </nav>
</header> </header>
<!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div
class="flex items-center justify-between p-5 border-b border-gray-200"
>
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="index.html#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="index.html#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="index.html#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main> <main>
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative h-80 mt-28"> <section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image --> <!-- Background Image -->
<div class="absolute inset-0 w-full h-full"> <div class="absolute inset-0 w-full h-full">
<img <img

View file

@ -1512,9 +1512,9 @@ function initQuoteBadge() {
// Calculate total count // Calculate total count
const count = quoteItems.reduce((total, item) => total + item.quantity, 0); const count = quoteItems.reduce((total, item) => total + item.quantity, 0);
// Update quote badge // Update quote badge on all quote links (desktop nav, mobile button, mobile menu)
const quoteLink = document.querySelector('a[href="quote.html"]'); const quoteLinks = document.querySelectorAll('a[href="quote.html"]');
if (quoteLink) { quoteLinks.forEach((quoteLink) => {
// Remove existing badge // Remove existing badge
const existingBadge = quoteLink.querySelector(".quote-badge"); const existingBadge = quoteLink.querySelector(".quote-badge");
if (existingBadge) { if (existingBadge) {
@ -1530,7 +1530,7 @@ function initQuoteBadge() {
quoteLink.style.position = "relative"; quoteLink.style.position = "relative";
quoteLink.appendChild(badge); quoteLink.appendChild(badge);
} }
} });
} }
// Initialize Add To Quote functionality on product detail pages // Initialize Add To Quote functionality on product detail pages
@ -1721,6 +1721,7 @@ document.addEventListener("DOMContentLoaded", function () {
initQuoteBadge(); initQuoteBadge();
initAddToQuote(); initAddToQuote();
initHeroCarousel(); initHeroCarousel();
initMobileMenu();
}); });
// Hero Carousel Functionality // Hero Carousel Functionality
@ -1827,4 +1828,65 @@ function initHeroCarousel() {
}, 5000); }, 5000);
} }
// Version: 4.7 - Use original image height as standard for carousel uniformity // Mobile Menu Functionality
function initMobileMenu() {
const mobileMenuButton = document.getElementById("mobile-menu-button");
const mobileMenuClose = document.getElementById("mobile-menu-close");
const mobileMenu = document.getElementById("mobile-menu");
const mobileMenuOverlay = document.getElementById("mobile-menu-overlay");
if (
!mobileMenuButton ||
!mobileMenuClose ||
!mobileMenu ||
!mobileMenuOverlay
) {
console.log("Mobile menu elements not found");
return;
}
// Function to open mobile menu
function openMobileMenu() {
mobileMenu.classList.remove("translate-x-full");
mobileMenuOverlay.classList.remove("hidden");
document.body.style.overflow = "hidden"; // Prevent background scrolling
}
// Function to close mobile menu
function closeMobileMenu() {
mobileMenu.classList.add("translate-x-full");
mobileMenuOverlay.classList.add("hidden");
document.body.style.overflow = ""; // Restore scrolling
}
// Event listeners
mobileMenuButton.addEventListener("click", openMobileMenu);
mobileMenuClose.addEventListener("click", closeMobileMenu);
mobileMenuOverlay.addEventListener("click", closeMobileMenu);
// Close menu when clicking on navigation links
const mobileNavLinks = mobileMenu.querySelectorAll("a");
mobileNavLinks.forEach((link) => {
link.addEventListener("click", closeMobileMenu);
});
// Close menu on escape key
document.addEventListener("keydown", (e) => {
if (
e.key === "Escape" &&
!mobileMenu.classList.contains("translate-x-full")
) {
closeMobileMenu();
}
});
// Handle window resize - close menu if screen becomes large
window.addEventListener("resize", () => {
if (window.innerWidth >= 640) {
// sm breakpoint
closeMobileMenu();
}
});
}
// Version: 4.8 - Added mobile hamburger menu functionality

View file

@ -306,9 +306,9 @@ class QuoteManager {
// Update quote badge in navigation // Update quote badge in navigation
updateQuoteBadge() { updateQuoteBadge() {
const count = this.getQuoteCount(); const count = this.getQuoteCount();
const quoteLink = document.querySelector('a[href="quote.html"]'); const quoteLinks = document.querySelectorAll('a[href="quote.html"]');
if (quoteLink) { quoteLinks.forEach((quoteLink) => {
// Remove existing badge // Remove existing badge
const existingBadge = quoteLink.querySelector(".quote-badge"); const existingBadge = quoteLink.querySelector(".quote-badge");
if (existingBadge) { if (existingBadge) {
@ -324,7 +324,7 @@ class QuoteManager {
quoteLink.style.position = "relative"; quoteLink.style.position = "relative";
quoteLink.appendChild(badge); quoteLink.appendChild(badge);
} }
} });
} }
// Show success message when item is added // Show success message when item is added

File diff suppressed because one or more lines are too long

View file

@ -2,6 +2,13 @@
module.exports = { module.exports = {
content: ["./*.html", "./src/**/*.{html,js}", "./scripts/**/*.js"], content: ["./*.html", "./src/**/*.{html,js}", "./scripts/**/*.js"],
theme: { theme: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
extend: { extend: {
fontFamily: { fontFamily: {
montserrat: ["Montserrat", "sans-serif"], montserrat: ["Montserrat", "sans-serif"],