Spaces:
Running
Running
File size: 9,465 Bytes
dfed854 67587c9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | <!DOCTYPE html>
<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>
|