PossiblyAxolotl/i-eat.rocks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add spin

Browse source
This commit is contained in:
PossiblyAxolotl 2024-11-18 20:43:34 -06:00
parent c049ea4c24
commit b639656b2f
6 changed files with 101 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
site/apps/info.html
View file

@ -45,6 +45,7 @@
<div id="body">
<h1>i-eat.rocks</h1>
<p>Rock-OS v0.1.3</p>
<p>Created by <a onclick="window.parent.postMessage(`url https://www.possiblyaxolotl.com/`)">PossiblyAxolotl</a></p>
<p>Share the website:</p>
<img src="/images/ui/ieatrocks.png" />
<textarea>&lt;a href="https://i-eat.rocks"&gt;&lt;img src="https://i-eat.rocks/images/ui/ieatrocks.png" alt="i-eat.rocks" /&gt;&lt;/a&gt;</textarea>

86
site/apps/spin.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROCKSPIN</title>
<script src="https://penis.possiblyaxolotl.com/index.js" defer></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@keyframes rotateY {
to {transform: rotateY(360deg)}
}
@keyframes rotateX {
to {rotate: 360deg;}
}
@keyframes hues {
0% {
filter: hue-rotate(0deg);
}
100% {filter: hue-rotate(360deg);}
}
#rock {
animation: rotateY 2s infinite linear, rotateX 10s infinite linear, hues 1s linear infinite;
margin: 20px;
width: calc(100vw - 40px);
max-width: 70vw;
max-height: 70vw;
justify-content: center;
align-items: center;
display: flex;
}
body {
text-align: center;
height: 100vh;
background-color: black;
align-items: center;
justify-content: center;
align-items: center;
display: flex;
}
canvas {
position: absolute;
width: 100vw;
height: 100vh;
}
button {
position: absolute;
}
</style>
</head>
<body>
<canvas></canvas>
<img src="/images/ui/rock.png" id="rock">
<audio hidden loop id="audio"><source src="/audio/rockspin.ogg" type="audio/mp3"></audio>
<button id="b" onclick="a.play(); this.style.display = 'none'">Autoplay is disabled! Click here to play audio.</button>
<script>
const a = document.getElementById("audio");
const b = document.getElementById("b");
var p = a.play();
if (p !== undefined) {
p.then(_ => {
b.style.display = 'none';
}).catch(error => {
b.style.display = 'auto';
});
}
</script>
</body>
</html>

BIN
site/audio/rockspin.ogg Normal file
View file

Binary file not shown.

2
site/drag.js
View file

@ -12,7 +12,7 @@ function clampPos() {
const lPad = -selected.offsetWidth / 2;
const rPad = window.innerWidth - selected.offsetWidth / 2;
const tPad = 0;
const bPad = document.body.offsetHeight - 72;
const bPad = document.body.offsetHeight -72+32;
if (sPosX < lPad) {selected.style.left = lPad + "px"};
if (sPosX > rPad) {selected.style.left = rPad + "px"};

7
site/index.html
View file

@ -29,6 +29,9 @@
<div class="app" ondblclick="createWindow('apps/famous/', 'famous rocks', '500px', '500px')">
<p><img src="images/icons/globe.png" width="48px" height="48px" /><sub>famous rocks</sub></p>
</div>
<div class="app" ondblclick="createWindow('apps/spin.html', 'rockspin!!!', '400', '400')">
<p><img src="images/ui/rock.png" width="48px" height="48px" /><sub>rockspin</sub></p>
</div>
<div class="app" ondblclick="createWindow('apps/terminal.html', 'terminal', '800px', '500px')">
<p><img src="images/icons/terminal.png" width="48px" height="48px" /><sub>terminal</sub></p>
</div>
@ -48,7 +51,9 @@
</div>
</div>
<nav></nav>
<nav>
<!--<img src="images/ui/rock.png" class="taskbar" onclick="createWindow('apps/spin.html', 'rockspin!!!', '400', '400')" />-->
</nav>
<script defer>
function getTopLevelUrl() {

7
site/style.css
View file

@ -171,4 +171,11 @@ nav {
box-shadow: 0px 0px 4px rgba(0,0,0,0.5);
/*z-index: 2147483647;*/
}
.taskbar {
margin: 4px;
max-height: 40px;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
}