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>Offline - Church App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #1E40AF 0%, #9333EA 50%, #F97316 100%);
}
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.offline-icon {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
</style>
</head>
<body class="bg-gray-50">
<div class="min-h-screen flex items-center justify-center px-4">
<div class="max-w-md w-full">
<!-- Logo/Icon -->
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-24 h-24 rounded-full gradient-bg mb-6 offline-icon">
<i class="fas fa-wifi-slash text-white text-4xl"></i>
</div>
<h1 class="text-3xl font-bold text-gray-800 mb-2">You're Offline</h1>
<p class="text-gray-600">No internet connection detected</p>
</div>
<!-- Message Card -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-6">
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
<div>
<h3 class="font-bold text-gray-800 mb-1">Cached Content Available</h3>
<p class="text-sm text-gray-600">You can still view previously loaded pages while offline.</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-sync-alt text-green-500 text-xl mr-3 mt-1"></i>
<div>
<h3 class="font-bold text-gray-800 mb-1">Automatic Reconnection</h3>
<p class="text-sm text-gray-600">The app will automatically reconnect when your internet is back.</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-save text-purple-500 text-xl mr-3 mt-1"></i>
<div>
<h3 class="font-bold text-gray-800 mb-1">Data Saved</h3>
<p class="text-sm text-gray-600">Any form submissions will be sent once you're back online.</p>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="space-y-3">
<button onclick="window.location.reload()"
class="w-full px-6 py-3 gradient-bg text-white rounded-lg font-semibold hover:opacity-90 transition flex items-center justify-center">
<i class="fas fa-redo mr-2"></i>
Try Again
</button>
<button onclick="window.history.back()"
class="w-full px-6 py-3 bg-gray-200 text-gray-800 rounded-lg font-semibold hover:bg-gray-300 transition flex items-center justify-center">
<i class="fas fa-arrow-left mr-2"></i>
Go Back
</button>
</div>
<!-- Connection Status -->
<div class="mt-8 text-center">
<div id="connectionStatus" class="inline-flex items-center px-4 py-2 bg-red-100 text-red-700 rounded-full text-sm font-semibold">
<span class="w-2 h-2 bg-red-500 rounded-full mr-2 pulse"></span>
Offline
</div>
</div>
<!-- Tips -->
<div class="mt-8 bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded">
<div class="flex">
<i class="fas fa-lightbulb text-yellow-500 text-xl mr-3"></i>
<div>
<h4 class="font-bold text-yellow-800 mb-1">Troubleshooting Tips</h4>
<ul class="text-sm text-yellow-700 space-y-1">
<li>• Check your WiFi or mobile data connection</li>
<li>• Try toggling airplane mode on/off</li>
<li>• Restart your router if using WiFi</li>
<li>• Move to an area with better signal</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
// Check connection status
function updateConnectionStatus() {
const statusEl = document.getElementById('connectionStatus');
if (navigator.onLine) {
statusEl.className = 'inline-flex items-center px-4 py-2 bg-green-100 text-green-700 rounded-full text-sm font-semibold';
statusEl.innerHTML = '<span class="w-2 h-2 bg-green-500 rounded-full mr-2 pulse"></span>Back Online!';
// Auto-reload after 1 second
setTimeout(() => {
window.location.reload();
}, 1000);
} else {
statusEl.className = 'inline-flex items-center px-4 py-2 bg-red-100 text-red-700 rounded-full text-sm font-semibold';
statusEl.innerHTML = '<span class="w-2 h-2 bg-red-500 rounded-full mr-2 pulse"></span>Offline';
}
}
// Listen for online/offline events
window.addEventListener('online', updateConnectionStatus);
window.addEventListener('offline', updateConnectionStatus);
// Check every 5 seconds
setInterval(updateConnectionStatus, 5000);
// Initial check
updateConnectionStatus();
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists