136 lines
6.8 KiB
HTML
136 lines
6.8 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="chat" 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">
|
|
|
|
<!-- 2-column layout: rooms list + chat area -->
|
|
<div style="display:flex;height:100%;overflow:hidden;">
|
|
|
|
<!-- Rooms column -->
|
|
<div style="width:200px;background:var(--bg-surface);border-left:1px solid var(--border-gold);display:flex;flex-direction:column;flex-shrink:0;">
|
|
<div style="padding:14px 12px 8px;border-bottom:1px solid var(--border-dim);">
|
|
<div style="font-size:0.7rem;font-weight:800;letter-spacing:2px;color:var(--gold-dim);text-transform:uppercase;">الغرف</div>
|
|
</div>
|
|
<div style="overflow-y:auto;flex:1;padding:8px;">
|
|
${[
|
|
{id:'general', icon:'🌍', name:'العامة', users:284, active:true},
|
|
{id:'billiards',icon:'🎱', name:'البلياردو', users:156},
|
|
{id:'chess', icon:'♟️', name:'الشطرنج', users:98},
|
|
{id:'vip', icon:'👑', name:'VIP فقط', users:34, vip:true},
|
|
{id:'help', icon:'❓', name:'المساعدة', users:22},
|
|
{id:'welcome', icon:'👋', name:'الترحيب', users:67},
|
|
].map(r=>`
|
|
<div onclick="switchRoom(this,'${r.id}')" style="display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:9px;cursor:pointer;margin-bottom:2px;background:${r.active?'rgba(212,160,23,0.1)':'transparent'};border:1px solid ${r.active?'var(--border-gold)':'transparent'};transition:all 0.2s;" onmouseover="if(!this.classList.contains('r-active'))this.style.background='rgba(255,255,255,0.04)'" onmouseout="if(!this.classList.contains('r-active'))this.style.background='transparent'" class="${r.active?'r-active':''}">
|
|
<div style="display:flex;align-items:center;gap:7px;">
|
|
<span style="font-size:0.9rem;">${r.icon}</span>
|
|
<span style="font-size:0.82rem;font-weight:600;color:${r.active?'var(--gold)':'var(--text-muted)'};">${r.name}</span>
|
|
${r.vip?`<span class="vip-badge vip-badge-outline" style="font-size:0.58rem;padding:1px 4px;">VIP</span>`:''}
|
|
</div>
|
|
<span style="font-size:0.68rem;color:var(--text-faint);">${r.users}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
<div style="padding:10px 12px;border-top:1px solid var(--border-dim);">
|
|
<div style="display:flex;align-items:center;gap:5px;">
|
|
<span class="online-dot"></span>
|
|
<span style="font-size:0.75rem;color:var(--text-muted);" id="chat-online">661 متصل</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Area -->
|
|
<div class="chat-wrap" style="flex:1;">
|
|
<div style="padding:10px 16px;border-bottom:1px solid var(--border-gold);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg-surface);">
|
|
<span id="room-icon" style="font-size:1.2rem;">🌍</span>
|
|
<div>
|
|
<div id="room-name" style="font-weight:800;color:var(--text-main);font-size:0.92rem;">الدردشة العامة</div>
|
|
<div id="room-count" style="font-size:0.72rem;color:var(--green);">284 متصل</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-messages" id="chat-messages">
|
|
<!-- messages injected by JS -->
|
|
</div>
|
|
<div class="chat-input-bar">
|
|
<input class="chat-input" id="msg-input" placeholder="اكتب رسالتك..." onkeydown="if(event.key==='Enter')sendMsg()">
|
|
<button class="btn btn-gold btn-sm" onclick="sendMsg()">إرسال ✈️</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/script.js"></script>
|
|
<script>
|
|
const SEED_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'},
|
|
{u:'KingSlayer',c:'🇪🇬',m:'من يريد لعبة شطرنج سريعة؟ ⏱️',t:'00:15'},
|
|
{u:'SpinMaster',c:'🇰🇼',m:'أنا جاهز! تعال غرفتي',t:'00:16'},
|
|
];
|
|
|
|
function renderMsg(m, own=false) {
|
|
const div = document.createElement('div');
|
|
div.className = 'chat-bubble animate-in';
|
|
div.innerHTML = `
|
|
<div class="chat-avatar" style="${own?'background:linear-gradient(135deg,var(--gold-dark),var(--gold-dim));':''}">${m.u.substring(0,2).toUpperCase()}</div>
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:6px;">
|
|
<span class="chat-name" style="${own?'color:var(--gold);':''}">${m.u}</span>
|
|
${m.c?`<span style="font-size:0.82rem;">${m.c}</span>`:''}
|
|
<span class="chat-time">${m.t}</span>
|
|
</div>
|
|
<div class="chat-text">${m.m}</div>
|
|
</div>`;
|
|
return div;
|
|
}
|
|
|
|
const box = document.getElementById('chat-messages');
|
|
SEED_MSGS.forEach(m => box.appendChild(renderMsg(m)));
|
|
box.scrollTop = box.scrollHeight;
|
|
|
|
function sendMsg() {
|
|
const user = Auth.getSession();
|
|
const inp = document.getElementById('msg-input');
|
|
const txt = inp.value.trim();
|
|
if (!txt || !user) return;
|
|
const now = new Date();
|
|
const t = now.getHours().toString().padStart(2,'0')+':'+now.getMinutes().toString().padStart(2,'0');
|
|
box.appendChild(renderMsg({u:user.username,c:'',m:txt,t}, true));
|
|
box.scrollTop = box.scrollHeight;
|
|
inp.value = '';
|
|
}
|
|
|
|
function switchRoom(el, roomId) {
|
|
document.querySelectorAll('.r-active').forEach(r => {
|
|
r.classList.remove('r-active');
|
|
r.style.background = 'transparent';
|
|
r.style.borderColor = 'transparent';
|
|
r.querySelector('span:nth-child(2)') && (r.querySelector('span:nth-child(2)').style.color = 'var(--text-muted)');
|
|
});
|
|
el.classList.add('r-active');
|
|
el.style.background = 'rgba(212,160,23,0.1)';
|
|
el.style.borderColor = 'var(--border-gold)';
|
|
Toast.show('انتقلت إلى ' + el.querySelector('span:nth-child(2)').textContent, 'gold', 2000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|