TokenWatch/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TokenWatch - API Limit Tracker</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
</head>
<body class="style-standard">
    <div class="container">
        <header>
            <div class="header-content">
                <div class="logo-title-group">
                    <img src="favicon.png" alt="TokenWatch Logo" class="main-logo">
                    <div>
                        <h1>TokenWatch</h1>
                        <p>API Limit & Quota Tracker</p>
                    </div>
                </div>
                <div class="style-selector">
                    <label for="theme-dropdown">Progress Bar Style:</label>
                    <select id="theme-dropdown">
                        <option value="style-standard">1. Standard</option>
                        <option value="style-pacman">2. Pac-Man</option>
                        <option value="style-battery">3. Battery</option>
                        <option value="style-nyancat">4. Nyan Cat</option>
                        <option value="style-matrix">5. Matrix</option>
                        <option value="style-lava">6. Lava</option>
                    </select>
                </div>
            </div>
        </header>

        <section class="dashboard-list">

            <div class="provider-row" id="row-poe">
                <div class="provider-main">
                    <div class="provider-info">
                        <img src="logo-poe.png" alt="POE" class="provider-icon-img">
                        <span class="provider-name">POE</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-poe"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-poe">0%</span>
                        <span class="raw-value" id="status-poe">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-poe"></div>
            </div>

            <div class="provider-row" id="row-ag-gemini-5h">
                <div class="provider-main">
                    <div class="provider-info">
                        <img src="logo-gemini.png" alt="Gemini" class="provider-icon-img">
                        <span class="provider-name">AG Gemini (5h)</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-ag-gemini-5h"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-ag-gemini-5h">0%</span>
                        <span class="raw-value" id="status-ag-gemini-5h">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-ag-gemini-5h"></div>
            </div>

            <div class="provider-row" id="row-ag-gemini-weekly">
                <div class="provider-main">
                    <div class="provider-info">
                        <img src="logo-gemini.png" alt="Gemini" class="provider-icon-img">
                        <span class="provider-name">AG Gemini (Weekly)</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-ag-gemini-weekly"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-ag-gemini-weekly">0%</span>
                        <span class="raw-value" id="status-ag-gemini-weekly">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-ag-gemini-weekly"></div>
            </div>

            <div class="provider-row" id="row-ag-claude-5h">
                <div class="provider-main">
                    <div class="provider-info">
                        <img src="logo-claude.png" alt="Claude" class="provider-icon-img">
                        <span class="provider-name">AG Claude (5h)</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-ag-claude-5h"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-ag-claude-5h">0%</span>
                        <span class="raw-value" id="status-ag-claude-5h">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-ag-claude-5h"></div>
            </div>

            <div class="provider-row" id="row-ag-claude-weekly">
                <div class="provider-main">
                    <div class="provider-info">
                        <img src="logo-claude.png" alt="Claude" class="provider-icon-img">
                        <span class="provider-name">AG Claude (Weekly)</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-ag-claude-weekly"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-ag-claude-weekly">0%</span>
                        <span class="raw-value" id="status-ag-claude-weekly">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-ag-claude-weekly"></div>
            </div>

            <div class="provider-row" id="row-minimax-5h">
                <div class="provider-main">
                    <div class="provider-info">
                        <img src="logo-minimax.png" alt="MiniMax" class="provider-icon-img">
                        <span class="provider-name">MiniMax (5h)</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-minimax-5h"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-minimax-5h">0%</span>
                        <span class="raw-value" id="status-minimax-5h">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-minimax-5h"></div>
            </div>

            <div class="provider-row" id="row-minimax-weekly">
                <div class="provider-main">
                    <div class="provider-info">
                        <img src="logo-minimax.png" alt="MiniMax" class="provider-icon-img">
                        <span class="provider-name">MiniMax (Weekly)</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="fill-minimax-weekly"></div>
                        </div>
                    </div>
                    <div class="provider-stats">
                        <span class="percentage" id="percentage-minimax-weekly">0%</span>
                        <span class="raw-value" id="status-minimax-weekly">Loading...</span>
                    </div>
                </div>
                <div class="provider-details" id="details-minimax-weekly"></div>
            </div>
        </section>


        <section class="charts">
            <h2>History</h2>
            <canvas id="historyChart"></canvas>
        </section>
    </div>

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