diff --git a/Audio/button-305770.mp3 b/Audio/button-305770.mp3
new file mode 100644
index 0000000..44577f8
Binary files /dev/null and b/Audio/button-305770.mp3 differ
diff --git a/Audio/button-pressed-38129.mp3 b/Audio/button-pressed-38129.mp3
new file mode 100644
index 0000000..32337ba
Binary files /dev/null and b/Audio/button-pressed-38129.mp3 differ
diff --git a/Audio/soft-piano-music-312509.mp3 b/Audio/soft-piano-music-312509.mp3
new file mode 100644
index 0000000..90f2c43
Binary files /dev/null and b/Audio/soft-piano-music-312509.mp3 differ
diff --git a/index.html b/index.html
index ff70078..3999634 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,58 @@
The World Wide Web
+
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+
Testing
@@ -76,13 +128,65 @@
-
-
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+ Testing
+ The things
+
+
+
Just go back. It ain't ready yet...
+ OK
+
+
diff --git a/script.js b/script.js
index 6a48966..d25f30e 100644
--- a/script.js
+++ b/script.js
@@ -1,11 +1,19 @@
// GLOBAL VARS
let Warning = document.getElementsByClassName("WarningMessage")[0];
let Main = document.getElementsByClassName("Main")[0];
-let Arrows = document.getElementsByClassName("Arrow");
let BrowserWidth = window.innerWidth;
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
function UpdateTime() {
var TimeNow = new Date();
@@ -46,8 +54,46 @@ function Start() {
// On clicking the warning message
function WarningFade() {
Warning.classList.add("WarningFadeOutAnimation");
+ // fixes a damn stupid bug
document.getElementsByClassName("BlinkAnimation")[0].classList.remove("BlinkAnimation");
Main.classList.add("MainFadeInAnimation");
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";
}
diff --git a/setting.html b/setting.html
new file mode 100644
index 0000000..31e0001
--- /dev/null
+++ b/setting.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ The Fediverse
+
+
+
+
+ Just go back. It ain't ready yet...
+ OK
+
+
diff --git a/style.css b/style.css
index 1ab53f1..5227689 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,6 @@
animation-play-state: running;
animation-direction: alternate;
animation-iteration-count: infinite;
-
animation-duration: 2s;
}
@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*/
.WarningMessage {
position: absolute;
@@ -112,7 +152,7 @@
.MainHeader {
text-align: center;
- height: 5%;
+ height: 5vh;
}
.Arrow {
@@ -121,6 +161,7 @@
}
.PostContainer {
+ position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -129,7 +170,7 @@
margin-right: 10%;
width: 80%;
- height: 70%;
+ height: 70vh;
}
.Post {
@@ -151,9 +192,10 @@
.MainFooter {
display: flex;
+ margin-top: 75vh;
text-align: center;
justify-content: center;
- height: 20%;
+ height: 20vh;
}