Project: Relevant Reflex Shop_25 Aug 2025
ZIP File: public_html(2).zip
Extracted on: 2025-08-25 04:06:20
Total Files: 6
================================================================================

FILE: index.php
TYPE: PHP
SIZE: 623 B
------------------------------------------------------------
<?php
session_start();

// Configuration
$config = [
    'site_name' => '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: assets/css/style.css
TYPE: CSS
SIZE: 22.71 KB
------------------------------------------------------------
: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: assets/js/app.js
TYPE: JS
SIZE: 14.02 KB
------------------------------------------------------------
// 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: content/dashboard.php
TYPE: PHP
SIZE: 12.78 KB
------------------------------------------------------------
<!-- Content Area -->
<div class="content-area">
    <div class="page-header fade-in-up">
        <h1 class="page-title">Dashboard Overview</h1>
        <p class="page-subtitle">Welcome back! Here's what's happening with your research panel today.</p>
    </div>

    <!-- Stats Grid -->
    <div class="stats-grid fade-in-up stagger-1">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-content">
                    <div class="stat-label">Total Panel Members</div>
                    <div class="stat-value">24,567</div>
                    <div class="stat-change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>+15.3% from last month</span>
                    </div>
                </div>
                <div class="stat-icon primary">
                    <i class="fas fa-users"></i>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-content">
                    <div class="stat-label">Active Surveys</div>
                    <div class="stat-value">42</div>
                    <div class="stat-change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>+5 new this week</span>
                    </div>
                </div>
                <div class="stat-icon success">
                    <i class="fas fa-poll"></i>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-content">
                    <div class="stat-label">Monthly Revenue</div>
                    <div class="stat-value">₹4,85,400</div>
                    <div class="stat-change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>+22.1% vs last month</span>
                    </div>
                </div>
                <div class="stat-icon warning">
                    <i class="fas fa-chart-line"></i>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-content">
                    <div class="stat-label">Support Tickets</div>
                    <div class="stat-value">8</div>
                    <div class="stat-change negative">
                        <i class="fas fa-arrow-down"></i>
                        <span>3 unresolved</span>
                    </div>
                </div>
                <div class="stat-icon danger">
                    <i class="fas fa-ticket-alt"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Grid -->
    <div class="content-grid fade-in-up stagger-2">
        <!-- Recent Activities -->
        <div class="content-card">
            <div class="card-header">
                <h3 class="card-title">Recent Activities</h3>
                <a href="#" class="card-action">View All</a>
            </div>
            <div class="card-content">
                <div class="activity-item">
                    <div class="activity-icon success">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">New panel member registered from Mumbai</div>
                        <div class="activity-time">3 minutes ago</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon primary">
                        <i class="fas fa-poll"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">Survey "Consumer Tech Trends 2025" published</div>
                        <div class="activity-time">18 minutes ago</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon warning">
                        <i class="fas fa-coins"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">Payment of ₹67,800 processed successfully</div>
                        <div class="activity-time">1 hour ago</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon danger">
                        <i class="fas fa-headset"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">New support ticket: Login Issues</div>
                        <div class="activity-time">2 hours ago</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Panel Members -->
        <div class="content-card">
            <div class="card-header">
                <h3 class="card-title">Recent Panel Members</h3>
                <a href="#" class="card-action">Manage</a>
            </div>
            <div class="card-content">
                <div class="member-item">
                    <div class="member-avatar">AS</div>
                    <div class="member-info">
                        <div class="member-name">Amit Sharma</div>
                        <div class="member-location">Mumbai, Maharashtra</div>
                    </div>
                    <div class="status-badge active">Active</div>
                </div>
                <div class="member-item">
                    <div class="member-avatar">PK</div>
                    <div class="member-info">
                        <div class="member-name">Priya Kapoor</div>
                        <div class="member-location">Delhi, NCR</div>
                    </div>
                    <div class="status-badge active">Active</div>
                </div>
                <div class="member-item">
                    <div class="member-avatar">RN</div>
                    <div class="member-info">
                        <div class="member-name">Rahul Nair</div>
                        <div class="member-location">Bangalore, Karnataka</div>
                    </div>
                    <div class="status-badge active">Active</div>
                </div>
                <div class="member-item">
                    <div class="member-avatar">SP</div>
                    <div class="member-info">
                        <div class="member-name">Sneha Patel</div>
                        <div class="member-location">Pune, Maharashtra</div>
                    </div>
                    <div class="status-badge pending">Pending</div>
                </div>
            </div>
        </div>

        <!-- Active Surveys -->
        <div class="content-card">
            <div class="card-header">
                <h3 class="card-title">Active Surveys</h3>
                <a href="#" class="card-action">View All</a>
            </div>
            <div class="card-content">
                <div class="survey-item">
                    <div class="survey-header">
                        <div class="survey-title">Consumer Electronics Trends 2025</div>
                        <div class="status-badge active">Live</div>
                    </div>
                    <div class="survey-meta">
                        <div class="survey-details">15 min • ₹95/complete</div>
                        <div class="survey-progress">287/500 completed</div>
                    </div>
                </div>
                <div class="survey-item">
                    <div class="survey-header">
                        <div class="survey-title">Digital Shopping Behavior Study</div>
                        <div class="status-badge active">Live</div>
                    </div>
                    <div class="survey-meta">
                        <div class="survey-details">12 min • ₹75/complete</div>
                        <div class="survey-progress">412/600 completed</div>
                    </div>
                </div>
                <div class="survey-item">
                    <div class="survey-header">
                        <div class="survey-title">Fintech Adoption in India</div>
                        <div class="status-badge pending">Starting Soon</div>
                    </div>
                    <div class="survey-meta">
                        <div class="survey-details">20 min • ₹120/complete</div>
                        <div class="survey-progress">0/400 completed</div>
                    </div>
                </div>
                <div class="survey-item">
                    <div class="survey-header">
                        <div class="survey-title">Food Delivery App Experience</div>
                        <div class="status-badge inactive">Completed</div>
                    </div>
                    <div class="survey-meta">
                        <div class="survey-details">10 min • ₹60/complete</div>
                        <div class="survey-progress">350/350 completed</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Performance Insights -->
        <div class="content-card">
            <div class="card-header">
                <h3 class="card-title">Performance Insights</h3>
                <a href="#" class="card-action">Details</a>
            </div>
            <div class="card-content">
                <div class="chart-placeholder">
                    <div class="chart-content">
                        <i class="fas fa-chart-area chart-icon"></i>
                        <div class="chart-title">Analytics Dashboard</div>
                        <div class="chart-subtitle">Interactive charts and insights coming soon</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="content-card">
            <div class="card-header">
                <h3 class="card-title">Quick Actions</h3>
            </div>
            <div class="card-content">
                <div class="quick-actions">
                    <a href="users.php" class="quick-action-btn primary">
                        <i class="fas fa-user-plus"></i>
                        <span>Add User</span>
                    </a>
                    <a href="panel.php" class="quick-action-btn success">
                        <i class="fas fa-poll"></i>
                        <span>New Survey</span>
                    </a>
                    <a href="finance.php" class="quick-action-btn warning">
                        <i class="fas fa-file-invoice"></i>
                        <span>Generate Report</span>
                    </a>
                    <a href="tickets.php" class="quick-action-btn danger">
                        <i class="fas fa-headset"></i>
                        <span>View Tickets</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- System Status -->
        <div class="content-card">
            <div class="card-header">
                <h3 class="card-title">System Status</h3>
                <a href="#" class="card-action">Details</a>
            </div>
            <div class="card-content">
                <div class="system-status">
                    <div class="status-item">
                        <div class="status-indicator active"></div>
                        <div class="status-info">
                            <div class="status-name">API Services</div>
                            <div class="status-value">Online</div>
                        </div>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator active"></div>
                        <div class="status-info">
                            <div class="status-name">Database</div>
                            <div class="status-value">Operational</div>
                        </div>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator warning"></div>
                        <div class="status-info">
                            <div class="status-name">Email Service</div>
                            <div class="status-value">Slow</div>
                        </div>
                    </div>
                    <div class="status-item">
                        <div class="status-indicator active"></div>
                        <div class="status-info">
                            <div class="status-name">Payment Gateway</div>
                            <div class="status-value">Active</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
-------------------- END OF FILE --------------------

FILE: includes/footer.php
TYPE: PHP
SIZE: 4.21 KB
------------------------------------------------------------
</main>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <div class="footer-logo">
                    <div class="logo">
                        <div class="logo-icon">
                            RR
                        </div>
                        <div class="logo-text">
                            <div class="logo-main footer-logo-text">relevantreflex</div>
                        </div>
                    </div>
                    <p class="footer-description">
                        Professional panel management system for market research and consumer insights.
                    </p>
                </div>
            </div>

            <div class="footer-section">
                <h4 class="footer-title">Quick Links</h4>
                <ul class="footer-links">
                    <li><a href="index.php">Dashboard</a></li>
                    <li><a href="users.php">User Management</a></li>
                    <li><a href="panel.php">Panel Management</a></li>
                    <li><a href="finance.php">Financial Reports</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h4 class="footer-title">Support</h4>
                <ul class="footer-links">
                    <li><a href="tickets.php">Support Tickets</a></li>
                    <li><a href="#" data-modal="help">Help Center</a></li>
                    <li><a href="#" data-modal="documentation">Documentation</a></li>
                    <li><a href="#" data-modal="contact">Contact Us</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h4 class="footer-title">Legal</h4>
                <ul class="footer-links">
                    <li><a href="#" data-modal="privacy">Privacy Policy</a></li>
                    <li><a href="#" data-modal="terms">Terms of Service</a></li>
                    <li><a href="#" data-modal="cookies">Cookie Policy</a></li>
                    <li><a href="#" data-modal="compliance">Data Compliance</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h4 class="footer-title">Connect</h4>
                <div class="social-links">
                    <a href="#" class="social-link" title="LinkedIn">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="#" class="social-link" title="Twitter">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="social-link" title="Email">
                        <i class="fas fa-envelope"></i>
                    </a>
                    <a href="#" class="social-link" title="GitHub">
                        <i class="fab fa-github"></i>
                    </a>
                </div>
                <div class="contact-info">
                    <p><i class="fas fa-envelope"></i> support@relevantreflex.shop</p>
                    <p><i class="fas fa-phone"></i> +91 (0) 11-1234-5678</p>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="footer-bottom-content">
                <div class="copyright">
                    <p>&copy; <?php echo date('Y'); ?> RelevantReflex Private Limited. All rights reserved.</p>
                    <p class="legal-text">
                        Registered in India • CIN: U72900DL2023PTC123456 • 
                        GST: 07AABCR1234A1Z5
                    </p>
                </div>
                
                <div class="footer-meta">
                    <div class="version-info">
                        <span class="version">v2.1.0</span>
                        <span class="build">Build 2025.01.15</span>
                    </div>
                    <div class="server-status">
                        <span class="status-indicator active"></span>
                        <span class="status-text">All systems operational</span>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="assets/js/app.js"></script>
</body>
</html>
-------------------- END OF FILE --------------------

FILE: includes/header.php
TYPE: PHP
SIZE: 6.13 KB
------------------------------------------------------------
<?php
if (!isset($config)) {
    $config = [
        'site_name' => 'relevantreflex.shop',
        'site_description' => 'Panel Management System'
    ];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $config['site_name']; ?> - Panel Management</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="header-content">
            <!-- Logo -->
            <div class="header-logo">
                <a href="index.php" class="logo">
                    <div class="logo-icon">
                        RR
                    </div>
                </a>
            </div>

            <!-- Navigation Menu -->
            <nav class="main-nav">
                <div class="nav-section">
                    <a href="index.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>" title="Dashboard">
                        <i class="nav-icon fas fa-home"></i>
                        <span class="nav-text">Home</span>
                    </a>
                    <a href="analytics.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'analytics.php' ? 'active' : ''; ?>" title="Analytics">
                        <i class="nav-icon fas fa-chart-line"></i>
                        <span class="nav-text">Stats</span>
                    </a>
                </div>

                <div class="nav-divider"></div>

                <div class="nav-section">
                    <a href="users.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'users.php' ? 'active' : ''; ?>" title="User Management">
                        <i class="nav-icon fas fa-users"></i>
                        <span class="nav-text">Users</span>
                    </a>
                    <a href="panel.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'panel.php' ? 'active' : ''; ?>" title="Panel Management">
                        <i class="nav-icon fas fa-user-friends"></i>
                        <span class="nav-text">Panel</span>
                    </a>
                    <a href="affiliates.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'affiliates.php' ? 'active' : ''; ?>" title="Supplier Management">
                        <i class="nav-icon fas fa-handshake"></i>
                        <span class="nav-text">Suppliers</span>
                    </a>
                    <a href="buyers.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'buyers.php' ? 'active' : ''; ?>" title="Buyer Management">
                        <i class="nav-icon fas fa-building"></i>
                        <span class="nav-text">Buyers</span>
                    </a>
                </div>

                <div class="nav-divider"></div>

                <div class="nav-section">
                    <a href="finance.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'finance.php' ? 'active' : ''; ?>" title="Financial Management">
                        <i class="nav-icon fas fa-wallet"></i>
                        <span class="nav-text">Accounts</span>
                    </a>
                    <a href="tickets.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'tickets.php' ? 'active' : ''; ?>" title="Support Tickets">
                        <i class="nav-icon fas fa-headset"></i>
                        <span class="nav-text">Care</span>
                        <div class="nav-badge">8</div>
                    </a>
                    <a href="settings.php" class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'settings.php' ? 'active' : ''; ?>" title="Settings">
                        <i class="nav-icon fas fa-cog"></i>
                        <span class="nav-text">Basics</span>
                    </a>
                </div>
            </nav>

            <!-- Header Actions -->
            <div class="header-actions">
                <!-- Action Buttons -->
                <div class="action-buttons">
                    <button class="action-btn profile-btn" title="Profile">
                        <span>A</span>
                    </button>
                </div>

                <!-- Mobile Menu Toggle -->
                <button class="mobile-menu-toggle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Navigation -->
        <nav class="mobile-nav">
            <a href="index.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>">
                <i class="fas fa-home"></i>
                <span>Home</span>
            </a>
            <a href="users.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'users.php' ? 'active' : ''; ?>">
                <i class="fas fa-users"></i>
                <span>Users</span>
            </a>
            <a href="panel.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'panel.php' ? 'active' : ''; ?>">
                <i class="fas fa-user-friends"></i>
                <span>Panel</span>
            </a>
            <a href="finance.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'finance.php' ? 'active' : ''; ?>">
                <i class="fas fa-wallet"></i>
                <span>Accounts</span>
            </a>
            <a href="tickets.php" class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'tickets.php' ? 'active' : ''; ?>">
                <i class="fas fa-headset"></i>
                <span>Care</span>
            </a>
        </nav>
    </header>

    <!-- Main Content Wrapper -->
    <main class="main-content">
-------------------- END OF FILE --------------------