Auto commit: 2025-12-05T10:18:40.371Z

assets/css/custom.css

@@ -0,0 +1,176 @@
+
+/* Import Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #4F46E5;
+    --secondary-color: #10B981;
+    --light-bg: #F3F4F6;
+    --light-surface: #FFFFFF;
+    --light-text: #111827;
+    --dark-bg: #1F2937;
+    --dark-surface: #374151;
+    --dark-text: #F9FAFB;
+    --border-radius: 0.5rem;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.light-mode {
+    background-color: var(--light-bg);
+    color: var(--light-text);
+}
+
+body.dark-mode {
+    background-color: var(--dark-bg);
+    color: var(--dark-text);
+}
+
+.surface {
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.light-mode .surface {
+    background-color: var(--light-surface);
+    color: var(--light-text);
+    border: 1px solid #E5E7EB;
+}
+
+.dark-mode .surface {
+    background-color: var(--dark-surface);
+    color: var(--dark-text);
+    border: 1px solid #4B5563;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+.btn-primary:hover {
+    opacity: 0.9;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.form-check-input:checked {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.sidebar {
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 280px;
+    padding-top: 56px; /* Navbar height */
+}
+
+.light-mode .sidebar {
+     background-color: var(--light-surface);
+}
+
+.dark-mode .sidebar {
+     background-color: var(--dark-surface);
+}
+
+
+.main-content {
+    margin-left: 280px;
+    padding-top: 72px; /* Navbar height + padding */
+    transition: margin-left 0.3s;
+}
+
+.sidebar.collapsed {
+    width: 0;
+    overflow: hidden;
+}
+
+.main-content.expanded {
+    margin-left: 0;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        width: 280px; /* Fixed width for the overlay sidebar */
+        position: fixed; /* Ensure it overlays content */
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: 1040; /* Above most content, below modals */
+        transform: translateX(0); /* Default to visible, then hide if collapsed */
+        transition: transform 0.3s ease-in-out; /* Smooth transition */
+        padding-top: 56px; /* Navbar height */
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Optional shadow */
+    }
+    .sidebar.collapsed { /* When the collapsed class is present, hide the sidebar */
+        transform: translateX(-280px);
+    }
+    /* On small screens, main-content should always be full width */
+    .main-content {
+        margin-left: 0;
+    }
+}
+
+.navbar-brand svg {
+    height: 2rem;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 0.25rem;
+}
+
+.light-mode .nav-link {
+    color: #374151;
+}
+.dark-mode .nav-link {
+    color: #D1D5DB;
+}
+
+.light-mode .nav-link:hover, .light-mode .nav-link.active {
+    background-color: #E0E7FF;
+    color: var(--primary-color);
+}
+.dark-mode .nav-link:hover, .dark-mode .nav-link.active {
+    background-color: #4338CA;
+    color: white;
+}
+
+.nav-link svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.card {
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.card-text {
+    font-size: 0.9rem;
+    color: #6B7280; /* Neutral gray for description */
+}
+
+.dark-mode .card-text {
+    color: #9CA3AF;
+}
+
+.card-footer {
+    font-size: 0.8rem;
+    background-color: transparent;
+    border-top: none;
+}

assets/js/main.js

@@ -0,0 +1,117 @@
+document.addEventListener('DOMContentLoaded', function () {
+    console.log('main.js: DOMContentLoaded event fired.');
+    const themeToggle = document.getElementById('theme-toggle');
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.querySelector('.sidebar');
+    const mainContent = document.querySelector('.main-content');
+    const currentTheme = localStorage.getItem('theme');
+
+    if (currentTheme) {
+        document.body.classList.add(currentTheme);
+        if (currentTheme === 'dark-mode') {
+            themeToggle.checked = true;
+        }
+    }
+
+    themeToggle.addEventListener('change', function () {
+        if (this.checked) {
+            document.body.classList.remove('light-mode');
+            document.body.classList.add('dark-mode');
+            localStorage.setItem('theme', 'dark-mode');
+        } else {
+            document.body.classList.remove('dark-mode');
+            document.body.classList.add('light-mode');
+            localStorage.setItem('theme', 'light-mode');
+        }
+    });
+
+    sidebarToggle.addEventListener('click', function () {
+        sidebar.classList.toggle('collapsed');
+        // Adjust main content margin only if not on mobile
+        if (window.innerWidth > 768) {
+            mainContent.classList.toggle('expanded');
+        }
+    });
+
+    const addTaskForm = document.getElementById('addTaskForm');
+    if (addTaskForm) {
+        addTaskForm.addEventListener('submit', async function (e) {
+            console.log('main.js: addTaskForm submitted.');
+            e.preventDefault();
+
+            const formData = new FormData(this);
+            formData.append('action', 'addTask');
+
+            try {
+                const response = await fetch('index.php', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+
+                if (result.success) {
+                    alert(result.message);
+                    this.reset(); // Clear form fields
+                    // Close modal
+                    const addTaskModal = bootstrap.Modal.getInstance(document.getElementById('addTaskModal'));
+                    if (addTaskModal) {
+                        addTaskModal.hide();
+                    }
+                    loadTasks(); // Refresh tasks list
+                } else {
+                    alert('Error: ' + result.message);
+                }
+            } catch (error) {
+                console.error('Error adding task:', error);
+                alert('An unexpected error occurred while adding the task. Check console for details.');
+            }
+        });
+    }
+
+    // Function to load and display tasks
+    async function loadTasks() {
+        console.log('main.js: loadTasks() called.');
+        const tasksListDiv = document.getElementById('tasksList');
+        if (!tasksListDiv) return;
+
+        tasksListDiv.innerHTML = '<div class="text-center p-5">Loading tasks...</div>'; // Loading indicator
+
+        try {
+            const response = await fetch('index.php?action=getTasks');
+            const result = await response.json();
+
+            if (result.success && result.tasks) {
+                tasksListDiv.innerHTML = ''; // Clear loading indicator
+                if (result.tasks.length === 0) {
+                    tasksListDiv.innerHTML = '<div class="col-12"><p class="text-center">No tasks yet. Add one!</p></div>';
+                    return;
+                }
+                result.tasks.forEach(task => {
+                    const taskCard = `
+                        <div class="col-md-4 mb-4">
+                            <div class="card surface h-100">
+                                <div class="card-body">
+                                    <h5 class="card-title">${task.title}</h5>
+                                    <p class="card-text">${task.description}</p>
+                                    <span class="badge bg-primary">${task.status}</span>
+                                </div>
+                                <div class="card-footer text-muted">
+                                    Created: ${new Date(task.created_at).toLocaleDateString()}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    tasksListDiv.innerHTML += taskCard;
+                });
+            } else {
+                tasksListDiv.innerHTML = '<div class="col-12 text-danger text-center"><p>Error loading tasks: ' + (result.message || 'Unknown error') + '</p></div>';
+            }
+        } catch (error) {
+            console.error('Error fetching tasks:', error);
+            tasksListDiv.innerHTML = '<div class="col-12 text-danger text-center"><p>An unexpected error occurred while fetching tasks. Check console for details.</p></div>';
+        }
+    }
+
+    // Initial load of tasks
+    loadTasks();
+});

db/.applied_migrations

@@ -0,0 +1 @@
+["001_create_tasks_table.sql"]

db/migrate.php

@@ -0,0 +1,52 @@
+<?php
+
+require_once __DIR__ . '/config.php';
+
+function runMigrations($pdo) {
+    $migrationsDir = __DIR__ . '/migrations';
+    $appliedMigrationsFile = __DIR__ . '/.applied_migrations';
+
+    // Ensure the applied migrations file exists
+    if (!file_exists($appliedMigrationsFile)) {
+        file_put_contents($appliedMigrationsFile, json_encode([]));
+    }
+
+    $appliedMigrations = json_decode(file_get_contents($appliedMigrationsFile), true);
+
+    $migrationFiles = glob($migrationsDir . '/*.sql');
+    sort($migrationFiles);
+
+    echo "Running database migrations...\n";
+
+    foreach ($migrationFiles as $file) {
+        $fileName = basename($file);
+        if (!in_array($fileName, $appliedMigrations)) {
+            echo "Applying migration: {$fileName}\n";
+            $sql = file_get_contents($file);
+            try {
+                $pdo->exec($sql);
+                $appliedMigrations[] = $fileName;
+            } catch (PDOException $e) {
+                echo "Error applying migration {$fileName}: " . $e->getMessage() . "\n";
+                return false; // Stop on first error
+            }
+        } else {
+            echo "Migration already applied: {$fileName}\n";
+        }
+    }
+
+    file_put_contents($appliedMigrationsFile, json_encode($appliedMigrations));
+    echo "Migrations finished.\n";
+    return true;
+}
+
+// Run migrations if this script is executed directly
+if (realpath($argv[0]) === realpath(__FILE__)) {
+    try {
+        $pdo = db(); // Get PDO connection from config.php
+        runMigrations($pdo);
+    } catch (PDOException $e) {
+        echo "Database connection error: " . $e->getMessage() . "\n";
+    }
+}
+

db/migrations/001_create_tasks_table.sql

@@ -0,0 +1,9 @@
+-- Create the tasks table
+CREATE TABLE IF NOT EXISTS tasks (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    title VARCHAR(255) NOT NULL,
+    description TEXT,
+    status ENUM('pending', 'in-progress', 'completed') DEFAULT 'pending',
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+);