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>관련 구성 요소
Layout Components 컴포넌트
스큐어모픽 스타일로 디자인된 반응형 웹 구성 요소로, 비즈니스/기업 웹 사이트를 위한 단색 색 구성표를 특징으로 합니다. 풍부한 인터페이스를 위한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.
Glassmorphism 대시보드 레이아웃
사이드바, 기본 콘텐츠 영역, 여러 반투명 패널이 있는 복잡한 트라이어딕 색상의 glassmorphism 대시보드 레이아웃 구성 요소로, 완벽하게 반응하고 다크 모드를 지원합니다. 데이터 시각화 및 제어판을 위해 설계되었습니다.
Layout Components 컴포넌트
브루탈리즘(Brutalism)에서 영감을 받은 레이아웃 구성 요소로, 파스텔 톤의 색 구성표와 적당한 복잡성으로 콘텐츠 소비를 위한 것으로, 반응형 디자인과 다크 모드를 지원합니다.