First Commit

public/index.html

@@ -0,0 +1,67 @@
+<!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>
+    <!-- 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>
+    </div>
+
+    <!-- Overlay -->
+    <div class="overlay" id="overlay"></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>
+        </header>
+
+        <div class="tasks-container" id="tasks-container">
+            <div class="loading">
+                <div class="spinner"></div>
+                <p>Loading your goals...</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>