Spaces:

fmlemos
/

multinav-test

Running

App Files Files Community

fmlemos commited on Apr 1

Commit

620eb46

verified ·

1 Parent(s): 2f6da4c

Add 1 files

Browse files

Files changed (1) hide show

index.html +208 -227

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Page 1 | Initial Page</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -13,275 +13,256 @@
             to { opacity: 1; transform: translateY(0); }
         }
-        .fade-in {
             animation: fadeIn 0.5s ease-out forwards;
         }
-        .delay-1 { animation-delay: 0.2s; }
-        .delay-2 { animation-delay: 0.4s; }
-        .delay-3 { animation-delay: 0.6s; }
-        /* Custom hover effect for cards */
-        .card-hover {
-            transition: all 0.3s ease;
-        }
-        .card-hover:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
         }
-        /* Gradient text */
-        .gradient-text {
-            background: linear-gradient(90deg, #4f46e5, #9333ea);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
     <!-- Navigation -->
-    <nav class="bg-white shadow-lg sticky top-0 z-50">
-        <div class="max-w-6xl mx-auto px-4">
-            <div class="flex justify-between">
-                <div class="flex space-x-7">
-                    <div>
-                        <!-- Logo -->
-                        <a href="index.html" class="flex items-center py-4 px-2">
-                            <i class="fas fa-rocket text-indigo-600 text-2xl mr-2"></i>
-                            <span class="font-semibold text-gray-900 text-lg">MultiNav</span>
-                        </a>
-                    </div>
                 </div>
-                <!-- Primary Nav -->
-                <div class="hidden md:flex items-center space-x-1">
-                    <a href="index.html" class="py-4 px-2 text-gray-500 hover:text-indigo-600 transition duration-300">Home</a>
-                    <a href="page1.html" class="py-4 px-2 text-indigo-600 border-b-4 border-indigo-600 font-semibold">Page 1</a>
-                    <a href="page2.html" class="py-4 px-2 text-gray-500 hover:text-indigo-600 transition duration-300">Page 2</a>
-                    <a href="page4.html" class="py-4 px-2 text-gray-500 hover:text-indigo-600 transition duration-300">Page 4</a>
-                </div>
-                <!-- Mobile button -->
-                <div class="md:hidden flex items-center">
-                    <button class="outline-none mobile-menu-button">
-                        <svg class="w-6 h-6 text-gray-500 hover:text-indigo-600"
-                            fill="none"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path d="M4 6h16M4 12h16M4 18h16"></path>
-                        </svg>
-                    </button>
                 </div>
             </div>
-        </div>
-        <!-- Mobile menu -->
-        <div class="hidden mobile-menu">
-            <ul>
-                <li><a href="index.html" class="block text-sm px-2 py-4 hover:bg-indigo-500 hover:text-white transition duration-300">Home</a></li>
-                <li class="active"><a href="page1.html" class="block text-sm px-2 py-4 bg-indigo-600 text-white">Page 1</a></li>
-                <li><a href="page2.html" class="block text-sm px-2 py-4 hover:bg-indigo-500 hover:text-white transition duration-300">Page 2</a></li>
-                <li><a href="page4.html" class="block text-sm px-2 py-4 hover:bg-indigo-500 hover:text-white transition duration-300">Page 4</a></li>
-            </ul>
-        </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="py-16">
-        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center fade-in">
-                <span class="text-indigo-600 font-semibold uppercase tracking-wide">Welcome to</span>
-                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mt-2 mb-4">Initial <span class="gradient-text">Page</span></h1>
-                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
-                    This is the starting point of your navigation journey. Explore what makes Page 1 special.
-                </p>
             </div>
         </div>
-    </section>
-    <!-- Content Section -->
-    <section class="py-12 bg-white rounded-xl shadow-sm max-w-6xl mx-auto my-8 fade-in delay-1">
-        <div class="px-6 sm:px-8 lg:px-12">
-            <div class="max-w-4xl mx-auto">
-                <h2 class="text-2xl font-semibold text-gray-900 mb-6">About Initial Page</h2>
-                <div class="prose prose-indigo text-gray-600">
-                    <p class="mb-4">
-                        This initial page serves as the foundation for your multi-page navigation experience. Here you'll find essential information and features that introduce you to our platform's capabilities.
-                    </p>
-                    <p class="mb-4">
-                        The design maintains consistency with our main page while offering unique content specific to Page 1. Notice the subtle animations that create a smooth user experience as you navigate through the content.
-                    </p>
-                    <div class="bg-indigo-50 rounded-lg p-4 mb-6 border-l-4 border-indigo-600">
-                        <h3 class="font-semibold text-gray-900 mb-2">Quick Tip</h3>
-                        <p>
-                            Use the navigation menu to explore other pages in this demonstration. Each page offers a different experience while maintaining the same design language.
-                        </p>
                     </div>
                 </div>
             </div>
         </div>
-    </section>
-    <!-- Features Section -->
-    <section class="py-12 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12 fade-in">Page 1 Features</h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <!-- Feature 1 -->
-            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover fade-in delay-1">
-                <div class="p-8">
-                    <div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-indigo-100 text-indigo-600">
-                        <i class="fas fa-lightbulb text-xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Innovative Design</h3>
-                    <p class="text-gray-600">
-                        Experience our carefully crafted UI that balances aesthetics with functionality.
-                    </p>
-                </div>
-            </div>
-            <!-- Feature 2 -->
-            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover fade-in delay-2">
-                <div class="p-8">
-                    <div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-indigo-100 text-indigo-600">
-                        <i class="fas fa-bolt text-xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Fast Performance</h3>
-                    <p class="text-gray-600">
-                        Optimized code ensures quick loading times and smooth interactions.
-                    </p>
                 </div>
-            </div>
-            <!-- Feature 3 -->
-            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover fade-in delay-3">
-                <div class="p-8">
-                    <div class="flex items-center justify-center w-12 h-12 mb-4 rounded-full bg-indigo-100 text-indigo-600">
-                        <i class="fas fa-mobile-alt text-xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Responsive Layout</h3>
-                    <p class="text-gray-600">
-                        Works flawlessly on all devices from desktop to mobile.
-                    </p>
                 </div>
             </div>
         </div>
-    </section>
-    <!-- Call to Action -->
-    <section class="py-16 bg-indigo-600 rounded-xl max-w-6xl mx-auto my-12 fade-in">
-        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">Ready to Explore More?</h2>
-            <p class="text-indigo-100 mb-8">
-                Check out our other pages to see more features and content we've prepared for you.
-            </p>
-            <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <a href="page2.html" class="bg-white hover:bg-gray-100 text-indigo-600 font-bold py-3 px-6 rounded-full shadow-md transition duration-300 inline-flex items-center">
-                    Visit Page 2
-                    <i class="fas fa-arrow-right ml-2"></i>
-                </a>
-                <a href="page4.html" class="bg-transparent hover:bg-indigo-700 text-white font-bold py-3 px-6 border-2 border-white rounded-full shadow-md transition duration-300 inline-flex items-center">
-                    Jump to Page 4
-                    <i class="fas fa-chevron-right ml-2"></i>
-                </a>
             </div>
         </div>
-    </section>
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
-        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <h3 class="text-xl font-bold mb-4">MultiNav</h3>
-                    <p class="text-gray-400">
-                        A beautifully designed navigation system connecting multiple pages with smooth transitions.
-                    </p>
-                </div>
-                <div>
-                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
-                    <ul class="space-y-2">
-                        <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
-                        <li><a href="page1.html" class="text-white font-medium">Initial Page</a></li>
-                        <li><a href="page2.html" class="text-gray-400 hover:text-white transition">Page 2</a></li>
-                        <li><a href="page4.html" class="text-gray-400 hover:text-white transition">Page 4</a></li>
-                    </ul>
                 </div>
-                <div>
-                    <h4 class="text-lg font-semibold mb-4">Resources</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i class="fab fa-twitter text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i class="fab fa-facebook text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i class="fab fa-instagram text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition">
-                            <i class="fab fa-github text-xl"></i>
-                        </a>
-                    </div>
                 </div>
             </div>
-            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2023 MultiNav. All rights reserved.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Mobile menu toggle
-        const btn = document.querySelector(".mobile-menu-button");
-        const menu = document.querySelector(".mobile-menu");
-        btn.addEventListener("click", () => {
-            menu.classList.toggle("hidden");
-        });
-        // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const targetId = this.getAttribute('href');
-                if (targetId === '#') return;
-                const targetElement = document.querySelector(targetId);
-                if (targetElement) {
-                    targetElement.scrollIntoView({
-                        behavior: 'smooth'
-                    });
-                }
-            });
-        });
-        // Animation on scroll
-        const fadeElements = document.querySelectorAll('.fade-in');
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.style.opacity = 1;
-                    entry.target.style.transform = 'translateY(0)';
-                }
             });
-        }, { threshold: 0.1 });
-        fadeElements.forEach(element => {
-            observer.observe(element);
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=fmlemos/multinav-test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Page Website</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
             to { opacity: 1; transform: translateY(0); }
         }
+        .page-transition {
             animation: fadeIn 0.5s ease-out forwards;
         }
+        /* Custom active nav link style */
+        .nav-link.active {
+            position: relative;
         }
+        .nav-link.active::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: #3b82f6;
+            border-radius: 2px;
         }
     </style>
 </head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
     <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-10">
+        <div class="container mx-auto px-4 py-3">
+            <div class="flex justify-between items-center">
+                <div class="text-2xl font-bold text-blue-600 flex items-center">
+                    <i class="fas fa-globe mr-2"></i>
+                    <span>MultiPage</span>
                 </div>
+                <div class="hidden md:flex space-x-6">
+                    <a href="#" class="nav-link active text-blue-600 font-medium" data-page="page1">Initial Page</a>
+                    <a href="#" class="nav-link text-gray-600 hover:text-blue-600 transition font-medium" data-page="page2">Second Page</a>
+                    <a href="#" class="nav-link text-gray-600 hover:text-blue-600 transition font-medium" data-page="page3">Third Page</a>
                 </div>
+                <button class="md:hidden text-gray-600 focus:outline-none" id="mobile-menu-button">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
             </div>
+            <!-- Mobile menu -->
+            <div class="md:hidden hidden py-2" id="mobile-menu">
+                <a href="#" class="block nav-link active text-blue-600 py-2 px-4" data-page="page1">Initial Page</a>
+                <a href="#" class="block nav-link text-gray-600 hover:text-blue-600 py-2 px-4" data-page="page2">Second Page</a>
+                <a href="#" class="block nav-link text-gray-600 hover:text-blue-600 py-2 px-4" data-page="page3">Third Page</a>
             </div>
         </div>
+    </nav>
+    <!-- Page Content -->
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <!-- Page 1 (Initial Page) - Default visible -->
+        <div id="page1" class="page-content page-transition">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Initial Page</h1>
+                <p class="text-xl text-gray-600 mb-8">Welcome to the first page of our multi-page application.</p>
+                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                    <div class="flex items-center justify-center mb-4">
+                        <i class="fas fa-star text-yellow-400 text-4xl mr-3"></i>
+                        <h2 class="text-2xl font-semibold text-gray-700">Featured Content</h2>
+                    </div>
+                    <p class="text-gray-600 mb-4">This is a demonstration of a multi-page application using a single HTML file with JavaScript-powered navigation.</p>
+                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition">
+                        Learn More
+                    </button>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition">
+                        <i class="fas fa-rocket text-blue-500 text-3xl mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Fast Navigation</h3>
+                        <p class="text-gray-600">Instant page switching without full reloads.</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition">
+                        <i class="fas fa-mobile-alt text-green-500 text-3xl mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Responsive Design</h3>
+                        <p class="text-gray-600">Works perfectly on all device sizes.</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition">
+                        <i class="fas fa-paint-brush text-purple-500 text-3xl mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Beautiful UI</h3>
+                        <p class="text-gray-600">Modern design with smooth animations.</p>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Page 2 (Second Page) - Hidden by default -->
+        <div id="page2" class="page-content hidden">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Second Page</h1>
+                <p class="text-xl text-gray-600 mb-8">You've reached the second page of our application.</p>
+                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                    <div class="flex items-center justify-center mb-4">
+                        <i class="fas fa-chart-line text-green-500 text-4xl mr-3"></i>
+                        <h2 class="text-2xl font-semibold text-gray-700">Performance Metrics</h2>
                     </div>
