Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fullscreen Crossfade Slideshow with Audio</title> | |
| <style> | |
| * { margin: 0; padding: 0; } | |
| html, body { width: 100%; height: 100%; overflow: hidden; } | |
| #slideshow { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| background-color: white; | |
| } | |
| .slide { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: opacity 2s ease-in-out; | |
| } | |
| .slide.hidden { | |
| opacity: 0; | |
| z-index: 1; | |
| } | |
| .slide.visible { | |
| opacity: 1; | |
| z-index: 2; | |
| } | |
| .white-background { | |
| background: white; | |
| object-fit: cover; | |
| transform: scaleY(5); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="slideshow"> | |
| <img id="slide1" class="slide visible" src="https://huggingface.co/datasets/vericudebuget/test1423/resolve/main/WhatsApp%20Image%202025-05-16%20at%203.03.14%20PM.jpeg" alt=""> | |
| <img id="slide2" class="slide hidden" src="" alt=""> | |
| </div> | |
| <audio id="bgAudio" preload="auto" style="display:none;"> | |
| <source src="https://huggingface.co/datasets/vericudebuget/test1423/resolve/main/ytmp3free.cc_corul-buna-vestire-francisc-hubic-miluiestema-dumnezeule-gheorghe-cucu-youtubemp3free.o%20(1).mp3?download=true" type="audio/mpeg"> | |
| </audio> | |
| <script> | |
| const images = [ | |
| 'https://huggingface.co/datasets/vericudebuget/test1423/resolve/main/WhatsApp%20Image%202025-05-16%20at%203.03.14%20PM.jpeg', | |
| 'https://huggingface.co/datasets/vericudebuget/test1423/resolve/main/WhatsApp%20Image%202025-05-16%20at%203.03.14%20PM%20(1).jpeg', | |
| 'https://huggingface.co/datasets/vericudebuget/test1423/resolve/main/WhatsApp%20Image%202025-05-16%20at%203.03.14%20PM%20(2).jpeg' | |
| ]; | |
| images.forEach(url => new Image().src = url); | |
| const slide1 = document.getElementById('slide1'); | |
| const slide2 = document.getElementById('slide2'); | |
| const slideshow = document.getElementById('slideshow'); | |
| const bgAudio = document.getElementById('bgAudio'); | |
| bgAudio.volume = 0; | |
| const slides = [ | |
| { type: 'image', src: images[0] }, | |
| { type: 'image', src: images[1] }, | |
| { type: 'audio' }, | |
| { type: 'image', src: images[2] }, | |
| { type: 'white' } | |
| ]; | |
| let currentIndex = 0; | |
| let isAudioPlaying = false; | |
| slideshow.addEventListener('click', () => { | |
| const nextIndex = (currentIndex + 1); | |
| const nextSlide = slides[nextIndex]; | |
| if (!nextSlide) return; | |
| if (nextSlide.type === 'audio') { | |
| bgAudio.currentTime = 0; | |
| bgAudio.play(); | |
| isAudioPlaying = true; | |
| fadeVolume(bgAudio, 0, 1, 3000); | |
| } else if (nextSlide.type === 'image') { | |
| const topSlide = slide1.classList.contains('visible') ? slide1 : slide2; | |
| const bottomSlide = topSlide === slide1 ? slide2 : slide1; | |
| const prevIdx = slides.findIndex(s => s.src === topSlide.src); | |
| const newIdx = images.indexOf(nextSlide.src); | |
| const duration = (prevIdx === 1 && newIdx === 2) ? 5 : 2; | |
| slide1.style.transition = `opacity ${duration}s ease-in-out`; | |
| slide2.style.transition = `opacity ${duration}s ease-in-out`; | |
| bottomSlide.src = nextSlide.src; | |
| bottomSlide.alt = ""; | |
| bottomSlide.classList.remove('white-background'); | |
| bottomSlide.classList.remove('hidden'); | |
| bottomSlide.classList.add('visible'); | |
| topSlide.classList.remove('visible'); | |
| topSlide.classList.add('hidden'); | |
| } else if (nextSlide.type === 'white') { | |
| fadeVolume(bgAudio, bgAudio.volume, 0, 10000); | |
| const topSlide = slide1.classList.contains('visible') ? slide1 : slide2; | |
| const bottomSlide = topSlide === slide1 ? slide2 : slide1; | |
| bottomSlide.removeAttribute('src'); | |
| bottomSlide.alt = ""; | |
| bottomSlide.classList.add('white-background'); | |
| bottomSlide.style.transition = 'opacity 10s ease-in-out'; | |
| topSlide.style.transition = 'opacity 10s ease-in-out'; | |
| bottomSlide.classList.remove('hidden'); | |
| bottomSlide.classList.add('visible'); | |
| topSlide.classList.remove('visible'); | |
| topSlide.classList.add('hidden'); | |
| } | |
| currentIndex = nextIndex; | |
| }); | |
| function fadeVolume(audio, from, to, duration) { | |
| const steps = 30; | |
| const stepTime = duration / steps; | |
| let step = 0; | |
| const volumeStep = (to - from) / steps; | |
| const fade = setInterval(() => { | |
| audio.volume = Math.min(Math.max(audio.volume + volumeStep, 0), 1); | |
| if (++step >= steps) clearInterval(fade); | |
| if (audio.volume === 0) audio.pause(); | |
| }, stepTime); | |
| } | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key.toLowerCase() === 'k') { | |
| if (bgAudio.paused) { | |
| bgAudio.play(); | |
| isAudioPlaying = true; | |
| } else { | |
| bgAudio.pause(); | |
| isAudioPlaying = false; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |