diff --git a/main.css b/main.css
index 88ab790..f186549 100644
--- a/main.css
+++ b/main.css
@@ -80,7 +80,7 @@
}
.buttons button {
- margin-left: 2px;
+ margin-left: 15px;
padding: 8px 15px;
border: none;
border-radius: 20px;
@@ -406,7 +406,7 @@
gap: 20px;
justify-items: center;
align-items: stretch;
- max-width: 90%;
+ min-width: 90%;
}
.stat-item {
diff --git a/main.js b/main.js
index 20faa44..6d75639 100644
--- a/main.js
+++ b/main.js
@@ -6,6 +6,7 @@ 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");
}
@@ -317,12 +318,12 @@ function renderCourses(allCourses) {
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;
@@ -440,4 +441,299 @@ document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".practice-container a").forEach(link => {
link.setAttribute("href", "/apply");
});
-});
\ No newline at end of file
+});
+
+
+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 = `
+
+
+
+ `;
+
+
+ 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();
+}
\ No newline at end of file