From 0ad928c8d7f5043656bcb50a2995ecb30fb716e8 Mon Sep 17 00:00:00 2001 From: "dhanush.s" Date: Tue, 30 Sep 2025 10:33:58 +0530 Subject: [PATCH] fix: ui --- index.html | 23 ++--- main.css | 21 ++-- main.js | 295 +++++++++++++++++++++++------------------------------ 3 files changed, 155 insertions(+), 184 deletions(-) diff --git a/index.html b/index.html index c22e5ef..5716abf 100644 --- a/index.html +++ b/index.html @@ -275,8 +275,8 @@
-
- Business Meeting +
+ Business Meeting

QA & Testing

A close-up of a developer's screen showing a green 'Tests Passed' status and @@ -284,7 +284,7 @@

- Architecture + Architecture

Software Dev

A sleek image of a professional wireframe/design on a large monitor, with a @@ -294,11 +294,10 @@

-
- Analytics + Analytics

AI & Data

A stunning, large-scale data visualization or chart (like a complex network @@ -306,8 +305,8 @@

-
- Technology +
+ Technology

Cybersecurity

A digital shield or lock icon overlaid on a dark, technical background with @@ -326,7 +325,7 @@ a successful performance report graph.

-
+
Technology

Cybersecurity

@@ -346,7 +345,7 @@ split view showing the finished product on a mobile phone.

-
+
Technology

QA & Testing

@@ -367,7 +366,7 @@

-
+
Technology

Cloud & DevOps

@@ -389,7 +388,7 @@

-
+
Technology

Cybersecurity

@@ -410,7 +409,7 @@ split view showing the finished product on a mobile phone.

-
+
Beach

Cloud & DevOps

diff --git a/main.css b/main.css index c5ebade..8b1d44e 100644 --- a/main.css +++ b/main.css @@ -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 { diff --git a/main.js b/main.js index d35db19..c09a7a0 100644 --- a/main.js +++ b/main.js @@ -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');