diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-01-24 21:07:16 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-01-24 21:07:16 -1000 |
| commit | 83beddfab9584ae4b64a782c978236472b6d5745 (patch) | |
| tree | 90b0b91adbe94879ba16aa95f992d80065ec855c /web/templates | |
| parent | b03fa42c2d81cf34aa518a420c894c4ae86fac50 (diff) | |
Update Conditions page: 3x2 tiled grid with 3 cams and 3 maps
- Add V3cam (South Rim) alongside V1cam (West) and V2cam (East)
- Add two Hawaii maps: wind overlay and waves overlay
- Zoom out US map for broader national view
- Full-screen 3x2 grid layout with responsive breakpoints
- Enable YouTube controls for better video interaction
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'web/templates')
| -rw-r--r-- | web/templates/conditions.html | 73 |
1 files changed, 53 insertions, 20 deletions
diff --git a/web/templates/conditions.html b/web/templates/conditions.html index 5859a9c..14b10b0 100644 --- a/web/templates/conditions.html +++ b/web/templates/conditions.html @@ -9,13 +9,16 @@ <style> body { background: #0a0a0a; + margin: 0; + padding: 0; } .video-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 4px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 2px; height: 100vh; - padding: 4px; + width: 100vw; } .video-cell { position: relative; @@ -44,13 +47,13 @@ } .back-link { position: fixed; - top: 12px; - left: 12px; + top: 8px; + left: 8px; background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.7); - padding: 8px 12px; - font-size: 12px; - border-radius: 6px; + padding: 6px 10px; + font-size: 11px; + border-radius: 4px; z-index: 100; text-decoration: none; } @@ -58,44 +61,74 @@ background: rgba(0,0,0,0.9); color: white; } + @media (max-width: 900px) { + .video-grid { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + } + } + @media (max-width: 600px) { + .video-grid { + grid-template-columns: 1fr; + grid-template-rows: repeat(6, 1fr); + } + } </style> </head> <body> - <a href="/" class="back-link">← Dashboard</a> + <a href="/" class="back-link">← Back</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" + src="https://www.youtube.com/embed/WTy3dGhGBOY?autoplay=1&mute=1&controls=1&modestbranding=1&rel=0" + allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen> </iframe> - <span class="video-label">V1cam - Kilauea West</span> + <span class="video-label">V1cam - 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" + src="https://www.youtube.com/embed/Gd2Tm5jblbE?autoplay=1&mute=1&controls=1&modestbranding=1&rel=0" + allow="autoplay; encrypted-media; picture-in-picture" + allowfullscreen> + </iframe> + <span class="video-label">V2cam - East</span> + </div> + + <!-- V3cam - Kilauea South Rim --> + <div class="video-cell"> + <iframe + src="https://www.youtube.com/embed/BqmpkUdMtyA?autoplay=1&mute=1&controls=1&modestbranding=1&rel=0" + allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen> </iframe> - <span class="video-label">V2cam - Kilauea East</span> + <span class="video-label">V3cam - South</span> + </div> + + <!-- Hawaii Wind - Windy --> + <div class="video-cell"> + <iframe + src="https://embed.windy.com/embed2.html?lat=19.5&lon=-155.5&zoom=8&level=surface&overlay=wind&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">Hawaii Wind</span> </div> - <!-- Local Weather - Windy Hawaii --> + <!-- Hawaii Waves - Windy --> <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"> + src="https://embed.windy.com/embed2.html?lat=19.5&lon=-155.5&zoom=8&level=surface&overlay=waves&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> + <span class="video-label">Hawaii Waves</span> </div> - <!-- National Weather - Windy US --> + <!-- National Weather - Windy US (zoomed out) --> <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"> + src="https://embed.windy.com/embed2.html?lat=39&lon=-98&zoom=2&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> |