1
0
Fork 0
isopod.cool/stuff/webgarden/index.php
will 26e116971a Various new posts + quotes update + minor changes
New blog posts:
- How to Make Youtube Videos Buffer All The Way Like The Old Days (In Firefox)
- My Terrible, Horrible, No-Good, Very Bad Distro Hop
- Building a Completely Normal Server
New journal entries
Updated quotes
Added Cohost profile to /links/
Added new albums to /music/
Added buttons to webgarden
Updated info on my laptop in /uses/
house
2024-02-29 04:38:50 -07:00

172 lines
5.7 KiB
PHP

<!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&nbsp;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;">&lt;<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>
<hr style="width: 30px;">
<iframe src="https://isopod.cool/stuff/beat/frame.php?theme=pixel" style="width: 84px; height: 27px;"></iframe>
<img src="/etc/buttons/isopodhours.png" alt="isopod hours"/>
<img src="/etc/buttons/nonbinary.png" alt="nonbinary"/>
</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>