RetroDashboardComponent
Composant de tableau de bord rétro/vintage avec prise en charge du schéma en niveaux de gris et du mode sombre. Ce composant complexe comporte plusieurs éléments interactifs, un design réactif et utilise Tailwind CSS pour le style. Il convient pour un tableau de bord ou un panneau de contrôle.
HTML Code
<div class="min-h-screen bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8 font-mono">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-bold mb-8 text-center uppercase tracking-widest">
<span class="text-gray-600 dark:text-gray-400">RetroDASH</span>
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
<!-- Card 1: Sales Overview -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Sales Overview</h2>
<div class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">$12,450</div>
<p class="text-sm text-gray-500 dark:text-gray-400">Total Sales This Month</p>
<div class="h-24 bg-gray-100 dark:bg-gray-700 rounded mt-4"></div>
</div>
<!-- Card 2: User Activity -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">User Activity</h2>
<div class="flex items-center justify-between mb-2">
<span class="text-3xl font-extrabold text-green-600 dark:text-green-400">2,345</span>
<span class="text-sm text-gray-500 dark:text-gray-400">Active Users</span>
</div>
<ul class="space-y-2 mt-4">
<li class="flex items-center text-gray-700 dark:text-gray-300">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>John Doe logged in</span>
</li>
<li class="flex items-center text-gray-700 dark:text-gray-300">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Jane Smith viewed report</span>
</li>
</ul>
</div>
<!-- Card 3: Traffic Sources -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Traffic Sources</h2>
<ul class="space-y-2 text-gray-700 dark:text-gray-300">
<li class="flex justify-between items-center">
<span>Direct</span>
<span class="font-bold">40%</span>
</li>
<li class="flex justify-between items-center">
<span>Referral</span>
<span class="font-bold">30%</span>
</li>
<li class="flex justify-between items-center">
<span>Organic Search</span>
<span class="font-bold">20%</span>
</li>
<li class="flex justify-between items-center">
<span>Social Media</span>
<span class="font-bold">10%</span>
</li>
</ul>
</div>
</div>
<!-- Main Data Visualization Area -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-4 text-gray-700 dark:text-gray-300">Revenue Trends</h2>
<div class="h-64 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-400">
<p class="text-lg">Graph/Chart Placeholder</p>
</div>
</div>
<!-- Tabbed Interface -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<div class="border-b border-gray-300 dark:border-gray-600 mb-4">
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
Overview
</button>
<button class="whitespace-nowrap py-4 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 dark:text-blue-400 focus:outline-none">
Analytics
</button>
<button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
Settings
</button>
</nav>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p>Detailed analytics content goes here. This is a placeholder for a complex data table or more interactive charts.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
<h3 class="font-bold mb-2">Detailed Metric 1</h3>
<p>Value: <span class="font-semibold">1,234</span></p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
<h3 class="font-bold mb-2">Detailed Metric 2</h3>
<p>Value: <span class="font-semibold">56.78%</span></p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Social_Connection_Chart_Component
Un composant de graphique de connexion sociale de complexité modérée avec un design organique inspiré de la nature, avec du noir, du blanc et une seule couleur d’accent vive. Conçu pour les plateformes de rencontres et les plateformes sociales, il met en valeur les connexions visuellement avec des lignes fluides et des avatars d’utilisateurs. Entièrement réactif avec prise en charge du mode sombre.
Composants de visualisation de données
Un composant de visualisation de données réactif conçu avec les principes de Material Design tels que les mises en page basées sur une grille et les effets de profondeur, avec prise en charge des thèmes sombres.
Composant Composants de visualisation de données
Il s’agit d’un composant de réservation/réservation complexe et minimaliste avec une palette de couleurs néon/électrique, avec des éléments de visualisation de données tels qu’un calendrier et un sélecteur de créneaux horaires. Entièrement réactif avec prise en charge du mode sombre.