Initial clean deploy to Hugging Face

.gitignore

@@ -0,0 +1,5 @@
+venv/
+db.sqlite3
+*.pyc
+__pycache__/
+.env

manage.py

@@ -0,0 +1,23 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "todo_project.settings")
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,3 @@
+django
+django-todo
+gunicorn

tasks/admin.py

@@ -0,0 +1,6 @@
+from django.contrib import admin
+
+# Register your models here.
+from .models import Task
+
+admin.site.register(Task)

tasks/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class TasksConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "tasks"

tasks/forms.py

@@ -0,0 +1,13 @@
+from django import forms
+from .models import Task
+
+class TaskForm(forms.ModelForm):
+    class Meta:
+        model = Task
+        fields = ['title'] # <-- Changed this back to only the title!
+        widgets = {
+            'title': forms.TextInput(attrs={
+                'class': 'w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:ring-2 focus:ring-indigo-500 transition-all outline-none text-slate-700 placeholder-slate-400 shadow-sm',
+                'placeholder': 'What do you need to do?'
+            }),
+        }

tasks/migrations/0001_initial.py

@@ -0,0 +1,31 @@
+# Generated by Django 5.2.11 on 2026-02-23 05:46
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name="Task",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("title", models.CharField(max_length=200)),
+                ("completed", models.BooleanField(default=False)),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("updated_at", models.DateTimeField(auto_now=True)),
+            ],
+        ),
+    ]

tasks/migrations/0002_remove_task_updated_at_task_completed_at.py

@@ -0,0 +1,22 @@
+# Generated by Django 5.2.11 on 2026-02-23 06:20
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("tasks", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="task",
+            name="updated_at",
+        ),
+        migrations.AddField(
+            model_name="task",
+            name="completed_at",
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+    ]

tasks/models.py

@@ -0,0 +1,22 @@
+from django.db import models
+
+# Create your models here.
+from django.db import models
+
+class Task(models.Model):
+    title = models.CharField(max_length=200)
+    completed = models.BooleanField(default=False)
+    created_at = models.DateTimeField(auto_now_add=True)
+    # NEW: We allow this to be blank because new tasks aren't completed yet!
+    completed_at = models.DateTimeField(null=True, blank=True)
+
+    def __str__(self):
+        return self.title
+    
+from django import forms
+from .models import Task
+
+class TaskForm(forms.ModelForm):
+    class Meta:
+        model = Task
+        fields = ['title'] # We only need the user to type the title!

