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

test #41

Merged
dhanush.s merged 14 commits from test into main 2025-09-30 10:51:09 +00:00
Conversation 0 Commits 14 Files Changed 3 +300 -231
3 changed files with 300 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
index.html
View File

@ -162,10 +162,9 @@
<div class="logo">KodePilot</div>
<input type="text" class="search" placeholder="Search Opportunities">
<div class="buttons">
<!-- <a href="/login">Log in</a> -->
<button class="login_first" onclick="goToLogin()">Login</button>
<button class="business" onclick="getInTouch()">Let's Talk</button>
<button class="login" onclick="goToApplay()">Request a call</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>
@ -186,14 +185,14 @@
</span>
</button>
</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>
@ -275,7 +274,7 @@
<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>
@ -294,7 +293,6 @@
</div>
</div>
<div class="slide1">
<div class="slide1-box">
<div class="image-container">
@ -306,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>
@ -326,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>
@ -346,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>
@ -367,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>
@ -389,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>
@ -410,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>
@ -439,22 +437,22 @@
</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/9787466226?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/9787466226?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/9787466226?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/9787466226?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/9787466226?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">
@ -494,6 +492,29 @@
</div>
</div>
<div class="move-slider-box">
<div class="slide-content">
<p class="slide-text-cot">
"
</p>
<p class="slide-text">
"The KodePilot curriculum gave me hands-on experience with networking and security. I
gained practical
skills and secured my position in network engineering with confidence."
</p>
<div class="slide-logo-box">
<div class="profile-box">
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
class="slide-logo">
<div class="profile-info">
<p class="slide-name">koushik</p>
<p class="slide-role">Network Engineer</p>
</div>
</div>
</div>
</div>
</div>
<div class="move-slider-box">
<div class="slide-content">
<p class="slide-text-cot">
@ -676,6 +697,11 @@
<div class="corces"></div>
</section>
<div class="whatsapp-icon" onclick="WhatsgetInTouch()">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" />
</div>
<footer class="footer">
<div class="footer-container">
<div class="footer-section company-section">

89
main.css
View File

@ -182,7 +182,7 @@
}
.orange {
background:#9bc9ff ;
background: #9bc9ff;
background-image: url('assets/images/unlockcarrer/mentorship.png');
background-size: 115px;
background-repeat: no-repeat;
@ -190,7 +190,7 @@
}
.blue {
background:#fec192;
background: #fec192;
background-image: url('assets/images/unlockcarrer/jobs.png');
background-size: 115px;
background-repeat: no-repeat;
@ -663,10 +663,6 @@
transition: transform 0.3s ease;
}
.image-container:hover .image-overlay {
transform: translateY(0);
}
.image-overlay h4 {
margin: 0 0 5px 0;
font-size: 16px;
@ -1027,18 +1023,7 @@
.move-slider-animation-box {
display: flex;
gap: 20px;
animation: scroll 20s linear infinite;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
will-change: transform;
}
.move-slider-box {
@ -1050,7 +1035,7 @@
background: #fff;
border-radius: 12px;
padding: 20px;
min-width: 350px;
min-width: 200px;
}
.move-slider-box .slide-content>*:not(.slide-text) {
@ -1060,6 +1045,11 @@
.move-slider-box:hover .slide-content>*:not(.slide-text) {
opacity: 0;
pointer-events: none;
transition-delay: 0s;
}
.move-slider-box .slide-content>*:not(.slide-text) {
transition: opacity 0.3s ease 1s;
}
.move-slider-box .slide-text {
@ -1069,9 +1059,10 @@
}
.move-slider-box:hover .slide-text {
transform: translateY(100px) scale(1.1);
transform: translateY(80px) scale(1.1);
}
.slide-content {
display: flex;
flex-direction: column;
@ -1108,6 +1099,7 @@
gap: 12px;
}
.profile-info {
display: flex;
flex-direction: column;
@ -1298,7 +1290,7 @@
.course-category-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
padding-left: 14px;
}
.course-slider {
@ -1737,7 +1729,42 @@
}
.whatsapp-icon {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
cursor: pointer;
z-index: 1000;
border-radius: 50%;
overflow: hidden;
outline: greenyellow 1px solid;
transition: transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.whatsapp-icon::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(37, 211, 101, 0.209);
animation: pulse 2s infinite;
z-index: -1;
}
.whatsapp-icon img {
width: 80%;
height: auto;
object-fit: contain;
}
.whatsapp-icon:hover {
transform: scale(1.1);
}
.practice-cards-wrapper .practice-card .practice-card-svg {
@ -1852,7 +1879,6 @@
.move-slider-animation-box {
margin-top: 393px;
margin-right: 0px;
}
.move-slider-box-static {
@ -1933,10 +1959,6 @@
margin-left: 15px;
}
.slide1r-container {
padding: 20px;
}
.slide1-box {
flex-direction: column;
gap: 15px;
@ -2060,7 +2082,15 @@
}
.cards_box {
margin-top: 28px;
margin-top: 20px;
}
.slide1 {
min-height: 50%;
}
.image-container1 {
display: none !important;
}
.buttons {
@ -2197,6 +2227,11 @@
.mobile-hamburger {
display: none;
}
.hero_container {
padding-top: 0px;
margin-top: 0px;
}
}
@keyframes fadeInUp {

348
main.js
View File

@ -7,197 +7,173 @@ function goToApplay() {
}
function getInTouch() {
window.open("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", "_blank");
function getInTouch(vall) {
window.open(vall, "_blank");
}
(function () {
if (window.Slide1rSliderLoaded) {
return;
function WhatsgetInTouch() {
window.open(
"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",
"_blank"
);
}
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();
})();
new Slide1rSlider({ invert: true, autoPlayDuration: 4000 });
const statItems = document.querySelectorAll('.stat-item');
@ -311,7 +287,7 @@ 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>
`;
@ -602,4 +578,36 @@ document.addEventListener("DOMContentLoaded", () => {
}, { threshold: 0.3 });
counters.forEach(counter => observer.observe(counter));
});
});
// i know it is a bad code but it works 😅
document.addEventListener("DOMContentLoaded", () => {
const track = document.querySelector(".move-slider-animation-box");
const container = document.querySelector(".container");
let pos = 0;
const normalSpeed = 1;
let speed = 20;
function animate() {
pos -= speed;
track.style.transform = `translateX(${pos}px)`;
if (pos <= -100 && speed !== normalSpeed) {
speed = normalSpeed;
}
const firstChild = track.firstElementChild;
const firstRect = firstChild.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
if (firstRect.right <= containerRect.left) {
track.appendChild(firstChild);
pos += firstChild.offsetWidth + 20;
track.style.transform = `translateX(${pos}px)`;
}
requestAnimationFrame(animate);
}
animate();
});