Zakaria/CS104_Assignment_1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FAQ fixed

Browse Source
This commit is contained in:
dadgam3er 2025-09-12 16:08:22 +00:00
parent 1b0cdedc14
commit b7d4d6d1ee
3 changed files with 137 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
about.html
View File

@ -125,64 +125,147 @@
<!-- FAQ Section -->
<section class="faq-section" aria-labelledby="faq-heading">
<h2 id="faq-heading">Frequently Asked Questions</h2>
<div class="faq-item">
<div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-1">
<div
class="faq-question"
role="button"
aria-expanded="false"
aria-controls="faq-answer-1"
>
<h4>What makes your teas different from supermarket teas?</h4>
<span class="faq-toggle">+</span>
</div>
<div id="faq-answer-1" class="faq-answer">
<p>Our teas are sourced directly from traditional tea gardens and artisan farmers around the world. Unlike supermarket teas that may sit in warehouses for months, our teas are freshly harvested, properly stored, and shipped directly to you. We work closely with tea masters who have perfected their craft over generations, ensuring you receive authentic, premium-quality teas with exceptional flavor profiles.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-2">
<div
class="faq-question"
role="button"
aria-expanded="false"
aria-controls="faq-answer-2"
>
<h4>How should I store my tea to maintain freshness?</h4>
<span class="faq-toggle">+</span>
</div>
<div id="faq-answer-2" class="faq-answer">
<p>To maintain optimal freshness, store your tea in an airtight container away from light, heat, and moisture. We recommend keeping tea in a cool, dark place like a pantry or cupboard. Avoid storing tea near strong odors, as tea can absorb surrounding scents. Properly stored, most teas will maintain their quality for 6-12 months, while pu-erh teas can actually improve with age when stored correctly.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-3">
<h4>What is the best water temperature for brewing different types of tea?</h4>
<div
class="faq-question"
role="button"
aria-expanded="false"
aria-controls="faq-answer-3"
>
<h4>
What is the best water temperature for brewing different types of
tea?
</h4>
<span class="faq-toggle">+</span>
</div>
<div id="faq-answer-3" class="faq-answer">
<p>Water temperature is crucial for optimal tea brewing. Here's our guide: Green teas: 160-180°F (71-82°C), White teas: 175-185°F (79-85°C), Oolong teas: 185-205°F (85-96°C), Black teas: 200-212°F (93-100°C), Pu-erh teas: 200-212°F (93-100°C), Herbal infusions: 200-212°F (93-100°C). Using water that's too hot can burn delicate teas, while water that's too cool won't extract the full flavor profile.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-4">
<div
class="faq-question"
role="button"
aria-expanded="false"
aria-controls="faq-answer-4"
>
<h4>Do you offer organic teas?</h4>
<span class="faq-toggle">+</span>
</div>
<div id="faq-answer-4" class="faq-answer">
<p>Yes! Many of our teas are certified organic, and we work with farms that practice sustainable, chemical-free cultivation methods. Look for the organic certification label on our product pages. Even our non-certified teas are sourced from farms that prioritize environmental stewardship and sustainable farming practices, as we believe great tea starts with healthy soil and happy plants.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-5">
<h4>How long does shipping take, and do you ship internationally?</h4>
<div
class="faq-question"
role="button"
aria-expanded="false"
aria-controls="faq-answer-5"
>
<h4>
How long does shipping take, and do you ship internationally?
</h4>
<span class="faq-toggle">+</span>
</div>
<div id="faq-answer-5" class="faq-answer">
<p>We offer fast shipping throughout the United States, with most orders arriving within 3-5 business days. We also ship internationally to many countries, though delivery times vary by destination (typically 7-14 business days). All orders include tracking information, and we carefully package our teas to ensure they arrive in perfect condition. Free shipping is available on orders over $50 within the US.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" role="button" aria-expanded="false" aria-controls="faq-answer-6">
<div
class="faq-question"
role="button"
aria-expanded="false"
aria-controls="faq-answer-6"
>
<h4>Can I return or exchange tea if I'm not satisfied?</h4>
<span class="faq-toggle">+</span>
</div>
<div id="faq-answer-6" class="faq-answer">
<p>Your satisfaction is our top priority. If you're not completely happy with your tea, please contact us within 30 days of purchase. While we cannot accept returns of opened tea due to food safety regulations, we'll work with you to find a solution - whether that's a replacement, store credit, or refund depending on the circumstances. We want every cup of tea you brew to bring you joy!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</section>
@ -195,5 +278,7 @@
tea experts.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>

1
contact.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<title>Contact Us - Global Tea Emporium</title>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<header>

60
script.js
View File

@ -1,6 +1,42 @@
// Global Tea Emporium - Optimized JavaScript
document.addEventListener("DOMContentLoaded", function () {
// ===== FAQ ACCORDION =====
const faqQuestions = document.querySelectorAll(".faq-question");
faqQuestions.forEach((question) => {
question.addEventListener("click", function () {
const answer = this.nextElementSibling;
const toggle = this.querySelector(".faq-toggle");
const isExpanded = this.getAttribute("aria-expanded") === "true";
// Close all other FAQ items
faqQuestions.forEach((otherQuestion) => {
if (otherQuestion !== this) {
const otherAnswer = otherQuestion.nextElementSibling;
const otherToggle = otherQuestion.querySelector(".faq-toggle");
otherQuestion.setAttribute("aria-expanded", "false");
otherAnswer.classList.remove("active");
otherToggle.classList.remove("active");
}
});
// Toggle current FAQ item
this.setAttribute("aria-expanded", !isExpanded);
answer.classList.toggle("active");
toggle.classList.toggle("active");
});
// Add keyboard navigation
question.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
this.click();
}
});
});
// ===== IMAGE GALLERY =====
const galleryImages = [
{
@ -58,7 +94,6 @@ document.addEventListener("DOMContentLoaded", function () {
thumb.addEventListener("click", () => updateGallery(index));
});
// Auto-advance every 10 seconds
setInterval(nextImage, 10000);
@ -134,29 +169,6 @@ document.addEventListener("DOMContentLoaded", function () {
});
}
// ===== FAQ ACCORDION =====
document.querySelectorAll(".faq-question").forEach((question) => {
question.addEventListener("click", function () {
const answer = this.nextElementSibling;
const toggle = this.querySelector(".faq-toggle");
const isOpen = this.getAttribute("aria-expanded") === "true";
// Close all other FAQs
document.querySelectorAll(".faq-question").forEach((q) => {
if (q !== this) {
q.setAttribute("aria-expanded", "false");
q.nextElementSibling?.classList.remove("active");
q.querySelector(".faq-toggle")?.classList.remove("active");
}
});
// Toggle current FAQ
this.setAttribute("aria-expanded", !isOpen);
answer?.classList.toggle("active");
toggle?.classList.toggle("active");
});
});
// ===== HOVER EFFECTS =====
document
.querySelectorAll(".services-list li, .value-item, .timeline-item")