Compare commits
38 Commits
b80f0a9e12
...
c084f08a63
| Author | SHA1 | Date | |
|---|---|---|---|
|
c084f08a63 | ||
| a3a0ebfa44 | |||
| ace4e6eb31 | |||
| 5438fdb621 | |||
| 849d345d51 | |||
| 0ad928c8d7 | |||
| 650392b397 | |||
| c70f68072f | |||
| 8d01e06660 | |||
| a4fe9fc394 | |||
| 188193af7e | |||
| 9c694d0a43 | |||
| 3f4351d303 | |||
| b37cad17d5 | |||
| b6c3c68b3c | |||
| 5686b8c4a2 | |||
| a7bce5a100 | |||
| db88a9c35f | |||
| 32e6cd75a5 | |||
| 5eb3a7918d | |||
| eef596becf | |||
| fc6ad943ce | |||
| 7f4c515d49 | |||
| 2c7200f4fc | |||
| 7a89d87393 | |||
| e6b3cab05a | |||
| 8414a3af51 | |||
| 025ed1d119 | |||
| 441d415b0f | |||
| ae4fd12955 | |||
| 6b674bdab1 | |||
| b2be41a3dd | |||
| 7a8038be74 | |||
| 2333e95802 | |||
| 2543ec800c | |||
| 7880913725 | |||
| 94fb53a168 | |||
| 8fb29c33af |
@ -1,202 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Right-side Image Expanding Cards</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f9f9f9;
|
||||
color: #1a1a1a;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p.subtext {
|
||||
color: #555;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* Flex container */
|
||||
.cards-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
/* Card style */
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Different background colors */
|
||||
.card:nth-child(1) { background: #1d4ed8; }
|
||||
.card:nth-child(2) { background: #e11d48; }
|
||||
.card:nth-child(3) { background: #9333ea; }
|
||||
.card:nth-child(4) { background: #f59e0b; }
|
||||
|
||||
/* Card content */
|
||||
.card-content {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: all 0.4s ease;
|
||||
min-width: 0; /* For text ellipsis */
|
||||
}
|
||||
|
||||
/* Hide image initially */
|
||||
.card img {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.4s ease;
|
||||
border-left: 0px solid #fff;
|
||||
}
|
||||
|
||||
/* Icon style */
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
margin-top: 10px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
color: #fff;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.cards-container:hover .card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cards-container .card:hover {
|
||||
flex: 2.5;
|
||||
}
|
||||
|
||||
.cards-container .card:hover img {
|
||||
width: 50%; /* show image on right */
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
.cards-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
.card {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cards-container .card:hover img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Practice Coding & Ace Hiring Assessments</h1>
|
||||
<p class="subtext">Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!</p>
|
||||
|
||||
<div class="cards-container">
|
||||
<!-- Card 1 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="icon">💻</div>
|
||||
<h3>Coding Practice</h3>
|
||||
<p>Level up your coding skills by practicing the hiring Questions.</p>
|
||||
<p><strong>400+ Questions</strong></p>
|
||||
</div>
|
||||
<a href="#" class="cta-btn">Start Now →</a>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/3762800/pexels-photo-3762800.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Coding Practice">
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="icon">📋</div>
|
||||
<h3>Interview Preparation</h3>
|
||||
<p>Crack top companies in just 5 days.</p>
|
||||
<p class="footer-text">20+ Companies →</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/1438084/pexels-photo-1438084.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Interview Prep">
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="icon">📂</div>
|
||||
<h3>Projects</h3>
|
||||
<p>Projects epitomize perfect synergy for success.</p>
|
||||
<p class="footer-text">15+ Projects →</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/267569/pexels-photo-267569.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Projects">
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="icon">📝</div>
|
||||
<h3>Skill Based Assessments</h3>
|
||||
<p>Assess your skills and get ahead of the curve.</p>
|
||||
<p class="footer-text">2000+ Questions →</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Assessments">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
186
index.html
186
index.html
@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kodepilot</title>
|
||||
<title>KodePilot</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="templateapi/main.css">
|
||||
<link rel="icon" type="image/x-icon" href="templateapi/assets/images/logo/favicon.ico">
|
||||
@ -159,12 +159,12 @@
|
||||
</div>
|
||||
<div id="body" style="display: none;">
|
||||
<header class="navbar">
|
||||
<div class="logo">Kodepilot</div>
|
||||
<div class="logo">KodePilot</div>
|
||||
<input type="text" class="search" placeholder="Search Opportunities">
|
||||
<div class="buttons">
|
||||
<a href="/login">Log in</a>
|
||||
<button class="business" onclick="getInTouch()">Get in touch</button>
|
||||
<button class="login" onclick="goToApplay()">Apply</button>
|
||||
<button class="login_first" onclick="goToLogin()">Login</button>
|
||||
<button class="business" onclick="getInTouch('https://wa.me/+919787466226?text=Hi%20KodePilot%20Team%2C%0A%0AI%20came%20across%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20Career%20Guidance%20and%20Placement%20support%20services.%20Could%20you%20please%20share%20the%20details%3F%0A%0AThanks%21')">Let's Talk</button>
|
||||
<button class="login" onclick="getInZoho()">Request a call</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -184,66 +184,21 @@
|
||||
<strong class="descContainer"> Just Went Kodepilot!</strong>
|
||||
</span>
|
||||
</button>
|
||||
<style>
|
||||
.nameContainer,
|
||||
.descContainer {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const data = [
|
||||
{ name: "Ben", text: "Just Went HCL!" },
|
||||
{ name: "Rakul", text: "Just Went Accenture!" },
|
||||
{ name: "Anjali", text: "Joined a Ebmpapst!" },
|
||||
{ name: "Sneha", text: "joined a Infosys!" },
|
||||
{ name: "Amit", text: "Just Went JBL!" },
|
||||
{ name: "Vikram", text: "Just Went UST!" },
|
||||
{ name: "Priya", text: "Just Went Serviceplaingroup!" }
|
||||
];
|
||||
let index1 = 0;
|
||||
const nameEl1 = document.querySelector(".nameContainer");
|
||||
const descEl1 = document.querySelector(".descContainer");
|
||||
setInterval(() => {
|
||||
nameEl1.classList.add("fade-out");
|
||||
descEl1.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
index1 = (index1 + 1) % data.length;
|
||||
nameEl1.textContent = data[index1].name;
|
||||
descEl1.textContent = " " + data[index1].text;
|
||||
nameEl1.classList.remove("fade-out");
|
||||
descEl1.classList.remove("fade-out");
|
||||
nameEl1.classList.add("fade-in");
|
||||
descEl1.classList.add("fade-in");
|
||||
setTimeout(() => {
|
||||
nameEl1.classList.remove("fade-in");
|
||||
descEl1.classList.remove("fade-in");
|
||||
}, 500);
|
||||
}, 500);
|
||||
}, 2000);
|
||||
</script>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card green">Internships<br><small>Gain Practical Experience</small></div>
|
||||
<div class="card orange">Mentorships<br><small>Guidance From Top Mentors</small></div>
|
||||
<div class="card blue">Jobs<br><small>Explore Diverse Careers</small></div>
|
||||
<div class="card purple">Practice<br><small>Refine Skills Daily</small></div>
|
||||
<div class="card yellow">Competitions<br><small>Battle For Excellence</small></div>
|
||||
<div class="card pink">More<br><small>Explore More Options</small></div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card green" onclick="getInZoho()">Internships<br><small>Gain Practical Experience</small></div>
|
||||
<div class="card orange" onclick="getInZoho()">Mentorships<br><small>Guidance From Top Mentors</small></div>
|
||||
<div class="card blue" onclick="getInZoho()">Jobs<br><small>Explore Diverse Careers</small></div>
|
||||
<div class="card purple" onclick="getInZoho()">Practice<br><small>Refine Skills Daily</small></div>
|
||||
<div class="card yellow" onclick="getInZoho()">Competitions<br><small>Battle For Excellence</small></div>
|
||||
<div class="card pink" onclick="getInZoho()">More<br><small>Explore More Options</small></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="users">
|
||||
<div class="users_box">
|
||||
<h2>Who's using Kodepilot?</h2>
|
||||
<h2>Who's using KodePilot?</h2>
|
||||
<div class="know-cards">
|
||||
<div>
|
||||
<div class="crd">
|
||||
@ -312,14 +267,14 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="slider">
|
||||
<section class="slider" id="slider">
|
||||
<div class="slide1r-container">
|
||||
<div class="slide1r-wrapper">
|
||||
<div class="slide1r-track" id="slide1rTrack">
|
||||
<!-- Slide 1 -->
|
||||
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
|
||||
<div class="image-overlay">
|
||||
<h4>QA & Testing</h4>
|
||||
@ -338,7 +293,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2 -->
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
@ -350,7 +304,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cybersecurity</h4>
|
||||
@ -370,7 +324,7 @@
|
||||
a successful performance report graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cybersecurity</h4>
|
||||
@ -390,7 +344,7 @@
|
||||
split view showing the finished product on a mobile phone.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>QA & Testing</h4>
|
||||
@ -411,7 +365,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/aws..jpg" alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cloud & DevOps</h4>
|
||||
@ -433,7 +387,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cybersecurity</h4>
|
||||
@ -454,7 +408,7 @@
|
||||
split view showing the finished product on a mobile phone.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/aws..jpg" alt="Beach">
|
||||
<div class="image-overlay">
|
||||
<h4>Cloud & DevOps</h4>
|
||||
@ -483,28 +437,29 @@
|
||||
</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<div class="card-add card-quizzes">
|
||||
</div>
|
||||
|
||||
<div class="card-add card-hackathons">
|
||||
</div>
|
||||
|
||||
<div class="card-add card-scholarships">
|
||||
</div>
|
||||
|
||||
<div class="card-add card-conferences">
|
||||
</div>
|
||||
|
||||
<div class="card-add card-festivals">
|
||||
</div>
|
||||
<div class="card-add card-quizzes"
|
||||
onclick="getInTouch('https://wa.me/919876543210?text=Hi%20KodePilot%20Team%2C%20I%20would%20like%20to%20know%20more%20about%20the%20Quizzes%20opportunities%20you%20provide.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
|
||||
</div>
|
||||
<div class="card-add card-hackathons"
|
||||
onclick="getInTouch('https://wa.me/919876543210?text=Hi%20KodePilot%20Team%2C%20I%20came%20across%20the%20Hackathons%20section%20on%20your%20website.%20Could%20you%20share%20more%20information%20about%20upcoming%20Hackathons%20and%20how%20to%20participate%3F%20Thanks!')">
|
||||
</div>
|
||||
<div class="card-add card-scholarships"
|
||||
onclick="getInTouch('https://wa.me/919876543210?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99m%20interested%20in%20learning%20more%20about%20the%20Scholarships%20you%20offer.%20Could%20you%20please%20provide%20the%20details%3F%20Thanks!')">
|
||||
</div>
|
||||
<div class="card-add card-conferences"
|
||||
onclick="getInTouch('https://wa.me/919876543210?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99d%20like%20to%20know%20more%20about%20the%20Conferences%20mentioned%20on%20your%20website.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
|
||||
</div>
|
||||
<div class="card-add card-festivals"
|
||||
onclick="getInTouch('https://wa.me/919876543210?text=Hi%20KodePilot%20Team%2C%20I%20saw%20the%20Tech%20Fest%20section%20on%20your%20website%20and%20I%E2%80%99m%20interested%20in%20participating.%20Could%20you%20please%20provide%20more%20information%3F%20Thanks!')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="move-slider-ruby">
|
||||
<div class="move-slider-container">
|
||||
<div class="move-slider-box-static">
|
||||
<div class="slide-content-static">
|
||||
<h1 class="slide-static-h1"> Kodepilot </h1>
|
||||
<h1 class="slide-static-h1"> KodePilot </h1>
|
||||
<p class="slide-static-text">
|
||||
Helping the world with career success
|
||||
</p>
|
||||
@ -521,13 +476,13 @@
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"The Kodepilot curriculum is laser-focused on job placement. I mastered the required
|
||||
"The KodePilot curriculum is laser-focused on job placement. I mastered the required
|
||||
skills and secured my position at GBL with confidence."
|
||||
</p>
|
||||
<div class="slide-logo-box">
|
||||
<div class="profile-box">
|
||||
<img src="assets/images/hai1/user-icon.svg"
|
||||
alt="Client Logo" class="slide-logo">
|
||||
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
|
||||
class="slide-logo">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">Dhanush</p>
|
||||
<p class="slide-role">Rust Developer</p>
|
||||
@ -543,15 +498,15 @@
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"After taking the QA and DevOps courses, Kodepilot made me ready for the global stage. I
|
||||
"After taking the QA and DevOps courses, KodePilot made me ready for the global stage. I
|
||||
was immediately placed with a top-tier company: Accenture."
|
||||
</p>
|
||||
<div class="slide-logo-box">
|
||||
<div class="profile-box">
|
||||
<img src="assets/images/hai1/user-icon.svg"
|
||||
alt="Client Logo" class="slide-logo">
|
||||
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
|
||||
class="slide-logo">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">kevin</p>
|
||||
<p class="slide-name">Amit</p>
|
||||
<p class="slide-role">QA Tester</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -564,13 +519,13 @@
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"Kodepilot's training in AWS and DevOps was the key to my career breakthrough. I went
|
||||
"KodePilot's training in AWS and DevOps was the key to my career breakthrough. I went
|
||||
from learning the skills to successfully landing a role at Infosys."
|
||||
</p>
|
||||
<div class="slide-logo-box">
|
||||
<div class="profile-box">
|
||||
<img src="assets/images/hai1/user-icon.svg"
|
||||
alt="Client Logo" class="slide-logo">
|
||||
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
|
||||
class="slide-logo">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">John Doe</p>
|
||||
<p class="slide-role">AWS</p>
|
||||
@ -582,8 +537,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<!-- <div class="practice-cards-container"> -->
|
||||
|
||||
<section class="practice-container-parent">
|
||||
<div class="practice-container">
|
||||
<div class="practice-container-box">
|
||||
<div class="practice-container-text-box">
|
||||
@ -609,7 +564,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interview Preparation Card -->
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -626,7 +581,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Card -->
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -643,7 +598,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Based Assessments Card -->
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -662,11 +617,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="card-simple">
|
||||
<div class="card-easy">
|
||||
<div class="card-easy-left">
|
||||
@ -684,15 +636,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="move-slider" style="display: none;">
|
||||
<div class="container-slider">
|
||||
<div class="container-slider-baby container-slider-1"></div>
|
||||
<div class="container-slider-baby container-slider-2"></div>
|
||||
<div class="container-slider-baby container-slider-3"></div>
|
||||
<div class="container-slider-baby container-slider-4"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="our-numbers">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
@ -726,18 +669,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="corces-s">
|
||||
<div class="corces"></div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-section company-section">
|
||||
<div class="logo" style="text-align: left; margin-left: 0; padding-left: 0;">Kodepilot</div>
|
||||
<div class="logo" style="text-align: left; margin-left: 0; padding-left: 0;">KodePilot</div>
|
||||
<p class="tagline">Built with <span class="heart">❤</span> in India for the world</p>
|
||||
<div class="contact-info">
|
||||
<h4>Stay Connected</h4>
|
||||
|
||||
<!-- <div style="margin-bottom: 20px; line-height: 23px;"> -->
|
||||
|
||||
<div style="margin-bottom: 20px; line-height: 23px; margin-left: -27px;">
|
||||
|
||||
<div class="contact-item">
|
||||
@ -829,15 +774,12 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
|
||||
<p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
|
||||
Copyright © 2025 <a href="#" style="color: #120ee2;">Kodepilot</a> - All
|
||||
rights
|
||||
reserved.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Copyright © 2025
|
||||
<a href="https://kodepilot.in" target="_blank">KodePilot</a>
|
||||
- All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
556
main.js
556
main.js
@ -1,224 +1,173 @@
|
||||
function goToLogin() {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
|
||||
function goToApplay() {
|
||||
window.location.href = "/apply/";
|
||||
}
|
||||
|
||||
function getInTouch() {
|
||||
window.open("https://wa.me/918870760431?text=Hi%20Link%20kodepilote%20Team...", "_blank");
|
||||
|
||||
function getInTouch(vall) {
|
||||
window.open(vall, "_blank");
|
||||
}
|
||||
|
||||
|
||||
(function () {
|
||||
if (window.Slide1rSliderLoaded) {
|
||||
return;
|
||||
|
||||
function getInZoho() {
|
||||
window.open("https://forms.zohopublic.in/krishnakode1/form/KodePilotRegistrationForm/formperma/A2L8xK6T13A9-s5Kxj8BqRTGsgmpKDHM0DDcZQWye5E");
|
||||
}
|
||||
|
||||
|
||||
class Slide1rSlider {
|
||||
constructor({ trackId = 'slide1rTrack', prevId = 'prevBtn', nextId = 'nextBtn', autoPlayDuration = 5000, invert = true } = {}) {
|
||||
this.trackId = trackId;
|
||||
this.prevId = prevId;
|
||||
this.nextId = nextId;
|
||||
this.autoPlayDuration = autoPlayDuration;
|
||||
this.invert = invert;
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => this.initSlider());
|
||||
else this.initSlider();
|
||||
}
|
||||
window.Slide1rSliderLoaded = true;
|
||||
|
||||
class Slide1rSlider {
|
||||
constructor() {
|
||||
setTimeout(() => {
|
||||
this.initSlider();
|
||||
}, 100);
|
||||
}
|
||||
initSlider() {
|
||||
this.track = document.getElementById(this.trackId);
|
||||
if (!this.track) return console.warn('slide track not found:', this.trackId);
|
||||
|
||||
initSlider() {
|
||||
try {
|
||||
this.track = document.getElementById('slide1rTrack');
|
||||
this.slides = document.querySelectorAll('.slide1');
|
||||
this.prevBtn = document.getElementById('prevBtn');
|
||||
this.nextBtn = document.getElementById('nextBtn');
|
||||
this.originalSlides = Array.from(this.track.querySelectorAll('.slide1'));
|
||||
if (this.originalSlides.length === 0) return console.warn('no .slide1 found');
|
||||
|
||||
if (!this.track || this.slides.length === 0) {
|
||||
console.warn("Slider DOM elements not found. Retrying...");
|
||||
setTimeout(() => this.initSlider(), 200);
|
||||
return;
|
||||
}
|
||||
this.prevBtn = document.getElementById(this.prevId);
|
||||
this.nextBtn = document.getElementById(this.nextId);
|
||||
|
||||
this.currentIndex = 0;
|
||||
this.totalSlides = this.slides.length;
|
||||
this.autoPlayDuration = 5000;
|
||||
this.setupStructure();
|
||||
this.bindEvents();
|
||||
|
||||
this.init();
|
||||
} catch (err) {
|
||||
console.error("Slider initialization failed:", err);
|
||||
this.currentIndex = 1;
|
||||
this.updateSlider(false);
|
||||
this.startAutoPlay();
|
||||
}
|
||||
|
||||
setupStructure() {
|
||||
this.track.style.display = 'flex';
|
||||
this.track.style.transition = 'transform 0.5s ease';
|
||||
this.track.querySelectorAll('.slide1').forEach(s => {
|
||||
s.style.minWidth = '100%';
|
||||
s.style.boxSizing = 'border-box';
|
||||
});
|
||||
|
||||
const first = this.originalSlides[0].cloneNode(true);
|
||||
const last = this.originalSlides[this.originalSlides.length - 1].cloneNode(true);
|
||||
|
||||
this.track.insertBefore(last, this.track.firstChild);
|
||||
this.track.appendChild(first);
|
||||
|
||||
this.slides = Array.from(this.track.querySelectorAll('.slide1'));
|
||||
this.totalSlides = this.slides.length;
|
||||
}
|
||||
|
||||
updateSlider(animate = true) {
|
||||
this.track.style.transition = animate ? 'transform 0.5s ease' : 'none';
|
||||
this.track.style.transform = `translateX(-${this.currentIndex * 100}%)`;
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
if (this.invert) {
|
||||
this.currentIndex--;
|
||||
this.updateSlider(true);
|
||||
if (this.currentIndex === 0) {
|
||||
setTimeout(() => {
|
||||
this.track.style.transition = 'none';
|
||||
this.currentIndex = this.slides.length - 2;
|
||||
this.updateSlider(false);
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
this.currentIndex++;
|
||||
this.updateSlider(true);
|
||||
if (this.currentIndex === this.slides.length - 1) {
|
||||
setTimeout(() => {
|
||||
this.track.style.transition = 'none';
|
||||
this.currentIndex = 1;
|
||||
this.updateSlider(false);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
this.restartAutoPlay();
|
||||
}
|
||||
|
||||
init() {
|
||||
try {
|
||||
this.updateSlider();
|
||||
this.bindEvents();
|
||||
this.startAutoPlay();
|
||||
this.bindKeyboardEvents();
|
||||
} catch (err) {
|
||||
console.error("Slider init error:", err);
|
||||
prevSlide() {
|
||||
if (this.invert) {
|
||||
this.currentIndex++;
|
||||
this.updateSlider(true);
|
||||
if (this.currentIndex === this.slides.length - 1) {
|
||||
setTimeout(() => {
|
||||
this.track.style.transition = 'none';
|
||||
this.currentIndex = 1;
|
||||
this.updateSlider(false);
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
this.currentIndex--;
|
||||
this.updateSlider(true);
|
||||
if (this.currentIndex === 0) {
|
||||
setTimeout(() => {
|
||||
this.track.style.transition = 'none';
|
||||
this.currentIndex = this.slides.length - 2;
|
||||
this.updateSlider(false);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
this.restartAutoPlay();
|
||||
}
|
||||
|
||||
startAutoPlay() {
|
||||
this.stopAutoPlay();
|
||||
this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDuration);
|
||||
}
|
||||
|
||||
updateSlider() {
|
||||
try {
|
||||
const translateX = -this.currentIndex * 100;
|
||||
this.track.style.transform = `translateX(${translateX}%)`;
|
||||
stopAutoPlay() {
|
||||
if (this.autoPlayInterval) {
|
||||
clearInterval(this.autoPlayInterval);
|
||||
this.autoPlayInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error updating slider:", err);
|
||||
}
|
||||
restartAutoPlay() {
|
||||
this.stopAutoPlay();
|
||||
this.startAutoPlay();
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
if (this.nextBtn) this.nextBtn.addEventListener('click', () => this.nextSlide());
|
||||
if (this.prevBtn) this.prevBtn.addEventListener('click', () => this.prevSlide());
|
||||
|
||||
const container = this.track.closest('.slide1r-container') || this.track.parentElement;
|
||||
if (container) {
|
||||
container.addEventListener('mouseenter', () => this.stopAutoPlay());
|
||||
container.addEventListener('mouseleave', () => this.startAutoPlay());
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
try {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
|
||||
this.updateSlider();
|
||||
this.restartAutoPlay();
|
||||
} catch (err) {
|
||||
console.error("Error going to next slide:", err);
|
||||
let startX = 0, endX = 0;
|
||||
this.track.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; this.stopAutoPlay(); });
|
||||
this.track.addEventListener('touchmove', (e) => { endX = e.touches[0].clientX; });
|
||||
this.track.addEventListener('touchend', () => {
|
||||
const delta = startX - endX;
|
||||
if (Math.abs(delta) > 50) {
|
||||
if (delta > 0) this.nextSlide(); else this.prevSlide();
|
||||
}
|
||||
}
|
||||
|
||||
prevSlide() {
|
||||
try {
|
||||
this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
|
||||
this.updateSlider();
|
||||
this.restartAutoPlay();
|
||||
} catch (err) {
|
||||
console.error("Error going to previous slide:", err);
|
||||
}
|
||||
}
|
||||
|
||||
goToSlide(index) {
|
||||
try {
|
||||
this.currentIndex = index;
|
||||
this.updateSlider();
|
||||
this.restartAutoPlay();
|
||||
} catch (err) {
|
||||
console.error("Error going to slide:", err);
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay() {
|
||||
try {
|
||||
this.stopAutoPlay();
|
||||
|
||||
this.autoPlayInterval = setInterval(() => {
|
||||
this.nextSlide();
|
||||
}, this.autoPlayDuration);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error starting autoplay:", err);
|
||||
}
|
||||
}
|
||||
|
||||
stopAutoPlay() {
|
||||
if (this.autoPlayInterval) {
|
||||
clearInterval(this.autoPlayInterval);
|
||||
this.autoPlayInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
restartAutoPlay() {
|
||||
this.stopAutoPlay();
|
||||
this.startAutoPlay();
|
||||
}
|
||||
});
|
||||
|
||||
bindEvents() {
|
||||
try {
|
||||
if (this.nextBtn) {
|
||||
this.nextBtn.addEventListener('click', () => this.nextSlide());
|
||||
}
|
||||
|
||||
if (this.prevBtn) {
|
||||
this.prevBtn.addEventListener('click', () => this.prevSlide());
|
||||
}
|
||||
|
||||
const container = document.querySelector('.slide1r-container');
|
||||
if (container) {
|
||||
container.addEventListener('mouseenter', () => this.stopAutoPlay());
|
||||
container.addEventListener('mouseleave', () => this.startAutoPlay());
|
||||
}
|
||||
|
||||
let startX = 0;
|
||||
let endX = 0;
|
||||
|
||||
if (this.track) {
|
||||
this.track.addEventListener('touchstart', (e) => {
|
||||
startX = e.touches[0].clientX;
|
||||
this.stopAutoPlay();
|
||||
});
|
||||
|
||||
this.track.addEventListener('touchmove', (e) => {
|
||||
endX = e.touches[0].clientX;
|
||||
});
|
||||
|
||||
this.track.addEventListener('touchend', () => {
|
||||
const deltaX = startX - endX;
|
||||
if (Math.abs(deltaX) > 50) {
|
||||
if (deltaX > 0) {
|
||||
this.nextSlide();
|
||||
} else {
|
||||
this.prevSlide();
|
||||
}
|
||||
}
|
||||
this.startAutoPlay();
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error binding events:", err);
|
||||
}
|
||||
}
|
||||
|
||||
bindKeyboardEvents() {
|
||||
const keyHandler = (e) => {
|
||||
const container = document.querySelector('.slide1r-container');
|
||||
if (container && this.isElementInViewport(container)) {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
this.prevSlide();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
this.nextSlide();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', keyHandler);
|
||||
}
|
||||
|
||||
isElementInViewport(el) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
return (
|
||||
rect.top >= 0 &&
|
||||
rect.left >= 0 &&
|
||||
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
||||
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
||||
);
|
||||
}
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const containerEl = document.querySelector('.slide1r-container');
|
||||
if (!containerEl) return;
|
||||
if (e.key === 'ArrowLeft') this.prevSlide();
|
||||
if (e.key === 'ArrowRight') this.nextSlide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
new Slide1rSlider();
|
||||
})();
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const track = document.querySelector(".move-slider-track");
|
||||
const boxes = Array.from(track.children);
|
||||
|
||||
boxes.forEach(box => {
|
||||
const clone = box.cloneNode(true);
|
||||
track.appendChild(clone);
|
||||
});
|
||||
|
||||
let position = 0;
|
||||
const speed = 1;
|
||||
|
||||
function animate() {
|
||||
position -= speed;
|
||||
if (Math.abs(position) >= track.scrollWidth / 2) {
|
||||
position = 0;
|
||||
}
|
||||
track.style.transform = `translateX(${position}px)`;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
});
|
||||
|
||||
new Slide1rSlider({ invert: true, autoPlayDuration: 4000 });
|
||||
|
||||
const statItems = document.querySelectorAll('.stat-item');
|
||||
|
||||
@ -332,19 +281,19 @@ function renderCourses(allCourses) {
|
||||
<div class="course-image" style="background-image: url(${course.image});"></div>
|
||||
</a>
|
||||
<div class="course-content">
|
||||
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
|
||||
<a href="/apply" class="course-name" target="_blank">${course.name}</a>
|
||||
<div class="course-description">${course.description}</div>
|
||||
</div>
|
||||
`;
|
||||
track.appendChild(courseDiv);
|
||||
});
|
||||
|
||||
// Button scrolling
|
||||
|
||||
const scrollAmount = 300;
|
||||
prevBtn.addEventListener('click', () => track.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));
|
||||
nextBtn.addEventListener('click', () => track.scrollBy({ left: scrollAmount, behavior: 'smooth' }));
|
||||
|
||||
// Touch swipe
|
||||
|
||||
let startX = 0;
|
||||
let isDragging = false;
|
||||
|
||||
@ -398,46 +347,229 @@ function stepScroll() {
|
||||
|
||||
setInterval(stepScroll, 3000);
|
||||
|
||||
|
||||
|
||||
/*--------------------------------------------------------*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const cards = document.querySelectorAll('.practice-card');
|
||||
let activeCard = document.querySelector('.practice-card.active');
|
||||
let lastActiveCard = activeCard;
|
||||
|
||||
// Function to set active card
|
||||
function setActiveCard(card) {
|
||||
// Remove active class from all cards
|
||||
cards.forEach(c => {
|
||||
c.classList.remove('active');
|
||||
});
|
||||
|
||||
// Add active class to the specified card
|
||||
card.classList.add('active');
|
||||
|
||||
// Update last active card
|
||||
lastActiveCard = card;
|
||||
}
|
||||
|
||||
// Set first card as active by default if none is active
|
||||
if (!activeCard && cards.length > 0) {
|
||||
setActiveCard(cards[0]);
|
||||
}
|
||||
|
||||
// Add click event listeners (better for mobile and accessibility)
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('click', function () {
|
||||
setActiveCard(this);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Optional: Add hover effect for desktop (complementary to click)
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function () {
|
||||
// Only activate on hover if you want that behavior
|
||||
// setActiveCard(this);
|
||||
});
|
||||
const data = [
|
||||
{ name: "Ben", text: "Just Went HCL!" },
|
||||
{ name: "Rakul", text: "Just Went Accenture!" },
|
||||
{ name: "Anjali", text: "Joined a Ebmpapst!" },
|
||||
{ name: "Sneha", text: "joined a Infosys!" },
|
||||
{ name: "Amit", text: "Just Went JBL!" },
|
||||
{ name: "Vikram", text: "Just Went UST!" },
|
||||
{ name: "Priya", text: "Just Went Serviceplaingroup!" }
|
||||
];
|
||||
let index1 = 0;
|
||||
const nameEl1 = document.querySelector(".nameContainer");
|
||||
const descEl1 = document.querySelector(".descContainer");
|
||||
setInterval(() => {
|
||||
nameEl1.classList.add("fade-out");
|
||||
descEl1.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
index1 = (index1 + 1) % data.length;
|
||||
nameEl1.textContent = data[index1].name;
|
||||
descEl1.textContent = " " + data[index1].text;
|
||||
nameEl1.classList.remove("fade-out");
|
||||
descEl1.classList.remove("fade-out");
|
||||
nameEl1.classList.add("fade-in");
|
||||
descEl1.classList.add("fade-in");
|
||||
setTimeout(() => {
|
||||
nameEl1.classList.remove("fade-in");
|
||||
descEl1.classList.remove("fade-in");
|
||||
}, 500);
|
||||
}, 500);
|
||||
}, 5000);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".footer a").forEach(link => {
|
||||
link.setAttribute("href", "/apply");
|
||||
});
|
||||
|
||||
document.querySelectorAll(".practice-container a").forEach(link => {
|
||||
link.setAttribute("href", "/apply");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
class ModernMobileMenu {
|
||||
constructor() {
|
||||
this.buttonsContainer = document.querySelector('.buttons');
|
||||
this.hamburger = null;
|
||||
this.mobileMenu = null;
|
||||
this.overlay = null;
|
||||
this.isMenuOpen = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.createMobileMenu();
|
||||
this.bindEvents();
|
||||
this.checkScreenSize();
|
||||
|
||||
|
||||
window.addEventListener('resize', () => this.checkScreenSize());
|
||||
}
|
||||
createMobileMenu() {
|
||||
|
||||
this.hamburger = document.createElement('div');
|
||||
this.hamburger.className = 'mobile-hamburger';
|
||||
this.hamburger.innerHTML = `
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
`;
|
||||
|
||||
|
||||
this.overlay = document.createElement('div');
|
||||
this.overlay.className = 'mobile-menu-overlay';
|
||||
|
||||
|
||||
this.mobileMenu = document.createElement('div');
|
||||
this.mobileMenu.className = 'mobile-slide-menu';
|
||||
|
||||
|
||||
const originalButtons = this.buttonsContainer.querySelectorAll('button');
|
||||
|
||||
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.className = 'menu-close-btn';
|
||||
closeBtn.innerHTML = '×';
|
||||
this.mobileMenu.appendChild(closeBtn);
|
||||
|
||||
|
||||
originalButtons.forEach(btn => {
|
||||
const mobileBtn = document.createElement('button');
|
||||
mobileBtn.className = 'mobile-menu-item';
|
||||
mobileBtn.textContent = btn.textContent;
|
||||
mobileBtn.onclick = () => {
|
||||
btn.click();
|
||||
this.closeMenu();
|
||||
};
|
||||
this.mobileMenu.appendChild(mobileBtn);
|
||||
});
|
||||
|
||||
|
||||
this.buttonsContainer.parentNode.insertBefore(this.hamburger, this.buttonsContainer.nextSibling);
|
||||
document.body.appendChild(this.overlay);
|
||||
document.body.appendChild(this.mobileMenu);
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.hamburger.addEventListener('click', () => this.toggleMenu());
|
||||
this.overlay.addEventListener('click', () => this.closeMenu());
|
||||
this.mobileMenu.querySelector('.menu-close-btn').addEventListener('click', () => this.closeMenu());
|
||||
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && this.isMenuOpen) {
|
||||
this.closeMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.isMenuOpen ? this.closeMenu() : this.openMenu();
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
this.isMenuOpen = true;
|
||||
this.hamburger.classList.add('active');
|
||||
this.overlay.classList.add('active');
|
||||
this.mobileMenu.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
|
||||
const items = this.mobileMenu.querySelectorAll('.mobile-menu-item');
|
||||
items.forEach((item, index) => {
|
||||
setTimeout(() => {
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'translateX(0)';
|
||||
}, (index + 1) * 100);
|
||||
});
|
||||
}
|
||||
|
||||
closeMenu() {
|
||||
this.isMenuOpen = false;
|
||||
this.hamburger.classList.remove('active');
|
||||
this.overlay.classList.remove('active');
|
||||
this.mobileMenu.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
|
||||
|
||||
const items = this.mobileMenu.querySelectorAll('.mobile-menu-item');
|
||||
items.forEach(item => {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateX(30px)';
|
||||
});
|
||||
}
|
||||
|
||||
checkScreenSize() {
|
||||
if (window.innerWidth <= 480) {
|
||||
this.hamburger.style.display = 'flex';
|
||||
} else {
|
||||
this.hamburger.style.display = 'none';
|
||||
this.closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => new ModernMobileMenu());
|
||||
} else {
|
||||
new ModernMobileMenu();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const counters = document.querySelectorAll(".stat-number");
|
||||
|
||||
const animateCounter = (el, target) => {
|
||||
let current = 0;
|
||||
const step = Math.ceil(target / 50);
|
||||
const interval = setInterval(() => {
|
||||
current += step;
|
||||
if (current >= target) {
|
||||
current = target;
|
||||
clearInterval(interval);
|
||||
}
|
||||
el.innerHTML = current + "<span class='highlight'>+</span>";
|
||||
}, 20);
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target;
|
||||
const finalNumber = parseInt(el.textContent);
|
||||
animateCounter(el, finalNumber);
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
counters.forEach(counter => observer.observe(counter));
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user