<!DOCTYPE html>
<html>
<head>
    <title>MMR Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="/static/css/overlay.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght=500;600;700&family=Roboto+Mono:wght=500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="overlay-container">
        <div class="header-bar">
            <div class="title">MMR PROGRESSION</div>
            <div class="stats-container">
                <div class="stat-item current-mmr">
                    <span class="stat-label">MMR</span>
                    <span class="stat-value" id="currentMMR">----</span>
                </div>
                <div class="stat-item mmr-delta">
                    <span class="stat-label" id="deltaLabel">LAST 100</span>
                    <span class="stat-value" id="mmrDelta">--</span>
                </div>
                <div class="stat-item win-rate">
                    <span class="stat-label">WINS</span>
                    <span class="stat-value" id="winRate">--%</span>
                </div>
            </div>
        </div>
        <div class="tag-legend" id="tagLegend"></div>
        <div class="chart-container">
            <canvas id="mmrChart"></canvas>
        </div>
    </div>
    <script src="/static/js/mmr_graph.js"></script>
</body>
</html>
