curtain added

This commit is contained in:
nitishkumar 2024-03-20 12:33:19 +05:30
parent 6cdad92313
commit 9ffd1a0f60
2 changed files with 305 additions and 3 deletions

BIN
src/curatain.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View file

@ -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>