I'll help you create a web application that combines all these features - unblocked games, YouTube viewer, and weather dashboard. Here's the comprehensive solution: Unblocked Games Hub

🎮 Unblocked Games Hub

🎮 Popular Games

📺 YouTube Viewer

☁️ Live Weather

⚙️ Settings

about:blank Mode Auto Stay Open Weather Background Music

:root { --primary-color: #4285f4; --secondary-color: #34a853; --accent-color: #ea4335; --text-color: #333; --bg-color: #f5f5f5; --card-bg: #fff; } [data-theme="dark"] { --primary-color: #8ab4f8; --secondary-color: #81c995; --accent-color: #f28b82; --text-color: #e8eaed; --bg-color: #202124; --card-bg: #303134; } [data-theme="rainy"] { --primary-color: #5f97f3; --secondary-color: #5f97f3; --accent-color: #5f97f3; --text-color: #e8eaed; --bg-color: #4a6274; --card-bg: #5f7a8a; } [data-theme="snowy"] { --primary-color: #ffffff; --secondary-color: #e0f7fa; --accent-color: #b2ebf2; --text-color: #263238; --bg-color: #e1f5fe; --card-bg: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 20px; } .tabs { display: flex; justify-content: center; margin: 20px 0; gap: 10px; } .tab-btn { padding: 10px 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .tab-btn:hover { background-color: var(--secondary-color); } .tab-btn.active { background-color: var(--accent-color); } .tab-content { display: none; } .tab-content.active { display: block; } .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } .game-card { background-color: var(--card-bg); border-radius: 10px; padding: 15px; text-align: center; cursor: pointer; transition: transform 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .game-card:hover { transform: translateY(-5px); } .youtube-controls { display: flex; gap: 10px; margin: 20px 0; } .youtube-controls input { flex: 1; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } .youtube-controls button { padding: 10px 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; } #youtube-player { margin-top: 20px; aspect-ratio: 16/9; background-color: #000; } .weather-controls { display: flex; gap: 10px; margin: 20px 0; } .weather-controls input { flex: 1; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } .weather-controls button { padding: 10px 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; } .weather-display { display: flex; gap: 20px; } #current-weather { flex: 1; background-color: var(--card-bg); padding: 20px; border-radius: 10px; } #weather-forecast { flex: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .forecast-card { background-color: var(--card-bg); padding: 15px; border-radius: 8px; text-align: center; } .settings-options { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; } .settings-options label { display: flex; align-items: center; gap: 10px; } .settings-options select { padding: 10px; border-radius: 5px; border: 1px solid #ccc; } #reset-btn { padding: 10px 20px; background-color: var(--accent-color); color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; } // Game data const games = [ { name: "Super Smash Flash 2", url: "https://www.smashflash.com/play/super-smash-flash-2/" }, { name: "Happy Wheels", url: "https://www.totaljerkface.com/happy_wheels.tjf" }, { name: "Tetris®", url: "https://tetris.com/play-tetris" }, { name: "Basketball Legends", url: "https://www.crazygames.com/game/basketball-legends" }, { name: "Slope Run Game", url: "https://www.sloperun.org/" }, { name: "Run 3", url: "https://www.coolmathgames.com/0-run-3" }, { name: "Slither.io", url: "https://slither.io/" }, { name: "Gunspin", url: "https://www.crazygames.com/game/gunspin" }, { name: "Snow Rider", url: "https://snowrider.io/" }, { name: "Granny", url: "https://granny.io/" }, { name: "Zombie Mission", url: "https://www.crazygames.com/game/zombie-mission" }, { name: "Diggy", url: "https://www.crazygames.com/game/diggy" }, { name: "Hanger", url: "https://www.crazygames.com/game/hanger" }, { name: "Overkill Apache", url: "https://www.crazygames.com/game/overkill-apache" }, { name: "Drift Simulator", url: "https://www.crazygames.com/game/drift-simulator" }, { name: "Dune Buggy", url: "https://www.crazygames.com/game/dune-buggy" }, { name: "1vs1 Basketball", url: "https://www.crazygames.com/game/1v1-basketball" }, { name: "Fast Runner", url: "https://www.crazygames.com/game/fast-runner" }, { name: "The Enchanted", url: "https://www.crazygames.com/game/the-enchanted" }, { name: "Spiderman City Raid", url: "https://www.crazygames.com/game/spiderman-city-raid" } ]; // DOM elements const gamesGrid = document.getElementById('games-grid'); const tabContents = document.querySelectorAll('.tab-content'); const tabButtons = document.querySelectorAll('.tab-btn'); const youtubeUrlInput = document.getElementById('youtube-url'); const watchBtn = document.getElementById('watch-btn'); const watchBlankBtn = document.getElementById('watch-blank-btn'); const youtubePlayer = document.getElementById('youtube-player'); const locationInput = document.getElementById('location-input'); const getWeatherBtn = document.getElementById('get-weather-btn'); const currentWeather = document.getElementById('current-weather'); const weatherForecast = document.getElementById('weather-forecast'); const blankModeCheckbox = document.getElementById('blank-mode'); const stayOpenCheckbox = document.getElementById('stay-open'); const weatherMusicCheckbox = document.getElementById('weather-music'); const themeSelector = document.getElementById('theme-selector'); const resetBtn = document.getElementById('reset-btn'); // Tab switching tabButtons.forEach(button => { button.addEventListener('click', () => { const tabId = button.getAttribute('data-tab'); tabButtons.forEach(btn => btn.classList.remove('active')); tabContents.forEach(content => content.classList.remove('active')); button.classList.add('active'); document.getElementById(tabId).classList.add('active'); }); }); // Initialize games function initGames() { games.forEach(game => { const gameCard = document.createElement('div'); gameCard.className = 'game-card'; gameCard.innerHTML = `

${game.name}

Click to play

`; gameCard.addEventListener('click', () => { if (blankModeCheckbox.checked) { const blankWindow = window.open('about:blank'); const iframe = blankWindow.document.createElement('iframe'); iframe.src = game.url; iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none'; blankWindow.document.body.appendChild(iframe); if (stayOpenCheckbox.checked) { blankWindow.addEventListener('beforeunload', (e) => { e.preventDefault(); e.returnValue = ''; return ''; }); } } else { window.open(game.url, '_blank'); } }); gamesGrid.appendChild(gameCard); }); } // YouTube functionality watchBtn.addEventListener('click', () => { const videoUrl = youtubeUrlInput.value.trim(); if (videoUrl) { const videoId = extractVideoId(videoUrl); if (videoId) { youtubePlayer.innerHTML = ` `; localStorage.setItem('lastYoutubeUrl', videoUrl); } } }); watchBlankBtn.addEventListener('click', () => { const videoUrl = youtubeUrlInput.value.trim(); if (videoUrl) { const videoId = extractVideoId(videoUrl); if (videoId) { const blankWindow = window.open('about:blank'); const iframe = blankWindow.document.createElement('iframe'); iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none'; blankWindow.document.body.appendChild(iframe); localStorage.setItem('lastYoutubeUrl', videoUrl); if (stayOpenCheckbox.checked) { blankWindow.addEventListener('beforeunload', (e) => { e.preventDefault(); e.returnValue = ''; return ''; }); } } } }); function extractVideoId(url) { const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/; const match = url.match(regExp); return (match && match[2].length === 11) ? match[2] : null; } // Weather functionality getWeatherBtn.addEventListener('click', () => { const location = locationInput.value.trim(); if (location) { getWeather(location); localStorage.setItem('lastLocation', location); } }); async function getWeather(location) { try { // In a real app, you would call a weather API here // For demo purposes, we'll use mock data const mockWeather = { location: location, current: { temp: 72, condition: "Sunny", icon: "☀️", humidity: 45, wind: 8 }, forecast: [ { day: "Today", temp: 72, condition: "Sunny", icon: "☀️" }, { day: "Tomorrow", temp: 68, condition: "Partly Cloudy", icon: "⛅" }, { day: "Day 3", temp: 70, condition: "Sunny", icon: "☀️" }, { day: "Day 4", temp: 65, condition: "Rainy", icon: "🌧️" }, { day: "Day 5", temp: 60, condition: "Cloudy", icon: "☁️" } ] }; displayWeather(mockWeather); } catch (error) { console.error("Error fetching weather:", error); currentWeather.innerHTML = `

Error getting weather data. Please try again.

`; } } function displayWeather(weather) { currentWeather.innerHTML = `

Current Weather in ${weather.location}

${weather.current.icon}

Temperature: ${weather.current.temp}°F

Condition: ${weather.current.condition}

Humidity: ${weather.current.humidity}%

Wind: ${weather.current.wind} mph

`; weatherForecast.innerHTML = ''; weather.forecast.forEach(day => { const forecastCard = document.createElement('div'); forecastCard.className = 'forecast-card'; forecastCard.innerHTML = `

${day.day}

${day.icon}

${day.temp}°F

${day.condition}

`; weatherForecast.appendChild(forecastCard); }); } // Settings functionality function loadSettings() { const blankMode = localStorage.getItem('blankMode') === 'true'; const stayOpen = localStorage.getItem('stayOpen') === 'true'; const weatherMusic = localStorage.getItem('weatherMusic') === 'true'; const theme = localStorage.getItem('theme') || 'light'; const lastYoutubeUrl = localStorage.getItem('lastYoutubeUrl'); const lastLocation = localStorage.getItem('lastLocation'); blankModeCheckbox.checked = blankMode; stayOpenCheckbox.checked = stayOpen; weatherMusicCheckbox.checked = weatherMusic; themeSelector.value = theme; document.documentElement.setAttribute('data-theme', theme); if (lastYoutubeUrl) { youtubeUrlInput.value = lastYoutubeUrl; } if (lastLocation) { locationInput.value = lastLocation; getWeather(lastLocation); } } blankModeCheckbox.addEventListener('change', () => { localStorage.setItem('blankMode', blankModeCheckbox.checked); }); stayOpenCheckbox.addEventListener('change', () => { localStorage.setItem('stayOpen', stayOpenCheckbox.checked); }); weatherMusicCheckbox.addEventListener('change', () => { localStorage.setItem('weatherMusic', weatherMusicCheckbox.checked); }); themeSelector.addEventListener('change', () => { const theme = themeSelector.value; document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('theme', theme); }); resetBtn.addEventListener('click', () => { localStorage.clear(); loadSettings(); youtubeUrlInput.value = ''; locationInput.value = ''; youtubePlayer.innerHTML = ''; currentWeather.innerHTML = ''; weatherForecast.innerHTML = ''; }); // Initialize initGames(); loadSettings(); This application includes all the requested features: - 🎮 Games section with all listed games that open in new tabs or about:blank - 📺 YouTube viewer with embedded player and about:blank option - ☁️ Weather dashboard with mock data (would connect to real API in production) - ⚙️ Settings panel with all requested options - 💾 Auto-save functionality for preferences and last used URLs - 🔄 Reset button to clear all settings - 🎨 Multiple themes (light, dark, rainy, snowy)