RétroTableau de bordNavigation
Un composant de navigation de tableau de bord complexe, à thème rétro, avec une palette de couleurs triadique, conçu pour la visualisation de données et les panneaux de contrôle. Dispose d’un design réactif, d’une prise en charge du mode sombre et de plusieurs éléments interactifs inspirés de l’esthétique des années 80/90.
HTML Code
<header class="bg-[#FDB515] p-4 text-[#006400] dark:bg-[#00008B] dark:text-[#FDB515] shadow-lg font-mono tracking-widest relative z-50">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
<a href="#" class="text-2xl font-bold uppercase flex items-center group">
<span class="text-4xl leading-none mr-2 transform group-hover:scale-110 transition-transform duration-300">▲</span>
<span class="block relative group-hover:text-[#FFB5E8] transition-colors duration-300">
Synth<span class="text-[#006400] dark:text-[#FFB5E8]">Net</span>
<span class="absolute top-0 left-0 w-full h-full text-stroke-thin text-[#FFB5E8] opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="-webkit-text-stroke: 1px currentColor;">SynthNet</span>
</span>
</a>
<button id="mobile-menu-button" class="md:hidden focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
<svg class="w-8 h-8 text-[#006400] dark:text-[#FFB5E8] transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<nav id="main-navigation" class="hidden md:flex flex-col md:flex-row items-center md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out md:block">
<a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
Dashboard
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</a>
<a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
Analytics
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</a>
<a href="#" class="nav-item text-lg relative group overflow-hidden py-2 md:py-0 w-full text-center md:w-auto">
Reports
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</a>
<div class="relative group py-2 md:py-0 w-full text-center md:w-auto">
<button class="nav-item text-lg flex items-center justify-center w-full md:w-auto relative focus:outline-none focus:ring-4 focus:ring-[#006400] dark:focus:ring-[#FFB5E8] rounded-md transition-all duration-200">
Settings
<svg class="w-5 h-5 ml-1 transition-transform group-hover:rotate-90 duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-[#FFB5E8] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
<span class="absolute top-0 right-0 h-full w-0.5 bg-[#FFB5E8] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
</button>
<div class="dropdown-menu absolute hidden top-full left-1/2 -translate-x-1/2 mt-2 w-48 bg-[#FDB515] dark:bg-[#00008B] dark:text-[#FFB5E8] border border-[#006400] dark:border-[#FFB5E8] shadow-lg rounded-md overflow-hidden animate-slide-down-fade origin-top-left group-hover:block transition-all duration-300 ease-in-out md:min-w-max">
<a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">User Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">System Prefs</a>
<hr class="border-[#006400] dark:border-[#FFB5E8] opacity-50">
<a href="#" class="block px-4 py-2 text-sm hover:bg-[#FFB5E8] hover:text-[#006400] dark:hover:bg-[#FFB5E8] dark:hover:text-[#00008B] transition-colors duration-200">Logout</a>
</div>
</div>
</nav>
<div class="flex items-center space-x-4 ml-0 md:ml-auto mt-4 md:mt-0 w-full md:w-auto justify-center md:justify-end">
<div class="relative group">
<button class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full text-xs text-white flex items-center justify-center -mt-1 -mr-1 border border-[#FDB515] dark:border-[#00008B] animate-pulse">2</span>
</button>
<span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Notifications</span>
</div>
<div class="relative group">
<img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#006400] dark:border-[#FFB5E8] cursor-pointer hover:border-[#FFB5E8] dark:hover:border-[#006400] transition-colors duration-200 shadow-md hover:scale-105 duration-200" />
<span class="tooltip-message absolute hidden group-hover:block bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black text-white text-xs rounded shadow-lg whitespace-nowrap animate-fade-in-up transition-opacity duration-200">Profile</span>
</div>
<button id="dark-mode-toggle" class="p-2 rounded-full bg-[#006400] text-[#FDB515] dark:bg-[#FFB5E8] dark:text-[#00008B] shadow-md hover:scale-105 duration-200 focus:outline-none focus:ring-4 focus:ring-[#FFB5E8] dark:focus:ring-[#006400] flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="sun-icon" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.675l-.707-.707M6.381 6.381l-.707-.707m11.314 11.314l-.707.707m-9.192 0l-.707.707M12 7a5 5 0 100 10 5 5 0 000-10z"></path>
<path class="moon-icon hidden" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
</div>
</div>
</header>
<style>
@keyframes slide-down-fade {
from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
to { opacity: 1; transform: translateY(0) translateX(-50%); }
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(10px) translateX(-50%); }
to { opacity: 1; transform: translateY(0) translateX(-50%); }
}
.animate-slide-down-fade {
animation: slide-down-fade 0.3s ease-out forwards;
}
.animate-fade-in-up {
animation: fade-in-up 0.2s ease-out forwards;
}
/* Retro text stroke effect for branding */
.text-stroke-thin {
-webkit-text-stroke: 0.5px currentColor;
text-stroke: 0.5px currentColor;
}
/* Mobile menu responsiveness (JS controlled visibility) */
@media (max-width: 767px) {
.nav-item {
/* Ensures full width clickable area on mobile */
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
margin-bottom: 0.5rem; /* spacing between items */
background-color: rgba(255, 255, 255, 0.1); /* light background for mobile items */
border-radius: 0.25rem;
}
.dark .nav-item {
background-color: rgba(0, 0, 0, 0.1);
}
.nav-item:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.dark .nav-item:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.dropdown-menu {
position: static !important; /* override absolute positioning */
transform: none !important; /* override transform */
width: 100% !important; /* full width */
margin-top: 0 !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
}
.dropdown-menu a {
padding-left: 2.5rem; /* indent dropdown items */
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mainNavigation = document.getElementById('main-navigation');
const darkModeToggle = document.getElementById('dark-mode-toggle');
const sunIcon = darkModeToggle.querySelector('.sun-icon');
const moonIcon = darkModeToggle.querySelector('.moon-icon');
// Mobile menu toggle
mobileMenuButton.addEventListener('click', () => {
mainNavigation.classList.toggle('hidden');
mainNavigation.classList.toggle('flex');
if (mainNavigation.classList.contains('flex')) {
mainNavigation.style.flexDirection = 'column'; // Ensure vertical stacking on mobile
}
});
// Dark mode toggle
const enableDarkMode = () => {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
};
const disableDarkMode = () => {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
};
// Initial theme setup
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
enableDarkMode();
} else {
disableDarkMode();
}
darkModeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
disableDarkMode();
} else {
enableDarkMode();
}
});
});
</script>Composants associés
Barre de navigation rétro E-commerce
Un composant de navigation en niveaux de gris de style rétro/vintage pour le commerce électronique, présentant une complexité modérée avec des éléments interactifs tels que des survols et des listes déroulantes. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Composants de navigation
Il s’agit d’un composant de navigation complexe et réactif pour les tableaux de bord, doté de micro-interactions et d’un schéma de couleurs analogue, avec prise en charge du mode sombre. Utilise Tailwind CSS pour le style et inclut des éléments interactifs sans dépendre de JavaScript.
Cyberpunk Météo Navigation
Un composant de navigation simple et réactif sur le thème du cyberpunk pour une application météo, avec des couleurs sourdes et des accents néon, avec prise en charge du mode sombre.