Spaces:
Running
Running
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Late Night Show with Jumpman</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> @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); body { font-family: 'VT323', monospace; background-color: #0a0a12; color: #00ffcc; overflow: hidden; position: relative; } .crt { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px ); pointer-events: none; z-index: 9999; mix-blend-mode: overlay; } .crt::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%); background-size: 100% 4px; pointer-events: none; } .crt::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 255, 204, 0.02); animation: flicker 0.15s infinite; pointer-events: none; } @keyframes flicker { 0% { opacity: 0.1; } 20% { opacity: 0.2; } 40% { opacity: 0.1; } 60% { opacity: 0.25; } 80% { opacity: 0.15; } 100% { opacity: 0.1; } } .static { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.15"/></svg>'); opacity: 0.3; z-index: -1; } .neon-text { text-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc, 0 0 20px #00ffcc; animation: neon-pulse 2s infinite alternate; } @keyframes neon-pulse { from { text-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc, 0 0 20px #00ffcc; } to { text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 30px #00ffcc, 0 0 40px #00ffcc; } } .neon-box { box-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc, 0 0 20px #00ffcc; animation: neon-box-pulse 3s infinite alternate; } @keyframes neon-box-pulse { from { box-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc, 0 0 20px #00ffcc; } to { box-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 30px #00ffcc; } } .glow-button { transition: all 0.3s ease; } .glow-button:hover { box-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc; transform: scale(1.05); } .scanline { position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: rgba(0, 255, 204, 0.3); animation: scan 8s linear infinite; z-index: 9998; } @keyframes scan { 0% { top: 0; } 100% { top: 100%; } } .vhs-distortion { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,255,204,0.1) 50%, rgba(0,0,0,0) 100%); animation: vhs-distort 3s infinite; opacity: 0.3; z-index: -1; } @keyframes vhs-distort { 0% { transform: translateY(-5px); } 50% { transform: translateY(5px); } 100% { transform: translateY(-5px); } } .marquee { animation: marquee 15s linear infinite; white-space: nowrap; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } </style> </head> <body class="min-h-screen flex flex-col items-center justify-center p-4"> <!-- CRT Effects --> <div class="static"></div> <div class="crt"></div> <div class="scanline"></div> <div class="vhs-distortion"></div> <!-- Main Content --> <div class="relative z-10 w-full max-w-4xl mx-auto"> <!-- Header --> <div class="text-center mb-8"> <h1 class="text-6xl md:text-8xl font-bold neon-text mb-2" style="font-family: 'Press Start 2P', cursive;">LATE NIGHT SHOW</h1> <h2 class="text-4xl md:text-6xl font-bold neon-text" style="font-family: 'Press Start 2P', cursive;">WITH JUMPMAN</h2> <div class="mt-4 text-xl neon-text"> <p>EVERY WEEKEND NIGHT • 11:30PM • YOUR BRAIN</p> </div> </div> <!-- Countdown Timer --> <div class="bg-black bg-opacity-70 border-2 border-cyan-400 rounded-lg p-4 mb-8 neon-box text-center"> <h3 class="text-2xl mb-2 neon-text">NEXT EPISODE IN:</h3> <div id="countdown" class="text-3xl neon-text">LOADING...</div> </div> <!-- Show Description --> <div class="bg-black bg-opacity-70 border-2 border-cyan-400 rounded-lg p-6 mb-8 neon-box"> <p class="text-xl mb-4"> "Late Night Show with Jumpman" is the only talk show that airs exclusively in your mind's eye. Featuring interviews with people who don't exist, jokes that don't land, and a host who definitely didn't graduate from any accredited institution. </p> <p class="text-xl"> This week's guests: A sentient microwave, your sleep paralysis demon, and a guy who swears he's not a government plant (he totally is). </p> </div> <!-- Button Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8"> <a href="#" class="bg-black border-2 border-cyan-400 rounded-lg p-4 text-center glow-button hover:bg-cyan-900 hover:bg-opacity-30 transition-all"> <i class="fas fa-tv text-3xl mb-2 neon-text"></i> <h3 class="text-xl neon-text">WATCH LIVE</h3> <p class="text-sm">(When we remember to turn on the camera)</p> </a> <a href="#" class="bg-black border-2 border-cyan-400 rounded-lg p-4 text-center glow-button hover:bg-cyan-900 hover:bg-opacity-30 transition-all"> <i class="fas fa-video text-3xl mb-2 neon-text"></i> <h3 class="text-xl neon-text">PAST EPISODES</h3> <p class="text-sm">(Mostly just bloopers)</p> </a> <a href="#" class="bg-black border-2 border-cyan-400 rounded-lg p-4 text-center glow-button hover:bg-cyan-900 hover:bg-opacity-30 transition-all"> <i class="fas fa-ticket-alt text-3xl mb-2 neon-text"></i> <h3 class="text-xl neon-text">GET TICKETS</h3> <p class="text-sm">(Venue: Your living room)</p> </a> <a href="#" class="bg-black border-2 border-cyan-400 rounded-lg p-4 text-center glow-button hover:bg-cyan-900 hover:bg-opacity-30 transition-all"> <i class="fas fa-tshirt text-3xl mb-2 neon-text"></i> <h3 class="text-xl neon-text">MERCH</h3> <p class="text-sm">(T-shirts that say "I watched and I regret")</p> </a> <a href="#" class="bg-black border-2 border-cyan-400 rounded-lg p-4 text-center glow-button hover:bg-cyan-900 hover:bg-opacity-30 transition-all"> <i class="fas fa-envelope text-3xl mb-2 neon-text"></i> <h3 class="text-xl neon-text">CONTACT</h3> <p class="text-sm">(We don't check this)</p> </a> <a href="#" class="bg-black border-2 border-cyan-400 rounded-lg p-4 text-center glow-button hover:bg-cyan-900 hover:bg-opacity-30 transition-all"> <i class="fas fa-question text-3xl mb-2 neon-text"></i> <h3 class="text-xl neon-text">FAQ</h3> <p class="text-sm">(No, we don't know either)</p> </a> </div> <!-- Featured Videos --> <div class="bg-black bg-opacity-70 border-2 border-cyan-400 rounded-lg p-6 neon-box mb-8"> <h3 class="text-3xl neon-text mb-4 text-center">HIGHLIGHTS THAT WEREN'T</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="relative"> <div class="bg-gray-900 w-full h-40 flex items-center justify-center border border-cyan-400"> <i class="fas fa-play text-5xl neon-text"></i> </div> <div class="mt-2"> <h4 class="text-xl neon-text">"The Time We Forgot the Guest"</h4> <p class="text-sm">48 minutes of awkward silence</p> </div> </div> <div class="relative"> <div class="bg-gray-900 w-full h-40 flex items-center justify-center border border-cyan-400"> <i class="fas fa-play text-5xl neon-text"></i> </div> <div class="mt-2"> <h4 class="text-xl neon-text">"Technical Difficulties: The Musical"</h4> <p class="text-sm">Our finest hour</p> </div> </div> </div> </div> <!-- Marquee --> <div class="bg-black bg-opacity-70 border-t-2 border-b-2 border-cyan-400 overflow-hidden py-2 neon-box"> <div class="marquee text-xl neon-text"> • NEW EPISODE THIS SATURDAY • BRING YOUR OWN LAUGHS • WE CAN'T AFFORD A LAUGH TRACK • WARNING: MAY CONTAIN TRACES OF COMEDY • NOT APPROVED BY ANY GOVERNMENT • </div> </div> </div> <!-- Footer --> <div class="mt-8 text-center text-sm neon-text"> <p>"Late Night Show with Jumpman" is a registered trademark of Absolutely Nothing Productions.</p> <p>All rights reserved. No refunds.</p> </div> <script> // Countdown timer function updateCountdown() { const now = new Date(); let nextShow = new Date(); // Set to next Saturday at 11:30 PM nextShow.setDate(now.getDate() + (6 - now.getDay() + 7) % 7); nextShow.setHours(23, 30, 0, 0); // If it's already past this week's show, set to next week if (now > nextShow) { nextShow.setDate(nextShow.getDate() + 7); } const diff = nextShow - now; const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((diff % (1000 * 60)) / 1000); document.getElementById('countdown').innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`; } setInterval(updateCountdown, 1000); updateCountdown(); // Random glitch effect function randomGlitch() { const elements = document.querySelectorAll('.neon-text, .neon-box'); const randomElement = elements[Math.floor(Math.random() * elements.length)]; randomElement.style.animation = 'none'; randomElement.offsetHeight; // Trigger reflow randomElement.style.animation = null; setTimeout(() => { randomElement.style.textShadow = '0 0 5px #ff00ff, 0 0 10px #ff00ff'; setTimeout(() => { randomElement.style.textShadow = ''; }, 100); }, Math.random() * 300); } setInterval(randomGlitch, 3000); // Button hover effects const buttons = document.querySelectorAll('.glow-button'); buttons.forEach(button => { button.addEventListener('mouseenter', () => { const audio = new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...'); audio.volume = 0.2; audio.play().catch(e => {}); }); }); </script> </body> </html> |