Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ProjectHub - Advanced Project Management Dashboard</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --primary-light: #818cf8; | |
| --secondary: #22d3ee; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --dark: #1e293b; | |
| --light: #f1f5f9; | |
| --white: #ffffff; | |
| --gray: #64748b; | |
| --gray-light: #e2e8f0; | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| --radius: 12px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: var(--dark); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| /* Header */ | |
| header { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: var(--radius); | |
| padding: 20px 30px; | |
| margin-bottom: 30px; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| animation: slideDown 0.5s ease-out; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: var(--primary); | |
| } | |
| .logo-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 20px; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| } | |
| .search-bar { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .search-input { | |
| padding: 10px 40px 10px 15px; | |
| border: 2px solid var(--gray-light); | |
| border-radius: 25px; | |
| width: 250px; | |
| transition: var(--transition); | |
| font-size: 14px; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| width: 300px; | |
| } | |
| .search-icon { | |
| position: absolute; | |
| right: 15px; | |
| color: var(--gray); | |
| } | |
| .theme-toggle { | |
| background: var(--light); | |
| border: none; | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| transition: var(--transition); | |
| } | |
| .theme-toggle:hover { | |
| transform: scale(1.1); | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .notification-btn { | |
| position: relative; | |
| background: var(--light); | |
| border: none; | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| transition: var(--transition); | |
| } | |
| .notification-btn:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background: var(--danger); | |
| color: white; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| font-weight: bold; | |
| animation: pulse 2s infinite; | |
| } | |
| .user-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| cursor: pointer; | |
| padding: 8px 15px; | |
| border-radius: 25px; | |
| transition: var(--transition); | |
| } | |
| .user-menu:hover { | |
| background: var(--light); | |
| } | |
| .user-avatar { | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .stat-card { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow-sm); | |
| transition: var(--transition); | |
| animation: fadeInUp 0.5s ease-out backwards; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: linear-gradient(180deg, var(--primary), var(--secondary)); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| } | |
| .stat-card:nth-child(1) { animation-delay: 0.1s; } | |
| .stat-card:nth-child(2) { animation-delay: 0.2s; } | |
| .stat-card:nth-child(3) { animation-delay: 0.3s; } | |
| .stat-card:nth-child(4) { animation-delay: 0.4s; } | |
| .stat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .stat-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| } | |
| .stat-icon.blue { background: rgba(99, 102, 241, 0.1); color: var(--primary); } | |
| .stat-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--success); } | |
| .stat-icon.yellow { background: rgba(245, 158, 11, 0.1); color: var(--warning); } | |
| .stat-icon.red { background: rgba(239, 68, 68, 0.1); color: var(--danger); } | |
| .stat-value { | |
| font-size: 32px; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| color: var(--gray); | |
| font-size: 14px; | |
| } | |
| .stat-change { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .stat-change.positive { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--success); | |
| } | |
| .stat-change.negative { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger); | |
| } | |
| /* Main Content Grid */ | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 350px; | |
| gap: 30px; | |
| margin-bottom: 30px; | |
| } | |
| /* Projects Section */ | |
| .projects-section { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 25px; | |
| } | |
| .section-title { | |
| font-size: 20px; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .view-tabs { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .tab-btn { | |
| padding: 8px 16px; | |
| border: none; | |
| background: var(--light); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-weight: 500; | |
| } | |
| .tab-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .tab-btn:hover:not(.active) { | |
| background: var(--gray-light); | |
| } | |
| .filter-chips { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .chip { | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| background: var(--light); | |
| border: 2px solid transparent; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 14px; | |
| } | |
| .chip:hover { | |
| border-color: var(--primary); | |
| } | |
| .chip.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .project-cards { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .project-card { | |
| background: var(--light); | |
| border-radius: 10px; | |
| padding: 20px; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .project-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); | |
| transition: left 0.5s; | |
| } | |
| .project-card:hover::before { | |
| left: 100%; | |
| } | |
| .project-card:hover { | |
| transform: translateX(5px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .project-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: start; | |
| margin-bottom: 15px; | |
| } | |
| .project-title { | |
| font-weight: 600; | |
| font-size: 16px; | |
| color: var(--dark); | |
| } | |
| .project-priority { | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .priority-high { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger); | |
| } | |
| .priority-medium { | |
| background: rgba(245, 158, 11, 0.1); | |
| color: var(--warning); | |
| } | |
| .priority-low { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--success); | |
| } | |
| .project-description { | |
| color: var(--gray); | |
| font-size: 14px; | |
| margin-bottom: 15px; | |
| line-height: 1.5; | |
| } | |
| .project-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .project-team { | |
| display: flex; | |
| margin-left: -8px; | |
| } | |
| .team-member { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: bold; | |
| color: white; | |
| margin-left: -8px; | |
| transition: var(--transition); | |
| } | |
| .team-member:hover { | |
| transform: scale(1.2); | |
| z-index: 10; | |
| } | |
| .project-deadline { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| color: var(--gray); | |
| font-size: 13px; | |
| } | |
| /* Activity Sidebar */ | |
| .activity-sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .activity-card { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| animation: fadeInUp 0.7s ease-out; | |
| } | |
| .activity-item { | |
| display: flex; | |
| gap: 15px; | |
| padding: 15px 0; | |
| border-bottom: 1px solid var(--gray-light); | |
| transition: var(--transition); | |
| } | |
| .activity-item:last-child { | |
| border-bottom: none; | |
| } | |
| .activity-item:hover { | |
| background: var(--light); | |
| margin: 0 -10px; | |
| padding: 15px 10px; | |
| border-radius: 8px; | |
| } | |
| .activity-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .activity-content { | |
| flex: 1; | |
| } | |
| .activity-text { | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| } | |
| .activity-time { | |
| font-size: 12px; | |
| color: var(--gray); | |
| } | |
| /* Progress Chart */ | |
| .chart-container { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| animation: fadeInUp 0.8s ease-out; | |
| } | |
| .chart-bars { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-around; | |
| height: 200px; | |
| margin-top: 20px; | |
| } | |
| .bar-wrapper { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| flex: 1; | |
| max-width: 60px; | |
| } | |
| .bar { | |
| width: 100%; | |
| background: linear-gradient(180deg, var(--primary), var(--primary-dark)); | |
| border-radius: 8px 8px 0 0; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .bar:hover { | |
| opacity: 0.8; | |
| transform: scaleY(1.05); | |
| } | |
| .bar-label { | |
| margin-top: 10px; | |
| font-size: 12px; | |
| color: var(--gray); | |
| } | |
| .bar-value { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 12px; | |
| font-weight: bold; | |
| color: var(--primary); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .bar:hover .bar-value { | |
| opacity: 1; | |
| } | |
| /* Floating Action Button */ | |
| .fab { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| border: none; | |
| font-size: 24px; | |
| cursor: pointer; | |
| box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); | |
| transition: var(--transition); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .fab:hover { | |
| transform: scale(1.1) rotate(90deg); | |
| box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4); | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(5px); | |
| z-index: 2000; | |
| animation: fadeIn 0.3s; | |
| } | |
| .modal.active { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 30px; | |
| max-width: 500px; | |
| width: 90%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| animation: slideUp 0.3s; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 25px; | |
| } | |
| .modal-title { | |
| font-size: 24px; | |
| font-weight: bold; | |
| } | |
| .close-btn { | |
| background: none; | |
| border: none; | |
| font-size: 28px; | |
| cursor: pointer; | |
| color: var(--gray); | |
| transition: var(--transition); | |
| } | |
| .close-btn:hover { | |
| color: var(--danger); | |
| transform: rotate(90deg); | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| color: var(--dark); | |
| } | |
| .form-input, | |
| .form-textarea, | |
| .form-select { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid var(--gray-light); | |
| border-radius: 8px; | |
| font-size: 14px; | |
| transition: var(--transition); | |
| } | |
| .form-input:focus, | |
| .form-textarea:focus, | |
| .form-select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| .form-textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 14px; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 100px; | |
| right: 30px; | |
| background: white; | |
| padding: 15px 20px; | |
| border-radius: 8px; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| transform: translateX(400px); | |
| transition: transform 0.3s; | |
| z-index: 3000; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast-icon { | |
| font-size: 20px; | |
| } | |
| .toast.success { | |
| border-left: 4px solid var(--success); | |
| } | |
| .toast.error { | |
| border-left: 4px solid var(--danger); | |
| } | |
| .toast.info { | |
| border-left: 4px solid var(--primary); | |
| } | |
| /* Animations */ | |
| @keyframes slideDown { | |
| from { opacity: 0; transform: translateY(-30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| .main-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .activity-sidebar { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 10px; | |
| } | |
| header { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .search-input { | |
| width: 200px; | |
| } | |
| .search-input:focus { | |
| width: 250px; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| } | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .view-tabs { | |
| display: none; | |
| } | |
| .chart-bars { | |
| height: 150px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .header-actions { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .user-menu span { | |
| display: none; | |
| } | |
| } | |
| /* Dark theme */ | |
| body.dark-theme { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| } | |
| body.dark-theme header { | |
| background: rgba(30, 41, 59, 0.95); | |
| color: var(--light); | |
| } | |
| body.dark-theme .stat-card, | |
| body.dark-theme .projects-section, | |
| body.dark-theme .activity-card, | |
| body.dark-theme .chart-container, | |
| body.dark-theme .modal-content, | |
| body.dark-theme .toast { | |
| background: var(--dark); | |
| color: var(--light); | |
| } | |
| body.dark-theme .project-card { | |
| background: rgba(51, 65, 85, 0.5); | |
| } | |
| body.dark-theme .chip, | |
| body.dark-theme .tab-btn:not(.active) { | |
| background: rgba(51, 65, 85, 0.5); | |
| color: var(--light); | |
| } | |
| body.dark-theme .form-input, | |
| body.dark-theme .form-textarea, | |
| body.dark-theme .form-select { | |
| background: rgba(51, 65, 85, 0.5); | |
| border-color: rgba(100, 116, 139, 0.5); | |
| color: var(--light); | |
| } | |
| body.dark-theme .theme-toggle, | |
| body.dark-theme .notification-btn { | |
| background: rgba(51, 65, 85, 0.5); | |
| color: var(--light); | |
| } | |
| body.dark-theme .search-input { | |
| background: rgba(51, 65, 85, 0.5); | |
| color: var(--light); | |
| } | |
| body.dark-theme .user-menu:hover { | |
| background: rgba(51, 65, 85, 0.5); | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255, 255, 255, .3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo"> | |
| <div class="logo-icon">📊</div> | |
| <span>ProjectHub</span> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| style="margin-left: auto; font-size: 12px; color: var(--gray); text-decoration: none;">Built with anycoder</a> | |
| </div> | |
| <div class="header-actions"> | |
| <div class="search-bar"> | |
| <input type="text" class="search-input" placeholder="Search projects..." id="searchInput"> | |
| <span class="search-icon">🔍</span> | |
| </div> | |
| <button class="theme-toggle" onclick="toggleTheme()">🌙</button> | |
| <button class="notification-btn" onclick="showNotifications()"> | |
| 🔔 | |
| <span class="notification-badge" id="notificationCount">3</span> | |
| </button> | |
| <div class="user-menu" onclick="toggleUserMenu()"> | |
| <div class="user-avatar">JD</div> | |
| <span>John Doe</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Grid --> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon blue">📁</div> | |
| <span class="stat-change positive">↑ 12%</span> | |
| </div> | |
| <div class="stat-value" id="activeProjects">24</div> | |
| <div class="stat-label">Active Projects</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon green">✅</div> | |
| <span class="stat-change positive">↑ 8%</span> | |
| </div> | |
| <div class="stat-value" id="completedTasks">142</div> | |
| <div class="stat-label">Completed Tasks</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon yellow">👥</div> | |
| <span class="stat-change negative">↓ 3%</span> | |
| </div> | |
| <div class="stat-value" id="teamMembers">18</div> | |
| <div class="stat-label">Team Members</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon red">⏰</div> | |
| <span class="stat-change positive">↑ 5%</span> | |
| </div> | |
| <div class="stat-value" id="pendingReviews">7</div> | |
| <div class="stat-label">Pending Reviews</div> | |
| </div> | |
| </div> | |
| <!-- Main Grid --> | |
| <div class="main-grid"> | |
| <!-- Projects Section --> | |
| <div class="projects-section"> | |
| <div class="section-header"> | |
| <h2 class="section-title"> | |
| 📋 Recent Projects | |
| </h2> | |
| <div class="view-tabs"> | |
| <button class="tab-btn active" onclick="switchView('list')">List</button> | |
| <button class="tab-btn" onclick="switchView('grid')">Grid</button> | |
| <button class="tab-btn" onclick="switchView('kanban')">Kanban</button> | |
| </div> | |
| </div> | |
| <div class="filter-chips"> | |
| <span class="chip active" onclick="filterProjects('all', this)">All</span> | |
| <span class="chip" onclick="filterProjects('development', this)">Development</span> | |
| <span class="chip" onclick="filterProjects('design', this)">Design</span> | |
| <span class="chip" onclick="filterProjects('marketing', this)">Marketing</span> | |
| <span class="chip" onclick="filterProjects('research', this)">Research</span> | |
| </div> | |
| <div class="project-cards" id="projectList"> | |
| <div class="project-card" data-category="development" onclick="openProjectDetails('Mobile App Redesign')"> | |
| <div class="project-header"> | |
| <h3 class="project-title">Mobile App Redesign</h3> | |
| <span class="project-priority priority-high">High</span> | |
| </div> | |
| <p class="project-description">Complete overhaul of the mobile application UI/UX with modern design principles and improved user flow.</p> | |
| <div class="project-meta"> | |
| <div class="project-team"> | |
| <div class="team-member" style="background: #6366f1;" title="Alice Smith">AS</div> | |
| <div class="team-member" style="background: #22d3ee;" title="Mike Kim">MK</div> | |
| <div class="team-member" style="background: #10b981;" title="Rachel Johnson">RJ</div> | |
| </div> | |
| <div class="project-deadline"> | |
| 📅 Dec 15, 2024 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card" data-category="development" onclick="openProjectDetails('API Integration')"> | |
| <div class="project-header"> | |
| <h3 class="project-title">API Integration</h3> | |
| <span class="project-priority priority-medium">Medium</span> | |
| </div> | |
| <p class="project-description">Implement third-party payment gateway API and integrate with existing backend services.</p> | |
| <div class="project-meta"> | |
| <div class="project-team"> | |
| <div class="team-member" style="background: #f59e0b;" title="Tom Wilson">TW</div> | |
| <div class="team-member" style="background: #ef4444;" title="Lisa Martin">LM</div> | |
| </div> | |
| <div class="project-deadline"> | |
| 📅 Dec 20, 2024 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card" data-category="marketing" onclick="openProjectDetails('Marketing Campaign')"> | |
| <div class="project-header"> | |
| <h3 class="project-title">Marketing Campaign</h3> | |
| <span class="project-priority priority-low">Low</span> | |
| </div> | |
| <p class="project-description">Launch Q1 2025 marketing campaign across social media platforms and email newsletters.</p> | |
| <div class="project-meta"> | |
| <div class="project-team"> | |
| <div class="team-member" style="background: #8b5cf6;" title="Kate Brown">KB</div> | |
| <div class="team-member" style="background: #ec4899;" title="Nick Parker">NP</div> | |
| <div class="team-member" style="background: #14b8a6;" title="David Hall">DH</div> | |
| </div> | |
| <div class="project-deadline"> | |
| 📅 Jan 5, 2025 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card" data-category="design" onclick="openProjectDetails('Brand Identity')"> | |
| <div class="project-header"> | |
| <h3 class="project-title">Brand Identity</h3> | |
| <span class="project-priority priority-high">High</span> | |
| </div> | |
| <p class="project-description">Create comprehensive brand identity guidelines including logo variations, color palettes, and typography.</p> | |
| <div class="project-meta"> | |
| <div class="project-team"> | |
| <div class="team-member" style="background: #06b6d4;" title="Emily Chen">EC</div> | |
| <div class="team-member" style="background: #a855f7;" title="Alex Turner">AT</div> | |
| </div> | |
| <div class="project-deadline"> | |
| 📅 Dec 18, 2024 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card" data-category="research" onclick="openProjectDetails('User Research')"> | |
| <div class="project-header"> | |
| <h3 class="project-title">User Research</h3> | |
| <span class="project-priority priority-medium">Medium</span> | |
| </div> | |
| <p class="project-description">Conduct comprehensive user research and usability testing for the new product features.</p> | |
| <div class="project-meta"> | |
| <div class="project-team"> | |
| <div class="team-member" style="background: #0ea5e9;" title="Sarah Lee">SL</div> | |
| <div class="team-member" style="background: #84cc16;" title="Jack Green">JG</div> | |
| <div class="team-member" style="background: #f97316;" title="Olivia White">OW</div> | |
| </div> | |
| <div class="project-deadline"> | |
| 📅 Dec 22, 2024 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Sidebar --> | |
| <div class="activity-sidebar"> | |
| <div class="activity-card"> | |
| <h3 class="section-title"> | |
| 📈 Recent Activity | |
| </h3> | |
| <div class="activity-list" id="activityList"> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(99, 102, 241, 0.1); color: var(--primary);">📝</div> | |
| <div class="activity-content"> | |
| <div class="activity-text">New task assigned to you</div> | |
| <div class="activity-time">2 minutes ago</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(16, 185, 129, 0.1); color: var(--success);">✅</div> | |
| <div class="activity-content"> | |
| <div class="activity-text">Project milestone completed</div> | |
| <div class="activity-time">1 hour ago</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(245, 158, 11, 0.1); color: var(--warning);">💬</div> | |
| <div class="activity-content"> | |
| <div class="activity-text">New comment on design mockup</div> | |
| <div class="activity-time">3 hours ago</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(239, 68, 68, 0.1); color |