From b03fa42c2d81cf34aa518a420c894c4ae86fac50 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sat, 24 Jan 2026 20:37:54 -1000
Subject: Add Conditions page with live volcano and weather feeds

- Standalone full-screen page at /conditions
- Tiled grid layout with autoplaying video feeds
- USGS Kilauea webcams (V1cam, V2cam) via YouTube embeds
- Windy weather maps (local Hawaii + national US)
- Opens in new tab from dashboard nav

Closes #29

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/partials/conditions-tab.html | 121 +++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 web/templates/partials/conditions-tab.html

(limited to 'web/templates/partials/conditions-tab.html')

diff --git a/web/templates/partials/conditions-tab.html b/web/templates/partials/conditions-tab.html
new file mode 100644
index 0000000..94c2f99
--- /dev/null
+++ b/web/templates/partials/conditions-tab.html
@@ -0,0 +1,121 @@
+{{define "conditions-tab"}}
+<div class="space-y-6 text-shadow-sm">
+    <!-- Kilauea Webcams -->
+    <div>
+        <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
+            <span>🌋</span> Kilauea Webcams
+            <span class="text-xs text-white/50 font-normal">(auto-refresh every 60s)</span>
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <!-- V1cam - West Halemaʻumaʻu -->
+            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
+                <a href="https://www.usgs.gov/volcanoes/kilauea/v1cam-kilauea-volcano-hawaii-west-halemaumau-crater" target="_blank">
+                    <img id="v1cam"
+                         src="https://volcanoes.usgs.gov/observatories/hvo/cams/V1cam/images/M.jpg"
+                         alt="V1cam - West Rim"
+                         class="w-full aspect-video object-cover hover:opacity-90 transition-opacity"
+                         loading="lazy">
+                </a>
+                <div class="p-2 text-center">
+                    <span class="text-xs text-white/60">V1cam - West Rim</span>
+                </div>
+            </div>
+
+            <!-- V2cam - East Halemaʻumaʻu -->
+            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
+                <a href="https://www.usgs.gov/media/webcams/v2cam-kilauea-volcano-hawaii-east-halemaumau-crater" target="_blank">
+                    <img id="v2cam"
+                         src="https://volcanoes.usgs.gov/cams/V2cam/images/M.jpg"
+                         alt="V2cam - East Rim"
+                         class="w-full aspect-video object-cover hover:opacity-90 transition-opacity"
+                         loading="lazy">
+                </a>
+                <div class="p-2 text-center">
+                    <span class="text-xs text-white/60">V2cam - East Rim</span>
+                </div>
+            </div>
+
+            <!-- F1cam - Thermal -->
+            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
+                <a href="https://www.usgs.gov/observatories/hvo/multimedia/webcams" target="_blank">
+                    <img id="f1cam"
+                         src="https://volcanoes.usgs.gov/observatories/hvo/cams/F1cam/images/M.jpg"
+                         alt="F1cam - Thermal"
+                         class="w-full aspect-video object-cover hover:opacity-90 transition-opacity"
+                         loading="lazy">
+                </a>
+                <div class="p-2 text-center">
+                    <span class="text-xs text-white/60">F1cam - Thermal</span>
+                </div>
+            </div>
+        </div>
+        <div class="mt-2 text-center">
+            <a href="https://www.usgs.gov/volcanoes/kilauea/webcams" target="_blank"
+               class="text-xs text-white/50 hover:text-white/70">View all USGS webcams →</a>
+        </div>
+    </div>
+
+    <!-- Weather Maps -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Local Weather (Big Island) -->
+        <div>
+            <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
+                <span>🌴</span> Local Weather
+            </h2>
+            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
+                <div class="aspect-video">
+                    <iframe
+                        src="https://embed.windy.com/embed2.html?lat=19.5&lon=-155.5&zoom=8&level=surface&overlay=rain&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1"
+                        class="w-full h-full"
+                        frameborder="0"
+                        loading="lazy">
+                    </iframe>
+                </div>
+                <div class="p-2 text-center">
+                    <a href="https://www.windy.com/?19.5,-155.5,8" target="_blank"
+                       class="text-xs text-white/60 hover:text-white/90">Open in Windy →</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- National Weather -->
+        <div>
+            <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
+                <span>🇺🇸</span> National Weather
+            </h2>
+            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
+                <div class="aspect-video">
+                    <iframe
+                        src="https://embed.windy.com/embed2.html?lat=39&lon=-98&zoom=4&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1"
+                        class="w-full h-full"
+                        frameborder="0"
+                        loading="lazy">
+                    </iframe>
+                </div>
+                <div class="p-2 text-center">
+                    <a href="https://www.windy.com/?39,-98,4" target="_blank"
+                       class="text-xs text-white/60 hover:text-white/90">Open in Windy →</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// Auto-refresh webcam images every 60 seconds
+(function() {
+    function refreshCams() {
+        var cams = ['v1cam', 'v2cam', 'f1cam'];
+        var ts = Date.now();
+        cams.forEach(function(id) {
+            var img = document.getElementById(id);
+            if (img) {
+                var src = img.src.split('?')[0];
+                img.src = src + '?t=' + ts;
+            }
+        });
+    }
+    setInterval(refreshCams, 60000);
+})();
+</script>
+{{end}}
-- 
cgit v1.2.3