mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-07-02 07:03:33 +00:00
feat: add quote page
This commit is contained in:
parent
ec844c6c88
commit
0eab10dc09
9 changed files with 2057 additions and 242 deletions
165
blog.html
165
blog.html
|
|
@ -140,129 +140,15 @@
|
|||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
|
||||
<!-- Main Blog Content -->
|
||||
<div id="main-blog-content" class="lg:col-span-2">
|
||||
<!-- Blog Post -->
|
||||
<article class="mb-16" data-tags="wood" data-date="2022-10-14">
|
||||
<!-- Featured Image -->
|
||||
<div class="mb-8">
|
||||
<img
|
||||
src="assets/images/blog_post_1.png"
|
||||
alt="Going all-in with millennial design"
|
||||
class="w-full h-96 object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Post Meta -->
|
||||
<div class="flex items-center space-x-8 mb-6">
|
||||
<!-- Admin -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img
|
||||
src="assets/icons/admin.png"
|
||||
alt="Admin"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
<span
|
||||
class="font-playfair font-normal text-base text-gray-500"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img
|
||||
src="assets/icons/calendar.png"
|
||||
alt="Calendar"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
<span
|
||||
class="font-playfair font-normal text-base text-gray-500"
|
||||
>
|
||||
14 Oct 2022
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Category -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="assets/icons/tag.png" alt="Tag" class="w-6 h-6" />
|
||||
<span
|
||||
class="font-playfair font-normal text-base text-gray-500"
|
||||
>
|
||||
Wood
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Title -->
|
||||
<h2
|
||||
class="font-playfair font-medium text-3xl md:text-4xl leading-tight text-black mb-6"
|
||||
>
|
||||
Going all-in with millennial design
|
||||
</h2>
|
||||
|
||||
<!-- Post Excerpt -->
|
||||
<p
|
||||
class="font-playfair font-normal text-base leading-relaxed text-gray-500 mb-8 text-justify"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Mus mauris vitae ultricies leo integer malesuada nunc. In
|
||||
nulla posuere sollicitudin aliquam ultrices. Morbi blandit
|
||||
cursus risus at ultrices mi tempus imperdiet. Libero enim sed
|
||||
faucibus turpis in. Cursus mattis molestie a iaculis at erat.
|
||||
Nibh cras pulvinar mattis nunc sed blandit libero.
|
||||
Pellentesque elit ullamcorper dignissim cras tincidunt.
|
||||
Pharetra et ultrices neque ornare aenean euismod elementum.
|
||||
</p>
|
||||
|
||||
<!-- Read More Link -->
|
||||
<button
|
||||
type="button"
|
||||
class="read-more-toggle inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors"
|
||||
>
|
||||
Read more
|
||||
</button>
|
||||
|
||||
<!-- Full content (initially hidden) -->
|
||||
<div
|
||||
class="full-content hidden font-playfair font-normal text-base leading-relaxed text-gray-500 mt-6 text-justify"
|
||||
>
|
||||
<p class="mb-4">
|
||||
Quis hendrerit dolor magna eget est lorem ipsum. Bibendum
|
||||
arcu vitae elementum curabitur vitae nunc sed velit
|
||||
dignissim sodales. Non tellus orci ac auctor augue mauris
|
||||
augue neque gravida in. Nisl condimentum id venenatis a
|
||||
condimentum vitae sapien pellentesque habitant. Sit amet
|
||||
volutpat consequat mauris nunc congue nisi vitae suscipit.
|
||||
Integer enim neque volutpat ac tincidunt vitae semper quis
|
||||
lectus. Nibh tellus molestie nunc non blandit massa enim
|
||||
nec. Amet consectetur adipiscing elit ut aliquam purus sit
|
||||
amet luctus.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
At tellus at urna condimentum mattis pellentesque id nibh
|
||||
tortor id. Non quam lacus suspendisse faucibus interdum.
|
||||
Interdum velit euismod in pellentesque massa placerat duis
|
||||
ultricies. Platea dictumst quisque sagittis purus sit amet
|
||||
volutpat consequat. Sem viverra aliquet eget sit amet tellus
|
||||
cras adipiscing. Eget lorem dolor sed viverra ipsum nunc
|
||||
aliquet bibendum enim facilisis gravida neque convallis a
|
||||
cras.
|
||||
</p>
|
||||
<p>
|
||||
Mattis rhoncus urna neque viverra justo nec. Aliquet
|
||||
porttitor lacus luctus accumsan tortor posuere ac ut
|
||||
consequat semper viverra nam libero justo laoreet sit amet
|
||||
cursus sit amet dictum sit amet justo. Risus at ultrices mi
|
||||
tempus imperdiet nulla malesuada pellentesque elit.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="lg:col-span-2">
|
||||
<div id="main-blog-content">
|
||||
<!-- Blog posts will be dynamically loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div
|
||||
id="blog-pagination"
|
||||
class="flex items-center justify-center space-x-4"
|
||||
class="flex items-center justify-center space-x-4 mt-10"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -319,20 +205,8 @@
|
|||
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
|
||||
Categories
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<button
|
||||
type="button"
|
||||
class="flex justify-between items-center w-full text-left tag-filter px-4 py-3 rounded-lg border border-gray-300 hover:border-uc-gold hover:bg-gray-50 transition-colors"
|
||||
data-tag="wood"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<span class="font-playfair font-normal text-base">
|
||||
Wood
|
||||
</span>
|
||||
<span class="font-playfair font-normal text-base">
|
||||
(1)
|
||||
</span>
|
||||
</button>
|
||||
<div id="blog-categories" class="space-y-4">
|
||||
<!-- Categories will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -341,27 +215,8 @@
|
|||
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
|
||||
Recent Posts
|
||||
</h3>
|
||||
<div class="space-y-6">
|
||||
<!-- Recent Post 1 -->
|
||||
<div class="flex space-x-4">
|
||||
<img
|
||||
src="assets/images/blog_thumb_1.png"
|
||||
alt="Blog thumbnail"
|
||||
class="w-20 h-20 object-cover rounded-lg"
|
||||
/>
|
||||
<div>
|
||||
<h4
|
||||
class="font-playfair font-normal text-sm text-black mb-2 leading-tight"
|
||||
>
|
||||
Going all-in with millennial design
|
||||
</h4>
|
||||
<p
|
||||
class="font-playfair font-normal text-xs text-gray-500"
|
||||
>
|
||||
03 Aug 2022
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recent-posts" class="space-y-6">
|
||||
<!-- Recent posts will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -520,6 +375,6 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js?v=1.1"></script>
|
||||
<script src="scripts/main.js?v=4.2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -421,6 +421,9 @@
|
|||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer Separator -->
|
||||
<div class="border-t border-gray-200"></div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white">
|
||||
<!-- Main Footer Content -->
|
||||
|
|
|
|||
104
data/blog.json
Normal file
104
data/blog.json
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
{
|
||||
"posts": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Going all-in with millennial design",
|
||||
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mus mauris vitae ultricies leo integer malesuada nunc. In nulla posuere sollicitudin aliquam ultrices. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Libero enim sed faucibus turpis in. Cursus mattis molestie a iaculis at erat. Nibh cras pulvinar mattis nunc sed blandit libero. Pellentesque elit ullamcorper dignissim cras tincidunt. Pharetra et ultrices neque ornare aenean euismod elementum. The millennial generation has redefined what it means to create a home that reflects both personal style and contemporary values. This design philosophy embraces clean lines, sustainable materials, and multifunctional spaces that adapt to the ever-changing needs of modern life. From open-concept layouts that foster social interaction to smart home technology that enhances daily convenience, millennial design prioritizes both aesthetics and functionality.",
|
||||
"content": [
|
||||
"Quis hendrerit dolor magna eget est lorem ipsum. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales. Non tellus orci ac auctor augue mauris augue neque gravida in. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Sit amet volutpat consequat mauris nunc congue nisi vitae suscipit. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Nibh tellus molestie nunc non blandit massa enim nec. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus.",
|
||||
"At tellus at urna condimentum mattis pellentesque id nibh tortor id. Non quam lacus suspendisse faucibus interdum. Interdum velit euismod in pellentesque massa placerat duis ultricies. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Sem viverra aliquet eget sit amet tellus cras adipiscing. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a cras.",
|
||||
"Mattis rhoncus urna neque viverra justo nec. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo laoreet sit amet cursus sit amet dictum sit amet justo. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit.",
|
||||
"The millennial generation has redefined what it means to create a home that reflects both personal style and contemporary values. This design philosophy embraces clean lines, sustainable materials, and multifunctional spaces that adapt to the ever-changing needs of modern life. From open-concept layouts that foster social interaction to smart home technology that enhances daily convenience, millennial design prioritizes both aesthetics and functionality.",
|
||||
"One of the most significant aspects of millennial design is its emphasis on sustainability and ethical consumption. Young homeowners are increasingly choosing furniture and decor that not only looks good but also aligns with their environmental values. This includes pieces made from responsibly sourced materials, vintage and upcycled items that reduce waste, and locally crafted goods that support small businesses and reduce carbon footprints.",
|
||||
"The color palette of millennial design often features neutral tones as a foundation, with strategic pops of color that reflect personal taste and current trends. Soft grays, warm whites, and natural wood tones create a calming backdrop, while accent colors like sage green, dusty rose, and deep navy add personality without overwhelming the space. This approach allows for easy updates and seasonal changes without requiring major renovations.",
|
||||
"Technology integration is another hallmark of millennial design, with smart home features seamlessly incorporated into the aesthetic. From hidden charging stations to voice-controlled lighting systems, technology enhances the living experience without compromising the visual appeal of the space. This balance between high-tech functionality and timeless design creates homes that are both modern and enduring."
|
||||
],
|
||||
"author": "Admin",
|
||||
"date": "2022-10-14",
|
||||
"tags": ["design"],
|
||||
"image": "assets/images/blog_post_1.png",
|
||||
"thumbnail": "assets/images/blog_thumb_1.png",
|
||||
"alt": "Going all-in with millennial design"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "How to create the perfect living room",
|
||||
"excerpt": "Designing the perfect living room requires careful consideration of space, functionality, and personal style. From choosing the right furniture pieces to creating a cohesive color scheme, every element plays a crucial role in crafting a space that feels both welcoming and reflective of your lifestyle. Let's explore the key principles that make a living room truly exceptional. The foundation of any great living room begins with understanding the space you're working with. Consider the room's dimensions, natural light sources, and traffic flow. These factors will guide your furniture placement and help you create a layout that maximizes both comfort and functionality. When selecting furniture, prioritize pieces that serve multiple purposes and create a harmonious balance between form and function.",
|
||||
"content": [
|
||||
"The foundation of any great living room begins with understanding the space you're working with. Consider the room's dimensions, natural light sources, and traffic flow. These factors will guide your furniture placement and help you create a layout that maximizes both comfort and functionality.",
|
||||
"When selecting furniture, prioritize pieces that serve multiple purposes. A comfortable sofa that can accommodate family gatherings, an accent chair that adds personality, and a coffee table that provides both surface area and storage can transform your living room into a versatile space that adapts to your daily needs.",
|
||||
"Color and texture play vital roles in creating atmosphere. Choose a color palette that reflects your personal style while maintaining harmony throughout the space. Layer different textures through rugs, throw pillows, and decorative elements to add depth and visual interest."
|
||||
],
|
||||
"author": "Admin",
|
||||
"date": "2022-11-05",
|
||||
"tags": ["design"],
|
||||
"image": "assets/images/conference_room.jpg",
|
||||
"thumbnail": "assets/images/conference_room.jpg",
|
||||
"alt": "Perfect living room design"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Sustainable furniture choices for modern homes",
|
||||
"excerpt": "As environmental consciousness grows, more homeowners are seeking sustainable furniture options that align with their values. From responsibly sourced materials to eco-friendly manufacturing processes, sustainable furniture offers both environmental benefits and long-term value. Discover how to make informed choices that benefit both your home and the planet. Sustainable furniture begins with the materials used in its construction. Look for pieces made from responsibly harvested wood, such as FSC-certified timber, or consider alternatives like bamboo, which grows rapidly and requires minimal resources. These materials not only reduce environmental impact but also often provide superior durability and timeless appeal.",
|
||||
"content": [
|
||||
"Sustainable furniture begins with the materials used in its construction. Look for pieces made from responsibly harvested wood, such as FSC-certified timber, or consider alternatives like bamboo, which grows rapidly and requires minimal resources. These materials not only reduce environmental impact but also often provide superior durability.",
|
||||
"Manufacturing processes also play a crucial role in sustainability. Choose furniture from companies that prioritize energy-efficient production methods, minimize waste, and use non-toxic finishes. Many sustainable furniture makers also offer repair services and replacement parts, extending the lifespan of your investment.",
|
||||
"Consider the full lifecycle of your furniture choices. Opt for timeless designs that won't quickly go out of style, and invest in quality pieces that can be passed down through generations. This approach reduces the need for frequent replacements and creates a more sustainable consumption pattern."
|
||||
],
|
||||
"author": "Admin",
|
||||
"date": "2022-12-20",
|
||||
"tags": ["sustainability"],
|
||||
"image": "assets/images/kitchen.JPG",
|
||||
"thumbnail": "assets/images/kitchen.JPG",
|
||||
"alt": "Sustainable furniture choices"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "The art of mixing vintage and contemporary pieces",
|
||||
"excerpt": "Creating a home that feels both timeless and current requires mastering the art of mixing vintage and contemporary furniture. This approach allows you to tell a story through your decor while maintaining a cohesive and functional space. Learn how to balance different eras and styles to create a home that's uniquely yours. The key to successfully mixing vintage and contemporary pieces lies in finding common threads that unite them. Look for shared design elements such as similar lines, complementary colors, or matching materials. A vintage wooden table might pair beautifully with modern chairs if they share similar wood tones or geometric shapes.",
|
||||
"content": [
|
||||
"The key to successfully mixing vintage and contemporary pieces lies in finding common threads that unite them. Look for shared design elements such as similar lines, complementary colors, or matching materials. A vintage wooden table might pair beautifully with modern chairs if they share similar wood tones or geometric shapes.",
|
||||
"Scale and proportion are crucial when combining different eras. Ensure that vintage and contemporary pieces work together in terms of size and visual weight. A large vintage armoire might overwhelm a room filled with delicate modern furniture, while smaller vintage accents can add character without dominating the space.",
|
||||
"Don't be afraid to experiment with unexpected combinations. Sometimes the most interesting interiors come from pairing pieces that seem to have nothing in common. The contrast between a sleek modern sofa and a rustic vintage coffee table can create a dynamic and engaging space that reflects your personal style."
|
||||
],
|
||||
"author": "Admin",
|
||||
"date": "2023-01-15",
|
||||
"tags": ["vintage"],
|
||||
"image": "assets/images/lounge_chair.jpg",
|
||||
"thumbnail": "assets/images/lounge_chair.jpg",
|
||||
"alt": "Mixing vintage and contemporary furniture"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "Maximizing small spaces with smart furniture solutions",
|
||||
"excerpt": "Living in a smaller space doesn't mean sacrificing style or functionality. With the right furniture choices and design strategies, you can create a home that feels spacious, organized, and beautiful. Discover innovative solutions that make the most of every square foot while maintaining your personal aesthetic. Multi-functional furniture is essential in small spaces. Look for pieces that serve multiple purposes, such as ottomans with hidden storage, sofa beds for guest accommodation, or dining tables that can expand when needed. These versatile pieces help you maximize functionality without cluttering your space.",
|
||||
"content": [
|
||||
"Multi-functional furniture is essential in small spaces. Look for pieces that serve multiple purposes, such as ottomans with hidden storage, sofa beds for guest accommodation, or dining tables that can expand when needed. These versatile pieces help you maximize functionality without cluttering your space.",
|
||||
"Vertical storage solutions can dramatically increase your usable space. Wall-mounted shelves, tall bookcases, and hanging organizers keep your belongings organized while freeing up valuable floor space. Consider custom storage solutions that fit perfectly into awkward corners or underutilized areas.",
|
||||
"The right color palette and lighting can make a small space feel much larger. Light, neutral colors reflect natural light and create an airy atmosphere, while strategic lighting can highlight focal points and create depth. Mirrors are also excellent tools for making small spaces feel more expansive."
|
||||
],
|
||||
"author": "Admin",
|
||||
"date": "2023-02-28",
|
||||
"tags": ["design"],
|
||||
"image": "assets/images/storage.jpg",
|
||||
"thumbnail": "assets/images/storage.jpg",
|
||||
"alt": "Small space furniture solutions"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"title": "Color psychology in home design",
|
||||
"excerpt": "Colors have a profound impact on our emotions, mood, and overall well-being. Understanding color psychology can help you create spaces that not only look beautiful but also support your desired atmosphere and lifestyle. Explore how different colors can transform your home and enhance your daily experience. Warm colors like red, orange, and yellow create energy and excitement, making them perfect for social spaces like dining rooms and living areas. These colors stimulate conversation and appetite, making them ideal for areas where you entertain guests or share meals with family.",
|
||||
"content": [
|
||||
"Warm colors like red, orange, and yellow create energy and excitement, making them perfect for social spaces like dining rooms and living areas. These colors stimulate conversation and appetite, making them ideal for areas where you entertain guests or share meals with family.",
|
||||
"Cool colors such as blue, green, and purple promote calmness and relaxation. These hues are excellent choices for bedrooms, bathrooms, and home offices where you want to create a peaceful, focused environment. Different shades can evoke different moods - deep navy creates sophistication while soft lavender promotes tranquility.",
|
||||
"Neutral colors provide a versatile foundation that allows you to experiment with accent colors and seasonal changes. Whites, grays, and beiges create a timeless backdrop that can be easily updated with colorful accessories, artwork, or seasonal decor without requiring major furniture changes."
|
||||
],
|
||||
"author": "Admin",
|
||||
"date": "2023-03-12",
|
||||
"tags": ["vintage"],
|
||||
"image": "assets/images/chairs.jpg",
|
||||
"thumbnail": "assets/images/chairs.jpg",
|
||||
"alt": "Color psychology in home design"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -277,6 +277,9 @@
|
|||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer Separator -->
|
||||
<div class="border-t border-gray-200"></div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white">
|
||||
<!-- Main Footer Content -->
|
||||
|
|
|
|||
|
|
@ -96,7 +96,10 @@
|
|||
<section class="relative w-full bg-white py-6">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="flex items-center">
|
||||
<h1 class="font-playfair font-normal text-base text-quick-silver">
|
||||
<h1
|
||||
class="font-playfair font-normal text-base text-quick-silver"
|
||||
id="product-details-title"
|
||||
>
|
||||
Product Details
|
||||
</h1>
|
||||
</div>
|
||||
|
|
@ -264,6 +267,7 @@
|
|||
|
||||
<!-- Action Buttons -->
|
||||
<button
|
||||
id="add-to-quote-btn"
|
||||
class="inline-flex items-center justify-center w-[380px] h-[64px] min-h-[64px] bg-white text-black font-playfair font-light text-[20px] leading-none rounded-[15px] border border-quick-silver hover:bg-uc-gold hover:text-white hover:border-uc-gold hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap"
|
||||
>
|
||||
Add To Quote
|
||||
|
|
@ -352,12 +356,6 @@
|
|||
<button class="font-playfair text-2xl text-black">
|
||||
Description
|
||||
</button>
|
||||
<button class="font-playfair text-2xl text-quick-silver">
|
||||
Additional Information
|
||||
</button>
|
||||
<button class="font-playfair text-2xl text-quick-silver">
|
||||
Reviews [5]
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Copy -->
|
||||
|
|
@ -588,6 +586,7 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js?v=1.1"></script>
|
||||
<script src="scripts/main.js?v=3.5"></script>
|
||||
<script src="scripts/quote.js?v=3.5"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
523
quote.html
Normal file
523
quote.html
Normal file
|
|
@ -0,0 +1,523 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Quote - KHY</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Request a quote for KHY furniture and design services."
|
||||
/>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<style>
|
||||
/* Smooth scrolling for the entire page */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Active navigation link styling */
|
||||
.nav-link.active {
|
||||
color: #b8873f !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
<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"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body class="bg-white font-sans text-gray-800">
|
||||
<!-- 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"
|
||||
>
|
||||
<nav class="h-full">
|
||||
<div
|
||||
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
|
||||
>
|
||||
<!-- Logo Section -->
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="KHY Logo"
|
||||
class="h-16 w-auto drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<ul class="flex space-x-10">
|
||||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#products"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Products</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#projects-button"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#clients"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Clients</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="index.html#about"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>About</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="contact.html"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Contact</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="blog.html"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="quote.html"
|
||||
class="nav-link active text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Quote</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-80 mt-28">
|
||||
<!-- Background Image -->
|
||||
<div class="absolute inset-0 w-full h-full">
|
||||
<img
|
||||
src="assets/images/our_story.jpg"
|
||||
alt="Quote background"
|
||||
class="w-full h-full object-cover object-center"
|
||||
style="filter: blur(3px)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- White Overlay -->
|
||||
<div class="absolute inset-0 bg-white bg-opacity-60"></div>
|
||||
|
||||
<!-- Overlay Content -->
|
||||
<div
|
||||
class="absolute z-10 inset-0 flex items-center justify-center text-center text-black"
|
||||
>
|
||||
<h1
|
||||
class="font-playfair font-medium text-3xl md:text-4xl lg:text-5xl leading-tight"
|
||||
>
|
||||
Request a Quote
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quote Items Section -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<!-- Section Header -->
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="font-playfair font-semibold text-3xl text-black mb-4">
|
||||
Your Quote Items
|
||||
</h2>
|
||||
<p
|
||||
class="font-playfair font-normal text-lg text-gray-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Review and manage the items you've selected for your quote. You
|
||||
can modify quantities, remove items, or continue shopping.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Quote Items Container -->
|
||||
<div id="quote-items-container" class="space-y-6">
|
||||
<!-- Items will be dynamically loaded here -->
|
||||
<div id="empty-quote-message" class="text-center py-12">
|
||||
<div class="text-gray-400 mb-4">
|
||||
<svg
|
||||
class="w-16 h-16 mx-auto"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-xl text-gray-600 mb-2"
|
||||
>
|
||||
Your quote is empty
|
||||
</h3>
|
||||
<p class="font-playfair font-normal text-base text-gray-500 mb-6">
|
||||
Start building your quote by adding products from our catalog.
|
||||
</p>
|
||||
<a
|
||||
href="product-catalog.html"
|
||||
class="inline-block bg-uc-gold text-white px-8 py-3 rounded-lg font-playfair font-semibold text-base hover:bg-uc-gold/90 transition-colors"
|
||||
>
|
||||
Browse Products
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote Actions -->
|
||||
<div
|
||||
id="quote-actions"
|
||||
class="hidden mt-12 pt-8 border-t border-gray-200"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-between items-center gap-6"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
id="clear-quote-btn"
|
||||
class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-playfair font-semibold text-base hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Clear Quote
|
||||
</button>
|
||||
<a
|
||||
href="product-catalog.html"
|
||||
class="px-6 py-3 border border-uc-gold text-uc-gold rounded-lg font-playfair font-semibold text-base hover:bg-uc-gold hover:text-white transition-colors"
|
||||
>
|
||||
Continue Shopping
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
id="request-quote-btn"
|
||||
class="px-8 py-3 bg-uc-gold text-white rounded-lg font-playfair font-semibold text-base hover:bg-uc-gold/90 transition-colors"
|
||||
>
|
||||
Request Quote
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quote Request Form Modal -->
|
||||
<div
|
||||
id="quote-modal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden"
|
||||
>
|
||||
<div class="flex items-center justify-center min-h-screen p-4">
|
||||
<div
|
||||
class="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<!-- Modal Header -->
|
||||
<div
|
||||
class="flex justify-between items-center p-6 border-b border-gray-200"
|
||||
>
|
||||
<h3 class="font-playfair font-semibold text-2xl text-black">
|
||||
Request Quote
|
||||
</h3>
|
||||
<button
|
||||
id="close-modal-btn"
|
||||
class="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="p-6">
|
||||
<form id="quote-form" class="space-y-6">
|
||||
<!-- Contact Information -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label
|
||||
for="quote-name"
|
||||
class="block font-playfair font-semibold text-base text-black mb-2"
|
||||
>
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="quote-name"
|
||||
name="name"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg font-playfair font-normal text-base focus:outline-none focus:ring-2 focus:ring-uc-gold focus:border-transparent"
|
||||
placeholder="Enter your full name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="quote-email"
|
||||
class="block font-playfair font-semibold text-base text-black mb-2"
|
||||
>
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="quote-email"
|
||||
name="email"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg font-playfair font-normal text-base focus:outline-none focus:ring-2 focus:ring-uc-gold focus:border-transparent"
|
||||
placeholder="Enter your email address"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label
|
||||
for="quote-phone"
|
||||
class="block font-playfair font-semibold text-base text-black mb-2"
|
||||
>
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="quote-phone"
|
||||
name="phone"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg font-playfair font-normal text-base focus:outline-none focus:ring-2 focus:ring-uc-gold focus:border-transparent"
|
||||
placeholder="Enter your phone number"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="quote-company"
|
||||
class="block font-playfair font-semibold text-base text-black mb-2"
|
||||
>
|
||||
Company
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="quote-company"
|
||||
name="company"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg font-playfair font-normal text-base focus:outline-none focus:ring-2 focus:ring-uc-gold focus:border-transparent"
|
||||
placeholder="Enter your company name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="quote-project"
|
||||
class="block font-playfair font-semibold text-base text-black mb-2"
|
||||
>
|
||||
Project Description
|
||||
</label>
|
||||
<textarea
|
||||
id="quote-project"
|
||||
name="project"
|
||||
rows="4"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg font-playfair font-normal text-base focus:outline-none focus:ring-2 focus:ring-uc-gold focus:border-transparent"
|
||||
placeholder="Tell us about your project requirements, timeline, or any special considerations..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Quote Summary -->
|
||||
<div class="border-t border-gray-200 pt-6">
|
||||
<h4
|
||||
class="font-playfair font-semibold text-lg text-black mb-4"
|
||||
>
|
||||
Quote Summary
|
||||
</h4>
|
||||
<div id="quote-summary" class="space-y-3">
|
||||
<!-- Quote items will be displayed here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="flex justify-end pt-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="px-8 py-3 bg-uc-gold text-white rounded-lg font-playfair font-semibold text-base hover:bg-uc-gold/90 transition-colors"
|
||||
>
|
||||
Submit Quote Request
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer Separator -->
|
||||
<div class="border-t border-gray-200"></div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white">
|
||||
<!-- Main Footer Content -->
|
||||
<div class="max-w-7xl mx-auto px-5 py-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Company Information -->
|
||||
<div class="space-y-2">
|
||||
<!-- Logo -->
|
||||
<div class="w-16 h-20">
|
||||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="khy"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<p
|
||||
class="font-playfair font-normal text-base leading-relaxed text-gray-600"
|
||||
>
|
||||
5 Labone Crescent, Greater Accra, Ghana
|
||||
</p>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="space-y-1">
|
||||
<!-- Phone -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<img
|
||||
src="assets/images/phone.png"
|
||||
alt="Phone"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
<span class="font-playfair font-normal text-base text-gray-800">
|
||||
+233 (555) 76677
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
|
||||
<span class="font-playfair font-normal text-base text-gray-800">
|
||||
design@khyltd.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="space-y-6">
|
||||
<h3
|
||||
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
|
||||
>
|
||||
Quick Links
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help -->
|
||||
<div class="space-y-6">
|
||||
<h3
|
||||
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
|
||||
>
|
||||
Help
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Privacy Policies
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
|
||||
>
|
||||
Terms and Conditions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<div class="space-y-6">
|
||||
<h3
|
||||
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
|
||||
>
|
||||
Newsletter
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter Your Email Address"
|
||||
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
|
||||
/>
|
||||
<button
|
||||
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copyright Section -->
|
||||
<div class="border-t border-light-silver">
|
||||
<div class="max-w-7xl mx-auto px-5 py-4">
|
||||
<p
|
||||
class="font-playfair font-normal text-xs leading-relaxed text-davys-grey"
|
||||
>
|
||||
© 2025 khy. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js?v=3.4"></script>
|
||||
<script src="scripts/quote.js?v=3.5"></script>
|
||||
</body>
|
||||
</html>
|
||||
739
scripts/main.js
739
scripts/main.js
|
|
@ -160,62 +160,258 @@ function initSite() {
|
|||
}
|
||||
})();
|
||||
|
||||
// Blog search functionality (only runs on blog page)
|
||||
const blogSearchInput = document.getElementById("blog-search-input");
|
||||
if (blogSearchInput) {
|
||||
// Blog functionality (only runs on blog page)
|
||||
(async function initBlog() {
|
||||
const blogSearchInput = document.getElementById("blog-search-input");
|
||||
const mainBlogContent = document.getElementById("main-blog-content");
|
||||
const blogCategories = document.getElementById("blog-categories");
|
||||
const recentPosts = document.getElementById("recent-posts");
|
||||
const pagination = document.getElementById("blog-pagination");
|
||||
const pageButtons = document.querySelectorAll(
|
||||
"#blog-pagination .blog-page-btn"
|
||||
);
|
||||
const nextButton = document.getElementById("blog-next-btn");
|
||||
const blogTagButtons = document.querySelectorAll(".tag-filter");
|
||||
|
||||
if (!blogSearchInput || !mainBlogContent) return;
|
||||
|
||||
let allPosts = [];
|
||||
let filteredPosts = [];
|
||||
let activeTag = "";
|
||||
let currentPage = 1;
|
||||
const pageSize = 4;
|
||||
|
||||
// Load blog data from JSON
|
||||
try {
|
||||
const response = await fetch("data/blog.json", { cache: "no-store" });
|
||||
const data = await response.json();
|
||||
allPosts = Array.isArray(data.posts) ? data.posts : [];
|
||||
|
||||
// Sort posts by date (newest first)
|
||||
allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
|
||||
console.log("Blog posts loaded:", allPosts.length);
|
||||
} catch (error) {
|
||||
console.error("Failed to load blog posts:", error);
|
||||
return;
|
||||
}
|
||||
|
||||
function normalize(text) {
|
||||
return (text || "")
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, " ")
|
||||
.trim();
|
||||
}
|
||||
function getFilteredArticles() {
|
||||
const articles = Array.from(
|
||||
document.querySelectorAll("#main-blog-content article")
|
||||
);
|
||||
articles.sort((a, b) => {
|
||||
const ad = a.getAttribute("data-date") || "";
|
||||
const bd = b.getAttribute("data-date") || "";
|
||||
if (!ad && !bd) return 0;
|
||||
return bd.localeCompare(ad);
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
function getFilteredPosts() {
|
||||
const query = normalize(blogSearchInput.value.trim());
|
||||
return articles.filter((article) => {
|
||||
const title = article.querySelector("h2")?.textContent || "";
|
||||
const excerpt = article.querySelector("p")?.textContent || "";
|
||||
return allPosts.filter((post) => {
|
||||
const title = post.title || "";
|
||||
const excerpt = post.excerpt || "";
|
||||
const haystack = normalize(`${title} ${excerpt}`);
|
||||
const tagList = (article.getAttribute("data-tags") || "")
|
||||
.split(",")
|
||||
.map((t) => normalize(t));
|
||||
const matchesQuery = query === "" || haystack.includes(query);
|
||||
const matchesTag = activeTag === "" || tagList.includes(activeTag);
|
||||
const matchesTag = activeTag === "" || post.tags.includes(activeTag);
|
||||
return matchesQuery && matchesTag;
|
||||
});
|
||||
}
|
||||
function renderPage() {
|
||||
const filtered = getFilteredArticles();
|
||||
const total = filtered.length;
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
currentPage = Math.min(Math.max(1, currentPage), totalPages);
|
||||
|
||||
function renderBlogPost(post) {
|
||||
const tagsHtml = post.tags
|
||||
.map(
|
||||
(tag) =>
|
||||
`<span class="font-playfair font-normal text-base text-gray-500">${
|
||||
tag.charAt(0).toUpperCase() + tag.slice(1)
|
||||
}</span>`
|
||||
)
|
||||
.join(", ");
|
||||
|
||||
const contentHtml = post.content
|
||||
.map((paragraph) => `<p class="mb-4">${paragraph}</p>`)
|
||||
.join("");
|
||||
|
||||
return `
|
||||
<article class="mb-16" data-tags="${post.tags.join(",")}" data-date="${
|
||||
post.date
|
||||
}">
|
||||
<!-- Featured Image -->
|
||||
<div class="mb-8">
|
||||
<img
|
||||
src="${post.image}"
|
||||
alt="${post.alt || post.title}"
|
||||
class="w-full h-96 object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Post Meta -->
|
||||
<div class="flex items-center space-x-8 mb-6">
|
||||
<!-- Admin -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="assets/icons/admin.png" alt="Admin" class="w-5 h-5" />
|
||||
<span class="font-playfair font-normal text-base text-gray-500">
|
||||
${post.author}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="assets/icons/calendar.png" alt="Calendar" class="w-5 h-5" />
|
||||
<span class="font-playfair font-normal text-base text-gray-500">
|
||||
${formatDate(post.date)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Category -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="assets/icons/tag.png" alt="Tag" class="w-6 h-6" />
|
||||
<span class="font-playfair font-normal text-base text-gray-500">
|
||||
${
|
||||
post.tags[0]
|
||||
? post.tags[0].charAt(0).toUpperCase() +
|
||||
post.tags[0].slice(1)
|
||||
: "Uncategorized"
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Title -->
|
||||
<h2 class="font-playfair font-medium text-3xl md:text-4xl leading-tight text-black mb-6">
|
||||
${post.title}
|
||||
</h2>
|
||||
|
||||
<!-- Post Excerpt -->
|
||||
<p class="font-playfair font-normal text-base leading-relaxed text-gray-500 mb-8 text-justify">
|
||||
${post.excerpt}
|
||||
</p>
|
||||
|
||||
<!-- Read More Link -->
|
||||
<button
|
||||
type="button"
|
||||
class="read-more-toggle inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors"
|
||||
>
|
||||
Read more
|
||||
</button>
|
||||
|
||||
<!-- Full content (initially hidden) -->
|
||||
<div class="full-content hidden font-playfair font-normal text-base leading-relaxed text-gray-500 mt-6 text-justify">
|
||||
${contentHtml}
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderBlogPosts() {
|
||||
const start = (currentPage - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
const toShow = new Set(filtered.slice(start, end));
|
||||
document.querySelectorAll("#main-blog-content article").forEach((a) => {
|
||||
a.style.display = toShow.has(a) ? "" : "none";
|
||||
const postsToShow = filteredPosts.slice(start, end);
|
||||
|
||||
mainBlogContent.innerHTML = postsToShow
|
||||
.map((post) => renderBlogPost(post))
|
||||
.join("");
|
||||
|
||||
// Re-initialize read more functionality
|
||||
initReadMore();
|
||||
}
|
||||
|
||||
function renderCategories() {
|
||||
const tagCounts = {};
|
||||
allPosts.forEach((post) => {
|
||||
post.tags.forEach((tag) => {
|
||||
tagCounts[tag] = (tagCounts[tag] || 0) + 1;
|
||||
});
|
||||
});
|
||||
|
||||
const categoriesHtml = Object.entries(tagCounts)
|
||||
.map(
|
||||
([tag, count]) => `
|
||||
<button
|
||||
type="button"
|
||||
class="flex justify-between items-center w-full text-left tag-filter px-4 py-3 rounded-lg border border-gray-300 hover:border-uc-gold hover:bg-gray-50 transition-colors"
|
||||
data-tag="${tag}"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<span class="font-playfair font-normal text-base">
|
||||
${tag.charAt(0).toUpperCase() + tag.slice(1)}
|
||||
</span>
|
||||
<span class="font-playfair font-normal text-base">
|
||||
(${count})
|
||||
</span>
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
blogCategories.innerHTML = categoriesHtml;
|
||||
|
||||
// Add event listeners to category buttons
|
||||
const categoryButtons = blogCategories.querySelectorAll(".tag-filter");
|
||||
categoryButtons.forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const clickedTag = btn.getAttribute("data-tag");
|
||||
activeTag = activeTag === clickedTag ? "" : clickedTag;
|
||||
|
||||
categoryButtons.forEach((b) => {
|
||||
b.classList.remove("border-uc-gold", "bg-gray-50", "text-uc-gold");
|
||||
b.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
|
||||
if (activeTag) {
|
||||
btn.classList.add("border-uc-gold", "bg-gray-50", "text-uc-gold");
|
||||
btn.setAttribute("aria-pressed", "true");
|
||||
}
|
||||
|
||||
currentPage = 1;
|
||||
filteredPosts = getFilteredPosts();
|
||||
renderBlogPosts();
|
||||
renderPagination();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderRecentPosts() {
|
||||
const recentPostsHtml = allPosts
|
||||
.slice(0, 3)
|
||||
.map(
|
||||
(post) => `
|
||||
<div class="flex space-x-4">
|
||||
<img
|
||||
src="${post.thumbnail}"
|
||||
alt="${post.alt || post.title}"
|
||||
class="w-20 h-20 object-cover rounded-lg"
|
||||
/>
|
||||
<div>
|
||||
<h4 class="font-playfair font-normal text-sm text-black mb-2 leading-tight">
|
||||
${post.title}
|
||||
</h4>
|
||||
<p class="font-playfair font-normal text-xs text-gray-500">
|
||||
${formatDate(post.date)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
recentPosts.innerHTML = recentPostsHtml;
|
||||
}
|
||||
|
||||
function renderPagination() {
|
||||
const total = filteredPosts.length;
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
currentPage = Math.min(Math.max(1, currentPage), totalPages);
|
||||
|
||||
if (pagination) {
|
||||
const hasQuery = blogSearchInput.value.trim().length > 0;
|
||||
pagination.style.display = hasQuery ? "none" : "flex";
|
||||
|
||||
pageButtons.forEach((btn) => {
|
||||
const p = Number(btn.getAttribute("data-page"));
|
||||
btn.classList.toggle("bg-uc-gold", p === currentPage);
|
||||
|
|
@ -224,46 +420,101 @@ function initSite() {
|
|||
btn.classList.toggle("text-black", p !== currentPage);
|
||||
btn.style.display = p <= totalPages ? "inline-flex" : "none";
|
||||
});
|
||||
|
||||
if (nextButton) {
|
||||
nextButton.style.display = totalPages > 1 ? "inline-flex" : "none";
|
||||
nextButton.disabled = currentPage >= totalPages;
|
||||
}
|
||||
}
|
||||
}
|
||||
function filterPosts() {
|
||||
currentPage = 1;
|
||||
renderPage();
|
||||
}
|
||||
blogSearchInput.addEventListener("input", filterPosts);
|
||||
blogTagButtons.forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const clickedTag = normalize(btn.getAttribute("data-tag"));
|
||||
activeTag = activeTag === clickedTag ? "" : clickedTag;
|
||||
blogTagButtons.forEach((b) => {
|
||||
b.classList.remove("border-uc-gold", "bg-gray-50", "text-uc-gold");
|
||||
b.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
if (activeTag) {
|
||||
btn.classList.add("border-uc-gold", "bg-gray-50", "text-uc-gold");
|
||||
btn.setAttribute("aria-pressed", "true");
|
||||
|
||||
function initReadMore() {
|
||||
const articles = document.querySelectorAll("#main-blog-content article");
|
||||
|
||||
articles.forEach((article) => {
|
||||
const excerptP = article.querySelector("p");
|
||||
const readMoreBtn = article.querySelector(".read-more-toggle");
|
||||
if (!excerptP || !readMoreBtn) return;
|
||||
|
||||
const fullExcerpt = excerptP.textContent || "";
|
||||
const { text: truncated, truncated: isTruncated } = truncateToWords(
|
||||
fullExcerpt,
|
||||
80
|
||||
);
|
||||
|
||||
if (isTruncated) {
|
||||
excerptP.dataset.excerptFull = fullExcerpt;
|
||||
excerptP.textContent = truncated;
|
||||
readMoreBtn.style.display = "inline-block";
|
||||
} else {
|
||||
readMoreBtn.style.display = "none";
|
||||
}
|
||||
filterPosts();
|
||||
|
||||
readMoreBtn.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
if (excerptP.dataset.excerptFull) {
|
||||
excerptP.textContent = excerptP.dataset.excerptFull;
|
||||
delete excerptP.dataset.excerptFull;
|
||||
}
|
||||
const fullBlock = article.querySelector(".full-content");
|
||||
if (fullBlock) fullBlock.classList.remove("hidden");
|
||||
readMoreBtn.style.display = "none";
|
||||
|
||||
// Add "Show less" button at the end of the article
|
||||
const showLessBtn = document.createElement("button");
|
||||
showLessBtn.type = "button";
|
||||
showLessBtn.className =
|
||||
"show-less-toggle inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors mt-4";
|
||||
showLessBtn.textContent = "Show less";
|
||||
showLessBtn.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
// Restore truncated excerpt
|
||||
excerptP.textContent = truncated;
|
||||
excerptP.dataset.excerptFull = fullExcerpt;
|
||||
// Hide full content
|
||||
if (fullBlock) fullBlock.classList.add("hidden");
|
||||
// Show "Read more" button again
|
||||
readMoreBtn.style.display = "inline-block";
|
||||
// Remove "Show less" button
|
||||
showLessBtn.remove();
|
||||
});
|
||||
// Insert at the end of the article
|
||||
article.appendChild(showLessBtn);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
blogSearchInput.addEventListener("input", () => {
|
||||
currentPage = 1;
|
||||
filteredPosts = getFilteredPosts();
|
||||
renderBlogPosts();
|
||||
renderPagination();
|
||||
});
|
||||
|
||||
pageButtons.forEach((btn) =>
|
||||
btn.addEventListener("click", () => {
|
||||
currentPage = Number(btn.getAttribute("data-page")) || 1;
|
||||
renderPage();
|
||||
renderBlogPosts();
|
||||
renderPagination();
|
||||
})
|
||||
);
|
||||
|
||||
if (nextButton) {
|
||||
nextButton.addEventListener("click", () => {
|
||||
currentPage += 1;
|
||||
renderPage();
|
||||
renderBlogPosts();
|
||||
renderPagination();
|
||||
});
|
||||
}
|
||||
renderPage();
|
||||
}
|
||||
|
||||
// Initialize everything
|
||||
filteredPosts = getFilteredPosts();
|
||||
renderBlogPosts();
|
||||
renderCategories();
|
||||
renderRecentPosts();
|
||||
renderPagination();
|
||||
})();
|
||||
|
||||
// Inline "Read more" expansion for blog posts
|
||||
const articlesForExcerpt = document.querySelectorAll(
|
||||
|
|
@ -307,6 +558,27 @@ function initSite() {
|
|||
const fullBlock = article.querySelector(".full-content");
|
||||
if (fullBlock) fullBlock.classList.remove("hidden");
|
||||
readMoreBtn.style.display = "none";
|
||||
|
||||
// Add "Show less" button at the end of the article
|
||||
const showLessBtn = document.createElement("button");
|
||||
showLessBtn.type = "button";
|
||||
showLessBtn.className =
|
||||
"show-less-toggle inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors mt-4";
|
||||
showLessBtn.textContent = "Show less";
|
||||
showLessBtn.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
// Restore truncated excerpt
|
||||
excerptP.textContent = truncated;
|
||||
excerptP.dataset.excerptFull = fullExcerpt;
|
||||
// Hide full content
|
||||
if (fullBlock) fullBlock.classList.add("hidden");
|
||||
// Show "Read more" button again
|
||||
readMoreBtn.style.display = "inline-block";
|
||||
// Remove "Show less" button
|
||||
showLessBtn.remove();
|
||||
});
|
||||
// Insert at the end of the article
|
||||
article.appendChild(showLessBtn);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -444,6 +716,14 @@ function initSite() {
|
|||
// Update page title
|
||||
document.title = `${product.name} - KHY`;
|
||||
|
||||
// Update the "Product Details" title with the actual product name
|
||||
const productDetailsTitle = document.getElementById(
|
||||
"product-details-title"
|
||||
);
|
||||
if (productDetailsTitle) {
|
||||
productDetailsTitle.textContent = product.name;
|
||||
}
|
||||
|
||||
// Update product title (the main product title, not the breadcrumb)
|
||||
const allH1s = document.querySelectorAll("h1");
|
||||
console.log("All H1 elements:", allH1s);
|
||||
|
|
@ -516,6 +796,7 @@ function initSite() {
|
|||
if (sizeButtons[index]) {
|
||||
sizeButtons[index].style.display = "flex";
|
||||
sizeButtons[index].textContent = size;
|
||||
sizeButtons[index].setAttribute("data-size", size);
|
||||
// Set selected size
|
||||
if (size === product.selectedSize) {
|
||||
sizeButtons[index].classList.remove(
|
||||
|
|
@ -523,12 +804,32 @@ function initSite() {
|
|||
"text-black"
|
||||
);
|
||||
sizeButtons[index].classList.add("bg-uc-gold", "text-white");
|
||||
sizeButtons[index].classList.add("selected");
|
||||
} else {
|
||||
sizeButtons[index].classList.remove("bg-uc-gold", "text-white");
|
||||
sizeButtons[index].classList.remove(
|
||||
"bg-uc-gold",
|
||||
"text-white",
|
||||
"selected"
|
||||
);
|
||||
sizeButtons[index].classList.add("bg-floral-white", "text-black");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add click event listeners for size buttons
|
||||
sizeButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove selected state from all size buttons
|
||||
sizeButtons.forEach((btn) => {
|
||||
btn.classList.remove("bg-uc-gold", "text-white", "selected");
|
||||
btn.classList.add("bg-floral-white", "text-black");
|
||||
});
|
||||
|
||||
// Add selected state to clicked button
|
||||
this.classList.remove("bg-floral-white", "text-black");
|
||||
this.classList.add("bg-uc-gold", "text-white", "selected");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Update color options - find only the rounded color buttons, not size buttons
|
||||
|
|
@ -546,14 +847,39 @@ function initSite() {
|
|||
product.colors.forEach((color, index) => {
|
||||
if (colorButtons[index]) {
|
||||
colorButtons[index].style.backgroundColor = color.value;
|
||||
colorButtons[index].setAttribute(
|
||||
"data-color",
|
||||
color.name || color.value
|
||||
);
|
||||
// Set selected color
|
||||
if (color.selected) {
|
||||
colorButtons[index].classList.add("border-2", "border-black");
|
||||
colorButtons[index].classList.add(
|
||||
"border-2",
|
||||
"border-black",
|
||||
"selected"
|
||||
);
|
||||
} else {
|
||||
colorButtons[index].classList.remove("border-2", "border-black");
|
||||
colorButtons[index].classList.remove(
|
||||
"border-2",
|
||||
"border-black",
|
||||
"selected"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add click event listeners for color buttons
|
||||
colorButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove selected state from all color buttons
|
||||
colorButtons.forEach((btn) => {
|
||||
btn.classList.remove("border-2", "border-black", "selected");
|
||||
});
|
||||
|
||||
// Add selected state to clicked button
|
||||
this.classList.add("border-2", "border-black", "selected");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Update product metadata - find by text content
|
||||
|
|
@ -671,36 +997,69 @@ function initSite() {
|
|||
);
|
||||
|
||||
// Filter related products by category (excluding current product)
|
||||
const relatedProducts = data.products
|
||||
.filter((p) => p.category === product.category && p.id !== product.id)
|
||||
.slice(0, 4);
|
||||
const allRelatedProducts = data.products.filter(
|
||||
(p) => p.category === product.category && p.id !== product.id
|
||||
);
|
||||
|
||||
console.log("Related products found:", relatedProducts);
|
||||
console.log("All related products found:", allRelatedProducts);
|
||||
|
||||
relatedGrid.innerHTML = relatedProducts
|
||||
.map(
|
||||
(p) => `
|
||||
<a href="product-detail.html?id=${p.id}" class="block">
|
||||
<div class="rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div class="h-72 ${
|
||||
p.name.toLowerCase().includes("asgaard")
|
||||
? "bg-linen"
|
||||
: "bg-white"
|
||||
} flex items-center justify-center">
|
||||
<img src="${p.image}" alt="${
|
||||
p.alt || p.name
|
||||
}" class="w-full h-full object-cover" />
|
||||
let currentPage = 1;
|
||||
const pageSize = 4;
|
||||
|
||||
function renderRelatedProducts() {
|
||||
const start = 0;
|
||||
const end = currentPage * pageSize;
|
||||
const productsToShow = allRelatedProducts.slice(start, end);
|
||||
|
||||
relatedGrid.innerHTML = productsToShow
|
||||
.map(
|
||||
(p) => `
|
||||
<a href="product-detail.html?id=${p.id}" class="block">
|
||||
<div class="rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div class="h-72 ${
|
||||
p.name.toLowerCase().includes("asgaard")
|
||||
? "bg-linen"
|
||||
: "bg-white"
|
||||
} flex items-center justify-center">
|
||||
<img src="${p.image}" alt="${
|
||||
p.alt || p.name
|
||||
}" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="bg-light-bg p-6">
|
||||
<h3 class="font-poppins font-semibold text-2xl text-[#3A3A3A] mb-0">${
|
||||
p.name
|
||||
}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-light-bg p-6">
|
||||
<h3 class="font-poppins font-semibold text-2xl text-[#3A3A3A] mb-0">${
|
||||
p.name
|
||||
}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
</a>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
// Handle "Show More" button visibility
|
||||
const showMoreBtn = document.getElementById("related-show-more");
|
||||
if (showMoreBtn) {
|
||||
const hasMore = allRelatedProducts.length > end;
|
||||
showMoreBtn.style.display = hasMore ? "inline-flex" : "none";
|
||||
showMoreBtn.classList.add(
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"justify-center"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listener for "Show More" button
|
||||
const showMoreBtn = document.getElementById("related-show-more");
|
||||
if (showMoreBtn) {
|
||||
showMoreBtn.addEventListener("click", () => {
|
||||
currentPage += 1;
|
||||
renderRelatedProducts();
|
||||
});
|
||||
}
|
||||
|
||||
// Initial render
|
||||
renderRelatedProducts();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading product data:", error);
|
||||
|
|
@ -1154,8 +1513,230 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
updateFontClasses();
|
||||
});
|
||||
|
||||
// Initialize quote badge on all pages
|
||||
function initQuoteBadge() {
|
||||
// Load quote items from localStorage
|
||||
const storageKey = "khy_quote_items";
|
||||
let quoteItems = [];
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(storageKey);
|
||||
quoteItems = stored ? JSON.parse(stored) : [];
|
||||
} catch (error) {
|
||||
console.error("Error loading quote items:", error);
|
||||
}
|
||||
|
||||
// Calculate total count
|
||||
const count = quoteItems.reduce((total, item) => total + item.quantity, 0);
|
||||
|
||||
// Update quote badge
|
||||
const quoteLink = document.querySelector('a[href="quote.html"]');
|
||||
if (quoteLink) {
|
||||
// Remove existing badge
|
||||
const existingBadge = quoteLink.querySelector(".quote-badge");
|
||||
if (existingBadge) {
|
||||
existingBadge.remove();
|
||||
}
|
||||
|
||||
// Add new badge if there are items
|
||||
if (count > 0) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className =
|
||||
"quote-badge absolute -top-2 -right-2 bg-uc-gold text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-semibold";
|
||||
badge.textContent = count > 99 ? "99+" : count;
|
||||
quoteLink.style.position = "relative";
|
||||
quoteLink.appendChild(badge);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize Add To Quote functionality on product detail pages
|
||||
function initAddToQuote() {
|
||||
const addToQuoteBtn = document.getElementById("add-to-quote-btn");
|
||||
if (addToQuoteBtn) {
|
||||
addToQuoteBtn.addEventListener("click", function () {
|
||||
// Get product data from the page
|
||||
const productData = getProductDataFromPage();
|
||||
if (productData) {
|
||||
// Add to quote using the global function
|
||||
if (typeof addToQuote === "function") {
|
||||
addToQuote(productData);
|
||||
} else {
|
||||
// Fallback: directly use localStorage
|
||||
addToQuoteFallback(productData);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Get product data from the current page
|
||||
function getProductDataFromPage() {
|
||||
// Get product ID from URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const productId = urlParams.get("id");
|
||||
|
||||
if (!productId) {
|
||||
console.error("No product ID found in URL");
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get selected color and size
|
||||
const selectedColor = getSelectedColor();
|
||||
const selectedSize = getSelectedSize();
|
||||
const selectedQuantity = getSelectedQuantity();
|
||||
|
||||
// Get product name and image (you might need to adjust these selectors)
|
||||
const productName = document.querySelector("h1")?.textContent || "Product";
|
||||
const productImage =
|
||||
document.querySelector(".w-\\[500px\\].h-\\[500px\\] img")?.src ||
|
||||
document.querySelector(".w-[500px].h-[500px] img")?.src ||
|
||||
"";
|
||||
|
||||
return {
|
||||
id: parseInt(productId),
|
||||
name: productName,
|
||||
image: productImage,
|
||||
color: selectedColor,
|
||||
size: selectedSize,
|
||||
quantity: selectedQuantity,
|
||||
};
|
||||
}
|
||||
|
||||
// Get selected color from the page
|
||||
function getSelectedColor() {
|
||||
const colorButtons = document.querySelectorAll("button[data-color]");
|
||||
for (let button of colorButtons) {
|
||||
if (
|
||||
button.classList.contains("selected") ||
|
||||
button.classList.contains("border-black")
|
||||
) {
|
||||
return button.getAttribute("data-color") || "Default";
|
||||
}
|
||||
}
|
||||
return "Default";
|
||||
}
|
||||
|
||||
// Get selected size from the page
|
||||
function getSelectedSize() {
|
||||
const sizeButtons = document.querySelectorAll("button[data-size]");
|
||||
for (let button of sizeButtons) {
|
||||
if (
|
||||
button.classList.contains("selected") ||
|
||||
button.classList.contains("bg-uc-gold")
|
||||
) {
|
||||
return button.getAttribute("data-size") || "Standard";
|
||||
}
|
||||
}
|
||||
return "Standard";
|
||||
}
|
||||
|
||||
// Get selected quantity from the page
|
||||
function getSelectedQuantity() {
|
||||
const quantitySpan = document.getElementById("qty-value");
|
||||
if (quantitySpan) {
|
||||
return parseInt(quantitySpan.textContent) || 1;
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
// Fallback function to add to quote directly
|
||||
function addToQuoteFallback(productData) {
|
||||
const storageKey = "khy_quote_items";
|
||||
let quoteItems = [];
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(storageKey);
|
||||
quoteItems = stored ? JSON.parse(stored) : [];
|
||||
} catch (error) {
|
||||
console.error("Error loading quote items:", error);
|
||||
quoteItems = [];
|
||||
}
|
||||
|
||||
// Check if item already exists with same specifications
|
||||
const existingItemIndex = quoteItems.findIndex(
|
||||
(item) =>
|
||||
item.id === productData.id &&
|
||||
item.color === productData.color &&
|
||||
item.size === productData.size
|
||||
);
|
||||
|
||||
if (existingItemIndex !== -1) {
|
||||
// Update quantity of existing item
|
||||
quoteItems[existingItemIndex].quantity += productData.quantity;
|
||||
} else {
|
||||
// Add new item
|
||||
const newItem = {
|
||||
...productData,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
quoteItems.push(newItem);
|
||||
}
|
||||
|
||||
// Save to localStorage
|
||||
try {
|
||||
localStorage.setItem(storageKey, JSON.stringify(quoteItems));
|
||||
|
||||
// Update quote badge
|
||||
initQuoteBadge();
|
||||
|
||||
// Show success message
|
||||
showAddToQuoteSuccess();
|
||||
} catch (error) {
|
||||
console.error("Error saving quote items:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Show success message when item is added
|
||||
function showAddToQuoteSuccess() {
|
||||
// Create success notification
|
||||
const notification = document.createElement("div");
|
||||
notification.className =
|
||||
"fixed top-24 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full";
|
||||
notification.innerHTML = `
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="font-playfair font-semibold">Added to quote!</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
notification.classList.remove("translate-x-full");
|
||||
}, 100);
|
||||
|
||||
// Remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.classList.add("translate-x-full");
|
||||
setTimeout(() => {
|
||||
if (document.body.contains(notification)) {
|
||||
document.body.removeChild(notification);
|
||||
}
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Initialize quote badge immediately if DOM is already loaded
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initQuoteBadge);
|
||||
} else {
|
||||
initQuoteBadge();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initSite);
|
||||
} else {
|
||||
initSite();
|
||||
}
|
||||
|
||||
// Initialize quote badge on page load
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initQuoteBadge();
|
||||
initAddToQuote();
|
||||
});
|
||||
|
||||
// Version: 4.2 - Moved Show Less button to end of blog post content
|
||||
|
|
|
|||
605
scripts/quote.js
Normal file
605
scripts/quote.js
Normal file
|
|
@ -0,0 +1,605 @@
|
|||
// Quote Management System
|
||||
class QuoteManager {
|
||||
constructor() {
|
||||
this.storageKey = "khy_quote_items";
|
||||
this.quoteItems = this.loadQuoteItems();
|
||||
this.init();
|
||||
}
|
||||
|
||||
// Load quote items from localStorage
|
||||
loadQuoteItems() {
|
||||
try {
|
||||
const stored = localStorage.getItem(this.storageKey);
|
||||
return stored ? JSON.parse(stored) : [];
|
||||
} catch (error) {
|
||||
console.error("Error loading quote items:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Save quote items to localStorage
|
||||
saveQuoteItems() {
|
||||
try {
|
||||
localStorage.setItem(this.storageKey, JSON.stringify(this.quoteItems));
|
||||
this.updateQuoteBadge();
|
||||
} catch (error) {
|
||||
console.error("Error saving quote items:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Add item to quote
|
||||
addToQuote(productData) {
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
image,
|
||||
color = "Default",
|
||||
size = "Standard",
|
||||
quantity = 1,
|
||||
} = productData;
|
||||
|
||||
// Check if item already exists with same specifications
|
||||
const existingItemIndex = this.quoteItems.findIndex(
|
||||
(item) => item.id === id && item.color === color && item.size === size
|
||||
);
|
||||
|
||||
if (existingItemIndex !== -1) {
|
||||
// Update quantity of existing item
|
||||
this.quoteItems[existingItemIndex].quantity += quantity;
|
||||
} else {
|
||||
// Add new item
|
||||
const newItem = {
|
||||
id,
|
||||
name,
|
||||
image,
|
||||
color,
|
||||
size,
|
||||
quantity,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
this.quoteItems.push(newItem);
|
||||
}
|
||||
|
||||
this.saveQuoteItems();
|
||||
this.renderQuoteItems();
|
||||
this.showAddToQuoteSuccess();
|
||||
}
|
||||
|
||||
// Remove item from quote
|
||||
removeFromQuote(itemIndex) {
|
||||
this.quoteItems.splice(itemIndex, 1);
|
||||
this.saveQuoteItems();
|
||||
this.renderQuoteItems();
|
||||
}
|
||||
|
||||
// Update item quantity
|
||||
updateQuantity(itemIndex, newQuantity) {
|
||||
if (newQuantity > 0) {
|
||||
this.quoteItems[itemIndex].quantity = newQuantity;
|
||||
this.saveQuoteItems();
|
||||
this.renderQuoteItems();
|
||||
} else {
|
||||
this.removeFromQuote(itemIndex);
|
||||
}
|
||||
}
|
||||
|
||||
// Edit a quote item
|
||||
editQuoteItem(itemIndex) {
|
||||
const item = this.quoteItems[itemIndex];
|
||||
if (!item) return;
|
||||
|
||||
// Create edit modal
|
||||
const modal = document.createElement("div");
|
||||
modal.id = "edit-quote-modal";
|
||||
modal.className =
|
||||
"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50";
|
||||
modal.innerHTML = `
|
||||
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-playfair font-semibold text-xl text-black">Edit Quote Item</h3>
|
||||
<button onclick="quoteManager.closeEditModal()" class="text-gray-500 hover:text-gray-700">
|
||||
<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>
|
||||
|
||||
<div class="flex items-center space-x-4 mb-6">
|
||||
<img src="${item.image}" alt="${
|
||||
item.name
|
||||
}" class="w-16 h-16 object-cover rounded-lg">
|
||||
<div>
|
||||
<h4 class="font-playfair font-semibold text-lg text-black">${
|
||||
item.name
|
||||
}</h4>
|
||||
<p class="text-sm text-gray-600">Product ID: ${item.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="edit-quote-form" class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
|
||||
<div class="flex items-center space-x-3">
|
||||
<button type="button" onclick="quoteManager.decrementEditQuantity()" class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-100 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<input type="number" id="edit-quantity" value="${
|
||||
item.quantity
|
||||
}" min="1" class="w-20 text-center border border-gray-300 rounded-lg px-3 py-2 font-playfair">
|
||||
<button type="button" onclick="quoteManager.incrementEditQuantity()" class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-100 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Color</label>
|
||||
<select id="edit-color" class="w-full border border-gray-300 rounded-lg px-3 py-2 font-playfair">
|
||||
<option value="Black" ${
|
||||
item.color === "Black" ? "selected" : ""
|
||||
}>Black</option>
|
||||
<option value="White" ${
|
||||
item.color === "White" ? "selected" : ""
|
||||
}>White</option>
|
||||
<option value="Brown" ${
|
||||
item.color === "Brown" ? "selected" : ""
|
||||
}>Brown</option>
|
||||
<option value="Gray" ${
|
||||
item.color === "Gray" ? "selected" : ""
|
||||
}>Gray</option>
|
||||
<option value="Beige" ${
|
||||
item.color === "Beige" ? "selected" : ""
|
||||
}>Beige</option>
|
||||
<option value="Navy" ${
|
||||
item.color === "Navy" ? "selected" : ""
|
||||
}>Navy</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Size</label>
|
||||
<select id="edit-size" class="w-full border border-gray-300 rounded-lg px-3 py-2 font-playfair">
|
||||
<option value="S" ${
|
||||
item.size === "S" ? "selected" : ""
|
||||
}>Small (S)</option>
|
||||
<option value="M" ${
|
||||
item.size === "M" ? "selected" : ""
|
||||
}>Medium (M)</option>
|
||||
<option value="L" ${
|
||||
item.size === "L" ? "selected" : ""
|
||||
}>Large (L)</option>
|
||||
<option value="XL" ${
|
||||
item.size === "XL" ? "selected" : ""
|
||||
}>Extra Large (XL)</option>
|
||||
<option value="Standard" ${
|
||||
item.size === "Standard" ? "selected" : ""
|
||||
}>Standard</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3 pt-4">
|
||||
<button type="button" onclick="quoteManager.closeEditModal()" class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-lg font-playfair hover:bg-gray-400 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="flex-1 bg-uc-gold text-white px-4 py-2 rounded-lg font-playfair hover:bg-amber-600 transition-colors">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add form submission handler
|
||||
const form = modal.querySelector("#edit-quote-form");
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
this.saveEditChanges(itemIndex);
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
this.closeEditModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close edit modal
|
||||
closeEditModal() {
|
||||
const modal = document.getElementById("edit-quote-modal");
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Increment quantity in edit modal
|
||||
incrementEditQuantity() {
|
||||
const input = document.getElementById("edit-quantity");
|
||||
if (input) {
|
||||
input.value = parseInt(input.value) + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Decrement quantity in edit modal
|
||||
decrementEditQuantity() {
|
||||
const input = document.getElementById("edit-quantity");
|
||||
if (input && parseInt(input.value) > 1) {
|
||||
input.value = parseInt(input.value) - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Save changes from edit modal
|
||||
saveEditChanges(itemIndex) {
|
||||
const quantity = parseInt(document.getElementById("edit-quantity").value);
|
||||
const color = document.getElementById("edit-color").value;
|
||||
const size = document.getElementById("edit-size").value;
|
||||
|
||||
if (quantity < 1) {
|
||||
alert("Quantity must be at least 1");
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the item
|
||||
this.quoteItems[itemIndex] = {
|
||||
...this.quoteItems[itemIndex],
|
||||
quantity: quantity,
|
||||
color: color,
|
||||
size: size,
|
||||
};
|
||||
|
||||
this.saveQuoteItems();
|
||||
this.renderQuoteItems();
|
||||
this.closeEditModal();
|
||||
|
||||
// Show success message
|
||||
this.showEditSuccess();
|
||||
}
|
||||
|
||||
// Show success message for edit
|
||||
showEditSuccess() {
|
||||
const notification = document.createElement("div");
|
||||
notification.className =
|
||||
"fixed top-24 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full";
|
||||
notification.innerHTML = `
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="font-playfair font-semibold">Quote item updated!</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
notification.classList.remove("translate-x-full");
|
||||
}, 100);
|
||||
|
||||
// Remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.classList.add("translate-x-full");
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(notification);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Clear all quote items
|
||||
clearQuote() {
|
||||
this.quoteItems = [];
|
||||
this.saveQuoteItems();
|
||||
this.renderQuoteItems();
|
||||
}
|
||||
|
||||
// Get quote items count
|
||||
getQuoteCount() {
|
||||
return this.quoteItems.reduce((total, item) => total + item.quantity, 0);
|
||||
}
|
||||
|
||||
// Update quote badge in navigation
|
||||
updateQuoteBadge() {
|
||||
const count = this.getQuoteCount();
|
||||
const quoteLink = document.querySelector('a[href="quote.html"]');
|
||||
|
||||
if (quoteLink) {
|
||||
// Remove existing badge
|
||||
const existingBadge = quoteLink.querySelector(".quote-badge");
|
||||
if (existingBadge) {
|
||||
existingBadge.remove();
|
||||
}
|
||||
|
||||
// Add new badge if there are items
|
||||
if (count > 0) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className =
|
||||
"quote-badge absolute -top-2 -right-2 bg-uc-gold text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-semibold";
|
||||
badge.textContent = count > 99 ? "99+" : count;
|
||||
quoteLink.style.position = "relative";
|
||||
quoteLink.appendChild(badge);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show success message when item is added
|
||||
showAddToQuoteSuccess() {
|
||||
// Create success notification
|
||||
const notification = document.createElement("div");
|
||||
notification.className =
|
||||
"fixed top-24 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full";
|
||||
notification.innerHTML = `
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="font-playfair font-semibold">Added to quote!</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
notification.classList.remove("translate-x-full");
|
||||
}, 100);
|
||||
|
||||
// Remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.classList.add("translate-x-full");
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(notification);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Render quote items on the quote page
|
||||
renderQuoteItems() {
|
||||
const container = document.getElementById("quote-items-container");
|
||||
const emptyMessage = document.getElementById("empty-quote-message");
|
||||
const quoteActions = document.getElementById("quote-actions");
|
||||
|
||||
if (!container) return;
|
||||
|
||||
if (this.quoteItems.length === 0) {
|
||||
// Show empty state
|
||||
if (emptyMessage) emptyMessage.style.display = "block";
|
||||
if (quoteActions) quoteActions.classList.add("hidden");
|
||||
// Clear any existing items but keep the empty message
|
||||
const itemsToRemove = container.querySelectorAll(".bg-gray-50");
|
||||
itemsToRemove.forEach((item) => item.remove());
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide empty message and show actions
|
||||
if (emptyMessage) emptyMessage.style.display = "none";
|
||||
if (quoteActions) quoteActions.classList.remove("hidden");
|
||||
|
||||
// Remove any existing items first
|
||||
const itemsToRemove = container.querySelectorAll(".bg-gray-50");
|
||||
itemsToRemove.forEach((item) => item.remove());
|
||||
|
||||
// Render new items
|
||||
this.quoteItems.forEach((item, index) => {
|
||||
const itemElement = document.createElement("div");
|
||||
itemElement.className =
|
||||
"bg-gray-50 rounded-lg p-6 border border-gray-200";
|
||||
itemElement.innerHTML = `
|
||||
<div class="flex items-center space-x-6">
|
||||
<!-- Product Image -->
|
||||
<div class="w-24 h-24 flex-shrink-0">
|
||||
<img
|
||||
src="${item.image}"
|
||||
alt="${item.name}"
|
||||
class="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Product Details -->
|
||||
<div class="flex-1">
|
||||
<h3 class="font-playfair font-semibold text-xl text-black mb-2">
|
||||
${item.name}
|
||||
</h3>
|
||||
<div class="flex items-center space-x-6 text-sm text-gray-600">
|
||||
<span><strong>Color:</strong> ${item.color}</span>
|
||||
<span><strong>Size:</strong> ${item.size}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quantity Controls -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<button
|
||||
onclick="quoteManager.updateQuantity(${index}, ${
|
||||
item.quantity - 1
|
||||
})"
|
||||
class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="font-playfair font-semibold text-lg text-black min-w-[2rem] text-center">
|
||||
${item.quantity}
|
||||
</span>
|
||||
<button
|
||||
onclick="quoteManager.updateQuantity(${index}, ${
|
||||
item.quantity + 1
|
||||
})"
|
||||
class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Edit Button -->
|
||||
<button
|
||||
onclick="quoteManager.editQuoteItem(${index})"
|
||||
class="text-blue-500 hover:text-blue-700 transition-colors mr-2"
|
||||
title="Edit item"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Remove Button -->
|
||||
<button
|
||||
onclick="quoteManager.removeFromQuote(${index})"
|
||||
class="text-red-500 hover:text-red-700 transition-colors"
|
||||
title="Remove item"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(itemElement);
|
||||
});
|
||||
}
|
||||
|
||||
// Render quote summary in modal
|
||||
renderQuoteSummary() {
|
||||
const summaryContainer = document.getElementById("quote-summary");
|
||||
if (!summaryContainer) return;
|
||||
|
||||
summaryContainer.innerHTML = this.quoteItems
|
||||
.map(
|
||||
(item) => `
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-100">
|
||||
<div class="flex-1">
|
||||
<h5 class="font-playfair font-semibold text-base text-black">${item.name}</h5>
|
||||
<p class="text-sm text-gray-600">${item.color} • ${item.size} • Qty: ${item.quantity}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
// Initialize quote manager
|
||||
init() {
|
||||
this.updateQuoteBadge();
|
||||
this.renderQuoteItems();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
// Setup event listeners
|
||||
setupEventListeners() {
|
||||
// Clear quote button
|
||||
const clearBtn = document.getElementById("clear-quote-btn");
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener("click", () => {
|
||||
if (confirm("Are you sure you want to clear your quote?")) {
|
||||
this.clearQuote();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Request quote button
|
||||
const requestBtn = document.getElementById("request-quote-btn");
|
||||
if (requestBtn) {
|
||||
requestBtn.addEventListener("click", () => {
|
||||
this.openQuoteModal();
|
||||
});
|
||||
}
|
||||
|
||||
// Modal close button
|
||||
const closeBtn = document.getElementById("close-modal-btn");
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", () => {
|
||||
this.closeQuoteModal();
|
||||
});
|
||||
}
|
||||
|
||||
// Modal backdrop click
|
||||
const modal = document.getElementById("quote-modal");
|
||||
if (modal) {
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
this.closeQuoteModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Quote form submission
|
||||
const quoteForm = document.getElementById("quote-form");
|
||||
if (quoteForm) {
|
||||
quoteForm.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
this.submitQuoteRequest();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Open quote modal
|
||||
openQuoteModal() {
|
||||
const modal = document.getElementById("quote-modal");
|
||||
if (modal) {
|
||||
this.renderQuoteSummary();
|
||||
modal.classList.remove("hidden");
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
// Close quote modal
|
||||
closeQuoteModal() {
|
||||
const modal = document.getElementById("quote-modal");
|
||||
if (modal) {
|
||||
modal.classList.add("hidden");
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
}
|
||||
|
||||
// Submit quote request
|
||||
submitQuoteRequest() {
|
||||
const form = document.getElementById("quote-form");
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Get form data
|
||||
const quoteData = {
|
||||
name: formData.get("name"),
|
||||
email: formData.get("email"),
|
||||
phone: formData.get("phone"),
|
||||
company: formData.get("company"),
|
||||
project: formData.get("project"),
|
||||
items: this.quoteItems,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Here you would typically send this data to your server
|
||||
console.log("Quote request data:", quoteData);
|
||||
|
||||
// For now, just show success message
|
||||
alert("Thank you for your quote request! We will get back to you soon.");
|
||||
|
||||
// Clear the quote and close modal
|
||||
this.clearQuote();
|
||||
this.closeQuoteModal();
|
||||
|
||||
// Reset form
|
||||
form.reset();
|
||||
}
|
||||
}
|
||||
|
||||
// Global quote manager instance
|
||||
const quoteManager = new QuoteManager();
|
||||
|
||||
// Global function to add items to quote (called from other pages)
|
||||
function addToQuote(productData) {
|
||||
quoteManager.addToQuote(productData);
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Quote manager is already initialized in constructor
|
||||
});
|
||||
|
||||
// Version: 3.5 - Added edit functionality for quote items
|
||||
142
styles/main.css
142
styles/main.css
|
|
@ -620,6 +620,10 @@ video {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -669,6 +673,18 @@ video {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.-right-2 {
|
||||
right: -0.5rem;
|
||||
}
|
||||
|
||||
.-top-2 {
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
.top-24 {
|
||||
top: 6rem;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -691,6 +707,11 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.-mt-1 {
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
|
@ -779,6 +800,14 @@ video {
|
|||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -911,10 +940,22 @@ video {
|
|||
height: 16rem;
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.max-h-\[90vh\] {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.min-h-\[64px\] {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
|
@ -1003,6 +1044,14 @@ video {
|
|||
width: 16rem;
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.min-w-\[2rem\] {
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
|
@ -1057,6 +1106,11 @@ video {
|
|||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-x-full {
|
||||
--tw-translate-x: 100%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
|
@ -1213,6 +1267,18 @@ video {
|
|||
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1221,6 +1287,10 @@ video {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1420,6 +1490,16 @@ video {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-opacity-60 {
|
||||
--tw-bg-opacity: 0.6;
|
||||
}
|
||||
|
|
@ -1428,6 +1508,10 @@ video {
|
|||
--tw-bg-opacity: 0.7;
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
||||
.bg-center {
|
||||
background-position: center;
|
||||
}
|
||||
|
|
@ -1552,6 +1636,11 @@ video {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.pb-16 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
|
@ -1600,6 +1689,10 @@ video {
|
|||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.pt-6 {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1810,6 +1903,21 @@ video {
|
|||
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-red-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-blue-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-opacity-90 {
|
||||
--tw-text-opacity: 0.9;
|
||||
}
|
||||
|
|
@ -1954,6 +2062,21 @@ video {
|
|||
background-color: rgb(184 135 63 / 0.9);
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-amber-600:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-400:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-opacity-80:hover {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
|
@ -2001,6 +2124,21 @@ video {
|
|||
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-red-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(185 28 28 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-blue-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-gray-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:underline:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
|
|
@ -2144,6 +2282,10 @@ video {
|
|||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:gap-12 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue