memes/index.html

45 lines
1.8 KiB
HTML
Raw Permalink Normal View History

2022-09-26 19:57:17 -03:00
<head>
<title>Click for memes</title>
2024-05-30 13:39:56 -03:00
<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">
2022-09-26 19:57:17 -03:00
<script src="max.js"></script>
<script>
2024-05-30 13:39:56 -03:00
// 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);
});
2022-09-26 19:57:17 -03:00
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")
2024-05-30 13:39:56 -03:00
let paddedID = generateRandomID()
while (video.src.includes(paddedID)) {
2022-09-26 19:57:17 -03:00
paddedID = generateRandomID()
}
videoPlayer.src = (paddedID + ".mp4")
}
</script>
</head>
2024-05-30 13:39:56 -03:00
<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>
2022-09-26 19:57:17 -03:00
<script>
const video = document.getElementById("video-player")
video.onended = (event) => {
2024-05-30 13:39:56 -03:00
setTimeout(newVideo, 500)
2022-09-26 19:57:17 -03:00
}
</script>
</body>