Composants
Composants de visualisation de données
Composante Visualisation de Données - Agriculture Industrielle
Composante Visualisation de Données - Agriculture Industrielle
Un composant de visualisation de données à l’esthétique industrielle et brute, utilisant une palette de couleurs violet/violet, adapté à l’agriculture et aux sites Web agricoles. Il affiche les indicateurs clés dans une mise en page réactive avec prise en charge du mode sombre.
HTML Code
<section class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
<div class="max-w-7xl mx-auto space-y-8">
<div class="text-center">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-400 mb-2 tracking-tight uppercase">
Farm Analytics Dashboard
</h1>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
Real-time insights for optimized agricultural operations.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<div class="p-6">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Soil Moisture</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">68%</p>
<p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-green-500 font-medium">+3%</span> last 24h
</p>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<div class="p-6">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Air Temperature</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">24°C</p>
<p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
<svg class="w-4 h-4 mr-1 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 110 2H9a1 1 0 01-1-1v-4a1 1 0 112 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-red-500 font-medium">-1°C</span> last hour
</p>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<div class="p-6">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Yield Forecast</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">+15%</p>
<p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="text-green-500 font-medium">Expected</span> growth
</p>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
<div class="p-6">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Water Usage</h3>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3500L</p>
<p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
<svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
<span class="text-yellow-500 font-medium">Steady</span> daily
</p>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
<h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Historical Data Trends</h3>
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<img src="https://picsum.photos/700/300?random=1" alt="Placeholder chart for historical trends" class="object-cover w-full h-auto rounded-md border border-gray-200 dark:border-gray-700 aspect-[7/3] dark:opacity-80">
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Insights on growth performance over the past quarter.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
<h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Crop Health Status</h3>
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<div class="flex flex-col sm:flex-row items-center gap-4">
<img src="https://picsum.photos/150/150?random=2" alt="Healthy crop placeholder" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-full border-4 border-green-500 shadow-md dark:border-green-600">
<ul class="flex-1 text-gray-700 dark:text-gray-300 leading-relaxed">
<li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-green-500 rounded-full"></span> All fields showing optimal growth.</li>
<li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-yellow-500 rounded-full"></span> Minor nutrient variance in Sector B.</li>
<li class="flex items-center"><span class="w-2 h-2 mr-2 bg-red-500 rounded-full"></span> No critical health alerts detected.</li>
</ul>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-4">Regular drone scans provide detailed health assessments.</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
<h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Resource Allocation Overview</h3>
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
<div class="relative z-10">
<div class="flex flex-col md:flex-row gap-6 mb-6">
<div class="flex-1">
<h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Water Distribution</h4>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-purple-600 h-4 rounded-full" style="width: 85%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">85% of capacity utilized across all zones.</p>
</div>
<div class="flex-1">
<h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Equipment Deployment</h4>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-violet-600 h-4 rounded-full" style="width: 70%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">70% of machinery actively deployed or on standby.</p>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-md">
<h4 class="text-lg font-semibold text-purple-600 dark:text-purple-400 mb-2">Team Activity</h4>
<ul class="space-y-3">
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of John Doe" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
<span>John Doe - Field A Maintenance</span>
</div>
<span class="text-sm text-green-600 dark:text-green-400">Active</span>
</li>
<li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Avatar of Jane Smith" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
<span>Jane Smith - QA Check, Sector C</span>
</div>
<span class="text-sm text-yellow-600 dark:text-yellow-400">Paused</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>Composants associés
Composant Composants de visualisation de données
Un composant de visualisation de données simple, propre et inspiré du code pour la documentation/les sites wiki, avec des polices monospace, une esthétique terminale et des tons de couleur sépia/marron, avec une réactivité totale et une prise en charge du mode sombre.
Composant Composants de visualisation de données
Il s’agit d’un composant simple de visualisation de données en mode sombre pour les médias sociaux avec une palette de couleurs analogue.
Skeuomorphic_Vibrant_Blog_Viz
Un composant complexe et skeuomorphe de visualisation de données pour la consommation de blogs/contenus avec une palette de couleurs vives, conçu pour la réactivité et le mode sombre.