| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Streamer Overlay</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap'); |
| |
| :root { |
| --neon-cyan: #0ff0fc; |
| --neon-pink: #ff2ced; |
| --neon-purple: #9600ff; |
| --dark-bg: #0a0a12; |
| } |
| |
| body { |
| font-family: 'Rajdhani', sans-serif; |
| background-color: var(--dark-bg); |
| color: white; |
| overflow: hidden; |
| height: 100vh; |
| width: 100vw; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .screen { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| opacity: 0; |
| transition: opacity 0.5s ease; |
| pointer-events: none; |
| background: radial-gradient(circle at center, rgba(10, 10, 30, 0.7) 0%, rgba(0, 0, 20, 0.9) 100%); |
| } |
| |
| .screen.active { |
| opacity: 1; |
| pointer-events: auto; |
| } |
| |
| .title { |
| font-family: 'Orbitron', sans-serif; |
| font-weight: 700; |
| font-size: 4rem; |
| text-transform: uppercase; |
| letter-spacing: 0.3em; |
| margin-bottom: 2rem; |
| text-shadow: 0 0 10px var(--neon-cyan), |
| 0 0 20px var(--neon-pink), |
| 0 0 30px var(--neon-purple); |
| animation: glow 2s ease-in-out infinite alternate; |
| } |
| |
| .subtitle { |
| font-size: 1.5rem; |
| max-width: 600px; |
| text-align: center; |
| line-height: 1.6; |
| margin-bottom: 3rem; |
| color: rgba(255, 255, 255, 0.8); |
| } |
| |
| .card { |
| background: rgba(20, 20, 40, 0.4); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 1rem; |
| padding: 2rem 3rem; |
| box-shadow: 0 0 30px rgba(15, 240, 252, 0.2), |
| inset 0 0 20px rgba(255, 44, 237, 0.1); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .card::before { |
| content: ''; |
| position: absolute; |
| top: -2px; |
| left: -2px; |
| right: -2px; |
| bottom: -2px; |
| background: linear-gradient(45deg, var(--neon-cyan), var(--neon-pink), var(--neon-purple)); |
| z-index: -1; |
| border-radius: 1rem; |
| opacity: 0.3; |
| } |
| |
| .controls { |
| position: fixed; |
| bottom: 2rem; |
| left: 50%; |
| transform: translateX(-50%); |
| display: flex; |
| gap: 1rem; |
| z-index: 100; |
| } |
| |
| .control-btn { |
| background: rgba(20, 20, 40, 0.6); |
| border: 1px solid var(--neon-cyan); |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| cursor: pointer; |
| font-family: 'Orbitron', sans-serif; |
| font-weight: 500; |
| letter-spacing: 0.1em; |
| transition: all 0.3s ease; |
| box-shadow: 0 0 15px rgba(15, 240, 252, 0.3); |
| } |
| |
| .control-btn:hover { |
| background: rgba(15, 240, 252, 0.2); |
| box-shadow: 0 0 20px rgba(15, 240, 252, 0.5); |
| transform: translateY(-2px); |
| } |
| |
| .control-btn.active { |
| background: var(--neon-cyan); |
| color: var(--dark-bg); |
| font-weight: 700; |
| } |
| |
| .clock { |
| position: fixed; |
| top: 2rem; |
| right: 2rem; |
| font-family: 'Orbitron', sans-serif; |
| font-size: 1.2rem; |
| color: var(--neon-cyan); |
| text-shadow: 0 0 10px rgba(15, 240, 252, 0.7); |
| z-index: 100; |
| } |
| |
| |
| .bg-effect { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.1; |
| } |
| |
| .scanlines { |
| background: linear-gradient( |
| to bottom, |
| transparent 95%, |
| rgba(255, 255, 255, 0.05) 96% |
| ); |
| background-size: 100% 4px; |
| animation: scanline 8s linear infinite; |
| } |
| |
| .noise { |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"); |
| animation: noise 0.2s infinite; |
| } |
| |
| .particles { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .particle { |
| position: absolute; |
| width: 2px; |
| height: 2px; |
| background-color: var(--neon-cyan); |
| border-radius: 50%; |
| opacity: 0.5; |
| animation: float 15s infinite linear; |
| } |
| |
| |
| @keyframes glow { |
| from { |
| text-shadow: 0 0 10px var(--neon-cyan), |
| 0 0 20px var(--neon-pink), |
| 0 0 30px var(--neon-purple); |
| } |
| to { |
| text-shadow: 0 0 15px var(--neon-cyan), |
| 0 0 25px var(--neon-pink), |
| 0 0 35px var(--neon-purple); |
| } |
| } |
| |
| @keyframes scanline { |
| 0% { |
| background-position: 0 0; |
| } |
| 100% { |
| background-position: 0 100%; |
| } |
| } |
| |
| @keyframes noise { |
| 0% { |
| background-position: 0 0; |
| } |
| 100% { |
| background-position: 100% 100%; |
| } |
| } |
| |
| @keyframes float { |
| 0% { |
| transform: translateY(0) translateX(0); |
| opacity: 0; |
| } |
| 10% { |
| opacity: 0.5; |
| } |
| 90% { |
| opacity: 0.5; |
| } |
| 100% { |
| transform: translateY(-100vh) translateX(20vw); |
| opacity: 0; |
| } |
| } |
| |
| |
| .glitch { |
| position: relative; |
| } |
| |
| .glitch::before, .glitch::after { |
| content: attr(data-text); |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| opacity: 0.8; |
| } |
| |
| .glitch::before { |
| color: var(--neon-pink); |
| animation: glitch-effect 3s infinite; |
| clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); |
| transform: translate(-2px, -2px); |
| } |
| |
| .glitch::after { |
| color: var(--neon-cyan); |
| animation: glitch-effect 2s infinite reverse; |
| clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); |
| transform: translate(2px, 2px); |
| } |
| |
| @keyframes glitch-effect { |
| 0% { |
| transform: translate(0); |
| } |
| 20% { |
| transform: translate(-3px, 3px); |
| } |
| 40% { |
| transform: translate(-3px, -3px); |
| } |
| 60% { |
| transform: translate(3px, 3px); |
| } |
| 80% { |
| transform: translate(3px, -3px); |
| } |
| 100% { |
| transform: translate(0); |
| } |
| } |
| |
| |
| @media (max-width: 768px) { |
| .title { |
| font-size: 2.5rem; |
| letter-spacing: 0.2em; |
| } |
| |
| .subtitle { |
| font-size: 1.2rem; |
| max-width: 90%; |
| } |
| |
| .card { |
| padding: 1.5rem; |
| width: 90%; |
| } |
| |
| .controls { |
| flex-direction: column; |
| bottom: 1rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="bg-effect scanlines"></div> |
| <div class="bg-effect noise"></div> |
| <div class="particles" id="particles"></div> |
| |
| |
| <div class="clock" id="clock">00:00:00</div> |
| |
| |
| <div class="screen active" id="starting-soon"> |
| <div class="card"> |
| <h1 class="title glitch" data-text="STREAM STARTING SOON">STREAM STARTING SOON</h1> |
| <p class="subtitle">The stream will begin shortly. Grab some snacks, get comfortable, and prepare for an awesome time!</p> |
| </div> |
| </div> |
| |
| <div class="screen" id="be-right-back"> |
| <div class="card"> |
| <h1 class="title glitch" data-text="BE RIGHT BACK">BE RIGHT BACK</h1> |
| <p class="subtitle">Taking a quick break! The stream will resume in a few minutes. Stay tuned!</p> |
| </div> |
| </div> |
| |
| <div class="screen" id="stream-ended"> |
| <div class="card"> |
| <h1 class="title glitch" data-text="STREAM ENDED">STREAM ENDED</h1> |
| <p class="subtitle">Thanks for watching! Follow to get notified when we go live next time. See you soon!</p> |
| </div> |
| </div> |
| |
| |
| <div class="controls"> |
| <button class="control-btn active" data-screen="starting-soon">1. Starting Soon</button> |
| <button class="control-btn" data-screen="be-right-back">2. Be Right Back</button> |
| <button class="control-btn" data-screen="stream-ended">3. Stream Ended</button> |
| </div> |
| |
| <script> |
| |
| const screens = document.querySelectorAll('.screen'); |
| const controlBtns = document.querySelectorAll('.control-btn'); |
| |
| function switchScreen(screenId) { |
| screens.forEach(screen => { |
| screen.classList.remove('active'); |
| if (screen.id === screenId) { |
| screen.classList.add('active'); |
| } |
| }); |
| |
| controlBtns.forEach(btn => { |
| btn.classList.remove('active'); |
| if (btn.dataset.screen === screenId) { |
| btn.classList.add('active'); |
| } |
| }); |
| } |
| |
| controlBtns.forEach(btn => { |
| btn.addEventListener('click', () => { |
| switchScreen(btn.dataset.screen); |
| }); |
| }); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === '1') switchScreen('starting-soon'); |
| if (e.key === '2') switchScreen('be-right-back'); |
| if (e.key === '3') switchScreen('stream-ended'); |
| }); |
| |
| |
| function updateClock() { |
| const now = new Date(); |
| const hours = now.getHours().toString().padStart(2, '0'); |
| const minutes = now.getMinutes().toString().padStart(2, '0'); |
| const seconds = now.getSeconds().toString().padStart(2, '0'); |
| document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`; |
| } |
| |
| setInterval(updateClock, 1000); |
| updateClock(); |
| |
| |
| function createParticles() { |
| const particlesContainer = document.getElementById('particles'); |
| const particleCount = 50; |
| |
| for (let i = 0; i < particleCount; i++) { |
| const particle = document.createElement('div'); |
| particle.classList.add('particle'); |
| |
| |
| const posX = Math.random() * 100; |
| const posY = Math.random() * 100; |
| |
| |
| const size = Math.random() * 3 + 1; |
| |
| |
| const duration = Math.random() * 20 + 10; |
| |
| |
| const delay = Math.random() * 10; |
| |
| particle.style.left = `${posX}vw`; |
| particle.style.top = `${posY}vh`; |
| particle.style.width = `${size}px`; |
| particle.style.height = `${size}px`; |
| particle.style.animationDuration = `${duration}s`; |
| particle.style.animationDelay = `-${delay}s`; |
| |
| |
| const colors = ['var(--neon-cyan)', 'var(--neon-pink)', 'var(--neon-purple)']; |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; |
| particle.style.backgroundColor = randomColor; |
| |
| particlesContainer.appendChild(particle); |
| } |
| } |
| |
| createParticles(); |
| </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=sh20raj/stream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
