mirror of
https://github.com/tiennm99/claude-code-usage-bubble.git
synced 2026-10-27 18:16:21 +00:00
tiennm99
3aaf963841
Solid dark tracks looked like black holes and the muted text faded out when the 60% background sat over a light window. Tracks are now tints over the background, a faint edge traces the outline, and text gets a soft halo.
27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Usage Monitor</title>
|
|
<link rel="stylesheet" href="bubble.css">
|
|
<script type="module" src="bubble.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="pill" id="pill">
|
|
<svg class="rings" id="rings" aria-hidden="true">
|
|
<path class="edge" id="edge"></path>
|
|
<circle class="ring-track" id="ring-track"></circle>
|
|
<circle class="ring-arc" id="ring-arc"></circle>
|
|
<circle class="time-ring-track" id="time-ring-track"></circle>
|
|
<circle class="time-ring-arc" id="time-ring-arc"></circle>
|
|
</svg>
|
|
<div class="text head-label" id="head-label"></div>
|
|
<div class="text head-pct" id="head-pct"></div>
|
|
<div class="bar usage-bar" id="usage-bar"><div class="fill usage-fill" id="usage-fill"></div></div>
|
|
<div class="bar time-bar" id="time-bar"><div class="fill time-fill" id="time-fill"></div></div>
|
|
<div class="text tail-pct" id="tail-pct"></div>
|
|
<div class="text tail-time" id="tail-time"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|