Color on right - Better Handling

public/index.html

@@ -16,7 +16,7 @@
         <div class="context-menu-item danger" id="context-delete">&#128465; Delete</div>
     </div>
 
-    <!-- Modal for creating/editing tasks -->
+    <!-- Modal -->
     <div class="modal" id="modal">
         <div class="modal-content">
             <div class="modal-header">
@@ -42,7 +42,7 @@
                     </label>
                 </div>
 
-                <div class="form-row">
+                <div class="form-row form-row-2">
                     <div class="form-group">
                         <label for="task-size">Size *</label>
                         <select id="task-size" required>
@@ -52,6 +52,30 @@
                         </select>
                     </div>
 
+                    <div class="form-group">
+                        <label for="task-due-date">Due Date</label>
+                        <input type="date" id="task-due-date">
+                    </div>
+                </div>
+
+                <div class="form-row form-row-2">
+                    <div class="form-group">
+                        <label>Color</label>
+                        <div class="color-picker-row">
+                            <input type="color" id="task-color" value="#6366f1" class="color-input">
+                            <div class="color-presets" id="color-presets">
+                                <span class="color-dot" data-color="#6366f1" style="background:#6366f1"></span>
+                                <span class="color-dot" data-color="#059669" style="background:#059669"></span>
+                                <span class="color-dot" data-color="#0284c7" style="background:#0284c7"></span>
+                                <span class="color-dot" data-color="#e11d48" style="background:#e11d48"></span>
+                                <span class="color-dot" data-color="#d97706" style="background:#d97706"></span>
+                                <span class="color-dot" data-color="#7c3aed" style="background:#7c3aed"></span>
+                                <span class="color-dot" data-color="#0891b2" style="background:#0891b2"></span>
+                                <span class="color-dot" data-color="#c026d3" style="background:#c026d3"></span>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="form-group">
                         <label for="task-reward">Reward</label>
                         <input type="text" id="task-reward" placeholder="Optional">
@@ -65,6 +89,8 @@
 
     <!-- Main Content -->
     <div class="container">
+        <div class="greeting-banner" id="greeting-banner"></div>
+
         <header>
             <h1>Learning Progress Tracker</h1>
             <div class="header-actions">
@@ -79,7 +105,6 @@
             </div>
         </header>
 
-        <!-- Overall Progress - Active view only -->
         <div class="overall-progress" id="overall-progress">
             <div class="overall-header">
                 <span>Overall Progress</span>