Spaces:

Meneman
/

livedance

Running

App Files Files Community

Meneman commited on Aug 20, 2025

Commit

78c4f7b

verified ·

1 Parent(s): e0c159c

Please do not turn off the time settings; just change the video automatically according to the time as written in the code by time - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +150 -313

index.html CHANGED Viewed

@@ -1,327 +1,164 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Belly Dance 24/7</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        body {
-            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            min-height: 100vh;
-            color: #f8f8f8;
-            font-family: 'Arial', sans-serif;
-            transition: all 0.5s ease;
-        }
-        .video-container.horizontal {
-            aspect-ratio: 16/9;
-            width: 100%;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 215, 0, 0.2);
-            transition: all 0.3s ease;
-        }
-        .video-container.vertical {
-            aspect-ratio: 9/16;
-            max-width: 500px;
-            margin: 0 auto;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 215, 0, 0.2);
-            transition: all 0.3s ease;
-        }
-        .video-container:hover {
-            transform: scale(1.01);
-            box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.6);
-        }
-        #schedule-times > div.active-schedule {
-            background-color: rgba(234, 179, 8, 0.2);
-            border-left: 4px solid rgba(234, 179, 8, 0.8);
-            transition: all 0.3s ease;
-        }
-        .user-time-display {
-            position: absolute;
-            bottom: 10px;
-            right: 10px;
-            color: white;
-            background-color: rgba(0, 0, 0, 0.5);
-            padding: 5px 10px;
-            border-radius: 4px;
-            font-size: 14px;
-            font-family: monospace;
-        }
-        /* Hide controls except volume and fullscreen */
-        video::-webkit-media-controls-panel {
-            display: flex !important;
-        }
-        video::-webkit-media-controls-play-button {
-            display: none !important;
-        }
-        video::-webkit-media-controls-timeline {
-            display: none !important;
-        }
-        video::-webkit-media-controls-current-time-display {
-            display: none !important;
-        }
-        video::-webkit-media-controls-time-remaining-display {
-            display: none !important;
-        }
-        video::-webkit-media-controls-mute-button {
-            display: flex !important;
-        }
-        video::-webkit-media-controls-volume-slider {
-            display: flex !important;
-        }
-        video::-webkit-media-controls-fullscreen-button {
-            display: flex !important;
         }
