firepup-site/public/pages/cheese.html

71 lines
2.4 KiB
HTML
Raw Normal View History

2023-10-01 23:39:12 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FP650 - Cheese</title>
2024-04-27 02:56:26 +00:00
<link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
2023-10-02 01:28:54 +00:00
<!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
<!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/cheese"></script> -->
2023-10-01 23:39:12 +00:00
<div id="preloads">
<link rel="preload" href="/images/cheese.png" as="image">
2024-05-13 17:55:34 +00:00
<link rel="preload" href="/images/purple-cheese.png" as="image">
2023-10-01 23:39:12 +00:00
</div>
</head>
<body>
<h5 hidden id='Maintenance' class="center"></h5>
2024-05-13 17:55:34 +00:00
<input class="center" type="checkbox" name="checkbox1" id="check" onclick="return cheeseTheme();">
<label for="check">
<span class="center force-color">But what if it was purple?</span>
</label>
2024-04-27 02:56:26 +00:00
<img alt="Bouncing cheese" id="cheese" src="/images/cheese.png" style="position: fixed; z-index: -1;" class="no-special">
2023-10-01 23:39:12 +00:00
<script>
2024-05-13 17:55:34 +00:00
function cheeseTheme() {
var checkbox = document.getElementById("check");
if(!checkbox.checked) {
document.getElementById("cheese").src = "/images/cheese.png"
document.getElementById("cheese").alt = "Cheese"
} else {
document.getElementById("cheese").src = "/images/purple-cheese.png"
document.getElementById("cheese").alt = "Purple Cheese"
}
}
2023-10-01 23:39:12 +00:00
var vX = 2;
var ovX = 2;
var ovY = 2;
var vY = 2;
var rot = 0;
function move() {
var width = window.innerWidth;
var height = window.innerHeight;
var elem = document.getElementById("cheese");
if(!elem.style.left) elem.style.left = width / 2 + "px";
if(!elem.style.top) elem.style.top = height / 2 + "px";
var oldX = parseInt(elem.style.left.slice(0, -2));
var oldY = parseInt(elem.style.top.slice(0, -2));
if(oldX < 0) vX = Math.abs(vX);
if(oldY < 0) vY = Math.abs(vY);
if(oldX + 150 > width) vX = -Math.abs(vX);
if(oldY + 150 > height) vY = -Math.abs(vY);
if(!(ovX == vX || ovY == ovY)) {ovX=vX; ovY=vY; }
elem.style.left = (oldX + vX) + "px";
elem.style.top = (oldY + vY) + "px";
rot += 1;
elem.style.transform = "rotate(" + rot + "deg)";
setTimeout(move, 1000 / 60);
}
move();
</script>
<script src="/script.js"></script>
2023-10-01 23:39:12 +00:00
</body>
</html>