Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>پنل ادمین - چت روم</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --primary-light: #818cf8; | |
| --secondary: #ec4899; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --info: #06b6d4; | |
| --dark: #0f172a; | |
| --dark-light: #1e293b; | |
| --dark-lighter: #334155; | |
| --light: #f8fafc; | |
| --gray: #94a3b8; | |
| --gray-light: #cbd5e1; | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); | |
| --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); | |
| --radius-sm: 0.375rem; | |
| --radius: 0.5rem; | |
| --radius-lg: 0.75rem; | |
| --radius-xl: 1rem; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Vazirmatn', 'Segoe UI', sans-serif; | |
| background: var(--dark); | |
| color: var(--light); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| } | |
| /* Dashboard Container */ | |
| .dashboard-container { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| min-height: 100vh; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background: var(--dark-light); | |
| border-left: 1px solid var(--dark-lighter); | |
| padding: 1.5rem; | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| height: 100vh; | |
| width: 280px; | |
| overflow-y: auto; | |
| z-index: 100; | |
| } | |
| .user-info { | |
| text-align: center; | |
| padding-bottom: 1.5rem; | |
| border-bottom: 1px solid var(--dark-lighter); | |
| margin-bottom: 1.5rem; | |
| } | |
| .avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 1rem; | |
| font-size: 2rem; | |
| position: relative; | |
| } | |
| .avatar.admin { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .avatar::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -3px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| z-index: -1; | |
| opacity: 0.5; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.5; } | |
| 50% { transform: scale(1.05); opacity: 0.3; } | |
| } | |
| .user-info h3 { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .user-info p { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .status { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.375rem 0.875rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.025em; | |
| } | |
| .status.admin { | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--primary-light); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| } | |
| /* Sidebar Navigation */ | |
| .sidebar-nav ul { | |
| list-style: none; | |
| } | |
| .sidebar-nav li { | |
| margin-bottom: 0.25rem; | |
| } | |
| .sidebar-nav a { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.875rem; | |
| padding: 0.875rem 1rem; | |
| color: var(--gray); | |
| text-decoration: none; | |
| border-radius: var(--radius); | |
| transition: var(--transition); | |
| font-size: 0.9375rem; | |
| } | |
| .sidebar-nav a:hover { | |
| background: var(--dark-lighter); | |
| color: var(--light); | |
| } | |
| .sidebar-nav li.active a { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| box-shadow: var(--shadow); | |
| } | |
| .sidebar-nav i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| margin-right: 280px; | |
| padding: 1.5rem; | |
| } | |
| /* Header */ | |
| .header { | |
| margin-bottom: 1.5rem; | |
| } | |
| .header h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .header h1 i { | |
| color: var(--primary); | |
| } | |
| /* Header Stats */ | |
| .header-stats { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| } | |
| .stat-card { | |
| background: var(--dark-light); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| border-color: var(--primary); | |
| } | |
| .stat-card > i { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| } | |
| .stat-card:nth-child(1) > i { | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--primary); | |
| } | |
| .stat-card:nth-child(2) > i { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--danger); | |
| } | |
| .stat-card:nth-child(3) > i { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: var(--success); | |
| } | |
| .stat-card:nth-child(4) > i { | |
| background: rgba(6, 182, 212, 0.15); | |
| color: var(--info); | |
| } | |
| .stat-info h3 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| .stat-info p { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| margin-top: 0.25rem; | |
| } | |
| /* Content */ | |
| .content { | |
| background: var(--dark-light); | |
| border-radius: var(--radius-xl); | |
| border: 1px solid var(--dark-lighter); | |
| overflow: hidden; | |
| } | |
| /* Tab Content */ | |
| .tab-content { | |
| display: none; | |
| padding: 1.5rem; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tab-content h2 { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| margin-bottom: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.625rem; | |
| } | |
| .tab-content h2 i { | |
| color: var(--primary); | |
| } | |
| /* Table Container */ | |
| .table-container { | |
| overflow-x: auto; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--dark-lighter); | |
| } | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.875rem; | |
| } | |
| .data-table th { | |
| background: var(--dark); | |
| padding: 0.875rem 1rem; | |
| text-align: right; | |
| font-weight: 600; | |
| color: var(--gray); | |
| text-transform: uppercase; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.025em; | |
| white-space: nowrap; | |
| } | |
| .data-table td { | |
| padding: 1rem; | |
| border-top: 1px solid var(--dark-lighter); | |
| color: var(--light); | |
| } | |
| .data-table tbody tr { | |
| transition: var(--transition); | |
| } | |
| .data-table tbody tr:hover { | |
| background: rgba(99, 102, 241, 0.05); | |
| } | |
| /* Badges */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.625rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .badge-admin { | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--primary-light); | |
| } | |
| .badge-user { | |
| background: rgba(148, 163, 184, 0.15); | |
| color: var(--gray); | |
| } | |
| .badge-success { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: var(--success); | |
| } | |
| .badge-warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: var(--warning); | |
| } | |
| .badge-danger { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--danger); | |
| } | |
| .badge-secondary { | |
| background: rgba(148, 163, 184, 0.15); | |
| color: var(--gray); | |
| } | |
| /* Actions */ | |
| .actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .btn-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-sm); | |
| border: none; | |
| background: var(--dark-lighter); | |
| color: var(--gray); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .btn-icon:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: scale(1.05); | |
| } | |
| .btn-icon.btn-success:hover { | |
| background: var(--success); | |
| } | |
| .btn-icon.btn-warning:hover { | |
| background: var(--warning); | |
| } | |
| .btn-icon.btn-danger:hover { | |
| background: var(--danger); | |
| } | |
| /* Message Preview */ | |
| .message-preview { | |
| max-width: 300px; | |
| color: var(--gray); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.625rem 1.25rem; | |
| border-radius: var(--radius); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: none; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-secondary { | |
| background: var(--dark-lighter); | |
| color: var(--light); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--gray); | |
| } | |
| .btn-success { | |
| background: var(--success); | |
| color: white; | |
| } | |
| .btn-warning { | |
| background: var(--warning); | |
| color: var(--dark); | |
| } | |
| .btn-danger { | |
| background: var(--danger); | |
| color: white; | |
| } | |
| /* Rooms List */ | |
| .rooms-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .room-card-admin { | |
| background: var(--dark); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| transition: var(--transition); | |
| } | |
| .room-card-admin:hover { | |
| border-color: var(--primary); | |
| } | |
| .room-info h4 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.375rem; | |
| } | |
| .room-info p { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .room-meta { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .room-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.375rem; | |
| font-size: 0.75rem; | |
| color: var(--gray); | |
| } | |
| .room-actions { | |
| display: flex; | |
| gap: 0.625rem; | |
| } | |
| /* Announcements Admin */ | |
| .announcements-admin { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.5rem; | |
| } | |
| .form-section { | |
| background: var(--dark); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem; | |
| } | |
| .form-section h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| color: var(--primary-light); | |
| } | |
| .form-group { | |
| margin-bottom: 1rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| margin-bottom: 0.5rem; | |
| color: var(--gray); | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: var(--dark-light); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius); | |
| color: var(--light); | |
| font-size: 0.875rem; | |
| transition: var(--transition); | |
| font-family: inherit; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| .form-group input[type="checkbox"] { | |
| width: auto; | |
| margin-left: 0.5rem; | |
| } | |
| .announcements-list { | |
| background: var(--dark); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem; | |
| } | |
| .announcements-list h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| color: var(--primary-light); | |
| } | |
| .announcement-card-admin { | |
| background: var(--dark-light); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius); | |
| padding: 1rem; | |
| margin-bottom: 0.875rem; | |
| } | |
| .announcement-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.75rem; | |
| } | |
| .announcement-header h4 { | |
| font-size: 0.9375rem; | |
| font-weight: 600; | |
| } | |
| .announcement-date { | |
| font-size: 0.75rem; | |
| color: var(--gray); | |
| } | |
| .announcement-content { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| margin-bottom: 0.875rem; | |
| line-height: 1.6; | |
| } | |
| .announcement-actions { | |
| display: flex; | |
| gap: 0.625rem; | |
| align-items: center; | |
| } | |
| .announcement-actions .btn { | |
| padding: 0.375rem 0.875rem; | |
| font-size: 0.75rem; | |
| } | |
| /* Empty State */ | |
| .empty { | |
| text-align: center; | |
| padding: 3rem; | |
| color: var(--gray); | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(4px); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .modal[style*="block"] { | |
| display: flex ; | |
| } | |
| .modal-content { | |
| background: var(--dark-light); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius-xl); | |
| width: 100%; | |
| max-width: 500px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| animation: modalSlide 0.3s ease; | |
| } | |
| @keyframes modalSlide { | |
| from { opacity: 0; transform: scale(0.95) translateY(-10px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |
| .modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1.25rem; | |
| border-bottom: 1px solid var(--dark-lighter); | |
| } | |
| .modal-header h2 { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.625rem; | |
| } | |
| .modal-header h2 i { | |
| color: var(--primary); | |
| } | |
| .close-btn { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius); | |
| border: none; | |
| background: var(--dark-lighter); | |
| color: var(--gray); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| transition: var(--transition); | |
| } | |
| .close-btn:hover { | |
| background: var(--danger); | |
| color: white; | |
| } | |
| .modal-body { | |
| padding: 1.25rem; | |
| } | |
| .form-actions { | |
| display: flex; | |
| gap: 0.875rem; | |
| justify-content: flex-end; | |
| margin-top: 1.5rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--dark-lighter); | |
| } | |
| /* Mobile Menu Toggle */ | |
| .mobile-menu-toggle { | |
| display: none; | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| z-index: 101; | |
| width: 44px; | |
| height: 44px; | |
| border-radius: var(--radius); | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1200px) { | |
| .header-stats { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| .dashboard-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| .main-content { | |
| margin-right: 0; | |
| padding-top: 4rem; | |
| } | |
| .mobile-menu-toggle { | |
| display: flex; | |
| } | |
| .announcements-admin { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header-stats { | |
| grid-template-columns: 1fr; | |
| } | |
| .room-card-admin { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .room-actions { | |
| width: 100%; | |
| justify-content: flex-end; | |
| } | |
| .stat-card { | |
| padding: 1rem; | |
| } | |
| .stat-card > i { | |
| width: 40px; | |
| height: 40px; | |
| font-size: 1rem; | |
| } | |
| .stat-info h3 { | |
| font-size: 1.25rem; | |
| } | |
| } | |
| /* Overlay for mobile */ | |
| .sidebar-overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(15, 23, 42, 0.5); | |
| z-index: 99; | |
| } | |
| @media (max-width: 992px) { | |
| .sidebar-overlay.active { | |
| display: block; | |
| } | |
| } | |
| /* Loading State */ | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 3rem; | |
| color: var(--gray); | |
| gap: 0.75rem; | |
| } | |
| .loading::after { | |
| content: ''; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid var(--dark-lighter); | |
| border-top-color: var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| top: 1.5rem; | |
| left: 1.5rem; | |
| background: var(--dark-light); | |
| border: 1px solid var(--dark-lighter); | |
| border-radius: var(--radius-lg); | |
| padding: 1rem 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.875rem; | |
| box-shadow: var(--shadow-lg); | |
| z-index: 1001; | |
| transform: translateX(-150%); | |
| transition: transform 0.3s ease; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast.success { | |
| border-color: var(--success); | |
| } | |
| .toast.error { | |
| border-color: var(--danger); | |
| } | |
| .toast i { | |
| font-size: 1.25rem; | |
| } | |
| .toast.success i { | |
| color: var(--success); | |
| } | |
| .toast.error i { | |
| color: var(--danger); | |
| } | |
| /* Built with anycoder */ | |
| .anycoder-badge { | |
| position: fixed; | |
| bottom: 1rem; | |
| left: 1rem; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius); | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| z-index: 100; | |
| opacity: 0.8; | |
| transition: var(--transition); | |
| } | |
| .anycoder-badge:hover { | |
| opacity: 1; | |
| transform: translateY(-2px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button class="mobile-menu-toggle" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="sidebar-overlay" onclick="toggleSidebar()"></div> | |
| <div class="dashboard-container"> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="user-info"> | |
| <div class="avatar admin"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <h3>مدیر سیستم</h3> | |
| <p>@admin</p> | |
| <span class="status admin"><i class="fas fa-shield-alt"></i> ادمین</span> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <ul> | |
| <li><a href="#" onclick="showTab('tab-dashboard')"><i class="fas fa-home"></i> صفحه اصلی</a></li> | |
| <li class="active"><a href="#" onclick="showTab('tab-users')"><i class="fas fa-users"></i> مدیریت کاربران</a></li> | |
| <li><a href="#" onclick="showTab('tab-messages')"><i class="fas fa-comments"></i> مدیریت پیامها</a></li> | |
| <li><a href="#" onclick="showTab('tab-rooms')"><i class="fas fa-door-open"></i> مدیریت اتاقها</a></li> | |
| <li><a href="#" onclick="showTab('tab-announcements')"><i class="fas fa-bullhorn"></i> مدیریت اعلانها</a></li> | |
| <li><a href="#" onclick="logout()"><i class="fas fa-sign-out-alt"></i> خروج</a></li> | |
| </ul> | |
| </nav> | |
| </aside> | |
| <main class="main-content"> | |
| <header class="header"> | |
| <h1><i class="fas fa-shield-alt"></i> پنل مدیریت ادمین</h1> | |
| <div class="header-stats"> | |
| <div class="stat-card"> | |
| <i class="fas fa-users"></i> | |
| <div class="stat-info"> | |
| <h3 id="stat-total-users">1,247</h3> | |
| <p>کاربران</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-lock"></i> | |
| <div class="stat-info"> | |
| <h3 id="stat-locked-users">12</h3> | |
| <p>کاربران قفل شده</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-door-open"></i> | |
| <div class="stat-info"> | |
| <h3 id="stat-total-rooms">48</h3> | |
| <p>اتاقها</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-comment"></i> | |
| <div class="stat-info"> | |
| <h3 id="stat-today-messages">3,856</h3> | |
| <p>پیامهای امروز</p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="content"> | |
| <!-- Dashboard Tab --> | |
| <div id="tab-dashboard" class="tab-content"> | |
| <h2><i class="fas fa-home"></i> داشبورد</h2> | |
| <div class="rooms-list" id="dashboard-content"> | |
| <div class="empty">به پنل مدیریت خوش آمدید</div> | |
| </div> | |
| </div> | |
| <!-- Users Tab --> | |
| <div id="tab-users" class="tab-content active"> | |
| <h2><i class="fas fa-users"></i> مدیریت کاربران</h2> | |
| <div class="table-container"> | |
| <table class="data-table"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>نام کاربری</th> | |
| <th>نام کامل</th> | |
| <th>ایمیل</th> | |
| <th>نقش</th> | |
| <th>وضعیت</th> | |
| <th>تاریخ ثبتنام</th> | |
| <th>عملیات</th> | |
| </tr> | |
| </thead> | |
| <tbody id="users-table-body"> | |
| <!-- Populated by JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Messages Tab --> | |
| <div id="tab-messages" class="tab-content"> | |
| <h2><i class="fas fa-comments"></i> مدیریت پیامها</h2> | |
| <div class="table-container"> | |
| <table class="data-table"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>کاربر</th> | |
| <th>اتاق</th> | |
| <th>پیام</th> | |
| <th>زمان</th> | |
| <th>عملیات</th> | |
| </tr> | |
| </thead> | |
| <tbody id="messages-table-body"> | |
| <!-- Populated by JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Rooms Tab --> | |
| <div id="tab-rooms" class="tab-content"> | |
| <h2><i class="fas fa-door-open"></i> مدیریت اتاقها</h2> | |
| <div class="rooms-list"> | |
| <div id="admin-rooms-list" class="loading">در حال بارگذاری...</div> | |
| </div> | |
| </div> | |
| <!-- Announcements Tab --> | |
| <div id="tab-announcements" class="tab-content"> | |
| <h2><i class="fas fa-bullhorn"></i> مدیریت اعلانها</h2> | |
| <div class="announcements-admin"> | |
| <div class="form-section"> | |
| <h3>ایجاد اعلان جدید</h3> | |
| <form id="create-announcement-form"> | |
| <div class="form-group"> | |
| <label for="announcement-title">عنوان اعلان</label> | |
| <input type="text" id="announcement-title" required placeholder="عنوان اعلان را وارد کنید"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="announcement-content">متن اعلان</label> | |
| <textarea id="announcement-content" rows="4" required placeholder="متن اعلان را وارد کنید"></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-plus"></i> ایجاد اعلان | |
| </button> | |
| </form> | |
| </div> | |
| <div class="announcements-list"> | |
| <h3>اعلانهای موجود</h3> | |
| <div id="announcements-list">در حال بارگذاری...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Edit User Modal --> | |
| <div id="editUserModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2><i class="fas fa-user-edit"></i> ویرایش کاربر</h2> | |
| <button class="close-btn" onclick="closeEditUserModal()">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="editUserForm"> | |
| <input type="hidden" id="edit_user_id"> | |
| <div class="form-group"> | |
| <label for="edit_username">نام کاربری</label> | |
| <input type="text" id="edit_username" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="edit_full_name">نام کامل</label> | |
| <input type="text" id="edit_full_name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="edit_email">ایمیل</label> | |
| <input type="email" id="edit_email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="edit_role">نقش</label> | |
| <select id="edit_role"> | |
| <option value="user">کاربر</option> | |
| <option value="admin">ادمین</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" id="edit_is_active"> | |
| حساب فعال است | |
| </label> | |
| </div> | |
| <div class="form-actions"> | |
| <button type="button" class="btn btn-secondary" onclick="closeEditUserModal()">انصراف</button> | |
| <button type="submit" class="btn btn-primary">ذخیره تغییرات</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <i class="fas fa-check-circle"></i> | |
| <span id="toast-message">عملیات با موفقیت انجام شد</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-badge" target="_blank">Built with anycoder</a> | |
| <script> | |
| // Mock Data | |
| const mockUsers = [ | |
| { id: 1, username: 'ali_reza', full_name: 'علی رضایی', email: 'ali@example.com', role: 'admin', is_active: true, is_locked: false, created_at: '2024-01-15' }, | |
| { id: 2, username: 'maryam_ahmadi', full_name: 'مریم احمدی', email: 'maryam@example.com', role: 'user', is_active: true, is_locked: false, created_at: '2024-02-20' }, | |
| { id: 3, username: 'hassan_m', full_name: 'حسن محمدی', email: 'hassan@example.com', role: 'user', is_active: false, is_locked: true, created_at: '2024-03-05' }, | |
| { id: 4, username: 'sara_karimi', full_name: 'سارا کریمی', email: 'sara@example.com', role: 'user', is_active: true, is_locked: false, created_at: '2024-03-12' }, | |
| { id: 5, username: 'reza_nouri', full_name: 'رضا نوری', email: 'reza@example.com', role: 'user', is_active: true, is_locked: false, created_at: '2024-03-18' }, | |
| { id: 6, username: 'negin_sh', full_name: 'نگین شاهی', email: 'negin@example.com', role: 'user', is_active: true, is_locked: false, created_at: '2024-03-25' }, | |
| { id: 7, username: 'amir_hossein', full_name: 'امیرحسین طاهری', email: 'amir@example.com', role: 'user', is_active: false, is_locked: false, created_at: '2024-04-02' }, | |
| { id: 8, username: 'fatemeh_r', full_name: 'فاطمه رحیمی', email: 'fatemeh@example.com', role: 'user', is_active: true, is_locked: true, created_at: '2024-04-08' } | |
| ]; | |
| const mockMessages = [ | |
| { id: 1, username: 'ali_reza', room_name: 'عمومی', message: 'سلام دوستان! امیدوارم روز خوبی داشته باشید.', created_at: '2024-04-15 09:30' }, | |
| { id: 2, username: 'maryam_ahmadi', room_name: 'برنامهنویسی', message: 'کسی میدونه چطور میشه از React با TypeScript استفاده کرد؟', created_at: '2024-04-15 09:45' }, | |
| { id: 3, username: 'hassan_m', room_name: 'عمومی', message: 'این یه پیام تستیه برای چک کردن سیستم.', created_at: '2024-04-15 10:15' }, | |
| { id: 4, username: 'sara_karimi', room_name: 'طراحی', message: 'نظر شما درباره این طرح چیه؟ لینک: https://example.com/design', created_at: '2024-04-15 10:30' }, | |
| { id: 5, username: 'reza_nouri', room_name: 'عمومی', message: 'کسی امروز برای بازی آنلاین وقت داره؟', created_at: '2024-04-15 11:00' }, | |
| { id: 6, username: 'negin_sh', room_name: 'کتاب', message: 'کتاب خوبی برای یادگیری JavaScript معرفی کنید لطفاً.', created_at: '2024-04-15 11:20' }, | |
| { id: 7, username: 'amir_hossein', room_name: 'ورزش', message: 'بازی امشب رو کی میبینه؟', created_at: '2024-04-15 12:00' }, | |
| { id: 8, username: 'fatemeh_r', room_name: 'عمومی', message: 'تبریک میگم به همه بخاطر موفقیت پروژه!', created_at: '2024-04-15 12:30' } | |
| ]; | |
| const mockRooms = [ | |
| { id: 1, name: 'عمومی', description: 'اتاق گفتگوی عمومی برای همه کاربران', created_at: '2024-01-01', creator: 'admin', is_locked: false }, | |
| { id: 2, name: 'برنامهنویسی', description: 'بحث و گفتگو درباره برنامهنویسی و توسعه نرمافزار', created_at: '2024-01-15', creator: 'ali_reza', is_locked: false }, | |
| { id: 3, name: 'طراحی', description: 'طراحی گرافیک، UI/UX و هنر دیجیتال', created_at: '2024-02-01', creator: 'maryam_ahmadi', is_locked: false }, | |
| { id: 4, name: 'کتاب', description: 'معرفی و بحث درباره کتابهای مختلف', created_at: '2024-02-20', creator: 'sara_karimi', is_locked: true }, | |
| { id: 5, name: 'ورزش', description: 'اخبار و بحثهای ورزشی', created_at: '2024-03-10', creator: 'reza_nouri', is_locked: false } | |
| ]; | |
| let mockAnnouncements = [ | |
| { id: 1, title: 'بهروزرسانی سیستم', content: 'سیستم چت روم در تاریخ ۱۵ آوریل بهروزرسانی خواهد شد. لطفاً از ذخیره کردن پیامهای مهم خود اطمینان حاصل کنید.', created_at: '2024-04-10', is_active: true }, | |
| { id: 2, title: 'قوانین جدید', content: 'قوانین جدید استفاده از چت روم منتشر شد. لطفاً مطالعه کنید.', created_at: '2024-04-12', is_active: true }, | |
| { id: 3, title: 'مسابقه برنامهنویسی', content: 'مسابقه برنامهنویسی هفتگی در اتاق مربوطه برگزار میشود.', created_at: '2024-04-08', is_active: false } | |
| ]; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderUsers(); | |
| renderMessages(); | |
| loadRooms(); | |
| loadAnnouncements(); | |
| updateStats(); | |
| }); | |
| // Sidebar Toggle | |
| function toggleSidebar() { | |
| const sidebar = document.getElementById('sidebar'); | |
| const overlay = document.querySelector('.sidebar-overlay'); | |
| sidebar.classList.toggle('open'); | |
| overlay.classList.toggle('active'); | |
| } | |
| // Tab Switching | |
| function showTab(tabId) { | |
| // Update sidebar active state | |
| document.querySelectorAll('.sidebar-nav li').forEach(li => { | |
| li.classList.remove('active'); | |
| }); | |
| event.target.closest('li').classList.add('active'); | |
| // Hide all tabs | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show selected tab | |
| document.getElementById(tabId).classList.add('active'); | |
| // Load content if needed | |
| if (tabId === 'tab-rooms') { | |
| loadRooms(); | |
| } else if (tabId === 'tab-announcements') { | |
| loadAnnouncements(); | |
| } | |
| // Close mobile sidebar | |
| if (window.innerWidth <= 992) { | |
| toggleSidebar(); | |
| } | |
| } | |
| // Update Stats | |
| function updateStats() { | |
| const totalUsers = mockUsers.length; | |
| const lockedUsers = mockUsers.filter(u => u.is_locked).length; | |
| const totalRooms = mockRooms.length; | |
| const todayMessages = Math.floor(Math.random() * 5000) + 1000; | |
| document.getElementById('stat-total-users').textContent = totalUsers.toLocaleString('fa-IR'); | |
| document.getElementById('stat-locked-users').textContent = lockedUsers.toLocaleString('fa-IR'); | |
| document.getElementById('stat-total-rooms').textContent = totalRooms.toLocaleString('fa-IR'); | |
| document.getElementById('stat-today-messages').textContent = todayMessages.toLocaleString('fa-IR'); | |
| } | |
| // Render Users | |
| function renderUsers() { | |
| const tbody = document.getElementById('users-table-body'); | |
| tbody.innerHTML = mockUsers.map(user => ` | |
| <tr> | |
| <td>${user.id}</td> | |
| <td>${user.username}</td> | |
| <td>${user.full_name}</td> | |
| <td>${user.email}</td> | |
| <td> | |
| <span class="badge ${user.role === 'admin' ? 'badge-admin' : 'badge-user'}"> | |
| ${user.role === 'admin' ? 'ادمین' : 'کاربر'} | |
| </span> | |
| </td> | |
| <td> | |
| <span class="badge ${user.is_locked ? 'badge-danger' : (user.is_active ? 'badge-success' : 'badge-warning')}"> | |
| ${user.is_locked ? 'قفل شده' : (user.is_active ? 'فعال' : 'غیرفعال')} | |
| </span> | |
| </td> | |
| <td>${user.created_at}</td> | |
| <td class="actions"> | |
| <button class="btn-icon" onclick="editUser(${user.id})"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="btn-icon ${user.is_locked ? 'btn-success' : 'btn-warning'}" | |
| onclick="toggleLockUser(${user.id}, ${!user.is_locked})"> | |
| <i class="fas ${user.is_locked ? 'fa-unlock' : 'fa-lock'}"></i> | |
| </button> | |
| <button class="btn |