مدونة حسابات العملاء body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f2f2f2; padding: 20px; direction: rtl; } h2 { color: #333; } input, button { padding: 10px; margin: 5px 0; width: 100%; box-sizing: border-box; } button { background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } #clientsList { margin-top: 20px; background: #fff; padding: 10px; border: 1px solid #ccc; } .client { border-bottom: 1px solid #ddd; padding: 5px 0; }

📒 مدونة حسابات العملاء

اسم العميل:

رقم الهاتف:

المبلغ المتبقي:

💾 حفظ العميل

➕ إضافة عميل جديد

📋 إظهار كل العملاء

// تحميل العملاء من التخزين المحلي عند بداية الصفحة let clients = JSON.parse(localStorage.getItem("clients")) || []; function saveClient() { const name = document.getElementById("nameInput").value.trim(); const phone = document.getElementById("phoneInput").value.trim(); const balance = document.getElementById("balanceInput").value.trim(); if (name && phone && balance) { clients.push({ name, phone, balance }); localStorage.setItem("clients", JSON.stringify(clients)); // حفظ في التخزين المحلي alert("✅ تم حفظ العميل بنجاح!"); newClient(); } else { alert("⚠️ يرجى ملء جميع الحقول."); } } function newClient() { document.getElementById("nameInput").value = ""; document.getElementById("phoneInput").value = ""; document.getElementById("balanceInput").value = ""; } function showAllClients() { const listDiv = document.getElementById("clientsList"); listDiv.innerHTML = "

📋 قائمة العملاء:

"; if (clients.length === 0) { listDiv.innerHTML += "

لا يوجد عملاء بعد.

"; return; } clients.forEach((client, index) => { listDiv.innerHTML += ` العميل ${index + 1}
الاسم: ${client.name}
الهاتف: ${client.phone}
المبلغ المتبقي: ${client.balance} ريال `; }); } // عرض العملاء مباشرة عند فتح الصفحة showAllClients();