Spaces:

Prenss
/

tasktrack-turbo

Running

App Files Files Community

Prenss commited on Oct 31, 2025

Commit

c6fe16a

verified ·

1 Parent(s): 933f862

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.

Browse files

Files changed (8) hide show

README.md +8 -5
admin-dashboard.html +61 -0
components/auth-form.js +102 -0
components/navbar.js +63 -0
dashboard.html +55 -0
index.html +24 -19
script.js +55 -0
style.css +50 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Tasktrack Turbo
-emoji: 🐢
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: TaskTrack Turbo  🚀
+colorFrom: blue
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

admin-dashboard.html ADDED Viewed

	@@ -0,0 +1,61 @@

+<!DOCTYPE html>
+<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>

components/auth-form.js ADDED Viewed

	@@ -0,0 +1,102 @@

+class AuthForm extends HTMLElement {
+    constructor() {
+        super();
+        this.mode = 'login'; // 'login' or 'register'
+    }
+    connectedCallback() {
+        this.render();
+        this.setupEventListeners();
+    }
+    toggleMode() {
+        this.mode = this.mode === 'login' ? 'register' : 'login';
+        this.render();
+        this.setupEventListeners();
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const data = Object.fromEntries(formData.entries());
+        try {
+            const endpoint = this.mode === 'login' ? '/auth/login' : '/auth/register';
+            const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data)
+            });
+            if (!response.ok) {
+                throw new Error(await response.text());
+            }
+            const { token, user } = await response.json();
+            localStorage.setItem('token', token);
+            localStorage.setItem('user', JSON.stringify(user));
+            if (user.role === 'admin') {
+                redirectTo('/admin-dashboard.html');
+            } else {
+                redirectTo('/dashboard.html');
+            }
+        } catch (error) {
+            showToast(error.message, 'error');
+        }
+    }
+    setupEventListeners() {
+        this.querySelector('form').addEventListener('submit', (e) => this.handleSubmit(e));
+        this.querySelector('#toggleMode').addEventListener('click', () => this.toggleMode());
+    }
+    render() {
+        this.innerHTML = `
+            <style>
+                .auth-form input {
+                    transition: all 0.2s;
+                }
+                .auth-form input:focus {
+                    border-color: #6366f1;
+                    box-shadow: 0 0 0 1px #6366f1;
+                }
+            </style>
+            <form class="auth-form space-y-6">
+                <div class="space-y-4">
+                    <div>
+                        <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+                        <input id="email" name="email" type="email" required
+                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
+                    </div>
+                    <div>
+                        <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
+                        <input id="password" name="password" type="password" required
+                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
+                    </div>
+                    ${this.mode === 'register' ? `
+                        <div>
+                            <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
+                            <input id="name" name="name" type="text" required
+                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none">
+                        </div>
+                    ` : ''}
+                </div>
+                <div>
+                    <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        ${this.mode === 'login' ? 'Sign in' : 'Create account'}
+                    </button>
+                </div>
+                <div class="text-center text-sm text-gray-600">
+                    <button id="toggleMode" type="button" class="font-medium text-purple-600 hover:text-purple-500">
+                        ${this.mode === 'login' ? 'Need an account? Register' : 'Already have an account? Sign in'}
+                    </button>
+                </div>
+            </form>
+        `;
+    }
+}
+customElements.define('auth-form', AuthForm);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,63 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+    handleLogout() {
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+        redirectTo('/index.html');
+    }
+    render() {
+        const user = JSON.parse(localStorage.getItem('user') || '{}');
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    transition: all 0.3s ease;
+                }
+                .nav-link:hover {
+                    color: #6366f1;
+                }
+                .user-avatar {
+                    transition: transform 0.2s;
+                }
+                .user-avatar:hover {
+                    transform: scale(1.1);
+                }
+            </style>
+            <nav class="navbar bg-white shadow-sm">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16">
+                        <div class="flex items-center">
+                            <a href="${user.role === 'admin' ? '/admin-dashboard.html' : '/dashboard.html'}" class="flex-shrink-0 flex items-center">
+                                <span class="text-xl font-bold text-blue-600">TaskTrack</span>
+                            </a>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <div class="flex items-center space-x-1">
+                                <div class="flex-shrink-0">
+                                    <div class="user-avatar h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-medium">
+                                        ${user.name ? user.name.charAt(0).toUpperCase() : 'U'}
+                                    </div>
+                                </div>
+                                <div class="ml-3">
+                                    <p class="text-sm font-medium text-gray-700">${user.name || 'User'}</p>
+                                    <p class="text-xs text-gray-500">${user.role === 'admin' ? 'Admin' : 'User'}</p>
+                                </div>
+                            </div>
+                            <button id="logoutBtn" class="text-gray-500 hover:text-gray-700">
+                                <i data-feather="log-out"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            <script>
+                feather.replace();
+                document.getElementById('logoutBtn').addEventListener('click', () => {
+                    localStorage.removeItem('token');
+                    localStorage.removeItem('user');
+                    window.location.href = '/index.html

dashboard.html ADDED Viewed

	@@ -0,0 +1,55 @@

+<!DOCTYPE html>
+<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>

index.html CHANGED Viewed

@@ -1,19 +1,24 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskTrack | Login</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/auth-form.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+    <div class="w-full max-w-md p-8 space-y-8 bg-white rounded-xl shadow-lg">
+        <div class="text-center">
+            <h1 class="text-3xl font-bold text-blue-600">TaskTrack</h1>
+            <p class="mt-2 text-gray-600">Organize your tasks with ease</p>
+        </div>
+        <auth-form></auth-form>
+    </div>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,55 @@

+// Shared utility functions
+const API_BASE_URL = 'http://localhost:3000/api';
+async function fetchWithAuth(url, options = {}) {
+    const token = localStorage.getItem('token');
+    if (token) {
+        options.headers = {
+            ...options.headers,
+            'Authorization': `Bearer ${token}`
+        };
+    }
+    const response = await fetch(`${API_BASE_URL}${url}`, options);
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+}
+function redirectTo(path) {
+    window.location.href = path;
+}
+function showToast(message, type = 'success') {
+    const toast = document.createElement('div');
+    toast.className = `fixed top-4 right-4 px-4 py-2 rounded-md shadow-lg text-white ${
+        type === 'success' ? 'bg-green-500' : 'bg-red-500'
+    }`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(() => {
+        toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+// Auth state management
+function checkAuth() {
+    const token = localStorage.getItem('token');
+    const user = localStorage.getItem('user');
+    if (token && user) {
+        const parsedUser = JSON.parse(user);
+        if (parsedUser.role === 'admin') {
+            redirectTo('/admin-dashboard.html');
+        } else {
+            redirectTo('/dashboard.html');
+        }
+    }
+}
+// Initialize auth check on pages that require it
+if (document.body.classList.contains('auth-required')) {
+    document.addEventListener('DOMContentLoaded', checkAuth);
+}

style.css CHANGED Viewed

@@ -1,28 +1,60 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.3s ease-in-out;
 }
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+/* Tag colors */
+.tag-school {
+    background-color: #3b82f6;
+    color: white;
 }
+.tag-urgent {
+    background-color: #ef4444;
+    color: white;
+}
+.tag-work {
+    background-color: #10b981;
+    color: white;
+}
+.tag-personal {
+    background-color: #8b5cf6;
+    color: white;
+}
+.tag-other {
+    background-color: #6b7280;
+    color: white;
+}