87 lines
7.9 KiB
HTML
87 lines
7.9 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 = [
|
|
{ id: "billiards-8ball", name: "8-Ball Pool", icon: "🎱", players: 1247, desc: "اللعبة الكلاسيكية الأشهر." },
|
|
{ id: "billiards-9ball", name: "9-Ball Pool", icon: "🎱", players: 892, desc: "وضع سريع وتنافسي." },
|
|
{ id: "billiards-snooker", name: "Snooker", icon: "🎯", players: 654, desc: "أسلوب احترافي لعشاق الدقة." },
|
|
{ id: "chess-classic", name: "Classic Chess", icon: "♟️", players: 2103, desc: "استراتيجية وتخطيط." },
|
|
{ id: "chess-rapid", name: "Rapid Chess", icon: "⏱️", players: 1456, desc: "حسم سريع خلال 10 دقائق." },
|
|
{ id: "checkers", name: "Checkers", icon: "🔴", players: 445, desc: "داما ممتعة وسلسة." }
|
|
];
|
|
const params = new URLSearchParams(location.search);
|
|
const id = params.get("id");
|
|
const game = games.find(g => g.id === id) || games[0];
|
|
const similar = games.filter(g => g.id !== game.id).slice(0, 3);
|
|
document.title = `${game.name} - GAMEHUS`;
|
|
document.getElementById("main-content").innerHTML = `
|
|
<div class="max-w-7xl mx-auto px-4 py-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<div class="flex items-center gap-3 mb-6"><span class="text-3xl">${game.icon}</span><div><h1 class="text-2xl font-black text-white">${game.name}</h1><div class="flex items-center gap-2 mt-1"><span class="online-dot"></span><span style="color:#4ade80;font-size:0.85rem;">${game.players.toLocaleString()} يلعبون الآن</span></div></div></div>
|
|
<div class="card" style="background:linear-gradient(135deg,#0d1a0d,#1a2e1a);border:1px solid rgba(0,200,81,0.2);animation:glow 3s infinite;">
|
|
<div style="height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;position:relative;overflow:hidden;">
|
|
<div style="position:absolute;inset:0;background-image:radial-gradient(rgba(0,200,81,0.1) 1px,transparent 1px);background-size:24px 24px;opacity:0.45;"></div>
|
|
<div style="font-size:5rem;position:relative;z-index:1;">${game.icon}</div>
|
|
<h2 style="font-size:1.8rem;font-weight:900;color:#fff;position:relative;z-index:1;">${game.name}</h2>
|
|
<p style="color:#9ca3af;font-size:1rem;text-align:center;max-width:420px;position:relative;z-index:1;">${game.desc}</p>
|
|
<div class="flex gap-4 relative z-10 flex-wrap justify-center"><a href="register.html" class="btn-primary" style="font-size:1.05rem;padding:14px 40px;">🎮 العب الآن - مجانًا</a><a href="rooms.html?gameId=${game.id}" class="btn-secondary" style="font-size:1rem;padding:14px 30px;">🏠 الغرف</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="card p-4">
|
|
<h3 class="text-base font-bold text-white mb-4">🏠 غرف مفتوحة</h3>
|
|
<div class="space-y-2">
|
|
<div style="padding:10px 12px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.06);"><div style="font-size:0.85rem;font-weight:700;color:#e2e8f0;">غرفة Ace #1001</div><div style="font-size:0.75rem;color:#6b7280;">بانتظار منافس</div></div>
|
|
<div style="padding:10px 12px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.06);"><div style="font-size:0.85rem;font-weight:700;color:#e2e8f0;">غرفة Pro #1038</div><div style="font-size:0.75rem;color:#6b7280;">بانتظار منافس</div></div>
|
|
</div>
|
|
<a href="rooms.html?gameId=${game.id}" class="btn-outline-sm w-full text-center mt-3 block text-sm">عرض كل الغرف</a>
|
|
</div>
|
|
<div class="card p-4">
|
|
<h3 class="text-base font-bold text-white mb-4">🎮 ألعاب مشابهة</h3>
|
|
<div class="space-y-3">${similar.map(s => `<a href="game-details.html?id=${s.id}" style="display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.06);"><span style="font-size:1.7rem;">${s.icon}</span><div><div style="font-size:0.9rem;font-weight:700;color:#e2e8f0;">${s.name}</div><div style="font-size:0.75rem;color:#4ade80;">${s.players.toLocaleString()} يلعبون</div></div></a>`).join("")}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
</script>
|
|
<script src="static/script.js"></script>
|
|
</body>
|
|
</html>
|