<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cricket Head to Head Stats – Team vs Team Comparison | UsedToTools</title>
<meta name="description" content="Compare cricket head to head stats between two teams across Tests, ODIs, T20s and World Cups. Check matches played, wins, draws and performance instantly.">
<link rel="canonical" href="https://usedtotools.com/cricket/head-to-head.html">

<style>
body {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  margin: 0;
  padding: 20px;
  text-align: center;
}
/* HEADER & LOGO */
.site-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #f0f4f8; /* or your preferred header color */
}

.site-header .logo img {
  height: 50px; /* adjust size */
  margin-right: 15px;
}

.site-header .site-title {
  font-size: 1.5rem;
  color: #0bb884; /* match your branding */
  margin: 0;
}
.container {
  max-width: 500px;
  margin: auto;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

h1 { color: #2c3e50; }

select, button {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

button {
  background: #1e88e5;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  transition: background 0.3s;
}

button:hover { background: #1565c0; }

.result {
  margin-top: 20px;
  background: #f9fafb;
  padding: 18px;
  border-radius: 8px;
  font-weight: bold;
}

.home-btn {
  display: inline-block;
  margin: 20px 0;
  padding: 10px 18px;
  background: #1e88e5;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
}

.home-btn:hover { background: #1565c0; }

nav {
  text-align: center;
  margin-top: 10px;
}

nav a {
  text-decoration: none;
  color: #1e88e5;
  font-weight: bold;
  margin: 0 5px;
}

nav a:hover { text-decoration: underline; }

@media (max-width: 500px) {
  select, button { font-size: 14px; padding: 10px; }
}
</style>
</head>
<body>
<header class="site-header">
  <a href="../index.html" class="logo">
    <img src="../images/logo.png" alt="UsedToTools Logo">
  </a>
  <h1 class="site-title">UsedToTools</h1>
</header>
<div class="container">
	<h1>Cricket Head to Head Stats Comparison</h1>

  <select id="teamA">
    <option value="">Select Team A</option>
    <option value="IND">India</option>
    <option value="AUS">Australia</option>
    <option value="ENG">England</option>
    <option value="PAK">Pakistan</option>
    <option value="SA">South Africa</option>
  </select>

  <select id="teamB">
    <option value="">Select Team B</option>
    <option value="IND">India</option>
    <option value="AUS">Australia</option>
    <option value="ENG">England</option>
    <option value="PAK">Pakistan</option>
    <option value="SA">South Africa</option>
  </select>

  <select id="format">
    <option value="tests">Tests</option>
    <option value="odis">ODIs</option>
    <option value="t20s">T20s</option>
    <option value="worldcup">World Cup</option>
  </select>

  <button onclick="compareTeams()">Compare Teams</button>

  <div class="result" id="output">Loading head-to-head data...</div>

  <!-- Centered Home button -->
  <a href="../index.html" class="home-btn">← Back to Home</a>

  <nav>
	<a href="player-stats.html">Cricket Player Stats</a> |
	<a href="match-prediction.html">Cricket Match Prediction</a>

  </nav>
</div>
<h2>Team vs Team Cricket Head to Head Records</h2>

<h2>Disclaimer</h2>
<p>
These figures are derived from historical cricket data and do not guarantee future outcomes.
This tool is intended for statistical and informational purposes only and should not be considered
as a definitive prediction or recommendation. No claims will be entertained for any losses incurred.
</p>

<script>
let h2hData = null;

fetch("https://raw.githubusercontent.com/vassanswers420-wq/Used2tools-Web-data/main/data/headtohead.json")
  .then(res => {
    if (!res.ok) throw new Error("HTTP error " + res.status);
    return res.json();
  })
  .then(data => {
    h2hData = data;
    document.getElementById("output").innerHTML = "Select two teams and format above to compare.";
  })
  .catch(err => {
    console.error(err);
    document.getElementById("output").innerHTML = "Failed to load head-to-head data. Check console.";
  });

function compareTeams() {
  const teamA = document.getElementById("teamA").value;
  const teamB = document.getElementById("teamB").value;
  const format = document.getElementById("format").value;
  const output = document.getElementById("output");

  if (!h2hData) {
    output.innerHTML = "Data is still loading. Please try again.";
    return;
  }
  if (!teamA || !teamB || teamA === teamB) {
    output.innerHTML = "Please select two different teams.";
    return;
  }

  const key1 = `${teamA}-${teamB}`;
  const key2 = `${teamB}-${teamA}`;
  const record = h2hData[key1] || h2hData[key2];

  if (!record || !record[format]) {
    output.innerHTML = `No data available for ${format.toUpperCase()} format between ${teamA} and ${teamB}.`;
    return;
  }

  const formatData = record[format];
  const winsA = formatData[teamA] || 0;
  const winsB = formatData[teamB] || 0;
  const matches = formatData.matches;
  const draw = formatData.drawOrNR;

  output.innerHTML = `
    <b>${teamA} vs ${teamB} (${format.toUpperCase()})</b><br><br>
    Matches Played: ${matches}<br>
    ${teamA} Wins: ${winsA}<br>
    ${teamB} Wins: ${winsB}<br>
    Draw / No Result: ${draw}<br><br>
    <small>Source: Manual historical international matches</small>
  `;
}
</script>

</body>
</html>