eh meh working prototype i guess

templates/dashboard.html

@@ -0,0 +1,124 @@
+{% extends "layout.html" %}
+{% block content %}
+    <!-- Active Timer Section -->
+    {% if current_entry %}
+    <div class="card active-section">
+        <h3 style="text-align: center; color: {{ current_entry.activity_color }}">
+            Currently Tracking: {{ current_entry.activity_name }}
+        </h3>
+        
+        {% if current_entry.note %}
+            <p style="text-align: center; color: #666; font-style: italic;">"{{ current_entry.note }}"</p>
+        {% endif %}
+
+        <div class="timer-display" id="timer">00:00:00</div>
+        
+        <!-- Tasks for current activity -->
+        {% if tasks %}
+        <div style="margin: 1rem 0; padding: 1rem; background: rgba(255,255,255,0.7); border-radius: 5px;">
+            <h4>Tasks related to {{ current_entry.activity_name }}:</h4>
+            {% for task in tasks %}
+                <div style="margin-bottom: 5px;">
+                    <input type="checkbox" id="task_{{ task._id }}" 
+                           onchange="completeTask('{{ task.name }}', '{{ current_entry._id }}', this)">
+                    <label for="task_{{ task._id }}">{{ task.name }}</label>
+                </div>
+            {% endfor %}
+        </div>
+        {% endif %}
+
+        <form action="{{ url_for('stop_timer') }}" method="POST" style="text-align: center;">
+            <button type="submit" class="btn btn-danger" style="font-size: 1.2rem; width: 100%;">Stop Activity</button>
+        </form>
+
+        <script>
+            // Timer Logic
+            const startTime = new Date("{{ current_entry.start_time }}").getTime();
+            
+            function updateTimer() {
+                const now = new Date().getTime();
+                const diff = now - startTime;
+                
+                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+                
+                document.getElementById("timer").innerHTML = 
+                    (hours < 10 ? "0" + hours : hours) + ":" +
+                    (minutes < 10 ? "0" + minutes : minutes) + ":" +
+                    (seconds < 10 ? "0" + seconds : seconds);
+            }
+            setInterval(updateTimer, 1000);
+            updateTimer(); // run immediately
+
+            // AJAX for Tasks
+            function completeTask(name, entryId, checkbox) {
+                if(!checkbox.checked) return; // Only track completion for now
+                
+                const formData = new FormData();
+                formData.append('task_name', name);
+                formData.append('entry_id', entryId);
+
+                fetch('/complete_task', { method: 'POST', body: formData })
+                .then(r => r.json())
+                .then(data => {
+                    checkbox.disabled = true; // Prevent double logging
+                    checkbox.parentElement.style.textDecoration = "line-through";
+                });
+            }
+        </script>
+    </div>
+    {% endif %}
+
+    <!-- Start Activity Section -->
+    <div class="activity-grid">
+        {% for act in activities %}
+            <!-- Clicking opens a small modal or submits form directly. Let's do a form with a prompt for note -->
+            <div class="activity-card" 
+                 style="background-color: {{ act.color }}"
+                 onclick="startActivity('{{ act._id }}', '{{ act.name }}')">
+                <span>{{ act.name }}</span>
+            </div>
+        {% endfor %}
+        
+        <!-- Add New Button -->
+        <div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
+            <span>+ New Activity</span>
+        </div>
+    </div>
+
+    <!-- Hidden Form for Starting Activity with Note -->
+    <form id="startForm" method="POST" style="display:none;">
+        <input type="hidden" name="note" id="startNote">
+    </form>
+
+    <script>
+        function startActivity(id, name) {
+            let note = prompt("Start " + name + "?\nAdd a note (optional):");
+            if (note === null) return; // Cancelled
+            
+            let form = document.getElementById('startForm');
+            form.action = "/toggle_timer/" + id;
+            document.getElementById('startNote').value = note;
+            form.submit();
+        }
+    </script>
+
+    <!-- Create Activity Form -->
+    <div id="newActivityForm" class="card" style="display:none; margin-top: 2rem;">
+        <h3>Create New Activity Category</h3>
+        <form action="{{ url_for('add_activity') }}" method="POST">
+            <label>Name</label>
+            <input type="text" name="name" required placeholder="e.g. Household">
+            
+            <label>Color</label>
+            <input type="color" name="color" value="#3498db" style="width:100%; height:40px; border:none;">
+            
+            <label>Default Tasks (comma separated)</label>
+            <input type="text" name="tasks" placeholder="e.g. Laundry, Dishes, Trash">
+            
+            <button type="submit" class="btn">Create</button>
+            <button type="button" class="btn" style="background: #7f8c8d" onclick="this.parentElement.parentElement.style.display='none'">Cancel</button>
+        </form>
+    </div>
+{% endblock %}