Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Project Manager - Card View</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> | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .status-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| border-radius: 9999px; | |
| padding: 0.25rem 0.5rem; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .tag-pill { | |
| transition: all 0.2s ease; | |
| } | |
| .tag-pill:hover { | |
| transform: scale(1.05); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .modal-overlay { | |
| background-color: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(4px); | |
| } | |
| .form-input:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Project Manager</h1> | |
| <p class="text-gray-600">Track and manage your projects</p> | |
| </div> | |
| <button id="addProjectBtn" class="mt-4 md:mt-0 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center transition-colors"> | |
| <i class="fas fa-plus mr-2"></i> Add Project | |
| </button> | |
| </header> | |
| <!-- Filter Controls --> | |
| <div class="mb-8 bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex flex-wrap items-center gap-4"> | |
| <div class="flex-1 min-w-[200px]"> | |
| <label for="statusFilter" class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select id="statusFilter" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="all">All Statuses</option> | |
| <option value="Not Started">Not Started</option> | |
| <option value="In Progress">In Progress</option> | |
| <option value="Completed">Completed</option> | |
| <option value="On Hold">On Hold</option> | |
| </select> | |
| </div> | |
| <div class="flex-1 min-w-[200px]"> | |
| <label for="tagFilter" class="block text-sm font-medium text-gray-700 mb-1">Tags</label> | |
| <select id="tagFilter" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="all">All Tags</option> | |
| <!-- Tags will be populated dynamically --> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button id="resetFilters" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md transition-colors"> | |
| Reset Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Grid --> | |
| <div id="projectsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project cards will be inserted here dynamically --> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="hidden text-center py-12"> | |
| <div class="mx-auto max-w-md"> | |
| <i class="fas fa-folder-open text-5xl text-gray-300 mb-4"></i> | |
| <h3 class="text-xl font-medium text-gray-700 mb-2">No projects found</h3> | |
| <p class="text-gray-500 mb-4">Add a new project or adjust your filters</p> | |
| <button id="addProjectBtnEmpty" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg inline-flex items-center transition-colors"> | |
| <i class="fas fa-plus mr-2"></i> Add Project | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add/Edit Project Modal --> | |
| <div id="projectModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="modal-overlay absolute inset-0"></div> | |
| <div class="flex items-center justify-center min-h-screen"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 id="modalTitle" class="text-xl font-bold text-gray-800">Add New Project</h3> | |
| <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="projectForm" class="space-y-4"> | |
| <input type="hidden" id="projectId"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">Project Name *</label> | |
| <input type="text" id="projectName" required class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="projectStatus" class="block text-sm font-medium text-gray-700 mb-1">Status *</label> | |
| <select id="projectStatus" required class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-500"> | |
| <option value="Not Started">Not Started</option> | |
| <option value="In Progress">In Progress</option> | |
| <option value="Completed">Completed</option> | |
| <option value="On Hold">On Hold</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="projectImage" class="block text-sm font-medium text-gray-700 mb-1">Image URL</label> | |
| <input type="url" id="projectImage" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="projectDateRange" class="block text-sm font-medium text-gray-700 mb-1">Date Range</label> | |
| <input type="text" id="projectDateRange" placeholder="e.g. Jan 2023 - Mar 2023" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="projectTechnologies" class="block text-sm font-medium text-gray-700 mb-1">Technologies (comma separated)</label> | |
| <input type="text" id="projectTechnologies" placeholder="e.g. React, Node.js, MongoDB" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="projectDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="projectDescription" rows="3" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"></textarea> | |
| </div> | |
| <div> | |
| <label for="projectTags" class="block text-sm font-medium text-gray-700 mb-1">Tags (comma separated)</label> | |
| <input type="text" id="projectTags" placeholder="e.g. web, mobile, api" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="projectGithub" class="block text-sm font-medium text-gray-700 mb-1">GitHub Link</label> | |
| <input type="url" id="projectGithub" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="projectDemo" class="block text-sm font-medium text-gray-700 mb-1">Demo Link</label> | |
| <input type="url" id="projectDemo" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="projectReadme" class="block text-sm font-medium text-gray-700 mb-1">README Link</label> | |
| <input type="url" id="projectReadme" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="projectNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label> | |
| <textarea id="projectNotes" rows="3" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-4"> | |
| <button type="button" id="cancelModalBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"> | |
| Cancel | |
| </button> | |
| <button type="submit" id="saveProjectBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"> | |
| Save Project | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Details Modal --> | |
| <div id="detailsModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="modal-overlay absolute inset-0"></div> | |
| <div class="flex items-center justify-center min-h-screen"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 id="detailsTitle" class="text-xl font-bold text-gray-800">Project Details</h3> | |
| <button id="closeDetailsBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="detailsContent" class="space-y-4"> | |
| <!-- Details will be populated here --> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-6"> | |
| <button id="editDetailsBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"> | |
| Edit Project | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delete Confirmation Modal --> | |
| <div id="deleteModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="modal-overlay absolute inset-0"></div> | |
| <div class="flex items-center justify-center min-h-screen"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md m-4"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Confirm Deletion</h3> | |
| <button id="closeDeleteBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p id="deleteMessage" class="text-gray-700 mb-6">Are you sure you want to delete this project?</p> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelDeleteBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"> | |
| Cancel | |
| </button> | |
| <button id="confirmDeleteBtn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"> | |
| Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample initial data | |
| let projects = [ | |
| { | |
| id: "1", | |
| name: "E-commerce Website", | |
| image_link: "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", | |
| date_range: "Mar 2023 - Jun 2023", | |
| description: "A full-featured e-commerce platform with product listings, cart functionality, and payment processing.", | |
| tags: ["web", "ecommerce", "react"], | |
| github_link: "https://github.com/example/ecommerce", | |
| demo_link: "https://ecommerce.example.com", | |
| readme_link: "https://github.com/example/ecommerce/blob/main/README.md", | |
| status: "Completed", | |
| technologies: ["React", "Node.js", "MongoDB", "Stripe"], | |
| notes: "The project was completed on time and under budget. Customer satisfaction was high.", | |
| created_at: "2023-03-15T10:00:00Z", | |
| updated_at: "2023-06-20T14:30:00Z" | |
| }, | |
| { | |
| id: "2", | |
| name: "Mobile Task Manager", | |
| image_link: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", | |
| date_range: "Jul 2023 - Present", | |
| description: "A cross-platform mobile application for task management with sync across devices.", | |
| tags: ["mobile", "productivity", "react-native"], | |
| github_link: "https://github.com/example/task-manager", | |
| demo_link: "", | |
| readme_link: "https://github.com/example/task-manager/blob/main/README.md", | |
| status: "In Progress", | |
| technologies: ["React Native", "Firebase", "Redux"], | |
| notes: "Currently working on the offline sync functionality. Expected completion in Q4 2023.", | |
| created_at: "2023-07-01T09:15:00Z", | |
| updated_at: "2023-08-10T16:45:00Z" | |
| }, | |
| { | |
| id: "3", | |
| name: "API Service", | |
| image_link: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", | |
| date_range: "", | |
| description: "Backend API service for data processing and integration with third-party services.", | |
| tags: ["api", "backend", "node"], | |
| github_link: "https://github.com/example/api-service", | |
| demo_link: "", | |
| readme_link: "", | |
| status: "On Hold", | |
| technologies: ["Node.js", "Express", "PostgreSQL"], | |
| notes: "Project put on hold due to shifting priorities. Will revisit in Q1 2024.", | |
| created_at: "2023-05-10T14:20:00Z", | |
| updated_at: "2023-08-01T11:10:00Z" | |
| } | |
| ]; | |
| // DOM Elements | |
| const projectsContainer = document.getElementById('projectsContainer'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const addProjectBtn = document.getElementById('addProjectBtn'); | |
| const addProjectBtnEmpty = document.getElementById('addProjectBtnEmpty'); | |
| const statusFilter = document.getElementById('statusFilter'); | |
| const tagFilter = document.getElementById('tagFilter'); | |
| const resetFilters = document.getElementById('resetFilters'); | |
| // Modal Elements | |
| const projectModal = document.getElementById('projectModal'); | |
| const modalTitle = document.getElementById('modalTitle'); | |
| const projectForm = document.getElementById('projectForm'); | |
| const projectId = document.getElementById('projectId'); | |
| const projectName = document.getElementById('projectName'); | |
| const projectImage = document.getElementById('projectImage'); | |
| const projectDateRange = document.getElementById('projectDateRange'); | |
| const projectDescription = document.getElementById('projectDescription'); | |
| const projectTags = document.getElementById('projectTags'); | |
| const projectGithub = document.getElementById('projectGithub'); | |
| const projectDemo = document.getElementById('projectDemo'); | |
| const projectReadme = document.getElementById('projectReadme'); | |
| const projectStatus = document.getElementById('projectStatus'); | |
| const projectTechnologies = document.getElementById('projectTechnologies'); | |
| const projectNotes = document.getElementById('projectNotes'); | |
| const closeModalBtn = document.getElementById('closeModalBtn'); | |
| const cancelModalBtn = document.getElementById('cancelModalBtn'); | |
| const saveProjectBtn = document.getElementById('saveProjectBtn'); | |
| // Details Modal Elements | |
| const detailsModal = document.getElementById('detailsModal'); | |
| const detailsTitle = document.getElementById('detailsTitle'); | |
| const detailsContent = document.getElementById('detailsContent'); | |
| const closeDetailsBtn = document.getElementById('closeDetailsBtn'); | |
| const editDetailsBtn = document.getElementById('editDetailsBtn'); | |
| // Delete Modal Elements | |
| const deleteModal = document.getElementById('deleteModal'); | |
| const deleteMessage = document.getElementById('deleteMessage'); | |
| const closeDeleteBtn = document.getElementById('closeDeleteBtn'); | |
| const cancelDeleteBtn = document.getElementById('cancelDeleteBtn'); | |
| const confirmDeleteBtn = document.getElementById('confirmDeleteBtn'); | |
| // State | |
| let currentProjectId = null; | |
| let allTags = []; | |
| // Initialize the app | |
| function init() { | |
| renderProjects(); | |
| setupEventListeners(); | |
| updateTagFilterOptions(); | |
| } | |
| // Render all projects | |
| function renderProjects() { | |
| projectsContainer.innerHTML = ''; | |
| const statusFilterValue = statusFilter.value; | |
| const tagFilterValue = tagFilter.value; | |
| let filteredProjects = projects; | |
| // Apply status filter | |
| if (statusFilterValue !== 'all') { | |
| filteredProjects = filteredProjects.filter(project => project.status === statusFilterValue); | |
| } | |
| // Apply tag filter | |
| if (tagFilterValue !== 'all') { | |
| filteredProjects = filteredProjects.filter(project => | |
| project.tags && project.tags.includes(tagFilterValue) | |
| ); | |
| } | |
| if (filteredProjects.length === 0) { | |
| emptyState.classList.remove('hidden'); | |
| projectsContainer.classList.add('hidden'); | |
| } else { | |
| emptyState.classList.add('hidden'); | |
| projectsContainer.classList.remove('hidden'); | |
| filteredProjects.forEach(project => { | |
| const projectCard = createProjectCard(project); | |
| projectsContainer.appendChild(projectCard); | |
| }); | |
| } | |
| } | |
| // Create a project card element | |
| function createProjectCard(project) { | |
| const card = document.createElement('div'); | |
| card.className = 'bg-white rounded-lg shadow-md overflow-hidden card-hover fade-in relative'; | |
| card.dataset.id = project.id; | |
| // Status badge with color coding | |
| let statusColor = 'bg-gray-500'; // Default for unknown status | |
| if (project.status === 'Not Started') statusColor = 'bg-gray-500'; | |
| else if (project.status === 'In Progress') statusColor = 'bg-yellow-500'; | |
| else if (project.status === 'Completed') statusColor = 'bg-green-500'; | |
| else if (project.status === 'On Hold') statusColor = 'bg-red-500'; | |
| // Card content | |
| card.innerHTML = ` | |
| <div class="relative"> | |
| ${project.image_link ? | |
| `<img src="${project.image_link}" alt="${project.name}" class="w-full h-48 object-cover">` : | |
| `<div class="w-full h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-image text-4xl text-gray-400"></i> | |
| </div>` | |
| } | |
| <span class="status-badge ${statusColor} text-white">${project.status}</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1 truncate">${project.name}</h3> | |
| ${project.date_range ? | |
| `<p class="text-sm text-gray-500 mb-2 flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2"></i>${project.date_range} | |
| </p>` : '' | |
| } | |
| <p class="text-gray-600 text-sm mb-3 line-clamp-2">${project.description || 'No description available'}</p> | |
| ${project.tags && project.tags.length > 0 ? | |
| `<div class="flex flex-wrap gap-2 mb-4"> | |
| ${project.tags.map(tag => ` | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full tag-pill">${tag}</span> | |
| `).join('')} | |
| </div>` : '' | |
| } | |
| <div class="flex justify-between items-center border-t pt-3"> | |
| <div class="flex space-x-2"> | |
| ${project.github_link ? ` | |
| <a href="${project.github_link}" target="_blank" class="text-gray-500 hover:text-gray-700 transition-colors" title="GitHub"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| ` : ''} | |
| ${project.demo_link ? ` | |
| <a href="${project.demo_link}" target="_blank" class="text-gray-500 hover:text-gray-700 transition-colors" title="Live Demo"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </a> | |
| ` : ''} | |
| ${project.readme_link ? ` | |
| <a href="${project.readme_link}" target="_blank" class="text-gray-500 hover:text-gray-700 transition-colors" title="README"> | |
| <i class="fas fa-book"></i> | |
| </a> | |
| ` : ''} | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-blue-500 transition-colors edit-btn" title="Edit"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-red-500 transition-colors delete-btn" title="Delete"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Add click event for viewing details | |
| card.addEventListener('click', (e) => { | |
| // Don't open details if clicking on edit/delete buttons or links | |
| if (e.target.closest('.edit-btn, .delete-btn, a')) { | |
| return; | |
| } | |
| openDetailsModal(project.id); | |
| }); | |
| // Add edit and delete button events | |
| const editBtn = card.querySelector('.edit-btn'); | |
| const deleteBtn = card.querySelector('.delete-btn'); | |
| editBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| openEditModal(project.id); | |
| }); | |
| deleteBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| openDeleteModal(project.id); | |
| }); | |
| return card; | |
| } | |
| // Open the add project modal | |
| function openAddModal() { | |
| projectForm.reset(); | |
| projectId.value = ''; | |
| modalTitle.textContent = 'Add New Project'; | |
| projectModal.classList.remove('hidden'); | |
| } | |
| // Open the edit project modal | |
| function openEditModal(id) { | |
| const project = projects.find(p => p.id === id); | |
| if (!project) return; | |
| currentProjectId = id; | |
| // Populate form fields | |
| projectId.value = project.id; | |
| projectName.value = project.name || ''; | |
| projectImage.value = project.image_link || ''; | |
| projectDateRange.value = project.date_range || ''; | |
| projectDescription.value = project.description || ''; | |
| projectTags.value = project.tags ? project.tags.join(', ') : ''; | |
| projectGithub.value = project.github_link || ''; | |
| projectDemo.value = project.demo_link || ''; | |
| projectReadme.value = project.readme_link || ''; | |
| projectStatus.value = project.status || 'Not Started'; | |
| projectTechnologies.value = project.technologies ? project.technologies.join(', ') : ''; | |
| projectNotes.value = project.notes || ''; | |
| modalTitle.textContent = 'Edit Project'; | |
| projectModal.classList.remove('hidden'); | |
| } | |
| // Open the project details modal | |
| function openDetailsModal(id) { | |
| const project = projects.find(p => p.id === id); | |
| if (!project) return; | |
| currentProjectId = id; | |
| detailsTitle.textContent = project.name; | |
| // Format dates | |
| const createdDate = project.created_at ? new Date(project.created_at).toLocaleDateString() : 'Unknown'; | |
| const updatedDate = project.updated_at ? new Date(project.updated_at).toLocaleDateString() : 'Unknown'; | |
| // Create details content | |
| detailsContent.innerHTML = ` | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="space-y-4"> | |
| ${project.image_link ? ` | |
| <div class="rounded-lg overflow-hidden"> | |
| <img src="${project.image_link}" alt="${project.name}" class="w-full h-auto max-h-48 object-cover"> | |
| </div> | |
| ` : ''} | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium text-gray-800 mb-2">Quick Info</h4> | |
| <div class="space-y-2"> | |
| ${project.status ? ` | |
| <div class="flex items-center"> | |
| <span class="inline-block w-3 h-3 rounded-full mr-2 ${getStatusColorClass(project.status)}"></span> | |
| <span class="text-sm text-gray-700">Status: ${project.status}</span> | |
| </div> | |
| ` : ''} | |
| ${project.date_range ? ` | |
| <div class="flex items-center text-sm text-gray-700"> | |
| <i class="fas fa-calendar-alt mr-2 text-gray-500"></i> | |
| <span>${project.date_range}</span> | |
| </div> | |
| ` : ''} | |
| <div class="flex items-center text-sm text-gray-700"> | |
| <i class="fas fa-calendar-plus mr-2 text-gray-500"></i> | |
| <span>Created: ${createdDate}</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-700"> | |
| <i class="fas fa-calendar-check mr-2 text-gray-500"></i> | |
| <span>Last Updated: ${updatedDate}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| ${project.description ? ` | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Description</h4> | |
| <p class="text-gray-700">${project.description}</p> | |
| </div> | |
| ` : ''} | |
| ${project.technologies && project.technologies.length > 0 ? ` | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Technologies</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| ${project.technologies.map(tech => ` | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">${tech}</span> | |
| `).join('')} | |
| </div> | |
| </div> | |
| ` : ''} | |
| ${project.tags && project.tags.length > 0 ? ` | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Tags</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| ${project.tags.map(tag => ` | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">${tag}</span> | |
| `).join('')} | |
| </div> | |
| </div> | |
| ` : ''} | |
| ${project.notes ? ` | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Notes</h4> | |
| <p class="text-gray-700 whitespace-pre-line">${project.notes}</p> | |
| </div> | |
| ` : ''} | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t"> | |
| <h4 class="font-medium text-gray-800 mb-2">Links</h4> | |
| <div class="flex flex-wrap gap-4"> | |
| ${project.github_link ? ` | |
| <a href="${project.github_link}" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors"> | |
| <i class="fab fa-github mr-2"></i> GitHub Repository | |
| </a> | |
| ` : ''} | |
| ${project.demo_link ? ` | |
| <a href="${project.demo_link}" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors"> | |
| <i class="fas fa-external-link-alt mr-2"></i> Live Demo | |
| </a> | |
| ` : ''} | |
| ${project.readme_link ? ` | |
| <a href="${project.readme_link}" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors"> | |
| <i class="fas fa-book mr-2"></i> README | |
| </a> | |
| ` : ''} | |
| ${!project.github_link && !project.demo_link && !project.readme_link ? ` | |
| <span class="text-gray-500">No links available</span> | |
| ` : ''} | |
| </div> | |
| </div> | |
| `; | |
| detailsModal.classList.remove('hidden'); | |
| } | |
| // Open the delete confirmation modal | |
| function openDeleteModal(id) { | |
| currentProjectId = id; | |
| const project = projects.find(p => p.id === id); | |
| if (project) { | |
| deleteMessage.textContent = `Are you sure you want to delete "${project.name}"? This action cannot be undone.`; | |
| } else { | |
| deleteMessage.textContent = 'Are you sure you want to delete this project?'; | |
| } | |
| deleteModal.classList.remove('hidden'); | |
| } | |
| // Close all modals | |
| function closeAllModals() { | |
| projectModal.classList.add('hidden'); | |
| detailsModal.classList.add('hidden'); | |
| deleteModal.classList.add('hidden'); | |
| currentProjectId = null; | |
| } | |
| // Save project (add or edit) | |
| function saveProject(e) { | |
| e.preventDefault(); | |
| // Validate required fields | |
| if (!projectName.value.trim()) { | |
| alert('Project name is required'); | |
| return; | |
| } | |
| // Get form values | |
| const id = projectId.value || generateId(); | |
| const now = new Date().toISOString(); | |
| const projectData = { | |
| id, | |
| name: projectName.value.trim(), | |
| image_link: projectImage.value.trim(), | |
| date_range: projectDateRange.value.trim(), | |
| description: projectDescription.value.trim(), | |
| tags: projectTags.value ? projectTags.value.split(',').map(tag => tag.trim()).filter(tag => tag) : [], | |
| github_link: projectGithub.value.trim(), | |
| demo_link: projectDemo.value.trim(), | |
| readme_link: projectReadme.value.trim(), | |
| status: projectStatus.value, | |
| technologies: projectTechnologies.value ? projectTechnologies.value.split(',').map(tech => tech.trim()).filter(tech => tech) : [], | |
| notes: projectNotes.value.trim(), | |
| updated_at: now | |
| }; | |
| // If new project, set created_at | |
| if (!projectId.value) { | |
| projectData.created_at = now; | |
| } else { | |
| // For existing projects, preserve created_at | |
| const existingProject = projects.find(p => p.id === projectId.value); | |
| if (existingProject) { | |
| projectData.created_at = existingProject.created_at; | |
| } else { | |
| projectData.created_at = now; | |
| } | |
| } | |
| // Update or add the project | |
| if (projectId.value) { | |
| // Edit existing project | |
| const index = projects.findIndex(p => p.id === projectId.value); | |
| if (index !== -1) { | |
| projects[index] = projectData; | |
| } | |
| } else { | |
| // Add new project | |
| projects.push(projectData); | |
| } | |
| // Update UI | |
| renderProjects(); | |
| updateTagFilterOptions(); | |
| closeAllModals(); | |
| } | |
| // Delete project | |
| function deleteProject() { | |
| projects = projects.filter(p => p.id !== currentProjectId); | |
| renderProjects(); | |
| updateTagFilterOptions(); | |
| closeAllModals(); | |
| } | |
| // Generate a unique ID | |
| function generateId() { | |
| return Date.now().toString(36) + Math.random().toString(36).substr(2); | |
| } | |
| // Get status color class | |
| function getStatusColorClass(status) { | |
| switch (status) { | |
| case 'Not Started': return 'bg-gray-500'; | |
| case 'In Progress': return 'bg-yellow-500'; | |
| case 'Completed': return 'bg-green-500'; | |
| case 'On Hold': return 'bg-red-500'; | |
| default: return 'bg-gray-500'; | |
| } | |
| } | |
| // Update tag filter options | |
| function updateTagFilterOptions() { | |
| // Collect all unique tags from projects | |
| const tagsSet = new Set(); | |
| projects.forEach(project => { | |
| if (project.tags) { | |
| project.tags.forEach(tag => tagsSet.add(tag)); | |
| } | |
| }); | |
| allTags = Array.from(tagsSet).sort(); | |
| // Update tag filter dropdown | |
| tagFilter.innerHTML = ` | |
| <option value="all">All Tags</option> | |
| ${allTags.map(tag => `<option value="${tag}">${tag}</option>`).join('')} | |
| `; | |
| } | |
| // Set up event listeners | |
| function setupEventListeners() { | |
| // Add project buttons | |
| addProjectBtn.addEventListener('click', openAddModal); | |
| addProjectBtnEmpty.addEventListener('click', openAddModal); | |
| // Filter controls | |
| statusFilter.addEventListener('change', renderProjects); | |
| tagFilter.addEventListener('change', renderProjects); | |
| resetFilters.addEventListener('click', () => { | |
| statusFilter.value = 'all'; | |
| tagFilter.value = 'all'; | |
| renderProjects(); | |
| }); | |
| // Modal buttons | |
| closeModalBtn.addEventListener('click', closeAllModals); | |
| cancelModalBtn.addEventListener('click', closeAllModals); | |
| projectForm.addEventListener('submit', saveProject); | |
| // Details modal buttons | |
| closeDetailsBtn.addEventListener('click', closeAllModals); | |
| editDetailsBtn.addEventListener('click', () => { | |
| closeAllModals(); | |
| openEditModal(currentProjectId); | |
| }); | |
| // Delete modal buttons | |
| closeDeleteBtn.addEventListener('click', closeAllModals); | |
| cancelDeleteBtn.addEventListener('click', closeAllModals); | |
| confirmDeleteBtn.addEventListener('click', deleteProject); | |
| } | |
| // Initialize the app when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', init); | |
| </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=MoiMoi-01/project-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |