Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BrewTask - Food & Kombucha Business Task Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .task-card { | |
| transition: all 0.3s ease; | |
| } | |
| .task-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .dropzone { | |
| min-height: 200px; | |
| transition: background-color 0.3s; | |
| } | |
| .dropzone.active { | |
| background-color: rgba(167, 243, 208, 0.3); | |
| } | |
| .priority-low { | |
| border-left: 4px solid #10B981; | |
| } | |
| .priority-medium { | |
| border-left: 4px solid #F59E0B; | |
| } | |
| .priority-high { | |
| border-left: 4px solid #EF4444; | |
| } | |
| .ai-suggestion { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { background-color: rgba(236, 253, 245, 1); } | |
| 50% { background-color: rgba(236, 253, 245, 0.5); } | |
| 100% { background-color: rgba(236, 253, 245, 1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coffee text-3xl text-amber-800 mr-3"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">BrewTask</h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button id="analyticsBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"> | |
| <i class="fas fa-chart-bar mr-2"></i>Analytics | |
| </button> | |
| <button id="settingsBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-cog mr-2"></i>Settings | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Sidebar --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow p-6"> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Business Areas</h2> | |
| <ul class="space-y-2"> | |
| <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="all"><i class="fas fa-list-ul mr-2 text-green-600"></i>All Tasks</button></li> | |
| <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="kombucha"><i class="fas fa-wine-bottle mr-2 text-purple-600"></i>Kombucha Production</button></li> | |
| <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="coffee"><i class="fas fa-coffee mr-2 text-amber-600"></i>Coffee Truck</button></li> | |
| <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="marketing"><i class="fas fa-bullhorn mr-2 text-blue-600"></i>Marketing</button></li> | |
| <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="inventory"><i class="fas fa-boxes mr-2 text-orange-600"></i>Inventory</button></li> | |
| <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="admin"><i class="fas fa-file-invoice-dollar mr-2 text-gray-600"></i>Admin</button></li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Quick Actions</h2> | |
| <button id="quickTaskBtn" class="w-full mb-3 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i>Add Task | |
| </button> | |
| <button id="aiSuggestBtn" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> | |
| <i class="fas fa-robot mr-2"></i>AI Suggestions | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Task Filters</h2> | |
| <select id="priorityFilter" class="w-full mb-3 px-4 py-2 border rounded-lg"> | |
| <option value="all">All Priorities</option> | |
| <option value="high">High Priority</option> | |
| <option value="medium">Medium Priority</option> | |
| <option value="low">Low Priority</option> | |
| </select> | |
| <select id="statusFilter" class="w-full px-4 py-2 border rounded-lg"> | |
| <option value="all">All Statuses</option> | |
| <option value="todo">To Do</option> | |
| <option value="in-progress">In Progress</option> | |
| <option value="done">Completed</option> | |
| </select> | |
| </div> | |
| <div class="p-4 bg-green-50 rounded-lg"> | |
| <h3 class="font-medium text-green-800 mb-2">AI Assistant</h3> | |
| <p class="text-sm text-green-700 mb-3">Need help prioritizing? Ask our AI assistant for task recommendations.</p> | |
| <button id="askAIBtn" class="w-full px-3 py-1 bg-green-100 text-green-800 text-sm rounded hover:bg-green-200 transition"> | |
| <i class="fas fa-comment-dots mr-1"></i>Ask AI | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Task Boards --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Task Input --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-tasks text-xl text-green-600 mr-2"></i> | |
| <h2 class="text-xl font-semibold text-gray-700">Add New Task</h2> | |
| </div> | |
| <form id="taskForm" class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="taskTitle" class="block text-sm font-medium text-gray-700 mb-1">Task Title</label> | |
| <input type="text" id="taskTitle" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="E.g., Brew new batch of kombucha" required> | |
| </div> | |
| <div> | |
| <label for="taskCategory" class="block text-sm font-medium text-gray-700 mb-1">Category</label> | |
| <select id="taskCategory" class="w-full px-4 py-2 border rounded-lg"> | |
| <option value="kombucha">Kombucha Production</option> | |
| <option value="coffee">Coffee Truck</option> | |
| <option value="marketing">Marketing</option> | |
| <option value="inventory">Inventory</option> | |
| <option value="admin">Admin</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="taskDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="taskDescription" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Provide details about the task..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="taskPriority" class="block text-sm font-medium text-gray-700 mb-1">Priority</label> | |
| <select id="taskPriority" class="w-full px-4 py-2 border rounded-lg"> | |
| <option value="low">Low</option> | |
| <option value="medium">Medium</option> | |
| <option value="high">High</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="taskDueDate" class="block text-sm font-medium text-gray-700 mb-1">Due Date</label> | |
| <input type="date" id="taskDueDate" class="w-full px-4 py-2 border rounded-lg"> | |
| </div> | |
| <div> | |
| <label for="taskAssignee" class="block text-sm font-medium text-gray-700 mb-1">Assignee</label> | |
| <select id="taskAssignee" class="w-full px-4 py-2 border rounded-lg"> | |
| <option value="me">Myself</option> | |
| <option value="team">Team</option> | |
| <option value="vendor">Vendor</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="taskReminder" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"> | |
| <label for="taskReminder" class="ml-2 block text-sm text-gray-700">Set Reminder</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="taskCalendar" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"> | |
| <label for="taskCalendar" class="ml-2 block text-sm text-gray-700">Add to Calendar</label> | |
| </div> | |
| </div> | |
| <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"> | |
| <i class="fas fa-plus mr-2"></i>Add Task | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- AI Suggestions Panel (hidden by default) --> | |
| <div id="aiSuggestionsPanel" class="bg-white rounded-xl shadow p-6 hidden"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-xl text-blue-600 mr-2"></i> | |
| <h2 class="text-xl font-semibold text-gray-700">AI Task Suggestions</h2> | |
| </div> | |
| <button id="closeAIBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="ai-suggestion p-4 rounded-lg border border-blue-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-blue-800">Schedule kombucha second fermentation</h3> | |
| <p class="text-sm text-gray-600 mt-1">Based on your production cycle, it's time to start the second fermentation for batch #KB-0423.</p> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Add Task</button> | |
| </div> | |
| </div> | |
| <div class="ai-suggestion p-4 rounded-lg border border-blue-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-blue-800">Restock coffee beans inventory</h3> | |
| <p class="text-sm text-gray-600 mt-1">Inventory levels for Colombian beans are below optimal. Suggested reorder quantity: 25kg.</p> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Add Task</button> | |
| </div> | |
| </div> | |
| <div class="ai-suggestion p-4 rounded-lg border border-blue-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-blue-800">Post weekend specials on social media</h3> | |
| <p class="text-sm text-gray-600 mt-1">Engagement is highest on Fridays. Suggested content: Behind-the-scenes kombucha brewing.</p> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Add Task</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Boards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- To Do Column --> | |
| <div class="dropzone bg-gray-50 rounded-xl shadow p-4" data-status="todo"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-700 flex items-center"> | |
| <span class="w-3 h-3 bg-gray-400 rounded-full mr-2"></span> | |
| To Do | |
| </h3> | |
| <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">5</span> | |
| </div> | |
| <div id="todo-tasks" class="space-y-3"> | |
| <!-- Sample Task Cards --> | |
| <div class="task-card priority-high bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="1" data-priority="high" data-category="kombucha"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Brew new kombucha batch</h4> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Need to start primary fermentation for ginger-lemon flavor by EOD.</p> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Kombucha</span> | |
| <span class="text-red-500"><i class="fas fa-clock mr-1"></i>Due Today</span> | |
| </div> | |
| </div> | |
| <div class="task-card priority-medium bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="2" data-priority="medium" data-category="coffee"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Restock coffee truck supplies</h4> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Need more oat milk and paper cups for weekend rush.</p> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="px-2 py-1 bg-amber-100 text-amber-800 rounded-full">Coffee Truck</span> | |
| <span class="text-yellow-600"><i class="fas fa-clock mr-1"></i>Due in 2 days</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- In Progress Column --> | |
| <div class="dropzone bg-gray-50 rounded-xl shadow p-4" data-status="in-progress"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-700 flex items-center"> | |
| <span class="w-3 h-3 bg-yellow-400 rounded-full mr-2"></span> | |
| In Progress | |
| </h3> | |
| <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">3</span> | |
| </div> | |
| <div id="in-progress-tasks" class="space-y-3"> | |
| <div class="task-card priority-high bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="3" data-priority="high" data-category="marketing"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Create social media posts</h4> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Content for Instagram and Facebook about new kombucha flavors.</p> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Marketing</span> | |
| <span class="text-red-500"><i class="fas fa-clock mr-1"></i>Due Tomorrow</span> | |
| </div> | |
| </div> | |
| <div class="task-card priority-low bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="4" data-priority="low" data-category="inventory"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Update inventory spreadsheet</h4> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Record latest shipments and current stock levels.</p> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded-full">Inventory</span> | |
| <span class="text-green-600"><i class="fas fa-clock mr-1"></i>Due in 5 days</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Done Column --> | |
| <div class="dropzone bg-gray-50 rounded-xl shadow p-4" data-status="done"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-700 flex items-center"> | |
| <span class="w-3 h-3 bg-green-400 rounded-full mr-2"></span> | |
| Done | |
| </h3> | |
| <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">2</span> | |
| </div> | |
| <div id="done-tasks" class="space-y-3"> | |
| <div class="task-card bg-white p-4 rounded-lg shadow-sm opacity-70" data-id="5" data-priority="medium" data-category="admin"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium">Pay vendor invoices</h4> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Completed payments for coffee bean suppliers and bottle vendors.</p> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full">Admin</span> | |
| <span class="text-gray-500"><i class="fas fa-check-circle mr-1"></i>Completed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modals --> | |
| <!-- Analytics Modal --> | |
| <div id="analyticsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Business Analytics</h2> | |
| <button id="closeAnalyticsModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-green-800 mb-2">Tasks Completed</h3> | |
| <p class="text-3xl font-bold text-green-600">42</p> | |
| <p class="text-sm text-green-700 mt-1">+12% from last week</p> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-blue-800 mb-2">Overdue Tasks</h3> | |
| <p class="text-3xl font-bold text-blue-600">3</p> | |
| <p class="text-sm text-blue-700 mt-1">-2 from last week</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-purple-800 mb-2">Kombucha Batches</h3> | |
| <p class="text-3xl font-bold text-purple-600">8</p> | |
| <p class="text-sm text-purple-700 mt-1">In production this week</p> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Task Completion Rate</h3> | |
| <div class="bg-white p-4 rounded-lg border"> | |
| <div class="h-64"> | |
| <!-- Chart would go here --> | |
| <div class="flex items-center justify-center h-full bg-gray-100 rounded"> | |
| <p class="text-gray-500">Task completion chart visualization</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Tasks by Category</h3> | |
| <div class="bg-white p-4 rounded-lg border"> | |
| <div class="h-64"> | |
| <!-- Chart would go here --> | |
| <div class="flex items-center justify-center h-full bg-gray-100 rounded"> | |
| <p class="text-gray-500">Category distribution pie chart</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Priority Distribution</h3> | |
| <div class="bg-white p-4 rounded-lg border"> | |
| <div class="h-64"> | |
| <!-- Chart would go here --> | |
| <div class="flex items-center justify-center h-full bg-gray-100 rounded"> | |
| <p class="text-gray-500">Priority distribution bar chart</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Settings</h2> | |
| <button id="closeSettingsModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3">Notifications</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Email Notifications</h4> | |
| <p class="text-sm text-gray-600">Receive task reminders via email</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">WhatsApp Notifications</h4> | |
| <p class="text-sm text-gray-600">Receive task reminders via WhatsApp</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">SMS Notifications</h4> | |
| <p class="text-sm text-gray-600">Receive urgent task reminders via SMS</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3">Integrations</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Google_Calendar_icon_%282020%29.svg/1200px-Google_Calendar_icon_%282020%29.svg.png" class="w-8 h-8 mr-3" alt="Google Calendar"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Google Calendar</h4> | |
| <p class="text-sm text-gray-600">Sync tasks with your calendar</p> | |
| </div> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm"> | |
| Connect | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/1200px-WhatsApp.svg.png" class="w-8 h-8 mr-3" alt="WhatsApp"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">WhatsApp Business</h4> | |
| <p class="text-sm text-gray-600">Send reminders via WhatsApp</p> | |
| </div> | |
| </div> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm"> | |
| Connect | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1200px-Telegram_logo.svg.png" class="w-8 h-8 mr-3" alt="Telegram"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Telegram</h4> | |
| <p class="text-sm text-gray-600">Send reminders via Telegram</p> | |
| </div> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition text-sm"> | |
| Connect | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3">AI Assistant</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">AI Task Suggestions</h4> | |
| <p class="text-sm text-gray-600">Get smart suggestions for your tasks</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Priority Assistant</h4> | |
| <p class="text-sm text-gray-600">Let AI help prioritize your tasks</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Detail Modal --> | |
| <div id="taskDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Task Details</h2> | |
| <button id="closeTaskDetailModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Brew new kombucha batch</h3> | |
| <div class="flex items-center space-x-4 text-sm mb-4"> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Kombucha</span> | |
| <span class="text-red-500"><i class="fas fa-clock mr-1"></i>Due Today</span> | |
| <span class="text-gray-600">Created: 2 days ago</span> | |
| </div> | |
| <p class="text-gray-700">Need to start primary fermentation for ginger-lemon flavor by EOD. Follow the standard recipe but increase ginger by 20% based on customer feedback from last batch.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Priority</h4> | |
| <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">High</span> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Assignee</h4> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Myself</span> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Due Date</h4> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Today, 5:00 PM</span> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Status</h4> | |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">In Progress</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Reminders</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div> | |
| <i class="fas fa-bell text-yellow-500 mr-2"></i> | |
| <span>1 hour before due time</span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div> | |
| <i class="fas fa-envelope text-blue-500 mr-2"></i> | |
| <span>Email reminder sent yesterday</span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="mt-3 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm"> | |
| <i class="fas fa-plus mr-2"></i>Add Reminder | |
| </button> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Comments</h4> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">JD</div> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-sm">Jane Doe</span> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Don't forget to check the pH levels before starting the fermentation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white">Y</div> | |
| </div> | |
| <div class="flex-1"> | |
| <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Add a comment..."></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-edit mr-2"></i>Edit | |
| </button> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"> | |
| <i class="fas fa-check mr-2"></i>Mark Complete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const analyticsBtn = document.getElementById('analyticsBtn'); | |
| const settingsBtn = document.getElementById('settingsBtn'); | |
| const quickTaskBtn = document.getElementById('quickTaskBtn'); | |
| const aiSuggestBtn = document.getElementById('aiSuggestBtn'); | |
| const askAIBtn = document.getElementById('askAIBtn'); | |
| const closeAIBtn = document.getElementById('closeAIBtn'); | |
| const closeAnalyticsModal = document.getElementById('closeAnalyticsModal'); | |
| const closeSettingsModal = document.getElementById('closeSettingsModal'); | |
| const closeTaskDetailModal = document.getElementById('closeTaskDetailModal'); | |
| const analyticsModal = document.getElementById('analyticsModal'); | |
| const settingsModal = document.getElementById('settingsModal'); | |
| const taskDetailModal = document.getElementById('taskDetailModal'); | |
| const aiSuggestionsPanel = document.getElementById('aiSuggestionsPanel'); | |
| const taskForm = document.getElementById('taskForm'); | |
| const priorityFilter = document.getElementById('priorityFilter'); | |
| const statusFilter = document.getElementById('statusFilter'); | |
| const categoryBtns = document.querySelectorAll('.category-btn'); | |
| // Event Listeners | |
| analyticsBtn.addEventListener('click', () => analyticsModal.classList.remove('hidden')); | |
| settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden')); | |
| quickTaskBtn.addEventListener('click', () => { | |
| document.getElementById('taskTitle').focus(); | |
| window.scrollTo(0, 0); | |
| }); | |
| aiSuggestBtn.addEventListener('click', () => aiSuggestionsPanel.classList.remove('hidden')); | |
| askAIBtn.addEventListener('click', () => aiSuggestionsPanel.classList.remove('hidden')); | |
| closeAIBtn.addEventListener('click', () => aiSuggestionsPanel.classList.add('hidden')); | |
| closeAnalyticsModal.addEventListener('click', () => analyticsModal.classList.add('hidden')); | |
| closeSettingsModal.addEventListener('click', () => settingsModal.classList.add('hidden')); | |
| closeTaskDetailModal.addEventListener('click', () => taskDetailModal.classList.add('hidden')); | |
| // Close modals when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === analyticsModal) analyticsModal.classList.add('hidden'); | |
| if (e.target === settingsModal) settingsModal.classList.add('hidden'); | |
| if (e.target === taskDetailModal) taskDetailModal.classList.add('hidden'); | |
| }); | |
| // Task Form Submission | |
| taskForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const title = document.getElementById('taskTitle').value; | |
| const category = document.getElementById('taskCategory').value; | |
| const description = document.getElementById('taskDescription').value; | |
| const priority = document.getElementById('taskPriority').value; | |
| const dueDate = document.getElementById('taskDueDate').value; | |
| const assignee = document.getElementById('taskAssignee').value; | |
| const reminder = document.getElementById('taskReminder').checked; | |
| const calendar = document.getElementById('taskCalendar').checked; | |
| // In a real app, you would add the task to your database/state | |
| console.log('New Task:', { | |
| title, category, description, priority, dueDate, assignee, reminder, calendar | |
| }); | |
| // Reset form | |
| taskForm.reset(); | |
| // Show success message | |
| alert('Task added successfully!'); | |
| }); | |
| // Filter Tasks | |
| priorityFilter.addEventListener('change', filterTasks); | |
| statusFilter.addEventListener('change', filterTasks); | |
| categoryBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const category = btn.dataset.category; | |
| filterTasksByCategory(category); | |
| // Update active state | |
| categoryBtns.forEach(b => b.classList.remove('bg-green-100', 'text-green-800')); | |
| btn.classList.add('bg-green-100', 'text-green-800'); | |
| }); | |
| }); | |
| function filterTasks() { | |
| const priority = priorityFilter.value; | |
| const status = statusFilter.value; | |
| // In a real app, you would filter your task list based on these values | |
| console.log('Filtering by:', { priority, status }); | |
| } | |
| function filterTasksByCategory(category) { | |
| // In a real app, you would filter your task list based on category | |
| console.log('Filtering by category:', category); | |
| } | |
| // Drag and Drop Functionality | |
| const taskCards = document.querySelectorAll('.task-card'); | |
| const dropzones = document.querySelectorAll('.dropzone'); | |
| taskCards.forEach(task => { | |
| task.addEventListener('dragstart', dragStart); | |
| task.addEventListener('dragend', dragEnd); | |
| // Add click event to show task details | |
| task.addEventListener('click', () => { | |
| taskDetailModal.classList.remove('hidden'); | |
| }); | |
| }); | |
| dropzones.forEach(zone => { | |
| zone.addEventListener('dragover', dragOver); | |
| zone.addEventListener('dragenter', dragEnter); | |
| zone.addEventListener('dragleave', dragLeave); | |
| zone.addEventListener('drop', drop); | |
| }); | |
| let draggedTask = null; | |
| function dragStart() { | |
| draggedTask = this; | |
| setTimeout(() => this.classList.add('opacity-30'), 0); | |
| } | |
| function dragEnd() { | |
| this.classList.remove('opacity-30'); | |
| } | |
| function dragOver(e) { | |
| e.preventDefault(); | |
| } | |
| function dragEnter(e) { | |
| e.preventDefault(); | |
| this.classList.add('active'); | |
| } | |
| function dragLeave() { | |
| this.classList.remove('active'); | |
| } | |
| function drop() { | |
| this.classList.remove('active'); | |
| // Get the status from the dropzone | |
| const newStatus = this.dataset.status; | |
| // In a real app, you would update the task status in your database/state | |
| console.log(`Moving task ${draggedTask.dataset.id} to ${newStatus}`); | |
| // Move the task visually | |
| this.querySelector(`#${newStatus}-tasks`).appendChild(draggedTask); | |
| // Update task UI based on new status | |
| if (newStatus === 'done') { | |
| draggedTask.classList.add('opacity-70'); | |
| draggedTask.classList.remove('cursor-move'); | |
| draggedTask.draggable = false; | |
| } else { | |
| draggedTask.classList.remove('opacity-70'); | |
| draggedTask.classList.add('cursor-move'); | |
| draggedTask.draggable = true; | |
| } | |
| } | |
| // Initialize due date to today | |
| document.getElementById('taskDueDate').valueAsDate = new Date(); | |
| // Sample AI suggestion click handler | |
| document.querySelectorAll('.ai-suggestion button').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const suggestionText = this.parentElement.parentElement.querySelector('h3').textContent; | |
| document.getElementById('taskTitle').value = suggestionText; | |
| aiSuggestionsPanel.classList.add('hidden'); | |
| document.getElementById('taskTitle').focus(); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=oaxacagold/oaxaca-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |