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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; margin:0; padding:0; background:#fff; }
#courses-widget { background-color:#f8f9fa; max-width:1100px; margin:30px auto; padding:30px; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,0.1); }
#courses-widget h1 { text-align:center; color:#007bff; margin-bottom:35px; font-size:2.8em; font-weight:700; }
#course-selection { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.course-button { background-color:#f0f0f0; color:#343a40; padding:15px 30px; border:2px solid #ddd; border-radius:30px; font-size:1.1em; font-weight:600; cursor:pointer; transition:all 0.3s ease; flex-grow:1; max-width:300px; margin:5px; }
.course-button:hover { background-color:#e9ecef; border-color:#007bff; transform:translateY(-2px); }
.course-button.active { background-color:#007bff; color:#fff; border-color:#007bff; box-shadow:0 4px 12px rgba(0,123,255,0.3); transform:translateY(-2px); }
#course-details-container { background-color:#fff; border-radius:15px; padding:30px; box-shadow:0 4px 15px rgba(0,0,0,0.05); min-height:450px; text-align:right; }
#course-details-container h2 { color:#007bff; }
.course-modules ul { list-style:circle; padding-right:20px; }
.course-modules li { margin:5px 0; }
.register-btn { background-color:#28a745; color:white; padding:12px 25px; border:none; border-radius:8px; cursor:pointer; font-size:1.1em; margin-top:20px; display:inline-flex; align-items:center; font-weight:bold; }
.register-btn:hover { background-color:#1e7e34; }
.register-btn i { margin-left:10px; }
#registration-modal { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:center; z-index:1000; padding:10px; }
.application-form-wrapper { background-color:#fff; padding:30px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.2); max-width:650px; width:100%; margin:20px auto; direction:rtl; text-align:right; position:relative; }
.form-close-btn { position:absolute; top:15px; left:15px; background:none; border:none; font-size:24px; cursor:pointer; color:#aaa; transition: color 0.2s; }
.form-close-btn:hover { color:#333; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; font-weight:bold; margin-bottom:5px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; font-size:1em; }
#whatsapp-button { background-color:#25D366; color:white; padding:14px 20px; border:none; border-radius:8px; cursor:pointer; width:100%; font-size:17px; font-weight:bold; margin-top:15px; display:flex; align-items:center; justify-content:center; transition:background-color 0.3s ease; }
#whatsapp-button:hover { background-color:#128C7E; }
.whatsapp-icon { margin-left:8px; width:18px; height:18px; }
@media(max-width:768px){
  .course-button{width:100%; max-width:100%; flex-grow:0; margin:5px 0;}
  .application-form-wrapper{padding:15px;margin:10px;}
}
</style>
</head>
<body>

<div id="courses-widget">
<h1>دوراتنا التدريبية الاحترافية</h1>
<div id="course-selection">
  <button class="course-button" data-course="basic-computer">أساسيات الحاسوب</button>
  <button class="course-button" data-course="cpp-programming">دورة C++</button>
  <button class="course-button" data-course="ai-applications">الذكاء الاصطناعي وتطبيقاته</button>
  <button class="course-button" data-course="fiber-optics">دورة الفايبر أوبتك</button>
  <button class="course-button" data-course="ccna">دورة CCNA (200-301)</button>
  <button class="course-button" data-course="ftth-maintenance">صيانة وتسليك المشتركين (FTTH)</button>
</div>

<div id="course-details-container">
  <p class="initial-message">
    <i class="fas fa-hand-point-up" style="color:#007bff;margin-left:10px;"></i>
    الرجاء اختيار دورة من الأعلى لعرض محتواها بشكل تفصيلي.
  </p>
</div>
</div>

<div id="registration-modal">
  <div class="application-form-wrapper">
    <button class="form-close-btn" id="close-form-btn">&times;</button>
    <h2>نموذج طلب التسجيل في <span id="selected-course-title" style="color:#f39c12;"></span></h2>
    <form id="applicationForm">
      <input type="hidden" id="reference-id">
      <input type="hidden" id="course-name-hidden">

      <div class="form-group">
        <label>الاسم الكامل:*</label>
        <input type="text" id="full-name" required>
      </div>

      <div class="form-group">
        <label>العمر:*</label>
        <input type="number" id="age" min="16" max="60" required>
      </div>

      <div class="form-group">
        <label>رقم هاتف آخر:</label>
        <input type="text" id="phone">
      </div>

      <div class="form-group">
        <label>التحصيل الدراسي:*</label>
        <select id="education-status" required>
          <option value="" disabled selected>-- اختر --</option>
          <option value="خريج">خريج</option>
          <option value="طالب">طالب</option>
        </select>
      </div>

      <div class="form-group">
        <label>التخصص:*</label>
        <input type="text" id="major" required>
      </div>

      <div class="form-group">
        <label>خبرة سابقة:</label>
        <textarea id="experience"></textarea>
      </div>

      <div class="form-group">
        <label>العنوان:*</label>
        <input type="text" id="address" required>
      </div>

      <div class="form-group">
        <label>البريد الإلكتروني:</label>
        <input type="email" id="email">
      </div>

      <button type="submit" id="whatsapp-button">
        إرسال طلب التقديم عبر واتساب 
        <img class="whatsapp-icon" src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg">
      </button>
    </form>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){

const coursesData = {
"basic-computer": {title:"أساسيات الحاسوب", modules:["مقدمة في الحاسوب","مكونات الحاسوب الأساسية","البرمجياتSoftware","اساسيات نظام التشغيلWindows","معالجة النصوصMicrosoft Word","الجداول الإلكترونيةMicrosoft Excel","العروض التقديميةMicrosoft power point","الإنترنت والبريد الإلكتروني","مهارات إضافية"]},
"cpp-programming": {title:"دورة C++", modules:["مقدمة عن C++","المتغيرات وأنواع البيانات Variables & Data Types","المعاملات Operatores","الجمل الشرطية Conditional Statements","الحلقات التكرارية Loops","الدوال Functions","المصفوفات Arrays","المؤشرات Pointers","البرمجة الكائنية Object-Oriented Programming-OOP","الكائنات Objects","الاصناف Classes","الوراثة Inheritance","التغليف Encapsulation","تعدد الاشكال Polymorphism","القوالب Tamplates","معالجة الاستثناءاتException Handing","ملفات الادخال والاخراج","انشاء برامج واقعية","تدريب على الأكواد"]},
"ai-applications": {title:"الذكاء الاصطناعي وتطبيقاته", modules:["مقدمة عن الذكاء الاصطناعي","آلية عمل الذكاء الاصطناعي","أهمية الذكاء الاصطناعي","فروع الذكاء الاصطناعي","استخدامات الذكاء الاصطناعي","مجالات الذكاء الاصطناعي","مكتبات الذكاء الاصطناعي واستخداماتها","تطبيق الذكاء الاصطناعيChatGPT","مميزات التطبيق","عيوب التطبيق","هل هو افضل من جوجل","طرق الاستفادة من التطبيق في عملك","التفاعل البشري مع التطبيق","مصادر معلومات التطبيق","علاقة الذكاء بالتعليم","المهن التي يهددها الذكاء الاصطناعي"]},
"fiber-optics": {title:"دورة الفايبر أوبتك", modules:["مدخل إلى عالم الفايبر اوبتك","مفهوم البدالة","الكيبل الضوئي ومكوناته","صناديق التوزيعODF & Fat Box","مفهوم جهاز ONT","تدريب عملي على لحام الفايبر"," مفهوم جهاز OTDR","أدوات الفايبر Fiber Tools","اختبارات الجودة والفقد","المعايير العالميةوالأخطاءالشائعة","الأخطاء في لحام الالياف","الامن واجراءات السلامة","التعامل مع الادوات والاجهزة","ادارة مشاريع الفايبر", "مراجعة شاملة+امتحان"]},
"ccna": {title:"دورة CCNA (200-301)", modules:["أساسيات الشبكاتNetwork Fundamentals","عنونة IP وتقسيم الشبكاتIP Addressing&Subnetting","إعداد وإدارة أجهزة Cisco","التبديل في الشبكة المحلية","التوجيه في الشبكةIP Routing","الأمن الأساسي للشبكةNetwork Security Fundamentals","الشبكات اللاسلكيةWireless LANs","التشغيل الآلي والبرمجةNetwork Automation and programmability","التدريب العملي والتطبيقي","مراجعة شاملة","نماذج امتحانات CCNA"]},
// الدورة الجديدة المضافة
"ftth-maintenance": {title:"دورة صيانة وتسليك المشتركين ضمن المشروع الوطني", modules:["مقدمة ومدخل في نظام FTTH","التعرف على الأدوات والمعدات المستخدمة","خطوات التسليك للمشتركين","خطوات الصيانة الميدانية للمشتركين","معالجة الأعطال","التعرف على اساسيات البرمجة للأجهزة","تقارير العمل والتعامل مع المشتركين","مراجعة شاملة+اختبار"]}
};

const buttons = document.querySelectorAll('.course-button');
const detailsContainer = document.getElementById('course-details-container');

// عند الضغط على زر دورة
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const courseId = btn.dataset.course;
    const course = coursesData[courseId];
    if (!course) return;

    buttons.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    detailsContainer.innerHTML = `
      <div class="details-content" id="details-${courseId}">
        <div class="header-content"><h2>${course.title}</h2></div>
        <div class="course-modules">
          <h3 class="modules-header">محاور الدورة:</h3>
          <ul>${course.modules.map(m => `<li>${m}</li>`).join('')}</ul>
        </div>
        <button class="register-btn" data-course="${courseId}">سجل الآن <i class="fas fa-arrow-left"></i></button>
      </div>
    `;
    document.getElementById(`details-${courseId}`).scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
});

// تفويض حدث الضغط على زر التسجيل
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('register-btn') || e.target.closest('.register-btn')) {
    const btn = e.target.closest('.register-btn');
    const courseId = btn.dataset.course;
    const courseTitle = coursesData[courseId]?.title || "دورة تدريبية";
    openRegistrationForm(courseTitle);
  }
});

function openRegistrationForm(courseTitle) {
  const modal = document.getElementById('registration-modal');
  modal.style.display = 'flex';
  document.getElementById('selected-course-title').textContent = courseTitle;
  document.getElementById('reference-id').value = 'REF-' + Math.floor(Math.random() * 1000000);
  document.getElementById('course-name-hidden').value = courseTitle;
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

document.getElementById('close-form-btn').addEventListener('click', function() {
  document.getElementById('registration-modal').style.display = 'none';
});

document.getElementById('applicationForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('full-name').value.trim();
  const courseName = document.getElementById('course-name-hidden').value;
  const refId = document.getElementById('reference-id').value;
  const age = document.getElementById('age').value;
  const phone = document.getElementById('phone').value;
  const education = document.getElementById('education-status').value;
  const major = document.getElementById('major').value;
  const experience = document.getElementById('experience').value;
  const address = document.getElementById('address').value;
  const email = document.getElementById('email').value;

  let message = `طلب تسجيل دورة: *${courseName}*\nالرقم المرجعي: *${refId}*\nالاسم الكامل: *${name}*\nالعمر: *${age}*\n`;
  if (phone) message += `رقم الهاتف: *${phone}*\n`;
  message += `التحصيل الدراسي: *${education}*\nالتخصص: *${major}*\n`;
  if (experience) message += `الخبرة السابقة: *${experience}*\n`;
  message += `العنوان: *${address}*\n`;
  if (email) message += `البريد الإلكتروني: *${email}*\n`;
  message += `السعر: *99,000 د.ع*`;

  const whatsappNumber = '9647838929924';
  const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
  window.open(whatsappUrl, '_blank');
});
});
</script>

</body>
</html>

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

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

