index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaskFlow | Modern Task Manager</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .task-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
        }
        .status-todo {
            background-color: #e2e8f0;
            color: #4a5568;
        }
        .status-inprogress {
            background-color: #bee3f8;
            color: #2b6cb0;
        }
        .status-completed {
            background-color: #c6f6d5;
            color: #2f855a;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Navigation -->
    <nav class="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">
                    <div class="flex-shrink-0 flex items-center">
                        <i data-feather="check-circle" class="text-indigo-600"></i>
                        <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span>
                    </div>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:items-center">
                    <div class="ml-3 relative">
                        <div>
                            <button id="user-menu" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="User profile">
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex flex-col md:flex-row gap-8">
            <!-- Sidebar -->
            <div class="w-full md:w-64 flex-shrink-0">
                <div class="bg-white rounded-lg shadow-sm p-4">
                    <div class="flex items-center mb-6">
                        <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/42" alt="User profile">
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">John Doe</p>
                            <p class="text-sm text-gray-500">john@example.com</p>
                        </div>
                    </div>
                    <nav class="space-y-1">
                        <a href="#" class="bg-indigo-50 text-indigo-700 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
                            <i data-feather="home" class="text-indigo-500 mr-3 flex-shrink-0"></i>
                            Dashboard
                        </a>
                        <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
                            <i data-feather="inbox" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i>
                            My Tasks
                        </a>
                        <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
                            <i data-feather="send" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i>
                            Assigned Tasks
                        </a>
                        <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
                            <i data-feather="users" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i>
                            Team
                        </a>
                        <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
                            <i data-feather="settings" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0"></i>
                            Settings
                        </a>
                    </nav>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="flex-1">
                <!-- Header -->
                <div class="flex justify-between items-center mb-6">
                    <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
                    <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i data-feather="plus" class="mr-2"></i>
                        New Task
                    </button>
                </div>

                <!-- Stats Cards -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center">
                            <div class="p-3 rounded-full bg-indigo-50 text-indigo-600">
                                <i data-feather="inbox"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-500">Total Tasks</p>
                                <p class="text-2xl font-semibold text-gray-900">24</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center">
                            <div class="p-3 rounded-full bg-blue-50 text-blue-600">
                                <i data-feather="clock"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-500">In Progress</p>
                                <p class="text-2xl font-semibold text-gray-900">8</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center">
                            <div class="p-3 rounded-full bg-green-50 text-green-600">
                                <i data-feather="check-circle"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-500">Completed</p>
                                <p class="text-2xl font-semibold text-gray-900">12</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Tasks -->
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-medium text-gray-900">Recent Tasks</h2>
                    </div>
                    <div class="divide-y divide-gray-200">
                        <!-- Task Item -->
                        <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 pt-0.5">
                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                </div>
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <p class="text-sm font-medium text-gray-900">Update project documentation</p>
                                        <span class="status-badge status-inprogress">In Progress</span>
                                    </div>
                                    <p class="mt-1 text-sm text-gray-500">Due tomorrow • Assigned to Sarah Johnson</p>
                                    <div class="mt-2 flex items-center text-sm text-gray-500">
                                        <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
                                        <span>Created on May 15, 2023</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Task Item -->
                        <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 pt-0.5">
                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
                                </div>
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <p class="text-sm font-medium text-gray-900">Review pull request #42</p>
                                        <span class="status-badge status-completed">Completed</span>
                                    </div>
                                    <p class="mt-1 text-sm text-gray-500">Due yesterday • Assigned to you</p>
                                    <div class="mt-2 flex items-center text-sm text-gray-500">
                                        <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
                                        <span>Created on May 10, 2023</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Task Item -->
                        <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 pt-0.5">
                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                </div>
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <p class="text-sm font-medium text-gray-900">Prepare client presentation</p>
                                        <span class="status-badge status-todo">To Do</span>
                                    </div>
                                    <p class="mt-1 text-sm text-gray-500">Due in 3 days • Assigned to Michael Chen</p>
                                    <div class="mt-2 flex items-center text-sm text-gray-500">
                                        <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
                                        <span>Created on May 18, 2023</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Task Modal (hidden by default) -->
    <div id="task-modal" class="fixed z-10 inset-0 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                <div>
                    <div class="mt-3 text-center sm:mt-0 sm:text-left">
                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                            Create New Task
                        </h3>
                        <div class="mt-4">
                            <form>
                                <div class="mb-4">
                                    <label for="task-title" class="block text-sm font-medium text-gray-700">Task Title</label>
                                    <input type="text" id="task-title" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                </div>
                                <div class="mb-4">
                                    <label for="task-description" class="block text-sm font-medium text-gray-700">Description</label>
                                    <textarea id="task-description" rows="3" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea>
                                </div>
                                <div class="mb-4">
                                    <label for="task-assignee" class="block text-sm font-medium text-gray-700">Assignee</label>
                                    <select id="task-assignee" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                                        <option>Select team member</option>
                                        <option>Sarah Johnson</option>
                                        <option>Michael Chen</option>
                                        <option>Alex Rodriguez</option>
                                    </select>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label for="task-due-date" class="block text-sm font-medium text-gray-700">Due Date</label>
                                        <input type="date" id="task-due-date" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                                    </div>
                                    <div>
                                        <label for="task-status" class="block text-sm font-medium text-gray-700">Status</label>
                                        <select id="task-status" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                                            <option>To Do</option>
                                            <option>In Progress</option>
                                            <option>Completed</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Create Task
                    </button>
                    <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        AOS.init();
        feather.replace();
        
        // Modal toggle functionality
        document.querySelectorAll('[data-modal-toggle]').forEach(button => {
            button.addEventListener('click', () => {
                document.getElementById('task-modal').classList.toggle('hidden');
            });
        });
        
        // Close modal when clicking outside
        document.getElementById('task-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
            }
        });
        
        // Sample task data
        const tasks = [
            {
                id: 1,
                title: "Update project documentation",
                description: "Ensure all API endpoints are documented",
                status: "inprogress",
                assignee: "Sarah Johnson",
                dueDate: "2023-05-16",
                createdAt: "2023-05-15"
            },
            {
                id: 2,
                title: "Review pull request #42",
                description: "Check the new authentication flow",
                status: "completed",
                assignee: "You",
                dueDate: "2023-05-14",
                createdAt: "2023-05-10"
            },
            {
                id: 3,
                title: "Prepare client presentation",
                description: "Create slides for quarterly review",
                status: "todo",
                assignee: "Michael Chen",
                dueDate: "2023-05-21",
                createdAt: "2023-05-18"
            }
        ];
        
        // You would typically fetch tasks from an API in a real app
        // fetch('/api/tasks').then(response => response.json()).then(data => renderTasks(data));
    </script>
</body>
</html>