Cyberpunk Crypto 대시보드 레이아웃
암호화폐 및 블록체인 애플리케이션을 위한 반응형 사이버펑크 테마의 대시보드 레이아웃으로, 네온 액센트, 어두운 배경 및 차분한 색상을 특징으로 합니다. 사이드바 탐색, 기본 콘텐츠 영역 및 상단 표시줄이 포함됩니다.
HTML 코드
<div class="min-h-screen bg-gray-950 text-gray-400 dark:bg-black dark:text-gray-500 overflow-hidden font-mono">
<!-- Top Bar -->
<header class="flex items-center justify-between px-6 py-4 bg-gray-900 border-b border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 relative z-20">
<div class="flex items-center">
<button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md lg:hidden" aria-label="Open sidebar menu">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<h1 class="ml-4 text-2xl font-bold text-purple-400 dark:text-purple-600 tracking-wider hidden sm:block">BLOCKCHAIN NEXUS</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search circuits..." class="bg-gray-800 text-purple-300 dark:bg-gray-800 dark:text-purple-500 border border-purple-700/50 dark:border-purple-900/50 rounded-md py-2 px-4 focus:outline-none focus:ring-1 focus:ring-purple-500/70 text-sm hidden md:block">
<svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-purple-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
</div>
<button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md hidden sm:block" aria-label="Notifications">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<div class="w-9 h-9 rounded-full bg-purple-700/50 dark:bg-purple-900/50 flex items-center justify-center overflow-hidden cursor-pointer" aria-label="User avatar">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
</div>
</div>
</header>
<div class="flex flex-col lg:flex-row relative z-10">
<!-- Sidebar -->
<aside class="fixed inset-y-0 left-0 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-gray-900 border-r border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 z-20 w-64 pt-20 lg:pt-0">
<nav class="mt-8 px-6 space-y-4">
<a href="#" class="flex items-center text-purple-400 dark:text-purple-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200 bg-purple-900/20 dark:bg-purple-950/20 border border-purple-700/30 dark:border-purple-900/30 shadow-neon-sm">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
Dashboard
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Wallets
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.0001 0 006.001 9.001H18L21 6m-3 0V4a2 2 0 00-2-2H6a2 2 0 00-2 2v2m10-2l2 2m-2-2l-2 2m0 0l-2 2m2-2h2M7 12h14m-7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
</svg>
Transactions
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3 3 7-7M3 12a9 9 0 1118 0 9 9 0 01-18 0z"></path>
</svg>
Staking
</a>
<a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
<svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
Settings
</a>
</nav>
</aside>
<!-- Main Content Area -->
<main class="flex-1 p-6 lg:ml-64 mt-16 lg:mt-0">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<!-- Card 1 -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 to-transparent group-hover:from-purple-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<h2 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-2">Current Balance</h2>
<p class="text-4xl font-bold text-green-400 dark:text-green-600 mb-4">₿ 3.250</p>
<p class="text-sm text-gray-500 dark:text-gray-700">+ $15,200.00 <span class="text-green-500">(+2.5%)</span></p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-800/10 to-transparent group-hover:from-blue-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<h2 class="text-xl font-semibold text-blue-300 dark:text-blue-500 mb-2">Open Positions</h2>
<p class="text-4xl font-bold text-orange-400 dark:text-orange-600 mb-4">5</p>
<p class="text-sm text-gray-500 dark:text-gray-700">Last 24h: <span class="text-red-500">-1</span></p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-red-800/10 to-transparent group-hover:from-red-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<h2 class="text-xl font-semibold text-red-300 dark:text-red-500 mb-2">Total Transactions</h2>
<p class="text-4xl font-bold text-yellow-400 dark:text-yellow-600 mb-4">1,287</p>
<p class="text-sm text-gray-500 dark:text-gray-700">Avg. value: $50.00</p>
</div>
</div>
</div>
<!-- Recent Activity Table -->
<div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6">
<h3 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-4">Recent Cyber-Activity Log</h3>
<div class="overflow-x-auto">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Type</th>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Amount</th>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Status</th>
<th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-300 dark:text-gray-500">BTC Transfer</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-green-400 dark:text-green-600">+ 0.05 BTC</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
<span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
<span class="relative text-green-500 dark:text-green-400">Completed</span>
</span>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 14:30</p>
</td>
</tr>
<tr>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-300 dark:text-gray-500">ETH Swap</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-orange-400 dark:text-orange-600">- 1.2 ETH</p>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<span class="relative inline-block px-3 py-1 font-semibold text-blue-900 leading-tight">
<span aria-hidden="true" class="absolute inset-0 bg-blue-200 dark:bg-blue-800 opacity-50 rounded-full"></span>
<span class="relative text-blue-500 dark:text-blue-400">Pending</span>
</span>
</td>
<td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
<p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 10:15</p>
</td>
</tr>
<tr>
<td class="px-5 py-4 border-b-0 text-sm">
<p class="text-gray-300 dark:text-gray-500">USDT Deposit</p>
</td>
<td class="px-5 py-4 border-b-0 text-sm">
<p class="text-green-400 dark:text-green-600">+ 500 USDT</p>
</td>
<td class="px-5 py-4 border-b-0 text-sm">
<span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
<span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
<span class="relative text-green-500 dark:text-green-400">Completed</span>
</span>
</td>
<td class="px-5 py-4 border-b-0 text-sm">
<p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-25 18:00</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<!-- Background Grid/Pattern for Cyberpunk feel -->
<div class="fixed inset-0 pointer-events-none z-0 opacity-10">
<div class="absolute inset-0 [background-image:linear-gradient(to_right,rgba(139,92,246,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(139,92,246,0.1)_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:linear-gradient(to_right,rgba(124,58,237,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(124,58,237,0.1)_1px,transparent_1px)]"></div>
</div>
</div>
<style>
/* Custom Shadow for Neon Effect */
.shadow-neon-md {
box-shadow: 0 0px 10px rgba(139, 92, 246, 0.4), 0 0px 20px rgba(139, 92, 246, 0.2), inset 0 0 5px rgba(139, 92, 246, 0.2);
}
.dark .shadow-neon-md {
box-shadow: 0 0px 10px rgba(124, 58, 237, 0.4), 0 0px 20px rgba(124, 58, 237, 0.2), inset 0 0 5px rgba(124, 58, 237, 0.2);
}
.shadow-neon-sm {
box-shadow: 0 0px 5px rgba(139, 92, 246, 0.3), inset 0 0 3px rgba(139, 92, 246, 0.15);
}
.dark .shadow-neon-sm {
box-shadow: 0 0px 5px rgba(124, 58, 237, 0.3), inset 0 0 3px rgba(124, 58, 237, 0.15);
}
/* Prevent scroll when sidebar is open on small screens */
@media (max-width: 1023px) {
body:has(.sidebar-open) {
overflow: hidden;
}
}
/* Simple JS for sidebar toggle (optional, for demonstration) */
/* Remove if using a JS framework or pure HTML with :target etc. */
document.addEventListener('DOMContentLoaded', () => {
const sidebarButton = document.querySelector('header button');
const sidebar = document.querySelector('aside');
sidebarButton.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
document.body.classList.toggle('sidebar-open');
});
// Close sidebar when clicking outside (on overlay) - requires an overlay div
// Or just clicking anywhere outside for simplicity
document.addEventListener('click', (event) => {
if (!sidebar.contains(event.target) && !sidebarButton.contains(event.target) && !sidebar.classList.contains('-translate-x-full')) {
sidebar.classList.add('-translate-x-full');
document.body.classList.remove('sidebar-open');
}
});
});
</style>관련 구성 요소
사이버펑크 뮤직 플레이어 레이아웃
사이버펑크 테마의 뮤직 플레이어 레이아웃은 미래지향적인 네온 미학, 어두운 배경, 생생한 악센트 색상을 특징으로 하며, 반응성과 다크 모드 지원을 위해 설계되었습니다.
Food Delivery Dashboard Layout 구성 요소
어두운 UI와 사탕/달콤한 색 구성표가 있는 복잡하고 반응이 빠른 음식 배달 대시보드 레이아웃으로, 음식/레스토랑 애플리케이션을 위한 사이드바, 헤더, 기본 콘텐츠 영역 및 여러 대화형 요소를 제공합니다. 다크 모드 지원이 포함됩니다.