Spaces:

samirerty
/

anycoder-124e67f8

Running

App Files Files Community

samirerty commited on Jan 30

Commit

50ce04c

verified ·

1 Parent(s): 0e2782d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +558 -954

index.html CHANGED Viewed

@@ -3,1118 +3,722 @@
 <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@100;200;300;400;500;600;700;800;900&display=swap');
-        :root {
-            --primary: #6366f1;
-            --primary-dark: #4f46e5;
-            --primary-light: #818cf8;
-            --secondary: #ec4899;
-            --success: #10b981;
-            --warning: #f59e0b;
-            --danger: #ef4444;
-            --info: #06b6d4;
-            --dark: #0f172a;
-            --darker: #020617;
-            --light: #f8fafc;
-            --gray: #64748b;
-            --gray-light: #94a3b8;
-            --surface: #1e293b;
-            --surface-light: #334155;
-            --gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
-            --gradient-2: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
-            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-            --shadow: 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);
-            --radius-sm: 0.375rem;
-            --radius: 0.5rem;
-            --radius-lg: 0.75rem;
-            --radius-xl: 1rem;
-            --radius-2xl: 1.5rem;
-        }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-        html {
-            scroll-behavior: smooth;
-        }
         body {
-            font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
-            background: var(--darker);
-            color: var(--light);
             min-height: 100vh;
-            line-height: 1.6;
         }
-        /* Dashboard Container */
         .dashboard-container {
-            display: grid;
-            grid-template-columns: 280px 1fr;
             min-height: 100vh;
         }
-        @media (max-width: 1024px) {
-            .dashboard-container {
-                grid-template-columns: 1fr;
-            }
-        }
-        /* Sidebar */
         .sidebar {
-            background: var(--surface);
-            border-left: 1px solid var(--surface-light);
-            padding: 1.5rem;
-            position: sticky;
             top: 0;
             height: 100vh;
             overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 1.5rem;
-        }
-        @media (max-width: 1024px) {
-            .sidebar {
-                position: fixed;
-                right: -100%;
-                width: 280px;
-                z-index: 1000;
-                transition: right 0.3s ease;
-            }
-            .sidebar.open {
-                right: 0;
-            }
-        }
-        .sidebar-overlay {
-            display: none;
-            position: fixed;
-            inset: 0;
-            background: rgba(0,0,0,0.5);
-            z-index: 999;
-        }
-        .sidebar-overlay.active {
-            display: block;
         }
-        /* User Info */
         .user-info {
             text-align: center;
-            padding: 1.5rem;
-            background: var(--gradient-1);
-            border-radius: var(--radius-xl);
-            position: relative;
-            overflow: hidden;
-        }
-        .user-info::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
-            opacity: 0.3;
         }
-        .avatar {
-            width: 80px;
-            height: 80px;
             border-radius: 50%;
-            background: rgba(255,255,255,0.2);
-            backdrop-filter: blur(10px);
             display: flex;
             align-items: center;
             justify-content: center;
-            margin: 0 auto 1rem;
-            font-size: 2rem;
-            border: 3px solid rgba(255,255,255,0.3);
         }
         .user-info h3 {
             font-size: 1.25rem;
-            font-weight: 700;
             margin-bottom: 0.25rem;
         }
-        .user-info p {
-            font-size: 0.875rem;
-            opacity: 0.9;
             margin-bottom: 0.75rem;
         }
         .status {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             padding: 0.5rem 1rem;
-            background: rgba(255,255,255,0.2);
-            backdrop-filter: blur(10px);
-            border-radius: var(--radius-lg);
-            font-size: 0.875rem;
             font-weight: 500;
-        }
-        /* Sidebar Navigation */
         .sidebar-nav ul {
             list-style: none;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
         }
         .sidebar-nav a {
             display: flex;
             align-items: center;
             gap: 0.75rem;
             padding: 0.875rem 1rem;
-            color: var(--gray-light);
             text-decoration: none;
-            border-radius: var(--radius-lg);
-            transition: all 0.2s ease;
-            font-weight: 500;
         }
-        .sidebar-nav a:hover,
-        .sidebar-nav li.active a {
-            background: var(--primary);
-            color: white;
         }
         .sidebar-nav li.active a {
-            box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4);
-        }
-        /* Mobile Menu Toggle */
-        .menu-toggle {
-            display: none;
-            position: fixed;
-            top: 1rem;
-            right: 1rem;
-            z-index: 1001;
-            width: 48px;
-            height: 48px;
-            border-radius: var(--radius-lg);
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            color: var(--light);
-            cursor: pointer;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.25rem;
-        }
-        @media (max-width: 1024px) {
-            .menu-toggle {
-                display: flex;
-            }
         }
-        /* Main Content */
         .main-content {
-            padding: 1.5rem;
-            overflow-x: hidden;
         }
-        @media (max-width: 1024px) {
-            .main-content {
-                padding-top: 5rem;
-            }
-        }
-        /* Header */
         .header {
             margin-bottom: 2rem;
         }
         .header h1 {
             font-size: 1.75rem;
-            font-weight: 800;
-            margin-bottom: 1.5rem;
             display: flex;
             align-items: center;
             gap: 0.75rem;
         }
         .header h1 i {
-            background: var(--gradient-1);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
-        /* Header Stats */
-        .header-stats {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 1rem;
         }
-        .stat-card {
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-xl);
-            padding: 1.25rem;
             display: flex;
-            align-items: center;
-            gap: 1rem;
-            transition: all 0.3s ease;
         }
-        .stat-card:hover {
-            transform: translateY(-4px);
-            box-shadow: var(--shadow-lg);
-            border-color: var(--primary-light);
         }
-        .stat-card > i {
-            width: 56px;
-            height: 56px;
-            border-radius: var(--radius-lg);
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.5rem;
-        }
-        .stat-card:nth-child(1) > i {
-            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-        }
-        .stat-card:nth-child(2) > i {
-            background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
-        }
-        .stat-card:nth-child(3) > i {
-            background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
-        }
-        .stat-card:nth-child(4) > i {
-            background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
-        }
-        .stat-info h3 {
-            font-size: 1.75rem;
-            font-weight: 800;
-            line-height: 1;
-        }
-        .stat-info p {
-            color: var(--gray-light);
-            font-size: 0.875rem;
-            margin-top: 0.25rem;
         }
-        /* Tab Content */
-        .tab-content {
-            display: none;
-            animation: fadeIn 0.3s ease;
         }
-        .tab-content.active {
-            display: block;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
-        .tab-content h2 {
-            font-size: 1.5rem;
-            font-weight: 700;
-            margin-bottom: 1.5rem;
             display: flex;
             align-items: center;
             gap: 0.75rem;
-        }
-        .tab-content h2 i {
-            color: var(--primary-light);
-        }
-        /* Table Container */
-        .table-container {
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-xl);
-            overflow: hidden;
-        }
-        .data-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 0.875rem;
-        }
-        .data-table thead {
-            background: var(--surface-light);
-        }
-        .data-table th {
-            padding: 1rem;
-            text-align: right;
-            font-weight: 600;
-            color: var(--gray-light);
-            text-transform: uppercase;
-            font-size: 0.75rem;
-            letter-spacing: 0.05em;
-        }
-        .data-table td {
-            padding: 1rem;
-            border-top: 1px solid var(--surface-light);
-        }
-        .data-table tbody tr {
-            transition: background 0.2s ease;
-        }
-        .data-table tbody tr:hover {
-            background: rgba(99, 102, 241, 0.05);
-        }
-        @media (max-width: 768px) {
-            .data-table {
-                display: block;
-                overflow-x: auto;
             }
         }
-        /* Badges */
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            padding: 0.375rem 0.875rem;
-            border-radius: var(--radius-lg);
-            font-size: 0.75rem;
             font-weight: 600;
         }
-        .badge-admin {
-            background: var(--gradient-1);
-            color: white;
-        }
-        .badge-user {
-            background: var(--surface-light);
-            color: var(--gray-light);
-        }
-        .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: var(--surface-light);
-            color: var(--gray-light);
         }
-        /* Actions */
-        .actions {
             display: flex;
             gap: 0.5rem;
         }
-        .btn-icon {
-            width: 36px;
-            height: 36px;
-            border-radius: var(--radius);
-            border: none;
-            background: var(--surface-light);
-            color: var(--light);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
         }
-        .btn-icon:hover {
-            transform: scale(1.05);
         }
-        .btn-icon.btn-success {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--success);
         }
-        .btn-icon.btn-warning {
-            background: rgba(245, 158, 11, 0.15);
-            color: var(--warning);
         }
-        .btn-icon.btn-danger {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--danger);
         }
-        /* Buttons */
         .btn {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
-            padding: 0.625rem 1.25rem;
-            border-radius: var(--radius-lg);
-            border: none;
-            font-size: 0.875rem;
             font-weight: 500;
             cursor: pointer;
-            transition: all 0.2s ease;
         }
         .btn-primary {
-            background: var(--gradient-1);
             color: white;
         }
         .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4);
         }
-        .btn-secondary {
-            background: var(--surface-light);
-            color: var(--light);
-        }
-        .btn-success {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--success);
-        }
-        .btn-warning {
-            background: rgba(245, 158, 11, 0.15);
-            color: var(--warning);
-        }
-        .btn-danger {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--danger);
         }
-        /* Rooms List */
-        .rooms-list {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .room-card-admin {
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-xl);
-            padding: 1.25rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 1rem;
-            flex-wrap: wrap;
-        }
-        .room-info h4 {
-            font-size: 1.125rem;
             font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
-        .room-info p {
-            color: var(--gray-light);
-            font-size: 0.875rem;
-            margin-bottom: 0.75rem;
-        }
-        .room-meta {
-            display: flex;
-            gap: 1rem;
-            flex-wrap: wrap;
-            font-size: 0.75rem;
-            color: var(--gray);
-        }
-        .room-meta span {
             display: flex;
             align-items: center;
-            gap: 0.375rem;
-        }
-        .room-actions {
-            display: flex;
             gap: 0.5rem;
-            flex-wrap: wrap;
-        }
-        /* Announcements */
-        .announcements-admin {
-            display: grid;
-            gap: 2rem;
-        }
-        .form-section {
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-xl);
-            padding: 1.5rem;
-        }
-        .form-section h3 {
-            font-size: 1.125rem;
-            font-weight: 600;
             margin-bottom: 1.25rem;
         }
-        .form-group {
-            margin-bottom: 1.25rem;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-size: 0.875rem;
-            font-weight: 500;
-            color: var(--gray-light);
-        }
-        .form-group input,
-        .form-group textarea,
-        .form-group select {
-            width: 100%;
-            padding: 0.875rem 1rem;
-            background: var(--darker);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-lg);
-            color: var(--light);
-            font-size: 0.875rem;
-            transition: all 0.2s ease;
-        }
-        .form-group input:focus,
-        .form-group textarea:focus,
-        .form-group select:focus {
-            outline: none;
-            border-color: var(--primary);
-        }
-        .form-group input[type="checkbox"] {
-            width: auto;
-            margin-left: 0.5rem;
-        }
-        .announcements-list {
-            display: flex;
-            flex-direction: column;
             gap: 1rem;
         }
-        .announcements-list h3 {
-            font-size: 1.125rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
-        .announcement-card-admin {
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-xl);
-            padding: 1.25rem;
-        }
-        .announcement-header {
             display: flex;
-            justify-content: space-between;
             align-items: center;
-            margin-bottom: 0.75rem;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-        }
-        .announcement-header h4 {
-            font-size: 1rem;
-            font-weight: 600;
-        }
-        .announcement-date {
-            font-size: 0.75rem;
-            color: var(--gray);
         }
-        .announcement-content {
-            color: var(--gray-light);
-            font-size: 0.875rem;
-            margin-bottom: 1rem;
-            line-height: 1.7;
         }
-        .announcement-actions {
             display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-        }
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            inset: 0;
-            z-index: 2000;
             align-items: center;
             justify-content: center;
-            padding: 1rem;
-        }
-        .modal.active {
-            display: flex;
-        }
-        .modal-overlay {
-            position: absolute;
-            inset: 0;
-            background: rgba(0,0,0,0.8);
-            backdrop-filter: blur(4px);
-        }
-        .modal-content {
-            position: relative;
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-2xl);
-            width: 100%;
-            max-width: 480px;
-            max-height: 90vh;
-            overflow: hidden;
-            animation: modalSlide 0.3s ease;
-        }
-        @keyframes modalSlide {
-            from { opacity: 0; transform: scale(0.95) translateY(20px); }
-            to { opacity: 1; transform: scale(1) translateY(0); }
         }
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1.25rem 1.5rem;
-            border-bottom: 1px solid var(--surface-light);
         }
-        .modal-header h2 {
-            font-size: 1.125rem;
             font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .close-btn {
-            width: 32px;
-            height: 32px;
-            border-radius: var(--radius);
-            border: none;
-            background: var(--surface-light);
-            color: var(--gray-light);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
         }
-        .close-btn:hover {
-            background: var(--danger);
-            color: white;
-        }
-        .modal-body {
-            padding: 1.5rem;
-            overflow-y: auto;
-            max-height: 60vh;
-        }
-        .form-actions {
-            display: flex;
-            gap: 0.75rem;
-            justify-content: flex-end;
-            margin-top: 1.5rem;
-        }
-        /* Empty State */
-        .empty {
-            text-align: center;
-            padding: 3rem;
-            color: var(--gray);
-        }
-        /* Message Preview */
-        .message-preview {
-            max-width: 300px;
-            color: var(--gray-light);
-        }
-        /* Built with anycoder */
-        .anycoder-badge {
-            position: fixed;
-            bottom: 1rem;
-            left: 1rem;
-            z-index: 100;
-            padding: 0.5rem 1rem;
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-lg);
-            font-size: 0.75rem;
-            color: var(--gray-light);
-            text-decoration: none;
-            transition: all 0.2s ease;
-        }
-        .anycoder-badge:hover {
-            border-color: var(--primary);
-            color: var(--primary-light);
-        }
-        /* Toast Notification */
-        .toast {
-            position: fixed;
-            top: 1.5rem;
-            left: 50%;
-            transform: translateX(-50%) translateY(-100px);
-            background: var(--surface);
-            border: 1px solid var(--surface-light);
-            border-radius: var(--radius-xl);
-            padding: 1rem 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            z-index: 3000;
-            opacity: 0;
-            transition: all 0.3s ease;
-        }
-        .toast.show {
-            transform: translateX(-50%) translateY(0);
-            opacity: 1;
-        }
-        .toast.success {
-            border-color: var(--success);
-        }
-        .toast.success i {
-            color: var(--success);
-        }
-        .toast.error {
-            border-color: var(--danger);
-        }
-        .toast.error i {
-            color: var(--danger);
-        }
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--darker);
         }
-        ::-webkit-scrollbar-thumb {
-            background: var(--surface-light);
-            border-radius: 4px;
         }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--gray);
         }
     </style>
 </head>
 <body>
-    <button class="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">
-                    <i class="fas fa-crown"></i>
                 </div>
-                <h3>مدیر سیستم</h3>
-                <p>@admin</p>
-                <span class="status"><i class="fas fa-shield-alt"></i> ادمین</span>
             </div>
             <nav class="sidebar-nav">
                 <ul>
-                    <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-users">0</h3>
-                            <p>کاربران</p>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <i class="fas fa-lock"></i>
-                        <div class="stat-info">
-                            <h3 id="stat-locked">0</h3>
-                            <p>کاربران قفل شده</p>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <i class="fas fa-door-open"></i>
-                        <div class="stat-info">
-                            <h3 id="stat-rooms">0</h3>
-                            <p>اتاق‌ها</p>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <i class="fas fa-comment"></i>
-                        <div class="stat-info">
-                            <h3 id="stat-messages">0</h3>
-                            <p>پیام‌های امروز</p>
-                        </div>
-                    </div>
-                </div>
             </header>
             <div class="content">
-                <!-- تب مدیریت کاربران -->
-                <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">
-                            </tbody>
-                        </table>
                     </div>
-                </div>
-                <!-- تب مدیریت پیام‌ها -->
-                <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">
-                            </tbody>
-                        </table>
                     </div>
-                </div>
-                <!-- تب مدیریت اتاق‌ها -->
-                <div id="tab-rooms" class="tab-content">
-                    <h2><i class="fas fa-door-open"></i> مدیریت اتاق‌ها</h2>
-                    <div class="rooms-list" id="rooms-list">
                     </div>
-                </div>
-                <!-- تب مدیریت اعلان‌ها -->
-                <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>
-    <!-- مودال ویرایش کاربر -->
-    <div id="editUserModal" class="modal">
-        <div class="modal-overlay" onclick="closeEditUserModal()"></div>
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2><i class="fas fa-user-edit"></i> ویرایش کاربر</h2>
-                <button class="close-btn" onclick="closeEditUserModal()"><i class="fas fa-times"></i></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 id="toast" class="toast">
-        <i class="fas fa-check-circle"></i>
-        <span id="toast-message"></span>
-    </div>
-    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge">Built with anycoder</a>
-    <script>
-        // Mock Data
-        let users = [
-            { id: 1, username: 'admin', full_name: 'مدیر سیستم', email: 'admin@example.com', role: 'admin', is_locked: false, is_active: true, created_at: '2024-01-15' },
-            { id: 2, username: 'ali_reza', full_name: 'علی رضایی', email: 'ali@example.com', role: 'user', is_locked: false, is_active: true, created_at: '2024-01-20' },
-            { id: 3, username: 'maryam_j', full_name: 'مریم جعفری', email: 'maryam@example.com', role: 'user', is_locked: true, is_active: false, created_at: '2024-02-05' },
-            { id: 4, username: 'hossein_k', full_name: 'حسن کریمی', email: 'hossein@example.com', role: 'user', is_locked: false, is_active: true, created_at: '2024-02-10' },
-            { id: 5, username: 'sara_m', full_name: 'سارا محمدی', email: 'sara@example.com', role: 'user', is_locked: false, is_active: true, created_at: '2024-02-15' },
-            { id: 6, username: 'reza_n', full_name: 'رضا نوری', email: 'reza@example.com', role: 'user', is_locked: true, is_active: false, created_at: '2024-02-20' },
-            { id: 7, username: 'neda_a', full_name: 'ندا احمدی', email: 'neda@example.com', role: 'user', is_locked: false, is_active: true, created_at: '2024-03-01' },
-            { id: 8, username: 'amir_h', full_name: 'امیر حسینی', email: 'amir@example.com', role: 'user', is_locked: false, is_active: true, created_at: '2024-03-05' }
-        ];
-        let messages = [
-            { id: 1, username: 'ali_reza', room_name: 'گفتگوی عمومی', message: 'سلام به همه! امیدوارم روز خوبی داشته باشید.', created_at: '2024-03-15 09:30' },
-            { id: 2, username: 'maryam_j', room_name: 'برنامه‌نویسی', message: 'کسی می‌دونه چطور میشه با React کار کرد؟', created_at: '2024-03-15 10:15' },
-            { id: 3, username: 'hossein_k', room_name: 'گفتگوی عمومی', message: 'فردا جلسه داریم ساعت ۳', created_at: '2024-03-15 11:00' },
-            { id: 4, username: 'sara_m', room_name: 'طراحی UI', message: 'این پالت رنگی خیلی قشنگه، نظرتون چیه؟', created_at: '2024-03-15 12:30' },
-            { id: 5, username: 'reza_n', room_name: 'گفتگوی عمومی', message: 'ممنون از راهنماییتون', created_at: '2024-03-15 14:00' },
-            { id: 6, username: 'neda_a', room_name: 'برنامه‌نویسی', message: 'آموزش جدید React رو دیدم، عالی بود!', created_at: '2024-03-15 15:45' },
-            { id: 7, username: 'amir_h', room_name: 'طراحی UI', message: 'Figma رو پیشنهاد می‌کنم برای طراحی', created_at: '2024-03-15 16:20' }
-        ];
-        let rooms = [
-            { id: 1, name: 'گفتگوی عمومی', description: 'اتاق گفتگوی آزاد همه کاربران', is_locked: false, created_at: '2024-01-10', creator: 'admin' },
-            { id: 2, name: 'برنامه‌نویسی', description: 'بحث و تبادل نظر درباره برنامه‌نویسی', is_locked: false, created_at: '2024-01-15', creator: 'ali_reza' },
-            { id: 3, name: 'طراحی UI', description: 'طراحی رابط کاربری و تجربه کاربری', is_locked: true, created_at: '2024-02-01', creator: 'sara_m' },
-            { id: 4, name: 'بازی و سرگرمی', description: 'گفتگو درباره بازی‌های ویدیویی', is_locked: false, created_at: '2024-02-10', creator: 'hossein_k' }
-        ];
-        let announcements = [
-            { id: 1, title: 'به‌روزرسانی سیستم', content: 'سیستم چت روم در تاریخ ۲۰ مارس به‌روزرسانی خواهد شد. لطفاً از ذخیره اطلاعات مهم خود اطمینان حاصل کنید.', is_active: true, created_at: '2024-03-10' },
-            { id: 2, title: 'قوانین جدید', content: 'لطفاً قوانین جدید انجمن را مطالعه کنید. رعایت قوانین برای همه کاربران الزامی است.', is_active: true, created_at: '2024-03-12' },
-            { id: 3, title: 'مسابقه برنامه‌نویسی', content: 'مسابقه برنامه‌نویسی هفتگی از فردا آغاز می‌شود. جوایز نقدی برای برندگان در نظر گرفته شده است.', is_active: false, created_at: '2024-03-08' }
-        ];
-        // Initialize
-        document.addEventListener('DOMContentLoaded', function() {
-            updateStats();
-            renderUsers();
-            renderMessages();
-            renderRooms();
-            renderAnnouncements();
-        });
-        // Update Statistics
-        function updateStats() {
-            document.getElementById('stat-users').textContent = users.length;
-            document.getElementById('stat-locked').textContent = users.filter(u => u.is_locked).length;
-            document.getElementById('stat-rooms').textContent = rooms.length;
-            document.getElementById('stat-messages').textContent = messages.length;
-        }
-        // Toggle Sidebar (Mobile)
-        function toggleSidebar() {
-            document.getElementById('sidebar').classList.toggle('open');
-            document.querySelector('.sidebar-overlay').classList.toggle('active');
-        }
-        // Show Tab
-        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');

 <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');
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
+        :root {
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --error-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+            --glass-bg: rgba(255, 255, 255, 0.08);
+            --glass-border: rgba(255, 255, 255, 0.15);
+            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            --text-primary: #ffffff;
+            --text-secondary: rgba(255, 255, 255, 0.7);
+            --text-muted: rgba(255, 255, 255, 0.5);
+            --focus-glow: 0 0 20px rgba(102, 126, 234, 0.5);
+        }
         body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(-45deg, #1a1a2e, #16213e, #1a1a2e, #0f3460);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
             min-height: 100vh;
+            color: var(--text-primary);
+            overflow-x: hidden;
         }
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        body::before {
+            content: '';
+            position: fixed;
+            top: -50%;
+            right: -10%;
+            width: 600px;
+            height: 600px;
+            background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
+            filter: blur(80px);
+            animation: float 20s ease-in-out infinite;
+            pointer-events: none;
+        }
+        body::after {
+            content: '';
+            position: fixed;
+            bottom: -30%;
+            left: -10%;
+            width: 500px;
+            height: 500px;
+            background: radial-gradient(circle, rgba(245, 87, 108, 0.3) 0%, transparent 70%);
+            filter: blur(80px);
+            animation: float 25s ease-in-out infinite reverse;
+            pointer-events: none;
+        }
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(30px, -30px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
+        }
         .dashboard-container {
+            display: flex;
             min-height: 100vh;
+            position: relative;
         }
         .sidebar {
+            width: 280px;
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-left: 1px solid var(--glass-border);
+            padding: 2rem 1.5rem;
+            position: fixed;
+            right: 0;
             top: 0;
             height: 100vh;
             overflow-y: auto;
+            z-index: 100;
+            box-shadow: var(--glass-shadow);
         }
         .user-info {
             text-align: center;
+            padding-bottom: 2rem;
+            border-bottom: 1px solid var(--glass-border);
+            margin-bottom: 1.5rem;
         }
+        .user-info .avatar {
+            width: 90px;
+            height: 90px;
+            margin: 0 auto 1rem;
+            background: var(--primary-gradient);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 2.5rem;
+            box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
+            position: relative;
         }
+        .user-info .avatar::before {
+            content: '';
+            position: absolute;
+            inset: -3px;
+            border-radius: 50%;
+            background: var(--primary-gradient);
+            z-index: -1;
+            filter: blur(15px);
+            opacity: 0.6;
+        }
         .user-info h3 {
             font-size: 1.25rem;
+            font-weight: 600;
             margin-bottom: 0.25rem;
         }
+        .user-info > p {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
             margin-bottom: 0.75rem;
         }
         .status {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             padding: 0.5rem 1rem;
+            border-radius: 50px;
+            font-size: 0.8rem;
             font-weight: 500;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+        }
+        .status.online {
+            background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2));
+            border-color: rgba(79, 172, 254, 0.3);
+            color: #4facfe;
+        }
+        .status.admin {
+            background: linear-gradient(135deg, rgba(250, 112, 154, 0.2), rgba(254, 225, 64, 0.2));
+            border-color: rgba(250, 112, 154, 0.3);
+            color: #fa709a;
+        }
         .sidebar-nav ul {
             list-style: none;
         }
+        .sidebar-nav li {
+            margin-bottom: 0.5rem;
+        }
         .sidebar-nav a {
             display: flex;
             align-items: center;
             gap: 0.75rem;
             padding: 0.875rem 1rem;
+            color: var(--text-secondary);
             text-decoration: none;
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            font-size: 0.95rem;
         }
+        .sidebar-nav a:hover {
+            background: var(--glass-bg);
+            color: var(--text-primary);
+            transform: translateX(-5px);
         }
         .sidebar-nav li.active a {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
         }
         .main-content {
+            flex: 1;
+            margin-right: 280px;
+            padding: 2rem;
         }
         .header {
             margin-bottom: 2rem;
         }
         .header h1 {
             font-size: 1.75rem;
+            font-weight: 700;
             display: flex;
             align-items: center;
             gap: 0.75rem;
         }
         .header h1 i {
+            background: var(--primary-gradient);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
+        .content {
+            max-width: 900px;
         }
+        .profile-container {
             display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
         }
+        .profile-header {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 24px;
+            padding: 2.5rem;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
         }
+        .profile-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 120px;
+            background: var(--primary-gradient);
+            opacity: 0.15;
+        }
+        .profile-avatar {
+            width: 110px;
+            height: 110px;
+            margin: 0 auto 1.25rem;
+            background: var(--primary-gradient);
+            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 3rem;
+            box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5);
+            position: relative;
+            z-index: 1;
         }
+        .profile-avatar::after {
+            content: '';
+            position: absolute;
+            inset: -4px;
+            border-radius: 50%;
+            background: var(--primary-gradient);
+            z-index: -1;
+            filter: blur(20px);
+            opacity: 0.6;
+            animation: pulse 3s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; transform: scale(1); }
+            50% { opacity: 0.3; transform: scale(1.05); }
+        }
+        .profile-header h2 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 0.25rem;
+            position: relative;
+            z-index: 1;
         }
+        .profile-header > p {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+            position: relative;
+            z-index: 1;
         }
+        .user-email {
+            margin-top: 0.5rem;
+            color: var(--text-muted) !important;
+            font-size: 0.875rem !important;
         }
+        .alert {
+            padding: 1rem 1.5rem;
+            border-radius: 16px;
+            font-size: 0.95rem;
             display: flex;
             align-items: center;
             gap: 0.75rem;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid;
+            animation: slideIn 0.4s ease;
+        }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
             }
         }
