144 lines
8.4 KiB
HTML
144 lines
8.4 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="top" 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="board-billiards">🎱 البلياردو</button>
|
|
<button class="inner-tab" data-inner-tab="board-chess">♟️ الشطرنج</button>
|
|
</div>
|
|
|
|
<!-- Billiards board -->
|
|
<div class="inner-panel" data-inner-panel="board-billiards">
|
|
<div class="inner-content">
|
|
<!-- Period filters -->
|
|
<div style="display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center;justify-content:space-between;">
|
|
<h1 style="font-size:1.4rem;font-weight:900;" class="gold-text">🏆 متصدرو البلياردو</h1>
|
|
<div style="display:flex;gap:6px;" id="period-btns">
|
|
${['اليوم','الأسبوع','الشهر','الكل'].map((p,i)=>`
|
|
<button onclick="setPeriod(this)" style="padding:6px 14px;border-radius:8px;font-size:0.8rem;font-weight:700;border:1px solid ${i===3?'var(--border-gold)':'rgba(255,255,255,0.1)'};background:${i===3?'rgba(212,160,23,0.12)':'transparent'};color:${i===3?'var(--gold)':'var(--text-muted)'};cursor:pointer;transition:all 0.2s;">${p}</button>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Podium Top 3 -->
|
|
<div style="display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;margin-bottom:24px;align-items:end;">
|
|
<!-- 2nd -->
|
|
<div style="text-align:center;animation:fadeIn 0.5s ease 0.1s both;">
|
|
<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#8a8a9a,#5a5a6a);border:2px solid var(--silver);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:#fff;">2</div>
|
|
<div style="font-weight:700;color:var(--text-main);font-size:0.9rem;">🇪🇬 PoolKing_X</div>
|
|
<div style="font-size:0.78rem;color:var(--silver);margin-top:2px;">14,200 نقطة</div>
|
|
<div style="background:linear-gradient(135deg,var(--silver-dark),var(--silver));height:60px;margin-top:8px;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;">🥈</div>
|
|
</div>
|
|
<!-- 1st -->
|
|
<div style="text-align:center;animation:fadeIn 0.5s ease both;">
|
|
<div style="font-size:1.2rem;margin-bottom:4px;">👑</div>
|
|
<div style="width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold-mid));border:3px solid var(--gold);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:900;color:#1a0e00;box-shadow:var(--glow-gold);">1</div>
|
|
<div style="font-weight:800;color:var(--gold);font-size:1rem;">🇸🇦 ProShooter99</div>
|
|
<div style="font-size:0.82rem;color:var(--gold-mid);margin-top:2px;">15,420 نقطة</div>
|
|
<div style="background:linear-gradient(135deg,var(--gold-mid),var(--gold-dark));height:90px;margin-top:8px;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-size:2rem;">🥇</div>
|
|
</div>
|
|
<!-- 3rd -->
|
|
<div style="text-align:center;animation:fadeIn 0.5s ease 0.2s both;">
|
|
<div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#8a5a1a,#5a3a0a);border:2px solid #cd7f32;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;color:#fff;">3</div>
|
|
<div style="font-weight:700;color:var(--text-main);font-size:0.9rem;">🇲🇦 SnookerLegend</div>
|
|
<div style="font-size:0.78rem;color:#cd7f32;margin-top:2px;">13,800 نقطة</div>
|
|
<div style="background:linear-gradient(135deg,#8a5a1a,#5a3a0a);height:44px;margin-top:8px;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;">🥉</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Full Table -->
|
|
<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},
|
|
{r:9,n:'DeepShot',f:'🇸🇾',w:1750,p:9500},
|
|
{r:10,n:'EagleEye',f:'🇧🇭',w:1620,p:8900},
|
|
].map(p=>`
|
|
<tr style="animation:fadeIn 0.3s ease ${p.r*0.05}s both;">
|
|
<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;font-weight:600;">${p.w.toLocaleString()}</td>
|
|
<td class="gold-text" style="font-weight:800;">${p.p.toLocaleString()}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chess board -->
|
|
<div class="inner-panel" data-inner-panel="board-chess">
|
|
<div class="inner-content">
|
|
<h1 style="font-size:1.4rem;font-weight:900;margin-bottom:20px;" class="gold-text">🏆 متصدرو الشطرنج</h1>
|
|
<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:'GrandMaster_Z',f:'🇸🇦',w:1920,p:18500},
|
|
{r:2,n:'KingSlayer',f:'🇪🇬',w:1780,p:17200},
|
|
{r:3,n:'ChessWizard',f:'🇲🇦',w:1650,p:16100},
|
|
{r:4,n:'TacticalMove',f:'🇦🇪',w:1540,p:15400},
|
|
{r:5,n:'QueenTrapper',f:'🇮🇶',w:1410,p:14200},
|
|
{r:6,n:'EndgamePro',f:'🇯🇴',w:1320,p:13500},
|
|
{r:7,n:'RookRush',f:'🇱🇧',w:1200,p:12300},
|
|
{r:8,n:'BishopBoss',f:'🇰🇼',w:1090,p:11100},
|
|
].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;font-weight:600;">${p.w.toLocaleString()}</td>
|
|
<td class="gold-text" style="font-weight:800;">${p.p.toLocaleString()}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/script.js"></script>
|
|
<script>
|
|
function setPeriod(btn) {
|
|
document.querySelectorAll('#period-btns button').forEach(b => {
|
|
b.style.borderColor = 'rgba(255,255,255,0.1)';
|
|
b.style.background = 'transparent';
|
|
b.style.color = 'var(--text-muted)';
|
|
});
|
|
btn.style.borderColor = 'var(--border-gold)';
|
|
btn.style.background = 'rgba(212,160,23,0.12)';
|
|
btn.style.color = 'var(--gold)';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|