Docker/Learning-Tracker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

latest version

Browse Source
This commit is contained in:
Honey committed 2026-02-13 11:24:43 +01:00
1 parent 907c293a68
commit fa169b880c
5 files changed
+808 -500
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+64 -40
View File
@@ -7,57 +7,81 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Sidebar for creating tasks -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>Create New Goal</h2>
<button class="close-btn" id="close-sidebar">&times;</button>
</div>
<form id="task-form" class="sidebar-content">
<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?"></textarea>
</div>
<div class="form-group">
<label for="task-size">Goal Size *</label>
<select id="task-size" required>
<option value="small">Small Goal (10% progress weight)</option>
<option value="medium" selected>Medium Goal (25% progress weight)</option>
<option value="large">Large Goal (50% progress weight)</option>
</select>
</div>
<div class="form-group">
<label for="task-reward">Reward (Optional)</label>
<input type="text" id="task-reward" placeholder="e.g., Buy a new book">
</div>
<button type="submit" class="btn-primary">Add Goal</button>
</form>
<!-- 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>
<!-- Overlay -->
<div class="overlay" id="overlay"></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">&times;</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>
<p>Track your learning goals and celebrate your achievements!</p>
<button class="btn-add-task" id="open-sidebar">+ New Goal</button>
<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 your goals...</p>
<p>Loading...</p>
</div>
</div>
</div>