PUBLICTRY

 <div class="cricket-live-gadget">

  <div class="header">

    <h3>🟢 LIVE CRICKET SCORES</h3>

    <div class="refresh">⟳ Auto Refresh</div>

  </div>

  

  <div id="live-matches">

    <!-- Scores will load here -->

    <div class="loading">Fetching live matches from Cricbuzz...</div>

  </div>

  

  <div class="footer">

    <a href="https://www.cricbuzz.com/" target="_blank">View Full Scores on Cricbuzz →</a>

  </div>

</div>

<style>

.cricket-live-gadget {

  font-family: 'Segoe UI', Arial, sans-serif;

  max-width: 100%;

  background: #0f172a;

  color: #e2e8f0;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 4px 15px rgba(0,0,0,0.3);

  margin: 10px 0;

}

.header {

  background: linear-gradient(135deg, #1e40af, #3b82f6);

  padding: 12px 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-weight: bold;

}

.header h3 {

  margin: 0;

  font-size: 16px;

}

.refresh {

  font-size: 13px;

  opacity: 0.9;

}

.match-card {

  background: #1e2937;

  margin: 8px;

  padding: 12px;

  border-radius: 8px;

  border-left: 4px solid #3b82f6;

}

.match-title {

  font-size: 13px;

  color: #94a3b8;

  margin-bottom: 8px;

}

.teams {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 8px 0;

}

.team {

  display: flex;

  align-items: center;

  gap: 8px;

}

.team-name {

  font-weight: 600;

}

.score {

  font-size: 18px;

  font-weight: bold;

  color: #60a5fa;

}

.status {

  font-size: 12px;

  padding: 4px 10px;

  border-radius: 20px;

  text-align: center;

  margin-top: 8px;

}

.live { background: #ef4444; color: white; }

.result { background: #22c55e; color: white; }

.loading, .no-matches {

  padding: 20px;

  text-align: center;

  color: #94a3b8;

}

.footer {

  text-align: center;

  padding: 10px;

  background: #1e2937;

  font-size: 13px;

}

.footer a {

  color: #60a5fa;

  text-decoration: none;

}

</style>

<script>

// Simple proxy-free approach using a public cricket API (updates frequently)

async function fetchLiveScores() {

  const container = document.getElementById('live-matches');

  container.innerHTML = '<div class="loading">Loading live matches...</div>';

  try {

    // Using a free public endpoint (you can replace with others)

    const res = await fetch('https://api.cricapi.com/v1/currentMatches?apikey=free_api_key_here');

    // Note: For real use, get a free key from cricapi.com or use other services

    const data = await res.json();

    if (!data || !data.data || data.data.length === 0) {

      container.innerHTML = '<div class="no-matches">No live matches at the moment</div>';

      return;

    }

    let html = '';

    data.data.forEach(match => {

      if (match.status.toLowerCase().includes('live') || match.status.toLowerCase().includes('in play')) {

        html += `

          <div class="match-card">

            <div class="match-title">${match.series} - ${match.matchType.toUpperCase()}</div>

            <div class="teams">

              <div class="team">

                <span class="team-name">${match.team1}</span>

              </div>

              <div class="score">${match.score ? match.score[0]?.r || '' : ''}</div>

            </div>

            <div class="teams">

              <div class="team">

                <span class="team-name">${match.team2}</span>

              </div>

              <div class="score">${match.score ? match.score[1]?.r || '' : ''}</div>

            </div>

            <div class="status live">${match.status}</div>

          </div>`;

      }

    });

    container.innerHTML = html || '<div class="no-matches">No live matches right now</div>';

  } catch (e) {

    container.innerHTML = `

      <div class="no-matches">

        Live scores will appear here<br>

        <small>Click the link below to visit Cricbuzz</small>

      </div>`;

  }

}

// Load scores immediately and refresh every 30 seconds

fetchLiveScores();

setInterval(fetchLiveScores, 30000);

</script>