add spin
This commit is contained in:
parent
c049ea4c24
commit
b639656b2f
6 changed files with 101 additions and 2 deletions
|
|
@ -45,6 +45,7 @@
|
||||||
<div id="body">
|
<div id="body">
|
||||||
<h1>i-eat.rocks</h1>
|
<h1>i-eat.rocks</h1>
|
||||||
<p>Rock-OS v0.1.3</p>
|
<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>
|
<p>Share the website:</p>
|
||||||
<img src="/images/ui/ieatrocks.png" />
|
<img src="/images/ui/ieatrocks.png" />
|
||||||
<textarea><a href="https://i-eat.rocks"><img src="https://i-eat.rocks/images/ui/ieatrocks.png" alt="i-eat.rocks" /></a></textarea>
|
<textarea><a href="https://i-eat.rocks"><img src="https://i-eat.rocks/images/ui/ieatrocks.png" alt="i-eat.rocks" /></a></textarea>
|
||||||
|
|
|
||||||
86
site/apps/spin.html
Normal file
86
site/apps/spin.html
Normal 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
BIN
site/audio/rockspin.ogg
Normal file
Binary file not shown.
|
|
@ -12,7 +12,7 @@ function clampPos() {
|
||||||
const lPad = -selected.offsetWidth / 2;
|
const lPad = -selected.offsetWidth / 2;
|
||||||
const rPad = window.innerWidth - selected.offsetWidth / 2;
|
const rPad = window.innerWidth - selected.offsetWidth / 2;
|
||||||
const tPad = 0;
|
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 < lPad) {selected.style.left = lPad + "px"};
|
||||||
if (sPosX > rPad) {selected.style.left = rPad + "px"};
|
if (sPosX > rPad) {selected.style.left = rPad + "px"};
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,9 @@
|
||||||
<div class="app" ondblclick="createWindow('apps/famous/', 'famous rocks', '500px', '500px')">
|
<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>
|
<p><img src="images/icons/globe.png" width="48px" height="48px" /><sub>famous rocks</sub></p>
|
||||||
</div>
|
</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')">
|
<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>
|
<p><img src="images/icons/terminal.png" width="48px" height="48px" /><sub>terminal</sub></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,7 +51,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav></nav>
|
<nav>
|
||||||
|
<!--<img src="images/ui/rock.png" class="taskbar" onclick="createWindow('apps/spin.html', 'rockspin!!!', '400', '400')" />-->
|
||||||
|
</nav>
|
||||||
|
|
||||||
<script defer>
|
<script defer>
|
||||||
function getTopLevelUrl() {
|
function getTopLevelUrl() {
|
||||||
|
|
|
||||||
|
|
@ -172,3 +172,10 @@ nav {
|
||||||
|
|
||||||
/*z-index: 2147483647;*/
|
/*z-index: 2147483647;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.taskbar {
|
||||||
|
margin: 4px;
|
||||||
|
max-height: 40px;
|
||||||
|
|
||||||
|
filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue