레트로대시보드내비게이션
복잡한 복고풍 테마의 대시보드 탐색 구성 요소로, 데이터 시각화 및 제어판을 위해 설계된 트라이어딕 색 구성표가 있습니다. 반응형 디자인, 다크 모드 지원, 80년대/90년대 미학에서 영감을 받은 다양한 인터랙티브 요소가 특징입니다.
HTML 코드
<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>