nick/riptweak
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Nick Bouwhuis 2023-10-10 23:35:11 +02:00
commit 6510abcaf2
7 changed files with 145 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/rip1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/rip2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
img/rip3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
img/rip4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

145
index.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RIP Tweak</title>
<style>
@keyframes fadey {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
opacity: 0;
}
}
body {
font-family: Avenir, Arial, sans-serif;
margin: 0;
font-size: 0;
}
figure#slideshow {
width: 80%;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
cursor: pointer;
}
figure#slideshow img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0;
}
figure#slideshow img:first-child {
position: relative;
}
#container:fullscreen {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
#container:-moz-full-screen figure,
#container:-ms-full-screen figure,
#container:-webkit-fullscreen figure,
#container:fullscreen figure {
width: 100%;
margin: 0 auto;
background: #fff;
}
:-webkit-full-screen {
width: 100%;
height: 100%;
}
*:-moz-full-screen {
background: #fff;
}
*:-webkit-full-screen {
background: #fff;
}
</style>
</head>
<body>
<audio autoplay controls id="remember">
<source src="remember.wav" type="audio/wav">
<source src="remember.mp3" type="audio/mpeg">
Your browser does not support audio :(
</audio>
<!-- click to bring the slideshow in and out of fullscreen mode -->
<figure id="container" onclick="fullScreen(this)">
<figure id="slideshow">
<img src="img/rip1.png">
<img src="img/rip2.png">
<img src="img/rip3.png">
<img src="img/rip4.png">
</figure>
</figure>
<script>
function cancelFullScreen() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msCancelFullScreen) {
document.msCancelFullScreen();
}
link = document.getElementById("container");
link.removeAttribute("onclick");
link.setAttribute("onclick", "fullScreen(this)");
}
function fullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
link = document.getElementById("container");
link.removeAttribute("onclick");
link.setAttribute("onclick", "cancelFullScreen()");
}
window.onload = function () {
imgs = document.getElementById('slideshow').children;
interval = 8000;
currentPic = 0;
imgs[currentPic].style.webkitAnimation = 'fadey ' + interval + 'ms';
imgs[currentPic].style.animation = 'fadey ' + interval + 'ms';
var infiniteLoop = setInterval(function () {
imgs[currentPic].removeAttribute('style');
if (currentPic == imgs.length - 1) { currentPic = 0; } else { currentPic++; }
imgs[currentPic].style.webkitAnimation = 'fadey ' + interval + 'ms';
imgs[currentPic].style.animation = 'fadey ' + interval + 'ms';
}, interval);
}
</script>
</body>
</html>

BIN
remember.mp3 Normal file
View File

Binary file not shown.

BIN
remember.wav Normal file
View File

Binary file not shown.