<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Football AI</title>

  <style>
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      margin: 0;
      background: #f1f5f3;
      color: #17202a;
    }

    header {
      background: #087f47;
      color: white;
      text-align: center;
      padding: 28px 15px;
    }

    header h1 {
      margin: 0;
      font-size: 30px;
    }

    header p {
      margin: 8px 0 0;
      font-size: 16px;
    }

    .container {
      max-width: 600px;
      margin: auto;
      padding: 15px;
    }

    .box {
      background: white;
      margin-top: 15px;
      padding: 18px;
      border-radius: 15px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    }

    h2 {
      margin-top: 0;
    }

    textarea {
      width: 100%;
      height: 110px;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 10px;
      font-size: 16px;
      resize: none;
      outline: none;
    }

    button {
      width: 100%;
      margin-top: 10px;
      padding: 14px;
      border: 0;
      border-radius: 10px;
      background: #087f47;
      color: white;
      font-size: 17px;
      cursor: pointer;
    }

    button:active {
      transform: scale(0.98);
    }

    .answer {
      display: none;
      margin-top: 15px;
      padding: 15px;
      border-radius: 10px;
      background: #edf8f1;
      line-height: 1.8;
    }

    .match {
      border-top: 1px solid #eee;
      padding: 14px 0;
    }

    .match:first-of-type {
      border-top: none;
    }

    .day {
      color: #087f47;
      font-weight: bold;
    }

    footer {
      text-align: center;
      padding: 25px;
      color: #777;
    }
  </style>
</head>

<body>

  <header>
    <h1>⚽ Football AI</h1>
    <p>مساعدك الذكي في عالم كرة القدم</p>
  </header>

  <div class="container">

    <!-- قسم الذكاء الاصطناعي -->
    <div class="box">

      <h2>🤖 اسأل Football AI</h2>

      <textarea
        id="question"
        placeholder="اكتب سؤالك عن كرة القدم...">
      </textarea>

      <button onclick="askAI()">
        اسأل الآن ⚡
      </button>

      <div class="answer" id="answer"></div>

    </div>

    <!-- مباريات اليوم -->
    <div class="box">

      <h2>🏟️ مباريات اليوم</h2>

      <div class="match">
        <span class="day">اليوم</span>
        <br>
        سيتم إضافة المباريات الحقيقية هنا.
      </div>

    </div>

    <!-- مباريات الأمس -->
    <div class="box">

      <h2>📅 مباريات الأمس</h2>

      <div class="match">
        سيتم إضافة نتائج المباريات الحقيقية هنا.
      </div>

    </div>

    <!-- مباريات الغد -->
    <div class="box">

      <h2>🔜 مباريات الغد</h2>

      <div class="match">
        سيتم إضافة مباريات الغد الحقيقية هنا.
      </div>

    </div>

  </div>

  <footer>
    ⚽ Football AI
    <br>
    مشروع معلومات كرة القدم
  </footer>


  <script>

    function askAI() {

      const question =
        document.getElementById("question").value.trim();

      const answer =
        document.getElementById("answer");

      if (!question) {

        answer.style.display = "block";

        answer.innerHTML =
          "⚠️ اكتب سؤالاً عن كرة القدم أولاً.";

        return;
      }

      answer.style.display = "block";

      answer.innerHTML =
        "⏳ جاري تجهيز الإجابة...";

      setTimeout(function() {

        answer.innerHTML =
          "🤖 <b>Football AI</b><br><br>" +
          "استلمت سؤالك:<br><br>" +
          "<b>" +
          escapeHTML(question) +
          "</b><br><br>" +
          "✅ الواجهة تعمل بنجاح!<br><br>" +
          "🚀 سيتم في الخطوة القادمة ربط التطبيق بذكاء اصطناعي حقيقي.";

      }, 700);
    }


    function escapeHTML(text) {

      const div =
        document.createElement("div");

      div.textContent = text;

      return div.innerHTML;
    }

  </script>

