Okay, I understand. We can simulate navigation to different "pages" without creating separate HTML files by using JavaScript to dynamically update the content of the main area based on URL hash changes (e.g., `index.html#/history`). This gives the feel of a multi-page site while keeping everything in the current files. We'll modify the placeholder links to use hash-based paths and add JavaScript routing logic. **1. Update HTML (`index.html`)** Change `href="#"` for links that should navigate to a simulated page. External links (like the official AG site and potentially social media) will remain as they are. **2. Update CSS (`style.css`)** Add a style to ensure the main content area adapts height correctly. **3. Update JavaScript (`script.js`)** Implement the routing logic, define content for the simulated pages, and adjust event listeners. Here are the updated files: Assemblies of God | Welcome Home

Welcome Home

A global fellowship united by faith, empowered by the Spirit.

Discover More

About Us: Our Story

Born from a desire for spiritual renewal, the Assemblies of God was established in 1914 in Hot Springs, Arkansas. What began with 300 pioneers has blossomed into a worldwide movement.

Today, we are a cooperative fellowship of over 13,000 churches in the U.S. and more than 370,000 worldwide, encompassing over 69 million members. We are bound by a shared commitment to reach the world for Christ through evangelism, worship, discipleship, and compassion.

Our History Timeline

Our Core Beliefs

We stand firmly on the foundation of Scripture and historic Christian doctrine, embracing the dynamic work of the Holy Spirit.

Bible as Inspired Word

The Scriptures, both Old and New Testaments, are verbally inspired of God and are the revelation of God to man.

One True God

The one true God has revealed Himself as the eternally self-existent "I AM," the Creator of heaven and earth.

Deity of Christ

The Lord Jesus Christ is the eternal Son of God. We believe in His virgin birth, sinless life, miracles, and atoning death.

Salvation of Man

Man's only hope of redemption is through the shed blood of Jesus Christ the Son of God.

Read Our 16 Fundamental Truths

Engaging Ministries

Serving God and people through diverse ministries locally and globally.

World Missions

Reaching the unreached across the globe with the Gospel message.

Learn More

Youth & Kids

Investing in the next generation through engaging programs and discipleship.

Explore Programs

Compassion

Showing God's love through practical acts of service and relief efforts.

Get Involved

Upcoming Events

Join us for fellowship, worship, and growth opportunities.

National Youth Convention

August 5-9, 2024 | Columbus, OH

Details & Registration

General Council 2025

August 4-8, 2025 | Orlando, FL

More Info

Regional Leadership Summit

October 15, 2024 | Online

Get Connected

Find your place in the Assemblies of God family. Locate a church, explore resources, or reach out to us.

Find a Church Contact Us

Partner Through Giving

Your generosity fuels ministries that change lives around the world. Support the mission God has called us to.

Give Securely Online

