85 lines
7.6 KiB
HTML
85 lines
7.6 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">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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>
|
|
<nav class="nav-bar fixed top-0 left-0 right-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-16">
|
|
<div class="flex items-center gap-3">
|
|
<a href="index.html" class="flex items-center gap-2 no-underline"><div class="logo-icon">🎱</div><span class="logo-text">GAMEHUS</span></a>
|
|
<div class="hidden md:flex items-center gap-1 ml-6"><a href="index.html" class="nav-link">الرئيسية</a><a href="games.html" class="nav-link">الألعاب</a><a href="top.html" class="nav-link">المتصدرون</a><a href="chat.html" class="nav-link">الدردشة</a></div>
|
|
</div>
|
|
<div class="flex items-center gap-2"><div class="online-badge"><span class="online-dot"></span><span id="online-count">8,432</span> متصل</div><a href="login.html" class="btn-outline-sm">دخول</a><a href="register.html" class="btn-primary-sm">تسجيل</a><button class="md:hidden mobile-toggle p-2"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg></button></div>
|
|
</div>
|
|
</nav>
|
|
<div id="mobile-menu" class="mobile-menu"><a href="index.html" class="block nav-link">الرئيسية</a><a href="games.html" class="block nav-link">الألعاب</a><a href="top.html" class="block nav-link">المتصدرون</a><a href="chat.html" class="block nav-link">الدردشة</a></div>
|
|
|
|
<div id="main-content" style="padding-top:64px;"></div>
|
|
|
|
<footer class="footer mt-16">
|
|
<div class="max-w-7xl mx-auto px-4 py-12">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<div><div class="flex items-center gap-2 mb-4"><span class="text-2xl">🎱</span><span class="text-xl font-bold text-white">GAMEHUS</span></div><p class="text-gray-400 text-sm">العب بلياردو وشطرنج مجانًا مع لاعبين من حول العالم.</p></div>
|
|
<div><h4 class="text-white font-semibold mb-3">الألعاب</h4><ul class="space-y-2 text-sm text-gray-400"><li><a href="games.html">8-Ball Pool</a></li><li><a href="games.html">9-Ball Pool</a></li><li><a href="games.html">الشطرنج</a></li></ul></div>
|
|
<div><h4 class="text-white font-semibold mb-3">المجتمع</h4><ul class="space-y-2 text-sm text-gray-400"><li><a href="top.html">المتصدرون</a></li><li><a href="chat.html">الدردشة</a></li><li><a href="tournaments.html">البطولات</a></li></ul></div>
|
|
<div><h4 class="text-white font-semibold mb-3">الحساب</h4><ul class="space-y-2 text-sm text-gray-400"><li><a href="register.html">إنشاء حساب</a></li><li><a href="login.html">تسجيل الدخول</a></li><li><a href="profile.html">الملف الشخصي</a></li></ul></div>
|
|
</div>
|
|
<div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-500 text-sm">© 2026 GAMEHUS - جميع الحقوق محفوظة</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const games = {
|
|
"billiards-8ball": { name: "8-Ball Pool", icon: "🎱" },
|
|
"billiards-9ball": { name: "9-Ball Pool", icon: "🎱" },
|
|
"billiards-snooker": { name: "Snooker", icon: "🎯" },
|
|
"chess-classic": { name: "Classic Chess", icon: "♟️" },
|
|
"chess-rapid": { name: "Rapid Chess", icon: "⏱️" },
|
|
"checkers": { name: "Checkers", icon: "🔴" }
|
|
};
|
|
const id = new URLSearchParams(location.search).get("gameId") || "billiards-8ball";
|
|
const game = games[id] || games["billiards-8ball"];
|
|
const rooms = Array.from({ length: 9 }, (_, i) => ({
|
|
id: 1001 + i * 37,
|
|
name: `غرفة ${["الأبطال", "النخبة", "المبتدئين", "المحترفين", "السريعة", "الليلية", "العرب", "الخليج", "التحدي"][i]}`,
|
|
host: ["ProShooter99", "PoolKing_X", "CueTigerz", "BallMaster", "NightHunter", "EagleEye", "SpinMaster", "DeepShot", "SilentStrike"][i],
|
|
players: i % 3 === 0 ? "2/2" : "1/2",
|
|
open: i % 3 !== 0,
|
|
level: ["مبتدئ", "متوسط", "متقدم", "محترف"][i % 4]
|
|
}));
|
|
document.title = `غرف ${game.name} - GAMEHUS`;
|
|
document.getElementById("main-content").innerHTML = `
|
|
<div class="max-w-6xl mx-auto px-4 py-12">
|
|
<div class="flex items-center gap-4 mb-8 flex-wrap">
|
|
<a href="game-details.html?id=${id}" style="color:#6b7280;font-size:0.9rem;">← ${game.name}</a>
|
|
<span style="color:#4b5563;">/</span>
|
|
<div style="display:flex;align-items:center;gap:8px;"><span style="font-size:1.5rem;">${game.icon}</span><h1 style="font-size:1.5rem;font-weight:800;color:#fff;">غرف ${game.name}</h1></div>
|
|
<div style="margin-right:auto;"><span style="background:rgba(0,200,81,0.1);border:1px solid rgba(0,200,81,0.3);color:#4ade80;padding:4px 12px;border-radius:20px;font-size:0.8rem;">${rooms.filter(r => r.open).length} غرفة متاحة</span></div>
|
|
</div>
|
|
<div class="flex gap-3 mb-6 flex-wrap">
|
|
<a href="register.html" class="btn-primary text-sm py-2 px-5">+ إنشاء غرفة جديدة</a>
|
|
<button class="btn-outline-sm">كل المستويات</button>
|
|
<button class="btn-outline-sm">بدون رهان</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
${rooms.map(r => `
|
|
<div class="card" style="padding:16px;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;"><div><div style="font-weight:700;color:#fff;font-size:0.95rem;">${r.name}</div><div style="font-size:0.75rem;color:#6b7280;margin-top:2px;">#${r.id}</div></div><span style="font-size:0.75rem;font-weight:700;padding:3px 10px;border-radius:20px;background:${r.open ? "rgba(34,197,94,0.15)" : "rgba(239,68,68,0.15)"};color:${r.open ? "#22c55e" : "#ef4444"};">${r.open ? "انتظار" : "مكتملة"}</span></div>
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;"><div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#00c851,#0070f3);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0;">${r.host.substring(0,2).toUpperCase()}</div><div><div style="font-size:0.8rem;font-weight:600;color:#d1d5db;">${r.host}</div><div style="font-size:0.7rem;color:#6b7280;">المضيف</div></div></div>
|
|
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;"><span style="font-size:0.72rem;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,0.06);color:#9ca3af;">👥 ${r.players}</span><span style="font-size:0.72rem;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,0.06);color:#9ca3af;">⚡ ${r.level}</span></div>
|
|
${r.open ? `<a href="register.html" class="btn-primary w-full text-center text-sm py-2 block">▶ انضم للغرفة</a>` : `<button disabled style="width:100%;padding:8px;border-radius:8px;background:rgba(255,255,255,0.05);color:#4b5563;font-size:0.85rem;border:1px solid rgba(255,255,255,0.05);">🔒 الغرفة ممتلئة</button>`}
|
|
</div>`).join("")}
|
|
</div>
|
|
</div>`;
|
|
</script>
|
|
<script src="static/script.js"></script>
|
|
</body>
|
|
</html>
|