Refactor: Reconfigured Directory Structure & Installed 11ty
This commit refactors the project's directory structure to better align with a static site generator (SSG) workflow. The source files have been moved into a dedicated src directory, and Eleventy has been installed as the new SSG.
This commit is contained in:
parent
6c5b28f362
commit
c9c5b89736
|
|
@ -0,0 +1,14 @@
|
||||||
|
module.exports = function (eleventyConfig) {
|
||||||
|
// ✅ Pass through static assets to the root of output
|
||||||
|
eleventyConfig.addPassthroughCopy({ "src/images": "images" });
|
||||||
|
eleventyConfig.addPassthroughCopy({ "src/styles": "styles" });
|
||||||
|
eleventyConfig.addPassthroughCopy({ "src/scripts": "scripts" });
|
||||||
|
|
||||||
|
return {
|
||||||
|
dir: {
|
||||||
|
input: "src",
|
||||||
|
output: "_site",
|
||||||
|
includes: "_includes",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
node_modules/
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,5 +4,8 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"servor": "^4.0.2"
|
"servor": "^4.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@11ty/eleventy": "^3.1.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,275 +1,275 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
||||||
/>
|
/>
|
||||||
<script
|
<script
|
||||||
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
></script>
|
></script>
|
||||||
<title>About Us - Bloom Valley Nursery</title>
|
<title>About Us - Bloom Valley Nursery</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body id="about-page">
|
<body id="about-page">
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img
|
<img
|
||||||
src="images/Client1_LogoPalette2_F0C06D.png"
|
src="images/Client1_LogoPalette2_F0C06D.png"
|
||||||
alt="Bloom Valley Nursery Logo"/>
|
alt="Bloom Valley Nursery Logo"/>
|
||||||
</div>
|
</div>
|
||||||
<h1>Bloom Valley Nursery</h1>
|
<h1>Bloom Valley Nursery</h1>
|
||||||
<!-- Navigation Bar -->
|
<!-- Navigation Bar -->
|
||||||
<nav role="navigation" aria-label="Main Navigation">
|
<nav role="navigation" aria-label="Main Navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="index.html">Home</a></li>
|
<a href="index.html">Home</a></li>
|
||||||
<li><a href="gallery.html">Gallery</a></li>
|
<li><a href="gallery.html">Gallery</a></li>
|
||||||
<li><a href="about.html" aria-current="page" class="current-page">About Us</a></li>
|
<li><a href="about.html" aria-current="page" class="current-page">About Us</a></li>
|
||||||
<li><a href="community.html">Community Events</a></li>
|
<li><a href="community.html">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
id="shopping-cart"
|
id="shopping-cart"
|
||||||
aria-label="Open shopping cart"
|
aria-label="Open shopping cart"
|
||||||
class="fa-solid fa-cart-shopping fa-2xl">
|
class="fa-solid fa-cart-shopping fa-2xl">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content Section -->
|
<!-- Main Content Section -->
|
||||||
<main role="main" id="main-about">
|
<main role="main" id="main-about">
|
||||||
<div id="main-top">
|
<div id="main-top">
|
||||||
<aside
|
<aside
|
||||||
id="business-info"
|
id="business-info"
|
||||||
aria-label="Hours of operation and contact info"
|
aria-label="Hours of operation and contact info"
|
||||||
>
|
>
|
||||||
<h3>Contact Us</h3>
|
<h3>Contact Us</h3>
|
||||||
<div id="phone">
|
<div id="phone">
|
||||||
<h4><strong>Phone:</strong></h4>
|
<h4><strong>Phone:</strong></h4>
|
||||||
<p>(555) 123-4567</p>
|
<p>(555) 123-4567</p>
|
||||||
</div>
|
</div>
|
||||||
<h3>Hours of Operation</h3>
|
<h3>Hours of Operation</h3>
|
||||||
<div id="hours">
|
<div id="hours">
|
||||||
<h4><strong>Monday - Friday:</strong></h4>
|
<h4><strong>Monday - Friday:</strong></h4>
|
||||||
<p>9:00 AM - 6:00 PM</p>
|
<p>9:00 AM - 6:00 PM</p>
|
||||||
<h4><strong>Saturday & Sunday:</strong></h4>
|
<h4><strong>Saturday & Sunday:</strong></h4>
|
||||||
<p>10:00 AM - 5:00 PM</p>
|
<p>10:00 AM - 5:00 PM</p>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<div id="story" aria-label="History of Bloom Valley Nursery">
|
<div id="story" aria-label="History of Bloom Valley Nursery">
|
||||||
<h1>The Story of Bloom Valley</h1>
|
<h1>The Story of Bloom Valley</h1>
|
||||||
<p>
|
<p>
|
||||||
Legend has it that in 1822, Benjamin Bloom, his wife Violet, and
|
Legend has it that in 1822, Benjamin Bloom, his wife Violet, and
|
||||||
their young daughter Nora stumbled upon a breathtaking valley
|
their young daughter Nora stumbled upon a breathtaking valley
|
||||||
brimming with vibrant, rare flowers during their journey westward.
|
brimming with vibrant, rare flowers during their journey westward.
|
||||||
Enchanted by its beauty, they decided to settle there, abandoning
|
Enchanted by its beauty, they decided to settle there, abandoning
|
||||||
their plans to reach California. This picturesque haven became known
|
their plans to reach California. This picturesque haven became known
|
||||||
as Bloom Valley.
|
as Bloom Valley.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Today, on the very land where the Bloom family found their paradise,
|
Today, on the very land where the Bloom family found their paradise,
|
||||||
stands Bloom Valley Nursery. Still family-owned and operated,
|
stands Bloom Valley Nursery. Still family-owned and operated,
|
||||||
siblings Bethany, Vincent, and Nathaniel Bloom carry forward a
|
siblings Bethany, Vincent, and Nathaniel Bloom carry forward a
|
||||||
legacy of preserving and sharing the natural beauty that captivated
|
legacy of preserving and sharing the natural beauty that captivated
|
||||||
the hearts of their ancestors over two centuries ago.
|
the hearts of their ancestors over two centuries ago.
|
||||||
</p>
|
</p>
|
||||||
<p>Though many things have changed through the years, our commitment to serving our community has remained the same. Let us help you cultivate joy, one bloom at a time!</p>
|
<p>Though many things have changed through the years, our commitment to serving our community has remained the same. Let us help you cultivate joy, one bloom at a time!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="main-bottom">
|
<div id="main-bottom">
|
||||||
<div id="feedback" aria-label="Feedback form">
|
<div id="feedback" aria-label="Feedback form">
|
||||||
<div id="feedback-intro">
|
<div id="feedback-intro">
|
||||||
<h1>We Want to Hear From You!</h1>
|
<h1>We Want to Hear From You!</h1>
|
||||||
<h3>Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</h3>
|
<h3>Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</h3>
|
||||||
<p>Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!</p>
|
<p>Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="feedback-form">
|
<div id="feedback-form">
|
||||||
<form action="#" method="POST">
|
<form action="#" method="POST">
|
||||||
<div id="customer-info">
|
<div id="customer-info">
|
||||||
<div id="name-field">
|
<div id="name-field">
|
||||||
<label for="name">Name:</label>
|
<label for="name">Name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="name"
|
id="name"
|
||||||
name="name"
|
name="name"
|
||||||
aria-label="Enter your name here" placeholder="Your Name"
|
aria-label="Enter your name here" placeholder="Your Name"
|
||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
<div id="phone-field">
|
<div id="phone-field">
|
||||||
<label for="tel">Phone Number:</label>
|
<label for="tel">Phone Number:</label>
|
||||||
<input
|
<input
|
||||||
type="tel"
|
type="tel"
|
||||||
id="tel"
|
id="tel"
|
||||||
name="telephone"
|
name="telephone"
|
||||||
aria-label="Enter your contact phone number here" placeholder="Your Phone Number"
|
aria-label="Enter your contact phone number here" placeholder="Your Phone Number"
|
||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
<div id="email-field">
|
<div id="email-field">
|
||||||
<label for="email">Email:</label>
|
<label for="email">Email:</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email"
|
id="email"
|
||||||
name="email"
|
name="email"
|
||||||
aria-label="Enter your contact email here" placeholder="user@domain.com"
|
aria-label="Enter your contact email here" placeholder="user@domain.com"
|
||||||
required/>
|
required/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="customer-message">
|
<div id="customer-message">
|
||||||
<div id="message-field">
|
<div id="message-field">
|
||||||
<label for="message">Message:</label>
|
<label for="message">Message:</label>
|
||||||
<textarea
|
<textarea
|
||||||
id="message"
|
id="message"
|
||||||
name="message"
|
name="message"
|
||||||
rows="5"
|
rows="5"
|
||||||
aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
|
aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
|
||||||
required>
|
required>
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
<div id="form-submit-btn">
|
<div id="form-submit-btn">
|
||||||
<button
|
<button
|
||||||
id="form-submit"
|
id="form-submit"
|
||||||
type="submit"
|
type="submit"
|
||||||
aria-label="Submit feedback or inquiry"
|
aria-label="Submit feedback or inquiry"
|
||||||
>Submit
|
>Submit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer Section -->
|
<!-- Footer Section -->
|
||||||
<footer role="contentinfo">
|
<footer role="contentinfo">
|
||||||
<div id="newsletter-container">
|
<div id="newsletter-container">
|
||||||
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
||||||
<form id="newsletter-form">
|
<form id="newsletter-form">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email-input"
|
id="email-input"
|
||||||
aria-label="Enter your email to Subscribe"
|
aria-label="Enter your email to Subscribe"
|
||||||
placeholder="Subscribe@BloomValleyNursery.com"
|
placeholder="Subscribe@BloomValleyNursery.com"
|
||||||
/>
|
/>
|
||||||
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
||||||
Subscribe Now!
|
Subscribe Now!
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer-nav">
|
<div id="footer-nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="gallery.html">Gallery</a></li>
|
<li><a href="gallery.html">Gallery</a></li>
|
||||||
<li><a href="about.html" class="current-page">About Us</a></li>
|
<li><a href="about.html" class="current-page">About Us</a></li>
|
||||||
<li><a href="community.html">Community Events</a></li>
|
<li><a href="community.html">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="social-media">
|
<div id="social-media">
|
||||||
<p>Check us out on social media!</p>
|
<p>Check us out on social media!</p>
|
||||||
<ul class="social-icons">
|
<ul class="social-icons">
|
||||||
<li id="pinterest">
|
<li id="pinterest">
|
||||||
<a href="#" aria-label="Follow us on Pinterest"
|
<a href="#" aria-label="Follow us on Pinterest"
|
||||||
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
||||||
<li id="facebook">
|
<li id="facebook">
|
||||||
<a href="#" aria-label="Follow us on Facebook"
|
<a href="#" aria-label="Follow us on Facebook"
|
||||||
><i class="fa-brands fa-facebook fa-lg"></i
|
><i class="fa-brands fa-facebook fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="instagram">
|
<li id="instagram">
|
||||||
<a href="#" aria-label="Follow us on Instagram"
|
<a href="#" aria-label="Follow us on Instagram"
|
||||||
><i class="fa-brands fa-instagram fa-lg"></i
|
><i class="fa-brands fa-instagram fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="twitter">
|
<li id="twitter">
|
||||||
<a href="#" aria-label="Follow us on X (Twitter)"
|
<a href="#" aria-label="Follow us on X (Twitter)"
|
||||||
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="youtube">
|
<li id="youtube">
|
||||||
<a href="#" aria-label="View our Youtube channel"
|
<a href="#" aria-label="View our Youtube channel"
|
||||||
><i class="fa-brands fa-youtube fa-lg"></i
|
><i class="fa-brands fa-youtube fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
||||||
</footer>
|
</footer>
|
||||||
<!-- Custom Modal for Newsletter Subscription -->
|
<!-- Custom Modal for Newsletter Subscription -->
|
||||||
<div id="newsletter-modal" class="modal">
|
<div id="newsletter-modal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="newsletter-close-btn">×</span>
|
<span class="close-modal" id="newsletter-close-btn">×</span>
|
||||||
<h2>Newsletter Subscription</h2>
|
<h2>Newsletter Subscription</h2>
|
||||||
<form id="newsletter-form">
|
<form id="newsletter-form">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email-input"
|
id="email-input"
|
||||||
placeholder="Enter your email"
|
placeholder="Enter your email"
|
||||||
required
|
required
|
||||||
aria-label="Enter your email to subscribe"
|
aria-label="Enter your email to subscribe"
|
||||||
/>
|
/>
|
||||||
<button type="submit" id="subscribe-btn">Subscribe</button>
|
<button type="submit" id="subscribe-btn">Subscribe</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Custom Alert Modal -->
|
<!-- Custom Alert Modal -->
|
||||||
<div id="custom-alert" class="modal hidden">
|
<div id="custom-alert" class="modal hidden">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="alert-close-btn">×</span>
|
<span class="close-modal" id="alert-close-btn">×</span>
|
||||||
<p id="alert-message"></p>
|
<p id="alert-message"></p>
|
||||||
<button id="alert-ok-button">OK</button>
|
<button id="alert-ok-button">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Shopping Cart -->
|
<!-- Modal for Shopping Cart -->
|
||||||
<div id="cart-modal" class="modal" style="display: none;">
|
<div id="cart-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal">×</span>
|
<span class="close-modal">×</span>
|
||||||
<h2>Your Shopping Cart</h2>
|
<h2>Your Shopping Cart</h2>
|
||||||
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
||||||
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
||||||
<div class="modal-buttons">
|
<div class="modal-buttons">
|
||||||
<button id="clear-cart-modal-btn">Clear Cart</button>
|
<button id="clear-cart-modal-btn">Clear Cart</button>
|
||||||
<button id="process-order-modal-btn">Process Order</button>
|
<button id="process-order-modal-btn">Process Order</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Item Added -->
|
<!-- Modal for Item Added -->
|
||||||
<div id="item-added-modal" class="modal" style="display: none;">
|
<div id="item-added-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="item-added-close">×</span>
|
<span class="close-modal" id="item-added-close">×</span>
|
||||||
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Confirmation Modal -->
|
<!-- Confirmation Modal -->
|
||||||
<div id="confirmation-modal" class="modal" style="display: none;">
|
<div id="confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="confirmation-close-btn">×</span>
|
<span class="close-modal" id="confirmation-close-btn">×</span>
|
||||||
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
||||||
<button id="confirmation-confirm-btn">Confirm</button>
|
<button id="confirmation-confirm-btn">Confirm</button>
|
||||||
<button id="confirmation-close-btn">Close</button>
|
<button id="confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Final Confirmation Modal -->
|
<!-- Final Confirmation Modal -->
|
||||||
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
||||||
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
||||||
<button id="final-confirmation-close-btn">Close</button>
|
<button id="final-confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- This loads after the page is read by browser -->
|
<!-- This loads after the page is read by browser -->
|
||||||
<script src="cart.js"></script>
|
<script src="cart.js"></script>
|
||||||
<script src="newsletter.js"></script>
|
<script src="newsletter.js"></script>
|
||||||
<script src="feedback.js"></script>
|
<script src="feedback.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,256 +1,256 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
||||||
/>
|
/>
|
||||||
<script
|
<script
|
||||||
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
></script>
|
></script>
|
||||||
<title>Community Events - Bloom Valley Nursery</title>
|
<title>Community Events - Bloom Valley Nursery</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img
|
<img
|
||||||
src="images/Client1_LogoPalette2_F0C06D.png"
|
src="images/Client1_LogoPalette2_F0C06D.png"
|
||||||
alt="Bloom Valley Nursery Logo"
|
alt="Bloom Valley Nursery Logo"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h1>Bloom Valley Nursery</h1>
|
<h1>Bloom Valley Nursery</h1>
|
||||||
<!-- Navigation Bar -->
|
<!-- Navigation Bar -->
|
||||||
<nav role="navigation" aria-label="Main Navigation">
|
<nav role="navigation" aria-label="Main Navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="gallery.html">Gallery</a></li>
|
<li><a href="gallery.html">Gallery</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="community.html" aria-current="page" class="current-page">Community Events</a></li>
|
<li><a href="community.html" aria-current="page" class="current-page">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<button
|
<button
|
||||||
id="shopping-cart"
|
id="shopping-cart"
|
||||||
aria-label="Open shopping cart"
|
aria-label="Open shopping cart"
|
||||||
class="fa-solid fa-cart-shopping fa-2xl"
|
class="fa-solid fa-cart-shopping fa-2xl"
|
||||||
></button>
|
></button>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content Section -->
|
<!-- Main Content Section -->
|
||||||
<main role="main" id="community-page">
|
<main role="main" id="community-page">
|
||||||
<h1>Mark Your Calendars!</h1>
|
<h1>Mark Your Calendars!</h1>
|
||||||
<div id="calendar-events-container">
|
<div id="calendar-events-container">
|
||||||
<div class="calendar">
|
<div class="calendar">
|
||||||
<iframe
|
<iframe
|
||||||
src="https://calendar.google.com/calendar/embed?src=your_calendar_id&ctz=America/Chicago"
|
src="https://calendar.google.com/calendar/embed?src=your_calendar_id&ctz=America/Chicago"
|
||||||
style="border: 0; width: 90vww; height: 600px"
|
style="border: 0; width: 90vww; height: 600px"
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
scrolling="no" aria-label="Google Calendar displaying upcoming events at Bloom Valley Nursery">
|
scrolling="no" aria-label="Google Calendar displaying upcoming events at Bloom Valley Nursery">
|
||||||
</iframe><!-- change "your_calendar_id" to an actual Google Calendar ID (Not possible due to the Client Scenario being fictional. This would require creating a fake Google account.)-->
|
</iframe><!-- change "your_calendar_id" to an actual Google Calendar ID (Not possible due to the Client Scenario being fictional. This would require creating a fake Google account.)-->
|
||||||
</div>
|
</div>
|
||||||
<section class="events" aria-label="List of upcoming local events">
|
<section class="events" aria-label="List of upcoming local events">
|
||||||
<h2>Upcoming Events</h2>
|
<h2>Upcoming Events</h2>
|
||||||
<div class="event-list">
|
<div class="event-list">
|
||||||
<div id="bvn-events">
|
<div id="bvn-events">
|
||||||
<h3>Events at Bloom Valley Nursery</h3>
|
<h3>Events at Bloom Valley Nursery</h3>
|
||||||
<p>
|
<p>
|
||||||
All workshops at Bloom Valley Nursery are provided free of charge to
|
All workshops at Bloom Valley Nursery are provided free of charge to
|
||||||
anyone interested in learning techniques and ideas for creating a
|
anyone interested in learning techniques and ideas for creating a
|
||||||
visually appealing living space that can be personalized to suite
|
visually appealing living space that can be personalized to suite
|
||||||
individual needs. Registration links are provided in each Google
|
individual needs. Registration links are provided in each Google
|
||||||
Calendar Event by clicking on the date of the event within the
|
Calendar Event by clicking on the date of the event within the
|
||||||
Google Calendar on this page.
|
Google Calendar on this page.
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<strong>Gardening and Landscaping 101:</strong><br><strong>When:</strong><br> 2nd Tuesday of
|
<strong>Gardening and Landscaping 101:</strong><br><strong>When:</strong><br> 2nd Tuesday of
|
||||||
Every Month @ 6:30 pm.<br>Join Bethany Bloom as she shares her tips for
|
Every Month @ 6:30 pm.<br>Join Bethany Bloom as she shares her tips for
|
||||||
creating a themed decor through-out the home that you will be
|
creating a themed decor through-out the home that you will be
|
||||||
delighted to share with your holiday guests.
|
delighted to share with your holiday guests.
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<strong>Deck the Halls</strong><br><strong>When:</strong> Saturday @ 10:00 am.<br>Join
|
<strong>Deck the Halls</strong><br><strong>When:</strong> Saturday @ 10:00 am.<br>Join
|
||||||
Nathaniel and Vincent as they guide us through picking and tending
|
Nathaniel and Vincent as they guide us through picking and tending
|
||||||
the perfect live Christmas tree for your Christmas decoration
|
the perfect live Christmas tree for your Christmas decoration
|
||||||
focal-point.
|
focal-point.
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<strong>Christmas Eve and Christmas Day</strong><br><strong>Bloom Valley
|
<strong>Christmas Eve and Christmas Day</strong><br><strong>Bloom Valley
|
||||||
Nursery will close on Christmas Eve at 8:00 pm</strong> for any last-minute
|
Nursery will close on Christmas Eve at 8:00 pm</strong> for any last-minute
|
||||||
shopping.<br>The nursery will remain <strong>closed until January 2nd</strong>. During
|
shopping.<br>The nursery will remain <strong>closed until January 2nd</strong>. During
|
||||||
this time, we will be making improvements to the nursery grounds and
|
this time, we will be making improvements to the nursery grounds and
|
||||||
store with the aim of better serving our Bloom Valley neighbors,
|
store with the aim of better serving our Bloom Valley neighbors,
|
||||||
friends and family. We are excited to share the new features and changes with
|
friends and family. We are excited to share the new features and changes with
|
||||||
you in the New Year!<br><strong>Happy Holidays!!!</strong>
|
you in the New Year!<br><strong>Happy Holidays!!!</strong>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="community-wide">
|
<div id="community-wide">
|
||||||
<h3>Community-Wide Events</h3>
|
<h3>Community-Wide Events</h3>
|
||||||
<p>
|
<p>
|
||||||
This section includes local community events for which Bloom Valley
|
This section includes local community events for which Bloom Valley
|
||||||
Nursery is in partner with or a sponsor of. These events are
|
Nursery is in partner with or a sponsor of. These events are
|
||||||
typically free of charge, but can include sub-events by other local
|
typically free of charge, but can include sub-events by other local
|
||||||
organizations and businesses that may not be free of charge. Check
|
organizations and businesses that may not be free of charge. Check
|
||||||
with specific organizations, businesses, and the Bloom Valley
|
with specific organizations, businesses, and the Bloom Valley
|
||||||
Chamber of Commerce for specific details that may not be provided by
|
Chamber of Commerce for specific details that may not be provided by
|
||||||
Bloom Valley Nursery.
|
Bloom Valley Nursery.
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<strong>Tree Lighting Ceremony</strong><br><strong>When:</strong></br>Thursday @ 6:00 pm.<br>
|
<strong>Tree Lighting Ceremony</strong><br><strong>When:</strong></br>Thursday @ 6:00 pm.<br>
|
||||||
Help us kick off the Holiday festivities by joining the Bloom
|
Help us kick off the Holiday festivities by joining the Bloom
|
||||||
family, along with the Bloom Valley Chamber of Commerce, the Bloom
|
family, along with the Bloom Valley Chamber of Commerce, the Bloom
|
||||||
Valley Garden Club, and many other local businesses and
|
Valley Garden Club, and many other local businesses and
|
||||||
organizations, as we gather <strong>in front of City Hall</strong> for the annual Tree
|
organizations, as we gather <strong>in front of City Hall</strong> for the annual Tree
|
||||||
Lighting Ceremony! This event will include performances by the Bloom
|
Lighting Ceremony! This event will include performances by the Bloom
|
||||||
Valley Junior and Senior High Marching Bands, a workshop for making
|
Valley Junior and Senior High Marching Bands, a workshop for making
|
||||||
tree ornaments, the annual Chili Cook-off, and much more!
|
tree ornaments, the annual Chili Cook-off, and much more!
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!-- Add more events as needed -->
|
<!-- Add more events as needed -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<p>
|
<p>
|
||||||
For more details, to add events to this page, or to leave feedback,
|
For more details, to add events to this page, or to leave feedback,
|
||||||
<a
|
<a
|
||||||
href="about.html#feedback"
|
href="about.html#feedback"
|
||||||
aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
|
aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
|
||||||
>click here</a
|
>click here</a
|
||||||
> to send us a message.
|
> to send us a message.
|
||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer Section -->
|
<!-- Footer Section -->
|
||||||
<footer role="contentinfo">
|
<footer role="contentinfo">
|
||||||
<div id="newsletter-container">
|
<div id="newsletter-container">
|
||||||
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
||||||
<form id="newsletter-form">
|
<form id="newsletter-form">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email-input"
|
id="email-input"
|
||||||
aria-label="Enter your email to Subscribe"
|
aria-label="Enter your email to Subscribe"
|
||||||
placeholder="Subscribe@BloomValleyNursery.com"
|
placeholder="Subscribe@BloomValleyNursery.com"
|
||||||
/>
|
/>
|
||||||
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
||||||
Subscribe Now!
|
Subscribe Now!
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer-nav">
|
<div id="footer-nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="gallery.html">Gallery</a></li>
|
<li><a href="gallery.html">Gallery</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="community.html" class="current-page">Community Events</a></li>
|
<li><a href="community.html" class="current-page">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="social-media">
|
<div id="social-media">
|
||||||
<p>Check us out on social media!</p>
|
<p>Check us out on social media!</p>
|
||||||
<ul class="social-icons">
|
<ul class="social-icons">
|
||||||
<li id="pinterest">
|
<li id="pinterest">
|
||||||
<a href="#" aria-label="Follow us on Pinterest"
|
<a href="#" aria-label="Follow us on Pinterest"
|
||||||
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
||||||
<li id="facebook">
|
<li id="facebook">
|
||||||
<a href="#" aria-label="Follow us on Facebook"
|
<a href="#" aria-label="Follow us on Facebook"
|
||||||
><i class="fa-brands fa-facebook fa-lg"></i
|
><i class="fa-brands fa-facebook fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="instagram">
|
<li id="instagram">
|
||||||
<a href="#" aria-label="Follow us on Instagram"
|
<a href="#" aria-label="Follow us on Instagram"
|
||||||
><i class="fa-brands fa-instagram fa-lg"></i
|
><i class="fa-brands fa-instagram fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="twitter">
|
<li id="twitter">
|
||||||
<a href="#" aria-label="Follow us on X (Twitter)"
|
<a href="#" aria-label="Follow us on X (Twitter)"
|
||||||
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="youtube">
|
<li id="youtube">
|
||||||
<a href="#" aria-label="View our Youtube channel"
|
<a href="#" aria-label="View our Youtube channel"
|
||||||
><i class="fa-brands fa-youtube fa-lg"></i
|
><i class="fa-brands fa-youtube fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
||||||
</footer>
|
</footer>
|
||||||
<!-- Custom Modal for Newsletter Subscription -->
|
<!-- Custom Modal for Newsletter Subscription -->
|
||||||
<div id="newsletter-modal" class="modal">
|
<div id="newsletter-modal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="newsletter-close-btn">×</span>
|
<span class="close-modal" id="newsletter-close-btn">×</span>
|
||||||
<h2>Newsletter Subscription</h2>
|
<h2>Newsletter Subscription</h2>
|
||||||
<form id="newsletter-form">
|
<form id="newsletter-form">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email-input"
|
id="email-input"
|
||||||
placeholder="Enter your email"
|
placeholder="Enter your email"
|
||||||
required
|
required
|
||||||
aria-label="Enter your email to subscribe"
|
aria-label="Enter your email to subscribe"
|
||||||
/>
|
/>
|
||||||
<button type="submit" id="subscribe-btn">Subscribe</button>
|
<button type="submit" id="subscribe-btn">Subscribe</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Custom Alert Modal -->
|
<!-- Custom Alert Modal -->
|
||||||
<div id="custom-alert" class="modal hidden">
|
<div id="custom-alert" class="modal hidden">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="alert-close-btn">×</span>
|
<span class="close-modal" id="alert-close-btn">×</span>
|
||||||
<p id="alert-message"></p>
|
<p id="alert-message"></p>
|
||||||
<button id="alert-ok-button">OK</button>
|
<button id="alert-ok-button">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Shopping Cart -->
|
<!-- Modal for Shopping Cart -->
|
||||||
<div id="cart-modal" class="modal" style="display: none;">
|
<div id="cart-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal">×</span>
|
<span class="close-modal">×</span>
|
||||||
<h2>Your Shopping Cart</h2>
|
<h2>Your Shopping Cart</h2>
|
||||||
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
||||||
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
||||||
<div class="modal-buttons">
|
<div class="modal-buttons">
|
||||||
<button id="clear-cart-modal-btn">Clear Cart</button>
|
<button id="clear-cart-modal-btn">Clear Cart</button>
|
||||||
<button id="process-order-modal-btn">Process Order</button>
|
<button id="process-order-modal-btn">Process Order</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Item Added -->
|
<!-- Modal for Item Added -->
|
||||||
<div id="item-added-modal" class="modal" style="display: none;">
|
<div id="item-added-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="item-added-close">×</span>
|
<span class="close-modal" id="item-added-close">×</span>
|
||||||
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Confirmation Modal -->
|
<!-- Confirmation Modal -->
|
||||||
<div id="confirmation-modal" class="modal" style="display: none;">
|
<div id="confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="confirmation-close-btn">×</span>
|
<span class="close-modal" id="confirmation-close-btn">×</span>
|
||||||
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
||||||
<button id="confirmation-confirm-btn">Confirm</button>
|
<button id="confirmation-confirm-btn">Confirm</button>
|
||||||
<button id="confirmation-close-btn">Close</button>
|
<button id="confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Final Confirmation Modal -->
|
<!-- Final Confirmation Modal -->
|
||||||
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
||||||
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
||||||
<button id="final-confirmation-close-btn">Close</button>
|
<button id="final-confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- This loads after the page is read by browser -->
|
<!-- This loads after the page is read by browser -->
|
||||||
<script src="cart.js"></script>
|
<script src="cart.js"></script>
|
||||||
<script src="newsletter.js"></script>
|
<script src="newsletter.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,219 +1,219 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
||||||
/>
|
/>
|
||||||
<script
|
<script
|
||||||
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
></script>
|
></script>
|
||||||
<title>Gallery - Bloom Valley Nursery</title>
|
<title>Gallery - Bloom Valley Nursery</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img
|
<img
|
||||||
src="images/Client1_LogoPalette2_F0C06D.png"
|
src="images/Client1_LogoPalette2_F0C06D.png"
|
||||||
alt="Bloom Valley Nursery Logo"/>
|
alt="Bloom Valley Nursery Logo"/>
|
||||||
</div>
|
</div>
|
||||||
<h1>Bloom Valley Nursery</h1>
|
<h1>Bloom Valley Nursery</h1>
|
||||||
<!-- Navigation Bar -->
|
<!-- Navigation Bar -->
|
||||||
<nav role="navigation" aria-label="Main Navigation">
|
<nav role="navigation" aria-label="Main Navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="index.html">Home</a></li>
|
<a href="index.html">Home</a></li>
|
||||||
<li><a href="gallery.html" aria-current="page" class="current-page">Gallery</a></li>
|
<li><a href="gallery.html" aria-current="page" class="current-page">Gallery</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="community.html">Community Events</a></li>
|
<li><a href="community.html">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
id="shopping-cart"
|
id="shopping-cart"
|
||||||
aria-label="Open shopping cart"
|
aria-label="Open shopping cart"
|
||||||
class="fa-solid fa-cart-shopping fa-2xl">
|
class="fa-solid fa-cart-shopping fa-2xl">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content Section -->
|
<!-- Main Content Section -->
|
||||||
<main role="main" id="main-gallery">
|
<main role="main" id="main-gallery">
|
||||||
<div id="gallery-top">
|
<div id="gallery-top">
|
||||||
<section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
|
<section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
|
||||||
<h2>Products by Category</h2>
|
<h2>Products by Category</h2>
|
||||||
<div id="product-category-card">
|
<div id="product-category-card">
|
||||||
<button
|
<button
|
||||||
id="scroll-left"
|
id="scroll-left"
|
||||||
aria-label="Scroll products left"
|
aria-label="Scroll products left"
|
||||||
aria-controls="product-carousel"
|
aria-controls="product-carousel"
|
||||||
class="fa-solid fa-chevron-left"
|
class="fa-solid fa-chevron-left"
|
||||||
>
|
>
|
||||||
</button>
|
</button>
|
||||||
<div id="product-carousel">
|
<div id="product-carousel">
|
||||||
<div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
|
<div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
id="scroll-right"
|
id="scroll-right"
|
||||||
aria-label="Scroll products right"
|
aria-label="Scroll products right"
|
||||||
aria-controls="product-carousel"
|
aria-controls="product-carousel"
|
||||||
class="fa-solid fa-chevron-right"
|
class="fa-solid fa-chevron-right"
|
||||||
>
|
>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<aside id="right-aside">
|
<aside id="right-aside">
|
||||||
<div id="category-nav-container" aria-label="Available Product Categories">
|
<div id="category-nav-container" aria-label="Available Product Categories">
|
||||||
<h2>Shop by Category</h2>
|
<h2>Shop by Category</h2>
|
||||||
<div class="categories">
|
<div class="categories">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="gallery.html?category=trees#" class="cat-btn">Trees</a></li>
|
<li><a href="gallery.html?category=trees#" class="cat-btn">Trees</a></li>
|
||||||
<li><a href="gallery.html?category=trees#" class="cat-btn">Shrubs</a></li>
|
<li><a href="gallery.html?category=trees#" class="cat-btn">Shrubs</a></li>
|
||||||
<li><a href="gallery.html?category=indoor#" class="cat-btn">Indoor</a></li>
|
<li><a href="gallery.html?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||||
<li><a href="gallery.html?category=indoor#" class="cat-btn">Patio</a></li>
|
<li><a href="gallery.html?category=indoor#" class="cat-btn">Patio</a></li>
|
||||||
<li><a href="gallery.html?category=tools#" class="cat-btn">Tools</a></li>
|
<li><a href="gallery.html?category=tools#" class="cat-btn">Tools</a></li>
|
||||||
<li><a href="gallery.html?category=tools#" class="cat-btn">Accessories</a></li>
|
<li><a href="gallery.html?category=tools#" class="cat-btn">Accessories</a></li>
|
||||||
<li><a href="gallery.html?category=tools#" class="cat-btn">Landscaping</a></li>
|
<li><a href="gallery.html?category=tools#" class="cat-btn">Landscaping</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div id="gallery-bottom">
|
<div id="gallery-bottom">
|
||||||
<button id="cart-details">View Shopping Cart</button>
|
<button id="cart-details">View Shopping Cart</button>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer Section -->
|
<!-- Footer Section -->
|
||||||
<footer role="contentinfo">
|
<footer role="contentinfo">
|
||||||
<div id="newsletter-container">
|
<div id="newsletter-container">
|
||||||
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
||||||
<form id="newsletter-form">
|
<form id="newsletter-form">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email-input"
|
id="email-input"
|
||||||
aria-label="Enter your email to Subscribe"
|
aria-label="Enter your email to Subscribe"
|
||||||
placeholder="Subscribe@BloomValleyNursery.com"
|
placeholder="Subscribe@BloomValleyNursery.com"
|
||||||
/>
|
/>
|
||||||
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
||||||
Subscribe Now!
|
Subscribe Now!
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer-nav">
|
<div id="footer-nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="gallery.html" class="current-page">Gallery</a></li>
|
<li><a href="gallery.html" class="current-page">Gallery</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="community.html">Community Events</a></li>
|
<li><a href="community.html">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="social-media">
|
<div id="social-media">
|
||||||
<p>Check us out on social media!</p>
|
<p>Check us out on social media!</p>
|
||||||
<ul class="social-icons">
|
<ul class="social-icons">
|
||||||
<li id="pinterest">
|
<li id="pinterest">
|
||||||
<a href="#" aria-label="Follow us on Pinterest"
|
<a href="#" aria-label="Follow us on Pinterest"
|
||||||
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
||||||
<li id="facebook">
|
<li id="facebook">
|
||||||
<a href="#" aria-label="Follow us on Facebook"
|
<a href="#" aria-label="Follow us on Facebook"
|
||||||
><i class="fa-brands fa-facebook fa-lg"></i
|
><i class="fa-brands fa-facebook fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="instagram">
|
<li id="instagram">
|
||||||
<a href="#" aria-label="Follow us on Instagram"
|
<a href="#" aria-label="Follow us on Instagram"
|
||||||
><i class="fa-brands fa-instagram fa-lg"></i
|
><i class="fa-brands fa-instagram fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="twitter">
|
<li id="twitter">
|
||||||
<a href="#" aria-label="Follow us on X (Twitter)"
|
<a href="#" aria-label="Follow us on X (Twitter)"
|
||||||
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="youtube">
|
<li id="youtube">
|
||||||
<a href="#" aria-label="View our Youtube channel"
|
<a href="#" aria-label="View our Youtube channel"
|
||||||
><i class="fa-brands fa-youtube fa-lg"></i
|
><i class="fa-brands fa-youtube fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
||||||
</footer>
|
</footer>
|
||||||
<!-- Custom Modal for Newsletter Subscription -->
|
<!-- Custom Modal for Newsletter Subscription -->
|
||||||
<div id="newsletter-modal" class="modal">
|
<div id="newsletter-modal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="newsletter-close-btn">×</span>
|
<span class="close-modal" id="newsletter-close-btn">×</span>
|
||||||
<h2>Newsletter Subscription</h2>
|
<h2>Newsletter Subscription</h2>
|
||||||
<form id="newsletter-form">
|
<form id="newsletter-form">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email-input"
|
id="email-input"
|
||||||
placeholder="Enter your email"
|
placeholder="Enter your email"
|
||||||
required
|
required
|
||||||
aria-label="Enter your email to subscribe"
|
aria-label="Enter your email to subscribe"
|
||||||
/>
|
/>
|
||||||
<button type="submit" id="subscribe-btn">Subscribe</button>
|
<button type="submit" id="subscribe-btn">Subscribe</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Custom Alert Modal -->
|
<!-- Custom Alert Modal -->
|
||||||
<div id="custom-alert" class="modal hidden">
|
<div id="custom-alert" class="modal hidden">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="alert-close-btn">×</span>
|
<span class="close-modal" id="alert-close-btn">×</span>
|
||||||
<p id="alert-message"></p>
|
<p id="alert-message"></p>
|
||||||
<button id="alert-ok-button">OK</button>
|
<button id="alert-ok-button">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Shopping Cart -->
|
<!-- Modal for Shopping Cart -->
|
||||||
<div id="cart-modal" class="modal" style="display: none;">
|
<div id="cart-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal">×</span>
|
<span class="close-modal">×</span>
|
||||||
<h2>Your Shopping Cart</h2>
|
<h2>Your Shopping Cart</h2>
|
||||||
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
||||||
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
||||||
<div class="modal-buttons">
|
<div class="modal-buttons">
|
||||||
<button id="clear-cart-modal-btn">Clear Cart</button>
|
<button id="clear-cart-modal-btn">Clear Cart</button>
|
||||||
<button id="process-order-modal-btn">Process Order</button>
|
<button id="process-order-modal-btn">Process Order</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Item Added -->
|
<!-- Modal for Item Added -->
|
||||||
<div id="item-added-modal" class="modal" style="display: none;">
|
<div id="item-added-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="item-added-close">×</span>
|
<span class="close-modal" id="item-added-close">×</span>
|
||||||
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Confirmation Modal -->
|
<!-- Confirmation Modal -->
|
||||||
<div id="confirmation-modal" class="modal" style="display: none;">
|
<div id="confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="confirmation-close-btn">×</span>
|
<span class="close-modal" id="confirmation-close-btn">×</span>
|
||||||
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
||||||
<button id="confirmation-confirm-btn">Confirm</button>
|
<button id="confirmation-confirm-btn">Confirm</button>
|
||||||
<button id="confirmation-close-btn">Close</button>
|
<button id="confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Final Confirmation Modal -->
|
<!-- Final Confirmation Modal -->
|
||||||
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
||||||
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
||||||
<button id="final-confirmation-close-btn">Close</button>
|
<button id="final-confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- This loads after the page is read by browser -->
|
<!-- This loads after the page is read by browser -->
|
||||||
<script src="gallery-carousel.js"></script>
|
<script src="gallery-carousel.js"></script>
|
||||||
<script src="cart.js"></script>
|
<script src="cart.js"></script>
|
||||||
<script src="newsletter.js"></script>
|
<script src="newsletter.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 175 KiB After Width: | Height: | Size: 175 KiB |
|
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 213 KiB |
|
Before Width: | Height: | Size: 228 KiB After Width: | Height: | Size: 228 KiB |
|
Before Width: | Height: | Size: 221 KiB After Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 203 KiB |
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 165 KiB |
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 188 KiB |
|
Before Width: | Height: | Size: 256 KiB After Width: | Height: | Size: 256 KiB |
|
Before Width: | Height: | Size: 191 KiB After Width: | Height: | Size: 191 KiB |
|
Before Width: | Height: | Size: 282 KiB After Width: | Height: | Size: 282 KiB |
|
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 213 KiB |
|
Before Width: | Height: | Size: 177 KiB After Width: | Height: | Size: 177 KiB |
|
Before Width: | Height: | Size: 235 KiB After Width: | Height: | Size: 235 KiB |
|
Before Width: | Height: | Size: 212 KiB After Width: | Height: | Size: 212 KiB |
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 212 KiB After Width: | Height: | Size: 212 KiB |
|
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 216 KiB |
|
Before Width: | Height: | Size: 282 KiB After Width: | Height: | Size: 282 KiB |
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 158 KiB |
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 286 KiB |
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 241 KiB |
|
Before Width: | Height: | Size: 184 KiB After Width: | Height: | Size: 184 KiB |
|
Before Width: | Height: | Size: 191 KiB After Width: | Height: | Size: 191 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 259 KiB After Width: | Height: | Size: 259 KiB |
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 256 KiB After Width: | Height: | Size: 256 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 201 KiB |
|
|
@ -1,239 +1,239 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
|
||||||
/>
|
/>
|
||||||
<script
|
<script
|
||||||
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
src="https://kit.fontawesome.com/acb7c3b0da.js"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
></script>
|
></script>
|
||||||
<title>Homepage - Bloom Valley Nursery</title>
|
<title>Homepage - Bloom Valley Nursery</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img
|
<img
|
||||||
src="images/Client1_LogoPalette2_F0C06D.png"
|
src="images/Client1_LogoPalette2_F0C06D.png"
|
||||||
alt="Bloom Valley Nursery Logo"/>
|
alt="Bloom Valley Nursery Logo"/>
|
||||||
</div>
|
</div>
|
||||||
<h1>Bloom Valley Nursery</h1>
|
<h1>Bloom Valley Nursery</h1>
|
||||||
<!-- Navigation Bar -->
|
<!-- Navigation Bar -->
|
||||||
<nav role="navigation" aria-label="Main Navigation">
|
<nav role="navigation" aria-label="Main Navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="index.html" aria-current="page" class="current-page">Home</a></li>
|
<a href="index.html" aria-current="page" class="current-page">Home</a></li>
|
||||||
<li><a href="gallery.html">Gallery</a></li>
|
<li><a href="gallery.html">Gallery</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="community.html">Community Events</a></li>
|
<li><a href="community.html">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
id="shopping-cart"
|
id="shopping-cart"
|
||||||
aria-label="Open shopping cart"
|
aria-label="Open shopping cart"
|
||||||
class="fa-solid fa-cart-shopping fa-2xl">
|
class="fa-solid fa-cart-shopping fa-2xl">
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content Section -->
|
<!-- Main Content Section -->
|
||||||
<main role="main" id="main-index">
|
<main role="main" id="main-index">
|
||||||
<aside id="left-aside">
|
<aside id="left-aside">
|
||||||
<div id="perks-feature-container" aria-label="Reasons for Shopping With Bloom Valley Nursery">
|
<div id="perks-feature-container" aria-label="Reasons for Shopping With Bloom Valley Nursery">
|
||||||
<h2 id="perks-heading">Shopper Perks</h2>
|
<h2 id="perks-heading">Shopper Perks</h2>
|
||||||
<div class="perk-item" aria-label="Perk">
|
<div class="perk-item" aria-label="Perk">
|
||||||
<h3>- 50% Off Deal -</h3>
|
<h3>- 50% Off Deal -</h3>
|
||||||
<p>New subscribers to our newsletter this month will receive a coupon for 50% off their first purchase! Click here for details! Terms and conditions apply.</p>
|
<p>New subscribers to our newsletter this month will receive a coupon for 50% off their first purchase! Click here for details! Terms and conditions apply.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="perk-item" aria-label="Perk">
|
<div class="perk-item" aria-label="Perk">
|
||||||
<h3>Exceptional Quality</h3>
|
<h3>Exceptional Quality</h3>
|
||||||
<p>Every plant is carefully cultivated from seed or bulb to maturity, offering you vibrant, healthy specimens.</p>
|
<p>Every plant is carefully cultivated from seed or bulb to maturity, offering you vibrant, healthy specimens.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="perk-item" aria-label="Perk">
|
<div class="perk-item" aria-label="Perk">
|
||||||
<h3>Expert Guidance</h3>
|
<h3>Expert Guidance</h3>
|
||||||
<p>Our knowledgeable team is here to help, from selecting the perfect plants to offering planting tips.</p>
|
<p>Our knowledgeable team is here to help, from selecting the perfect plants to offering planting tips.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="perk-item" aria-label="Perk">
|
<div class="perk-item" aria-label="Perk">
|
||||||
<h3>Eco-Friendly Practices</h3>
|
<h3>Eco-Friendly Practices</h3>
|
||||||
<p>We prioritize sustainability by using environmentally conscious growing methods, so you can feel good about your choices.</p>
|
<p>We prioritize sustainability by using environmentally conscious growing methods, so you can feel good about your choices.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="testimonials-feature" aria-label="Customer Testimonials About Their Experience With Bloom Valley Nursery.">
|
<div id="testimonials-feature" aria-label="Customer Testimonials About Their Experience With Bloom Valley Nursery.">
|
||||||
<h2>What Others Say</h2>
|
<h2>What Others Say</h2>
|
||||||
<div class="testimonial-container">
|
<div class="testimonial-container">
|
||||||
<div class="testimonial" aria-label="Customer Testimonial.">
|
<div class="testimonial" aria-label="Customer Testimonial.">
|
||||||
<p>"My order arrived the very next day. The speed of delivery and high-quality products provided by Bloom Valley Nursery helped my project go smoothly from start to finish!"</p>
|
<p>"My order arrived the very next day. The speed of delivery and high-quality products provided by Bloom Valley Nursery helped my project go smoothly from start to finish!"</p>
|
||||||
<h3>- Caroline N.</h3>
|
<h3>- Caroline N.</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="testimonial" aria-label="Customer Testimonial.">
|
<div class="testimonial" aria-label="Customer Testimonial.">
|
||||||
<p>"Thanks to the Gardening 101 Workshop with Bethany and Bloom Valley Nursery's amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!"</p>
|
<p>"Thanks to the Gardening 101 Workshop with Bethany and Bloom Valley Nursery's amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!"</p>
|
||||||
<h3>- Morris F.</h3>
|
<h3>- Morris F.</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="testimonial" aria-label="Customer Testimonial.">
|
<div class="testimonial" aria-label="Customer Testimonial.">
|
||||||
<p>"Bloom Valley Nursery's community garden inspired me take charge of my health. I was able to lose 50 pounds!"</p>
|
<p>"Bloom Valley Nursery's community garden inspired me take charge of my health. I was able to lose 50 pounds!"</p>
|
||||||
<h3>- Gladis B.</h3>
|
<h3>- Gladis B.</h3>
|
||||||
</div>
|
</div>
|
||||||
</div> </div>
|
</div> </div>
|
||||||
</aside>
|
</aside>
|
||||||
<!--<div id="featured-images">
|
<!--<div id="featured-images">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<img src="image1.jpg" alt="Feature 1">
|
<img src="image1.jpg" alt="Feature 1">
|
||||||
</div>-->
|
</div>-->
|
||||||
<section id="featured-container" aria-label="Featured items of the week">
|
<section id="featured-container" aria-label="Featured items of the week">
|
||||||
<h2> This Week's Featured Items</h2>
|
<h2> This Week's Featured Items</h2>
|
||||||
<ul id="featured-images" aria-label="Images of this week's featured items">
|
<ul id="featured-images" aria-label="Images of this week's featured items">
|
||||||
<li><a href="gallery.html" id="featured-aloe-plant">
|
<li><a href="gallery.html" id="featured-aloe-plant">
|
||||||
<img src="images/indoor/AloePlant.png" alt="An Aloe Vera plant in a turquoise ceramic planter." class="featured-item">Aloe Vera / Turquoise Planter</a></li>
|
<img src="images/indoor/AloePlant.png" alt="An Aloe Vera plant in a turquoise ceramic planter." class="featured-item">Aloe Vera / Turquoise Planter</a></li>
|
||||||
<li><a href="gallery.html" id="featured-bird-house">
|
<li><a href="gallery.html" id="featured-bird-house">
|
||||||
<img src="images/accessories/BirdHouse.png" alt="A handmade wooden birdhouse painted blue." class="featured-item">Handmade Wooden Birdhouse - Blue</a></li>
|
<img src="images/accessories/BirdHouse.png" alt="A handmade wooden birdhouse painted blue." class="featured-item">Handmade Wooden Birdhouse - Blue</a></li>
|
||||||
<li><a href="gallery.html" id="featured-apple-tree">
|
<li><a href="gallery.html" id="featured-apple-tree">
|
||||||
<img src="images/trees/AppleTree.png" alt="A Red Gala apple sapling in a burlap wrap." class="featured-item">Red Gala Apple Sapling - Burlap Bound</a></li>
|
<img src="images/trees/AppleTree.png" alt="A Red Gala apple sapling in a burlap wrap." class="featured-item">Red Gala Apple Sapling - Burlap Bound</a></li>
|
||||||
<li><a href="gallery.html" id="featured-potting-soil">
|
<li><a href="gallery.html" id="featured-potting-soil">
|
||||||
<img src="images/accessories/PottingSoil.png" alt="A 10 lbs bag of potting soil." class="featured-item">Potting Soil - 10 lbs Bag</a></li>
|
<img src="images/accessories/PottingSoil.png" alt="A 10 lbs bag of potting soil." class="featured-item">Potting Soil - 10 lbs Bag</a></li>
|
||||||
<li><a href="gallery.html" id="featured-spider-plant">
|
<li><a href="gallery.html" id="featured-spider-plant">
|
||||||
<img src="images/indoor/SpiderPlant.png" alt="A Spider plant in a light gray ceramic planter." class="featured-item">Spider Plant / Light Gray Planter</a></li>
|
<img src="images/indoor/SpiderPlant.png" alt="A Spider plant in a light gray ceramic planter." class="featured-item">Spider Plant / Light Gray Planter</a></li>
|
||||||
<li><a href="gallery.html" id="featured-birch-tree">
|
<li><a href="gallery.html" id="featured-birch-tree">
|
||||||
<img src="images/trees/BirchTree.png" alt="A Silver Birch sapling in a disposable plastic container." class="featured-item">Silver Birch Sapling - Containerized</a></li>
|
<img src="images/trees/BirchTree.png" alt="A Silver Birch sapling in a disposable plastic container." class="featured-item">Silver Birch Sapling - Containerized</a></li>
|
||||||
<li><a href="gallery.html" id="featured-watering-can">
|
<li><a href="gallery.html" id="featured-watering-can">
|
||||||
<img src="images/accessories/WateringCan.png" alt="A blue painted aluminum watering can." class="featured-item">Painted Aluminum Watering Can - Blue</a></li>
|
<img src="images/accessories/WateringCan.png" alt="A blue painted aluminum watering can." class="featured-item">Painted Aluminum Watering Can - Blue</a></li>
|
||||||
<li><a href="gallery.html" id="featured-string-of-pearls">
|
<li><a href="gallery.html" id="featured-string-of-pearls">
|
||||||
<img src="images/indoor/StringofPearls.png" alt="String-of-pearls plant in hanging white ceramic planter." class="featured-item">String-of-Pearls Plant / Hanging White Planter</a></li>
|
<img src="images/indoor/StringofPearls.png" alt="String-of-pearls plant in hanging white ceramic planter." class="featured-item">String-of-Pearls Plant / Hanging White Planter</a></li>
|
||||||
<li><a href="gallery.html" id="featured-maple-tree">
|
<li><a href="gallery.html" id="featured-maple-tree">
|
||||||
<img src="images/trees/MapleTree.png" alt="A Japanese Maple sapling in a burlap wrap." class="featured-item">Japanese Maple Sapling - Burlap Bound</a></li>
|
<img src="images/trees/MapleTree.png" alt="A Japanese Maple sapling in a burlap wrap." class="featured-item">Japanese Maple Sapling - Burlap Bound</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<aside id="right-aside">
|
<aside id="right-aside">
|
||||||
<div id="category-nav-container" aria-label="Available Product Categories">
|
<div id="category-nav-container" aria-label="Available Product Categories">
|
||||||
<h2>Shop by Category</h2>
|
<h2>Shop by Category</h2>
|
||||||
<div class="categories">
|
<div class="categories">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="gallery.html?category=trees#" class="cat-btn">Trees</a></li>
|
<li><a href="gallery.html?category=trees#" class="cat-btn">Trees</a></li>
|
||||||
<li><a href="gallery.html?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
<li><a href="gallery.html?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
||||||
<li><a href="gallery.html?category=indoor#" class="cat-btn">Indoor</a></li>
|
<li><a href="gallery.html?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||||
<li><a href="gallery.html?category=patio#" class="cat-btn">Patio</a></li>
|
<li><a href="gallery.html?category=patio#" class="cat-btn">Patio</a></li>
|
||||||
<li><a href="gallery.html?category=tools#" class="cat-btn">Tools</a></li>
|
<li><a href="gallery.html?category=tools#" class="cat-btn">Tools</a></li>
|
||||||
<li><a href="gallery.html?category=accessories#" class="cat-btn">Accessories</a></li>
|
<li><a href="gallery.html?category=accessories#" class="cat-btn">Accessories</a></li>
|
||||||
<li><a href="gallery.html?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
<li><a href="gallery.html?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<!-- Content specific to this page goes here -->
|
<!-- Content specific to this page goes here -->
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer Section -->
|
<!-- Footer Section -->
|
||||||
<footer role="contentinfo">
|
<footer role="contentinfo">
|
||||||
<div id="newsletter-container">
|
<div id="newsletter-container">
|
||||||
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
||||||
<form id="newsletter-form">
|
<form id="newsletter-form">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email-input"
|
id="email-input"
|
||||||
aria-label="Enter your email to Subscribe"
|
aria-label="Enter your email to Subscribe"
|
||||||
placeholder="Subscribe@BloomValleyNursery.com"
|
placeholder="Subscribe@BloomValleyNursery.com"
|
||||||
/>
|
/>
|
||||||
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
||||||
Subscribe Now!
|
Subscribe Now!
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer-nav">
|
<div id="footer-nav">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="index.html" class="current-page">Home</a></li>
|
<li><a href="index.html" class="current-page">Home</a></li>
|
||||||
<li><a href="gallery.html">Gallery</a></li>
|
<li><a href="gallery.html">Gallery</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
<li><a href="community.html">Community Events</a></li>
|
<li><a href="community.html">Community Events</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="social-media">
|
<div id="social-media">
|
||||||
<p>Check us out on social media!</p>
|
<p>Check us out on social media!</p>
|
||||||
<ul class="social-icons">
|
<ul class="social-icons">
|
||||||
<li id="pinterest">
|
<li id="pinterest">
|
||||||
<a href="#" aria-label="Follow us on Pinterest"
|
<a href="#" aria-label="Follow us on Pinterest"
|
||||||
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
||||||
<li id="facebook">
|
<li id="facebook">
|
||||||
<a href="#" aria-label="Follow us on Facebook"
|
<a href="#" aria-label="Follow us on Facebook"
|
||||||
><i class="fa-brands fa-facebook fa-lg"></i
|
><i class="fa-brands fa-facebook fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="instagram">
|
<li id="instagram">
|
||||||
<a href="#" aria-label="Follow us on Instagram"
|
<a href="#" aria-label="Follow us on Instagram"
|
||||||
><i class="fa-brands fa-instagram fa-lg"></i
|
><i class="fa-brands fa-instagram fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="twitter">
|
<li id="twitter">
|
||||||
<a href="#" aria-label="Follow us on X (Twitter)"
|
<a href="#" aria-label="Follow us on X (Twitter)"
|
||||||
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
<li id="youtube">
|
<li id="youtube">
|
||||||
<a href="#" aria-label="View our Youtube channel"
|
<a href="#" aria-label="View our Youtube channel"
|
||||||
><i class="fa-brands fa-youtube fa-lg"></i
|
><i class="fa-brands fa-youtube fa-lg"></i
|
||||||
></a>
|
></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
<div id="copyright">© 2024 Bloom Valley Nursery</div>
|
||||||
</footer>
|
</footer>
|
||||||
<!-- Custom Newsletter Modal -->
|
<!-- Custom Newsletter Modal -->
|
||||||
<div id="custom-alert" class="modal hidden">
|
<div id="custom-alert" class="modal hidden">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="alert-close-btn">×</span>
|
<span class="close-modal" id="alert-close-btn">×</span>
|
||||||
<p id="alert-message"></p>
|
<p id="alert-message"></p>
|
||||||
<button id="alert-ok-button">OK</button>
|
<button id="alert-ok-button">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Shopping Cart -->
|
<!-- Modal for Shopping Cart -->
|
||||||
<div id="cart-modal" class="modal" style="display: none;">
|
<div id="cart-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal">×</span>
|
<span class="close-modal">×</span>
|
||||||
<h2>Your Shopping Cart</h2>
|
<h2>Your Shopping Cart</h2>
|
||||||
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
<ul id="cart-items"></ul> <!-- Dynamically populated -->
|
||||||
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
<p id="cart-total"></p> <!-- Sub-total will appear here -->
|
||||||
<div class="modal-buttons">
|
<div class="modal-buttons">
|
||||||
<button id="clear-cart-modal-btn">Clear Cart</button>
|
<button id="clear-cart-modal-btn">Clear Cart</button>
|
||||||
<button id="process-order-modal-btn">Process Order</button>
|
<button id="process-order-modal-btn">Process Order</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal for Item Added -->
|
<!-- Modal for Item Added -->
|
||||||
<div id="item-added-modal" class="modal" style="display: none;">
|
<div id="item-added-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="item-added-close">×</span>
|
<span class="close-modal" id="item-added-close">×</span>
|
||||||
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
<p id="item-added-message"></p> <!-- Dynamically set message -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Confirmation Modal -->
|
<!-- Confirmation Modal -->
|
||||||
<div id="confirmation-modal" class="modal" style="display: none;">
|
<div id="confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="confirmation-close-btn">×</span>
|
<span class="close-modal" id="confirmation-close-btn">×</span>
|
||||||
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
|
||||||
<button id="confirmation-confirm-btn">Confirm</button>
|
<button id="confirmation-confirm-btn">Confirm</button>
|
||||||
<button id="confirmation-close-btn">Close</button>
|
<button id="confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Final Confirmation Modal -->
|
<!-- Final Confirmation Modal -->
|
||||||
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
<div id="final-confirmation-modal" class="modal" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
<span class="close-modal" id="final-confirmation-close-btn">×</span>
|
||||||
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
|
||||||
<button id="final-confirmation-close-btn">Close</button>
|
<button id="final-confirmation-close-btn">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- This loads after the page is read by browser -->
|
<!-- This loads after the page is read by browser -->
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
<script src="cart.js"></script>
|
<script src="cart.js"></script>
|
||||||
<script src="newsletter.js"></script>
|
<script src="newsletter.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,178 +1,178 @@
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
||||||
|
|
||||||
// Get modal and cart-related elements
|
// Get modal and cart-related elements
|
||||||
const modal = document.getElementById('cart-modal');
|
const modal = document.getElementById('cart-modal');
|
||||||
const closeModal = document.querySelector('.close-modal');
|
const closeModal = document.querySelector('.close-modal');
|
||||||
const cartItemsContainer = document.getElementById('cart-items');
|
const cartItemsContainer = document.getElementById('cart-items');
|
||||||
const cartTotalContainer = document.getElementById('cart-total');
|
const cartTotalContainer = document.getElementById('cart-total');
|
||||||
const clearCartModalButton = document.getElementById('clear-cart-modal-btn');
|
const clearCartModalButton = document.getElementById('clear-cart-modal-btn');
|
||||||
const processOrderModalButton = document.getElementById('process-order-modal-btn');
|
const processOrderModalButton = document.getElementById('process-order-modal-btn');
|
||||||
|
|
||||||
// Custom confirmation modals for clear cart and process order
|
// Custom confirmation modals for clear cart and process order
|
||||||
const confirmationModal = document.getElementById('confirmation-modal');
|
const confirmationModal = document.getElementById('confirmation-modal');
|
||||||
const confirmationMessage = document.getElementById('confirmation-message');
|
const confirmationMessage = document.getElementById('confirmation-message');
|
||||||
const confirmationCloseButton = document.getElementById('confirmation-close-btn');
|
const confirmationCloseButton = document.getElementById('confirmation-close-btn');
|
||||||
const confirmationConfirmButton = document.getElementById('confirmation-confirm-btn');
|
const confirmationConfirmButton = document.getElementById('confirmation-confirm-btn');
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
const shoppingCartButton = document.getElementById('shopping-cart');
|
const shoppingCartButton = document.getElementById('shopping-cart');
|
||||||
const cartDetailsButton = document.getElementById('cart-details');
|
const cartDetailsButton = document.getElementById('cart-details');
|
||||||
|
|
||||||
// Custom alert modal for item added
|
// Custom alert modal for item added
|
||||||
const itemAddedModal = document.getElementById('item-added-modal');
|
const itemAddedModal = document.getElementById('item-added-modal');
|
||||||
const itemAddedMessage = document.getElementById('item-added-message');
|
const itemAddedMessage = document.getElementById('item-added-message');
|
||||||
const itemAddedClose = document.getElementById('item-added-close');
|
const itemAddedClose = document.getElementById('item-added-close');
|
||||||
|
|
||||||
// Final confirmation modal for success messages
|
// Final confirmation modal for success messages
|
||||||
const finalConfirmationModal = document.getElementById('final-confirmation-modal');
|
const finalConfirmationModal = document.getElementById('final-confirmation-modal');
|
||||||
const finalConfirmationMessage = document.getElementById('final-confirmation-message');
|
const finalConfirmationMessage = document.getElementById('final-confirmation-message');
|
||||||
const finalConfirmationCloseButton = document.getElementById('final-confirmation-close-btn');
|
const finalConfirmationCloseButton = document.getElementById('final-confirmation-close-btn');
|
||||||
|
|
||||||
// Function to render the cart
|
// Function to render the cart
|
||||||
function renderCart() {
|
function renderCart() {
|
||||||
cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
||||||
cartItemsContainer.innerHTML = ''; // Clear existing items
|
cartItemsContainer.innerHTML = ''; // Clear existing items
|
||||||
let total = 0;
|
let total = 0;
|
||||||
|
|
||||||
if (cart.length === 0) {
|
if (cart.length === 0) {
|
||||||
cartItemsContainer.innerHTML = '<li>Your cart is empty.</li>';
|
cartItemsContainer.innerHTML = '<li>Your cart is empty.</li>';
|
||||||
cartTotalContainer.textContent = '';
|
cartTotalContainer.textContent = '';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
cart.forEach(item => {
|
cart.forEach(item => {
|
||||||
const itemTotal = item.price * item.quantity;
|
const itemTotal = item.price * item.quantity;
|
||||||
total += itemTotal;
|
total += itemTotal;
|
||||||
|
|
||||||
const listItem = document.createElement('li');
|
const listItem = document.createElement('li');
|
||||||
listItem.textContent = `${item.name} x ${item.quantity} - $${itemTotal.toFixed(2)}`;
|
listItem.textContent = `${item.name} x ${item.quantity} - $${itemTotal.toFixed(2)}`;
|
||||||
cartItemsContainer.appendChild(listItem);
|
cartItemsContainer.appendChild(listItem);
|
||||||
});
|
});
|
||||||
|
|
||||||
cartTotalContainer.textContent = `Subtotal: $${total.toFixed(2)}`;
|
cartTotalContainer.textContent = `Subtotal: $${total.toFixed(2)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show cart modal with current cart content
|
// Show cart modal with current cart content
|
||||||
function showModal() {
|
function showModal() {
|
||||||
renderCart(); // Always render the latest cart
|
renderCart(); // Always render the latest cart
|
||||||
modal.style.display = 'flex'; // Show the cart modal
|
modal.style.display = 'flex'; // Show the cart modal
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show confirmation modal for actions (clear or process order)
|
// Show confirmation modal for actions (clear or process order)
|
||||||
function showConfirmationModal(message, action) {
|
function showConfirmationModal(message, action) {
|
||||||
confirmationMessage.textContent = message;
|
confirmationMessage.textContent = message;
|
||||||
confirmationModal.style.display = 'flex'; // Show the confirmation modal
|
confirmationModal.style.display = 'flex'; // Show the confirmation modal
|
||||||
|
|
||||||
// Confirm action on the "Confirm" button
|
// Confirm action on the "Confirm" button
|
||||||
confirmationConfirmButton.onclick = () => {
|
confirmationConfirmButton.onclick = () => {
|
||||||
action(); // Execute the passed action (clear cart, process order)
|
action(); // Execute the passed action (clear cart, process order)
|
||||||
confirmationModal.style.display = 'none'; // Close the confirmation modal after confirming
|
confirmationModal.style.display = 'none'; // Close the confirmation modal after confirming
|
||||||
};
|
};
|
||||||
|
|
||||||
// Close confirmation modal without performing any action
|
// Close confirmation modal without performing any action
|
||||||
confirmationCloseButton.onclick = () => {
|
confirmationCloseButton.onclick = () => {
|
||||||
confirmationModal.style.display = 'none';
|
confirmationModal.style.display = 'none';
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show final confirmation modal with success message
|
// Show final confirmation modal with success message
|
||||||
function showFinalConfirmationModal(message) {
|
function showFinalConfirmationModal(message) {
|
||||||
finalConfirmationMessage.textContent = message;
|
finalConfirmationMessage.textContent = message;
|
||||||
finalConfirmationModal.style.display = 'flex'; // Show the final confirmation modal
|
finalConfirmationModal.style.display = 'flex'; // Show the final confirmation modal
|
||||||
finalConfirmationCloseButton.onclick = () => {
|
finalConfirmationCloseButton.onclick = () => {
|
||||||
finalConfirmationModal.style.display = 'none'; // Close final confirmation modal
|
finalConfirmationModal.style.display = 'none'; // Close final confirmation modal
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show custom modal when item is added to cart
|
// Show custom modal when item is added to cart
|
||||||
function showItemAddedModal(message) {
|
function showItemAddedModal(message) {
|
||||||
itemAddedMessage.textContent = message; // Set message dynamically
|
itemAddedMessage.textContent = message; // Set message dynamically
|
||||||
itemAddedModal.style.display = 'flex'; // Show the modal
|
itemAddedModal.style.display = 'flex'; // Show the modal
|
||||||
itemAddedClose.addEventListener('click', () => {
|
itemAddedClose.addEventListener('click', () => {
|
||||||
itemAddedModal.style.display = 'none'; // Close the modal
|
itemAddedModal.style.display = 'none'; // Close the modal
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Attach event listeners to both cart buttons
|
// Attach event listeners to both cart buttons
|
||||||
[shoppingCartButton, cartDetailsButton].forEach(button => {
|
[shoppingCartButton, cartDetailsButton].forEach(button => {
|
||||||
if (button) {
|
if (button) {
|
||||||
button.addEventListener('click', showModal); // Open modal when clicked
|
button.addEventListener('click', showModal); // Open modal when clicked
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Close modal when clicking outside of it
|
// Close modal when clicking outside of it
|
||||||
window.addEventListener('click', event => {
|
window.addEventListener('click', event => {
|
||||||
if (event.target === modal) {
|
if (event.target === modal) {
|
||||||
modal.style.display = 'none';
|
modal.style.display = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Close the modal by clicking the close button (for cart modal)
|
// Close the modal by clicking the close button (for cart modal)
|
||||||
if (closeModal) {
|
if (closeModal) {
|
||||||
closeModal.addEventListener('click', () => {
|
closeModal.addEventListener('click', () => {
|
||||||
modal.style.display = 'none';
|
modal.style.display = 'none';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add to cart functionality
|
// Add to cart functionality
|
||||||
const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
|
const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
|
||||||
addToCartButtons.forEach(button => {
|
addToCartButtons.forEach(button => {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
const productId = parseInt(button.dataset.productId, 10);
|
const productId = parseInt(button.dataset.productId, 10);
|
||||||
const product = products.find(item => item.id === productId);
|
const product = products.find(item => item.id === productId);
|
||||||
|
|
||||||
if (product) {
|
if (product) {
|
||||||
const existingProduct = cart.find(item => item.id === productId);
|
const existingProduct = cart.find(item => item.id === productId);
|
||||||
|
|
||||||
if (existingProduct) {
|
if (existingProduct) {
|
||||||
existingProduct.quantity++;
|
existingProduct.quantity++;
|
||||||
} else {
|
} else {
|
||||||
cart.push({ ...product, quantity: 1 });
|
cart.push({ ...product, quantity: 1 });
|
||||||
}
|
}
|
||||||
|
|
||||||
sessionStorage.setItem('cart', JSON.stringify(cart)); // Save cart to session storage
|
sessionStorage.setItem('cart', JSON.stringify(cart)); // Save cart to session storage
|
||||||
showItemAddedModal(`${product.name} has been added to the cart!`); // Show custom modal
|
showItemAddedModal(`${product.name} has been added to the cart!`); // Show custom modal
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Event listener for Clear Cart button in the modal
|
// Event listener for Clear Cart button in the modal
|
||||||
if (clearCartModalButton) {
|
if (clearCartModalButton) {
|
||||||
clearCartModalButton.addEventListener('click', () => {
|
clearCartModalButton.addEventListener('click', () => {
|
||||||
showConfirmationModal('Are you sure you want to clear the cart?', () => {
|
showConfirmationModal('Are you sure you want to clear the cart?', () => {
|
||||||
sessionStorage.removeItem('cart');
|
sessionStorage.removeItem('cart');
|
||||||
cart = [];
|
cart = [];
|
||||||
renderCart(); // Re-render cart after clearing it
|
renderCart(); // Re-render cart after clearing it
|
||||||
showFinalConfirmationModal('Cart has been cleared!'); // Show final confirmation for cart clearing
|
showFinalConfirmationModal('Cart has been cleared!'); // Show final confirmation for cart clearing
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event listener for Process Order button in the modal
|
// Event listener for Process Order button in the modal
|
||||||
if (processOrderModalButton) {
|
if (processOrderModalButton) {
|
||||||
processOrderModalButton.addEventListener('click', () => {
|
processOrderModalButton.addEventListener('click', () => {
|
||||||
if (cart.length === 0) {
|
if (cart.length === 0) {
|
||||||
showItemAddedModal('Your cart is empty. Please add items to the cart before processing the order.');
|
showItemAddedModal('Your cart is empty. Please add items to the cart before processing the order.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
showConfirmationModal('Are you sure you want to process your order?', () => {
|
showConfirmationModal('Are you sure you want to process your order?', () => {
|
||||||
const receiptNumber = Math.floor(Math.random() * 1000000); // Generate receipt number
|
const receiptNumber = Math.floor(Math.random() * 1000000); // Generate receipt number
|
||||||
showFinalConfirmationModal(`Thank you for your order!\nYour receipt number is ${receiptNumber}.`);
|
showFinalConfirmationModal(`Thank you for your order!\nYour receipt number is ${receiptNumber}.`);
|
||||||
sessionStorage.removeItem('cart');
|
sessionStorage.removeItem('cart');
|
||||||
cart = [];
|
cart = [];
|
||||||
renderCart(); // Re-render cart after processing the order
|
renderCart(); // Re-render cart after processing the order
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const allCloseButtons = document.querySelectorAll('.close-modal');
|
const allCloseButtons = document.querySelectorAll('.close-modal');
|
||||||
allCloseButtons.forEach(button => {
|
allCloseButtons.forEach(button => {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
// Close the parent modal of the button clicked
|
// Close the parent modal of the button clicked
|
||||||
const modal = button.closest('.modal');
|
const modal = button.closest('.modal');
|
||||||
modal.style.display = 'none';
|
modal.style.display = 'none';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -1,93 +1,93 @@
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const feedbackForm = document.querySelector('#feedback-form form');
|
const feedbackForm = document.querySelector('#feedback-form form');
|
||||||
const nameInput = document.getElementById('name');
|
const nameInput = document.getElementById('name');
|
||||||
const emailInput = document.getElementById('email');
|
const emailInput = document.getElementById('email');
|
||||||
const phoneInput = document.getElementById('tel');
|
const phoneInput = document.getElementById('tel');
|
||||||
const messageInput = document.getElementById('message');
|
const messageInput = document.getElementById('message');
|
||||||
|
|
||||||
const alertBox = document.getElementById('custom-alert');
|
const alertBox = document.getElementById('custom-alert');
|
||||||
const alertMessage = document.getElementById('alert-message');
|
const alertMessage = document.getElementById('alert-message');
|
||||||
const alertOkButton = document.getElementById('alert-ok-button');
|
const alertOkButton = document.getElementById('alert-ok-button');
|
||||||
const alertCloseButton = document.getElementById('alert-close-btn');
|
const alertCloseButton = document.getElementById('alert-close-btn');
|
||||||
|
|
||||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // Email validation regex
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // Email validation regex
|
||||||
const phoneRegex = /^[0-9]{10,15}$/; // Phone validation regex (10-15 digits)
|
const phoneRegex = /^[0-9]{10,15}$/; // Phone validation regex (10-15 digits)
|
||||||
const nameRegex = /^[a-zA-Z\s]{2,}$/; // Name validation regex (at least 2 letters)
|
const nameRegex = /^[a-zA-Z\s]{2,}$/; // Name validation regex (at least 2 letters)
|
||||||
const sqlInjectionRegex = /[;'"\\]/; // Prevent SQL injection-like characters
|
const sqlInjectionRegex = /[;'"\\]/; // Prevent SQL injection-like characters
|
||||||
|
|
||||||
// Form submission handler
|
// Form submission handler
|
||||||
feedbackForm.addEventListener('submit', (event) => {
|
feedbackForm.addEventListener('submit', (event) => {
|
||||||
event.preventDefault(); // Prevent form submission and page refresh
|
event.preventDefault(); // Prevent form submission and page refresh
|
||||||
|
|
||||||
const name = nameInput.value.trim();
|
const name = nameInput.value.trim();
|
||||||
const email = emailInput.value.trim();
|
const email = emailInput.value.trim();
|
||||||
const phone = phoneInput.value.trim();
|
const phone = phoneInput.value.trim();
|
||||||
const message = messageInput.value.trim();
|
const message = messageInput.value.trim();
|
||||||
|
|
||||||
// Validate each field
|
// Validate each field
|
||||||
if (!nameRegex.test(name)) {
|
if (!nameRegex.test(name)) {
|
||||||
showCustomAlert('Please enter a valid name (letters and spaces only).');
|
showCustomAlert('Please enter a valid name (letters and spaces only).');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!emailRegex.test(email)) {
|
if (!emailRegex.test(email)) {
|
||||||
showCustomAlert('Please enter a valid email address.');
|
showCustomAlert('Please enter a valid email address.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!phoneRegex.test(phone)) {
|
if (!phoneRegex.test(phone)) {
|
||||||
showCustomAlert('Please enter a valid phone number (10-15 digits).');
|
showCustomAlert('Please enter a valid phone number (10-15 digits).');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (sqlInjectionRegex.test(message)) {
|
if (sqlInjectionRegex.test(message)) {
|
||||||
showCustomAlert('Your message contains invalid characters.');
|
showCustomAlert('Your message contains invalid characters.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Save feedback to localStorage
|
// Save feedback to localStorage
|
||||||
const feedbackData = {
|
const feedbackData = {
|
||||||
name,
|
name,
|
||||||
email,
|
email,
|
||||||
phone,
|
phone,
|
||||||
message,
|
message,
|
||||||
timestamp: new Date().toISOString(),
|
timestamp: new Date().toISOString(),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Retrieve existing feedback data or initialize an empty array
|
// Retrieve existing feedback data or initialize an empty array
|
||||||
const feedbackList = JSON.parse(localStorage.getItem('feedbackList')) || [];
|
const feedbackList = JSON.parse(localStorage.getItem('feedbackList')) || [];
|
||||||
feedbackList.push(feedbackData); // Add new feedback to the list
|
feedbackList.push(feedbackData); // Add new feedback to the list
|
||||||
localStorage.setItem('feedbackList', JSON.stringify(feedbackList)); // Save updated list to localStorage
|
localStorage.setItem('feedbackList', JSON.stringify(feedbackList)); // Save updated list to localStorage
|
||||||
console.log('Feedback saved to localStorage:', feedbackList);
|
console.log('Feedback saved to localStorage:', feedbackList);
|
||||||
|
|
||||||
// Show success message
|
// Show success message
|
||||||
showCustomAlert('Thank you for your feedback! We appreciate hearing from you.');
|
showCustomAlert('Thank you for your feedback! We appreciate hearing from you.');
|
||||||
feedbackForm.reset(); // Clear the input fields after submission
|
feedbackForm.reset(); // Clear the input fields after submission
|
||||||
});
|
});
|
||||||
|
|
||||||
// Function to show the custom alert modal
|
// Function to show the custom alert modal
|
||||||
function showCustomAlert(message) {
|
function showCustomAlert(message) {
|
||||||
alertMessage.textContent = message; // Set modal message
|
alertMessage.textContent = message; // Set modal message
|
||||||
alertBox.classList.remove('hidden'); // Display the modal
|
alertBox.classList.remove('hidden'); // Display the modal
|
||||||
alertBox.style.display = 'flex'; // Ensure the modal is visible
|
alertBox.style.display = 'flex'; // Ensure the modal is visible
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to close the custom alert modal
|
// Function to close the custom alert modal
|
||||||
function closeCustomAlert() {
|
function closeCustomAlert() {
|
||||||
alertBox.classList.add('hidden'); // Hide the modal
|
alertBox.classList.add('hidden'); // Hide the modal
|
||||||
alertBox.style.display = 'none'; // Ensure it's hidden
|
alertBox.style.display = 'none'; // Ensure it's hidden
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close modal on "OK" button click
|
// Close modal on "OK" button click
|
||||||
alertOkButton.addEventListener('click', closeCustomAlert);
|
alertOkButton.addEventListener('click', closeCustomAlert);
|
||||||
|
|
||||||
// Close modal on "X" button click
|
// Close modal on "X" button click
|
||||||
alertCloseButton.addEventListener('click', closeCustomAlert);
|
alertCloseButton.addEventListener('click', closeCustomAlert);
|
||||||
|
|
||||||
// Close modal when clicking outside the modal content
|
// Close modal when clicking outside the modal content
|
||||||
window.addEventListener('click', (event) => {
|
window.addEventListener('click', (event) => {
|
||||||
if (event.target === alertBox) {
|
if (event.target === alertBox) {
|
||||||
closeCustomAlert();
|
closeCustomAlert();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -1,130 +1,130 @@
|
||||||
// Gallery Carousel .js
|
// Gallery Carousel .js
|
||||||
const products = {
|
const products = {
|
||||||
trees: [
|
trees: [
|
||||||
{ id: 1, name: "Crepe Mertyl Tree", description: "Beautiful Crepe Mertyl tree.", price: 55.00, image: "images/trees/crepe-mertyl.jpg" },
|
{ id: 1, name: "Crepe Mertyl Tree", description: "Beautiful Crepe Mertyl tree.", price: 55.00, image: "images/trees/crepe-mertyl.jpg" },
|
||||||
{ id: 2, name: "Silver Birch Tree", description: "Sturdy Silver Birch tree.", price: 45.00, image: "images/trees/silver-birch.jpg" },
|
{ id: 2, name: "Silver Birch Tree", description: "Sturdy Silver Birch tree.", price: 45.00, image: "images/trees/silver-birch.jpg" },
|
||||||
{ id: 3, name: "Apple Tree", description: "Fruitful apple tree.", price: 35.00, image: "images/trees/apple-tree.jpg" },
|
{ id: 3, name: "Apple Tree", description: "Fruitful apple tree.", price: 35.00, image: "images/trees/apple-tree.jpg" },
|
||||||
{ id: 4, name: "Potted Spruce Tree", description: "Miniature Spruce in a white planter.", price: 35.00, image: "images/trees/potted-spruce.jpg" }
|
{ id: 4, name: "Potted Spruce Tree", description: "Miniature Spruce in a white planter.", price: 35.00, image: "images/trees/potted-spruce.jpg" }
|
||||||
],
|
],
|
||||||
indoor: [
|
indoor: [
|
||||||
{ id: 5, name: "Aloe Plant", description: "Thrives with 6-8 hours of direct sunlight a day.", price: 15.00, image: "images/indoor/aloe-plant.jpg" },
|
{ id: 5, name: "Aloe Plant", description: "Thrives with 6-8 hours of direct sunlight a day.", price: 15.00, image: "images/indoor/aloe-plant.jpg" },
|
||||||
{ id: 6, name: "Peperonia Plant", description: "Low-maintenance and perfect for spaces with lots of natural light.", price: 12.50, image: "images/indoor/peperonia.jpg" },
|
{ id: 6, name: "Peperonia Plant", description: "Low-maintenance and perfect for spaces with lots of natural light.", price: 12.50, image: "images/indoor/peperonia.jpg" },
|
||||||
{ id: 7, name: "String-of-Pearls Plant", description: "Best placed in east-facing windows or on shaded patios and balconies.", price: 20.00, image: "images/indoor/string-of-pearls.jpg" },
|
{ id: 7, name: "String-of-Pearls Plant", description: "Best placed in east-facing windows or on shaded patios and balconies.", price: 20.00, image: "images/indoor/string-of-pearls.jpg" },
|
||||||
{ id: 12, name: "Venus Fly Trap", description: "Perfect for young botanists or your fly problem!", price: 12.50, image: "images/indoor/venus-fly-trap.jpg"}
|
{ id: 12, name: "Venus Fly Trap", description: "Perfect for young botanists or your fly problem!", price: 12.50, image: "images/indoor/venus-fly-trap.jpg"}
|
||||||
],
|
],
|
||||||
tools: [
|
tools: [
|
||||||
{ id: 8, name: "Watering Cans", description: "Galvanized aluminum watering cans (x2).", price: 25.00, image: "images/tools/watering-cans.jpg" },
|
{ id: 8, name: "Watering Cans", description: "Galvanized aluminum watering cans (x2).", price: 25.00, image: "images/tools/watering-cans.jpg" },
|
||||||
{ id: 9, name: "Potting Soil", description: "Premium-blend of nutrient-rich potting soil - 10 lb bag.", price: 8.00, image: "images/tools/potting-soil.png" },
|
{ id: 9, name: "Potting Soil", description: "Premium-blend of nutrient-rich potting soil - 10 lb bag.", price: 8.00, image: "images/tools/potting-soil.png" },
|
||||||
{ id: 10, name: "Bird House", description: "Handmade wooden bird house for hanging or mounting.", price: 11.00, image: "images/tools/birdhouse.jpg" },
|
{ id: 10, name: "Bird House", description: "Handmade wooden bird house for hanging or mounting.", price: 11.00, image: "images/tools/birdhouse.jpg" },
|
||||||
{ id: 11, name: "Gardening Tools", description: "Wooden handled gardening tools.", price: 20.00, image: "images/tools/gardening-tools.jpg"}
|
{ id: 11, name: "Gardening Tools", description: "Wooden handled gardening tools.", price: 20.00, image: "images/tools/gardening-tools.jpg"}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
console.log("DOM fully loaded and parsed"); // Check if the DOM is ready
|
console.log("DOM fully loaded and parsed"); // Check if the DOM is ready
|
||||||
|
|
||||||
const productCarousel = document.getElementById('product-carousel');
|
const productCarousel = document.getElementById('product-carousel');
|
||||||
const scrollLeftButton = document.getElementById('scroll-left');
|
const scrollLeftButton = document.getElementById('scroll-left');
|
||||||
const scrollRightButton = document.getElementById('scroll-right');
|
const scrollRightButton = document.getElementById('scroll-right');
|
||||||
const categoryButtons = document.querySelectorAll('.cat-btn');
|
const categoryButtons = document.querySelectorAll('.cat-btn');
|
||||||
|
|
||||||
// Scroll button functionality
|
// Scroll button functionality
|
||||||
scrollLeftButton.addEventListener('click', () => {
|
scrollLeftButton.addEventListener('click', () => {
|
||||||
productCarousel.scrollBy({ left: -300, behavior: 'smooth' });
|
productCarousel.scrollBy({ left: -300, behavior: 'smooth' });
|
||||||
});
|
});
|
||||||
|
|
||||||
scrollRightButton.addEventListener('click', () => {
|
scrollRightButton.addEventListener('click', () => {
|
||||||
productCarousel.scrollBy({ left: 300, behavior: 'smooth' });
|
productCarousel.scrollBy({ left: 300, behavior: 'smooth' });
|
||||||
});
|
});
|
||||||
|
|
||||||
// Map buttons to categories
|
// Map buttons to categories
|
||||||
categoryButtons.forEach(button => {
|
categoryButtons.forEach(button => {
|
||||||
button.addEventListener('click', (event) => {
|
button.addEventListener('click', (event) => {
|
||||||
event.preventDefault(); // Prevent default navigation
|
event.preventDefault(); // Prevent default navigation
|
||||||
const url = new URL(button.href); // Parse the URL
|
const url = new URL(button.href); // Parse the URL
|
||||||
const category = url.searchParams.get('category'); // Get category from the query parameter
|
const category = url.searchParams.get('category'); // Get category from the query parameter
|
||||||
updateProductList(category); // Update the product list
|
updateProductList(category); // Update the product list
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Load default category or the one from the current URL
|
// Load default category or the one from the current URL
|
||||||
const currentUrl = new URL(window.location.href);
|
const currentUrl = new URL(window.location.href);
|
||||||
const defaultCategory = currentUrl.searchParams.get('category') || 'trees';
|
const defaultCategory = currentUrl.searchParams.get('category') || 'trees';
|
||||||
updateProductList(defaultCategory);
|
updateProductList(defaultCategory);
|
||||||
});
|
});
|
||||||
|
|
||||||
function updateScrollButtons() {
|
function updateScrollButtons() {
|
||||||
const scrollLeftButton = document.getElementById('scroll-left');
|
const scrollLeftButton = document.getElementById('scroll-left');
|
||||||
const scrollRightButton = document.getElementById('scroll-right');
|
const scrollRightButton = document.getElementById('scroll-right');
|
||||||
const productCarousel = document.getElementById('product-carousel');
|
const productCarousel = document.getElementById('product-carousel');
|
||||||
|
|
||||||
scrollLeftButton.style.display = productCarousel.scrollLeft === 0 ? 'none' : 'block';
|
scrollLeftButton.style.display = productCarousel.scrollLeft === 0 ? 'none' : 'block';
|
||||||
scrollRightButton.style.display =
|
scrollRightButton.style.display =
|
||||||
productCarousel.scrollWidth - productCarousel.clientWidth === productCarousel.scrollLeft
|
productCarousel.scrollWidth - productCarousel.clientWidth === productCarousel.scrollLeft
|
||||||
? 'none'
|
? 'none'
|
||||||
: 'block';
|
: 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateProductList(category) {
|
function updateProductList(category) {
|
||||||
const productList = document.getElementById("product-list");
|
const productList = document.getElementById("product-list");
|
||||||
if (!productList) {
|
if (!productList) {
|
||||||
console.error("Element with ID 'product-list' not found in the DOM.");
|
console.error("Element with ID 'product-list' not found in the DOM.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
productList.innerHTML = ""; // Clear existing products
|
productList.innerHTML = ""; // Clear existing products
|
||||||
console.log(`Updating product list for category: ${category}`); // Debugging line
|
console.log(`Updating product list for category: ${category}`); // Debugging line
|
||||||
|
|
||||||
const selectedProducts = products[category];
|
const selectedProducts = products[category];
|
||||||
|
|
||||||
if (selectedProducts) {
|
if (selectedProducts) {
|
||||||
selectedProducts.forEach(product => {
|
selectedProducts.forEach(product => {
|
||||||
const productCard = document.createElement("div");
|
const productCard = document.createElement("div");
|
||||||
productCard.className = "product-card";
|
productCard.className = "product-card";
|
||||||
|
|
||||||
console.log(`Creating product card for: ${product.name}`); // Debugging line
|
console.log(`Creating product card for: ${product.name}`); // Debugging line
|
||||||
|
|
||||||
productCard.innerHTML = `
|
productCard.innerHTML = `
|
||||||
<img src="${product.image}" alt="${product.name}">
|
<img src="${product.image}" alt="${product.name}">
|
||||||
<h3>${product.name}</h3>
|
<h3>${product.name}</h3>
|
||||||
<p>${product.description}</p>
|
<p>${product.description}</p>
|
||||||
<p>$${product.price}</p>
|
<p>$${product.price}</p>
|
||||||
<button class="add-to-cart-btn" data-product-id="${product.id}">Add to Cart</button>
|
<button class="add-to-cart-btn" data-product-id="${product.id}">Add to Cart</button>
|
||||||
`;
|
`;
|
||||||
productList.appendChild(productCard);
|
productList.appendChild(productCard);
|
||||||
|
|
||||||
// Add event listener for "Add to Cart" button
|
// Add event listener for "Add to Cart" button
|
||||||
const addToCartButton = productCard.querySelector('.add-to-cart-btn');
|
const addToCartButton = productCard.querySelector('.add-to-cart-btn');
|
||||||
addToCartButton.addEventListener('click', () => {
|
addToCartButton.addEventListener('click', () => {
|
||||||
addToCart(product.id);
|
addToCart(product.id);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.error(`No products found for category: ${category}`);
|
console.error(`No products found for category: ${category}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addToCart(productId) {
|
function addToCart(productId) {
|
||||||
const product = findProductById(productId);
|
const product = findProductById(productId);
|
||||||
if (product) {
|
if (product) {
|
||||||
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
||||||
const existingProduct = cart.find(item => item.id === productId);
|
const existingProduct = cart.find(item => item.id === productId);
|
||||||
|
|
||||||
if (existingProduct) {
|
if (existingProduct) {
|
||||||
existingProduct.quantity++;
|
existingProduct.quantity++;
|
||||||
} else {
|
} else {
|
||||||
cart.push({ ...product, quantity: 1 });
|
cart.push({ ...product, quantity: 1 });
|
||||||
}
|
}
|
||||||
|
|
||||||
sessionStorage.setItem('cart', JSON.stringify(cart));
|
sessionStorage.setItem('cart', JSON.stringify(cart));
|
||||||
alert(`${product.name} has been added to your cart!`);
|
alert(`${product.name} has been added to your cart!`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function findProductById(productId) {
|
function findProductById(productId) {
|
||||||
for (let category in products) {
|
for (let category in products) {
|
||||||
const product = products[category].find(item => item.id === productId);
|
const product = products[category].find(item => item.id === productId);
|
||||||
if (product) return product;
|
if (product) return product;
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
@ -1,50 +1,50 @@
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const newsletterForm = document.getElementById('newsletter-form');
|
const newsletterForm = document.getElementById('newsletter-form');
|
||||||
const emailInput = document.getElementById('email-input');
|
const emailInput = document.getElementById('email-input');
|
||||||
const alertBox = document.getElementById('custom-alert');
|
const alertBox = document.getElementById('custom-alert');
|
||||||
const alertMessage = document.getElementById('alert-message');
|
const alertMessage = document.getElementById('alert-message');
|
||||||
const alertOkButton = document.getElementById('alert-ok-button');
|
const alertOkButton = document.getElementById('alert-ok-button');
|
||||||
const alertCloseButton = document.getElementById('alert-close-btn');
|
const alertCloseButton = document.getElementById('alert-close-btn');
|
||||||
|
|
||||||
// Form submission handler
|
// Form submission handler
|
||||||
newsletterForm.addEventListener('submit', (event) => {
|
newsletterForm.addEventListener('submit', (event) => {
|
||||||
event.preventDefault(); // Prevent form from submitting and refreshing the page
|
event.preventDefault(); // Prevent form from submitting and refreshing the page
|
||||||
|
|
||||||
const email = emailInput.value.trim();
|
const email = emailInput.value.trim();
|
||||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||||
|
|
||||||
// Check if email is valid
|
// Check if email is valid
|
||||||
if (!emailRegex.test(email)) {
|
if (!emailRegex.test(email)) {
|
||||||
showCustomAlert('Please enter a valid email address.');
|
showCustomAlert('Please enter a valid email address.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show success message
|
// Show success message
|
||||||
showCustomAlert(`Thank you for subscribing, ${email}!`);
|
showCustomAlert(`Thank you for subscribing, ${email}!`);
|
||||||
newsletterForm.reset(); // Clear the input field after submission
|
newsletterForm.reset(); // Clear the input field after submission
|
||||||
});
|
});
|
||||||
|
|
||||||
// Function to show the custom alert modal
|
// Function to show the custom alert modal
|
||||||
function showCustomAlert(message) {
|
function showCustomAlert(message) {
|
||||||
alertMessage.textContent = message; // Set the alert message
|
alertMessage.textContent = message; // Set the alert message
|
||||||
alertBox.classList.remove('hidden'); // Show the alert modal
|
alertBox.classList.remove('hidden'); // Show the alert modal
|
||||||
alertBox.style.display = 'flex'; // Ensure the modal is displayed
|
alertBox.style.display = 'flex'; // Ensure the modal is displayed
|
||||||
|
|
||||||
// Close the modal when the "OK" button is clicked
|
// Close the modal when the "OK" button is clicked
|
||||||
alertOkButton.addEventListener('click', closeCustomAlert);
|
alertOkButton.addEventListener('click', closeCustomAlert);
|
||||||
alertCloseButton.addEventListener('click', closeCustomAlert);
|
alertCloseButton.addEventListener('click', closeCustomAlert);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to hide the custom alert modal
|
// Function to hide the custom alert modal
|
||||||
function closeCustomAlert() {
|
function closeCustomAlert() {
|
||||||
alertBox.classList.add('hidden'); // Hide the alert modal
|
alertBox.classList.add('hidden'); // Hide the alert modal
|
||||||
alertBox.style.display = 'none'; // Ensure the modal is hidden
|
alertBox.style.display = 'none'; // Ensure the modal is hidden
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close the modal if clicking outside the modal content
|
// Close the modal if clicking outside the modal content
|
||||||
window.addEventListener('click', (event) => {
|
window.addEventListener('click', (event) => {
|
||||||
if (event.target === alertBox) {
|
if (event.target === alertBox) {
|
||||||
closeCustomAlert();
|
closeCustomAlert();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue