Create a to-do list that sends me an email reminder with a button in the email that I can click when I no longer need reminders.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Taskmail Reminders
-emoji: 🏃
-colorFrom: yellow
-colorTo: red
+title: TaskMail Reminders 📧
+colorFrom: pink
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,129 @@
+class NavHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    background: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                }
+                
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+                
+                .nav-link {
+                    position: relative;
+                    transition: color 0.3s ease;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -4px;
+                    left: 50%;
+                    background-color: #3b82f6;
+                    transition: all 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                    left: 0;
+                }
+                
+                @media (max-width: 768px) {
+                    .mobile-menu {
+                        transform: translateX(100%);
+                        transition: transform 0.3s ease;
+                    }
+                    
+                    .mobile-menu.active {
+                        transform: translateX(0);
+                    }
+                }
+            </style>
+            
+            <nav class="navbar sticky top-0 z-40 px-4 md:px-6 py-4">
+                <div class="container mx-auto flex justify-between items-center">
+                    <div class="flex items-center gap-2">
+                        <i data-feather="check-square" class="w-8 h-8 text-primary-500"></i>
+                        <span class="logo">TaskMail</span>
+                    </div>
+                    
+                    <div class="hidden md:flex items-center gap-6">
+                        <a href="#" class="nav-link text-gray-700 hover:text-primary-500 font-medium">
+                            Tasks
+                        </a>
+                        <a href="#" class="nav-link text-gray-700 hover:text-primary-500 font-medium">
+                            Calendar
+                        </a>
+                        <a href="#" class="nav-link text-gray-700 hover:text-primary-500 font-medium">
+                            Analytics
+                        </a>
+                        <button class="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors flex items-center gap-2">
+                            <i data-feather="user" class="w-4 h-4"></i>
+                            Profile
+                        </button>
+                    </div>
+                    
+                    <button class="md:hidden" id="mobileMenuBtn">
+                        <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
+                    </button>
+                </div>
+                
+                <!-- Mobile Menu -->
+                <div class="mobile-menu fixed top-0 right-0 w-64 h-full bg-white shadow-2xl md:hidden" id="mobileMenu">
+                    <div class="p-6">
+                        <button class="absolute top-4 right-4" id="closeMobileMenu">
+                            <i data-feather="x" class="w-6 h-6 text-gray-700"></i>
+                        </button>
+                        
+                        <div class="mt-8 space-y-4">
+                            <a href="#" class="block text-gray-700 hover:text-primary-500 font-medium py-2">
+                                Tasks
+                            </a>
+                            <a href="#" class="block text-gray-700 hover:text-primary-500 font-medium py-2">
+                                Calendar
+                            </a>
+                            <a href="#" class="block text-gray-700 hover:text-primary-500 font-medium py-2">
+                                Analytics
+                            </a>
+                            <button class="w-full bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors flex items-center justify-center gap-2 mt-4">
+                                <i data-feather="user" class="w-4 h-4"></i>
+                                Profile
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+        
+        // Mobile menu functionality
+        const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
+        const closeMobileMenu = this.shadowRoot.getElementById('closeMobileMenu');
+        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            mobileMenu.classList.add('active');
+        });
+        
+        closeMobileMenu.addEventListener('click', () => {
+            mobileMenu.classList.remove('active');
+        });
+        
+        // Initialize feather icons
+        setTimeout(() => {
+            feather.replace();
+        }, 0);
+    }
+}
+
+customElements.define('nav-header', NavHeader);

components/task-card.js

