Simplify memes page
This commit is contained in:
parent
cc5214b1ef
commit
0164ccbd67
143
index.html
143
index.html
@ -1,150 +1,45 @@
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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>
|
||||
var idQueue = []
|
||||
|
||||
// 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
|
||||
|
||||
do {
|
||||
let paddedID = generateRandomID()
|
||||
while (video.src.includes(paddedID)) {
|
||||
paddedID = generateRandomID()
|
||||
} while (idQueue.indexOf(paddedID) > 0)
|
||||
|
||||
|
||||
if (idQueue.length < MAX) {
|
||||
idQueue.push(paddedID)
|
||||
}
|
||||
else {
|
||||
idQueue.shift()
|
||||
}
|
||||
|
||||
|
||||
videoPlayer.src = (paddedID + ".mp4")
|
||||
}
|
||||
|
||||
function modeSwitch() {
|
||||
const darkModeButton = document.getElementById("dark-mode")
|
||||
const bodyElement = document.querySelector('body')
|
||||
|
||||
if (darkModeButton.checked) {
|
||||
bodyElement.style.backgroundColor = "rgb(25, 25, 25)"
|
||||
bodyElement.style.color = "rgb(240, 240, 240)"
|
||||
|
||||
localStorage.setItem("memes.darkMode", true)
|
||||
}
|
||||
else {
|
||||
bodyElement.style.backgroundColor = "rgb(240, 240, 240)"
|
||||
bodyElement.style.color = "rgb(25, 25, 25)"
|
||||
|
||||
localStorage.setItem("memes.darkMode", false)
|
||||
}
|
||||
}
|
||||
|
||||
function setLocalStorage() {
|
||||
const autoPlayButton = document.getElementById("autoplay")
|
||||
|
||||
if (autoPlayButton.checked) {
|
||||
localStorage.setItem("memes.autoPlay", true)
|
||||
}
|
||||
else {
|
||||
localStorage.setItem("memes.autoPlay", false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
text-align: center;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
video {
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
width: 95vw;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-bottom: 10px;
|
||||
border-color: let(--bg-color);
|
||||
border: 0;
|
||||
background-color: lightgrey;
|
||||
transition: background-color ease-in 100ms;
|
||||
transition: transform linear 50ms;
|
||||
|
||||
border-radius: 25px;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: darkgrey;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transition: background-color linear 20ms;
|
||||
background-color: grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body onload="newVideo()" style="background-color:rgb(240, 240, 240); color:rgb(25, 25, 25)">
|
||||
|
||||
<p>Click button to see new video</p>
|
||||
|
||||
<button type="button" onclick="newVideo()">Get new video</button>
|
||||
|
||||
<input type="checkbox" id="autoplay" title="autoplayButton" value="True" onclick="setLocalStorage()">
|
||||
<label for="checkbox">Autoplay</label>
|
||||
|
||||
<input type="checkbox" id="dark-mode" title="modeSwitchButton" value="True" onclick="modeSwitch()">
|
||||
<label for="checkbox">Dark Mode</label>
|
||||
|
||||
<p>Click player to start memes</p>
|
||||
|
||||
<video src="" id="video-player" controls autoPlay></video>
|
||||
|
||||
|
||||
<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")
|
||||
const autoPlayButton = document.getElementById("autoplay")
|
||||
|
||||
video.onended = (event) => {
|
||||
if (autoPlayButton.checked) {
|
||||
setTimeout(newVideo, 500)
|
||||
}
|
||||
else {
|
||||
video.play()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let darkModeCheck = localStorage.getItem("memes.darkMode")
|
||||
if (darkModeCheck === "true") {
|
||||
const darkModeCheckbox = document.getElementById("dark-mode")
|
||||
darkModeCheckbox.checked = true
|
||||
modeSwitch()
|
||||
}
|
||||
|
||||
let autoPlayCheck = localStorage.getItem("memes.autoPlay")
|
||||
if (autoPlayCheck === "true") {
|
||||
autoPlayButton.checked = true
|
||||
setTimeout(newVideo, 500)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Reference in New Issue
Block a user