`; div.onclick = () => { cityInput.value = city.name; getWeatherData(city.latitude, city.longitude, city.name, city.country); suggestionsContainer.classList.remove('show'); }; suggestionsContainer.appendChild(div); }); suggestionsContainer.classList.add('show'); } else { suggestionsContainer.classList.remove('show'); } } catch(e) {} } function setupSuggestions() { let timeout; cityInput.addEventListener('input', function() { clearTimeout(timeout); const q = this.value.trim(); if (q.length < 2) { suggestionsContainer.classList.remove('show'); return; } timeout = setTimeout(() => showSuggestions(q), 300); }); document.addEventListener('click', e => { if (cityInput && !cityInput.contains(e.target) && !suggestionsContainer.contains(e.target)) suggestionsContainer.classList.remove('show'); }); } function setupPullToRefresh() { let startY = 0; document.addEventListener('touchstart', e => { if(window.scrollY===0) startY=e.touches[0].clientY; }, {passive:true}); document.addEventListener('touchmove', e => { const pull = e.touches[0].clientY - startY; if(window.scrollY===0 && pull > 100) refreshIndicator.classList.add('visible'); }, {passive:true}); document.addEventListener('touchend', async () => { if(refreshIndicator.classList.contains('visible')) { await getWeatherData(currentLat, currentLon, currentCity, currentCountry); setTimeout(() => refreshIndicator.classList.remove('visible'), 1000); } }); } function getWeatherDescription(code) { const d = { 0:'Clear sky', 1:'Mainly clear', 2:'Partly cloudy', 3:'Overcast', 45:'Fog', 51:'Light drizzle', 61:'Light rain', 63:'Moderate rain', 71:'Light snow', 73:'Moderate snow', 75:'Heavy snow', 80:'Light showers', 95:'Thunderstorm' }; return d[code] || 'Unknown'; } function getWeatherIcon(code, isDay) { if (isDay === 1) { if (code <= 3) return code===0 ? 'fa-sun' : 'fa-cloud-sun'; if (code <= 55) return 'fa-cloud-rain'; if (code <= 77) return 'fa-snowflake'; return 'fa-cloud-showers-heavy'; } else { if (code <= 3) return code===0 ? 'fa-moon' : 'fa-cloud-moon'; return 'fa-cloud-moon-rain'; } } function updateAirQualityAndUV(aqiData, daily) { if (aqiData?.current) { const a = aqiData.current.european_aqi; aqiValue.textContent = a; aqiLabel.textContent = a<=20?'Excellent':a<=40?'Good':a<=60?'Fair':'Poor'; } const uv = daily.uv_index_max?daily.uv_index_max[0]:0; uvIndex.textContent = Math.round(uv); uvLabel.textContent = uv<=2?'Low':uv<=5?'Moderate':'High'; } function updateHourlyForecast(hourly) { const h = new Date().getHours(); let html = ''; for(let i=0; i<12; i++) { if(h+i >= hourly.time.length) break; const time = new Date(hourly.time[h+i]).getHours(); const icon = getWeatherIcon(hourly.weather_code[h+i], time>=6&&time<=18?1:0); html += ``; } hourlyForecast.innerHTML = html; } function updateWeekForecast(daily) { let html = ''; for(let i=0; i<5; i++) { const d = new Date(); d.setDate(d.getDate()+i); const name = d.toLocaleDateString('en-US',{weekday:'short'}); const code = daily.weather_code[i]; const desc = getWeatherDescription(code); const color = (desc.includes('Snow')||desc.includes('Rain')||desc.includes('Thunder')) ? '#ff6b35' : 'var(--text-secondary)'; html += ``; } weekForecast.innerHTML = html; } function updateAdvancedDetails(data, current) { const r = new Date(data.daily.sunrise[0]).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}); const s = new Date(data.daily.sunset[0]).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}); const d = ['N','NE','E','SE','S','SW','W','NW'][Math.round(current.wind_direction_10m/45)%8]; advancedDetails.innerHTML = ` `; } async function searchCity() { const c = cityInput.value.trim(); if(!c) return; try { const res = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(c)}&count=1&language=en`); const data = await res.json(); if(data.results) getWeatherData(data.results[0].latitude, data.results[0].longitude, data.results[0].name, data.results[0].country); else showMessage('City not found','error'); } catch(e) { showMessage('Error searching','error'); } } function getLocation() { if(!navigator.geolocation) return showMessage('Geolocation not supported','error'); navigator.geolocation.getCurrentPosition(async p => { const {latitude:lat, longitude:lon} = p.coords; try { const res = await fetch(`https://geocoding-api.open-meteo.com/v1/search?latitude=${lat}&longitude=${lon}&count=1`); const data = await res.json(); getWeatherData(lat, lon, data.results?data.results[0].name:"Your Location", ""); } catch(e) { getWeatherData(lat, lon, "Your Location", ""); } }, () => showMessage('Location denied','error')); } function loadSavedLocations() { savedLocationsContainer.innerHTML = ''; const s = localStorage.getItem('weather_saved_locations'); if(s) savedLocations = JSON.parse(s); savedLocations.forEach(l => { const b = document.createElement('button'); b.className = 'saved-location-btn'; b.innerHTML = ` ${l.name}`; b.onclick = () => getWeatherData(l.lat, l.lon, l.name, l.country); savedLocationsContainer.appendChild(b); }); const sb = document.createElement('button'); sb.className = 'save-location-btn'; sb.innerHTML = ` Save`; sb.onclick = () => { if(!savedLocations.some(l=>l.name===currentCity)) { savedLocations.push({name:currentCity, lat:currentLat, lon:currentLon, country:currentCountry}); localStorage.setItem('weather_saved_locations',JSON.stringify(savedLocations)); loadSavedLocations(); }}; savedLocationsContainer.appendChild(sb); } function loadTheme() { currentTheme = localStorage.getItem('weather_theme')||'light'; document.documentElement.setAttribute('data-theme',currentTheme); } function toggleTheme() { currentTheme = currentTheme==='light'?'dark':'light'; document.documentElement.setAttribute('data-theme',currentTheme); localStorage.setItem('weather_theme',currentTheme); } function toggleUnit(e) { currentUnit = e.target.dataset.unit; unitButtons.forEach(b => b.classList.remove('active')); e.target.classList.add('active'); getWeatherData(currentLat, currentLon, currentCity, currentCountry); } function updateDateTime() { currentDate.firstChild.textContent = new Date().toLocaleDateString('en-US',{weekday:'long',month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'}); } function updateLastUpdated() { lastUpdatedEl.textContent = `Updated: ${new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}`; } function showMessage(m,t) { const d=document.createElement('div'); d.className=`temp-message ${t==='error'?'error-message':''}`; d.innerHTML=` ${m}`; document.body.appendChild(d); setTimeout(()=>d.remove(),3000); } function toggleSection(id) { document.getElementById(id).classList.toggle('expanded'); }