https://live.yalla-shoot24.live/

README.md

@@ -1,10 +1,13 @@
 ---
-title: Streamsphere Live
-emoji: 🐢
-colorFrom: blue
-colorTo: indigo
+title: StreamSphere Live ⚡️
+colorFrom: purple
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,21 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background-color: #111827;
+                    border-top: 1px solid #1f2937;
+                }
+                
+                .footer-links a {
+                    transition: color 0.2s ease;
+                }
+                
+                .footer-links a:hover {
+                    color: #3B82F6;
+                }
+            </style>
+            <footer class="py-8 mt-12">
+                <div class="container mx-auto px-4">
+                    <div class="grid grid-cols-1 md:grid-c{"ok":false,"message":"terminated"}

components/navbar.js

@@ -0,0 +1,68 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: rgba(17, 24, 39, 0.9);
+                    backdrop-filter: blur(8px);
+                    -webkit-backdrop-filter: blur(8px);
+                }
+                
+                @media (max-width: 768px) {
+                    .mobile-menu {
+                        display: none;
+                    }
+                    
+                    .mobile-menu.active {
+                        display: flex;
+                    }
+                }
+            </style>
+            <nav class="border-b border-gray-800 sticky top-0 z-50">
+                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+                    <div class="flex items-center">
+                        <a href="/" class="flex items-center">
+                            <i data-feather="play-circle" class="text-primary-500 mr-2"></i>
+                            <span class="text-xl font-bold">StreamSphere</span>
+                        </a>
+                    </div>
+                    
+                    <div class="hidden md:flex items-center space-x-6">
+                        <a href="/" class="text-white hover:text-primary-500 transition">Home</a>
+                        <a href="/live" class="text-white hover:text-primary-500 transition">Live</a>
+                        <a href="/schedule" class="text-white hover:text-primary-500 transition">Schedule</a>
+                        <a href="/sports" class="text-white hover:text-primary-500 transition">Sports</a>
+                    </div>
+                    
+                    <div class="flex items-center space-x-4">
+                        <button class="md:hidden focus:outline-none" id="mobile-menu-button">
+                            <i data-feather="menu"></i>
+                        </button>
+                        <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-full text-sm font-medium transition">
+                            <i data-feather="user" class="mr-1"></i> Sign In
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Mobile Menu -->
+                <div class="mobile-menu flex-col items-center py-4 px-4 border-t border-gray-800 md:hidden">
+                    <a href="/" class="w-full text-center py-2 hover:text-primary-500 transition">Home</a>
+                    <a href="/live" class="w-full text-center py-2 hover:text-primary-500 transition">Live</a>
+                    <a href="/schedule" class="w-full text-center py-2 hover:text-primary-500 transition">Schedule</a>
+                    <a href="/sports" class="w-full text-center py-2 hover:text-primary-500 transition">Sports</a>
+                </div>
+            </nav>
+        `;
+
+        // Add mobile menu toggle functionality
+        const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
+        const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('active');
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,131 @@
-<!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>StreamSphere Live | Sports Streaming</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3B82F6',
+                        },
+                        secondary: {
+                            500: '#10B981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <h1 class="text-3xl md:text-4xl font-bold mb-6">Live Sports Streaming</h1>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Live Stream Cards -->
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                    <div class="relative pt-[56.25%]">
+                        <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
+                    </div>
+                    <div class="p-4">
+                        <div class="flex items-center mb-2">
+                            <span class="inline-block w-3 h-3 rounded-full bg-red-500 mr-2"></span>
+                            <span class="text-sm font-medium">LIVE</span>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Premier League: Arsenal vs Chelsea</h3>
+                        <p class="text-gray-400 text-sm">English Premier League • 25,432 viewers</p>
+                    </div>
+                </div>
+
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                    <div class="relative pt-[56.25%]">
+                        <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
+                    </div>
+                    <div class="p-4">
+                        <div class="flex items-center mb-2">
+                            <span class="inline-block w-3 h-3 rounded-full bg-red-500 mr-2"></span>
+                            <span class="text-sm font-medium">LIVE</span>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">NBA: Lakers vs Warriors</h3>
+                        <p class="text-gray-400 text-sm">NBA Basketball • 18,765 viewers</p>
+                    </div>
+                </div>
+
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                    <div class="relative pt-[56.25%]">
+                        <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
+                    </div>
+                    <div class="p-4">
+                        <div class="flex items-center mb-2">
+                            <span class="inline-block w-3 h-3 rounded-full bg-red-500 mr-2"></span>
+                            <span class="text-sm font-medium">LIVE</span>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Tennis: Australian Open Final</h3>
+                        <p class="text-gray-400 text-sm">Grand Slam Tennis • 12,543 viewers</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="mb-12">
+            <h2 class="text-2xl font-bold mb-6">Upcoming Events</h2>
+            <div class="overflow-x-auto">
+                <table class="w-full bg-gray-800 rounded-lg overflow-hidden">
+                    <thead class="bg-gray-700">
+                        <tr>
+                            <th class="py-3 px-4 text-left">Sport</th>
+                            <th class="py-3 px-4 text-left">Event</th>
+                            <th class="py-3 px-4 text-left">Time</th>
+                            <th class="py-3 px-4 text-left"></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="border-b border-gray-700 hover:bg-gray-750">
+                            <td class="py-3 px-4">Football</td>
+                            <td class="py-3 px-4">Barcelona vs Real Madrid</td>
+                            <td class="py-3 px-4">Tomorrow, 20:00 GMT</td>
+                            <td class="py-3 px-4">
+                                <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-1 rounded text-sm font-medium transition">Notify Me</button>
+                            </td>
+                        </tr>
+                        <tr class="border-b border-gray-700 hover:bg-gray-750">
+                            <td class="py-3 px-4">Basketball</td>
+                            <td class="py-3 px-4">NBA All-Star Game</td>
+                            <td class="py-3 px-4">Feb 18, 01:00 GMT</td>
+                            <td class="py-3 px-4">
+                                <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-1 rounded text-sm font-medium transition">Notify Me</button>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-750">
+                            <td class="py-3 px-4">Tennis</td>
+                            <td class="py-3 px-4">Wimbledon Championships</td>
+                            <td class="py-3 px-4">Jul 1, 11:00 GMT</td>
+                            <td class="py-3 px-4">
+                                <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-1 rounded text-sm font-medium transition">Notify Me</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize any global functionality here
+    console.log('StreamSphere Live initialized');
+    
+    // Example: Add click event for notification buttons
+    document.querySelectorAll('[data-notify]').forEach(button => {
+        button.addEventListener('click', () => {
+            alert('You will be notified when this event starts!');
+        });
+    });
+});

style.css

@@ -1,28 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    min-height: 100vh;
+    background-color: #111827;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #1f2937;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #374151;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #4b5563;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation for live indicator */
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
 }
+
+.live-pulse {
+    animation: pulse 1.5s infinite;
+}