Create component/header.js

js/component/header.js

@@ -0,0 +1,222 @@
+class HeaderComponent {
+    static render() {
+        const header = document.getElementById('mainHeader');
+        if (!header) return;
+
+        header.innerHTML = `
+            <div class="header-content">
+                <div class="header-brand">
+                    <h1>🎓 RewardApp</h1>
+                    <span class="header-subtitle">پلتفرم آموزش توسعه وب</span>
+                </div>
+                
+                <div class="header-stats" id="headerStats">
+                    <!-- توسط JavaScript پر می‌شود -->
+                </div>
+                
+                <div class="header-actions">
+                    <button class="header-btn" onclick="HeaderComponent.showUserMenu()">
+                        👤 حساب کاربری
+                    </button>
+                    <button class="header-btn" onclick="HeaderComponent.toggleTheme()">
+                        🌙 تغییر تم
+                    </button>
+                </div>
+            </div>
+            
+            <div class="user-menu" id="userMenu" style="display: none;">
+                <div class="menu-content">
+                    <div class="menu-header">
+                        <div class="user-avatar">U</div>
+                        <div class="user-details">
+                            <span class="user-name" id="menuUserName">کاربر مهمان</span>
+                            <span class="user-role" id="menuUserRole">ورود نکرده</span>
+                        </div>
+                    </div>
+                    <div class="menu-items">
+                        <a href="login.html" class="menu-item">🔐 ورود به سیستم</a>
+                        <a href="register.html" class="menu-item">📝 ثبت نام</a>
+                        <hr class="menu-divider">
+                        <button class="menu-item" onclick="HeaderComponent.resetProgress()">
+                            🔄 بازنشانی پیشرفت
+                        </button>
+                        <button class="menu-item" onclick="HeaderComponent.exportData()">
+                            💾 ذخیره اطلاعات
+                        </button>
+                        <hr class="menu-divider">
+                        <button class="menu-item" onclick="HeaderComponent.showAbout()">
+                            ℹ️ درباره برنامه
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.updateStats();
+        this.setupEventListeners();
+    }
+
+    static updateStats() {
+        const headerStats = document.getElementById('headerStats');
+        if (!headerStats) return;
+
+        const user = authManager.getCurrentUser();
+        
+        if (user) {
+            const stats = learningLogic.getUserStats();
+            headerStats.innerHTML = `
+                <div class="stat-item">
+                    <span class="stat-label">سطح</span>
+                    <span class="stat-value">${stats.level}</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-label">امتیاز</span>
+                    <span class="stat-value">${Utils.formatNumber(stats.totalScore)}</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-label">استریک</span>
+                    <span class="stat-value">${stats.streak}</span>
+                </div>
+            `;
+        } else {
+            headerStats.innerHTML = `
+                <div class="stat-item">
+                    <span class="stat-label">وضعیت</span>
+                    <span class="stat-value">ورود نکرده</span>
+                </div>
+            `;
+        }
+    }
+
+    static setupEventListeners() {
+        // بستن منو با کلیک خارج از آن
+        document.addEventListener('click', (e) => {
+            const userMenu = document.getElementById('userMenu');
+            const headerBtn = e.target.closest('.header-btn');
+            
+            if (userMenu && !userMenu.contains(e.target) && !headerBtn) {
+                userMenu.style.display = 'none';
+            }
+        });
+
+        // به‌روزرسانی آمار هنگام تغییر وضعیت
+        document.addEventListener('authStateChanged', () => {
+            this.updateStats();
+            this.updateUserMenu();
+        });
+
+        document.addEventListener('progressUpdated', () => {
+            this.updateStats();
+        });
+    }
+
+    static showUserMenu() {
+        const userMenu = document.getElementById('userMenu');
+        if (!userMenu) return;
+
+        this.updateUserMenu();
+        userMenu.style.display = userMenu.style.display === 'none' ? 'block' : 'none';
+    }
+
+    static updateUserMenu() {
+        const menuUserName = document.getElementById('menuUserName');
+        const menuUserRole = document.getElementById('menuUserRole');
+        
+        if (!menuUserName || !menuUserRole) return;
+
+        const user = authManager.getCurrentUser();
+        
+        if (user) {
+            menuUserName.textContent = user.profile.fullName || user.username;
+            menuUserRole.textContent = this.getRoleText(user.role);
+        } else {
+            menuUserName.textContent = 'کاربر مهمان';
+            menuUserRole.textContent = 'ورود نکرده';
+        }
+    }
+
+    static getRoleText(role) {
+        const roles = {
+            'student': 'دانشجو',
+            'instructor': 'مربی',
+            'admin': 'مدیر'
+        };
+        return roles[role] || role;
+    }
+
+    static toggleTheme() {
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        
+        localStorage.setItem('theme', newTheme);
+        document.body.setAttribute('data-theme', newTheme);
+        
+        Utils.showNotification(
+            `تم ${newTheme === 'dark' ? 'تاریک' : 'روشن'} فعال شد`,
+            'success'
+        );
+    }
+
+    static resetProgress() {
+        if (confirm('آیا از بازنشانی تمام پیشرفت خود مطمئن هستید؟ این عمل غیرقابل برگشت است.')) {
+            learningLogic.resetProgress();
+            Utils.showNotification('پیشرفت با موفقیت بازنشانی شد', 'success');
+            document.dispatchEvent(new CustomEvent('progressUpdated'));
+            this.showUserMenu(); // بستن منو
+        }
+    }
+
+    static exportData() {
+        const userProgress = learningLogic.userProgress;
+        const dataStr = JSON.stringify(userProgress, null, 2);
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
+        
+        const url = URL.createObjectURL(dataBlob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `rewardapp-backup-${Utils.getCurrentDate()}.json`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+        
+        Utils.showNotification('اطلاعات با موفقیت ذخیره شد', 'success');
+        this.showUserMenu(); // بستن منو
+    }
+
+    static showAbout() {
+        const aboutHTML = `
+            <div class="about-modal">
+                <h3>🎓 درباره RewardApp</h3>
+                <div class="about-content">
+                    <p><strong>نسخه:</strong> ۱.۰.۰</p>
+                    <p><strong>توضیحات:</strong> پلتفرم آموزشی تعاملی برای یادگیری توسعه وب</p>
+                    <p><strong>امکانات:</strong></p>
+                    <ul>
+                        <li>📖 درس‌های تعاملی</li>
+                        <li>❓ آزمون‌های کوتاه</li>
+                        <li>✏️ تمرین‌های عملی</li>
+                        <li>🏆 سیستم پاداش و سطح‌بندی</li>
+                        <li>📊 ردیابی پیشرفت</li>
+                    </ul>
+                    <hr>
+                    <p>ساخته شده با ❤️ برای جامعه توسعه‌دهندگان وب</p>
+                </div>
+                <button class="btn btn-primary" onclick="ModalComponent.closeCurrentModal()">
+                    بستن
+                </button>
+            </div>
+        `;
+        
+        ModalComponent.showCustomModal('about-modal', aboutHTML);
+        this.showUserMenu(); // بستن منو
+    }
+}
+
+// اعمال تم ذخیره شده
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+        document.body.setAttribute('data-theme', savedTheme);
+    }
+});