tasks/templates/tasks/base.html

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskPro | Intelligence in Organization</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        :root { --bg-color: #f8fafc; --orb-1: #c084fc; --orb-2: #818cf8; --orb-3: #f472b6; }
+        body { background-color: var(--bg-color); transition: background-color 0.5s ease; }
+        .orb-1 { background-color: var(--orb-1); transition: background-color 0.5s ease; }
+        .orb-2 { background-color: var(--orb-2); transition: background-color 0.5s ease; }
+        .orb-3 { background-color: var(--orb-3); transition: background-color 0.5s ease; }
+        @keyframes float { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } }
+        .animate-float { animation: float 10s infinite ease-in-out; }
+        .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; }
+        
+        /* Smooth transition for dropdown */
+        .dropdown-animate { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+    </style>
+</head>
+<body class="relative flex flex-col min-h-screen font-sans text-slate-800 selection:bg-indigo-200 selection:text-indigo-900 overflow-x-hidden">
+
+    <div id="custom-bg-layer" class="fixed inset-0 w-full h-full z-[-2] bg-cover bg-center bg-no-repeat transition-opacity duration-500 opacity-0"></div>
+
+    <div class="fixed inset-0 w-full h-full z-[-1]" id="orb-container">
+        <div class="orb-1 absolute top-[-10%] left-[-10%] w-96 h-96 rounded-full mix-blend-multiply filter blur-[100px] opacity-60 animate-float"></div>
+        <div class="orb-2 absolute top-[20%] right-[-5%] w-96 h-96 rounded-full mix-blend-multiply filter blur-[100px] opacity-60 animate-float animation-delay-2000"></div>
+        <div class="orb-3 absolute bottom-[-10%] left-[20%] w-96 h-96 rounded-full mix-blend-multiply filter blur-[100px] opacity-60 animate-float animation-delay-4000"></div>
+    </div>
+
+    <header class="sticky top-0 z-50 bg-white/70 backdrop-blur-md border-b border-white/50 shadow-sm py-2 sm:py-0">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 min-h-[4.5rem] flex flex-wrap sm:flex-nowrap items-center justify-between gap-4">
+            
+            <a href="/" class="flex items-center gap-2 cursor-pointer transform hover:scale-105 transition-transform shrink-0">
+                <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-indigo-600 to-purple-600 flex items-center justify-center text-white shadow-md">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                </div>
+                <span class="text-xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-indigo-700 to-purple-700 tracking-tight">TaskPro</span>
+            </a>
+            
+            <div class="order-last sm:order-none w-full sm:w-auto flex-1 flex flex-col items-center justify-center max-w-lg mx-auto">
+                <div class="relative w-full">
+                    <input type="text" id="searchInput" onkeyup="filterTasks()" placeholder="Search your tasks..." class="w-full pl-10 pr-4 py-2 rounded-full bg-white/60 border border-white focus:bg-white focus:ring-2 focus:ring-indigo-400 outline-none transition-all text-sm shadow-sm placeholder-slate-400">
+                    <svg class="w-4 h-4 absolute left-4 top-2.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                </div>
+                <div class="text-[10px] font-bold text-slate-500 mt-1.5 uppercase tracking-widest" id="current-date-display">
+                    </div>
+            </div>
+
+            <div class="flex items-center gap-2 sm:gap-4 shrink-0">
+                
+                <button class="relative p-2 text-slate-400 hover:text-indigo-600 transition-colors transform hover:scale-110 group">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
+                    {% if pending_count and pending_count > 0 %}
+                    <span class="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[9px] font-bold text-white shadow-sm ring-2 ring-white animate-pulse">
+                        {{ pending_count }}
+                    </span>
+                    {% endif %}
+                </button>
+
+                <button onclick="toggleThemeModal()" class="flex items-center gap-2 text-sm font-bold text-slate-600 bg-white/80 hover:bg-white px-3 sm:px-4 py-2 rounded-full shadow-sm border border-slate-200 transition-all hover:scale-105">
+                    🎨 <span class="hidden sm:inline">Themes</span>
+                </button>
+
+                <div class="relative shrink-0" id="avatar-container">
+                    <button onclick="toggleAvatarMenu()" class="w-10 h-10 rounded-full bg-slate-200 border-2 border-white shadow-sm overflow-hidden cursor-pointer hover:ring-2 hover:ring-indigo-400 transition-all flex items-center justify-center">
+                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix&backgroundColor=e2e8f0" alt="Profile" class="w-full h-full object-cover">
+                    </button>
+
+                    <div id="avatar-menu" class="dropdown-animate absolute right-0 mt-3 w-64 bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl border border-white hidden opacity-0 transform scale-95 origin-top-right z-[100] overflow-hidden">
+                        <div class="p-5 bg-gradient-to-br from-indigo-50 to-purple-50 border-b border-slate-100">
+                            <p class="text-sm font-extrabold text-slate-800">Ihta (IAR Soft)</p>
+                            <p class="text-[11px] text-indigo-600 font-bold uppercase tracking-wide mt-0.5">AI Engineer @ Jabiru Labs</p>
+                        </div>
+                        <div class="p-2 space-y-1">
+                            <a href="/support" class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-bold text-slate-600 hover:bg-white hover:text-indigo-600 transition-all shadow-sm shadow-transparent hover:shadow-slate-200">
+                                <span class="text-lg">⚙️</span> Settings
+                            </a>
+                            <a href="/privacy" class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-bold text-slate-600 hover:bg-white hover:text-indigo-600 transition-all shadow-sm shadow-transparent hover:shadow-slate-200">
+                                <span class="text-lg">🛡️</span> Privacy Control
+                            </a>
+                        </div>
+                        <div class="p-2 border-t border-slate-100 bg-slate-50/50">
+    <a href="{% url 'logout' %}" class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-bold text-red-500 hover:bg-red-50 transition-colors">
+        <span class="text-lg">🚪</span> Sign Out
+    </a>
+</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="theme-modal" class="fixed inset-0 z-[100] bg-slate-900/40 backdrop-blur-sm hidden flex items-center justify-center transition-opacity opacity-0">
+        <div class="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-8 max-w-md w-full mx-4 transform scale-95 transition-transform duration-300 border border-white" id="theme-modal-content">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-extrabold text-slate-800">Choose Theme 🎨</h2>
+                <button onclick="toggleThemeModal()" class="text-slate-400 hover:text-red-500 transition-colors">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                </button>
+            </div>
+            <div class="grid grid-cols-2 gap-4 mb-6">
+                <button onclick="setTheme('default')" class="h-24 rounded-xl shadow-inner bg-slate-50 border-2 border-slate-200 hover:border-indigo-500 overflow-hidden relative group">
+                    <div class="absolute inset-0 opacity-40 bg-gradient-to-br from-purple-400 via-indigo-400 to-pink-400 group-hover:opacity-60 transition-opacity"></div>
+                    <span class="relative z-10 font-bold text-slate-800 bg-white/80 px-2 py-1 rounded-md text-sm">Lavender Glass</span>
+                </button>
+                <button onclick="setTheme('ocean')" class="h-24 rounded-xl shadow-inner bg-cyan-50 border-2 border-slate-200 hover:border-cyan-500 overflow-hidden relative group">
+                    <div class="absolute inset-0 opacity-40 bg-gradient-to-br from-blue-400 via-teal-400 to-cyan-400 group-hover:opacity-60 transition-opacity"></div>
+                    <span class="relative z-10 font-bold text-slate-800 bg-white/80 px-2 py-1 rounded-md text-sm">Ocean Breeze</span>
+                </button>
+                <button onclick="setTheme('sunset')" class="h-24 rounded-xl shadow-inner bg-orange-50 border-2 border-slate-200 hover:border-orange-500 overflow-hidden relative group">
+                    <div class="absolute inset-0 opacity-40 bg-gradient-to-br from-orange-400 via-red-400 to-yellow-400 group-hover:opacity-60 transition-opacity"></div>
+                    <span class="relative z-10 font-bold text-slate-800 bg-white/80 px-2 py-1 rounded-md text-sm">Sunset Glow</span>
+                </button>
+                <button onclick="setTheme('forest')" class="h-24 rounded-xl shadow-inner bg-green-50 border-2 border-slate-200 hover:border-emerald-500 overflow-hidden relative group">
+                    <div class="absolute inset-0 opacity-40 bg-gradient-to-br from-green-400 via-emerald-400 to-teal-400 group-hover:opacity-60 transition-opacity"></div>
+                    <span class="relative z-10 font-bold text-slate-800 bg-white/80 px-2 py-1 rounded-md text-sm">Enchanted Forest</span>
+                </button>
+                <button onclick="setTheme('midnight')" class="h-24 rounded-xl shadow-inner bg-slate-900 border-2 border-slate-700 hover:border-purple-500 overflow-hidden relative group col-span-2">
+                    <div class="absolute inset-0 opacity-40 bg-gradient-to-br from-indigo-900 via-purple-900 to-slate-800 group-hover:opacity-60 transition-opacity"></div>
+                    <span class="relative z-10 font-bold text-white bg-black/50 px-2 py-1 rounded-md text-sm">Midnight Dark</span>
+                </button>
+            </div>
+            <div class="border-t border-slate-200 pt-6">
+                <label class="block text-sm font-bold text-slate-700 mb-2">Or Upload Custom Background 🖼️</label>
+                <input type="file" id="custom-image-upload" accept="image/*" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 cursor-pointer">
+            </div>
+        </div>
+    </div>
+
+    <main class="flex-grow py-8 px-4 sm:py-12 relative z-10">
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="bg-white/40 backdrop-blur-md border-t border-white/50 mt-auto relative z-10">
+        <div class="max-w-5xl mx-auto px-4 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <p class="text-sm text-slate-600 font-medium">© 2026 TaskPro. Built by Ihta <span class="text-red-500">❤️</span> in Django.</p>
+            <div class="flex gap-5">
+                <a href="{% url 'privacy' %}" class="text-slate-500 hover:text-indigo-700 transition-colors font-medium text-sm">Privacy Policy</a>
+                <a href="{% url 'terms' %}" class="text-slate-500 hover:text-indigo-700 transition-colors font-medium text-sm">Terms of Service</a>
+                <a href="{% url 'support' %}" class="text-slate-500 hover:text-indigo-700 transition-colors font-medium text-sm">Support</a>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // --- 1. AVATAR DROPDOWN ---
+        const avatarMenu = document.getElementById('avatar-menu');
+        function toggleAvatarMenu() {
+            if (avatarMenu.classList.contains('hidden')) {
+                avatarMenu.classList.remove('hidden');
+                setTimeout(() => { avatarMenu.classList.remove('opacity-0', 'scale-95'); }, 10);
+            } else {
+                avatarMenu.classList.add('opacity-0', 'scale-95');
+                setTimeout(() => { avatarMenu.classList.add('hidden'); }, 200);
+            }
+        }
+        window.addEventListener('click', (e) => {
+            if (!document.getElementById('avatar-container').contains(e.target)) {
+                avatarMenu.classList.add('opacity-0', 'scale-95');
+                setTimeout(() => { avatarMenu.classList.add('hidden'); }, 200);
+            }
+        });
+
+        // --- 2. DATE & PROGRESS ---
+        window.addEventListener('DOMContentLoaded', () => {
+            const dateOptions = { weekday: 'long', month: 'short', day: 'numeric' };
+            const today = new Date().toLocaleDateString('en-US', dateOptions);
+            const pendingCount = "{{ pending_count|default:'0' }}";
+            document.getElementById('current-date-display').innerText = `${today} • ${pendingCount} Tasks Left`;
+        });
+
+        // --- 3. LIVE SEARCH ---
+        function filterTasks() {
+            let input = document.getElementById('searchInput').value.toLowerCase();
+            let taskItems = document.querySelectorAll('.task-item');
+            taskItems.forEach(item => {
+                let title = item.querySelector('.task-title').innerText.toLowerCase();
+                item.style.display = title.includes(input) ? "" : "none";
+            });
+        }
+
+        // --- 4. THEMES ---
+        const themes = {
+            'default': { bg: '#f8fafc', o1: '#c084fc', o2: '#818cf8', o3: '#f472b6' },
+            'ocean': { bg: '#ecfeff', o1: '#38bdf8', o2: '#2dd4bf', o3: '#22d3ee' },
+            'sunset': { bg: '#fff7ed', o1: '#fb923c', o2: '#f87171', o3: '#facc15' },
+            'forest': { bg: '#f0fdf4', o1: '#4ade80', o2: '#34d399', o3: '#2dd4bf' },
+            'midnight': { bg: '#0f172a', o1: '#312e81', o2: '#4c1d95', o3: '#1e293b' }
+        };
+        const modal = document.getElementById('theme-modal');
+        const modalContent = document.getElementById('theme-modal-content');
+        const bgLayer = document.getElementById('custom-bg-layer');
+        const orbContainer = document.getElementById('orb-container');
+
+        function toggleThemeModal() {
+            if (modal.classList.contains('hidden')) {
+                modal.classList.remove('hidden');
+                setTimeout(() => { modal.classList.remove('opacity-0'); modalContent.classList.remove('scale-95'); }, 10);
+            } else {
+                modal.classList.add('opacity-0', 'scale-95');
+                setTimeout(() => { modal.classList.add('hidden'); }, 300);
+            }
+        }
+
+        function setTheme(themeName) {
+            const t = themes[themeName];
+            document.documentElement.style.setProperty('--bg-color', t.bg);
+            document.documentElement.style.setProperty('--orb-1', t.o1);
+            document.documentElement.style.setProperty('--orb-2', t.o2);
+            document.documentElement.style.setProperty('--orb-3', t.o3);
+            bgLayer.classList.replace('opacity-100', 'opacity-0');
+            orbContainer.style.display = 'block';
+            localStorage.setItem('taskpro-theme', themeName);
+            localStorage.removeItem('taskpro-custom-img');
+            if (!modal.classList.contains('hidden')) toggleThemeModal();
+        }
+
+        document.getElementById('custom-image-upload').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    const imgData = event.target.result;
+                    bgLayer.style.backgroundImage = `url(${imgData})`;
+                    bgLayer.classList.replace('opacity-0', 'opacity-100');
+                    orbContainer.style.display = 'none';
+                    localStorage.setItem('taskpro-custom-img', imgData);
+                    localStorage.setItem('taskpro-theme', 'custom');
+                    if (!modal.classList.contains('hidden')) toggleThemeModal();
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+
+        window.onload = () => {
+            const savedTheme = localStorage.getItem('taskpro-theme');
+            const savedImage = localStorage.getItem('taskpro-custom-img');
+            if (savedTheme === 'custom' && savedImage) {
+                bgLayer.style.backgroundImage = `url(${savedImage})`;
+                bgLayer.classList.replace('opacity-0', 'opacity-100');
+                orbContainer.style.display = 'none';
+            } else if (savedTheme && themes[savedTheme]) {
+                const t = themes[savedTheme];
+                document.documentElement.style.setProperty('--bg-color', t.bg);
+                document.documentElement.style.setProperty('--orb-1', t.o1);
+                document.documentElement.style.setProperty('--orb-2', t.o2);
+                document.documentElement.style.setProperty('--orb-3', t.o3);
+            }
+        };
+    </script>
+</body>
+</html>

tasks/templates/tasks/delete_task.html

@@ -0,0 +1,27 @@
+{% extends 'tasks/base.html' %}
+
+{% block content %}
+<div class="w-full max-w-md mx-auto bg-white/70 backdrop-blur-2xl rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden p-8 text-center border-t-4 border-red-500">
+    
+    <div class="w-16 h-16 bg-red-100 text-red-500 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl shadow-inner">
+        🗑️
+    </div>
+
+    <h2 class="text-2xl font-extrabold text-slate-800 mb-2">Delete Task?</h2>
+    <p class="text-slate-500 text-sm mb-8 px-2 font-medium">
+        Are you sure you want to delete "<span class="font-bold text-slate-700 italic">{{ item }}</span>"? This action cannot be undone.
+    </p>
+
+    <form method="POST" action="">
+        {% csrf_token %}
+        <div class="flex gap-3">
+            <a href="/" class="flex-1 py-3 bg-white/50 hover:bg-white text-slate-700 font-bold rounded-xl transition-all border border-slate-100 shadow-sm">
+                Cancel
+            </a>
+            <button type="submit" class="flex-1 py-3 bg-red-500 hover:bg-red-600 text-white font-bold rounded-xl shadow-lg hover:shadow-red-500/30 transition-all transform hover:-translate-y-0.5 active:scale-95">
+                Yes, Delete
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}

