<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
  <meta name="theme-color" content="#ff6b00">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="manifest" href="/manifest.json">
  <link rel="apple-touch-icon" href="/images/icon-192.png">
  <title>FootballLive — Live Scores & Streams</title>
  <meta name="description" content="Watch live football matches online. Today's fixtures, live scores, streams for Premier League, La Liga, UCL, Botola Pro & more.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <!-- Content Locker (Adblumedia) – لا تغير -->
  <script type="text/javascript">
    var zoJrz_xRX_kHJpnc = {"it":4598190,"key":"8c2d5"};
  </script>
  <script src="https://d1qt1z4ccvak33.cloudfront.net/6159c86.js"></script>
</head>
<body>
<div id="pull-to-refresh">⬇️ Pull to refresh</div>

<header id="site-header">
  <div class="header-inner">
    <a class="site-logo" href="/">
      <div class="logo-icon"><i class="fa-solid fa-futbol"></i></div>
      <span class="logo-text">Football<span class="logo-accent">Live</span></span>
    </a>
    <nav class="site-nav" id="main-nav">
      <a class="active" href="/"><i class="fa-solid fa-house"></i> Home</a>
      <a href="#" data-filter="live"><i class="fa-solid fa-circle" style="color:var(--live-red);font-size:8px;"></i> Live</a>
      <a href="#" data-filter="all"><i class="fa-solid fa-trophy"></i> Leagues</a>
      <a href="#" data-filter="done"><i class="fa-solid fa-flag-checkered"></i> Results</a>
      <a href="#"><i class="fa-solid fa-newspaper"></i> News</a>
    </nav>
    <div class="header-search"><i class="fa-solid fa-magnifying-glass"></i><input id="search-desktop" placeholder="Search team..." type="text"></div>
    <button class="hamburger" id="hamburger-btn"><i class="fa-solid fa-bars"></i></button>
  </div>
</header>

<div class="mobile-search-bar">
  <div class="mobile-search-inner"><i class="fa-solid fa-magnifying-glass"></i><input id="search-mobile" placeholder="Search team or match..." type="text"><button class="clear-search" id="clear-mobile">✕</button></div>
</div>

<div class="live-ticker">
  <div class="ticker-label"><i class="fa-solid fa-circle" style="font-size:6px;"></i> LIVE</div>
  <div class="ticker-track"><div class="ticker-content" id="ticker-content">Loading scores...</div></div>
</div>