+                    <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
+                        <div class="bg-green-500 h-4 rounded-full" style="width: 75%"></div>
                     </div>
+                    <p class="text-gray-600 mb-4">Our system is running at optimal performance levels.</p>
+                    <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition">
+                        View Stats
+                    </button>
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition">
+                        <i class="fas fa-cogs text-orange-500 text-3xl mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Advanced Settings</h3>
+                        <p class="text-gray-600">Customize your experience with our powerful tools.</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition">
+                        <i class="fas fa-shield-alt text-red-500 text-3xl mb-4"></i>
+                        <h3 class="text-xl font-semibold mb-2">Security Features</h3>
+                        <p class="text-gray-600">Your data is protected with enterprise-grade security.</p>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Page 3 (Third Page) - Hidden by default -->
+        <div id="page3" class="page-content hidden">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Third Page</h3>
+                <p class="text-xl text-gray-600 mb-8">This is the final page in our navigation demo.</p>
+                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                    <div class="flex items-center justify-center mb-4">
+                        <i class="fas fa-envelope text-purple-500 text-4xl mr-3"></i>
+                        <h2 class="text-2xl font-semibold text-gray-700">Contact Us</h2>
+                    </div>
+                    <form class="space-y-4 text-left">
+                        <div>
+                            <label for="name" class="block text-gray-700 mb-1">Name</label>
+                            <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
+                        </div>
+                        <div>
+                            <label for="email" class="block text-gray-700 mb-1">Email</label>
+                            <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
+                        </div>
+                        <div>
+                            <label for="message" class="block text-gray-700 mb-1">Message</label>
+                            <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition"></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg transition">
+                            Send Message
+                        </button>
+                    </form>
+                </div>
+                <div class="flex justify-center space-x-4">
+                    <a href="#" class="text-gray-600 hover:text-blue-500 transition">
+                        <i class="fab fa-facebook-f text-2xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-600 hover:text-blue-400 transition">
+                        <i class="fab fa-twitter text-2xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-600 hover:text-pink-500 transition">
+                        <i class="fab fa-instagram text-2xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-600 hover:text-gray-800 transition">
+                        <i class="fab fa-github text-2xl"></i>
+                    </a>
+                </div>
             </div>
         </div>
+    </main>
     <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h3 class="text-xl font-bold mb-2">MultiPage App</h3>
+                    <p class="text-gray-400">A demonstration of single-file multi-page navigation.</p>
                 </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">Contact</a>
                 </div>
             </div>
+            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
+                <p>&copy; 2023 MultiPage App. All rights reserved.</p>
             </div>
         </div>
     </footer>
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Mobile menu toggle
+            const mobileMenuButton = document.getElementById('mobile-menu-button');
+            const mobileMenu = document.getElementById('mobile-menu');
+            mobileMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.toggle('hidden');
+            });
+            // Navigation functionality
+            const navLinks = document.querySelectorAll('.nav-link');
+            const pageContents = document.querySelectorAll('.page-content');
+            function showPage(pageId) {
+                // Hide all pages
+                pageContents.forEach(page => {
+                    page.classList.add('hidden');
+                });
+                // Show selected page
+                const activePage = document.getElementById(pageId);
+                activePage.classList.remove('hidden');
+                activePage.classList.add('page-transition');
+                // Update active nav link
+                navLinks.forEach(link => {
+                    link.classList.remove('active', 'text-blue-600');
+                    link.classList.add('text-gray-600');
+                    if (link.dataset.page === pageId) {
+                        link.classList.add('active', 'text-blue-600');
+                        link.classList.remove('text-gray-600');
+                    }
+                });
+                // Close mobile menu if open
+                mobileMenu.classList.add('hidden');
+                // Scroll to top
+                window.scrollTo(0, 0);
+            }
+            // Add click event to all nav links
+            navLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const pageId = this.dataset.page;
+                    showPage(pageId);
+                });
             });
+            // Show page1 by default
+            showPage('page1');
+            // Remove transition class after animation completes
+            setTimeout(() => {
+                const pages = document.querySelectorAll('.page-content');
+                pages.forEach(page => {
+                    page.classList.remove('page-transition');
+                });
+            }, 500);
         });
     </script>
+</body>
 </html>