ccusage-ui 0.1.17 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CLAUDE.md +113 -0
  2. package/README.md +43 -0
  3. package/package.json +3 -2
  4. package/public/share/bronze.html +2 -2
  5. package/public/share/card-bronze.html +26 -3
  6. package/public/share/card-challenger.html +36 -81
  7. package/public/share/card-diamond.html +26 -3
  8. package/public/share/card-emerald.html +26 -3
  9. package/public/share/card-gold.html +26 -3
  10. package/public/share/card-grandmaster.html +26 -3
  11. package/public/share/card-iron.html +27 -4
  12. package/public/share/card-master.html +26 -3
  13. package/public/share/card-platinum.html +26 -3
  14. package/public/share/card-silver.html +26 -3
  15. package/public/share/challenger.html +2 -2
  16. package/public/share/diamond.html +2 -2
  17. package/public/share/emerald.html +2 -2
  18. package/public/share/gold.html +2 -2
  19. package/public/share/grandmaster.html +2 -2
  20. package/public/share/icons/bronze.png +0 -0
  21. package/public/share/icons/challenger.png +0 -0
  22. package/public/share/icons/diamond.png +0 -0
  23. package/public/share/icons/emerald.png +0 -0
  24. package/public/share/icons/gold.png +0 -0
  25. package/public/share/icons/grandmaster.png +0 -0
  26. package/public/share/icons/iron.png +0 -0
  27. package/public/share/icons/master.png +0 -0
  28. package/public/share/icons/platinum.png +0 -0
  29. package/public/share/icons/silver.png +0 -0
  30. package/public/share/images/Gemini_Generated_Image_fj59jyfj59jyfj59.jpeg +0 -0
  31. package/public/share/images/card-bronze.png +0 -0
  32. package/public/share/images/card-challenger.png +0 -0
  33. package/public/share/images/card-diamond.png +0 -0
  34. package/public/share/images/card-emerald.png +0 -0
  35. package/public/share/images/card-gold.png +0 -0
  36. package/public/share/images/card-grandmaster.png +0 -0
  37. package/public/share/images/card-iron.png +0 -0
  38. package/public/share/images/card-master.png +0 -0
  39. package/public/share/images/card-platinum.png +0 -0
  40. package/public/share/images/card-silver.png +0 -0
  41. package/public/share/iron.html +2 -2
  42. package/public/share/master.html +2 -2
  43. package/public/share/platinum.html +2 -2
  44. package/public/share/silver.html +2 -2
  45. package/scripts/capture-card.js +25 -0
  46. package/scripts/extract-tier-icons.js +185 -0
  47. package/scripts/generate-cards.js +260 -0
  48. package/scripts/process-emerald.js +55 -0
  49. package/public/share/images/bronze.png +0 -0
  50. package/public/share/images/challenger.png +0 -0
  51. package/public/share/images/diamond.png +0 -0
  52. package/public/share/images/emerald.png +0 -0
  53. package/public/share/images/gold.png +0 -0
  54. package/public/share/images/grandmaster.png +0 -0
  55. package/public/share/images/iron.png +0 -0
  56. package/public/share/images/master.png +0 -0
  57. package/public/share/images/platinum.png +0 -0
  58. package/public/share/images/silver.png +0 -0
package/public/share/card-iron.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=1200, height=630">
6
- <title>Iron Card</title>
6
+ <title>IRON Card</title>
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
9
  body {
@@ -39,8 +39,17 @@
39
39
  background: radial-gradient(circle, rgba(100, 100, 100, 0.15) 0%, transparent 70%);
40
40
  pointer-events: none;
41
41
  }
42
+ .big-icon {
43
+ position: absolute;
44
+ right: 60px;
45
+ top: 45%;
46
+ transform: translateY(-50%);
47
+ width: 280px;
48
+ height: 280px;
49
+ filter: drop-shadow(0 0 20px rgba(100, 100, 100, 0.8)) drop-shadow(0 0 40px rgba(100, 100, 100, 0.5)) drop-shadow(0 0 60px rgba(100, 100, 100, 0.3));
50
+ opacity: 0.95;
51
+ }
42
52
  .header { display: flex; align-items: center; gap: 24px; }
43
- .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(100, 100, 100, 0.8)); }
44
53
  .tier-info h1 {
45
54
  font-size: 64px;
46
55
  font-weight: 800;
@@ -62,9 +71,23 @@
62
71
  </style>
63
72
  </head>
64
73
  <body>
74
+ <!-- SVG filter to remove magenta fringing -->
75
+ <svg style="position: absolute; width: 0; height: 0;">
76
+ <defs>
77
+ <filter id="remove-magenta" color-interpolation-filters="sRGB">
78
+ <!-- Convert to separate channels and reduce magenta -->
79
+ <feColorMatrix type="matrix" values="
80
+ 1 0 0 0 0
81
+ 0 1 0 0 0
82
+ 0 0 1 0 0
83
+ -0.5 1 -0.5 1 0
84
+ "/>
85
+ </filter>
86
+ </defs>
87
+ </svg>
65
88
  <div class="card">
89
+ <img class="big-icon" src="./icons/iron.png" alt="">
66
90
  <div class="header">
67
- <span class="tier-icon">⬛</span>
68
91
  <div class="tier-info">
69
92
  <h1>IRON</h1>
70
93
  <div class="subtitle">New AI User</div>
@@ -72,7 +95,7 @@
72
95
  </div>
73
96
  <div class="stats">
74
97
  <div class="stat">
75
- <div class="stat-value">&lt;5M</div>
98
+ <div class="stat-value"><5M</div>
76
99
  <div class="stat-label">Tokens / Month</div>
77
100
  </div>
78
101
  <div class="stat">
package/public/share/card-master.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=1200, height=630">
6
- <title>Master Card</title>
6
+ <title>MASTER Card</title>
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
9
  body {
@@ -39,8 +39,17 @@
39
39
  background: radial-gradient(circle, rgba(231, 76, 60, 0.15) 0%, transparent 70%);
40
40
  pointer-events: none;
41
41
  }
42
+ .big-icon {
43
+ position: absolute;
44
+ right: 60px;
45
+ top: 45%;
46
+ transform: translateY(-50%);
47
+ width: 280px;
48
+ height: 280px;
49
+ filter: drop-shadow(0 0 20px rgba(231, 76, 60, 0.8)) drop-shadow(0 0 40px rgba(231, 76, 60, 0.5)) drop-shadow(0 0 60px rgba(231, 76, 60, 0.3));
50
+ opacity: 0.95;
51
+ }
42
52
  .header { display: flex; align-items: center; gap: 24px; }
43
- .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(231, 76, 60, 0.8)); }
44
53
  .tier-info h1 {
45
54
  font-size: 64px;
46
55
  font-weight: 800;
@@ -62,9 +71,23 @@
62
71
  </style>
63
72
  </head>
64
73
  <body>
74
+ <!-- SVG filter to remove magenta fringing -->
75
+ <svg style="position: absolute; width: 0; height: 0;">
76
+ <defs>
77
+ <filter id="remove-magenta" color-interpolation-filters="sRGB">
78
+ <!-- Convert to separate channels and reduce magenta -->
79
+ <feColorMatrix type="matrix" values="
80
+ 1 0 0 0 0
81
+ 0 1 0 0 0
82
+ 0 0 1 0 0
83
+ -0.5 1 -0.5 1 0
84
+ "/>
85
+ </filter>
86
+ </defs>
87
+ </svg>
65
88
  <div class="card">
89
+ <img class="big-icon" src="./icons/master.png" alt="">
66
90
  <div class="header">
67
- <span class="tier-icon">🔴</span>
68
91
  <div class="tier-info">
69
92
  <h1>MASTER</h1>
70
93
  <div class="subtitle">Top 0.1% AI User</div>
package/public/share/card-platinum.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=1200, height=630">
6
- <title>Platinum Card</title>
6
+ <title>PLATINUM Card</title>
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
9
  body {
@@ -39,8 +39,17 @@
39
39
  background: radial-gradient(circle, rgba(52, 199, 89, 0.15) 0%, transparent 70%);
40
40
  pointer-events: none;
41
41
  }
42
+ .big-icon {
43
+ position: absolute;
44
+ right: 60px;
45
+ top: 45%;
46
+ transform: translateY(-50%);
47
+ width: 280px;
48
+ height: 280px;
49
+ filter: drop-shadow(0 0 20px rgba(52, 199, 89, 0.8)) drop-shadow(0 0 40px rgba(52, 199, 89, 0.5)) drop-shadow(0 0 60px rgba(52, 199, 89, 0.3));
50
+ opacity: 0.95;
51
+ }
42
52
  .header { display: flex; align-items: center; gap: 24px; }
43
- .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(52, 199, 89, 0.8)); }
44
53
  .tier-info h1 {
45
54
  font-size: 64px;
46
55
  font-weight: 800;
@@ -62,9 +71,23 @@
62
71
  </style>
63
72
  </head>
64
73
  <body>
74
+ <!-- SVG filter to remove magenta fringing -->
75
+ <svg style="position: absolute; width: 0; height: 0;">
76
+ <defs>
77
+ <filter id="remove-magenta" color-interpolation-filters="sRGB">
78
+ <!-- Convert to separate channels and reduce magenta -->
79
+ <feColorMatrix type="matrix" values="
80
+ 1 0 0 0 0
81
+ 0 1 0 0 0
82
+ 0 0 1 0 0
83
+ -0.5 1 -0.5 1 0
84
+ "/>
85
+ </filter>
86
+ </defs>
87
+ </svg>
65
88
  <div class="card">
89
+ <img class="big-icon" src="./icons/platinum.png" alt="">
66
90
  <div class="header">
67
- <span class="tier-icon">💚</span>
68
91
  <div class="tier-info">
69
92
  <h1>PLATINUM</h1>
70
93
  <div class="subtitle">Active AI User</div>
package/public/share/card-silver.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=1200, height=630">
6
- <title>Silver Card</title>
6
+ <title>SILVER Card</title>
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
9
  body {
@@ -39,8 +39,17 @@
39
39
  background: radial-gradient(circle, rgba(192, 192, 192, 0.15) 0%, transparent 70%);
40
40
  pointer-events: none;
41
41
  }
42
+ .big-icon {
43
+ position: absolute;
44
+ right: 60px;
45
+ top: 45%;
46
+ transform: translateY(-50%);
47
+ width: 280px;
48
+ height: 280px;
49
+ filter: drop-shadow(0 0 20px rgba(192, 192, 192, 0.8)) drop-shadow(0 0 40px rgba(192, 192, 192, 0.5)) drop-shadow(0 0 60px rgba(192, 192, 192, 0.3));
50
+ opacity: 0.95;
51
+ }
42
52
  .header { display: flex; align-items: center; gap: 24px; }
43
- .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(192, 192, 192, 0.8)); }
44
53
  .tier-info h1 {
45
54
  font-size: 64px;
46
55
  font-weight: 800;
@@ -62,9 +71,23 @@
62
71
  </style>
63
72
  </head>
64
73
  <body>
74
+ <!-- SVG filter to remove magenta fringing -->
75
+ <svg style="position: absolute; width: 0; height: 0;">
76
+ <defs>
77
+ <filter id="remove-magenta" color-interpolation-filters="sRGB">
78
+ <!-- Convert to separate channels and reduce magenta -->
79
+ <feColorMatrix type="matrix" values="
80
+ 1 0 0 0 0
81
+ 0 1 0 0 0
82
+ 0 0 1 0 0
83
+ -0.5 1 -0.5 1 0
84
+ "/>
85
+ </filter>
86
+ </defs>
87
+ </svg>
65
88
  <div class="card">
89
+ <img class="big-icon" src="./icons/silver.png" alt="">
66
90
  <div class="header">
67
- <span class="tier-icon">⬜</span>
68
91
  <div class="tier-info">
69
92
  <h1>SILVER</h1>
70
93
  <div class="subtitle">Growing AI User</div>
package/public/share/challenger.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/challenger.html">
10
10
  <meta property="og:title" content="I'm a Challenger AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 1.5B tokens/month (World #1 Level). Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/challenger.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-challenger.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/challenger.html">
17
17
  <meta property="twitter:title" content="I'm a Challenger AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 1.5B tokens/month (World #1 Level). Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/challenger.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-challenger.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/diamond.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/diamond.html">
10
10
  <meta property="og:title" content="I'm a Diamond AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 300M tokens/month (Top 1%). Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/diamond.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-diamond.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/diamond.html">
17
17
  <meta property="twitter:title" content="I'm a Diamond AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 300M tokens/month (Top 1%). Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/diamond.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-diamond.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/emerald.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/emerald.html">
10
10
  <meta property="og:title" content="I'm an Emerald AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 100M tokens/month. Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/emerald.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-emerald.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/emerald.html">
17
17
  <meta property="twitter:title" content="I'm an Emerald AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 100M tokens/month. Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/emerald.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-emerald.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/gold.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/gold.html">
10
10
  <meta property="og:title" content="I'm a Gold AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 30M tokens/month. Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/gold.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-gold.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/gold.html">
17
17
  <meta property="twitter:title" content="I'm a Gold AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 30M tokens/month. Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/gold.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-gold.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/grandmaster.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/grandmaster.html">
10
10
  <meta property="og:title" content="I'm a Grandmaster AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 1B tokens/month (Top 0.01%). Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/grandmaster.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-grandmaster.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/grandmaster.html">
17
17
  <meta property="twitter:title" content="I'm a Grandmaster AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 1B tokens/month (Top 0.01%). Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/grandmaster.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-grandmaster.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/icons/bronze.png ADDED
Binary file
package/public/share/icons/diamond.png ADDED
Binary file
package/public/share/icons/emerald.png ADDED
Binary file
package/public/share/icons/gold.png ADDED
Binary file
package/public/share/icons/iron.png ADDED
Binary file
package/public/share/icons/master.png ADDED
Binary file
package/public/share/icons/platinum.png ADDED
Binary file
package/public/share/icons/silver.png ADDED
Binary file
package/public/share/iron.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/iron.html">
10
10
  <meta property="og:title" content="I'm an Iron AI User">
11
11
  <meta property="og:description" content="Just getting started with Claude Code! Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/iron.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-iron.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/iron.html">
17
17
  <meta property="twitter:title" content="I'm an Iron AI User">
18
18
  <meta property="twitter:description" content="Just getting started with Claude Code! Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/iron.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-iron.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/master.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/master.html">
10
10
  <meta property="og:title" content="I'm a Master AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 500M tokens/month (Top 0.1%). Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/master.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-master.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/master.html">
17
17
  <meta property="twitter:title" content="I'm a Master AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 500M tokens/month (Top 0.1%). Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/master.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-master.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/platinum.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/platinum.html">
10
10
  <meta property="og:title" content="I'm a Platinum AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 50M tokens/month. Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/platinum.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-platinum.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/platinum.html">
17
17
  <meta property="twitter:title" content="I'm a Platinum AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 50M tokens/month. Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/platinum.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-platinum.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/public/share/silver.html CHANGED
@@ -9,14 +9,14 @@
9
9
  <meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/silver.html">
10
10
  <meta property="og:title" content="I'm a Silver AI User">
11
11
  <meta property="og:description" content="My AI usage pace is over 10M tokens/month. Check your stats: npx ccusage-ui">
12
- <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/silver.png">
12
+ <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-silver.png">
13
13
 
14
14
  <!-- Twitter -->
15
15
  <meta property="twitter:card" content="summary_large_image">
16
16
  <meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/silver.html">
17
17
  <meta property="twitter:title" content="I'm a Silver AI User">
18
18
  <meta property="twitter:description" content="My AI usage pace is over 10M tokens/month. Check your stats: npx ccusage-ui">
19
- <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/silver.png">
19
+ <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-silver.png">
20
20
 
21
21
  <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
22
22
  <meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
package/scripts/capture-card.js ADDED
@@ -0,0 +1,25 @@
1
+ const puppeteer = require('puppeteer');
2
+ const path = require('path');
3
+
4
+ const TIERS = [
5
+ 'challenger', 'grandmaster', 'master', 'diamond', 'emerald',
6
+ 'platinum', 'gold', 'silver', 'bronze', 'iron'
7
+ ];
8
+
9
+ (async () => {
10
+ const browser = await puppeteer.launch();
11
+ const page = await browser.newPage();
12
+ await page.setViewport({ width: 1200, height: 630 });
13
+
14
+ for (const tier of TIERS) {
15
+ const filePath = path.resolve(__dirname, `../public/share/card-${tier}.html`);
16
+ const outputPath = path.resolve(__dirname, `../public/share/images/card-${tier}.png`);
17
+
18
+ await page.goto('file://' + filePath);
19
+ await page.screenshot({ path: outputPath });
20
+ console.log(`✓ card-${tier}.png`);
21
+ }
22
+
23
+ await browser.close();
24
+ console.log('\n✅ Done!');
25
+ })();