feat: loading animation

index.html

@@ -5,40 +5,161 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kodepilot Clone</title>
-    <script>
+    <link rel="stylesheet" href="main.css">
-        async function loadAsset(primary, fallback, type) {
+    <link rel="stylesheet" href="templateapi/main.css">
-            try {
+    <style>
-                const res = await fetch(primary, { method: "HEAD" });
+        .center-container {
-                if (res.ok) {
+            display: flex;
-                    addTag(primary, type);
+            flex-direction: column;
-                } else {
+            align-items: center;
-                    throw new Error("Primary missing");
+            justify-content: center;
+            height: 100vh;
+            position: relative;
         }
-            } catch (e) {
+
-                addTag(fallback, type);
+        .scene {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            width: 100%;
+        }
+
+
+        .cube-wrapper {
+            transform-style: preserve-3d;
+            animation: bouncing 2s infinite;
+        }
+
+        .cube {
+            transform-style: preserve-3d;
+            transform: rotateX(45deg) rotateZ(45deg);
+            animation: rotation 2s infinite;
+        }
+
+        .cube-faces {
+            transform-style: preserve-3d;
+            height: 80px;
+            /* $size */
+            width: 80px;
+            /* $size */
+            position: relative;
+            transform-origin: 0 0;
+            transform: translateX(0) translateY(0) translateZ(-40px);
+            /* -$size/2 */
+        }
+
+        .cube-face {
+            position: absolute;
+            inset: 0;
+            background: #003366;
+            border: solid 1px rgb(255, 255, 255);
+        }
+
+        .cube-face.shadow {
+            transform: translateZ(-80px);
+            animation: bouncing-shadow 2s infinite;
+        }
+
+        .cube-face.top {
+            transform: translateZ(80px);
+        }
+
+        .cube-face.front {
+            transform-origin: 0 50%;
+            transform: rotateY(-90deg);
+        }
+
+        .cube-face.back {
+            transform-origin: 0 50%;
+            transform: rotateY(-90deg) translateZ(-80px);
+        }
+
+        .cube-face.right {
+            transform-origin: 50% 0;
+            transform: rotateX(-90deg) translateY(-80px);
+        }
+
+        .cube-face.left {
+            transform-origin: 50% 0;
+            transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
+        }
+
+        @keyframes rotation {
+            0% {
+                transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
+                animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
+            }
+
+            50% {
+                transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
+            }
+
+            100% {
+                transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
+                animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
             }
         }
 
-        function addTag(url, type) {
+        @keyframes bouncing {
-            if (type === "js") {
+            0% {
-                const s = document.createElement("script");
+                transform: translateY(-40px);
-                s.src = url;
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
-                s.defer = true;
+            }
-                document.head.appendChild(s);
+
-            } else if (type === "css") {
+            45% {
-                const l = document.createElement("link");
+                transform: translateY(40px);
-                l.rel = "stylesheet";
+                animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-                l.href = url;
+            }
-                document.head.appendChild(l);
+
+            100% {
+                transform: translateY(-40px);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
             }
         }
 
-        loadAsset("main.css", "https://kodepilot.in/templateapi/main.css", "css");
+        @keyframes bouncing-shadow {
-        loadAsset("main.js", "https://kodepilot.in/templateapi/main.js", "js");
+            0% {
-    </script>
+                transform: translateZ(-80px) scale(1.3);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
+                opacity: 0.05;
+            }
+
+            45% {
+                transform: translateZ(0);
+                animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+                opacity: 0.3;
+            }
+
+            100% {
+                transform: translateZ(-80px) scale(1.3);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
+                opacity: 0.05;
+            }
+        }
+    </style>
 </head>
 
 <body>
+    <div id="msg" style="font-size: largest;" class="center-container">
+        <div class="scene">
+            <div class="cube-wrapper">
+                <div class="cube">
+                    <div class="cube-faces">
+                        <div class="cube-face shadow"></div>
+                        <div class="cube-face bottom"></div>
+                        <div class="cube-face top"></div>
+                        <div class="cube-face left"></div>
+                        <div class="cube-face right"></div>
+                        <div class="cube-face back"></div>
+                        <div class="cube-face front"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="body" style="display: none;">
         <header class="navbar">
             <div class="logo">Kodepilot</div>
             <input type="text" class="search" placeholder="Search Opportunities">
@@ -57,7 +178,8 @@
             <div class="hero_container">
                 <div class="cards_box">
                     <h1><span class="blue_text">Unlock</span> Your Career</h1>
-                <p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired by
+                    <p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired
+                        by
                         your
                         dream company.</p>
                     <button class="button_blue_box"><img
@@ -363,7 +485,8 @@
                             </p>
                             <p class="slide-text">
                                 "From farm inventory to eco-shipment tracking, kodepilot built us a green-tech backbone.
-                            Their system lets us trace every organic ingredient and prove our sustainability story to
+                                Their system lets us trace every organic ingredient and prove our sustainability story
+                                to
                                 conscious customers."
                             </p>
                             <div class="slide-logo-box">
@@ -406,7 +529,8 @@
                                 "
                             </p>
                             <p class="slide-text">
-                            "Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in days
+                                "Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in
+                                days
                                 without compromising security."
                             </p>
                             <div class="slide-logo-box">
@@ -428,7 +552,7 @@
         <section class="card-simple">
             <div class="card-easy">
                 <div class="card-easy-left">
-                <img src="templateapi/Assets/Images/learn/learn.png" alt="Student Image">
+                    <img src="Assets/Images/learn/learn.png" alt="Student Image">
                 </div>
                 <div class="card-easy-right">
                     <h2>Learn & Level Up Your Skills</h2>
@@ -595,7 +719,8 @@
 
                     <div class="newsletter-section">
                         <h4>Stay Updated</h4>
-                    <p>We'll send you updates on the latest courses and coding opportunities to enhance your skills and
+                        <p>We'll send you updates on the latest courses and coding opportunities to enhance your skills
+                            and
                             advance your career.</p>
 
                         <div class="newsletter-form">
@@ -687,12 +812,26 @@
                         <a href="#">Sitemap</a>
                     </div>
                     <p style="margin-top: 20px;">
-                    Copyright © 2025 <a href="#" style="color: #10b981;">Kode Pilot Learning Pvt Ltd</a> - All rights
+                        Copyright © 2025 <a href="#" style="color: #10b981;">Kode Pilot Learning Pvt Ltd</a> - All
+                        rights
                         reserved.
                     </p>
                 </div>
             </div>
         </footer>
+    </div>
+    <script src="main.js"></script>
+    <script src="templateapi/main.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script type="text/javascript">
+        $(window).on("load", function () {
+            $('#msg').show();
+            setTimeout(function () {
+                $('#body').show();
+                $('#msg').hide();
+            }, 1000);
+        });
+    </script>
 </body>
 
 </html>

main.css

@@ -260,7 +260,7 @@
  .mnc-box {
      display: flex;
      align-items: center;
-     max-width: 1200px;
+     max-width: 1159px;
 
  }
 
@@ -277,6 +277,7 @@
      font-weight: 600;
      font-size: 1.3vw;
      white-space: nowrap;
+     margin-top: -5px;
  }
 
  .mnc h2 .gray,
@@ -704,13 +705,11 @@
      position: relative;
      overflow: hidden;
      border-radius: 16px;
-     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      transition: all 0.3s ease;
  }
 
  .image-container:hover {
      transform: translateY(-5px);
-     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
  }
 
  .slide1-box img {
@@ -1342,7 +1341,7 @@
  }
 
  .card-easy-left img {
-     width: 80%;
+     width: 100%;
      border-radius: 15px;
  }
 

main.js

@@ -194,19 +194,18 @@ document.addEventListener("DOMContentLoaded", () => {
     const track = document.querySelector(".move-slider-track");
     const boxes = Array.from(track.children);
 
-    // Clone all slides once
     boxes.forEach(box => {
         const clone = box.cloneNode(true);
         track.appendChild(clone);
     });
 
     let position = 0;
-    const speed = 1; // pixels per frame, adjust for faster/slower scroll
+    const speed = 1;
 
     function animate() {
         position -= speed;
         if (Math.abs(position) >= track.scrollWidth / 2) {
-            position = 0; // reset after first set slides out
+            position = 0;
         }
         track.style.transform = `translateX(${position}px)`;
         requestAnimationFrame(animate);
@@ -224,7 +223,6 @@ const observer = new IntersectionObserver((entries) => {
             const index = Array.from(statItems).indexOf(entry.target);
             entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
             entry.target.classList.add('visible');
-            // observer.unobserve(entry.target); // optional: animate only once
         }
     });
 }, { threshold: 0.2 }); // 20% visible