-    </style>
-</head>
-<body class="flex flex-col min-h-screen">
-    <header class="py-8 px-4 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-yellow-500">
-            Belly Dance 24/7
-        </h1>
-        <p class="text-lg text-yellow-300 opacity-90 tracking-wider">
-            Continuous streaming of beautiful performances
-        </p>
-        <div id="header-time-display" class="text-sm text-yellow-400 opacity-80 mt-2"></div>
-        <div class="mt-4 h-1 w-24 mx-auto bg-gradient-to-r from-purple-500 to-yellow-500 rounded-full"></div>
-    </header>
-    <main class="flex-grow px-4 pb-8">
-        <div id="video-wrapper" class="mx-auto">
-            <div id="video-container" class="video-container bg-black rounded-lg overflow-hidden shadow-xl relative">
-                <video id="bellydance-video" class="w-full h-full" autoplay muted playsinline>
-                    <div id="user-time-display" class="user-time-display"></div>
-                    Your browser does not support the video tag.
-                </video>
-            </div>
-            <div id="video-info" class="mt-6 text-center">
-                <h2 id="video-title" class="text-2xl md:text-3xl font-medium mb-2 bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-yellow-400"></h2>
-                <p id="video-time" class="text-sm text-yellow-300 opacity-90 tracking-wider"></p>
-                <div class="mt-3 h-1 w-16 mx-auto bg-gradient-to-r from-purple-400 to-yellow-400 rounded-full opacity-70"></div>
-            </div>
-            <div id="schedule" class="mt-8 max-w-md mx-auto bg-black bg-opacity-30 p-6 rounded-lg">
-                <h3 class="text-xl font-bold mb-4 text-yellow-300 tracking-wider">✨ Today's Schedule ✨</h3>
-                <div id="schedule-times" class="text-sm space-y-3">
-                    <div class="flex items-start">
-                        <div class="w-24 font-mono text-yellow-400">21:00 – 23:35</div>
-                        <div class="flex-1">
-                            <div class="font-medium">Dance in Front of the Library of Alexandria</div>
-                            <div class="text-yellow-300 opacity-80 text-xs">Duration: 02:35</div>
-                        </div>
-                    </div>
-                    <div class="h-px bg-gradient-to-r from-transparent via-yellow-500/30 to-transparent"></div>
-                    <div class="flex items-start">
-                        <div class="w-24 font-mono text-yellow-400">23:35 – 01:28</div>
-                        <div class="flex-1">
-                            <div class="font-medium">✨ Belly Dance ✨ - Sensual Dance</div>
-                            <div class="text-yellow-300 opacity-80 text-xs">Duration: 01:53</div>
-                        </div>
-                    </div>
-                    <div class="h-px bg-gradient-to-r from-transparent via-yellow-500/30 to-transparent"></div>
-                    <div class="flex items-start">
-                        <div class="w-24 font-mono text-yellow-400">01:28 – 06:09</div>
-                        <div class="flex-1">
-                            <div class="font-medium">✨ Belly Dance ✨ Let My Dance and My Magic Work on You</div>
-                            <div class="text-yellow-300 opacity-80 text-xs">Duration: 04:41</div>
-                        </div>
-                    </div>
-                    <div class="h-px bg-gradient-to-r from-transparent via-yellow-500/30 to-transparent"></div>
-                    <div class="flex items-start">
-                        <div class="w-24 font-mono text-yellow-400">06:09 – 21:00</div>
-                        <div class="flex-1">
-                            <div class="font-medium">Feast of Hathor</div>
-                            <div class="text-yellow-300 opacity-80 text-xs">Duration: 03:28</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <footer class="py-6 px-4 text-center">
-        <p class="text-sm text-yellow-300 opacity-70 tracking-wider">
-            Pre-recorded performances looped 24/7
-        </p>
-        <div class="mt-3 h-px w-32 mx-auto bg-gradient-to-r from-transparent via-yellow-500 to-transparent opacity-30"></div>
-    </footer>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const videoElement = document.getElementById('bellydance-video');
-            const videoContainer = document.getElementById('video-container');
-            const videoTitle = document.getElementById('video-title');
-            const videoTime = document.getElementById('video-time');
-            let videos = [
-                {
-                    id: 1,
-                    url: "https://www.dropbox.com/scl/fi/cdla6akuljge32vgy07ym/A-dance-in-front-of-the-Library-of-Alexandria.mp4?rlkey=qklfnixme2cnc271hyueedgz4&st=uatux3wm&dl=1",
-                    title: "Dance in Front of the Library of Alexandria",
-                    duration: 155, // 2:35 in seconds
-                    orientation: "horizontal",
-                    startHour: 21, // 21:00 UTC
-                    endHour: 23.5833 // 23:35 UTC (35/60 = 0.5833)
-                },
-                {
-                    id: 2,
-                    url: "https://www.dropbox.com/scl/fi/5y9pie14fgq9h87lqcfgb/Belly-dance-sensual-dance.mp4?rlkey=t0hlldemyzqlvp3lzqugh5w5i&st=o3r4pvp6&dl=1",
-                    title: "✨ Belly Dance ✨ - Sensual Dance",
-                    duration: 113, // 1:53 in seconds
-                    orientation: "horizontal",
-                    startHour: 23.5833, // 23:35 UTC
-                    endHour: 1.4667 // 01:28 UTC (28/60 = 0.4667)
-                },
-                {
-                    id: 3,
-                    url: "https://www.dropbox.com/scl/fi/guaawrmicatbah76ot22m/Belly-dance-Let-my-dance-and-my-magic-work-on-you.mp4?rlkey=9av0btbgbk6kws8ge1u37s6ab&st=8yyh9c3f&dl=1",
-                    title: "✨ Belly Dance ✨ Let My Dance and My Magic Work on You",
-                    duration: 281, // 4:41 in seconds
-                    orientation: "horizontal",
-                    startHour: 1.4667, // 01:28 UTC
-                    endHour: 6.15 // 06:09 UTC (9/60 = 0.15)
-                },
-                {
-                    id: 4,
-                    url: "https://www.dropbox.com/scl/fi/re9c5joysr8vhvqvhll4p/Feast-of-Hathor.mp4?rlkey=a0k48nt64q3o6nggrqivbw06r&st=4me6n4ka&dl=1",
-                    title: "Feast of Hathor",
-                    duration: 208, // 3:28 in seconds
-                    orientation: "horizontal",
-                    startHour: 6.15, // 06:09 UTC
-                    endHour: 21 // 21:00 UTC
-                }
-            ];
-            let currentVideoIndex = 0;
-            let currentUserTime = new Date(); // Variable to store current time
-            // Play initial video
-            playScheduledVideo();
-            // Update time display continuously
-            function updateTimeDisplay() {
-                currentUserTime = new Date();
-                const utcTimeString = currentUserTime.toUTCString().split(' ')[4];
-                const localTimeString = currentUserTime.toLocaleTimeString();
-                const dateString = currentUserTime.toDateString();
-                document.getElementById('header-time-display').textContent = `${dateString} | Local: ${localTimeString} | UTC: ${utcTimeString}`;
-                document.getElementById('user-time-display').textContent = `Local: ${localTimeString}`;
-            }
-            // Update time every second
-            setInterval(updateTimeDisplay, 1000);
-            updateTimeDisplay(); // Initial call
-            // Highlight current schedule item
-            function highlightCurrentScheduleItem(index) {
-                const scheduleItems = document.querySelectorAll('#schedule-times > div');
-                scheduleItems.forEach((item, i) => {
-                    if (i === index * 2) { // Each video is every second div (0, 2, 4...)
-                        item.classList.add('active-schedule');
-                    } else {
-                        item.classList.remove('active-schedule');
-                    }
-                });
-            }
-            // Play video based on UTC time (same for everyone worldwide)
-            function playScheduledVideo() {
-                const now = new Date();
-                const currentHour = now.getUTCHours() + now.getUTCMinutes() / 60;
-                // Find which video should be playing now based on hour
-                let videoIndex = 0;
-                for (let i = 0; i < videos.length; i++) {
-                    if (currentHour >= videos[i].startHour && currentHour < videos[i].endHour) {
-                        videoIndex = i;
-                        break;
-                    }
-                }
-                currentVideoIndex = videoIndex;
-                const video = videos[currentVideoIndex];
-                // Calculate time elapsed in current time slot
-                const timeElapsedInSlot = (currentHour - video.startHour) * 3600;
-                const loopsCompleted = Math.floor(timeElapsedInSlot / video.duration);
-                const videoCurrentPosition = timeElapsedInSlot % video.duration;
-                // Set video source and metadata
-                videoElement.src = video.url;
-                videoElement.load();
-                // Set orientation class
-                videoContainer.className = `video-container ${video.orientation} bg-black rounded-lg overflow-hidden shadow-xl`;
-                // Set video info
-                videoTitle.textContent = video.title;
-                // Format duration
-                const durationMinutes = Math.floor(video.duration / 60);
-                const durationSeconds = video.duration % 60;
-                videoTime.textContent = `Duration: ${durationMinutes}:${durationSeconds.toString().padStart(2, '0')}`;
-                // Highlight current schedule item
-                highlightCurrentScheduleItem(videoIndex);
-                // Play video from calculated position
-                videoElement.currentTime = videoCurrentPosition;
-                videoElement.loop = true;
-                videoElement.play().catch(e => {
-                    console.log('Auto-play prevented:', e);
-                    // Fallback: mute and try again
-                    videoElement.muted = true;
-                    videoElement.play();
-                });
-                // Calculate time until next video should start
-                const timeUntilNextVideo = (video.endHour - currentHour) * 3600 * 1000;
-                // Clear any existing timeout to prevent multiple triggers
-                if (window.scheduleTimeout) {
-                    clearTimeout(window.scheduleTimeout);
-                }
-                window.scheduleTimeout = setTimeout(playScheduledVideo, timeUntilNextVideo);
-            }
-            // Handle video end (shouldn't be needed with loop=true, but just in case)
-            videoElement.addEventListener('ended', function() {
-                const now = new Date();
-                const currentHour = now.getUTCHours() + now.getUTCMinutes() / 60;
-                const currentVideo = videos[currentVideoIndex];
-                // If still within current video's time slot, restart it
-                if (currentHour >= currentVideo.startHour && currentHour < currentVideo.endHour) {
-                    videoElement.currentTime = 0;
-                    videoElement.play();
-                } else {
-                    // Otherwise switch to scheduled video
-                    playScheduledVideo();
-                }
-            });
-            // Preload all videos for smoother transitions
-            function preloadVideos() {
-                videos.forEach(video => {
-                    const preload = document.createElement('video');
-                    preload.src = video.url;
-                    preload.preload = 'auto';
-                });
-            }
-            preloadVideos();
-            // Initial volume setup (muted by default for autoplay)
-            videoElement.muted = true;
-            // Toggle mute when clicking the video
-            videoElement.addEventListener('click', function() {
-                videoElement.muted = !videoElement.muted;
-            });
-        });
-    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Meneman/livedance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Belly Dance 24/7</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body {
+      background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+      min-height: 100vh;
+      color: #f8f8f8;
+      font-family: 'Arial', sans-serif;
+    }
+    .video-container {
+      aspect-ratio: 16/9;
+      width: 100%;
+      max-width: 900px;
+      margin: 0 auto;
+      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
+      border: 1px solid rgba(255, 215, 0, 0.2);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+    .user-time-display {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      background: rgba(0,0,0,0.6);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-family: monospace;
+    }
+  </style>
+</head>
+<body class="flex flex-col min-h-screen">
+  <header class="py-6 text-center">
+    <h1 class="text-4xl font-bold text-yellow-400">Belly Dance 24/7</h1>
+    <p class="text-yellow-300 opacity-80">Continuous streaming of beautiful performances</p>
+    <div id="header-time-display" class="mt-2 text-sm text-yellow-400"></div>
+  </header>
+  <main class="flex-grow px-4 pb-8">
+    <div class="video-container relative">
+      <video id="bellydance-video" autoplay muted playsinline class="w-full h-full"></video>
+      <div id="user-time-display" class="user-time-display"></div>
+    </div>
+    <div class="mt-6 text-center">
+      <h2 id="video-title" class="text-2xl text-yellow-300 font-semibold"></h2>
+      <p id="video-time" class="text-sm text-yellow-400"></p>
+    </div>
+    <div id="schedule" class="mt-8 max-w-md mx-auto bg-black bg-opacity-30 p-6 rounded-lg">
+      <h3 class="text-xl font-bold mb-4 text-yellow-300">✨ Today's Schedule ✨</h3>
+      <div id="schedule-times" class="space-y-3 text-sm">
+        <div class="schedule-item flex items-start">
+          <div class="w-24 font-mono text-yellow-400">21:00 – 23:35</div>
+          <div class="flex-1">Dance in Front of the Library of Alexandria</div>
+        </div>
+        <div class="schedule-item flex items-start">
+          <div class="w-24 font-mono text-yellow-400">23:35 – 01:28</div>
+          <div class="flex-1">✨ Belly Dance ✨ - Sensual Dance</div>
+        </div>
+        <div class="schedule-item flex items-start">
+          <div class="w-24 font-mono text-yellow-400">01:28 – 06:09</div>
+          <div class="flex-1">✨ Belly Dance ✨ Let My Dance and My Magic Work on You</div>
+        </div>
+        <div class="schedule-item flex items-start">
+          <div class="w-24 font-mono text-yellow-400">06:09 – 21:00</div>
+          <div class="flex-1">Feast of Hathor</div>
+        </div>
+      </div>
+    </div>
+  </main>
+  <script>
+    const videoElement = document.getElementById('bellydance-video');
+    const videoTitle = document.getElementById('video-title');
+    const videoTime = document.getElementById('video-time');
+    const videos = [
+      {
+        title: "Dance in Front of the Library of Alexandria",
+        url: "https://www.dropbox.com/scl/fi/cdla6akuljge32vgy07ym/A-dance-in-front-of-the-Library-of-Alexandria.mp4?dl=1",
+        duration: 155, // 2:35
+        start: 21, end: 23.5833
+      },
+      {
+        title: "✨ Belly Dance ✨ - Sensual Dance",
+        url: "https://www.dropbox.com/scl/fi/5y9pie14fgq9h87lqcfgb/Belly-dance-sensual-dance.mp4?dl=1",
+        duration: 113, // 1:53
+        start: 23.5833, end: 1.4667
+      },
+      {
+        title: "✨ Belly Dance ✨ Let My Dance and My Magic Work on You",
+        url: "https://www.dropbox.com/scl/fi/guaawrmicatbah76ot22m/Belly-dance-Let-my-dance-and-my-magic-work-on-you.mp4?dl=1",
+        duration: 281, // 4:41
+        start: 1.4667, end: 6.15
+      },
+      {
+        title: "Feast of Hathor",
+        url: "https://www.dropbox.com/scl/fi/re9c5joysr8vhvqvhll4p/Feast-of-Hathor.mp4?dl=1",
+        duration: 208, // 3:28
+        start: 6.15, end: 21
+      }
+    ];
+    function updateTimeDisplays() {
+      const now = new Date();
+      document.getElementById('header-time-display').textContent =
+        now.toDateString() + " | Local: " + now.toLocaleTimeString() +
+        " | UTC: " + now.toUTCString().split(' ')[4];
+      document.getElementById('user-time-display').textContent =
+        "Local: " + now.toLocaleTimeString();
+    }
+    setInterval(updateTimeDisplays, 1000);
+    updateTimeDisplays();
+    function getCurrentVideo() {
+      const now = new Date();
+      const hour = now.getUTCHours() + now.getUTCMinutes() / 60;
+      for (let v of videos) {
+        if (v.start < v.end) {
+          if (hour >= v.start && hour < v.end) return v;
+        } else {
+          if (hour >= v.start || hour < v.end) return v;
         }
+      }
+      return videos[0];
+    }
+    function playVideo() {
+      const now = new Date();
+      const hour = now.getUTCHours() + now.getUTCMinutes() / 60;
+      const video = getCurrentVideo();
+      const elapsed = ((hour - video.start + 24) % 24) * 3600;
+      const position = elapsed % video.duration;
+      videoElement.src = video.url;
+      videoElement.load();
+      videoElement.currentTime = position;
+      videoElement.loop = true;
+      videoElement.play().catch(()=>{ videoElement.muted = true; videoElement.play(); });
+      videoTitle.textContent = video.title;
+      videoTime.textContent = "Duration: " + Math.floor(video.duration/60) + ":" +
+        (video.duration%60).toString().padStart(2,'0');
+      document.querySelectorAll(".schedule-item").forEach((el, i) => {
+        el.classList.remove("bg-yellow-500","bg-opacity-20","rounded-lg");
+        if (videos[i] === video) el.classList.add("bg-yellow-500","bg-opacity-20","rounded-lg");
+      });
+      const msUntilNext = ((video.end - hour + 24) % 24) * 3600 * 1000;
+      setTimeout(playVideo, msUntilNext);
+    }
+    playVideo();
+  </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Meneman/livedance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>