Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SlideWizard Pro | Modern Presentations</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| .slide { | |
| height: 100vh; | |
| scroll-snap-align: start; | |
| } | |
| .presentation-container { | |
| scroll-snap-type: y mandatory; | |
| overflow-y: scroll; | |
| height: 100vh; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white overflow-hidden"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <div class="presentation-container relative z-10"> | |
| <!-- Cover Slide --> | |
| <div class="slide flex flex-col items-center justify-center p-8"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6 fade-in" style="animation-delay: 0.2s;">SlideWizard Pro</h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 fade-in" style="animation-delay: 0.4s;">Magical presentations that wow your audience</p> | |
| <div class="flex gap-4 fade-in" style="animation-delay: 0.6s;"> | |
| <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg transition-all">Start Presentation</button> | |
| <button class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all">Learn More</button> | |
| </div> | |
| </div> | |
| <!-- Agenda Slide --> | |
| <div class="slide bg-gray-800 bg-opacity-50 backdrop-blur-md flex flex-col items-center justify-center p-8"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-12 text-center">Today's Agenda</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl"> | |
| <div class="bg-gray-700 bg-opacity-50 p-6 rounded-xl transform hover:scale-105 transition-all"> | |
| <div class="text-blue-400 mb-4"> | |
| <i data-feather="compass" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Introduction</h3> | |
| <p class="text-gray-300">Discover our magical presentation platform</p> | |
| </div> | |
| <div class="bg-gray-700 bg-opacity-50 p-6 rounded-xl transform hover:scale-105 transition-all"> | |
| <div class="text-purple-400 mb-4"> | |
| <i data-feather="star" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Features</h3> | |
| <p class="text-gray-300">Powerful tools to impress your audience</p> | |
| </div> | |
| <div class="bg-gray-700 bg-opacity-50 p-6 rounded-xl transform hover:scale-105 transition-all"> | |
| <div class="text-green-400 mb-4"> | |
| <i data-feather="zap" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Get Started</h3> | |
| <p class="text-gray-300">Create your first presentation in minutes</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Slide --> | |
| <div class="slide bg-gray-900 bg-opacity-70 flex items-center justify-center p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center">Stunning Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 p-3 rounded-full mr-4"> | |
| <i data-feather="eye" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Visual Magic</h3> | |
| <p class="text-gray-300">3D effects, animations and transitions that captivate your audience.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-600 p-3 rounded-full mr-4"> | |
| <i data-feather="code" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Code Friendly</h3> | |
| <p class="text-gray-300">Embed live code snippets and interactive elements effortlessly.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-600 p-3 rounded-full mr-4"> | |
| <i data-feather="smartphone" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Mobile Ready</h3> | |
| <p class="text-gray-300">Perfectly responsive on all devices from phones to projectors.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-600 p-3 rounded-full mr-4"> | |
| <i data-feather="cloud" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">Cloud Powered</h3> | |
| <p class="text-gray-300">Access and edit your presentations from anywhere, anytime.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Closing Slide --> | |
| <div class="slide flex flex-col items-center justify-center p-8 bg-gradient-to-br from-blue-900 to-purple-900"> | |
| <h2 class="text-5xl md:text-7xl font-bold mb-8 text-center">Ready to WOW?</h2> | |
| <p class="text-xl md:text-2xl text-gray-200 mb-12 max-w-2xl text-center">Transform your presentations into unforgettable experiences that leave your audience speechless.</p> | |
| <button class="px-8 py-4 bg-white text-gray-900 font-bold rounded-full text-lg hover:bg-gray-200 transition-all transform hover:scale-105"> | |
| Start Your Magic Now <i data-feather="arrow-right" class="inline ml-2"></i> | |
| </button> | |
| <div class="mt-16 text-gray-300"> | |
| <i data-feather="heart" class="inline text-red-400"></i> Crafted with magic by SlideWizard Team | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-20 flex gap-2"> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-30 hover:bg-opacity-100 transition-all slide-indicator" data-slide="0"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-30 hover:bg-opacity-100 transition-all slide-indicator" data-slide="1"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-30 hover:bg-opacity-100 transition-all slide-indicator" data-slide="2"></button> | |
| <button class="w-3 h-3 rounded-full bg-white bg-opacity-30 hover:bg-opacity-100 transition-all slide-indicator" data-slide="3"></button> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1e293b, | |
| shininess: 50.00, | |
| waveHeight: 20.00, | |
| waveSpeed: 0.25, | |
| zoom: 0.8 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Slide navigation | |
| document.querySelectorAll('.slide-indicator').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const slideIndex = parseInt(this.getAttribute('data-slide')); | |
| const slides = document.querySelectorAll('.slide'); | |
| slides[slideIndex].scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| }); | |
| // Update active slide indicator | |
| const presentationContainer = document.querySelector('.presentation-container'); | |
| const indicators = document.querySelectorAll('.slide-indicator'); | |
| presentationContainer.addEventListener('scroll', function() { | |
| const scrollPosition = this.scrollTop; | |
| const windowHeight = window.innerHeight; | |
| const currentSlide = Math.round(scrollPosition / windowHeight); | |
| indicators.forEach((indicator, index) => { | |
| if (index === currentSlide) { | |
| indicator.classList.add('bg-opacity-100'); | |
| indicator.classList.remove('bg-opacity-30'); | |
| } else { | |
| indicator.classList.add('bg-opacity-30'); | |
| indicator.classList.remove('bg-opacity-100'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |