<!DOCTYPE html>
<html>
<head>
    <title>SC2 Stream Widget</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="widget-container" id="widgetContainer">
        <div class="widget-header">
            <div class="widget-title" id="widgetTitle">SC2 STATS</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 win-rate">
                    <span class="stat-label">WINS</span>
                    <span class="stat-value" id="winRate">--%</span>
                </div>
            </div>
        </div>
        <div class="widget-games" id="gamesList"></div>
        <div class="widget-chart" id="chartArea">
            <canvas id="mmrChart"></canvas>
        </div>
    </div>
    <script src="/static/js/stream_widget.js"></script>
</body>
</html>
