ccusage-ui 0.1.16 → 0.1.18

package/CLAUDE.md

@@ -0,0 +1,113 @@
+# CLAUDE.md
+
+Context information for Claude when working on this project.
+
+## Project Overview
+
+A UI project for visualizing Claude Code usage with a LoL-style tier system.
+
+## Tier Card System
+
+### Card Generation Script
+
+```bash
+# Generate all tier card HTML files
+node scripts/generate-cards.js
+```
+
+Modify the `TIERS` array in [scripts/generate-cards.js](scripts/generate-cards.js) to regenerate all cards at once.
+
+### Icon Extraction Script
+
+```bash
+# Extract individual icons from tier icon image (with transparent background)
+node scripts/extract-tier-icons.js
+```
+
+- Input: Source image in `public/share/images/` folder (5x2 grid)
+- Output: Individual PNG files in `public/share/icons/`
+- Magenta (#FF00FF) background is removed (chroma key)
+- Erosion algorithm removes masking artifacts
+
+### Tier Order (Highest to Lowest)
+
+1. **Challenger** - Top 0.001%, 1.5B+ tokens/month
+2. **Grandmaster** - Top 0.01%, 1B+ tokens/month
+3. **Master** - Top 0.1%, 500M+ tokens/month
+4. **Diamond** - Top 1%, 300M+ tokens/month
+5. **Emerald** - Top 5%, 100M+ tokens/month
+6. **Platinum** - Top 10%, 50M+ tokens/month
+7. **Gold** - Top 20%, 30M+ tokens/month
+8. **Silver** - Top 40%, 10M+ tokens/month
+9. **Bronze** - Top 60%, 5M+ tokens/month
+10. **Iron** - Starter, <5M tokens/month
+
+### Card Structure
+
+- Size: 1200x630px (OG image standard)
+- Right side: 280px big-icon with glow effect
+- Left side: Tier name, description, token usage, ranking
+
+### How to Replace Icons
+
+Single 5x2 grid image with mixed chroma key backgrounds:
+- **Green (#00FF00)**: Challenger, Grandmaster, Master, Gold, Silver, Bronze, Iron
+- **Magenta (#FF00FF)**: Diamond, Emerald, Platinum (cyan/green-colored icons)
+
+#### Gemini Prompt
+
+```
+Create a 5x2 grid of League of Legends style tier icons.
+Image aspect ratio: 5:2 (e.g., 2500x1000px or similar)
+Each cell should be square and contain one icon, clearly separated with no effects bleeding between cells.
+
+IMPORTANT - Background colors per cell (for chroma key extraction):
+- Green (#00FF00): Challenger, Grandmaster, Master, Gold, Silver, Bronze, Iron
+- Magenta (#FF00FF): Diamond, Emerald, Platinum (these have cyan/green colors, so use magenta background)
+
+CRITICAL - DO NOT use these colors in the icons themselves:
+- Icons with green background: DO NOT use pure green (#00FF00) or similar bright greens in the icon
+- Icons with magenta background: DO NOT use pure magenta (#FF00FF) or similar magentas in the icon
+- These colors are reserved for background removal (chroma key)
+
+Grid layout (left to right):
+- Row 1: Challenger(green bg), Grandmaster(green bg), Master(green bg), Diamond(magenta bg), Emerald(magenta bg)
+- Row 2: Platinum(magenta bg), Gold(green bg), Silver(green bg), Bronze(green bg), Iron(green bg)
+
+Icon descriptions (G=green bg, M=magenta bg):
+1. Challenger (G) - Golden winged crown emblem with red gems, most ornate
+2. Grandmaster (G) - Red/orange flaming emblem with golden wings
+3. Master (G) - Crimson red shield emblem with flame accents
+4. Diamond (M) - Cyan/light blue crystalline shield emblem
+5. Emerald (M) - Green gemstone shield emblem with facets
+6. Platinum (M) - Silver-white metallic shield emblem with teal accents
+7. Gold (G) - Golden shield emblem with warm yellow glow
+8. Silver (G) - Silver metallic shield emblem with cool gray tones
+9. Bronze (G) - Bronze/copper shield emblem with warm brown tones
+10. Iron (G) - Dark gray iron shield emblem, simplest design
+
+Icon style: metallic shields with gemstones, fantasy game aesthetic, detailed 3D rendering.
+All icons should be shield/emblem shaped for visual consistency (like League of Legends rank badges).
+```
+
+#### Steps
+
+1. Generate image using the prompt above
+2. Save to `public/share/images/`
+3. Update `inputPath` in `scripts/extract-tier-icons.js`
+4. Run `node scripts/extract-tier-icons.js`
+5. Run `node scripts/generate-cards.js` to regenerate cards
+6. Run `node scripts/capture-card.js` to generate card images
+
+## File Structure
+
+```
+public/share/
+├── icons/           # Extracted tier icons (PNG, transparent background)
+├── images/          # Source icon images
+└── card-*.html      # OG card HTML for each tier
+
+scripts/
+├── extract-tier-icons.js  # Icon extraction script
+└── generate-cards.js      # Card generation script
+```

package/README.md

@@ -49,6 +49,49 @@ ccusage-ui
 [![Threads](https://img.shields.io/badge/Threads-@dohapark81-000000?style=flat&logo=threads)](https://www.threads.net/@dohapark81)
 [![LinkedIn](https://img.shields.io/badge/LinkedIn-dohapark81-0077B5?style=flat&logo=linkedin)](https://www.linkedin.com/in/dohapark81/)
 
+## Tier Icons
+
+Tier icons were generated using **Gemini (via 나노바나나 프로)** and extracted with chroma key processing.
+
+<details>
+<summary>Image Generation Prompt</summary>
+
+```
+Create a 5x2 grid of League of Legends style tier icons.
+Image aspect ratio: 5:2 (e.g., 2500x1000px or similar)
+Each cell should be square and contain one icon, clearly separated with no effects bleeding between cells.
+
+IMPORTANT - Background colors per cell (for chroma key extraction):
+- Green (#00FF00): Challenger, Grandmaster, Master, Gold, Silver, Bronze, Iron
+- Magenta (#FF00FF): Diamond, Emerald, Platinum (these have cyan/green colors, so use magenta background)
+
+CRITICAL - DO NOT use these colors in the icons themselves:
+- Icons with green background: DO NOT use pure green (#00FF00) or similar bright greens in the icon
+- Icons with magenta background: DO NOT use pure magenta (#FF00FF) or similar magentas in the icon
+- These colors are reserved for background removal (chroma key)
+
+Grid layout (left to right):
+- Row 1: Challenger(green bg), Grandmaster(green bg), Master(green bg), Diamond(magenta bg), Emerald(magenta bg)
+- Row 2: Platinum(magenta bg), Gold(green bg), Silver(green bg), Bronze(green bg), Iron(green bg)
+
+Icon descriptions (G=green bg, M=magenta bg):
+1. Challenger (G) - Golden winged crown emblem with red gems
+2. Grandmaster (G) - Red/orange flaming emblem with golden wings
+3. Master (G) - Crimson red shield emblem with flame accents
+4. Diamond (M) - Cyan/light blue crystalline shield emblem
+5. Emerald (M) - Green gemstone shield emblem with facets
+6. Platinum (M) - Silver-white metallic shield emblem with teal accents
+7. Gold (G) - Golden shield emblem with warm yellow glow
+8. Silver (G) - Silver metallic shield emblem with cool gray tones
+9. Bronze (G) - Bronze/copper shield emblem with warm brown tones
+10. Iron (G) - Dark gray iron shield emblem, simplest design
+
+Icon style: metallic shields with gemstones, fantasy game aesthetic, detailed 3D rendering.
+All icons should be shield/emblem shaped for visual consistency (like League of Legends rank badges).
+```
+
+</details>
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccusage-ui",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "main": "server.js",
   "bin": {
     "ccusage-ui": "server.js"
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "gh-pages": "^6.3.0",
-    "puppeteer": "^24.34.0"
+    "puppeteer": "^24.34.0",
+    "sharp": "^0.34.5"
   }
 }

package/public/index.html

@@ -327,6 +327,9 @@
                     <tbody></tbody>
                 </table>
             </div>
+            <button id="showMoreBtn" onclick="toggleTableRows()" style="margin-top: 16px; padding: 8px 16px; background: #f5f5f7; border: 1px solid #e5e5e7; border-radius: 8px; cursor: pointer; font-size: 13px; color: #0071e3; width: 100%;">
+                Show More (30 days)
+            </button>
         </div>
 
         <footer style="text-align: center; margin-top: 40px; padding: 30px 20px; color: var(--text-secondary); font-size: 13px; border-top: 1px solid #e5e5e7;">
@@ -732,12 +735,15 @@
             });
         }
 
+        let showAllDays = false;
+
         function renderTable() {
             const tbody = document.querySelector('#dataTable tbody');
             tbody.innerHTML = '';
-            // Sort by date descending (newest first) and take top 10
-            const recent = [...dailyData].sort((a, b) => b.date.localeCompare(a.date)).slice(0, 10);
-            
+            // Sort by date descending (newest first), show 7 or 30 days
+            const count = showAllDays ? 30 : 7;
+            const recent = [...dailyData].sort((a, b) => b.date.localeCompare(a.date)).slice(0, count);
+
             recent.forEach(d => {
                 const tr = document.createElement('tr');
                 tr.innerHTML = `
@@ -749,6 +755,17 @@
                 `;
                 tbody.appendChild(tr);
             });
+
+            // Update button text
+            const btn = document.getElementById('showMoreBtn');
+            if (btn) {
+                btn.textContent = showAllDays ? 'Show Less (7 days)' : 'Show More (30 days)';
+            }
+        }
+
+        function toggleTableRows() {
+            showAllDays = !showAllDays;
+            renderTable();
         }
 
         

package/public/share/bronze.html

@@ -9,14 +9,14 @@
     <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/bronze.html">
     <meta property="og:title" content="I'm a Bronze AI User">
     <meta property="og:description" content="My AI usage pace is over 5M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/bronze.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-bronze.png">
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/bronze.html">
     <meta property="twitter:title" content="I'm a Bronze AI User">
     <meta property="twitter:description" content="My AI usage pace is over 5M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/bronze.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-bronze.png">
 
     <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
     <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />

package/public/share/card-bronze.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=1200, height=630">
-    <title>Bronze Card</title>
+    <title>BRONZE Card</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -39,8 +39,17 @@
             background: radial-gradient(circle, rgba(205, 127, 50, 0.15) 0%, transparent 70%);
             pointer-events: none;
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(205, 127, 50, 0.8)) drop-shadow(0 0 40px rgba(205, 127, 50, 0.5)) drop-shadow(0 0 60px rgba(205, 127, 50, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(205, 127, 50, 0.8)); }
         .tier-info h1 {
             font-size: 64px;
             font-weight: 800;
@@ -62,9 +71,23 @@
     </style>
 </head>
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/bronze.png" alt="">
         <div class="header">
-            <span class="tier-icon">🟫</span>
             <div class="tier-info">
                 <h1>BRONZE</h1>
                 <div class="subtitle">Casual AI User</div>

package/public/share/card-challenger.html

@@ -3,10 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=1200, height=630">
-    <title>Challenger Card</title>
+    <title>CHALLENGER Card</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-
         body {
             width: 1200px;
             height: 630px;
@@ -17,7 +16,6 @@
             justify-content: center;
             overflow: hidden;
         }
-
         .card {
             width: 1100px;
             height: 530px;
@@ -31,7 +29,6 @@
             position: relative;
             overflow: hidden;
         }
-
         .card::before {
             content: '';
             position: absolute;
@@ -42,18 +39,17 @@
             background: radial-gradient(circle, rgba(155, 89, 182, 0.15) 0%, transparent 70%);
             pointer-events: none;
         }
-
-        .header {
-            display: flex;
-            align-items: center;
-            gap: 24px;
-        }
-
-        .tier-icon {
-            font-size: 80px;
-            filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8));
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.3));
+            opacity: 0.95;
         }
