<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق المراسلة - مركز أحمد بن مشرف التجاري</title>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="11.png">
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
body {
font-family: 'Tajawal', sans-serif;
background-color: #f4f6f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.app-container {
background: #fff;
padding: 40px 30px 25px;
border-radius: 18px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
width: 380px;
text-align: center;
position: relative;
overflow-y: auto;
max-height: 94vh;
}
.logo { width: 160px; margin-bottom: 15px; }
input, textarea, select {
width: 100%;
margin: 6px 0;
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 15px;
box-sizing: border-box;
text-align: right;
}
button {
width: 100%;
background-color: #25D366;
color: white;
font-size: 17px;
font-weight: bold;
border: none;
border-radius: 10px;
padding: 12px;
cursor: pointer;
transition: background 0.3s ease;
margin-top: 10px;
}
button:hover { background-color: #1EBE5C; }
footer {
margin-top: 18px;
font-size: 13px;
color: #777;
}
footer span {
display: block;
font-size: 12px;
color: #0B1E63;
font-weight: bold;
}
</style>
</head>
<body>
<div class="app-container">
<img src="11.png" class="logo">
<select id="templates" onchange="applyTemplate()">
<option value="">اختر قالبًا جاهزًا</option>
<option value="مطالبة">⚠️ مطالبة بمبلغ مستحق</option>
<option value="تحويل">💳 طلب تحويل لحساب بنكي</option>
<option value="موقع">📍 إرسال الموقع للعميل</option>
<option value="ترحيب">🤝 رسالة ترحيب بالعميل</option>
</select>
<input type="text" id="phone" placeholder="رقم الجوال (بدون 0)">
<textarea id="message" placeholder="نص الرسالة..."></textarea>
<input type="text" id="location" placeholder="رابط موقع البيت (اختياري)">
<input type="text" id="account" placeholder="رقم الحساب أو الآيبان (اختياري)">
<input type="text" id="extra" placeholder="ملاحظة إضافية (اختياري)">
<button onclick="sendWhatsApp()">📨 إرسال عبر واتساب</button>
<footer>
© مركز أحمد بن مشرف التجاري
<span>تصميم وتطوير عصوم</span>
</footer>
</div>
<script>
// ✅ تحميل البيانات المحفوظة من LocalStorage عند فتح التطبيق
window.onload = function () {
["phone", "message", "location", "account", "extra"].forEach(id => {
if (localStorage.getItem(id)) {
document.getElementById(id).value = localStorage.getItem(id);
}
});
};
// ✅ حفظ البيانات عند الكتابة
["phone", "message", "location", "account", "extra"].forEach(id => {
document.getElementById(id).addEventListener("input", () => {
localStorage.setItem(id, document.getElementById(id).value);
});
});
// ✅ تطبيق القوالب الجاهزة
function applyTemplate() {
const selected = document.getElementById("templates").value;
let msg = "";
if (selected === "مطالبة") {
msg = "السلام عليكم، يوجد لديكم مبلغ مستحق. نرجو سرعة السداد، وشكرًا.";
}
else if (selected === "تحويل") {
msg = "يرجى تحويل المبلغ على الحساب التالي:";
}
else if (selected === "موقع") {
msg = "هذا رابط الموقع للوصول إلينا:";
}
else if (selected === "ترحيب") {
msg = "مرحبًا بك 👋، يسعدنا خدمتك في أي وقت.";
}
document.getElementById("message").value = msg;
localStorage.setItem("message", msg);
}
// ✅ إرسال رسالة واتساب
function sendWhatsApp() {
let phone = document.getElementById("phone").value.trim();
let message = document.getElementById("message").value.trim();
let location = document.getElementById("location").value.trim();
let account = document.getElementById("account").value.trim();
let extra = document.getElementById("extra").value.trim();
let finalMessage = message + "\\n";
if (location) finalMessage += "\\n📍 الموقع: " + location;
if (account) finalMessage += "\\n💳 الحساب: " + account;
if (extra) finalMessage += "\\n📝 " + extra;
if (!phone || !message.trim()) {
alert("الرجاء إدخال رقم الجوال والرسالة على الأقل.");
return;
}
finalMessage = encodeURIComponent(finalMessage);
window.open(`https://wa.me/966${phone}?text=${finalMessage}`, "_blank");
}
</script>
</body>
</html>