Embed

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>نموذج التقديم على الوظائف – Earth Baghdad</title>
  <style>
    :root{
      --bg:#f0f2f5; --card:#ffffff; --muted:#65676b; --text:#050505;
      --accent:#1877f2; --accent-2:#165dc5; --danger:#ef4444; --ok:#22c55e;
      --maxWidth:720px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;background:var(--bg);color:var(--text);}
    .page{display:flex;align-items:flex-start;justify-content:center;padding:20px;min-height:100vh}
    .wrapper{width:100%;max-width:var(--maxWidth);}
    .card{background:var(--card);border:1px solid #e6e9ee;border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(2,6,23,0.06)}
    header{display:flex;gap:12px;align-items:center;padding:16px;background:#fff;border-bottom:1px solid #f1f5f9}
    header img{width:52px;height:52px;object-fit:contain;border-radius:10px}
    header h1{font-size:1.05rem;margin:0;line-height:1}
    header p{margin:4px 0 0;color:var(--muted);font-size:.88rem}
    form{padding:18px;display:grid;grid-template-columns:1fr;gap:12px}
    @media (min-width:760px){form{grid-template-columns:1fr 1fr;gap:14px;padding:22px}}
    .field{display:flex;flex-direction:column;gap:6px}
    .field label{font-weight:700;font-size:.95rem}
    .field input,.field select,.field textarea{width:100%;padding:11px 12px;border-radius:10px;background:#fff;border:1px solid #d1d5db;color:var(--text);outline:none;font-size:.95rem}
    .field textarea{min-height:88px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 4px 14px rgba(24,119,242,0.08)}
    .full{grid-column:1/-1}
    .muted{color:var(--muted);font-size:.85rem}
    .actions{grid-column:1/-1;display:flex;gap:10px;align-items:center;justify-content:flex-end}
    .actions .btn{min-width:140px}
    .btn{appearance:none;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;transition:.15s;font-size:.95rem}
    .btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
    .btn-ghost{background:#f7fafc;color:var(--text);border:1px solid #e6e9ee}
    .req{color:var(--danger)}
    @media (max-width:759px){
      .actions{flex-direction:column-reverse;align-items:stretch}
      .actions .btn{width:100%}
      form{padding:16px}
    }
    .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;display:none;padding:12px 16px;border-radius:10px;background:#111;color:#fff;z-index:9999}
    .toast.show{display:block}
    .toast.success{background:linear-gradient(90deg,#057a55,#22c55e)}
    .toast.error{background:linear-gradient(90deg,#b91c1c,#ef4444)}
  </style>
</head>
<body>
  <div class="page">
    <div class="wrapper">
      <div class="card">
        <header>
          <img src="https://i.imgur.com/1dZrA0U.png" alt="Earth Baghdad Logo" onerror="this.style.display='none'">
          <div>
            <h1>نموذج التقديم على الوظائف — Earth Baghdad</h1>
            <p>ستُرسل بياناتك مباشرة إلى الواتساب: <strong>07838929924</strong></p>
          </div>
        </header>

        <form id="jobForm" autocomplete="on" novalidate>
          <div class="field full">
            <label for="fullName">الاسم الثلاثي واللقب <span class="req">*</span></label>
            <input id="fullName" name="fullName" type="text" required minlength="8" placeholder="مثال: علي محمد عبد الله" />
          </div>

          <div class="field">
            <label for="birthDate">تاريخ الميلاد <span class="req">*</span></label>
            <input id="birthDate" name="birthDate" type="date" required />
          </div>

          <div class="field">
            <label for="maritalStatus">الحالة الاجتماعية <span class="req">*</span></label>
            <select id="maritalStatus" name="maritalStatus" required>
              <option value="">اختر...</option>
              <option>أعزب/عزباء</option>
              <option>متزوج/متزوجة</option>
              <option>مطلق/مطلقة</option>
              <option>أرمل/أرملة</option>
            </select>
          </div>

          <div class="field full">
            <label for="address">عنوان السكن <span class="req">*</span></label>
            <input id="address" name="address" type="text" required placeholder="المحافظة / القضاء / المنطقة" />
          </div>

          <div class="field">
            <label for="education">التحصيل الدراسي <span class="req">*</span></label>
            <select id="education" name="education" required>
              <option value="">اختر...</option>
              <option>ابتدائية</option>
              <option>متوسطة</option>
              <option>إعدادية</option>
              <option>دبلوم</option>
              <option>بكالوريوس</option>
              <option>ماجستير</option>
              <option>دكتوراه</option>
            </select>
          </div>

          <div class="field">
            <label for="email">البريد الإلكتروني (إن وجد)</label>
            <input id="email" name="email" type="email" inputmode="email" placeholder="name@example.com" />
          </div>

          <div class="field">
            <label for="phone">رقم الهاتف <span class="req">*</span></label>
            <input id="phone" name="phone" type="tel" required inputmode="tel" placeholder="07XXXXXXXXX" pattern="^07\d{9}$" />
          </div>

          <div class="field">
            <label for="jobType">نوع الوظيفة المرغوبة <span class="req">*</span></label>
            <select id="jobType" name="jobType" required>
              <option value="">اختر...</option>
              <option>موظف خدمة زبائن</option>
              <option>محاسب</option>
            </select>
          </div>

          <div class="field">
            <label for="currentJob">الوظيفة الحالية (إن وجدت)</label>
            <input id="currentJob" name="currentJob" type="text" placeholder="مثال: موظف خدمة زبائن" />
          </div>

          <div class="field full">
            <label for="workHistory">أماكن العمل السابقة وطبيعة ومدة العمل <span class="req">*</span></label>
            <textarea id="workHistory" name="workHistory" rows="4" required placeholder="اكتب خبراتك..."></textarea>
          </div>

          <div class="field">
            <label for="computerLevel">مستوى معرفتك/استخدامك للحاسوب <span class="req">*</span></label>
            <select id="computerLevel" name="computerLevel" required>
              <option value="">اختر...</option>
              <option>مبتدئ</option>
              <option>متوسط</option>
              <option>جيد</option>
              <option>متقدم</option>
              <option>خبير</option>
            </select>
          </div>

          <div class="field">
            <label for="accountingLevel">معرفتك باستخدام برامج المحاسبة <span class="req">*</span></label>
            <select id="accountingLevel" name="accountingLevel" required>
              <option value="">اختر...</option>
              <option>مبتدئ</option>
              <option>متوسط</option>
              <option>جيد</option>
              <option>متقدم</option>
              <option>خبير</option>
            </select>
          </div>

          <div class="field">
            <label for="englishLevel">مستوى معرفتك باللغة الإنجليزية <span class="req">*</span></label>
            <select id="englishLevel" name="englishLevel" required>
              <option value="">اختر...</option>
              <option>مبتدئ</option>
              <option>متوسط</option>
              <option>جيد</option>
              <option>متقدم</option>
              <option>طليق</option>
            </select>
          </div>

          <div class="field full">
            <label for="ccKnowledge">معلوماتك عن وظيفة خدمة الزبائن</label>
            <textarea id="ccKnowledge" name="ccKnowledge" rows="3" placeholder="اكتب بإيجاز..."></textarea>
          </div>

          <div class="field full">
            <label for="accKnowledge">معلوماتك عن وظيفة المحاسب</label>
            <textarea id="accKnowledge" name="accKnowledge" rows="3" placeholder="اكتب بإيجاز..."></textarea>
          </div>

          <div class="actions">
            <button class="btn btn-ghost" type="reset">تفريغ الحقول</button>
            <button class="btn btn-primary" id="submitBtn" type="submit">إرسال إلى واتساب</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div id="toast" class="toast" role="status" aria-live="polite"></div>

  <script>
    const form = document.getElementById('jobForm');
    const submitBtn = document.getElementById('submitBtn');
    const toast = document.getElementById('toast');

    function showToast(msg, type='success'){
      toast.textContent = msg;
      toast.className = 'toast show ' + (type==='success' ? 'success' : 'error');
      clearTimeout(window.__toastTimer);
      window.__toastTimer = setTimeout(()=>{ toast.className = 'toast'; }, 4000);
    }

    form.addEventListener('submit', (e)=>{
      e.preventDefault();
      if(!form.checkValidity()){
        form.reportValidity();
        return;
      }

      submitBtn.disabled = true;
      submitBtn.textContent = 'جارٍ التحويل...';

      const fd = new FormData(form);
      let msg = '*طلب توظيف جديد – Earth Baghdad*%0A';
      msg += '--------------------------------%0A';
      fd.forEach((v,k)=>{
        if(v){
          let label = document.querySelector(`[name="${k}"]`)?.previousElementSibling?.innerText || k;
          label = label.replace('*','').trim();
          msg += `• ${label}: ${v}%0A`;
        }
      });
      msg += '--------------------------------%0A';
      msg += 'تم الإرسال عبر موقع Earth Baghdad الرسمي.';

      const url = `https://wa.me/9647838929924?text=${msg}`;
      window.open(url, '_blank');

      submitBtn.disabled = false;
      submitBtn.textContent = 'إرسال إلى واتساب';
      showToast('✅ تم فتح واتساب لإرسال الطلب. سيتم التواصل معك قريباً.','success');
    });
  </script>
</body>
</html>

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