739 lines
24 KiB
JavaScript
739 lines
24 KiB
JavaScript
function goToLogin() {
|
|
window.location.href = "/login";
|
|
}
|
|
|
|
function goToApplay() {
|
|
window.location.href = "/apply/";
|
|
}
|
|
|
|
|
|
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;
|
|
}
|
|
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();
|
|
})();
|
|
|
|
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()
|
|
});
|
|
}
|
|
}
|
|
console.table(allCourses);
|
|
|
|
|
|
renderCourses(allCourses);
|
|
});
|
|
|
|
function renderCourses(allCourses) {
|
|
const container = document.querySelector('.corces');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
const grouped = {};
|
|
allCourses.forEach(course => {
|
|
if (!grouped[course.category]) grouped[course.category] = [];
|
|
grouped[course.category].push(course);
|
|
});
|
|
|
|
let sections = Object.entries(grouped).map(([category, courses]) => ({ category, courses }));
|
|
|
|
let mergedSections = [];
|
|
let temp = { category: '', courses: [] };
|
|
|
|
sections.forEach(section => {
|
|
if (section.courses.length >= 4) {
|
|
mergedSections.push(section);
|
|
} else {
|
|
if (temp.category) temp.category += '/' + section.category;
|
|
else temp.category = section.category;
|
|
temp.courses.push(...section.courses);
|
|
|
|
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);
|
|
});
|
|
|
|
|
|
const scrollAmount = 300;
|
|
prevBtn.addEventListener('click', () => track.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));
|
|
nextBtn.addEventListener('click', () => track.scrollBy({ left: scrollAmount, behavior: 'smooth' }));
|
|
|
|
|
|
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 setActiveCard(card) {
|
|
cards.forEach(c => {
|
|
c.classList.remove('active');
|
|
});
|
|
|
|
card.classList.add('active');
|
|
|
|
lastActiveCard = card;
|
|
}
|
|
|
|
if (!activeCard && cards.length > 0) {
|
|
setActiveCard(cards[0]);
|
|
}
|
|
|
|
cards.forEach(card => {
|
|
card.addEventListener('click', function () {
|
|
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.injectStyles();
|
|
this.createMobileMenu();
|
|
this.bindEvents();
|
|
this.checkScreenSize();
|
|
|
|
|
|
window.addEventListener('resize', () => this.checkScreenSize());
|
|
}
|
|
|
|
injectStyles() {
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@media (max-width: 480px) {
|
|
.buttons {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-hamburger {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
|
|
|
|
}
|
|
|
|
.mobile-hamburger:hover {
|
|
transform: scale(1.05);
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.1));
|
|
}
|
|
|
|
.hamburger-line {
|
|
width: 26px;
|
|
height: 3px;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
margin: 3px 0;
|
|
border-radius: 3px;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.mobile-hamburger.active .hamburger-line:nth-child(1) {
|
|
transform: rotate(45deg) translate(6px, 6px);
|
|
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
|
|
}
|
|
|
|
.mobile-hamburger.active .hamburger-line:nth-child(2) {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.mobile-hamburger.active .hamburger-line:nth-child(3) {
|
|
transform: rotate(-45deg) translate(8px, -8px);
|
|
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
|
|
}
|
|
|
|
.mobile-menu-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 9998;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.mobile-menu-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.mobile-slide-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 300px;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,242,247,0.9));
|
|
backdrop-filter: blur(20px);
|
|
border-left: 1px solid rgba(255,255,255,0.3);
|
|
z-index: 9999;
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: -20px 0 40px rgba(0,0,0,0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 80px 0 40px 0;
|
|
}
|
|
|
|
.mobile-slide-menu.active {
|
|
right: 0;
|
|
}
|
|
|
|
.mobile-menu-item {
|
|
padding: 20px 40px;
|
|
border: none;
|
|
background: none;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
position: relative;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
.mobile-menu-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.mobile-menu-item:hover::before {
|
|
left: 0;
|
|
}
|
|
|
|
.mobile-menu-item:hover {
|
|
color: #667eea;
|
|
transform: translateX(15px);
|
|
}
|
|
|
|
.mobile-menu-item:active {
|
|
transform: translateX(15px) scale(0.98);
|
|
}
|
|
|
|
.menu-close-btn {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 50%;
|
|
color: #718096;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.menu-close-btn:hover {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2));
|
|
transform: rotate(90deg) scale(1.1);
|
|
color: #ff6b6b;
|
|
}
|
|
}
|
|
|
|
.mobile-hamburger {
|
|
display: none;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
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();
|
|
} |