ccusage-ui 0.1.7 β 0.1.9
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.
- package/package.json +12 -3
- package/public/index.html +1 -1
- package/public/share/bronze.html +2 -2
- package/public/share/card-bronze.html +89 -0
- package/public/share/card-challenger.html +157 -0
- package/public/share/card-diamond.html +89 -0
- package/public/share/card-emerald.html +89 -0
- package/public/share/card-gold.html +89 -0
- package/public/share/card-grandmaster.html +89 -0
- package/public/share/card-iron.html +89 -0
- package/public/share/card-master.html +89 -0
- package/public/share/card-platinum.html +89 -0
- package/public/share/card-silver.html +89 -0
- package/public/share/challenger.html +2 -2
- package/public/share/diamond.html +2 -2
- package/public/share/emerald.html +2 -2
- package/public/share/gold.html +2 -2
- package/public/share/grandmaster.html +2 -2
- package/public/share/images/bronze.png +0 -0
- package/public/share/images/challenger.png +0 -0
- package/public/share/images/diamond.png +0 -0
- package/public/share/images/emerald.png +0 -0
- package/public/share/images/gold.png +0 -0
- package/public/share/images/grandmaster.png +0 -0
- package/public/share/images/iron.png +0 -0
- package/public/share/images/master.png +0 -0
- package/public/share/images/platinum.png +0 -0
- package/public/share/images/silver.png +0 -0
- package/public/share/iron.html +2 -2
- package/public/share/master.html +2 -2
- package/public/share/platinum.html +2 -2
- package/public/share/silver.html +2 -2
- package/scripts/capture-cards.js +52 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ccusage-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"main": "server.js",
|
|
5
5
|
"bin": {
|
|
6
6
|
"ccusage-ui": "server.js"
|
|
@@ -10,7 +10,15 @@
|
|
|
10
10
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
11
|
"deploy": "gh-pages -d public"
|
|
12
12
|
},
|
|
13
|
-
"keywords": [
|
|
13
|
+
"keywords": [
|
|
14
|
+
"ccusage",
|
|
15
|
+
"ccusage-ui",
|
|
16
|
+
"claude",
|
|
17
|
+
"claude-code",
|
|
18
|
+
"usage",
|
|
19
|
+
"statistics",
|
|
20
|
+
"web-ui"
|
|
21
|
+
],
|
|
14
22
|
"author": "Doha Park",
|
|
15
23
|
"license": "MIT",
|
|
16
24
|
"description": "Web UI for Claude Code usage statistics",
|
|
@@ -26,6 +34,7 @@
|
|
|
26
34
|
"ccusage": "^18.0.0"
|
|
27
35
|
},
|
|
28
36
|
"devDependencies": {
|
|
29
|
-
"gh-pages": "^6.3.0"
|
|
37
|
+
"gh-pages": "^6.3.0",
|
|
38
|
+
"puppeteer": "^24.34.0"
|
|
30
39
|
}
|
|
31
40
|
}
|
package/public/index.html
CHANGED
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
<div>
|
|
281
281
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
282
282
|
<h2 style="margin:0; font-size:18px;">Usage Trend</h2>
|
|
283
|
-
<span class="tier-info" data-tippy-content="β¬ Iron: <5M<br>π« Bronze: 5M+<br>β¬ Silver: 10M+<br>π‘ Gold: 30M+<br>π Platinum: 50M+<br>π Emerald: 100M+<br>π Diamond: 300M+<br>π΄ Master: 500M+<br>π Grandmaster: 1B+<br>π Challenger: 1.5B+ (
|
|
283
|
+
<span class="tier-info" data-tippy-content="β¬ Iron: <5M<br>π« Bronze: 5M+<br>β¬ Silver: 10M+<br>π‘ Gold: 30M+<br>π Platinum: 50M+<br>π Emerald: 100M+<br>π Diamond: 300M+<br>π΄ Master: 500M+<br>π Grandmaster: 1B+<br>π Challenger: 1.5B+ (World #1 Level)">?</span>
|
|
284
284
|
</div>
|
|
285
285
|
|
|
286
286
|
<div id="userLevel" style="font-size:12px; color:#0071e3; margin-top:4px; font-weight:500;"></div>
|
package/public/share/bronze.html
CHANGED
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
<meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/bronze.html">
|
|
10
10
|
<meta property="og:title" content="I'm a Bronze AI User">
|
|
11
11
|
<meta property="og:description" content="My AI usage pace is over 5M tokens/month. Check your stats: npx ccusage-ui">
|
|
12
|
-
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/bronze.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/bronze.html">
|
|
17
17
|
<meta property="twitter:title" content="I'm a Bronze AI User">
|
|
18
18
|
<meta property="twitter:description" content="My AI usage pace is over 5M tokens/month. Check your stats: npx ccusage-ui">
|
|
19
|
-
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/bronze.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" />
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Bronze Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #2d1a0a 50%, #4a2a10 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(205, 127, 50, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(205, 127, 50, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.header { display: flex; align-items: center; gap: 24px; }
|
|
43
|
+
.tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(205, 127, 50, 0.8)); }
|
|
44
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #cd7f32 0%, #daa06d 50%, #f5deb3 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">π«</span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>BRONZE</h1>
|
|
70
|
+
<div class="subtitle">Casual AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">5M+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 60%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Challenger Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
width: 1200px;
|
|
12
|
+
height: 630px;
|
|
13
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
14
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.card {
|
|
22
|
+
width: 1100px;
|
|
23
|
+
height: 530px;
|
|
24
|
+
background: rgba(255, 255, 255, 0.03);
|
|
25
|
+
border: 2px solid rgba(155, 89, 182, 0.5);
|
|
26
|
+
border-radius: 32px;
|
|
27
|
+
padding: 60px;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
position: relative;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card::before {
|
|
36
|
+
content: '';
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: -50%;
|
|
39
|
+
right: -20%;
|
|
40
|
+
width: 600px;
|
|
41
|
+
height: 600px;
|
|
42
|
+
background: radial-gradient(circle, rgba(155, 89, 182, 0.15) 0%, transparent 70%);
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.header {
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
gap: 24px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.tier-icon {
|
|
53
|
+
font-size: 80px;
|
|
54
|
+
filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.tier-info h1 {
|
|
58
|
+
font-size: 64px;
|
|
59
|
+
font-weight: 800;
|
|
60
|
+
background: linear-gradient(135deg, #9b59b6 0%, #e056fd 50%, #f8b500 100%);
|
|
61
|
+
-webkit-background-clip: text;
|
|
62
|
+
-webkit-text-fill-color: transparent;
|
|
63
|
+
background-clip: text;
|
|
64
|
+
letter-spacing: -2px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.tier-info .subtitle {
|
|
68
|
+
font-size: 28px;
|
|
69
|
+
color: rgba(255, 255, 255, 0.6);
|
|
70
|
+
margin-top: 8px;
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.stats {
|
|
75
|
+
display: flex;
|
|
76
|
+
gap: 60px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.stat {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
gap: 8px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.stat-value {
|
|
86
|
+
font-size: 56px;
|
|
87
|
+
font-weight: 700;
|
|
88
|
+
color: #fff;
|
|
89
|
+
letter-spacing: -1px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.stat-label {
|
|
93
|
+
font-size: 20px;
|
|
94
|
+
color: rgba(255, 255, 255, 0.5);
|
|
95
|
+
text-transform: uppercase;
|
|
96
|
+
letter-spacing: 2px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.footer {
|
|
100
|
+
display: flex;
|
|
101
|
+
justify-content: space-between;
|
|
102
|
+
align-items: flex-end;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.command {
|
|
106
|
+
background: rgba(255, 255, 255, 0.1);
|
|
107
|
+
padding: 16px 32px;
|
|
108
|
+
border-radius: 12px;
|
|
109
|
+
font-family: 'SF Mono', Monaco, monospace;
|
|
110
|
+
font-size: 24px;
|
|
111
|
+
color: #34c759;
|
|
112
|
+
border: 1px solid rgba(52, 199, 89, 0.3);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.branding {
|
|
116
|
+
text-align: right;
|
|
117
|
+
color: rgba(255, 255, 255, 0.4);
|
|
118
|
+
font-size: 20px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.branding strong {
|
|
122
|
+
color: rgba(255, 255, 255, 0.7);
|
|
123
|
+
font-size: 24px;
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
126
|
+
</head>
|
|
127
|
+
<body>
|
|
128
|
+
<div class="card">
|
|
129
|
+
<div class="header">
|
|
130
|
+
<span class="tier-icon">π</span>
|
|
131
|
+
<div class="tier-info">
|
|
132
|
+
<h1>CHALLENGER</h1>
|
|
133
|
+
<div class="subtitle">World #1 Level AI User</div>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="stats">
|
|
138
|
+
<div class="stat">
|
|
139
|
+
<div class="stat-value">1.5B+</div>
|
|
140
|
+
<div class="stat-label">Tokens / Month</div>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="stat">
|
|
143
|
+
<div class="stat-value">Top 0.001%</div>
|
|
144
|
+
<div class="stat-label">Global Ranking</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<div class="footer">
|
|
149
|
+
<div class="command">npx ccusage-ui</div>
|
|
150
|
+
<div class="branding">
|
|
151
|
+
<strong>Claude Code Usage</strong><br>
|
|
152
|
+
sowonlabs.com
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</body>
|
|
157
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Diamond Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #0a2d3d 50%, #0d4a5a 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(0, 188, 212, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(0, 188, 212, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.header { display: flex; align-items: center; gap: 24px; }
|
|
43
|
+
.tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(0, 188, 212, 0.8)); }
|
|
44
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #00bcd4 0%, #4dd0e1 50%, #b2ebf2 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">π </span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>DIAMOND</h1>
|
|
70
|
+
<div class="subtitle">Top 1% AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">300M+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 1%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Emerald Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #0a2d1a 50%, #0d4a2a 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(0, 229, 160, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(0, 229, 160, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.header { display: flex; align-items: center; gap: 24px; }
|
|
43
|
+
.tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(0, 229, 160, 0.8)); }
|
|
44
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #00e5a0 0%, #50c878 50%, #98fb98 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">π</span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>EMERALD</h1>
|
|
70
|
+
<div class="subtitle">Heavy AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">100M+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 5%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Gold Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #2d2a0a 50%, #4a4510 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(255, 215, 0, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.header { display: flex; align-items: center; gap: 24px; }
|
|
43
|
+
.tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
|
|
44
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #ffd700 0%, #ffec8b 50%, #fff8dc 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">π‘</span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>GOLD</h1>
|
|
70
|
+
<div class="subtitle">Regular AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">30M+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 20%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Grandmaster Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b00 50%, #4a2c00 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(255, 152, 0, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(255, 152, 0, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.header { display: flex; align-items: center; gap: 24px; }
|
|
43
|
+
.tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(255, 152, 0, 0.8)); }
|
|
44
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #ff9800 0%, #ffb74d 50%, #fff176 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">π </span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>GRANDMASTER</h1>
|
|
70
|
+
<div class="subtitle">Top 0.01% AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">1B+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 0.01%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Iron Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #1a1a1a 50%, #2a2a2a 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(100, 100, 100, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(100, 100, 100, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.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
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #646464 0%, #909090 50%, #c0c0c0 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">β¬</span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>IRON</h1>
|
|
70
|
+
<div class="subtitle">New AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value"><5M</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Starter</div>
|
|
80
|
+
<div class="stat-label">Just Getting Started</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Master Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #2d0a0a 50%, #4a1010 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(231, 76, 60, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(231, 76, 60, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.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
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #e74c3c 0%, #ff6b6b 50%, #ffa502 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">π΄</span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>MASTER</h1>
|
|
70
|
+
<div class="subtitle">Top 0.1% AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">500M+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 0.1%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Platinum Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #1a2d1a 50%, #2a4a2a 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(52, 199, 89, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(52, 199, 89, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.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
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #34c759 0%, #7bed9f 50%, #a8e6cf 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">π</span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>PLATINUM</h1>
|
|
70
|
+
<div class="subtitle">Active AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">50M+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 10%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=1200, height=630">
|
|
6
|
+
<title>Silver Card</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
width: 1200px;
|
|
11
|
+
height: 630px;
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #2a2a3a 50%, #3a3a4a 100%);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
.card {
|
|
20
|
+
width: 1100px;
|
|
21
|
+
height: 530px;
|
|
22
|
+
background: rgba(255, 255, 255, 0.03);
|
|
23
|
+
border: 2px solid rgba(192, 192, 192, 0.5);
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
padding: 60px;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
}
|
|
32
|
+
.card::before {
|
|
33
|
+
content: '';
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: -50%;
|
|
36
|
+
right: -20%;
|
|
37
|
+
width: 600px;
|
|
38
|
+
height: 600px;
|
|
39
|
+
background: radial-gradient(circle, rgba(192, 192, 192, 0.15) 0%, transparent 70%);
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
.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
|
+
.tier-info h1 {
|
|
45
|
+
font-size: 64px;
|
|
46
|
+
font-weight: 800;
|
|
47
|
+
background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #ffffff 100%);
|
|
48
|
+
-webkit-background-clip: text;
|
|
49
|
+
-webkit-text-fill-color: transparent;
|
|
50
|
+
background-clip: text;
|
|
51
|
+
letter-spacing: -2px;
|
|
52
|
+
}
|
|
53
|
+
.tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
|
|
54
|
+
.stats { display: flex; gap: 60px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; gap: 8px; }
|
|
56
|
+
.stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
|
|
57
|
+
.stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
|
|
58
|
+
.footer { display: flex; justify-content: space-between; align-items: flex-end; }
|
|
59
|
+
.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); }
|
|
60
|
+
.branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
|
|
61
|
+
.branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div class="card">
|
|
66
|
+
<div class="header">
|
|
67
|
+
<span class="tier-icon">β¬</span>
|
|
68
|
+
<div class="tier-info">
|
|
69
|
+
<h1>SILVER</h1>
|
|
70
|
+
<div class="subtitle">Growing AI User</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stats">
|
|
74
|
+
<div class="stat">
|
|
75
|
+
<div class="stat-value">10M+</div>
|
|
76
|
+
<div class="stat-label">Tokens / Month</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat">
|
|
79
|
+
<div class="stat-value">Top 40%</div>
|
|
80
|
+
<div class="stat-label">Global Ranking</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="footer">
|
|
84
|
+
<div class="command">npx ccusage-ui</div>
|
|
85
|
+
<div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
@@ -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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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" />
|
|
@@ -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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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" />
|
|
@@ -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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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" />
|
|
@@ -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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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" />
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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" />
|
|
@@ -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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
12
|
+
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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/
|
|
19
|
+
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/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" />
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
const puppeteer = require('puppeteer');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
const fs = require('fs');
|
|
4
|
+
|
|
5
|
+
const TIERS = [
|
|
6
|
+
'challenger',
|
|
7
|
+
'grandmaster',
|
|
8
|
+
'master',
|
|
9
|
+
'diamond',
|
|
10
|
+
'emerald',
|
|
11
|
+
'platinum',
|
|
12
|
+
'gold',
|
|
13
|
+
'silver',
|
|
14
|
+
'bronze',
|
|
15
|
+
'iron'
|
|
16
|
+
];
|
|
17
|
+
|
|
18
|
+
async function captureCard(browser, tier) {
|
|
19
|
+
const page = await browser.newPage();
|
|
20
|
+
await page.setViewport({ width: 1200, height: 630 });
|
|
21
|
+
|
|
22
|
+
const htmlPath = path.join(__dirname, `../public/share/card-${tier}.html`);
|
|
23
|
+
const outputPath = path.join(__dirname, `../public/share/images/${tier}.png`);
|
|
24
|
+
|
|
25
|
+
await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0' });
|
|
26
|
+
await page.screenshot({ path: outputPath, type: 'png' });
|
|
27
|
+
|
|
28
|
+
await page.close();
|
|
29
|
+
console.log(`β ${tier}.png`);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
async function main() {
|
|
33
|
+
// Ensure images directory exists
|
|
34
|
+
const imagesDir = path.join(__dirname, '../public/share/images');
|
|
35
|
+
if (!fs.existsSync(imagesDir)) {
|
|
36
|
+
fs.mkdirSync(imagesDir, { recursive: true });
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
console.log('Capturing tier cards...\n');
|
|
40
|
+
|
|
41
|
+
const browser = await puppeteer.launch();
|
|
42
|
+
|
|
43
|
+
for (const tier of TIERS) {
|
|
44
|
+
await captureCard(browser, tier);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
await browser.close();
|
|
48
|
+
|
|
49
|
+
console.log('\nβ
All cards captured!');
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
main().catch(console.error);
|