<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <title>Bingo – Player</title>

  <link rel="stylesheet" href="style.css" />

</head>

<body>

  <div class="container">

    <h1>Bingo – Player</h1>

    <p class="intro">

      This bingo card is assigned to you by the caller.<br>

      You must use the special link given to you.

    </p>


    <section class="panel">

      <h2>Your Card</h2>


      <p>

        Card ID:

        <span id="player-card-id" class="badge">—</span>

      </p>


      <div class="card-wrapper">

        <table id="bingo-card" class="bingo-card"></table>

      </div>


      <p id="error-message" class="check-result fail" style="display:none;">

        No Card ID was provided. You must use your special link.

      </p>


      <p class="hint">Click squares to mark them as numbers are called.</p>

    </section>


    <p class="hint" style="margin-top:20px;">

      Admin? Open your private admin link.

    </p>

  </div>


  <script src="bingo-core.js"></script>

  <script src="player.js"></script>

</body>

</html>