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}
#refBox{padding:10px 16px;background:linear-gradient(90deg,#1877f2,#165dc5);color:#fff;font-size:.95rem;font-weight:bold;border-radius:0 0 14px 14px;}
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>يرجى ملء المعلومات أدناه بدقة.</p>
</div>
</header>

<div id="refBox">📌 رقمك المرجعي: <span id="refNum">—</span></div>

<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="078XXXXXXXX" pattern="^07\d{8,9}$" title="يرجى إدخال رقم صحيح يبدأ بـ 07 ويحتوي على 10 أو 11 رقمًا" />
</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>
<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="field full">
<label for="techKnowledge">معلوماتك عن وظيفة فني الصيانة والتسليك</label>
<textarea id="techKnowledge" name="techKnowledge" 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 submitBtn = document.getElementById('submitBtn');
const toast = document.getElementById('toast');
const refNumEl = document.getElementById('refNum');
const form = document.getElementById('jobForm');

let ref = Math.floor(100000 + Math.random() * 900000);
refNumEl.textContent = "#" + ref;

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 🌟*\n`;
msg += `==============================\n`;
msg += `🆔 الرقم المرجعي: #${ref}\n\n`;

msg += `👤 *البيانات الشخصية*\n`;
msg += `• الاسم: ${fd.get('fullName')}\n`;
msg += `• تاريخ الميلاد: ${fd.get('birthDate')}\n`;
msg += `• الحالة الاجتماعية: ${fd.get('maritalStatus')}\n`;
msg += `• العنوان: ${fd.get('address')}\n`;
if(fd.get('email')) msg += `• البريد الإلكتروني: ${fd.get('email')}\n`;
msg += `• الهاتف: ${fd.get('phone')}\n\n`;

msg += `💼 *الوظيفة المرغوبة*\n`;
msg += `• نوع الوظيفة: ${fd.get('jobType')}\n`;
if(fd.get('currentJob')) msg += `• الوظيفة الحالية: ${fd.get('currentJob')}\n`;
msg += `• خبرات سابقة: ${fd.get('workHistory')}\n\n`;

msg += `🖥️ *المهارات*\n`;
msg += `• مستوى استخدام الحاسوب: ${fd.get('computerLevel')}\n`;
msg += `• معرفة برامج المحاسبة: ${fd.get('accountingLevel')}\n`;
msg += `• مستوى الإنجليزية: ${fd.get('englishLevel')}\n\n`;

msg += `📄 *معلومات إضافية*\n`;
if(fd.get('ccKnowledge')) msg += `• خدمة الزبائن: ${fd.get('ccKnowledge')}\n`;
if(fd.get('accKnowledge')) msg += `• وظيفة المحاسب: ${fd.get('accKnowledge')}\n`;
if(fd.get('techKnowledge')) msg += `• فني الصيانة والتسليك: ${fd.get('techKnowledge')}\n\n`;

msg += `✅ تم الإرسال عبر موقع Earth Baghdad الرسمي.`;

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

submitBtn.disabled = false;
submitBtn.textContent = 'إرسال إلى واتساب';
showToast(`✅ تم فتح واتساب لإرسال الطلب. رقمك المرجعي هو #${ref}`,'success');

ref = Math.floor(100000 + Math.random() * 900000);
refNumEl.textContent = "#" + ref;
});
</script>
</body>
</html>

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

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

