diff options
| -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> |