Spaces:

fmlemos
/

multinav-test

Running

App Files Files Community

fmlemos commited on Apr 1, 2025

Commit

fe2eb79

verified ·

1 Parent(s): 620eb46

Add 1 files

Browse files

Files changed (1) hide show

index.html +162 -178

index.html CHANGED Viewed

@@ -7,261 +7,245 @@
     <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>
-        /* Custom animations */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             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>

     <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>
+        /* Custom CSS for page transitions */
+        .page {
+            display: none;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        .page.active {
+            display: block;
+        }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
         /* Custom active nav link style */
         .nav-link.active {
+            background-color: #3b82f6;
+            color: white;
         }
+        .nav-link.active:hover {
+            background-color: #2563eb;
         }
     </style>
 </head>
+<body class="bg-gray-100 min-h-screen">
+    <!-- Navigation Bar -->
     <nav class="bg-white shadow-lg sticky top-0 z-10">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center">
+                    <i class="fas fa-globe text-blue-500 text-2xl mr-2"></i>
+                    <span class="text-xl font-bold text-gray-800">MultiPage</span>
                 </div>
+                <div class="hidden md:flex space-x-1">
+                    <button onclick="showPage('page1')" id="nav-page1" class="nav-link active px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
+                        <i class="fas fa-home mr-2"></i>Page 1
+                    </button>
+                    <button onclick="showPage('page2')" id="nav-page2" class="nav-link px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
+                        <i class="fas fa-file-alt mr-2"></i>Page 2
+                    </button>
+                    <button onclick="showPage('page3')" id="nav-page3" class="nav-link px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
+                        <i class="fas fa-cog mr-2"></i>Page 3
+                    </button>
                 </div>
+                <button class="md:hidden text-gray-700" onclick="toggleMobileMenu()">
                     <i class="fas fa-bars text-2xl"></i>
                 </button>
             </div>
+            <!-- Mobile Menu -->
+            <div id="mobile-menu" class="md:hidden hidden pb-4">
+                <button onclick="showPage('page1')" class="nav-link-mobile active block w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300 mb-1">
+                    <i class="fas fa-home mr-2"></i>Page 1
+                </button>
+                <button onclick="showPage('page2')" class="nav-link-mobile block w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300 mb-1">
+                    <i class="fas fa-file-alt mr-2"></i>Page 2
+                </button>
+                <button onclick="showPage('page3')" class="nav-link-mobile block w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
+                    <i class="fas fa-cog mr-2"></i>Page 3
+                </button>
             </div>
         </div>
     </nav>
     <!-- Page Content -->
+    <div class="container mx-auto px-4 py-8">
+        <!-- Page 1 -->
+        <div id="page1" class="page active">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="text-center mb-8">
+                    <h1 class="text-4xl font-bold text-blue-600 mb-4">Initial Page</h1>
+                    <p class="text-gray-600 max-w-2xl mx-auto">Welcome to the first page of our multi-page website. This demonstrates how to create a seamless navigation experience without full page reloads.</p>
                 </div>
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
                         <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">Smooth transitions between pages with JavaScript.</p>
                     </div>
+                    <div class="bg-green-50 p-6 rounded-lg border border-green-100">
                         <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-purple-50 p-6 rounded-lg border border-purple-100">
+                        <i class="fas fa-palette text-purple-500 text-3xl mb-4"></i>
                         <h3 class="text-xl font-semibold mb-2">Beautiful UI</h3>
+                        <p class="text-gray-600">Built with TailwindCSS for modern styling.</p>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Page 2 -->
+        <div id="page2" class="page">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="text-center mb-8">
+                    <h1 class="text-4xl font-bold text-green-600 mb-4">Second Page</h1>
+                    <p class="text-gray-600 max-w-2xl mx-auto">This is the second page with different content and styling. Notice how the navigation updates automatically.</p>
                 </div>
+                <div class="flex flex-col md:flex-row gap-6">
+                    <div class="md:w-1/2 bg-green-50 p-6 rounded-lg">
+                        <h3 class="text-2xl font-semibold mb-4 text-green-700">Features</h3>
+                        <ul class="space-y-3">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                <span>Interactive navigation</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                <span>Animated page transitions</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                <span>Mobile-friendly design</span>
+                            </li>
+                        </ul>
                     </div>
+                    <div class="md:w-1/2 bg-yellow-50 p-6 rounded-lg">
+                        <h3 class="text-2xl font-semibold mb-4 text-yellow-700">How It Works</h3>
+                        <p class="mb-4 text-gray-700">The JavaScript handles showing/hiding pages and updating the active navigation link when you switch between pages.</p>
+                        <button onclick="showPage('page3')" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg transition duration-300">
+                            <i class="fas fa-arrow-right mr-2"></i>Go to Page 3
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Page 3 -->
+        <div id="page3" class="page">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="text-center mb-8">
+                    <h1 class="text-4xl font-bold text-purple-600 mb-4">Third Page</h1>
+                    <p class="text-gray-600 max-w-2xl mx-auto">Final page with contact information and additional options.</p>
+                </div>
+                <div class="max-w-md mx-auto bg-purple-50 rounded-xl p-6">
+                    <h3 class="text-2xl font-semibold mb-4 text-center text-purple-700">Contact Us</h3>
+                    <form class="space-y-4">
                         <div>
+                            <label class="block text-gray-700 mb-1">Name</label>
+                            <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
                         </div>
                         <div>
+                            <label class="block text-gray-700 mb-1">Email</label>
+                            <input type="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
                         </div>
                         <div>
+                            <label class="block text-gray-700 mb-1">Message</label>
+                            <textarea rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
                         </div>
+                        <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition duration-300">
+                            <i class="fas fa-paper-plane mr-2"></i>Send Message
                         </button>
                     </form>
+                    <div class="mt-6 flex justify-center space-x-4">
+                        <button onclick="showPage('page1')" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">
+                            <i class="fas fa-arrow-left mr-2"></i>Back to Page 1
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
+    </div>
     <!-- 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">
+                    <div class="flex items-center">
+                        <i class="fas fa-globe text-blue-400 text-2xl mr-2"></i>
+                        <span class="text-xl font-bold">MultiPage</span>
+                    </div>
+                    <p class="text-gray-400 mt-2">A beautiful multi-page website example</p>
                 </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i class="fab fa-facebook-f text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i class="fab fa-twitter text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i class="fab fa-instagram text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
                 </div>
             </div>
             <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
+                <p>&copy; 2023 MultiPage Website. All rights reserved.</p>
             </div>
         </div>
     </footer>
     <script>
+        // Function to show a specific page and hide others
+        function showPage(pageId) {
+            // Hide all pages
+            document.querySelectorAll('.page').forEach(page => {
+                page.classList.remove('active');
             });
+            // Show the selected page
+            document.getElementById(pageId).classList.add('active');
+            // Update navigation active states
+            updateNavActiveState(pageId);
+            // Close mobile menu if open
+            document.getElementById('mobile-menu').classList.add('hidden');
+        }
+        // Function to update navigation active states
+        function updateNavActiveState(pageId) {
+            // Desktop nav
+            document.querySelectorAll('.nav-link').forEach(link => {
+                link.classList.remove('active');
             });
+            document.getElementById(`nav-${pageId}`).classList.add('active');
+            // Mobile nav
+            document.querySelectorAll('.nav-link-mobile').forEach(link => {
+                link.classList.remove('active');
+            });
+            document.querySelector(`.nav-link-mobile[onclick="showPage('${pageId}')"]`).classList.add('active');
+        }
+        // Function to toggle mobile menu
+        function toggleMobileMenu() {
+            document.getElementById('mobile-menu').classList.toggle('hidden');
+        }
+        // Initialize the page (show page1 by default)
+        document.addEventListener('DOMContentLoaded', function() {
             showPage('page1');
         });
     </script>
 </body>