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>
author: Peter Stone <thepeterstone@gmail.com> 2026-01-24 20:37:54 -1000
committer: Peter Stone <thepeterstone@gmail.com> 2026-01-24 20:37:54 -1000
commit: b03fa42c2d81cf34aa518a420c894c4ae86fac50 (patch)
tree: d45132886848f8f1af47705d7b3a492606c003cc /web
parent: 22efca3118676926dec4af74fe8e225606063a35 (diff)
3 files changed, 230 insertions, 0 deletions
diff --git a/web/templates/conditions.html b/web/templates/conditions.html
new file mode 100644
index 0000000..5859a9c
--- /dev/null
+++ b/web/templates/conditions.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conditions - Live Feeds</title>
+    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <link rel="stylesheet" href="/static/css/output.css">
+    <style>
+        body {
+            background: #0a0a0a;
+        }
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 4px;
+            height: 100vh;
+            padding: 4px;
+        }
+        .video-cell {
+            position: relative;
+            background: #111;
+            overflow: hidden;
+        }
+        .video-cell iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .video-label {
+            position: absolute;
+            bottom: 8px;
+            left: 8px;
+            background: rgba(0,0,0,0.7);
+            color: rgba(255,255,255,0.8);
+            padding: 4px 8px;
+            font-size: 11px;
+            border-radius: 4px;
+            z-index: 10;
+            pointer-events: none;
+        }
+        .back-link {
+            position: fixed;
+            top: 12px;
+            left: 12px;
+            background: rgba(0,0,0,0.7);
+            color: rgba(255,255,255,0.7);
+            padding: 8px 12px;
+            font-size: 12px;
+            border-radius: 6px;
+            z-index: 100;
+            text-decoration: none;
+        }
+        .back-link:hover {
+            background: rgba(0,0,0,0.9);
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <a href="/" class="back-link">← Dashboard</a>
+
+    <div class="video-grid">
+        <!-- V1cam - Kilauea West Rim -->
+        <div class="video-cell">
+            <iframe
+                src="https://www.youtube.com/embed/WTy3dGhGBOY?autoplay=1&mute=1&controls=0&modestbranding=1&rel=0&loop=1"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen>
+            </iframe>
+            <span class="video-label">V1cam - Kilauea West</span>
+        </div>
+
+        <!-- V2cam - Kilauea East Rim -->
+        <div class="video-cell">
+            <iframe
+                src="https://www.youtube.com/embed/Gd2Tm5jblbE?autoplay=1&mute=1&controls=0&modestbranding=1&rel=0&loop=1"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen>
+            </iframe>
+            <span class="video-label">V2cam - Kilauea East</span>
+        </div>
+
+        <!-- Local Weather - Windy Hawaii -->
+        <div class="video-cell">
+            <iframe
+                src="https://embed.windy.com/embed2.html?lat=19.5&lon=-155.5&zoom=8&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1">
+            </iframe>
+            <span class="video-label">Local Weather</span>
+        </div>
+
+        <!-- National Weather - Windy US -->
+        <div class="video-cell">
+            <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">
+            </iframe>
+            <span class="video-label">National Weather</span>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/web/templates/index.html b/web/templates/index.html
index 9687884..b55f348 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -72,6 +72,11 @@
                     onclick="setActiveTab(this)">
                     🛒 Shopping
                 </button>
+                <a href="/conditions"
+                   class="tab-button"
+                   target="_blank">
+                    🌋 Conditions
+                </a>
             </nav>
         </div>
 
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}}
author	Peter Stone <thepeterstone@gmail.com>	2026-01-24 20:37:54 -1000
committer	Peter Stone <thepeterstone@gmail.com>	2026-01-24 20:37:54 -1000
commit	b03fa42c2d81cf34aa518a420c894c4ae86fac50 (patch)
tree	d45132886848f8f1af47705d7b3a492606c003cc /web
parent	22efca3118676926dec4af74fe8e225606063a35 (diff)