Spaces:
Running
Running
Make me an HTML application, the specifications are as follows: The app is a to do list app that first starts with a user login and registration module. Users are able to register and log into their accounts which have unique data tied to each. There are two user cases, basic user, and admin user. The admin user can manage every user and turn accounts active and inactive. The admin dashboard only has a view of a table of users and then they can select specific users they wish to mark as inactive. Then momving onto the user case, first is when the basic user logs in they will be met with a dashboard with a simplel abel on the top saying "Your Dashboard" And then there is a search bar for tasks, there is a button on the botttom to make tasks and task groups, when you make a task group you are able to press it to enter within the task group, and you can make tasks within it. You are also able to assign "Tags" To a task or task group from the dashboard, which adds a coloured label to them, such as "School" "Urgent" etc. the name of the system is TaskTrack.
c6fe16a
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TaskTrack | Dashboard</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 src="components/navbar.js"></script> | |
| <script src="components/task-group.js"></script> | |
| <script src="components/task-item.js"></script> | |
| <script src="components/create-task-modal.js"></script> | |
| </head> | |
| <body class="auth-required bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-800">Your Dashboard</h1> | |
| <div class="relative w-64"> | |
| <input type="text" placeholder="Search tasks..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <task-group title="Personal Tasks" tag="personal"> | |
| <task-item title="Buy groceries" completed="false"></task-item> | |
| <task-item title="Call mom" completed="true"></task-item> | |
| </task-group> | |
| <task-group title="Work Projects" tag="work"> | |
| <task-item title="Finish report" completed="false"></task-item> | |
| <task-item title="Team meeting" completed="false"></task-item> | |
| </task-group> | |
| <task-group title="School Assignments" tag="school"> | |
| <task-item title="Math homework" completed="false"></task-item> | |
| <task-item title="Research paper" completed="false"></task-item> | |
| </task-group> | |
| </div> | |
| <button id="createTaskBtn" class="fixed bottom-8 right-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 shadow-lg transition-transform hover:scale-110"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| </div> | |
| <create-task-modal></create-task-modal> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |