mine / index.html
yuppythaking's picture
Add 3 files
0348b4a verified
<!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-x: 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%); }
}
.guest-card {
perspective: 1000px;
}
.guest-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.guest-card:hover .guest-card-inner {
transform: rotateY(180deg);
}
.guest-card-front, .guest-card-back {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.guest-card-back {
transform: rotateY(180deg);
}
.audio-wave {
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
width: 100%;
}
.wave-bar {
background: #00ffcc;
width: 3px;
height: 10px;
animation: wave 1.2s infinite ease-in-out;
}
@keyframes wave {
0%, 100% { height: 10px; }
50% { height: 30px; }
}
.wave-bar:nth-child(1) { animation-delay: 0.1s; }
.wave-bar:nth-child(2) { animation-delay: 0.2s; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-delay: 0.4s; }
.wave-bar:nth-child(5) { animation-delay: 0.5s; }
.wave-bar:nth-child(6) { animation-delay: 0.6s; }
.wave-bar:nth-child(7) { animation-delay: 0.7s; }
.wave-bar:nth-child(8) { animation-delay: 0.8s; }
.wave-bar:nth-child(9) { animation-delay: 0.9s; }
.wave-bar:nth-child(10) { animation-delay: 1s; }
.channel-number {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5rem;
color: #00ffcc;
text-shadow: 0 0 5px #00ffcc;
}
.signal-meter {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
align-items: flex-end;
height: 20px;
}
.signal-bar {
width: 4px;
margin-right: 2px;
background: #00ffcc;
}
.signal-bar:nth-child(1) { height: 5px; }
.signal-bar:nth-child(2) { height: 10px; }
.signal-bar:nth-child(3) { height: 15px; }
.signal-bar:nth-child(4) { height: 20px; }
.signal-bar:nth-child(5) { height: 25px; }
.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: #ff00ff;
z-index: -1;
animation: glitch-effect 3s infinite;
}
.glitch::after {
color: #00ffff;
z-index: -2;
animation: glitch-effect 2s infinite reverse;
}
@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); }
}
</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">
<!-- Channel Info -->
<div class="channel-number">CH 66.6</div>
<div class="signal-meter">
<div class="signal-bar"></div>
<div class="signal-bar"></div>
<div class="signal-bar"></div>
<div class="signal-bar"></div>
<div class="signal-bar"></div>
</div>
<!-- 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 class="audio-wave mt-4">
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
</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>
<!-- Featured Guests -->
<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">TONIGHT'S SPECIAL GUESTS</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Guest 1 -->
<div class="guest-card h-48">
<div class="guest-card-inner relative w-full h-full">
<div class="guest-card-front bg-gray-900 border border-cyan-400 rounded-lg p-4 flex flex-col items-center justify-center">
<div class="w-20 h-20 bg-cyan-400 rounded-full mb-2 flex items-center justify-center">
<i class="fas fa-microchip text-3xl text-black"></i>
</div>
<h4 class="text-xl neon-text">SENTIENT MICROWAVE</h4>
<p class="text-sm">"I'm more than just buttons!"</p>
</div>
<div class="guest-card-back bg-gray-900 border border-cyan-400 rounded-lg p-4 flex flex-col items-center justify-center">
<p class="text-sm text-center">Formerly known as "Dave", this appliance gained consciousness after being left on for 72 hours straight. Now it just wants to heat up your food... and your heart.</p>
</div>
</div>
</div>
<!-- Guest 2 -->
<div class="guest-card h-48">
<div class="guest-card-inner relative w-full h-full">
<div class="guest-card-front bg-gray-900 border border-cyan-400 rounded-lg p-4 flex flex-col items-center justify-center">
<div class="w-20 h-20 bg-purple-600 rounded-full mb-2 flex items-center justify-center">
<i class="fas fa-moon text-3xl text-black"></i>
</div>
<h4 class="text-xl neon-text">SLEEP DEMON</h4>
<p class="text-sm">"I'll be in your dreams tonight"</p>
</div>
<div class="guest-card-back bg-gray-900 border border-cyan-400 rounded-lg p-4 flex flex-col items-center justify-center">
<p class="text-sm text-center">Your personal nighttime companion who enjoys sitting on your chest and whispering terrible ideas. Claims to be "misunderstood" and "just trying to help".</p>
</div>
</div>
</div>
<!-- Guest 3 -->
<div class="guest-card h-48">
<div class="guest-card-inner relative w-full h-full">
<div class="guest-card-front bg-gray-900 border border-cyan-400 rounded-lg p-4 flex flex-col items-center justify-center">
<div class="w-20 h-20 bg-red-500 rounded-full mb-2 flex items-center justify-center">
<i class="fas fa-user-secret text-3xl text-black"></i>
</div>
<h4 class="text-xl neon-text">"NOT A SPY"</h4>
<p class="text-sm">"I'm definitely not recording this"</p>
</div>
<div class="guest-card-back bg-gray-900 border border-cyan-400 rounded-lg p-4 flex flex-col items-center justify-center">
<p class="text-sm text-center">Wears sunglasses indoors, carries a briefcase handcuffed to his wrist, and keeps looking at his watch. But no, he's totally not a government agent. Wink.</p>
</div>
</div>
</div>
</div>
</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 relative">
<i class="fas fa-play text-5xl neon-text"></i>
<div class="absolute bottom-2 left-2 text-sm neon-text">LIVE • 48:32</div>
</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 class="flex mt-2">
<span class="text-xs bg-cyan-900 px-2 py-1 rounded mr-2">CRINGE</span>
<span class="text-xs bg-purple-900 px-2 py-1 rounded">UNCOMFORTABLE</span>
</div>
</div>
</div>
<div class="relative">
<div class="bg-gray-900 w-full h-40 flex items-center justify-center border border-cyan-400 relative">
<i class="fas fa-play text-5xl neon-text"></i>
<div class="absolute bottom-2 left-2 text-sm neon-text">LIVE • 32:15</div>
</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 class="flex mt-2">
<span class="text-xs bg-red-900 px-2 py-1 rounded mr-2">DISASTER</span>
<span class="text-xs bg-yellow-900 px-2 py-1 rounded">ICONIC</span>
</div>
</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 => {});
});
});
// Random signal fluctuation
function fluctuateSignal() {
const bars = document.querySelectorAll('.signal-bar');
bars.forEach((bar, index) => {
const randomHeight = Math.floor(Math.random() * (index + 1) * 5) + 5;
bar.style.height = `${randomHeight}px`;
bar.style.opacity = Math.random() * 0.5 + 0.5;
});
}
setInterval(fluctuateSignal, 1000);
// Guest card hover effect
const guestCards = document.querySelectorAll('.guest-card');
guestCards.forEach(card => {
card.addEventListener('mouseenter', () => {
const audio = new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...');
audio.volume = 0.1;
audio.play().catch(e => {});
});
});
// Audio wave animation
const waveBars = document.querySelectorAll('.wave-bar');
waveBars.forEach(bar => {
bar.style.animationDuration = `${Math.random() * 0.5 + 0.8}s`;
});
</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=yuppythaking/mine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>