<div id="hamblen-dashboard" style="background:#000;color:#fff;min-height:100vh;padding:20px;font-family:Arial,sans-serif;">
  <marquee style="background:#b91c1c;padding:15px;font-size:24px;font-weight:bold;">
    LIVE HAMBLEN COUNTY WEATHER & TRAFFIC ALERTS
  </marquee>

  <div style="display:flex;gap:20px;margin-top:20px;">
    <div style="flex:2;background:#18181b;padding:20px;border-radius:20px;">
      <h1>Hamblen County Radar</h1>
      <iframe src="https://radar.weather.gov" width="100%" height="500" style="border:none;border-radius:12px;"></iframe>

      <h2 style="margin-top:20px;">Live Traffic</h2>
      <iframe src="https://www.google.com/maps?q=Hamblen+County+TN&output=embed&layer=t" width="100%" height="300" style="border:none;border-radius:12px;"></iframe>
    </div>

    <div style="flex:1;background:#18181b;padding:20px;border-radius:20px;">
      <h2>East Tennessee Alerts</h2>
      <div id="alerts">Loading NOAA alerts...</div>
      <button onclick="toggleMute()" style="margin-top:20px;padding:15px;width:100%;font-size:18px;background:#991b1b;color:white;border:none;border-radius:12px;">
        ACKNOWLEDGE / MUTE
      </button>
    </div>
  </div>
</div>

<script>
let muted=false;
function toggleMute(){muted=!muted;}

async function fetchAlerts(){
 const res=await fetch('https://api.weather.gov/alerts/active?area=TN');
 const data=await res.json();
 document.getElementById('alerts').innerHTML=data.features.slice(0,8).map(a=>
   `<div style="background:#7f1d1d;padding:10px;margin:10px 0;border-radius:10px;">${a.properties.event}<br>${a.properties.areaDesc}</div>`
 ).join('');
}
fetchAlerts();
setInterval(fetchAlerts,30000);
</script>
