Spaces:

api-ix
/

Isreal-website

Running

App Files Files Community

api-ix commited on Jun 24, 2025

Commit

363fbc9

verified ·

1 Parent(s): d5f7d07

Update index.html

Browse files

Files changed (1) hide show

index.html +193 -313

index.html CHANGED Viewed

@@ -3,368 +3,248 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Isreal Toon - Premium Animation Stream</title>
     <style>
         :root {
-            --primary: #ff6b6b;
-            --secondary: #4ecdc4;
-            --dark: #292f36;
-            --light: #f7fff7;
-            --accent: #ff9f1c;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
-            background: linear-gradient(135deg, var(--dark), #1a1e24);
             color: var(--light);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding: 2rem;
-            overflow-x: hidden;
-        }
-        .brand-header {
-            text-align: center;
-            margin-bottom: 1.5rem;
-            animation: fadeIn 1.5s ease;
-        }
-        .brand-title {
-            font-size: 2.5rem;
-            font-weight: 800;
-            background: linear-gradient(to right, var(--primary), var(--accent));
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-            margin-bottom: 0.5rem;
-            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-        }
-        .brand-subtitle {
-            font-size: 0.9rem;
-            opacity: 0.8;
-            font-style: italic;
-        }
-        .player-container {
-            width: 90%;
-            max-width: 1200px;
-            margin: 1rem auto;
-            border-radius: 15px;
-            overflow: hidden;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-            transform: scale(0.95);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            position: relative;
-            background: rgba(0, 0, 0, 0.7);
-        }
-        .player-container:hover {
-            transform: scale(1);
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
-        }
-        .player-header {
-            background: linear-gradient(to right, var(--primary), var(--accent));
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .player-title {
-            font-size: 1.5rem;
-            font-weight: 700;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            animation: glow 2s infinite alternate;
-        }
-        .player-controls {
-            display: flex;
-            gap: 1rem;
-        }
-        .control-btn {
-            background: rgba(255, 255, 255, 0.2);
-            border: none;
-            color: white;
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
             justify-content: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .control-btn:hover {
-            background: rgba(255, 255, 255, 0.4);
-            transform: scale(1.1);
         }
-        video {
             width: 100%;
-            display: block;
-            outline: none;
-            transition: opacity 0.5s ease;
-        }
-        video:focus {
-            opacity: 0.9;
-        }
-        .player-footer {
-            background: rgba(0, 0, 0, 0.6);
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 0.9rem;
-        }
-        .credit-text {
-            font-size: 0.8rem;
-            opacity: 0.7;
-        }
-        .quality-selector {
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            color: white;
-            padding: 0.3rem 0.6rem;
-            border-radius: 20px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .quality-selector:hover {
-            background: rgba(255, 255, 255, 0.2);
         }
-        .loading-animation {
             position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            display: flex;
-            gap: 0.5rem;
-        }
-        .dot {
-            width: 12px;
-            height: 12px;
             border-radius: 50%;
-            background: var(--primary);
-            animation: bounce 1.4s infinite ease-in-out;
-        }
-        .dot:nth-child(1) {
-            animation-delay: -0.32s;
-        }
-        .dot:nth-child(2) {
-            animation-delay: -0.16s;
         }
-        @keyframes bounce {
-            0%, 80%, 100% {
-                transform: scale(0);
-                opacity: 0.5;
-            }
-            40% {
-                transform: scale(1);
                 opacity: 1;
             }
-        }
-        @keyframes glow {
-            from {
-                text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
-            }
-            to {
-                text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--accent);
-            }
-        }
-        @keyframes fadeIn {
-            from {
                 opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
             }
         }
-        .floating-logo {
-            position: absolute;
-            top: -20px;
-            right: -20px;
-            width: 80px;
-            height: 80px;
-            background: var(--accent);
-            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-weight: bold;
-            font-size: 1.2rem;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-            transform: rotate(15deg);
-            animation: float 6s ease-in-out infinite;
-            z-index: 10;
         }
-        @keyframes float {
-            0%, 100% {
-                transform: translateY(0) rotate(15deg);
-            }
-            50% {
-                transform: translateY(-20px) rotate(15deg);
-            }
         }
-        .channel-list {
-            width: 90%;
-            max-width: 1200px;
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 1rem;
-            margin-top: 2rem;
         }
-        .channel-btn {
-            background: rgba(255, 255, 255, 0.1);
-            border: none;
-            color: white;
-            padding: 0.8rem;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-align: center;
-            font-weight: 500;
         }
-        .channel-btn:hover {
-            background: var(--primary);
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
         }
-        .channel-btn.active {
-            background: var(--accent);
-            font-weight: bold;
         }
-        .watermark {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            font-size: 0.8rem;
-            opacity: 0.5;
-            transition: opacity 0.3s ease;
         }
-        .watermark:hover {
-            opacity: 1;
         }
     </style>
 </head>
 <body>
-    <div class="brand-header">
-        <h1 class="brand-title">ISREAL TOON</h1>
-        <p class="brand-subtitle">Premium Animation Streaming</p>
     </div>
-    <div class="player-container">
-        <div class="floating-logo">IT</div>
-        <div class="player-header">
-            <div class="player-title">Isreal Toon Live</div>
-            <div class="player-controls">
-                <button class="control-btn" title="Fullscreen">↗</button>
-                <button class="control-btn" title="Settings">⚙</button>
             </div>
         </div>
-        <div class="loading-animation">
-            <div class="dot"></div>
-            <div class="dot"></div>
-            <div class="dot"></div>
-        </div>
-        <video controls autoplay name="media" poster="https://via.placeholder.com/1200x675/292f36/f7fff7?text=Isreal+Toon+Stream">
-            <source src="https://fl1.moveonjoy.com/NICKTOONS/index.m3u8" type="application/vnd.apple.mpegurl">
-            Your browser does not support the video tag.
-        </video>
-        <div class="player-footer">
-            <div>Now Playing: Isreal Toon Live Stream</div>
-            <div class="credit-text">Created by Isreal</div>
-            <select class="quality-selector">
-                <option>Auto Quality</option>
-                <option>720p HD</option>
-                <option>480p</option>
-                <option>360p</option>
-            </select>
-        </div>
-    </div>
-    <div class="channel-list">
-        <button class="channel-btn active">Isreal Toon</button>
-        <button class="channel-btn">Classic Toons</button>
-        <button class="channel-btn">Anime Hits</button>
-        <button class="channel-btn">Kids Zone</button>
-        <button class="channel-btn">Toon HD</button>
-        <button class="channel-btn">Toon +1</button>
     </div>
-    <div class="watermark">
-        Isreal Toon © 2023 | Created by Isreal
-    </div>
     <script>
-        // Simple script for demo purposes
-        document.addEventListener('DOMContentLoaded', function() {
-            const video = document.querySelector('video');
-            const loading = document.querySelector('.loading-animation');
-            const channelBtns = document.querySelectorAll('.channel-btn');
-            // Simulate loading (in a real app, you'd use actual events)
-            setTimeout(() => {
-                loading.style.display = 'none';
-            }, 2000);
-            // Channel switcher demo
-            channelBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    channelBtns.forEach(b => b.classList.remove('active'));
-                    btn.classList.add('active');
-                    // Update player title
-                    document.querySelector('.player-title').textContent = btn.textContent + ' Live';
-                    // In a real app, you would change the video source here
-                });
-            });
-            // Fullscreen button
-            document.querySelector('.control-btn').addEventListener('click', () => {
-                if (video.requestFullscreen) {
-                    video.requestFullscreen();
-                } else if (video.webkitRequestFullscreen) {
-                    video.webkitRequestFullscreen();
-                } else if (video.msRequestFullscreen) {
-                    video.msRequestFullscreen();
-                }
-            });
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Israel Toon</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
     <style>
         :root {
+            --primary: #ff4d4d;
+            --secondary: #00ccff;
+            --dark: #121212;
+            --light: #ffffff;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
+            background: var(--dark);
             color: var(--light);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            overflow: hidden;
+            font-family: 'Montserrat', sans-serif;
         }
+        /* Animated Background */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
         }
