Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Metronic - Project View</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| .sidebar-collapse { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapse.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-collapse.collapsed .nav-text { | |
| display: none; | |
| } | |
| .sidebar-collapse.collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar-collapse.collapsed .nav-item { | |
| justify-content: center; | |
| } | |
| .dark-mode { | |
| background-color: #1e1e2d; | |
| color: #92929f; | |
| } | |
| .dark-mode .card { | |
| background-color: #1e1e2d; | |
| border-color: #2d2d43; | |
| } | |
| .dark-mode .text-gray-800 { | |
| color: #e1e1e1; | |
| } | |
| .dark-mode .text-gray-600 { | |
| color: #92929f; | |
| } | |
| .dark-mode .border-gray-200 { | |
| border-color: #2d2d43; | |
| } | |
| .dark-mode .bg-white { | |
| background-color: #1e1e2d; | |
| } | |
| .dark-mode .bg-gray-100 { | |
| background-color: #2d2d43; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar-collapse bg-white w-64 flex flex-col border-r border-gray-200"> | |
| <div class="flex items-center justify-between p-5"> | |
| <div class="flex items-center"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/logos/demo59.svg" alt="Logo" class="h-8"> | |
| <span class="logo-text ml-2 text-xl font-bold">Metronic</span> | |
| </div> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <!-- Dashboard Menu --> | |
| <div class="px-4 py-2"> | |
| <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">Dashboards</h3> | |
| <ul> | |
| <li class="nav-item mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md bg-blue-50 text-blue-600"> | |
| <i class="fas fa-chart-pie mr-3"></i> | |
| <span class="nav-text">Default</span> | |
| </a> | |
| </li> | |
| <li class="nav-item mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-shopping-cart mr-3"></i> | |
| <span class="nav-text">eCommerce</span> | |
| </a> | |
| </li> | |
| <li class="nav-item mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| <span class="nav-text">Projects</span> | |
| </a> | |
| </li> | |
| <!-- More dashboard items... --> | |
| </ul> | |
| </div> | |
| <!-- Apps Menu --> | |
| <div class="px-4 py-2"> | |
| <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">Apps</h3> | |
| <ul> | |
| <li class="nav-item mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| <span class="nav-text">Projects</span> | |
| </a> | |
| </li> | |
| <li class="nav-item mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-shopping-cart mr-3"></i> | |
| <span class="nav-text">eCommerce</span> | |
| </a> | |
| </li> | |
| <!-- More app items... --> | |
| </ul> | |
| </div> | |
| <!-- User Section --> | |
| <div class="mt-auto p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/avatars/300-1.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Jeroen Pro</p> | |
| <p class="text-xs text-gray-500">jeroen@kt.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 hover:text-gray-700 mr-4"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-lg font-semibold">View Project</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Breadcrumbs --> | |
| <div class="px-6 py-3 border-t border-gray-200"> | |
| <nav class="flex" aria-label="Breadcrumb"> | |
| <ol class="inline-flex items-center space-x-1 md:space-x-3"> | |
| <li class="inline-flex items-center"> | |
| <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600"> | |
| <i class="fas fa-home mr-2"></i> | |
| Home | |
| </a> | |
| </li> | |
| <li> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chevron-right text-gray-400 mx-1"></i> | |
| <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2">Apps</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chevron-right text-gray-400 mx-1"></i> | |
| <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2">Projects</a> | |
| </div> | |
| </li> | |
| <li aria-current="page"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chevron-right text-gray-400 mx-1"></i> | |
| <span class="ml-1 text-sm font-medium text-blue-600 md:ml-2">View Project</span> | |
| </div> | |
| </li> | |
| </ol> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6"> | |
| <!-- Project Header --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/svg/brand-logos/volicity-9.svg" alt="Project Logo" class="h-12 w-12 mr-4"> | |
| <div> | |
| <h2 class="text-xl font-bold">CRM Dashboard</h2> | |
| <div class="flex items-center mt-1"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full mr-2">In Progress</span> | |
| <p class="text-sm text-gray-600">#1 Tool to get started with Web Apps any Kind & size</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700"> | |
| <i class="fas fa-plus mr-2"></i> Add User | |
| </button> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-200"> | |
| <i class="fas fa-bullseye mr-2"></i> Add Target | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Project Stats --> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-md"> | |
| <p class="text-sm text-gray-500">Due Date</p> | |
| <p class="text-lg font-semibold">29 Jan, 2025</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-md"> | |
| <p class="text-sm text-gray-500">Open Tasks</p> | |
| <p class="text-lg font-semibold">56</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-md"> | |
| <p class="text-sm text-gray-500">Budget Spent</p> | |
| <p class="text-lg font-semibold">$5,867</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-md"> | |
| <p class="text-sm text-gray-500">Team</p> | |
| <div class="flex -space-x-2 mt-1"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/avatars/300-11.jpg" class="h-8 w-8 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/avatars/300-7.jpg" class="h-8 w-8 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/avatars/300-20.jpg" class="h-8 w-8 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/avatars/300-2.jpg" class="h-8 w-8 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/avatars/300-12.jpg" class="h-8 w-8 rounded-full border-2 border-white" alt="User"> | |
| <span class="flex items-center justify-center h-8 w-8 rounded-full bg-gray-200 text-xs font-medium border-2 border-white">+42</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Tabs --> | |
| <div class="mt-6 border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <a href="#" class="border-b-2 border-blue-500 text-blue-600 px-1 py-4 text-sm font-medium">Overview</a> | |
| <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Targets</a> | |
| <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Budget</a> | |
| <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Users</a> | |
| <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Files</a> | |
| <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Activity</a> | |
| <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Settings</a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Project Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Tasks Summary --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Tasks Summary</h3> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800">View Tasks</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> | |
| <div class="bg-red-50 p-4 rounded-md"> | |
| <p class="text-sm text-red-500">24 Overdue Tasks</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-md"> | |
| <p class="text-sm text-gray-500">237 Total Tasks</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-md"> | |
| <p class="text-sm text-blue-500">Active</p> | |
| <p class="text-lg font-semibold">30</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-md"> | |
| <p class="text-sm text-green-500">Completed</p> | |
| <p class="text-lg font-semibold">45</p> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-md"> | |
| <p class="text-sm text-yellow-500">Overdue</p> | |
| <p class="text-lg font-semibold">0</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-md"> | |
| <p class="text-sm text-purple-500">Yet to start</p> | |
| <p class="text-lg font-semibold">25</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-sm text-gray-600 mb-2">Invite New .NET Collaborators to create great outstanding business to business .jsp modutr class scripts</p> | |
| </div> | |
| </div> | |
| <!-- Tasks Over Time --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Tasks Over Time</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-50 text-blue-600 text-xs font-medium rounded-md">Complete</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Incomplete</button> | |
| </div> | |
| </div> | |
| <div class="h-64 bg-gray-50 rounded-md flex items-center justify-center"> | |
| <p class="text-gray-400">Chart will be displayed here</p> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-500"> | |
| <p>2020 Q3</p> | |
| </div> | |
| </div> | |
| <!-- Schedule --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">What's on the road?</h3> | |
| <p class="text-sm text-gray-500">Total 482 participants</p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <div class="flex space-x-1 mb-4"> | |
| <button class="px-3 py-1 bg-blue-50 text-blue-600 text-xs font-medium rounded-md">Su 22</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Mo 23</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Tu 24</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">We 25</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Th 26</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Fr 27</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Sa 28</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Su 29</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Mo 30</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-md">Tu 31</button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Schedule Item --> | |
| <div class="border border-gray-200 rounded-md p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-50 text-blue-600 px-3 py-1 rounded-md text-xs font-medium mr-4"> | |
| 11:00 - 11:45 am | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Dashboard UI/UX Design Review</h4> | |
| <p class="text-sm text-gray-500 mt-1">Lead by Sean Bean</p> | |
| </div> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</a> | |
| </div> | |
| </div> | |
| <!-- More schedule items... --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Latest Files --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Latest Files</h3> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800">View All</a> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Total 382 files, 2.6GB space usage</p> | |
| <div class="space-y-4"> | |
| <!-- File Item --> | |
| <div class="flex items-start"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/svg/files/pdf.svg" alt="PDF" class="h-8 w-8 mr-3"> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium">Project tech requirements</h4> | |
| <p class="text-xs text-gray-500 mt-1">2 days ago by Karina Clark</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- More file items... --> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium mb-2">Quick file uploader</h4> | |
| <div class="border-2 border-dashed border-gray-300 rounded-md p-4 text-center"> | |
| <p class="text-sm text-gray-500">Drag & Drop or choose files from computer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Contributors --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">New Contributors</h3> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800">View All</a> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">From total 482 Participants</p> | |
| <div class="space-y-4"> | |
| <!-- Contributor Item --> | |
| <div class="flex items-center"> | |
| <img src="https://preview.keenthemes.com/metronic8/demo59/assets/media/avatars/300-6.jpg" alt="User" class="h-10 w-10 rounded-full mr-3"> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium">Emma Smith</h4> | |
| <p class="text-xs text-gray-500 mt-1">8 Pending & 97 Completed Tasks</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded-full">5</span> | |
| </div> | |
| <!-- More contributor items... --> | |
| </div> | |
| </div> | |
| <!-- My Tasks --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">My Tasks</h3> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800">View All</a> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-4">Total 25 tasks in backlog</p> | |
| <div class="space-y-4"> | |
| <!-- Task Item --> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="mt-1 mr-3"> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium">Create FureStibe branding logo</h4> | |
| <p class="text-xs text-gray-500 mt-1">Due in 1 day by Karina Clark</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- More task items... --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar collapse | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const sidebar = document.querySelector('.sidebar-collapse'); | |
| const toggleBtn = document.querySelector('header button'); | |
| toggleBtn.addEventListener('click', function() { | |
| sidebar.classList.toggle('collapsed'); | |
| }); | |
| // Dark mode toggle | |
| const darkModeBtn = document.querySelector('header button:nth-child(3)'); | |
| darkModeBtn.addEventListener('click', function() { | |
| document.body.classList.toggle('dark-mode'); | |
| // Toggle icon | |
| const icon = darkModeBtn.querySelector('i'); | |
| if (document.body.classList.contains('dark-mode')) { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=3s2ng/admin-theme" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |