Sindbad~EG File Manager
<?php
// Maintenance Page - Standalone
// Based on the frontpage design template
// Get basic settings if available (with fallback)
$site_name = 'COP Madina Conference';
$site_description = 'Conference Platform';
// Try to get settings from database if accessible
try {
if (file_exists('includes/functions.php')) {
require_once 'includes/functions.php';
$settings = getSettings();
$site_name = $settings['site_name'] ?? 'COP Madina Conference';
$site_description = $settings['site_description'] ?? 'Conference Platform';
}
} catch (Exception $e) {
// Fallback to default values if database is not accessible
}
// Maintenance configuration
$maintenance_title = "System Under Maintenance";
$maintenance_message = "We're currently performing scheduled maintenance to improve your experience. Please check back shortly.";
$estimated_completion = "2024-03-15 18:00:00"; // Set your estimated completion time
$contact_email = "support@copmadinaconf.org";
$contact_phone = "+233 24 123 4567";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($maintenance_title); ?> - <?php echo htmlspecialchars($site_name); ?></title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'fade-in': 'fadeIn 0.8s ease-in-out',
'slide-up': 'slideUp 0.6s ease-out',
'bounce-slow': 'bounce 2s infinite',
'pulse-slow': 'pulse 3s infinite',
'spin-slow': 'spin 3s linear infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' }
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(30px)' },
'100%': { opacity: '1', transform: 'translateY(0)' }
}
}
}
}
}
</script>
<style>
.maintenance-gear {
animation: spin-slow 3s linear infinite;
}
.maintenance-pulse {
animation: pulse-slow 2s infinite;
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-blue-50 min-h-screen">
<div id="app">
<!-- Navigation (Simplified) -->
<nav class="bg-gradient-to-r from-blue-500 via-slate-600 to-violet-400 shadow-lg border-b border-slate-200/50 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600">
<i class="fas fa-church text-white text-xl"></i>
</div>
<div>
<h1 class="text-xl font-bold text-white drop-shadow-lg">
<?php echo htmlspecialchars($site_name); ?>
</h1>
<p class="text-xs text-white/80"><?php echo htmlspecialchars($site_description); ?></p>
</div>
</div>
<!-- Status Indicator -->
<div class="hidden md:flex items-center space-x-3">
<div class="flex items-center px-4 py-2 bg-yellow-500/20 backdrop-blur-sm rounded-lg border border-yellow-400/30">
<div class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse mr-2"></div>
<span class="text-white/90 text-sm font-medium">Under Maintenance</span>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Maintenance Section -->
<section class="relative py-20 overflow-hidden bg-gradient-to-br from-blue-600 via-slate-600 to-yellow-500 min-h-screen flex items-center">
<!-- Background Effects -->
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500/20 via-slate-500/10 to-yellow-400/20"></div>
<div class="absolute top-0 left-0 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl transform -translate-x-48 -translate-y-48"></div>
<div class="absolute top-1/2 right-0 w-80 h-80 bg-yellow-400/15 rounded-full blur-2xl transform translate-x-40"></div>
<div class="absolute bottom-0 left-1/3 w-64 h-64 bg-slate-400/10 rounded-full blur-xl transform translate-y-32"></div>
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<!-- Maintenance Icon -->
<div class="animate-fade-in mb-8">
<div class="relative inline-block">
<div class="w-32 h-32 mx-auto bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/30 mb-6">
<i class="fas fa-tools text-5xl text-white maintenance-gear"></i>
</div>
<div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center maintenance-pulse">
<i class="fas fa-exclamation text-slate-800 text-sm"></i>
</div>
</div>
</div>
<!-- Main Content -->
<div class="animate-slide-up">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">
<span class="bg-gradient-to-r from-yellow-300 to-blue-200 bg-clip-text text-transparent">
System Maintenance
</span>
</h1>
<p class="text-xl text-white/90 mb-8 max-w-3xl mx-auto drop-shadow-md">
<?php echo htmlspecialchars($maintenance_message); ?>
</p>
<!-- Countdown Timer -->
<div class="relative bg-gradient-to-br from-blue-500 via-blue-600 to-yellow-400 rounded-2xl shadow-2xl p-8 mb-8 max-w-2xl mx-auto border border-blue-300/30 overflow-hidden">
<!-- Background Effects -->
<div class="absolute inset-0 bg-gradient-to-tr from-blue-600/20 via-transparent to-yellow-300/20"></div>
<div class="absolute top-0 right-0 w-32 h-32 bg-yellow-300/20 rounded-full blur-2xl transform translate-x-16 -translate-y-16"></div>
<div class="absolute bottom-0 left-0 w-24 h-24 bg-blue-400/30 rounded-full blur-xl transform -translate-x-12 translate-y-12"></div>
<!-- Content -->
<div class="relative z-10">
<h3 class="text-2xl font-bold text-white mb-4 drop-shadow-lg">Estimated Completion</h3>
<p class="text-white/90 mb-4 drop-shadow-sm">
<?php echo date('F j, Y \a\t g:i A', strtotime($estimated_completion)); ?>
</p>
<!-- Countdown Timer -->
<div class="grid grid-cols-4 gap-4 mb-6" id="maintenance-countdown">
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="days">00</div>
<div class="text-sm text-white/80">Days</div>
</div>
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="hours">00</div>
<div class="text-sm text-white/80">Hours</div>
</div>
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="minutes">00</div>
<div class="text-sm text-white/80">Minutes</div>
</div>
<div class="text-center bg-white/20 backdrop-blur-sm rounded-xl p-3 border border-white/30">
<div class="text-2xl font-bold text-white drop-shadow-lg" id="seconds">00</div>
<div class="text-sm text-white/80">Seconds</div>
</div>
</div>
<div class="text-center">
<div class="inline-flex items-center px-4 py-2 bg-green-500/20 backdrop-blur-sm text-green-100 font-medium rounded-lg border border-green-400/30">
<i class="fas fa-clock mr-2"></i>
We'll be back soon!
</div>
</div>
</div>
</div>
<!-- Status Updates -->
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 mb-8 border border-white/20">
<h3 class="text-xl font-bold text-white mb-4">
<i class="fas fa-info-circle mr-2"></i>
What's Being Updated
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
<div class="flex items-center p-3 bg-white/10 rounded-lg">
<i class="fas fa-database text-blue-300 mr-3"></i>
<span class="text-white/90">Database Optimization</span>
</div>
<div class="flex items-center p-3 bg-white/10 rounded-lg">
<i class="fas fa-shield-alt text-green-300 mr-3"></i>
<span class="text-white/90">Security Updates</span>
</div>
<div class="flex items-center p-3 bg-white/10 rounded-lg">
<i class="fas fa-rocket text-yellow-300 mr-3"></i>
<span class="text-white/90">Performance Improvements</span>
</div>
</div>
</div>
<!-- Contact Information -->
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
<h3 class="text-xl font-bold text-white mb-4">
<i class="fas fa-headset mr-2"></i>
Need Immediate Assistance?
</h3>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a href="mailto:<?php echo htmlspecialchars($contact_email); ?>"
class="inline-flex items-center px-6 py-3 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white font-medium rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border border-white/30 hover:border-white/50">
<i class="fas fa-envelope mr-2"></i>
Email Support
</a>
<a href="tel:<?php echo htmlspecialchars($contact_phone); ?>"
class="inline-flex items-center px-6 py-3 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white font-medium rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border border-white/30 hover:border-white/50">
<i class="fas fa-phone mr-2"></i>
Call Us
</a>
</div>
<p class="text-white/70 text-sm mt-4">
For urgent matters, please contact our support team directly.
</p>
</div>
</div>
</div>
</section>
<!-- Footer (Simplified) -->
<footer class="bg-slate-800 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<div class="flex items-center justify-center space-x-3 mb-4">
<div class="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600">
<i class="fas fa-church text-white text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold"><?php echo htmlspecialchars($site_name); ?></h3>
<p class="text-slate-300 text-sm"><?php echo htmlspecialchars($site_description); ?></p>
</div>
</div>
<p class="text-slate-400 mb-4">
Thank you for your patience while we improve our platform.
</p>
<div class="border-t border-slate-700 pt-4">
<p class="text-slate-400">
© <?php echo date('Y'); ?> Church of Pentecost - Madina Area. All rights reserved.
</p>
</div>
</div>
</div>
</footer>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
countdownTimer: null
}
},
mounted() {
// Initialize countdown timer
this.startCountdown('<?php echo $estimated_completion; ?>');
},
methods: {
startCountdown(completionDateTime) {
// Parse the datetime string properly
const completionDate = new Date(completionDateTime).getTime();
// Check if date is valid
if (isNaN(completionDate)) {
console.error('Invalid completion date:', completionDateTime);
return;
}
const updateCountdown = () => {
const now = new Date().getTime();
const distance = completionDate - now;
if (distance < 0) {
// Maintenance period has passed
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
// Show completion message
const countdownEl = document.getElementById('maintenance-countdown');
if (countdownEl && countdownEl.parentNode) {
countdownEl.parentNode.innerHTML = `
<div class="text-center p-6">
<i class="fas fa-check-circle text-green-300 text-4xl mb-4"></i>
<h3 class="text-xl font-bold text-white mb-2">Maintenance Complete!</h3>
<p class="text-white/90 mb-4">You can now refresh the page to access the platform.</p>
<button onclick="window.location.reload()" class="px-6 py-3 bg-green-500 hover:bg-green-600 text-white font-medium rounded-xl transition-all duration-200">
<i class="fas fa-refresh mr-2"></i>Refresh Page
</button>
</div>
`;
}
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Update DOM elements if they exist
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
if (daysEl) daysEl.textContent = days.toString().padStart(2, '0');
if (hoursEl) hoursEl.textContent = hours.toString().padStart(2, '0');
if (minutesEl) minutesEl.textContent = minutes.toString().padStart(2, '0');
if (secondsEl) secondsEl.textContent = seconds.toString().padStart(2, '0');
};
// Update immediately
updateCountdown();
// Update every second
this.countdownTimer = setInterval(updateCountdown, 1000);
}
},
beforeUnmount() {
// Clean up timer
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
}
}
}).mount('#app');
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists