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>
|
||||
</head>
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue