Spaces:

vericudebuget
/

slideshow

Running

App Files Files Community

vericudebuget commited on 3 days ago

Commit

df61c46

verified ·

1 Parent(s): 780a996

Update index.html

Browse files

Files changed (1) hide show

index.html +151 -18

index.html CHANGED Viewed

@@ -1,19 +1,152 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>