setDescription(e.target.value)}\n            className=\"phone-input\"\n          />\n        );\n      case \"date\":\n        return (\n          <input \n            type=\"datetime-local\" \n            value={dueDate}\n            onChange={(e) => setDueDate(e.target.value)}\n            required \n            className=\"phone-input date-input\"\n          />\n        );\n      case \"priority\":\n        return (\n          <select \n            value={priority}\n            onChange={(e) => setPriority(e.target.value)}\n            className=\"phone-input\"\n          >\n            <option value=\"low\">🍃 Low Priority (Breeze)</option>\n            <option value=\"medium\">🌟 Medium Priority (Steady)</option>\n            <option value=\"high\">🔥 High Priority (Urgent)</option>\n          </select>\n        );\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"task-form\">\n      <div className=\"tab-navigation\">\n        {[\"title\", \"description\", \"date\", \"priority\"].map(tab => (\n          <button \n            key={tab} \n            type=\"button\"\n            className={activeTab === tab ? \"active\" : \"\"}\n            onClick={() => setActiveTab(tab)}\n          >\n            {tab.charAt(0).toUpperCase() + tab.slice(1)}\n          </button>\n        ))}\n      </div>\n      <div className=\"tab-content\">\n        {renderTabContent()}\n      </div>\n      <button type=\"submit\" className=\"submit-btn\">Create Task</button>\n    </form>\n  );\n}\n\nfunction TaskList() {\n  const [tasks, setTasks] = useState([]);\n\n  const fetchTasks = async () => {\n    const response = await fetch(\"/get-tasks\");\n    const data = await response.json();\n    setTasks(data);\n  };\n\n  const updateTaskStatus = async (taskId, newStatus) => {\n    const response = await fetch(\"/update-task-status\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ id: taskId, status: newStatus })\n    });\n    if (response.ok) {\n      fetchTasks();\n    }\n  };\n\n  const deleteTask = async (taskId) => {\n    const response = await fetch(\"/delete-task\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ id: taskId })\n    });\n    if (response.ok) {\n      fetchTasks();\n    }\n  };\n\n  useEffect(() => {\n    fetchTasks();\n  }, []);\n\n  const formatDate = (dateString) => {\n    return new Date(dateString).toLocaleString();\n  };\n\n  const getPriorityEmoji = (priority) => {\n    switch(priority) {\n      case 'low': return '🍃';\n      case 'medium': return '🌟';\n      case 'high': return '🔥';\n      default: return '';\n    }\n  };\n\n  return (\n    <div className=\"task-list\">\n      <h2>My Tasks</h2>\n      {tasks.map((task) => (\n        <div \n          key={task.id} \n          className={`task-card priority-${task.priority} status-${task.status}`}\n        >\n          <div className=\"task-header\">\n            <h3>{task.title}</h3>\n            <span className={`priority-badge ${task.priority}`}>\n              {getPriorityEmoji(task.priority)} {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}\n            </span>\n          </div>\n          <p>{task.description}</p>\n          <div className=\"task-footer\">\n            <span>Due: {formatDate(task.due_date)}</span>\n            <div className=\"task-actions\">\n              {task.status === \"pending\" && (\n                <button \n                  onClick={() => updateTaskStatus(task.id, \"completed\")}\n                  className=\"complete-btn\"\n                >\n                  ✓ Complete\n                </button>\n              )}\n              {task.status === \"completed\" && (\n                <button \n                  onClick={() => updateTaskStatus(task.id, \"pending\")}\n                  className=\"reopen-btn\"\n                >\n                  ↩ Reopen\n                </button>\n              )}\n              <button \n                onClick={() => deleteTask(task.id)}\n                className=\"delete-btn\"\n              >\n                🗑️ Delete\n              </button>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction App() {\n  const [refreshTasks, setRefreshTasks] = useState(0);\n\n  return (\n    <div className=\"phone-frame\">\n      <div className=\"phone-screen\">\n        <div className=\"phone-header\">\n          <span className=\"time\">9:41</span>\n          <div className=\"status-icons\">\n            <span>🔋</span>\n            <span>📶</span>\n          </div>\n        </div>\n        <div className=\"app-container\">\n          <h1>📱 E-Pulse</h1>\n          <TaskForm onSubmit={() => setRefreshTasks(prev => prev + 1)} />\n          <TaskList key={refreshTasks} />\n          <a \n            href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n            target=\"_top\" \n            className=\"source-link\"\n          >\n            View Source\n          </a>\n        </div>\n        <div className=\"phone-home-indicator\"></div>\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"taskManagerApp\";\n  const SCHEMA_VERSION = 1;\n\n  // Create tasks table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_tasks_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      description TEXT,\n      due_date DATETIME NOT NULL,\n      priority TEXT NOT NULL DEFAULT 'medium',\n      status TEXT NOT NULL DEFAULT 'pending',\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle task submission\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/submit-task\") {\n    const { title, description, dueDate, priority, status } = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_tasks_${SCHEMA_VERSION} \n      (title, description, due_date, priority, status) \n      VALUES (?, ?, ?, ?, ?)`,\n      [title, description, dueDate, priority, status]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Handle get tasks\n  if (request.method === \"GET\" && new URL(request.url).pathname === \"/get-tasks\") {\n    const tasks = await sqlite.execute(\n      `SELECT * FROM ${KEY}_tasks_${SCHEMA_VERSION} \n      ORDER BY \n        CASE status \n          WHEN 'pending' THEN 1 \n          WHEN 'completed' THEN 2 \n        END, \n      due_date ASC`\n    );\n    return new Response(JSON.stringify(tasks.rows), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Handle update task status\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/update-task-status\") {\n    const { id, status } = await request.json();\n    await sqlite.execute(\n      `UPDATE ${KEY}_tasks_${SCHEMA_VERSION} SET status = ? WHERE id = ?`,\n      [status, id]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Handle delete task\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/delete-task\") {\n    const { id } = await request.json();\n    await sqlite.execute(\n      `DELETE FROM ${KEY}_tasks_${SCHEMA_VERSION} WHERE id = ?`,\n      [id]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Serve HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>E-Pulse</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: #f4f7f6;\n  color: #333;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n\n.phone-frame {\n  background-color: #000;\n  border-radius: 40px;\n  padding: 10px;\n  width: 375px;\n  height: 812px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n}\n\n.phone-screen {\n  background-color: white;\n  border-radius: 30px;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.phone-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 15px;\n  background-color: rgba(255,255,255,0.9);\n}\n\n.phone-header .time {\n  font-weight: bold;\n}\n\n.phone-header .status-icons {\n  display: flex;\n  gap: 5px;\n}\n\n.phone-home-indicator {\n  position: absolute;\n  bottom: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 134px;\n  height: 5px;\n  background-color: #000;\n  border-radius: 5px;\n}\n\n.app-container {\n  max-width: 100%;\n  padding: 20px;\n  padding-bottom: 60px;\n  overflow-y: auto;\n  height: calc(100% - 100px);\n}\n\nh1 {\n  text-align: center;\n  color: #ff1493;\n  margin-bottom: 30px;\n}\n\n.task-form {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  margin-bottom: 20px;\n}\n\n.tab-navigation {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n}\n\n.tab-navigation button {\n  flex: 1;\n  padding: 10px;\n  background-color: #e0e0e0;\n  border: none;\n  border-radius: 5px;\n  margin: 0 5px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.tab-navigation button.active {\n  background-color: #ff1493;\n  color: white;\n}\n\n.tab-content {\n  margin-bottom: 20px;\n}\n\n.phone-input {\n  width: 100%;\n  margin-bottom: 15px;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.date-input {\n  background-color: #4B0082; /* Indigo */\n  color: white;\n}\n\n.date-input::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}\n\n.form-row {\n  display: flex;\n  gap: 10px;\n}\n\n.form-row input,\n.form-row select {\n  flex: 1;\n}\n\n.task-list {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  padding: 20px;\n}\n\n.task-card {\n  background: #f9f9f9;\n  border-left: 5px solid;\n  margin-bottom: 15px;\n  padding: 15px;\n  border-radius: 4px;\n}\n\n.task-card.priority-low { border-color: #00ffff; } /* Neon Cyan */\n.task-card.priority-medium { border-color: #ff6fff; } /* Neon Pink */\n.task-card.priority-high { border-color: #ff1493; } /* Deep Pink */\n\n.task-card.status-completed {\n  opacity: 0.6;\n  text-decoration: line-through;\n}\n\n.task-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n}\n\n.priority-badge {\n  padding: 3px 8px;\n  border-radius: 12px;\n  font-size: 0.8em;\n}\n\n.priority-badge.low { \n  background: #00ffff; \n  color: black; \n  text-shadow: 0 0 5px rgba(0,255,255,0.7);\n}\n.priority-badge.medium { \n  background: #ff6fff; \n  color: black; \n  text-shadow: 0 0 5px rgba(255,111,255,0.7);\n}\n.priority-badge.high { \n  background: #ff1493; \n  color: white; \n  text-shadow: 0 0 5px rgba(255,20,147,0.7);\n}\n\n.task-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.task-actions button {\n  margin-left: 10px;\n  padding: 5px 10px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.complete-btn {\n  background-color: #00ff00;\n  color: black;\n  text-shadow: 0 0 5px rgba(0,255,0,0.7);\n}\n\n.reopen-btn {\n  background-color: #00ffff;\n  color: black;\n  text-shadow: 0 0 5px rgba(0,255,255,0.7);\n}\n\n.delete-btn {\n  background-color: #ff4500;\n  color: white;\n  text-shadow: 0 0 5px rgba(255,69,0,0.7);\n}\n\n.submit-btn {\n  width: 100%;\n  padding: 10px;\n  background-color: #ff1493;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.source-link {\n  display: block;\n  text-align: center;\n  margin-top: 20px;\n  color: #666;\n  text-decoration: none;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/DeeGemini/taskManagerApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>