Okay, I can help you set up the structure for this multi-functional web application. We'll create the basic HTML layout, CSS for styling, and JavaScript files to handle the logic for each section. Note: For the weather feature, you will need to sign up for a free weather API service (like OpenWeatherMap) and add your API key to the JavaScript code where indicated. Also, the "Auto Stay Open" feature's effectiveness can be limited by browser security policies. Unblocked Hub

Unblocked Hub

🎮 Unblocked Games

Games open in a new tab. Use Settings for about:blank mode.

📺 YouTube Viewer

Enter a YouTube URL above to watch.

☁️ Live Weather

Current Weather

Enter a location

-°C

5-Day Forecast

⚙️ Settings

🕵️ about:blank Mode (for Games/YouTube):

🔐 Auto Stay Open (Prevent Close):

🎶 Weather Background Music:

🌈 Theme:

🔄 Reset All Data:

:root { --primary-bg: #ffffff; --primary-text: #333333; --secondary-bg: #f4f4f4; --border-color: #dddddd; --accent-color: #007bff; --accent-text: #ffffff; --weather-bg: url('') no-repeat center center/cover; /* Default empty */ } body[data-theme="dark"] { --primary-bg: #333333; --primary-text: #ffffff; --secondary-bg: #444444; --border-color: #555555; } body[data-theme="rainy"] { --primary-bg: #e0f7fa; --primary-text: #004d40; --secondary-bg: #b2ebf2; --border-color: #80deea; --weather-bg: url('https://media.giphy.com/media/t7Qb8655Z1VfBGr5XB/giphy.gif') no-repeat center center/cover; /* Example Rain GIF */ } body[data-theme="snowy"] { --primary-bg: #e3f2fd; --primary-text: #0d47a1; --secondary-bg: #bbdefb; --border-color: #90caf9; --weather-bg: url('https://media.giphy.com/media/3o7aCRloybJlnhqJbO/giphy.gif') no-repeat center center/cover; /* Example Snow GIF */ } body { font-family: sans-serif; margin: 0; background-color: var(--primary-bg); color: var(--primary-text); display: flex; flex-direction: column; min-height: 100vh; background-image: var(--weather-bg); background-attachment: fixed; /* Keep background fixed during scroll */ transition: background-color 0.3s, color 0.3s, background-image 0.5s; } header { background-color: var(--secondary-bg); padding: 10px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } header h1 { margin: 0; font-size: 1.5em; } nav { display: flex; justify-content: space-around; background-color: var(--secondary-bg); border-top: 1px solid var(--border-color); padding: 10px 0; position: sticky; bottom: 0; left: 0; width: 100%; } nav button { background: none; border: none; color: var(--primary-text); padding: 10px 15px; cursor: pointer; font-size: 1em; border-radius: 5px; transition: background-color 0.2s; } nav button.active { background-color: var(--accent-color); color: var(--accent-text); } nav button:hover:not(.active) { background-color: var(--border-color); } main { flex-grow: 1; padding: 20px; overflow-y: auto; /* Allow content scrolling */ } .tab-content { display: none; /* Hide tabs by default */ animation: fadeIn 0.5s; } .tab-content.active { display: block; /* Show active tab */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #games-list { list-style: none; padding: 0; } #games-list li { margin-bottom: 10px; background-color: var(--secondary-bg); padding: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } #games-list a { color: var(--accent-color); text-decoration: none; font-weight: bold; } #games-list a:hover { text-decoration: underline; } .input-group { display: flex; margin-bottom: 15px; gap: 5px; } .input-group input[type="text"], .input-group input[type="url"] { flex-grow: 1; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--primary-bg); color: var(--primary-text); } button { padding: 8px 15px; background-color: var(--accent-color); color: var(--accent-text); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } button:hover { opacity: 0.9; } #settings-toggle, #close-settings-btn { background: none; border: 1px solid var(--accent-color); color: var(--accent-color); } #settings-toggle:hover, #close-settings-btn:hover { background-color: var(--accent-color); color: var(--accent-text); } #youtube-player-container { margin-top: 15px; position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; background-color: #000; border-radius: 5px; } #youtube-player-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } #youtube-player-container p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ccc; } #weather-info { background-color: var(--secondary-bg); padding: 15px; border-radius: 5px; margin-top: 15px; } #current-weather, #forecast { margin-bottom: 15px; } #forecast-container { display: flex; gap: 10px; overflow-x: auto; /* Allow horizontal scrolling if needed */ padding-bottom: 10px; /* Space for scrollbar */ } .forecast-item { background-color: var(--primary-bg); padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); min-width: 100px; text-align: center; } .forecast-item p { margin: 5px 0; font-size: 0.9em; } /* Settings Panel */ .settings-panel { position: fixed; /* Or absolute */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); /* Dim background */ z-index: 100; display: flex; /* Use flex to center content */ justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; opacity: 0; /* Start hidden */ visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .settings-panel.active { opacity: 1; visibility: visible; } .settings-panel > div { /* Style the inner container */ background-color: var(--primary-bg); padding: 30px; border-radius: 8px; max-width: 500px; width: 90%; box-shadow: 0 5px 15px rgba(0,0,0,0.2); position: relative; /* For close button positioning */ } .settings-panel h2 { margin-top: 0; margin-bottom: 20px; text-align: center; color: var(--primary-text); } .setting-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 10px 0; border-bottom: 1px solid var(--border-color); } .setting-item:last-of-type { border-bottom: none; } .setting-item label { margin-right: 10px; flex-basis: 60%; /* Give label more space */ color: var(--primary-text); } .setting-item input[type="checkbox"], .setting-item select, .setting-item button { flex-shrink: 0; /* Prevent shrinking */ } .setting-item select { padding: 5px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--primary-bg); color: var(--primary-text); } #close-settings-btn { position: absolute; top: 15px; right: 15px; padding: 5px 10px; } #reset-btn { background-color: #dc3545; /* Red color for reset */ } #reset-btn:hover { background-color: #c82333; } // Basic configuration const config = { WEATHER_API_KEY: 'YOUR_API_KEY_HERE', // IMPORTANT: Replace with your actual OpenWeatherMap API key WEATHER_API_URL: 'https://api.openweathermap.org/data/2.5/', DEFAULT_LOCATION: 'New York', LOCAL_STORAGE_PREFIX: 'unblockedHub_', }; // List of games const games = [ { name: "Super Smash Flash 2", url: "https://www.supersmashflash.com/play/ssf2/" }, { name: "Happy Wheels", url: "https://totaljerkface.com/happy_wheels.tjf" }, // Note: May require Flash emulator like Ruffle { name: "Tetris®", url: "https://tetris.com/play-tetris" }, { name: "Basketball Legends", url: "https://www.twoplayergames.org/embed/basketball-legends-2020" }, { name: "Slope Run Game", url: "https://slopegame.online/" }, { name: "Run 3", url: "https://player03.com/run/3/beta/" }, // Note: May require Flash emulator { name: "Slither.io", url: "http://slither.io/" }, { name: "Gunspin", url: "https://gunspin.io/" }, { name: "Snow Rider 3D", url: "https://snowrider3d.com/" }, { name: "Granny", url: "https://granny.games/" }, // Note: Often blocked, availability varies { name: "Zombie Mission", url: "https://www.twoplayergames.org/embed/zombie-mission" }, { name: "Diggy", url: "https://www.miniclip.com/games/diggy/en/" }, // Note: May require Flash emulator { name: "Hanger", url: "https://www.miniclip.com/games/hanger/en/" }, // Note: May require Flash emulator { name: "Overkill Apache", url: "https://poki.com/en/g/overkill-apache" }, // Example, find reliable source { name: "Drift Simulator", url: "https://poki.com/en/g/drift-simulator" }, // Example { name: "Dune Buggy", url: "https://www.miniclip.com/games/dune-buggy/en/" }, // Note: May require Flash emulator { name: "1v1 Basketball", url: "https://1v1.lol/" }, // Note: This is 1v1.lol, often includes basketball modes { name: "Fast Runner", url: "https://poki.com/en/g/fast-runner" }, // Example { name: "The Enchanted Cave 2", url: "https://www.kongregate.com/games/dustinaux/the-enchanted-cave-2" }, // Note: May require Flash emulator { name: "Spiderman City Raid", url: "https://poki.com/en/g/spiderman-city-raid" } // Example ]; // Weather condition mapping (examples) const weatherConditions = { // Clear "clear sky": { icon: "☀️", background: "sunny", music: "sunny.mp3" }, // Clouds "few clouds": { icon: "🌤️", background: "partly-cloudy", music: "calm.mp3" }, "scattered clouds": { icon: "☁️", background: "cloudy", music: "calm.mp3" }, "broken clouds": { icon: "☁️", background: "cloudy", music: "calm.mp3" }, "overcast clouds": { icon: "🌥️", background: "overcast", music: "calm.mp3" }, // Atmosphere "mist": { icon: "🌫️", background: "foggy", music: "ambient.mp3" }, "smoke": { icon: "💨", background: "foggy", music: "ambient.mp3" }, "haze": { icon: "🌫️", background: "foggy", music: "ambient.mp3" }, "sand/ dust whirls": { icon: "🌪️", background: "dust-storm", music: "intense.mp3" }, "fog": { icon: "🌫️", background: "foggy", music: "ambient.mp3" }, "sand": { icon: "🏜️", background: "sandstorm", music: "intense.mp3" }, "dust": { icon: "🏜️", background: "dust-storm", music: "intense.mp3" }, "volcanic ash": { icon: "🌋", background: "stormy", music: "intense.mp3" }, "squalls": { icon: "🌬️", background: "windy", music: "windy.mp3" }, "tornado": { icon: "🌪️", background: "tornado", music: "intense.mp3" }, // Snow "light snow": { icon: "🌨️", background: "light-snow", music: "snowy.mp3" }, "snow": { icon: "❄️", background: "snowy", music: "snowy.mp3" }, "heavy snow": { icon: "❄️❄️", background: "heavy-snow", music: "snowy.mp3" }, "sleet": { icon: "🌨️", background: "sleet", music: "rainy.mp3" }, "light shower sleet": { icon: "🌨️", background: "sleet", music: "rainy.mp3" }, "shower sleet": { icon: "🌨️", background: "sleet", music: "rainy.mp3" }, "light rain and snow": { icon: "🌨️", background: "sleet", music: "rainy.mp3" }, "rain and snow": { icon: "🌨️", background: "sleet", music: "rainy.mp3" }, "light shower snow": { icon: "🌨️", background: "light-snow", music: "snowy.mp3" }, "shower snow": { icon: "❄️", background: "snowy", music: "snowy.mp3" }, "heavy shower snow": { icon: "❄️❄️", background: "heavy-snow", music: "snowy.mp3" }, // Rain "light rain": { icon: "🌦️", background: "light-rain", music: "rainy.mp3" }, "moderate rain": { icon: "🌧️", background: "rainy", music: "rainy.mp3" }, "heavy intensity rain": { icon: "🌧️🌧️", background: "heavy-rain", music: "rainy.mp3" }, "very heavy rain": { icon: "🌧️🌧️", background: "heavy-rain", music: "rainy.mp3" }, "extreme rain": { icon: "🌧️🌧️", background: "heavy-rain", music: "rainy.mp3" }, "freezing rain": { icon: "🥶🌧️", background: "freezing-rain", music: "rainy.mp3" }, "light intensity shower rain": { icon: "🌦️", background: "light-rain", music: "rainy.mp3" }, "shower rain": { icon: "🌧️", background: "rainy", music: "rainy.mp3" }, "heavy intensity shower rain": { icon: "🌧️🌧️", background: "heavy-rain", music: "rainy.mp3" }, "ragged shower rain": { icon: "🌧️", background: "rainy", music: "rainy.mp3" }, // Drizzle "light intensity drizzle": { icon: "💧", background: "drizzle", music: "rainy.mp3" }, "drizzle": { icon: "💧", background: "drizzle", music: "rainy.mp3" }, "heavy intensity drizzle": { icon: "💧💧", background: "drizzle", music: "rainy.mp3" }, "light intensity drizzle rain": { icon: "💧🌧️", background: "drizzle", music: "rainy.mp3" }, "drizzle rain": { icon: "💧🌧️", background: "drizzle", music: "rainy.mp3" }, "heavy intensity drizzle rain": { icon: "💧💧🌧️", background: "drizzle", music: "rainy.mp3" }, "shower rain and drizzle": { icon: "💧🌧️", background: "drizzle", music: "rainy.mp3" }, "heavy shower rain and drizzle": { icon: "💧💧🌧️", background: "drizzle", music: "rainy.mp3" }, "shower drizzle": { icon: "💧", background: "drizzle", music: "rainy.mp3" }, // Thunderstorm "thunderstorm with light rain": { icon: "⛈️", background: "thunderstorm", music: "stormy.mp3" }, "thunderstorm with rain": { icon: "⛈️", background: "thunderstorm", music: "stormy.mp3" }, "thunderstorm with heavy rain": { icon: "⛈️🌧️", background: "thunderstorm", music: "stormy.mp3" }, "light thunderstorm": { icon: "🌩️", background: "thunderstorm", music: "stormy.mp3" }, "thunderstorm": { icon: "⚡", background: "thunderstorm", music: "stormy.mp3" }, "heavy thunderstorm": { icon: "⚡⚡", background: "thunderstorm", music: "stormy.mp3" }, "ragged thunderstorm": { icon: "⛈️", background: "thunderstorm", music: "stormy.mp3" }, "thunderstorm with light drizzle": { icon: "⛈️💧", background: "thunderstorm", music: "stormy.mp3" }, "thunderstorm with drizzle": { icon: "⛈️💧", background: "thunderstorm", music: "stormy.mp3" }, "thunderstorm with heavy drizzle": { icon: "⛈️💧💧", background: "thunderstorm", music: "stormy.mp3" }, // Default "default": { icon: "❓", background: "default", music: "calm.mp3" } }; // Placeholder for music files - replace with actual paths or URLs if hosting them const weatherMusic = { "sunny.mp3": "path/to/sunny.mp3", "calm.mp3": "path/to/calm.mp3", "rainy.mp3": "path/to/rainy.mp3", "snowy.mp3": "path/to/snowy.mp3", "windy.mp3": "path/to/windy.mp3", "stormy.mp3": "path/to/stormy.mp3", "ambient.mp3": "path/to/ambient.mp3", "intense.mp3": "path/to/intense.mp3", }; // UI Interaction Logic const navButtons = document.querySelectorAll('nav button'); const tabContents = document.querySelectorAll('.tab-content:not(.settings-panel)'); // Exclude settings panel const settingsPanel = document.getElementById('settings'); const settingsToggleBtn = document.getElementById('settings-toggle'); const closeSettingsBtn = document.getElementById('close-settings-btn'); function switchTab(targetTabId) { // Hide all main tabs tabContents.forEach(tab => tab.classList.remove('active')); // Deactivate all nav buttons navButtons.forEach(button => button.classList.remove('active')); // Show the target tab const targetTab = document.getElementById(targetTabId); if (targetTab) { targetTab.classList.add('active'); } // Activate the corresponding nav button const targetButton = document.querySelector(`nav button[data-tab="${targetTabId}"]`); if (targetButton) { targetButton.classList.add('active'); } // Hide settings panel if a main tab is selected settingsPanel.classList.remove('active'); } function toggleSettingsPanel() { settingsPanel.classList.toggle('active'); // If opening settings, optionally deactivate main tabs visually if (settingsPanel.classList.contains('active')) { tabContents.forEach(tab => tab.classList.remove('active')); navButtons.forEach(button => button.classList.remove('active')); } else { // If closing settings, restore the last active tab or default to games const lastTab = localStorage.getItem(config.LOCAL_STORAGE_PREFIX + 'lastTab') || 'games'; switchTab(lastTab); } } // Event Listeners for Tab Navigation navButtons.forEach(button => { button.addEventListener('click', () => { const tabId = button.getAttribute('data-tab'); switchTab(tabId); localStorage.setItem(config.LOCAL_STORAGE_PREFIX + 'lastTab', tabId); // Remember last tab }); }); // Event Listeners for Settings Panel settingsToggleBtn.addEventListener('click', toggleSettingsPanel); closeSettingsBtn.addEventListener('click', toggleSettingsPanel); // Function to open URLs (potentially cloaked) function openUrl(url, useAboutBlank) { if (useAboutBlank) { try { const newWindow = window.open('about:blank', '_blank'); if (newWindow) { newWindow.document.write(` ${document.title} `); newWindow.document.close(); } else { // Fallback if popup blocked window.open(url, '_blank'); } } catch (e) { console.error("About:blank opening failed:", e); window.open(url, '_blank'); // Fallback } } else { window.open(url, '_blank'); } } // Initial setup - show the default or last viewed tab const lastTab = localStorage.getItem(config.LOCAL_STORAGE_PREFIX + 'lastTab') || 'games'; switchTab(lastTab); // Games Logic const gamesList = document.getElementById('games-list'); const aboutBlankToggle = document.getElementById('about-blank-toggle'); // From settings function populateGames() { gamesList.innerHTML = ''; // Clear existing list games.forEach(game => { const li = document.createElement('li'); const link = document.createElement('a'); link.href = game.url; link.textContent = game.name; link.target = '_blank'; // Default behavior link.addEventListener('click', (event) => { event.preventDefault(); // Prevent default link behavior const useAboutBlank = settings.isAboutBlankEnabled(); openUrl(game.url, useAboutBlank); }); li.appendChild(link); gamesList.appendChild(li); }); } // Initial population populateGames(); // YouTube Logic const youtubeUrlInput = document.getElementById('youtube-url'); const watchBtn = document.getElementById('watch-youtube-btn'); const watchBlankBtn = document.getElementById('watch-youtube-blank-btn'); const playerContainer = document.getElementById('youtube-player-container'); const LS_YOUTUBE_KEY = config.LOCAL_STORAGE_PREFIX + 'lastYoutubeUrl'; function getYouTubeVideoId(url) { try { const urlObj = new URL(url); if (urlObj.hostname === 'youtu.be') { return urlObj.pathname.slice(1); } if (urlObj.hostname.includes('youtube.com')) { return urlObj.searchParams.get('v'); } } catch (e) { console.error("Invalid YouTube URL:", url); } return null; } function loadYouTubeVideo(url, useAboutBlank = false) { if (!url) return; if (useAboutBlank) { openUrl(url, true); return; // Don't embed if opening in blank tab } const videoId = getYouTubeVideoId(url); if (videoId) { playerContainer.innerHTML = ` `; localStorage.setItem(LS_YOUTUBE_KEY, url); // Save last watched URL } else { playerContainer.innerHTML = '

Invalid YouTube URL. Please check the link.

'; } } // Event Listeners watchBtn.addEventListener('click', () => { loadYouTubeVideo(youtubeUrlInput.value, false); }); watchBlankBtn.addEventListener('click', () => { loadYouTubeVideo(youtubeUrlInput.value, true); }); // Load last saved video URL on startup const lastUrl = localStorage.getItem(LS_YOUTUBE_KEY); if (lastUrl) { youtubeUrlInput.value = lastUrl; // Optionally auto-load the video frame, or just prefill the input // loadYouTubeVideo(lastUrl); // Uncomment to auto-load frame playerContainer.innerHTML = `

Last video URL loaded: ${lastUrl}. Click Watch to play.

`; } // Weather Logic const locationInput = document.getElementById('location-input'); const getWeatherBtn = document.getElementById('get-weather-btn'); const weatherLocation = document.getElementById('weather-location'); const weatherDescription = document.getElementById('weather-description'); const weatherTemp = document.getElementById('weather-temp'); const weatherNotice = document.getElementById('weather-notice'); const forecastContainer = document.getElementById('forecast-container'); const weatherAudio = document.getElementById('weather-audio'); const body = document.body; const LS_WEATHER_KEY = config.LOCAL_STORAGE_PREFIX + 'lastLocation'; async function fetchWeatherData(location) { if (config.WEATHER_API_KEY === 'YOUR_API_KEY_HERE') { console.warn("Weather API key not set in config.js. Using mock data."); return getMockWeatherData(location); // Use mock data if no key } const currentWeatherUrl = `${config.WEATHER_API_URL}weather?q=${encodeURIComponent(location)}&appid=${config.WEATHER_API_KEY}&units=metric`; const forecastUrl = `${config.WEATHER_API_URL}forecast?q=${encodeURIComponent(location)}&appid=${config.WEATHER_API_KEY}&units=metric`; try { const [currentRes, forecastRes] = await Promise.all([ fetch(currentWeatherUrl), fetch(forecastUrl) ]); if (!currentRes.ok || !forecastRes.ok) { throw new Error(`HTTP error! status: ${currentRes.status} / ${forecastRes.status}`); } const currentData = await currentRes.json(); const forecastData = await forecastRes.json(); return { current: currentData, forecast: forecastData }; } catch (error) { console.error("Error fetching weather data:", error); weatherNotice.textContent = "Could not fetch weather data. Please check location or API key."; return null; } } function updateWeatherUI(data) { if (!data || !data.current || !data.forecast) { weatherNotice.textContent = "Failed to load weather data."; return; } // --- Current Weather --- const current = data.current; const conditionDesc = current.weather[0]?.description || 'Unknown'; const conditionInfo = weatherConditions[conditionDesc.toLowerCase()] || weatherConditions.default; weatherLocation.textContent = `${current.name}, ${current.sys.country}`; weatherDescription.textContent = `${conditionInfo.icon} ${conditionDesc.charAt(0).toUpperCase() + conditionDesc.slice(1)}`; weatherTemp.textContent = `${Math.round(current.main.temp)}°C`; weatherNotice.textContent = getNotice(conditionDesc); // Generate notice // --- Update Background and Music --- updateBackgroundAndMusic(conditionInfo); // --- 5-Day Forecast --- forecastContainer.innerHTML = ''; // Clear previous forecast const dailyForecasts = processForecastData(data.forecast.list); dailyForecasts.forEach(day => { const dayConditionDesc = day.weather[0]?.description || 'Unknown'; const dayConditionInfo = weatherConditions[dayConditionDesc.toLowerCase()] || weatherConditions.default; const forecastItem = document.createElement('div'); forecastItem.classList.add('forecast-item'); forecastItem.innerHTML = `

${day.dayName}

${dayConditionInfo.icon}

${Math.round(day.main.temp_max)}°C / ${Math.round(day.main.temp_min)}°C

${dayConditionDesc}

`; forecastContainer.appendChild(forecastItem); }); } // Helper to process forecast list into daily summaries function processForecastData(forecastList) { const dailyData = {}; const today = new Date().toLocaleDateString(); forecastList.forEach(item => { const date = new Date(item.dt * 1000); const dateString = date.toLocaleDateString(); const dayName = date.toLocaleDateString(undefined, { weekday: 'short' }); // Skip today's entries for the 5-day forecast display (we have current weather) // Or adjust logic if you want today included in the 5-day section // if (dateString === today) return; if (!dailyData[dateString]) { dailyData[dateString] = { dayName: dayName, temps: [], weather: item.weather, // Take first weather entry as representative for the day temp_min: item.main.temp_min, temp_max: item.main.temp_max, }; } // Aggregate min/max temps for the day dailyData[dateString].temp_min = Math.min(dailyData[dateString].temp_min, item.main.temp_min); dailyData[dateString].temp_max = Math.max(dailyData[dateString].temp_max, item.main.temp_max); // Could also average temps or pick midday temp if needed }); // Convert aggregated data back to an array, limit to 5 days return Object.values(dailyData).slice(0, 5).map(day => ({ dayName: day.dayName, main: { temp_min: day.temp_min, temp_max: day.temp_max }, weather: day.weather })); } function getNotice(description) { const descLower = description.toLowerCase(); if (descLower.includes('rain')) return "Expect rain today."; if (descLower.includes('snow')) return "Snowfall expected."; if (descLower.includes('storm') || descLower.includes('thunder')) return "Stormy weather ahead!"; if (descLower.includes('clear')) return "Clear skies all day."; if (descLower.includes('cloud')) return "Partly to mostly cloudy."; if (descLower.includes('fog') || descLower.includes('mist')) return "Foggy conditions likely."; return "Weather conditions: " + description; } function updateBackgroundAndMusic(conditionInfo) { // Update background based on theme OR weather condition // Theme takes precedence if set to rainy/snowy explicitly const currentTheme = settings.getCurrentTheme(); if (currentTheme !== 'rainy' && currentTheme !== 'snowy') { // Apply weather-based background ONLY if theme is light/dark // Find the corresponding CSS class or style for conditionInfo.background // This requires mapping conditionInfo.background (e.g., "heavy-rain") to actual CSS (e.g., a background image URL) // For simplicity, we'll just log it for now. A more robust solution would involve setting classes or inline styles. console.log("Applying weather background style:", conditionInfo.background); // Example using inline style (less ideal than classes): // body.style.backgroundImage = `url('path/to/${conditionInfo.background}.gif')`; // Or set a data attribute: body.setAttribute('data-weather-condition', conditionInfo.background); // Then use CSS: body[data-weather-condition="rainy"] { background-image: ... } } // Update Music if (settings.isWeatherMusicEnabled() && conditionInfo.music && weatherMusic[conditionInfo.music]) { const musicPath = weatherMusic[conditionInfo.music]; // Get path from config if (weatherAudio.src !== musicPath) { // Avoid reloading same track weatherAudio.src = musicPath; weatherAudio.play().catch(e => console.log("Audio play prevented:", e)); // Autoplay might be blocked } } else { weatherAudio.pause(); weatherAudio.src = ""; // Clear source } } // Mock data function (if API key is missing) function getMockWeatherData(location) { console.log(`Using mock weather data for ${location}`); return { current: { name: location || "Mock City", sys: { country: "MC" }, weather: [{ description: "scattered clouds", icon: "03d" }], main: { temp: 15, temp_min: 12, temp_max: 18 }, }, forecast: { list: [ // Generate some mock forecast items for 5 days { dt: Date.now() / 1000 + 86400 * 1, main: { temp_min: 13, temp_max: 19 }, weather: [{ description: "light rain" }] }, { dt: Date.now() / 1000 + 86400 * 2, main: { temp_min: 14, temp_max: 20 }, weather: [{ description: "clear sky" }] }, { dt: Date.now() / 1000 + 86400 * 3, main: { temp_min: 12, temp_max: 17 }, weather: [{ description: "snow" }] }, { dt: Date.now() / 1000 + 86400 * 4, main: { temp_min: 11, temp_max: 16 }, weather: [{ description: "thunderstorm" }] }, { dt: Date.now() / 1000 + 86400 * 5, main: { temp_min: 15, temp_max: 21 }, weather: [{ description: "few clouds" }] }, ] } }; } // Event Listener for Get Weather button getWeatherBtn.addEventListener('click', async () => { const location = locationInput.value.trim(); if (location) { weatherNotice.textContent = "Fetching weather..."; const weatherData = await fetchWeatherData(location); if (weatherData) { updateWeatherUI(weatherData); localStorage.setItem(LS_WEATHER_KEY, location); // Save last location } } else { weatherNotice.textContent = "Please enter a location."; } }); // Load weather for last saved location on startup const lastLocation = localStorage.getItem(LS_WEATHER_KEY) || config.DEFAULT_LOCATION; if (lastLocation) { locationInput.value = lastLocation; getWeatherBtn.click(); // Automatically fetch weather on load } else { weatherNotice.textContent = "Enter a location to get the weather."; } // Settings Logic const aboutBlankToggle = document.getElementById('about-blank-toggle'); const autoStayOpenToggle = document.getElementById('auto-stay-open-toggle'); const weatherMusicToggle = document.getElementById('weather-music-toggle'); const themeSelector = document.getElementById('theme-selector'); const resetBtn = document.getElementById('reset-btn'); const bodyElement = document.body; const weatherAudioEl = document.getElementById('weather-audio'); // Get audio element const LS_SETTINGS_KEY = config.LOCAL_STORAGE_PREFIX + 'settings'; // Default settings const defaultSettings = { aboutBlank: false, autoStayOpen: false, weatherMusic: true, theme: 'light' }; // Load settings from Local Storage or use defaults function loadSettings() { const savedSettings = JSON.parse(localStorage.getItem(LS_SETTINGS_KEY)); return { ...defaultSettings, ...savedSettings }; } let currentSettings = loadSettings(); // Apply settings on load function applySettings() { // Apply toggles aboutBlankToggle.checked = currentSettings.aboutBlank; autoStayOpenToggle.checked = currentSettings.autoStayOpen; weatherMusicToggle.checked = currentSettings.weatherMusic; // Apply theme themeSelector.value = currentSettings.theme; bodyElement.setAttribute('data-theme', currentSettings.theme); // Apply Auto Stay Open (if enabled) updateAutoStayOpen(); // Apply Weather Music setting (stop if disabled) if (!currentSettings.weatherMusic && weatherAudioEl) { weatherAudioEl.pause(); weatherAudioEl.src = ''; } // Re-trigger weather update if music setting changed to potentially start/stop music // This assumes weather data is already loaded or will be loaded soon. // A more direct approach might be needed if weather isn't loaded yet. if (typeof updateBackgroundAndMusic === 'function' && window.currentWeatherConditionInfo) { updateBackgroundAndMusic(window.currentWeatherConditionInfo); // Requires global access or better state management } } // Save settings to Local Storage function saveSettings() { localStorage.setItem(LS_SETTINGS_KEY, JSON.stringify(currentSettings)); } // Update Auto Stay Open feature function updateAutoStayOpen() { if (currentSettings.autoStayOpen) { window.onbeforeunload = function(e) { e.preventDefault(); // Standard practice // Most modern browsers will show a generic message, not the custom one. e.returnValue = 'Are you sure you want to leave? Your session might be lost.'; return e.returnValue; }; } else { window.onbeforeunload = null; // Disable the prompt } } // Event Listeners for Settings Changes aboutBlankToggle.addEventListener('change', () => { currentSettings.aboutBlank = aboutBlankToggle.checked; saveSettings(); }); autoStayOpenToggle.addEventListener('change', () => { currentSettings.autoStayOpen = autoStayOpenToggle.checked; updateAutoStayOpen(); // Apply immediately saveSettings(); }); weatherMusicToggle.addEventListener('change', () => { currentSettings.weatherMusic = weatherMusicToggle.checked; if (!currentSettings.weatherMusic && weatherAudioEl) { weatherAudioEl.pause(); weatherAudioEl.src = ''; // Stop and clear immediately } // If enabling, music will start on the next weather update or refresh saveSettings(); // Optionally re-trigger weather update to apply music change immediately if (typeof updateBackgroundAndMusic === 'function' && window.currentWeatherConditionInfo) { updateBackgroundAndMusic(window.currentWeatherConditionInfo); } }); themeSelector.addEventListener('change', () => { currentSettings.theme = themeSelector.value; bodyElement.setAttribute('data-theme', currentSettings.theme); saveSettings(); // Re-apply weather background in case theme overrides it if (typeof updateBackgroundAndMusic === 'function' && window.currentWeatherConditionInfo) { updateBackgroundAndMusic(window.currentWeatherConditionInfo); } }); resetBtn.addEventListener('click', () => { if (confirm('Are you sure you want to reset all settings and saved data? This cannot be undone.')) { // Clear all relevant local storage items Object.keys(localStorage).forEach(key => { if (key.startsWith(config.LOCAL_STORAGE_PREFIX)) { localStorage.removeItem(key); } }); // Reset settings to default and reload page currentSettings = { ...defaultSettings }; applySettings(); // Apply defaults visually before reload alert('Data reset. The page will now reload.'); window.location.reload(); } }); // Initial application of settings when the script loads applySettings(); // Expose necessary functions/state if needed by other modules window.settings = { isAboutBlankEnabled: () => currentSettings.aboutBlank, isWeatherMusicEnabled: () => currentSettings.weatherMusic, getCurrentTheme: () => currentSettings.theme, // Add other getters if needed }; // Main application entry point (if needed for coordination) document.addEventListener('DOMContentLoaded', () => { console.log('Unblocked Hub Initialized'); // You can add any further initialization logic here that needs // to run after the DOM is fully loaded and other scripts have potentially run. // For example, ensuring initial states are correctly set up. // Example: Store the current weather condition globally for settings access // This is a simple approach; proper state management would be better for larger apps. // We need to hook into the weather update process. const originalUpdateWeatherUI = window.updateWeatherUI; // Assuming weather.js makes it global or accessible if(originalUpdateWeatherUI) { window.updateWeatherUI = function(data) { originalUpdateWeatherUI(data); // Call the original function if (data && data.current) { const conditionDesc = data.current.weather[0]?.description || 'Unknown'; window.currentWeatherConditionInfo = weatherConditions[conditionDesc.toLowerCase()] || weatherConditions.default; console.log("Stored current weather condition info globally."); // Re-apply background/music after weather update, considering theme/settings if (typeof updateBackgroundAndMusic === 'function') { updateBackgroundAndMusic(window.currentWeatherConditionInfo); } } } } else { console.warn("Could not wrap updateWeatherUI. Global weather state might not be available for settings."); } }); This sets up the basic HTML structure, CSS styling (including theme placeholders and basic layout), and separate JavaScript files for configuration, UI interactions, games, YouTube, weather, settings, and a main entry point. Remember to: 1. Replace `'YOUR_API_KEY_HERE'` in `config.js` with your actual OpenWeatherMap API key. 2. The weather background and music currently use placeholder paths/logic. You'll need to provide actual image URLs (e.g., in the CSS or dynamically set via JS) and audio file paths/URLs in `config.js` and potentially adjust the `updateBackgroundAndMusic` function in `weather.js` to apply them correctly based on the `conditionInfo.background` and `conditionInfo.music` values. 3. Test the `about:blank` and "Auto Stay Open" features, as browser behavior can vary. 4. Some game links might require Flash emulators (like Ruffle) or may become unavailable over time.