Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Dashboard UI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 80px; | |
| } | |
| .sidebar-expanded { | |
| width: 280px; | |
| } | |
| .content-area { | |
| transition: all 0.3s ease; | |
| } | |
| .content-expanded { | |
| margin-left: 280px; | |
| } | |
| .content-collapsed { | |
| margin-left: 80px; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-lg flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| </div> | |
| <span id="logo-text" class="text-xl font-bold text-primary">DashboardPro</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-gray-500 hover:text-primary focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto py-4"> | |
| <div class="px-4 mb-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <nav> | |
| <div class="px-2"> | |
| <div class="mb-2"> | |
| <p id="nav-section-title" class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Main Menu</p> | |
| <ul> | |
| <li> | |
| <a href="#" class="flex items-center px-4 py-3 text-primary bg-primary bg-opacity-10 rounded-lg mx-2"> | |
| <i class="fas fa-home mr-3"></i> | |
| <span id="dashboard-text" class="font-medium">Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span id="analytics-text" class="font-medium">Analytics</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span id="messages-text" class="font-medium">Messages</span> | |
| <span class="ml-auto bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">5</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2"> | |
| <i class="fas fa-calendar mr-3"></i> | |
| <span id="calendar-text" class="font-medium">Calendar</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-2"> | |
| <p id="settings-section-title" class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Settings</p> | |
| <ul> | |
| <li> | |
| <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span id | |
| </html> |