Spaces:
Running
Running
File size: 13,330 Bytes
469f625 8c453b0 469f625 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 |
<!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>
<!-- 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> |