Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Slide Deck Viewer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .slide { | |
| opacity: 0; | |
| transform: translateX(100px); | |
| transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| pointer-events: none; | |
| position: absolute; | |
| inset: 0; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| transform: translateX(0); | |
| pointer-events: all; | |
| z-index: 10; | |
| } | |
| .slide.prev { | |
| transform: translateX(-100px); | |
| opacity: 0; | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform-origin: 50% 50%; | |
| } | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .dark .glass-panel { | |
| background: rgba(17, 24, 39, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .slide-content { | |
| transform: scale(0.95); | |
| opacity: 0; | |
| transition: all 0.5s ease 0.2s; | |
| } | |
| .active .slide-content { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| .thumbnail.active { | |
| ring-width: 2px; | |
| ring-color: #6366f1; | |
| transform: scale(1.05); | |
| } | |
| .hide-ui { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .controls-container { | |
| transition: opacity 0.3s ease; | |
| } | |
| .slide-number { | |
| font-variant-numeric: tabular-nums; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-900 overflow-hidden h-screen w-screen relative selection:bg-indigo-500 selection:text-white"> | |
| <!-- Background Effects --> | |
| <div class="fixed inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute -top-40 -right-40 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float"></div> | |
| <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float" style="animation-delay: 1s;"></div> | |
| <div class="absolute top-40 left-40 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float" style="animation-delay: 2s;"></div> | |
| </div> | |
| <!-- Main Slide Container --> | |
| <div class="relative w-full h-full flex items-center justify-center p-4 md:p-8 lg:p-12"> | |
| <div id="slide-container" class="relative w-full max-w-6xl aspect-video bg-white rounded-2xl shadow-2xl overflow-hidden ring-1 ring-gray-200"> | |
| <!-- Slide 1: Title --> | |
| <div class="slide active" data-slide="1"> | |
| <div class="w-full h-full flex flex-col items-center justify-center p-12 bg-gradient-to-br from-white to-gray-50"> | |
| <div class="slide-content text-center space-y-6"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 text-indigo-600 text-sm font-medium mb-4"> | |
| <i data-lucide="sparkles" class="w-4 h-4"></i> | |
| <span>Presentation Deck</span> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold gradient-text leading-tight"> | |
| Digital Innovation | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-600 max-w-2xl mx-auto leading-relaxed"> | |
| Transforming ideas into reality through modern design and cutting-edge technology | |
| </p> | |
| <div class="flex items-center gap-4 justify-center mt-8 text-gray-400 text-sm"> | |
| <span class="flex items-center gap-2"> | |
| <i data-lucide="calendar" class="w-4 h-4"></i> | |
| 2024 | |
| </span> | |
| <span class="w-1 h-1 rounded-full bg-gray-300"></span> | |
| <span class="flex items-center gap-2"> | |
| <i data-lucide="clock" class="w-4 h-4"></i> | |
| 5 min read | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 2: Content Split --> | |
| <div class="slide" data-slide="2"> | |
| <div class="w-full h-full flex flex-col md:flex-row"> | |
| <div class="w-full md:w-1/2 p-12 flex flex-col justify-center bg-white"> | |
| <div class="slide-content space-y-6"> | |
| <div class="w-12 h-12 rounded-xl bg-indigo-100 flex items-center justify-center text-indigo-600"> | |
| <i data-lucide="target" class="w-6 h-6"></i> | |
| </div> | |
| <h2 class="text-4xl font-bold text-gray-900">Strategic Vision</h2> | |
| <p class="text-lg text-gray-600 leading-relaxed"> | |
| Our approach combines data-driven insights with creative excellence. We believe in building sustainable solutions that stand the test of time. | |
| </p> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-indigo-600 mt-0.5 shrink-0"></i> | |
| <span>User-centered design methodology</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-indigo-600 mt-0.5 shrink-0"></i> | |
| <span>Agile development processes</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-indigo-600 mt-0.5 shrink-0"></i> | |
| <span>Continuous integration & delivery</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 relative overflow-hidden"> | |
| <img src="http://static.photos/office/1200x630/42" alt="Office" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-white via-transparent to-transparent md:bg-gradient-to-l"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 3: Grid Layout --> | |
| <div class="slide" data-slide="3"> | |
| <div class="w-full h-full p-12 bg-gray-50 flex flex-col justify-center"> | |
| <div class="slide-content max-w-4xl mx-auto w-full space-y-8"> | |
| <div class="text-center space-y-2"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Core Features</h2> | |
| <p class="text-gray-600">Everything you need to succeed</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group"> | |
| <div class="w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="zap" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-900 mb-2">Lightning Fast</h3> | |
| <p class="text-sm text-gray-600">Optimized performance for the best user experience</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group"> | |
| <div class="w-12 h-12 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="shield" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-900 mb-2">Secure by Design</h3> | |
| <p class="text-sm text-gray-600">Enterprise-grade security built into every layer</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group"> | |
| <div class="w-12 h-12 rounded-xl bg-pink-100 text-pink-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="heart" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-900 mb-2">User Friendly</h3> | |
| <p class="text-sm text-gray-600">Intuitive interfaces that require no training</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group"> | |
| <div class="w-12 h-12 rounded-xl bg-green-100 text-green-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="bar-chart-3" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-900 mb-2">Analytics</h3> | |
| <p class="text-sm text-gray-600">Real-time insights and comprehensive reporting</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group"> | |
| <div class="w-12 h-12 rounded-xl bg-orange-100 text-orange-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="puzzle" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-900 mb-2">Integrations</h3> | |
| <p class="text-sm text-gray-600">Connect with your favorite tools seamlessly</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group"> | |
| <div class="w-12 h-12 rounded-xl bg-cyan-100 text-cyan-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="headphones" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-semibold text-gray-900 mb-2">24/7 Support</h3> | |
| <p class="text-sm text-gray-600">Round-the-clock assistance from our expert team</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 4: Image Focus --> | |
| <div class="slide" data-slide="4"> | |
| <div class="w-full h-full relative"> | |
| <img src="http://static.photos/technology/1200x630/88" alt="Technology" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-12 text-white"> | |
| <div class="slide-content max-w-3xl"> | |
| <div class="flex items-center gap-2 mb-4 text-indigo-300"> | |
| <i data-lucide="trending-up" class="w-5 h-5"></i> | |
| <span class="font-medium">Growth Metrics</span> | |
| </div> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Scaling for the Future</h2> | |
| <p class="text-xl text-gray-200 leading-relaxed"> | |
| Our infrastructure grows with your business. From startup to enterprise, we've got you covered with 99.9% uptime guarantee. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 5: Data/Stats --> | |
| <div class="slide" data-slide="5"> | |
| <div class="w-full h-full bg-white p-12 flex flex-col justify-center"> | |
| <div class="slide-content max-w-5xl mx-auto w-full space-y-12"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Impact by Numbers</h2> | |
| <p class="text-gray-600">Real results from real clients</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="text-center space-y-2"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text">500+</div> | |
| <div class="text-sm text-gray-600 uppercase tracking-wide font-medium">Projects</div> | |
| </div> | |
| <div class="text-center space-y-2"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text">98%</div> | |
| <div class="text-sm text-gray-600 uppercase tracking-wide font-medium">Satisfaction</div> | |
| </div> | |
| <div class="text-center space-y-2"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text">50M+</div> | |
| <div class="text-sm text-gray-600 uppercase tracking-wide font-medium">Users</div> | |
| </div> | |
| <div class="text-center space-y-2"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text">24/7</div> | |
| <div class="text-sm text-gray-600 uppercase tracking-wide font-medium">Support</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-2xl p-8 text-center"> | |
| <p class="text-lg text-gray-700 italic">"The best solution we've ever implemented. Game-changing results from day one."</p> | |
| <div class="mt-4 flex items-center justify-center gap-3"> | |
| <img src="http://static.photos/people/100x100/12" alt="User" class="w-10 h-10 rounded-full object-cover"> | |
| <div class="text-left"> | |
| <div class="font-semibold text-gray-900">Sarah Chen</div> | |
| <div class="text-sm text-gray-500">CTO, TechCorp</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 6: Thank You --> | |
| <div class="slide" data-slide="6"> | |
| <div class="w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-indigo-600 to-purple-700 text-white p-12 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div> | |
| </div> | |
| <div class="slide-content text-center relative z-10 space-y-6"> | |
| <div class="w-20 h-20 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-6 backdrop-blur-sm"> | |
| <i data-lucide="check" class="w-10 h-10 text-white"></i> | |
| </div> | |
| <h2 class="text-5xl md:text-6xl font-bold">Thank You</h2> | |
| <p class="text-xl text-indigo-100 max-w-lg mx-auto"> | |
| Ready to start your journey? Let's build something amazing together. | |
| </p> | |
| <div class="flex items-center gap-4 justify-center mt-8"> | |
| <button class="px-6 py-3 bg-white text-indigo-600 rounded-full font-medium hover:bg-indigo-50 transition-colors flex items-center gap-2"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> | |
| Get in Touch | |
| </button> | |
| <button class="px-6 py-3 bg-white/10 text-white rounded-full font-medium hover:bg-white/20 transition-colors backdrop-blur-sm border border-white/20"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls Overlay --> | |
| <div id="controls" class="controls-container fixed bottom-0 left-0 right-0 p-6 flex items-center justify-between z-50"> | |
| <!-- Left: Thumbnails --> | |
| <div class="hidden md:flex items-center gap-2 glass-panel rounded-2xl p-2"> | |
| <div id="thumbnails" class="flex items-center gap-2"> | |
| <!-- Thumbnails generated by JS --> | |
| </div> | |
| </div> | |
| <!-- Center: Navigation --> | |
| <div class="absolute left-1/2 -translate-x-1/2 bottom-6 glass-panel rounded-2xl p-2 flex items-center gap-2"> | |
| <button id="prev-btn" class="w-10 h-10 rounded-xl flex items-center justify-center text-gray-700 hover:bg-white/50 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"> | |
| <i data-lucide="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| <div class="w-12 h-12 relative flex items-center justify-center"> | |
| <svg class="w-full h-full progress-ring" viewBox="0 0 48 48"> | |
| <circle class="text-gray-300" stroke-width="3" stroke="currentColor" fill="transparent" r="20" cx="24" cy="24"/> | |
| <circle id="progress-circle" class="text-indigo-600 progress-ring-circle" stroke-width="3" stroke-linecap="round" stroke="currentColor" fill="transparent" r="20" cx="24" cy="24" stroke-dasharray="125.6" stroke-dashoffset="125.6"/> | |
| </svg> | |
| <span id="slide-counter" class="absolute text-xs font-semibold text-gray-700 slide-number">1/6</span> | |
| </div> | |
| <button id="next-btn" class="w-10 h-10 rounded-xl flex items-center justify-center text-gray-700 hover:bg-white/50 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"> | |
| <i data-lucide="chevron-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Right: Actions --> | |
| <div class="flex items-center gap-2 glass-panel rounded-2xl p-2"> | |
| <button id="fullscreen-btn" class="w-10 h-10 rounded-xl flex items-center justify-center text-gray-700 hover:bg-white/50 transition-colors"> | |
| <i data-lucide="maximize" class="w-5 h-5"></i> | |
| </button> | |
| <button id="autoplay-btn" class="w-10 h-10 rounded-xl flex items-center justify-center text-gray-700 hover:bg-white/50 transition-colors"> | |
| <i data-lucide="play" class="w-5 h-5"></i> | |
| </button> | |
| <button id="theme-btn" class="w-10 h-10 rounded-xl flex items-center justify-center text-gray-700 hover:bg-white/50 transition-colors"> | |
| <i data-lucide="sun" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Editor Link --> | |
| <a href="editor.html" class="fixed top-6 left-6 glass-panel rounded-xl p-3 text-sm font-medium text-gray-700 hover:text-indigo-600 transition-colors z-40 flex items-center gap-2"> | |
| <i data-lucide="edit" class="w-4 h-4"></i> | |
| Open Editor | |
| </a> | |
| <!-- Keyboard Shortcuts Hint --> | |
| <div id="shortcuts-hint" class="fixed top-6 right-6 glass-panel rounded-xl p-4 text-sm text-gray-600 opacity-0 hover:opacity-100 transition-opacity z-40"> | |
| <div class="font-semibold mb-2 text-gray-900">Keyboard Shortcuts</div> | |
| <div class="space-y-1 text-xs"> | |
| <div class="flex justify-between gap-4"> | |
| <span>Next Slide</span> | |
| <span class="font-mono bg-gray-200 px-1 rounded">→</span> | |
| </div> | |
| <div class="flex justify-between gap-4"> | |
| <span>Previous</span> | |
| <span class="font-mono bg-gray-200 px-1 rounded">←</span> | |
| </div> | |
| <div class="flex justify-between gap-4"> | |
| <span>Fullscreen</span> | |
| <span class="font-mono bg-gray-200 px-1 rounded">F</span> | |
| </div> | |
| <div class="flex justify-between gap-4"> | |
| <span>Autoplay</span> | |
| <span class="font-mono bg-gray-200 px-1 rounded">Space</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| class SlideDeck { | |
| constructor() { | |
| this.slides = document.querySelectorAll('.slide'); | |
| this.currentSlide = 0; | |
| this.totalSlides = this.slides.length; | |
| this.autoplayInterval = null; | |
| this.isAutoplay = false; | |
| this.touchStartX = 0; | |
| this.touchEndX = 0; | |
| this.init(); | |
| } | |
| init() { | |
| this.cacheElements(); | |
| this.bindEvents(); | |
| this.generateThumbnails(); | |
| this.updateProgress(); | |
| this.updateSlideStates(); | |
| } | |
| cacheElements() { | |
| this.prevBtn = document.getElementById('prev-btn'); | |
| this.nextBtn = document.getElementById('next-btn'); | |
| this.fullscreenBtn = document.getElementById('fullscreen-btn'); | |
| this.autoplayBtn = document.getElementById('autoplay-btn'); | |
| this.themeBtn = document.getElementById('theme-btn'); | |
| this.progressCircle = document.getElementById('progress-circle'); | |
| this.slideCounter = document.getElementById('slide-counter'); | |
| this.thumbnailsContainer = document.getElementById('thumbnails'); | |
| this.controls = document.getElementById('controls'); | |
| } | |
| bindEvents() { | |
| // Navigation buttons | |
| this.prevBtn.addEventListener('click', () => this.prev()); | |
| this.nextBtn.addEventListener('click', () => this.next()); | |
| // Keyboard navigation | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowRight' || e.key === 'ArrowDown') this.next(); | |
| if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') this.prev(); | |
| if (e.key === ' ') { | |
| e.preventDefault(); | |
| this.toggleAutoplay(); | |
| } | |
| if (e.key === 'f' || e.key === 'F') this.toggleFullscreen(); | |
| }); | |
| // Touch/swipe support | |
| document.addEventListener('touchstart', (e) => { | |
| this.touchStartX = e.changedTouches[0].screenX; | |
| }); | |
| document.addEventListener('touchend', (e) => { | |
| this.touchEndX = e.changedTouches[0].screenX; | |
| this.handleSwipe(); | |
| }); | |
| // Fullscreen | |
| this.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen()); | |
| // Autoplay | |
| this.autoplayBtn.addEventListener('click', () => this.toggleAutoplay()); | |
| // Theme toggle (demo) | |
| this.themeBtn.addEventListener('click', () => { | |
| document.body.classList.toggle('dark'); | |
| const icon = this.themeBtn.querySelector('i'); | |
| if (document.body.classList.contains('dark')) { | |
| icon.setAttribute('data-lucide', 'moon'); | |
| } else { | |
| icon.setAttribute('data-lucide', 'sun'); | |
| } | |
| lucide.createIcons(); | |
| }); | |
| // Click on slide to advance (optional) | |
| document.getElementById('slide-container').addEventListener('click', (e) => { | |
| if (e.target === e.currentTarget) this.next(); | |
| }); | |
| // Hide UI on inactivity | |
| let timeout; | |
| const resetTimer = () => { | |
| this.controls.classList.remove('hide-ui'); | |
| clearTimeout(timeout); | |
| timeout = setTimeout(() => { | |
| if (!this.isAutoplay) this.controls.classList.add('hide-ui'); | |
| }, 3000); | |
| }; | |
| document.addEventListener('mousemove', resetTimer); | |
| document.addEventListener('click', resetTimer); | |
| resetTimer(); | |
| } | |
| handleSwipe() { | |
| const threshold = 50; | |
| const diff = this.touchStartX - this.touchEndX; | |
| if (Math.abs(diff) > threshold) { | |
| if (diff > 0) this.next(); | |
| else this.prev(); | |
| } | |
| } | |
| generateThumbnails() { | |
| this.slides.forEach((slide, index) => { | |
| const thumb = document.createElement('button'); | |
| thumb.className = `thumbnail w-12 h-8 rounded-lg overflow-hidden border-2 border-transparent transition-all ${index === 0 ? 'active ring-2 ring-indigo-600' : 'opacity-50 hover:opacity-100'}`; | |
| thumb.innerHTML = `<div class="w-full h-full bg-gray-200 flex items-center justify-center text-xs font-bold text-gray-600">${index + 1}</div>`; | |
| thumb.addEventListener('click', () => this.goTo(index)); | |
| this.thumbnailsContainer.appendChild(thumb); | |
| }); | |
| } | |
| updateThumbnails() { | |
| const thumbs = this.thumbnailsContainer.querySelectorAll('.thumbnail'); | |
| thumbs.forEach((thumb, index) => { | |
| if (index === this.currentSlide) { | |
| thumb.classList.add('active', 'ring-2', 'ring-indigo-600', 'scale-105'); | |
| thumb.classList.remove('opacity-50'); | |
| } else { | |
| thumb.classList.remove('active', 'ring-2', 'ring-indigo-600', 'scale-105'); | |
| thumb.classList.add('opacity-50'); | |
| } | |
| }); | |
| } | |
| updateSlideStates() { | |
| this.slides.forEach((slide, index) => { | |
| slide.classList.remove('active', 'prev'); | |
| if (index === this.currentSlide) { | |
| slide.classList.add('active'); | |
| } else if (index < this.currentSlide) { | |
| slide.classList.add('prev'); | |
| } | |
| }); | |
| } | |
| updateProgress() { | |
| // Update circle progress | |
| const circumference = 2 * Math.PI * 20; | |
| const progress = ((this.currentSlide + 1) / this.totalSlides) * circumference; | |
| const offset = circumference - progress; | |
| this.progressCircle.style.strokeDashoffset = offset; | |
| // Update counter | |
| this.slideCounter.textContent = `${this.currentSlide + 1}/${this.totalSlides}`; | |
| // Update buttons | |
| this.prevBtn.disabled = this.currentSlide === 0; | |
| this.nextBtn.disabled = this.currentSlide === this.totalSlides - 1; | |
| // Update thumbnails | |
| this.updateThumbnails(); | |
| } | |
| next() { | |
| if (this.currentSlide < this.totalSlides - 1) { | |
| this.currentSlide++; | |
| this.updateSlideStates(); | |
| this.updateProgress(); | |
| } | |
| } | |
| prev() { | |
| if (this.currentSlide > 0) { | |
| this.currentSlide--; | |
| this.updateSlideStates(); | |
| this.updateProgress(); | |
| } | |
| } | |
| goTo(index) { | |
| if (index >= 0 && index < this.totalSlides) { | |
| this.currentSlide = index; | |
| this.updateSlideStates(); | |
| this.updateProgress(); | |
| } | |
| } | |
| toggleFullscreen() { | |
| if (!document.fullscreenElement) { | |
| document.documentElement.requestFullscreen(); | |
| this.fullscreenBtn.innerHTML = '<i data-lucide="minimize" class="w-5 h-5"></i>'; | |
| } else { | |
| document.exitFullscreen(); | |
| this.fullscreenBtn.innerHTML = '<i data-lucide="maximize" class="w-5 h-5"></i>'; | |
| } | |
| lucide.createIcons(); | |
| } | |
| toggleAutoplay() { | |
| this.isAutoplay = !this.isAutoplay; | |
| if (this.isAutoplay) { | |
| this.autoplayBtn.innerHTML = '<i data-lucide="pause" class="w-5 h-5"></i>'; | |
| this.autoplayBtn.classList.add('text-indigo-600', 'bg-indigo-50'); | |
| this.autoplayInterval = setInterval(() => { | |
| if (this.currentSlide < this.totalSlides - 1) { | |
| this.next(); | |
| } else { | |
| this.currentSlide = 0; | |
| this.updateSlideStates(); | |
| this.updateProgress(); | |
| } | |
| }, 5000); | |
| } else { | |
| this.autoplayBtn.innerHTML = '<i data-lucide="play" class="w-5 h-5"></i>'; | |
| this.autoplayBtn.classList.remove('text-indigo-600', 'bg-indigo-50'); | |
| clearInterval(this.autoplayInterval); | |
| } | |
| lucide.createIcons(); | |
| } | |
| } | |
| // Initialize when DOM is ready | |
| document.addEventListener('DOMContentLoaded', () => { | |
| new SlideDeck(); | |
| }); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |