Spaces:
Running
Running
| <html lang="en"> | |
| <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> | |
| </html> |