mirror of
https://github.com/blasten/turn.js.git
synced 2026-05-28 06:08:14 +08:00
a9c7178a9c
Build a comprehensive project tracking webapp with intuitive interface for managing team projects, tasks, and milestones. Features: - Dashboard with visual overview of all projects - Color-coded status indicators (on-track, at-risk, blocked, completed) - Project management with full CRUD operations - Task tracking with assignees and due dates - Milestone tracking with achievement status - Local storage for data persistence - Responsive design for all screen sizes - Sample data included for demonstration Technical implementation: - Vanilla JavaScript (ES6+) with no framework dependencies - Modern CSS with Grid and Flexbox layouts - Clean, maintainable code structure - Browser-based local storage for persistence The webapp provides team leaders with quick visibility into project health and helps identify risks that need immediate attention.
215 lines
8.7 KiB
HTML
215 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Team Project Tracker</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div class="header-content">
|
|
<h1>🎯 Team Project Tracker</h1>
|
|
<button id="newProjectBtn" class="btn btn-primary">+ New Project</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Dashboard View -->
|
|
<section id="dashboardView" class="view active">
|
|
<div class="dashboard-header">
|
|
<h2>Dashboard Overview</h2>
|
|
<div class="stats-cards">
|
|
<div class="stat-card on-track">
|
|
<div class="stat-value" id="onTrackCount">0</div>
|
|
<div class="stat-label">On Track</div>
|
|
</div>
|
|
<div class="stat-card at-risk">
|
|
<div class="stat-value" id="atRiskCount">0</div>
|
|
<div class="stat-label">At Risk</div>
|
|
</div>
|
|
<div class="stat-card blocked">
|
|
<div class="stat-value" id="blockedCount">0</div>
|
|
<div class="stat-label">Blocked</div>
|
|
</div>
|
|
<div class="stat-card total">
|
|
<div class="stat-value" id="totalCount">0</div>
|
|
<div class="stat-label">Total Projects</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="projects-grid" id="projectsGrid">
|
|
<!-- Projects will be dynamically inserted here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Project Detail View -->
|
|
<section id="projectDetailView" class="view">
|
|
<div class="detail-header">
|
|
<button id="backToDashboard" class="btn btn-secondary">← Back to Dashboard</button>
|
|
<div class="detail-actions">
|
|
<button id="editProjectBtn" class="btn btn-secondary">Edit Project</button>
|
|
<button id="deleteProjectBtn" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-detail" id="projectDetail">
|
|
<!-- Project details will be dynamically inserted here -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal for New/Edit Project -->
|
|
<div id="projectModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">New Project</h3>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<form id="projectForm">
|
|
<div class="form-group">
|
|
<label for="projectName">Project Name *</label>
|
|
<input type="text" id="projectName" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="projectDescription">Description</label>
|
|
<textarea id="projectDescription" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="projectStatus">Status *</label>
|
|
<select id="projectStatus" required>
|
|
<option value="on-track">On Track</option>
|
|
<option value="at-risk">At Risk</option>
|
|
<option value="blocked">Blocked</option>
|
|
<option value="completed">Completed</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="projectOwner">Project Owner</label>
|
|
<input type="text" id="projectOwner">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="projectStartDate">Start Date</label>
|
|
<input type="date" id="projectStartDate">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="projectEndDate">Target End Date</label>
|
|
<input type="date" id="projectEndDate">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save Project</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal for Tasks -->
|
|
<div id="taskModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="taskModalTitle">New Task</h3>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<form id="taskForm">
|
|
<div class="form-group">
|
|
<label for="taskName">Task Name *</label>
|
|
<input type="text" id="taskName" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="taskDescription">Description</label>
|
|
<textarea id="taskDescription" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="taskStatus">Status *</label>
|
|
<select id="taskStatus" required>
|
|
<option value="todo">To Do</option>
|
|
<option value="in-progress">In Progress</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="blocked">Blocked</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="taskAssignee">Assignee</label>
|
|
<input type="text" id="taskAssignee">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="taskDueDate">Due Date</label>
|
|
<input type="date" id="taskDueDate">
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save Task</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal for Milestones -->
|
|
<div id="milestoneModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="milestoneModalTitle">New Milestone</h3>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<form id="milestoneForm">
|
|
<div class="form-group">
|
|
<label for="milestoneName">Milestone Name *</label>
|
|
<input type="text" id="milestoneName" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="milestoneDescription">Description</label>
|
|
<textarea id="milestoneDescription" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="milestoneDate">Target Date *</label>
|
|
<input type="date" id="milestoneDate" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="milestoneStatus">Status *</label>
|
|
<select id="milestoneStatus" required>
|
|
<option value="pending">Pending</option>
|
|
<option value="achieved">Achieved</option>
|
|
<option value="missed">Missed</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save Milestone</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|