RSPC | Division of Paranaque City

Posted on February 24, 2025

<div id="paranaque-heat-monitor" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 16px auto; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; overflow: hidden; padding: 20px; box-sizing: border-box; text-align: left;">  <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: #64748b; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px;"> <div style="display: flex; align-items: center; gap: 6px;"> <span style="width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block;"></span> <span>PARAÑAQUE CITY • LIVE HEAT INDEX</span> </div> <span style="font-size: 10px; color: #94a3b8;">DOST-PAGASA Grid</span> </div>  <div style="display: flex; justify-content: space-between; align-items: flex-end; margin: 16px 0;"> <div> <span style="font-size: 12px; color: #475569; letter-spacing: 0.05em; font-weight: 600;">HEAT INDEX</span> <div style="font-size: 48px; font-weight: 800; line-height: 1; color: #0f172a; margin: 4px 0;"> <span id="wpHeatIndex">--</span><span style="font-size: 24px; vertical-align: top;">°C</span> </div> <div style="font-size: 12px; color: #64748b;"> Air Temp: <span id="wpAirTemp">--</span>°C | Humidity: <span id="wpHumidity">--</span>% </div> </div> <div id="wpHeatBadge" style="padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; background: #fef9c3; color: #854d0e;"> FETCHING... </div> </div>  <div style="margin: 16px 0;"> <div style="display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px;"> <div style="flex: 1; background-color: #facc15;" title="Caution (27-32°C)"></div> <div style="flex: 1; background-color: #fb923c;" title="Extreme Caution (33-41°C)"></div> <div style="flex: 1; background-color: #f87171;" title="Danger (42-51°C)"></div> <div style="flex: 1; background-color: #991b1b;" title="Extreme Danger (≥52°C)"></div> </div> <div style="display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; margin-top: 4px;"> <span>27°C Caution</span> <span>33°C Ext. Caution</span> <span>42°C Danger</span> <span>≥52°C Ext. Danger</span> </div> </div>  <div style="background: #f8fafc; border-radius: 8px; padding: 12px 14px; margin: 12px 0;"> <h4 style="margin: 0 0 8px 0; font-size: 12px; color: #334155; font-weight: bold;">RECOMMENDED PRECAUTIONS</h4> <ul id="wpRecList" style="margin: 0; padding-left: 18px; font-size: 13px; color: #1e293b; line-height: 1.5;"> <li>Syncing with live station data...</li> </ul> </div>  <div style="display: flex; justify-content: space-between; font-size: 11px; color: #64748b; border-top: 1px solid #f1f5f9; padding-top: 10px;"> <span>Parañaque DRRMO: <strong>(02) 8820-7777</strong></span> <span id="wpLastUpdated">Updating...</span> </div> </div> <script> (function() { const TIERS = { CAUTION: { name: "Caution", bg: "#fef9c3", text: "#854d0e", recs: ["Drink plenty of potable water throughout the day.", "Fatigue possible with prolonged outdoor physical exertion.", "Take breaks in shaded areas."] }, EXTREME_CAUTION: { name: "Extreme Caution", bg: "#ffedd5", text: "#9a3412", recs: ["Limit direct sun exposure between 10:00 AM and 4:00 PM.", "Wear lightweight, light-colored clothing.", "Heat cramps and heat exhaustion are likely with ongoing activity."] }, DANGER: { name: "Danger", bg: "#fee2e2", text: "#991b1b", recs: ["Heat cramps and exhaustion probable; heat stroke imminent.", "Avoid heavy outdoor labor and physical training.", "Keep children and elderly in well-ventilated, shaded rooms."] }, EXTREME_DANGER: { name: "Extreme Danger", bg: "#7f1d1d", text: "#ffffff", recs: ["HEAT STROKE IS IMMINENT with continued heat exposure.", "Halt non-emergency outdoor labor and sports immediately.", "Call emergency services (911 / 8820-7777) for signs of heat illness."] } }; async function loadWeatherData() { try { const res = await fetch("https://api.open-meteo.com/v1/forecast?latitude=14.4793&longitude=121.0198&current=temperature_2m,relative_humidity_2m,apparent_temperature&timezone=Asia%2FManila"); const json = await res.json(); const cur = json.current; const heatIndex = Math.round(cur.apparent_temperature); document.getElementById("wpHeatIndex").textContent = heatIndex; document.getElementById("wpAirTemp").textContent = Math.round(cur.temperature_2m); document.getElementById("wpHumidity").textContent = Math.round(cur.relative_humidity_2m); let t = TIERS.CAUTION; if (heatIndex >= 52) t = TIERS.EXTREME_DANGER; else if (heatIndex >= 42) t = TIERS.DANGER; else if (heatIndex >= 33) t = TIERS.EXTREME_CAUTION; const badge = document.getElementById("wpHeatBadge"); badge.textContent = t.name; badge.style.backgroundColor = t.bg; badge.style.color = t.text; const list = document.getElementById("wpRecList"); list.innerHTML = t.recs.map(r => "<li>" + r + "</li>").join(""); document.getElementById("wpLastUpdated").textContent = "Updated: " + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } catch(e) { console.warn("Using fallback heat baseline", e); } } loadWeatherData(); setInterval(loadWeatherData, 15 * 60 * 1000); })(); </script>