# RELEVANT REFLEX SHOP_26 AUG 2025 - REPOSITORY ================================================================================ Project Name: Relevant Reflex Shop_26 Aug 2025 Created: 2025-08-26 03:47:07 Last Updated: 2025-08-26 03:47:16 Source ZIP: public_html(2).zip Total Files: 9 Total Folders: 5 ================================================================================ ## FILE STRUCTURE ================================================================================ Relevant Reflex Shop_26 Aug 2025/ ├── assets/ │ ├── css/ │ │ └── style.css │ └── js/ │ └── app.js ├── content/ │ └── dashboard.php ├── includes/ │ ├── footer.php │ └── header.php ├── index.php ├── manifest.json ├── offline.html └── sw.js ================================================================================ ## FILE CONTENTS ================================================================================ ### FILE 1: index.php - Type: PHP - Size: 623 B - Path: . - Name: index.php ------------------------------------------------------------ 'relevantreflex.shop', 'site_description' => 'Panel Management System' ]; // Check if user is logged in (this will be expanded later) $isLoggedIn = isset($_SESSION['user_id']); // For demo purposes, we'll show the dashboard without authentication // In production, uncomment the lines below: /* if (!$isLoggedIn) { header('Location: login.php'); exit; } */ // Include header include_once 'includes/header.php'; // Include dashboard content include_once 'content/dashboard.php'; // Include footer include_once 'includes/footer.php'; ?> -------------------- END OF FILE -------------------- ### FILE 2: manifest.json - Type: JSON - Size: 5.03 KB - Path: . - Name: manifest.json ------------------------------------------------------------ { "name": "RelevantReflex Panel Management", "short_name": "RelevantReflex", "description": "Professional survey panel management platform optimized for mobile devices. Manage your research panel, track analytics, and handle operations on the go.", "version": "2.1.0", "start_url": "/", "scope": "/", "display": "standalone", "display_override": ["window-controls-overlay", "standalone", "minimal-ui"], "orientation": "portrait-primary", "theme_color": "#1e293b", "background_color": "#f8fafc", "categories": ["business", "productivity", "utilities"], "lang": "en-IN", "dir": "ltr", "icons": [ { "src": "/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ], "shortcuts": [ { "name": "Dashboard", "short_name": "Home", "description": "View dashboard overview", "url": "/", "icons": [ { "src": "/icons/shortcut-home.png", "sizes": "96x96", "type": "image/png" } ] }, { "name": "Panel Management", "short_name": "Panel", "description": "Manage survey panels", "url": "/panel.php", "icons": [ { "src": "/icons/shortcut-panel.png", "sizes": "96x96", "type": "image/png" } ] }, { "name": "Analytics", "short_name": "Stats", "description": "View analytics and reports", "url": "/analytics.php", "icons": [ { "src": "/icons/shortcut-analytics.png", "sizes": "96x96", "type": "image/png" } ] }, { "name": "Support", "short_name": "Help", "description": "Get support and help", "url": "/tickets.php", "icons": [ { "src": "/icons/shortcut-support.png", "sizes": "96x96", "type": "image/png" } ] } ], "screenshots": [ { "src": "/screenshots/desktop-home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide", "label": "Dashboard overview on desktop" }, { "src": "/screenshots/mobile-home.png", "sizes": "375x812", "type": "image/png", "form_factor": "narrow", "label": "Dashboard overview on mobile" }, { "src": "/screenshots/mobile-panel.png", "sizes": "375x812", "type": "image/png", "form_factor": "narrow", "label": "Panel management on mobile" }, { "src": "/screenshots/mobile-analytics.png", "sizes": "375x812", "type": "image/png", "form_factor": "narrow", "label": "Analytics dashboard on mobile" } ], "related_applications": [ { "platform": "play", "url": "https://play.google.com/store/apps/details?id=com.relevantreflex.panel", "id": "com.relevantreflex.panel" }, { "platform": "itunes", "url": "https://apps.apple.com/app/relevantreflex-panel/id123456789", "id": "123456789" } ], "prefer_related_applications": false, "protocol_handlers": [ { "protocol": "web+relevantreflex", "url": "/handle-protocol?url=%s" } ], "share_target": { "action": "/share-handler", "method": "POST", "enctype": "multipart/form-data", "params": { "title": "title", "text": "text", "url": "url", "files": [ { "name": "file", "accept": [ "image/*", "text/csv", ".xlsx", ".pdf" ] } ] } }, "file_handlers": [ { "action": "/handle-csv", "accept": { "text/csv": [".csv"], "application/vnd.ms-excel": [".xls"], "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"] } } ], "launch_handler": { "client_mode": "navigate-existing" }, "handle_links": "preferred", "edge_side_panel": { "preferred_width": 400 }, "id": "relevantreflex-panel-management", "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" } -------------------- END OF FILE -------------------- ### FILE 3: offline.html - Type: HTML - Size: 16.62 KB - Path: . - Name: offline.html ------------------------------------------------------------ Offline - RelevantReflex

You're Offline

It looks like you're not connected to the internet. Don't worry - you can still access some features using cached data.

View Cached Dashboard
Offline

While You're Offline

-------------------- END OF FILE -------------------- ### FILE 4: sw.js - Type: JS - Size: 12.26 KB - Path: . - Name: sw.js ------------------------------------------------------------ // Service Worker for RelevantReflex Panel Management // Version: 2.1.0 // Optimized for mobile devices and offline functionality const CACHE_NAME = 'relevantreflex-v2.1.0'; const OFFLINE_CACHE = 'relevantreflex-offline-v2.1.0'; const DYNAMIC_CACHE = 'relevantreflex-dynamic-v2.1.0'; // Resources to cache for offline functionality const STATIC_ASSETS = [ '/', '/index.php', '/assets/css/style.css', '/assets/js/app.js', '/manifest.json', '/offline.html', // Fallback page // Critical fonts (subset for mobile) 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap', // Essential icons 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', // App icons '/icons/icon-192x192.png', '/icons/icon-512x512.png', // Offline assets '/images/offline-illustration.svg' ]; // Pages that should work offline const OFFLINE_PAGES = [ '/', '/index.php', '/analytics.php', '/users.php', '/panel.php', '/finance.php', '/tickets.php', '/settings.php' ]; // Network-first resources (always try network) const NETWORK_FIRST = [ '/api/', '/ajax/', '/login.php', '/logout.php' ]; // Cache-first resources (images, fonts, etc.) const CACHE_FIRST = [ '.png', '.jpg', '.jpeg', '.svg', '.webp', '.woff', '.woff2', '.ttf', '.css', '.js' ]; // Install Service Worker self.addEventListener('install', (event) => { console.log('🔧 Service Worker installing...'); event.waitUntil( Promise.all([ // Cache static assets caches.open(CACHE_NAME).then((cache) => { console.log('📦 Caching static assets'); return cache.addAll(STATIC_ASSETS); }), // Cache offline pages caches.open(OFFLINE_CACHE).then((cache) => { console.log('📱 Caching offline pages'); return cache.addAll(OFFLINE_PAGES); }) ]).then(() => { console.log('✅ Service Worker installed successfully'); // Force activation of new service worker return self.skipWaiting(); }).catch((error) => { console.error('❌ Service Worker installation failed:', error); }) ); }); // Activate Service Worker self.addEventListener('activate', (event) => { console.log('🚀 Service Worker activating...'); event.waitUntil( Promise.all([ // Clean up old caches caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheName !== CACHE_NAME && cacheName !== OFFLINE_CACHE && cacheName !== DYNAMIC_CACHE) { console.log('🗑️ Deleting old cache:', cacheName); return caches.delete(cacheName); } }) ); }), // Take control of all clients self.clients.claim() ]).then(() => { console.log('✅ Service Worker activated successfully'); }) ); }); // Fetch event handler self.addEventListener('fetch', (event) => { const request = event.request; const url = new URL(request.url); // Skip non-GET requests and chrome-extension requests if (request.method !== 'GET' || url.protocol === 'chrome-extension:') { return; } // Handle different request types with appropriate strategies if (isNetworkFirst(url.pathname)) { event.respondWith(handleNetworkFirst(request)); } else if (isCacheFirst(url.pathname)) { event.respondWith(handleCacheFirst(request)); } else if (isOfflinePage(url.pathname)) { event.respondWith(handleStaleWhileRevalidate(request)); } else { event.respondWith(handleDefault(request)); } }); // Network-first strategy (for dynamic content) async function handleNetworkFirst(request) { try { console.log('🌐 Network-first:', request.url); // Add timeout for mobile networks const networkResponse = await Promise.race([ fetch(request), new Promise((_, reject) => setTimeout(() => reject(new Error('Network timeout')), 3000) ) ]); // Cache successful responses if (networkResponse.ok) { const cache = await caches.open(DYNAMIC_CACHE); cache.put(request, networkResponse.clone()); } return networkResponse; } catch (error) { console.log('📱 Network failed, trying cache:', request.url); // Fallback to cache const cachedResponse = await caches.match(request); if (cachedResponse) { return cachedResponse; } // Return offline page for navigation requests if (request.mode === 'navigate') { return caches.match('/offline.html'); } // Return generic offline response return new Response('Offline - Content not available', { status: 503, statusText: 'Service Unavailable', headers: { 'Content-Type': 'text/plain' } }); } } // Cache-first strategy (for static assets) async function handleCacheFirst(request) { console.log('📦 Cache-first:', request.url); const cachedResponse = await caches.match(request); if (cachedResponse) { return cachedResponse; } try { const networkResponse = await fetch(request); if (networkResponse.ok) { const cache = await caches.open(CACHE_NAME); cache.put(request, networkResponse.clone()); } return networkResponse; } catch (error) { console.log('❌ Cache-first failed:', request.url); // Return placeholder for images if (request.destination === 'image') { return new Response( 'Image unavailable', { headers: { 'Content-Type': 'image/svg+xml' } } ); } throw error; } } // Stale-while-revalidate strategy (for app pages) async function handleStaleWhileRevalidate(request) { console.log('🔄 Stale-while-revalidate:', request.url); const cache = await caches.open(OFFLINE_CACHE); const cachedResponse = await cache.match(request); // Fetch in background and update cache const networkResponsePromise = fetch(request).then(async (networkResponse) => { if (networkResponse.ok) { cache.put(request, networkResponse.clone()); } return networkResponse; }).catch(() => null); // Return cached version immediately if available if (cachedResponse) { return cachedResponse; } // Wait for network if no cached version const networkResponse = await networkResponsePromise; if (networkResponse) { return networkResponse; } // Fallback to offline page return caches.match('/offline.html'); } // Default strategy async function handleDefault(request) { console.log('🔧 Default strategy:', request.url); try { const networkResponse = await fetch(request); return networkResponse; } catch (error) { const cachedResponse = await caches.match(request); if (cachedResponse) { return cachedResponse; } if (request.mode === 'navigate') { return caches.match('/offline.html'); } throw error; } } // Helper functions function isNetworkFirst(pathname) { return NETWORK_FIRST.some(pattern => pathname.includes(pattern)); } function isCacheFirst(pathname) { return CACHE_FIRST.some(ext => pathname.includes(ext)); } function isOfflinePage(pathname) { return OFFLINE_PAGES.some(page => pathname === page || pathname === page.replace('.php', '') ); } // Background sync for mobile self.addEventListener('sync', (event) => { console.log('🔄 Background sync triggered:', event.tag); if (event.tag === 'background-sync') { event.waitUntil(doBackgroundSync()); } }); async function doBackgroundSync() { try { // Sync pending data when back online console.log('📡 Performing background sync...'); // Get any stored offline actions const offlineActions = await getStoredOfflineActions(); for (const action of offlineActions) { try { await fetch(action.url, { method: action.method, headers: action.headers, body: action.body }); // Remove successfully synced action await removeStoredOfflineAction(action.id); console.log('✅ Synced action:', action.id); } catch (error) { console.log('❌ Failed to sync action:', action.id, error); } } } catch (error) { console.error('❌ Background sync failed:', error); } } // Push notifications for mobile self.addEventListener('push', (event) => { console.log('📱 Push notification received'); const options = { body: event.data ? event.data.text() : 'New update available', icon: '/icons/icon-192x192.png', badge: '/icons/badge-72x72.png', vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), primaryKey: 1 }, actions: [ { action: 'explore', title: 'View', icon: '/icons/checkmark.png' }, { action: 'close', title: 'Close', icon: '/icons/xmark.png' } ], tag: 'relevantreflex-notification' }; event.waitUntil( self.registration.showNotification('RelevantReflex', options) ); }); // Handle notification clicks self.addEventListener('notificationclick', (event) => { console.log('🔔 Notification clicked:', event.action); event.notification.close(); if (event.action === 'explore') { event.waitUntil( clients.openWindow('/') ); } }); // Periodic background sync (for mobile PWAs) self.addEventListener('periodicsync', (event) => { console.log('⏰ Periodic sync triggered:', event.tag); if (event.tag === 'content-sync') { event.waitUntil( updateCriticalData() ); } }); async function updateCriticalData() { try { console.log('📊 Updating critical data...'); // Update dashboard data const dashboardResponse = await fetch('/api/dashboard-summary'); if (dashboardResponse.ok) { const cache = await caches.open(DYNAMIC_CACHE); cache.put('/api/dashboard-summary', dashboardResponse.clone()); } // Update notifications count const notificationsResponse = await fetch('/api/notifications/count'); if (notificationsResponse.ok) { const cache = await caches.open(DYNAMIC_CACHE); cache.put('/api/notifications/count', notificationsResponse.clone()); } console.log('✅ Critical data updated'); } catch (error) { console.error('❌ Failed to update critical data:', error); } } // Cache management for mobile (prevent cache overflow) async function manageCacheSize() { const cache = await caches.open(DYNAMIC_CACHE); const requests = await cache.keys(); // Remove oldest entries if cache is too large (mobile memory management) if (requests.length > 50) { const oldestRequests = requests.slice(0, requests.length - 40); await Promise.all( oldestRequests.map(request => cache.delete(request)) ); console.log(`🗑️ Cleaned up ${oldestRequests.length} old cache entries`); } } // Run cache management periodically setInterval(manageCacheSize, 300000); // Every 5 minutes // Utility functions for offline actions async function getStoredOfflineActions() { try { const cache = await caches.open('offline-actions'); const response = await cache.match('/offline-actions.json'); if (response) { return await response.json(); } } catch (error) { console.error('Failed to get stored offline actions:', error); } return []; } async function removeStoredOfflineAction(actionId) { try { const actions = await getStoredOfflineActions(); const updatedActions = actions.filter(action => action.id !== actionId); const cache = await caches.open('offline-actions'); await cache.put('/offline-actions.json', new Response(JSON.stringify(updatedActions))); } catch (error) { console.error('Failed to remove offline action:', error); } } // Error handling self.addEventListener('error', (event) => { console.error('💥 Service Worker error:', event.error); }); self.addEventListener('unhandledrejection', (event) => { console.error('💥 Service Worker unhandled rejection:', event.reason); }); console.log('📱 RelevantReflex Service Worker loaded - optimized for mobile'); -------------------- END OF FILE -------------------- ### FILE 5: assets/css/style.css - Type: CSS - Size: 43.17 KB - Path: assets/css - Name: style.css ------------------------------------------------------------ /* Force Firefox to use new styles - v2.1.1 */ :root { /* International Corporate Color Palette - Inspired by global brands */ --primary: #0052CC; /* Professional Blue (Atlassian-inspired) */ --primary-light: #0065FF; /* Vibrant Blue */ --primary-dark: #003884; /* Deep Corporate Blue */ --secondary: #00A86B; /* Emerald Green (International) */ --secondary-light: #00D084; /* Bright Emerald */ --secondary-dark: #008B57; /* Forest Green */ --accent: #FF6B35; /* Warm Orange (Global Appeal) */ --accent-light: #FF8A5B; /* Light Orange */ --accent-dark: #E5502A; /* Deep Orange */ --tertiary: #8B5CF6; /* Royal Purple */ --tertiary-light: #A78BFA; /* Light Purple */ --quaternary: #F59E0B; /* Golden Yellow */ --quaternary-light: #FCD34D; /* Light Gold */ /* Professional Status Colors */ --success: #10B981; /* International Green */ --warning: #F59E0B; /* Amber Warning */ --danger: #EF4444; /* Alert Red */ --info: #3B82F6; /* Info Blue */ /* Sophisticated Neutral Palette */ --white: #FFFFFF; --black: #000000; --gray-25: #FCFCFD; /* Ultra Light */ --gray-50: #F8FAFC; /* Very Light */ --gray-100: #F1F5F9; /* Light */ --gray-200: #E2E8F0; /* Light Gray */ --gray-300: #CBD5E1; /* Medium Light */ --gray-400: #94A3B8; /* Medium */ --gray-500: #64748B; /* Medium Dark */ --gray-600: #475569; /* Dark */ --gray-700: #334155; /* Very Dark */ --gray-800: #1E293B; /* Ultra Dark */ --gray-900: #0F172A; /* Nearly Black */ /* Corporate Background Variations */ --bg-primary: #FFFFFF; --bg-secondary: #F8FAFC; --bg-tertiary: #F1F5F9; --bg-accent: linear-gradient(135deg, #0052CC 0%, #0065FF 100%); /* International Typography Scale */ --text-xs: clamp(0.75rem, 1.5vw + 0.5rem, 0.875rem); --text-sm: clamp(0.875rem, 1.8vw + 0.6rem, 1rem); --text-base: clamp(1rem, 2.2vw + 0.7rem, 1.125rem); --text-lg: clamp(1.125rem, 2.5vw + 0.8rem, 1.25rem); --text-xl: clamp(1.25rem, 3vw + 0.9rem, 1.5rem); --text-2xl: clamp(1.5rem, 4vw + 1rem, 2rem); --text-3xl: clamp(2rem, 5vw + 1.2rem, 2.5rem); --text-4xl: clamp(2.5rem, 6vw + 1.5rem, 3.5rem); --text-5xl: clamp(3rem, 8vw + 2rem, 4.5rem); /* Professional Spacing System */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ --space-4xl: 4rem; /* 64px */ --space-5xl: 6rem; /* 96px */ /* Corporate Layout Dimensions */ --header-height-mobile: 64px; --header-height-tablet: 72px; --header-height-desktop: 80px; --sidebar-width: 280px; --container-max-width: 1400px; /* International Border Radius */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Corporate Shadow System */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-colored: 0 10px 15px -3px rgb(0 82 204 / 0.1), 0 4px 6px -4px rgb(0 82 204 / 0.1); /* Professional Gradients */ --gradient-primary: linear-gradient(135deg, #0052CC 0%, #0065FF 100%); --gradient-secondary: linear-gradient(135deg, #00A86B 0%, #00D084 100%); --gradient-accent: linear-gradient(135deg, #FF6B35 0%, #FF8A5B 100%); --gradient-hero: linear-gradient(135deg, #0052CC 0%, #8B5CF6 50%, #FF6B35 100%); --gradient-surface: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%); /* International Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* Corporate Borders */ --border-light: 1px solid var(--gray-200); --border-medium: 2px solid var(--gray-300); --border-primary: 2px solid var(--primary); --border-accent: 2px solid var(--accent); } /* Advanced CSS Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* International Typography Foundation */ html { font-size: 16px; scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: var(--text-base); font-weight: 400; line-height: 1.6; color: var(--gray-800); background: var(--bg-secondary); overflow-x: hidden; min-height: 100vh; min-height: 100dvh; letter-spacing: -0.005em; text-rendering: optimizeLegibility; } /* Professional Typography Hierarchy */ h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', 'Inter', system-ui, sans-serif; font-weight: 700; line-height: 1.2; color: var(--gray-900); margin-bottom: var(--space-md); letter-spacing: -0.025em; text-wrap: balance; } h1 { font-size: var(--text-5xl); font-weight: 800; background: var(--gradient-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h2 { font-size: var(--text-4xl); font-weight: 700; color: var(--gray-900); } h3 { font-size: var(--text-3xl); font-weight: 600; } h4 { font-size: var(--text-2xl); font-weight: 600; } h5 { font-size: var(--text-xl); font-weight: 500; } h6 { font-size: var(--text-lg); font-weight: 500; } /* International Header Design */ .header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: var(--border-light); box-shadow: var(--shadow-sm); height: var(--header-height-mobile); transition: all var(--transition-normal); } .header-content { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 var(--space-lg); max-width: var(--container-max-width); margin: 0 auto; position: relative; } /* Corporate Logo Design */ .logo { display: flex; align-items: center; gap: var(--space-md); text-decoration: none; color: inherit; transition: all var(--transition-fast); touch-action: manipulation; } .logo:hover { transform: translateY(-1px); } .logo-icon { width: 48px; height: 48px; background: var(--gradient-primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.25rem; font-weight: 800; font-family: 'Manrope', sans-serif; box-shadow: var(--shadow-colored); position: relative; overflow: hidden; flex-shrink: 0; } .logo-icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; } .logo:hover .logo-icon::before { transform: translateX(100%); } .logo-main { font-size: var(--text-xl); font-weight: 800; font-family: 'Manrope', sans-serif; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; } /* International Navigation System */ .main-nav { display: none; align-items: center; gap: var(--space-xs); flex: 1; justify-content: center; max-width: 800px; margin: 0 var(--space-2xl); background: var(--white); border: var(--border-light); border-radius: var(--radius-2xl); padding: var(--space-sm); box-shadow: var(--shadow-md); } .nav-section { display: flex; align-items: center; gap: var(--space-xs); } .nav-divider { width: 1px; height: 36px; background: var(--gray-200); margin: 0 var(--space-md); } .nav-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); color: var(--gray-600); text-decoration: none; border-radius: var(--radius-lg); font-weight: 500; font-size: var(--text-xs); white-space: nowrap; min-width: 70px; position: relative; transition: all var(--transition-fast); touch-action: manipulation; } .nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-primary); border-radius: var(--radius-lg); opacity: 0; transform: scale(0.8); transition: all var(--transition-normal); } .nav-item:hover::before { opacity: 0.1; transform: scale(1); } .nav-item:hover { color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .nav-item.active { background: var(--gradient-primary); color: var(--white); box-shadow: var(--shadow-colored); transform: translateY(-1px); } .nav-item.active::before { display: none; } .nav-icon { width: 20px; height: 20px; flex-shrink: 0; font-size: 18px; transition: transform var(--transition-fast); } .nav-item:hover .nav-icon { transform: scale(1.1); } .nav-text { font-size: var(--text-xs); font-weight: 600; font-family: 'Manrope', sans-serif; text-align: center; line-height: 1.2; letter-spacing: 0.025em; } .nav-badge { position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--gradient-accent); color: var(--white); font-size: 0.625rem; font-weight: 800; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); min-width: 20px; text-align: center; line-height: 1; box-shadow: var(--shadow-md); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } /* Professional Action Buttons */ .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); flex-shrink: 0; height: 100%; } .action-buttons { display: flex; align-items: center; justify-content: center; gap: var(--space-md); height: 100%; } .action-btn, .profile-btn, .mobile-menu-toggle { width: 48px; height: 48px; border: var(--border-light); background: var(--white); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--gray-600); cursor: pointer; font-size: 1rem; font-weight: 600; transition: all var(--transition-fast); box-shadow: var(--shadow-xs); touch-action: manipulation; position: relative; overflow: hidden; flex-shrink: 0; } .action-btn::before, .profile-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-primary); opacity: 0; transition: opacity var(--transition-fast); } .action-btn:hover::before, .profile-btn:hover::before { opacity: 1; } .action-btn:hover, .profile-btn:hover { color: var(--white); border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-colored); } .profile-btn { background: var(--gradient-primary); color: var(--white); border-color: var(--primary); box-shadow: var(--shadow-colored); } .profile-btn:hover { background: var(--gradient-accent); border-color: var(--accent); transform: translateY(-2px) scale(1.05); } .action-btn:hover, .mobile-menu-toggle:hover { background: var(--gradient-primary); color: var(--white); border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-colored); } /* Enhanced Mobile Navigation */ .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: var(--border-light); padding: var(--space-lg); z-index: 999; box-shadow: var(--shadow-2xl); display: flex; justify-content: space-around; height: 80px; transform: translateY(100%); transition: transform var(--transition-slow); } .mobile-nav.show { transform: translateY(0); } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm); text-decoration: none; color: var(--gray-600); font-size: var(--text-xs); font-weight: 600; font-family: 'Manrope', sans-serif; border-radius: var(--radius-lg); transition: all var(--transition-fast); touch-action: manipulation; position: relative; } .mobile-nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-primary); border-radius: var(--radius-lg); opacity: 0; transform: scale(0.8); transition: all var(--transition-normal); } .mobile-nav-item.active::before { opacity: 1; transform: scale(1); } .mobile-nav-item.active { color: var(--white); box-shadow: var(--shadow-colored); } .mobile-nav-item i { font-size: 1.25rem; z-index: 1; } .mobile-nav-item span { z-index: 1; } /* International Main Content */ .main-content { min-height: calc(100vh - var(--header-height-mobile)); min-height: calc(100dvh - var(--header-height-mobile)); padding-bottom: 100px; /* Mobile nav space */ background: var(--bg-secondary); } .content-area { padding: var(--space-2xl) var(--space-lg); max-width: var(--container-max-width); margin: 0 auto; width: 100%; } /* Corporate Page Header */ .page-header { text-align: center; margin-bottom: var(--space-4xl); padding: var(--space-3xl) 0; background: var(--gradient-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); border: var(--border-light); } .page-title { font-size: var(--text-4xl); font-weight: 800; font-family: 'Manrope', sans-serif; background: var(--gradient-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-xl); line-height: 1.1; letter-spacing: -0.02em; } .page-subtitle { color: var(--gray-600); font-size: var(--text-lg); font-weight: 400; line-height: 1.6; max-width: 600px; margin: 0 auto; letter-spacing: -0.01em; } /* International Grid System */ .stats-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-bottom: var(--space-4xl); } .content-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } /* Premium Card System */ .content-card, .stat-card { background: var(--white); border-radius: var(--radius-2xl); border: var(--border-light); box-shadow: var(--shadow-md); overflow: hidden; transition: all var(--transition-normal); touch-action: manipulation; position: relative; } .content-card::before, .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); opacity: 0; transition: opacity var(--transition-normal); } .content-card:hover::before, .stat-card:hover::before { opacity: 1; } .content-card:hover, .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2xl); border-color: var(--primary); } .stat-card { padding: var(--space-2xl); position: relative; } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); } .stat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-xl); } .stat-icon { width: 64px; height: 64px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--white); flex-shrink: 0; position: relative; overflow: hidden; order: 2; box-shadow: var(--shadow-lg); } .stat-icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.8s ease; } .stat-card:hover .stat-icon::before { transform: translateX(100%); } .stat-icon.primary { background: var(--gradient-primary); } .stat-icon.success { background: var(--gradient-secondary); } .stat-icon.warning { background: linear-gradient(135deg, var(--quaternary) 0%, var(--quaternary-light) 100%); } .stat-icon.danger { background: var(--gradient-accent); } .stat-icon.info { background: linear-gradient(135deg, var(--tertiary) 0%, var(--tertiary-light) 100%); } .stat-content { text-align: left; flex: 1; order: 1; } .stat-label { font-size: var(--text-sm); color: var(--gray-500); font-weight: 600; font-family: 'Manrope', sans-serif; margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.1em; } .stat-value { font-size: var(--text-3xl); font-weight: 800; font-family: 'Manrope', sans-serif; color: var(--gray-900); line-height: 1; margin-bottom: var(--space-lg); letter-spacing: -0.02em; } .stat-change { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 600; font-family: 'Manrope', sans-serif; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-700); box-shadow: var(--shadow-xs); } .stat-change.positive { color: var(--secondary); background: rgba(0, 168, 107, 0.1); border: 1px solid rgba(0, 168, 107, 0.2); } .stat-change.negative { color: var(--danger); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); } /* International Card Components */ .card-header { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); border-bottom: var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); background: var(--gradient-surface); } .card-title { font-size: var(--text-xl); font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--gray-900); flex: 1; letter-spacing: -0.01em; } .card-action { color: var(--primary); text-decoration: none; font-size: var(--text-sm); font-weight: 600; font-family: 'Manrope', sans-serif; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); border: var(--border-light); background: var(--white); transition: all var(--transition-fast); touch-action: manipulation; flex-shrink: 0; position: relative; overflow: hidden; } .card-action::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-primary); opacity: 0; transition: opacity var(--transition-fast); } .card-action:hover::before { opacity: 1; } .card-action:hover { color: var(--white); border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-colored); } .card-content { padding: var(--space-2xl); } /* Enhanced Activity Items */ .activity-item { display: flex; gap: var(--space-xl); padding: var(--space-xl) 0; border-bottom: var(--border-light); transition: all var(--transition-fast); position: relative; } .activity-item::before { content: ''; position: absolute; left: -var(--space-xl); right: -var(--space-xl); top: 0; bottom: 0; background: var(--gradient-surface); border-radius: var(--radius-lg); opacity: 0; transition: opacity var(--transition-fast); } .activity-item:hover::before { opacity: 1; } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 52px; height: 52px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; color: var(--white); box-shadow: var(--shadow-md); position: relative; z-index: 1; } .activity-icon.primary { background: var(--gradient-primary); } .activity-icon.success { background: var(--gradient-secondary); } .activity-icon.warning { background: linear-gradient(135deg, var(--quaternary) 0%, var(--quaternary-light) 100%); } .activity-icon.danger { background: var(--gradient-accent); } .activity-content { flex: 1; min-width: 0; position: relative; z-index: 1; } .activity-title { font-weight: 600; font-family: 'Manrope', sans-serif; color: var(--gray-900); font-size: var(--text-base); margin-bottom: var(--space-sm); line-height: 1.4; word-wrap: break-word; } .activity-time { font-size: var(--text-sm); color: var(--gray-500); font-weight: 500; } /* Premium Member Items */ .member-item { display: flex; align-items: center; gap: var(--space-xl); padding: var(--space-xl) 0; border-bottom: var(--border-light); transition: all var(--transition-fast); position: relative; } .member-item::before { content: ''; position: absolute; left: -var(--space-xl); right: -var(--space-xl); top: 0; bottom: 0; background: var(--gradient-surface); border-radius: var(--radius-lg); opacity: 0; transition: opacity var(--transition-fast); } .member-item:hover::before { opacity: 1; } .member-item:last-child { border-bottom: none; } .member-avatar { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 800; font-size: var(--text-lg); font-family: 'Manrope', sans-serif; flex-shrink: 0; box-shadow: var(--shadow-colored); position: relative; z-index: 1; } .member-info { flex: 1; min-width: 0; position: relative; z-index: 1; } .member-name { font-weight: 600; font-family: 'Manrope', sans-serif; color: var(--gray-900); font-size: var(--text-base); margin-bottom: var(--space-xs); word-wrap: break-word; } .member-location { font-size: var(--text-sm); color: var(--gray-500); word-wrap: break-word; } /* International Status Badges */ .status-badge { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; font-family: 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; background: var(--gray-100); color: var(--gray-700); border: var(--border-light); flex-shrink: 0; white-space: nowrap; position: relative; z-index: 1; box-shadow: var(--shadow-xs); } .status-badge.active { background: rgba(0, 168, 107, 0.1); color: var(--secondary); border: 1px solid rgba(0, 168, 107, 0.3); box-shadow: 0 0 0 0px rgba(0, 168, 107, 0.1); } .status-badge.pending { background: var(--gradient-primary); color: var(--white); border-color: var(--primary); box-shadow: var(--shadow-colored); } .status-badge.inactive { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.3); } /* Enhanced Survey Items */ .survey-item { padding: var(--space-2xl); border: var(--border-light); border-radius: var(--radius-2xl); margin-bottom: var(--space-xl); background: var(--white); transition: all var(--transition-normal); touch-action: manipulation; position: relative; box-shadow: var(--shadow-sm); } .survey-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-surface); border-radius: var(--radius-2xl); opacity: 0; transition: opacity var(--transition-normal); } .survey-item:hover::before { opacity: 1; } .survey-item:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-2xl); } .survey-item:last-child { margin-bottom: 0; } .survey-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); position: relative; z-index: 1; } .survey-title { font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--gray-900); font-size: var(--text-lg); flex: 1; line-height: 1.3; word-wrap: break-word; } .survey-meta { display: flex; flex-direction: column; gap: var(--space-sm); font-size: var(--text-sm); position: relative; z-index: 1; } .survey-details { color: var(--gray-600); font-weight: 500; } .survey-progress { font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--primary); } /* Corporate Quick Actions */ .quick-actions { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .quick-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: var(--space-2xl); border-radius: var(--radius-2xl); text-decoration: none; font-weight: 600; font-size: var(--text-base); font-family: 'Manrope', sans-serif; border: var(--border-light); background: var(--white); color: var(--gray-900); transition: all var(--transition-normal); touch-action: manipulation; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); min-height: 120px; } .quick-action-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity var(--transition-normal); } .quick-action-btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-2xl); } .quick-action-btn i { font-size: 2rem; z-index: 1; } .quick-action-btn span { z-index: 1; } .quick-action-btn.primary { background: var(--gradient-primary); color: var(--white); border-color: var(--primary); box-shadow: var(--shadow-colored); } .quick-action-btn.success { background: rgba(0, 168, 107, 0.1); color: var(--secondary); border: 1px solid rgba(0, 168, 107, 0.3); } .quick-action-btn.success::before { background: var(--gradient-secondary); } .quick-action-btn.warning { background: rgba(245, 158, 11, 0.1); color: var(--quaternary); border: 1px solid rgba(245, 158, 11, 0.3); } .quick-action-btn.warning::before { background: linear-gradient(135deg, var(--quaternary) 0%, var(--quaternary-light) 100%); } .quick-action-btn.danger { background: rgba(255, 107, 53, 0.1); color: var(--accent); border: 1px solid rgba(255, 107, 53, 0.3); } .quick-action-btn.danger::before { background: var(--gradient-accent); } .quick-action-btn.success:hover::before, .quick-action-btn.warning:hover::before, .quick-action-btn.danger:hover::before { opacity: 1; } .quick-action-btn.success:hover, .quick-action-btn.warning:hover, .quick-action-btn.danger:hover { color: var(--white); border-color: transparent; } /* Premium System Status */ .system-status { display: flex; flex-direction: column; gap: var(--space-lg); } .status-item { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); background: var(--gradient-surface); border-radius: var(--radius-xl); border: var(--border-light); transition: all var(--transition-fast); box-shadow: var(--shadow-xs); } .status-item:hover { background: var(--white); box-shadow: var(--shadow-md); transform: translateY(-1px); } .status-indicator { width: 14px; height: 14px; border-radius: var(--radius-full); flex-shrink: 0; background: var(--gray-400); position: relative; } .status-indicator::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; } .status-indicator.active { background: rgba(0, 168, 107, 0.2); color: var(--secondary); box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.1); } .status-indicator.warning { background: rgba(245, 158, 11, 0.2); color: var(--quaternary); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } .status-indicator.danger { background: rgba(239, 68, 68, 0.2); color: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .status-info { flex: 1; min-width: 0; } .status-name { font-weight: 600; font-family: 'Manrope', sans-serif; color: var(--gray-900); font-size: var(--text-base); margin-bottom: var(--space-xs); } .status-value { font-size: var(--text-sm); color: var(--gray-500); word-wrap: break-word; } /* International Chart Placeholder */ .chart-placeholder { height: 280px; background: var(--gradient-surface); border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gray-300); text-align: center; padding: var(--space-2xl); position: relative; overflow: hidden; } .chart-placeholder::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-primary); opacity: 0.02; } .chart-content { color: var(--gray-500); z-index: 1; } .chart-icon { font-size: 4rem; margin-bottom: var(--space-xl); opacity: 0.6; color: var(--primary); background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .chart-title { font-size: var(--text-xl); margin-bottom: var(--space-md); font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--gray-900); } .chart-subtitle { font-size: var(--text-base); color: var(--gray-500); line-height: 1.6; } /* Corporate Footer */ .footer { background: var(--gray-900); color: var(--white); margin-top: var(--space-5xl); position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 50%, var(--primary-dark) 100%); } .footer-content { padding: var(--space-4xl) var(--space-lg) var(--space-3xl); display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); position: relative; z-index: 1; } .footer-section h4.footer-title { font-size: var(--text-xl); font-weight: 700; font-family: 'Manrope', sans-serif; margin-bottom: var(--space-xl); color: var(--white); } .footer-description { font-size: var(--text-base); color: var(--gray-300); line-height: 1.7; margin-top: var(--space-xl); } .footer-links { list-style: none; } .footer-links li { margin-bottom: var(--space-md); } .footer-links a { color: var(--gray-300); text-decoration: none; font-size: var(--text-base); transition: all var(--transition-fast); touch-action: manipulation; display: block; padding: var(--space-sm) 0; position: relative; } .footer-links a::before { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--gradient-secondary); transition: width var(--transition-normal); } .footer-links a:hover::before { width: 20px; } .footer-links a:hover { color: var(--secondary); transform: translateX(4px); } .social-links { display: flex; gap: var(--space-lg); margin: var(--space-xl) 0; flex-wrap: wrap; } .social-link { width: 52px; height: 52px; background: var(--gray-800); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--gray-300); text-decoration: none; border: var(--border-light); transition: all var(--transition-normal); touch-action: manipulation; position: relative; overflow: hidden; } .social-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-secondary); opacity: 0; transition: opacity var(--transition-fast); } .social-link:hover::before { opacity: 1; } .social-link:hover { color: var(--white); transform: translateY(-4px) scale(1.1); box-shadow: var(--shadow-2xl); } .social-link i { z-index: 1; font-size: 1.25rem; } .contact-info p { font-size: var(--text-base); color: var(--gray-300); margin-bottom: var(--space-lg); display: flex; align-items: flex-start; gap: var(--space-lg); line-height: 1.6; } .footer-bottom { background: var(--black); border-top: 1px solid var(--gray-700); position: relative; z-index: 1; } .footer-bottom-content { padding: var(--space-2xl) var(--space-lg); text-align: center; } .copyright p { font-size: var(--text-sm); color: var(--gray-400); margin-bottom: var(--space-md); line-height: 1.5; } .legal-text { font-size: var(--text-xs); color: var(--gray-500); line-height: 1.5; } .footer-meta { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); font-size: var(--text-xs); color: var(--gray-500); } .version-info { display: flex; gap: var(--space-lg); } .server-status { display: flex; align-items: center; gap: var(--space-sm); } /* International Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both; } .slide-in-right { animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; } .scale-in { animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } @media (max-width: 767px) { .header-content { padding: 0 var(--space-lg); gap: var(--space-md); } .header-actions { gap: var(--space-sm); } .action-buttons { gap: var(--space-sm); } .action-btn, .profile-btn, .mobile-menu-toggle { width: 44px; height: 44px; font-size: 0.9375rem; } } /* Tablet Responsive Design */ @media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .quick-actions { grid-template-columns: repeat(2, 1fr); } .survey-meta { flex-direction: row; align-items: center; justify-content: space-between; } .footer-content { grid-template-columns: repeat(2, 1fr); } .footer-meta { flex-direction: row; justify-content: space-between; } } @media (min-width: 768px) { .header { height: var(--header-height-tablet); } .header-content { padding: 0 var(--space-2xl); gap: var(--space-xl); } .content-area { padding: var(--space-3xl) var(--space-2xl); } .main-content { min-height: calc(100vh - var(--header-height-tablet)); min-height: calc(100dvh - var(--header-height-tablet)); padding-bottom: 0; } .mobile-nav { display: none; } .mobile-menu-toggle { display: none; } .main-nav { display: flex; } .action-buttons { gap: var(--space-lg); } .action-btn, .profile-btn, .mobile-menu-toggle { width: 50px; height: 50px; font-size: 1.0625rem; } .content-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .footer-content { grid-template-columns: repeat(3, 1fr); padding: var(--space-5xl) var(--space-2xl) var(--space-4xl); } } /* Desktop Responsive Design */ @media (min-width: 1024px) { .header { height: var(--header-height-desktop); } .header-content { padding: 0 var(--space-3xl); gap: var(--space-2xl); } .content-area { padding: var(--space-4xl) var(--space-3xl); } .main-content { min-height: calc(100vh - var(--header-height-desktop)); min-height: calc(100dvh - var(--header-height-desktop)); } .stats-grid { grid-template-columns: repeat(4, 1fr); } .content-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .quick-actions { grid-template-columns: repeat(2, 1fr); } .footer-content { grid-template-columns: repeat(5, 1fr); padding: var(--space-5xl) var(--space-3xl) var(--space-4xl); } .footer-bottom-content { padding: var(--space-2xl) var(--space-3xl); display: flex; align-items: center; justify-content: space-between; text-align: left; } .logo-icon { width: 56px; height: 56px; font-size: 1.5rem; } .logo-main { font-size: var(--text-2xl); } .action-btn, .profile-btn, .mobile-menu-toggle { width: 52px; height: 52px; font-size: 1.125rem; } .action-buttons { gap: var(--space-xl); } } @media (min-width: 1280px) { .header-content { padding: 0 var(--space-4xl); } .content-area { padding: var(--space-5xl) var(--space-4xl); } .footer-content { padding: var(--space-5xl) var(--space-4xl) var(--space-4xl); } .footer-bottom-content { padding: var(--space-2xl) var(--space-4xl); } } /* High DPI and Retina Support */ @media (min-resolution: 2dppx) { .logo-icon, .stat-icon, .activity-icon { background-size: contain; } } /* Accessibility and Motion Preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .fade-in-up, .slide-in-right, .scale-in { animation: none !important; } } /* High Contrast Mode Support */ @media (prefers-contrast: high) { :root { --gray-100: #f0f0f0; --gray-200: #d0d0d0; --gray-300: #b0b0b0; --border-light: 2px solid var(--gray-400); --border-medium: 3px solid var(--gray-600); } .content-card, .stat-card, .survey-item { border-width: 2px; } } /* Print Styles */ @media print { .header, .footer, .mobile-nav, .action-buttons, .mobile-menu-toggle { display: none; } .main-content { margin: 0; padding: 0; min-height: auto; } .content-area { padding: 1rem; } .content-card, .stat-card { break-inside: avoid; border: 1px solid var(--gray-400); box-shadow: none; page-break-inside: avoid; } * { background: transparent !important; color: black !important; box-shadow: none !important; } .gradient-text { color: black !important; background: none !important; -webkit-text-fill-color: black !important; } } /* Utility Classes */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .touch-target { min-height: 44px; min-width: 44px; touch-action: manipulation; } .no-tap-highlight { -webkit-tap-highlight-color: transparent; } .gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .safe-area-inset { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); } /* International Focus States */ .focus-ring:focus-visible, *:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Enhanced Loading States */ .loading { pointer-events: none; opacity: 0.7; position: relative; } .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 3px solid var(--gray-200); border-top-color: var(--primary); border-radius: var(--radius-full); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* International Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--gray-100); border-radius: var(--radius); } ::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: var(--radius); transition: background var(--transition-fast); } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Selection Colors */ ::selection { background: rgba(0, 82, 204, 0.2); color: var(--primary-dark); } ::-moz-selection { background: rgba(0, 82, 204, 0.2); color: var(--primary-dark); } -------------------- END OF FILE -------------------- ### FILE 6: assets/js/app.js - Type: JS - Size: 34.49 KB - Path: assets/js - Name: app.js ------------------------------------------------------------ // Enhanced Mobile-First Application Initialization document.addEventListener('DOMContentLoaded', function() { initializeMobileApp(); }); // Check if running on mobile device const isMobileDevice = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || (window.innerWidth <= 768 && 'ontouchstart' in window); }; // Check if device supports touch const isTouchDevice = () => { return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; }; function initializeMobileApp() { console.log('🚀 Initializing Mobile-First RelevantReflex System...'); console.log(`📱 Device: ${isMobileDevice() ? 'Mobile' : 'Desktop'}`); console.log(`👆 Touch: ${isTouchDevice() ? 'Supported' : 'Not Supported'}`); initializeMobileDetection(); initializeTouchInteractions(); initializeMobileNavigation(); initializeSwipeGestures(); initializeMobileAnimations(); initializePerformanceOptimizations(); initializeMobileAccessibility(); initializeOrientationHandling(); initializePWAFeatures(); initializeOfflineSupport(); console.log('✅ Mobile application initialization complete'); } // Mobile Device Detection and Setup function initializeMobileDetection() { // Add device classes to body const body = document.body; if (isMobileDevice()) { body.classList.add('is-mobile'); } if (isTouchDevice()) { body.classList.add('is-touch'); // Remove hover styles on touch devices const style = document.createElement('style'); style.textContent = ` @media (hover: none) and (pointer: coarse) { .nav-item:hover, .action-btn:hover, .card:hover { transform: none !important; background: inherit !important; box-shadow: inherit !important; } } `; document.head.appendChild(style); } // Detect safe area support if (CSS.supports('padding: env(safe-area-inset-top)')) { body.classList.add('has-safe-area'); } // Set viewport height CSS custom property for mobile browsers const setVH = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }; setVH(); window.addEventListener('resize', setVH); window.addEventListener('orientationchange', () => { setTimeout(setVH, 100); // Delay for orientation change }); } // Enhanced Touch Interactions function initializeTouchInteractions() { console.log('👆 Initializing touch interactions...'); // Prevent 300ms click delay on mobile let touchStartTime = 0; let touchStartTarget = null; document.addEventListener('touchstart', function(e) { touchStartTime = Date.now(); touchStartTarget = e.target; }, { passive: true }); document.addEventListener('touchend', function(e) { const touchEndTime = Date.now(); const touchDuration = touchEndTime - touchStartTime; // Fast tap detection (under 200ms) if (touchDuration < 200 && e.target === touchStartTarget) { e.target.classList.add('fast-tap'); setTimeout(() => { e.target.classList.remove('fast-tap'); }, 150); } }, { passive: true }); // Enhanced touch feedback for interactive elements const interactiveElements = document.querySelectorAll( '.nav-item, .mobile-nav-item, .action-btn, .profile-btn, ' + '.card-action, .quick-action-btn, .survey-item, .activity-item, ' + '.member-item, .status-item' ); interactiveElements.forEach(element => { // Touch start feedback element.addEventListener('touchstart', function(e) { this.classList.add('touch-active'); // Create touch ripple effect if (!this.querySelector('.touch-ripple')) { createTouchRipple(this, e.touches[0]); } }, { passive: true }); // Touch end cleanup element.addEventListener('touchend', function() { setTimeout(() => { this.classList.remove('touch-active'); }, 150); }, { passive: true }); // Touch cancel cleanup element.addEventListener('touchcancel', function() { this.classList.remove('touch-active'); }, { passive: true }); }); // Add CSS for touch states const touchStyles = document.createElement('style'); touchStyles.textContent = ` .touch-active { transform: scale(0.98) !important; opacity: 0.8 !important; transition: all 0.1s ease !important; } .fast-tap { animation: fastTapFeedback 0.15s ease-out; } @keyframes fastTapFeedback { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } .touch-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: scale(0); animation: touchRipple 0.6s ease-out; pointer-events: none; z-index: 1; } @keyframes touchRipple { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(touchStyles); } // Create touch ripple effect function createTouchRipple(element, touch) { const ripple = document.createElement('div'); const rect = element.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = touch.clientX - rect.left - size / 2; const y = touch.clientY - rect.top - size / 2; ripple.className = 'touch-ripple'; ripple.style.cssText = ` width: ${size}px; height: ${size}px; left: ${x}px; top: ${y}px; `; element.style.position = 'relative'; element.style.overflow = 'hidden'; element.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); } // Enhanced Mobile Navigation function initializeMobileNavigation() { console.log('📱 Initializing mobile navigation...'); const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); const mobileNav = document.querySelector('.mobile-nav'); const body = document.body; let isMenuOpen = false; if (mobileMenuToggle && mobileNav) { // Prevent body scroll when menu is open const toggleBodyScroll = (disable) => { if (disable) { body.style.position = 'fixed'; body.style.top = `-${window.scrollY}px`; body.style.width = '100%'; } else { const scrollY = body.style.top; body.style.position = ''; body.style.top = ''; body.style.width = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1); } }; // Enhanced menu toggle with proper animations const toggleMenu = () => { isMenuOpen = !isMenuOpen; // Update toggle button const icon = mobileMenuToggle.querySelector('i'); icon.style.transform = isMenuOpen ? 'rotate(90deg)' : 'rotate(0deg)'; mobileMenuToggle.setAttribute('aria-expanded', isMenuOpen); // Update menu visibility if (isMenuOpen) { mobileNav.classList.add('show'); mobileNav.setAttribute('aria-hidden', 'false'); toggleBodyScroll(true); // Focus first nav item for accessibility setTimeout(() => { const firstNavItem = mobileNav.querySelector('.mobile-nav-item'); if (firstNavItem) firstNavItem.focus(); }, 100); // Stagger animation for nav items const navItems = mobileNav.querySelectorAll('.mobile-nav-item'); navItems.forEach((item, index) => { item.style.opacity = '0'; item.style.transform = 'translateY(20px)'; setTimeout(() => { item.style.transition = 'all 0.3s ease'; item.style.opacity = '1'; item.style.transform = 'translateY(0)'; }, index * 50); }); } else { mobileNav.classList.remove('show'); mobileNav.setAttribute('aria-hidden', 'true'); toggleBodyScroll(false); // Return focus to toggle button mobileMenuToggle.focus(); } }; // Touch-optimized menu toggle let touchStartY = 0; let isSwiping = false; mobileMenuToggle.addEventListener('touchstart', (e) => { touchStartY = e.touches[0].clientY; isSwiping = false; }, { passive: true }); mobileMenuToggle.addEventListener('touchmove', (e) => { const touchY = e.touches[0].clientY; const deltaY = Math.abs(touchY - touchStartY); if (deltaY > 10) isSwiping = true; }, { passive: true }); mobileMenuToggle.addEventListener('touchend', (e) => { if (!isSwiping) { e.preventDefault(); toggleMenu(); } }); mobileMenuToggle.addEventListener('click', (e) => { e.preventDefault(); toggleMenu(); }); // Close menu when clicking outside (for larger screens) document.addEventListener('click', (e) => { if (isMenuOpen && !mobileNav.contains(e.target) && !mobileMenuToggle.contains(e.target)) { toggleMenu(); } }); // Keyboard navigation mobileNav.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isMenuOpen) { toggleMenu(); } }); // Enhanced mobile nav item interactions const mobileNavItems = document.querySelectorAll('.mobile-nav-item'); mobileNavItems.forEach(item => { item.addEventListener('click', function(e) { if (!this.classList.contains('active')) { e.preventDefault(); // Visual feedback this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 150); // Remove active from all items mobileNavItems.forEach(i => i.classList.remove('active')); // Add active to clicked item this.classList.add('active'); // Close menu after navigation setTimeout(() => { if (isMenuOpen) toggleMenu(); simulatePageNavigation(this.getAttribute('href')); }, 300); } }); }); } } // Swipe Gesture Support function initializeSwipeGestures() { console.log('👋 Initializing swipe gestures...'); let touchStartX = 0; let touchStartY = 0; let touchEndX = 0; let touchEndY = 0; // Swipe detection on cards const swipeableElements = document.querySelectorAll( '.survey-item, .activity-item, .member-item' ); swipeableElements.forEach(element => { element.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; }, { passive: true }); element.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].clientX; touchEndY = e.changedTouches[0].clientY; handleSwipe(element); }, { passive: true }); }); function handleSwipe(element) { const deltaX = touchEndX - touchStartX; const deltaY = touchEndY - touchStartY; const minSwipeDistance = 50; // Horizontal swipe detection if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) { if (deltaX > 0) { handleSwipeRight(element); } else { handleSwipeLeft(element); } } } function handleSwipeRight(element) { // Swipe right action (e.g., mark as read, like) element.style.transform = 'translateX(20px)'; element.style.background = 'rgba(5, 150, 105, 0.1)'; setTimeout(() => { element.style.transform = 'translateX(0)'; element.style.background = ''; }, 300); console.log('👉 Swipe right on:', element); } function handleSwipeLeft(element) { // Swipe left action (e.g., archive, delete) element.style.transform = 'translateX(-20px)'; element.style.background = 'rgba(220, 38, 38, 0.1)'; setTimeout(() => { element.style.transform = 'translateX(0)'; element.style.background = ''; }, 300); console.log('👈 Swipe left on:', element); } } // Mobile-Optimized Animations function initializeMobileAnimations() { console.log('🎬 Initializing mobile animations...'); // Respect user's motion preferences const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (prefersReducedMotion) { console.log('⚡ Reduced motion preferred - using minimal animations'); document.body.classList.add('reduced-motion'); return; } // Intersection Observer for mobile-optimized scroll animations const observerOptions = { threshold: [0.1, 0.25], rootMargin: '0px 0px -50px 0px' }; const animationObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const element = entry.target; element.style.opacity = '1'; element.style.transform = 'translateY(0)'; element.classList.add('animate-in'); // Reduced animation duration for mobile if (isMobileDevice()) { element.style.animationDuration = '0.4s'; } } }); }, observerOptions); // Observe elements with animation classes document.querySelectorAll('.fade-in-up, .slide-in-right').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)'; animationObserver.observe(el); }); // Staggered animations with mobile optimization document.querySelectorAll('[class*="stagger-"]').forEach((el, index) => { const delay = isMobileDevice() ? (index * 0.05) : (index * 0.1); el.style.animationDelay = `${delay}s`; }); } // Performance Optimizations for Mobile function initializePerformanceOptimizations() { console.log('⚡ Initializing performance optimizations...'); // Lazy loading for images const lazyImages = document.querySelectorAll('img[data-src]'); if ('IntersectionObserver' in window) { const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); imageObserver.unobserve(img); } }); }); lazyImages.forEach(img => { img.classList.add('lazy'); imageObserver.observe(img); }); } // Debounced scroll handler let scrollTimer = null; const scrollHandler = () => { document.body.classList.add('is-scrolling'); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(() => { document.body.classList.remove('is-scrolling'); }, 150); }; window.addEventListener('scroll', scrollHandler, { passive: true }); // Resource hints for critical resources const preloadCriticalResources = () => { const criticalCSS = document.createElement('link'); criticalCSS.rel = 'preload'; criticalCSS.as = 'style'; criticalCSS.href = 'assets/css/critical.css'; document.head.appendChild(criticalCSS); }; // Preload on user interaction let userInteracted = false; const preloadOnInteraction = () => { if (!userInteracted) { userInteracted = true; preloadCriticalResources(); } }; document.addEventListener('touchstart', preloadOnInteraction, { once: true, passive: true }); document.addEventListener('click', preloadOnInteraction, { once: true }); // Memory usage monitoring if (performance.memory) { const checkMemoryUsage = () => { const memoryInfo = performance.memory; const usedMB = memoryInfo.usedJSHeapSize / 1048576; const totalMB = memoryInfo.totalJSHeapSize / 1048576; console.log(`📊 Memory usage: ${usedMB.toFixed(1)}MB / ${totalMB.toFixed(1)}MB`); // Warn if memory usage is high if (usedMB > 50) { console.warn('⚠️ High memory usage detected'); } }; setInterval(checkMemoryUsage, 30000); // Check every 30 seconds } } // Mobile Accessibility Enhancements function initializeMobileAccessibility() { console.log('♿ Initializing mobile accessibility...'); // Enhanced focus management for mobile let focusedBeforeModal = null; // Skip links for mobile navigation const createSkipLinks = () => { const skipNav = document.createElement('a'); skipNav.href = '#main-content'; skipNav.textContent = 'Skip to main content'; skipNav.className = 'skip-link'; skipNav.style.cssText = ` position: absolute; top: -40px; left: 10px; background: var(--primary); color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px; z-index: 100000; font-size: 14px; transition: top 0.3s ease; `; skipNav.addEventListener('focus', () => { skipNav.style.top = '10px'; }); skipNav.addEventListener('blur', () => { skipNav.style.top = '-40px'; }); document.body.insertBefore(skipNav, document.body.firstChild); }; createSkipLinks(); // Touch target size enforcement const enforceMinTouchTargets = () => { const interactiveElements = document.querySelectorAll( 'button, a, input, select, textarea, [role="button"], [tabindex="0"]' ); interactiveElements.forEach(element => { const rect = element.getBoundingClientRect(); const minSize = 44; // WCAG minimum if (rect.width < minSize || rect.height < minSize) { element.style.minWidth = `${minSize}px`; element.style.minHeight = `${minSize}px`; element.style.display = 'inline-flex'; element.style.alignItems = 'center'; element.style.justifyContent = 'center'; } }); }; // Run after DOM is fully loaded setTimeout(enforceMinTouchTargets, 1000); // Announce page changes for screen readers const announcePageChange = (message) => { const announcement = document.createElement('div'); announcement.setAttribute('aria-live', 'polite'); announcement.setAttribute('aria-atomic', 'true'); announcement.style.cssText = ` position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; `; announcement.textContent = message; document.body.appendChild(announcement); setTimeout(() => { document.body.removeChild(announcement); }, 1000); }; // Export for use in navigation window.announcePageChange = announcePageChange; } // Orientation Change Handling function initializeOrientationHandling() { console.log('🔄 Initializing orientation handling...'); let currentOrientation = screen.orientation?.angle || window.orientation; const handleOrientationChange = () => { const newOrientation = screen.orientation?.angle || window.orientation; if (newOrientation !== currentOrientation) { currentOrientation = newOrientation; // Add orientation class to body document.body.classList.remove('portrait', 'landscape'); if (Math.abs(newOrientation) === 90) { document.body.classList.add('landscape'); console.log('📱 Switched to landscape mode'); } else { document.body.classList.add('portrait'); console.log('📱 Switched to portrait mode'); } // Trigger resize event for components that need to reflow setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 100); // Re-calculate viewport height const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } }; // Listen for orientation changes if (screen.orientation) { screen.orientation.addEventListener('change', handleOrientationChange); } else { window.addEventListener('orientationchange', handleOrientationChange); } // Initial orientation setup handleOrientationChange(); } // Progressive Web App Features function initializePWAFeatures() { console.log('📱 Initializing PWA features...'); // Add to homescreen prompt let deferredPrompt = null; window.addEventListener('beforeinstallprompt', (e) => { console.log('💾 PWA install prompt available'); e.preventDefault(); deferredPrompt = e; // Show custom install button showInstallPrompt(); }); const showInstallPrompt = () => { const installBanner = document.createElement('div'); installBanner.className = 'install-banner'; installBanner.innerHTML = `
📱
Install RelevantReflex
Access your panel management system offline
`; installBanner.style.cssText = ` position: fixed; bottom: 20px; left: 20px; right: 20px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--shadow-xl); z-index: 1000; animation: slideInUp 0.3s ease-out; `; // Add styles for install banner content const style = document.createElement('style'); style.textContent = ` .install-content { display: flex; align-items: center; gap: 12px; padding: 16px; } .install-icon { font-size: 24px; flex-shrink: 0; } .install-text { flex: 1; min-width: 0; } .install-title { font-weight: 600; font-size: 14px; color: var(--gray-900); margin-bottom: 2px; } .install-subtitle { font-size: 12px; color: var(--gray-600); } .install-btn { background: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .install-close { background: none; border: none; font-size: 20px; color: var(--gray-500); cursor: pointer; margin-left: 8px; } @keyframes slideInUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } `; document.head.appendChild(style); document.body.appendChild(installBanner); // Handle install button click installBanner.querySelector('.install-btn').addEventListener('click', async () => { if (deferredPrompt) { deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; console.log(`👤 PWA install prompt outcome: ${outcome}`); deferredPrompt = null; installBanner.remove(); } }); // Handle close button installBanner.querySelector('.install-close').addEventListener('click', () => { installBanner.remove(); }); // Auto-hide after 10 seconds setTimeout(() => { if (document.body.contains(installBanner)) { installBanner.remove(); } }, 10000); }; // Handle successful installation window.addEventListener('appinstalled', () => { console.log('✅ PWA successfully installed'); deferredPrompt = null; // Show success message showNotification('App installed successfully! 🎉', 'success'); }); } // Offline Support function initializeOfflineSupport() { console.log('📡 Initializing offline support...'); // Check online/offline status const updateOnlineStatus = () => { const isOnline = navigator.onLine; document.body.classList.toggle('is-offline', !isOnline); if (isOnline) { console.log('🌐 Back online'); showNotification('Back online! 🌐', 'success'); } else { console.log('📴 Gone offline'); showNotification('You are offline. Some features may be limited. 📴', 'warning'); } }; window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); // Initial status updateOnlineStatus(); // Cache critical resources if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('✅ Service Worker registered:', registration.scope); }) .catch(error => { console.log('❌ Service Worker registration failed:', error); }); } } // Enhanced Page Navigation function simulatePageNavigation(href) { console.log(`🔄 Navigating to: ${href}`); // Show loading state showMobileLoadingState(); // Simulate navigation delay setTimeout(() => { hideMobileLoadingState(); if (window.announcePageChange) { window.announcePageChange(`Navigated to ${href}`); } }, 800); } function showMobileLoadingState() { const loader = document.createElement('div'); loader.id = 'mobile-loader'; loader.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(5px); `; loader.innerHTML = `
Loading...
`; document.body.appendChild(loader); } function hideMobileLoadingState() { const loader = document.getElementById('mobile-loader'); if (loader) { loader.style.opacity = '0'; setTimeout(() => loader.remove(), 300); } } // Enhanced notification system for mobile function showNotification(message, type = 'info', duration = 4000) { const notification = document.createElement('div'); notification.className = `mobile-notification ${type}`; const getNotificationStyles = (type) => { const baseStyles = ` position: fixed; top: 20px; left: 20px; right: 20px; padding: 16px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; z-index: 10000; animation: slideInDown 0.3s ease-out; backdrop-filter: blur(10px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 12px; `; switch (type) { case 'success': return baseStyles + ` background: rgba(5, 150, 105, 0.95); color: white; border: 1px solid rgba(5, 150, 105, 0.3); `; case 'warning': return baseStyles + ` background: rgba(245, 158, 11, 0.95); color: white; border: 1px solid rgba(245, 158, 11, 0.3); `; case 'error': return baseStyles + ` background: rgba(220, 38, 38, 0.95); color: white; border: 1px solid rgba(220, 38, 38, 0.3); `; default: return baseStyles + ` background: rgba(30, 41, 59, 0.95); color: white; border: 1px solid rgba(30, 41, 59, 0.3); `; } }; const getIcon = (type) => { switch (type) { case 'success': return '✅'; case 'warning': return '⚠️'; case 'error': return '❌'; default: return 'ℹ️'; } }; notification.style.cssText = getNotificationStyles(type); notification.innerHTML = ` ${getIcon(type)} ${message} `; // Add slide in animation const style = document.createElement('style'); style.textContent = ` @keyframes slideInDown { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideOutUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100px); opacity: 0; } } `; document.head.appendChild(style); document.body.appendChild(notification); // Auto-remove notification setTimeout(() => { notification.style.animation = 'slideOutUp 0.3s ease-out'; setTimeout(() => { if (notification.parentNode) { notification.remove(); } }, 300); }, duration); // Touch to dismiss notification.addEventListener('touchstart', () => { notification.style.animation = 'slideOutUp 0.3s ease-out'; setTimeout(() => { if (notification.parentNode) { notification.remove(); } }, 300); }); } // Performance monitoring specific to mobile function monitorMobilePerformance() { if ('performance' in window) { window.addEventListener('load', () => { const navigation = performance.getEntriesByType('navigation')[0]; const loadTime = navigation.loadEventEnd - navigation.loadEventStart; console.log(`📊 Mobile load time: ${loadTime}ms`); // Show warning if load time is poor for mobile if (loadTime > 3000) { console.warn('🐌 Slow loading detected on mobile'); } // Monitor First Contentful Paint const fcpEntry = performance.getEntriesByName('first-contentful-paint')[0]; if (fcpEntry) { console.log(`🎨 First Contentful Paint: ${fcpEntry.startTime}ms`); } // Monitor Largest Contentful Paint if ('PerformanceObserver' in window) { const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; console.log(`📏 Largest Contentful Paint: ${lastEntry.startTime}ms`); }); lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] }); } }); } } // Initialize mobile performance monitoring monitorMobilePerformance(); // Export mobile utilities window.MobileRelevantReflex = { isMobileDevice, isTouchDevice, showNotification, simulatePageNavigation, createTouchRipple, showMobileLoadingState, hideMobileLoadingState }; console.log('🎉 Mobile-optimized RelevantReflex system loaded successfully!'); -------------------- END OF FILE -------------------- ### FILE 7: content/dashboard.php - Type: PHP - Size: 17.37 KB - Path: content - Name: dashboard.php ------------------------------------------------------------

Dashboard Overview

Welcome back! Monitor your survey panel performance and manage operations from this comprehensive dashboard.

Total Panel Members
24,567
+15.3% from last month
Active Surveys
42
+5 new this week
Monthly Revenue
₹4,85,400
+22.1% vs last month
Support Tickets
8
3 require attention

Recent Activities

View All
New panel member registered from Mumbai
3 minutes ago
Survey "Consumer Tech Trends 2025" published successfully
18 minutes ago
Payment of ₹67,800 processed and distributed to panelists
1 hour ago
New support ticket: Account verification issues
2 hours ago
Weekly analytics report generated for client portal
4 hours ago

Recent Panel Members

Manage Panel
AS
Amit Sharma
Mumbai, Maharashtra • Joined today
Active
PK
Priya Kapoor
Delhi, NCR • Joined yesterday
Active
RN
Rahul Nair
Bangalore, Karnataka • 2 days ago
Active
SP
Sneha Patel
Pune, Maharashtra • 3 days ago
Verification
MG
Manoj Gupta
Hyderabad, Telangana • 1 week ago
Active

Active Surveys

View All Surveys
Consumer Electronics Trends 2025
Live
15 min • ₹95/complete • Tech Category
287/500 completed (57%)
Digital Shopping Behavior Study
Live
12 min • ₹75/complete • E-commerce
412/600 completed (69%)
Fintech Adoption in India
Starting Soon
20 min • ₹120/complete • Finance
Launch scheduled for tomorrow
Food Delivery App Experience
Completed
10 min • ₹60/complete • F&B
350/350 completed (100%)

Performance Insights

Detailed Analytics
Interactive Analytics Dashboard
Real-time charts and performance metrics coming soon
94.2%
Completion Rate
8.4
Avg. Survey Time
4.7/5
Quality Score

Quick Actions

Add New User Create Survey Generate Report Support Center
₹2.4M
Total Payouts
156
Active Clients

System Health

View Details
API Services
All systems operational
Database Performance
Excellent response time: 12ms
Email Service
Slight delay in queue processing
Payment Gateway
CashFree integration active
CDN & Assets
Global delivery optimized
Last updated: 2 minutes ago • Uptime: 99.9%
-------------------- END OF FILE -------------------- ### FILE 8: includes/footer.php - Type: PHP - Size: 19.62 KB - Path: includes - Name: footer.php ------------------------------------------------------------ -------------------- END OF FILE -------------------- ### FILE 9: includes/header.php - Type: PHP - Size: 25.53 KB - Path: includes - Name: header.php ------------------------------------------------------------ 'relevantreflex.shop', 'site_description' => 'Panel Management System' ]; } ?> <?php echo $config['site_name']; ?> - Panel Management Skip to main content
-------------------- END OF FILE -------------------- ================================================================================ ## SUMMARY ================================================================================ Repository contains 9 files total. All file contents have been extracted and are shown above. This repository snapshot was generated on: 2025-10-26 19:05:12 ================================================================================ ## END OF REPOSITORY ================================================================================