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>بوابة التوظيف - Earth Baghdad</title>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;600;700&display=swap" rel="stylesheet">
    
    <style>
        /* === CSS Isolation: نفس التصميم الأصلي 100% === */
        .eb-global-scope {
            --eb-primary: #002e6d;
            --eb-secondary: #0056b3;
            --eb-accent: #eab308;
            --eb-bg: #f8fafc;
            --eb-card: #ffffff;
            --eb-text: #1e293b;
            --eb-border: #cbd5e1;
            --eb-error: #dc2626;
            --eb-success: #16a34a;
            
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            color: var(--eb-text);
            line-height: 1.6;
            box-sizing: border-box;
            width: 100%;
            max-width: 850px;
            margin: 0 auto;
        }

        .eb-global-scope * { box-sizing: border-box; outline: none; }

        .eb-card {
            background: var(--eb-card);
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: 1px solid #e2e8f0;
            overflow: hidden;
            margin: 20px 10px;
        }

        .eb-header {
            background: var(--eb-primary);
            color: white;
            padding: 30px;
            text-align: center;
            border-bottom: 4px solid var(--eb-accent);
        }
        .eb-header h1 { margin: 0; font-size: 1.8rem; font-weight: 700; }
        .eb-header p { margin: 5px 0 0; font-size: 0.9rem; opacity: 0.9; }

        .eb-progress-container {
            height: 4px;
            background: #e2e8f0;
            width: 100%;
        }
        .eb-progress-bar {
            height: 100%;
            background: var(--eb-accent);
            width: 20%;
            transition: width 0.3s ease;
        }

        .eb-body { padding: 30px; display: grid; gap: 20px; }
        
        @media (min-width: 768px) {
            .eb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        }

        .eb-field { display: flex; flex-direction: column; gap: 8px; }
        
        .eb-label {
            font-weight: 600;
            font-size: 0.95rem;
            color: #334155;
        }
        .eb-req { color: var(--eb-error); }
        .eb-opt { color: #64748b; font-weight: normal; font-size: 0.85rem; }

        .eb-input, .eb-select, .eb-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--eb-border);
            border-radius: 6px;
            font-family: inherit;
            font-size: 0.95rem;
            transition: all 0.2s;
            background-color: #fff;
        }

        .eb-input:focus, .eb-select:focus, .eb-textarea:focus {
            border-color: var(--eb-secondary);
            box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
        }

        /* تنسيق صندوق التنبيه (تمت إضافة Margin-top لفصله عن الزر) */
        .eb-alert-box {
            background-color: #fef2f2;
            border: 1px solid #fee2e2;
            color: #991b1b;
            padding: 15px;
            border-radius: 8px;
            font-size: 0.9rem;
            display: none;
            align-items: center;
            gap: 10px;
            margin-top: 15px; /* مسافة علوية تفصله عن الزر */
        }
        .eb-alert-box.visible { display: flex; animation: fadeIn 0.3s; }

        .eb-btn {
            background: linear-gradient(to bottom right, var(--eb-primary), var(--eb-secondary));
            color: white;
            font-size: 1rem;
            font-weight: 700;
            padding: 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
            transition: transform 0.1s, opacity 0.2s;
        }
        .eb-btn:hover { opacity: 0.95; }
        .eb-btn:disabled { background: #94a3b8; cursor: not-allowed; opacity: 1; }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    </style>
</head>
<body style="background:#f1f5f9; margin:0; padding:10px;">

<div class="eb-global-scope">
    <div class="eb-card">
        <header class="eb-header">
            <h1>استمارة التوظيف الأولية</h1>
            <p>Earth Baghdad | تقديم طلب وظيفة</p>
        </header>
        
        <div class="eb-progress-container">
            <div class="eb-progress-bar" id="progressBar"></div>
        </div>

        <form id="ebForm" class="eb-body" novalidate>
            
            <div class="eb-row">
                <div class="eb-field">
                    <label class="eb-label">الاسم الثلاثي واللقب <span class="eb-req">*</span></label>
                    <input type="text" name="fullName" class="eb-input" placeholder="اكتب اسمك الكامل" required minlength="6">
                </div>
                <div class="eb-field">
                    <label class="eb-label">رقم الهاتف (واتساب) <span class="eb-req">*</span></label>
                    <input type="tel" name="phone" class="eb-input" placeholder="07XXXXXXXXX" pattern="^07[0-9]{9}$" required>
                </div>
            </div>

            <div class="eb-row">
                <div class="eb-field">
                    <label class="eb-label">البريد الإلكتروني <span class="eb-opt">(اختياري)</span></label>
                    <input type="email" name="email" class="eb-input" placeholder="example@mail.com">
                </div>
                <div class="eb-field">
                    <label class="eb-label">الجنس <span class="eb-req">*</span></label>
                    <select name="gender" id="gender" class="eb-select" required onchange="checkCompliance()">
                        <option value="" disabled selected>-- اختر الجنس --</option>
                        <option value="male">ذكر</option>
                        <option value="female">أنثى</option>
                    </select>
                </div>
            </div>

            <div class="eb-row">
                <div class="eb-field">
                    <label class="eb-label">العمر <span class="eb-req">*</span></label>
                    <input type="number" name="age" id="ageInput" class="eb-input" placeholder="مثال: 24" required oninput="checkCompliance()">
                </div>
                <div class="eb-field">
                    <label class="eb-label">تاريخ الميلاد <span class="eb-req">*</span></label>
                    <input type="text" name="dob" id="dobInput" class="eb-input" placeholder="مثال: 1999 أو 25/5/1999" required oninput="checkCompliance()">
                </div>
            </div>

            <div class="eb-field">
                <label class="eb-label">عنوان السكن الحالي <span class="eb-req">*</span></label>
                <input type="text" name="address" class="eb-input" placeholder="المحافظة - المنطقة - أقرب نقطة دالة" required>
            </div>

            <hr style="border:0; border-top:1px solid #e2e8f0; width:100%">

            <div class="eb-row">
                <div class="eb-field">
                    <label class="eb-label">التحصيل الدراسي <span class="eb-req">*</span></label>
                    <select name="education" class="eb-select" required>
                        <option value="" disabled selected>-- اختر التحصيل --</option>
                        <option>دبلوم</option>
                        <option>بكالوريوس</option>
                        <option>ماجستير / دكتوراه</option>
                        <option>إعدادية أو أقل</option>
                    </select>
                </div>
                <div class="eb-field">
                    <label class="eb-label">التخصص الدقيق <span class="eb-req">*</span></label>
                    <input type="text" name="specialization" class="eb-input" placeholder="مثال: هندسة حاسبات، محاسبة.." required>
                </div>
            </div>

            <div class="eb-row">
                <div class="eb-field">
                    <label class="eb-label">اسم الجامعة / المعهد <span class="eb-req">*</span></label>
                    <input type="text" name="university" class="eb-input" placeholder="اسم الجهة التعليمية" required>
                </div>
                <div class="eb-field">
                    <label class="eb-label">سنة التخرج <span class="eb-req">*</span></label>
                    <input type="number" name="gradYear" class="eb-input" placeholder="YYYY" min="1970" max="2030" required>
                </div>
            </div>

            <hr style="border:0; border-top:1px solid #e2e8f0; width:100%">

            <div class="eb-field">
                <label class="eb-label">الوظيفة المتقدم عليها <span class="eb-req">*</span></label>
                <select name="jobRole" id="jobRole" class="eb-select" required onchange="checkCompliance()">
                    <option value="" disabled selected>-- الرجاء اختيار الوظيفة --</option>
                    <option value="accountant">محاسب (للجنسين)</option>
                    <option value="sales">محترف مبيعات (للجنسين)</option>
                    <option value="technician">فني مشروع وطني (ذكور فقط)</option>
                    <option value="content_creator">صانعة محتوى (إناث فقط)</option>
                </select>
            </div>

            <div class="eb-row">
                <div class="eb-field">
                    <label class="eb-label">اللغات التي تجيدها <span class="eb-req">*</span></label>
                    <input type="text" name="languages" class="eb-input" placeholder="العربية، الإنجليزية (متوسط)..." required>
                </div>
                <div class="eb-field">
                    <label class="eb-label">أبرز المهارات (Skills) <span class="eb-req">*</span></label>
                    <input type="text" name="skills" class="eb-input" placeholder="Excel, Communication, Editing..." required>
                </div>
            </div>

            <div class="eb-field">
                <label class="eb-label">الخبرات السابقة (Work Experience) <span class="eb-req">*</span></label>
                <textarea name="experience" class="eb-textarea" rows="4" placeholder="اذكر الشركات التي عملت بها، مدة العمل، وأهم المسؤوليات..." required></textarea>
            </div>

            <button type="submit" id="submitBtn" class="eb-btn">إرسال الاستمارة عبر واتساب</button>

            <div id="complianceAlert" class="eb-alert-box">
                <span style="font-size:1.2rem">⚠️</span>
                <div>
                    <strong>تنبيه:</strong> <span id="alertText">يوجد خطأ في المدخلات.</span>
                </div>
            </div>

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

<script>
    // === 1. عناصر التحكم ===
    const form = document.getElementById('ebForm');
    const jobRole = document.getElementById('jobRole');
    const gender = document.getElementById('gender');
    const ageInput = document.getElementById('ageInput');
    const dobInput = document.getElementById('dobInput');
    const alertBox = document.getElementById('complianceAlert');
    const submitBtn = document.getElementById('submitBtn');
    const progressBar = document.getElementById('progressBar');

    // === 2. منطق التحقق الشامل (وظيفة + عمر + مواليد) ===
    function checkCompliance() {
        const g = gender.value;
        const j = jobRole.value;
        const age = ageInput.value;
        const dob = dobInput.value;
        
        // إعادة تعيين الحالة (افتراض أن كل شيء صحيح)
        alertBox.classList.remove('visible');
        submitBtn.disabled = false;
        progressBar.style.background = '#eab308'; // أصفر (قيد الإدخال)
        
        let valid = true;
        let msg = "";

        // 1. فحص التوافق الوظيفي
        if (j === 'technician' && g === 'female') {
            valid = false;
            msg = "عذراً، وظيفة الفني تتطلب عملاً ميدانياً شاقاً وهي مخصصة للذكور حالياً.";
        }
        else if (j === 'content_creator' && g === 'male') {
            valid = false;
            msg = "عذراً، وظيفة صانعة المحتوى مخصصة للإناث حسب متطلبات الفريق الحالي.";
        }

        // 2. فحص العمر (أقل من 18)
        if (age && parseInt(age) < 18) {
            valid = false;
            msg = "عذراً، لا يمكن قبول طلبات التوظيف لمن هم دون سن 18 عاماً.";
        }

        // 3. فحص المواليد (استخراج السنة ومقارنتها)
        if (dob) {
            // نبحث عن أي رقم مكون من 4 خانات يبدأ بـ 19 أو 20 (السنة)
            const yearMatch = dob.match(/(19|20)\d{2}/);
            if (yearMatch) {
                const year = parseInt(yearMatch[0]);
                const currentYear = new Date().getFullYear();
                if ((currentYear - year) < 18) {
                    valid = false;
                    msg = "تاريخ الميلاد المدخل يشير إلى أن العمر أقل من 18 سنة، يرجى التحقق.";
                }
            }
        }

        // إذا وجد خطأ، أظهر التنبيه
        if (!valid) {
            document.getElementById('alertText').textContent = msg;
            alertBox.classList.add('visible');
            submitBtn.disabled = true;
            progressBar.style.width = '100%';
            progressBar.style.background = '#dc2626'; // أحمر
            return false;
        }
        
        // إذا كان كل شيء سليم
        if (g && j && age && dob) {
            progressBar.style.width = '70%';
        }
        return true;
    }

    // === 3. الإرسال ===
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if(!form.checkValidity() || !checkCompliance()){
            form.reportValidity();
            return;
        }

        progressBar.style.width = '100%';
        progressBar.style.background = '#16a34a'; // أخضر

        const fd = new FormData(form);
        const roleName = jobRole.options[jobRole.selectedIndex].text;
        const emailVal = fd.get('email') ? fd.get('email') : "غير محدد";

        // تنسيق رسالة الواتساب
        let msg = `*📄 استمارة توظيف أولية | Job Application*\n`;
        msg += `ـــــــــــــــــــــــــــــــــــــــــــــــــــــ\n`;
        msg += `📌 *الكود:* #${Math.floor(Math.random()*9000)+1000}\n\n`;

        msg += `👤 *المعلومات الشخصية:*\n`;
        msg += `• الاسم: ${fd.get('fullName')}\n`;
        msg += `• الهاتف: ${fd.get('phone')}\n`;
        msg += `• الإيميل: ${emailVal}\n`;
        msg += `• الجنس: ${fd.get('gender') === 'male' ? 'ذكر' : 'أنثى'}\n`;
        msg += `• العمر: ${fd.get('age')} سنة\n`;
        msg += `• المواليد: ${fd.get('dob')}\n`;
        msg += `• السكن: ${fd.get('address')}\n\n`;

        msg += `🎓 *المعلومات الأكاديمية:*\n`;
        msg += `• التحصيل: ${fd.get('education')}\n`;
        msg += `• التخصص: ${fd.get('specialization')}\n`;
        msg += `• الجامعة: ${fd.get('university')} (${fd.get('gradYear')})\n\n`;

        msg += `💼 *الطلب والمهارات:*\n`;
        msg += `• الوظيفة المطلوبة: ${roleName}\n`;
        msg += `• اللغات: ${fd.get('languages')}\n`;
        msg += `• المهارات: ${fd.get('skills')}\n`;
        msg += `ـــــــــــــــــــــــــــــــــــــــــــــــــــــ\n`;
        msg += `📜 *الخبرات السابقة:*\n`;
        msg += `_${fd.get('experience')}_\n`;

        const phone = "9647838929924"; 
        const url = `https://wa.me/${phone}?text=${encodeURIComponent(msg)}`;

        submitBtn.textContent = "جارٍ فتح واتساب...";
        setTimeout(() => {
            window.open(url, '_blank');
            submitBtn.textContent = "تم الإرسال";
        }, 1000);
    });

</script>

</body>
</html>

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

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

