mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-10-16 18:51:48 +00:00
feat: implement responsive mobile menu and navigation enhancements across all pages
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
d8d9f1a584
commit
228095ed83
11 changed files with 3592 additions and 49 deletions
170
blog.html
170
blog.html
|
|
@ -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>
|
||||||
|
|
|
||||||
156
contact.html
156
contact.html
|
|
@ -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
|
||||||
|
|
|
||||||
156
index.html
156
index.html
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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 -->
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
156
quote.html
156
quote.html
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
2458
styles/main.css
2458
styles/main.css
File diff suppressed because one or more lines are too long
|
|
@ -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"],
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue