Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - COP MADINA AREA Church</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
:root {
--gradient-blue: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
--gradient-white: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
}
nav { background: var(--gradient-blue); }
.settings-card { background: var(--gradient-white); }
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="shadow-sm text-white">
<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">
<i data-feather="sliders" class="text-white mr-2"></i>
<span class="text-xl font-semibold text-white">Settings - COP MADINA AREA Church</span>
</div>
<div class="flex items-center space-x-4">
<a href="index.html" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full flex items-center text-white">
<i data-feather="home" class="mr-2"></i>
Dashboard
</a>
<a href="admin.html" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full flex items-center text-white">
<i data-feather="settings" class="mr-2"></i>
Admin
</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h1 class="text-3xl font-bold text-gray-800 mb-8">Dashboard Settings</h1>
<!-- Categories Management -->
<div class="settings-card bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Categories Management</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<h3 class="font-medium text-gray-700 mb-3">Add/Edit Category</h3>
<form id="category-form">
<input type="hidden" id="edit-category-index" value="">
<div class="space-y-3 mb-4">
<input type="text" id="category-input" placeholder="Category name" class="w-full px-3 py-2 border rounded-md">
<input type="url" id="category-url-input" placeholder="Category URL (optional)" class="w-full px-3 py-2 border rounded-md">
<div class="flex gap-2">
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
<span id="category-btn-text">Add</span>
</button>
<button type="button" id="cancel-edit" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 hidden">Cancel</button>
</div>
</div>
</form>
</div>
<div>
<h3 class="font-medium text-gray-700 mb-3">Existing Categories</h3>
<div id="categories-list" class="space-y-2 max-h-64 overflow-y-auto"></div>
</div>
</div>
</div>
<!-- Ministry Links Management -->
<div class="settings-card bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Ministry Links Management</h2>
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="bg-gray-50">
<th class="px-4 py-2 text-left">Name</th>
<th class="px-4 py-2 text-left">Description</th>
<th class="px-4 py-2 text-left">Category</th>
<th class="px-4 py-2 text-left">URL</th>
<th class="px-4 py-2 text-left">Status</th>
<th class="px-4 py-2 text-left">Actions</th>
</tr>
</thead>
<tbody id="ministries-table">
<!-- Ministry rows will be populated here -->
</tbody>
</table>
</div>
</div>
<!-- Image Management -->
<div class="settings-card bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Image Management</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<h3 class="font-medium text-gray-700 mb-3">Upload Image</h3>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
<input type="file" id="image-upload" accept="image/*" class="hidden">
<button onclick="document.getElementById('image-upload').click()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
<i data-feather="upload" class="inline mr-2"></i>
Choose Image
</button>
<p class="text-sm text-gray-500 mt-2">PNG, JPG up to 2MB</p>
</div>
</div>
<div>
<h3 class="font-medium text-gray-700 mb-3">Uploaded Images</h3>
<div id="images-gallery" class="grid grid-cols-3 gap-2 max-h-64 overflow-y-auto"></div>
</div>
</div>
</div>
<!-- Bulk Operations -->
<div class="settings-card bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Bulk Operations</h2>
<div class="flex flex-wrap gap-4">
<button id="export-data" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
<i data-feather="download" class="inline mr-2"></i>
Export Settings
</button>
<button id="import-data" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
<i data-feather="upload" class="inline mr-2"></i>
Import Settings
</button>
<button id="reset-data" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
<i data-feather="refresh-cw" class="inline mr-2"></i>
Reset to Default
</button>
</div>
<input type="file" id="import-file" accept=".json" class="hidden">
</div>
</main>
<!-- Edit Ministry Modal -->
<div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
<div class="flex items-center justify-center min-h-screen p-4">
<div class="bg-white rounded-lg p-6 w-full max-w-md">
<h3 class="text-lg font-semibold mb-4">Edit Ministry</h3>
<form id="edit-ministry-form">
<input type="hidden" id="edit-ministry-id">
<div class="space-y-4">
<input type="text" id="edit-name" placeholder="Ministry Name" class="w-full px-3 py-2 border rounded-md">
<input type="text" id="edit-description" placeholder="Description" class="w-full px-3 py-2 border rounded-md">
<select id="edit-category" class="w-full px-3 py-2 border rounded-md">
<option value="">Select Category</option>
</select>
<input type="url" id="edit-url" placeholder="URL" class="w-full px-3 py-2 border rounded-md">
<input type="text" id="edit-status" placeholder="Status" class="w-full px-3 py-2 border rounded-md">
<div class="flex gap-2">
<button type="submit" class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save</button>
<button type="button" id="close-modal" class="flex-1 px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
let dashboardData = {
churchInfo: { name: "Christ Our Peace - Madina Area Church", description: "Central hub for church ministries, community outreach, and spiritual resources", badge: "SERVING GOD" },
categories: ["All Ministries", "Worship", "Youth Ministry", "Community Outreach", "Bible Study", "Prayer & Care"],
ministries: [],
images: []
};
function loadData() {
const saved = localStorage.getItem('churchDashboardData');
if (saved) dashboardData = { ...dashboardData, ...JSON.parse(saved) };
renderCategories();
renderMinistries();
renderImages();
}
function saveData() {
localStorage.setItem('churchDashboardData', JSON.stringify(dashboardData));
}
function renderCategories() {
const list = document.getElementById('categories-list');
list.innerHTML = '';
dashboardData.categories.forEach((cat, index) => {
if (index === 0) return; // Skip "All Ministries"
const div = document.createElement('div');
div.className = 'flex items-center justify-between p-2 bg-gray-50 rounded';
const categoryName = typeof cat === 'string' ? cat : cat.name;
const categoryUrl = typeof cat === 'string' ? null : cat.url;
div.innerHTML = `
<div class="flex-1">
<div class="font-medium">${categoryName}</div>
${categoryUrl ? `<div class="text-sm text-blue-500"><a href="${categoryUrl}" target="_blank" class="hover:underline">${categoryUrl}</a></div>` : '<div class="text-sm text-gray-400">No URL</div>'}
</div>
<div>
<button onclick="editCategory(${index})" class="text-blue-500 hover:text-blue-700 mr-2">
<i data-feather="edit-2" class="w-4 h-4"></i>
</button>
<button onclick="deleteCategory(${index})" class="text-red-500 hover:text-red-700">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
`;
list.appendChild(div);
});
feather.replace();
}
function renderMinistries() {
const tbody = document.getElementById('ministries-table');
tbody.innerHTML = '';
dashboardData.ministries.forEach(ministry => {
const row = document.createElement('tr');
row.className = 'border-b';
row.innerHTML = `
<td class="px-4 py-2">${ministry.name}</td>
<td class="px-4 py-2">${ministry.description}</td>
<td class="px-4 py-2"><span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">${ministry.category || 'No category'}</span></td>
<td class="px-4 py-2"><a href="${ministry.url}" class="text-blue-500 hover:underline" target="_blank">${ministry.url}</a></td>
<td class="px-4 py-2"><span class="px-2 py-1 bg-gray-200 rounded text-xs">${ministry.status}</span></td>
<td class="px-4 py-2">
<button onclick="editMinistry(${ministry.id})" class="text-blue-500 hover:text-blue-700 mr-2">
<i data-feather="edit-2" class="w-4 h-4"></i>
</button>
<button onclick="deleteMinistry(${ministry.id})" class="text-red-500 hover:text-red-700">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</td>
`;
tbody.appendChild(row);
});
feather.replace();
}
function renderImages() {
const gallery = document.getElementById('images-gallery');
gallery.innerHTML = '';
dashboardData.images.forEach((img, index) => {
const div = document.createElement('div');
div.className = 'relative group';
div.innerHTML = `
<img src="${img.url}" alt="${img.name}" class="w-full h-20 object-cover rounded">
<button onclick="deleteImage(${index})" class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100">
<i data-feather="x" class="w-3 h-3"></i>
</button>
`;
gallery.appendChild(div);
});
feather.replace();
}
// Category functions
document.getElementById('category-form').addEventListener('submit', function(e) {
e.preventDefault();
const nameInput = document.getElementById('category-input');
const urlInput = document.getElementById('category-url-input');
const editIndex = document.getElementById('edit-category-index').value;
const categoryData = {
name: nameInput.value,
url: urlInput.value || null
};
if (editIndex) {
dashboardData.categories[editIndex] = categoryData;
document.getElementById('edit-category-index').value = '';
document.getElementById('category-btn-text').textContent = 'Add';
document.getElementById('cancel-edit').classList.add('hidden');
} else {
dashboardData.categories.push(categoryData);
}
nameInput.value = '';
urlInput.value = '';
saveData();
renderCategories();
});
function editCategory(index) {
const category = dashboardData.categories[index];
if (typeof category === 'string') {
document.getElementById('category-input').value = category;
document.getElementById('category-url-input').value = '';
} else {
document.getElementById('category-input').value = category.name;
document.getElementById('category-url-input').value = category.url || '';
}
document.getElementById('edit-category-index').value = index;
document.getElementById('category-btn-text').textContent = 'Update';
document.getElementById('cancel-edit').classList.remove('hidden');
}
function deleteCategory(index) {
if (confirm('Delete this category?')) {
dashboardData.categories.splice(index, 1);
saveData();
renderCategories();
}
}
document.getElementById('cancel-edit').addEventListener('click', function() {
document.getElementById('category-input').value = '';
document.getElementById('category-url-input').value = '';
document.getElementById('edit-category-index').value = '';
document.getElementById('category-btn-text').textContent = 'Add';
this.classList.add('hidden');
});
// Populate category dropdown for ministry editing
function populateEditCategoryDropdown() {
const select = document.getElementById('edit-category');
select.innerHTML = '<option value="">Select Category</option>';
dashboardData.categories.forEach((category, index) => {
if (index === 0) return; // Skip "All Ministries"
const categoryName = typeof category === 'string' ? category : category.name;
const option = document.createElement('option');
option.value = categoryName;
option.textContent = categoryName;
select.appendChild(option);
});
}
// Ministry functions
function editMinistry(id) {
const ministry = dashboardData.ministries.find(m => m.id === id);
if (ministry) {
populateEditCategoryDropdown();
document.getElementById('edit-ministry-id').value = id;
document.getElementById('edit-name').value = ministry.name;
document.getElementById('edit-description').value = ministry.description;
document.getElementById('edit-category').value = ministry.category || '';
document.getElementById('edit-url').value = ministry.url;
document.getElementById('edit-status').value = ministry.status;
document.getElementById('edit-modal').classList.remove('hidden');
}
}
function deleteMinistry(id) {
if (confirm('Delete this ministry?')) {
dashboardData.ministries = dashboardData.ministries.filter(m => m.id !== id);
saveData();
renderMinistries();
}
}
document.getElementById('edit-ministry-form').addEventListener('submit', function(e) {
e.preventDefault();
const id = parseInt(document.getElementById('edit-ministry-id').value);
const ministry = dashboardData.ministries.find(m => m.id === id);
if (ministry) {
ministry.name = document.getElementById('edit-name').value;
ministry.description = document.getElementById('edit-description').value;
ministry.category = document.getElementById('edit-category').value;
ministry.url = document.getElementById('edit-url').value;
ministry.status = document.getElementById('edit-status').value;
saveData();
renderMinistries();
document.getElementById('edit-modal').classList.add('hidden');
}
});
document.getElementById('close-modal').addEventListener('click', function() {
document.getElementById('edit-modal').classList.add('hidden');
});
// Image functions
document.getElementById('image-upload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
dashboardData.images.push({
name: file.name,
url: e.target.result
});
saveData();
renderImages();
};
reader.readAsDataURL(file);
}
});
function deleteImage(index) {
if (confirm('Delete this image?')) {
dashboardData.images.splice(index, 1);
saveData();
renderImages();
}
}
// Bulk operations
document.getElementById('export-data').addEventListener('click', function() {
const dataStr = JSON.stringify(dashboardData, null, 2);
const dataBlob = new Blob([dataStr], {type: 'application/json'});
const url = URL.createObjectURL(dataBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'church-dashboard-settings.json';
link.click();
});
document.getElementById('import-data').addEventListener('click', function() {
document.getElementById('import-file').click();
});
document.getElementById('import-file').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
try {
const imported = JSON.parse(e.target.result);
dashboardData = imported;
saveData();
loadData();
alert('Settings imported successfully!');
} catch (error) {
alert('Error importing settings: ' + error.message);
}
};
reader.readAsText(file);
}
});
document.getElementById('reset-data').addEventListener('click', function() {
if (confirm('Reset all settings to default? This cannot be undone.')) {
localStorage.removeItem('churchDashboardData');
location.reload();
}
});
// Initialize
document.addEventListener('DOMContentLoaded', function() {
loadData();
feather.replace();
});
window.editCategory = editCategory;
window.deleteCategory = deleteCategory;
window.editMinistry = editMinistry;
window.deleteMinistry = deleteMinistry;
window.deleteImage = deleteImage;
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists