dhanush.s/kodepilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loading animation

Browse Source
This commit is contained in:
dhanush.s 2025-09-26 10:04:36 +05:30 committed by rajesh.n
parent 402e7783cf
commit aec5da395b
3 changed files with 754 additions and 618 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
index.html
View File

@ -5,40 +5,161 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kodepilot Clone</title>
<script>
async function loadAsset(primary, fallback, type) {
try {
const res = await fetch(primary, { method: "HEAD" });
if (res.ok) {
addTag(primary, type);
} else {
throw new Error("Primary missing");
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="templateapi/main.css">
<style>
.center-container {
display: flex;
flex-direction: column;
align-items: center;
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) {
if (type === "js") {
const s = document.createElement("script");
s.src = url;
s.defer = true;
document.head.appendChild(s);
} else if (type === "css") {
const l = document.createElement("link");
l.rel = "stylesheet";
l.href = url;
document.head.appendChild(l);
@keyframes bouncing {
0% {
transform: translateY(-40px);
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
}
45% {
transform: translateY(40px);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
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");
loadAsset("main.js", "https://kodepilot.in/templateapi/main.js", "js");
</script>
@keyframes bouncing-shadow {
0% {
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>

7
main.css
View File

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

6
main.js
View File

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