diff --git a/claude-token-counter.html b/claude-token-counter.html index d0b2bd5..df2bec3 100644 --- a/claude-token-counter.html +++ b/claude-token-counter.html @@ -105,6 +105,72 @@ .file-item button:hover { background: #cc0000; } + + .model-list { + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + margin: 8px 0; + } + + .model-list label { + display: inline-flex; + align-items: center; + gap: 6px; + font-weight: normal; + cursor: pointer; + margin-bottom: 0; + } + + .model-list input[type="checkbox"] { + margin: 0; + } + + .results-table { + width: 100%; + border-collapse: collapse; + margin-top: 10px; + } + + .results-table th, + .results-table td { + text-align: left; + padding: 8px 12px; + border-bottom: 1px solid #ddd; + } + + .results-table th { + background: #e8e8e8; + } + + .results-table td.tokens, + .results-table td.multiplier { + font-family: monospace; + text-align: right; + } + + .multiplier-badge { + display: inline-block; + padding: 2px 8px; + border-radius: 10px; + font-size: 13px; + font-weight: bold; + } + + .multiplier-baseline { + background: #d4edda; + color: #155724; + } + + .multiplier-higher { + background: #fff3cd; + color: #856404; + } + + .result-error { + color: #ff0000; + font-family: monospace; + } @@ -126,13 +192,25 @@

Claude Token Counter

+
+ +
+
+