index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather Safety Map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Weather Safety Map</h1>

  <!-- Dark/Light mode toggle -->
  <button id="modeToggle">🌙 Dark Mode</button>

  <div id="container">
    <div id="controls">
      <button id="checkLocationBtn">Use My Current Location</button>
      <input type="text" id="cityInput" placeholder="City">
      <input type="text" id="stateInput" placeholder="State">
      <button id="checkManualBtn">Check Location</button>
    </div>

    <div id="mainContent">
      <div id="map"></div>
      <div id="sidebar">
        <div id="result"></div>
        <h3>Active Alerts</h3>
        <div id="alertsList"></div>
        <button id="extremeBtn">🚨 Get Directions to Safe City</button>
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="script.js"></script>
  <script>
    const modeBtn = document.getElementById('modeToggle');
    let darkMode = false;

    modeBtn.addEventListener('click', () => {
      darkMode = !darkMode;
      document.body.classList.toggle('dark-mode', darkMode);
      modeBtn.textContent = darkMode ? '☀️ Light Mode' : '🌙 Dark Mode';
    });
  </script>
</body>
</html>