Spaces:

Meneman
/

livedance

Running

App Files Files Community

Meneman commited on Aug 20, 2025

Commit

7a521d9

verified ·

1 Parent(s): 9e5c920

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +322 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Livedance
-emoji: 🚀
 colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: livedance
+emoji: 🐳
 colorFrom: gray
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,322 @@
-<!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>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.bg-yellow-500 {
+            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('bg-yellow-500', 'bg-opacity-10', 'rounded-lg');
+                        item.classList.remove('bg-transparent');
+                    } else {
+                        item.classList.remove('bg-yellow-500', 'bg-opacity-10', 'rounded-lg');
+                    }
+                });
+            }
+            // 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;
+                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>