Dashboard_Event_Conference
イベントや会議管理のための複雑な等幅/開発者をテーマにしたダッシュボードで、キャンディ/スウィートの配色とダークモードをサポートする完全な応答性を備えています。
HTMLコード
<div class="font-['JetBrains_Mono',_monospace] min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 sm:p-8">
<!-- Not strictly monospace, but 'JetBrains Mono' is a good developer font -->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Custom scrollbar for webkit browsers */
.scrollbar-webkit::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-webkit::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-webkit::-webkit-scrollbar-thumb {
background: #fbcfe8; /* pink-200 */
border-radius: 4px;
}
.dark .scrollbar-webkit::-webkit-scrollbar-thumb {
background: #a78bfa; /* violet-400 */
}
.scrollbar-webkit::-webkit-scrollbar-thumb:hover {
background: #f472b6; /* pink-400 */
}
.dark .scrollbar-webkit::-webkit-scrollbar-thumb:hover {
background: #8b5cf6; /* violet-500 */
}
</style>
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
<h1 class="text-4xl font-bold mb-4 sm:mb-0 text-fuchsia-600 dark:text-fuchsia-400"><span class="text-pink-500 block sm:inline">[</span> Event OS <span class="text-pink-500 block sm:inline">]</span></h1>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search commands..." class="py-2 pl-4 pr-10 text-sm rounded-md bg-pink-200 dark:bg-purple-800 border border-fuchsia-300 dark:border-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent transition-all duration-200 placeholder:text-pink-800 dark:placeholder:text-purple-300 text-pink-900 dark:text-purple-100">
<svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-fuchsia-700 dark:text-purple-300" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<button aria-label="User profile" class="p-1 rounded-full bg-pink-300 dark:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-purple-400">
</button>
</div>
</header>
<main class="grid grid-cols-1 lg:grid-cols-3 gap-6 auto-rows-min">
<!-- Main Stats Terminal -->
<section class="lg:col-span-2 p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 overflow-hidden relative">
<h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ CONFERENCE_STATS.exe</h2>
<div class="absolute top-3 right-4 flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
<pre class="whitespace-pre-wrap text-sm leading-relaxed text-gray-700 dark:text-gray-300 scrollbar-webkit max-h-96 overflow-auto">
<span class="text-fuchsia-500">$</span> <span class="text-green-500">event fetch --id=DEV_CONF_2024</span>
<span class="text-gray-500"># Fetching data for Developer Conference 2024...</span>
<span class="text-pink-400">Status:</span> <span class="text-cyan-400">ACTIVE</span>
<span class="text-pink-400">Total Attendees:</span> <span class="text-orange-400">1,567</span> <span class="text-gray-500">(+12% vs. Last Year)</span>
<span class="text-pink-400">Registered Speakers:</span> <span class="text-orange-400">89</span>
<span class="text-pink-400">Sessions Scheduled:</span> <span class="text-orange-400">125</span>
<span class="text-pink-400">Available Tickets:</span> <span class="text-orange-400">233</span>
<span class="text-fuchsia-500">$</span> <span class="text-green-500">metrics show --type=engagement --period=24h</span>
<span class="text-pink-400">Live Streams:</span>
<span class="ml-4">Keynote_Main:</span> <span class="text-yellow-400">789 live viewers</span>
<span class="ml-4">Track_Frontend:</span> <span class="text-yellow-400">321 live viewers</span>
<span class="ml-4">Track_Backend:</span> <span class="text-yellow-400">288 live viewers</span>
<span class="text-pink-400">Social Mentions (Last 1hr):</span> <span class="text-yellow-400">+56</span>
<span class="text-pink-400">App Downloads:</span> <span class="text-yellow-400">1,120</span>
<span class="text-fuchsia-500">$</span> <span class="text-green-500">alerts status</span>
<span class="text-green-500">[ OK ]</span> No critical alerts detected.
<span class="text-orange-500">[ WARN ]</span> Venue capacity 85% for 'AI Revolution' Q&A. Monitor closely.
<span class="text-fuchsia-500">$</span> <span class="text-green-500">help</span>
<span class="text-gray-500">Type 'dashboard --full' for extended data.</span>
<span class="text-gray-500">Type 'commands' for a list of available actions.</span>
</pre>
</section>
<!-- Quick Actions / Command Prompt -->
<section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 flex flex-col">
<h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ QUICK_ACTIONS.sh</h2>
<div class="flex-grow space-y-3 mb-6 scrollbar-webkit overflow-y-auto max-h-64 sm:max-h-full">
<button class="w-full text-left py-3 px-4 rounded-md bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-400">
<span class="text-purple-600 dark:text-purple-300">></span> deploy_update --schedule=A
</button>
<button class="w-full text-left py-3 px-4 rounded-md bg-pink-200 dark:bg-fuchsia-700 text-pink-800 dark:text-fuchsia-200 hover:bg-pink-300 dark:hover:bg-fuchsia-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-fuchsia-400">
<span class="text-pink-600 dark:text-fuchsia-300">></span> send_broadcast_msg "Lunch Break!"
</button>
<button class="w-full text-left py-3 px-4 rounded-md bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 hover:bg-teal-300 dark:hover:bg-teal-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-teal-400 dark:focus:ring-teal-400">
<span class="text-teal-600 dark:text-teal-300">></span> manage_speakers --add
</button>
<button class="w-full text-left py-3 px-4 rounded-md bg-orange-200 dark:bg-orange-700 text-orange-800 dark:text-orange-200 hover:bg-orange-300 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-400">
<span class="text-orange-600 dark:text-orange-300">></span> ticket_sales --report --today
</button>
</div>
<div class="relative">
<input type="text" placeholder="Enter command..." class="w-full py-2 pl-4 pr-10 text-sm rounded-md bg-pink-200 dark:bg-purple-800 border border-fuchsia-300 dark:border-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent transition-all duration-200 placeholder:text-pink-800 dark:placeholder:text-purple-300 text-pink-900 dark:text-purple-100">
<button aria-label="Execute command" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md bg-fuchsia-400 dark:bg-violet-600 hover:bg-fuchsia-500 dark:hover:bg-violet-700 text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">
<svg class="w-4 h-4" 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 5l7 7-7 7"></path></svg>
</button>
</div>
</section>
<!-- Upcoming Sessions Panel -->
<section class="lg:col-span-2 p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
<h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ UPCOMING_SESSIONS.log</h2>
<div class="space-y-4 scrollbar-webkit overflow-y-auto max-h-96">
<div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
<div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
<img src="https://picsum.photos/seed/tech/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
</div>
<div class="flex-grow text-center sm:text-left">
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[10:00 AM - 11:00 AM] | ROOM: HEXAGON</p>
<h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Future of Quantum Computing (Keynote)</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Dr. Alice Wonderland</p>
</div>
<div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
<button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
<div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
<img src="https://picsum.photos/seed/ai/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
</div>
<div class="flex-grow text-center sm:text-left">
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[11:15 AM - 12:15 PM] | ROOM: NEBULA</p>
<h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Deep Learning in the Cloud</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Mr. Bob Builder & Ms. Carol Developer</p>
</div>
<div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
<button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
<div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
<img src="https://picsum.photos/seed/cyber/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
</div>
<div class="flex-grow text-center sm:text-left">
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[01:30 PM - 02:30 PM] | ROOM: PIXEL</p>
<h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Cybersecurity Best Practices 2024</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">S. Hacker</p>
</div>
<div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
<button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
<div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
<img src="https://picsum.photos/seed/webdev/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
</div>
<div class="flex-grow text-center sm:text-left">
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[02:45 PM - 03:45 PM] | ROOM: MATRIX</p>
<h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Building Responsive UIs with No-Code</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">D. Coder</p>
</div>
<div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
<button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
</div>
</div>
</div>
</section>
<!-- Recent Activities Log -->
<section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 row-span-2">
<h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ ACTIVITY_LOG.sys</h2>
<div class="space-y-4 scrollbar-webkit overflow-y-auto max-h-96 lg:max-h-full">
<div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
<p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:30:22</span> User <span class="font-medium">@AdminUser</span> approved 5 new speaker applications.</p>
</div>
<div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
<p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[ALERT]</span> <span class="text-gray-600 dark:text-gray-400">09:28:15</span> High server load detected on <code>streaming_server_03</code>.</p>
</div>
<div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
<p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[WARN]</span> <span class="text-gray-600 dark:text-gray-400">09:25:01</span> Payment gateway API reported intermittent disconnects.</p>
</div>
<div class="p-3 bg-purple-100 dark:bg-gray-800 rounded-md border border-purple-300 dark:border-purple-700">
<p class="text-sm text-purple-800 dark:text-purple-300"><span class="text-purple-600 dark:text-purple-400">[ACTION]</span> <span class="text-gray-600 dark:text-gray-400">09:20:45</span> System initiated <code>backup_db_prod.sh</code>.</p>
</div>
<div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
<p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:18:00</span> New attendee registered: Jane Doe.</p>
</div>
<div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
<p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:15:30</span> Session 'Web Security' updated by <span class="font-medium">@SpeakerAdmin</span>.</p>
</div>
<div class="p-3 bg-purple-100 dark:bg-gray-800 rounded-md border border-purple-300 dark:border-purple-700">
<p class="text-sm text-purple-800 dark:text-purple-300"><span class="text-purple-600 dark:text-purple-400">[ACTION]</span> <span class="text-gray-600 dark:text-gray-400">09:10:05</span> Newsletter 'Day 1 Schedule' sent to 15,000 subscribers.</p>
</div>
<div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
<p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[ERROR]</span> <span class="text-gray-600 dark:text-gray-400">09:05:40</span> Failed to sync data with analytics platform. Retrying...</p>
</div>
</div>
</section>
<!-- Resource Usage / Graphs -->
<section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
<h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ RESOURCE_MONITOR.graph</h2>
<div class="space-y-6">
<div>
<p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">CPU Usage:</span> <span class="text-orange-400">78%</span> <span class="bg-pink-300 dark:bg-violet-700 px-2 py-0.5 rounded text-xs text-pink-800 dark:text-violet-200">HIGH</span></p>
<div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
<div class="bg-fuchsia-500 h-3 rounded-full" style="width: 78%;"></div>
</div>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">Memory Usage:</span> <span class="text-green-500">45%</span></p>
<div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
<div class="bg-teal-500 h-3 rounded-full" style="width: 45%;"></div>
</div>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">Network I/O:</span> <span class="text-yellow-500">62%</span></p>
<div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
<div class="bg-orange-500 h-3 rounded-full" style="width: 62%;"></div>
</div>
</div>
<div class="text-center">
<button class="py-2 px-5 rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400 text-sm">
VIEW FULL STATS
</button>
</div>
</div>
</section>
<!-- Team Collaboration Status -->
<section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
<h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ TEAM_STATUS.json</h2>
<div class="space-y-4">
<div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
<div class="flex-grow">
<p class="font-medium text-pink-800 dark:text-pink-300">John Doe <span class="text-xs text-gray-500 dark:text-gray-400">@jdoe</span></p>
<p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400">Online</span> | Task: <code>Monitor Live Streams</code></p>
</div>
</div>
<div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
<div class="flex-grow">
<p class="font-medium text-pink-800 dark:text-pink-300">Jane Smith <span class="text-xs text-gray-500 dark:text-gray-400">@jsmith</span></p>
<p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-yellow-600 dark:text-yellow-400">Busy</span> | Task: <code>Attendee Support Queries</code></p>
</div>
</div>
<div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
<div class="flex-grow">
<p class="font-medium text-pink-800 dark:text-pink-300">Alex Lee <span class="text-xs text-gray-500 dark:text-gray-400">@alee</span></p>
<p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400">Online</span> | Task: <code>Venue A/V Check</code></p>
</div>
</div>
</div>
</section>
</main>
<footer class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
<p>© 2024 Event OS <span class="text-fuchsia-400 dark:text-violet-400">//</span> All Rights Reserved.</p>
<p>Version: <span class="text-pink-400 dark:text-fuchsia-400">1.0.0-beta</span></p>
</footer>
</div>関連コンポーネント
Dashboard_Weather_Climate_Swiss
スイス/インターナショナルタイポグラフィにインスパイアされた、複雑で応答性の高い天気と気候のダッシュボードコンポーネントで、アースカラーを使用し、ダークモードをサポートしています。現在の天気、予報、大気質、気候の傾向など、複数のデータ ポイントを備えています。
ダッシュボードコンポーネント
ビジネス/企業での使用に適した単色の配色を備えたダークモード用に設計された複雑なダッシュボードコンポーネント。豊富なインタラクティブ要素を備えており、応答性に優れています。
Neumorphic_Forum_Dashboard
フォレスト/グリーンのカラーパレットを備えたシンプルでレスポンシブなニューモーフィックダッシュボードコンポーネントで、フォーラムおよびコミュニティプラットフォーム向けに設計されており、ダークモードのサポートが含まれています。