nba-model/index.html at main · JiaGengChang/nba-model · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>NBA Game Predictor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="style.css" rel="stylesheet" />
  <!-- PapaParse CDN -->
  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
</head>
<body>
  <header class="app-header">
    <h1>NBA Game Predictor</h1>
    <div class="sub">Lineup-driven outcomes with team stat nudges</div>
  </header>

    <!-- Games top bar -->
    <section class="card">
      <h2>Today’s games</h2>
      <div class="games-top">
        <div class="games-left">
          <label class="inline">
            Select game
            <select id="game-select"></select>
          </label>
          <div class="game-meta">
            <div><strong>Time:</strong> <span id="meta-time">—</span></div>
            <div><strong>Location:</strong> <span id="meta-location">—</span></div>
            <div><strong>Hotness:</strong> <span id="meta-hotness">—</span></div>
            <div><strong>Rank:</strong> <span id="meta-rank">—</span></div>
          </div>
        </div>
        <div class="games-right">
          <label class="inline">
            Edit spread (home − away)
            <input id="edit-spread" type="number" step="0.5" value="0" />
          </label>
          <label class="inline">
            Edit total
            <input id="edit-total" type="number" step="0.5" value="220" />
          </label>
          <div class="actions">
            <button id="btn-predict">Predict game</button>
            <button id="btn-stat">Stat comparison</button>
            <button id="btn-lineups">Lineups</button>
            <button id="btn-save">Save game to table</button>
          </div>
        </div>
      </div>
    </section>

    <!-- Stat comparison -->
    <section class="card">
      <h2>Stat comparison</h2>
      <div id="stat-comp" class="table-wrap">
        <!-- Filled by JS -->
      </div>
    </section>

    <!-- Lineups -->
    <section class="card">
      <h2>Lineups</h2>
      <div class="lineups-grid">
        <div class="lineup-card">
          <div class="lineup-head">
            <h3>Away lineup — <span id="away-team">—</span></h3>
            <label class="inline">
              Away back-to-back
              <input type="checkbox" id="away-b2b" />
            </label>
          </div>
          <div class="lineup-fields" id="away-fields">
            <!-- Player inputs injected here -->
          </div>
          <div class="lineup-footer">
            <div><strong>Lineup PER:</strong> <span id="away-lineup-per">0.00</span></div>
            <div class="actions">
              <button id="away-save">Save</button>
              <button id="away-reset">Reset</button>
            </div>
          </div>
        </div>
        <div class="lineup-card">
          <div class="lineup-head">
            <h3>Home lineup — <span id="home-team">—</span></h3>
            <label class="inline">
              Home back-to-back
              <input type="checkbox" id="home-b2b" />
            </label>
          </div>
          <div class="lineup-fields" id="home-fields">
            <!-- Player inputs injected here -->
          </div>
          <div class="lineup-footer">
            <div><strong>Lineup PER:</strong> <span id="home-lineup-per">0.00</span></div>
            <div class="actions">
              <button id="home-save">Save</button>
              <button id="home-reset">Reset</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Prediction output -->
    <section class="card">
      <h2>Model output</h2>
      <div class="pred-grid">
        <div class="pred-box">
          <div class="pred-label">Moneyline edge</div>
          <div class="pred-value" id="ml-edge">—</div>
        </div>
        <div class="pred-box">
          <div class="pred-label">ATS edge</div>
          <div class="pred-value" id="ats-edge">—</div>
        </div>
        <div class="pred-box">
          <div class="pred-label">Total edge</div>
          <div class="pred-value" id="total-edge">—</div>
        </div>
        <div class="pred-box">
          <div class="pred-label">Confidence</div>
          <div class="pred-value" id="confidence">—</div>
        </div>
      </div>
    </section>

    <!-- Saved games -->
    <section class="card">
      <h2>Saved games</h2>
      <div class="table-wrap">
        <table class="table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Matchup</th>
              <th>Model Away</th>
              <th>Model Home</th>
              <th>Model Total</th>
            </tr>
          </thead>
          <tbody id="saved-table"></tbody>
        </table>
      </div>
    </section>
  </main>

  <footer class="app-footer">
    <div>nba-model.vercel.app — vanilla HTML/CSS/JS</div>
  </footer>

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