Spaces:
Running
Running
| <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> | |
| <!-- Reminder Frequency Modal --> | |
| <div id="reminderModal" 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-md w-full"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-bold text-gray-800">Set Reminder Frequency</h3> | |
| <button id="closeReminderModal" 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"> | |
| <p class="text-gray-600 mb-6">How often would you like to receive email reminders for this task?</p> | |
| <div class="space-y-3 mb-6"> | |
| <button class="frequency-btn w-full text-left px-4 py-3 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all" data-frequency="daily"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-semibold text-gray-800">📅 Daily</p> | |
| <p class="text-sm text-gray-500">Receive reminders every day</p> | |
| </div> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> | |
| </div> | |
| </button> | |
| <button class="frequency-btn w-full text-left px-4 py-3 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all" data-frequency="weekly"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-semibold text-gray-800">📆 Weekly</p> | |
| <p class="text-sm text-gray-500">Receive reminders every week</p> | |
| </div> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> | |
| </div> | |
| </button> | |
| <button class="frequency-btn w-full text-left px-4 py-3 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all" data-frequency="monthly"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-semibold text-gray-800">🗓️ Monthly</p> | |
| <p class="text-sm text-gray-500">Receive reminders every month</p> | |
| </div> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i> | |
| </div> | |
| </button> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button id="cancelReminder" class="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"> | |
| Cancel | |
| </button> | |
| <button id="stopExistingReminder" class="flex-1 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors hidden"> | |
| Stop Reminder | |
| </button> | |
| </div> | |
| </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> |