tasks/templates/tasks/list.html

@@ -0,0 +1,77 @@
+{% extends 'tasks/base.html' %}
+
+{% block content %}
+<div class="max-w-lg mx-auto bg-white/70 backdrop-blur-2xl rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden transition-all duration-300 border border-white">
+    
+    <div class="bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-700 p-8 text-center relative overflow-hidden shadow-inner">
+        <div class="absolute top-0 left-0 w-full h-full bg-white opacity-10 pattern-dots"></div>
+        <h2 class="text-3xl font-extrabold text-white mb-2 relative z-10 tracking-tight">My Tasks</h2>
+        <p class="text-indigo-100 text-sm font-medium relative z-10">Stay organized, stay productive </p>
+    </div>
+
+    <div class="p-6 sm:p-8 border-b border-slate-100/50 bg-white/50">
+        <form method="POST" action="/" class="flex gap-3 relative">
+            {% csrf_token %}
+            <div class="flex-1">
+                {{ form.title }}
+            </div>
+            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-bold shadow-lg transition-all transform hover:-translate-y-0.5 active:scale-95">
+                Add
+            </button>
+        </form>
+    </div>
+
+    <div class="p-6 sm:p-8 space-y-4 bg-slate-50/30">
+        <h3 class="font-bold text-slate-500 uppercase tracking-wider text-xs mb-4 flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span> Pending Tasks
+        </h3>
+        
+        {% for task in pending_tasks %}
+            <div class="task-item flex items-center justify-between p-4 bg-white/80 backdrop-blur-sm border border-white rounded-2xl shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all group">
+                <div class="flex items-center gap-4 overflow-hidden flex-1">
+                    <a href="{% url 'complete_task' task.id %}" class="w-6 h-6 rounded-full border-2 border-slate-300 hover:border-emerald-500 hover:bg-emerald-50 flex items-center justify-center transition-all group/check shrink-0">
+                        <svg class="w-3.5 h-3.5 text-emerald-500 opacity-0 group-hover/check:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                    </a>
+                    <div class="flex-1 truncate pr-2">
+                        <p class="task-title text-slate-700 font-bold text-[17px] leading-tight truncate group-hover:text-indigo-600 transition-colors">{{ task.title }}</p>
+                    </div>
+                </div>
+                <div class="flex gap-2 shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
+                    <a href="{% url 'update_task' task.id %}" class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-indigo-50 text-slate-400 hover:text-indigo-600 rounded-lg transition-colors">✏️</a>
+                    <a href="{% url 'delete_task' task.id %}" class="w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-red-50 text-slate-400 hover:text-red-500 rounded-lg transition-colors">🗑️</a>
+                </div>
+            </div>
+        {% empty %}
+            <div class="text-center py-6 px-4 border-2 border-dashed border-slate-300 rounded-2xl bg-white/40">
+                <p class="text-slate-500 text-sm font-medium">No pending tasks right now! </p>
+            </div>
+        {% endfor %}
+    </div>
+
+    <div class="p-6 sm:p-8 border-t border-slate-100/50 bg-white/60">
+        <h3 class="font-bold text-slate-500 uppercase tracking-wider text-xs mb-4 flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-emerald-500"></span> Completed History
+        </h3>
+        <div class="space-y-3">
+        {% for task in completed_tasks %}
+            <div class="task-item flex items-center justify-between p-3 bg-white/50 border border-white rounded-xl group shadow-sm">
+                <div class="flex items-center gap-3 overflow-hidden flex-1">
+                    <div class="w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center shrink-0">
+                        <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                    </div>
+                    <div class="truncate pr-2">
+                        <p class="task-title text-slate-500 line-through font-semibold text-sm truncate">{{ task.title }}</p>
+                    </div>
+                </div>
+                <div class="flex gap-1 shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
+                    <a href="{% url 'undo_task' task.id %}" class="text-[11px] font-bold text-slate-500 hover:text-indigo-600 px-3 py-1.5 bg-white rounded-md shadow-sm border border-slate-100">Undo</a>
+                    <a href="{% url 'delete_task' task.id %}" class="text-[11px] font-bold text-slate-500 hover:text-red-500 px-3 py-1.5 bg-white rounded-md shadow-sm border border-slate-100">Del</a>
+                </div>
+            </div>
+        {% empty %}
+            <p class="text-slate-500 text-sm italic text-center py-2">Finish a task to see your history!</p>
+        {% endfor %}
+        </div>
+    </div>
+</div>
+{% endblock %}

tasks/templates/tasks/privacy.html

@@ -0,0 +1,11 @@
+{% extends 'tasks/base.html' %}
+
+{% block content %}
+<div class="max-w-3xl mx-auto bg-white/80 backdrop-blur-xl border border-white rounded-3xl shadow-xl p-8 sm:p-12">
+    <h1 class="text-3xl font-extrabold text-indigo-600 mb-6">Privacy Policy</h1>
+    <p class="text-slate-600 mb-4">This is a demo To-Do list app. We do not collect or sell your personal data.</p>
+    <a href="/" class="inline-block mt-8 font-bold text-white bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-xl transition-colors">
+        ⬅️ Back to Dashboard
+    </a>
+</div>
+{% endblock %}

tasks/templates/tasks/support.html

@@ -0,0 +1,21 @@
+{% extends 'tasks/base.html' %}
+
+{% block content %}
+<div class="max-w-3xl mx-auto bg-white/80 backdrop-blur-xl border border-white rounded-3xl shadow-xl p-8 sm:p-12 text-center border-t-4 border-indigo-500">
+    <div class="text-5xl mb-4">👋</div>
+    <h1 class="text-3xl font-extrabold text-slate-800 mb-4">Need Help?</h1>
+    <p class="text-slate-600 mb-8 max-w-md mx-auto">
+        If you are experiencing issues with the To-Do app, feel free to reach out. We are always looking to squash bugs and improve the UX!
+    </p>
+    
+    <a href="mailto:khanihtesham0332@gmail.com" class="inline-block font-bold text-white bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-xl shadow-lg transition-transform hover:-translate-y-1">
+        📧 Email Support
+    </a>
+    
+    <div class="mt-12">
+        <a href="/" class="font-bold text-slate-500 hover:text-indigo-600 transition-colors">
+            ⬅️ Back to Dashboard
+        </a>
+    </div>
+</div>
+{% endblock %}

