Artsy_Neon_Crypto_Navbar
Une barre de navigation complexe et réactive pour les applications de crypto-monnaie/blockchain avec un design artistique inspiré de l’aquarelle et une palette de couleurs vives et néon. Comprend la prise en charge du mode sombre et des éléments interactifs.
HTML Code
<header class="w-full bg-gradient-to-br from-purple-900 via-pink-800 to-indigo-900 bg-[length:200%_200%] animate-gradient-xy shadow-xl dark:from-gray-950 dark:via-gray-800 dark:to-black transition-colors duration-500">
<div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
<!-- Logo/Brand Name -->
<a href="#" class="flex items-center space-x-2">
<svg class="w-8 h-8 md:w-10 md:h-10 text-lime-400 drop-shadow-[0_0_8px_rgba(163,230,53,0.7)] transform transition-transform duration-300 hover:scale-110" 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="M9.75 17L9 20l-1 1h8l-1-1-1.75-3M3 13l3-3m0 0l3-3m-3 3h12m0 0l3 3m0-3l-3-3m-8.5 6h.5a2 2 0 012 2v2a2 2 0 01-2 2h-.5a2 2 0 01-2-2v-2a2 2 0 012-2zM9 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
<span class="text-3xl md:text-4xl font-extrabold text-white tracking-wider drop-shadow-md text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-cyan-400 dark:from-yellow-300 dark:to-purple-300 transition-colors duration-500">QuantumLedger</span>
</a>
<!-- Desktop Navigation -->
<nav class="hidden lg:flex space-x-8 xl:space-x-12 items-center">
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Dashboard</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Transactions</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Portfolio</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<div class="relative group">
<button class="text-lg font-semibold text-white px-3 py-2 rounded-lg flex items-center space-x-1 relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Tools</span>
<svg class="w-4 h-4 ml-1 text-white group-hover:text-cyan-300 transition-colors 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 inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</button>
<div class="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 mt-3 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 min-w-[160px]">
<a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
<a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
<a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
</div>
</div>
<a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
<span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Support</span>
<span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</nav>
<!-- User Controls & Mobile Toggle -->
<div class="flex items-center space-x-4 md:space-x-6">
<button aria-label="search" class="text-white hover:text-cyan-400 transition-colors duration-200 hidden md:block">
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
<button aria-label="Toggle Dark Mode" class="focus:outline-none text-white hover:text-cyan-400 dark:hover:text-yellow-300 transition-colors duration-300" onclick="document.documentElement.classList.toggle('dark')">
<svg class="w-6 h-6 hidden dark:block" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-7.39l.71-.71m-1.42 1.42l-.71-.71M19.004 4.39l.71.71m-1.42-1.42l-.71.71M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
<svg class="w-6 h-6 dark:hidden" 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="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>
</button>
<button aria-label="user profile" class="hidden sm:inline-flex items-center space-x-2 bg-gradient-to-r from-lime-500 to-pink-500 hover:from-lime-400 hover:to-pink-400 dark:from-yellow-400 dark:to-purple-500 dark:hover:from-yellow-300 dark:hover:to-purple-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-white/50 shadow-md">
<span class="hidden md:block">John Doe</span>
</button>
<!-- Mobile Toggle Button -->
<button id="mobile-menu-button" class="lg:hidden focus:outline-none text-white hover:text-cyan-400 dark:hover:text-fuchsia-300 transition-colors duration-300 z-20" aria-label="Open mobile menu">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path id="menu-icon-open" class="block" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path id="menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu Overlay -->
<div id="mobile-menu" class="hidden lg:hidden fixed inset-0 bg-gradient-to-br from-purple-900/95 via-pink-800/95 to-indigo-900/95 dark:from-gray-950/95 dark:via-gray-800/95 dark:to-black/95 z-40 flex flex-col items-center justify-center space-y-8 animate-fade-in-down transition-opacity duration-300 pointer-events-none opacity-0">
<nav class="flex flex-col space-y-6 text-center">
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Dashboard</a>
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Transactions</a>
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Portfolio</a>
<div class="relative group">
<button class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105 flex items-center justify-center">
Tools
<svg class="w-6 h-6 ml-2 text-white" 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>
</button>
<div class="mt-4 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 w-48 mx-auto hidden group-hover:block transition-all duration-300">
<a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
<a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
<a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
</div>
</div>
<a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Support</a>
</nav>
<button aria-label="search" class="mt-8 text-white hover:text-cyan-400 transition-colors duration-200">
<svg class="w-10 h-10" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</div>
</header>
<!-- Just for demonstration of responsiveness and dark mode -->
<main class="min-h-screen bg-gray-100 dark:bg-gray-800 p-8 transition-colors duration-500 flex flex-col justify-center items-center text-center">
<h1 class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-lime-400 dark:to-cyan-400 mb-6">Welcome to QuantumLedger</h1>
<p class="text-xl text-gray-700 dark:text-gray-300 max-w-xl">Explore the future of decentralized finance with our intuitive and secure platform.</p>
</main>
<style>
/* This is for the custom gradient animation */
@keyframes gradient-xy {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
/* This is for potential mobile menu animation */
@keyframes fade-in-down {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-gradient-xy {
animation: gradient-xy 15s ease infinite;
}
.text-shadow-neon {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px var(--tw-neon-color, rgba(0, 255, 255, 0.5)), 0 0 15px var(--tw-neon-color, rgba(0, 255, 255, 0.3));
--tw-neon-color: theme('colors.cyan.400'); /* Default neon color */
}
.dark .text-shadow-neon {
--tw-neon-color: theme('colors.fuchsia.300'); /* Dark mode neon color */
}
.animate-fade-in-down {
animation: fade-in-down 0.3s ease-out forwards;
}
</style>
<script>
// Basic JavaScript to toggle mobile menu visibility
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
const openIcon = document.getElementById('menu-icon-open');
const closeIcon = document.getElementById('menu-icon-close');
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
mobileMenu.classList.add('opacity-100', 'pointer-events-auto');
openIcon.classList.add('hidden');
closeIcon.classList.remove('hidden');
} else {
mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
mobileMenu.classList.add('opacity-0', 'pointer-events-none');
// Add a small delay before hiding to allow fade-out animation
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
openIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
}
});
// Close mobile menu when a link is clicked
document.querySelectorAll('#mobile-menu a').forEach(item => {
item.addEventListener('click', () => {
const mobileMenu = document.getElementById('mobile-menu');
const openIcon = document.getElementById('menu-icon-open');
const closeIcon = document.getElementById('menu-icon-close');
mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
mobileMenu.classList.add('opacity-0', 'pointer-events-none');
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
openIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
});
});
</script>Composants associés
Cyberpunk_Finance_Navbar
Une barre de navigation simple et réactive sur le thème du cyberpunk pour les applications financières/bancaires, avec un arrière-plan sombre, des accents dégradés lumineux et la prise en charge du mode sombre.
Barre de navigation du portefeuille
Une barre de navigation réactive avec prise en charge du thème sombre, conçue pour un site Web de portfolio utilisant les principes de conception matérielle et la palette de couleurs des tons de terre. Il comprend un logo de marque, des liens de navigation et un bouton d’appel à l’action. Le design est modérément complexe et s’adapte aux différentes tailles d’écran.
Composant de la barre de navigation
Composant simple de barre de navigation réactive conçu pour un tableau de bord, doté d’un schéma de couleurs monochromatiques et de micro-interactions. Il comprend un support en mode sombre avec des effets de survol pour des animations engageantes.