장난기 넘치는 회색조 Crypto Navigation 구성 요소
암호화폐 및 블록체인 애플리케이션을 위한 재미있고 친근한 그레이스케일 탐색 구성 요소로, 둥근 요소, 대화형 상태, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.
HTML 코드
<nav class="bg-gray-100 dark:bg-gray-900 shadow-md rounded-b-3xl p-4 md:p-6 lg:p-8 font-sans transition-colors duration-300">
<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-gray-800 dark:text-gray-200 text-3xl font-extrabold flex items-center group">
<svg class="w-9 h-9 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-200 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="M9 8h6m-5 0v3m-2.83 5.46a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27m7.53 1.05a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27"></path>
</svg>
CoinWave
</a>
<button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 rounded-full p-2 ml-4">
<svg class="w-8 h-8 text-gray-600 dark:text-gray-400 transition-transform 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>
<div id="navbar-menu" class="hidden md:flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Dashboard</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Markets</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Wallet</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Trade</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Academy</a>
<div class="flex items-center space-x-4 mt-4 md:mt-0">
<button class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
<svg class="w-7 h-7" 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>
</button>
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer">
<button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
<svg class="w-7 h-7 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-8.226l-.707-.707m-4.004 4.004l-.707-.707m11.313 11.313l-.707-.707m-4.004-4.004l-.707-.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<svg class="w-7 h-7 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>
</div>
</div>
</div>
</nav>
<script>
// Basic JavaScript for toggle functionality (not part of the HTML component, but for interactivity demonstration)
const navbarToggle = document.getElementById('navbar-toggle');
const navbarMenu = document.getElementById('navbar-menu');
const themeToggle = document.getElementById('theme-toggle');
navbarToggle.addEventListener('click', () => {
navbarMenu.classList.toggle('hidden');
navbarMenu.classList.toggle('flex');
navbarMenu.classList.toggle('flex-col');
});
// Dark mode functionality
function setTheme(theme) {
localStorage.setItem('theme', theme);
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// On page load or when dark mode is changed
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
setTheme(storedTheme);
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
setTheme('dark');
} else {
setTheme('light');
}
themeToggle.addEventListener('click', () => {
const currentTheme = localStorage.getItem('theme');
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
});
</script>