+        .alert.error {
+            background: linear-gradient(135deg, rgba(250, 112, 154, 0.15), rgba(254, 225, 64, 0.1));
+            border-color: rgba(250, 112, 154, 0.3);
+            color: #ff6b9d;
+            box-shadow: 0 8px 32px rgba(250, 112, 154, 0.2);
+        }
+        .alert.success {
+            background: linear-gradient(135deg, rgba(79, 172, 254, 0.15), rgba(0, 242, 254, 0.1));
+            border-color: rgba(79, 172, 254, 0.3);
+            color: #4facfe;
+            box-shadow: 0 8px 32px rgba(79, 172, 254, 0.2);
+        }
+        .profile-form {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 24px;
+            padding: 2rem;
+        }
+        .profile-form h3 {
+            font-size: 1.1rem;
             font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.75rem;
         }
+        .form-info {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin-bottom: 1.5rem;
+            line-height: 1.7;
         }
+        .form-group {
+            margin-bottom: 1.5rem;
         }
+        .form-group label {
             display: flex;
+            align-items: center;
             gap: 0.5rem;
+            margin-bottom: 0.625rem;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--text-secondary);
         }
+        .form-group label i {
+            color: #667eea;
+            font-size: 0.875rem;
         }
+        .form-group input {
+            width: 100%;
+            padding: 0.875rem 1rem;
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid var(--glass-border);
+            border-radius: 14px;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+            font-family: inherit;
+            transition: all 0.3s ease;
         }
+        .form-group input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: var(--focus-glow);
+            background: rgba(0, 0, 0, 0.3);
+        }
+        .form-group input:disabled {
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--text-muted);
+            cursor: not-allowed;
+        }
+        .form-text {
+            display: block;
+            margin-top: 0.5rem;
+            font-size: 0.8rem;
+            color: var(--text-muted);
         }
+        hr {
+            border: none;
+            height: 1px;
+            background: var(--glass-border);
+            margin: 2rem 0;
         }
+        .form-actions {
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
+            flex-wrap: wrap;
         }
         .btn {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
+            padding: 0.875rem 1.75rem;
+            border-radius: 14px;
+            font-size: 0.95rem;
             font-weight: 500;
+            font-family: inherit;
             cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            border: none;
         }
         .btn-primary {
+            background: var(--primary-gradient);
             color: white;
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
         }
         .btn-primary:hover {
             transform: translateY(-2px);
+            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
         }
+        .btn-primary:active {
+            transform: translateY(0);
         }
+        .btn-secondary {
+            background: var(--glass-bg);
+            color: var(--text-secondary);
+            border: 1px solid var(--glass-border);
+        }
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-primary);
+        }
+        .profile-stats {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 24px;
+            padding: 1.75rem;
+        }
+        .profile-stats h3 {
+            font-size: 1.1rem;
             font-weight: 600;
             display: flex;
             align-items: center;
             gap: 0.5rem;
             margin-bottom: 1.25rem;
         }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 1rem;
         }
+        .stat-item {
             display: flex;
             align-items: center;
+            gap: 1rem;
+            padding: 1.25rem;
+            background: rgba(0, 0, 0, 0.15);
+            border-radius: 16px;
+            border: 1px solid var(--glass-border);
+            transition: all 0.3s ease;
         }
+        .stat-item:hover {
+            transform: translateY(-3px);
+            background: rgba(0, 0, 0, 0.25);
         }
+        .stat-item > i {
+            width: 48px;
+            height: 48px;
             display: flex;
             align-items: center;
             justify-content: center;
+            background: var(--primary-gradient);
+            border-radius: 14px;
+            font-size: 1.25rem;
+            flex-shrink: 0;
         }
+        .stat-info h4 {
+            font-size: 0.8rem;
+            font-weight: 500;
+            color: var(--text-muted);
+            margin-bottom: 0.25rem;
         }
+        .stat-info p {
+            font-size: 0.95rem;
             font-weight: 600;
+            color: var(--text-primary);
         }
+        @media (max-width: 1024px) {
+            .sidebar {
+                width: 240px;
+            }
+            .main-content {
+                margin-right: 240px;
+            }
         }
+        @media (max-width: 768px) {
+            .sidebar {
+                width: 100%;
+                position: relative;
+                height: auto;
+                border-left: none;
+                border-bottom: 1px solid var(--glass-border);
+            }
+            .main-content {
+                margin-right: 0;
+            }
+            .dashboard-container {
+                flex-direction: column;
+            }
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+            .form-actions {
+                flex-direction: column;
+            }
+            .btn {
+                justify-content: center;
+            }
         }
+        @media (max-width: 480px) {
+            .main-content {
+                padding: 1rem;
+            }
+            .profile-header,
+            .profile-form,
+            .profile-stats {
+                padding: 1.5rem;
+            }
         }
     </style>
 </head>
 <body>
     <div class="dashboard-container">
+        <aside class="sidebar">
             <div class="user-info">
                 <div class="avatar">
+                    <i class="fas fa-user-circle"></i>
                 </div>
+                <h3>محمد رضایی</h3>
+                <p>@mohammad</p>
+                <span class="status online">
+                    <i class="fas fa-circle"></i>
+                    آنلاین
+                </span>
             </div>
             <nav class="sidebar-nav">
                 <ul>
+                    <li><a href="dashboard.php"><i class="fas fa-home"></i> صفحه اصلی</a></li>
+                    <li><a href="chat.php?room=1"><i class="fas fa-comments"></i> چت عمومی</a></li>
+                    <li class="active"><a href="profile.php"><i class="fas fa-user-cog"></i> تنظیمات پروفایل</a></li>
+                    <li><a href="admin.php"><i class="fas fa-shield-alt"></i> پنل ادمین</a></li>
+                    <li><a href="logout.php"><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-user-cog"></i> تنظیمات پروفایل</h1>
             </header>
             <div class="content">
+                <div class="profile-container">
+                    <div class="profile-header">
+                        <div class="profile-avatar">
+                            <i class="fas fa-user-circle"></i>
+                        </div>
+                        <h2>محمد رضایی</h2>
+                        <p>@mohammad</p>
+                        <p class="user-email">mohammad@example.com</p>
                     </div>
+                    <div class="alert error">
+                        <i class="fas fa-exclamation-circle"></i>
+                        این ایمیل قبلاً ثبت شده است
                     </div>
+                    <div class="profile-form">
+                        <form method="POST" action="">
+                            <div class="form-group">
+                                <label for="full_name"><i class="fas fa-id-card"></i> نام کامل</label>
+                                <input type="text" id="full_name" name="full_name" value="محمد رضایی" required>
+                            </div>
+                            <div class="form-group">
+                                <label for="email"><i class="fas fa-envelope"></i> ایمیل</label>
+                                <input type="email" id="email" name="email" value="mohammad@example.com" required>
+                            </div>
+                            <div class="form-group">
+                                <label for="username"><i class="fas fa-user"></i> نام کاربری</label>
+                                <input type="text" id="username" value="mohammad" disabled>
+                                <small class="form-text">نام کاربری قابل تغییر نیست</small>
+                            </div>
+                            <div class="form-group">
+                                <label for="role"><i class="fas fa-user-tag"></i> نقش</label>
+                                <input type="text" id="role" value="کاربر" disabled>
+                            </div>
+                            <hr>
+                            <h3><i class="fas fa-lock"></i> تغییر رمز عبور</h3>
+                            <p class="form-info">رمز عبور خود را تنها در صورتی تغییر دهید که می‌خواهید آن را به‌روز کنید. در غیر این صورت، فیلدهای زیر را خالی بگذارید.</p>
+                            <div class="form-group">
+                                <label for="current_password"><i class="fas fa-key"></i> رمز عبور فعلی</label>
+                                <input type="password" id="current_password" name="current_password">
+                            </div>
+                            <div class="form-group">
+                                <label for="new_password"><i class="fas fa-key"></i> رمز عبور جدید</label>
+                                <input type="password" id="new_password" name="new_password">
+                            </div>
+                            <div class="form-group">
+                                <label for="confirm_password"><i class="fas fa-key"></i> تکرار رمز عبور جدید</label>
+                                <input type="password" id="confirm_password" name="confirm_password">
+                            </div>
+                            <div class="form-actions">
+                                <a href="dashboard.php" class="btn btn-secondary">
+                                    <i class="fas fa-arrow-right"></i> بازگشت
+                                </a>
+                                <button type="submit" name="update_profile" class="btn btn-primary">
+                                    <i class="fas fa-save"></i> ذخیره تغییرات
+                                </button>
+                            </div>
+                        </form>
                     </div>
+                    <div class="profile-stats">
+                        <h3><i class="fas fa-chart-bar"></i> آمار فعالیت</h3>
+                        <div class="stats-grid">
+                            <div class="stat-item">
+                                <i class="fas fa-calendar"></i>
+                                <div class="stat-info">
+                                    <h4>تاریخ عضویت</h4>
+                                    <p>1403/01/15</p>
                                 </div>
+                            </div>
+                            <div class="stat-item">
+                                <i class="fas fa-clock"></i>
+                                <div class="stat-info">
+                                    <h4>آخرین بازدید</h4>
+                                    <p>14:30 1403/06/20</p>
                                 </div>
+                            </div>
+                            <div class="stat-item">
+                                <i class="fas fa-comments"></i>
+                                <div class="stat-info">
+                                    <h4>تعداد پیام‌ها</h4>
+                                    <p>247</p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </main>
     </div>
+</body>
+</html>