diff options
Diffstat (limited to 'static/script.js')
-rw-r--r-- | static/script.js | 164 |
1 files changed, 82 insertions, 82 deletions
diff --git a/static/script.js b/static/script.js index 6a833fe..9219098 100644 --- a/static/script.js +++ b/static/script.js @@ -16,16 +16,18 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); -hamburger.addEventListener('click', () => { - hamburger.classList.toggle('active'); - navMenu.classList.toggle('active'); -}); +if (hamburger && navMenu) { + hamburger.addEventListener('click', () => { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); -// Close mobile menu when clicking on a link -document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => { - hamburger.classList.remove('active'); - navMenu.classList.remove('active'); -})); + // Close mobile menu when clicking on a link + document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + })); +} // Navbar background on scroll window.addEventListener('scroll', () => { @@ -37,6 +39,53 @@ window.addEventListener('scroll', () => { } }); +// User profile dropdown simulation +const userProfile = document.querySelector('.user-profile'); +if (userProfile) { + userProfile.addEventListener('click', () => { + alert('User menu would open here with options like:\n• Profile Settings\n• Account Preferences\n• Logout'); + }); +} + +// Notification icon click +const notificationIcon = document.querySelector('.notification-icon'); +if (notificationIcon) { + notificationIcon.addEventListener('click', () => { + alert('Notifications:\n• Sarah completed "UI Design"\n• New comment on "Backend API"\n• Project deadline approaching'); + }); +} + +// Project card interactions +document.querySelectorAll('.project-card').forEach(card => { + card.addEventListener('click', () => { + const projectName = card.querySelector('h3').textContent; + alert(`Opening project: ${projectName}\n\nThis would navigate to the detailed project view.`); + }); +}); + +// Team member interactions +document.querySelectorAll('.team-member').forEach(member => { + member.addEventListener('click', () => { + const memberName = member.querySelector('h3').textContent; + alert(`Opening profile for: ${memberName}\n\nThis would show detailed team member information.`); + }); +}); + +// Button click handlers +document.querySelectorAll('.btn').forEach(btn => { + btn.addEventListener('click', (e) => { + const buttonText = btn.textContent; + + if (buttonText.includes('Create') || buttonText.includes('New')) { + e.stopPropagation(); + alert(`${buttonText} functionality would open here.\n\nThis would typically open a modal or navigate to a creation form.`); + } else if (buttonText.includes('View')) { + e.stopPropagation(); + alert(`${buttonText} functionality would open here.\n\nThis would navigate to a detailed view or listing page.`); + } + }); +}); + // Intersection Observer for animations const observerOptions = { threshold: 0.1, @@ -53,94 +102,45 @@ const observer = new IntersectionObserver((entries) => { }, observerOptions); // Observe elements for animation -document.querySelectorAll('.project-card, .stat, .about-text').forEach(el => { +document.querySelectorAll('.project-card, .team-member, .report-card, .stat-card').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(el); }); -// Form submission -document.querySelector('.contact-form').addEventListener('submit', function(e) { - e.preventDefault(); - - // Get form data - const name = this.querySelector('input[type="text"]').value; - const email = this.querySelector('input[type="email"]').value; - const message = this.querySelector('textarea').value; - - // Simple validation - if (!name || !email || !message) { - alert('Please fill in all fields'); - return; - } - - // Simulate form submission - const submitBtn = this.querySelector('button[type="submit"]'); - const originalText = submitBtn.textContent; - - submitBtn.textContent = 'Sending...'; - submitBtn.disabled = true; - - setTimeout(() => { - alert('Thank you for your message! I\'ll get back to you soon.'); - this.reset(); - submitBtn.textContent = originalText; - submitBtn.disabled = false; - }, 2000); -}); - -// Parallax effect for floating cards -window.addEventListener('scroll', () => { - const scrolled = window.pageYOffset; - const parallaxElements = document.querySelectorAll('.floating-card'); - - parallaxElements.forEach((element, index) => { - const speed = 0.5 + (index * 0.1); - const yPos = -(scrolled * speed); - element.style.transform = `translateY(${yPos}px)`; - }); -}); - -// Hero title fade-in animation +// Hero section fade-in animation window.addEventListener('load', () => { const heroTitle = document.querySelector('.hero-title'); const heroSubtitle = document.querySelector('.hero-subtitle'); + const quickStats = document.querySelector('.quick-stats'); const heroButtons = document.querySelector('.hero-buttons'); - if (heroTitle) { - heroTitle.style.opacity = '0'; - heroTitle.style.transform = 'translateY(30px)'; - heroTitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; - - setTimeout(() => { - heroTitle.style.opacity = '1'; - heroTitle.style.transform = 'translateY(0)'; - }, 300); - } - - if (heroSubtitle) { - heroSubtitle.style.opacity = '0'; - heroSubtitle.style.transform = 'translateY(30px)'; - heroSubtitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; - - setTimeout(() => { - heroSubtitle.style.opacity = '1'; - heroSubtitle.style.transform = 'translateY(0)'; - }, 500); - } + [heroTitle, heroSubtitle, quickStats, heroButtons].forEach((element, index) => { + if (element) { + element.style.opacity = '0'; + element.style.transform = 'translateY(30px)'; + element.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; - if (heroButtons) { - heroButtons.style.opacity = '0'; - heroButtons.style.transform = 'translateY(30px)'; - heroButtons.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; + setTimeout(() => { + element.style.opacity = '1'; + element.style.transform = 'translateY(0)'; + }, 300 + (index * 200)); + } + }); +}); +// Simulate real-time updates +setInterval(() => { + const activityItems = document.querySelectorAll('.activity-item'); + if (activityItems.length > 0) { + const randomItem = activityItems[Math.floor(Math.random() * activityItems.length)]; + randomItem.style.background = '#f0f9ff'; setTimeout(() => { - heroButtons.style.opacity = '1'; - heroButtons.style.transform = 'translateY(0)'; - }, 700); + randomItem.style.background = 'transparent'; + }, 2000); } -}); +}, 10000); // Add mobile menu styles dynamically const style = document.createElement('style'); |