// Enhanced offline detection with beautiful design (function() { let offlineOverlay = null; function createOfflineOverlay() { if (offlineOverlay) return; // Prevent duplicates offlineOverlay = document.createElement('div'); offlineOverlay.id = 'offline-overlay'; offlineOverlay.innerHTML = `

`; // Add styles const style = document.createElement('style'); style.textContent = ` #offline-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .offline-backdrop { width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.3s ease-out; } .offline-modal { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 24px; padding: 48px 40px; text-align: center; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); max-width: 420px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.2); animation: slideUp 0.4s ease-out; } .offline-icon-container { margin-bottom: 24px; } .offline-icon { width: 96px; height: 96px; background: linear-gradient(135deg, #ff6b6b, #ee5a52); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; color: white; animation: pulse 2s infinite; box-shadow: 0 8px 32px rgba(255, 107, 107, 0.3); } .offline-title { color: #1a202c; font-size: 32px; font-weight: 700; margin-bottom: 16px; line-height: 1.2; } .offline-description { color: #4a5568; font-size: 18px; line-height: 1.6; margin-bottom: 40px; font-weight: 400; } .offline-buttons { display: flex; flex-direction: column; gap: 16px; } .btn-primary, .btn-secondary { width: 100%; padding: 16px 24px; border: none; border-radius: 16px; font-weight: 600; font-size: 18px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: white; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: rgba(255, 255, 255, 0.8); color: #4a5568; border: 2px solid rgba(102, 126, 234, 0.2); } .btn-secondary:hover { background: rgba(255, 255, 255, 1); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .btn-secondary:active { transform: translateY(0); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 480px) { .offline-modal { padding: 32px 24px; margin: 16px; } .offline-title { font-size: 28px; } .offline-description { font-size: 16px; } } `; document.head.appendChild(style); document.body.appendChild(offlineOverlay); } function removeOfflineOverlay() { if (offlineOverlay) { offlineOverlay.remove(); offlineOverlay = null; } } function initOfflineDetection() { // Check if we're offline and show overlay if (!navigator.onLine) { createOfflineOverlay(); } // Listen for online/offline events window.addEventListener('online', function() { removeOfflineOverlay(); setTimeout(() => window.location.reload(), 100); }); window.addEventListener('offline', function() { createOfflineOverlay(); }); } // Initialize after DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initOfflineDetection); } else { initOfflineDetection(); } })();

اتصال به اینترنت قطع است