<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Result Status — PENACH International Schools</title>

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">

  <!-- Font Awesome for icon -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />

  <style>
    :root{
      --bg:#0f1724;
      --card:#ffffff;
      --accent:#6d28d9;
      --accent-2:#7c3aed;
      --muted:#6b7280;
      --success:#10b981;
      --danger:#ef4444;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:
        radial-gradient(1200px 600px at -10% -10%, rgba(124,58,237,0.08), transparent 12%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
      color:#0b1220;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:32px;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .card {
      width:100%;
      max-width:920px;
      background:var(--card);
      border-radius:14px;
      box-shadow: 0 10px 35px rgba(2,6,23,0.08);
      padding:28px;
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:20px;
      align-items:start;
    }

    .left {
      padding-right:8px;
    }

    .kicker {
      display:inline-flex;
      gap:8px;
      align-items:center;
      background: linear-gradient(90deg,var(--accent),var(--accent-2));
      color:white;
      padding:8px 12px;
      border-radius:999px;
      font-weight:600;
      font-size:13px;
      box-shadow: 0 6px 20px rgba(99,102,241,0.12);
    }

    h1{
      margin:14px 0 6px 0;
      font-size:22px;
      color:#081126;
    }

    p.lead{
      margin:0 0 16px 0;
      color:var(--muted);
      line-height:1.5;
    }

    .notice {
      display:flex;
      gap:12px;
      align-items:flex-start;
      background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(124,58,237,0.03));
      border:1px solid rgba(124,58,237,0.08);
      padding:12px 14px;
      border-radius:10px;
      margin-bottom:16px;
    }

    .notice .icon {
      min-width:44px;
      height:44px;
      border-radius:10px;
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
      color:white;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      box-shadow: 0 6px 20px rgba(124,58,237,0.12);
    }
    .notice .content {flex:1}
    .notice .content b{display:block; margin-bottom:4px}

    .countdown {
      display:flex;
      gap:12px;
      margin:10px 0 22px 0;
      flex-wrap:wrap;
    }

    .countdown .item {
      min-width:96px;
      background:#0b1220;
      color:white;
      padding:12px;
      border-radius:8px;
      text-align:center;
      box-shadow: 0 8px 24px rgba(2,6,23,0.08);
    }
    .countdown .num { font-size:20px; font-weight:700; display:block;}
    .countdown .label { font-size:12px; color:rgba(255,255,255,0.85); margin-top:6px;}

    .explain { color:var(--muted); font-size:14px; margin-bottom:18px; }

    .actions {
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }

    .btn {
      display:inline-flex;
      align-items:center;
      gap:10px;
      border:0;
      cursor:pointer;
      padding:12px 16px;
      border-radius:10px;
      font-weight:600;
      font-size:15px;
    }

    .btn.primary {
      background: linear-gradient(90deg,var(--accent),var(--accent-2));
      color:white;
      box-shadow: 0 10px 30px rgba(99,102,241,0.12);
    }

    .btn.ghost {
      background:transparent;
      color:var(--muted);
      border:1px solid #e6eefc;
    }

    .btn[disabled] { opacity:0.6; cursor:not-allowed; filter:grayscale(.02); }

    /* right panel */
    .right {
      background: linear-gradient(180deg,#fafaff,#ffffff);
      border-radius:10px;
      padding:16px;
      box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
      border:1px solid #f1f5f9;
    }
    .right h3 { margin:0 0 8px 0; font-size:16px; color:#081126 }
    .right p { margin:0 0 12px 0; color:var(--muted) }

    .meta { display:flex; gap:8px; flex-wrap:wrap; }
    .meta .badge {
      background:#f1f5f9;
      border-radius:8px;
      padding:8px 10px;
      font-weight:600;
      color:#0f1724;
      font-size:13px;
    }

    footer.small { margin-top:18px; color:var(--muted); font-size:13px; }

    @media (max-width:880px){
      .card { grid-template-columns: 1fr; padding:18px }
      .right { order: -1; margin-bottom:10px }
      .countdown .item { min-width:72px; font-size:13px }
    }
  </style>
</head>
<body>

  <main class="card" role="main" aria-labelledby="pageTitle">
    <section class="left">
      <span class="kicker"><i class="fa fa-info-circle"></i> Result Update</span>
      <h1 id="pageTitle">First Term — 2025/2026 Results</h1>
      <p class="lead">Thank you for checking PENACH International Schools online result portal. We are still processing the First Term results for the 2025/2026 academic session.</p>

      <div class="notice" role="status" aria-live="polite">
        <div class="icon"><i class="fa fa-hourglass-half"></i></div>
        <div class="content">
          <b>Results are still under processing</b>
          <div class="explain">Our team is finalizing grading and quality checks. Parents can start checking the result from <strong>Tuesday, 9th December 2025</strong>.</div>

          <div class="countdown" id="countdown">
            <div class="item">
              <span class="num" id="cd-days">--</span>
              <span class="label">Days</span>
            </div>
            <div class="item">
              <span class="num" id="cd-hours">--</span>
              <span class="label">Hours</span>
            </div>
            <div class="item">
              <span class="num" id="cd-mins">--</span>
              <span class="label">Minutes</span>
            </div>
            <div class="item">
              <span class="num" id="cd-secs">--</span>
              <span class="label">Seconds</span>
            </div>
          </div>

          <div class="actions">
            <!-- Disabled initially; will enable when date reached -->
            <button id="checkBtn" class="btn primary" disabled aria-disabled="true">
              <i class="fa fa-search"></i> Check Result
            </button>

            <button id="notifyBtn" class="btn ghost" type="button" title="Reload">
              <i class="fa fa-sync"></i> Refresh Status
            </button>
          </div>
        </div>
      </div>

     
      <footer class="small">Note: Date & time are based on <strong>Africa/Lagos (UTC+1)</strong>.</footer>
    </section>

    <aside class="right" aria-label="Details">
      <h3>Release details</h3>
      <p><strong>Term:</strong> First Term</p>
      <p><strong>Session:</strong> 2025/2026</p>
      <p><strong>Available from:</strong> <span style="font-weight:700">Tuesday, 9th December 2025</span></p>

      <div style="height:12px"></div>
      <div class="meta">
        <div class="badge"><i class="fa fa-clock"></i> Scheduled</div>
        <div class="badge"><i class="fa fa-user-shield"></i> Quality checked</div>
      </div>

      <footer style="margin-top:14px;color:var(--muted);font-size:13px;">
        Thank you for your patience.<br>
        PENACH International Schools — Administration
      </footer>
    </aside>
  </main>

<script>
(function(){
  // Target date: Tuesday, 9 Dec 2025, 00:00 in Africa/Lagos (UTC+1)
  // We express with offset +01:00 so JS correctly parses it relative to timezone.
  const targetIso = '2025-12-09T00:00:00+01:00';
  const target = new Date(targetIso).getTime();

  const daysEl = document.getElementById('cd-days');
  const hoursEl = document.getElementById('cd-hours');
  const minsEl = document.getElementById('cd-mins');
  const secsEl = document.getElementById('cd-secs');
  const checkBtn = document.getElementById('checkBtn');
  const notifyBtn = document.getElementById('notifyBtn');

  function updateCountdown(){
    const now = new Date().getTime();
    const diff = target - now;

    if (diff <= 0) {
      // target reached — enable check button and stop countdown
      daysEl.textContent = '0';
      hoursEl.textContent = '0';
      minsEl.textContent = '0';
      secsEl.textContent = '0';
      checkBtn.removeAttribute('disabled');
      checkBtn.removeAttribute('aria-disabled');
      checkBtn.innerHTML = '<i class="fa fa-search"></i> Check Result';
      checkBtn.onclick = function(){
        // link to your result page — change if needed
        window.location.href = 'result.php';
      };
      // small visual success
      checkBtn.style.background = 'linear-gradient(90deg,#10b981,#059669)';
      clearInterval(timer);
      return;
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    daysEl.textContent = days;
    hoursEl.textContent = hours;
    minsEl.textContent = minutes;
    secsEl.textContent = seconds;

    // keep button disabled until release
    checkBtn.setAttribute('disabled', 'true');
    checkBtn.setAttribute('aria-disabled', 'true');
    checkBtn.onclick = null;
  }

  // initial update
  updateCountdown();
  // update every second
  const timer = setInterval(updateCountdown, 1000);

  // manual refresh button
  notifyBtn.addEventListener('click', function(){
    updateCountdown();
    // quick pulse animation
    notifyBtn.style.transform = 'scale(0.98)';
    setTimeout(()=> notifyBtn.style.transform = '', 150);
  });
})();
</script>
</body>
</html>
