Dashboard_Weather_Climate_Swiss
Un composant complexe et réactif du tableau de bord météo et climatique inspiré de la typographie suisse/internationale, utilisant des tons de terre et prenant en charge le mode sombre. Dispose de plusieurs points de données tels que la météo actuelle, les prévisions, la qualité de l’air et les tendances climatiques.
HTML Code
<div class="min-h-screen bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
<header class="mb-8 sm:mb-10 lg:mb-12">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-stone-900 dark:text-stone-100 tracking-tight mb-2">
Climate Dashboard
</h1>
<p class="text-lg sm:text-xl text-stone-600 dark:text-stone-400">Comprehensive Weather & Climate Insights</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8">
<!-- Current Weather Card -->
<section class="md:col-span-2 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col justify-between overflow-hidden relative">
<div class="absolute top-0 left-0 w-full h-full bg-cover bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/weather_current/1200/800');"></div>
<div class="relative z-10">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Current Conditions</h2>
<div class="flex items-center justify-between flex-wrap gap-4 mb-6">
<div class="flex items-center gap-4">
<img src="https://openweathermap.org/img/wn/04d.png" alt="Cloudy" class="w-16 h-16 sm:w-20 sm:h-20">
<div>
<p class="text-5xl sm:text-6xl font-bold text-stone-900 dark:text-stone-100">22°C</p>
<p class="text-xl text-stone-700 dark:text-stone-300">Partly Cloudy</p>
</div>
</div>
<div class="text-right">
<p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Humidity:</span> 65%</p>
<p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Wind:</span> 12 km/h NE</p>
<p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Pressure:</span> 1012 hPa</p>
</div>
</div>
<p class="text-md text-stone-600 dark:text-stone-400">Updated: Just now</p>
<p class="mt-2 text-md font-medium text-stone-700 dark:text-stone-300">Location: Zurich, Switzerland</p>
</div>
</section>
<!-- 5-Day Forecast Card -->
<section class="md:col-span-1 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg overflow-hidden">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">5-Day Forecast</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-5 gap-4">
<!-- Day 1 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Today</p>
<img src="https://openweathermap.org/img/wn/04d.png" alt="Clouds" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">24° / 15°</p>
</div>
<!-- Day 2 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Tomorrow</p>
<img src="https://openweathermap.org/img/wn/01d.png" alt="Sun" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">26° / 16°</p>
</div>
<!-- Day 3 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Thu</p>
<img src="https://openweathermap.org/img/wn/10d.png" alt="Rain" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">20° / 13°</p>
</div>
<!-- Day 4 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Fri</p>
<img src="https://openweathermap.org/img/wn/03d.png" alt="Partly Clouds" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">21° / 14°</p>
</div>
<!-- Day 5 -->
<div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
<p class="font-medium text-stone-800 dark:text-stone-200">Sat</p>
<img src="https://openweathermap.org/img/wn/02d.png" alt="Few Clouds" class="w-10 h-10">
<p class="text-stone-700 dark:text-stone-300">23° / 15°</p>
</div>
</div>
</section>
<!-- Climate Trends Card -->
<section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Climate Trends</h2>
<div class="space-y-4">
<div>
<p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Average Temperature</p>
<div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
<div class="bg-amber-600 h-2.5 rounded-full" style="width: 70%;"></div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+0.8°C vs. Historical Average</p>
</div>
<div>
<p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Precipitation Anomaly</p>
<div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%;"></div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 mt-1">-15% vs. Historical Average</p>
</div>
<div>
<p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Extreme Weather Events</p>
<div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 40%;"></div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+5% Increase Annually</p>
</div>
</div>
<button class="mt-6 w-full py-2 px-4 bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 text-white font-medium rounded-lg transition-colors">
View Full Report
</button>
</section>
<!-- Air Quality Index Card -->
<section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Air Quality Index (AQI)</h2>
<div class="flex items-center justify-between mb-4 flex-grow">
<div class="text-center flex-1">
<p class="text-5xl font-bold text-emerald-600 dark:text-emerald-400">45</p>
<p class="text-lg text-emerald-700 dark:text-emerald-300">Good</p>
</div>
<div class="text-left flex-1 pl-4 border-l border-stone-200 dark:border-stone-700">
<p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">PM2.5:</span> 12 µg/m³</p>
<p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">Ozone:</span> 35 ppb</p>
<p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">NO2:</span> 5 ppb</p>
</div>
</div>
<p class="text-sm text-stone-600 dark:text-stone-400 text-center mt-2">Data from local monitoring station</p>
</section>
<!-- Global Anomalies Card -->
<section class="md:col-span-3 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
<h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Global Anomalies & Alerts</h2>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 text-2xl">⚠</span>
<div>
<p class="font-medium text-stone-800 dark:text-stone-200">Heatwave warning for Southern Europe</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Temperatures expected to exceed 40°C for next 7 days.</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-blue-500 text-2xl">ℹ</span>
<div>
<p class="font-medium text-stone-800 dark:text-stone-200">Increased Arctic ice melt observed</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Satellite data shows record low sea ice extent for the season.</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-yellow-500 text-2xl">⛑</span>
<div>
<p class="font-medium text-stone-800 dark:text-stone-200">Pacific Ocean SST trending towards El Niño</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Potential for altered global weather patterns in coming months.</p>
</div>
</li>
</ul>
</section>
</div>
<footer class="mt-10 pt-6 border-t border-stone-300 dark:border-stone-700 text-center text-stone-600 dark:text-stone-400 text-sm">
<p>© 2023 Climate Insights. All rights reserved.</p>
</footer>
</div>Composants associés
Dashboard_Component
Un composant de tableau de bord financier/bancaire réactif avec un style de conception aquarelle/artistique et une palette de couleurs chaudes au coucher du soleil. Inclut la prise en charge du mode sombre et un niveau de complexité modéré.
Composant de tableau de bord brutaliste en niveaux de gris
Une disposition de tableau de bord simple, de style brutaliste, en niveaux de gris pour les sites Web d’entreprise, réactive avec prise en charge du mode sombre, construite avec Tailwind CSS.
Industrial_Sports_Dashboard
Un composant de tableau de bord de complexité modérée pour les applications de sport/fitness avec un style de design industriel, avec des tons de terre et une mise en page réactive avec prise en charge du mode sombre. Affiche les indicateurs clés, les activités récentes et les performances de l’équipe/individuelle.