diff --git a/index.html b/index.html
index 8ab3478..ea1d168 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
Global Tea Emporium - Premium Authentic Teas Worldwide
+
diff --git a/script.js b/script.js
index ec8d89a..4be906a 100644
--- a/script.js
+++ b/script.js
@@ -1,295 +1,185 @@
-// Global Tea Emporium - JavaScript Functionality
+// Global Tea Emporium - Optimized JavaScript
-// Image Gallery Functionality
-document.addEventListener('DOMContentLoaded', function() {
- console.log('Gallery script loading...');
-
- const galleryImages = [
- {
- src: 'images/green-tea-leaves.webp',
- alt: 'Premium Green Tea Leaves',
- caption: 'Premium Green Tea Leaves - Hand-picked from our finest gardens'
- },
- {
- src: 'images/Indian Black Teas.webp',
- alt: 'Indian Black Tea Selection',
- caption: 'Authentic Indian Black Teas - Rich and robust flavors from Assam and Darjeeling'
- },
- {
- src: 'images/Oolong Selections.jpg',
- alt: 'Oolong Tea Collection',
- caption: 'Traditional Oolong Selections - Complex flavors from Taiwan and China'
+document.addEventListener("DOMContentLoaded", function () {
+ // ===== IMAGE GALLERY =====
+ const galleryImages = [
+ {
+ src: "images/green-tea-leaves.webp",
+ alt: "Premium Green Tea Leaves",
+ caption: "Premium Green Tea Leaves - Hand-picked from our finest gardens",
+ },
+ {
+ src: "images/Indian Black Teas.webp",
+ alt: "Indian Black Tea Selection",
+ caption:
+ "Authentic Indian Black Teas - Rich and robust flavors from Assam and Darjeeling",
+ },
+ {
+ src: "images/Oolong Selections.jpg",
+ alt: "Oolong Tea Collection",
+ caption:
+ "Traditional Oolong Selections - Complex flavors from Taiwan and China",
+ },
+ ];
+
+ const galleryImage = document.getElementById("gallery-image");
+ const galleryCaption = document.getElementById("gallery-caption");
+ const thumbnails = document.querySelectorAll(".thumbnail");
+ let currentIndex = 0;
+
+ if (!galleryImage || !galleryCaption) return;
+
+ // Update gallery display
+ function updateGallery(index) {
+ currentIndex = index;
+ const image = galleryImages[index];
+ galleryImage.src = image.src;
+ galleryImage.alt = image.alt;
+ galleryCaption.textContent = image.caption;
+
+ thumbnails.forEach((thumb, i) => {
+ thumb.classList.toggle("active", i === index);
+ });
+ }
+
+ // Navigation functions
+ const nextImage = () =>
+ updateGallery((currentIndex + 1) % galleryImages.length);
+ const prevImage = () =>
+ updateGallery(
+ (currentIndex - 1 + galleryImages.length) % galleryImages.length
+ );
+
+ // Event listeners
+ document.getElementById("next-btn")?.addEventListener("click", nextImage);
+ document.getElementById("prev-btn")?.addEventListener("click", prevImage);
+
+ thumbnails.forEach((thumb, index) => {
+ thumb.addEventListener("click", () => updateGallery(index));
+ });
+
+
+ // Auto-advance every 10 seconds
+ setInterval(nextImage, 10000);
+
+ // ===== CONTACT FORM =====
+ const contactForm = document.querySelector(".contact-form");
+ if (contactForm) {
+ const validateField = (field) => {
+ const group = field.closest(".form-group");
+ const error = group?.querySelector(".error-message");
+ let isValid = true;
+ let message = "";
+
+ group?.classList.remove("error", "success");
+
+ if (field.required && !field.value.trim()) {
+ isValid = false;
+ message = "This field is required.";
+ } else if (
+ field.type === "email" &&
+ field.value &&
+ !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value)
+ ) {
+ isValid = false;
+ message = "Please enter a valid email address.";
+ } else if (
+ field.type === "tel" &&
+ field.value &&
+ !/^[\d\s\-\+\(\)]+$/.test(field.value)
+ ) {
+ isValid = false;
+ message = "Please enter a valid phone number.";
+ }
+
+ if (error) error.textContent = message;
+ group?.classList.add(
+ isValid && field.value.trim() ? "success" : isValid ? "" : "error"
+ );
+ return isValid;
+ };
+
+ contactForm.querySelectorAll("input, textarea").forEach((field) => {
+ field.addEventListener("blur", () => validateField(field));
+ field.addEventListener("input", () => {
+ if (field.closest(".form-group")?.classList.contains("error")) {
+ validateField(field);
}
- ];
-
- let currentImageIndex = 0;
- const galleryImage = document.getElementById('gallery-image');
- const galleryCaption = document.getElementById('gallery-caption');
- const prevBtn = document.getElementById('prev-btn');
- const nextBtn = document.getElementById('next-btn');
- const thumbnails = document.querySelectorAll('.thumbnail');
-
- // Check if gallery elements exist
- if (!galleryImage || !galleryCaption) {
- console.log('Gallery image or caption not found');
- return;
- }
-
- console.log('Gallery elements found:', {
- image: !!galleryImage,
- caption: !!galleryCaption,
- prevBtn: !!prevBtn,
- nextBtn: !!nextBtn,
- thumbnails: thumbnails.length
+ });
});
- function updateGallery(index) {
- console.log('Updating gallery to index:', index);
- currentImageIndex = index;
- galleryImage.src = galleryImages[index].src;
- galleryImage.alt = galleryImages[index].alt;
- galleryCaption.textContent = galleryImages[index].caption;
-
- // Update active thumbnail
- thumbnails.forEach((thumb, i) => {
- thumb.classList.toggle('active', i === index);
- });
- }
+ contactForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+ const fields = contactForm.querySelectorAll("input, textarea");
+ const isValid = Array.from(fields).every(validateField);
- function nextImage() {
- console.log('Next image clicked');
- const newIndex = (currentImageIndex + 1) % galleryImages.length;
- updateGallery(newIndex);
- }
+ if (isValid) {
+ const submitBtn = contactForm.querySelector(".submit-btn");
+ const originalText = submitBtn.textContent;
+ submitBtn.textContent = "Sending...";
+ submitBtn.disabled = true;
- function prevImage() {
- console.log('Previous image clicked');
- const newIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
- updateGallery(newIndex);
- }
-
- // Event listeners for gallery controls
- if (prevBtn) {
- console.log('Adding prev button listener');
- prevBtn.addEventListener('click', prevImage);
- } else {
- console.log('Prev button not found');
- }
-
- if (nextBtn) {
- console.log('Adding next button listener');
- nextBtn.addEventListener('click', nextImage);
- } else {
- console.log('Next button not found');
- }
-
- // Thumbnail click events
- thumbnails.forEach((thumbnail) => {
- thumbnail.addEventListener('click', () => {
- const index = parseInt(thumbnail.getAttribute('data-index'));
- console.log('Thumbnail clicked, index:', index);
- if (!isNaN(index)) {
- updateGallery(index);
- }
- });
+ setTimeout(() => {
+ const formData = new FormData(contactForm);
+ const data = Object.fromEntries(formData);
+ alert(`Thank you, ${data.name}! We'll contact you at ${data.email}.`);
+ contactForm.reset();
+ fields.forEach((f) =>
+ f.closest(".form-group")?.classList.remove("error", "success")
+ );
+ submitBtn.textContent = originalText;
+ submitBtn.disabled = false;
+ }, 2000);
+ }
});
+ }
- // Auto-advance gallery every 5 seconds
- setInterval(nextImage, 5000);
- console.log('Gallery initialized successfully');
-}); // End of DOMContentLoaded for gallery
+ // ===== 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";
-// Enhanced Contact Form Validation
-document.addEventListener('DOMContentLoaded', function() {
- const contactForm = document.querySelector('.contact-form');
-
- if (contactForm) {
- const formGroups = contactForm.querySelectorAll('.form-group');
-
- // Real-time validation function
- function validateField(field) {
- const formGroup = field.closest('.form-group');
- const errorSpan = formGroup.querySelector('.error-message');
- let isValid = true;
- let errorMessage = '';
-
- // Remove previous validation classes
- formGroup.classList.remove('error', 'success');
-
- // Validate required fields
- if (field.hasAttribute('required') && !field.value.trim()) {
- isValid = false;
- errorMessage = 'This field is required.';
- } else if (field.type === 'email' && field.value) {
- // Email validation
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (!emailRegex.test(field.value)) {
- isValid = false;
- errorMessage = 'Please enter a valid email address.';
- }
- } else if (field.type === 'tel' && field.value) {
- // Phone validation (basic)
- const phoneRegex = /^[\d\s\-\+\(\)]+$/;
- if (!phoneRegex.test(field.value)) {
- isValid = false;
- errorMessage = 'Please enter a valid phone number.';
- }
- } else if (field.tagName === 'TEXTAREA' && field.value.length < 10 && field.hasAttribute('required')) {
- // Message length validation
- isValid = false;
- errorMessage = 'Message must be at least 10 characters long.';
- }
-
- // Display validation results
- if (errorSpan) {
- errorSpan.textContent = errorMessage;
- }
-
- if (isValid && field.value.trim()) {
- formGroup.classList.add('success');
- } else if (!isValid) {
- formGroup.classList.add('error');
- }
-
- return isValid;
+ // 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");
}
+ });
- // Add real-time validation to all form fields
- formGroups.forEach(group => {
- const input = group.querySelector('input, textarea');
- if (input) {
- input.addEventListener('blur', () => validateField(input));
- input.addEventListener('input', () => {
- if (group.classList.contains('error')) {
- validateField(input);
- }
- });
- }
- });
+ // Toggle current FAQ
+ this.setAttribute("aria-expanded", !isOpen);
+ answer?.classList.toggle("active");
+ toggle?.classList.toggle("active");
+ });
+ });
- contactForm.addEventListener('submit', function(e) {
- e.preventDefault();
-
- let isFormValid = true;
- const formData = new FormData(contactForm);
- const data = Object.fromEntries(formData);
-
- // Validate all fields
- formGroups.forEach(group => {
- const input = group.querySelector('input, textarea');
- if (input && !validateField(input)) {
- isFormValid = false;
- }
- });
+ // ===== HOVER EFFECTS =====
+ document
+ .querySelectorAll(".services-list li, .value-item, .timeline-item")
+ .forEach((item) => {
+ item.addEventListener("mouseenter", () => {
+ item.style.transform = "translateY(-2px)";
+ item.style.transition = "transform 0.3s ease";
+ });
+ item.addEventListener("mouseleave", () => {
+ item.style.transform = "translateY(0)";
+ });
+ });
- if (!isFormValid) {
- // Focus on first error field
- const firstError = contactForm.querySelector('.form-group.error input, .form-group.error textarea');
- if (firstError) {
- firstError.focus();
- }
- return;
- }
-
- // Simulate form submission with loading state
- const submitBtn = contactForm.querySelector('.submit-btn');
- const originalText = submitBtn.textContent;
- submitBtn.textContent = 'Sending...';
- submitBtn.disabled = true;
-
- setTimeout(() => {
- alert(`Thank you for your message, ${data.name}! We'll get back to you soon at ${data.email}.`);
- contactForm.reset();
- formGroups.forEach(group => group.classList.remove('error', 'success'));
- submitBtn.textContent = originalText;
- submitBtn.disabled = false;
- }, 2000);
- });
+ // ===== ACTIVE NAVIGATION =====
+ const currentPage = location.pathname.split("/").pop();
+ document.querySelectorAll(".main-nav a").forEach((link) => {
+ const linkPage = link.getAttribute("href");
+ if (
+ linkPage === currentPage ||
+ (currentPage === "" && linkPage === "index.html")
+ ) {
+ link.style.backgroundColor = "#daa520";
+ link.style.color = "#5d4037";
}
-});
-
-// FAQ Accordion Functionality
-document.addEventListener('DOMContentLoaded', function() {
- 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();
- }
- });
- });
-});
-
-// Smooth scrolling for navigation links
-document.addEventListener('DOMContentLoaded', function() {
- const navLinks = document.querySelectorAll('.main-nav a');
-
- navLinks.forEach(link => {
- link.addEventListener('click', function(e) {
- // Check if it's an internal link
- if (this.hostname === window.location.hostname) {
- // Add a subtle animation effect
- this.style.transform = 'scale(0.95)';
- setTimeout(() => {
- this.style.transform = 'scale(1)';
- }, 150);
- }
- });
- });
-});
-
-// Add hover effects to service items
-document.addEventListener('DOMContentLoaded', function() {
- const serviceItems = document.querySelectorAll('.services-list li, .value-item, .timeline-item');
-
- serviceItems.forEach(item => {
- item.addEventListener('mouseenter', function() {
- this.style.transform = 'translateY(-2px)';
- this.style.transition = 'transform 0.3s ease';
- });
-
- item.addEventListener('mouseleave', function() {
- this.style.transform = 'translateY(0)';
- });
- });
-});
-
-// Active navigation highlighting
-document.addEventListener('DOMContentLoaded', function() {
- const currentPage = window.location.pathname.split('/').pop();
- const navLinks = document.querySelectorAll('.main-nav a');
-
- navLinks.forEach(link => {
- const linkPage = link.getAttribute('href');
- if (linkPage === currentPage || (currentPage === '' && linkPage === 'index.html')) {
- link.style.backgroundColor = '#daa520';
- link.style.color = '#5d4037';
- }
- });
+ });
});