From c326d0b45692710b58e3336e9134acbfb6be47a5 Mon Sep 17 00:00:00 2001
From: samehmade113-stack <samehmade113@gmail.com>
Date: Tue, 2 Dec 2025 00:32:09 +0100
Subject: [PATCH] Update README.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Script V2Pro Plus iA — Page 2</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg:#0b0b10;
      --card:#0f1720;
      --muted:#9aa3b2;
      --accent-1: #5ee7df; /* aqua */
      --accent-2: #7b6bff; /* purple */
      --glass: rgba(255,255,255,0.03);
      --radius:18px;
      --card-radius:22px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background: radial-gradient(ellipse at 20% 10%, rgba(123,107,255,0.06), transparent 8%),
                  linear-gradient(180deg,#06060a 0%, #0b0b10 100%);
      color:#e6eef8;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;align-items:center;justify-content:center;padding:28px;
    }
    .container{width:100%;max-width:520px}

    .topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
    .logo{
      width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
      display:flex;align-items:center;justify-content:center;font-weight:700;color:#071029;box-shadow:0 6px 18px rgba(123,107,255,0.14);
    }
    .title{
      font-size:20px;font-weight:700;color:var(--accent-1);text-shadow:0 6px 18px rgba(0,0,0,0.6)
    }
    .subtitle{color:var(--muted);font-size:13px;margin-top:4px}

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:var(--card-radius);
      padding:22px;box-shadow: 0 8px 24px rgba(2,6,23,0.6);
      border:1px solid rgba(255,255,255,0.03);
    }

    .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}

    label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}
    .input{
      background:var(--glass);border-radius:12px;padding:12px 14px;border:1px solid rgba(255,255,255,0.03);
      color:#e6eef8;font-size:14px;outline:none;width:100%;
    }
    .hint{font-size:13px;color:var(--muted);margin-top:10px}

    .start-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:12px}
    .start-btn{
      background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
      padding:12px 22px;border-radius:14px;color:#071029;font-weight:700;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(123,107,255,0.18);
      display:flex;align-items:center;gap:10px;font-size:15px
    }
    .small-link{color:var(--muted);font-size:13px}

    .footer{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}

    .timer{
      margin-top:18px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
      padding:18px;border-radius:14px;text-align:center;border:1px solid rgba(255,255,255,0.02)
    }
    .timer .label{color:var(--muted);font-size:13px}
    .time-display{font-size:44px;font-weight:800;color:var(--accent-1);margin-top:6px}

    /* responsive */
    @media (max-width:520px){.grid{grid-template-columns:1fr}}

  </style>
</head>
<body>
  <div class="container">
    <div class="topbar">
      <div class="logo">V2+</div>
      <div>
        <div class="title">Script V2Pro Plus iA — <span style="color:#7bd0ff">Page 2</span></div>
        <div class="subtitle">ثم اضغط ID أدخل اسم الفريقين والـ START</div>
      </div>
    </div>

    <div class="card" role="region" aria-label="script-card">
      <div style="display:flex;gap:14px;align-items:center">
        <div style="width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:700;color:#071029">★</div>
        <div>
          <div style="font-weight:700;color:var(--accent-1);">Extracting external match statistics using iA 🤖</div>
          <div style="color:var(--muted);font-size:13px;margin-top:6px">Processing... please wait while the countdown finishes.</div>
        </div>
      </div>

      <div class="timer" id="countdownBox" style="margin-top:16px">
        <div class="label">العد التنازلي</div>
        <div class="time-display" id="timeDisplay">00:43</div>
      </div>

      <form id="matchForm" onsubmit="return false;">
        <div class="grid">
          <div>
            <label>🏠 اسم الفريق المحلي</label>
            <input class="input" id="homeName" placeholder="مثال: Real Madrid" />
          </div>
          <div>
            <label>🚀 اسم الفريق الزائر</label>
            <input class="input" id="awayName" placeholder="مثال: Barcelona" />
          </div>
          <div>
            <label>ID Match sur iA</label>
            <input class="input" id="homeID" placeholder="مثال: HM12345" />
          </div>
          <div>
            <label>ID Match sur iA</label>
            <input class="input" id="awayID" placeholder="مثال: AW98765" />
          </div>
        </div>

        <div class="start-row">
          <button class="start-btn" id="startBtn" type="button">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 3v18l15-9L5 3z" fill="white" opacity="0.95"/>
            </svg>
            START
          </button>
          <div class="small-link">← Edit Predictions</div>
        </div>
      </form>

      <div class="footer">© TOONI KROOS 0690586056</div>
    </div>
  </div>

  <script>
    // Simple countdown logic matching the image feel
    const display = document.getElementById('timeDisplay');
    const countdownBox = document.getElementById('countdownBox');
    let seconds = 43; // starting time similar to screenshot
    let timerInterval = null;

    function formatTime(s){
      const m = Math.floor(s/60).toString().padStart(2,'0');
      const sec = (s%60).toString().padStart(2,'0');
      return `${m}:${sec}`;
    }

    function startCountdown(){
      if(timerInterval) return;
      display.textContent = formatTime(seconds);
      timerInterval = setInterval(()=>{
        seconds -= 1;
        if(seconds < 0){
          clearInterval(timerInterval);timerInterval=null;display.textContent = '00:00';
          // simulate extraction finished
          extractionFinished();
        } else {
          display.textContent = formatTime(seconds);
        }
      },1000);
    }

    function extractionFinished(){
      // subtle glow to indicate done
      countdownBox.style.boxShadow = '0 8px 30px rgba(123,107,255,0.18)';
      countdownBox.style.border = '1px solid rgba(123,107,255,0.12)';
    }

    document.getElementById('startBtn').addEventListener('click', ()=>{
      const homeName = document.getElementById('homeName').value.trim();
      const awayName = document.getElementById('awayName').value.trim();
      const homeID = document.getElementById('homeID').value.trim();
      const awayID = document.getElementById('awayID').value.trim();

      // Basic validation/feedback
      if(!homeName || !awayName || !homeID || !awayID){
        alert('المرجو ملأ جميع الحقول: اسم الفريقين و ID كلاهما');
        return;
      }

      // start countdown and simulate fetching
      seconds = 43; display.textContent = formatTime(seconds);
      startCountdown();

      // Here you would add AJAX / fetch calls to your backend or external service
      // Example placeholder: console.log the data
      console.log({homeName,awayName,homeID,awayID});
    });

    // initialize
    display.textContent = formatTime(seconds);
  </script>
</body>
</html>
