نمّي حساباتك بتفاعل مجاني وحقيقي

:root { --primary-color: #007bff; /* لون أساسي عصري */ --primary-hover-color: #0056b3; --light-gray: #f8f9fa; --medium-gray: #e9ecef; --dark-gray: #6c757d; --text-color: #333; --border-radius: 8px; --input-padding: 15px; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body.contact-form-active { /* نضيف كلاس لل body عند عرض النموذج لتطبيق أنماط محددة */ font-family: var(--font-family); background-color: var(--light-gray); margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; box-sizing: border-box; direction: rtl; /* للتوافق مع اللغة العربية */ } .contact-form-container { width: 90%; max-width: 550px; background-color: #fff; padding: 30px 35px; border-radius: var(--border-radius); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); text-align: center; box-sizing: border-box; overflow: hidden; /* لمنع أي تجاوزات من العناصر الداخلية */ } .contact-form-container h1 { color: var(--primary-color); margin-bottom: 25px; font-size: 26px; font-weight: 600; } .input-group { margin-bottom: 20px; position: relative; text-align: right; /* لضمان محاذاة النصوص داخل الحقول لليمين */ } .input-group label { /* يمكن إظهارها إذا أردت */ display: block; text-align: right; margin-bottom: 5px; font-weight: 500; color: var(--dark-gray); font-size: 14px; } .input-group input, .input-group textarea { width: 100%; padding: var(--input-padding); border-radius: var(--border-radius); border: 1px solid var(--medium-gray); font-size: 16px; font-family: var(--font-family); box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease; text-align: right; /* محاذاة النص داخل الحقل */ } .input-group input::placeholder, .input-group textarea::placeholder { color: #aaa; text-align: right; } .input-group input:focus, .input-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .input-group textarea { height: 140px; resize: vertical; /* السماح بتغيير الحجم العمودي فقط */ } .submit-button { width: 100%; padding: var(--input-padding); background-color: var(--primary-color); color: white; font-size: 18px; font-weight: 500; border: none; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; display: flex; justify-content: center; align-items: center; } .submit-button:hover:not(:disabled) { background-color: var(--primary-hover-color); transform: translateY(-2px); } .submit-button:disabled { background-color: var(--medium-gray); cursor: not-allowed; } .submit-button .spinner { display: none; /* مخفي افتراضيًا */ width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-left: 10px; /* تعديل ليكون على يسار النص في حالة RTL */ } .submit-button.loading .spinner { display: inline-block; /* إظهاره عند التحميل */ } .submit-button.loading .button-text { margin-right: 5px; /* مسافة بين النص والدوار */ } @keyframes spin { to { transform: rotate(360deg); } } /* تحسينات للتوافق مع الشاشات الصغيرة */ @media (max-width: 600px) { .contact-form-container { padding: 20px 25px; width: 95%; } .contact-form-container h1 { font-size: 22px; } .input-group input, .input-group textarea, .submit-button { font-size: 15px; padding: 12px; } .submit-button .spinner { width: 18px; height: 18px; } } تواصل معنا رقم الواتساب البريد الإلكتروني مضمون الرسالة إرسال الرسالة // لضمان تطبيق body.contact-form-active فقط عند عرض النموذج if (document.querySelector('.contact-form-container')) { document.body.classList.add('contact-form-active'); } function sendToTelegramModern() { var whatsappNumber = document.getElementById('whatsappNumber').value.trim(); var emailAddress = document.getElementById('emailAddress').value.trim(); var messageContent = document.getElementById('messageContent').value.trim(); var sendButton = document.getElementById("sendButtonModern"); var buttonText = sendButton.querySelector(".button-text"); // تحقق أساسي من الحقول if (!whatsappNumber || !emailAddress || !messageContent) { alert("الرجاء ملء جميع الحقول المطلوبة."); return; } // التحقق من صحة البريد الإلكتروني (بسيط) if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailAddress)) { alert("الرجاء إدخال عنوان بريد إلكتروني صحيح."); return; } // التحقق من صحة رقم الواتساب (بسيط، يقبل + وأرقام) if (!/^\+?[0-9\s]+$/.test(whatsappNumber)) { alert("الرجاء إدخال رقم واتساب صحيح (يمكن أن يبدأ بـ + ويحتوي على أرقام ومسافات)."); return; } sendButton.disabled = true; sendButton.classList.add('loading'); buttonText.innerText = "جاري الإرسال..."; var telegramMessage = `🚀 طلب تواصل جديد:\n\n` + `📱 رقم الواتساب: ${whatsappNumber}\n` + `📧 البريد الإلكتروني: ${emailAddress}\n` + `💬 الرسالة:\n${messageContent}`; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! // !!! تأكد من استبدال TOKEN و CHAT_ID بالقيم الصحيحة الخاصة بك !!! // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! var telegramBotAPI = 'https://api.telegram.org/bot7558242625:AAFd5eneQ3Ar4QlY36w7ePgGoreFoOYlWnU/sendMessage'; // استبدل var chatId = '1693543914'; // استبدل (يجب أن يكون رقمًا أو يبدأ بـ @ لاسم مستخدم القناة/المجموعة) // تحقق من أن التوكن والـ chat ID ليسا القيم الافتراضية if (telegramBotAPI.includes(" ") || chatId.includes(" ")) { alert("خطأ في الإعداد: يرجى تكوين TOKEN و CHAT_ID الخاص بالبوت في الكود."); sendButton.disabled = false; sendButton.classList.remove('loading'); buttonText.innerText = "إرسال الرسالة"; return; } var url = `${telegramBotAPI}?chat_id=${chatId}&text=${encodeURIComponent(telegramMessage)}&parse_mode=Markdown`; // يمكن استخدام Markdown أو HTML fetch(url, { method: 'POST' }) // POST أفضل لـ sendMessage .then(response => response.json()) .then(data => { if (data.ok) { alert("✅ تم إرسال رسالتك بنجاح! سنتواصل معك قريباً."); document.getElementById("contactFormModern").reset(); } else { console.error("Telegram API Error:", data); alert("❌ عذرًا، حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى.\nتفاصيل الخطأ: " + (data.description || "غير معروف")); } }) .catch(error => { console.error("Fetch Error:", error); alert("❌ عذرًا، حدث خطأ في الشبكة أو الاتصال بالخادم. يرجى المحاولة مرة أخرى."); }) .finally(() => { sendButton.disabled = false; sendButton.classList.remove('loading'); buttonText.innerText = "إرسال الرسالة"; }); }