| |
| const mockContacts = [ |
| { |
| id: 1, |
| name: "John Doe", |
| email: "john@example.com", |
| phone: "555-1234", |
| city: "New York", |
| attachments: [ |
| { name: "project-brief.pdf", url: "http://static.photos/document/640x360/1" }, |
| { name: "reference.jpg", url: "http://static.photos/nature/640x360/1" } |
| ] |
| }, |
| { |
| id: 2, |
| name: "Jane Smith", |
| email: "jane@example.com", |
| phone: "555-5678", |
| city: "Los Angeles", |
| attachments: [] |
| } |
| ]; |
| const mockSubscribers = [ |
| { id: 1, email: "user1@example.com", date: "2023-01-15" }, |
| { id: 2, email: "user2@example.com", date: "2023-02-20" } |
| ]; |
|
|
| |
| const adminContent = document.getElementById('admin-content'); |
|
|
| |
| function loadProjectsManagement() { |
| adminContent.innerHTML = ` |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Projects Management</h2> |
| <button id="add-project-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition duration-300"> |
| <i data-feather="plus" class="mr-2"></i> Add Project |
| </button> |
| </div> |
| |
| <!-- Add Project Form (hidden by default) --> |
| <div id="add-project-form" class="hidden mb-8"> |
| <form id="project-form" class="space-y-4"> |
| <div> |
| <label for="project-image" class="block text-gray-700 mb-2">Project Image</label> |
| <input type="file" id="project-image" name="project-image" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg"> |
| </div> |
| <div> |
| <label for="project-name" class="block text-gray-700 mb-2">Project Name</label> |
| <input type="text" id="project-name" name="project-name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg"> |
| </div> |
| <div> |
| <label for="project-description" class="block text-gray-700 mb-2">Description</label> |
| <textarea id="project-description" name="project-description" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea> |
| </div> |
| <div class="flex space-x-4"> |
| <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition duration-300"> |
| Save Project |
| </button> |
| <button type="button" id="cancel-project-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition duration-300"> |
| Cancel |
| </button> |
| </div> |
| </form> |
| </div> |
| |
| <!-- Projects List --> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full bg-white"> |
| <thead> |
| <tr class="border-b border-gray-200"> |
| <th class="py-3 px-4 text-left text-gray-700">Image</th> |
| <th class="py-3 px-4 text-left text-gray-700">Name</th> |
| <th class="py-3 px-4 text-left text-gray-700">Description</th> |
| <th class="py-3 px-4 text-left text-gray-700">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="projects-list"> |
| ${mockProjects.map(project => ` |
| <tr class="border-b border-gray-200 hover:bg-gray-50"> |
| <td class="py-4 px-4"> |
| <img src="${project.image}" alt="${project.name}" class="w-20 h-12 object-cover rounded"> |
| </td> |
| <td class="py-4 px-4 font-medium text-gray-800">${project.name}</td> |
| <td class="py-4 px-4 text-gray-600">${project.description.substring(0, 50)}...</td> |
| <td class="py-4 px-4"> |
| <div class="flex space-x-2"> |
| <button class="edit-project-btn p-2 text-blue-500 hover:bg-blue-50 rounded" data-id="${project.id}"> |
| <i data-feather="edit"></i> |
| </button> |
| <button class="delete-project-btn p-2 text-red-500 hover:bg-red-50 rounded" data-id="${project.id}"> |
| <i data-feather="trash-2"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| `).join('')} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| `; |
| |
| feather.replace(); |
| |
| |
| document.getElementById('add-project-btn').addEventListener('click', () => { |
| document.getElementById('add-project-form').classList.toggle('hidden'); |
| }); |
| |
| document.getElementById('cancel-project-btn').addEventListener('click', () => { |
| document.getElementById('add-project-form').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('project-form').addEventListener('submit', (e) => { |
| e.preventDefault(); |
| alert('Project saved successfully!'); |
| document.getElementById('add-project-form').classList.add('hidden'); |
| document.getElementById('project-form').reset(); |
| }); |
| } |
|
|
| function loadClientsManagement() { |
| adminContent.innerHTML = ` |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Clients Management</h2> |
| <button id="add-client-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition duration-300"> |
| <i data-feather="plus" class="mr-2"></i> Add Client |
| </button> |
| </div> |
| |
| <!-- Add Client Form (hidden by default) --> |
| <div id="add-client-form" class="hidden mb-8"> |
| <form id="client-form" class="space-y-4"> |
| <div> |
| <label for="client-image" class="block text-gray-700 mb-2">Client Image</label> |
| <input type="file" id="client-image" name="client-image" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg"> |
| </div> |
| <div> |
| <label for="client-name" class="block text-gray-700 mb-2">Client Name</label> |
| <input type="text" id="client-name" name="client-name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg"> |
| </div> |
| <div> |
| <label for="client-designation" class="block text-gray-700 mb-2">Designation</label> |
| <input type="text" id="client-designation" name="client-designation" required class="w-full px-4 py-2 border border-gray-300 rounded-lg"> |
| </div> |
| <div> |
| <label for="client-description" class="block text-gray-700 mb-2">Testimonial</label> |
| <textarea id="client-description" name="client-description" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea> |
| </div> |
| <div class="flex space-x-4"> |
| <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition duration-300"> |
| Save Client |
| </button> |
| <button type="button" id="cancel-client-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition duration-300"> |
| Cancel |
| </button> |
| </div> |
| </form> |
| </div> |
| |
| <!-- Clients List --> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full bg-white"> |
| <thead> |
| <tr class="border-b border-gray-200"> |
| <th class="py-3 px-4 text-left text-gray-700">Image</th> |
| <th class="py-3 px-4 text-left text-gray-700">Name</th> |
| <th class="py-3 px-4 text-left text-gray-700">Designation</th> |
| <th class="py-3 px-4 text-left text-gray-700">Testimonial</th> |
| <th class="py-3 px-4 text-left text-gray-700">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="clients-list"> |
| ${mockClients.map(client => ` |
| <tr class="border-b border-gray-200 hover:bg-gray-50"> |
| <td class="py-4 px-4"> |
| <img src="${client.image}" alt="${client.name}" class="w-12 h-12 rounded-full object-cover"> |
| </td> |
| <td class="py-4 px-4 font-medium text-gray-800">${client.name}</td> |
| <td class="py-4 px-4 text-gray-600">${client.designation}</td> |
| <td class="py-4 px-4 text-gray-600">"${client.description.substring(0, 50)}..."</td> |
| <td class="py-4 px-4"> |
| <div class="flex space-x-2"> |
| <button class="edit-client-btn p-2 text-blue-500 hover:bg-blue-50 rounded" data-id="${client.id}"> |
| <i data-feather="edit"></i> |
| </button> |
| <button class="delete-client-btn p-2 text-red-500 hover:bg-red-50 rounded" data-id="${client.id}"> |
| <i data-feather="trash-2"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| `).join('')} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| `; |
| |
| feather.replace(); |
| |
| |
| document.getElementById('add-client-btn').addEventListener('click', () => { |
| document.getElementById('add-client-form').classList.toggle('hidden'); |
| }); |
| |
| document.getElementById('cancel-client-btn').addEventListener('click', () => { |
| document.getElementById('add-client-form').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('client-form').addEventListener('submit', (e) => { |
| e.preventDefault(); |
| alert('Client saved successfully!'); |
| document.getElementById('add-client-form').classList.add('hidden'); |
| document.getElementById('client-form').reset(); |
| }); |
| } |
|
|
| function loadContactResponses() { |
| adminContent.innerHTML = ` |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Contact Form Responses</h2> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full bg-white"> |
| <thead> |
| <tr class="border-b border-gray-200"> |
| <th class="py-3 px-4 text-left text-gray-700">Name</th> |
| <th class="py-3 px-4 text-left text-gray-700">Email</th> |
| <th class="py-3 px-4 text-left text-gray-700">Phone</th> |
| <th class="py-3 px-4 text-left text-gray-700">City</th> |
| <th class="py-3 px-4 text-left text-gray-700">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="contacts-list"> |
| ${mockContacts.map(contact => ` |
| <tr class="border-b border-gray-200 hover:bg-gray-50"> |
| <td class="py-4 px-4 font-medium text-gray-800">${contact.name}</td> |
| <td class="py-4 px-4 text-gray-600">${contact.email}</td> |
| <td class="py-4 px-4 text-gray-600">${contact.phone}</td> |
| <td class="py-4 px-4 text-gray-600">${contact.city}</td> |
| <td class="py-4 px-4"> |
| <div class="flex items-center space-x-4"> |
| ${contact.attachments.length > 0 ? ` |
| <div class="relative group"> |
| <button class="view-attachments-btn p-2 text-blue-500 hover:bg-blue-50 rounded" data-id="${contact.id}"> |
| <i data-feather="paperclip"></i> |
| </button> |
| <div class="attachments-popup hidden absolute right-0 z-10 mt-2 w-64 bg-white rounded-md shadow-lg p-2 group-hover:block"> |
| <div class="text-xs font-medium text-gray-500 mb-1">Attachments (${contact.attachments.length})</div> |
| ${contact.attachments.map(file => ` |
| <a href="${file.url}" target="_blank" class="block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded"> |
| <i data-feather="${file.name.endsWith('.pdf') ? 'file-text' : file.name.match(/\.(jpg|png|gif)$/) ? 'image' : 'file'}" class="w-4 h-4 mr-2 inline"></i> |
| ${file.name} |
| </a> |
| `).join('')} |
| </div> |
| </div> |
| ` : ''} |
| <button class="delete-contact-btn p-2 text-red-500 hover:bg-red-50 rounded" data-id="${contact.id}"> |
| <i data-feather="trash-2"></i> |
| </button> |
| </div> |
| </td> |
| </tr> |
| `).join('')} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| `; |
| |
| feather.replace(); |
| } |
|
|
| function loadSubscribers() { |
| adminContent.innerHTML = ` |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Newsletter Subscribers</h2> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full bg-white"> |
| <thead> |
| <tr class="border-b border-gray-200"> |
| <th class="py-3 px-4 text-left text-gray-700">Email</th> |
| <th class="py-3 px-4 text-left text-gray-700">Subscription Date</th> |
| <th class="py-3 px-4 text-left text-gray-700">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="subscribers-list"> |
| ${mockSubscribers.map(subscriber => ` |
| <tr class="border-b border-gray-200 hover:bg-gray-50"> |
| <td class="py-4 px-4 font-medium text-gray-800">${subscriber.email}</td> |
| <td class="py-4 px-4 text-gray-600">${subscriber.date}</td> |
| <td class="py-4 px-4"> |
| <button class="delete-subscriber-btn p-2 text-red-500 hover:bg-red-50 rounded" data-id="${subscriber.id}"> |
| <i data-feather="trash-2"></i> |
| </button> |
| </td> |
| </tr> |
| `).join('')} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| `; |
| |
| feather.replace(); |
| } |
|
|
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| |
| loadProjectsManagement(); |
| }); |
