564 lines
20 KiB
JavaScript
564 lines
20 KiB
JavaScript
function goToApplay() {
|
||
window.location.href = "/apply/";
|
||
}
|
||
|
||
function getInTouch() {
|
||
window.open("https://wa.me/8870760431?text=Hi%20Link%20kodepilote%20Team...", "_blank");
|
||
}
|
||
|
||
|
||
(function () {
|
||
if (window.Slide1rSliderLoaded) {
|
||
return;
|
||
}
|
||
window.Slide1rSliderLoaded = true;
|
||
|
||
class Slide1rSlider {
|
||
constructor() {
|
||
setTimeout(() => {
|
||
this.initSlider();
|
||
}, 100);
|
||
}
|
||
|
||
initSlider() {
|
||
try {
|
||
this.track = document.getElementById('slide1rTrack');
|
||
this.slides = document.querySelectorAll('.slide1');
|
||
this.prevBtn = document.getElementById('prevBtn');
|
||
this.nextBtn = document.getElementById('nextBtn');
|
||
|
||
if (!this.track || this.slides.length === 0) {
|
||
console.warn("Slider DOM elements not found. Retrying...");
|
||
setTimeout(() => this.initSlider(), 200);
|
||
return;
|
||
}
|
||
|
||
this.currentIndex = 0;
|
||
this.totalSlides = this.slides.length;
|
||
this.autoPlayDuration = 5000;
|
||
|
||
this.init();
|
||
} catch (err) {
|
||
console.error("Slider initialization failed:", err);
|
||
}
|
||
}
|
||
|
||
init() {
|
||
try {
|
||
this.updateSlider();
|
||
this.bindEvents();
|
||
this.startAutoPlay();
|
||
this.bindKeyboardEvents();
|
||
} catch (err) {
|
||
console.error("Slider init error:", err);
|
||
}
|
||
}
|
||
|
||
|
||
updateSlider() {
|
||
try {
|
||
const translateX = -this.currentIndex * 100;
|
||
this.track.style.transform = `translateX(${translateX}%)`;
|
||
|
||
} catch (err) {
|
||
console.error("Error updating slider:", err);
|
||
}
|
||
}
|
||
|
||
nextSlide() {
|
||
try {
|
||
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
|
||
this.updateSlider();
|
||
this.restartAutoPlay();
|
||
} catch (err) {
|
||
console.error("Error going to next slide:", err);
|
||
}
|
||
}
|
||
|
||
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)
|
||
);
|
||
}
|
||
}
|
||
|
||
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();
|
||
});
|
||
|
||
|
||
const statItems = document.querySelectorAll('.stat-item');
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const index = Array.from(statItems).indexOf(entry.target);
|
||
entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.2 });
|
||
|
||
console.log("test");
|
||
document.addEventListener('DOMContentLoaded', async () => {
|
||
const allCourses = [];
|
||
|
||
const baseUrl = 'https://kodepilot.in/course/index.php';
|
||
const res = await fetch(baseUrl);
|
||
const html = await res.text();
|
||
|
||
const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
|
||
const categories = [];
|
||
let match;
|
||
while ((match = categoryRegex.exec(html)) !== null) {
|
||
categories.push({ url: match[1], name: match[2] });
|
||
}
|
||
|
||
for (const category of categories) {
|
||
const resCat = await fetch(category.url);
|
||
const catHtml = await resCat.text();
|
||
const cleanHtml = catHtml.replace(/\n/g, ' ');
|
||
|
||
const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
|
||
|
||
while ((match = courseRegex.exec(cleanHtml)) !== null) {
|
||
allCourses.push({
|
||
category: match[4].trim(),
|
||
link: match[1].trim(),
|
||
image: match[2].trim(),
|
||
name: match[3].trim(),
|
||
description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
|
||
});
|
||
}
|
||
}
|
||
// const allCourses = [
|
||
// {
|
||
// category: "Software Development & Engineering",
|
||
// link: "https://kodepilot.in/course/view.php?id=16",
|
||
// image: "https://kodepilot.in/pluginfile.php/53/course/overviewfiles/UiUx.png",
|
||
// name: "UI/UX Design",
|
||
// description: "Learn the fundamentals of user interface and user experience design."
|
||
// },
|
||
// {
|
||
// category: "Software Development & Engineering",
|
||
// link: "https://kodepilot.in/course/view.php?id=9",
|
||
// image: "https://kodepilot.in/pluginfile.php/39/course/overviewfiles/IOS.png",
|
||
// name: "iOS Development",
|
||
// description: "Build iOS apps using Swift and Apple’s development tools."
|
||
// },
|
||
// {
|
||
// category: "Software Development & Engineering",
|
||
// link: "https://kodepilot.in/course/view.php?id=7",
|
||
// image: "https://kodepilot.in/pluginfile.php/35/course/overviewfiles/RD.png",
|
||
// name: "React Development",
|
||
// description: "Master React.js for building fast and scalable web apps."
|
||
// },
|
||
// {
|
||
// category: "Software Development & Engineering",
|
||
// link: "https://kodepilot.in/course/view.php?id=5",
|
||
// image: "https://kodepilot.in/pluginfile.php/31/course/overviewfiles/PFS.png",
|
||
// name: "Full Stack Development",
|
||
// description: "End-to-end training in frontend, backend, and databases."
|
||
// },
|
||
// {
|
||
// category: "Software Development & Engineering",
|
||
// link: "https://kodepilot.in/course/view.php?id=3",
|
||
// image: "https://kodepilot.in/pluginfile.php/25/course/overviewfiles/JFS.png",
|
||
// name: "Java Full Stack",
|
||
// description: "Become a full stack developer with Java, Spring, and modern tools."
|
||
// },
|
||
// {
|
||
// category: "Quality & Testing",
|
||
// link: "https://kodepilot.in/course/view.php?id=13",
|
||
// image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/PT.png",
|
||
// name: "Performance Testing",
|
||
// description: "Learn tools and techniques for testing system performance."
|
||
// },
|
||
// {
|
||
// category: "Quality & Testing",
|
||
// link: "https://kodepilot.in/course/view.php?id=10",
|
||
// image: "https://kodepilot.in/pluginfile.php/41/course/overviewfiles/QA.png",
|
||
// name: "QA Testing",
|
||
// description: "Understand quality assurance practices for reliable software."
|
||
// },
|
||
// {
|
||
// category: "Cloud & DevOps",
|
||
// link: "https://kodepilot.in/course/view.php?id=17",
|
||
// image: "https://kodepilot.in/pluginfile.php/55/course/overviewfiles/GC.png",
|
||
// name: "Google Cloud",
|
||
// description: "Get hands-on with Google Cloud Platform services and tools."
|
||
// },
|
||
// {
|
||
// category: "Cloud & DevOps",
|
||
// link: "https://kodepilot.in/course/view.php?id=4",
|
||
// image: "https://kodepilot.in/pluginfile.php/28/course/overviewfiles/AWSA.png",
|
||
// name: "AWS Associate",
|
||
// description: "Prepare for AWS certifications and cloud computing skills."
|
||
// },
|
||
// {
|
||
// category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||
// link: "https://kodepilot.in/course/view.php?id=26",
|
||
// image: "https://kodepilot.in/pluginfile.php/73/course/overviewfiles/DE.png",
|
||
// name: "Data Engineering",
|
||
// description: "Build pipelines and manage data at scale for analytics."
|
||
// },
|
||
// {
|
||
// category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||
// link: "https://kodepilot.in/course/view.php?id=18",
|
||
// image: "https://kodepilot.in/pluginfile.php/58/course/overviewfiles/PE.png",
|
||
// name: "Prompt Engineering",
|
||
// description: "Learn to design prompts for AI models like ChatGPT."
|
||
// },
|
||
// {
|
||
// category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||
// link: "https://kodepilot.in/course/view.php?id=12",
|
||
// image: "https://kodepilot.in/pluginfile.php/44/course/overviewfiles/AI%28Ess%29.png",
|
||
// name: "AI Essentials",
|
||
// description: "Introduction to AI, ML concepts, and real-world use cases."
|
||
// },
|
||
// {
|
||
// category: "Enterprise & Business Tech",
|
||
// link: "https://kodepilot.in/course/view.php?id=24",
|
||
// image: "https://kodepilot.in/pluginfile.php/70/course/overviewfiles/ServiceNow.png",
|
||
// name: "ServiceNow",
|
||
// description: "Learn ITSM and workflow automation with ServiceNow."
|
||
// },
|
||
// {
|
||
// category: "Enterprise & Business Tech",
|
||
// link: "https://kodepilot.in/course/view.php?id=19",
|
||
// image: "https://kodepilot.in/pluginfile.php/61/course/overviewfiles/SAP.png",
|
||
// name: "SAP",
|
||
// description: "Master SAP ERP modules for enterprise solutions."
|
||
// },
|
||
// {
|
||
// category: "Cybersecurity & Compliance",
|
||
// link: "https://kodepilot.in/course/view.php?id=23",
|
||
// image: "https://kodepilot.in/pluginfile.php/69/course/overviewfiles/Security.png",
|
||
// name: "Security Fundamentals",
|
||
// description: "Understand core concepts of IT security and defense."
|
||
// },
|
||
// {
|
||
// category: "Cybersecurity & Compliance",
|
||
// link: "https://kodepilot.in/course/view.php?id=22",
|
||
// image: "https://kodepilot.in/pluginfile.php/68/course/overviewfiles/CyE.png",
|
||
// name: "Cyber Essentials",
|
||
// description: "Learn the basics of cybersecurity and compliance standards."
|
||
// }
|
||
// ];
|
||
|
||
console.table(allCourses);
|
||
|
||
|
||
renderCourses(allCourses);
|
||
});
|
||
|
||
function renderCourses(allCourses) {
|
||
const container = document.querySelector('.corces');
|
||
if (!container) return;
|
||
|
||
container.innerHTML = '';
|
||
|
||
// Group courses by category
|
||
const grouped = {};
|
||
allCourses.forEach(course => {
|
||
if (!grouped[course.category]) grouped[course.category] = [];
|
||
grouped[course.category].push(course);
|
||
});
|
||
|
||
// Convert grouped object to array for merging
|
||
let sections = Object.entries(grouped).map(([category, courses]) => ({ category, courses }));
|
||
|
||
// Merge sections with less than 4 courses
|
||
let mergedSections = [];
|
||
let temp = { category: '', courses: [] };
|
||
|
||
sections.forEach(section => {
|
||
if (section.courses.length >= 4) {
|
||
mergedSections.push(section);
|
||
} else {
|
||
// Merge into temp
|
||
if (temp.category) temp.category += '/' + section.category;
|
||
else temp.category = section.category;
|
||
temp.courses.push(...section.courses);
|
||
|
||
// If merged has 4 or more, push it
|
||
if (temp.courses.length >= 4) {
|
||
mergedSections.push({ category: temp.category, courses: temp.courses });
|
||
temp = { category: '', courses: [] };
|
||
}
|
||
}
|
||
});
|
||
|
||
if (temp.courses.length >= 4) {
|
||
mergedSections.push(temp);
|
||
}
|
||
|
||
mergedSections.forEach(sectionData => {
|
||
const section = document.createElement('div');
|
||
section.className = 'course-section';
|
||
section.innerHTML = `
|
||
<h2 class="course-category-title">${sectionData.category}</h2>
|
||
<div class="course-slider-box">
|
||
<div class="course-slider">
|
||
<button class="prev-btn nav-button"></button>
|
||
<div class="course-track"></div>
|
||
<button class="next-btn nav-button"></button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
const track = section.querySelector('.course-track');
|
||
const prevBtn = section.querySelector('.prev-btn');
|
||
const nextBtn = section.querySelector('.next-btn');
|
||
|
||
sectionData.courses.forEach(course => {
|
||
const courseDiv = document.createElement('div');
|
||
courseDiv.className = 'course-card';
|
||
courseDiv.innerHTML = `
|
||
<a href="${course.link}" target="_blank">
|
||
<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>
|
||
<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;
|
||
|
||
track.addEventListener('touchstart', e => {
|
||
startX = e.touches[0].clientX;
|
||
isDragging = true;
|
||
});
|
||
|
||
track.addEventListener('touchmove', e => {
|
||
if (!isDragging) return;
|
||
const x = e.touches[0].clientX;
|
||
const walk = (startX - x) * 10;
|
||
track.scrollLeft += walk;
|
||
startX = x;
|
||
});
|
||
|
||
|
||
track.addEventListener('touchend', () => {
|
||
isDragging = false;
|
||
});
|
||
|
||
container.appendChild(section);
|
||
});
|
||
|
||
}
|
||
|
||
|
||
statItems.forEach(item => observer.observe(item));
|
||
|
||
|
||
const track = document.querySelector('.mnc-logos-track');
|
||
const gap = 40;
|
||
let index = 0;
|
||
|
||
function stepScroll() {
|
||
const items = track.children;
|
||
const first = items[0];
|
||
const moveWidth = first.offsetWidth + gap;
|
||
|
||
track.style.transform = `translateX(-${moveWidth}px)`;
|
||
|
||
track.addEventListener('transitionend', function handler() {
|
||
track.appendChild(first);
|
||
track.style.transition = 'none';
|
||
track.style.transform = 'translateX(0)';
|
||
void track.offsetWidth;
|
||
track.style.transition = 'transform 0.5s ease';
|
||
track.removeEventListener('transitionend', handler);
|
||
});
|
||
}
|
||
|
||
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);
|
||
});
|
||
});
|
||
});
|