/guestbook, /autist, font changes and a new /projects entry

This commit is contained in:
zyqunix 2024-12-02 19:57:07 +01:00
parent edc8589d1d
commit 8fc3faf8bb
41 changed files with 400 additions and 101 deletions

26
autist/index.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Autist</title>
<meta name="description" content="Autistic ass friend vro 😭😭😭">
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head>
<body>
<marquee id="ad" behavior="scroll" direction="left" aria-label="Site donation message">
Help maintain this site by <a href="https://fentseller.lol/bio">donating crypto</a> (server costs are $2/month). If you don't want to or can't, that's alright :)! You can submit audios <a href="https://github.com/zyqunix/tools/issues">here</a>
</marquee>
<div class="main" id="main">
<h3 id="played">No sound played. Press the button!</h3>
<button id="playButton">Get random sound</button>
</div>
<audio id="audio" autoplay src="" aria-hidden="true"></audio>
<button id="toggle">Toggle Ad</button>
<script src="index.js"></script>
</body>
</html>

35
autist/index.js Normal file
View file

@ -0,0 +1,35 @@
const sounds = {
autist: 'wav/sound1.wav',
downie: 'wav/sound2.wav',
retard: 'wav/sound3.wav',
'retarded autistic downie': 'wav/sound4.wav'
};
const button = document.getElementById('playButton');
const header = document.getElementById('played');
const toggle = document.getElementById('toggle');
const ad = document.getElementById('ad');
let isHidden = false;
button.addEventListener('click', function() {
const audio = document.getElementById('audio');
const keys = Object.keys(sounds);
let randKey = keys[Math.floor(Math.random() * keys.length)];
let randSound = sounds[randKey];
audio.src = randSound;
audio.play();
header.innerHTML = randKey;
});
toggle.addEventListener('click', function() {
if (!isHidden) {
ad.style.display = 'none';
isHidden = true;
} else {
ad.style.display = 'flex';
isHidden = false;
}
})

151
autist/style.css Normal file
View file

@ -0,0 +1,151 @@
@font-face {
font-family: 'Hack';
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'JetBrainsMono';
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
}
body {
background-color: #505050;
color: white;
font-family: monospace;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
padding: 20px;
flex-direction: column;
overflow: hidden;
font-family: 'JetBrainsMono', 'Hack', monospace;
}
.top {
top: 0;
left: 0;
}
marquee {
position: relative;
font-size: 16px;
padding: 10px 0;
background-color: #454545;
color: #fff;
width: 100%;
}
::selection {
color: white;
background-color: #b49cdf;
}
button:not(#toggle) {
color: white;
background-color: #b49cdf;
border: 2px solid #9f8ac7;
border-radius: 3px;
cursor: pointer;
transition: 0.1s ease-in-out;
padding: 10px 20px;
font-weight: bold;
margin: 10px;
}
#toggle {
left: 10px;
bottom: 10px;
position: absolute;
cursor: pointer;
padding: 3px;
color: #c0c0c0;
background-color: #454545;
border: 2px solid #404040;
border: none;
}
#toggle:hover {
color: #b49cdf;
background-color: #404040;
}
button:hover:not(#toggle) {
background-color: #9f8ac7;
border-color: #947fb9;
}
.main {
max-width: 80%;
text-align: center;
padding: 30px;
background-color: #454545;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
transform: scale(1.1);
}
a {
text-decoration: underline;
color: white;
transition: color 0.1s;
}
a:hover {
color: #cdb1ff;
}
@media (min-width: 1024px) {
.main {
max-width: 50%;
padding: 40px;
transform: scale(1.2);
}
button {
padding: 12px 30px;
}
marquee {
position: absolute;
top: 0;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.main {
max-width: 70%;
padding: 35px;
}
button {
padding: 10px 20px;
}
marquee {
position: absolute;
top: 0;
}
}
@media (max-width: 767px) {
.main {
max-width: 100%;
padding: 20px;
transform: scale(1);
}
marquee {
font-size: 14px;
position: absolute;
top: 0;
}
button {
padding: 8px 16px;
font-size: 14px;
}
}

BIN
autist/wav/sound1.wav Normal file

Binary file not shown.

BIN
autist/wav/sound2.wav Normal file

Binary file not shown.

BIN
autist/wav/sound3.wav Normal file

Binary file not shown.

BIN
autist/wav/sound4.wav Normal file

Binary file not shown.