curtain added #1
2 changed files with 305 additions and 3 deletions
BIN
src/curatain.jpeg
Normal file
BIN
src/curatain.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
308
src/open.html
308
src/open.html
|
|
@ -12,10 +12,312 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id='starter'>press enter</div>
|
||||||
|
<div id='scene'>
|
||||||
|
<div id='curtain'>
|
||||||
|
|
||||||
|
<h1>You will be redirected to New Website</h1>
|
||||||
|
<h1 id="countdown">10</h1>
|
||||||
|
|
||||||
|
<div class='left'></div>
|
||||||
|
<div class='right'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
@import url("https://fonts.googleapis.com/css?family=Open+Sans:800|Roboto+Condensed:700i");
|
||||||
|
|
||||||
|
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: 50%;
|
||||||
|
width: 300px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: -25px;
|
||||||
|
margin-left: -150px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Roboto Condensed', sans-serif;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene {
|
||||||
|
/* position: fixed; */
|
||||||
|
/* top: 20%; */
|
||||||
|
left: 40%;
|
||||||
|
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.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;
|
||||||
|
/* left: 20%;
|
||||||
|
top: 20%; */
|
||||||
|
display: inline;
|
||||||
|
width: 1500px;
|
||||||
|
height: 350px;
|
||||||
|
/* margin-top: -90px;
|
||||||
|
margin-left: -50px; */
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size: 10em;
|
||||||
|
color: #FFD700;
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#countdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 80%;
|
||||||
|
left: 90%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-family: 'Roboto Condensed', sans-serif;
|
||||||
|
font-size: 8em;
|
||||||
|
color: #FFD700;
|
||||||
|
}
|
||||||
|
/* **********
|
||||||
|
opening
|
||||||
|
********** */
|
||||||
|
|
||||||
|
#scene.expand {
|
||||||
|
width: 140%;
|
||||||
|
left: -20%;
|
||||||
|
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();
|
||||||
|
startCountdown();
|
||||||
|
var form = document.createElement("form");
|
||||||
|
form.setAttribute("action", "/");
|
||||||
|
form.setAttribute("method", "post");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = 10;
|
||||||
|
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
|
||||||
|
console.log("Redirecting...");
|
||||||
|
window.location.href = "https://geno.sh/"; // Redirect to the desired URL
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<form action="/" method="post">
|
|
||||||
<button type="submit">Click here to open store</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Reference in a new issue