Skip to content

Instantly share code, notes, and snippets.

@fzakaria

fzakaria/index.html

Created August 8, 2024 16:02
Show Gist options
  • Save fzakaria/88aef7f664b753402a64070db59ba1a6 to your computer and use it in GitHub Desktop.
Save fzakaria/88aef7f664b753402a64070db59ba1a6 to your computer and use it in GitHub Desktop.
Download ZIP
A little web-page for my Raspberry Pi to show the local surf conditions at Steamer Lane, Santa Cruz, CA
Raw
index.html
<!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