Nursery Premium Plants Garden Hero Slider
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Green Haven Nursery - Premium Plants & Garden Center</title> </head> <body class="bg-green-900 font-lato overflow-x-hidden"> <!-- Nursery Plant Hero Slider --> <section class="relative h-screen"> <!-- Main Slider Container --> <div class="slider-container h-full"> <!-- Slide 1 - Indoor Plants --> <div class="slide active" id="slide-0"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1463320726281-696a485928c7?w=1920&h=1080&fit=crop&crop=center" alt="Indoor Plants Collection" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Indoor Plants Collection image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float"> <div class="w-3 h-20 natural-accent opacity-70"></div> </div> <div class="collection-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-4 animate-fadeInUp"> Indoor Plants Collection </div> <h1 class="text-5xl md:text-5xl font-merriweather font-bold mb-6 text-shadow-natural animate-fadeInUp" style="animation-delay: 0.2s;"> Air-Purifying Plants </h1> <p class="text-xl mb-8 text-shadow-natural animate-fadeInUp opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Transform your home with our premium collection of air-purifying houseplants. Perfect for beginners and plant enthusiasts alike. </p> <div class="flex flex-wrap gap-4 mb-8 animate-fadeInUp" style="animation-delay: 0.6s;"> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Low Water </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Indirect Light </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> 65-75°F </div> <div class="difficulty-easy px-4 py-2 rounded-full text-sm font-medium text-white"> Easy Care </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-fadeInUp" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Shop Indoor Plants </button> <button class="btn-natural px-8 py-4 rounded-full text-lg font-medium"> Care Guide </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-merriweather font-semibold mb-6 text-white">Popular Indoor Plants</h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Snake Plant</span> <span class="font-semibold text-green-400">$24.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Pothos</span> <span class="font-semibold text-green-400">$18.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Peace Lily</span> <span class="font-semibold text-green-400">$32.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Rubber Plant</span> <span class="font-semibold text-green-400">$45.99</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Available Year-Round</span> <span class="font-semibold text-green-400">✓ In Stock</span> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Slide 2 - Flowering Garden --> <div class="slide" id="slide-1"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1920&h=1080&fit=crop&crop=center" alt="Flowering Garden Plants" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Flowering Garden Plants image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float" style="animation-delay: 1s;"> <div class="w-3 h-20 natural-accent opacity-70"></div> </div> <div class="collection-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-6 animate-slideInLeft"> Flowering Garden Collection </div> <h1 class="text-5xl md:text-7xl font-merriweather font-bold mb-6 text-shadow-natural animate-slideInLeft" style="animation-delay: 0.2s;"> Colorful Blooms </h1> <p class="text-xl mb-8 text-shadow-natural animate-slideInLeft opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Create a vibrant outdoor paradise with our stunning flowering plants. Seasonal varieties for continuous color throughout the year. </p> <div class="flex flex-wrap gap-4 mb-8 animate-slideInLeft" style="animation-delay: 0.6s;"> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Regular Water </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Full Sun </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Spring-Fall Bloom </div> <div class="difficulty-medium px-4 py-2 rounded-full text-sm font-medium text-white"> Moderate Care </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-slideInLeft" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Browse Flowers </button> <button class="btn-natural px-8 py-4 rounded-full text-lg font-medium"> Planting Calendar </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-merriweather font-semibold mb-6 text-white">Seasonal Favorites</h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Petunias</span> <span class="font-semibold text-green-400">$8.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Marigolds</span> <span class="font-semibold text-green-400">$6.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Roses</span> <span class="font-semibold text-green-400">$28.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Sunflowers</span> <span class="font-semibold text-green-400">$12.99</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Best Planting Season</span> <span class="font-semibold text-green-400">Spring</span> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Slide 3 - Herb & Vegetable Garden --> <div class="slide" id="slide-2"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1920&h=1080&fit=crop&crop=center" alt="Herb and Vegetable Garden" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Herb and Vegetable Garden image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float" style="animation-delay: 2s;"> <div class="w-3 h-20 natural-accent opacity-70"></div> </div> <div class="collection-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-6 animate-fadeInUp"> Herb & Vegetable Garden </div> <h1 class="text-5xl md:text-7xl font-merriweather font-bold mb-6 text-shadow-natural animate-fadeInUp" style="animation-delay: 0.2s;"> Fresh Kitchen Garden </h1> <p class="text-xl mb-8 text-shadow-natural animate-fadeInUp opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Grow your own fresh herbs and vegetables with our organic seedlings and mature plants. From basil to tomatoes, start your kitchen garden today. </p> <div class="flex flex-wrap gap-4 mb-8 animate-fadeInUp" style="animation-delay: 0.6s;"> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Daily Water </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> 6+ Hours Sun </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Organic Seeds </div> <div class="difficulty-easy px-4 py-2 rounded-full text-sm font-medium text-white"> Beginner Friendly </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-fadeInUp" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Start Garden </button> <button class="btn-natural px-8 py-4 rounded-full text-lg font-medium"> Growing Tips </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-merriweather font-semibold mb-6 text-white">Kitchen Garden Essentials</h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Basil Plants</span> <span class="font-semibold text-green-400">$4.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Tomato Seedlings</span> <span class="font-semibold text-green-400">$3.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Lettuce Mix</span> <span class="font-semibold text-green-400">$2.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Pepper Plants</span> <span class="font-semibold text-green-400">$5.99</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Harvest Time</span> <span class="font-semibold text-green-400">6-8 Weeks</span> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Slide 4 - Succulent & Cactus --> <div class="slide" id="slide-3"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1459411621453-7b03977f4bfc?w=1920&h=1080&fit=crop&crop=center" alt="Succulent and Cactus Collection" class="w-full h-full object-cover" onerror="this.src=''; this.alt='Succulent and Cactus Collection image failed to load'; this.style.display='none';"> <div class="absolute inset-0 overlay-gradient"></div> </div> <div class="relative z-10 h-full flex items-center"> <div class="container mx-auto px-8 max-w-7xl"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="text-white"> <div class="mb-6 animate-float" style="animation-delay: 3s;"> <div class="w-3 h-20 natural-accent opacity-70"></div> </div> <div class="collection-tag inline-block px-6 py-3 rounded-full text-xl font-bold mb-6 animate-slideInLeft"> Succulent & Cactus Collection </div> <h1 class="text-5xl md:text-7xl font-merriweather font-bold mb-6 text-shadow-natural animate-slideInLeft" style="animation-delay: 0.2s;"> Desert Beauty </h1> <p class="text-xl mb-8 text-shadow-natural animate-slideInLeft opacity-90 leading-relaxed" style="animation-delay: 0.4s;"> Discover our stunning collection of low-maintenance succulents and cacti. Perfect for modern spaces and busy lifestyles. </p> <div class="flex flex-wrap gap-4 mb-8 animate-slideInLeft" style="animation-delay: 0.6s;"> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Minimal Water </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Bright Light </div> <div class="care-badge px-4 py-2 rounded-full text-sm font-medium"> Drought Tolerant </div> <div class="difficulty-easy px-4 py-2 rounded-full text-sm font-medium text-white"> Very Easy </div> </div> <div class="flex flex-col sm:flex-row gap-4 animate-slideInLeft" style="animation-delay: 0.8s;"> <button class="btn-primary px-8 py-4 rounded-full text-lg font-semibold text-white"> Shop Succulents </button> <button class="btn-natural px-8 py-4 rounded-full text-lg font-medium"> Desert Care Guide </button> </div> </div> <div class="hidden lg:block animate-slideInRight"> <div class="glass-effect-dark p-8 rounded-3xl"> <h3 class="text-2xl font-merriweather font-semibold mb-6 text-white">Desert Collection</h3> <div class="space-y-4 text-white"> <div class="flex justify-between items-center"> <span class="opacity-80">Echeveria</span> <span class="font-semibold text-green-400">$12.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Barrel Cactus</span> <span class="font-semibold text-green-400">$22.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Jade Plant</span> <span class="font-semibold text-green-400">$16.99</span> </div> <div class="flex justify-between items-center"> <span class="opacity-80">Aloe Vera</span> <span class="font-semibold text-green-400">$14.99</span> </div> <div class="flex justify-between border-t border-white/20 pt-4"> <span class="opacity-80">Watering Frequency</span> <span class="font-semibold text-green-400">Every 2-3 Weeks</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Navigation Arrows --> <button class="absolute left-8 top-2/3 transform -translate-y-1/2 z-20 glass-effect w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl hover:bg-white/20 transition-all duration-500 font-bold" id="prevBtn"> ‹ </button> <button class="absolute right-8 top-2/3 transform -translate-y-1/2 z-20 glass-effect w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl hover:bg-white/20 transition-all duration-500 font-bold" id="nextBtn"> › </button> <!-- Slide Indicators --> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 flex space-x-4"> <button class="indicator w-3 h-3 rounded-full bg-green-500 transition-all duration-500 active shadow-lg" data-slide="0"></button> <button class="indicator w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-500 shadow-lg" data-slide="1"></button> <button class="indicator w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-500 shadow-lg" data-slide="2"></button> <button class="indicator w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-500 shadow-lg" data-slide="3"></button> </div> <!-- Nursery Branding --> <div class="absolute top-8 left-8 z-20 glass-effect-dark p-6 rounded-2xl text-white animate-fadeInUp"> <h2 class="text-2xl font-merriweather font-bold mb-2"> Green Haven Nursery</h2> <p class="text-sm opacity-80 mb-1">Premium Plants & Garden Center</p> <p class="text-sm opacity-60">Growing Dreams Since 1993</p> <p class="text-sm opacity-60 mt-1">Call: (555) PLANTS-1</p> </div> <!-- Garden Stats --> <div class="absolute top-8 right-8 z-20 space-y-4 hidden lg:block"> <div class="glass-effect-dark p-4 rounded-2xl text-white text-center animate-fadeInUp" style="animation-delay: 1.2s;"> <div class="text-2xl font-bold mb-1">30+</div> <div class="text-xs opacity-80 uppercase tracking-wider">Years Growing</div> </div> <div class="glass-effect-dark p-4 rounded-2xl text-white text-center animate-fadeInUp" style="animation-delay: 1.4s;"> <div class="text-2xl font-bold mb-1">5000+</div> <div class="text-xs opacity-80 uppercase tracking-wider">Plant Varieties</div> </div> <div class="glass-effect-dark p-4 rounded-2xl text-white text-center animate-fadeInUp" style="animation-delay: 1.6s;"> <div class="text-2xl font-bold mb-1">100%</div> <div class="text-xs opacity-80 uppercase tracking-wider">Organic Options</div> </div> </div> <!-- Progress Bar --> <div class="absolute bottom-0 left-0 w-full h-1 bg-white/10 z-20"> <div class="h-full natural-accent transition-all duration-1000 ease-out" id="progressBar" style="width: 25%;"></div> </div> </section> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Lato:wght@300;400;500;700;900&display=swap'); .font-merriweather { font-family: 'Merriweather', serif; } .font-lato { font-family: 'Lato', sans-serif; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: translateX(0); } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-30px) rotate(5deg); } } @keyframes leafFloat { 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } 25% { transform: translateY(-25px) translateX(15px) rotate(10deg); } 50% { transform: translateY(-50px) translateX(0px) rotate(-5deg); } 75% { transform: translateY(-25px) translateX(-15px) rotate(15deg); } } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } .animate-fadeInUp { animation: fadeInUp 1.2s ease-out forwards; } .animate-slideInLeft { animation: slideInLeft 1.2s ease-out forwards; } .animate-slideInRight { animation: slideInRight 1.2s ease-out forwards; } .animate-float { animation: float 8s ease-in-out infinite; } .animate-leafFloat { animation: leafFloat 18s ease-in-out infinite; } .animate-pulse-slow { animation: pulse 4s ease-in-out infinite; } .slider-container { position: relative; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale(1.05); } .slide.active { opacity: 1; transform: scale(1); } .slide.next { transform: translateX(100%) scale(1.05); } .slide.prev { transform: translateX(-100%) scale(1.05); } .overlay-gradient { background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.8) 100%); } .text-shadow-natural { text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 8px 40px rgba(0, 0, 0, 0.4); } .glass-effect { backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .glass-effect-dark { backdrop-filter: blur(25px); background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .btn-natural { background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .btn-natural:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } .btn-primary { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); box-shadow: 0 8px 32px rgba(34, 197, 94, 0.4); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .btn-primary:hover { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(34, 197, 94, 0.6); } .collection-tag { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; font-weight: 600; } .care-badge { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); } .natural-accent { background: linear-gradient(90deg, #22c55e 0%, #16a34a 50%, #22c55e 100%); } .difficulty-easy { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } .difficulty-medium { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); } .difficulty-hard { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
JavaScript
// Slider functionality let currentSlide = 0; const totalSlides = 4; const slides = document.querySelectorAll('.slide'); const indicators = document.querySelectorAll('.indicator'); const progressBar = document.getElementById('progressBar'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); function updateSlider() { // Update slides slides.forEach((slide, index) => { slide.classList.remove('active', 'next', 'prev'); if (index === currentSlide) { slide.classList.add('active'); } else if (index === (currentSlide + 1) % totalSlides) { slide.classList.add('next'); } else if (index === (currentSlide - 1 + totalSlides) % totalSlides) { slide.classList.add('prev'); } }); // Update indicators indicators.forEach((indicator, index) => { indicator.classList.toggle('active', index === currentSlide); if (index === currentSlide) { indicator.classList.remove('bg-white/40'); indicator.classList.add('bg-green-500'); } else { indicator.classList.remove('bg-green-500'); indicator.classList.add('bg-white/40'); } }); // Update progress bar const progress = ((currentSlide + 1) / totalSlides) * 100; progressBar.style.width = `${progress}%`; } function nextSlide() { currentSlide = (currentSlide + 1) % totalSlides; updateSlider(); } function prevSlide() { currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; updateSlider(); } // Auto-advance slides every 8 seconds let autoSlideInterval = setInterval(nextSlide, 8000); // Navigation event listeners nextBtn.addEventListener('click', () => { clearInterval(autoSlideInterval); nextSlide(); autoSlideInterval = setInterval(nextSlide, 8000); }); prevBtn.addEventListener('click', () => { clearInterval(autoSlideInterval); prevSlide(); autoSlideInterval = setInterval(nextSlide, 8000); }); // Indicator event listeners indicators.forEach((indicator, index) => { indicator.addEventListener('click', () => { clearInterval(autoSlideInterval); currentSlide = index; updateSlider(); autoSlideInterval = setInterval(nextSlide, 8000); }); }); // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { clearInterval(autoSlideInterval); prevSlide(); autoSlideInterval = setInterval(nextSlide, 8000); } else if (e.key === 'ArrowRight') { clearInterval(autoSlideInterval); nextSlide(); autoSlideInterval = setInterval(nextSlide, 8000); } }); // Touch/swipe support for mobile let touchStartX = 0; let touchEndX = 0; document.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }); document.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { const swipeThreshold = 50; const diff = touchStartX - touchEndX; if (Math.abs(diff) > swipeThreshold) { clearInterval(autoSlideInterval); if (diff > 0) { nextSlide(); } else { prevSlide(); } autoSlideInterval = setInterval(nextSlide, 8000); } } // Button click handlers document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Shop') || button.textContent.includes('Browse') || button.textContent.includes('Start')) { button.addEventListener('click', () => { showNotification('Opening plant catalog...'); }); } if (button.textContent.includes('Guide') || button.textContent.includes('Tips') || button.textContent.includes('Calendar')) { button.addEventListener('click', () => { showNotification('Loading plant care information...'); }); } }); // Natural notification system function showNotification(message) { const notification = document.createElement('div'); notification.className = 'fixed top-8 left-1/2 transform -translate-x-1/2 glass-effect-dark text-white px-8 py-4 rounded-full shadow-2xl z-50 transition-all duration-700 translate-y-[-100px] opacity-0 font-medium'; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.classList.remove('translate-y-[-100px]', 'opacity-0'); notification.classList.add('translate-y-0', 'opacity-100'); }, 100); setTimeout(() => { notification.classList.add('translate-y-[-100px]', 'opacity-0'); setTimeout(() => { document.body.removeChild(notification); }, 700); }, 3500); } // Pause auto-slide on hover const sliderContainer = document.querySelector('.slider-container'); sliderContainer.addEventListener('mouseenter', () => { clearInterval(autoSlideInterval); }); sliderContainer.addEventListener('mouseleave', () => { autoSlideInterval = setInterval(nextSlide, 8000); }); // Initialize slider updateSlider();
Output Preview
Desktop
Mobile
Fullscreen