Dashboard_Weather_Climate_Swiss
스위스/인터내셔널 타이포그래피(Swiss/International Typography)에서 영감을 받은 복잡하고 반응이 빠른 날씨 및 기후 대시보드 구성 요소로, 어스 톤을 사용하고 다크 모드를 지원합니다. 현재 날씨, 예측, 대기 질 및 기후 추세와 같은 여러 데이터 포인트를 제공합니다.
HTML 코드
<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>관련 구성 요소
Luxury Agriculture Dashboard 구성 요소
농업 및 농업 웹 사이트를 위한 우아하고 정교한 대시보드 구성 요소로, 생생한 에메랄드 액센트가 있는 흑백 색 구성표를 특징으로 합니다. 여기에는 주요 메트릭, 최근 활동 및 대화형 요소가 포함되며, 완전히 반응하고 다크 모드를 지원하도록 설계되었습니다.
Dashboards 구성 요소
Tailwind CSS를 사용하여 구축된 마이크로 인터랙션과 트라이어딕 색 구성표를 특징으로 하는 소셜 미디어 애플리케이션을 위한 반응형 대시보드 구성 요소입니다.
Dashboards 구성 요소
포트폴리오를 위한 간단한 단색 다크 모드 대시보드 구성 요소로, Tailwind CSS로 구축되었습니다. 반응형 디자인이 특징이며 매끄럽고 미니멀한 룩을 위해 단일 색상의 다양한 음영을 사용합니다.