Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SprintFlow - Agile Project Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .kanban-column { min-height: 500px; } | |
| .task-card { transition: all 0.2s ease; } | |
| .task-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } | |
| .scrollbar-hide::-webkit-scrollbar { display: none; } | |
| .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } | |
| .dragging { opacity: 0.5; } | |
| .sidebar-link:hover { background: linear-gradient(90deg, rgba(99,102,241,0.1) 0%, transparent 100%); } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <aside id="sidebar" class="bg-white border-r border-gray-200 w-64 flex-shrink-0 hidden md:flex flex-col transition-all duration-300"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center"> | |
| <i data-lucide="layout-grid" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <div> | |
| <h1 class="font-bold text-xl text-gray-900">SprintFlow</h1> | |
| <p class="text-xs text-gray-500">Agile Dashboard</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto p-4 space-y-1"> | |
| <a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-indigo-600 bg-indigo-50 rounded-xl font-medium"> | |
| <i data-lucide="kanban" class="w-5 h-5"></i> | |
| <span>Board</span> | |
| </a> | |
| <a href="#" onclick="showSprintPlanner()" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-600 hover:text-gray-900 rounded-xl font-medium transition-colors"> | |
| <i data-lucide="route" class="w-5 h-5"></i> | |
| <span>Sprint Planning</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-600 hover:text-gray-900 rounded-xl font-medium transition-colors"> | |
| <i data-lucide="bar-chart-2" class="w-5 h-5"></i> | |
| <span>Analytics</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-600 hover:text-gray-900 rounded-xl font-medium transition-colors"> | |
| <i data-lucide="users" class="w-5 h-5"></i> | |
| <span>Team</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-600 hover:text-gray-900 rounded-xl font-medium transition-colors"> | |
| <i data-lucide="calendar" class="w-5 h-5"></i> | |
| <span>Timeline</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-600 hover:text-gray-900 rounded-xl font-medium transition-colors"> | |
| <i data-lucide="folder" class="w-5 h-5"></i> | |
| <span>Files</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center gap-3 px-4 py-3 text-gray-600 hover:text-gray-900 rounded-xl font-medium transition-colors"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| <span>Settings</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-4"> | |
| <button id="mobile-menu-btn" class="md:hidden p-2 hover:bg-gray-100 rounded-lg"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| <div class="relative"> | |
| <i data-lucide="search" class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| <input type="text" placeholder="Search tasks, sprints..." | |
| class="pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64 text-sm"> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="hidden sm:flex items-center gap-2 px-4 py-2 bg-gray-50 rounded-xl border border-gray-200"> | |
| <i data-lucide="clock" class="w-4 h-4 text-gray-500"></i> | |
| <span class="text-sm font-medium text-gray-700">Sprint 24 ends in 5 days</span> | |
| </div> | |
| <button class="relative p-2 hover:bg-gray-100 rounded-xl transition-colors"> | |
| <i data-lucide="bell" class="w-5 h-5 text-gray-600"></i> | |
| <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="flex-1 overflow-y-auto p-6"> | |
| <!-- Stats Row --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> | |
| <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="p-2 bg-blue-50 rounded-lg"> | |
| <i data-lucide="target" class="w-5 h-5 text-blue-600"></i> | |
| </div> | |
| <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">+12%</span> | |
| </div> | |
| <p class="text-2xl font-bold text-gray-900">24/32</p> | |
| <p class="text-sm text-gray-500">Tasks Completed</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="p-2 bg-purple-50 rounded-lg"> | |
| <i data-lucide="trending-up" class="w-5 h-5 text-purple-600"></i> | |
| </div> | |
| <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">On Track</span> | |
| </div> | |
| <p class="text-2xl font-bold text-gray-900">75%</p> | |
| <p class="text-sm text-gray-500">Sprint Progress</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="p-2 bg-orange-50 rounded-lg"> | |
| <i data-lucide="clock" class="w-5 h-5 text-orange-600"></i> | |
| </div> | |
| <span class="text-xs font-medium text-orange-600 bg-orange-50 px-2 py-1 rounded-full">5 days left</span> | |
| </div> | |
| <p class="text-2xl font-bold text-gray-900">42h</p> | |
| <p class="text-sm text-gray-500">Time Tracked</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="p-2 bg-green-50 rounded-lg"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i> | |
| </div> | |
| <span class="text-xs font-medium text-gray-600 bg-gray-100 px-2 py-1 rounded-full">This week</span> | |
| </div> | |
| <p class="text-2xl font-bold text-gray-900">8</p> | |
| <p class="text-sm text-gray-500">Design Reviews</p> | |
| </div> | |
| </div> | |
| <!-- Sprint Controls --> | |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6"> | |
| <div class="flex items-center gap-3"> | |
| <h2 class="text-xl font-bold text-gray-900">Sprint 24: Q4 Design System</h2> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-medium">Active</span> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button onclick="openTaskModal()" class="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition-colors font-medium shadow-lg shadow-indigo-200"> | |
| <i data-lucide="plus" class="w-4 h-4"></i> | |
| <span>New Task</span> | |
| </button> | |
| <button class="p-2 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors"> | |
| <i data-lucide="filter" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| <button class="p-2 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors"> | |
| <i data-lucide="more-horizontal" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Kanban Board --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- To Do --> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-gray-400"></div> | |
| <h3 class="font-semibold text-gray-700">To Do</h3> | |
| <span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full text-xs font-medium" id="count-todo">3</span> | |
| </div> | |
| <button class="p-1 hover:bg-gray-100 rounded"> | |
| <i data-lucide="plus" class="w-4 h-4 text-gray-400"></i> | |
| </button> | |
| </div> | |
| <div class="kanban-column space-y-3" id="todo-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="todo"> | |
| <!-- Tasks injected via JS --> | |
| </div> | |
| </div> | |
| <!-- In Progress --> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500"></div> | |
| <h3 class="font-semibold text-gray-700">In Progress</h3> | |
| <span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded-full text-xs font-medium" id="count-progress">2</span> | |
| </div> | |
| <button class="p-1 hover:bg-gray-100 rounded"> | |
| <i data-lucide="plus" class="w-4 h-4 text-gray-400"></i> | |
| </button> | |
| </div> | |
| <div class="kanban-column space-y-3" id="progress-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="progress"> | |
| <!-- Tasks injected via JS --> | |
| </div> | |
| </div> | |
| <!-- Review --> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-orange-500"></div> | |
| <h3 class="font-semibold text-gray-700">Review</h3> | |
| <span class="px-2 py-0.5 bg-orange-50 text-orange-600 rounded-full text-xs font-medium" id="count-review">2</span> | |
| </div> | |
| <button class="p-1 hover:bg-gray-100 rounded"> | |
| <i data-lucide="plus" class="w-4 h-4 text-gray-400"></i> | |
| </button> | |
| </div> | |
| <div class="kanban-column space-y-3" id="review-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="review"> | |
| <!-- Tasks injected via JS --> | |
| </div> | |
| </div> | |
| <!-- Done --> | |
| <div class="flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <h3 class="font-semibold text-gray-700">Done</h3> | |
| <span class="px-2 py-0.5 bg-green-50 text-green-600 rounded-full text-xs font-medium" id="count-done">4</span> | |
| </div> | |
| <button class="p-1 hover:bg-gray-100 rounded"> | |
| <i data-lucide="check" class="w-4 h-4 text-gray-400"></i> | |
| </button> | |
| </div> | |
| <div class="kanban-column space-y-3" id="done-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="done"> | |
| <!-- Tasks injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Section: Chart & Activity --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Burndown Chart --> | |
| <div class="lg:col-span-2 bg-white p-6 rounded-2xl border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-bold text-gray-900">Sprint Burndown</h3> | |
| <select class="text-sm border border-gray-200 rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>This Sprint</option> | |
| <option>Last Sprint</option> | |
| </select> | |
| </div> | |
| <canvas id="burndownChart" height="250"></canvas> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm"> | |
| <h3 class="font-bold text-gray-900 mb-4">Recent Activity</h3> | |
| <div class="space-y-4" id="activity-feed"> | |
| <!-- Activity items injected via JS --> | |
| </div> | |
| <button class="w-full mt-4 py-2 text-sm text-indigo-600 font-medium hover:bg-indigo-50 rounded-lg transition-colors"> | |
| View All Activity | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Sprint Planning View (Hidden by default) --> | |
| <main id="sprintPlannerView" class="flex-1 overflow-y-auto p-6 hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Header --> | |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-900">Sprint Planning & Auto-Generation</h2> | |
| <p class="text-gray-500 mt-1">Define goals, break down tasks, and auto-generate sprints</p> | |
| </div> | |
| <button onclick="showBoard()" class="flex items-center gap-2 px-4 py-2 border border-gray-200 text-gray-700 rounded-xl hover:bg-gray-50 font-medium transition-colors"> | |
| <i data-lucide="arrow-left" class="w-4 h-4"></i> | |
| <span>Back to Board</span> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column: Goals & Tasks --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Project Goals --> | |
| <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-gray-900 flex items-center gap-2"> | |
| <i data-lucide="target" class="w-5 h-5 text-indigo-600"></i> | |
| Project Goals | |
| </h3> | |
| <button onclick="addGoal()" class="text-sm text-indigo-600 font-medium hover:text-indigo-700"> | |
| + Add Goal | |
| </button> | |
| </div> | |
| <div id="goalsList" class="space-y-3"> | |
| <!-- Goals injected via JS --> | |
| </div> | |
| </div> | |
| <!-- Task Breakdown --> | |
| <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-gray-900 flex items-center gap-2"> | |
| <i data-lucide="list-todo" class="w-5 h-5 text-blue-600"></i> | |
| Task Backlog | |
| </h3> | |
| <button onclick="addBacklogTask()" class="text-sm text-indigo-600 font-medium hover:text-indigo-700"> | |
| + Add Task | |
| </button> | |
| </div> | |
| <div id="backlogTasks" class="space-y-2 max-h-96 overflow-y-auto pr-2"> | |
| <!-- Backlog tasks injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: Configuration & Generation --> | |
| <div class="space-y-6"> | |
| <!-- Team Configuration --> | |
| <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm"> | |
| <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2"> | |
| <i data-lucide="users" class="w-5 h-5 text-purple-600"></i> | |
| Team Configuration | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Sprint Duration</label> | |
| <select id="sprintDuration" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"> | |
| <option value="1">1 Week</option> | |
| <option value="2" selected>2 Weeks</option> | |
| <option value="3">3 Weeks</option> | |
| <option value="4">4 Weeks</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Team Velocity (pts/sprint)</label> | |
| <input type="number" id="teamVelocity" value="40" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Buffer %</label> | |
| <input type="number" id="bufferPercent" value="20" min="0" max="50" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"> | |
| <p class="text-xs text-gray-500 mt-1">Reserve capacity for unexpected work</p> | |
| </div> | |
| <div class="pt-2 border-t border-gray-100"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-600">Effective Capacity:</span> | |
| <span class="font-semibold text-gray-900" id="effectiveCapacity">32 pts</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Total Backlog:</span> | |
| <span class="font-semibold text-gray-900" id="totalBacklogPoints">0 pts</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Auto-Generate Button --> | |
| <button onclick="generateSprints()" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl font-semibold shadow-lg shadow-indigo-200 hover:shadow-xl hover:scale-[1.02] transition-all flex items-center justify-center gap-2"> | |
| <i data-lucide="wand-2" class="w-5 h-5"></i> | |
| Auto-Generate Sprints | |
| </button> | |
| <!-- Generated Sprints Preview --> | |
| <div id="generatedSprints" class="hidden space-y-3"> | |
| <h3 class="font-bold text-gray-900 flex items-center gap-2"> | |
| <i data-lucide="layers" class="w-5 h-5 text-green-600"></i> | |
| Generated Sprints | |
| </h3> | |
| <div id="sprintsPreview" class="space-y-3"> | |
| <!-- Generated sprints injected via JS --> | |
| </div> | |
| <button onclick="applyGeneratedSprints()" class="w-full py-2 bg-green-600 text-white rounded-xl font-medium hover:bg-green-700 transition-colors"> | |
| Apply to Project | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Task Modal --> | |
| <div id="taskModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl transform transition-all scale-100"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Create New Task</h3> | |
| <button onclick="closeTaskModal()" class="p-2 hover:bg-gray-100 rounded-lg"> | |
| <i data-lucide="x" class="w-5 h-5 text-gray-500"></i> | |
| </button> | |
| </div> | |
| <form id="newTaskForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Task Title</label> | |
| <input type="text" id="taskTitle" required class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g., Design homepage hero section"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Type</label> | |
| <select id="taskType" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="design">Design</option> | |
| <option value="dev">Development</option> | |
| <option value="bug">Bug Fix</option> | |
| <option value="research">Research</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label> | |
| <select id="taskPriority" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="low">Low</option> | |
| <option value="medium" selected>Medium</option> | |
| <option value="high">High</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Assignee</label> | |
| <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide" id="assigneeList"> | |
| <!-- Assignees injected via JS --> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="taskDesc" rows="3" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Add details..."></textarea> | |
| </div> | |
| <div class="flex gap-3 pt-2"> | |
| <button type="button" onclick="closeTaskModal()" class="flex-1 px-4 py-2 border border-gray-200 text-gray-700 rounded-xl hover:bg-gray-50 font-medium transition-colors"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-medium transition-colors"> | |
| Create Task | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Goal Modal --> | |
| <div id="goalModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Add Project Goal</h3> | |
| <button onclick="closeGoalModal()" class="p-2 hover:bg-gray-100 rounded-lg"> | |
| <i data-lucide="x" class="w-5 h-5 text-gray-500"></i> | |
| </button> | |
| </div> | |
| <form id="goalForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Goal Title</label> | |
| <input type="text" id="goalTitle" required class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g., Launch Mobile App v1.0"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="goalDesc" rows="2" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Describe the goal..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label> | |
| <select id="goalPriority" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="high">High</option> | |
| <option value="medium" selected>Medium</option> | |
| <option value="low">Low</option> | |
| </select> | |
| </div> | |
| <div class="flex gap-3 pt-2"> | |
| <button type="button" onclick="closeGoalModal()" class="flex-1 px-4 py-2 border border-gray-200 text-gray-700 rounded-xl hover:bg-gray-50 font-medium">Cancel</button> | |
| <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-medium">Add Goal</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Backlog Task Modal --> | |
| <div id="backlogModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Add Backlog Task</h3> | |
| <button onclick="closeBacklogModal()" class="p-2 hover:bg-gray-100 rounded-lg"> | |
| <i data-lucide="x" class="w-5 h-5 text-gray-500"></i> | |
| </button> | |
| </div> | |
| <form id="backlogForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Task Title</label> | |
| <input type="text" id="backlogTitle" required class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g., Implement user authentication"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Story Points</label> | |
| <select id="backlogPoints" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="1">1 Point</option> | |
| <option value="2">2 Points</option> | |
| <option value="3" selected>3 Points</option> | |
| <option value="5">5 Points</option> | |
| <option value="8">8 Points</option> | |
| <option value="13">13 Points</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Related Goal</label> | |
| <select id="backlogGoal" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="">No Goal</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Type</label> | |
| <select id="backlogType" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="dev">Development</option> | |
| <option value="design">Design</option> | |
| <option value="research">Research</option> | |
| <option value="testing">Testing</option> | |
| </select> | |
| </div> | |
| <div class="flex gap-3 pt-2"> | |
| <button type="button" onclick="closeBacklogModal()" class="flex-1 px-4 py-2 border border-gray-200 text-gray-700 rounded-xl hover:bg-gray-50 font-medium">Cancel</button> | |
| <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 font-medium">Add Task</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |