95 lines
3.8 KiB
HTML
95 lines
3.8 KiB
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="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>
|
|
<h1>TokenWatch</h1>
|
|
<p>API Limit & Quota Tracker</p>
|
|
</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">
|
|
<!-- Antigravity Row -->
|
|
<div class="provider-row" id="row-antigravity">
|
|
<div class="provider-info">
|
|
<span class="provider-icon">🤖</span>
|
|
<span class="provider-name">Antigravity (Gemini)</span>
|
|
</div>
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="fill-antigravity"></div>
|
|
</div>
|
|
</div>
|
|
<div class="provider-stats">
|
|
<span class="percentage" id="percentage-antigravity">0%</span>
|
|
<span class="raw-value" id="status-antigravity">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- POE Row -->
|
|
<div class="provider-row" id="row-poe">
|
|
<div class="provider-info">
|
|
<span class="provider-icon">🧠</span>
|
|
<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>
|
|
|
|
<!-- MiniMax Row -->
|
|
<div class="provider-row" id="row-minimax">
|
|
<div class="provider-info">
|
|
<span class="provider-icon">⚡</span>
|
|
<span class="provider-name">MiniMax (M3)</span>
|
|
</div>
|
|
<div class="progress-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="fill-minimax"></div>
|
|
</div>
|
|
</div>
|
|
<div class="provider-stats">
|
|
<span class="percentage" id="percentage-minimax">0%</span>
|
|
<span class="raw-value" id="status-minimax">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="charts">
|
|
<h2>History</h2>
|
|
<canvas id="historyChart"></canvas>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|