pdga-rating/views/pages/index.ejs

<% var body = `
        <!-- Add Player Card -->
        <form class="add-bar" onsubmit="searchAndAddPlayer(event)">
            <div class="add-bar-label">
                <span class="add-bar-kicker">Track a player</span>
                <span class="add-bar-hint">Add a PDGA number to start following their rating.</span>
            </div>
            <div class="add-bar-controls">
                <div class="input-wrap">
                    <span class="input-prefix">#</span>
                    <input
                        type="text"
                        id="pdga-number-input"
                        inputmode="numeric"
                        placeholder="277890"
                        aria-label="PDGA number"
                        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                    />
                </div>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-user-plus"></i> Add player
                </button>
            </div>
        </form>

        <!-- KPI Summary Tiles -->
        <section class="kpi-strip" aria-label="Tracker overview">
          <article class="kpi-tile">
            <span class="kpi-rail"></span>
            <div class="kpi-body">
              <div class="kpi-value">${kpis.tracked}</div>
              <div class="kpi-label">Tracked</div>
              <div class="kpi-sub">${kpis.active} active</div>
            </div>
          </article>
          <article class="kpi-tile">
            <span class="kpi-rail"></span>
            <div class="kpi-body">
              <div class="kpi-value">${kpis.avg ?? '—'}</div>
              <div class="kpi-label">Avg rating</div>
              <div class="kpi-sub">across active players</div>
            </div>
          </article>
          <article class="kpi-tile">
            <span class="kpi-rail up"></span>
            <div class="kpi-body">
              <div class="kpi-value">${kpis.climbing}</div>
              <div class="kpi-label">Climbing</div>
              <div class="kpi-sub">this month</div>
            </div>
          </article>
          <article class="kpi-tile">
            <span class="kpi-rail down"></span>
            <div class="kpi-body">
              <div class="kpi-value">${kpis.slipping}</div>
              <div class="kpi-label">Slipping</div>
              <div class="kpi-sub">this month</div>
            </div>
          </article>
        </section>

        <!-- Players Table Card -->
        <div class="table-card">
            <div class="table-toolbar">
                <span class="kicker">TRACKED PLAYERS</span>
                <div class="toolbar-actions">
                    <button id="trendchart-toggle" class="pill-toggle" type="button" aria-pressed="false">
                        <svg class="pill-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M3 17l5-6 4 4 4-7 5 6" />
                        </svg>
                        <span class="pill-label">Trend chart</span>
                        <span class="pill-dot"></span>
                    </button>
                </div>
            </div>
            <div id="ratings-table" hx-get="/partials/ratings-table" hx-trigger="load"></div>
        </div>

        <!-- Footnote -->
        <p class="footnote">Unofficial PDGA rating tracker. Ratings scraped from pdga.com on each refresh.</p>

        <!-- Mobile sticky add-bar (visible only on mobile via CSS) -->
        <form class="mobile-add-bar" onsubmit="searchAndAddPlayerMobile(event)">
            <input
                id="pdga-number-input-mobile"
                name="pdga"
                type="text"
                inputmode="numeric"
                placeholder="PDGA #"
                oninput="this.value = this.value.replace(/\\D/g,'')"
                aria-label="PDGA number"
            />
            <button type="submit" class="btn-primary">Add</button>
        </form>
`; %>

<% var modals = `
    <!-- Debug Modal -->
    <div id="debug-modal" class="debug-modal" onclick="closeDebugModal(event)">
        <div class="debug-content" onclick="event.stopPropagation()">
            <button class="debug-close" onclick="closeDebugModal()">&times;</button>
            <div class="debug-header" id="debug-header">Prediction Calculation Details</div>
            <div class="debug-log" id="debug-log">Loading...</div>
        </div>
    </div>

    <!-- Add Player Confirmation Modal -->
    <div id="add-player-modal" class="modal" onclick="closeAddPlayerModal(event)">
        <div class="modal-content" onclick="event.stopPropagation()">
            <button class="modal-close" onclick="closeAddPlayerModal()">&times;</button>
            <div class="modal-header" id="add-player-modal-header">Confirm Player</div>
            <div class="modal-body" id="add-player-modal-body">Loading...</div>
            <div class="modal-footer" id="add-player-modal-footer">
                <button class="btn btn-cancel" onclick="closeAddPlayerModal()">Cancel</button>
                <button class="btn btn-confirm" id="confirm-add-btn" onclick="confirmAddPlayer()">Add Player</button>
            </div>
        </div>
    </div>

    <!-- Target Rating Modal -->
    <div id="target-rating-modal" class="modal" onclick="closeTargetRatingModal(event)">
        <div class="modal-content" onclick="event.stopPropagation()">
            <button class="modal-close" onclick="closeTargetRatingModal()">&times;</button>
            <div class="modal-header" id="target-rating-modal-header">Calculate Target Rating</div>
            <div class="modal-body" id="target-rating-modal-body">
                <form id="target-rating-form" onsubmit="calculateTargetRating(event)">
                    <input type="hidden" id="target-rating-pdga" value="">
                    <div class="form-row">
                        <label for="target-rating-input">Target predicted rating</label>
                        <input type="number" id="target-rating-input" min="400" max="1200" step="1" required>
                    </div>
                    <div class="form-row">
                        <label for="target-rounds-input">Number of rounds</label>
                        <input type="number" id="target-rounds-input" min="1" max="20" step="1" value="4" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-confirm" id="target-rating-submit">Calculate</button>
                    </div>
                </form>
                <div id="target-rating-result" class="target-rating-result" style="display:none;"></div>
            </div>
        </div>
    </div>
`; %>

<%- include('../partials/layout', {
    title: 'PDGA Ratings',
    activePage: 'players',
    cssFiles: ['players.css'],
    jsFiles: ['tooltips.js', 'chart.js', 'players.js'],
    initScript: 'setupAfterTableSwap();',
    body: body,
    modals: modals
}) %>