사이버펑크 농업 진행 지표
농업 또는 농업 웹사이트를 위한 미래지향적인 사이버펑크 테마의 진행 지표 세트로, 따뜻한 일몰 톤을 특징으로 합니다. 다크 모드 지원으로 반응형.
HTML 코드
<div class="bg-zinc-950 text-orange-400 min-h-screen p-4 sm:p-8 dark:bg-black dark:text-orange-300 font-mono">
<div class="max-w-7xl mx-auto py-8 lg:py-12">
<h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-8 sm:mb-12 tracking-wide uppercase leading-tight text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-600 dark:from-yellow-300 dark:to-orange-500 drop-shadow-md">
Agro-Bot 7.0: Crop Cycle Nexus
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Progress Card 1: Planting Phase -->
<div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-600 to-red-800 rounded-full opacity-20 blur-xl dark:from-yellow-500 dark:to-orange-700"></div>
<div class="flex items-center justify-between mb-5">
<h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Planting Protocol</h3>
<svg class="h-8 w-8 text-orange-500 group-hover:animate-pulse dark:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 21h.01M17 7h3a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2h3m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M7 7h10"></path></svg>
</div>
<p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Seed deployment and initial nutrient injection. Progress critical for sprout emergence.</p>
<div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
<div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 85%;"></div>
</div>
<div class="text-right text-sm text-orange-400 dark:text-yellow-300">85% Complete</div>
<div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Last Check: 10/26/23 14:30 GMT
</div>
</div>
<!-- Progress Card 2: Growth Monitoring -->
<div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
<div class="flex items-center justify-between mb-5">
<h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Biomass Accumulation</h3>
<svg class="h-8 w-8 text-yellow-500 group-hover:animate-spin dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
</div>
<p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Real-time monitoring of crop growth and health indicators. AI-driven pathogen detection.</p>
<div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
<div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 60%;"></div>
</div>
<div class="text-right text-sm text-orange-400 dark:text-yellow-300">60% Data Collected</div>
<div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8h4a4 4 0 100-8H8zm0 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Next Scan: 10/27/23 08:00 GMT
</div>
</div>
<!-- Progress Card 3: Resource Optimization -->
<div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
<div class="flex items-center justify-between mb-5">
<h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Hydro-Energy Flow</h3>
<svg class="h-8 w-8 text-red-500 group-hover:scale-125 transition-transform duration-300 dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Water and nutrient delivery system status. Awaiting recalibration of soil sensors.</p>
<div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
<div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 40%;"></div>
</div>
<div class="text-right text-sm text-orange-400 dark:text-yellow-300">40% Optimized</div>
<div class="mt-5 flex items-start text-sm text-zinc-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-2 text-red-500 animate-bounce" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.672-1.3 3.437 0L14.4 7.252c1.346 2.241-.019 5.06-2.5 5.06h-5.8c-2.481 0-3.847-2.819-2.5-5.06l2.744-4.503z" clip-rule="evenodd"></path></svg>
<span class="text-red-500 uppercase font-bold">Alert:</span> Sensor Array Offline
</div>
</div>
<!-- Progress Card 4: Harvesting Forecast -->
<div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-400 to-red-600 rounded-full opacity-20 blur-xl dark:from-yellow-300 dark:to-orange-500"></div>
<div class="flex items-center justify-between mb-5">
<h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Yield Prediction</h3>
<svg class="h-8 w-8 text-orange-500 group-hover:rotate-12 transition-transform duration-300 dark:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
</div>
<p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Forecasting harvest dates and estimated output based on current growth data.</p>
<div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
<div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 75%;"></div>
</div>
<div class="text-right text-sm text-orange-400 dark:text-yellow-300">75% Confidence</div>
<div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
<img src="https://picsum.photos/id/1015/30/30" alt="Farm Worker Avatar" class="rounded-full w-6 h-6 mr-2 border border-orange-500 dark:border-yellow-400">
Analyst: Unit Alpha-7
</div>
</div>
<!-- Progress Card 5: Supply Chain Logistics -->
<div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
<div class="flex items-center justify-between mb-5">
<h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Logistics Network</h3>
<svg class="h-8 w-8 text-yellow-500 group-hover:translate-x-1 transition-transform duration-300 dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m3 5v-1.11a3 3 0 011.66-2.793L16.2 8.3c.75-.414 1.25-.133 1.25.75V17m-9 4h6a2 2 0 002-2v-3a2 2 0 00-2-2H9a2 2 0 00-2 2v3a2 2 0 002 2z"></path></svg>
</div>
<p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Coordination of automated transport units and storage facilities. Route optimization initiated.</p>
<div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
<div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 90%;"></div>
</div>
<div class="text-right text-sm text-orange-400 dark:text-yellow-300">90% Routes Optimized</div>
<div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-8a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
Status: Auto-Dispatch Active
</div>
</div>
<!-- Progress Card 6: Environmental Impact -->
<div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
<div class="flex items-center justify-between mb-5">
<h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Eco-Footprint Analysis</h3>
<svg class="h-8 w-8 text-red-500 group-hover:animate-pulse dark:text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11V7a2 2 0 012-2h4a2 2 0 012 2v4m-.586 1.707a2 2 0 002.828 0L20 10.414V17a2 2 0 01-2 2H6a2 2 0 01-2-2V7.414L6.586 5.828a2 2 0 000-2.828z"></path></svg>
</div>
<p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Analyzing resource consumption and waste generation for sustainability metrics. Goal: Carbon Negative.</p>
<div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
<div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 95%;"></div>
</div>
<div class="text-right text-sm text-orange-400 dark:text-yellow-300">95% Reviewed</div>
<div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Environmentalist Avatar" class="rounded-full w-6 h-6 mr-2 border border-red-500 dark:border-orange-500">
Validated by: Dr. Neo Verde
</div>
</div>
</div>
<div class="text-center mt-12 sm:mt-16">
<button class="px-8 py-3 rounded-full text-lg font-bold uppercase tracking-wider
bg-gradient-to-r from-orange-600 to-red-800 text-white shadow-lg
hover:from-orange-700 hover:to-red-900 focus:outline-none focus:ring-4
focus:ring-orange-500 focus:ring-opacity-75 transition-all duration-300
transform hover:scale-105 active:scale-95
dark:from-yellow-500 dark:to-orange-700 dark:hover:from-yellow-600 dark:hover:to-orange-800
dark:focus:ring-yellow-400 dark:shadow-red-800/40">
Initiate System Recalibration
</button>
</div>
</div>
</div>관련 구성 요소
Progress Indicators 구성 요소
반응형 Progress Indicators 컴포넌트는 유사한 색 구성표를 가진 다크 모드 UI 대시보드용으로 설계되었습니다. 여기에는 막대, 원 및 활동 피드와 같은 다양한 진행률 표시기가 포함되어 있으며 모두 다크 모드 지원을 위해 Tailwind CSS로 스타일이 지정되었습니다. JavaScript는 사용되지 않습니다.
Progress Indicators 구성 요소
네온/글로우 효과와 보석 톤이 있는 간단하고 반응이 빠른 진행 표시기 구성 요소로, 컨설팅/서비스 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
Progress Indicators 구성 요소
Brutalism 디자인, 흙빛 색조 및 어두운 테마 지원을 갖춘 반응형 진행률 표시기 구성 요소는 블로그 또는 콘텐츠 사이트에 적합합니다.