/* Reset and Base Styles */ :root { --primary-color: #005A9C; /* Deeper Blue */ --secondary-color: #003E6B; /* Darker Blue */ --accent-color: #D4A017; /* Gold/Yellow Accent */ --light-gray: #f8f9fa; --medium-gray: #e9ecef; --dark-gray: #343a40; --text-color: #212529; --white: #fff; --success-color: #28a745; --error-color: #dc3545; --font-primary: 'Poppins', sans-serif; --font-secondary: 'Merriweather', serif; --header-height: 75px; --border-radius: 8px; --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Base font size */ } body { font-family: var(--font-primary); line-height: 1.7; color: var(--text-color); background-color: var(--white); overflow-x: hidden; /* Prevent horizontal scroll */ } .container { max-width: 1200px; /* Wider container */ margin: 0 auto; padding: 0 25px; } a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--secondary-color); } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-secondary); /* Serif for headings */ margin-bottom: 1rem; font-weight: 700; line-height: 1.3; color: var(--dark-gray); } h1 { font-size: 3rem; } h2 { font-size: 2.25rem; margin-bottom: 2.5rem; } h3 { font-size: 1.5rem; color: var(--primary-color); } h4 { font-size: 1.1rem; font-family: var(--font-primary); font-weight: 600; } p { margin-bottom: 1.2rem; } p.lead { font-size: 1.15rem; font-weight: 300; } .text-light { color: var(--white) !important; } .text-light h2, .text-light h3, .text-light p { color: var(--white); } img { max-width: 100%; height: auto; border-radius: var(--border-radius); } i { /* Icon margin */ margin-right: 0.5em; } .fa-chevron-right { margin-left: 0.5em; margin-right: 0; } /* Header */ .site-header { background-color: var(--white); box-shadow: var(--box-shadow); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: var(--header-height); transition: background-color 0.3s ease; } .site-header .container { display: flex; justify-content: space-between; align-items: center; height: 100%; } .logo a { font-size: 1.6rem; font-weight: 700; color: var(--dark-gray); display: flex; align-items: center; } .logo a i { color: var(--primary-color); margin-right: 0.4em; } .logo a:hover { color: var(--primary-color); } .main-nav ul { display: flex; } .main-nav li { margin-left: 30px; } .main-nav a { color: var(--dark-gray); font-weight: 600; /* Bolder nav links */ padding: 8px 0; position: relative; transition: color 0.3s ease; display: flex; align-items: center; font-size: 0.95rem; } .main-nav a i { display: none; /* Hide icons on desktop nav by default */ } .main-nav a::after { /* Underline effect */ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease; } .main-nav a:hover, .main-nav a.active { /* Active state for scrollspy */ color: var(--primary-color); } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } /* Mobile Menu Toggle */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; /* Ensure it's above nav */ } .menu-toggle span { display: block; width: 28px; height: 3px; background-color: var(--dark-gray); margin: 6px 0; transition: all 0.3s ease-in-out; border-radius: 3px; } /* Main Content Area */ main { padding-top: var(--header-height); min-height: calc(100vh - var(--header-height) - 150px); /* Ensure footer is pushed down, adjust footer height estimate (150px) if needed */ display: flex; flex-direction: column; } #page-content { flex-grow: 1; /* Allow content area to fill space */ } /* Style for dynamically loaded simple pages */ .simple-page-section { padding: 80px 0; } /* Hero Section */ .hero { background: url('https://via.placeholder.com/1920x1080.png?text=Spirit-Filled+Worship') no-repeat center center/cover; /* Placeholder image */ color: var(--white); text-align: center; min-height: 75vh; /* Taller hero */ display: flex; align-items: center; justify-content: center; position: relative; padding: 120px 0; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 50, 90, 0.7), rgba(0, 20, 40, 0.8)); /* Dark blue gradient overlay */ z-index: 1; } .hero .container { position: relative; z-index: 2; } .hero h1 { font-size: 4rem; /* Larger hero title */ margin-bottom: 0.5rem; font-weight: 700; color: var(--white); text-shadow: 2px 2px 8px rgba(0,0,0,0.5); } .hero p.subtitle { font-size: 1.4rem; margin-bottom: 2.5rem; font-weight: 300; color: rgba(255, 255, 255, 0.9); } /* Buttons */ .btn { display: inline-block; padding: 12px 30px; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .btn i { margin-right: 0.6em; } .btn-lg { padding: 15px 40px; font-size: 1.1rem; } .btn-sm { padding: 8px 15px; font-size: 0.85rem; } .btn-primary { background-color: var(--primary-color); color: var(--white); } .btn-primary:hover { background-color: var(--secondary-color); box-shadow: 0 4px 10px rgba(0, 90, 156, 0.4); transform: translateY(-2px); } .btn-secondary { background-color: var(--white); color: var(--primary-color); border: 2px solid var(--medium-gray); } .btn-secondary:hover { background-color: var(--light-gray); border-color: var(--dark-gray); color: var(--secondary-color); transform: translateY(-2px); } .btn-outline-light { background-color: transparent; color: var(--white); border: 2px solid var(--white); } .btn-outline-light:hover { background-color: var(--white); color: var(--primary-color); transform: translateY(-2px); } /* Content Sections */ .content-section { padding: 80px 0; } .content-section h2 { text-align: center; margin-bottom: 4rem; /* Increased margin */ position: relative; } .content-section h2 i { color: var(--primary-color); } .text-light h2 i { color: var(--accent-color); /* Accent color for icons on dark bg */ } /* Underline effect for headings */ .content-section h2::after { content: ''; display: block; width: 80px; /* Wider underline */ height: 4px; /* Thicker underline */ background-color: var(--accent-color); /* Accent color */ margin: 15px auto 0; border-radius: 2px; } .text-light h2::after { background-color: var(--white); } .content-section.bg-light { background-color: var(--light-gray); } .content-section.bg-gradient { background: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color)); color: var(--white); } /* About Section Specifics */ .about-content { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; } .about-image { box-shadow: var(--box-shadow); } /* Beliefs Section Specifics */ .beliefs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 3rem; margin-bottom: 3rem; text-align: center; } .belief-item { background-color: rgba(255, 255, 255, 0.1); /* Slight background on gradient */ padding: 30px; border-radius: var(--border-radius); transition: transform 0.3s ease, box-shadow 0.3s ease; } .belief-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .belief-item i { color: var(--accent-color); margin-bottom: 1rem; display: block; /* Center icon */ margin-right: 0; } .belief-item h3 { margin-bottom: 0.5rem; font-size: 1.2rem; } /* Ministries Section Specifics - Cards */ .ministry-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .card { background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .card img { width: 100%; height: 200px; /* Fixed height for card images */ object-fit: cover; border-radius: var(--border-radius) var(--border-radius) 0 0; } .card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .card-content h3 { margin-bottom: 0.5rem; } .card-content p { flex-grow: 1; margin-bottom: 1rem; } .card-content a { font-weight: 600; color: var(--primary-color); align-self: flex-start; /* Align link to the start */ } .card-content a:hover { color: var(--secondary-color); text-decoration: underline; } /* Events Section */ .events-list { max-width: 800px; margin: 0 auto; } .event-item { background-color: var(--white); padding: 20px; margin-bottom: 20px; border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; /* Allow wrapping on smaller screens */ gap: 15px; } .event-item h4 { margin-bottom: 0.5rem; flex-basis: 100%; /* Title takes full width initially */ } .event-item p { margin-bottom: 0; color: var(--dark-gray); font-size: 0.9rem; flex-grow: 1; /* Allow text to take available space */ } .event-item p i { color: var(--primary-color); } .event-item .btn { margin-left: auto; /* Push button to the right */ } /* Connect CTA Section */ .connect-cta { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://via.placeholder.com/1920x500.png?text=Community+Hands') no-repeat center center/cover; color: var(--white); text-align: center; } .connect-cta h2, .connect-cta p { color: var(--white); } .connect-cta h2::after { background-color: var(--accent-color); } .connect-buttons { margin-top: 2rem; } .connect-buttons .btn { margin: 0 10px; } /* Footer */ .site-footer { background-color: var(--dark-gray); color: var(--medium-gray); padding: 60px 0 30px; /* More padding */ /* Removed min-height as main handles pushing it down */ } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-about h3, .footer-links h4, .footer-connect h4 { color: var(--white); font-family: var(--font-primary); font-weight: 600; margin-bottom: 1.5rem; font-size: 1.1rem; } .footer-about p { font-size: 0.9rem; line-height: 1.6; } .social-links a { color: var(--medium-gray); font-size: 1.3rem; margin-right: 15px; transition: color 0.3s ease; } .social-links a:hover { color: var(--accent-color); } .footer-links ul li { margin-bottom: 10px; } .footer-links a { color: var(--medium-gray); font-size: 0.9rem; } .footer-links a:hover { color: var(--white); text-decoration: underline; } .newsletter-form { display: flex; margin-top: 10px; position: relative; /* For message positioning */ } .newsletter-form input { flex-grow: 1; padding: 10px; border: 1px solid #555; border-radius: var(--border-radius) 0 0 var(--border-radius); background-color: #555; color: var(--white); font-family: var(--font-primary); } .newsletter-form input::placeholder { color: #aaa; } .newsletter-form button { border-radius: 0 var(--border-radius) var(--border-radius) 0; white-space: nowrap; /* Prevent button text wrapping */ } /* Newsletter message style */ .newsletter-message { display: none; /* Hidden by default */ margin-top: 10px; font-size: 0.9em; padding: 8px; border-radius: 4px; text-align: left; } .newsletter-message.success { color: var(--success-color); background-color: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); } .newsletter-message.error { color: var(--error-color); background-color: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); } .footer-bottom { border-top: 1px solid #555; padding-top: 30px; text-align: center; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .footer-bottom p { margin-bottom: 0; } .footer-nav ul { display: flex; } .footer-nav li { margin-left: 20px; } .footer-nav a { color: var(--medium-gray); } .footer-nav a:hover { color: var(--white); } /* Audio Controls */ .audio-controls { position: fixed; bottom: 20px; right: 20px; z-index: 1001; } .audio-controls button { background-color: var(--primary-color); color: var(--white); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: background-color 0.3s ease; } .audio-controls button:hover { background-color: var(--secondary-color); } /* Responsive Design */ @media (max-width: 992px) { .container { padding: 0 20px; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } .hero h1 { font-size: 3rem; } .hero p.subtitle { font-size: 1.2rem; } .about-content { grid-template-columns: 1fr; text-align: center; } .about-image { margin-bottom: 2rem; max-width: 80%; display: block; margin-left: auto; margin-right: auto;} } @media (max-width: 768px) { :root { --header-height: 65px; } h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; margin-bottom: 3rem; } .hero { min-height: 60vh; padding: 80px 0; } .hero h1 { font-size: 2.5rem; } .hero p.subtitle { font-size: 1.1rem; } .main-nav { display: none; position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 15px 0; border-top: 1px solid var(--light-gray); } .main-nav.active { display: block; } .main-nav ul { flex-direction: column; align-items: center; } .main-nav li { margin: 0; width: 100%; text-align: center; } .main-nav a { padding: 15px 20px; border-bottom: 1px solid var(--light-gray); width: 100%; justify-content: center; /* Center text and icon */ } .main-nav a i { display: inline-block; /* Show icons on mobile nav */ margin-right: 0.8em; } .main-nav li:last-child a { border-bottom: none; } .main-nav a::after { display: none; } /* Remove underline effect on mobile */ .main-nav a:hover, .main-nav a.active { background-color: var(--light-gray); color: var(--primary-color); } .menu-toggle { display: block; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } .content-section, .simple-page-section { padding: 60px 0; } .beliefs-grid { grid-template-columns: 1fr; } /* Stack beliefs on smaller screens */ .ministry-cards { grid-template-columns: 1fr; } /* Stack cards */ .event-item { flex-direction: column; align-items: flex-start; } .event-item .btn { margin-left: 0; margin-top: 10px; } .footer-content { grid-template-columns: 1fr; text-align: center; } .social-links { margin-bottom: 1rem; } .newsletter-form { justify-content: center; } .footer-bottom { flex-direction: column; gap: 10px; } .footer-nav ul { justify-content: center; padding-top: 10px; } .footer-nav li { margin: 0 10px; } .audio-controls { bottom: 15px; right: 15px; } .audio-controls button { width: 45px; height: 45px; font-size: 1rem; } } document.addEventListener('DOMContentLoaded', function() { // --- DOM Elements --- const menuToggle = document.querySelector('.menu-toggle'); const mainNav = document.querySelector('.main-nav'); const currentYearSpan = document.getElementById('current-year'); const backgroundMusic = document.getElementById('background-music'); const playPauseButton = document.getElementById('play-pause-music'); const playPauseIcon = playPauseButton ? playPauseButton.querySelector('i') : null; const clickSound = document.getElementById('click-sound'); const interactiveElements = document.querySelectorAll('.interactive-sound'); const newsletterForm = document.getElementById('newsletter-form'); const newsletterEmailInput = document.getElementById('newsletter-email'); const newsletterMessage = document.getElementById('newsletter-message'); const pageContentContainer = document.getElementById('page-content'); const initialPageContentTemplate = document.getElementById('initial-page-content'); const mainNavLinks = document.querySelectorAll('.main-nav ul li a'); // For scrollspy update // Store the initial HTML content of the main page sections const initialContentHTML = initialPageContentTemplate ? initialPageContentTemplate.innerHTML : '

Error: Initial content not found.

'; // --- Simple Page Router --- // Define content for simulated pages const routes = { '/': initialContentHTML, // Home page content '/history': `

Our History Timeline

From our founding in 1914 to today, explore the key milestones of the Assemblies of God movement.

(Detailed timeline content would go here...)

← Back to Home

`, '/beliefs/fundamental-truths': `

The 16 Fundamental Truths

These are the core tenets of faith that unite the Assemblies of God fellowship worldwide. They represent our understanding of foundational biblical teachings.

The Scriptures Inspired
The One True God
The Deity of the Lord Jesus Christ
The Fall of Man
The Salvation of Man
The Ordinances of the Church
The Baptism in the Holy Spirit
The Initial Physical Evidence of the Baptism in the Holy Spirit
Sanctification
The Church and Its Mission
The Ministry
Divine Healing
The Blessed Hope
The Millennial Reign of Christ
The Final Judgment
The New Heavens and the New Earth

(Detailed explanations for each truth would go here...)

← Back to Home

`, '/ministries/missions': `

World Missions

Impacting nations with the Gospel. AG World Missions is committed to reaching the lost, planting churches, training leaders, and showing compassion.

(Information about mission fields, projects, how to get involved, etc., would go here...)

← Back to Home

`, '/ministries/youth': `

Youth & Kids Ministries

Empowering the next generation to know Christ and make Him known. Explore resources and programs for children and teenagers.

(Details about specific programs like Royal Rangers, Girls Ministries, Speed the Light, etc., would go here...)

← Back to Home

`, '/ministries/compassion': `

Compassion Ministries

Demonstrating God's love through practical acts of kindness and service. Learn about disaster relief, community outreach, and more.

(Information on Convoy of Hope partnership, local church initiatives, etc., would go here...)

← Back to Home

`, // Add more routes for events, connect, give, careers, privacy, terms... '/events/youth-convention-2024': createEventPage('National Youth Convention 2024', 'August 5-9, 2024', 'Columbus, OH', 'Join thousands of students for worship, teaching, and fun!'), '/events/general-council-2025': createEventPage('General Council 2025', 'August 4-8, 2025', 'Orlando, FL', 'The biennial gathering for fellowship, business, and inspiration.'), '/events/leadership-summit-2024': createEventPage('Regional Leadership Summit 2024', 'October 15, 2024', 'Online', 'Equipping leaders for effective ministry in today\'s world.'), '/connect/find-church': `

Find a Church

Locate an Assemblies of God church near you. Enter your city or zip code below.

(A real implementation would require a backend or external service for church lookup.)

← Back to Home

`, '/connect/contact': `

Contact Us

We'd love to hear from you. Please use the form below or contact our offices directly.

Assemblies of God National Office
1445 N Boonville Ave
Springfield, MO 65802
(417) 862-2781

(A real implementation would require a backend to process the form.)

← Back to Home

`, '/give': `

Give Online

Your generosity makes a difference! Thank you for partnering with the Assemblies of God.

(This page would typically contain a secure giving form or link to a dedicated giving platform.)

Select an Area to Support:

← Back to Home

`, '/careers': createSimplePage('Careers', 'Join our team and use your skills for Kingdom impact. View current openings at the National Office and affiliated ministries.', 'fa-briefcase'), '/privacy-policy': createSimplePage('Privacy Policy', 'We are committed to protecting your privacy. This policy outlines how we collect, use, and safeguard your information.', 'fa-shield-halved'), '/terms-of-use': createSimplePage('Terms of Use', 'Please review the terms and conditions for using this website and its content.', 'fa-file-contract'), // Add a 404-like fallback '/404': `

Page Not Found

Sorry, the page you requested could not be found.

Go Home

` }; // Helper to create simple page content function createSimplePage(title, content, iconClass = 'fa-file-alt') { return `

${title}

${content}

(More detailed content would go here...)

← Back to Home

`; } // Helper to create event page content function createEventPage(title, date, location, description) { return `

Event: ${title}

Date: ${date}

Location: ${location}

${description}

(Registration forms, schedules, speaker info, etc., would go here...)

← Back to Home

`; } function router() { const path = window.location.hash.substring(1) || '/'; // Get path from hash, default to '/' const pageHTML = routes[path] || routes['/404']; // Find content or use 404 if (pageContentContainer) { pageContentContainer.innerHTML = pageHTML; window.scrollTo(0, 0); // Scroll to top after loading new content // Re-attach sound listeners to newly added elements if needed attachSoundListeners(); // Update active state for main nav links based on view updateNavActiveState(path); } else { console.error("Page content container not found!"); } } // Update nav active state: only highlight for main page sections function updateNavActiveState(currentPath) { const isHomePageView = currentPath === '/' || currentPath.startsWith('/#'); // Check if viewing the initial content mainNavLinks.forEach(a => { // Remove active class if we navigated away from the home page view if (!isHomePageView) { a.classList.remove('active'); a.classList.remove('main-page-link-active'); // Remove specific class if used } // Scrollspy will handle adding 'active' class when scrolling on home page view }); } // --- Event Listeners --- // Listen for hash changes (browser back/forward, manual hash change) window.addEventListener('hashchange', router); // Initial routing call on page load router(); // Mobile Menu Toggle if (menuToggle && mainNav) { menuToggle.addEventListener('click', function() { mainNav.classList.toggle('active'); menuToggle.classList.toggle('active'); const isExpanded = mainNav.classList.contains('active'); menuToggle.setAttribute('aria-expanded', isExpanded); document.body.style.overflow = isExpanded ? 'hidden' : ''; }); } // Set current year in footer if (currentYearSpan) { currentYearSpan.textContent = new Date().getFullYear(); } // Close mobile menu when ANY link inside is clicked const allNavLinks = document.querySelectorAll('.main-nav a'); allNavLinks.forEach(link => { link.addEventListener('click', () => { if (mainNav.classList.contains('active')) { mainNav.classList.remove('active'); menuToggle.classList.remove('active'); menuToggle.setAttribute('aria-expanded', 'false'); document.body.style.overflow = ''; // Restore scroll } // Router will handle navigation if it's a hash link }); }); // Active link highlighting based on scroll position (ONLY for main page sections) const sections = document.querySelectorAll('#page-content > section[id]'); // Target sections within the initial content structure window.addEventListener('scroll', () => { // Only run scrollspy if we are on the home page view const currentPath = window.location.hash.substring(1) || '/'; if (currentPath !== '/') return; // Exit if not on home page view let currentSectionId = ''; const headerHeight = document.querySelector('.site-header')?.offsetHeight || 70; const scrollPosition = pageYOffset + headerHeight + 100; // Increased offset // Use sections from the initial content for scrollspy const homePageSections = pageContentContainer.querySelectorAll('section[id]'); homePageSections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { currentSectionId = section.getAttribute('id'); } }); // If scrolled to the very bottom of home page, activate the last link if (currentPath === '/' && (window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 50) { const lastSection = homePageSections[homePageSections.length - 1]; if (lastSection) { currentSectionId = lastSection.getAttribute('id'); } } mainNavLinks.forEach(a => { a.classList.remove('active'); // Check href against current section ID (only for main page links) if (a.classList.contains('main-page-link') && a.getAttribute('href') === `#${currentSectionId}`) { a.classList.add('active'); } }); // Clear active state if scrolled to the top of the home page if (currentPath === '/' && !currentSectionId && pageYOffset < (homePageSections[0]?.offsetTop - headerHeight - 50)) { mainNavLinks.forEach(a => a.classList.remove('active')); } }); // Background Music Controls (no changes needed) if (backgroundMusic && playPauseButton && playPauseIcon) { playPauseButton.addEventListener('click', () => { if (backgroundMusic.paused || backgroundMusic.ended) { backgroundMusic.play().catch(error => console.error("Audio play failed:", error)); } else { backgroundMusic.pause(); } }); backgroundMusic.addEventListener('play', () => { playPauseIcon.classList.replace('fa-play', 'fa-pause'); }); backgroundMusic.addEventListener('pause', () => { playPauseIcon.classList.replace('fa-pause', 'fa-play'); }); backgroundMusic.addEventListener('ended', () => { playPauseIcon.classList.replace('fa-pause', 'fa-play'); }); } else { console.warn("Background music elements not found."); const audioControlsDiv = document.querySelector('.audio-controls'); if (audioControlsDiv) audioControlsDiv.style.display = 'none'; } // Click Sound Effect Attachment Function function attachSoundListeners() { const currentInteractiveElements = document.querySelectorAll('.interactive-sound'); currentInteractiveElements.forEach(el => { // Remove existing listener to prevent duplicates if re-attaching el.removeEventListener('click', playClickSound); // Add the listener el.addEventListener('click', playClickSound); }); } // Click Sound Player Function function playClickSound(e) { if (clickSound && clickSound.readyState >= 2) { clickSound.currentTime = 0; clickSound.play().catch(error => console.warn("Click sound failed:", error)); } // Special handling for main page anchor links (scrolling) const targetHref = e.currentTarget.getAttribute('href'); if (e.currentTarget.classList.contains('main-page-link') && targetHref && targetHref.startsWith('#') && targetHref.length > 1) { const targetId = targetHref.substring(1); const targetElement = document.getElementById(targetId); // Check if we are on the home page view before trying to scroll const currentPath = window.location.hash.substring(1) || '/'; if (currentPath === '/' && targetElement) { e.preventDefault(); // Prevent immediate jump only for main page scroll links // Wait a tiny bit for sound to play, then scroll setTimeout(() => { targetElement.scrollIntoView({ behavior: 'smooth' }); }, 50); } // If not on home page, or target not found, let default hash behavior happen (which might trigger router) } // For non-main-page hash links (like #/history), let the default behavior trigger the hashchange event and router. // For external links or form buttons, allow default behavior. } // Initial attachment of sound listeners if (clickSound) { attachSoundListeners(); } else { console.warn("Click sound element not found."); } // Newsletter Form Submission Handler (no changes needed) if (newsletterForm && newsletterEmailInput && newsletterMessage) { newsletterForm.addEventListener('submit', (e) => { e.preventDefault(); const email = newsletterEmailInput.value.trim(); if (email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { console.log('Newsletter Subscription:', email); newsletterMessage.textContent = 'Thank you for subscribing!'; newsletterMessage.className = 'newsletter-message success'; newsletterMessage.style.display = 'block'; newsletterEmailInput.value = ''; setTimeout(() => { newsletterMessage.style.display = 'none'; }, 5000); } else { newsletterMessage.textContent = 'Please enter a valid email address.'; newsletterMessage.className = 'newsletter-message error'; newsletterMessage.style.display = 'block'; } }); } else { console.warn("Newsletter form elements not found."); } }); **Summary of Changes:** 1. **HTML (`index.html`):** * Placeholder links (`href="#"`) changed to hash-based paths (e.g., `href="#/history"`). * Links intended for scrolling on the main page view were given the class `main-page-link`. * The logo link now points to `#/` to explicitly load the home view via the router. * The initial content within `

` was wrapped in `

`. * A `