331 lines
7.2 KiB
HTML
331 lines
7.2 KiB
HTML
<!--
|
|
SPDX-FileCopyrightText: 2024 Aravinth Manivannan <realaravinth@batsense.net>
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div id='starter'>Please press enter to launch the store</div>
|
|
<div id='scene'>
|
|
<div id='curtain'>
|
|
|
|
<h1>Please wait while the store is being provisioned</h1>
|
|
<h1 id="countdown">10</h1>
|
|
|
|
<div class='left'></div>
|
|
<div class='right'></div>
|
|
</div>
|
|
|
|
</div>
|
|
<style>
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');
|
|
|
|
body {
|
|
width: 100%;
|
|
min-height: 600px;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
#starter {
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 25%;
|
|
width: 1000px;
|
|
height: 50px;
|
|
margin-top: -25px;
|
|
margin-left: -150px;
|
|
text-align: center;
|
|
font-family: "Petit Formal Script", cursive;
|
|
font-size: 3em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color:#fff;
|
|
}
|
|
|
|
#scene {
|
|
/* position: fixed; */
|
|
/* top: 20%; */
|
|
left: 10%;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
background-color: #000;
|
|
|
|
}
|
|
#curtain {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
#curtain .left,
|
|
#curtain .right {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
filter: brightness(180%);
|
|
background-image: url("./curatain-min.jpeg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#curtain .left {
|
|
left: 0;
|
|
transform-origin: top right;
|
|
}
|
|
#curtain .right {
|
|
left: 50%;
|
|
transform-origin: top left;
|
|
}
|
|
|
|
/* .ground {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 133%;
|
|
width: 10000px;
|
|
height: 10000px;
|
|
margin-left: -5000px;
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 100px 100px white;
|
|
} */
|
|
|
|
h1 {
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
|
|
|
|
/* top: 50%; */
|
|
/* display: inli */
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
|
|
margin-left: -300px;
|
|
|
|
font-family: "Petit Formal Script", cursive;
|
|
font-size: 6.2em;
|
|
color: #FFD700;
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
#countdown {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
height:150px;
|
|
width:300px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-size: 5em;
|
|
color: #FFD700;
|
|
}
|
|
/* **********
|
|
opening
|
|
********** */
|
|
|
|
#scene.expand {
|
|
width: 140%;
|
|
left: -10%;
|
|
margin-left: 0;
|
|
background-color: rgb(32,32,32);
|
|
box-shadow: 0 0 0 red inset;
|
|
animation-fill-mode: forwards;
|
|
animation-name: expand-scene-horizontaly, expand-scene-verticaly;
|
|
animation-duration: 1.5s;
|
|
animation-timing-function: ease-in-out, ease-in-out;
|
|
animation-delay: 0s, 1.5s;
|
|
animation-iteration-count: 1, 1;
|
|
animation-direction: normal, normal;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#curtain.open .left,
|
|
#curtain.open .right {
|
|
filter: brightness(100%);
|
|
}
|
|
#curtain.open .left {
|
|
animation-fill-mode: forwards;
|
|
animation-name: curtain-opening, left-curtain-opening;
|
|
animation-duration: 2s, 4s;
|
|
animation-timing-function: ease-in-out, ease-in-out;
|
|
animation-delay: 0s, 0s;
|
|
animation-iteration-count: 1, 1;
|
|
animation-direction: normal, normal;
|
|
}
|
|
#curtain.open .right {
|
|
animation-fill-mode: forwards;
|
|
animation-name: curtain-opening, right-curtain-opening;
|
|
animation-duration: 2s, 4s;
|
|
animation-timing-function: ease-in-out, ease-in-out;
|
|
animation-delay: 0s, 0s;
|
|
animation-iteration-count: 1, 1;
|
|
animation-direction: normal, normal;
|
|
}
|
|
|
|
|
|
|
|
#scene.expand h1 {
|
|
animation-fill-mode: forwards;
|
|
animation-name: text-zoom, text-fade-in, text-glowing;
|
|
|
|
animation-timing-function: ease-out, ease-in-out, ease-in-out;
|
|
|
|
animation-iteration-count: 1, 1, infinite;
|
|
animation-direction: normal, normal, alternate;
|
|
}
|
|
|
|
.fade-out {
|
|
animation-fill-mode: forwards;
|
|
animation-name: fade-out;
|
|
animation-duration: 1s;
|
|
animation-timing-function: ease-in;
|
|
animation-delay: 0s;
|
|
animation-iteration-count: 1;
|
|
animation-direction: normal;
|
|
}
|
|
|
|
|
|
/* **********
|
|
animations
|
|
********** */
|
|
|
|
/* @keyframes expand-scene-horizontaly {
|
|
|
|
from {
|
|
width: 1200px;
|
|
left: 50%;
|
|
margin-left: -600px;
|
|
background-color: rgb(0,0,0);
|
|
box-shadow: 0 0 0 2px #FFD700 inset;
|
|
}
|
|
to {
|
|
width: 140%;
|
|
left: -20%;
|
|
margin-left: 0;
|
|
background-color: rgb(32,32,32);
|
|
box-shadow: 0 0 0 0 #FFD700 inset;
|
|
}
|
|
} */
|
|
|
|
/* @keyframes expand-scene-verticaly {
|
|
from {
|
|
top: 50%;
|
|
height: 600px;
|
|
margin-top: -300px;
|
|
}
|
|
to {
|
|
top: 0;
|
|
height: 100%;
|
|
margin-top: 0;
|
|
}
|
|
} */
|
|
|
|
@keyframes curtain-opening { /* 2s */
|
|
from { filter: brightness(180%); }
|
|
to { filter: brightness(100%); }
|
|
}
|
|
|
|
@keyframes left-curtain-opening { /* 4s */
|
|
from { transform: translate(0) rotate(0) scale(1,1); }
|
|
to { transform: translate(-100%) rotate(20deg) scale(0,2); }
|
|
}
|
|
|
|
@keyframes right-curtain-opening { /* 4s */
|
|
from { transform: translate(0) rotate(0) scale(1,1); }
|
|
to { transform: translate(100%) rotate(-20deg) scale(0,2); }
|
|
}
|
|
|
|
|
|
|
|
/* @keyframes text-zoom {
|
|
from { transform: scale(0.75); }
|
|
to { transform: scale(1); }
|
|
} */
|
|
|
|
@keyframes text-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes text-glowing {
|
|
from { text-shadow: 0 0 10px #FFD700; }
|
|
to { text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px dodgerblue; }
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from { color: black; opacity: 1; }
|
|
to { color: white; opacity: 0; }
|
|
}
|
|
</style>
|
|
<script>
|
|
// Your existing JavaScript remains unchanged
|
|
|
|
document.body.addEventListener('onload', focus());
|
|
document.addEventListener('keydown', detectSpaceKey);
|
|
|
|
function detectSpaceKey(event) {
|
|
if(event.keyCode == 13) {
|
|
showTime();
|
|
|
|
var form = document.createElement("form");
|
|
form.setAttribute("action", "/");
|
|
form.setAttribute("method", "post");
|
|
}
|
|
// startCountdown();
|
|
}
|
|
|
|
function showTime() {
|
|
var curtain = document.getElementById("curtain");
|
|
curtain.className = "open";
|
|
|
|
var scene = document.getElementById("scene");
|
|
scene.className = "expand";
|
|
|
|
var starter = document.getElementById("starter");
|
|
starter.className = "fade-out";
|
|
|
|
setTimeout(function() {
|
|
starter.style.display = 'none';
|
|
}, 2000);
|
|
}
|
|
|
|
function startCountdown() {
|
|
var count = 5;
|
|
var countdownElement = document.getElementById("countdown");
|
|
var countdownInterval = setInterval(function() {
|
|
count--;
|
|
countdownElement.textContent = count;
|
|
if (count <= 0) {
|
|
clearInterval(countdownInterval);
|
|
countdownElement.style.display = 'none'; // Hide countdown after it finishes
|
|
|
|
window.location.href = "https://geno.sh/"; // Redirect to the desired URL
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|