</body>
</html><!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Football AI</title>

  <style>
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      margin: 0;
      background: #f1f5f3;
      color: #17202a;
    }

    header {
      background: #087f47;
      color: white;
      text-align: center;
      padding: 28px 15px;
    }

    header h1 {
      margin: 0;
      font-size: 30px;
    }

    header p {
      margin: 8px 0 0;
      font-size: 16px;
    }

    .container {
      max-width: 600px;
      margin: auto;
      padding: 15px;
    }

    .box {
      background: white;
      margin-top: 15px;
      padding: 18px;
      border-radius: 15px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    }

    h2 {
      margin-top: 0;
    }

    textarea {
      width: 100%;
      height: 110px;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 10px;
      font-size: 16px;
      resize: none;
      outline: none;
    }

    button {
      width: 100%;
      margin-top: 10px;
      padding: 14px;
      border: 0;
      border-radius: 10px;
      background: #087f47;
      color: white;
      font-size: 17px;
      cursor: pointer;
    }

    button:active {
      transform: scale(0.98);
    }

    .answer {
      display: none;
      margin-top: 15px;
      padding: 15px;
      border-radius: 10px;
      background: #edf8f1;
      line-height: 1.8;
    }

    .match {
      border-top: 1px solid #eee;
      padding: 14px 0;
    }

    .match:first-of-type {
      border-top: none;
    }

    .day {
      color: #087f47;
      font-weight: bold;
    }

    footer {
      text-align: center;
      padding: 25px;
      color: #777;
    }
  </style>
</head>

<body>

  <header>
    <h1>⚽ Football AI</h1>
    <p>مساعدك الذكي في عالم كرة القدم</p>
  </header>

  <div class="container">

    <!-- قسم الذكاء الاصطناعي -->
    <div class="box">

      <h2>🤖 اسأل Football AI</h2>

      <textarea
        id="question"
        placeholder="اكتب سؤالك عن كرة القدم...">
      </textarea>

      <button onclick="askAI()">
        اسأل الآن ⚡
      </button>

      <div class="answer" id="answer"></div>

    </div>

    <!-- مباريات اليوم -->
    <div class="box">

      <h2>🏟️ مباريات اليوم</h2>

      <div class="match">
        <span class="day">اليوم</span>
        <br>
        سيتم إضافة المباريات الحقيقية هنا.
      </div>

    </div>

    <!-- مباريات الأمس -->
    <div class="box">

      <h2>📅 مباريات الأمس</h2>

      <div class="match">
        سيتم إضافة نتائج المباريات الحقيقية هنا.
      </div>

    </div>

    <!-- مباريات الغد -->
    <div class="box">

      <h2>🔜 مباريات الغد</h2>

      <div class="match">
        سيتم إضافة مباريات الغد الحقيقية هنا.
      </div>

    </div>

  </div>

  <footer>
    ⚽ Football AI
    <br>
    مشروع معلومات كرة القدم
  </footer>


  <script>

    function askAI() {

      const question =
        document.getElementById("question").value.trim();

      const answer =
        document.getElementById("answer");

      if (!question) {

        answer.style.display = "block";

        answer.innerHTML =
          "⚠️ اكتب سؤالاً عن كرة القدم أولاً.";

        return;
      }

      answer.style.display = "block";

      answer.innerHTML =
        "⏳ جاري تجهيز الإجابة...";

      setTimeout(function() {

        answer.innerHTML =
          "🤖 <b>Football AI</b><br><br>" +
          "استلمت سؤالك:<br><br>" +
          "<b>" +
          escapeHTML(question) +
          "</b><br><br>" +
          "✅ الواجهة تعمل بنجاح!<br><br>" +
          "🚀 سيتم في الخطوة القادمة ربط التطبيق بذكاء اصطناعي حقيقي.";

      }, 700);
    }


    function escapeHTML(text) {

      const div =
        document.createElement("div");

      div.textContent = text;

      return div.innerHTML;
    }

  </script>

</body>
</html>