@@ -0,0 +1,209 @@
+class TaskCard extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        
+        const id = this.getAttribute('id');
+        const text = this.getAttribute('text');
+        const email = this.getAttribute('email');
+        const completed = this.getAttribute('completed') === 'true';
+        const hasReminder = this.getAttribute('has-reminder') === 'true';
+        const reminderStopped = this.getAttribute('reminder-stopped') === 'true';
+        const createdAt = this.getAttribute('created-at');
+        
+        const createdDate = new Date(createdAt).toLocaleDateString();
+        const timeAgo = this.getTimeAgo(createdAt);
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                .task-card {
+                    background: white;
+                    border-radius: 12px;
+                    padding: 20px;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                    transition: all 0.3s ease;
+                    position: relative;
+                    overflow: hidden;
+                }
+                
+                .task-card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                }
+                
+                .task-card.completed {
+                    opacity: 0.7;
+                    background: #f9fafb;
+                }
+                
+                .task-text {
+                    transition: all 0.3s ease;
+                }
+                
+                .task-card.completed .task-text {
+                    text-decoration: line-through;
+                    color: #9ca3af;
+                }
+                
+                .task-checkbox {
+                    width: 24px;
+                    height: 24px;
+                    cursor: pointer;
+                    border: 2px solid #d1d5db;
+                    border-radius: 6px;
+                    position: relative;
+                    transition: all 0.2s ease;
+                }
+                
+                .task-checkbox.checked {
+                    background-color: #10b981;
+                    border-color: #10b981;
+                }
+                
+                .task-checkbox.checked::after {
+                    content: '';
+                    position: absolute;
+                    left: 7px;
+                    top: 3px;
+                    width: 6px;
+                    height: 12px;
+                    border: solid white;
+                    border-width: 0 2px 2px 0;
+                    transform: rotate(45deg);
+                }
+                
+                .action-btn {
+                    padding: 8px;
+                    border-radius: 8px;
+                    transition: all 0.2s ease;
+                    cursor: pointer;
+                }
+                
+                .action-btn:hover {
+                    background-color: #f3f4f6;
+                }
+                
+                .action-btn.delete:hover {
+                    background-color: #fee2e2;
+                    color: #dc2626;
+                }
+                
+                .reminder-btn {
+                    position: relative;
+                }
+                
+                .reminder-btn.active {
+                    color: #3b82f6;
+                }
+                
+                .reminder-pulse {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: 10px;
+                    height: 10px;
+                    background-color: #10b981;
+                    border-radius: 50%;
+                    animation: pulse 2s infinite;
+                }
+                
+                @keyframes pulse {
+                    0% {
+                        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+                    }
+                    70% {
+                        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
+                    }
+                    100% {
+                        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+                    }
+                }
+                
+                .badge {
+                    display: inline-block;
+                    padding: 2px 8px;
+                    border-radius: 12px;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                }
+                
+                .badge-reminder {
+                    background-color: #dbeafe;
+                    color: #1e40af;
+                }
+                
+                .badge-stopped {
+                    background-color: #fef3c7;
+                    color: #92400e;
+                }
+            </style>
+            
+            <div class="task-card ${completed ? 'completed' : ''}">
+                <div class="flex items-start gap-3">
+                    <div class="task-checkbox ${completed ? 'checked' : ''}" data-action="toggle"></div>
+                    
+                    <div class="flex-1">
+                        <h3 class="task-text font-semibold text-gray-800 mb-2">${text}</h3>
+                        
+                        <div class="flex flex-wrap items-center gap-2 mb-3">
+                            <div class="flex items-center gap-1 text-xs text-gray-500">
+                                <i data-feather="mail" class="w-3 h-3"></i>
+                                <span class="truncate max-w-[150px]">${email}</span>
+                            </div>
+                            <div class="flex items-center gap-1 text-xs text-gray-500">
+                                <i data-feather="calendar" class="w-3 h-3"></i>
+                                <span>${timeAgo}</span>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center justify-between">
+                            <div class="flex gap-2">
+                                ${hasReminder && !reminderStopped ? 
+                                    '<span class="badge badge-reminder">Active Reminder</span>' : ''}
+                                ${reminderStopped ? 
+                                    '<span class="badge badge-stopped">Reminder Stopped</span>' : ''}
+                            </div>
+                            
+                            <div class="flex items-center gap-1">
+                                ${!completed ? `
+                                    <button class="action-btn reminder-btn ${hasReminder && !reminderStopped ? 'active' : ''}" 
+                                            data-action="reminder" 
+                                            title="${hasReminder && !reminderStopped ? 'Stop Reminder' : 'Set Reminder'}">
+                                        <i data-feather="bell" class="w-4 h-4"></i>
+                                        ${hasReminder && !reminderStopped ? '<div class="reminder-pulse"></div>' : ''}
+                                    </button>
+                                ` : ''}
+                                <button class="action-btn delete" data-action="delete" title="Delete Task">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    
+    getTimeAgo(dateString) {
+        const date = new Date(dateString);
+        const seconds = Math.floor((new Date() - date) / 1000);
+        
+        let interval = seconds / 31536000;
+        if (interval > 1) return Math.floor(interval) + 'y ago';
+        
+        interval = seconds / 2592000;
+        if (interval > 1) return Math.floor(interval) + 'mo ago';
+        
+        interval = seconds / 86400;
+        if (interval > 1) return Math.floor(interval) + 'd ago';
+        
+        interval = seconds / 3600;
+        if (interval > 1) return Math.floor(interval) + 'h ago';
+        
+        interval = seconds / 60;
+        if (interval > 1) return Math.floor(interval) + 'm ago';
+        
+        return 'Just now';
+    }
+}
+
+customElements.define('task-card', TaskCard);

