mirror of
https://github.com/tiennm99/claude-code-usage-bubble.git
synced 2026-10-21 20:16:50 +00:00
tiennm99
094b6bdcb0
The stadium pill holds SVG usage and time rings, pill-shaped tail bars and the payload's texts, laid out in physical px from canvasW, canvasH and dpi with the GDI bubble's formulas (ui/layout.js, unit-tested). The palette is CSS custom properties per theme; fills come from Rust. The ring arc, weekly fill and weekly percent pulse at 95% and above on an 80 ms step, and the time progress advances every minute. Only the pill takes pointer input, so the corners are dead. A press that moves 3 physical px starts an OS drag after arming the move end; an earlier release is a click. Right-click opens the native menu and Ctrl+wheel resizes.
26 lines
1.0 KiB
HTML
26 lines
1.0 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Claude Code Usage Bubble</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">
|
|
<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>
|