# RELEVANT REFLEX SHOP_25 AUG 2025 - REPOSITORY ================================================================================ Project Name: Relevant Reflex Shop_25 Aug 2025 Created: 2025-08-25 04:06:12 Last Updated: 2025-08-25 04:06:20 Source ZIP: public_html(2).zip Total Files: 6 Total Folders: 5 ================================================================================ ## FILE STRUCTURE ================================================================================ Relevant Reflex Shop_25 Aug 2025/ ├── assets/ │ ├── css/ │ │ └── style.css │ └── js/ │ └── app.js ├── content/ │ └── dashboard.php ├── includes/ │ ├── footer.php │ └── header.php └── index.php ================================================================================ ## 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: assets/css/style.css - Type: CSS - Size: 22.71 KB - Path: assets/css - Name: style.css ------------------------------------------------------------ :root { /* Professional Color Palette - White, Deep Blue, Black, Grey with Green/Red for status only */ --primary: #000000; --primary-light: #333333; --secondary: #666666; --accent: #2563EB; --accent-dark: #1D4ED8; --accent-light: #3B82F6; /* Status Colors (only for positive/negative indicators) */ --success: #10B981; --danger: #EF4444; /* Neutral Colors */ --white: #FFFFFF; --black: #000000; --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E5E5E5; --gray-300: #D4D4D4; --gray-400: #A3A3A3; --gray-500: #737373; --gray-600: #525252; --gray-700: #404040; --gray-800: #262626; --gray-900: #171717; /* Shadows */ --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); /* Border Radius */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Spacing */ --header-height: 70px; --footer-height: 200px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--white); color: var(--black); line-height: 1.6; font-weight: 400; overflow-x: hidden; min-height: 100vh; } /* Header Styles */ .header { background: var(--white); border-bottom: 2px solid var(--accent); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; height: var(--header-height); } .header-content { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 100%; max-width: 1400px; margin: 0 auto; } /* Logo Styles */ .header-logo { flex-shrink: 0; } .logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; } .logo-icon { width: 40px; height: 40px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1rem; font-weight: 800; border: 2px solid var(--accent); } .logo-text { display: flex; align-items: baseline; gap: 0.25rem; } .logo-main { font-size: 1.25rem; font-weight: 800; color: var(--black); } /* Footer specific logo styling */ .footer-logo .logo-main { color: var(--white) !important; } .footer-logo-text { color: var(--white) !important; } .footer-logo .logo-icon { background: var(--accent) !important; color: var(--white) !important; border-color: var(--accent) !important; border-radius: 50% !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1rem !important; font-weight: 800 !important; border: 2px solid var(--accent) !important; } /* Navigation Styles */ .main-nav { display: flex; align-items: center; gap: 0.25rem; flex: 1; justify-content: center; max-width: 600px; margin: 0 2rem; } .nav-section { display: flex; align-items: center; gap: 0.5rem; } .nav-divider { width: 1px; height: 24px; background: var(--gray-300); margin: 0 0.25rem; } /* Navigation - No Transitions */ .nav-item, .nav-item *, .mobile-nav-item, .mobile-nav-item * { transition: none !important; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; color: var(--gray-600); text-decoration: none; border-radius: var(--radius); font-weight: 500; font-size: 0.75rem; position: relative; white-space: nowrap; min-width: 50px; } .nav-item:hover { background: var(--gray-100); color: var(--black); } .nav-item.active { background: var(--accent); color: var(--white); } .nav-icon { width: 18px; height: 18px; flex-shrink: 0; font-size: 16px; } .nav-text { font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1; } .nav-badge { position: absolute; top: 0.25rem; right: 0.25rem; background: var(--danger); color: var(--white); font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 10px; min-width: 16px; text-align: center; line-height: 1; } /* Header Actions */ .header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .action-buttons { display: flex; align-items: center; gap: 0.5rem; } .action-btn { width: 40px; height: 40px; border: 2px solid var(--gray-300); background: var(--white); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--gray-600); cursor: pointer; position: relative; font-size: 0.875rem; } .action-btn:hover { background: var(--accent); color: var(--white); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } .profile-btn { background: var(--black); color: var(--white); font-weight: 700; border-color: var(--black); } .profile-btn:hover { background: var(--accent); color: var(--white); border-color: var(--accent); } .mobile-menu-toggle { display: none; width: 40px; height: 40px; border: 2px solid var(--gray-300); background: var(--white); border-radius: var(--radius); color: var(--gray-600); cursor: pointer; font-size: 1rem; } /* Mobile Navigation */ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 2px solid var(--accent); padding: 0.75rem; z-index: 50; box-shadow: var(--shadow-xl); } .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem; text-decoration: none; color: var(--gray-600); font-size: 0.75rem; font-weight: 600; border-radius: var(--radius); } .mobile-nav-item.active { color: var(--white); background: var(--accent); } .mobile-nav-item i { font-size: 1.125rem; } /* Main Content */ .main-content { min-height: calc(100vh - var(--header-height) - var(--footer-height)); padding-top: 0; } .content-area { padding: 2rem; max-width: 1400px; margin: 0 auto; } /* Page Header */ .page-header { text-align: center; margin-bottom: 2.5rem; } .page-title { font-size: 2.25rem; font-weight: 800; color: var(--black); margin-bottom: 0.75rem; line-height: 1.2; } .page-subtitle { color: var(--gray-600); font-size: 1rem; font-weight: 400; max-width: 600px; margin: 0 auto; } /* Stats Grid */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; } /* Content Grid */ .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; } /* Content Card and Stat Card Interactions */ .content-card { background: var(--white); border-radius: var(--radius-lg); border: 2px solid var(--gray-200); box-shadow: var(--shadow-sm); overflow: hidden; } .content-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); } .stat-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; border: 2px solid var(--gray-200); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .stat-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--black); flex-shrink: 0; background: var(--gray-100); border: 2px solid var(--gray-300); } .stat-icon.primary { background: var(--accent); color: var(--white); border-color: var(--accent); } .stat-icon.success { background: var(--success); color: var(--white); border-color: var(--success); } .stat-icon.warning { background: var(--accent-light); color: var(--white); border-color: var(--accent-light); } .stat-icon.danger { background: var(--danger); color: var(--white); border-color: var(--danger); } .stat-content { text-align: left; } .stat-label { font-size: 0.75rem; color: var(--gray-600); font-weight: 600; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .stat-value { font-size: 2.25rem; font-weight: 800; color: var(--black); line-height: 1; margin-bottom: 0.75rem; } .stat-change { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: var(--radius); background: var(--gray-100); color: var(--gray-700); } .stat-change.positive { color: var(--success); background: rgba(16, 185, 129, 0.1); } .stat-change.negative { color: var(--danger); background: rgba(239, 68, 68, 0.1); } .card-header { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 1.125rem; font-weight: 700; color: var(--black); flex: 1; } .card-action { color: var(--black); text-decoration: none; font-size: 0.875rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: var(--radius); border: 2px solid var(--gray-300); background: var(--white); } .card-action:hover { background: var(--accent); color: var(--white); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .card-content { padding: 1.5rem; } /* Activity Items */ .activity-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--gray-200); } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; color: var(--black); background: var(--gray-100); border: 2px solid var(--gray-300); } .activity-icon.primary { background: var(--accent); color: var(--white); border-color: var(--accent); } .activity-icon.success { background: var(--success); color: var(--white); border-color: var(--success); } .activity-icon.warning { background: var(--accent-light); color: var(--white); border-color: var(--accent-light); } .activity-icon.danger { background: var(--danger); color: var(--white); border-color: var(--danger); } .activity-content { flex: 1; } .activity-title { font-weight: 600; color: var(--black); font-size: 0.875rem; margin-bottom: 0.25rem; line-height: 1.4; } .activity-time { font-size: 0.75rem; color: var(--gray-500); font-weight: 500; } /* Member Items */ .member-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--gray-200); } .member-item:last-child { border-bottom: none; } .member-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 0.875rem; flex-shrink: 0; border: 2px solid var(--accent); } .member-info { flex: 1; } .member-name { font-weight: 600; color: var(--black); font-size: 0.875rem; margin-bottom: 0.125rem; } .member-location { font-size: 0.75rem; color: var(--gray-500); } /* Status Badges */ .status-badge { padding: 0.375rem 0.75rem; border-radius: var(--radius); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--gray-100); color: var(--gray-700); border: 2px solid var(--gray-300); } .status-badge.active { background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: var(--success); } .status-badge.pending { background: var(--accent); color: var(--white); border-color: var(--accent); } .status-badge.inactive { background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: var(--danger); } /* Survey Items */ .survey-item { padding: 1.25rem; border: 2px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 1rem; background: var(--white); } .survey-item:last-child { margin-bottom: 0; } .survey-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .survey-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .survey-title { font-weight: 700; color: var(--black); font-size: 0.875rem; } .survey-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; } .survey-details { color: var(--gray-600); font-weight: 500; } .survey-progress { font-weight: 700; color: var(--black); } /* Chart Placeholder */ .chart-placeholder { height: 200px; background: var(--gray-50); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gray-300); } .chart-content { text-align: center; color: var(--gray-500); } .chart-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; color: var(--gray-400); } .chart-title { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--black); } .chart-subtitle { font-size: 0.75rem; color: var(--gray-500); } /* Quick Actions */ .quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .quick-action-btn { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.25rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 0.75rem; border: 2px solid var(--gray-300); background: var(--white); color: var(--black); } .quick-action-btn i { font-size: 1.25rem; } .quick-action-btn.primary { background: var(--accent); color: var(--white); border-color: var(--accent); } .quick-action-btn.success { background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: var(--success); } .quick-action-btn.warning { background: var(--accent-light); color: var(--white); border-color: var(--accent-light); } .quick-action-btn.danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: var(--danger); } .quick-action-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* System Status */ .system-status { display: flex; flex-direction: column; gap: 0.75rem; } .status-item { display: flex; align-items: center; gap: 1rem; padding: 0.875rem; background: var(--gray-50); border-radius: var(--radius); border: 1px solid var(--gray-200); } .status-indicator { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--gray-400); } .status-indicator.active { background: var(--success); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } .status-indicator.warning { background: var(--accent-light); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } .status-indicator.danger { background: var(--danger); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); } .status-info { flex: 1; } .status-name { font-weight: 600; color: var(--black); font-size: 0.75rem; } .status-value { font-size: 0.625rem; color: var(--gray-500); } /* Footer Styles */ .footer { background: var(--black); color: var(--white); margin-top: 3rem; } .footer-content { max-width: 1400px; margin: 0 auto; padding: 2.5rem 1.5rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .footer-section h4.footer-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--white); } .footer-description { font-size: 0.875rem; color: var(--gray-400); line-height: 1.6; margin-top: 0.75rem; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: var(--gray-400); text-decoration: none; font-size: 0.875rem; } .footer-links a:hover { color: var(--accent); } .social-links { display: flex; gap: 0.75rem; margin-bottom: 1rem; } .social-link { width: 36px; height: 36px; background: var(--gray-800); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--gray-400); text-decoration: none; border: 1px solid var(--gray-700); } .social-link:hover { background: var(--accent); color: var(--white); border-color: var(--accent); transform: translateY(-2px); } .contact-info p { font-size: 0.75rem; color: var(--gray-400); margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.5rem; } .footer-bottom { background: var(--gray-900); border-top: 1px solid var(--gray-800); } .footer-bottom-content { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .copyright p { font-size: 0.75rem; color: var(--gray-400); margin-bottom: 0.25rem; } .legal-text { font-size: 0.625rem; color: var(--gray-500); } .footer-meta { display: flex; align-items: center; gap: 1.5rem; font-size: 0.625rem; color: var(--gray-500); } .version-info { display: flex; gap: 0.75rem; } .server-status { display: flex; align-items: center; gap: 0.375rem; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s ease-out; } .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } /* Responsive Design */ @media (max-width: 1024px) { .main-nav { margin: 0 1.5rem; } .nav-divider { margin: 0 0.5rem; } } @media (max-width: 768px) { .header-content { padding: 0 1rem; } .main-nav { display: none; } .mobile-menu-toggle { display: flex; } .content-area { padding: 1.25rem; padding-bottom: 5rem; } .stats-grid { grid-template-columns: 1fr; gap: 1rem; } .content-grid { grid-template-columns: 1fr; gap: 1rem; } .page-title { font-size: 1.875rem; } .mobile-nav { display: flex; } .quick-actions { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; text-align: center; } .footer-bottom-content { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .header-content { padding: 0 0.75rem; } .content-area { padding: 1rem; padding-bottom: 5rem; } .action-buttons { gap: 0.25rem; } .action-btn { width: 36px; height: 36px; } } /* Loading States */ .loading { opacity: 0.7; pointer-events: none; position: relative; } .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--gray-300); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Ripple Effect */ .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple 500ms linear; background-color: rgba(0, 0, 0, 0.1); } @keyframes ripple { to { transform: scale(4); opacity: 0; } } /* Focus States */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--gray-100); } ::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-500); } /* Utility Classes */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .text-lg { font-size: 1.125rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } /* Print Styles */ @media print { .header, .footer, .mobile-nav, .action-buttons { display: none; } .main-content { margin: 0; padding: 0; } .content-area { padding: 1rem; } .content-card, .stat-card { break-inside: avoid; border: 1px solid var(--gray-300); box-shadow: none; } } -------------------- END OF FILE -------------------- ### FILE 3: assets/js/app.js - Type: JS - Size: 14.02 KB - Path: assets/js - Name: app.js ------------------------------------------------------------ // Initialize application when DOM is loaded document.addEventListener('DOMContentLoaded', function() { initializeApp(); }); function initializeApp() { initializeAnimations(); initializeInteractions(); initializeMobileMenu(); initializeRealTimeUpdates(); initializeKeyboardShortcuts(); initializeTooltips(); initializePerformanceMonitoring(); } // Animation System function initializeAnimations() { // Intersection Observer for scroll animations const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); // Observe all fade-in elements document.querySelectorAll('.fade-in-up').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(40px)'; observer.observe(el); }); // Staggered animations document.querySelectorAll('[class*="stagger-"]').forEach(el => { const delay = el.className.match(/stagger-(\d+)/); if (delay) { el.style.animationDelay = `${delay[1] * 0.1}s`; } }); } // Interactive Elements function initializeInteractions() { // Mobile navigation const mobileNavItems = document.querySelectorAll('.mobile-nav-item'); mobileNavItems.forEach(item => { item.addEventListener('click', function(e) { if (!this.classList.contains('active')) { e.preventDefault(); showLoadingState(this); // Remove active from all items mobileNavItems.forEach(i => i.classList.remove('active')); // Add active to clicked item this.classList.add('active'); // Simulate navigation setTimeout(() => { console.log('Navigating to:', this.getAttribute('href')); }, 1000); } }); }); // Header action buttons const actionBtns = document.querySelectorAll('.profile-btn'); actionBtns.forEach(btn => { btn.addEventListener('click', function() { createRipple(this); this.style.transform = 'translateY(-2px) scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); }); }); // Card hover effects const cards = document.querySelectorAll('.stat-card, .content-card'); cards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); }); // Survey item interactions const surveyItems = document.querySelectorAll('.survey-item'); surveyItems.forEach(item => { item.addEventListener('click', function() { this.style.transform = 'translateY(-4px)'; setTimeout(() => { this.style.transform = 'translateY(0)'; }, 200); }); }); // Navigation item interactions document.querySelectorAll('.nav-item').forEach(item => { if (!item.classList.contains('active')) { item.addEventListener('click', function(e) { e.preventDefault(); showLoadingState(this); setTimeout(() => { console.log('Navigating to:', this.getAttribute('href')); }, 1000); }); } }); // Quick action buttons document.querySelectorAll('.quick-action-btn').forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); createRipple(this); showLoadingState(this); setTimeout(() => { console.log('Action:', this.querySelector('span').textContent); }, 1000); }); }); } // Mobile Menu function initializeMobileMenu() { const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); const mobileNav = document.querySelector('.mobile-nav'); if (mobileMenuToggle && mobileNav) { mobileMenuToggle.addEventListener('click', function() { mobileNav.style.transform = mobileNav.style.transform === 'translateY(0px)' ? 'translateY(100%)' : 'translateY(0px)'; }); } } // Real-time Updates function initializeRealTimeUpdates() { // Simulate real-time data updates setInterval(() => { updateStatValues(); updateActivityFeed(); updateSystemStatus(); }, 30000); // Update every 30 seconds function updateStatValues() { const statValues = document.querySelectorAll('.stat-value'); if (statValues.length === 0) return; const randomStat = statValues[Math.floor(Math.random() * statValues.length)]; if (randomStat) { const currentValue = parseInt(randomStat.textContent.replace(/[^0-9]/g, '')); const change = Math.floor(Math.random() * 20) - 10; const newValue = Math.max(0, currentValue + change); // Animate the change randomStat.style.transform = 'scale(1.1)'; randomStat.style.color = 'var(--primary)'; setTimeout(() => { randomStat.textContent = newValue.toLocaleString(); randomStat.style.transform = 'scale(1)'; randomStat.style.color = 'var(--gray-900)'; }, 300); } } function updateActivityFeed() { // Add a subtle pulse to recent activities const activityItems = document.querySelectorAll('.activity-item'); if (activityItems.length > 0) { const firstActivity = activityItems[0]; firstActivity.style.background = 'rgba(59, 130, 246, 0.05)'; setTimeout(() => { firstActivity.style.background = ''; }, 2000); } } function updateSystemStatus() { // Randomly update system status indicators const statusIndicators = document.querySelectorAll('.status-indicator'); statusIndicators.forEach(indicator => { if (Math.random() > 0.95) { // 5% chance to change status const currentClass = indicator.classList.contains('active') ? 'active' : indicator.classList.contains('warning') ? 'warning' : 'danger'; // Briefly flash the indicator indicator.style.transform = 'scale(1.3)'; setTimeout(() => { indicator.style.transform = 'scale(1)'; }, 200); } }); } } // Keyboard Shortcuts function initializeKeyboardShortcuts() { document.addEventListener('keydown', function(e) { // Number keys for quick navigation (1-9) if (e.key >= '1' && e.key <= '9' && e.altKey) { e.preventDefault(); const navItems = document.querySelectorAll('.nav-item'); const index = parseInt(e.key) - 1; if (navItems[index]) { navItems[index].click(); } } }); } // Tooltips function initializeTooltips() { const elementsWithTooltips = document.querySelectorAll('[title]'); elementsWithTooltips.forEach(element => { const title = element.getAttribute('title'); element.removeAttribute('title'); // Remove default tooltip element.addEventListener('mouseenter', function(e) { showTooltip(e.target, title); }); element.addEventListener('mouseleave', function() { hideTooltip(); }); }); } function showTooltip(element, text) { const tooltip = document.createElement('div'); tooltip.className = 'custom-tooltip'; tooltip.textContent = text; tooltip.style.cssText = ` position: absolute; background: var(--gray-800); color: white; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.75rem; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; `; document.body.appendChild(tooltip); const rect = element.getBoundingClientRect(); tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px'; tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + 'px'; setTimeout(() => { tooltip.style.opacity = '1'; }, 10); } function hideTooltip() { const tooltip = document.querySelector('.custom-tooltip'); if (tooltip) { tooltip.style.opacity = '0'; setTimeout(() => { tooltip.remove(); }, 200); } } // Performance Monitoring function initializePerformanceMonitoring() { if ('performance' in window) { window.addEventListener('load', function() { const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart; console.log('Page load time:', loadTime + 'ms'); // Show performance indicator if page loads slowly if (loadTime > 3000) { console.warn('Page loaded slowly. Consider optimizing assets.'); showPerformanceWarning(); } // Monitor resource loading const resources = performance.getEntriesByType('resource'); const slowResources = resources.filter(resource => resource.duration > 1000); if (slowResources.length > 0) { console.warn('Slow loading resources:', slowResources); } }); } } function showPerformanceWarning() { const warning = document.createElement('div'); warning.style.cssText = ` position: fixed; top: 20px; right: 20px; background: var(--orange); color: white; padding: 1rem; border-radius: var(--radius); z-index: 1000; font-size: 0.875rem; max-width: 300px; `; warning.textContent = 'Page loaded slowly. Some features may be delayed.'; document.body.appendChild(warning); setTimeout(() => { warning.remove(); }, 5000); } // Utility Functions function showLoadingState(element) { element.classList.add('loading'); setTimeout(() => { element.classList.remove('loading'); }, 1000); } function createRipple(element) { const ripple = document.createElement('span'); const rect = element.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; ripple.style.cssText = ` position: absolute; width: ${size}px; height: ${size}px; left: ${x}px; top: ${y}px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; transform: scale(0); animation: ripple 600ms linear; pointer-events: none; `; ripple.className = 'ripple'; // Remove existing ripple const existingRipple = element.querySelector('.ripple'); if (existingRipple) { existingRipple.remove(); } element.style.position = 'relative'; element.style.overflow = 'hidden'; element.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); } // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Service Worker registration (for future PWA features) if ('serviceWorker' in navigator) { window.addEventListener('load', function() { // Service worker would be registered here for offline functionality console.log('Service Worker support detected'); }); } // Error handling window.addEventListener('error', function(e) { console.error('JavaScript error:', e.error); // Could send error to logging service }); // Visibility API for performance optimization document.addEventListener('visibilitychange', function() { if (document.hidden) { // Pause animations and updates when tab is not visible console.log('Tab hidden - pausing updates'); } else { // Resume when tab becomes visible console.log('Tab visible - resuming updates'); } }); // Resize handler for responsive adjustments let resizeTimer; window.addEventListener('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { // Adjust layouts after resize console.log('Window resized to:', window.innerWidth, 'x', window.innerHeight); adjustLayoutForScreenSize(); }, 250); }); function adjustLayoutForScreenSize() { const isMobile = window.innerWidth <= 768; const isTablet = window.innerWidth <= 1024; // Adjust components based on screen size if (isMobile) { // Mobile-specific adjustments document.body.classList.add('mobile-view'); document.body.classList.remove('tablet-view', 'desktop-view'); } else if (isTablet) { // Tablet-specific adjustments document.body.classList.add('tablet-view'); document.body.classList.remove('mobile-view', 'desktop-view'); } else { // Desktop-specific adjustments document.body.classList.add('desktop-view'); document.body.classList.remove('mobile-view', 'tablet-view'); } } // Initialize screen size classes adjustLayoutForScreenSize(); // Export functions for external use window.AppUtils = { showLoadingState, createRipple, showTooltip, hideTooltip }; -------------------- END OF FILE -------------------- ### FILE 4: content/dashboard.php - Type: PHP - Size: 12.78 KB - Path: content - Name: dashboard.php ------------------------------------------------------------
Welcome back! Here's what's happening with your research panel today.