tasks/templates/tasks/terms.html

@@ -0,0 +1,16 @@
+{% extends 'tasks/base.html' %}
+
+{% block content %}
+<div class="max-w-3xl mx-auto bg-white/80 backdrop-blur-xl border border-white rounded-3xl shadow-xl p-8 sm:p-12">
+    <h1 class="text-3xl font-extrabold text-indigo-600 mb-6">Terms of Service</h1>
+    <p class="text-slate-600 mb-4">
+        Welcome to TaskPro, operated by IAR Soft. By using this application, you agree to organize your tasks efficiently and boost your daily productivity.
+    </p>
+    <p class="text-slate-600 mb-4">
+        These terms are for demonstration purposes as part of this portfolio project.
+    </p>
+    <a href="/" class="inline-block mt-8 font-bold text-slate-600 bg-white/50 hover:bg-white px-6 py-3 rounded-xl transition-colors shadow-sm">
+        ⬅️ Back to Dashboard
+    </a>
+</div>
+{% endblock %}

tasks/templates/tasks/update_task.html

@@ -0,0 +1,30 @@
+{% extends 'tasks/base.html' %}
+
+{% block content %}
+<div class="w-full max-w-md mx-auto bg-white/70 backdrop-blur-2xl rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden p-8 border border-white">
+    
+    <div class="mb-8 text-center">
+        <h2 class="text-2xl font-extrabold text-slate-800">Update Task ✏️</h2>
+        <p class="text-slate-500 text-sm mt-1 font-medium">Refine your plans</p>
+    </div>
+
+    <form method="POST" action="" class="space-y-6">
+        {% csrf_token %}
+        
+        <div class="space-y-2">
+            <label class="text-sm font-bold text-slate-700 ml-1">Task Title</label>
+            {{ form.title }}
+        </div>
+
+        <div class="pt-4 flex gap-3">
+            <a href="/" class="flex-1 text-center py-3 bg-white/50 hover:bg-white text-slate-700 font-bold rounded-xl transition-all shadow-sm border border-slate-100">
+                Cancel
+            </a>
+            <button type="submit" class="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl shadow-lg hover:shadow-indigo-500/30 transition-all transform hover:-translate-y-0.5 active:scale-95">
+                Save Changes
+            </button>
+        </div>
+    </form>
+
+</div>
+{% endblock %}

