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'); | |
| * { | |
| 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) ; | |
| font-size: 0.875rem ; | |
| } | |
| .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> |