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>COP - MADINA AREA Church Dashboard</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<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>
:root {
--gradient-blue: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
--gradient-grey: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
--gradient-white: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
--gradient-yellow: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
--gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
--gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
body {
background: linear-gradient(135deg, #3b82f6 0%, #6b7280 50%, #fbbf24 100%);
}
nav {
background: var(--gradient-blue);
}
.card-hover {
transition: all 0.3s ease;
background: var(--gradient-white);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
background: var(--gradient-grey);
}
.search-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--gradient-blue);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gradient-yellow);
}
button.bg-blue-500 {
background: var(--gradient-blue);
}
button.bg-blue-500:hover {
background: var(--gradient-accent);
}
.category-btn.active {
background: var(--gradient-yellow);
color: white;
}
footer {
background: var(--gradient-grey);
}
.pagination a.bg-white {
background: var(--gradient-white);
}
.pagination a:hover {
background: var(--gradient-grey);
}
.police-badge {
background: var(--gradient-blue);
color: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-weight: bold;
font-size: 0.875rem;
}
</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">
<div id="nav-logo" class="mr-2">
<i data-feather="heart" class="text-white w-6 h-6"></i>
</div>
<span class="text-xl font-semibold text-white">COP - MADINA AREA Church</span>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search ministries..." class="search-input pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:border-blue-500 w-64 text-gray-800">
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
</div>
<div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
<i data-feather="user" class="text-blue-500"></i>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Header Section -->
<div class="mb-8 text-center">
<h1 class="text-3xl font-bold text-gray-800 mb-2">The Church of Pentecost - Madina Area</h1>
<p class="text-white">Our Central hub to all our platforms</p>
<div class="mt-4">
<span class="police-badge">SERVING GOD</span>
</div>
</div>
<!-- Categories -->
<div class="mb-8">
<h2 class="text-lg font-medium text-gray-700 mb-4">Ministry Categories</h2>
<div class="flex space-x-3 overflow-x-auto pb-2">
<button class="px-4 py-2 rounded-full whitespace-nowrap active category-btn">All Ministries</button>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full whitespace-nowrap hover:bg-gray-50 category-btn">Worship</button>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full whitespace-nowrap hover:bg-gray-50 category-btn">Youth Ministry</button>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full whitespace-nowrap hover:bg-gray-50 category-btn">Community Outreach</button>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full whitespace-nowrap hover:bg-gray-50 category-btn">Bible Study</button>
<button class="px-4 py-2 bg-white border border-gray-200 rounded-full whitespace-nowrap hover:bg-gray-50 category-btn">Prayer & Care</button>
</div>
</div>
<!-- Resources Grid -->
<div class="mb-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-medium text-gray-700">Church Ministries & Services</h2>
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-500">Sort by:</span>
<select class="bg-white border border-gray-200 rounded-md px-3 py-1 text-sm">
<option>Priority Level</option>
<option>Recently Updated</option>
<option>Most Used</option>
<option>A-Z</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Sunday Worship Card -->
<a href="#" target="_blank" rel="noopener noreferrer" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up">
<div class="h-40 bg-purple-500 relative overflow-hidden flex items-center justify-center">
<i data-feather="music" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Sunday Worship</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Main worship service</p>
<div class="flex justify-between items-center">
<span class="text-xs text-purple-600 font-semibold">WEEKLY</span>
</div>
</div>
</a>
<!-- Bible Study Card -->
<a href="#" target="_blank" rel="noopener noreferrer" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up" data-aos-delay="50">
<div class="h-40 bg-blue-600 relative overflow-hidden flex items-center justify-center">
<i data-feather="book-open" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Bible Study Groups</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Weekly scripture study</p>
<div class="flex justify-between items-center">
<span class="text-xs text-blue-600 font-semibold">ACTIVE</span>
</div>
</div>
</a>
<!-- Youth Ministry Card -->
<a href="#" target="_blank" rel="noopener noreferrer" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up" data-aos-delay="100">
<div class="h-40 bg-green-600 relative overflow-hidden flex items-center justify-center">
<i data-feather="users" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Youth Ministry</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Programs for young people</p>
<div class="flex justify-between items-center">
<span class="text-xs text-green-600 font-semibold">GROWING</span>
</div>
</div>
</a>
<!-- Prayer Ministry Card -->
<a href="#" target="_blank" rel="noopener noreferrer" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up" data-aos-delay="150">
<div class="h-40 bg-indigo-600 relative overflow-hidden flex items-center justify-center">
<i data-feather="heart" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Prayer Ministry</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Prayer requests & support</p>
<div class="flex justify-between items-center">
<span class="text-xs text-indigo-600 font-semibold">24/7</span>
</div>
</div>
</a>
<!-- Community Outreach Card -->
<a href="#" target="_blank" rel="noopener noreferrer" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up">
<div class="h-40 bg-orange-500 relative overflow-hidden flex items-center justify-center">
<i data-feather="globe" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Community Outreach</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Serving the community</p>
<div class="flex justify-between items-center">
<span class="text-xs text-orange-600 font-semibold">ONGOING</span>
</div>
</div>
</a>
<!-- Children's Ministry Card -->
<a href="#" target="_blank" rel="noopener noreferrer" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up" data-aos-delay="50">
<div class="h-40 bg-pink-500 relative overflow-hidden flex items-center justify-center">
<i data-feather="smile" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Children's Ministry</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Programs for children</p>
<div class="flex justify-between items-center">
<span class="text-xs text-pink-600 font-semibold">JOYFUL</span>
</div>
</div>
</a>
<!-- Church Events Card -->
<a href="#" target="_blank" rel="noopener noreferrer" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up" data-aos-delay="100">
<div class="h-40 bg-yellow-500 relative overflow-hidden flex items-center justify-center">
<i data-feather="calendar" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Church Events</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Upcoming activities</p>
<div class="flex justify-between items-center">
<span class="text-xs text-yellow-600 font-semibold">UPCOMING</span>
</div>
</div>
</a>
<!-- Pastoral Care Card -->
<a href="#" class="bg-white rounded-xl overflow-hidden shadow-md card-hover" data-aos="fade-up" data-aos-delay="150">
<div class="h-40 bg-teal-600 relative overflow-hidden flex items-center justify-center">
<i data-feather="shield" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">Pastoral Care</h3>
<p class="text-gray-500 text-sm mb-2 truncate">Spiritual guidance & support</p>
<div class="flex justify-between items-center">
<span class="text-xs text-teal-600 font-semibold">CARING</span>
</div>
</div>
</a>
</div>
</div>
<!-- Pagination -->
<div class="flex justify-center">
<nav class="inline-flex rounded-md shadow pagination">
<a href="#" class="px-3 py-1 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i data-feather="chevron-left" class="w-4 h-4"></i>
</a>
<a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-blue-500 font-medium">1</a>
<a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a>
<a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a>
<a href="#" class="px-3 py-1 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
<i data-feather="chevron-right" class="w-4 h-4"></i>
</a>
</nav>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-gray-200 py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<div id="footer-logo" class="mr-2">
<i data-feather="heart" class="text-blue-500 w-6 h-6"></i>
</div>
<span id="footer-title" class="text-gray-700">COP - MADINA AREA Church © 2024</span>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-blue-500">About Us</a>
<a href="#" class="text-gray-500 hover:text-blue-500">Contact Pastor</a>
<a href="#" class="text-gray-500 hover:text-blue-500">Prayer Requests</a>
</div>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 1200,
easing: 'ease-in-out',
once: true,
delay: 100
});
feather.replace();
// Dashboard data management
let dashboardData = {
churchInfo: {
siteTitle: "COP - MADINA AREA Church Dashboard",
name: "The Church of Pentecost - Madina Area",
navTitle: "COP - MADINA AREA Church",
description: "Our Central hub to all our platforms",
badge: "SERVING GOD",
logo: null
},
categories: [
"All Ministries",
{name: "Worship", url: null},
{name: "Youth Ministry", url: null},
{name: "Community Outreach", url: null},
{name: "Bible Study", url: null},
{name: "Prayer & Care", url: null}
],
ministries: []
};
// Load data from localStorage
function loadDashboardData() {
const saved = localStorage.getItem('churchDashboardData');
if (saved) {
const savedData = JSON.parse(saved);
dashboardData = { ...dashboardData, ...savedData };
}
updateDashboardContent();
}
// Update dashboard content
function updateDashboardContent() {
// Update page title
document.title = dashboardData.churchInfo.siteTitle;
// Update church info
document.querySelector('h1').textContent = dashboardData.churchInfo.name;
document.querySelector('h1').className = 'text-3xl font-bold text-gray-800 mb-2';
document.querySelector('h1 + p').textContent = dashboardData.churchInfo.description;
document.querySelector('.police-badge').textContent = dashboardData.churchInfo.badge;
document.querySelector('nav span').textContent = dashboardData.churchInfo.navTitle;
// Update logo (navigation and footer)
const navLogoContainer = document.getElementById('nav-logo');
const footerLogoContainer = document.getElementById('footer-logo');
if (dashboardData.churchInfo.logo) {
navLogoContainer.innerHTML = `<img src="${dashboardData.churchInfo.logo}" alt="Logo" class="w-6 h-6 rounded">`;
footerLogoContainer.innerHTML = `<img src="${dashboardData.churchInfo.logo}" alt="Logo" class="w-6 h-6 rounded">`;
} else {
navLogoContainer.innerHTML = '<i data-feather="heart" class="text-white w-6 h-6"></i>';
footerLogoContainer.innerHTML = '<i data-feather="heart" class="text-blue-500 w-6 h-6"></i>';
feather.replace();
}
// Update footer title to match navigation title
document.getElementById('footer-title').textContent = `${dashboardData.churchInfo.navTitle} © 2024`;
// Update categories - only show "All Ministries"
const categoriesContainer = document.querySelector('.flex.space-x-3.overflow-x-auto.pb-2');
categoriesContainer.innerHTML = '';
// Only show the first category (All Ministries)
if (dashboardData.categories.length > 0) {
const category = dashboardData.categories[0];
const categoryName = typeof category === 'string' ? category : category.name;
const categoryUrl = typeof category === 'string' ? null : category.url;
if (categoryUrl) {
const link = document.createElement('a');
link.href = categoryUrl;
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.className = 'px-4 py-2 rounded-full whitespace-nowrap category-btn active inline-block';
link.textContent = categoryName;
categoriesContainer.appendChild(link);
} else {
const button = document.createElement('button');
button.className = 'px-4 py-2 rounded-full whitespace-nowrap category-btn active';
button.textContent = categoryName;
categoriesContainer.appendChild(button);
}
}
// Update ministries grid
const ministriesGrid = document.querySelector('.grid.grid-cols-1.sm\\:grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4.gap-6');
ministriesGrid.innerHTML = '';
dashboardData.ministries.forEach((ministry, index) => {
const ministryCard = document.createElement('a');
ministryCard.href = ministry.url || '#';
ministryCard.target = '_blank';
ministryCard.rel = 'noopener noreferrer';
ministryCard.className = 'bg-white rounded-xl overflow-hidden shadow-md card-hover';
ministryCard.setAttribute('data-aos', 'fade-up');
ministryCard.setAttribute('data-aos-delay', (index % 4) * 50);
const statusColorMap = {
'purple-500': 'text-purple-600',
'blue-600': 'text-blue-600',
'green-600': 'text-green-600',
'indigo-600': 'text-indigo-600',
'orange-500': 'text-orange-600',
'pink-500': 'text-pink-600',
'yellow-500': 'text-yellow-600',
'teal-600': 'text-teal-600',
'red-500': 'text-red-600',
'gray-600': 'text-gray-600'
};
ministryCard.innerHTML = `
<div class="h-40 bg-${ministry.color} relative overflow-hidden flex items-center justify-center">
<i data-feather="${ministry.icon}" class="w-16 h-16 text-white"></i>
<div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
<i data-feather="external-link" class="w-3 h-3"></i>
</div>
</div>
<div class="p-4">
<h3 class="text-3xl font-medium text-gray-800 mb-1 truncate">${ministry.name}</h3>
<p class="text-gray-500 text-sm mb-2 truncate">${ministry.description}</p>
<div class="flex justify-between items-center">
<span class="text-xs ${statusColorMap[ministry.color] || 'text-gray-600'} font-semibold">${ministry.status}</span>
</div>
</div>
`;
ministriesGrid.appendChild(ministryCard);
});
// Re-initialize feather icons and category buttons
feather.replace();
initializeCategoryButtons();
}
// Initialize category button functionality
function initializeCategoryButtons() {
const categoryButtons = document.querySelectorAll('.category-btn');
categoryButtons.forEach(button => {
button.addEventListener('click', function() {
categoryButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
});
});
}
// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
loadDashboardData();
// Search functionality
const searchInput = document.querySelector('.search-input');
searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
const ministryCards = document.querySelectorAll('.card-hover');
ministryCards.forEach(card => {
const title = card.querySelector('h3').textContent.toLowerCase();
const description = card.querySelector('p').textContent.toLowerCase();
if (title.includes(searchTerm) || description.includes(searchTerm)) {
card.style.display = 'block';
} else {
card.style.display = searchTerm ? 'none' : 'block';
}
});
});
// Listen for storage changes (when admin updates data)
window.addEventListener('storage', function(e) {
if (e.key === 'churchDashboardData') {
loadDashboardData();
}
});
// Refresh data every 5 seconds to catch admin changes
setInterval(function() {
const currentData = localStorage.getItem('churchDashboardData');
if (currentData) {
const newData = JSON.parse(currentData);
if (JSON.stringify(newData) !== JSON.stringify(dashboardData)) {
loadDashboardData();
}
}
}, 5000);
});
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists