Cyberpunk Crypto Dashboard Layout
Un layout di dashboard reattivo a tema cyberpunk per applicazioni di criptovaluta e blockchain, con accenti al neon, sfondi scuri e colori tenui. Include la navigazione nella barra laterale, un'area di contenuto principale e una barra superiore.
Codice 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>Componenti correlati
Layout e-commerce con progettazione 3D
Un layout di componenti web reattivo per l'e-commerce con elementi di progettazione 3D, che incorpora una combinazione di colori complementari e il supporto del tema scuro. È dotato di schede prodotto, una barra di navigazione e un piè di pagina, tutti in stile Tailwind CSS.
Layout del cruscotto di Glassmorphism
Un complesso componente di layout del cruscotto con vetromorfismo triadico con una barra laterale, un'area di contenuto principale e più pannelli traslucidi, completamente reattivo e con supporto per la modalità oscura. Progettato per la visualizzazione dei dati e i pannelli di controllo.
Componente Componenti di layout
Un componente di layout reattivo che mostra le microinterazioni attraverso animazioni coinvolgenti che rispondono alle azioni dell'utente, con supporto per la modalità oscura e l'utilizzo di Tailwind CSS.