Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NatureVerse Explorer - Discover Earth's Wonders</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/hero.js"></script> | |
| <script src="components/featured-section.js"></script> | |
| <script src="components/interactive-map.js"></script> | |
| <script src="components/weather-widget.js"></script> | |
| <script src="components/species-gallery.js"></script> | |
| <script src="components/virtual-tour.js"></script> | |
| <script src="components/eco-tips.js"></script> | |
| <script src="components/news-feed.js"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-emerald-50 to-teal-100"> | |
| <custom-navbar></custom-navbar> | |
| <custom-hero></custom-hero> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Interactive Tabs Section --> | |
| <div class="bg-white rounded-3xl shadow-2xl mb-12 overflow-hidden"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex flex-wrap justify-center -mb-px"> | |
| <button class="tab-button active py-4 px-6 text-lg font-semibold text-emerald-800 border-b-2 border-emerald-500 transition-all duration-300 hover:bg-emerald-50" data-tab="explore"> | |
| <i data-feather="compass" class="inline mr-2"></i>Explore | |
| </button> | |
| <button class="tab-button py-4 px-6 text-lg font-semibold text-emerald-800 transition-all duration-300 hover:bg-emerald-50" data-tab="species"> | |
| <i data-feather="layers" class="inline mr-2"></i>Species | |
| </button> | |
| <button class="tab-button py-4 px-6 text-lg font-semibold text-emerald-800 transition-all duration-300 hover:bg-emerald-50" data-tab="maps"> | |
| <i data-feather="map" class="inline mr-2"></i>Interactive Maps | |
| </button> | |
| <button class="tab-button py-4 px-6 text-lg font-semibold text-emerald-800 transition-all duration-300 hover:bg-emerald-50" data-tab="tours"> | |
| <i data-feather="video" class="inline mr-2"></i>Virtual Tours | |
| </button> | |
| <button class="tab-button py-4 px-6 text-lg font-semibold text-emerald-800 transition-all duration-300 hover:bg-emerald-50" data-tab="weather"> | |
| <i data-feather="cloud" class="inline mr-2"></i>Weather | |
| </button> | |
| <button class="tab-button py-4 px-6 text-lg font-semibold text-emerald-800 transition-all duration-300 hover:bg-emerald-50" data-tab="eco-tips"> | |
| <i data-feather="heart" class="inline mr-2"></i>Eco Tips | |
| </button> | |
| <button class="tab-button py-4 px-6 text-lg font-semibold text-emerald-800 transition-all duration-300 hover:bg-emerald-50" data-tab="news"> | |
| <i data-feather="rss" class="inline mr-2"></i>Nature News | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="p-8"> | |
| <div class="tab-content active" id="explore-tab"> | |
| <custom-featured-section></custom-featured-section> | |
| </div> | |
| <div class="tab-content hidden" id="species-tab"> | |
| <custom-species-gallery></custom-species-gallery> | |
| </div> | |
| <div class="tab-content hidden" id="maps-tab"> | |
| <custom-interactive-map></custom-interactive-map> | |
| </div> | |
| <div class="tab-content hidden" id="tours-tab"> | |
| <custom-virtual-tour></custom-virtual-tour> | |
| </div> | |
| <div class="tab-content hidden" id="weather-tab"> | |
| <custom-weather-widget></custom-weather-widget> | |
| </div> | |
| <div class="tab-content hidden" id="eco-tips-tab"> | |
| <custom-eco-tips></custom-eco-tips> | |
| </div> | |
| <div class="tab-content hidden" id="news-tab"> | |
| <custom-news-feed></custom-news-feed> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions Panel --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center"> | |
| <i data-feather="camera" class="w-12 h-12 text-emerald-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold text-emerald-800 mb-2">Nature Photography</h3> | |
| <p class="text-gray-600 mb-4">Explore stunning nature photography from around the world</p> | |
| <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-2 rounded-full transition-colors duration-300">View Gallery</button> | |
| </div> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center"> | |
| <i data-feather="book" class="w-12 h-12 text-emerald-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold text-emerald-800 mb-2">Species Database</h3> | |
| <p class="text-gray-600 mb-4">Discover millions of plant and animal species</p> | |
| <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-2 rounded-full transition-colors duration-300">Search Species</button> | |
| </div> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center"> | |
| <i data-feather="trending-up" class="w-12 h-12 text-emerald-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold text-emerald-800 mb-2">Climate Data</h3> | |
| <p class="text-gray-600 mb-4">Real-time climate and environmental data</p> | |
| <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-2 rounded-full transition-colors duration-300">View Data</button> | |
| </div> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center"> | |
| <i data-feather="users" class="w-12 h-12 text-emerald-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold text-emerald-800 mb-2">Community</h3> | |
| <p class="text-gray-600 mb-4">Join our nature conservation community</p> | |
| <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-2 rounded-full transition-colors duration-300">Join Now</button> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize all interactive components | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initializeTabs(); | |
| initializeInteractiveFeatures(); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |