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 | Admin 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> | |
| </head> | |
| <body class="auth-required bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-8">User Management</h1> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">John Doe</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">john@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">User</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-red-600 hover:text-red-900">Deactivate</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Jane Smith</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">jane@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">User</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-green-600 hover:text-green-900">Activate</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |