Composants Composants de mise en page Mise en page du tableau de bord Cyberpunk Crypto

Mise en page du tableau de bord Cyberpunk Crypto

Une disposition de tableau de bord réactive sur le thème du cyberpunk pour les applications de crypto-monnaie et de blockchain, avec des accents néon, des arrière-plans sombres et des couleurs sourdes. Comprend la navigation dans la barre latérale, une zone de contenu principale et une barre supérieure.

Aperçu

HTML Code

<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>

Composants associés

Composant de mise en page en mode sombre

Un composant de mise en page réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend un en-tête, une zone de contenu et un pied de page simples. Le mode sombre est géré par le préfixe 'dark :' dans les classes Tailwind.

Ouvrir

Composant de mise en page du commerce électronique

Un composant de mise en page e-commerce simple et réactif avec une esthétique Material Design en niveaux de gris, avec une grille de produits, un en-tête et un pied de page, le tout avec prise en charge du mode sombre. Utilise picsum.photos pour les images de produits.

Ouvrir

Composant Composants de mise en page

Un composant de mise en page inspiré du brutalisme pour la consommation de contenu avec une palette de couleurs pastel et une complexité modérée, avec un design réactif et une prise en charge du mode sombre.

Ouvrir