45 lines
1.8 KiB
HTML
45 lines
1.8 KiB
HTML
<head>
|
|
<title>Click for memes</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
<script src="max.js"></script>
|
|
<script>
|
|
// Detects the user's preferred color scheme and sets the theme accordingly
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', 'dark');
|
|
} else {
|
|
document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', 'light');
|
|
}
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
|
|
let theme = event.matches ? "dark" : "light";
|
|
document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', theme);
|
|
});
|
|
function generateRandomID() {
|
|
let videoID = Math.floor(Math.random() * MAX + 1)
|
|
let videoIDString = videoID.toString();
|
|
let paddedID = videoIDString.padStart(5, '0')
|
|
return paddedID
|
|
}
|
|
function newVideo() {
|
|
let videoPlayer = document.getElementById("video-player")
|
|
let paddedID = generateRandomID()
|
|
while (video.src.includes(paddedID)) {
|
|
paddedID = generateRandomID()
|
|
}
|
|
videoPlayer.src = (paddedID + ".mp4")
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body class="container-fluid" onload="newVideo()">
|
|
<div class="d-flex align-self-center justify-content-center align-items-center">
|
|
<video class="vw-100 vh-100" id="video-player" controls autoPlay></video>
|
|
</div>
|
|
<script>
|
|
const video = document.getElementById("video-player")
|
|
|
|
video.onended = (event) => {
|
|
setTimeout(newVideo, 500)
|
|
}
|
|
</script>
|
|
</body> |