Pakistan Weather \u2013 Live Forecasts for Karachi, Lahore & Islamabad<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@300;400;600;700;800&family=Oswald:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* RESET & BASE \u2013 AdSense safe *\/\n*{margin:0;padding:0;box-sizing:border-box}\nbody{background:#0a1628;font-family:'Nunito',sans-serif;min-height:100vh;display:flex;flex-direction:column}\n\/* Header *\/\n.page-header{background:linear-gradient(135deg,#0d2a5e,#0f3a8a);padding:16px 24px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.1)}\n.page-header h1{font-family:'Oswald',sans-serif;font-size:26px;font-weight:600;color:#fff}\n.page-header p{font-size:13px;color:#c8e8ff;margin-top:4px}\n\/* Unit converter *\/\n.converter-bar{background:rgba(10,22,40,0.8);backdrop-filter:blur(8px);padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,0.1)}\n.converter-label{font-size:14px;font-weight:600;color:#c8e8ff}\n.unit-toggle{display:flex;background:rgba(0,0,0,0.4);border-radius:40px;padding:4px;gap:4px}\n.unit-btn{background:transparent;border:none;padding:6px 20px;border-radius:30px;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;cursor:pointer;color:#7aafd4;transition:0.2s}\n.unit-btn.active{background:#4da8f5;color:#0a1628;box-shadow:0 0 6px rgba(77,168,245,0.5)}\n\/* MAIN \u2013 NO GAPS BETWEEN WIDGETS *\/\n.page-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;margin:0}\n.widget-container{width:100%;max-width:100%;margin:0;padding:0;display:block}\n\/* AdSense hint: place ads between widgets if desired \u2013 e.g., <div class=\"adsense-container\">... code ...<\/div> *\/\n\/* Widget styles (compact, no overlapping) *\/\n.karachi-widget{font-family:'Nunito',sans-serif;display:block;width:100%;margin:0;padding:0}\n.karachi-widget .kw{width:100%;margin:0;border-radius:0;overflow-x:hidden;box-shadow:none;background:linear-gradient(180deg,#0d2147 0%,#0a1628 100%)}\n.karachi-widget .kw-hero{background:linear-gradient(160deg,#0d2a5e 0%,#0f3a8a 40%,#1a5bba 100%);padding:28px 20px 0;position:relative;overflow:hidden}\n.karachi-widget .kw-search-wrap{display:flex;justify-content:center;gap:8px;margin-bottom:16px;position:relative;z-index:2}\n.karachi-widget .kw-search-input{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);border-radius:40px;padding:10px 18px;font-size:14px;color:#fff;width:200px;outline:none;transition:0.2s}\n.karachi-widget .kw-search-input::placeholder{color:rgba(255,255,255,0.6)}\n.karachi-widget .kw-search-input:focus{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5)}\n.karachi-widget .kw-search-btn{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:40px;padding:8px 18px;font-size:14px;color:#fff;cursor:pointer;transition:0.2s}\n.karachi-widget .kw-search-btn:hover{background:rgba(255,255,255,0.35)}\n.karachi-widget .kw-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;background:radial-gradient(circle,rgba(77,168,245,.22) 0%,transparent 70%);border-radius:50%;animation:kwPulse 4s ease-in-out infinite}\n.karachi-widget .kw-hero::after{content:'';position:absolute;bottom:-60px;left:-60px;width:260px;height:260px;background:radial-gradient(circle,rgba(245,168,0,.13) 0%,transparent 70%);border-radius:50%;animation:kwPulse 5s ease-in-out 1s infinite}\n@keyframes kwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}\n.karachi-widget .kw-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}\n.karachi-widget .kw-p{position:absolute;border-radius:50%;background:rgba(255,255,255,.25);animation:kwDrift linear infinite}\n@keyframes kwDrift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:.5}100%{transform:translateY(-120px) translateX(20px);opacity:0}}\n.karachi-widget .kw-top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px;position:relative;z-index:1}\n.karachi-widget .kw-location-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50px;padding:6px 14px 6px 10px}\n.karachi-widget .kw-pin{font-size:13px}\n.karachi-widget .kw-loc-text{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;color:#c8e8ff;font-weight:500}\n.karachi-widget .kw-live-dot{width:7px;height:7px;border-radius:50%;background:#48d597;box-shadow:0 0 6px #48d597;animation:kwBlink 1.5s ease-in-out infinite;margin-left:4px}\n@keyframes kwBlink{0%,100%{opacity:1}50%{opacity:.3}}\n.karachi-widget .kw-datetime{font-size:11px;color:#7aafd4;letter-spacing:.5px;text-align:right;line-height:1.5;font-weight:normal}\n.karachi-widget .kw-datetime strong{font-weight:700;color:#fff}\n.karachi-widget .kw-main-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:1}\n.karachi-widget .kw-big-temp{font-family:'Oswald',sans-serif;font-size:clamp(60px,12vw,110px);font-weight:700;line-height:.9;color:#fff;letter-spacing:-3px;text-shadow:0 0 60px rgba(77,168,245,.5)}\n.karachi-widget .kw-big-temp sup{font-size:clamp(20px,5vw,38px);vertical-align:super;margin-left:4px;color:#c8e8ff}\n.karachi-widget .kw-condition-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}\n.karachi-widget .kw-cond-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:4px 12px;font-size:13px;font-weight:700;color:#fff}\n.karachi-widget .kw-feels{font-size:12px;color:#7aafd4;margin-top:8px}\n.karachi-widget .kw-feels span{color:#4da8f5;font-weight:700}\n.karachi-widget .kw-icon-block{text-align:center;padding-top:8px}\n.karachi-widget .kw-main-icon{font-size:clamp(65px,12vw,100px);line-height:1;display:block;filter:drop-shadow(0 0 30px rgba(245,168,0,.5));animation:kwBob 3s ease-in-out infinite}\n@keyframes kwBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}\n.karachi-widget .kw-hi-lo{margin-top:6px;font-family:'Oswald',sans-serif;font-size:15px;color:#c8e8ff;letter-spacing:1px}\n.karachi-widget .kw-hi{color:#ffcd57}\n.karachi-widget .kw-slash{color:#3d6fa0}\n.karachi-widget .kw-lo{color:#7aafd4}\n.karachi-widget .kw-stats{display:flex;margin-top:22px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;position:relative;z-index:1}\n.karachi-widget .kw-stat{flex:1;min-width:80px;text-align:center;padding:14px 6px;position:relative}\n.karachi-widget .kw-stat:hover{background:rgba(255,255,255,.05)}\n.karachi-widget .kw-stat+.kw-stat::before{content:'';position:absolute;left:0;top:15%;height:70%;width:1px;background:rgba(255,255,255,.1)}\n.karachi-widget .kw-stat-ico{font-size:18px;margin-bottom:4px}\n.karachi-widget .kw-stat-v{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:#fff}\n.karachi-widget .kw-stat-l{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#7aafd4;margin-top:2px}\n.karachi-widget .kw-tabs-wrap{background:rgba(10,22,40,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);display:flex;padding:0 12px;overflow-x:auto;scrollbar-width:none}\n.karachi-widget .kw-tabs-wrap::-webkit-scrollbar{display:none}\n.karachi-widget .kw-tab{font-family:'Oswald',sans-serif;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#3d6fa0;padding:14px 16px;border:none;background:transparent;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}\n.karachi-widget .kw-tab:hover{color:#c8e8ff}\n.karachi-widget .kw-tab.kw-on{color:#f5a800;border-bottom-color:#f5a800}\n.karachi-widget .kw-body-wrap{background:linear-gradient(180deg,#0d2147 0%,#0a1628 100%)}\n.karachi-widget .kw-panel{display:none;padding:20px;animation:kwFadeIn .3s ease}\n.karachi-widget .kw-panel.kw-on{display:block}\n@keyframes kwFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}\n.karachi-widget .kw-h-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}\n.karachi-widget .kw-h-scroll::-webkit-scrollbar{height:4px}\n.karachi-widget .kw-h-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}\n.karachi-widget .kw-hc{flex:0 0 70px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 4px;text-align:center}\n.karachi-widget .kw-hc:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}\n.karachi-widget .kw-hc.kw-now{background:linear-gradient(160deg,rgba(245,168,0,.18),rgba(77,168,245,.1));border-color:rgba(245,168,0,.5)}\n.karachi-widget .kw-hc-t{font-size:10px;font-weight:700;color:#7aafd4;letter-spacing:.5px;margin-bottom:5px}\n.karachi-widget .kw-hc.kw-now .kw-hc-t{color:#f5a800;font-size:11px}\n.karachi-widget .kw-hc-i{font-size:22px;line-height:1;margin-bottom:4px}\n.karachi-widget .kw-hc-temp{font-family:'Oswald',sans-serif;font-size:15px;font-weight:600;color:#fff}\n.karachi-widget .kw-hc-rain{font-size:9px;color:#4da8f5;margin-top:3px}\n.karachi-widget .kw-dlist{display:flex;flex-direction:column;gap:8px}\n.karachi-widget .kw-dr{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 16px;flex-wrap:wrap}\n.karachi-widget .kw-dr:hover{background:rgba(255,255,255,.09)}\n.karachi-widget .kw-dr.kw-today{border-color:rgba(245,168,0,.35);background:rgba(245,168,0,.06)}\n.karachi-widget .kw-dr-name{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;color:#fff;width:46px;letter-spacing:.5px}\n.karachi-widget .kw-dr.kw-today .kw-dr-name{color:#f5a800}\n.karachi-widget .kw-dr-ico{font-size:24px;width:34px;text-align:center}\n.karachi-widget .kw-dr-desc{flex:1;font-size:12px;color:#7aafd4;white-space:nowrap;overflow-x:auto}\n.karachi-widget .kw-dr-rain{font-size:11px;color:#4da8f5;background:rgba(77,168,245,.1);border:1px solid rgba(77,168,245,.2);border-radius:6px;padding:2px 8px;white-space:nowrap}\n.karachi-widget .kw-tbar-wrap{width:70px;flex-shrink:0}\n.karachi-widget .kw-tbar-bg{height:4px;background:rgba(255,255,255,.07);border-radius:2px;position:relative;overflow:hidden}\n.karachi-widget .kw-tbar-seg{position:absolute;height:100%;border-radius:2px;background:linear-gradient(90deg,#4da8f5,#f5a800)}\n.karachi-widget .kw-dr-temps{font-family:'Oswald',sans-serif;font-size:14px;display:flex;gap:5px;align-items:center;flex-shrink:0}\n.karachi-widget .kw-t-hi{color:#fff;font-weight:600}\n.karachi-widget .kw-t-sl{color:#3d6fa0}\n.karachi-widget .kw-t-lo{color:#7aafd4}\n.karachi-widget .kw-footer{background:rgba(10,22,40,.8);border-top:1px solid rgba(255,255,255,.1);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}\n.karachi-widget .kw-ft-note{font-size:11px;color:#3d6fa0}\n.karachi-widget .kw-ft-note a{color:#4da8f5;text-decoration:none}\n.karachi-widget .kw-ft-badge{font-size:10px;letter-spacing:1px;text-transform:uppercase;background:rgba(245,168,0,.12);border:1px solid rgba(245,168,0,.25);color:#f5a800;border-radius:6px;padding:4px 10px}\n.footer{background:#0a1628;border-top:1px solid rgba(255,255,255,0.07);text-align:center;padding:12px 20px;font-size:12px;color:#3d6fa0;margin-top:0}\n.footer a{color:#4da8f5;text-decoration:none}\n\/* AdSense safe: responsive and no content overlap *\/\n@media (max-width:480px){.karachi-widget .kw-hero{padding:20px 16px 0}\n.karachi-widget .kw-panel{padding:14px}\n.karachi-widget .kw-tabs-wrap{padding:0 8px}\n.karachi-widget .kw-tab{padding:12px 10px;font-size:11px;letter-spacing:1px}\n.karachi-widget .kw-dr-desc{display:none}\n.karachi-widget .kw-dr-name{width:40px;font-size:12px}\n.karachi-widget .kw-dr-ico{font-size:20px;width:28px}\n.karachi-widget .kw-tbar-wrap{width:50px}\n.karachi-widget .kw-dr-temps{font-size:12px}\n.karachi-widget .kw-hc{flex:0 0 62px}\n.karachi-widget .kw-hc-temp{font-size:14px}\n.karachi-widget .kw-hc-i{font-size:20px}\n.karachi-widget .kw-stat .kw-stat-v{font-size:14px}\n.karachi-widget .kw-search-input{width:160px;font-size:12px;padding:8px 12px}\n.karachi-widget .kw-search-btn{padding:6px 14px}}\n<\/style>\n<\/head>\n<body>\n<header class=\"page-header\">\n<h1>\ud83c\uddf5\ud83c\uddf0 Pakistan Weather<\/h1>\n<p>Live forecasts for Karachi, Lahore, Islamabad \u2013 Accurate, real\u2011time data<\/p>\n<\/header>\n<div class=\"converter-bar\">\n<span class=\"converter-label\">\ud83c\udf21\ufe0f Temperature unit:<\/span>\n<div class=\"unit-toggle\">\n<button id=\"unitCelsius\" class=\"unit-btn active\">\u00b0Celsius<\/button>\n<button id=\"unitFahrenheit\" class=\"unit-btn\">\u00b0Fahrenheit<\/button>\n<\/div>\n<\/div>\n<main class=\"page-main\">\n\n<div class=\"widget-container\"><div id=\"karachiWidget\" class=\"karachi-widget\"><\/div><\/div>\n\n<div class=\"widget-container\"><div id=\"lahoreWidget\" class=\"karachi-widget\"><\/div><\/div>\n<div class=\"widget-container\"><div id=\"islamabadWidget\" class=\"karachi-widget\"><\/div><\/div>\n<\/main>\n<footer class=\"footer\">\n<p>\u00a9 2026 Pakistan Weather \u2013 Real\u2011time forecasts from open-meteo.com | <a href=\"#\">Privacy<\/a> | <a href=\"#\">Contact<\/a><\/p>\n<\/footer>\n<script>\nconst wmoMap={0:{icon:\"\u2600\ufe0f\",desc:\"Clear sky\"},1:{icon:\"\ud83c\udf24\ufe0f\",desc:\"Mainly clear\"},2:{icon:\"\u26c5\",desc:\"Partly cloudy\"},3:{icon:\"\u2601\ufe0f\",desc:\"Overcast\"},45:{icon:\"\ud83c\udf2b\ufe0f\",desc:\"Fog\"},48:{icon:\"\ud83c\udf2b\ufe0f\",desc:\"Fog\"},51:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Drizzle\"},53:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Drizzle\"},55:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Drizzle\"},61:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain\"},63:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain\"},65:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain\"},80:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain showers\"},81:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain showers\"},82:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain showers\"},95:{icon:\"\u26c8\ufe0f\",desc:\"Thunderstorm\"},96:{icon:\"\u26c8\ufe0f\",desc:\"Thunderstorm\"},99:{icon:\"\u26c8\ufe0f\",desc:\"Thunderstorm\"}};\nfunction getWeather(code){return wmoMap[code]||{icon:\"\ud83c\udf21\ufe0f\",desc:\"Variable\"}}\nasync function fetchWeatherByCoords(lat,lon){const url=`https:\/\/api.open-meteo.com\/v1\/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,precipitation_probability,weathercode,windspeed_10m&daily=weathercode,temperature_2m_max,temperature_2m_min,sunrise,sunset,precipitation_probability_max&timezone=auto&forecast_days=7`;const res=await fetch(url);if(!res.ok)throw new Error(`HTTP ${res.status}`);const data=await res.json();if(!data.current_weather)throw new Error(\"No current weather\");return data}\nasync function getPakistanCityCoordinates(cityName){const geoUrl=`https:\/\/geocoding-api.open-meteo.com\/v1\/search?name=${encodeURIComponent(cityName)}&count=10&language=en&format=json`;const res=await fetch(geoUrl);const data=await res.json();if(!data.results||data.results.length===0)throw new Error(\"City not found\");const pkResult=data.results.find(r=>r.country_code===\"PK\");if(!pkResult)throw new Error(\"City not found in Pakistan\");return{lat:pkResult.latitude,lon:pkResult.longitude,name:pkResult.name,country:pkResult.country}}\nfunction getDayNightIcon(sunriseISO,sunsetISO){const now=new Date();if(sunriseISO&&sunsetISO){const sunrise=new Date(sunriseISO);const sunset=new Date(sunsetISO);if(now>=sunrise&&now<=sunset)return\"\u2600\ufe0f\";else return\"\ud83c\udf19\"}const hour=now.getHours();return(hour>=6&&hour<18)?\"\u2600\ufe0f\":\"\ud83c\udf19\"}\nclass WeatherWidget{constructor(containerId,cityName,lat,lon){this.containerId=containerId;this.cityName=cityName;this.lat=lat;this.lon=lon;this.currentWeatherData=null;this.hourlyData=null;this.dailyData=null;this.currentTempCelsius=null;this.currentFeelsCelsius=null;this.currentHighCelsius=null;this.currentLowCelsius=null;this.useFahrenheit=false;this.init()}\nasync init(){await this.fetchData();this.renderHTML();this.updateUI();this.startDateTimeUpdater();this.addParticles()}\nasync fetchData(){try{const weatherData=await fetchWeatherByCoords(this.lat,this.lon);this.currentWeatherData=weatherData.current_weather;this.hourlyData=weatherData.hourly;this.dailyData=weatherData.daily;this.currentTempCelsius=Math.round(this.currentWeatherData.temperature);this.currentFeelsCelsius=this.currentTempCelsius;if(this.dailyData&&this.dailyData.temperature_2m_max[0]){this.currentHighCelsius=Math.round(this.dailyData.temperature_2m_max[0]);this.currentLowCelsius=Math.round(this.dailyData.temperature_2m_min[0])}}catch(err){console.error(`Error fetching weather for ${this.cityName}:`,err)}}\nrenderHTML(){const container=document.getElementById(this.containerId);if(!container)return;container.innerHTML=`<div class=\"kw\"><div class=\"kw-hero\"><div class=\"kw-particles\" id=\"particles-${this.containerId}\"><\/div><div class=\"kw-search-wrap\"><input type=\"text\" id=\"search-${this.containerId}\" class=\"kw-search-input\" placeholder=\"Search city in Pakistan...\" value=\"${this.cityName}\"><button id=\"searchBtn-${this.containerId}\" class=\"kw-search-btn\">\ud83d\udd0d<\/button><\/div><div class=\"kw-top-bar\"><div class=\"kw-location-pill\"><span class=\"kw-pin\">\ud83d\udccd<\/span><span class=\"kw-loc-text\" id=\"loc-${this.containerId}\">${this.cityName.toUpperCase()}, PAKISTAN<\/span><div class=\"kw-live-dot\"><\/div><\/div><div class=\"kw-datetime\" id=\"datetime-${this.containerId}\"><\/div><\/div><div class=\"kw-main-row\"><div class=\"kw-temp-block\"><div class=\"kw-big-temp\" id=\"temp-${this.containerId}\">--<sup>\u00b0C<\/sup><\/div><div class=\"kw-condition-row\"><div class=\"kw-cond-badge\" id=\"cond-${this.containerId}\">Loading<\/div><\/div><div class=\"kw-feels\" id=\"feels-${this.containerId}\">RealFeel\u00ae <span>--\u00b0C<\/span><\/div><\/div><div class=\"kw-icon-block\"><span class=\"kw-main-icon\" id=\"icon-${this.containerId}\">\u26c5<\/span><div class=\"kw-hi-lo\" id=\"hilo-${this.containerId}\"><span class=\"kw-hi\">--\u00b0<\/span><span class=\"kw-slash\"> \/ <\/span><span class=\"kw-lo\">--\u00b0<\/span><\/div><\/div><\/div><div class=\"kw-stats\"><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83d\udca7<\/div><div class=\"kw-stat-v\" id=\"hum-${this.containerId}\">--%<\/div><div class=\"kw-stat-l\">Humidity<\/div><\/div><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83c\udf2c\ufe0f<\/div><div class=\"kw-stat-v\" id=\"wind-${this.containerId}\">-- km\/h<\/div><div class=\"kw-stat-l\">Wind<\/div><\/div><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83d\udc41\ufe0f<\/div><div class=\"kw-stat-v\">\u2014<\/div><div class=\"kw-stat-l\">Visibility<\/div><\/div><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83c\udf21\ufe0f<\/div><div class=\"kw-stat-v\">\u2014 hPa<\/div><div class=\"kw-stat-l\">Pressure<\/div><\/div><\/div><\/div><div class=\"kw-tabs-wrap\"><button class=\"kw-tab kw-on\" onclick=\"window.widgets['${this.containerId}'].switchTab('hourly',this)\">Hourly<\/button><button class=\"kw-tab\" onclick=\"window.widgets['${this.containerId}'].switchTab('daily',this)\">Daily<\/button><button class=\"kw-tab\" onclick=\"window.widgets['${this.containerId}'].switchTab('weekly',this)\">Weekly<\/button><\/div><div class=\"kw-body-wrap\"><div class=\"kw-panel kw-on\" id=\"hourlyPanel-${this.containerId}\"><div class=\"kw-h-scroll\" id=\"hourlyScroll-${this.containerId}\"><\/div><\/div><div class=\"kw-panel\" id=\"dailyPanel-${this.containerId}\"><div class=\"kw-dlist\" id=\"dailyList-${this.containerId}\"><\/div><\/div><div class=\"kw-panel\" id=\"weeklyPanel-${this.containerId}\"><div class=\"kw-dlist\" id=\"weeklyList-${this.containerId}\"><\/div><\/div><\/div><div class=\"kw-footer\"><div class=\"kw-ft-note\">Powered by <a href=\"https:\/\/karachiweather.com\" target=\"_blank\" rel=\"nofollow\">KarachiWeather.com<\/a> \u00b7 Live Data<\/div><div class=\"kw-ft-badge\">\u26a1 Live Forecast<\/div><\/div><\/div>`;const searchInput=document.getElementById(`search-${this.containerId}`);const searchBtn=document.getElementById(`searchBtn-${this.containerId}`);if(searchInput&&searchBtn){const handler=async()=>{const city=searchInput.value.trim();if(city){try{const coords=await getPakistanCityCoordinates(city);this.lat=coords.lat;this.lon=coords.lon;this.cityName=coords.name;await this.fetchData();this.updateUI();document.getElementById(`loc-${this.containerId}`).innerText=`${coords.name.toUpperCase()}, PAKISTAN`}catch(e){console.error(e);document.getElementById(`cond-${this.containerId}`).innerText=e.message}}};searchBtn.addEventListener('click',handler);searchInput.addEventListener('keypress',(e)=>{if(e.key==='Enter')handler()})}}\nupdateUI(){if(!this.currentWeatherData||!this.dailyData)return;const cur=this.currentWeatherData;const wInfo=getWeather(cur.weathercode);const dayNight=getDayNightIcon(this.dailyData.sunrise?.[0],this.dailyData.sunset?.[0]);document.getElementById(`icon-${this.containerId}`).innerHTML=dayNight;document.getElementById(`cond-${this.containerId}`).innerText=wInfo.desc;document.getElementById(`hum-${this.containerId}`).innerText=this.hourlyData?.relativehumidity_2m?.[0]?`${this.hourlyData.relativehumidity_2m[0]}%`:'--%';document.getElementById(`wind-${this.containerId}`).innerHTML=`${Math.round(cur.windspeed)} km\/h`;this.currentTempCelsius=Math.round(cur.temperature);this.currentFeelsCelsius=this.currentTempCelsius;if(this.dailyData.temperature_2m_max[0]){this.currentHighCelsius=Math.round(this.dailyData.temperature_2m_max[0]);this.currentLowCelsius=Math.round(this.dailyData.temperature_2m_min[0])}this.applyUnitConversion(this.useFahrenheit);this.buildHourly();this.buildDaily();this.buildWeekly()}\napplyUnitConversion(useF){this.useFahrenheit=useF;const tempSpan=document.getElementById(`temp-${this.containerId}`);const feelsSpan=document.querySelector(`#feels-${this.containerId} span`);const hiSpan=document.querySelector(`#hilo-${this.containerId} .kw-hi`);const loSpan=document.querySelector(`#hilo-${this.containerId} .kw-lo`);if(!tempSpan)return;if(this.currentTempCelsius!==null){if(useF){let f=Math.round(this.currentTempCelsius*9\/5+32);let feelsF=Math.round(this.currentFeelsCelsius*9\/5+32);tempSpan.innerHTML=`${f}<sup>\u00b0F<\/sup>`;if(feelsSpan)feelsSpan.innerText=`${feelsF}\u00b0F`;if(hiSpan&&loSpan&&this.currentHighCelsius!==null){hiSpan.innerText=`${Math.round(this.currentHighCelsius*9\/5+32)}\u00b0`;loSpan.innerText=`${Math.round(this.currentLowCelsius*9\/5+32)}\u00b0`}document.querySelectorAll(`#hourlyScroll-${this.containerId} .kw-hc-temp`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round(val*9\/5+32)}\u00b0`});document.querySelectorAll(`#dailyList-${this.containerId} .kw-dr-temps .kw-t-hi, #dailyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round(val*9\/5+32)}\u00b0`});document.querySelectorAll(`#weeklyList-${this.containerId} .kw-dr-temps .kw-t-hi, #weeklyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round(val*9\/5+32)}\u00b0`})}else{tempSpan.innerHTML=`${this.currentTempCelsius}<sup>\u00b0C<\/sup>`;if(feelsSpan)feelsSpan.innerText=`${this.currentFeelsCelsius}\u00b0C`;if(hiSpan&&loSpan){hiSpan.innerText=`${this.currentHighCelsius}\u00b0`;loSpan.innerText=`${this.currentLowCelsius}\u00b0`}document.querySelectorAll(`#hourlyScroll-${this.containerId} .kw-hc-temp`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round((val-32)*5\/9)}\u00b0`});document.querySelectorAll(`#dailyList-${this.containerId} .kw-dr-temps .kw-t-hi, #dailyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round((val-32)*5\/9)}\u00b0`});document.querySelectorAll(`#weeklyList-${this.containerId} .kw-dr-temps .kw-t-hi, #weeklyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round((val-32)*5\/9)}\u00b0`})}}}\nbuildHourly(){const container=document.getElementById(`hourlyScroll-${this.containerId}`);if(!container||!this.hourlyData)return;const now=new Date();const currentHour=now.getHours();const times=this.hourlyData.time;const temps=this.hourlyData.temperature_2m;const codes=this.hourlyData.weathercode;const rainProbs=this.hourlyData.precipitation_probability;let html=\"\";let startIdx=times.findIndex(t=>new Date(t).getHours()>=currentHour);if(startIdx===-1)startIdx=0;for(let i=startIdx;i<Math.min(startIdx+24,times.length);i++){const dt=new Date(times[i]);let label=dt.getHours()+\":00\";if(i===startIdx)label=\"NOW\";const temp=Math.round(temps[i]);const w=getWeather(codes[i]);const rain=rainProbs?Math.round(rainProbs[i]):0;const isNow=(i===startIdx);html+=`<div class=\"kw-hc ${isNow?'kw-now':''}\"><div class=\"kw-hc-t\">${label}<\/div><div class=\"kw-hc-i\">${w.icon}<\/div><div class=\"kw-hc-temp\">${temp}\u00b0<\/div><div class=\"kw-hc-rain\">\ud83d\udca7 ${rain}%<\/div><\/div>`}container.innerHTML=html;if(this.useFahrenheit)this.applyUnitConversion(true)}\nbuildDaily(){const container=document.getElementById(`dailyList-${this.containerId}`);if(!container||!this.dailyData)return;const days=[\"Today\",\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"];const today=new Date().getDay();let html=\"\";for(let i=0;i<this.dailyData.time.length;i++){const dayIdx=(today+i)%7;let name=i===0?\"Today\":days[dayIdx];const w=getWeather(this.dailyData.weathercode[i]);const hi=Math.round(this.dailyData.temperature_2m_max[i]);const lo=Math.round(this.dailyData.temperature_2m_min[i]);const rain=this.dailyData.precipitation_probability_max?Math.round(this.dailyData.precipitation_probability_max[i]):0;const barWidth=((hi-lo)\/25)*100;const left=(lo\/45)*100;html+=`<div class=\"kw-dr ${i===0?'kw-today':''}\"><div class=\"kw-dr-name\">${name}<\/div><div class=\"kw-dr-ico\">${w.icon}<\/div><div class=\"kw-dr-desc\">${w.desc}<\/div><div class=\"kw-dr-rain\">\ud83d\udca7 ${rain}%<\/div><div class=\"kw-tbar-wrap\"><div class=\"kw-tbar-bg\"><div class=\"kw-tbar-seg\" style=\"left:${Math.min(100,left)}%;width:${Math.min(100,barWidth)}%\"><\/div><\/div><\/div><div class=\"kw-dr-temps\"><span class=\"kw-t-hi\">${hi}\u00b0<\/span><span class=\"kw-t-sl\">\/<\/span><span class=\"kw-t-lo\">${lo}\u00b0<\/span><\/div><\/div>`}container.innerHTML=html;if(this.useFahrenheit)this.applyUnitConversion(true)}\nbuildWeekly(){const container=document.getElementById(`weeklyList-${this.containerId}`);if(!container||!this.dailyData)return;const days=[\"Today\",\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"];const today=new Date().getDay();let html=\"\";for(let i=0;i<this.dailyData.time.length;i++){const dayIdx=(today+i)%7;let name=i===0?\"Today\":days[dayIdx];const w=getWeather(this.dailyData.weathercode[i]);const hi=Math.round(this.dailyData.temperature_2m_max[i]);const lo=Math.round(this.dailyData.temperature_2m_min[i]);const rain=this.dailyData.precipitation_probability_max?Math.round(this.dailyData.precipitation_probability_max[i]):0;const barWidth=((hi-lo)\/25)*100;const left=(lo\/45)*100;html+=`<div class=\"kw-dr ${i===0?'kw-today':''}\"><div class=\"kw-dr-name\">${name}<\/div><div class=\"kw-dr-ico\">${w.icon}<\/div><div class=\"kw-dr-desc\">${w.desc}<\/div><div class=\"kw-dr-rain\">\ud83d\udca7 ${rain}%<\/div><div class=\"kw-tbar-wrap\"><div class=\"kw-tbar-bg\"><div class=\"kw-tbar-seg\" style=\"left:${Math.min(100,left)}%;width:${Math.min(100,barWidth)}%\"><\/div><\/div><\/div><div class=\"kw-dr-temps\"><span class=\"kw-t-hi\">${hi}\u00b0<\/span><span class=\"kw-t-sl\">\/<\/span><span class=\"kw-t-lo\">${lo}\u00b0<\/span><\/div><\/div>`}container.innerHTML=html;if(this.useFahrenheit)this.applyUnitConversion(true)}\nswitchTab(tab,el){const panels=['hourlyPanel','dailyPanel','weeklyPanel'];panels.forEach(p=>{const panel=document.getElementById(`${p}-${this.containerId}`);if(panel)panel.classList.remove('kw-on')});document.getElementById(`${tab}Panel-${this.containerId}`).classList.add('kw-on');const tabs=document.querySelectorAll(`#${this.containerId} .kw-tab`);tabs.forEach(t=>t.classList.remove('kw-on'));el.classList.add('kw-on')}\nstartDateTimeUpdater(){const update=()=>{const d=new Date();const days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];const months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];let h=d.getHours(),m=d.getMinutes();const ap=h>=12?'PM':'AM';h=h%12||12;const dateStr=`${days[d.getDay()]}, ${months[d.getMonth()]} ${d.getDate()}`;const timeStr=`${h}:${String(m).padStart(2,'0')} ${ap} PK`;const elem=document.getElementById(`datetime-${this.containerId}`);if(elem)elem.innerHTML=`<strong>${dateStr}<\/strong><br><strong>${timeStr}<\/strong>`};update();setInterval(update,30000)}\naddParticles(){const container=document.getElementById(`particles-${this.containerId}`);if(!container)return;for(let i=0;i<18;i++){const p=document.createElement('div');p.className='kw-p';const sz=Math.random()*4+2;p.style.cssText=`width:${sz}px;height:${sz}px;left:${Math.random()*100}%;bottom:${Math.random()*30}%;animation-duration:${Math.random()*6+5}s;animation-delay:${Math.random()*6}s;opacity:${Math.random()*.5+.1}`;container.appendChild(p)}}}\nwindow.widgets={};\nconst karachiCoords={lat:24.8607,lon:67.0011};\nconst lahoreCoords={lat:31.5497,lon:74.3436};\nconst islamabadCoords={lat:33.6844,lon:73.0479};\nwindow.widgets['karachiWidget']=new WeatherWidget('karachiWidget','Karachi',karachiCoords.lat,karachiCoords.lon);\nwindow.widgets['lahoreWidget']=new WeatherWidget('lahoreWidget','Lahore',lahoreCoords.lat,lahoreCoords.lon);\nwindow.widgets['islamabadWidget']=new WeatherWidget('islamabadWidget','Islamabad',islamabadCoords.lat,islamabadCoords.lon);\nlet currentUnit='C';\nfunction setUnit(unit){currentUnit=unit;const useF=(unit==='F');for(let key in window.widgets){window.widgets[key].applyUnitConversion(useF)}const btnC=document.getElementById('unitCelsius');const btnF=document.getElementById('unitFahrenheit');if(unit==='C'){btnC.classList.add('active');btnF.classList.remove('active')}else{btnF.classList.add('active');btnC.classList.remove('active')}localStorage.setItem('tempUnit',unit)}\ndocument.getElementById('unitCelsius').addEventListener('click',()=>setUnit('C'));\ndocument.getElementById('unitFahrenheit').addEventListener('click',()=>setUnit('F'));\nconst savedUnit=localStorage.getItem('tempUnit');\nif(savedUnit==='F')setUnit('F');else setUnit('C');\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pakistan Weather \u2013 Live Forecasts for Karachi, Lahore & Islamabad \ud83c\uddf5\ud83c\uddf0 Pakistan Weather Live forecasts for Karachi, Lahore, Islamabad \u2013 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-628","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/karachiweather.com\/author\/admin_fo35f74w\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Pakistan Weather \u2013 Live Forecasts for Karachi, Lahore & Islamabad \ud83c\uddf5\ud83c\uddf0 Pakistan Weather Live forecasts for Karachi, Lahore, Islamabad \u2013 […]","_links":{"self":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages\/628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/comments?post=628"}],"version-history":[{"count":24,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages\/628\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages\/628\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/media?parent=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\n\n\n\nPakistan Weather \u2013 Live Forecasts for Karachi, Lahore & Islamabad<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@300;400;600;700;800&family=Oswald:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* RESET & BASE \u2013 AdSense safe *\/\n*{margin:0;padding:0;box-sizing:border-box}\nbody{background:#0a1628;font-family:'Nunito',sans-serif;min-height:100vh;display:flex;flex-direction:column}\n\/* Header *\/\n.page-header{background:linear-gradient(135deg,#0d2a5e,#0f3a8a);padding:16px 24px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.1)}\n.page-header h1{font-family:'Oswald',sans-serif;font-size:26px;font-weight:600;color:#fff}\n.page-header p{font-size:13px;color:#c8e8ff;margin-top:4px}\n\/* Unit converter *\/\n.converter-bar{background:rgba(10,22,40,0.8);backdrop-filter:blur(8px);padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,0.1)}\n.converter-label{font-size:14px;font-weight:600;color:#c8e8ff}\n.unit-toggle{display:flex;background:rgba(0,0,0,0.4);border-radius:40px;padding:4px;gap:4px}\n.unit-btn{background:transparent;border:none;padding:6px 20px;border-radius:30px;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;cursor:pointer;color:#7aafd4;transition:0.2s}\n.unit-btn.active{background:#4da8f5;color:#0a1628;box-shadow:0 0 6px rgba(77,168,245,0.5)}\n\/* MAIN \u2013 NO GAPS BETWEEN WIDGETS *\/\n.page-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;margin:0}\n.widget-container{width:100%;max-width:100%;margin:0;padding:0;display:block}\n\/* AdSense hint: place ads between widgets if desired \u2013 e.g., <div class=\"adsense-container\">... code ...<\/div> *\/\n\/* Widget styles (compact, no overlapping) *\/\n.karachi-widget{font-family:'Nunito',sans-serif;display:block;width:100%;margin:0;padding:0}\n.karachi-widget .kw{width:100%;margin:0;border-radius:0;overflow-x:hidden;box-shadow:none;background:linear-gradient(180deg,#0d2147 0%,#0a1628 100%)}\n.karachi-widget .kw-hero{background:linear-gradient(160deg,#0d2a5e 0%,#0f3a8a 40%,#1a5bba 100%);padding:28px 20px 0;position:relative;overflow:hidden}\n.karachi-widget .kw-search-wrap{display:flex;justify-content:center;gap:8px;margin-bottom:16px;position:relative;z-index:2}\n.karachi-widget .kw-search-input{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);border-radius:40px;padding:10px 18px;font-size:14px;color:#fff;width:200px;outline:none;transition:0.2s}\n.karachi-widget .kw-search-input::placeholder{color:rgba(255,255,255,0.6)}\n.karachi-widget .kw-search-input:focus{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5)}\n.karachi-widget .kw-search-btn{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:40px;padding:8px 18px;font-size:14px;color:#fff;cursor:pointer;transition:0.2s}\n.karachi-widget .kw-search-btn:hover{background:rgba(255,255,255,0.35)}\n.karachi-widget .kw-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;background:radial-gradient(circle,rgba(77,168,245,.22) 0%,transparent 70%);border-radius:50%;animation:kwPulse 4s ease-in-out infinite}\n.karachi-widget .kw-hero::after{content:'';position:absolute;bottom:-60px;left:-60px;width:260px;height:260px;background:radial-gradient(circle,rgba(245,168,0,.13) 0%,transparent 70%);border-radius:50%;animation:kwPulse 5s ease-in-out 1s infinite}\n@keyframes kwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}\n.karachi-widget .kw-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}\n.karachi-widget .kw-p{position:absolute;border-radius:50%;background:rgba(255,255,255,.25);animation:kwDrift linear infinite}\n@keyframes kwDrift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:.5}100%{transform:translateY(-120px) translateX(20px);opacity:0}}\n.karachi-widget .kw-top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px;position:relative;z-index:1}\n.karachi-widget .kw-location-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50px;padding:6px 14px 6px 10px}\n.karachi-widget .kw-pin{font-size:13px}\n.karachi-widget .kw-loc-text{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;color:#c8e8ff;font-weight:500}\n.karachi-widget .kw-live-dot{width:7px;height:7px;border-radius:50%;background:#48d597;box-shadow:0 0 6px #48d597;animation:kwBlink 1.5s ease-in-out infinite;margin-left:4px}\n@keyframes kwBlink{0%,100%{opacity:1}50%{opacity:.3}}\n.karachi-widget .kw-datetime{font-size:11px;color:#7aafd4;letter-spacing:.5px;text-align:right;line-height:1.5;font-weight:normal}\n.karachi-widget .kw-datetime strong{font-weight:700;color:#fff}\n.karachi-widget .kw-main-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:1}\n.karachi-widget .kw-big-temp{font-family:'Oswald',sans-serif;font-size:clamp(60px,12vw,110px);font-weight:700;line-height:.9;color:#fff;letter-spacing:-3px;text-shadow:0 0 60px rgba(77,168,245,.5)}\n.karachi-widget .kw-big-temp sup{font-size:clamp(20px,5vw,38px);vertical-align:super;margin-left:4px;color:#c8e8ff}\n.karachi-widget .kw-condition-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}\n.karachi-widget .kw-cond-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:4px 12px;font-size:13px;font-weight:700;color:#fff}\n.karachi-widget .kw-feels{font-size:12px;color:#7aafd4;margin-top:8px}\n.karachi-widget .kw-feels span{color:#4da8f5;font-weight:700}\n.karachi-widget .kw-icon-block{text-align:center;padding-top:8px}\n.karachi-widget .kw-main-icon{font-size:clamp(65px,12vw,100px);line-height:1;display:block;filter:drop-shadow(0 0 30px rgba(245,168,0,.5));animation:kwBob 3s ease-in-out infinite}\n@keyframes kwBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}\n.karachi-widget .kw-hi-lo{margin-top:6px;font-family:'Oswald',sans-serif;font-size:15px;color:#c8e8ff;letter-spacing:1px}\n.karachi-widget .kw-hi{color:#ffcd57}\n.karachi-widget .kw-slash{color:#3d6fa0}\n.karachi-widget .kw-lo{color:#7aafd4}\n.karachi-widget .kw-stats{display:flex;margin-top:22px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;position:relative;z-index:1}\n.karachi-widget .kw-stat{flex:1;min-width:80px;text-align:center;padding:14px 6px;position:relative}\n.karachi-widget .kw-stat:hover{background:rgba(255,255,255,.05)}\n.karachi-widget .kw-stat+.kw-stat::before{content:'';position:absolute;left:0;top:15%;height:70%;width:1px;background:rgba(255,255,255,.1)}\n.karachi-widget .kw-stat-ico{font-size:18px;margin-bottom:4px}\n.karachi-widget .kw-stat-v{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:#fff}\n.karachi-widget .kw-stat-l{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#7aafd4;margin-top:2px}\n.karachi-widget .kw-tabs-wrap{background:rgba(10,22,40,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);display:flex;padding:0 12px;overflow-x:auto;scrollbar-width:none}\n.karachi-widget .kw-tabs-wrap::-webkit-scrollbar{display:none}\n.karachi-widget .kw-tab{font-family:'Oswald',sans-serif;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#3d6fa0;padding:14px 16px;border:none;background:transparent;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}\n.karachi-widget .kw-tab:hover{color:#c8e8ff}\n.karachi-widget .kw-tab.kw-on{color:#f5a800;border-bottom-color:#f5a800}\n.karachi-widget .kw-body-wrap{background:linear-gradient(180deg,#0d2147 0%,#0a1628 100%)}\n.karachi-widget .kw-panel{display:none;padding:20px;animation:kwFadeIn .3s ease}\n.karachi-widget .kw-panel.kw-on{display:block}\n@keyframes kwFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}\n.karachi-widget .kw-h-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}\n.karachi-widget .kw-h-scroll::-webkit-scrollbar{height:4px}\n.karachi-widget .kw-h-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}\n.karachi-widget .kw-hc{flex:0 0 70px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 4px;text-align:center}\n.karachi-widget .kw-hc:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}\n.karachi-widget .kw-hc.kw-now{background:linear-gradient(160deg,rgba(245,168,0,.18),rgba(77,168,245,.1));border-color:rgba(245,168,0,.5)}\n.karachi-widget .kw-hc-t{font-size:10px;font-weight:700;color:#7aafd4;letter-spacing:.5px;margin-bottom:5px}\n.karachi-widget .kw-hc.kw-now .kw-hc-t{color:#f5a800;font-size:11px}\n.karachi-widget .kw-hc-i{font-size:22px;line-height:1;margin-bottom:4px}\n.karachi-widget .kw-hc-temp{font-family:'Oswald',sans-serif;font-size:15px;font-weight:600;color:#fff}\n.karachi-widget .kw-hc-rain{font-size:9px;color:#4da8f5;margin-top:3px}\n.karachi-widget .kw-dlist{display:flex;flex-direction:column;gap:8px}\n.karachi-widget .kw-dr{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 16px;flex-wrap:wrap}\n.karachi-widget .kw-dr:hover{background:rgba(255,255,255,.09)}\n.karachi-widget .kw-dr.kw-today{border-color:rgba(245,168,0,.35);background:rgba(245,168,0,.06)}\n.karachi-widget .kw-dr-name{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;color:#fff;width:46px;letter-spacing:.5px}\n.karachi-widget .kw-dr.kw-today .kw-dr-name{color:#f5a800}\n.karachi-widget .kw-dr-ico{font-size:24px;width:34px;text-align:center}\n.karachi-widget .kw-dr-desc{flex:1;font-size:12px;color:#7aafd4;white-space:nowrap;overflow-x:auto}\n.karachi-widget .kw-dr-rain{font-size:11px;color:#4da8f5;background:rgba(77,168,245,.1);border:1px solid rgba(77,168,245,.2);border-radius:6px;padding:2px 8px;white-space:nowrap}\n.karachi-widget .kw-tbar-wrap{width:70px;flex-shrink:0}\n.karachi-widget .kw-tbar-bg{height:4px;background:rgba(255,255,255,.07);border-radius:2px;position:relative;overflow:hidden}\n.karachi-widget .kw-tbar-seg{position:absolute;height:100%;border-radius:2px;background:linear-gradient(90deg,#4da8f5,#f5a800)}\n.karachi-widget .kw-dr-temps{font-family:'Oswald',sans-serif;font-size:14px;display:flex;gap:5px;align-items:center;flex-shrink:0}\n.karachi-widget .kw-t-hi{color:#fff;font-weight:600}\n.karachi-widget .kw-t-sl{color:#3d6fa0}\n.karachi-widget .kw-t-lo{color:#7aafd4}\n.karachi-widget .kw-footer{background:rgba(10,22,40,.8);border-top:1px solid rgba(255,255,255,.1);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}\n.karachi-widget .kw-ft-note{font-size:11px;color:#3d6fa0}\n.karachi-widget .kw-ft-note a{color:#4da8f5;text-decoration:none}\n.karachi-widget .kw-ft-badge{font-size:10px;letter-spacing:1px;text-transform:uppercase;background:rgba(245,168,0,.12);border:1px solid rgba(245,168,0,.25);color:#f5a800;border-radius:6px;padding:4px 10px}\n.footer{background:#0a1628;border-top:1px solid rgba(255,255,255,0.07);text-align:center;padding:12px 20px;font-size:12px;color:#3d6fa0;margin-top:0}\n.footer a{color:#4da8f5;text-decoration:none}\n\/* AdSense safe: responsive and no content overlap *\/\n@media (max-width:480px){.karachi-widget .kw-hero{padding:20px 16px 0}\n.karachi-widget .kw-panel{padding:14px}\n.karachi-widget .kw-tabs-wrap{padding:0 8px}\n.karachi-widget .kw-tab{padding:12px 10px;font-size:11px;letter-spacing:1px}\n.karachi-widget .kw-dr-desc{display:none}\n.karachi-widget .kw-dr-name{width:40px;font-size:12px}\n.karachi-widget .kw-dr-ico{font-size:20px;width:28px}\n.karachi-widget .kw-tbar-wrap{width:50px}\n.karachi-widget .kw-dr-temps{font-size:12px}\n.karachi-widget .kw-hc{flex:0 0 62px}\n.karachi-widget .kw-hc-temp{font-size:14px}\n.karachi-widget .kw-hc-i{font-size:20px}\n.karachi-widget .kw-stat .kw-stat-v{font-size:14px}\n.karachi-widget .kw-search-input{width:160px;font-size:12px;padding:8px 12px}\n.karachi-widget .kw-search-btn{padding:6px 14px}}\n<\/style>\n<\/head>\n<body>\n<header class=\"page-header\">\n<h1>\ud83c\uddf5\ud83c\uddf0 Pakistan Weather<\/h1>\n<p>Live forecasts for Karachi, Lahore, Islamabad \u2013 Accurate, real\u2011time data<\/p>\n<\/header>\n<div class=\"converter-bar\">\n<span class=\"converter-label\">\ud83c\udf21\ufe0f Temperature unit:<\/span>\n<div class=\"unit-toggle\">\n<button id=\"unitCelsius\" class=\"unit-btn active\">\u00b0Celsius<\/button>\n<button id=\"unitFahrenheit\" class=\"unit-btn\">\u00b0Fahrenheit<\/button>\n<\/div>\n<\/div>\n<main class=\"page-main\">\n\n<div class=\"widget-container\"><div id=\"karachiWidget\" class=\"karachi-widget\"><\/div><\/div>\n\n<div class=\"widget-container\"><div id=\"lahoreWidget\" class=\"karachi-widget\"><\/div><\/div>\n<div class=\"widget-container\"><div id=\"islamabadWidget\" class=\"karachi-widget\"><\/div><\/div>\n<\/main>\n<footer class=\"footer\">\n<p>\u00a9 2026 Pakistan Weather \u2013 Real\u2011time forecasts from open-meteo.com | <a href=\"#\">Privacy<\/a> | <a href=\"#\">Contact<\/a><\/p>\n<\/footer>\n<script>\nconst wmoMap={0:{icon:\"\u2600\ufe0f\",desc:\"Clear sky\"},1:{icon:\"\ud83c\udf24\ufe0f\",desc:\"Mainly clear\"},2:{icon:\"\u26c5\",desc:\"Partly cloudy\"},3:{icon:\"\u2601\ufe0f\",desc:\"Overcast\"},45:{icon:\"\ud83c\udf2b\ufe0f\",desc:\"Fog\"},48:{icon:\"\ud83c\udf2b\ufe0f\",desc:\"Fog\"},51:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Drizzle\"},53:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Drizzle\"},55:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Drizzle\"},61:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain\"},63:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain\"},65:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain\"},80:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain showers\"},81:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain showers\"},82:{icon:\"\ud83c\udf27\ufe0f\",desc:\"Rain showers\"},95:{icon:\"\u26c8\ufe0f\",desc:\"Thunderstorm\"},96:{icon:\"\u26c8\ufe0f\",desc:\"Thunderstorm\"},99:{icon:\"\u26c8\ufe0f\",desc:\"Thunderstorm\"}};\nfunction getWeather(code){return wmoMap[code]||{icon:\"\ud83c\udf21\ufe0f\",desc:\"Variable\"}}\nasync function fetchWeatherByCoords(lat,lon){const url=`https:\/\/api.open-meteo.com\/v1\/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,precipitation_probability,weathercode,windspeed_10m&daily=weathercode,temperature_2m_max,temperature_2m_min,sunrise,sunset,precipitation_probability_max&timezone=auto&forecast_days=7`;const res=await fetch(url);if(!res.ok)throw new Error(`HTTP ${res.status}`);const data=await res.json();if(!data.current_weather)throw new Error(\"No current weather\");return data}\nasync function getPakistanCityCoordinates(cityName){const geoUrl=`https:\/\/geocoding-api.open-meteo.com\/v1\/search?name=${encodeURIComponent(cityName)}&count=10&language=en&format=json`;const res=await fetch(geoUrl);const data=await res.json();if(!data.results||data.results.length===0)throw new Error(\"City not found\");const pkResult=data.results.find(r=>r.country_code===\"PK\");if(!pkResult)throw new Error(\"City not found in Pakistan\");return{lat:pkResult.latitude,lon:pkResult.longitude,name:pkResult.name,country:pkResult.country}}\nfunction getDayNightIcon(sunriseISO,sunsetISO){const now=new Date();if(sunriseISO&&sunsetISO){const sunrise=new Date(sunriseISO);const sunset=new Date(sunsetISO);if(now>=sunrise&&now<=sunset)return\"\u2600\ufe0f\";else return\"\ud83c\udf19\"}const hour=now.getHours();return(hour>=6&&hour<18)?\"\u2600\ufe0f\":\"\ud83c\udf19\"}\nclass WeatherWidget{constructor(containerId,cityName,lat,lon){this.containerId=containerId;this.cityName=cityName;this.lat=lat;this.lon=lon;this.currentWeatherData=null;this.hourlyData=null;this.dailyData=null;this.currentTempCelsius=null;this.currentFeelsCelsius=null;this.currentHighCelsius=null;this.currentLowCelsius=null;this.useFahrenheit=false;this.init()}\nasync init(){await this.fetchData();this.renderHTML();this.updateUI();this.startDateTimeUpdater();this.addParticles()}\nasync fetchData(){try{const weatherData=await fetchWeatherByCoords(this.lat,this.lon);this.currentWeatherData=weatherData.current_weather;this.hourlyData=weatherData.hourly;this.dailyData=weatherData.daily;this.currentTempCelsius=Math.round(this.currentWeatherData.temperature);this.currentFeelsCelsius=this.currentTempCelsius;if(this.dailyData&&this.dailyData.temperature_2m_max[0]){this.currentHighCelsius=Math.round(this.dailyData.temperature_2m_max[0]);this.currentLowCelsius=Math.round(this.dailyData.temperature_2m_min[0])}}catch(err){console.error(`Error fetching weather for ${this.cityName}:`,err)}}\nrenderHTML(){const container=document.getElementById(this.containerId);if(!container)return;container.innerHTML=`<div class=\"kw\"><div class=\"kw-hero\"><div class=\"kw-particles\" id=\"particles-${this.containerId}\"><\/div><div class=\"kw-search-wrap\"><input type=\"text\" id=\"search-${this.containerId}\" class=\"kw-search-input\" placeholder=\"Search city in Pakistan...\" value=\"${this.cityName}\"><button id=\"searchBtn-${this.containerId}\" class=\"kw-search-btn\">\ud83d\udd0d<\/button><\/div><div class=\"kw-top-bar\"><div class=\"kw-location-pill\"><span class=\"kw-pin\">\ud83d\udccd<\/span><span class=\"kw-loc-text\" id=\"loc-${this.containerId}\">${this.cityName.toUpperCase()}, PAKISTAN<\/span><div class=\"kw-live-dot\"><\/div><\/div><div class=\"kw-datetime\" id=\"datetime-${this.containerId}\"><\/div><\/div><div class=\"kw-main-row\"><div class=\"kw-temp-block\"><div class=\"kw-big-temp\" id=\"temp-${this.containerId}\">--<sup>\u00b0C<\/sup><\/div><div class=\"kw-condition-row\"><div class=\"kw-cond-badge\" id=\"cond-${this.containerId}\">Loading<\/div><\/div><div class=\"kw-feels\" id=\"feels-${this.containerId}\">RealFeel\u00ae <span>--\u00b0C<\/span><\/div><\/div><div class=\"kw-icon-block\"><span class=\"kw-main-icon\" id=\"icon-${this.containerId}\">\u26c5<\/span><div class=\"kw-hi-lo\" id=\"hilo-${this.containerId}\"><span class=\"kw-hi\">--\u00b0<\/span><span class=\"kw-slash\"> \/ <\/span><span class=\"kw-lo\">--\u00b0<\/span><\/div><\/div><\/div><div class=\"kw-stats\"><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83d\udca7<\/div><div class=\"kw-stat-v\" id=\"hum-${this.containerId}\">--%<\/div><div class=\"kw-stat-l\">Humidity<\/div><\/div><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83c\udf2c\ufe0f<\/div><div class=\"kw-stat-v\" id=\"wind-${this.containerId}\">-- km\/h<\/div><div class=\"kw-stat-l\">Wind<\/div><\/div><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83d\udc41\ufe0f<\/div><div class=\"kw-stat-v\">\u2014<\/div><div class=\"kw-stat-l\">Visibility<\/div><\/div><div class=\"kw-stat\"><div class=\"kw-stat-ico\">\ud83c\udf21\ufe0f<\/div><div class=\"kw-stat-v\">\u2014 hPa<\/div><div class=\"kw-stat-l\">Pressure<\/div><\/div><\/div><\/div><div class=\"kw-tabs-wrap\"><button class=\"kw-tab kw-on\" onclick=\"window.widgets['${this.containerId}'].switchTab('hourly',this)\">Hourly<\/button><button class=\"kw-tab\" onclick=\"window.widgets['${this.containerId}'].switchTab('daily',this)\">Daily<\/button><button class=\"kw-tab\" onclick=\"window.widgets['${this.containerId}'].switchTab('weekly',this)\">Weekly<\/button><\/div><div class=\"kw-body-wrap\"><div class=\"kw-panel kw-on\" id=\"hourlyPanel-${this.containerId}\"><div class=\"kw-h-scroll\" id=\"hourlyScroll-${this.containerId}\"><\/div><\/div><div class=\"kw-panel\" id=\"dailyPanel-${this.containerId}\"><div class=\"kw-dlist\" id=\"dailyList-${this.containerId}\"><\/div><\/div><div class=\"kw-panel\" id=\"weeklyPanel-${this.containerId}\"><div class=\"kw-dlist\" id=\"weeklyList-${this.containerId}\"><\/div><\/div><\/div><div class=\"kw-footer\"><div class=\"kw-ft-note\">Powered by <a href=\"https:\/\/karachiweather.com\" target=\"_blank\" rel=\"nofollow\">KarachiWeather.com<\/a> \u00b7 Live Data<\/div><div class=\"kw-ft-badge\">\u26a1 Live Forecast<\/div><\/div><\/div>`;const searchInput=document.getElementById(`search-${this.containerId}`);const searchBtn=document.getElementById(`searchBtn-${this.containerId}`);if(searchInput&&searchBtn){const handler=async()=>{const city=searchInput.value.trim();if(city){try{const coords=await getPakistanCityCoordinates(city);this.lat=coords.lat;this.lon=coords.lon;this.cityName=coords.name;await this.fetchData();this.updateUI();document.getElementById(`loc-${this.containerId}`).innerText=`${coords.name.toUpperCase()}, PAKISTAN`}catch(e){console.error(e);document.getElementById(`cond-${this.containerId}`).innerText=e.message}}};searchBtn.addEventListener('click',handler);searchInput.addEventListener('keypress',(e)=>{if(e.key==='Enter')handler()})}}\nupdateUI(){if(!this.currentWeatherData||!this.dailyData)return;const cur=this.currentWeatherData;const wInfo=getWeather(cur.weathercode);const dayNight=getDayNightIcon(this.dailyData.sunrise?.[0],this.dailyData.sunset?.[0]);document.getElementById(`icon-${this.containerId}`).innerHTML=dayNight;document.getElementById(`cond-${this.containerId}`).innerText=wInfo.desc;document.getElementById(`hum-${this.containerId}`).innerText=this.hourlyData?.relativehumidity_2m?.[0]?`${this.hourlyData.relativehumidity_2m[0]}%`:'--%';document.getElementById(`wind-${this.containerId}`).innerHTML=`${Math.round(cur.windspeed)} km\/h`;this.currentTempCelsius=Math.round(cur.temperature);this.currentFeelsCelsius=this.currentTempCelsius;if(this.dailyData.temperature_2m_max[0]){this.currentHighCelsius=Math.round(this.dailyData.temperature_2m_max[0]);this.currentLowCelsius=Math.round(this.dailyData.temperature_2m_min[0])}this.applyUnitConversion(this.useFahrenheit);this.buildHourly();this.buildDaily();this.buildWeekly()}\napplyUnitConversion(useF){this.useFahrenheit=useF;const tempSpan=document.getElementById(`temp-${this.containerId}`);const feelsSpan=document.querySelector(`#feels-${this.containerId} span`);const hiSpan=document.querySelector(`#hilo-${this.containerId} .kw-hi`);const loSpan=document.querySelector(`#hilo-${this.containerId} .kw-lo`);if(!tempSpan)return;if(this.currentTempCelsius!==null){if(useF){let f=Math.round(this.currentTempCelsius*9\/5+32);let feelsF=Math.round(this.currentFeelsCelsius*9\/5+32);tempSpan.innerHTML=`${f}<sup>\u00b0F<\/sup>`;if(feelsSpan)feelsSpan.innerText=`${feelsF}\u00b0F`;if(hiSpan&&loSpan&&this.currentHighCelsius!==null){hiSpan.innerText=`${Math.round(this.currentHighCelsius*9\/5+32)}\u00b0`;loSpan.innerText=`${Math.round(this.currentLowCelsius*9\/5+32)}\u00b0`}document.querySelectorAll(`#hourlyScroll-${this.containerId} .kw-hc-temp`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round(val*9\/5+32)}\u00b0`});document.querySelectorAll(`#dailyList-${this.containerId} .kw-dr-temps .kw-t-hi, #dailyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round(val*9\/5+32)}\u00b0`});document.querySelectorAll(`#weeklyList-${this.containerId} .kw-dr-temps .kw-t-hi, #weeklyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round(val*9\/5+32)}\u00b0`})}else{tempSpan.innerHTML=`${this.currentTempCelsius}<sup>\u00b0C<\/sup>`;if(feelsSpan)feelsSpan.innerText=`${this.currentFeelsCelsius}\u00b0C`;if(hiSpan&&loSpan){hiSpan.innerText=`${this.currentHighCelsius}\u00b0`;loSpan.innerText=`${this.currentLowCelsius}\u00b0`}document.querySelectorAll(`#hourlyScroll-${this.containerId} .kw-hc-temp`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round((val-32)*5\/9)}\u00b0`});document.querySelectorAll(`#dailyList-${this.containerId} .kw-dr-temps .kw-t-hi, #dailyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round((val-32)*5\/9)}\u00b0`});document.querySelectorAll(`#weeklyList-${this.containerId} .kw-dr-temps .kw-t-hi, #weeklyList-${this.containerId} .kw-dr-temps .kw-t-lo`).forEach(el=>{let val=parseFloat(el.innerText);if(!isNaN(val))el.innerText=`${Math.round((val-32)*5\/9)}\u00b0`})}}}\nbuildHourly(){const container=document.getElementById(`hourlyScroll-${this.containerId}`);if(!container||!this.hourlyData)return;const now=new Date();const currentHour=now.getHours();const times=this.hourlyData.time;const temps=this.hourlyData.temperature_2m;const codes=this.hourlyData.weathercode;const rainProbs=this.hourlyData.precipitation_probability;let html=\"\";let startIdx=times.findIndex(t=>new Date(t).getHours()>=currentHour);if(startIdx===-1)startIdx=0;for(let i=startIdx;i<Math.min(startIdx+24,times.length);i++){const dt=new Date(times[i]);let label=dt.getHours()+\":00\";if(i===startIdx)label=\"NOW\";const temp=Math.round(temps[i]);const w=getWeather(codes[i]);const rain=rainProbs?Math.round(rainProbs[i]):0;const isNow=(i===startIdx);html+=`<div class=\"kw-hc ${isNow?'kw-now':''}\"><div class=\"kw-hc-t\">${label}<\/div><div class=\"kw-hc-i\">${w.icon}<\/div><div class=\"kw-hc-temp\">${temp}\u00b0<\/div><div class=\"kw-hc-rain\">\ud83d\udca7 ${rain}%<\/div><\/div>`}container.innerHTML=html;if(this.useFahrenheit)this.applyUnitConversion(true)}\nbuildDaily(){const container=document.getElementById(`dailyList-${this.containerId}`);if(!container||!this.dailyData)return;const days=[\"Today\",\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"];const today=new Date().getDay();let html=\"\";for(let i=0;i<this.dailyData.time.length;i++){const dayIdx=(today+i)%7;let name=i===0?\"Today\":days[dayIdx];const w=getWeather(this.dailyData.weathercode[i]);const hi=Math.round(this.dailyData.temperature_2m_max[i]);const lo=Math.round(this.dailyData.temperature_2m_min[i]);const rain=this.dailyData.precipitation_probability_max?Math.round(this.dailyData.precipitation_probability_max[i]):0;const barWidth=((hi-lo)\/25)*100;const left=(lo\/45)*100;html+=`<div class=\"kw-dr ${i===0?'kw-today':''}\"><div class=\"kw-dr-name\">${name}<\/div><div class=\"kw-dr-ico\">${w.icon}<\/div><div class=\"kw-dr-desc\">${w.desc}<\/div><div class=\"kw-dr-rain\">\ud83d\udca7 ${rain}%<\/div><div class=\"kw-tbar-wrap\"><div class=\"kw-tbar-bg\"><div class=\"kw-tbar-seg\" style=\"left:${Math.min(100,left)}%;width:${Math.min(100,barWidth)}%\"><\/div><\/div><\/div><div class=\"kw-dr-temps\"><span class=\"kw-t-hi\">${hi}\u00b0<\/span><span class=\"kw-t-sl\">\/<\/span><span class=\"kw-t-lo\">${lo}\u00b0<\/span><\/div><\/div>`}container.innerHTML=html;if(this.useFahrenheit)this.applyUnitConversion(true)}\nbuildWeekly(){const container=document.getElementById(`weeklyList-${this.containerId}`);if(!container||!this.dailyData)return;const days=[\"Today\",\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"];const today=new Date().getDay();let html=\"\";for(let i=0;i<this.dailyData.time.length;i++){const dayIdx=(today+i)%7;let name=i===0?\"Today\":days[dayIdx];const w=getWeather(this.dailyData.weathercode[i]);const hi=Math.round(this.dailyData.temperature_2m_max[i]);const lo=Math.round(this.dailyData.temperature_2m_min[i]);const rain=this.dailyData.precipitation_probability_max?Math.round(this.dailyData.precipitation_probability_max[i]):0;const barWidth=((hi-lo)\/25)*100;const left=(lo\/45)*100;html+=`<div class=\"kw-dr ${i===0?'kw-today':''}\"><div class=\"kw-dr-name\">${name}<\/div><div class=\"kw-dr-ico\">${w.icon}<\/div><div class=\"kw-dr-desc\">${w.desc}<\/div><div class=\"kw-dr-rain\">\ud83d\udca7 ${rain}%<\/div><div class=\"kw-tbar-wrap\"><div class=\"kw-tbar-bg\"><div class=\"kw-tbar-seg\" style=\"left:${Math.min(100,left)}%;width:${Math.min(100,barWidth)}%\"><\/div><\/div><\/div><div class=\"kw-dr-temps\"><span class=\"kw-t-hi\">${hi}\u00b0<\/span><span class=\"kw-t-sl\">\/<\/span><span class=\"kw-t-lo\">${lo}\u00b0<\/span><\/div><\/div>`}container.innerHTML=html;if(this.useFahrenheit)this.applyUnitConversion(true)}\nswitchTab(tab,el){const panels=['hourlyPanel','dailyPanel','weeklyPanel'];panels.forEach(p=>{const panel=document.getElementById(`${p}-${this.containerId}`);if(panel)panel.classList.remove('kw-on')});document.getElementById(`${tab}Panel-${this.containerId}`).classList.add('kw-on');const tabs=document.querySelectorAll(`#${this.containerId} .kw-tab`);tabs.forEach(t=>t.classList.remove('kw-on'));el.classList.add('kw-on')}\nstartDateTimeUpdater(){const update=()=>{const d=new Date();const days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];const months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];let h=d.getHours(),m=d.getMinutes();const ap=h>=12?'PM':'AM';h=h%12||12;const dateStr=`${days[d.getDay()]}, ${months[d.getMonth()]} ${d.getDate()}`;const timeStr=`${h}:${String(m).padStart(2,'0')} ${ap} PK`;const elem=document.getElementById(`datetime-${this.containerId}`);if(elem)elem.innerHTML=`<strong>${dateStr}<\/strong><br><strong>${timeStr}<\/strong>`};update();setInterval(update,30000)}\naddParticles(){const container=document.getElementById(`particles-${this.containerId}`);if(!container)return;for(let i=0;i<18;i++){const p=document.createElement('div');p.className='kw-p';const sz=Math.random()*4+2;p.style.cssText=`width:${sz}px;height:${sz}px;left:${Math.random()*100}%;bottom:${Math.random()*30}%;animation-duration:${Math.random()*6+5}s;animation-delay:${Math.random()*6}s;opacity:${Math.random()*.5+.1}`;container.appendChild(p)}}}\nwindow.widgets={};\nconst karachiCoords={lat:24.8607,lon:67.0011};\nconst lahoreCoords={lat:31.5497,lon:74.3436};\nconst islamabadCoords={lat:33.6844,lon:73.0479};\nwindow.widgets['karachiWidget']=new WeatherWidget('karachiWidget','Karachi',karachiCoords.lat,karachiCoords.lon);\nwindow.widgets['lahoreWidget']=new WeatherWidget('lahoreWidget','Lahore',lahoreCoords.lat,lahoreCoords.lon);\nwindow.widgets['islamabadWidget']=new WeatherWidget('islamabadWidget','Islamabad',islamabadCoords.lat,islamabadCoords.lon);\nlet currentUnit='C';\nfunction setUnit(unit){currentUnit=unit;const useF=(unit==='F');for(let key in window.widgets){window.widgets[key].applyUnitConversion(useF)}const btnC=document.getElementById('unitCelsius');const btnF=document.getElementById('unitFahrenheit');if(unit==='C'){btnC.classList.add('active');btnF.classList.remove('active')}else{btnF.classList.add('active');btnC.classList.remove('active')}localStorage.setItem('tempUnit',unit)}\ndocument.getElementById('unitCelsius').addEventListener('click',()=>setUnit('C'));\ndocument.getElementById('unitFahrenheit').addEventListener('click',()=>setUnit('F'));\nconst savedUnit=localStorage.getItem('tempUnit');\nif(savedUnit==='F')setUnit('F');else setUnit('C');\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pakistan Weather \u2013 Live Forecasts for Karachi, Lahore & Islamabad \ud83c\uddf5\ud83c\uddf0 Pakistan Weather Live forecasts for Karachi, Lahore, Islamabad \u2013 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-628","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/karachiweather.com\/author\/admin_fo35f74w\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Pakistan Weather \u2013 Live Forecasts for Karachi, Lahore & Islamabad \ud83c\uddf5\ud83c\uddf0 Pakistan Weather Live forecasts for Karachi, Lahore, Islamabad \u2013 […]","_links":{"self":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages\/628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/comments?post=628"}],"version-history":[{"count":24,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages\/628\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/pages\/628\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/karachiweather.com\/index.php\/wp-json\/wp\/v2\/media?parent=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}