Composant Cyberpunk Chart - Gouvernement/Public
Un composant graphique modérément complexe avec une esthétique cyberpunk, adapté aux sites Web gouvernementaux et de services publics. Dispose d’un fond sombre, d’accents néons lumineux et d’une palette de couleurs rétro/vintage. Réactif et inclut la prise en charge du mode sombre.
HTML Code
<div class="font-mono text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
<div class="max-w-6xl mx-auto bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black rounded-lg shadow-xl overflow-hidden border-2 border-purple-700 dark:border-teal-400 transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
<div class="p-6 sm:p-8 lg:p-10 border-b-2 border-purple-600 dark:border-teal-500 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-300 tracking-wider mb-2 drop-shadow-[0_0_5px_rgba(252,211,77,0.7)] dark:text-teal-400 dark:drop-shadow-[0_0_5px_rgba(45,212,191,0.7)]">Public Service Metrics</h2>
<p class="text-purple-300 dark:text-gray-400 text-sm sm:text-base">Real-time data visualization for key public indicators.</p>
</div>
<div class="mt-4 sm:mt-0 flex gap-2">
<button class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white dark:bg-teal-600 dark:hover:bg-teal-700 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105 shadow-md border-2 border-purple-400 dark:border-teal-500">View Details</button>
<button class="px-4 py-2 bg-transparent border-2 border-yellow-300 text-yellow-300 hover:bg-yellow-300 hover:text-purple-900 dark:border-teal-400 dark:text-teal-400 dark:hover:bg-teal-400 dark:hover:text-gray-900 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105">Export Data</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8 lg:p-10">
<!-- Chart 1: Bar Chart Placeholder -->
<div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Citizen Engagement Index</h3>
<div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md flex items-end overflow-hidden border border-purple-600 dark:border-teal-500">
<div class="w-1/5 bg-yellow-400 h-3/4 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">75%</span></div>
<div class="w-1/5 bg-yellow-400 h-2/3 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">68%</span></div>
<div class="w-1/5 bg-yellow-400 h-4/5 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">82%</span></div>
<div class="w-1/5 bg-yellow-400 h-1/2 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">50%</span></div>
<div class="w-1/5 bg-yellow-400 h-full rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">90%</span></div>
</div>
<div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
<span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Avg</span>
</div>
</div>
<!-- Chart 2: Line Chart Placeholder with Data Points -->
<div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Service Request Trend</h3>
<div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md relative border border-purple-600 dark:border-teal-500">
<!-- Grid lines -->
<div class="absolute inset-0 grid grid-rows-4 grid-cols-6 opacity-30 text-purple-400 dark:text-gray-500">
<div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="col-span-full"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
<div class="row-span-full"></div>
</div>
<!-- Line path placeholders -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FCD34D" />
<stop offset="100%" stop-color="#8B5CF6" />
</linearGradient>
<linearGradient id="gradient1_dark" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2DD4BF" />
<stop offset="100%" stop-color="#6EE7B7" />
</linearGradient>
</defs>
<polyline
points="0,80 20,40 40,60 60,30 80,50 100,20"
fill="none"
stroke="url(#gradient1)"
stroke-width="2"
class="dark:stroke-[url(#gradient1_dark)]"/>
<!-- Data Points -->
<circle cx="0" cy="80" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="20" cy="40" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="40" cy="60" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="60" cy="30" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="80" cy="50" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
<circle cx="100" cy="20" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
</svg>
</div>
<div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
<span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
</div>
</div>
<!-- Key Performance Indicators -->
<div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Key Indicators</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
<div>
<p class="text-purple-300 text-sm dark:text-gray-400">Average Response Time</p>
<p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">2h 15m</p>
</div>
<span class="text-green-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Good</span>
</div>
<div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
<div>
<p class="text-purple-300 text-sm dark:text-gray-400">Citizen Satisfaction Avg</p>
<p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">4.7 <span class="text-base font-normal">/ 5</span></p>
</div>
<span class="text-yellow-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7" />
</svg> Stable</span>
</div>
<div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
<div>
<p class="text-purple-300 text-sm dark:text-gray-400">Active Users Monthly</p>
<p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">1.2M+</p>
</div>
<span class="text-sky-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg> Growing</span>
</div>
</div>
</div>
<!-- Recent Activity Feed -->
<div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
<h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Recent System Activities</h3>
<ul class="space-y-4">
<li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
<div>
<p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">System Admin</strong> updated 'Service Outage Protocol'. <span class="text-purple-400 dark:text-gray-500 text-xs">5 mins ago</span></p>
</div>
</li>
<li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
<div>
<p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Data Analyst</strong> generated 'Q2 Performance Report'. <span class="text-purple-400 dark:text-gray-500 text-xs">1 hour ago</span></p>
</div>
</li>
<li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
<img src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
<div>
<p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Network Security</strong> detected 'Unusual Login Attempt'. <span class="text-red-400 dark:text-red-300 text-xs">3 hours ago</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="p-6 sm:p-8 lg:p-10 border-t-2 border-purple-600 dark:border-teal-500 text-center text-purple-400 dark:text-gray-500 text-xs sm:text-sm">
© 2077 Public Data Systems. All rights reserved. Data refreshed every 30 seconds.
</div>
</div>
<style>
.shadow-neon {
box-shadow: 0 0 5px rgba(252, 211, 77, 0.7), 0 0 10px rgba(252, 211, 77, 0.4), 0 0 15px rgba(252, 211, 77, 0.2);
}
.dark .shadow-neon {
box-shadow: 0 0 5px rgba(45, 212, 191, 0.7), 0 0 10px rgba(45, 212, 191, 0.4), 0 0 15px rgba(45, 212, 191, 0.2);
}
/* Custom placeholder for bar chart values to be readable on bars */
.w-1\/5 span {
font-size: 0.75rem; /* 12px */
transform: translateY(-0.75rem); /* Adjust position if needed */
position: relative;
width: 100%;
text-align: center;
}
</style>
</div>Composants associés
Composant Graphiques
Un composant de graphiques réactif de style 3D avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Graphiques de skeuomorphisme
Un composant de graphiques réactifs avec le style Skeuomorphism, des couleurs vives et la prise en charge du mode sombre pour les interfaces de médias sociaux.
Composant Cartes neumorphes
Il s’agit d’un composant de graphiques complexe et réactif avec un style de conception neumorphique et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Inclut la prise en charge du mode sombre.