<div class="site-wrapper">
  <div class="page-content">
    <div class="content-grid">
      <main>
        <div id="homepage-matches-section">
          <div id="toast-container"></div>
          <div class="trending-section" id="trending-section" style="display:none;">
            <div class="trending-header"><i class="fa-solid fa-fire"></i> Trending Now</div>
            <div class="trending-strip" id="trending-strip"></div>
          </div>
          <div class="section-header">
            <h1 class="section-title"><span class="title-bar"></span>Today&#39;s Matches</h1>
            <div class="section-badge"><span class="dot"></span> LIVE UPDATING</div>
          </div>
          <div class="search-banner" id="search-banner"><span>Results for: <strong id="search-query-text"></strong></span><button onclick="clearSearch()">✕</button></div>
          <div id="personalization-bar-container"></div>
          <div class="league-tabs" id="league-tabs">
            <div class="league-tab active" data-league="all"><i class="fa-solid fa-globe"></i> All</div>
            <div class="league-tab" data-league="140"><img src="https://media.api-sports.io/football/leagues/140.png" onerror="this.style.display='none'"> La Liga</div>
            <div class="league-tab" data-league="39"><img src="https://media.api-sports.io/football/leagues/39.png"> Premier League</div>
            <div class="league-tab" data-league="2"><img src="https://media.api-sports.io/football/leagues/2.png"> UCL</div>
            <div class="league-tab" data-league="78"><img src="https://media.api-sports.io/football/leagues/78.png"> Bundesliga</div>
            <div class="league-tab" data-league="135"><img src="https://media.api-sports.io/football/leagues/135.png"> Serie A</div>
            <div class="league-tab" data-league="61"><img src="https://media.api-sports.io/football/leagues/61.png"> Ligue 1</div>
            <div class="league-tab" data-league="200"><img src="https://media.api-sports.io/football/leagues/200.png"> Botola Pro</div>
            <div class="league-tab" data-league="197"><img src="https://media.api-sports.io/football/leagues/197.png"> CAF CL</div>
          </div>
          <div class="matches-grid" id="matches-grid">
            <div class="loading-container" id="loading-skeleton">
              <div class="skeleton-card"><div class="skeleton-league skeleton-animate"></div><div class="skeleton-teams"><div class="skeleton-team"><div class="skeleton-crest skeleton-animate"></div><div class="skeleton-name skeleton-animate"></div></div><div class="skeleton-team"><div class="skeleton-score skeleton-animate"></div></div><div class="skeleton-team"><div class="skeleton-crest skeleton-animate"></div><div class="skeleton-name skeleton-animate"></div></div></div></div>
            </div>
          </div>
          <div style="text-align:right;margin-top:12px;font-size:12px;color:var(--text-muted);">Last updated: <span id="last-updated">—</span> &nbsp; <span style="color:var(--accent);cursor:pointer;" id="refresh-btn"><i class="fa-solid fa-rotate"></i> Refresh</span></div>
        </div>
      </main>
      <aside id="sidebar">
        <div class="ad-zone ad-zone-sidebar">Advertisement 300×250</div>
        <div class="sidebar-widget"><div class="widget-header"><i class="fa-solid fa-trophy"></i> Top Leagues</div><div class="widget-body" id="sidebar-leagues">Loading...</div></div>
        <div class="sidebar-widget"><div class="widget-header"><i class="fa-solid fa-star"></i> My Favorites</div><div class="widget-body" id="sidebar-favorites">No favorites yet. Click ⭐ on a team.</div></div>
        <div class="sidebar-widget" style="background:linear-gradient(135deg,rgba(0,136,204,0.1),rgba(0,136,204,0.03));text-align:center;padding:20px;"><i class="fab fa-telegram" style="font-size:38px;color:#29b6f6;"></i><h3>Join Our Channel</h3><p>Free stream links. Never miss a match!</p><a class="btn btn-telegram" href="https://t.me/live_football101" target="_blank" style="width:100%;"><i class="fab fa-telegram"></i> Join Free</a></div>
        <div class="ad-zone ad-zone-sidebar">Advertisement 300×250</div>
      </aside>
    </div>
  </div>
</div>

<footer id="site-footer">
  <div class="footer-inner">
    <div class="footer-grid">
      <div class="footer-brand"><a class="site-logo" href="/"><div class="logo-icon"><i class="fa-solid fa-futbol"></i></div><span>Football<span class="logo-accent">Live</span></span></a><p>Your #1 destination for live football.</p></div>
      <div class="footer-col"><h4>Leagues</h4><ul><li><a href="#" data-league="39">Premier League</a></li><li><a href="#" data-league="2">Champions League</a></li><li><a href="#" data-league="200">Botola Pro</a></li></ul></div>
      <div class="footer-col"><h4>Watch</h4><ul><li><a href="#" data-filter="live">Live Matches</a></li><li><a href="#" data-filter="all">Today Fixtures</a></li></ul></div>
      <div class="footer-col"><h4>Info</h4><ul><li><a href="/p/about.html">About</a></li><li><a href="/p/dmca.html">DMCA</a></li></ul></div>
    </div>
    <div class="footer-bottom"><div><p>⚠️ We link to external legal sources only. We do not host any video content.</p><p>© 2025 FootballLive. All rights reserved.</p></div><div class="footer-social"><a href="#"><i class="fab fa-telegram"></i></a><a href="#"><i class="fab fa-facebook-f"></i></a></div></div>
  </div>
</footer>

<nav id="mob-tabs">
  <button class="mob-tab active" id="mtab-home" data-tab="home"><i class="fa-solid fa-house"></i><span>Home</span></button>
  <button class="mob-tab" id="mtab-live" data-tab="live"><i class="fa-solid fa-circle-dot"></i><span class="live-badge" id="live-badge"></span><span>Live</span></button>
  <button class="mob-tab" id="mtab-results" data-tab="results"><i class="fa-solid fa-flag-checkered"></i><span>Results</span></button>
  <button class="mob-tab" id="mtab-news" data-tab="news"><i class="fa-solid fa-newspaper"></i><span>News</span></button>
</nav>

<script src="/js/app.js"></script>
<script>
  // تسجيل Service Worker
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').catch(e=>console.log('SW error',e));
  }
</script>
</body>
</html>