2023-01-09 21:30:45 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<?php
|
|
|
|
$captions = array(
|
|
|
|
'bruh moment',
|
|
|
|
'Try reloading!',
|
|
|
|
'I use arch btw',
|
|
|
|
'<span class="rainbowtext">RGB Gaming Webpage</span>',
|
|
|
|
'MySite.html',
|
|
|
|
'Over Construction',
|
|
|
|
'Real isopod hours',
|
|
|
|
'depytwisty',
|
|
|
|
'[object Object]',
|
|
|
|
'* You found the [Moss]!',
|
|
|
|
'Isopod gaming',
|
|
|
|
'Website of "some guy"',
|
|
|
|
'your mom',
|
|
|
|
'Badly programmed',
|
|
|
|
'<span class="flipped">Upside Down!</span>',
|
|
|
|
'Oh, you know ;)',
|
|
|
|
'gamer (terminal)',
|
|
|
|
'This is not a place of honor',
|
|
|
|
'ඞ',
|
|
|
|
'127.0.0.1',
|
|
|
|
'swag',
|
|
|
|
'\'\'',
|
|
|
|
'<span class="minecraftsplash">Kind of dragon free!</span>',
|
|
|
|
'The Only Website',
|
|
|
|
'Hover over me!',
|
|
|
|
'Water me!'
|
|
|
|
);
|
|
|
|
$cap = $captions[array_rand($captions)];
|
|
|
|
?>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<title>Pot</title>
|
|
|
|
<link href="style.css" rel="stylesheet" type="text/css" media="all">
|
|
|
|
<style type="text/css">
|
|
|
|
:root {
|
|
|
|
--top-header-gap: 90px;
|
|
|
|
--menuwidth: 140px;
|
|
|
|
}
|
|
|
|
html, body {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
h1 {
|
|
|
|
width: 250px;
|
|
|
|
position: absolute;
|
|
|
|
top: var(--top-header-gap);
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
h2 {
|
|
|
|
width: 238px;
|
|
|
|
position: absolute;
|
|
|
|
top: calc(34px + var(--top-header-gap));
|
|
|
|
text-align: right;
|
|
|
|
font-size: 1.1em;
|
|
|
|
}
|
|
|
|
#mainmenu {
|
|
|
|
background: #222222;
|
|
|
|
font-family: mono, monospace;
|
|
|
|
transition-duration: 0.6s;
|
|
|
|
height: 250px;
|
|
|
|
width: var(--menuwidth);
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 250px;
|
|
|
|
z-index: 2;
|
|
|
|
box-shadow: 0 0 0 black;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
body:hover #mainmenu {
|
|
|
|
left: calc(250px - var(--menuwidth));
|
|
|
|
box-shadow: 0 0 20px black;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
#mainmenu a {
|
|
|
|
color: #df1955;
|
|
|
|
}
|
|
|
|
#mainmenu a:hover {
|
|
|
|
color: #00ffd5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flipped {
|
|
|
|
display: inline-block;
|
|
|
|
transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
.rainbowtext {
|
|
|
|
animation-name: rainbow-text;
|
|
|
|
animation-duration: 20s;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
.blinking {
|
|
|
|
animation-name: opacityblink;
|
|
|
|
animation-duration: 2s;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
.minecraftsplash {
|
|
|
|
animation-name: growshrink;
|
|
|
|
animation-duration: 1.5s;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
color: yellow;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes growshrink {
|
|
|
|
0%, 100% { transform: scale(1) /*rotate(-10deg)*/; }
|
|
|
|
50% { transform: scale(1.2) /*rotate(-10deg)*/; }
|
|
|
|
}
|
|
|
|
@keyframes opacityblink {
|
|
|
|
0%, 50% {opacity: 0;}
|
|
|
|
50.001%, 100% {opacity: 1;}
|
|
|
|
}
|
|
|
|
@keyframes rainbow-text {
|
|
|
|
100%,0%{color: rgb(255,0,0); text-shadow: 0 0 4px rgb(216, 1, 1);}
|
|
|
|
8%{color: rgb(255,127,0); text-shadow: 0 0 4px rgb(211, 105, 0);}
|
|
|
|
16%{color: rgb(255,255,0); text-shadow: 0 0 4px rgb(214, 214, 0);}
|
|
|
|
25%{color: rgb(127,255,0); text-shadow: 0 0 4px rgb(105, 211, 0);}
|
|
|
|
33%{color: rgb(0,255,0); text-shadow: 0 0 4px rgb(0, 204, 0);}
|
|
|
|
41%{color: rgb(0,255,127); text-shadow: 0 0 4px rgb(0, 209, 105);}
|
|
|
|
50%{color: rgb(0,255,255); text-shadow: 0 0 4px rgb(0, 202, 202);}
|
|
|
|
58%{color: rgb(0,127,255); text-shadow: 0 0 4px rgb(0, 103, 206);}
|
|
|
|
66%{color: rgb(0,0,255); text-shadow: 0 0 4px rgb(0, 0, 206);}
|
|
|
|
75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);}
|
|
|
|
83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);}
|
|
|
|
91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
|
|
|
|
}
|
|
|
|
@keyframes arrowwiggle {
|
|
|
|
0%,90%,100% {left: 235px;}
|
|
|
|
92% {left: 231px;}
|
|
|
|
}
|
|
|
|
audio {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
#mus:checked ~ audio {
|
|
|
|
display: initial;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a target="_blank" href="../../">
|
|
|
|
<div id="plant" style="background: url('images/webgarden-bg.png');">
|
|
|
|
<h1>isopod.cool</h1>
|
|
|
|
<h2><?php echo $cap; ?></h2>
|
|
|
|
<img src="../../images/autoisopod_small.png" style="width: 70px; position: absolute; transform: scaleX(-1) rotate(-30deg); top: 188px; left: 170px;" />
|
|
|
|
<img src="images/bubblecolumn1.gif" style="height: 250px; position: absolute; left: 20px; top: 0;" />
|
|
|
|
<span style="position: absolute; top: 4px; left: 235px; animation-name: arrowwiggle; animation-duration: 6s; animation-iteration-count: infinite; width: fit-content; text-align: right;"><<span>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<input type="checkbox" id="mus" name="mus" style="display: none;"></input>
|
|
|
|
<div id="mainmenu">
|
|
|
|
<a target="_blank" href="../../">homepage</a>
|
|
|
|
<!--a target="_blank" href="../../desktop.html">$login<span class="blinking">_</span></a-->
|
|
|
|
<hr style="width: 30px;">
|
|
|
|
<a href="image1.html">images</a>
|
|
|
|
<a href="status.php">status</a>
|
|
|
|
<label for="mus"><a style="text-decoration: underline; cursor: pointer;">play music</a></label>
|
2023-09-24 09:38:51 +00:00
|
|
|
<hr style="width: 30px;">
|
|
|
|
<iframe src="https://isopod.cool/stuff/beat/frame.php?theme=pixel" style="width: 84px; height: 27px;"></iframe>
|
2023-01-09 21:30:45 +00:00
|
|
|
</div>
|
|
|
|
<audio controls style="position: absolute; width: calc(100% - 0.4rem); top: 0.2rem; left: 0.2rem; z-index: 5;"><source src="music.mp3" type="audio/mp3"></audio>
|
|
|
|
</body>
|
|
|
|
</html>
|