166 lines
10 KiB
HTML
166 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>GAMEHUS — الملف الشخصي</title>
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link href="static/style.css" rel="stylesheet">
|
||
</head>
|
||
<body data-page="profile" class="auth-guard">
|
||
|
||
<div class="app-shell">
|
||
<header id="topbar" class="topbar"></header>
|
||
<div class="app-body">
|
||
<aside id="sidebar" class="sidebar"></aside>
|
||
<main class="content-area">
|
||
|
||
<div style="flex:1;overflow:hidden;display:flex;flex-direction:column;" data-inner-tabs>
|
||
<div class="inner-tab-bar">
|
||
<button class="inner-tab" data-inner-tab="p-info">📋 المعلومات</button>
|
||
<button class="inner-tab" data-inner-tab="p-stats">📊 الإحصائيات</button>
|
||
<button class="inner-tab" data-inner-tab="p-currency">💰 العملات</button>
|
||
<button class="inner-tab" data-inner-tab="p-security">🔒 الأمان</button>
|
||
</div>
|
||
|
||
<!-- Info Tab -->
|
||
<div class="inner-panel" data-inner-panel="p-info">
|
||
<div class="inner-content">
|
||
<!-- Profile Header -->
|
||
<div style="background:linear-gradient(135deg,rgba(212,160,23,0.1),rgba(0,0,0,0));border:1px solid var(--border-gold);border-radius:16px;padding:28px;margin-bottom:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;">
|
||
<div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--gold-dark),var(--gold-dim));border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;color:var(--gold-light);flex-shrink:0;" id="p-avatar">--</div>
|
||
<div style="flex:1;">
|
||
<div style="font-size:1.5rem;font-weight:900;color:var(--text-main);" id="p-name">--</div>
|
||
<div style="font-size:0.82rem;color:var(--text-muted);margin-top:2px;" id="p-email">--</div>
|
||
<div style="display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;" id="p-badges"></div>
|
||
</div>
|
||
<button class="btn btn-outline-gold btn-sm" onclick="Toast.show('تعديل الملف قريباً','gold')">✏️ تعديل</button>
|
||
</div>
|
||
|
||
<!-- Info Form -->
|
||
<div style="max-width:520px;">
|
||
<div class="form-group">
|
||
<label class="form-label">اسم المستخدم</label>
|
||
<input class="form-input" id="pi-username" readonly style="opacity:0.7;">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">البريد الإلكتروني</label>
|
||
<input class="form-input" id="pi-email" readonly style="opacity:0.7;">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">الدور</label>
|
||
<input class="form-input" id="pi-role" readonly style="opacity:0.7;">
|
||
</div>
|
||
<button class="btn btn-gold" onclick="Toast.show('حفظ التغييرات قريباً مع Firebase','gold')">💾 حفظ التغييرات</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats Tab -->
|
||
<div class="inner-panel" data-inner-panel="p-stats">
|
||
<div class="inner-content">
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:24px;">
|
||
${[
|
||
{icon:'🎮',label:'مباريات اللعب',val:'342',color:'var(--gold)'},
|
||
{icon:'🏆',label:'انتصارات',val:'198',color:'#4ade80'},
|
||
{icon:'💔',label:'خسائر',val:'144',color:'#f87171'},
|
||
{icon:'⭐',label:'نسبة الفوز',val:'57%',color:'var(--gold)'},
|
||
{icon:'🔥',label:'أعلى انتصارات',val:'12',color:'#fb923c'},
|
||
{icon:'⏱️',label:'ساعات اللعب',val:'89',color:'#a78bfa'},
|
||
].map(s=>`
|
||
<div class="stat-card">
|
||
<div class="stat-icon">${s.icon}</div>
|
||
<div class="stat-value" style="color:${s.color};">${s.val}</div>
|
||
<div class="stat-label">${s.label}</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Currency Tab -->
|
||
<div class="inner-panel" data-inner-panel="p-currency">
|
||
<div class="inner-content">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:520px;margin-bottom:24px;">
|
||
<!-- Gold -->
|
||
<div style="background:linear-gradient(135deg,rgba(212,160,23,0.12),rgba(122,92,12,0.07));border:1px solid var(--border-gold);border-radius:14px;padding:22px;text-align:center;">
|
||
<div style="font-size:2.5rem;margin-bottom:6px;">🪙</div>
|
||
<div style="font-size:2rem;font-weight:900;" class="gold-text" id="pc-gold">0</div>
|
||
<div style="font-size:0.8rem;color:var(--text-muted);margin:6px 0 14px;">ذهب مدفوع</div>
|
||
<button class="btn btn-gold btn-sm" style="width:100%;justify-content:center;" onclick="openShop()">شحن الذهب ➕</button>
|
||
</div>
|
||
<!-- Silver -->
|
||
<div style="background:rgba(176,184,200,0.07);border:1px solid rgba(176,184,200,0.2);border-radius:14px;padding:22px;text-align:center;">
|
||
<div style="font-size:2.5rem;margin-bottom:6px;">🔘</div>
|
||
<div style="font-size:2rem;font-weight:900;color:var(--silver-light);" id="pc-silver">0</div>
|
||
<div style="font-size:0.8rem;color:var(--text-muted);margin:6px 0 14px;">فضة مجانية</div>
|
||
<button class="btn btn-ghost btn-sm" style="width:100%;justify-content:center;" onclick="Toast.show('احصل على الفضة من خلال الألعاب والأنشطة','gold')">كيف أحصل عليها؟</button>
|
||
</div>
|
||
</div>
|
||
<div style="background:rgba(212,160,23,0.05);border:1px solid rgba(212,160,23,0.15);border-radius:12px;padding:16px;font-size:0.82rem;color:var(--text-muted);max-width:520px;">
|
||
<div style="font-weight:800;color:var(--gold-mid);margin-bottom:8px;">💡 كيف يعمل نظام العملات؟</div>
|
||
<ul style="space-y:6px;padding-right:16px;line-height:2;">
|
||
<li>🪙 <strong style="color:var(--text-main);">الذهب</strong> — عملة مدفوعة تُستخدم لشراء عناصر حصرية من المتجر</li>
|
||
<li>🔘 <strong style="color:var(--text-main);">الفضة</strong> — مجانية تُكسب من الألعاب والأنشطة والمحطات</li>
|
||
<li>⭐ <strong style="color:var(--text-main);">النقاط الشهرية</strong> — تتراكم طوال الشهر وتُحدّد جوائزك في القطار</li>
|
||
<li>🚂 <strong style="color:var(--text-main);">تذكرة VIP</strong> — تُضاعف جوائز المحطات وتفتح محطات حصرية</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Security Tab -->
|
||
<div class="inner-panel" data-inner-panel="p-security">
|
||
<div class="inner-content" style="max-width:480px;">
|
||
<div class="form-group">
|
||
<label class="form-label">كلمة المرور الحالية</label>
|
||
<input type="password" class="form-input" placeholder="••••••••">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">كلمة المرور الجديدة</label>
|
||
<input type="password" class="form-input" placeholder="••••••••">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">تأكيد كلمة المرور الجديدة</label>
|
||
<input type="password" class="form-input" placeholder="••••••••">
|
||
</div>
|
||
<button class="btn btn-gold" onclick="Toast.show('تغيير كلمة المرور سيتم ربطه بـ Firebase','gold')">🔒 تغيير كلمة المرور</button>
|
||
<div class="divider divider-gold" style="margin:24px 0;"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px;background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.2);border-radius:12px;">
|
||
<div>
|
||
<div style="font-weight:700;color:#f87171;font-size:0.9rem;">تسجيل الخروج من كل الأجهزة</div>
|
||
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:2px;">إنهاء جميع الجلسات النشطة</div>
|
||
</div>
|
||
<button class="btn btn-sm" style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;" onclick="Auth.logout()">خروج كامل</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="static/script.js"></script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const user = Auth.getSession();
|
||
if (!user) return;
|
||
const init = user.username.substring(0,2).toUpperCase();
|
||
document.getElementById('p-avatar').textContent = init;
|
||
document.getElementById('p-name').textContent = user.username;
|
||
document.getElementById('p-email').textContent = user.email;
|
||
document.getElementById('pi-username').value = user.username;
|
||
document.getElementById('pi-email').value = user.email;
|
||
document.getElementById('pi-role').value = user.role === 'admin' ? 'مدير' : 'مستخدم';
|
||
document.getElementById('pc-gold').textContent = (user.gold||0).toLocaleString('ar');
|
||
document.getElementById('pc-silver').textContent = (user.silver||0).toLocaleString('ar');
|
||
const badgesEl = document.getElementById('p-badges');
|
||
if (user.vip) badgesEl.innerHTML += `<span class="vip-badge">✨ VIP</span>`;
|
||
if (user.role==='admin') badgesEl.innerHTML += `<span class="badge badge-gold">⚙️ مدير</span>`;
|
||
badgesEl.innerHTML += `<span class="badge badge-green">🎮 لاعب نشط</span>`;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|