goodweather.app/index.html at main · dev-willis/goodweather.app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="theme-color" content="#070b13">
  <title>A Good Weather App</title>
  <link rel="manifest" href="manifest.json">

  <!-- MapLibre GL CSS -->
  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet">

  <!-- Fonts: IBM Plex Mono for data values, Barlow Condensed for UI labels -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Barlow+Condensed:wght@300;400;500;600&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Map is the full-screen base layer -->
  <div id="map"></div>

  <!-- Left panel: conditions + alerts overlay -->
  <div id="panel" role="complementary" aria-label="Weather conditions">

    <header id="panel-header">
      <span class="location-name" id="location-label">McMinnville, TN</span>
      <span class="radar-badge" aria-label="Live radar active">Live Radar</span>
    </header>

    <!-- Current observational data -->
    <section id="conditions" aria-label="Current conditions">

      <div class="temp-block">
        <span id="temp" aria-label="Temperature">--</span>
        <span class="temp-unit">°F</span>
      </div>
      <div id="description" aria-live="polite">Loading...</div>

      <div class="metrics-grid">

        <div class="metric-item">
          <span class="metric-label">Humidity</span>
          <span class="metric-value" id="humidity">--</span>
        </div>

        <div class="metric-item">
          <span class="metric-label">Dewpoint</span>
          <span class="metric-value" id="dewpoint">--</span>
        </div>

        <div class="metric-item">
          <span class="metric-label">Wind</span>
          <span class="metric-value" id="wind-speed">--</span>
        </div>

        <!-- Wind direction: compass needle + cardinal label -->
        <div class="metric-item">
          <span class="metric-label">Direction</span>
          <div class="wind-block">
            <div class="wind-compass" aria-hidden="true">
              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="10" cy="10" r="8.5" stroke="rgba(255,255,255,0.10)" stroke-width="1"/>
                <!-- Arrow points toward the direction wind is coming FROM -->
                <g id="wind-arrow" style="transform-origin:10px 10px; transform:rotate(0deg); transition:transform 0.8s ease;">
                  <polygon points="10,2.5 12.5,13 10,11 7.5,13" fill="#38d9f5"/>
                </g>
              </svg>
            </div>
            <span class="metric-value" id="wind-dir">--</span>
          </div>
        </div>

        <div class="metric-item">
          <span class="metric-label">Pressure</span>
          <span class="metric-value" id="pressure">--</span>
        </div>

        <div class="metric-item">
          <span class="metric-label">Visibility</span>
          <span class="metric-value" id="visibility">--</span>
        </div>

      </div>
    </section>

    <!-- Active NWS weather alerts -->
    <section id="alerts-section" aria-label="Active alerts" aria-live="polite">
      <div class="section-heading">Active Alerts</div>
      <div id="alerts-list">
        <div class="no-alerts">Checking...</div>
      </div>
    </section>

    <footer id="panel-footer">
      <span id="station-id">Acquiring station...</span>
      <div class="footer-row">
        <span id="last-updated">--</span>
        <button id="refresh-btn" aria-label="Refresh weather data" title="Refresh data">↻</button>
      </div>
    </footer>

  </div>

  <!-- Radar layer toggle (top-right map control) -->
  <div id="map-controls">
    <div class="map-control-group">
      <label class="control-label">Radar</label>
      <button id="radar-toggle" class="control-btn active" title="Toggle radar overlay">On</button>
    </div>
    <div class="map-control-group">
      <label class="control-label">Opacity</label>
      <input id="radar-opacity" type="range" min="20" max="100" value="75" class="opacity-slider">
    </div>
  </div>

  <!-- Full-screen loading overlay -->
  <div id="loading-overlay" role="status" aria-label="Loading weather data">
    <div class="loader-content">
      <div class="loader-spinner"></div>
      <div class="loader-text">Acquiring data...</div>
    </div>
  </div>

  <!-- MapLibre GL JS loaded as a regular script (makes maplibregl a global) -->
  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>

  <!-- App: ES module, auto-deferred, runs after MapLibre is available -->
  <script type="module" src="app.js"></script>
</body>
</html>