diff --git a/blog.html b/blog.html index 5e4d20c..a1ef848 100644 --- a/blog.html +++ b/blog.html @@ -140,129 +140,15 @@
-
- -
- -
- Going all-in with millennial design -
- - -
- -
- Admin - - Admin - -
- - -
- Calendar - - 14 Oct 2022 - -
- - -
- Tag - - Wood - -
-
- - -

- Going all-in with millennial design -

- - -

- 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. -

- - - - - - -
+
+
+ +
+
+
@@ -341,27 +215,8 @@

Recent Posts

-
- -
- Blog thumbnail -
-

- Going all-in with millennial design -

-

- 03 Aug 2022 -

-
-
+
+
@@ -520,6 +375,6 @@
- + diff --git a/contact.html b/contact.html index f184275..dafb8e3 100644 --- a/contact.html +++ b/contact.html @@ -421,6 +421,9 @@ + +
+
diff --git a/data/blog.json b/data/blog.json new file mode 100644 index 0000000..1c8d54a --- /dev/null +++ b/data/blog.json @@ -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" + } + ] +} diff --git a/product-catalog.html b/product-catalog.html index 544f2a9..d2ef24e 100644 --- a/product-catalog.html +++ b/product-catalog.html @@ -277,6 +277,9 @@ + +
+
diff --git a/product-detail.html b/product-detail.html index bf42120..aac0615 100644 --- a/product-detail.html +++ b/product-detail.html @@ -96,7 +96,10 @@
-

+

Product Details

@@ -264,6 +267,7 @@ - -
@@ -588,6 +586,7 @@
- + + diff --git a/quote.html b/quote.html new file mode 100644 index 0000000..f00f98f --- /dev/null +++ b/quote.html @@ -0,0 +1,523 @@ + + + + + + Quote - KHY + + + + + + + +
+ +
+ +
+ +
+ +
+ Quote background +
+ + +
+ + +
+

+ Request a Quote +

+
+
+ + +
+
+ +
+

+ Your Quote Items +

+

+ Review and manage the items you've selected for your quote. You + can modify quantities, remove items, or continue shopping. +

+
+ + +
+ +
+
+ + + +
+

+ Your quote is empty +

+

+ Start building your quote by adding products from our catalog. +

+ + Browse Products + +
+
+ + + +
+
+ + + +
+ + +
+ + + + + + + + diff --git a/scripts/main.js b/scripts/main.js index 86641f9..581c4a2 100644 --- a/scripts/main.js +++ b/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) => + `${ + tag.charAt(0).toUpperCase() + tag.slice(1) + }` + ) + .join(", "); + + const contentHtml = post.content + .map((paragraph) => `

${paragraph}

`) + .join(""); + + return ` +
+ +
+ ${post.alt || post.title} +
+ + +
+ +
+ Admin + + ${post.author} + +
+ + +
+ Calendar + + ${formatDate(post.date)} + +
+ + +
+ Tag + + ${ + post.tags[0] + ? post.tags[0].charAt(0).toUpperCase() + + post.tags[0].slice(1) + : "Uncategorized" + } + +
+
+ + +

+ ${post.title} +

+ + +

+ ${post.excerpt} +

+ + + + + + +
+ `; + } + + 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]) => ` + + ` + ) + .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) => ` +
+ ${post.alt || post.title} +
+

+ ${post.title} +

+

+ ${formatDate(post.date)} +

+
+
+ ` + ) + .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) => ` - -
-
- ${ - p.alt || p.name - } + 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) => ` + +
+
+ ${ + p.alt || p.name + } +
+
+

${ + p.name + }

+
-
-

${ - p.name - }

-
-
- - ` - ) - .join(""); + + ` + ) + .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 = ` +
+ + + + Added to quote! +
+ `; + + 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 diff --git a/scripts/quote.js b/scripts/quote.js new file mode 100644 index 0000000..1e9e968 --- /dev/null +++ b/scripts/quote.js @@ -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 = ` +
+
+

Edit Quote Item

+ +
+ +
+ ${ + item.name + } +
+

${ + item.name + }

+

Product ID: ${item.id}

+
+
+ +
+
+ +
+ + + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ `; + + 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 = ` +
+ + + + Quote item updated! +
+ `; + + 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 = ` +
+ + + + Added to quote! +
+ `; + + 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 = ` +
+ +
+ ${item.name} +
+ + +
+

+ ${item.name} +

+
+ Color: ${item.color} + Size: ${item.size} +
+
+ + +
+ + + ${item.quantity} + + +
+ + + + + + +
+ `; + container.appendChild(itemElement); + }); + } + + // Render quote summary in modal + renderQuoteSummary() { + const summaryContainer = document.getElementById("quote-summary"); + if (!summaryContainer) return; + + summaryContainer.innerHTML = this.quoteItems + .map( + (item) => ` +
+
+
${item.name}
+

${item.color} • ${item.size} • Qty: ${item.quantity}

+
+
+ ` + ) + .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 diff --git a/styles/main.css b/styles/main.css index 44056e9..b47beff 100644 --- a/styles/main.css +++ b/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; }