<title>Goon Games</title> <style> * { margin:0; padding:0; box-sizing:border-box; font-family:'Oxygen', sans-serif; transition: all 0.25s; }

body.light { background: #f0f0f0; color:#000; } body.dark { background: #0d0d0d; color:#fff; }

header { display:flex; justify-content: space-between; align-items: center; padding:10px 20px; background:#d3d3d3; /* light grey for light mode */ color:#000; } body.dark header { background:#000; color:#fff; }

/* Left-most logo before tabs */ #logo { width:70px; height:auto; margin-right:15px; }

/* Top nav */ nav { display:flex; gap:10px; position:relative; align-items:center; } .tab { padding:10px 15px; cursor:pointer; font-weight:700; color:#000; position: relative; z-index:1; } body.dark .tab { color:#fff; } .tab:hover { opacity:0.7; }

/* Animated underline */ .underline { position:absolute; height:3px; background:#ff3333; bottom:0; left:0; transition: all 0.3s ease; border-radius:2px; z-index:0; }

#moonIcon { cursor:pointer; font-size:1.5rem; }

main { padding:20px; display:flex; justify-content:center; align-items:flex-start; height:calc(100vh - 60px); }

/* YouTube input/buttons */ #youtubeSection { width:100%; text-align:center; } #youtubeSection input { width:60%; padding:10px; margin-right:10px; border-radius:5px; border:1px solid #ccc; } body.dark #youtubeSection input { background:#333; color:#fff; border:1px solid #666; } body.light #youtubeSection input { background:#fff; color:#000; border:1px solid #ccc; }

#youtubeSection button { padding:10px 15px; border:none; border-radius:5px; background:#555; color:#fff; cursor:pointer; } body.dark #youtubeSection button { background:#888; color:#000; }

#youtubeSection iframe { width:100%; max-width:800px; height:450px; margin-top:20px; border:none; border-radius:5px; }

/* Games iframe */ #gamesIframe { width:100%; height:100%; border:none; border-radius:5px; }

body.light main { background:#eee; } body.dark main { background:#222; }

</style>

<!-- NAV TABS -->
<nav id="topNav">
  <div class="tab active" onclick="switchTab('youtube', this)">YouTube</div>
  <div class="tab" onclick="switchTab('games', this)">Games</div>
  <div class="underline" id="tabUnderline"></div>
</nav>

🌙

Watch

<script> function toggleDarkMode() { const body = document.body; body.classList.toggle('dark'); body.classList.toggle('light'); document.getElementById('moonIcon').classList.toggle('active'); } function switchTab(tab, element) { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); element.classList.add('active'); const underline = document.getElementById('tabUnderline'); underline.style.width = element.offsetWidth + "px"; underline.style.left = element.offsetLeft + "px"; const main = document.getElementById('mainContent'); if(tab === 'youtube') { main.innerHTML = `

Watch

`; } else if(tab === 'games') { main.innerHTML = `<iframe id="gamesIframe" src="https://1v1-lol-online.github.io/" allowfullscreen></iframe>`; } } window.addEventListener('load', () => { const activeTab = document.querySelector('.tab.active'); const underline = document.getElementById('tabUnderline'); underline.style.width = activeTab.offsetWidth + "px"; underline.style.left = activeTab.offsetLeft + "px"; }); function loadVideo() { const url = document.getElementById("urlInput").value; const videoId = url.match(/(?:youtube\.com.*v=|youtu\.be\/)([^&\n?#]+)/); if(!videoId){ alert("Invalid YouTube URL"); return; } document.getElementById("videoContainer").innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId[1]}" allowfullscreen></iframe>`; } </script>