ccusage-ui 0.1.6 → 0.1.8
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/share/{starter.html → bronze.html} +10 -11
- 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/{pro.html → challenger.html} +10 -11
- package/public/share/{mega.html → diamond.html} +10 -11
- package/public/share/{power.html → emerald.html} +10 -11
- package/public/share/gold.html +27 -0
- package/public/share/grandmaster.html +27 -0
- 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 +27 -0
- package/public/share/master.html +27 -0
- package/public/share/platinum.html +27 -0
- package/public/share/silver.html +27 -0
- package/scripts/capture-cards.js +52 -0
- package/public/share/legendary.html +0 -28
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ccusage-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
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
|
}
|
|
@@ -2,23 +2,22 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
|
-
<title>
|
|
6
|
-
|
|
5
|
+
<title>Bronze - Claude Code Usage</title>
|
|
6
|
+
|
|
7
7
|
<!-- Open Graph / Facebook -->
|
|
8
8
|
<meta property="og:type" content="website">
|
|
9
|
-
<meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/
|
|
10
|
-
<meta property="og:title" content="I'm a
|
|
11
|
-
<meta property="og:description" content="My AI usage pace is
|
|
12
|
-
<meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/
|
|
9
|
+
<meta property="og:url" content="https://sowonlabs.github.io/ccusage-ui/share/bronze.html">
|
|
10
|
+
<meta property="og:title" content="I'm a Bronze AI User">
|
|
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/share/images/bronze.png">
|
|
13
13
|
|
|
14
14
|
<!-- Twitter -->
|
|
15
15
|
<meta property="twitter:card" content="summary_large_image">
|
|
16
|
-
<meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/
|
|
17
|
-
<meta property="twitter:title" content="I'm a
|
|
18
|
-
<meta property="twitter:description" content="My AI usage pace is
|
|
19
|
-
<meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/
|
|
16
|
+
<meta property="twitter:url" content="https://sowonlabs.github.io/ccusage-ui/share/bronze.html">
|
|
17
|
+
<meta property="twitter:title" content="I'm a Bronze AI User">
|
|
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/share/images/bronze.png">
|
|
20
20
|
|
|
21
|
-
<!-- Redirect to main repo -->
|
|
22
21
|
<script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>
|
|
23
22
|
<meta http-equiv="refresh" content="0;url=https://github.com/sowonlabs/ccusage-ui" />
|
|
24
23
|
</head>
|
|
@@ -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>
|