HTML 代码
<div class="flex h-screen bg-gray-100 dark:bg-zinc-900 font-sans">
<!-- Desktop/Tablet Sidebar -->
<aside class="hidden md:flex flex-col w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-md transition-all duration-300 ease-in-out">
<div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600">
<span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
</div>
<nav class="flex-1 p-4 overflow-y-auto">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M3 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
<span class="text-sm font-medium">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
<span class="text-sm font-medium">Wallets</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
<span class="text-sm font-medium">Trades</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
<span class="text-sm font-medium">Market</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98Zm-5.32 8.5a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"><!-- Placeholder Icon --></path></svg>
<span class="text-sm font-medium">Analytics</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="text-sm font-medium">Settings</span>
</a>
</li>
</ul>
</nav>
<div class="p-4 border-t border-gray-300 dark:border-zinc-700">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
<svg class="w-4 h-4 mr-2" 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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
Sign Out
</button>
</div>
</aside>
<!-- Main Content Area - Placeholder for context -->
<main class="flex-1 p-6 md:p-8 overflow-y-auto">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6">Dashboard Overview</h1>
<p class="text-gray-700 dark:text-gray-300">Welcome to your CryptoDeck dashboard. Use the sidebar to navigate.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Wallet Balance</h2>
<p class="text-2xl font-bold text-gray-900 dark:text-gray-50">$12,345.67</p>
<p class="text-sm text-gray-600 dark:text-gray-400">+2.5% in last 24h</p>
</div>
<div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Recent Transactions</h2>
<ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
<li>BTC Buy: +0.01 ($450)</li>
<li>ETH Sell: -0.5 ($1200)</li>
<li>ADA Staked: +100</li>
</ul>
</div>
<div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Market Trends</h2>
<img class="w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Market Trend Chart">
</div>
</div>
</main>
<style>
/* This is a simple toggle emulation for demonstration.
In a real app, use JS to toggle 'dark' class on 'html' or 'body'. */
.dark-mode-toggle {
position: fixed;
bottom: 1rem;
right: 1rem;
background-color: #fca5a5; /* Example: light-red-300 */
color: black;
padding: 0.5rem 1rem;
border-radius: 9999px; /* Full rounded */
cursor: pointer;
z-index: 1000;
font-size: 0.875rem;
line-height: 1.25rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid #dc2626; /* Example: Red-600 */
}
.dark .dark-mode-toggle {
background-color: #6d28d9; /* Example: Violet-700 */
color: white;
border-color: #8b5cf6; /* Example: Violet-500 */
}
/* Mobile menu button animation */
.mobile-menu-button.active svg:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-button.active svg:nth-child(2) {
opacity: 0;
}
.mobile-menu-button.active svg:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
@media (max-width: 767px) {
.mobile-menu-container {
transform: translateX(-100%);
}
.mobile-menu-container.open {
transform: translateX(0);
}
}
</style>
<!-- Mobile Menu Button - Fixed bottom left -->
<button aria-label="Toggle Mobile Menu" class="md:hidden fixed bottom-4 left-4 p-3 bg-gray-300 dark:bg-gradient-to-br dark:from-zinc-700 dark:to-zinc-900 text-gray-800 dark:text-gray-100 rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out border border-gray-400 dark:border-zinc-700 mobile-menu-button">
<svg class="w-6 h-6" 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 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<!-- Mobile Sidebar (Off-canvas) -->
<div class="mobile-menu-container fixed inset-y-0 left-0 w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-xl z-40 transform -translate-x-full md:hidden transition-transform duration-300 ease-in-out" role="dialog" aria-modal="true" aria-label="Mobile Navigation">
<div class="flex items-center justify-between h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600 px-4">
<span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
<button aria-label="Close Menu" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 mobile-menu-close-button">
<svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<nav class="flex-1 p-4 overflow-y-auto">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M3 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
<span class="text-sm font-medium">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
<span class="text-sm font-medium">Wallets</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group active:bg-gray-400 dark:active:bg-zinc-600">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
<span class="text-sm font-medium">Trades</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
<span class="text-sm font-medium">Market</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM5.32 8.5a.5.5 0 00-.707.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"/></svg>
<span class="text-sm font-medium">Analytics</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M10.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="text-sm font-medium">Settings</span>
</a>
</li>
</ul>
</nav>
<div class="p-4 border-t border-gray-300 dark:border-zinc-700">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
<svg class="w-4 h-4 mr-2" 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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
Sign Out
</button>
</div>
</div>
<!-- Overlay for mobile menu -->
<div class="overlay fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>
<script>
// Basic JavaScript for toggling dark mode (for demonstration)
const toggleDarkMode = () => {
document.documentElement.classList.toggle('dark');
};
// Add a button to toggle dark mode (for demo purposes)
document.addEventListener('DOMContentLoaded', () => {
const darkToggleBtn = document.createElement('button');
darkToggleBtn.className = 'dark-mode-toggle';
darkToggleBtn.textContent = 'Toggle Dark Mode';
darkToggleBtn.onclick = toggleDarkMode;
document.body.appendChild(darkToggleBtn);
// Mobile menu functionality
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenuContainer = document.querySelector('.mobile-menu-container');
const mobileMenuCloseButton = document.querySelector('.mobile-menu-close-button');
const overlay = document.querySelector('.overlay');
const openMenu = () => {
mobileMenuContainer.classList.add('open');
overlay.classList.remove('hidden');
};
const closeMenu = () => {
mobileMenuContainer.classList.remove('open');
overlay.classList.add('hidden');
};
mobileMenuButton.addEventListener('click', openMenu);
mobileMenuCloseButton.addEventListener('click', closeMenu);
overlay.addEventListener('click', closeMenu);
// Close menu on desktop resize if open
window.addEventListener('resize', () => {
if (window.innerWidth >= 768 && mobileMenuContainer.classList.contains('open')) {
closeMenu();
}
});
});
</script>
</div>