<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>دروس اللغة الإنجليزية - FaragDev98</title>
  <meta name="description" content="تعلم الإنجليزية مع فراج عبدالله عبر دروس مبسطة وجمل صوتية مترجمة.">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: linear-gradient(to bottom, #b28ff9, #e0ccff);
      color: #222;
    }

    .top-nav {
      background: #6a11cb;
      color: white;
      text-align: center;
      padding: 0.6rem;
      font-size: 1rem;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .top-nav a {
      color: white;
      text-decoration: none;
      margin: 0 12px;
      font-weight: bold;
    }

    .top-nav a:hover {
      text-decoration: underline;
    }

    header {
      background: #e60023;
      color: white;
      padding: 1.2rem;
      text-align: center;
      font-size: 1.8rem;
      font-weight: bold;
    }

    .lesson-section {
      padding: 2rem 1rem;
      text-align: center;
    }

    .lesson {
      background: #fff;
      margin: 20px auto;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
      max-width: 650px;
    }

    .lesson h3 {
      color: #6a11cb;
    }

    .lesson p {
      font-size: 1.2rem;
      line-height: 1.8;
      margin: 0.5rem 0;
      cursor: pointer;
    }

    .image {
      display: block;
      margin: 15px auto;
      max-width: 240px;
      border-radius: 14px;
    }

    footer {
      background: #f4f4f4;
      padding: 1rem;
      text-align: center;
      font-size: 0.9rem;
      border-top: 1px solid #ccc;
    }

    .footer-links a {
      margin: 0 10px;
      color: #2575fc;
      text-decoration: none;
    }

    .footer-links a:hover {
      color: #6a11cb;
    }
  </style>

  <!-- AdSense -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2292540012620202" crossorigin="anonymous"></script>
</head>
<body>

  <div class="top-nav">
    <a href="index.html">🏠 الرئيسية</a>
    <a href="القواعد.html">📖 القواعد</a>
    <a href="المقالات.html">📝 المقالات</a>
    <a href="الشروط.html">📄 الشروط</a>
    <a href="الخصوصية.html">🔒 الخصوصية</a>
  </div>

  <header>📚 دروس اللغة الإنجليزية مع فراج عبدالله</header>

  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2292540012620202" data-ad-slot="2898280986" data-ad-format="auto" data-full-width-responsive="true"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

  <section class="lesson-section">
    <img class="image" src="https://media.giphy.com/media/3ohhwDdyq2yXZi1fBa/giphy.gif" alt="تعلم الإنجليزية">

    <!-- 🟣 الدرس 1 -->
    <div class="lesson">
      <h3>✨ الدرس 1: التحية</h3>
      <p onclick="speak('Good morning')">Good morning = صباح الخير 🔊</p>
      <p onclick="speak('How are you?')">How are you? = كيف حالك؟ 🔊</p>
      <p onclick="speak('I am fine')">I’m fine = أنا بخير 🔊</p>
      <p onclick="speak('Nice to meet you')">Nice to meet you = تشرفت بلقائك 🔊</p>
    </div>

    <!-- 🟣 الدرس 2 -->
    <div class="lesson">
      <h3>🏫 الدرس 2: المدرسة</h3>
      <p onclick="speak('This is a school')">This is a school = هذه مدرسة 🔊</p>
      <p onclick="speak('This is my teacher')">This is my teacher = هذا معلمي 🔊</p>
      <p onclick="speak('Open your book')">Open your book = افتح كتابك 🔊</p>
      <p onclick="speak('I am in class')">I am in class = أنا في الفصل 🔊</p>
    </div>

    <!-- 🟣 الدرس 3 -->
    <div class="lesson">
      <h3>🕒 الدرس 3: الوقت</h3>
      <p onclick="speak('What time is it?')">What time is it? = كم الساعة؟ 🔊</p>
      <p onclick="speak('It’s ten o’clock')">It’s ten o’clock = الساعة العاشرة 🔊</p>
      <p onclick="speak('It’s half past seven')">It’s half past seven = السابعة والنصف 🔊</p>
      <p onclick="speak('It’s time to study')">It’s time to study = حان وقت الدراسة 🔊</p>
    </div>

    <!-- 🟣 الدرس 4 -->
    <div class="lesson">
      <h3>🌈 الدرس 4: الألوان</h3>
      <p onclick="speak('Red')">Red = أحمر 🔊</p>
      <p onclick="speak('Blue')">Blue = أزرق 🔊</p>
      <p onclick="speak('Yellow')">Yellow = أصفر 🔊</p>
      <p onclick="speak('Black and white')">Black and white = أسود وأبيض 🔊</p>
    </div>

    <!-- 🟣 الدرس 5 -->
    <div class="lesson">
      <h3>👨‍👩‍👧‍👦 الدرس 5: العائلة</h3>
      <p onclick="speak('Father')">Father = أب 🔊</p>
      <p onclick="speak('Mother')">Mother = أم 🔊</p>
      <p onclick="speak('Brother')">Brother = أخ 🔊</p>
      <p onclick="speak('Sister')">Sister = أخت 🔊</p>
    </div>
  </section>

  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2292540012620202" data-ad-slot="2898280986" data-ad-format="auto" data-full-width-responsive="true"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

  <footer>
    <div class="footer-links">
      <a href="index.html">الرئيسية</a> |
      <a href="القواعد.html">القواعد</a> |
      <a href="المقالات.html">مقال</a> |
      <a href="الشروط.html">الشروط</a> |
      <a href="الخصوصية.html">الخصوصية</a>
    </div>
    <div>جميع الحقوق محفوظة © 2025 - <a href="https://faragdev98.github.io" target="_blank">FaragDev98</a></div>
  </footer>

  <script>
    function speak(text) {
      const utter = new SpeechSynthesisUtterance(text);
      utter.lang = 'en-US';
      speechSynthesis.speak(utter);
    }
  </script>
</body>
</html>