tasks/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

tasks/urls.py

@@ -0,0 +1,14 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.index, name='list'), # type: ignore
+    path('update_task/<str:pk>/', views.updateTask, name='update_task'),
+    path('delete_task/<str:pk>/', views.deleteTask, name='delete_task'),
+    path('complete_task/<str:pk>/', views.completeTask, name='complete_task'), 
+    path('undo_task/<str:pk>/', views.undoTask, name='undo_task'),
+    path('privacy/', views.privacyPolicy, name='privacy'),
+    path('terms/', views.termsOfService, name='terms'), # <-- New!
+    path('support/', views.support, name='support'),    # <-- New!
+    path('logout/', views.logoutUser, name='logout'),
+]

tasks/views.py

@@ -0,0 +1,81 @@
+from django.shortcuts import render, redirect
+from django.utils import timezone
+from .models import Task
+from .forms import TaskForm
+from django.contrib.auth import logout
+# A quick helper function to grab the pending count for the header
+def get_global_context():
+    return {
+        'pending_count': Task.objects.filter(completed=False).count()
+    }
+
+def index(request):
+    pending_tasks = Task.objects.filter(completed=False).order_by('-created_at')
+    completed_tasks = Task.objects.filter(completed=True).order_by('-completed_at')
+    form = TaskForm()
+
+    if request.method == 'POST':
+        form = TaskForm(request.POST)
+        if form.is_valid():
+            form.save()
+            return redirect('/')
+
+    context = {'pending_tasks': pending_tasks, 'completed_tasks': completed_tasks, 'form': form}
+    context.update(get_global_context()) # Add the bell count!
+    return render(request, 'tasks/list.html', context)
+
+def updateTask(request, pk):
+    task = Task.objects.get(id=pk)
+    form = TaskForm(instance=task)
+
+    if request.method == 'POST':
+        form = TaskForm(request.POST, instance=task)
+        if form.is_valid():
+            form.save()
+            return redirect('/')
+
+    context = {'form': form}
+    context.update(get_global_context())
+    return render(request, 'tasks/update_task.html', context)
+
+def deleteTask(request, pk):
+    item = Task.objects.get(id=pk)
+    if request.method == 'POST':
+        item.delete()
+        return redirect('/')
+
+    context = {'item': item}
+    context.update(get_global_context())
+    return render(request, 'tasks/delete_task.html', context)
+
+def completeTask(request, pk):
+    task = Task.objects.get(id=pk)
+    task.completed = True
+    task.completed_at = timezone.now()
+    task.save()
+    return redirect('/')
+
+def undoTask(request, pk):
+    task = Task.objects.get(id=pk)
+    task.completed = False
+    task.completed_at = None
+    task.save()
+    return redirect('/')
+
+# --- Static Pages ---
+def privacyPolicy(request):
+    context = get_global_context()
+    return render(request, 'tasks/privacy.html', context)
+
+def termsOfService(request):
+    context = get_global_context()
+    return render(request, 'tasks/terms.html', context)
+
+def support(request):
+    context = get_global_context()
+    return render(request, 'tasks/support.html', context)
+
+
+def logoutUser(request):
+    logout(request)
+    return redirect('/') # Or redirect to a login page if you have one