index.html

@@ -1,19 +1,210 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskMail - Smart To-Do List with Email Reminders</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        },
+                        secondary: {
+                            50: '#f0fdfa',
+                            100: '#ccfbf1',
+                            200: '#99f6e4',
+                            300: '#5eead4',
+                            400: '#2dd4bf',
+                            500: '#14b8a6',
+                            600: '#0d9488',
+                            700: '#0f766e',
+                            800: '#115e59',
+                            900: '#134e4a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gradient-to-br from-primary-50 to-secondary-50 min-h-screen">
+    <!-- Navigation Component -->
+    <nav-header></nav-header>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Header Section -->
+        <div class="text-center mb-10">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3">
+                Your Smart To-Do List
+            </h1>
+            <p class="text-gray-600 text-lg">Stay organized with email reminders</p>
+        </div>
+
+        <!-- Add Task Section -->
+        <div class="bg-white rounded-2xl shadow-xl p-6 mb-8">
+            <div class="flex flex-col md:flex-row gap-4">
+                <input 
+                    type="text" 
+                    id="taskInput" 
+                    placeholder="What needs to be done?"
+                    class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                >
+                <input 
+                    type="email" 
+                    id="emailInput" 
+                    placeholder="Email for reminders"
+                    class="md:w-64 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                >
+                <button 
+                    id="addTaskBtn"
+                    class="px-6 py-3 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors duration-200 flex items-center justify-center gap-2 font-medium"
+                >
+                    <i data-feather="plus-circle" class="w-5 h-5"></i>
+                    Add Task
+                </button>
+            </div>
+        </div>
+
+        <!-- Filters and Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+            <div class="bg-white rounded-xl p-4 shadow-lg">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 text-sm">Total Tasks</p>
+                        <p class="text-2xl font-bold text-gray-800" id="totalTasks">0</p>
+                    </div>
+                    <div class="bg-blue-100 p-3 rounded-lg">
+                        <i data-feather="clipboard" class="w-6 h-6 text-blue-600"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl p-4 shadow-lg">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 text-sm">Pending</p>
+                        <p class="text-2xl font-bold text-orange-600" id="pendingTasks">0</p>
+                    </div>
+                    <div class="bg-orange-100 p-3 rounded-lg">
+                        <i data-feather="clock" class="w-6 h-6 text-orange-600"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl p-4 shadow-lg">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 text-sm">Completed</p>
+                        <p class="text-2xl font-bold text-green-600" id="completedTasks">0</p>
+                    </div>
+                    <div class="bg-green-100 p-3 rounded-lg">
+                        <i data-feather="check-circle" class="w-6 h-6 text-green-600"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl p-4 shadow-lg">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 text-sm">Active Reminders</p>
+                        <p class="text-2xl font-bold text-purple-600" id="activeReminders">0</p>
+                    </div>
+                    <div class="bg-purple-100 p-3 rounded-lg">
+                        <i data-feather="bell" class="w-6 h-6 text-purple-600"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Filter Buttons -->
+        <div class="flex flex-wrap gap-2 mb-6">
+            <button data-filter="all" class="filter-btn px-4 py-2 bg-primary-500 text-white rounded-lg transition-colors">
+                All Tasks
+            </button>
+            <button data-filter="pending" class="filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                Pending
+            </button>
+            <button data-filter="completed" class="filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                Completed
+            </button>
+            <button data-filter="reminders" class="filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                With Reminders
+            </button>
+        </div>
+
+        <!-- Tasks Container -->
+        <div id="tasksContainer" class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <!-- Tasks will be dynamically added here -->
+        </div>
+
+        <!-- Empty State -->
+        <div id="emptyState" class="text-center py-20">
+            <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-4">
+                <i data-feather="inbox" class="w-12 h-12 text-gray-400"></i>
+            </div>
+            <h3 class="text-xl font-semibold text-gray-600 mb-2">No tasks yet</h3>
+            <p class="text-gray-500">Add your first task to get started!</p>
+        </div>
+    </main>
+
+    <!-- Email Preview Modal -->
+    <div id="emailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-auto">
+            <div class="p-6 border-b border-gray-200">
+                <div class="flex justify-between items-center">
+                    <h3 class="text-2xl font-bold text-gray-800">📧 Email Preview</h3>
+                    <button id="closeEmailModal" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="p-6">
+                <div class="bg-gray-50 rounded-lg p-4 mb-4">
+                    <p class="text-sm text-gray-600 mb-2">From: noreply@taskmail.app</p>
+                    <p class="text-sm text-gray-600 mb-2">To: <span id="emailTo">email@example.com</span></p>
+                    <p class="text-sm text-gray-600">Subject: Reminder: <span id="emailSubject">Task</span></p>
+                </div>
+                <div class="prose max-w-none">
+                    <p class="mb-4">Hi there! 👋</p>
+                    <p class="mb-4">This is a friendly reminder about your task:</p>
+                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
+                        <p class="font-semibold text-gray-800" id="emailTask">Task description</p>
+                    </div>
+                    <p class="mb-6">Don't forget to complete it! You're doing great! 💪</p>
+                    <button class="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors">
+                        ✅ Mark as Done & Stop Reminders
+                    </button>
+                </div>
+            </div>
+            <div class="p-6 border-t border-gray-200 bg-gray-50 rounded-b-2xl">
+                <p class="text-sm text-gray-500 text-center">
+                    💡 <strong>Note:</strong> This is a preview. In production, this email would be sent to your inbox.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/task-card.js"></script>
+    
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,271 @@
+// Task Manager Class
+class TaskManager {
+    constructor() {
+        this.tasks = this.loadTasks();
+        this.currentFilter = 'all';
+        this.init();
+    }
+
+    init() {
+        this.setupEventListeners();
+        this.renderTasks();
+        this.updateStats();
+        this.startReminderScheduler();
+    }
+
+    setupEventListeners() {
+        // Add task
+        document.getElementById('addTaskBtn').addEventListener('click', () => this.addTask());
+        document.getElementById('taskInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.addTask();
+        });
+
+        // Filter buttons
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                this.setFilter(e.target.dataset.filter);
+            });
+        });
+
+        // Email modal
+        document.getElementById('closeEmailModal').addEventListener('click', () => {
+            document.getElementById('emailModal').classList.add('hidden');
+        });
+
+        // Close modal on outside click
+        document.getElementById('emailModal').addEventListener('click', (e) => {
+            if (e.target.id === 'emailModal') {
+                document.getElementById('emailModal').classList.add('hidden');
+            }
+        });
+    }
+
+    addTask() {
+        const taskInput = document.getElementById('taskInput');
+        const emailInput = document.getElementById('emailInput');
+        const taskText = taskInput.value.trim();
+        const email = emailInput.value.trim();
+
+        if (!taskText) {
+            this.showToast('Please enter a task', 'error');
+            return;
+        }
+
+        if (!email || !this.isValidEmail(email)) {
+            this.showToast('Please enter a valid email address', 'error');
+            return;
+        }
+
+        const task = {
+            id: Date.now(),
+            text: taskText,
+            email: email,
+            completed: false,
+            hasReminder: false,
+            reminderStopped: false,
+            createdAt: new Date().toISOString(),
+            completedAt: null
+        };
+
+        this.tasks.push(task);
+        this.saveTasks();
+        this.renderTasks();
+        this.updateStats();
+
+        // Clear inputs
+        taskInput.value = '';
+        emailInput.value = '';
+
+        this.showToast('Task added successfully!', 'success');
+    }
+
+    toggleTask(id) {
+        const task = this.tasks.find(t => t.id === id);
+        if (task) {
+            task.completed = !task.completed;
+            task.completedAt = task.completed ? new Date().toISOString() : null;
+            this.saveTasks();
+            this.renderTasks();
+            this.updateStats();
+
+            if (task.completed) {
+                this.showToast('Task completed! Great job! 🎉', 'success');
+            }
+        }
+    }
+
+    toggleReminder(id) {
+        const task = this.tasks.find(t => t.id === id);
+        if (task) {
+            if (task.hasReminder && !task.reminderStopped) {
+                // Stop reminder
+                task.hasReminder = false;
+                task.reminderStopped = true;
+                this.showToast('Reminder stopped', 'info');
+            } else if (!task.completed) {
+                // Start reminder
+                task.hasReminder = true;
+                task.reminderStopped = false;
+                this.showToast('Reminder started! You\'ll receive email notifications', 'success');
+                this.showEmailPreview(task);
+            }
+            this.saveTasks();
+            this.renderTasks();
+            this.updateStats();
+        }
+    }
+
+    deleteTask(id) {
+        if (confirm('Are you sure you want to delete this task?')) {
+            this.tasks = this.tasks.filter(t => t.id !== id);
+            this.saveTasks();
+            this.renderTasks();
+            this.updateStats();
+            this.showToast('Task deleted', 'info');
+        }
+    }
+
+    setFilter(filter) {
+        this.currentFilter = filter;
+        
+        // Update button styles
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            if (btn.dataset.filter === filter) {
+                btn.className = 'filter-btn px-4 py-2 bg-primary-500 text-white rounded-lg transition-colors';
+            } else {
+                btn.className = 'filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors';
+            }
+        });
+        
+        this.renderTasks();
+    }
+
+    getFilteredTasks() {
+        switch (this.currentFilter) {
+            case 'pending':
+                return this.tasks.filter(t => !t.completed);
+            case 'completed':
+                return this.tasks.filter(t => t.completed);
+            case 'reminders':
+                return this.tasks.filter(t => t.hasReminder && !t.reminderStopped && !t.completed);
+            default:
+                return this.tasks;
+        }
+    }
+
+    renderTasks() {
+        const container = document.getElementById('tasksContainer');
+        const emptyState = document.getElementById('emptyState');
+        const filteredTasks = this.getFilteredTasks();
+
+        if (filteredTasks.length === 0) {
+            container.innerHTML = '';
+            emptyState.style.display = 'block';
+            return;
+        }
+
+        emptyState.style.display = 'none';
+        container.innerHTML = filteredTasks.map(task => `
+            <task-card 
+                id="${task.id}"
+                text="${this.escapeHtml(task.text)}"
+                email="${this.escapeHtml(task.email)}"
+                completed="${task.completed}"
+                has-reminder="${task.hasReminder}"
+                reminder-stopped="${task.reminderStopped}"
+                created-at="${task.createdAt}"
+            ></task-card>
+        `).join('');
+
+        // Re-initialize feather icons for new elements
+        feather.replace();
+    }
+
+    updateStats() {
+        const total = this.tasks.length;
+        const completed = this.tasks.filter(t => t.completed).length;
+        const pending = total - completed;
+        const reminders = this.tasks.filter(t => t.hasReminder && !t.reminderStopped && !t.completed).length;
+
+        document.getElementById('totalTasks').textContent = total;
+        document.getElementById('completedTasks').textContent = completed;
+        document.getElementById('pendingTasks').textContent = pending;
+        document.getElementById('activeReminders').textContent = reminders;
+    }
+
+    showEmailPreview(task) {
+        document.getElementById('emailTo').textContent = task.email;
+        document.getElementById('emailSubject').textContent = task.text;
+        document.getElementById('emailTask').textContent = task.text;
+        document.getElementById('emailModal').classList.remove('hidden');
+    }
+
+    startReminderScheduler() {
+        // Simulate sending reminders every 30 seconds for demo
+        setInterval(() => {
+            this.tasks.forEach(task => {
+                if (task.hasReminder && !task.reminderStopped && !task.completed) {
+                    // In a real app, this would send an email
+                    console.log(`Sending reminder for task: ${task.text} to ${task.email}`);
+                }
+            });
+        }, 30000);
+    }
+
+    showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        const bgColor = type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500';
+        
+        toast.className = `fixed bottom-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2 task-card-enter`;
+        
+        const icon = type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info';
+        toast.innerHTML = `
+            <i data-feather="${icon}" class="w-5 h-5"></i>
+            <span>${message}</span>
+        `;
+        
+        document.body.appendChild(toast);
+        feather.replace();
+        
+        setTimeout(() => {
+            toast.style.opacity = '0';
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }
+
+    isValidEmail(email) {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    saveTasks() {
+        localStorage.setItem('tasks', JSON.stringify(this.tasks));
+    }
+
+    loadTasks() {
+        const saved = localStorage.getItem('tasks');
+        return saved ? JSON.parse(saved) : [];
+    }
+}
+
+// Custom event delegation for dynamic task cards
+document.addEventListener('click', (e) => {
+    if (e.target.closest('[data-action="toggle"]')) {
+        const card = e.target.closest('task-card');
+        taskManager.toggleTask(parseInt(card.id));
+    } else if (e.target.closest('[data-action="reminder"]')) {
+        const card = e.target.closest('task-card');
+        taskManager.toggleReminder(parseInt(card.id));
+    } else if (e.target.closest('[data-action="delete"]')) {
+        const card = e.target.closest('task-card');
+        taskManager.deleteTask(parseInt(card.id));
+    }
+});
+
+// Initialize the app
+const taskManager = new TaskManager();

style.css

@@ -1,28 +1,142 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom animations */
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.task-card-enter {
+    animation: slideIn 0.3s ease-out;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.reminder-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Smooth transitions */
+* {
+    transition: all 0.2s ease;
 }
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* Focus styles */
+:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Checkbox custom styles */
+.custom-checkbox {
+    appearance: none;
+    width: 24px;
+    height: 24px;
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+.custom-checkbox:checked {
+    background-color: #10b981;
+    border-color: #10b981;
+}
+
+.custom-checkbox:checked::after {
+    content: '';
+    position: absolute;
+    left: 7px;
+    top: 3px;
+    width: 6px;
+    height: 12px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+/* Email button hover effects */
+.email-button {
+    position: relative;
+    overflow: hidden;
+}
+
+.email-button::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+
+.email-button:hover::before {
+    width: 300px;
+    height: 300px;
+}
+
+/* Glass morphism effect */
+.glass-effect {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+
+/* Loading spinner */
+.spinner {
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #3b82f6;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}