first commit
This commit is contained in:
53
maintenance.html
Normal file
53
maintenance.html
Normal file
@ -0,0 +1,53 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Purgatory</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<link rel="icon" href="icon.gif" type="image/gif" />
|
||||
|
||||
<audio loop autoplay loop id="bg-audio" volume="0">
|
||||
<source src="old_doll.wav" type="audio/wav" />
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
<video autoplay muted loop playsinline id="bg-video">
|
||||
<source src="bg.mp4" type="video/mp4" />
|
||||
no video tag ):
|
||||
</video>
|
||||
<div id="video-overlay"></div>
|
||||
<div id="content">
|
||||
<h1>Purgatory</h1>
|
||||
<p>This website is under construction, check back later!</p>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
let userInteracted = false;
|
||||
const audio = document.getElementById("bg-audio");
|
||||
|
||||
audio.volume = 0.1
|
||||
|
||||
function markInteraction() {
|
||||
userInteracted = true;
|
||||
audio.play()
|
||||
window.removeEventListener("click", markInteraction);
|
||||
window.removeEventListener("keydown", markInteraction);
|
||||
window.removeEventListener("touchstart", markInteraction);
|
||||
}
|
||||
|
||||
window.addEventListener("click", markInteraction);
|
||||
window.addEventListener("keydown", markInteraction);
|
||||
window.addEventListener("touchstart", markInteraction);
|
||||
|
||||
if (userInteracted) {
|
||||
audio.play();
|
||||
} else {
|
||||
window.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
audio.play();
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</html>
|
BIN
old_doll.wav
Normal file
BIN
old_doll.wav
Normal file
Binary file not shown.
47
styles.css
Normal file
47
styles.css
Normal file
@ -0,0 +1,47 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
|
||||
|
||||
#bg-video {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#video-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Inconsolata", monospace;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content > * {
|
||||
margin: 3;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
Reference in New Issue
Block a user