add a google sign in option on the landing page, make the "add task" (in the task section) and "add event" (in the schedule section) actually add the input to the tasks/schedule respectively and allow reminders/alarms to be set. Make the "add resource" (in the research section), actually add the resource link and let the user click on any of the bookmarks to open the url in their native browser. also allow the ai to pick up on patterns in the users behavior to create articles/video/sites that align with their interests and introduce them at the top of the research section, in a dashboard format.
3200020 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Task Genius | CircaSnooze</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 100%); | |
| } | |
| .task-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.08); | |
| } | |
| .task-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen text-white gradient-bg"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="flex justify-between items-center mb-12"> | |
| <a href="index.html" class="flex items-center space-x-2"> | |
| <i data-feather="moon" class="w-6 h-6"></i> | |
| <span class="text-xl font-bold">CircaSnooze</span> | |
| </a> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="hover:text-[#FFA07A] transition">Home</a> | |
| <a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a> | |
| <a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a> | |
| <a href="#" class="text-[#FFA07A] font-medium">Tasks</a> | |
| <a href="research.html" class="hover:text-[#FFA07A] transition">Research</a> | |
| </nav> | |
| <button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition"> | |
| My Account | |
| </button> | |
| </header> | |
| <main> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <div class="lg:col-span-2"> | |
| <div class="task-card rounded-3xl p-8 mb-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold">Task Genius</h1> | |
| <button onclick="openAddTaskModal()" class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Task</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Task list will be populated here --> | |
| <div id="taskList"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-card rounded-3xl p-8"> | |
| <h2 class="text-2xl font-bold mb-6">Upcoming Tasks</h2> | |
| <div id="upcomingTasks" class="space-y-4"> | |
| <!-- Upcoming tasks will be shown here --> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Add Task Modal --> | |
| <div id="addTaskModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> | |
| <div class="task-card rounded-2xl p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Add New Task</h3> | |
| <button onclick="closeAddTaskModal()" class="text-2xl">×</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block mb-1">Task Name</label> | |
| <input type="text" id="taskName" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2"> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Due Date</label> | |
| <input type="datetime-local" id="taskDueDate" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2"> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Priority</label> | |
| <select id="taskPriority" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2"> | |
| <option value="low">Low</option> | |
| <option value="medium">Medium</option> | |
| <option value="high">High</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="taskReminder" class="mr-2"> | |
| <span>Set Reminder</span> | |
| </label> | |
| </div> | |
| <button onclick="addTask()" class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition"> | |
| Save Task | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Task management functions | |
| let tasks = []; | |
| function openAddTaskModal() { | |
| document.getElementById('addTaskModal').classList.remove('hidden'); | |
| } | |
| function closeAddTaskModal() { | |
| document.getElementById('addTaskModal').classList.add('hidden'); | |
| } | |
| function addTask() { | |
| const name = document.getElementById('taskName').value; | |
| const dueDate = document.getElementById('taskDueDate').value; | |
| const priority = document.getElementById('taskPriority').value; | |
| const hasReminder = document.getElementById('taskReminder').checked; | |
| if (name) { | |
| const newTask = { | |
| id: Date.now(), | |
| name, | |
| dueDate, | |
| priority, | |
| hasReminder, | |
| completed: false | |
| }; | |
| tasks.push(newTask); | |
| renderTasks(); | |
| closeAddTaskModal(); | |
| // Clear form | |
| document.getElementById('taskName').value = ''; | |
| document.getElementById('taskDueDate').value = ''; | |
| document.getElementById('taskPriority').value = 'medium'; | |
| document.getElementById('taskReminder').checked = false; | |
| // Set reminder if enabled | |
| if (hasReminder && dueDate) { | |
| setReminder(newTask); | |
| } | |
| } else { | |
| alert('Please enter a task name'); | |
| } | |
| } | |
| function setReminder(task) { | |
| console.log(`Reminder set for task: ${task.name} at ${task.dueDate}`); | |
| // In production, this would use browser notifications or connect to a reminder service | |
| alert(`Reminder set for "${task.name}"`); | |
| } | |
| function renderTasks() { | |
| const taskList = document.getElementById('taskList'); | |
| const upcomingTasks = document.getElementById('upcomingTasks'); | |
| taskList.innerHTML = ''; | |
| upcomingTasks.innerHTML = ''; | |
| tasks.forEach(task => { | |
| const taskItem = document.createElement('div'); | |
| taskItem.className = `task-item task-card rounded-lg p-4 flex items-center justify-between ${task.completed ? 'opacity-60' : ''}`; | |
| taskItem.innerHTML = ` | |
| <div class="flex items-center"> | |
| <input type="checkbox" ${task.completed ? 'checked' : ''} onchange="toggleTaskCompletion(${task.id})" class="mr-3"> | |
| <div> | |
| <div class="font-medium">${task.name}</div> | |
| <div class="text-xs opacity-80">${formatDate(task.dueDate)}</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs px-2 py-1 rounded-full ${getPriorityClass(task.priority)}"> | |
| ${task.priority} | |
| </span> | |
| ${task.hasReminder ? '<i data-feather="bell" class="w-4 h-4 text-yellow-400"></i>' : ''} | |
| </div> | |
| `; | |
| taskList.appendChild(taskItem); | |
| // Add to upcoming tasks if not completed and has due date | |
| if (!task.completed && task.dueDate) { | |
| const upcomingItem = document.createElement('div'); | |
| upcomingItem.className = 'task-card rounded-lg p-3'; | |
| upcomingItem.innerHTML = ` | |
| <div class="font-medium">${task.name}</div> | |
| <div class="text-xs opacity-80">Due: ${formatDate(task.dueDate)}</div> | |
| `; | |
| upcomingTasks.appendChild(upcomingItem); | |
| } | |
| }); | |
| feather.replace(); | |
| } | |
| function toggleTaskCompletion(taskId) { | |
| const taskIndex = tasks.findIndex(task => task.id === taskId); | |
| if (taskIndex !== -1) { | |
| tasks[taskIndex].completed = !tasks[taskIndex].completed; | |
| renderTasks(); | |
| } | |
| } | |
| function getPriorityClass(priority) { | |
| switch(priority) { | |
| case 'high': return 'bg-red-600/30'; | |
| case 'medium': return 'bg-yellow-600/30'; | |
| default: return 'bg-green-600/30'; | |
| } | |
| } | |
| function formatDate(dateString) { | |
| if (!dateString) return 'No deadline'; | |
| const date = new Date(dateString); | |
| return date.toLocaleString(); | |
| } | |
| // Initialize with some sample tasks | |
| tasks = [ | |
| { | |
| id: 1, | |
| name: 'Complete project proposal', | |
| dueDate: '2023-12-15T14:00', | |
| priority: 'high', | |
| hasReminder: true, | |
| completed: false | |
| }, | |
| { | |
| id: 2, | |
| name: 'Schedule team meeting', | |
| dueDate: '2023-12-10T10:00', | |
| priority: 'medium', | |
| hasReminder: false, | |
| completed: false | |
| } | |
| ]; | |
| renderTasks(); | |
| </script> | |
| </body> | |
| </html> |