Call to action

اتصل على ارقام التواصل من ال9 صباحا وحتى ال12 ليلا
يتوفر وتساب
 07821205889-07818959726

اتصل على مزود الخدمة 

Embed

<!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 href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    
    <style>
        /* المتغيرات العامة للألوان */
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --bg-color: #f3f4f6;
            --card-bg: #ffffff;
            --text-color: #1f2937;
            --input-border: #d1d5db;
            --success-color: #10b981;
        }

        /* إعدادات الصفحة العامة */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Cairo', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main-wrapper {
            width: 100%;
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        /* تصميم البطاقة */
        .container {
            background-color: var(--card-bg);
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 480px;
            animation: fadeIn 0.6s ease-in-out;
        }

        /* النصوص والعناوين */
        header {
            text-align: center;
            margin-bottom: 25px;
        }

        h2 {
            color: var(--primary-color);
            margin: 0 0 5px 0;
            font-weight: 700;
        }

        .subtitle {
            color: #6b7280;
            margin: 0;
            font-size: 0.9em;
        }

        /* الحقول والتسميات */
        .form-group {
            margin-bottom: 16px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 0.95em;
        }

        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 2px solid var(--input-border);
            border-radius: 10px;
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            transition: border-color 0.3s, box-shadow 0.3s;
            background: #f9fafb;
        }

        input:focus, textarea:focus {
            border-color: var(--primary-color);
            background: #fff;
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        textarea {
            resize: vertical;
            min-height: 100px;
        }

        /* حقول القراءة فقط */
        .read-only-field {
            background-color: #eff6ff;
            border-color: #bfdbfe;
            color: #1e40af;
            font-weight: bold;
            cursor: default;
        }

        /* تنسيق الصفوف (لجعل الباقة والسعر بجانب بعضهما) */
        .form-row {
            display: flex;
            gap: 15px;
        }

        .half-width {
            flex: 1;
        }

        /* زر الموقع الجغرافي */
        .location-wrapper {
            display: flex;
            gap: 10px;
        }

        .location-btn {
            background-color: var(--success-color);
            color: white;
            border: none;
            padding: 0 20px;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            white-space: nowrap;
            transition: background 0.3s;
        }

        .location-btn:hover {
            background-color: #059669;
        }

        /* زر الإرسال */
        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            transition: transform 0.2s;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
        }

        .whatsapp-icon {
            width: 24px;
            height: 24px;
            fill: white;
        }

        /* استجابة الشاشة (Responsive) */
        @media (max-width: 400px) {
            .container { padding: 20px; }
            .form-row { flex-direction: column; gap: 0; }
            .half-width { width: 100%; }
            h2 { font-size: 1.5em; }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>

  <div class="main-wrapper">
    <div class="container">
      <header>
          <h2>🚀 المشروع الوطني</h2>
          <p class="subtitle">نموذج طلب خدمة - ايرث بغداد</p>
      </header>

      <form id="serviceForm">
        
        <div class="form-group">
          <label for="name">الاسم الكامل:</label>
          <input type="text" id="name" name="name" required placeholder="ادخل اسمك الثلاثي">
        </div>

        <div class="form-group">
          <label for="phone">رقم الهاتف:</label>
          <input type="tel" id="phone" name="phone" required placeholder="07xxxxxxxxx" pattern="[0-9+\- ]+">
        </div>

        <div class="form-row">
            <div class="form-group half-width">
                <label>الباقة:</label>
                <input type="text" name="plan" value="فايبر 35 ميجا" readonly class="read-only-field">
            </div>
            <div class="form-group half-width">
                <label>سعر العرض:</label>
                <input type="text" name="offer" value="15,000 د.ع" readonly class="read-only-field">
            </div>
        </div>

        <div class="form-group">
          <label for="address">العنوان:</label>
          <input type="text" id="address" name="address" required placeholder="المنطقة، المحلة، الزقاق، الدار">
        </div>

        <div class="form-group">
          <label for="landmark">أقرب نقطة دالة:</label>
          <input type="text" id="landmark" name="landmark" required placeholder="قرب مدرسة / جامع / سوق...">
        </div>

        <div class="form-group">
          <label>الموقع الجغرافي (اختياري):</label>
          <div class="location-wrapper">
              <input type="text" id="locationInput" name="gps_location" placeholder="اضغط الزر لتحديد الموقع" readonly>
              <button type="button" class="location-btn" onclick="getLocation()">
                  📍 موقعي
              </button>
          </div>
        </div>

        <div class="form-group">
          <label for="details">ملاحظات إضافية:</label>
          <textarea id="details" name="details" placeholder="أي تفاصيل أخرى تود إضافتها..."></textarea>
        </div>

        <button type="submit" class="submit-btn">
          <span>إرسال الطلب عبر واتساب</span>
          <svg class="whatsapp-icon" viewBox="0 0 24 24"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.698c.969.53 2.063.81 3.193.809 3.535 0 6.41-2.585 6.41-5.767 0-3.18-2.586-5.765-5.767-5.765zm6.545 8.169c-.27.755-1.571 1.442-2.149 1.488-.537.042-1.229.231-3.665-.729-2.883-1.137-4.734-4.085-4.877-4.279-.144-.194-1.171-1.559-1.171-2.972 0-1.413.738-2.108 1.002-2.396.216-.235.57-.348.916-.348.113 0 .233.007.332.013.31.018.465.044.609.395.187.456.643 1.576.699 1.691.055.115.092.249.014.402-.078.153-.116.248-.228.381-.113.134-.234.3-.334.404-.112.115-.229.241-.1.465.129.225.573.945 1.231 1.531.849.756 1.564.99 1.786 1.096.222.106.353.09.484-.06.13-.151.563-.655.713-.88.15-.224.298-.188.498-.113.201.075 1.272.6 1.489.707.218.107.363.16.417.254.053.094.053.548-.217 1.303z"/></svg>
        </button>

      </form>
    </div>
  </div>

  <script>
    const form = document.getElementById("serviceForm");
    const WHATSAPP_NUMBER = "9647821205889"; 
    const locationInput = document.getElementById("locationInput");

    // دالة جلب الموقع الجغرافي
    function getLocation() {
        if (navigator.geolocation) {
            locationInput.value = "جاري تحديد الموقع...";
            const options = {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 0
            };
            navigator.geolocation.getCurrentPosition(showPosition, showError, options);
        } else {
            alert("المتصفح لا يدعم تحديد الموقع.");
        }
    }

    function showPosition(position) {
        const lat = position.coords.latitude;
        const long = position.coords.longitude;
        // إنشاء رابط خرائط جوجل
        const googleMapUrl = `https://www.google.com/maps?q=${lat},${long}`;
        locationInput.value = googleMapUrl;
        locationInput.style.direction = "ltr"; 
    }

    function showError(error) {
        let msg = "";
        switch(error.code) {
            case error.PERMISSION_DENIED:
                msg = "يجب السماح بالوصول للموقع لتفعيل الميزة.";
                break;
            case error.POSITION_UNAVAILABLE:
                msg = "معلومات الموقع غير متاحة حالياً.";
                break;
            case error.TIMEOUT:
                msg = "تجاوز الوقت المحدد لجلب الموقع.";
                break;
            default:
                msg = "حدث خطأ غير معروف.";
        }
        locationInput.value = ""; // مسح الحقل
        alert(msg);
    }

    // دالة الإرسال عند الضغط
    form.onsubmit = function(e) {
      e.preventDefault();

      const data = new FormData(form);
      
      const msg = `
*🆕 طلب اشتراك جديد - المشروع الوطني*
---------------------------
👤 *الاسم:* ${data.get("name")}
📱 *رقم الهاتف:* ${data.get("phone")}
📡 *الباقة:* ${data.get("plan")}
💰 *العرض:* ${data.get("offer")}
---------------------------
🏠 *العنوان:* ${data.get("address")}
🕌 *أقرب دالة:* ${data.get("landmark")}
📍 *الموقع:* ${data.get("gps_location") || "غير محدد"}
📝 *ملاحظات:* ${data.get("details") || "لا يوجد"}
---------------------------
📅 *التاريخ:* ${new Date().toLocaleDateString('ar-IQ')}
`.trim();

      // التحقق من نوع الجهاز لفتح الرابط المناسب
      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
      const baseUrl = isMobile ? "https://api.whatsapp.com/send" : "https://web.whatsapp.com/send";
      
      const url = `${baseUrl}?phone=${WHATSAPP_NUMBER}&text=${encodeURIComponent(msg)}`;
      
      window.open(url, "_blank");
    };
  </script>

</body>
</html>


ايرث بغداد للاتصالات والانترنت

إيرث بغداد للاتصالات والإنترنت هي مزود خدمات إنترنت في العراق، وتحديدًا في محافظة الديوانية، وتعمل كوكيل معتمد لشركة إيرثلنك  ونقطة بيع معتمدة للمشروع الوطني 

