Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TaskForce - NVIDIA Style Todo App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap'); | |
| :root { | |
| /* NVIDIA-inspired color system */ | |
| --nvidia-green: #76B900; | |
| --nvidia-green-light: #8BC34A; | |
| --nvidia-green-dark: #5A8C00; | |
| --nvidia-black: #000000; | |
| --nvidia-dark: #1A1A1A; | |
| --nvidia-gray-dark: #2A2A2A; | |
| --nvidia-gray-medium: #3A3A3A; | |
| --nvidia-gray-light: #4A4A4A; | |
| --nvidia-accent: #00FF88; | |
| --nvidia-cyan: #00E5FF; | |
| --nvidia-purple: #9C27B0; | |
| --nvidia-orange: #FF6F00; | |
| /* Priority colors */ | |
| --priority-low: var(--nvidia-green); | |
| --priority-medium: var(--nvidia-orange); | |
| --priority-high: var(--nvidia-purple); | |
| /* System backgrounds */ | |
| --bg-primary: var(--nvidia-dark); | |
| --bg-secondary: var(--nvidia-black); | |
| --bg-tertiary: var(--nvidia-gray-dark); | |
| --bg-glass: rgba(26, 26, 26, 0.9); | |
| --bg-glass-dark: rgba(0, 0, 0, 0.8); | |
| /* Text colors */ | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #B0B0B0; | |
| --text-tertiary: #808080; | |
| --text-quaternary: #606060; | |
| /* Borders and separators */ | |
| --border-color: var(--nvidia-gray-medium); | |
| --separator-color: rgba(118, 185, 0, 0.2); | |
| --accent-border: var(--nvidia-green); | |
| /* Shadows */ | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); | |
| --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7); | |
| --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.8); | |
| --shadow-glow: 0 0 20px rgba(118, 185, 0, 0.3); | |
| --shadow-glow-hover: 0 0 30px rgba(118, 185, 0, 0.5); | |
| /* Transitions */ | |
| --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | |
| background: linear-gradient(135deg, var(--nvidia-black) 0%, var(--nvidia-dark) 100%); | |
| min-height: 100vh; | |
| color: var(--text-primary); | |
| transition: all var(--transition-base); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle at 20% 50%, rgba(118, 185, 0, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(0, 229, 255, 0.05) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(156, 39, 176, 0.05) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| /* Header Section */ | |
| header { | |
| background: linear-gradient(135deg, var(--nvidia-gray-dark) 0%, var(--nvidia-gray-medium) 100%); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| padding: 40px; | |
| margin-bottom: 32px; | |
| box-shadow: var(--shadow-glow); | |
| animation: slideDown var(--transition-slow) ease-out; | |
| border: 1px solid var(--separator-color); | |
| clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); | |
| position: relative; | |
| } | |
| header::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--nvidia-green), transparent); | |
| animation: scan 3s linear infinite; | |
| } | |
| @keyframes scan { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 24px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| letter-spacing: -1px; | |
| text-transform: uppercase; | |
| } | |
| .logo i { | |
| font-size: 40px; | |
| background: linear-gradient(135deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| filter: drop-shadow(0 0 10px rgba(118, 185, 0, 0.5)); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| } | |
| .theme-toggle { | |
| width: 48px; | |
| height: 48px; | |
| clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%); | |
| background: var(--nvidia-gray-medium); | |
| border: 1px solid var(--nvidia-green); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| color: var(--nvidia-green); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .theme-toggle:hover { | |
| transform: scale(1.1) rotate(5deg); | |
| background: var(--nvidia-green); | |
| color: var(--nvidia-black); | |
| box-shadow: var(--shadow-glow-hover); | |
| } | |
| .theme-toggle:active { | |
| transform: scale(0.95) rotate(-5deg); | |
| } | |
| .stats-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 20px; | |
| margin-top: 32px; | |
| } | |
| .stat-card { | |
| background: linear-gradient(135deg, var(--nvidia-gray-medium) 0%, var(--nvidia-gray-light) 100%); | |
| padding: 24px; | |
| clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); | |
| text-align: center; | |
| transition: all var(--transition-fast); | |
| border: 1px solid var(--separator-color); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient(45deg, transparent, rgba(118, 185, 0, 0.1), transparent); | |
| transform: rotate(45deg); | |
| transition: all 0.6s; | |
| opacity: 0; | |
| } | |
| .stat-card:hover::before { | |
| animation: shine 0.6s ease-in-out; | |
| } | |
| @keyframes shine { | |
| 0% { | |
| transform: translateX(-100%) translateY(-100%) rotate(45deg); | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateX(100%) translateY(100%) rotate(45deg); | |
| opacity: 0; | |
| } | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-glow); | |
| border-color: var(--nvidia-green); | |
| } | |
| .stat-number { | |
| font-size: 40px; | |
| font-weight: 700; | |
| color: var(--nvidia-green); | |
| letter-spacing: -2px; | |
| text-shadow: 0 0 20px rgba(118, 185, 0, 0.5); | |
| } | |
| .stat-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-top: 8px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* Main Layout */ | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 360px 1fr; | |
| gap: 32px; | |
| animation: fadeIn var(--transition-slow) ease-out; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background: linear-gradient(135deg, var(--nvidia-gray-dark) 0%, var(--nvidia-gray-medium) 100%); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| padding: 32px; | |
| clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); | |
| box-shadow: var(--shadow-glow); | |
| height: fit-content; | |
| position: sticky; | |
| top: 24px; | |
| border: 1px solid var(--separator-color); | |
| } | |
| .add-task-form h3 { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 24px; | |
| color: var(--text-primary); | |
| letter-spacing: -0.5px; | |
| text-transform: uppercase; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .add-task-form h3::before { | |
| content: ''; | |
| width: 4px; | |
| height: 24px; | |
| background: linear-gradient(180deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| border-radius: 2px; | |
| } | |
| .form-group { | |
| margin-bottom: 24px; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| color: var(--nvidia-green); | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .form-input, | |
| .form-select, | |
| .form-textarea { | |
| width: 100%; | |
| padding: 14px 18px; | |
| border: 2px solid var(--nvidia-gray-medium); | |
| background: var(--nvidia-gray-dark); | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| font-weight: 500; | |
| transition: all var(--transition-fast); | |
| font-family: inherit; | |
| clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); | |
| } | |
| .form-input:focus, | |
| .form-select:focus, | |
| .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--nvidia-green); | |
| background: var(--nvidia-black); | |
| box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.2); | |
| } | |
| .form-textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| line-height: 1.6; | |
| } | |
| /* Priority Selector */ | |
| .priority-selector { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .priority-btn { | |
| flex: 1; | |
| padding: 12px; | |
| border: 2px solid var(--nvidia-gray-medium); | |
| background: var(--nvidia-gray-dark); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-weight: 600; | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); | |
| } | |
| .priority-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| border-color: var(--nvidia-gray-light); | |
| } | |
| .priority-btn:active { | |
| transform: translateY(0); | |
| } | |
| .priority-btn.active { | |
| color: var(--nvidia-black); | |
| border-color: transparent; | |
| font-weight: 700; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .priority-btn.low.active { | |
| background: linear-gradient(135deg, var(--priority-low) 0%, var(--nvidia-green-light) 100%); | |
| } | |
| .priority-btn.medium.active { | |
| background: linear-gradient(135deg, var(--priority-medium) 0%, #FFB74D 100%); | |
| } | |
| .priority-btn.high.active { | |
| background: linear-gradient(135deg, var(--priority-high) 0%, #BA68C8 100%); | |
| } | |
| /* Category Tags */ | |
| .category-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .category-tag { | |
| padding: 10px 18px; | |
| clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); | |
| background: var(--nvidia-gray-dark); | |
| border: 2px solid var(--nvidia-gray-medium); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .category-tag:hover { | |
| transform: translateY(-2px) scale(1.05); | |
| box-shadow: var(--shadow-sm); | |
| border-color: var(--nvidia-green); | |
| } | |
| .category-tag.active { | |
| background: linear-gradient(135deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| color: var(--nvidia-black); | |
| border-color: var(--nvidia-green); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| padding: 14px 28px; | |
| border: none; | |
| clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); | |
| font-size: 16px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: inherit; | |
| letter-spacing: -0.5px; | |
| text-transform: uppercase; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| color: var(--nvidia-black); | |
| width: 100%; | |
| justify-content: center; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow-hover); | |
| filter: brightness(1.1); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| /* Content Area */ | |
| .content-area { | |
| background: linear-gradient(135deg, var(--nvidia-gray-dark) 0%, var(--nvidia-gray-medium) 100%); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| padding: 32px; | |
| clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); | |
| box-shadow: var(--shadow-glow); | |
| border: 1px solid var(--separator-color); | |
| } | |
| /* Search and Filter Bar */ | |
| .search-filter-bar { | |
| display: flex; | |
| gap: 20px; | |
| margin-bottom: 32px; | |
| flex-wrap: wrap; | |
| } | |
| .search-box { | |
| flex: 1; | |
| min-width: 250px; | |
| position: relative; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 14px 18px 14px 48px; | |
| border: 2px solid var(--nvidia-gray-medium); | |
| background: var(--nvidia-gray-dark); | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| transition: all var(--transition-fast); | |
| font-family: inherit; | |
| font-weight: 500; | |
| clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--nvidia-green); | |
| background: var(--nvidia-black); | |
| box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.2); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 18px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--nvidia-green); | |
| font-size: 18px; | |
| } | |
| .filter-tabs { | |
| display: flex; | |
| gap: 6px; | |
| background: var(--nvidia-gray-dark); | |
| padding: 6px; | |
| clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); | |
| border: 2px solid var(--nvidia-gray-medium); | |
| } | |
| .filter-tab { | |
| padding: 10px 20px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: 14px; | |
| font-family: inherit; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .filter-tab.active { | |
| background: linear-gradient(135deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| color: var(--nvidia-black); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .sort-dropdown { | |
| padding: 12px 18px; | |
| border: 2px solid var(--nvidia-gray-medium); | |
| background: var(--nvidia-gray-dark); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: 14px; | |
| font-family: inherit; | |
| font-weight: 600; | |
| clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); | |
| } | |
| .sort-dropdown:focus { | |
| outline: none; | |
| border-color: var(--nvidia-green); | |
| box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.2); | |
| } | |
| /* Todo List */ | |
| .todo-list { | |
| list-style: none; | |
| margin-top: 24px; | |
| } | |
| .todo-item { | |
| background: linear-gradient(135deg, var(--nvidia-gray-dark) 0%, var(--nvidia-gray-medium) 100%); | |
| border: 2px solid var(--nvidia-gray-medium); | |
| clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); | |
| padding: 24px; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 20px; | |
| transition: all var(--transition-fast); | |
| cursor: move; | |
| animation: slideIn var(--transition-base) ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .todo-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 4px; | |
| background: linear-gradient(180deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| transform: scaleY(0); | |
| transition: transform var(--transition-fast); | |
| } | |
| .todo-item:hover::before { | |
| transform: scaleY(1); | |
| } | |
| .todo-item:hover { | |
| transform: translateX(4px); | |
| box-shadow: var(--shadow-glow); | |
| border-color: var(--nvidia-green); | |
| } | |
| .todo-item.dragging { | |
| opacity: 0.5; | |
| transform: rotate(2deg) scale(1.05); | |
| box-shadow: var(--shadow-glow-hover); | |
| } | |
| .todo-item.completed { | |
| opacity: 0.6; | |
| filter: grayscale(50%); | |
| } | |
| .todo-checkbox { | |
| width: 28px; | |
| height: 28px; | |
| border: 3px solid var(--nvidia-gray-medium); | |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 4px; | |
| background: var(--nvidia-gray-dark); | |
| } | |
| .todo-checkbox:hover { | |
| border-color: var(--nvidia-green); | |
| transform: scale(1.2) rotate(45deg); | |
| } | |
| .todo-checkbox.checked { | |
| background: linear-gradient(135deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| border-color: var(--nvidia-green); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .todo-checkbox.checked::after { | |
| content: '✓'; | |
| color: var(--nvidia-black); | |
| font-weight: 700; | |
| font-size: 16px; | |
| } | |
| .todo-content { | |
| flex: 1; | |
| } | |
| .todo-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 10px; | |
| } | |
| .todo-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| transition: all var(--transition-fast); | |
| letter-spacing: -0.3px; | |
| line-height: 1.4; | |
| text-transform: uppercase; | |
| } | |
| .todo-item.completed .todo-title { | |
| text-decoration: line-through; | |
| color: var(--text-tertiary); | |
| } | |
| .priority-indicator { | |
| padding: 6px 12px; | |
| clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .priority-indicator.low { | |
| background: linear-gradient(135deg, var(--priority-low) 0%, var(--nvidia-green-light) 100%); | |
| color: var(--nvidia-black); | |
| } | |
| .priority-indicator.medium { | |
| background: linear-gradient(135deg, var(--priority-medium) 0%, #FFB74D 100%); | |
| color: var(--nvidia-black); | |
| } | |
| .priority-indicator.high { | |
| background: linear-gradient(135deg, var(--priority-high) 0%, #BA68C8 100%); | |
| color: white; | |
| } | |
| .todo-description { | |
| color: var(--text-secondary); | |
| font-size: 15px; | |
| margin-bottom: 16px; | |
| line-height: 1.5; | |
| font-weight: 500; | |
| } | |
| .todo-meta { | |
| display: flex; | |
| gap: 20px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .todo-date, | |
| .todo-category { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--nvidia-green); | |
| font-size: 13px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .todo-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .action-btn { | |
| width: 40px; | |
| height: 40px; | |
| border: 2px solid var(--nvidia-gray-medium); | |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); | |
| background: var(--nvidia-gray-dark); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| } | |
| .action-btn:hover { | |
| transform: scale(1.15) rotate(45deg); | |
| } | |
| .action-btn:active { | |
| transform: scale(0.95) rotate(45deg); | |
| } | |
| .action-btn.edit:hover { | |
| background: linear-gradient(135deg, var(--nvidia-cyan) 0%, #00ACC1 100%); | |
| border-color: var(--nvidia-cyan); | |
| color: var(--nvidia-black); | |
| } | |
| .action-btn.delete:hover { | |
| background: linear-gradient(135deg, var(--nvidia-purple) 0%, #E91E63 100%); | |
| border-color: var(--nvidia-purple); | |
| color: white; | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 100px 20px; | |
| color: var(--text-tertiary); | |
| } | |
| .empty-state i { | |
| font-size: 80px; | |
| margin-bottom: 24px; | |
| opacity: 0.3; | |
| background: linear-gradient(135deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .empty-state h3 { | |
| font-size: 24px; | |
| margin-bottom: 12px; | |
| font-weight: 700; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .empty-state p { | |
| font-size: 16px; | |
| font-weight: 500; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| z-index: 1000; | |
| animation: fadeIn var(--transition-base) ease-out; | |
| } | |
| .modal.active { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| background: linear-gradient(135deg, var(--nvidia-gray-dark) 0%, var(--nvidia-gray-medium) 100%); | |
| clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); | |
| padding: 40px; | |
| max-width: 540px; | |
| width: 90%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| animation: slideUp var(--transition-base) ease-out; | |
| box-shadow: var(--shadow-glow-hover); | |
| border: 2px solid var(--nvidia-green); | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 32px; | |
| } | |
| .modal-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| letter-spacing: -1px; | |
| text-transform: uppercase; | |
| } | |
| .modal-close { | |
| width: 40px; | |
| height: 40px; | |
| border: none; | |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); | |
| background: var(--nvidia-gray-medium); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-close:hover { | |
| background: linear-gradient(135deg, var(--nvidia-purple) 0%, #E91E63 100%); | |
| color: white; | |
| transform: rotate(90deg) scale(1.1); | |
| } | |
| /* Toast */ | |
| .toast { | |
| position: fixed; | |
| bottom: 40px; | |
| right: 40px; | |
| background: linear-gradient(135deg, var(--nvidia-gray-dark) 0%, var(--nvidia-gray-medium) 100%); | |
| padding: 20px 24px; | |
| clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); | |
| box-shadow: var(--shadow-glow-hover); | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| transform: translateX(500px); | |
| transition: transform var(--transition-base) ease-out; | |
| z-index: 2000; | |
| border: 2px solid var(--nvidia-green); | |
| backdrop-filter: saturate(180%) blur(20px); | |
| -webkit-backdrop-filter: saturate(180%) blur(20px); | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast-icon { | |
| font-size: 24px; | |
| } | |
| .toast.success .toast-icon { | |
| color: var(--nvidia-green); | |
| filter: drop-shadow(0 0 10px rgba(118, 185, 0, 0.5)); | |
| } | |
| .toast.error .toast-icon { | |
| color: var(--nvidia-purple); | |
| filter: drop-shadow(0 0 10px rgba(156, 39, 176, 0.5)); | |
| } | |
| .toast.info .toast-icon { | |
| color: var(--nvidia-cyan); | |
| filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.5)); | |
| } | |
| .toast-message { | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* Built with link */ | |
| .built-with { | |
| color: var(--nvidia-green); | |
| font-size: 15px; | |
| text-decoration: none; | |
| transition: all var(--transition-fast); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| padding: 8px 16px; | |
| border: 2px solid var(--nvidia-green); | |
| clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); | |
| background: transparent; | |
| } | |
| .built-with:hover { | |
| background: linear-gradient(135deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| color: var(--nvidia-black); | |
| box-shadow: var(--shadow-glow); | |
| text-decoration: none; | |
| transform: scale(1.05); | |
| } | |
| /* Animations */ | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| position: static; | |
| } | |
| .header-content { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .stats-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .search-filter-bar { | |
| flex-direction: column; | |
| } | |
| .filter-tabs { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .todo-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .todo-actions { | |
| width: 100%; | |
| justify-content: flex-end; | |
| margin-top: 16px; | |
| } | |
| .modal-content { | |
| padding: 32px; | |
| } | |
| .toast { | |
| right: 20px; | |
| left: 20px; | |
| transform: translateY(100px); | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| } | |
| .logo { | |
| font-size: 28px; | |
| } | |
| .logo i { | |
| font-size: 32px; | |
| } | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--nvidia-black); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, var(--nvidia-green) 0%, var(--nvidia-accent) 100%); | |
| border-radius: 5px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, var(--nvidia-accent) 0%, var(--nvidia-green) 100%); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| /* Loading animation */ | |
| .loading { | |
| animation: pulse 1.5s ease-in-out infinite; | |
| } | |
| /* Glow effect on focus */ | |
| .glow:focus { | |
| box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.3), var(--shadow-glow); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-microchip"></i> | |
| <span>TaskForce</span> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="theme-toggle" onclick="toggleTheme()"> | |
| <i class="fas fa-bolt"></i> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| <div class="stats-container"> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="totalTasks">0</div> | |
| <div class="stat-label">Total Tasks</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="completedTasks">0</div> | |
| <div class="stat-label">Completed</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="pendingTasks">0</div> | |
| <div class="stat-label">Pending</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="completionRate">0%</div> | |
| <div class="stat-label">Performance</div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main-content"> | |
| <aside class="sidebar"> | |
| <form class="add-task-form" id="addTaskForm"> | |
| <h3>DEPLOY TASK</h3> | |
| <div class="form-group"> | |
| <label class="form-label">Mission Name</label> | |
| <input type="text" class="form-input" id="taskTitle" placeholder="Enter mission name..." required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Objective</label> | |
| <textarea class="form-textarea" id="taskDescription" placeholder="Define objectives..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Priority Level</label> | |
| <div class="priority-selector"> | |
| <button type="button" class="priority-btn low" data-priority="low">Low</button> | |
| <button type="button" class="priority-btn medium active" data-priority="medium">Medium</button> | |
| <button type="button" class="priority-btn high" data-priority="high">High</button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Deadline</label> | |
| <input type="date" class="form-input" id="taskDate"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Sector</label> | |
| <div class="category-tags"> | |
| <span class="category-tag active" data-category="personal">Personal</span> | |
| <span class="category-tag" data-category="work">Work</span> | |
| <span class="category-tag" data-category="shopping">Shopping</span> | |
| <span class="category-tag" data-category="health">Health</span> | |
| <span class="category-tag" data-category="other">Other</span> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-rocket"></i> | |
| Deploy Task | |
| </button> | |
| </form> | |
| <div style="margin-top: 32px;"> | |
| <button class="btn btn-primary" onclick="clearCompleted()" style="background: linear-gradient(135deg, var(--nvidia-purple) 0%, #E91E63 100%);"> | |
| <i class="fas fa-skull-crossbones"></i> | |
| Purge Completed | |
| </button> | |
| </div> | |
| </aside> | |
| <section class="content-area"> | |
| <div class="search-filter-bar"> | |
| <div class="search-box"> | |
| <i class="fas fa-search search-icon"></i> | |
| <input type="text" class="search-input" id="searchInput" placeholder="Search missions..."> | |
| </div> | |
| <div class="filter-tabs"> | |
| <button class="filter-tab active" data-filter="all">All</button> | |
| <button class="filter-tab" data-filter="active">Active</button> | |
| <button class="filter-tab" data-filter="completed">Done</button> | |
| </div> | |
| <select class="sort-dropdown" id="sortDropdown"> | |
| <option value="newest">Latest</option> | |
| <option value="oldest">Oldest</option> | |
| <option value="priority">Priority</option> | |
| <option value="date">Deadline</option> | |
| </select> | |
| </div> | |
| <ul class="todo-list" id="todoList"> | |
| <!-- Tasks will be dynamically added here --> | |
| </ul> | |
| <div class="empty-state" id="emptyState" style="display: none;"> | |
| <i class="fas fa-robot"></i> | |
| <h3>No Missions</h3> | |
| <p>Deploy your first mission!</p> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Edit Modal --> | |
| <div class="modal" id="editModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">Edit Mission</h2> | |
| <button class="modal-close" onclick="closeEditModal()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="editTaskForm"> | |
| <input type="hidden" id="editTaskId"> | |
| <div class="form-group"> | |
| <label class="form-label">Mission Name</label> | |
| <input type="text" class="form-input" id="editTaskTitle" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Objective</label> | |
| <textarea class="form-textarea" id="editTaskDescription"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Priority Level</label> | |
| <div class="priority-selector" id="editPrioritySelector"> | |
| <button type="button" class="priority-btn low" data-priority="low">Low</button> | |
| <button type="button" class |