Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ProjectFlow - Modern Dashboard</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* ===== CSS Variables ===== */ | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --primary-light: #818cf8; | |
| --secondary: #ec4899; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --dark: #1e1b4b; | |
| --darker: #0f0a2e; | |
| --light: #f8fafc; | |
| --gray: #64748b; | |
| --gray-light: #e2e8f0; | |
| --card-bg: rgba(255, 255, 255, 0.95); | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* ===== Reset & Base ===== */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 50%, #312e81 100%); | |
| min-height: 100vh; | |
| color: #1e293b; | |
| overflow-x: hidden; | |
| } | |
| /* ===== Animated Background ===== */ | |
| .bg-animation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .bg-animation::before { | |
| content: ''; | |
| position: absolute; | |
| width: 200%; | |
| height: 200%; | |
| background: | |
| radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 40%), | |
| radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 40%); | |
| animation: bgMove 20s ease-in-out infinite alternate; | |
| } | |
| @keyframes bgMove { | |
| 0% { transform: translate(-10%, -10%) rotate(0deg); } | |
| 100% { transform: translate(10%, 10%) rotate(10deg); } | |
| } | |
| .floating-shapes { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .shape { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(60px); | |
| opacity: 0.3; | |
| animation: float 15s ease-in-out infinite; | |
| } | |
| .shape:nth-child(1) { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--primary); | |
| top: 10%; | |
| left: 10%; | |
| animation-delay: 0s; | |
| } | |
| .shape:nth-child(2) { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--secondary); | |
| top: 60%; | |
| right: 10%; | |
| animation-delay: -5s; | |
| } | |
| .shape:nth-child(3) { | |
| width: 250px; | |
| height: 250px; | |
| background: var(--success); | |
| bottom: 10%; | |
| left: 30%; | |
| animation-delay: -10s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -50px) scale(1.1); } | |
| 66% { transform: translate(-20px, 20px) scale(0.9); } | |
| } | |
| /* ===== Layout ===== */ | |
| .app-container { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| min-height: 100vh; | |
| gap: 0; | |
| } | |
| /* ===== Sidebar ===== */ | |
| .sidebar { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(20px); | |
| border-right: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| position: fixed; | |
| width: 280px; | |
| height: 100vh; | |
| z-index: 100; | |
| transition: var(--transition); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding-bottom: 32px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-bottom: 24px; | |
| } | |
| .logo-icon { | |
| width: 45px; | |
| height: 45px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 20px; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .logo-text { | |
| color: white; | |
| font-size: 22px; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| } | |
| .nav-menu { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .nav-section { | |
| margin-bottom: 24px; | |
| } | |
| .nav-section-title { | |
| color: rgba(255, 255, 255, 0.4); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| margin-bottom: 12px; | |
| padding-left: 12px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| color: rgba(255, 255, 255, 0.7); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .nav-item:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| transform: translateX(4px); | |
| } | |
| .nav-item.active { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .nav-item i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .nav-badge { | |
| margin-left: auto; | |
| background: var(--secondary); | |
| color: white; | |
| font-size: 11px; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| } | |
| /* ===== User Profile in Sidebar ===== */ | |
| .sidebar-footer { | |
| padding-top: 24px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .user-profile:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .user-avatar { | |
| width: 42px; | |
| height: 42px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--success), var(--primary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: 600; | |
| font-size: 16px; | |
| } | |
| .user-info { | |
| flex: 1; | |
| } | |
| .user-name { | |
| color: white; | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .user-role { | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 12px; | |
| } | |
| /* ===== Main Content ===== */ | |
| .main-content { | |
| margin-left: 280px; | |
| padding: 32px; | |
| min-height: 100vh; | |
| } | |
| /* ===== Header ===== */ | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 32px; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .header-left h1 { | |
| color: white; | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .header-left p { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 14px; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .search-box { | |
| display: flex; | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| gap: 10px; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: var(--transition); | |
| } | |
| .search-box:focus-within { | |
| background: rgba(255, 255, 255, 0.15); | |
| border-color: var(--primary-light); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); | |
| } | |
| .search-box input { | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| color: white; | |
| font-size: 14px; | |
| width: 200px; | |
| } | |
| .search-box input::placeholder { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .search-box i { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .header-btn { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 12px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .header-btn:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .notification-dot { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| width: 8px; | |
| height: 8px; | |
| background: var(--danger); | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.2); } | |
| } | |
| /* ===== Built With Banner ===== */ | |
| .built-with { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: rgba(255, 255, 255, 0.08); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: var(--transition); | |
| } | |
| .built-with:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| .built-with a { | |
| color: var(--primary-light); | |
| text-decoration: none; | |
| font-size: 13px; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .built-with a:hover { | |
| color: white; | |
| } | |
| /* ===== Stats Grid ===== */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 24px; | |
| margin-bottom: 32px; | |
| } | |
| .stat-card { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: var(--primary); | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .stat-card:hover::before { | |
| opacity: 1; | |
| } | |
| .stat-card:nth-child(1)::before { background: var(--primary); } | |
| .stat-card:nth-child(2)::before { background: var(--secondary); } | |
| .stat-card:nth-child(3)::before { background: var(--success); } | |
| .stat-card:nth-child(4)::before { background: var(--warning); } | |
| .stat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 16px; | |
| } | |
| .stat-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| } | |
| .stat-icon.primary { background: rgba(99, 102, 241, 0.1); color: var(--primary); } | |
| .stat-icon.pink { background: rgba(236, 72, 153, 0.1); color: var(--secondary); } | |
| .stat-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--success); } | |
| .stat-icon.orange { background: rgba(245, 158, 11, 0.1); color: var(--warning); } | |
| .stat-trend { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| padding: 4px 8px; | |
| border-radius: 8px; | |
| } | |
| .stat-trend.up { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--success); | |
| } | |
| .stat-trend.down { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger); | |
| } | |
| .stat-value { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--dark); | |
| margin-bottom: 4px; | |
| } | |
| .stat-label { | |
| color: var(--gray); | |
| font-size: 14px; | |
| } | |
| /* ===== Dashboard Grid ===== */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 24px; | |
| margin-bottom: 32px; | |
| } | |
| /* ===== Card Base ===== */ | |
| .card { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 24px; | |
| } | |
| .card-title { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--dark); | |
| } | |
| .card-action { | |
| color: var(--gray); | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .card-action:hover { | |
| color: var(--primary); | |
| } | |
| /* ===== Chart Container ===== */ | |
| .chart-container { | |
| height: 300px; | |
| position: relative; | |
| } | |
| /* ===== Custom Chart Bars ===== */ | |
| .bar-chart { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| height: 250px; | |
| padding-top: 20px; | |
| } | |
| .bar-group { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 1; | |
| } | |
| .bar { | |
| width: 40px; | |
| border-radius: 8px 8px 0 0; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .bar:hover { | |
| transform: scaleY(1.05); | |
| filter: brightness(1.1); | |
| } | |
| .bar.primary { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); } | |
| .bar.secondary { background: linear-gradient(180deg, var(--secondary), #be185d); } | |
| .bar-label { | |
| font-size: 12px; | |
| color: var(--gray); | |
| margin-top: 8px; | |
| } | |
| .bar-value { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--dark); | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .bar:hover .bar-value { | |
| opacity: 1; | |
| } | |
| /* ===== Activity Feed ===== */ | |
| .activity-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .activity-item { | |
| display: flex; | |
| gap: 12px; | |
| padding: 12px; | |
| border-radius: 12px; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .activity-item:hover { | |
| background: rgba(99, 102, 241, 0.05); | |
| } | |
| .activity-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .activity-icon.blue { background: rgba(99, 102, 241, 0.1); color: var(--primary); } | |
| .activity-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--success); } | |
| .activity-icon.orange { background: rgba(245, 158, 11, 0.1); color: var(--warning); } | |
| .activity-icon.pink { background: rgba(236, 72, 153, 0.1); color: var(--secondary); } | |
| .activity-content { | |
| flex: 1; | |
| } | |
| .activity-text { | |
| font-size: 14px; | |
| color: var(--dark); | |
| margin-bottom: 4px; | |
| } | |
| .activity-text strong { | |
| font-weight: 600; | |
| } | |
| .activity-time { | |
| font-size: 12px; | |
| color: var(--gray); | |
| } | |
| /* ===== Tasks Section ===== */ | |
| .tasks-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 24px; | |
| margin-bottom: 32px; | |
| } | |
| .task-card { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .task-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .task-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| } | |
| .task-project { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .task-project-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| color: white; | |
| } | |
| .task-project-name { | |
| font-weight: 600; | |
| color: var(--dark); | |
| font-size: 14px; | |
| } | |
| .task-project-tag { | |
| font-size: 12px; | |
| color: var(--gray); | |
| } | |
| .task-menu { | |
| color: var(--gray); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 6px; | |
| transition: var(--transition); | |
| } | |
| .task-menu:hover { | |
| background: rgba(0, 0, 0, 0.05); | |
| } | |
| .task-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--dark); | |
| margin-bottom: 12px; | |
| line-height: 1.4; | |
| } | |
| .task-progress { | |
| margin-bottom: 16px; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background: var(--gray-light); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| margin-bottom: 8px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width 1s ease-out; | |
| } | |
| .progress-fill.primary { background: linear-gradient(90deg, var(--primary), var(--primary-light)); } | |
| .progress-fill.success { background: linear-gradient(90deg, var(--success), #34d399); } | |
| .progress-fill.warning { background: linear-gradient(90deg, var(--warning), #fbbf24); } | |
| .progress-text { | |
| font-size: 12px; | |
| color: var(--gray); | |
| } | |
| .task-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--gray-light); | |
| } | |
| .task-members { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .member-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| margin-left: -10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| .member-avatar:first-child { | |
| margin-left: 0; | |
| } | |
| .task-due { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 13px; | |
| color: var(--gray); | |
| } | |
| .task-due.urgent { | |
| color: var(--danger); | |
| } | |
| /* ===== Team Members ===== */ | |
| .team-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 16px; | |
| } | |
| .team-card { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)); | |
| border-radius: 16px; | |
| padding: 20px; | |
| text-align: center; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .team-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .team-avatar { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 50%; | |
| margin: 0 auto 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| .team-name { | |
| font-weight: 600; | |
| color: var(--dark); | |
| margin-bottom: 4px; | |
| } | |
| .team-role { | |
| font-size: 13px; | |
| color: var(--gray); | |
| margin-bottom: 12px; | |
| } | |
| .team-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 16px; | |
| } | |
| .team-stat { | |
| text-align: center; | |
| } | |
| .team-stat-value { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--dark); | |
| } | |
| .team-stat-label { | |
| font-size: 11px; | |
| color: var(--gray); | |
| } | |
| /* ===== Calendar Widget ===== */ | |
| .calendar-widget { | |
| margin-top: 24px; | |
| } | |
| .calendar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| } | |
| .calendar-month { | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .calendar-nav { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .calendar-nav-btn { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 8px; | |
| border: none; | |
| background: var(--gray-light); | |
| color: var(--gray); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .calendar-nav-btn:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .calendar-grid { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 4px; | |
| } | |
| .calendar-day-header { | |
| text-align: center; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--gray); | |
| padding: 8px 0; | |
| } | |
| .calendar-day { | |
| aspect-ratio: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 13px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .calendar-day:hover { | |
| background: var(--gray-light); | |
| } | |
| .calendar-day.today { | |
| background: var(--primary); | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .calendar-day.has-event::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 4px; | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| background: var(--secondary); | |
| } | |
| .calendar-day.other-month { | |
| color: rgba(100, 116, 139, 0.4); | |
| } | |
| /* ===== Quick Actions ===== */ | |
| .quick-actions { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 12px; | |
| margin-top: 24px; | |
| } | |
| .quick-action-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 16px; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05)); | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: 1px solid transparent; | |
| } | |
| .quick-action-btn:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| .quick-action-btn:hover i { | |
| color: white; | |
| } | |
| .quick-action-btn i { | |
| font-size: 20px; | |
| color: var(--primary); | |
| transition: var(--transition); | |
| } | |
| .quick-action-btn span { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--dark); | |
| } | |
| /* ===== Mobile Menu Toggle ===== */ | |
| .mobile-menu-toggle { | |
| display: none; | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 200; | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 12px; | |
| background: var(--primary); | |
| border: none; | |
| color: white; | |
| font-size: 20px; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .sidebar-overlay { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 99; | |
| } | |
| /* ===== Scrollbar ===== */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.05); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(99, 102, 241, 0.3); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary); | |
| } | |
| /* ===== Responsive Design ===== */ | |
| @media (max-width: 1200px) { | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| .app-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| padding: 80px 24px 24px; | |
| } | |
| .mobile-menu-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .sidebar-overlay.active { | |
| display: block; | |
| } | |
| .header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .header-right { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .search-box { | |
| flex: 1; | |
| } | |
| .search-box input { | |
| width: 100%; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .stat-value { | |
| font-size: 24px; | |
| } | |
| .quick-actions { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .header-right { | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .built-with { | |
| display: none; | |
| } | |
| .tasks-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .team-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ===== Animations ===== */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-in { | |
| animation: fadeInUp 0.6s ease-out forwards; | |
| } | |
| .delay-1 { animation-delay: 0.1s; } | |
| .delay-2 { animation-delay: 0.2s; } | |
| .delay-3 { animation-delay: 0.3s; } | |
| .delay-4 { animation-delay: 0.4s; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background --> | |
| <div class="bg-animation"> | |
| <div class="floating-shapes"> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu Toggle --> | |
| <button class="mobile-menu-toggle" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="sidebar-overlay" onclick="toggleSidebar()"></div> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <span class="logo-text">ProjectFlow</span> | |
| </div> | |
| <nav class="nav-menu"> | |
| <div class="nav-section"> | |
| <div class="nav-section-title">Main Menu</div> | |
| <div class="nav-item active" onclick="navigateTo(this, 'dashboard')"> | |
| <i class="fas fa-th-large"></i> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="nav-item" onclick="navigateTo(this, 'projects')"> | |
| <i class="fas fa-folder"></i> | |
| <span>Projects</span> | |
| <span class="nav-badge">12</span> | |
| </div> | |
| <div class="nav-item" onclick="navigateTo(this, 'tasks')"> | |
| <i class="fas fa-check-square"></i> | |
| <span>My Tasks</span> | |
| </div> | |
| <div class="nav-item" onclick="navigateTo(this, 'calendar')"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span>Calendar</span> | |
| </div> | |
| <div class="nav-item" onclick="navigateTo(this, 'messages')"> | |
| <i class="fas fa-comment-alt"></i> | |
| <span>Messages</span> | |
| <span class="nav-badge">5</span> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-section-title">Workspace</div> | |
| <div class="nav-item" onclick="navigateTo(this, 'team')"> | |
| <i class="fas fa-users"></i> | |
| <span>Team</span> | |
| </div> | |
| <div class="nav-item" onclick="navigateTo(this, 'analytics')"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Analytics</span> | |
| </div> | |
| <div class="nav-item" onclick="navigateTo(this, 'files')"> | |
| <i class="fas fa-file-alt"></i> | |
| <span>Files</span> | |
| </div> | |
| <div class="nav-item" onclick="navigateTo(this, 'settings')"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="user-profile"> | |
| <div class="user-avatar">JD</div> | |
| <div class="user-info"> | |
| <div class="user-name">John Doe</div> | |
| <div class="user-role">Project Manager</div> | |
| </div> | |
| <i class="fas fa-ellipsis-h" style="color: rgba(255,255,255,0.5);"></i> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <h1>Welcome back, John! 👋</h1> | |
| <p>Here's what's happening with your projects today.</p> | |
| </div> | |
| <div class="header-right"> | |
| <div class="search-box"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" placeholder="Search anything..." id="searchInput"> | |
| </div> | |
| <button class="header-btn"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-dot"></span> | |
| </button> | |
| <div class="built-with"> | |
| <i class="fas fa-code" style="color: var(--primary-light);"></i> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Grid --> | |
| <section class="stats-grid"> | |
| <div class="stat-card animate-in delay-1"> | |
| <div class="stat-header"> | |
| <div class="stat-icon primary"> | |
| <i class="fas fa-folder-open"></i> | |
| </div> | |
| <span class="stat-trend up"> | |
| <i class="fas fa-arrow-up"></i> 12% | |
| </span> | |
| </div> | |
| <div class="stat-value">24</div> | |
| <div class="stat-label">Active Projects</div> | |
| </div> | |
| <div class="stat-card animate-in delay-2"> | |
| <div class="stat-header"> | |
| <div class="stat-icon green"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <span class="stat-trend up"> | |
| <i class="fas fa-arrow-up"></i> 8% | |
| </span> | |
| </div> | |
| <div class="stat-value">156</div> | |
| <div class="stat-label">Tasks Completed</div> | |
| </div> | |
| <div class="stat-card animate-in delay-3"> | |
| <div class="stat-header"> | |
| <div class="stat-icon pink"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <span class="stat-trend down"> | |
| <i class="fas fa-arrow-down"></i> 3% | |
| </span> | |
| </div> | |
| <div class="stat-value">12</div> | |
| <div class="stat-label">Team Members</div> | |
| </div> | |
| <div class="stat-card animate-in delay-4"> | |
| <div class="stat-header"> | |
| <div class="stat-icon orange"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <span class="stat-trend up"> | |
| <i class="fas fa-arrow-up"></i> 5% | |
| </span> | |
| </div> | |
| <div class="stat-value">94%</div> | |
| <div class="stat-label">On-Time Delivery</div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Grid --> | |
| <div class="dashboard-grid"> | |
| <!-- Performance Chart --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Performance Overview</h3> | |
| <span class="card-action">View Details →</span> | |
| </div> | |
| <div class="chart-container"> | |
| <div class="bar-chart" id="barChart"> | |
| <!-- JavaScript will populate this --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Feed --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Recent Activity</h3> | |
| <span class="card-action">View All →</span> | |
| </div> | |
| <div class="activity-list"> | |
| <div class="activity-item"> | |
| <div class="activity-icon blue"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-text"><strong>Sarah</strong> uploaded 3 new files to <strong>Marketing Campaign</strong></div> | |
| <div class="activity-time">2 minutes ago</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon green"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-text"><strong>Mike</strong> completed task "Design System Update"</div> | |
| <div class="activity-time">15 minutes ago</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon orange"> | |
| <i class="fas fa-comment"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-text"><strong>Emma</strong> commented on <strong>API Integration</strong></div> | |
| <div class="activity-time">1 hour ago</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon pink"> | |
| <i class="fas fa-user-plus"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <div class="activity-text"><strong>Alex</strong> joined <strong>Mobile App Project</strong></div> | |
| <div class="activity-time">3 hours ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks Grid --> | |
| <section class="tasks-grid"> | |
| <!-- Task Card 1 --> | |
| <div class="task-card"> | |
| <div class="task-header"> | |
| <div class="task-project"> | |
| <div class="task-project-icon" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <div> | |
| <div class="task-project-name">Mobile App</div> | |
| <div class="task-project-tag">Development</div> | |
| </div> | |
| </div> | |
| <i class="fas fa-ellipsis-h task-menu"></i> | |
| </div> | |
| <div class="task-title">Implement user authentication flow with OAuth 2.0</div> | |
| <div class="task-progress"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill primary" style="width: 75%;"></div> | |
| </div> | |
| <div class="progress-text">75% complete</div> | |
| </div> | |
| <div class="task-footer"> | |
| <div class="task-members"> | |
| <div class="member-avatar" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);">JD</div> | |
| <div class="member-avatar" style="background: linear-gradient(135deg, #ec4899, #f472b6);">SM</div> | |
| <div class="member-avatar" style="background: linear-gradient(135deg, #10b981, #34d399);">MK</div> | |
| </div> | |
| <div class="task-due"> | |
| <i class="far fa-calendar"></i> | |
| <span>Dec 20</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Card 2 --> | |
| <div class="task-card"> | |
| <div class="task-header"> | |
| <div class="task-project"> | |
| <div class="task-project-icon" style="background: linear-gradient(135deg, #10b981, #34d399);"> | |
| <i class="fas fa-chart-pie"></i |