CatAClock/Fedi.CrowdedGames.Group
CatAClock/Fedi.CrowdedGames.Group
0
0
Fork 0
Code Issues Pull requests Activity

added audio, other pages. Improved some things

Browse source
This commit is contained in:
CatAClock 2025-04-19 21:28:29 -07:00
parent 2447be1a59
commit d291e9751c
8 changed files with 234 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Audio/button-305770.mp3 Normal file
View file

Binary file not shown.

BIN
Audio/button-pressed-38129.mp3 Normal file
View file

Binary file not shown.

BIN
Audio/soft-piano-music-312509.mp3 Normal file
View file

Binary file not shown.

112
index.html
View file

@ -25,6 +25,58 @@
<h1>The World Wide Web</h1> <h1>The World Wide Web</h1>
</header> </header>
<div style="width: 100%" class="PostContainerContainer">
<div style="left: -85vw;" class="PostContainer Back">
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
</div>
<div class="PostContainer"> <div class="PostContainer">
<article class="Post"> <article class="Post">
<p class="Username">Testing</p> <p class="Username">Testing</p>
@ -76,13 +128,65 @@
</article> </article>
</div> </div>
<img class="Arrow" src="Icons/ArrowLeft.png"/> <div style="left: 85vw;" class="PostContainer Next">
<img class="Arrow" src="Icons/ArrowRight.png"/> <article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
<article class="Post">
<p class="Username">Testing</p>
<p class="PostContent">The things</p>
</article>
</div>
</div>
<img class="Arrow" src="Icons/ArrowLeft.png" onclick="Back()"/>
<img class="Arrow" src="Icons/ArrowRight.png" onclick="Next()"/>
<footer class="MainFooter"> <footer class="MainFooter">
<p>Button</p> <p onclick="Setting()">Setting</p>
<p class="Time" style="width: 50%">Time</p> <p class="Time" style="width: 50%">Time</p>
<p>Button</p> <p onclick="Mail()">Mail</p>
</footer> </footer>
</section> </section>
<script src="script.js"></script> <script src="script.js"></script>

16
mail.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Change the fucking channel already!">
<title>The Fediverse</title>
</head>
<body style="margin: 0px; text-align: center;">
<header>
<h1>Mail</h1>
</header>
<p>Just go back. It ain't ready yet...</p>
<p onclick="history.back()"><b>OK</b></p>
</body>
</html>

50
script.js
View file

@ -1,11 +1,19 @@
// GLOBAL VARS // GLOBAL VARS
let Warning = document.getElementsByClassName("WarningMessage")[0]; let Warning = document.getElementsByClassName("WarningMessage")[0];
let Main = document.getElementsByClassName("Main")[0]; let Main = document.getElementsByClassName("Main")[0];
let Arrows = document.getElementsByClassName("Arrow");
let BrowserWidth = window.innerWidth; let BrowserWidth = window.innerWidth;
let BrowserHeight = window.innerHeight; let BrowserHeight = window.innerHeight;
// fuck you. I see why website developers use divs so fucking often.
let Arrows = document.getElementsByClassName("Arrow");
let ContainerContainer = document.getElementsByClassName("PostContainerContainer")[0];
// Sounds
const ButtonSound = new Audio("Audio/button-305770.mp3");
const WarningClick = new Audio("Audio/button-pressed-38129.mp3");
const BackgroundMusic = new Audio("Audio/soft-piano-music-312509.mp3");
// Update a timer // Update a timer
function UpdateTime() { function UpdateTime() {
var TimeNow = new Date(); var TimeNow = new Date();
@ -46,8 +54,46 @@ function Start() {
// On clicking the warning message // On clicking the warning message
function WarningFade() { function WarningFade() {
Warning.classList.add("WarningFadeOutAnimation"); Warning.classList.add("WarningFadeOutAnimation");
// fixes a damn stupid bug
document.getElementsByClassName("BlinkAnimation")[0].classList.remove("BlinkAnimation"); document.getElementsByClassName("BlinkAnimation")[0].classList.remove("BlinkAnimation");
Main.classList.add("MainFadeInAnimation"); Main.classList.add("MainFadeInAnimation");
Main.classList.remove("Main"); Main.classList.remove("Main");
Main = document.getElementsByClassName("MainFadeInAnimation")[0] WarningClick.play();
setTimeout(() => {
Main.classList.remove("MainFadeInAnimation");
BackgroundMusic.play();
}, 5000);
Main = document.getElementsByClassName("MainFadeInAnimation")[0];
}
// Clicking the next button
function Next() {
if (!ContainerContainer.classList.contains("NextAnimation")) {
ContainerContainer.classList.add("NextAnimation");
ButtonSound.play();
console.log("loading next posts...");
setTimeout(() => {
ContainerContainer.classList.remove("NextAnimation");
}, 1000);
}
}
// Clicking the back button
function Back() {
if (!ContainerContainer.classList.contains("BackAnimation")) {
ContainerContainer.classList.add("BackAnimation");
ButtonSound.play();
console.log("getting previous posts...");
setTimeout(() => {
ContainerContainer.classList.remove("BackAnimation");
}, 1000);
}
}
function Setting() {
window.location.href = "setting.html";
}
function Mail() {
window.location.href = "mail.html";
} }

16
setting.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Change the fucking channel already!">
<title>The Fediverse</title>
</head>
<body style="margin: 0px; text-align: center;">
<header>
<h1>Setting</h1>
</header>
<p>Just go back. It ain't ready yet...</p>
<p onclick="history.back()"><b>OK</b></p>
</body>
</html>

50
style.css
View file

@ -4,7 +4,6 @@
animation-play-state: running; animation-play-state: running;
animation-direction: alternate; animation-direction: alternate;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-duration: 2s; animation-duration: 2s;
} }
@keyframes Blink { @keyframes Blink {
@ -17,6 +16,47 @@
} }
} }
.NextAnimation {
animation-name: Next;
animation-play-state: running;
animation-duration: 1s;
left : 0vw;
position: absolute;
}
@keyframes Next {
0% {
left: 0vw;
}
100% {
left: -85vw;
}
}
.BackAnimation {
animation-name: Back;
animation-play-state: running;
animation-duration: 1s;
left: 0vw;
position: absolute;
}
@keyframes Back {
0% {
left: 0vw;
}
100% {
left: 85vw;
}
}
html {
overflow-x: hidden;
overflow-y: hidden;
}
/* Classes for the warning section*/ /* Classes for the warning section*/
.WarningMessage { .WarningMessage {
position: absolute; position: absolute;
@ -112,7 +152,7 @@
.MainHeader { .MainHeader {
text-align: center; text-align: center;
height: 5%; height: 5vh;
} }
.Arrow { .Arrow {
@ -121,6 +161,7 @@
} }
.PostContainer { .PostContainer {
position: absolute;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -129,7 +170,7 @@
margin-right: 10%; margin-right: 10%;
width: 80%; width: 80%;
height: 70%; height: 70vh;
} }
.Post { .Post {
@ -151,9 +192,10 @@
.MainFooter { .MainFooter {
display: flex; display: flex;
margin-top: 75vh;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
height: 20%; height: 20vh;
} }