Created
August 8, 2024 16:02
-
-
Save fzakaria/88aef7f664b753402a64070db59ba1a6 to your computer and use it in GitHub Desktop.
A little web-page for my Raspberry Pi to show the local surf conditions at Steamer Lane, Santa Cruz, CA
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Santa Cruz Surf Watch</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 10px; | |
| } | |
| .video-player, .weather-panel, .surf-table { | |
| width: 100%; | |
| margin-bottom: 5px; | |
| } | |
| .content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| iframe, video { | |
| width: 100%; | |
| height: 540px; | |
| } | |
| .weather-panel { | |
| height: 100px; | |
| } | |
| .surf-table iframe { | |
| height: 100vh; | |
| } | |
| h1 { | |
| font-size: 1.5em; | |
| text-align: center; | |
| } | |
| </style> | |
| <script> | |
| // Function to calculate the milliseconds until the next 5 AM | |
| function getMillisecondsUntil5AM() { | |
| const now = new Date(); | |
| const next5AM = new Date(); | |
| next5AM.setHours(5, 0, 0, 0); // Set the time to 5:00 AM | |
| // If the current time is past 5 AM today, set the next 5 AM to tomorrow | |
| if (now.getTime() > next5AM.getTime()) { | |
| next5AM.setDate(next5AM.getDate() + 1); | |
| } | |
| return next5AM.getTime() - now.getTime(); | |
| } | |
| // Set a timeout to refresh the page at the next 5 AM | |
| setTimeout(function() { | |
| location.reload(); | |
| }, getMillisecondsUntil5AM()); | |
| // Fetch and display the ForecastChartScrollerContainer div | |
| $.get('https://deepswell.com/surf-forecast/US/Santa-Cruz-County/Steamer-Lane/1060', function(data) { | |
| var chartContainer = $(data).find('.ForecastChartScrollerContainer'); | |
| if (chartContainer.length) { | |
| $('.surf-table').html(chartContainer); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Santa Cruz Surf Watch</h1> | |
| <div class="weather-panel"> | |
| <a class="weatherwidget-io" href="https://forecast7.com/en/36d97n122d03/santa-cruz/?unit=us" data-label_1="SANTA CRUZ" data-label_2="WEATHER" data-theme="original" >SANTA CRUZ WEATHER</a> | |
| </div> | |
| <!-- Video Player and Surf Forecast Side by Side --> | |
| <div class="content"> | |
| <div class="video-player"> | |
| <video id="video" autoplay muted="muted"></video> | |
| </div> | |
| <div class="surf-table"> | |
| <iframe src="https://deepswell.com/surf-forecast/US/Santa-Cruz-County/Steamer-Lane/1060" frameborder="0" height="900"> | |
| <input type="button" value="Back" onclick="history.back()"> | |
| <input type="button" value="Back" onclick="history.back()"> | |
| <input type="button" value="Back" onclick="history.back()"> | |
| <input type="button" value="Back" onclick="history.back()"> | |
| </iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script> | |
| <script> | |
| var video = document.getElementById('video'); | |
| var videoSrc = 'https://cams.cdn-surfline.com/cdn-wc/wc-steamercloseup/playlist.m3u8'; | |
| if (Hls.isSupported()) { | |
| var hls = new Hls(); | |
| hls.loadSource(videoSrc); | |
| hls.attachMedia(video); | |
| } | |
| </script> | |
| <script> | |
| !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment