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

fix: ui

Browse Source
This commit is contained in:
dhanush.s 2025-09-30 10:33:58 +05:30
parent 650392b397
commit 0ad928c8d7
3 changed files with 155 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -275,8 +275,8 @@
<div class="slide1">
<div class="slide1-box">
<div class="image-container">
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
<div class="image-container image-container1">
<img src="assets/images/hai1/qa.jpg" alt="Business Meeting">
<div class="image-overlay">
<h4>QA & Testing</h4>
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and
@ -284,7 +284,7 @@
</div>
</div>
<div class="image-container">
<img src="templateapi/assets/images/hai1/hai12.jpg" alt="Architecture">
<img src="assets/images/hai1/hai12.jpg" alt="Architecture">
<div class="image-overlay">
<h4>Software Dev</h4>
<p>A sleek image of a professional wireframe/design on a large monitor, with a
@ -294,11 +294,10 @@
</div>
</div>
<div class="slide1">
<div class="slide1-box">
<div class="image-container">
<img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
<img src="assets/images/hai1/ai.jpg" alt="Analytics">
<div class="image-overlay">
<h4>AI & Data</h4>
<p>A stunning, large-scale data visualization or chart (like a complex network
@ -306,8 +305,8 @@
</p>
</div>
</div>
<div class="image-container">
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-container image-container1">
<img src="assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-overlay">
<h4>Cybersecurity</h4>
<p>A digital shield or lock icon overlaid on a dark, technical background with
@ -326,7 +325,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 +345,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 +366,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 +388,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 +409,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>

21
main.css
View File

@ -1298,7 +1298,7 @@
.course-category-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
padding-left: 14px;
}
.course-slider {
@ -1933,10 +1933,6 @@
margin-left: 15px;
}
.slide1r-container {
padding: 20px;
}
.slide1-box {
flex-direction: column;
gap: 15px;
@ -2060,7 +2056,15 @@
}
.cards_box {
margin-top: 28px;
margin-top: 20px;
}
.slide1 {
min-height: 50%;
}
.image-container1 {
display: none !important;
}
.buttons {
@ -2197,6 +2201,11 @@
.mobile-hamburger {
display: none;
}
.hero_container {
padding-top: 0px;
margin-top: 0px;
}
}
@keyframes fadeInUp {

295
main.js
View File

@ -11,193 +11,156 @@ 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 () {
if (window.Slide1rSliderLoaded) {
return;
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');