todo_project/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for todo_project project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.2/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "todo_project.settings")
+
+application = get_asgi_application()

todo_project/settings.py

@@ -0,0 +1,125 @@
+"""
+Django settings for todo_project project.
+
+Generated by 'django-admin startproject' using Django 5.2.11.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.2/ref/settings/
+"""
+
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/5.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = "django-insecure-=ob5++5d=xr84)fsaqj$2wexu_)b*mp56s&#$x1un^n4q_$c7$"
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+# Allow all hosts so Hugging Face can display the app
+ALLOWED_HOSTS = ['*']
+
+# Required for the styles (Tailwind CDN) to work through the HF frame
+CSRF_TRUSTED_ORIGINS = ['https://*.hf.space']
+# Application definition
+
+INSTALLED_APPS = [
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+    'tasks',
+]
+
+MIDDLEWARE = [
+    "django.middleware.security.SecurityMiddleware",
+    "django.contrib.sessions.middleware.SessionMiddleware",
+    "django.middleware.common.CommonMiddleware",
+    "django.middleware.csrf.CsrfViewMiddleware",
+    "django.contrib.auth.middleware.AuthenticationMiddleware",
+    "django.contrib.messages.middleware.MessageMiddleware",
+    "django.middleware.clickjacking.XFrameOptionsMiddleware",
+]
+
+ROOT_URLCONF = "todo_project.urls"
+
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "context_processors": [
+                "django.template.context_processors.request",
+                "django.contrib.auth.context_processors.auth",
+                "django.contrib.messages.context_processors.messages",
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = "todo_project.wsgi.application"
+
+
+# Database
+# https://docs.djangoproject.com/en/5.2/ref/settings/#databases
+
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.sqlite3",
+        "NAME": BASE_DIR / "db.sqlite3",
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/5.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/5.2/topics/i18n/
+
+LANGUAGE_CODE = "en-us"
+
+TIME_ZONE = "UTC"
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/5.2/howto/static-files/
+
+STATIC_URL = "static/"
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

todo_project/urls.py

@@ -0,0 +1,24 @@
+"""
+URL configuration for todo_project project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/5.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+
+from django.contrib import admin
+from django.urls import path , include
+
+urlpatterns = [
+    path("admin/", admin.site.urls),
+    path('', include('tasks.urls')),
+]

todo_project/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for todo_project project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "todo_project.settings")
+
+application = get_wsgi_application()