2 files changed, 147 insertions, 0 deletions
diff --git a/web/static/css/styles.css b/web/static/css/styles.css
new file mode 100644
index 0000000..aee6ee3
--- /dev/null
+++ b/web/static/css/styles.css
@@ -0,0 +1,70 @@
+/* Custom styles for Personal Dashboard */
+
+/* Line clamp utility for truncating text */
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Loading spinner */
+.spinner {
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #3b82f6;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    display: inline-block;
+    margin-left: 8px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Smooth transitions */
+* {
+    transition-property: background-color, border-color, color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* Print styles */
+@media print {
+    .no-print {
+        display: none;
+    }
+}
+
+/* Dark mode support (optional) */
+@media (prefers-color-scheme: dark) {
+    /* Uncomment to enable dark mode */
+    /*
+    body {
+        background-color: #1a202c;
+        color: #e2e8f0;
+    }
+    */
+}
diff --git a/web/static/js/app.js b/web/static/js/app.js
new file mode 100644
index 0000000..a96c05d
--- /dev/null
+++ b/web/static/js/app.js
@@ -0,0 +1,77 @@
+// Personal Dashboard JavaScript
+
+// Auto-refresh every 5 minutes
+const AUTO_REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes in milliseconds
+
+// Initialize auto-refresh on page load
+document.addEventListener('DOMContentLoaded', function() {
+    // Set up auto-refresh
+    setInterval(autoRefresh, AUTO_REFRESH_INTERVAL);
+});
+
+// Auto-refresh function
+async function autoRefresh() {
+    console.log('Auto-refreshing data...');
+    try {
+        const response = await fetch('/api/refresh', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            // Reload the page to show updated data
+            window.location.reload();
+        }
+    } catch (error) {
+        console.error('Auto-refresh failed:', error);
+    }
+}
+
+// Manual refresh function
+async function refreshData() {
+    const button = event.target;
+    const originalText = button.textContent;
+
+    // Show loading state
+    button.disabled = true;
+    button.innerHTML = 'Refreshing...<span class="spinner"></span>';
+
+    try {
+        const response = await fetch('/api/refresh', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            // Update last updated time
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('en-US', {
+                hour: 'numeric',
+                minute: '2-digit'
+            });
+            document.getElementById('last-updated').textContent = timeString;
+
+            // Reload the page to show updated data
+            setTimeout(() => {
+                window.location.reload();
+            }, 500);
+        } else {
+            throw new Error('Refresh failed');
+        }
+    } catch (error) {
+        console.error('Refresh failed:', error);
+        alert('Failed to refresh data. Please try again.');
+        button.disabled = false;
+        button.textContent = originalText;
+    }
+}
+
+// Filter tasks by status
+function filterTasks(status) {
+    // This will be implemented in Phase 2
+    console.log('Filter tasks:', status);
+}
+
+// Toggle task completion
+function toggleTask(taskId) {
+    // This will be implemented in Phase 2
+    console.log('Toggle task:', taskId);
+}