Spaces:

duplcanada
/

awesome

Running

App Files Files Community

duplcanada commited on Apr 11, 2025

Commit

8bfd5f7

verified ·

1 Parent(s): c78bde1

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +309 -19

README.md CHANGED Viewed

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

 ---
+title: awesome
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 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,309 @@
-<!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>Justin Bieber Live Cam</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes wave {
+            0%, 100% { transform: rotate(0deg); }
+            25% { transform: rotate(10deg); }
+            50% { transform: rotate(0deg); }
+            75% { transform: rotate(-10deg); }
+        }
+        .wave-animation {
+            animation: wave 1.5s infinite;
+            transform-origin: 70% 70%;
+        }
+        .camera-light {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; }
+            50% { opacity: 1; }
+        }
+        .video-container {
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+            position: relative;
+            background: #111;
+        }
+        .speech-bubble {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 20px;
+            padding: 15px;
+            max-width: 80%;
+            bottom: 120px;
+            left: 50%;
+            transform: translateX(-50%);
+            animation: fadeIn 0.5s ease-out;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+            to { opacity: 1; transform: translateX(-50%) translateY(0); }
+        }
+        .viewer-count {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 20px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+        }
+        .live-badge {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            background: #ff0000;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+        }
+        .chat-message {
+            animation: slideIn 0.3s ease-out;
+        }
+        @keyframes slideIn {
+            from { transform: translateY(10px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
+    <div class="max-w-4xl w-full">
+        <div class="flex flex-col lg:flex-row gap-6">
+            <!-- Video Stream -->
+            <div class="flex-1">
+                <div class="video-container relative">
+                    <!-- Camera light -->
+                    <div class="absolute top-4 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full camera-light"></div>
+                    <!-- Live badge -->
+                    <div class="live-badge">
+                        <div class="w-2 h-2 bg-white rounded-full mr-2"></div>
+                        LIVE
+                    </div>
+                    <!-- Viewer count -->
+                    <div class="viewer-count">
+                        <i class="fas fa-eye mr-2"></i>
+                        <span id="viewerCount">24,589</span>
+                    </div>
+                    <!-- Video feed -->
+                    <div class="aspect-w-16 aspect-h-9 bg-black flex items-center justify-center">
+                        <img id="bieberFace" src="https://i.imgur.com/JQ9wZfN.png" alt="Justin Bieber" class="w-full h-auto max-h-[500px] object-contain wave-animation">
+                    </div>
+                    <!-- Speech bubble -->
+                    <div class="speech-bubble hidden" id="speechBubble">
+                        Hey world! What's up? 😊
+                    </div>
+                    <!-- Controls -->
+                    <div class="bg-gray-800 p-3 flex justify-between items-center">
+                        <div class="flex space-x-3">
+                            <button class="text-white bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
+                                <i class="fas fa-microphone"></i>
+                            </button>
+                            <button class="text-white bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
+                                <i class="fas fa-video"></i>
+                            </button>
+                            <button class="text-white bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                        </div>
+                        <button class="text-white bg-red-600 hover:bg-red-700 px-4 py-2 rounded-full font-medium">
+                            End Stream
+                        </button>
+                    </div>
+                </div>
+                <!-- Stream title -->
+                <div class="mt-4 text-white">
+                    <h1 class="text-2xl font-bold">Justin Bieber LIVE from Toronto</h1>
+                    <p class="text-gray-400 mt-1">Started streaming 12 minutes ago</p>
+                </div>
+            </div>
+            <!-- Chat section -->
+            <div class="w-full lg:w-80 bg-gray-800 rounded-lg overflow-hidden flex flex-col">
+                <div class="bg-gray-700 p-3 text-white font-medium flex justify-between items-center">
+                    <span>Live Chat</span>
+                    <span class="text-xs bg-gray-600 px-2 py-1 rounded">4,289 online</span>
+                </div>
+                <div class="flex-1 p-3 overflow-y-auto max-h-96" id="chatContainer">
+                    <!-- Chat messages will appear here -->
+                </div>
+                <div class="p-3 border-t border-gray-700">
+                    <div class="flex items-center">
+                        <input type="text" placeholder="Send a message" class="flex-1 bg-gray-700 text-white px-3 py-2 rounded-l focus:outline-none">
+                        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Fan reactions -->
+        <div class="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <div class="bg-gray-800 p-4 rounded-lg text-center">
+                <div class="text-yellow-400 text-2xl mb-2">
+                    <i class="fas fa-heart"></i>
+                </div>
+                <div class="text-white font-medium" id="hearts">12.4K</div>
+            </div>
+            <div class="bg-gray-800 p-4 rounded-lg text-center">
+                <div class="text-blue-400 text-2xl mb-2">
+                    <i class="fas fa-thumbs-up"></i>
+                </div>
+                <div class="text-white font-medium" id="likes">8.7K</div>
+            </div>
+            <div class="bg-gray-800 p-4 rounded-lg text-center">
+                <div class="text-green-400 text-2xl mb-2">
+                    <i class="fas fa-star"></i>
+                </div>
+                <div class="text-white font-medium" id="stars">5.2K</div>
+            </div>
+            <div class="bg-gray-800 p-4 rounded-lg text-center">
+                <div class="text-red-400 text-2xl mb-2">
+                    <i class="fas fa-gift"></i>
+                </div>
+                <div class="text-white font-medium" id="gifts">1.9K</div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Simulate Justin saying hello
+        setTimeout(() => {
+            document.getElementById('speechBubble').classList.remove('hidden');
+            // Make the face wave
+            document.getElementById('bieberFace').classList.add('wave-animation');
+            // Remove wave after animation completes
+            setTimeout(() => {
+                document.getElementById('bieberFace').classList.remove('wave-animation');
+            }, 1500);
+        }, 1000);
+        // Simulate chat messages
+        const messages = [
+            {name: "BieberFan4Life", text: "OMG JUSTIN!! 😍", color: "text-pink-400"},
+            {name: "MusicLover22", text: "You're the best!", color: "text-blue-400"},
+            {name: "SarahJ", text: "Can you sing Yummy please??", color: "text-green-400"},
+            {name: "Diego_T", text: "Greetings from Mexico!", color: "text-yellow-400"},
+            {name: "Belieber99", text: "I love you Justin!!!", color: "text-purple-400"},
+            {name: "MusicCritic", text: "When's the new album coming?", color: "text-red-400"},
+        ];
+        const chatContainer = document.getElementById('chatContainer');
+        function addChatMessage() {
+            const randomMsg = messages[Math.floor(Math.random() * messages.length)];
+            const messageElement = document.createElement('div');
+            messageElement.className = `chat-message text-white mb-2`;
+            messageElement.innerHTML = `
+                <span class="${randomMsg.color} font-medium">${randomMsg.name}:</span>
+                <span>${randomMsg.text}</span>
+            `;
+            chatContainer.appendChild(messageElement);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            // Random interval for next message
+            setTimeout(addChatMessage, Math.random() * 2000 + 500);
+        }
+        // Start chat simulation
+        setTimeout(addChatMessage, 1500);
+        // Simulate viewer count increase
+        setInterval(() => {
+            const viewerCount = document.getElementById('viewerCount');
+            let count = parseInt(viewerCount.textContent.replace(/,/g, ''));
+            count += Math.floor(Math.random() * 10);
+            viewerCount.textContent = count.toLocaleString();
+        }, 3000);
+        // Simulate reaction counts increasing
+        setInterval(() => {
+            const hearts = document.getElementById('hearts');
+            let heartCount = parseFloat(hearts.textContent.replace(/[^\d.]/g, ''));
+            heartCount += Math.random();
+            hearts.textContent = heartCount >= 1000 ? (heartCount/1000).toFixed(1) + "K" : Math.round(heartCount);
+            const likes = document.getElementById('likes');
+            let likeCount = parseFloat(likes.textContent.replace(/[^\d.]/g, ''));
+            likeCount += Math.random() * 0.8;
+            likes.textContent = likeCount >= 1000 ? (likeCount/1000).toFixed(1) + "K" : Math.round(likeCount);
+            const stars = document.getElementById('stars');
+            let starCount = parseFloat(stars.textContent.replace(/[^\d.]/g, ''));
+            starCount += Math.random() * 0.5;
+            stars.textContent = starCount >= 1000 ? (starCount/1000).toFixed(1) + "K" : Math.round(starCount);
+            const gifts = document.getElementById('gifts');
+            let giftCount = parseFloat(gifts.textContent.replace(/[^\d.]/g, ''));
+            giftCount += Math.random() * 0.3;
+            gifts.textContent = giftCount >= 1000 ? (giftCount/1000).toFixed(1) + "K" : Math.round(giftCount);
+        }, 2000);
+        // Make the speech bubble change messages periodically
+        const phrases = [
+            "What's up world?",
+            "Toronto is lit today!",
+            "Love you guys!",
+            "Who's watching from outside Canada?",
+            "New music coming soon!",
+            "Stay awesome everyone!",
+            "Sending love to all my fans ❤️"
+        ];
+        setInterval(() => {
+            const bubble = document.getElementById('speechBubble');
+            const randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
+            bubble.textContent = randomPhrase;
+            // Trigger animation
+            bubble.style.animation = 'none';
+            void bubble.offsetWidth; // Trigger reflow
+            bubble.style.animation = 'fadeIn 0.5s ease-out';
+            // Make the face wave
+            const face = document.getElementById('bieberFace');
+            face.classList.add('wave-animation');
+            // Remove wave after animation completes
+            setTimeout(() => {
+                face.classList.remove('wave-animation');
+            }, 1500);
+        }, 8000);
+    </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=duplcanada/awesome" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>