Enhanced Footer Navigation - Copy this Html, Tailwind Component to your project
mejora esta interfaz <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enhanced Footer Design</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <style> :root { --transition-duration: 0.1s; } /* Aplicar transiciones sincronizadas */ * { transition: background-color 0.3s ease-in-out, color 0s ease-in-out; } body.light { background-color: rgb(241, 239, 239); color: black; } body.dark { background-color: #1a202c; color: white; } header { background-color: white; } header.dark { background-color: #0d1016; } .floating-footer { background-color: white; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); border-radius: 15px; width: calc(100% - 30px); max-width: 600px; z-index: 20; } .dark .floating-footer { background-color: #0d1016; color: white; } .card { background-color: white; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .dark .card { background-color: #2d3748; color: white; } /* Estilo para los íconos del footer */ footer .grid button i { color: gray; /* Color inicial */ transition: color 0.3s ease-in-out; /* Transición suave */ } /* Efecto hover */ footer .grid button:hover i { color: #3b82f6; /* Cambia a azul al pasar el mouse */ } /* Efecto activo */ footer .grid button.active i { color: #3b82f6; /* Azul cuando está activo */ } </style> </head> <body class="min-h-screen flex flex-col light" id="body"> <header class="flex justify-between items-center p-2 shadow-md text-sm bg-light dark:bg-dark" id="header"> <h1 class="text-lg font-semibold">Acrobata Demente</h1> <button onclick="toggleTheme()" class="p-1 rounded text-light dark:text-dark transition-colors"> 🌙 </button> </header> <main class="flex-grow"> <div class="container mx-auto p-4" id="mainContent"> <h1 class="text-2xl font-bold mb-2">Main Content Area</h1> <p class="text-gray-600">Select a category from the footer to view content</p> </div> </main> <aside id="sidebar" class="fixed right-0 top-0 h-full w-64 bg-light dark:bg-dark transform translate-x-full transition-transform ease-in-out shadow-lg z-10"> <div class="p-4"> <button onclick="toggleSidebar()" class="absolute top-4 right-4 text-light dark:text-dark hover:text-gray-700 dark:hover:text-gray-200"> <i class="fas fa-times text-xl"></i> </button> <h2 class="text-xl font-bold mb-2" id="sidebarTitle">Categories</h2> <input type="text" id="searchInput" oninput="filterCategories()" placeholder="Search..." class="w-full p-2 mb-4 rounded-lg border bg-light dark:bg-dark text-light dark:text-dark"> <div id="sidebarContent" class="space-y-2"> <!-- Sidebar content will be dynamically updated --> </div> </div> </aside> <footer class="floating-footer bg-light dark:bg-dark py-2 px-4 shadow-lg text-sm"> <div class="container mx-auto"> <!-- Migas de pan --> <nav aria-label="breadcrumb" class="mb-2"> <ol id="breadcrumb" class="breadcrumb flex space-x-1 text-xs text-gray-500 dark:text-gray-400"> <li><a href="#" onclick="navigateToSection('home')" class="hover:text-blue-500">Inicio</a></li> <li><span>/</span></li> <li id="breadcrumbCurrent"><span class="text-blue-500">Actual</span></li> </ol> </nav> <!-- Fin de migas de pan --> <div class="grid grid-cols-3 gap-1"> <button onclick="setActiveButton(this); showCategory('training')" class="flex flex-col items-center justify-center p-1" aria-label="Training Category"> <i class="fas fa-dumbbell text-lg mb-1"></i> <span class="text-xs font-medium text-light dark:text-dark">Entrenamiento</span> </button> <button onclick="setActiveButton(this); showCategory('nutrition')" class="flex flex-col items-center justify-center p-1" aria-label="Nutrition Category"> <i class="fas fa-apple-alt text-lg mb-1"></i> <span class="text-xs font-medium text-light dark:text-dark">Nutrición</span> </button> <button onclick="setActiveButton(this); showCategory('store')" class="flex flex-col items-center justify-center p-1" aria-label="Store Category"> <i class="fas fa-store text-lg mb-1"></i> <span class="text-xs font-medium text-light dark:text-dark">Tienda</span> </button> </div> </div> </footer> <script> document.addEventListener('DOMContentLoaded', () => { // Configurar el tema almacenado en localStorage const savedTheme = localStorage.getItem('theme') || 'light'; const body = document.getElementById('body'); const header = document.getElementById('header'); const themeToggleButton = document.querySelector('header button'); if (savedTheme === 'dark') { body.classList.add('dark'); body.classList.remove('light'); header.classList.add('dark'); header.classList.remove('light'); themeToggleButton.textContent = '☀️'; } else { body.classList.add('light'); body.classList.remove('dark'); header.classList.add('light'); header.classList.remove('dark'); themeToggleButton.textContent = '🌙'; } // Mostrar la categoría 'store' por defecto showCategory('store'); // Marcar el botón de la categoría 'store' como activo const storeButton = document.querySelector("button[onclick*=\"showCategory('store')\"]"); if (storeButton) { setActiveButton(storeButton); } }); const categories = { store: { productos: [ 'Trampolines', 'Resortes', 'Colchonetas', 'Redes', 'Cinturones', 'Nylon', 'otros', ], carrito: ['Mi carrito'], favoritos: ['Mis deseos'], orders: ['Historial de órdenes'] }, training: { workouts: ['Cardio', 'Pesas', 'HIIT'], programs: ['Programa 1', 'Programa 2'], coaches: ['Entrenador A', 'Entrenador B'], schedule: ['Lunes', 'Miércoles'] }, nutrition: { mealPlans: ['Plan Vegetariano', 'Plan Keto'], recipes: ['Receta 1', 'Receta 2'], supplements: ['Proteína', 'Vitaminas'], tracking: ['Calorías', 'Macros'] } }; // Mostrar la categoría seleccionada function showCategory(category) { const mainContent = document.getElementById('mainContent'); mainContent.innerHTML = ` <h1 class="text-2xl font-bold mb-4">${category.charAt(0).toUpperCase() + category.slice(1)}</h1> <div class="grid grid-cols-2 md:grid-cols-2 gap-4 auto-rows-auto "> ${Object.entries(categories[category]).map(([subCategory, items]) => ` <div class="card"> <h2 class="text-xl font-semibold mb-2">${subCategory.charAt(0).toUpperCase() + subCategory.slice(1)}</h2> <ul class="space-y-1"> ${items.map(item => `<li><button class="text-blue-500 hover:underline">${item}</button></li>`).join('')} </ul> </div> `).join('')} </div> `; updateBreadcrumb(category); } // Función para establecer un botón como activo function setActiveButton(button) { // Remover la clase 'active' de todos los botones document.querySelectorAll('footer .grid button').forEach(btn => { btn.classList.remove('active'); }); // Agregar la clase 'active' al botón seleccionado button.classList.add('active'); } // Alternar tema claro/oscuro function toggleTheme() { const body = document.getElementById('body'); const header = document.getElementById('header'); // Obtener el header const themeToggleButton = document.querySelector('header button'); // Obtener el botón del tema // Cambiar el tema en el body y el header body.classList.toggle('dark'); body.classList.toggle('light'); header.classList.toggle('dark'); header.classList.toggle('light'); // Cambiar el ícono del botón const isDark = body.classList.contains('dark'); themeToggleButton.textContent = isDark ? '☀️' : '🌙'; // Guardar el tema en localStorage localStorage.setItem('theme', isDark ? 'dark' : 'light'); } // Actualizar las migas de pan function updateBreadcrumb(currentSection) { const breadcrumb = document.getElementById('breadcrumb'); const sections = { home: 'Inicio', categories: 'Categorías', store: 'Tienda', training: 'Entrenamiento', nutrition: 'Nutrición' }; breadcrumb.innerHTML = ` <li><a href="#" onclick="navigateToSection('home')" class="hover:text-blue-500">Inicio</a></li> ${currentSection !== 'home' ? `<li><span>/</span></li><li><a href="#" onclick="navigateToSection('categories')" class="hover:text-blue-500">Categorías</a></li>` : ''} ${currentSection !== 'home' && currentSection !== 'categories' ? `<li><span>/</span></li><li id="breadcrumbCurrent"><span class="text-blue-500">${sections[currentSection]}</span></li>` : ''} `; } // Navegar a una sección específica function navigateToSection(section) { if (section === 'home') { document.getElementById('mainContent').innerHTML = ` <h1 class="text-2xl font-bold mb-2">Main Content Area</h1> <p class="text-gray-600">Select a category from the footer to view content</p> `; } else if (section === 'categories') { document.getElementById('mainContent').innerHTML = ` <h1 class="text-2xl font-bold mb-2">Categories</h1> <p class="text-gray-600">Select a category from the footer to view content</p> `; } else { showCategory(section); } updateBreadcrumb(section); } </script> </body> </html>