-
+        .header { display: flex; align-items: center; gap: 24px; }
         .tier-info h1 {
             font-size: 64px;
             font-weight: 800;
@@ -63,77 +59,40 @@
             background-clip: text;
             letter-spacing: -2px;
         }
-
-        .tier-info .subtitle {
-            font-size: 28px;
-            color: rgba(255, 255, 255, 0.6);
-            margin-top: 8px;
-            font-weight: 500;
-        }
-
-        .stats {
-            display: flex;
-            gap: 60px;
-        }
-
-        .stat {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .stat-value {
-            font-size: 56px;
-            font-weight: 700;
-            color: #fff;
-            letter-spacing: -1px;
-        }
-
-        .stat-label {
-            font-size: 20px;
-            color: rgba(255, 255, 255, 0.5);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-
-        .footer {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-        }
-
-        .command {
-            background: rgba(255, 255, 255, 0.1);
-            padding: 16px 32px;
-            border-radius: 12px;
-            font-family: 'SF Mono', Monaco, monospace;
-            font-size: 24px;
-            color: #34c759;
-            border: 1px solid rgba(52, 199, 89, 0.3);
-        }
-
-        .branding {
-            text-align: right;
-            color: rgba(255, 255, 255, 0.4);
-            font-size: 20px;
-        }
-
-        .branding strong {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 24px;
-        }
+        .tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
+        .stats { display: flex; gap: 60px; }
+        .stat { display: flex; flex-direction: column; gap: 8px; }
+        .stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
+        .stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
+        .footer { display: flex; justify-content: space-between; align-items: flex-end; }
+        .command { background: rgba(255, 255, 255, 0.1); padding: 16px 32px; border-radius: 12px; font-family: 'SF Mono', Monaco, monospace; font-size: 24px; color: #34c759; border: 1px solid rgba(52, 199, 89, 0.3); }
+        .branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
+        .branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
     </style>
 </head>
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/challenger.png" alt="">
         <div class="header">
-            <span class="tier-icon">🏆</span>
             <div class="tier-info">
                 <h1>CHALLENGER</h1>
                 <div class="subtitle">World #1 Level AI User</div>
             </div>
         </div>
-
         <div class="stats">
             <div class="stat">
                 <div class="stat-value">1.5B+</div>
@@ -144,13 +103,9 @@
                 <div class="stat-label">Global Ranking</div>
             </div>
         </div>
-
         <div class="footer">
             <div class="command">npx ccusage-ui</div>
-            <div class="branding">
-                <strong>Claude Code Usage</strong><br>
-                sowonlabs.com
-            </div>
+            <div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
         </div>
     </div>
 </body>

package/public/share/card-diamond.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=1200, height=630">
-    <title>Diamond Card</title>
+    <title>DIAMOND Card</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -39,8 +39,17 @@
             background: radial-gradient(circle, rgba(0, 188, 212, 0.15) 0%, transparent 70%);
             pointer-events: none;
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(0, 188, 212, 0.8)) drop-shadow(0 0 40px rgba(0, 188, 212, 0.5)) drop-shadow(0 0 60px rgba(0, 188, 212, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(0, 188, 212, 0.8)); }
         .tier-info h1 {
             font-size: 64px;
             font-weight: 800;
@@ -62,9 +71,23 @@
     </style>
 </head>
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/diamond.png" alt="">
         <div class="header">
-            <span class="tier-icon">💠</span>
             <div class="tier-info">
                 <h1>DIAMOND</h1>
                 <div class="subtitle">Top 1% AI User</div>

package/public/share/card-emerald.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=1200, height=630">
-    <title>Emerald Card</title>
+    <title>EMERALD Card</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -39,8 +39,17 @@
             background: radial-gradient(circle, rgba(0, 229, 160, 0.15) 0%, transparent 70%);
             pointer-events: none;
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(0, 229, 160, 0.8)) drop-shadow(0 0 40px rgba(0, 229, 160, 0.5)) drop-shadow(0 0 60px rgba(0, 229, 160, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(0, 229, 160, 0.8)); }
         .tier-info h1 {
             font-size: 64px;
             font-weight: 800;
@@ -62,9 +71,23 @@
     </style>
 </head>
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/emerald.png" alt="">
         <div class="header">
-            <span class="tier-icon">💎</span>
             <div class="tier-info">
                 <h1>EMERALD</h1>
                 <div class="subtitle">Heavy AI User</div>

package/public/share/card-gold.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=1200, height=630">
-    <title>Gold Card</title>
+    <title>GOLD Card</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -39,8 +39,17 @@
             background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
             pointer-events: none;
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
         .tier-info h1 {
             font-size: 64px;
             font-weight: 800;
@@ -62,9 +71,23 @@
     </style>
 </head>
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/gold.png" alt="">
         <div class="header">
-            <span class="tier-icon">🟡</span>
             <div class="tier-info">
                 <h1>GOLD</h1>
                 <div class="subtitle">Regular AI User</div>