Diseño del panel de control de criptomonedas de Cyberpunk
Un diseño de tablero receptivo con temática cyberpunk para aplicaciones de criptomonedas y blockchain, con acentos de neón, fondos oscuros y colores apagados. Incluye navegación en la barra lateral, un área de contenido principal y una barra superior.
Código 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>Componentes relacionados
Diseño de la cartera de neumorfismo
Un diseño de neumorfismo simple y receptivo para una cartera, compatible con el modo oscuro.
Componente de diseño de redes sociales
Un componente de diseño de redes sociales responsivo y complejo inspirado en 3D con colores vibrantes y soporte para temas oscuros utilizando Tailwind CSS. Incluye un encabezado con un logotipo y navegación, un área de contenido principal con tarjetas dinámicas para publicaciones y una barra lateral para perfiles de usuario y temas de tendencia. Cada elemento está diseñado para dar una sensación de profundidad e interacción.
Componente Componentes de diseño
Un componente de diseño de tablero receptivo con estilo Glassmorphism, combinación de colores vibrantes y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con una barra lateral y un área de contenido principal con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque.