393 lines
22 KiB
HTML
393 lines
22 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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="static/style.css" rel="stylesheet">
|
|
</head>
|
|
<body data-page="dashboard" class="auth-guard">
|
|
|
|
<div class="app-shell">
|
|
|
|
<!-- TOP BAR -->
|
|
<header id="topbar" class="topbar"></header>
|
|
|
|
<!-- BODY ROW -->
|
|
<div class="app-body">
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside id="sidebar" class="sidebar"></aside>
|
|
|
|
<!-- CONTENT AREA -->
|
|
<main class="content-area" id="main-tabs-host">
|
|
|
|
<!-- Main Tab Bar -->
|
|
<div class="tab-bar" id="main-tab-bar">
|
|
<div class="tab-item active" data-tid="home">
|
|
<span class="tab-icon">🏠</span>
|
|
<span class="tab-label">الرئيسية</span>
|
|
</div>
|
|
<div class="tab-item" data-tid="games-tab" onclick="openTab('games-tab','🎮','الألعاب','games-panel')">
|
|
<span class="tab-icon">🎮</span>
|
|
<span class="tab-label">الألعاب</span>
|
|
</div>
|
|
<div class="tab-item" data-tid="top-tab" onclick="openTab('top-tab','🏆','المتصدرون','top-panel')">
|
|
<span class="tab-icon">🏆</span>
|
|
<span class="tab-label">المتصدرون</span>
|
|
</div>
|
|
<div class="tab-item" data-tid="chat-tab" onclick="openTab('chat-tab','💬','الدردشة','chat-panel')">
|
|
<span class="tab-icon">💬</span>
|
|
<span class="tab-label">الدردشة</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Panels -->
|
|
<div class="tab-panels" id="main-tab-panels">
|
|
|
|
<!-- ══ HOME PANEL ════════════════════════════════════════ -->
|
|
<div class="tab-panel active" data-panel="home">
|
|
<div class="panel">
|
|
|
|
<!-- Welcome Banner -->
|
|
<div id="welcome-banner" style="background:linear-gradient(135deg,rgba(212,160,23,0.13) 0%,rgba(122,92,12,0.07) 100%);border:1px solid var(--border-gold);border-radius:16px;padding:28px 32px;margin-bottom:28px;position:relative;overflow:hidden;">
|
|
<div style="position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);"></div>
|
|
<div style="position:absolute;inset:0;background-image:radial-gradient(circle 1px at 15% 50%,rgba(212,160,23,0.3) 0%,transparent 100%),radial-gradient(circle 1px at 85% 30%,rgba(212,160,23,0.2) 0%,transparent 100%);"></div>
|
|
<div style="position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;">
|
|
<div>
|
|
<div style="font-size:0.8rem;color:var(--gold-mid);font-weight:800;letter-spacing:1px;margin-bottom:6px;">مرحباً بعودتك 👑</div>
|
|
<h1 id="welcome-name" style="font-size:1.8rem;font-weight:900;color:var(--text-main);margin-bottom:8px;">Loading...</h1>
|
|
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
|
|
<span id="welcome-vip"></span>
|
|
<span style="font-size:0.82rem;color:var(--text-muted);">📅 آخر دخول: اليوم</span>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:10px;flex-wrap:wrap;">
|
|
<div style="text-align:center;padding:14px 20px;background:rgba(0,0,0,0.2);border-radius:12px;border:1px solid rgba(212,160,23,0.2);">
|
|
<div style="font-size:1.3rem;font-weight:900;" class="gold-text" id="dash-gold">0</div>
|
|
<div style="font-size:0.72rem;color:var(--text-muted);margin-top:2px;">🪙 ذهب</div>
|
|
</div>
|
|
<div style="text-align:center;padding:14px 20px;background:rgba(0,0,0,0.2);border-radius:12px;border:1px solid rgba(176,184,200,0.2);">
|
|
<div style="font-size:1.3rem;font-weight:900;color:var(--silver-light);" id="dash-silver">0</div>
|
|
<div style="font-size:0.72rem;color:var(--text-muted);margin-top:2px;">🔘 فضة</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Row -->
|
|
<div class="grid grid-cols-4 gap-4 mb-8" style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">👥</div>
|
|
<div class="stat-value gold-text" data-count="8432">0</div>
|
|
<div class="stat-label">متصل الآن</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🎮</div>
|
|
<div class="stat-value" style="color:#4ade80;" data-count="3219">0</div>
|
|
<div class="stat-label">يلعبون الآن</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🏠</div>
|
|
<div class="stat-value" style="color:#a78bfa;" data-count="847">0</div>
|
|
<div class="stat-label">غرفة مفتوحة</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🏆</div>
|
|
<div class="stat-value" style="color:var(--gold);" data-count="12">0</div>
|
|
<div class="stat-label">بطولة نشطة</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Games + Leaderboard row -->
|
|
<div style="display:grid;grid-template-columns:1fr 360px;gap:20px;margin-bottom:24px;">
|
|
|
|
<!-- Featured Games -->
|
|
<div>
|
|
<div class="section-title">🎮 ألعاب مميزة</div>
|
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
|
|
${[
|
|
{id:'billiards-8ball',name:'8-Ball Pool',icon:'🎱',bg:'linear-gradient(135deg,#0a2010,#143020)',players:1247,badge:'الأكثر شعبية'},
|
|
{id:'chess-classic', name:'الشطرنج', icon:'♟️',bg:'linear-gradient(135deg,#10121a,#1a1e30)',players:2103,badge:'استراتيجي'},
|
|
{id:'billiards-9ball',name:'9-Ball', icon:'🎯',bg:'linear-gradient(135deg,#0a1a18,#102820)',players:892, badge:'مميز'},
|
|
].map(g => `
|
|
<div class="game-card" onclick="location.href='game-details.html?id=${g.id}'">
|
|
<div class="game-card-thumb" style="background:${g.bg};">
|
|
<span style="position:relative;z-index:1;filter:drop-shadow(0 0 12px rgba(212,160,23,0.4));">${g.icon}</span>
|
|
<span style="position:absolute;top:8px;right:8px;z-index:2;" class="badge badge-gold">${g.badge}</span>
|
|
</div>
|
|
<div class="game-card-body">
|
|
<div class="game-card-title">${g.name}</div>
|
|
<div style="display:flex;align-items:center;gap:5px;margin-top:6px;">
|
|
<span class="online-dot"></span>
|
|
<span class="game-card-sub" style="color:#4ade80;">${g.players.toLocaleString('ar')} يلعبون</span>
|
|
</div>
|
|
<button class="btn btn-gold btn-sm" style="width:100%;justify-content:center;margin-top:10px;">▶ العب</button>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mini Leaderboard -->
|
|
<div>
|
|
<div class="section-title" style="display:flex;align-items:center;justify-content:space-between;">
|
|
<span>🏆 المتصدرون</span>
|
|
<a href="#" onclick="switchMainTab('top-tab');return false;" style="font-size:0.75rem;color:var(--gold);font-weight:700;">عرض الكل →</a>
|
|
</div>
|
|
<div class="card" style="padding:0;overflow:hidden;">
|
|
<table class="rank-table">
|
|
<tbody>
|
|
${[
|
|
{r:1,name:'ProShooter99',flag:'🇸🇦',pts:'15,420'},
|
|
{r:2,name:'PoolKing_X', flag:'🇪🇬',pts:'14,200'},
|
|
{r:3,name:'ChessWizard', flag:'🇲🇦',pts:'13,800'},
|
|
{r:4,name:'BallMaster', flag:'🇦🇪',pts:'12,950'},
|
|
{r:5,name:'NightHunter', flag:'🇱🇧',pts:'12,100'},
|
|
].map(p => `
|
|
<tr>
|
|
<td class="rank-${p.r<=3?p.r:'rest'}">${p.r===1?'🥇':p.r===2?'🥈':p.r===3?'🥉':p.r}</td>
|
|
<td style="font-weight:600;color:var(--text-main);">${p.flag} ${p.name}</td>
|
|
<td class="gold-text" style="font-weight:800;font-size:0.85rem;">${p.pts}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monthly Points Train (preview) -->
|
|
<div class="card card-gold" style="padding:20px;margin-bottom:24px;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;">
|
|
<div>
|
|
<div class="section-title" style="margin-bottom:2px;">🚂 قطار الجوائز الشهرية</div>
|
|
<div style="font-size:0.8rem;color:var(--text-muted);">اجمع نقاطاً وصل إلى المحطات لتحصل على جوائز</div>
|
|
</div>
|
|
<a href="train.html" class="btn btn-outline-gold btn-sm">عرض التفاصيل</a>
|
|
</div>
|
|
<!-- Track preview -->
|
|
<div class="train-track">
|
|
${[
|
|
{n:1,pts:'100',done:true,label:'بداية',reward:'50🔘'},
|
|
{n:2,pts:'300',done:true,label:'محطة 2',reward:'150🔘'},
|
|
{n:3,pts:'600',done:false,current:true,label:'محطة 3 ← أنت هنا',reward:'300🔘'},
|
|
{n:4,pts:'1000',done:false,label:'محطة 4',reward:'500🔘'},
|
|
{n:5,pts:'1500',done:false,label:'محطة 5',reward:'1🪙'},
|
|
{n:6,pts:'2500',done:false,label:'نهاية الشهر',reward:'5🪙 + لقب'},
|
|
].map((s,i,arr) => `
|
|
${i>0?`<div class="station-line ${s.done?'done':''}"></div>`:''}
|
|
<div class="station ${s.done?'done':''} ${s.current?'current':''}" title="${s.reward}">
|
|
<div class="station-dot">${s.done?'✓':s.current?'★':s.n}</div>
|
|
<div class="station-label" style="${s.current?'color:var(--gold);font-weight:700;':''}">${s.label}</div>
|
|
<div style="font-size:0.62rem;color:var(--gold-mid);margin-top:2px;">${s.reward}</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- /home panel -->
|
|
|
|
<!-- ══ GAMES PANEL ═══════════════════════════════════════ -->
|
|
<div class="tab-panel" data-panel="games-tab">
|
|
<div style="flex:1;overflow:hidden;" data-inner-tabs>
|
|
<div class="inner-tab-bar">
|
|
<button class="inner-tab" data-inner-tab="all">الكل</button>
|
|
<button class="inner-tab" data-inner-tab="billiards">🎱 البلياردو</button>
|
|
<button class="inner-tab" data-inner-tab="chess">♟️ الشطرنج</button>
|
|
<button class="inner-tab" data-inner-tab="checkers">🔴 الداما</button>
|
|
</div>
|
|
<div class="inner-panel" data-inner-panel="all">
|
|
<div class="inner-content">
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;">
|
|
${[
|
|
{id:'billiards-8ball',name:'8-Ball Pool',icon:'🎱',bg:'linear-gradient(135deg,#0a2010,#143020)',players:1247,badge:'الأكثر شعبية',cat:'billiards'},
|
|
{id:'billiards-9ball',name:'9-Ball Pool',icon:'🎱',bg:'linear-gradient(135deg,#0a1a18,#102820)',players:892,badge:'مميز',cat:'billiards'},
|
|
{id:'billiards-snooker',name:'Snooker',icon:'🎯',bg:'linear-gradient(135deg,#0a1810,#122018)',players:654,badge:'احترافي',cat:'billiards'},
|
|
{id:'chess-classic',name:'Classic Chess',icon:'♟️',bg:'linear-gradient(135deg,#10121a,#1a1e30)',players:2103,badge:'الأكثر شعبية',cat:'chess'},
|
|
{id:'chess-rapid',name:'Rapid Chess',icon:'⏱️',bg:'linear-gradient(135deg,#141418,#20202c)',players:1456,badge:'سريع',cat:'chess'},
|
|
{id:'checkers',name:'Checkers',icon:'🔴',bg:'linear-gradient(135deg,#1a0a0a,#2c1212)',players:445,badge:'كلاسيكي',cat:'checkers'},
|
|
].map(g => `
|
|
<div class="game-card" onclick="location.href='game-details.html?id=${g.id}'">
|
|
<div class="game-card-thumb" style="background:${g.bg};">
|
|
<span style="position:relative;z-index:1;filter:drop-shadow(0 0 12px rgba(212,160,23,0.4));">${g.icon}</span>
|
|
<span style="position:absolute;top:8px;right:8px;z-index:2;" class="badge badge-gold">${g.badge}</span>
|
|
</div>
|
|
<div class="game-card-body">
|
|
<div class="game-card-title">${g.name}</div>
|
|
<div style="display:flex;align-items:center;gap:5px;margin:6px 0;">
|
|
<span class="online-dot"></span>
|
|
<span class="game-card-sub" style="color:#4ade80;">${g.players.toLocaleString('ar')} يلعبون</span>
|
|
</div>
|
|
<div style="display:flex;gap:6px;">
|
|
<button class="btn btn-gold btn-sm" style="flex:1;justify-content:center;">▶ العب</button>
|
|
<a href="rooms.html?gameId=${g.id}" class="btn btn-ghost btn-sm" style="flex:1;justify-content:center;">🏠</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inner-panel" data-inner-panel="billiards">
|
|
<div class="inner-content"><p style="color:var(--text-muted);">يتم تحميل ألعاب البلياردو...</p></div>
|
|
</div>
|
|
<div class="inner-panel" data-inner-panel="chess">
|
|
<div class="inner-content"><p style="color:var(--text-muted);">يتم تحميل ألعاب الشطرنج...</p></div>
|
|
</div>
|
|
<div class="inner-panel" data-inner-panel="checkers">
|
|
<div class="inner-content"><p style="color:var(--text-muted);">يتم تحميل ألعاب الداما...</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ TOP PANEL ══════════════════════════════════════════ -->
|
|
<div class="tab-panel" data-panel="top-tab">
|
|
<div style="flex:1;overflow:hidden;" data-inner-tabs>
|
|
<div class="inner-tab-bar">
|
|
<button class="inner-tab" data-inner-tab="top-billiards">🎱 البلياردو</button>
|
|
<button class="inner-tab" data-inner-tab="top-chess">♟️ الشطرنج</button>
|
|
</div>
|
|
<div class="inner-panel" data-inner-panel="top-billiards">
|
|
<div class="inner-content">
|
|
<a href="top.html" class="btn btn-outline-gold btn-sm" style="margin-bottom:16px;">🔗 فتح الصفحة الكاملة</a>
|
|
<div class="card" style="overflow:hidden;">
|
|
<table class="rank-table">
|
|
<thead><tr><th>#</th><th>اللاعب</th><th>الانتصارات</th><th>النقاط</th></tr></thead>
|
|
<tbody>
|
|
${[
|
|
{r:1,n:'ProShooter99',f:'🇸🇦',w:2847,p:15420},
|
|
{r:2,n:'PoolKing_X',f:'🇪🇬',w:2610,p:14200},
|
|
{r:3,n:'SnookerLegend',f:'🇲🇦',w:2455,p:13800},
|
|
{r:4,n:'BallMaster',f:'🇦🇪',w:2300,p:12950},
|
|
{r:5,n:'CueTigerz',f:'🇮🇶',w:2190,p:12100},
|
|
{r:6,n:'SilentStrike',f:'🇯🇴',w:2050,p:11300},
|
|
{r:7,n:'NightHunter',f:'🇱🇧',w:1980,p:10800},
|
|
{r:8,n:'SpinMaster',f:'🇰🇼',w:1870,p:10200},
|
|
].map(p=>`
|
|
<tr>
|
|
<td class="rank-${p.r<=3?p.r:'rest'}">${p.r===1?'🥇':p.r===2?'🥈':p.r===3?'🥉':p.r}</td>
|
|
<td style="font-weight:600;color:var(--text-main);">${p.f} ${p.n}</td>
|
|
<td style="color:#4ade80;">${p.w.toLocaleString()}</td>
|
|
<td class="gold-text" style="font-weight:800;">${p.p.toLocaleString()}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inner-panel" data-inner-panel="top-chess">
|
|
<div class="inner-content"><p style="color:var(--text-muted);">جدول الشطرنج...</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ CHAT PANEL ═════════════════════════════════════════ -->
|
|
<div class="tab-panel" data-panel="chat-tab">
|
|
<div class="chat-wrap">
|
|
<div class="chat-messages" id="chat-msgs">
|
|
${[
|
|
{u:'ProShooter99',c:'🇸🇦',m:'من يريد مباراة بلياردو؟ 🎱',t:'00:01'},
|
|
{u:'ChessWizard',c:'🇲🇦',m:'هل هناك بطولة شطرنج اليوم؟',t:'00:03'},
|
|
{u:'PoolKing_X',c:'🇪🇬',m:'أنا جاهز لتحدي 8-Ball!',t:'00:05'},
|
|
{u:'NightHunter',c:'🇱🇧',m:'GG أفضل لعبة الليلة 🏆',t:'00:08'},
|
|
{u:'TacticalMove',c:'🇦🇪',m:'تحدي مفتوح في الشطرنج، ادخلوا غرفتي',t:'00:10'},
|
|
{u:'BallMaster',c:'🇦🇪',m:'مستعد لأي تحدٍ 💪',t:'00:12'},
|
|
].map(m=>`
|
|
<div class="chat-bubble">
|
|
<div class="chat-avatar">${m.u.substring(0,2).toUpperCase()}</div>
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:6px;">
|
|
<span class="chat-name">${m.u}</span>
|
|
<span style="font-size:0.8rem;">${m.c}</span>
|
|
<span class="chat-time">${m.t}</span>
|
|
</div>
|
|
<div class="chat-text">${m.m}</div>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
<div class="chat-input-bar">
|
|
<input class="chat-input" id="chat-in" placeholder="اكتب رسالتك..." onkeydown="if(event.key==='Enter')sendMsg()">
|
|
<button class="btn btn-gold btn-sm" onclick="sendMsg()">إرسال</button>
|
|
<a href="chat.html" class="btn btn-ghost btn-sm">توسيع</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /tab-panels -->
|
|
</main>
|
|
|
|
</div><!-- /app-body -->
|
|
</div><!-- /app-shell -->
|
|
|
|
<script src="static/script.js"></script>
|
|
<script>
|
|
const user = Auth.requireAuth();
|
|
if (user) {
|
|
// populate welcome
|
|
document.getElementById('welcome-name').textContent = 'أهلاً، ' + user.username + ' 👋';
|
|
document.getElementById('dash-gold').textContent = (user.gold||0).toLocaleString('ar');
|
|
document.getElementById('dash-silver').textContent = (user.silver||0).toLocaleString('ar');
|
|
if (user.vip) {
|
|
document.getElementById('welcome-vip').innerHTML = '<span class="vip-badge">✨ VIP</span>';
|
|
}
|
|
}
|
|
|
|
// Tab switching for main tabs
|
|
const mainTabBar = document.getElementById('main-tab-bar');
|
|
const mainPanels = document.getElementById('main-tab-panels');
|
|
|
|
mainTabBar.querySelectorAll('.tab-item').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
mainTabBar.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
const tid = tab.dataset.tid;
|
|
mainPanels.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
|
const panel = mainPanels.querySelector(`[data-panel="${tid}"]`);
|
|
if (panel) {
|
|
panel.classList.add('active');
|
|
// init inner tabs if first time
|
|
panel.querySelectorAll('[data-inner-tabs]:not(.init-done)').forEach(el => {
|
|
setupInnerTabs(el);
|
|
el.classList.add('init-done');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
function switchMainTab(tid) {
|
|
const tab = mainTabBar.querySelector(`[data-tid="${tid}"]`);
|
|
if (tab) tab.click();
|
|
}
|
|
|
|
function sendMsg() {
|
|
const inp = document.getElementById('chat-in');
|
|
const msg = inp.value.trim();
|
|
if (!msg || !user) return;
|
|
const box = document.getElementById('chat-msgs');
|
|
const now = new Date();
|
|
const time = now.getHours().toString().padStart(2,'0') + ':' + now.getMinutes().toString().padStart(2,'0');
|
|
const el = document.createElement('div');
|
|
el.className = 'chat-bubble animate-in';
|
|
el.innerHTML = `
|
|
<div class="chat-avatar" style="background:linear-gradient(135deg,var(--gold-dark),var(--gold-dim));">${user.username.substring(0,2).toUpperCase()}</div>
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:6px;">
|
|
<span class="chat-name">${user.username}</span>
|
|
<span class="chat-time">${time}</span>
|
|
</div>
|
|
<div class="chat-text">${msg}</div>
|
|
</div>`;
|
|
box.appendChild(el);
|
|
box.scrollTop = box.scrollHeight;
|
|
inp.value = '';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|