IsaacShoebottom/memes
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify memes page

Browse Source
This commit is contained in:
Isaac Shoebottom 2024-05-30 13:39:56 -03:00
parent cc5214b1ef
commit 0164ccbd67
1 changed files with 19 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
index.html
View File

@ -1,150 +1,45 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Click for memes</title> <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 src="max.js"></script>
<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() { function generateRandomID() {
let videoID = Math.floor(Math.random() * MAX + 1) let videoID = Math.floor(Math.random() * MAX + 1)
let videoIDString = videoID.toString(); let videoIDString = videoID.toString();
let paddedID = videoIDString.padStart(5, '0') let paddedID = videoIDString.padStart(5, '0')
return paddedID return paddedID
} }
function newVideo() { function newVideo() {
let videoPlayer = document.getElementById("video-player") let videoPlayer = document.getElementById("video-player")
let paddedID let paddedID = generateRandomID()
while (video.src.includes(paddedID)) {
do {
paddedID = generateRandomID() paddedID = generateRandomID()
} while (idQueue.indexOf(paddedID) > 0)
if (idQueue.length < MAX) {
idQueue.push(paddedID)
} }
else {
idQueue.shift()
}
videoPlayer.src = (paddedID + ".mp4") 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> </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> </head>
<body onload="newVideo()" style="background-color:rgb(240, 240, 240); color:rgb(25, 25, 25)"> <body class="container-fluid" onload="newVideo()">
<div class="d-flex align-self-center justify-content-center align-items-center">
<p>Click button to see new video</p> <video class="vw-100 vh-100" id="video-player" controls autoPlay></video>
</div>
<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>
<script> <script>
const video = document.getElementById("video-player") const video = document.getElementById("video-player")
const autoPlayButton = document.getElementById("autoplay")
video.onended = (event) => { video.onended = (event) => {
if (autoPlayButton.checked) {
setTimeout(newVideo, 500) 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
}
</script> </script>
</body> </body>