91 lines
3.5 KiB
HTML
91 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Learning Progress Tracker</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Context Menu -->
|
|
<div class="context-menu" id="context-menu">
|
|
<div class="context-menu-item" id="context-edit">✏️ Edit</div>
|
|
<div class="context-menu-item" id="context-promote" style="display: none;">⬆️ Promote to Task</div>
|
|
<div class="context-menu-item danger" id="context-delete">🗑️ Delete</div>
|
|
</div>
|
|
|
|
<!-- Modal for creating/editing tasks -->
|
|
<div class="modal" id="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title">Create New Goal</h2>
|
|
<button class="close-btn" id="close-modal">×</button>
|
|
</div>
|
|
|
|
<form id="task-form">
|
|
<input type="hidden" id="edit-task-id">
|
|
<input type="hidden" id="edit-parent-id">
|
|
|
|
<div class="form-group">
|
|
<label for="task-title">Goal Title *</label>
|
|
<input type="text" id="task-title" placeholder="e.g., Learn JavaScript" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="task-description">Description</label>
|
|
<textarea id="task-description" placeholder="What do you want to achieve?" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-size">Size *</label>
|
|
<select id="task-size" required>
|
|
<option value="small">Small (10%)</option>
|
|
<option value="medium" selected>Medium (25%)</option>
|
|
<option value="large">Large (50%)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="task-reward">Reward</label>
|
|
<input type="text" id="task-reward" placeholder="Optional">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary" id="submit-btn">Add Goal</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container">
|
|
<header>
|
|
<h1>Learning Progress Tracker</h1>
|
|
<button class="btn-add" id="open-modal">+ New Goal</button>
|
|
</header>
|
|
|
|
<!-- Overall Progress - Always Visible -->
|
|
<div class="overall-progress" id="overall-progress">
|
|
<div class="overall-header">
|
|
<span>Overall Progress</span>
|
|
<span id="overall-percentage">0%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="overall-progress-fill" style="width: 0%"></div>
|
|
</div>
|
|
<div class="task-counter" id="task-counter">
|
|
<span id="completed-count">0</span> / <span id="total-count">0</span> tasks completed
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tasks-container" id="tasks-container">
|
|
<div class="loading">
|
|
<div class="spinner"></div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |