Fake TV Show Generator

Okay, I can set up a silly fake TV show generator with random hosts and retro effects. Fake TV Show Generator

Loading Channel...

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; margin: 0; font-family: 'Courier New', Courier, monospace; overflow: hidden; /* Hide scrollbars if tv is slightly larger */ } .tv-container { width: 800px; height: 800px; /* Adjusted for square ratio */ background-color: #5a4a42; /* Dark wood color */ border-radius: 50px / 60px; /* Elliptical corners */ padding: 30px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; position: relative; } .tv-screen { width: 100%; height: 100%; background-color: #111; border-radius: 25px / 30px; /* Inner screen curve */ overflow: hidden; position: relative; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; /* Indicate clickable */ } /* CRT Scanlines Effect */ .crt-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50% ), linear-gradient( 90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06) ); background-size: 100% 4px, 3px 100%; z-index: 2; pointer-events: none; /* Allow clicks through */ animation: crt-flicker 0.15s infinite; opacity: 0.6; } @keyframes crt-flicker { 0% { opacity: 0.55; } 50% { opacity: 0.65; } 100% { opacity: 0.55; } } /* Channel Static Effect */ .channel-static { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,'); background-size: 150px 150px; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 0.1s ease-out, visibility 0.1s ease-out; pointer-events: none; animation: static-move 0.1s linear infinite; } @keyframes static-move { 0% { background-position: 0 0; } 100% { background-position: 10px 20px; } } .tv-screen.switching .channel-static { opacity: 1; visibility: visible; transition: opacity 0.05s ease-in, visibility 0.05s ease-in; } .content { position: relative; z-index: 1; text-align: center; color: #e0e0e0; padding: 20px; opacity: 1; transition: opacity 0.2s ease-in-out; max-width: 90%; } .tv-screen.switching .content { opacity: 0; } #hostPhoto { max-width: 60%; height: auto; border-radius: 10px; border: 3px solid #444; margin-bottom: 20px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); background-color: #333; /* Placeholder bg */ min-height: 200px; /* Prevent collapse before loading */ } #showTitle { font-size: 2.5em; /* Larger title */ text-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(0, 255, 255, 0.5); margin: 0; line-height: 1.2; word-wrap: break-word; } /* Button Styling */ #changeChannelBtn { position: absolute; bottom: 20px; right: 30px; background-color: #333; color: #ccc; border: 2px solid #555; border-radius: 8px; padding: 10px 15px; font-size: 1.5em; cursor: pointer; transition: background-color 0.2s, transform 0.1s; z-index: 4; /* Above static */ box-shadow: 2px 2px 5px rgba(0,0,0,0.5); } #changeChannelBtn:hover { background-color: #444; } #changeChannelBtn:active { background-color: #222; transform: scale(0.95); } /* Simple roll animation */ @keyframes channel-roll { 0% { transform: translateY(0); } 20% { transform: translateY(-100%); opacity: 0; } 21% { transform: translateY(100%); opacity: 0; } 40% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .tv-screen.switching .content { /* Apply roll effect - optional, can be combined with static */ /* animation: channel-roll 0.4s ease-in-out; */ } const tvScreen = document.getElementById('tvScreen'); const hostPhoto = document.getElementById('hostPhoto'); const showTitle = document.getElementById('showTitle'); const changeChannelBtn = document.getElementById('changeChannelBtn'); const content = document.getElementById('content'); const API_URL = 'https://randomuser.me/api/?inc=name,picture'; const showConcepts = [ "Cooking with", "Ghosts & Gossip with", "Underwater Basket Weaving with", "Extreme Knitting with", "Alien Autopsies with", "Competitive Cloud Watching with", "Existential Thoughts with", "Advanced Pogo Sticking with", "Singing Vegetables with", "Time Travel Tips with", "DIY Black Holes with", "Polka Power Hour with" ]; async function fetchNewShow() { // Start switching effect tvScreen.classList.add('switching'); // Optional: Hide content immediately for a snappier feel before static // content.style.opacity = 0; try { const response = await fetch(API_URL); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); const user = data.results[0]; const firstName = user.name.first; const pictureUrl = user.picture.large; // Preload image before showing const img = new Image(); img.onload = () => { hostPhoto.src = pictureUrl; hostPhoto.alt = `Host: ${firstName}`; const randomConcept = showConcepts[Math.floor(Math.random() * showConcepts.length)]; showTitle.textContent = `${randomConcept} ${firstName}`; // End switching effect after a short delay for the static setTimeout(() => { tvScreen.classList.remove('switching'); // Ensure content is visible again if hidden earlier // content.style.opacity = 1; }, 200); // Adjust delay to match static effect duration }; img.onerror = () => { console.error("Failed to load image"); showTitle.textContent = "Signal Lost..."; hostPhoto.src = ""; // Clear previous image hostPhoto.alt = "Error loading image"; tvScreen.classList.remove('switching'); }; img.src = pictureUrl; // Start loading the image } catch (error) { console.error("Error fetching new show:", error); showTitle.textContent = "Technical Difficulties!"; hostPhoto.src = ""; // Clear image on error hostPhoto.alt = "Error fetching data"; // Ensure switching effect stops even on error setTimeout(() => { tvScreen.classList.remove('switching'); }, 200); } } // Event listener for the button changeChannelBtn.addEventListener('click', fetchNewShow); // Also allow clicking the screen itself to change channel tvScreen.addEventListener('click', (event) => { // Prevent triggering if the button itself was clicked if (event.target !== changeChannelBtn) { fetchNewShow(); } }); // Initial load document.addEventListener('DOMContentLoaded', fetchNewShow); This sets up the HTML structure, CSS for the retro TV look and effects, and JavaScript to fetch data from the Random User API, generate a show title, and handle the channel switching animation. Click the button or the screen to change the channel.