added audio, other pages. Improved some things
This commit is contained in:
parent
2447be1a59
commit
d291e9751c
8 changed files with 234 additions and 10 deletions
BIN
Audio/button-305770.mp3
Normal file
BIN
Audio/button-305770.mp3
Normal file
Binary file not shown.
BIN
Audio/button-pressed-38129.mp3
Normal file
BIN
Audio/button-pressed-38129.mp3
Normal file
Binary file not shown.
BIN
Audio/soft-piano-music-312509.mp3
Normal file
BIN
Audio/soft-piano-music-312509.mp3
Normal file
Binary file not shown.
112
index.html
112
index.html
|
|
@ -25,6 +25,58 @@
|
|||
<h1>The World Wide Web</h1>
|
||||
</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">
|
||||
<article class="Post">
|
||||
<p class="Username">Testing</p>
|
||||
|
|
@ -76,13 +128,65 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
<img class="Arrow" src="Icons/ArrowLeft.png"/>
|
||||
<img class="Arrow" src="Icons/ArrowRight.png"/>
|
||||
<div style="left: 85vw;" class="PostContainer Next">
|
||||
<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">
|
||||
<p>Button</p>
|
||||
<p onclick="Setting()">Setting</p>
|
||||
<p class="Time" style="width: 50%">Time</p>
|
||||
<p>Button</p>
|
||||
<p onclick="Mail()">Mail</p>
|
||||
</footer>
|
||||
</section>
|
||||
<script src="script.js"></script>
|
||||
|
|
|
|||
16
mail.html
Normal file
16
mail.html
Normal 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
50
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";
|
||||
}
|
||||
|
|
|
|||
16
setting.html
Normal file
16
setting.html
Normal 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
50
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue