Merge pull request #4 from RAHUL956777/main

solve some error but background still not working
Git21221 · Jul 10, 2023 · 38a3f6b · 38a3f6b
2 parents bc8916d + 98b10cb
commit 38a3f6b
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 126 deletions.
diff --git a/index.html b/index.html
@@ -56,26 +56,6 @@
     <button class="glassdoor-btn" id="startButton" onclick="openRocket()">Start Journey</button>
   </div>
   <div class="scene"></div>
-
-  <script>
-    function openRocket() {
-      // Create an AJAX request to fetch the content of rocket.html
-      var xhr = new XMLHttpRequest();
-      xhr.open('GET', 'rocket.html', true);
-      xhr.onreadystatechange = function() {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          // Update the current window with the content of rocket.html
-          document.documentElement.innerHTML = xhr.responseText;
-
-          // After 2 seconds, redirect to the second.html page
-          setTimeout(function() {
-            window.location.href = '/sec-page/second.html';
-          }, 2000);
-        }
-      };
-      xhr.send();
-    }
-  </script>
   <script src="script.js" type="text/javascript"></script>
 </body>
 

diff --git a/rocket.css b/rocket.css
@@ -1,63 +1,63 @@
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+margin: 0;
+padding: 0;
+box-sizing: border-box;
 }
-
 .scene {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  background: #01070a;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+position: relative;
+width: 100%;
+height: 100vh;
+background: #01070a;
+overflow: hidden;
+display: flex;
+justify-content: center;
+align-items: center;
 }
 
 .scene i {
-  position: absolute;
-  top: -250px;
-  background: rgba(255, 255, 255, 0.5);
-  animation: animateStars linear infinite;
+position: absolute;
+top: -250px;
+background: rgba(255, 255, 255, 0.5);
+animation: animateStars linear infinite;
 }
 
 @keyframes animateStars {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(200vh);
-  }
+0% {
+transform: translateY(0);
+}
+100% {
+transform: translateY(200vh);
+}
 }
 
 .rocket {
-  position: relative;
-  animation: animate 0.2s ease infinite;
+position: relative;
+animation: animate 0.2s ease infinite;
 }
 
 @keyframes animate {
-  0%,
-  100% {
-    transform: translateX(-2px);
-  }
-  50% {
-    transform: translateX(2px);
-  }
+0%,
+100% {
+transform: translateX(-2px);
+}
+50% {
+transform: translateX(2px);
+}
 }
 
 .rocket::before,
 .rocket::after {
-  content: "";
-  position: absolute;
-  bottom: -200px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 10px;
-  height: 200px;
-  background: linear-gradient(#00d0ff, transparent);
+content: "";
+position: absolute;
+bottom: -200px;
+left: 50%;
+transform: translateX(-50%);
+width: 10px;
+height: 200px;
+background: linear-gradient(#00d0ff, transparent);
 }
 
 .rocket::after {
-  filter: blur(20px);
+filter: blur(20px);
 }
+
diff --git a/rocket.html b/rocket.html
@@ -1,17 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link rel="stylesheet" href="rocket.css">
+    <link rel="stylesheet" href="rocket.css" type="text/css" />
   </head>
   <body id="loading-page">
     <div class="scene">
       <div class="rocket">
-        <img src="rocket.png" alt="rocket">
+        <img src="/rocket.png" alt="rocket" />
       </div>
     </div>
-    <script src="script.js"></script>
+
+    <script>
+      // animation
+      function stars() {
+        varcount = 50;
+        var scene = document.querySelector(".scene");
+        var i = 0;
+        while (i < count) {
+          var star = document.createElement("i");
+          var x = Math.floor(Math.random() * window.innerWidth);
+          var duration = Math.random() * 1;
+          var h = Math.random() * 100;
+
+          star.style.left = x + "px";
+          star.style.width = "1px";
+          star.style.height = 50 + h + "px";
+          star.style.animationDuration = duration + "s";
+
+          scene.appendChild(star);
+          i++;
+        }
+      }
+      stars();
+    </script>
+    <script src="/script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,55 +1,14 @@
 
-// animation 
-function stars() {
-  let count = 50;
-  let scene = document.querySelector(".scene");
-  let i = 0;
-  while (i < count) {
-    let star = document.createElement("i");
-    let x = Math.floor(Math.random() * window.innerWidth);
-    let duration = Math.random() * 1;
-    let h = Math.random() * 100;
-
-    star.style.left = x + "px";
-    star.style.width = "1px";
-    star.style.height = 50 + h + "px";
-    star.style.animationDuration = duration + "s";
-
-    scene.appendChild(star);
-    i++;
-  }
+function openRocket() {
+  const xhr = new XMLHttpRequest();
+  xhr.open("GET", "/rocket.html", true);
+  xhr.onreadystatechange = () => {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+      document.documentElement.innerHTML = xhr.responseText;
+      setTimeout(() => {
+        window.location.href = "/sec-page/second.html";
+      }, 5000);
+    }
+  };
+  xhr.send();
 }
-stars();
-
-function stars() {
-  let count = 50;
-  let scene = document.querySelector(".scene");
-  let i = 0;
-  while (i < count) {
-    let star = document.createElement("i");
-    let x = Math.floor(Math.random() * window.innerWidth);
-    let duration = Math.random() * 1;
-    let h = Math.random() * 100;
-
-    star.style.left = x + "px";
-    star.style.width = "1px";
-    star.style.height = 50 + h + "px";
-    star.style.animationDuration = duration + "s";
-
-    scene.appendChild(star);
-    i++;
-  }
-}
-stars();
-
-
-function startAnimation() {
-  let loadingPage = document.getElementById('loading-page');
-  loadingPage.classList.add('animate');
-
-  // Wait for the animation to complete (adjust the duration as needed)
-  setTimeout(function () {
-    // Redirect to the new page after animation completes
-    window.location.href = 'newpage.html';
-  }, 2000); // 2 seconds (adjust the duration as needed)
-}
diff --git a/sec-page/css/styles.css b/sec-page/css/styles.css
diff --git a/style.css b/style.css
@@ -152,11 +152,11 @@ span:nth-child(10) {
   text-align: center;
   flex-direction: column;
   position: absolute;
-  /* background-color: red; */
   height: 30%;
   width: 40%;
-  top: 40%;
-  left: 27%;
+  top: 30%;
+  left: 30%;
+  /* background-color: red; */
 }
 #div p {
   font-size: 50px;