soccer-attendance/index.html at master · GilbertQue/soccer-attendance · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Soccer Player Attendance Tracker</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <header>
      <img src="https://signondayfilesprod.blob.core.windows.net/public/providers/coomera-football-club/Coomera%20Football%20Club%20Logo%20Official.png" alt="Coomera Colts Soccer Club Logo" class="club-logo" />
      <h1>Soccer Attendance Tracker</h1>
    </header>

    <section class="form-card">
      <h2>Record Attendance</h2>

      <div class="form-group">
        <label>Players <span class="label-hint">(hold Ctrl / Cmd to select multiple)</span></label>
        <div class="player-check-list" id="playerCheckList"></div>
        <div class="select-all-row">
          <button type="button" id="selectAllBtn" class="btn-link">Select All</button>
          <span class="divider">·</span>
          <button type="button" id="clearSelBtn" class="btn-link">Clear</button>
        </div>
      </div>

      <div class="form-group">
        <label for="dateInput">Date</label>
        <input type="date" id="dateInput" />
      </div>

      <div class="form-group">
        <label for="sessionInput">Session / Event</label>
        <input type="text" id="sessionInput" placeholder="e.g. Practice, Game vs Eagles" />
      </div>

      <div class="button-row">
        <button id="markPresentBtn" class="btn btn-present">✔ Mark Present</button>
        <button id="markAbsentBtn" class="btn btn-absent">✘ Mark Absent</button>
      </div>
    </section>

    <section class="manage-card">
      <h2>Manage Players</h2>
      <div class="inline-group">
        <input type="text" id="newPlayerInput" placeholder="Add new player name" />
        <button id="addPlayerBtn" class="btn btn-add">Add Player</button>
      </div>
      <div id="playerTagList" class="tag-list"></div>
    </section>

    <section class="records-card">
      <div class="records-header">
        <h2>Attendance Records</h2>
        <div class="filter-row">
          <select id="filterPlayer">
            <option value="">All Players</option>
          </select>
          <button id="exportBtn" class="btn btn-export">⬇ Export CSV</button>
          <button id="clearBtn" class="btn btn-clear">🗑 Clear All</button>
        </div>
      </div>
      <div class="table-wrapper">
        <table id="recordsTable">
          <thead>
            <tr>
              <th>Date</th>
              <th>Player</th>
              <th>Session</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody id="recordsBody"></tbody>
        </table>
        <p id="emptyMsg" class="empty-msg">No records yet. Start marking attendance above.</p>
      </div>
    </section>

    <section class="summary-card">
      <h2>Attendance Summary</h2>
      <div id="summaryGrid" class="summary-grid"></div>
    </section>
  </div>

  <!-- Setup / Club Code modal -->
  <div id="setupOverlay" class="setup-overlay hidden">
    <div class="setup-modal">
      <h2>⚽ Welcome to Coomera Colts Attendance</h2>
      <p class="setup-desc">This app stores all data in the cloud so every device stays in sync.</p>

      <div class="setup-section">
        <h3>New setup</h3>
        <p>First time using this app? Click below to create a new shared database and get your Club Code.</p>
        <button id="createBinBtn" class="btn btn-present">Create New Database</button>
      </div>

      <div class="setup-divider">— or —</div>

      <div class="setup-section">
        <h3>Existing setup</h3>
        <p>Already have a Club Code? Enter it to connect to your shared data.</p>
        <div class="inline-group">
          <input type="text" id="binIdInput" placeholder="Paste Club Code here" />
          <button id="connectBinBtn" class="btn btn-add">Connect</button>
        </div>
      </div>

      <div id="setupStatus" class="setup-status"></div>
    </div>
  </div>

  <!-- Club Code display bar -->
  <div id="clubCodeBar" class="club-code-bar hidden">
    Club Code: <strong id="clubCodeDisplay"></strong>
    <button id="copyCodeBtn" class="btn-link" style="margin-left:10px">Copy</button>
    <button id="changeDbBtn" class="btn-link" style="margin-left:12px; color:#f87171">Change Database</button>
  </div>

  <div id="toast" class="toast hidden"></div>

  <script src="app.js"></script>
</body>
</html>