| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cash Control Pro | لوحة الإدارة الفاخرة</title> |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| body { |
| font-family: 'Tajawal', sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: #1E293B; |
| min-height: 100vh; |
| } |
| |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.25); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #0034FF 0%, #8B5CF6 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .stats-card { |
| transition: all 0.3s ease; |
| border-left: 4px solid #0034FF; |
| } |
| |
| .stats-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .user-card { |
| transition: all 0.3s ease; |
| border-right: 3px solid transparent; |
| } |
| |
| .user-card:hover { |
| border-right-color: #0034FF; |
| transform: scale(1.02); |
| } |
| |
| .medal-gold { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); } |
| .medal-silver { background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%); } |
| .medal-bronze { background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%); } |
| |
| .floating-btn { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| } |
| |
| .pulse-glow { |
| animation: pulse-glow 2s ease-in-out infinite alternate; |
| } |
| |
| @keyframes pulse-glow { |
| from { box-shadow: 0 0 20px rgba(0, 52, 255, 0.3); } |
| to { box-shadow: 0 0 30px rgba(0, 52, 255, 0.6); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen py-8 px-4"> |
| <div class="container mx-auto max-w-7xl"> |
| |
| <header class="glass-effect rounded-2xl p-8 mb-8 text-center pulse-glow"> |
| <h1 class="text-4xl font-bold gradient-text mb-4">Cash Control Pro 💰</h1> |
| <p class="text-white text-lg opacity-90">لوحة التحكم الفاخرة لإدارة المستخدمين والمزادات</p> |
| </header> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| <div class="stats-card glass-effect rounded-xl p-6 text-center"> |
| <div class="text-3xl mb-2">👥</div> |
| <h3 class="text-gray-600 text-sm mb-2">إجمالي المستخدمين</h3> |
| <p class="text-2xl font-bold text-blue-600" id="totalUsers">0</p> |
| </div> |
| |
| <div class="stats-card glass-effect rounded-xl p-6 text-center"> |
| <div class="text-3xl mb-2">💰</div> |
| <h3 class="text-gray-600 text-sm mb-2">إجمالي النقاط</h3> |
| <p class="text-2xl font-bold text-green-600" id="totalPoints">0</p> |
| </div> |
| |
| <div class="stats-card glass-effect rounded-xl p-6 text-center"> |
| <div class="text-3xl mb-2">⚡</div> |
| <h3 class="text-gray-600 text-sm mb-2">المزادات النشطة</h3> |
| <p class="text-2xl font-bold text-purple-600" id="activeAuctions">0</p> |
| </div> |
| |
| <div class="stats-card glass-effect rounded-xl p-6 text-center"> |
| <div class="text-3xl mb-2">🏆</div> |
| <h3 class="text-gray-600 text-sm mb-2">المزايدون اليوم</h3> |
| <p class="text-2xl font-bold text-orange-600" id="todayBidders">0</p> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2 space-y-8"> |
| |
| <div class="glass-effect rounded-2xl p-6"> |
| <h2 class="text-xl font-bold text-white mb-6 flex items-center"> |
| <span class="bg-gradient-to-r from-yellow-400 to-orange-500 p-2 rounded-lg mr-3">🏆</span> |
| أعلى 10 مستخدمين بالنقاط |
| </h2> |
| <div class="space-y-3" id="topUsersList"></div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6"> |
| <h2 class="text-xl font-bold text-white mb-4">🎯 إرسال النقاط لجميع المستخدمين</h2> |
| <div class="flex gap-4"> |
| <input type="number" id="pointsAmount" placeholder="عدد النقاط المراد إرسالها" |
| class="flex-1 bg-white/80 backdrop-blur-sm border border-white/30 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| <button id="sendPointsBtn" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-xl font-medium hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 floating-btn"> |
| <i class="fas fa-paper-plane mr-2"></i>إرسال النقاط |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6"> |
| <div class="relative"> |
| <i class="fas fa-search absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
| <input type="text" id="searchInput" placeholder="🔍 ابحث باسم المستخدم أو الـ ID" |
| class="w-full bg-white/80 backdrop-blur-sm border border-white/30 rounded-xl px-12 py-3 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6"> |
| <h2 class="text-xl font-bold text-white mb-6">👥 جميع المستخدمين</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="usersGrid"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-8"> |
| |
| <div class="glass-effect rounded-2xl p-6"> |
| <h2 class="text-xl font-bold text-white mb-6">⚡ إضافة مزاد جديد</h2> |
| <div class="space-y-4"> |
| <input type="text" id="auctionTitle" placeholder="عنوان المزاد" |
| class="w-full bg-white/80 backdrop-blur-sm border border-white/30 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| <input type="number" id="auctionStartPrice" placeholder="السعر الابتدائي (نقاط)" |
| class="w-full bg-white/80 backdrop-blur-sm border border-white/30 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| <input type="datetime-local" id="auctionEndTime" |
| class="w-full bg-white/80 backdrop-blur-sm border border-white/30 rounded-xl px-4 py-3 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
| <button id="addAuctionBtn" class="w-full bg-gradient-to-r from-green-500 to-teal-600 text-white py-3 rounded-xl font-medium hover:from-green-600 hover:to-teal-700 transition-all duration-300 transform hover:scale-105"> |
| <i class="fas fa-plus mr-2"></i>إضافة مزاد جديد |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6"> |
| <h2 class="text-xl font-bold text-white mb-6">📊 المزادات النشطة</h2> |
| <div class="space-y-4" id="auctionsList"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script type="module"> |
| import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.13.1/firebase-app.js'; |
| import { getFirestore, collection, getDocs, updateDoc, doc, onSnapshot, deleteDoc, addDoc } from 'https://www.gstatic.com/firebasejs/10.13.1/firebase-firestore.js'; |
| |
| const firebaseConfig = { |
| apiKey: "AIzaSyDe2eYGjNwhAxoURly4J16uXJU60U6-x4A", |
| authDomain: "cashup-29abe.firebaseapp.com", |
| projectId: "cashup-29abe", |
| storageBucket: "cashup-29abe.firebasestorage.app", |
| messagingSenderId: "918029234311", |
| appId: "1:918029234311:web:b2aa4777c72fb1d5d54822", |
| measurementId: "G-9SX5X89TJH" |
| }; |
| |
| const app = initializeApp(firebaseConfig); |
| const db = getFirestore(app); |
| |
| |
| const totalUsersElement = document.getElementById('totalUsers'); |
| const totalPointsElement = document.getElementById('totalPoints'); |
| const usersGrid = document.getElementById('usersGrid'); |
| const sendPointsBtn = document.getElementById('sendPointsBtn'); |
| const pointsAmountInput = document.getElementById('pointsAmount'); |
| const searchInput = document.getElementById('searchInput'); |
| const topUsersList = document.getElementById('topUsersList'); |
| const auctionsList = document.getElementById('auctionsList'); |
| |
| let allUsers = []; |
| |
| |
| function updateStats(snapshot){ |
| totalUsersElement.textContent = snapshot.size; |
| let totalPoints = 0; |
| snapshot.forEach(doc => { |
| totalPoints += doc.data().balance || 0; |
| }); |
| totalPointsElement.textContent = totalPoints.toLocaleString(); |
| } |
| |
| |
| async function loadUsers(){ |
| const snapshot = await getDocs(collection(db,'users')); |
| allUsers = []; |
| usersGrid.innerHTML = ''; |
| snapshot.forEach(docItem => { |
| const data = docItem.data(); |
| allUsers.push({id: docItem.id, ...data}); |
| }); |
| |
| |
| allUsers.sort((a, b) => (b.balance || 0) - (a.balance || 0)); |
| |
| |
| renderTopUsers(allUsers.slice(0, 10)); |
| |
| |
| renderUsers(allUsers); |
| } |
| |
| function renderTopUsers(users){ |
| topUsersList.innerHTML = ''; |
| users.forEach((user, index) => { |
| const medalClass = index === 0 ? 'medal-gold' : index === 1 ? 'medal-silver' : index === 2 ? 'medal-bronze' : 'bg-white/20'; |
| const medal = index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : `${index + 1}.`; |
| |
| const div = document.createElement('div'); |
| div.className = `flex items-center justify-between p-4 rounded-xl ${medalClass} backdrop-blur-sm border border-white/20`; |
| div.innerHTML = ` |
| <div class="flex items-center space-x-3"> |
| <span class="text-lg font-bold">${medal}</span> |
| <div> |
| <div class="font-medium text-white">${user.name || 'مستخدم'}</div> |
| <div class="text-sm opacity-75">ID: ${user.uniqueId || ''}</div> |
| </div> |
| </div> |
| <div class="text-xl font-bold text-white">${user.balance || 0} نقطة</div> |
| `; |
| topUsersList.appendChild(div); |
| }); |
| } |
| |
| function renderUsers(users){ |
| usersGrid.innerHTML = ''; |
| users.forEach(user => { |
| const div = document.createElement('div'); |
| div.className = 'user-card glass-effect rounded-xl p-4'; |
| div.innerHTML = ` |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <div class="font-bold text-white text-lg">${user.name || 'مستخدم'}</div> |
| <div class="text-blue-200 text-sm">ID: ${user.uniqueId || ''}</div> |
| </div> |
| <div class="bg-blue-500 text-white px-2 py-1 rounded-lg text-sm font-bold"> |
| ${user.balance || 0} نقطة |
| </div> |
| </div> |
| <div class="flex gap-2"> |
| <input type="number" value="${user.balance || 0}" data-type="points" |
| class="flex-1 bg-white/20 border border-white/30 rounded-lg px-3 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <button class="save-btn bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-lg transition-colors"> |
| <i class="fas fa-save"></i> |
| </button> |
| <button class="delete-btn bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg transition-colors"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| `; |
| |
| div.querySelector('.save-btn').addEventListener('click', async() => { |
| const newPoints = parseInt(div.querySelector('input[data-type="points"]').value) || 0; |
| await updateDoc(doc(db,'users',user.id), {balance: newPoints}); |
| loadUsers(); |
| }); |
| |
| div.querySelector('.delete-btn').addEventListener('click', async() => { |
| if(!confirm('هل أنت متأكد من حذف المستخدم؟')) return; |
| await deleteDoc(doc(db,'users',user.id)); |
| loadUsers(); |
| }); |
| |
| usersGrid.appendChild(div); |
| }); |
| } |
| |
| |
| sendPointsBtn.addEventListener('click', async() => { |
| const amount = parseInt(pointsAmountInput.value); |
| if(!amount || amount <= 0){ |
| alert('يرجى إدخال رقم صحيح موجب'); |
| return; |
| } |
| if(!confirm(`هل تريد إرسال ${amount} نقطة لجميع المستخدمين؟`)) return; |
| |
| const snapshot = await getDocs(collection(db,'users')); |
| const promises = []; |
| snapshot.forEach(docItem => { |
| promises.push(updateDoc(doc(db,'users',docItem.id), { |
| balance: (docItem.data().balance || 0) + amount |
| })); |
| }); |
| await Promise.all(promises); |
| pointsAmountInput.value = ''; |
| loadUsers(); |
| }); |
| |
| |
| searchInput.addEventListener('input', () => { |
| const term = searchInput.value.toLowerCase(); |
| const filtered = allUsers.filter(u => |
| (u.name || '').toLowerCase().includes(term) || |
| (u.uniqueId || '').toLowerCase().includes(term) |
| ); |
| renderUsers(filtered); |
| }); |
| |
| |
| const auctionTitle = document.getElementById('auctionTitle'); |
| const auctionStartPrice = document.getElementById('auctionStartPrice'); |
| const auctionEndTime = document.getElementById('auctionEndTime'); |
| const addAuctionBtn = document.getElementById('addAuctionBtn'); |
| |
| |
| addAuctionBtn.addEventListener('click', async() => { |
| if(!auctionTitle.value || !auctionStartPrice.value || !auctionEndTime.value){ |
| alert("يرجى ملء جميع الحقول المطلوبة"); |
| return; |
| } |
| |
| await addDoc(collection(db, "auctions"), { |
| title: auctionTitle.value, |
| startPrice: parseInt(auctionStartPrice.value), |
| currentPrice: parseInt(auctionStartPrice.value), |
| highestBidder: null, |
| endTime: auctionEndTime.value, |
| createdAt: new Date().toISOString() |
| }); |
| |
| auctionTitle.value = ''; |
| auctionStartPrice.value = ''; |
| auctionEndTime.value = ''; |
| loadAuctions(); |
| }); |
| |
| |
| async function loadAuctions(){ |
| const snapshot = await getDocs(collection(db, "auctions")); |
| auctionsList.innerHTML = ''; |
| snapshot.forEach(docItem => { |
| const data = docItem.data(); |
| const div = document.createElement('div'); |
| div.className = "glass-effect rounded-xl p-4 border border-white/20"; |
| div.innerHTML = ` |
| <h3 class="font-bold text-white text-lg mb-2">${data.title}</h3> |
| <div class="space-y-2 text-sm"> |
| <div class="flex justify-between"> |
| <span class="text-blue-200">السعر الحالي:</span> |
| <span class="text-white font-bold">${data.currentPrice} نقطة</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-blue-200">أعلى مزايد:</span> |
| <span class="text-white">${data.highestBidder || "لا يوجد"}</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-blue-200">ينتهي في:</span> |
| <span class="text-white">${new Date(data.endTime).toLocaleString('ar-SA')}</span> |
| </div> |
| </div> |
| `; |
| auctionsList.appendChild(div); |
| }); |
| } |
| |
| |
| onSnapshot(collection(db, 'users'), snapshot => updateStats(snapshot)); |
| loadUsers(); |
| loadAuctions(); |
| </script> |
| </body> |
| </html> |
|
|