+        .bg-circle {
             position: absolute;
             border-radius: 50%;
+            background: rgba(255, 77, 77, 0.1);
+            animation: float 15s infinite linear;
         }
+        @keyframes float {
+            0% {
+                transform: translateY(0) rotate(0deg);
                 opacity: 1;
             }
+            100% {
+                transform: translateY(-1000px) rotate(720deg);
                 opacity: 0;
             }
         }
+        /* Loading Animation */
+        .loading-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--dark);
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
+            z-index: 100;
+            transition: opacity 0.5s ease;
         }
+        .loading-text {
+            font-family: 'Poppins', sans-serif;
+            font-size: 3rem;
+            font-weight: 700;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            margin-bottom: 2rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        .loading-bar {
+            width: 300px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 2px;
+            overflow: hidden;
         }
+        .loading-progress {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            animation: loading 2.5s ease-in-out forwards;
         }
+        @keyframes loading {
+            0% { width: 0%; }
+            100% { width: 100%; }
         }
+        /* Player Styles */
+        .player-container {
+            width: 90%;
+            max-width: 1000px;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.5s ease;
         }
+        video {
+            width: 100%;
+            display: block;
+            outline: none;
         }
+        .player-footer {
+            background: rgba(0, 0, 0, 0.7);
+            padding: 0.8rem 1.5rem;
+            text-align: center;
+            font-size: 0.9rem;
         }
+        .brand-name {
+            font-family: 'Poppins', sans-serif;
+            font-size: 1.8rem;
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.5s ease 0.3s;
         }
     </style>
 </head>
 <body>
+    <!-- Animated Background -->
+    <div class="bg-animation" id="bgAnimation"></div>
+    <!-- Loading Screen -->
+    <div class="loading-container" id="loadingContainer">
+        <div class="loading-text">Israel Toon</div>
+        <div class="loading-bar">
+            <div class="loading-progress"></div>
+        </div>
     </div>
+    <!-- Main Content -->
+    <div class="content" id="content">
+        <h1 class="brand-name">Israel Toon</h1>
+        <div class="player-container" id="playerContainer">
+            <video controls autoplay name="media">
+                <source src="https://fl1.moveonjoy.com/NICKTOONS/index.m3u8" type="application/vnd.apple.mpegurl">
+                Your browser does not support the video tag.
+            </video>
+            <div class="player-footer">
+                Israel Toon Stream | Created by Israel
             </div>
         </div>
     </div>
     <script>
+        // Create animated background circles
+        function createBackground() {
+            const bgAnimation = document.getElementById('bgAnimation');
+            const colors = ['rgba(255, 77, 77, 0.1)', 'rgba(0, 204, 255, 0.1)', 'rgba(255, 255, 255, 0.05)'];
+            for (let i = 0; i < 15; i++) {
+                const circle = document.createElement('div');
+                circle.classList.add('bg-circle');
+                // Random properties
+                const size = Math.random() * 200 + 50;
+                const posX = Math.random() * window.innerWidth;
+                const posY = Math.random() * window.innerHeight + window.innerHeight;
+                const delay = Math.random() * 5;
+                const duration = Math.random() * 10 + 10;
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                circle.style.width = `${size}px`;
+                circle.style.height = `${size}px`;
+                circle.style.left = `${posX}px`;
+                circle.style.top = `${posY}px`;
+                circle.style.animationDelay = `${delay}s`;
+                circle.style.animationDuration = `${duration}s`;
+                circle.style.background = color;
+                bgAnimation.appendChild(circle);
+            }
+        }
+        // Loading animation
+        window.addEventListener('load', function() {
+            createBackground();
+            setTimeout(() => {
+                const loadingContainer = document.getElementById('loadingContainer');
+                const content = document.getElementById('content');
+                const playerContainer = document.getElementById('playerContainer');
+                const brandName = document.querySelector('.brand-name');
+                loadingContainer.style.opacity = '0';
+                setTimeout(() => {
+                    loadingContainer.style.display = 'none';
+                    content.style.display = 'block';
+                    setTimeout(() => {
+                        playerContainer.style.opacity = '1';
+                        playerContainer.style.transform = 'translateY(0)';
+                        brandName.style.opacity = '1';
+                        brandName.style.transform = 'translateY(0)';
+                    }, 100);
+                }, 500);
+            }, 2500);
+        });
+        // Fullscreen on double click
+        const video = document.querySelector('video');
+        video.addEventListener('dblclick', function() {
+            if (video.requestFullscreen) {
+                video.requestFullscreen();
+            } else if (video.webkitRequestFullscreen) {
+                video.webkitRequestFullscreen();
+            } else if (video.msRequestFullscreen) {
+                video.msRequestFullscreen();
+            }
         });
     </script>
 </body>