Untitled

<!DOCTYPE html>
<html>
<head>
 <style>
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #757575;
 }

 .window {
   width: 50%;
   height: 100vh;
   background-color: #000000;
   overflow: hidden;
   position: absolute;
   transition: all 1s ease;
 }

 .window.left {
   left: 0;
 }

 .window.right {
   right: 0;
 }

 .line {
   position: absolute;
   bottom: 40%;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 2px;
   background-color: #ffffff;
   transition: width 0.5s ease;
 }

 .logo {
   position: absolute;
   top: 30%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: all 0.5s ease;
   opacity: 0;
 }

 /* Add a fade-out class */
 .fade-out {
     animation-name: fadeOut;
     animation-duration: 1s;
     animation-fill-mode: forwards;
 }

 @keyframes fadeOut {
     from { opacity: 1; }
     to { opacity: 0; }
 }
 </style>
</head>
<body>
 <div class="container">
   <div class="window left"></div>
   <div class="window right"></div>
   <div class="line"></div>
   <img class="logo" src="dot.png" alt="Logo">
 </div>

 <script>
 const leftWindowElem = document.querySelector('.window.left');
 const rightWindowElem = document.querySelector('.window.right');
 const lineElem = document.querySelector('.line');
 const logoElem = document.querySelector('.logo');

 setTimeout(() => {
   // Curtain-like effect - windows split open
   leftWindowElem.style.transform = 'translateX(-100%)';
   rightWindowElem.style.transform = 'translateX(100%)';
   setTimeout(() => {
     // Line opening effect
     lineElem.style.width = '0%';
     setTimeout(() => {
       lineElem.style.width = '70%';
       setTimeout(() => {
         // Logo dropping onto the line
         logoElem.style.opacity = '1';
         logoElem.style.top = '50%';
         setTimeout(() => {
           // Line closing effect
           lineElem.style.width = '0%';
           setTimeout(() => {
             // Reset positions and opacity
             leftWindowElem.style.transform = 'translateX(0)';
             rightWindowElem.style.transform = 'translateX(0)';
             logoElem.style.top = '50%';
             logoElem.style.opacity = '0';
           }, 500); // Delay for 0.5 seconds (500 milliseconds)
         }, 500); // Delay for 0.5 seconds (500 milliseconds)
       }, 1000); // Delay for 1 second (1000 milliseconds)
     }, 1000); // Delay for 1 second (1000 milliseconds)
   }, 1000); // Delay for 1 second (1000 milliseconds)
 }, 0); // Delay for 0 milliseconds (start immediately)

// Redirect to the three js scene after a specified amount of time
setTimeout(() => {
    // Add the fade-out class to the body element
    document.body.classList.add('fade-out');

    // Redirect to the second page after the fade-out animation has finished
    setTimeout(() => {
        window.location.href = "threejsscene.html";
    }, 1000); // Delay for 1 second (1000 milliseconds)
}, 6000); // Delay for 6 seconds (6000 milliseconds)
 </script>
</body>
</html>