Functional Components 구성 요소
monospace/developer 미학을 가진 복잡하고 반응이 빠른 대시보드 구성 요소로, 멋진 중립을 사용합니다. 데이터 시각화 요소, 터미널과 같은 섹션 및 다크 모드 지원을 제공합니다.
HTML 코드
<div class="font-mono min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 transition-colors duration-300">
<!-- Header -->
<header class="flex flex-col md:flex-row items-center justify-between p-4 mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h1 class="text-2xl md:text-3xl font-bold text-blue-700 dark:text-blue-400 mb-2 md:mb-0">SYSTEM_DASHBOARD:/></h1>
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-600 dark:text-gray-400">STATUS: <span class="text-green-500 dark:text-green-400">ONLINE</span></span>
<button class="p-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a1 1 0 01-.817.986l-3.238.162a1 1 0 00-.785.647L5.787 9.87a1 1 0 01-.194.275l-2.091 2.215a1 1 0 00-.071 1.488l2.946 3.682A1 1 0 008.3 18h7.42a1 1 0 00.999-.817l-.84-7.557a1 1 0 00-.916-.957L13 8.358V5.5c0-.682-.315-1.32-.862-1.745l-3.468-2.67c-.201-.155-.444-.24-.698-.24z" clip-rule="evenodd"></path>
</svg>
</button>
<img class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
</div>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column (Status & Logs) -->
<div class="lg:col-span-2 space-y-6">
<!-- System Overview Card -->
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">SYSTEM OVERVIEW://</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
<p><span class="text-gray-600 dark:text-gray-400">CPU_LOAD:</span> <span class="font-bold text-orange-500 dark:text-orange-400">67%</span></p>
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
<div class="bg-orange-500 h-2 rounded-full" style="width: 67%;"></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
<p><span class="text-gray-600 dark:text-gray-400">MEM_USAGE:</span> <span class="font-bold text-yellow-500 dark:text-yellow-400">45% (8GB/16GB)</span></p>
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 45%;"></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
<p><span class="text-gray-600 dark:text-gray-400">DISK_IO:</span> <span class="font-bold text-purple-500 dark:text-purple-400">120MB/s</span></p>
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 70%;"></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
<p><span class="text-gray-600 dark:text-gray-400">NETWORK_LATENCY:</span> <span class="font-bold text-green-500 dark:text-green-400">18ms</span></p>
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 90%;"></div>
</div>
</div>
</div>
</section>
<!-- Recent Activity / Command Log -->
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">COMMAND_LOG://</h2>
<div class="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-y-auto h-64 text-sm relative">
<span class="absolute top-2 left-2 text-green-400 text-xs">>$ _</span>
<pre class="whitespace-pre-wrap mt-4">
<span class="text-gray-400">[0x1A2B]</span> <span class="text-green-400">SUCCESS</span>: Initializing core modules...
<span class="text-gray-400">[0x3C4D]</span> <span class="text-yellow-400">WARN</span>: Data integrity check running, 0.5% errors detected.
<span class="text-gray-400">[0x5E6F]</span> <span class="text-green-400">SUCCESS</span>: System update applied. Reboot required.
<span class="text-gray-400">[0x7081]</span> <span class="text-red-400">ERROR</span>: Service 'AuthModule' failed to start on port 8080. Port in use.
<span class="text-gray-400">[0x92A3]</span> <span class="text-green-400">SUCCESS</span>: User 'admin' logged in from 192.168.1.100.
<span class="text-gray-400">[0xB4C5]</span> <span class="text-yellow-400">WARN</span>: High network traffic detected from external source. Blocked.
<span class="text-gray-400">[0xD6E7]</span> <span class="text-green-400">SUCCESS</span>: Database backup initiated. Progress: 75%.
<span class="text-gray-400">[0xF8G9]</span> <span class="text-blue-400">INFO</span>: Sensor array 'Alpha' reporting normal parameters.
<span class="text-gray-400">[0x10H1]</span> <span class="text-red-400">ERROR</span>: Critical temperature detected in 'ServerRack-3'. Initiating shutdown.
<span class="text-gray-400">[0x22I3]</span> <span class="text-green-400">SUCCESS</span>: Log rotation completed successfully.
<span class="text-gray-400">[0x44J5]</span> <span class="text-yellow-400">WARN</span>: Disk space low on '/dev/sda1'. 10GB remaining.
<span class="text-gray-400">[0x66K7]</span> <span class="text-green-400">SUCCESS</span>: Scheduled task 'DataPurge' executed.
</pre>
</div>
</section>
</div>
<!-- Right Column (Components & Controls) -->
<div class="space-y-6">
<!-- Active Components Card -->
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">ACTIVE_COMPONENTS://</h2>
<ul class="space-y-3">
<li class="flex items-center space-x-2 text-sm">
<span class="text-green-500 dark:text-green-400">✔</span>
<span>NETWORK_MONITOR_v2.1</span>
<span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1024</span>
</li>
<li class="flex items-center space-x-2 text-sm">
<span class="text-green-500 dark:text-green-400">✔</span>
<span>DATABASE_ENGINE_SQL_9</span>
<span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1025</span>
</li>
<li class="flex items-center space-x-2 text-sm">
<span class="text-yellow-500 dark:text-yellow-400">✔</span>
<span>SECURE_SHELL_DAEMON_SSH</span>
<span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1026</span>
</li>
<li class="flex items-center space-x-2 text-sm">
<span class="text-red-500 dark:text-red-400">✖</span>
<span>PAYMENT_GATEWAY_API_PHP</span>
<span class="ml-auto text-gray-500 dark:text-gray-400">PID: <span class="text-red-500 dark:text-red-400">STOPPED</span></span>
</li>
<li class="flex items-center space-x-2 text-sm">
<span class="text-green-500 dark:text-green-400">✔</span>
<span>LOG_AGGREGATOR_v1.5</span>
<span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1028</span>
</li>
</ul>
<button class="mt-4 w-full p-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">VIEW ALL PROCESSES</button>
</section>
<!-- Quick Actions Card -->
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">QUICK_ACTIONS://</h2>
<div class="grid grid-cols-2 gap-3">
<button class="p-3 bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
<svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.102a2 2 0 03.487 1.343L9.5 10l-1.5 5.25a1 1 0 00.324 1.013l.836.671L10 18h2v-2.102a2 2 0 00-.487-1.343L8.5 10l1.5-5.25a1 1 0 00-.324-1.013l-.836-.671L10 2H8z" clip-rule="evenodd"></path></svg>
REBOOT_SYSTEM
</button>
<button class="p-3 bg-red-100 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
<svg class="w-5 h-5 mx-auto mb-1" 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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></svg>
HALT_SERVICE
</button>
<button class="p-3 bg-green-100 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-200 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
<svg class="w-5 h-5 mx-auto mb-1" 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 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
ADD_NEW_TASK
</button>
<button class="p-3 bg-yellow-100 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm">
<svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
EDIT_CONFIG
</button>
</div>
</section>
<!-- System Performance Chart Placeholder -->
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">PERFORMANCE_TREND://</h2>
<div class="bg-gray-200 dark:bg-gray-700 h-48 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 text-sm">
[GRAPH_PLACEHOLDER: Data Visualization Here]
<img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Placeholder chart">
</div>
</section>
</div>
</div>
<!-- Footer -->
<footer class="text-center mt-8 text-gray-500 dark:text-gray-400 text-xs">
SYSTEM_DASHBOARD_v1.0 © 2023 // All rights reserved. >_
</footer>
</div>관련 구성 요소
Functional Components 구성 요소
Tailwind CSS로 디자인된 미니멀리스트 포트폴리오 구성 요소로, 생생한 색 구성표와 다크 모드를 지원합니다. 이 구성 요소는 작품 또는 제품을 보여주기 위한 것이며 이미지 및 아바타 자리 표시자를 포함합니다.
Functional Components 구성 요소
Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 glassmorphism 디자인 스타일을 특징으로 하는 구성 요소입니다.
아르 데코 퍼플 문서 구성 요소
아르데코 디자인 테마가 있는 중간 정도의 복잡성 문서/위키 구성 요소로, 보라색/보라색 색상 스펙트럼을 사용하여 기하학적 패턴과 고급스러운 스타일을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.