claude-spend 1.0.4 → 1.0.6
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/landing.html +1337 -0
- package/nul +0 -0
- package/package.json +1 -1
- package/screenshots/reddit-coffee.png +0 -0
- package/screenshots/reddit-khalimero.png +0 -0
- package/screenshots/reddit-mod.png +0 -0
- package/screenshots/reddit-traveler.png +0 -0
- package/screenshots-dashboard/01-overview.png +0 -0
- package/screenshots-dashboard/02-insights.png +0 -0
- package/screenshots-dashboard/03-charts.png +0 -0
- package/screenshots-dashboard/04-prompts.png +0 -0
- package/screenshots-dashboard/05-sessions.png +0 -0
- package/src/index.js +1 -1
- package/src/parser.js +50 -2
- package/src/public/index.html +618 -56
- package/src/server.js +9 -2
- package/vercel.json +8 -0
package/landing.html
ADDED
|
@@ -0,0 +1,1337 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Claude Spend - See where your Claude Code usage actually goes</title>
|
|
7
|
+
<meta name="description" content="You hit your Claude Code limit. You don't know why. One command shows you exactly where your usage goes.">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
11
|
+
<style>
|
|
12
|
+
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
13
|
+
|
|
14
|
+
:root {
|
|
15
|
+
--bg: #FFFFFF;
|
|
16
|
+
--bg-soft: #F8FAFC;
|
|
17
|
+
--bg-muted: #F1F5F9;
|
|
18
|
+
|
|
19
|
+
--text: #0F172A;
|
|
20
|
+
--text-sub: #475569;
|
|
21
|
+
--text-muted: #94A3B8;
|
|
22
|
+
|
|
23
|
+
--blue: #3B82F6;
|
|
24
|
+
--blue-dark: #2563EB;
|
|
25
|
+
--blue-wash: rgba(59, 130, 246, 0.08);
|
|
26
|
+
--blue-wash-strong: rgba(59, 130, 246, 0.14);
|
|
27
|
+
|
|
28
|
+
--violet: #7C3AED;
|
|
29
|
+
--violet-wash: rgba(124, 58, 237, 0.08);
|
|
30
|
+
|
|
31
|
+
--emerald: #10B981;
|
|
32
|
+
--emerald-wash: rgba(16, 185, 129, 0.08);
|
|
33
|
+
|
|
34
|
+
--orange: #F97316;
|
|
35
|
+
--orange-wash: rgba(249, 115, 22, 0.08);
|
|
36
|
+
|
|
37
|
+
--rose: #F43F5E;
|
|
38
|
+
--rose-wash: rgba(244, 63, 94, 0.08);
|
|
39
|
+
|
|
40
|
+
--border: #E2E8F0;
|
|
41
|
+
--border-hover: #CBD5E1;
|
|
42
|
+
|
|
43
|
+
--radius: 16px;
|
|
44
|
+
--radius-sm: 10px;
|
|
45
|
+
--radius-xl: 24px;
|
|
46
|
+
|
|
47
|
+
--shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
|
|
48
|
+
--shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
|
|
49
|
+
--shadow-md: 0 4px 12px rgba(15,23,42,0.07);
|
|
50
|
+
--shadow-lg: 0 10px 32px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);
|
|
51
|
+
--shadow-xl: 0 20px 50px rgba(15,23,42,0.1), 0 4px 12px rgba(15,23,42,0.05);
|
|
52
|
+
|
|
53
|
+
--font: 'Manrope', -apple-system, system-ui, sans-serif;
|
|
54
|
+
--mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
|
|
58
|
+
|
|
59
|
+
body {
|
|
60
|
+
font-family: var(--font);
|
|
61
|
+
color: var(--text);
|
|
62
|
+
background: var(--bg);
|
|
63
|
+
line-height: 1.6;
|
|
64
|
+
overflow-x: hidden;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
::selection { background: var(--blue); color: #fff; }
|
|
68
|
+
|
|
69
|
+
/* ======== NAV ======== */
|
|
70
|
+
.nav {
|
|
71
|
+
position: fixed;
|
|
72
|
+
top: 0;
|
|
73
|
+
left: 0;
|
|
74
|
+
right: 0;
|
|
75
|
+
z-index: 100;
|
|
76
|
+
padding: 0 2rem;
|
|
77
|
+
height: 64px;
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: space-between;
|
|
81
|
+
background: rgba(255,255,255,0.85);
|
|
82
|
+
backdrop-filter: blur(16px);
|
|
83
|
+
-webkit-backdrop-filter: blur(16px);
|
|
84
|
+
border-bottom: 1px solid var(--border);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.nav-brand {
|
|
88
|
+
font-weight: 800;
|
|
89
|
+
font-size: 1.05rem;
|
|
90
|
+
color: var(--text);
|
|
91
|
+
letter-spacing: -0.02em;
|
|
92
|
+
display: flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
gap: 8px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.nav-brand-icon {
|
|
98
|
+
width: 28px;
|
|
99
|
+
height: 28px;
|
|
100
|
+
background: linear-gradient(135deg, var(--blue), var(--violet));
|
|
101
|
+
border-radius: 8px;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
color: white;
|
|
106
|
+
font-size: 0.75rem;
|
|
107
|
+
font-weight: 800;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.nav-links {
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
gap: 2rem;
|
|
114
|
+
list-style: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.nav-links a {
|
|
118
|
+
font-size: 0.85rem;
|
|
119
|
+
font-weight: 600;
|
|
120
|
+
color: var(--text-sub);
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
transition: color 0.2s;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.nav-links a:hover { color: var(--text); }
|
|
126
|
+
|
|
127
|
+
.nav-cta {
|
|
128
|
+
display: inline-flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
gap: 6px;
|
|
131
|
+
padding: 8px 16px;
|
|
132
|
+
background: var(--text);
|
|
133
|
+
color: #fff !important;
|
|
134
|
+
border-radius: var(--radius-sm);
|
|
135
|
+
font-size: 0.8rem !important;
|
|
136
|
+
font-weight: 600 !important;
|
|
137
|
+
transition: all 0.2s;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.nav-cta:hover {
|
|
141
|
+
background: #1E293B !important;
|
|
142
|
+
transform: translateY(-1px);
|
|
143
|
+
box-shadow: var(--shadow-sm);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.nav-cta svg {
|
|
147
|
+
width: 14px;
|
|
148
|
+
height: 14px;
|
|
149
|
+
fill: currentColor;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* ======== HERO ======== */
|
|
153
|
+
.hero {
|
|
154
|
+
position: relative;
|
|
155
|
+
min-height: 100vh;
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-direction: column;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
align-items: center;
|
|
160
|
+
text-align: center;
|
|
161
|
+
padding: 8rem 2rem 5rem;
|
|
162
|
+
overflow: hidden;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Mesh gradient */
|
|
166
|
+
.hero-bg {
|
|
167
|
+
position: absolute;
|
|
168
|
+
inset: 0;
|
|
169
|
+
pointer-events: none;
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
z-index: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.hero-bg .orb {
|
|
175
|
+
position: absolute;
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
filter: blur(100px);
|
|
178
|
+
animation: orbDrift 25s ease-in-out infinite;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.orb-1 {
|
|
182
|
+
width: 600px; height: 600px;
|
|
183
|
+
background: rgba(59, 130, 246, 0.12);
|
|
184
|
+
top: -15%; right: -10%;
|
|
185
|
+
animation-delay: 0s;
|
|
186
|
+
}
|
|
187
|
+
.orb-2 {
|
|
188
|
+
width: 500px; height: 500px;
|
|
189
|
+
background: rgba(124, 58, 237, 0.08);
|
|
190
|
+
bottom: -10%; left: -10%;
|
|
191
|
+
animation-delay: -8s;
|
|
192
|
+
}
|
|
193
|
+
.orb-3 {
|
|
194
|
+
width: 400px; height: 400px;
|
|
195
|
+
background: rgba(16, 185, 129, 0.07);
|
|
196
|
+
top: 40%; left: 55%;
|
|
197
|
+
animation-delay: -16s;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
@keyframes orbDrift {
|
|
201
|
+
0%, 100% { transform: translate(0,0) scale(1); }
|
|
202
|
+
33% { transform: translate(25px,-15px) scale(1.04); }
|
|
203
|
+
66% { transform: translate(-15px,20px) scale(0.96); }
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.hero-content {
|
|
207
|
+
position: relative;
|
|
208
|
+
z-index: 1;
|
|
209
|
+
max-width: 680px;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* Badge */
|
|
213
|
+
.badge {
|
|
214
|
+
display: inline-flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
gap: 8px;
|
|
217
|
+
padding: 5px 14px 5px 7px;
|
|
218
|
+
background: var(--bg);
|
|
219
|
+
border: 1px solid var(--border);
|
|
220
|
+
border-radius: 100px;
|
|
221
|
+
font-size: 0.75rem;
|
|
222
|
+
font-weight: 700;
|
|
223
|
+
color: var(--text-sub);
|
|
224
|
+
margin-bottom: 2rem;
|
|
225
|
+
box-shadow: var(--shadow-xs);
|
|
226
|
+
opacity: 0; animation: slideUp .6s cubic-bezier(.16,1,.3,1) .1s forwards;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.badge-dot {
|
|
230
|
+
width: 8px; height: 8px;
|
|
231
|
+
border-radius: 50%;
|
|
232
|
+
background: var(--emerald);
|
|
233
|
+
box-shadow: 0 0 0 3px var(--emerald-wash);
|
|
234
|
+
animation: dotPulse 2.5s ease-in-out infinite;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@keyframes dotPulse {
|
|
238
|
+
0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
|
|
239
|
+
50% { box-shadow: 0 0 0 7px rgba(16,185,129,0.04); }
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.hero h1 {
|
|
243
|
+
font-weight: 800;
|
|
244
|
+
font-size: clamp(2.4rem, 5.5vw, 3.8rem);
|
|
245
|
+
line-height: 1.08;
|
|
246
|
+
letter-spacing: -0.035em;
|
|
247
|
+
color: var(--text);
|
|
248
|
+
margin-bottom: 0.4em;
|
|
249
|
+
opacity: 0; animation: slideUp .7s cubic-bezier(.16,1,.3,1) .2s forwards;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* Rotating words */
|
|
253
|
+
.rotate-wrap {
|
|
254
|
+
height: clamp(1.8rem, 4vw, 2.8rem);
|
|
255
|
+
overflow: hidden;
|
|
256
|
+
position: relative;
|
|
257
|
+
margin-bottom: 1.5rem;
|
|
258
|
+
opacity: 0; animation: slideUp .7s cubic-bezier(.16,1,.3,1) .35s forwards;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.rotate-word {
|
|
262
|
+
font-weight: 600;
|
|
263
|
+
font-size: clamp(1.2rem, 3vw, 2rem);
|
|
264
|
+
position: absolute;
|
|
265
|
+
width: 100%;
|
|
266
|
+
left: 0; top: 0;
|
|
267
|
+
opacity: 0;
|
|
268
|
+
transform: translateY(100%);
|
|
269
|
+
transition: opacity .45s cubic-bezier(.16,1,.3,1),
|
|
270
|
+
transform .45s cubic-bezier(.16,1,.3,1);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.rotate-word--blue { color: var(--blue); }
|
|
274
|
+
.rotate-word--violet { color: var(--violet); }
|
|
275
|
+
.rotate-word--rose { color: var(--rose); }
|
|
276
|
+
|
|
277
|
+
.rotate-word.active { opacity: 1; transform: translateY(0); }
|
|
278
|
+
.rotate-word.exit { opacity: 0; transform: translateY(-100%); }
|
|
279
|
+
|
|
280
|
+
.hero-sub {
|
|
281
|
+
font-size: clamp(.95rem, 1.6vw, 1.1rem);
|
|
282
|
+
font-weight: 500;
|
|
283
|
+
color: var(--text-sub);
|
|
284
|
+
max-width: 480px;
|
|
285
|
+
margin: 0 auto 2.5rem;
|
|
286
|
+
line-height: 1.7;
|
|
287
|
+
opacity: 0; animation: slideUp .7s cubic-bezier(.16,1,.3,1) .5s forwards;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
/* Hero actions */
|
|
291
|
+
.hero-actions {
|
|
292
|
+
display: flex;
|
|
293
|
+
align-items: center;
|
|
294
|
+
justify-content: center;
|
|
295
|
+
gap: 12px;
|
|
296
|
+
flex-wrap: wrap;
|
|
297
|
+
margin-bottom: 1.25rem;
|
|
298
|
+
opacity: 0; animation: slideUp .7s cubic-bezier(.16,1,.3,1) .65s forwards;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.btn {
|
|
302
|
+
display: inline-flex;
|
|
303
|
+
align-items: center;
|
|
304
|
+
gap: 8px;
|
|
305
|
+
font-family: var(--font);
|
|
306
|
+
font-weight: 700;
|
|
307
|
+
font-size: .88rem;
|
|
308
|
+
padding: 12px 22px;
|
|
309
|
+
border-radius: var(--radius-sm);
|
|
310
|
+
border: none;
|
|
311
|
+
cursor: pointer;
|
|
312
|
+
transition: all .2s ease;
|
|
313
|
+
text-decoration: none;
|
|
314
|
+
line-height: 1.4;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
|
|
318
|
+
|
|
319
|
+
.btn-primary {
|
|
320
|
+
background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
|
|
321
|
+
color: #fff;
|
|
322
|
+
box-shadow: 0 2px 10px rgba(59,130,246,0.3);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.btn-primary:hover {
|
|
326
|
+
transform: translateY(-2px);
|
|
327
|
+
box-shadow: 0 6px 20px rgba(59,130,246,0.35);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.btn-outline {
|
|
331
|
+
background: var(--bg);
|
|
332
|
+
color: var(--text);
|
|
333
|
+
border: 1px solid var(--border);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.btn-outline:hover {
|
|
337
|
+
background: var(--bg-soft);
|
|
338
|
+
border-color: var(--border-hover);
|
|
339
|
+
transform: translateY(-1px);
|
|
340
|
+
box-shadow: var(--shadow-sm);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* Command box */
|
|
344
|
+
.hero-cmd {
|
|
345
|
+
opacity: 0; animation: slideUp .7s cubic-bezier(.16,1,.3,1) .8s forwards;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.cmd-box {
|
|
349
|
+
display: inline-flex;
|
|
350
|
+
align-items: center;
|
|
351
|
+
gap: 10px;
|
|
352
|
+
padding: 10px 12px 10px 20px;
|
|
353
|
+
background: var(--bg-soft);
|
|
354
|
+
border: 1px solid var(--border);
|
|
355
|
+
border-radius: var(--radius-sm);
|
|
356
|
+
cursor: pointer;
|
|
357
|
+
transition: all .2s ease;
|
|
358
|
+
user-select: none;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.cmd-box:hover {
|
|
362
|
+
border-color: var(--border-hover);
|
|
363
|
+
background: var(--bg-muted);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.cmd-box code {
|
|
367
|
+
font-family: var(--mono);
|
|
368
|
+
font-size: .85rem;
|
|
369
|
+
font-weight: 600;
|
|
370
|
+
color: var(--text);
|
|
371
|
+
letter-spacing: -.01em;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.cmd-copy {
|
|
375
|
+
display: flex;
|
|
376
|
+
align-items: center;
|
|
377
|
+
justify-content: center;
|
|
378
|
+
width: 30px; height: 30px;
|
|
379
|
+
border-radius: 7px;
|
|
380
|
+
background: var(--bg);
|
|
381
|
+
border: 1px solid var(--border);
|
|
382
|
+
color: var(--text-muted);
|
|
383
|
+
transition: all .2s;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.cmd-copy:hover {
|
|
387
|
+
color: var(--blue);
|
|
388
|
+
border-color: var(--blue);
|
|
389
|
+
background: var(--blue-wash);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.cmd-copy svg { width: 14px; height: 14px; }
|
|
393
|
+
|
|
394
|
+
/* Scroll cue */
|
|
395
|
+
.scroll-cue {
|
|
396
|
+
position: absolute;
|
|
397
|
+
bottom: 2.5rem;
|
|
398
|
+
left: 50%;
|
|
399
|
+
transform: translateX(-50%);
|
|
400
|
+
display: flex;
|
|
401
|
+
flex-direction: column;
|
|
402
|
+
align-items: center;
|
|
403
|
+
gap: 5px;
|
|
404
|
+
opacity: 0;
|
|
405
|
+
animation: fadeIn .5s ease 1.8s forwards;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.scroll-cue span {
|
|
409
|
+
font-size: .6rem;
|
|
410
|
+
font-weight: 700;
|
|
411
|
+
letter-spacing: .15em;
|
|
412
|
+
text-transform: uppercase;
|
|
413
|
+
color: var(--text-muted);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.scroll-cue svg {
|
|
417
|
+
width: 16px; height: 16px;
|
|
418
|
+
color: var(--text-muted);
|
|
419
|
+
animation: bounce 2s ease-in-out infinite;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
@keyframes bounce {
|
|
423
|
+
0%,100% { transform: translateY(0); }
|
|
424
|
+
50% { transform: translateY(5px); }
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* ======== SHARED SECTION ======== */
|
|
428
|
+
.section {
|
|
429
|
+
padding: 5.5rem 2rem;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.section--soft { background: var(--bg-soft); }
|
|
433
|
+
|
|
434
|
+
.section-inner {
|
|
435
|
+
max-width: 1000px;
|
|
436
|
+
margin: 0 auto;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.section-eyebrow {
|
|
440
|
+
display: inline-flex;
|
|
441
|
+
align-items: center;
|
|
442
|
+
gap: 8px;
|
|
443
|
+
font-size: .7rem;
|
|
444
|
+
font-weight: 800;
|
|
445
|
+
letter-spacing: .1em;
|
|
446
|
+
text-transform: uppercase;
|
|
447
|
+
margin-bottom: .75rem;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.section-eyebrow--blue { color: var(--blue); }
|
|
451
|
+
.section-eyebrow--violet { color: var(--violet); }
|
|
452
|
+
.section-eyebrow--emerald { color: var(--emerald); }
|
|
453
|
+
.section-eyebrow--orange { color: var(--orange); }
|
|
454
|
+
|
|
455
|
+
.section-eyebrow::before {
|
|
456
|
+
content: '';
|
|
457
|
+
width: 20px; height: 2.5px;
|
|
458
|
+
border-radius: 2px;
|
|
459
|
+
background: currentColor;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.section-title {
|
|
463
|
+
font-weight: 800;
|
|
464
|
+
font-size: clamp(1.65rem, 3.2vw, 2.35rem);
|
|
465
|
+
letter-spacing: -.03em;
|
|
466
|
+
line-height: 1.15;
|
|
467
|
+
color: var(--text);
|
|
468
|
+
margin-bottom: .65rem;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.section-desc {
|
|
472
|
+
font-size: 1rem;
|
|
473
|
+
font-weight: 500;
|
|
474
|
+
color: var(--text-sub);
|
|
475
|
+
max-width: 520px;
|
|
476
|
+
line-height: 1.7;
|
|
477
|
+
margin-bottom: 2.75rem;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
/* ======== HOW IT WORKS ======== */
|
|
481
|
+
.steps-grid {
|
|
482
|
+
display: grid;
|
|
483
|
+
grid-template-columns: repeat(3, 1fr);
|
|
484
|
+
gap: 24px;
|
|
485
|
+
counter-reset: step;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.step-card {
|
|
489
|
+
background: var(--bg);
|
|
490
|
+
border: 1px solid var(--border);
|
|
491
|
+
border-radius: var(--radius-xl);
|
|
492
|
+
padding: 2.25rem 2rem 2rem;
|
|
493
|
+
position: relative;
|
|
494
|
+
transition: all .3s cubic-bezier(.16,1,.3,1);
|
|
495
|
+
counter-increment: step;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.step-card:hover {
|
|
499
|
+
transform: translateY(-5px);
|
|
500
|
+
box-shadow: var(--shadow-lg);
|
|
501
|
+
border-color: transparent;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.step-num {
|
|
505
|
+
display: flex;
|
|
506
|
+
align-items: center;
|
|
507
|
+
justify-content: center;
|
|
508
|
+
width: 40px; height: 40px;
|
|
509
|
+
border-radius: 12px;
|
|
510
|
+
font-weight: 800;
|
|
511
|
+
font-size: .95rem;
|
|
512
|
+
margin-bottom: 1.25rem;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.step-num--blue { background: var(--blue-wash-strong); color: var(--blue); }
|
|
516
|
+
.step-num--violet { background: var(--violet-wash); color: var(--violet); }
|
|
517
|
+
.step-num--emerald { background: var(--emerald-wash); color: var(--emerald); }
|
|
518
|
+
|
|
519
|
+
.step-title {
|
|
520
|
+
font-weight: 700;
|
|
521
|
+
font-size: 1.05rem;
|
|
522
|
+
color: var(--text);
|
|
523
|
+
margin-bottom: .4rem;
|
|
524
|
+
letter-spacing: -.01em;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.step-desc {
|
|
528
|
+
font-size: .88rem;
|
|
529
|
+
font-weight: 500;
|
|
530
|
+
color: var(--text-sub);
|
|
531
|
+
line-height: 1.65;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.step-desc code {
|
|
535
|
+
font-family: var(--mono);
|
|
536
|
+
font-size: .78rem;
|
|
537
|
+
font-weight: 600;
|
|
538
|
+
padding: 3px 8px;
|
|
539
|
+
border-radius: 6px;
|
|
540
|
+
background: var(--bg-muted);
|
|
541
|
+
color: var(--text);
|
|
542
|
+
border: 1px solid var(--border);
|
|
543
|
+
white-space: nowrap;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
.step-note {
|
|
547
|
+
margin-top: .75rem;
|
|
548
|
+
font-size: .78rem;
|
|
549
|
+
font-weight: 600;
|
|
550
|
+
color: var(--text-muted);
|
|
551
|
+
display: flex;
|
|
552
|
+
align-items: center;
|
|
553
|
+
gap: 5px;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.step-note svg {
|
|
557
|
+
width: 14px; height: 14px;
|
|
558
|
+
color: var(--emerald);
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
/* (preview section removed - replaced by screenshot slider) */
|
|
562
|
+
|
|
563
|
+
/* ======== FEATURES ======== */
|
|
564
|
+
.features-grid {
|
|
565
|
+
display: grid;
|
|
566
|
+
grid-template-columns: repeat(3, 1fr);
|
|
567
|
+
gap: 20px;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.feature-card {
|
|
571
|
+
background: var(--bg);
|
|
572
|
+
border: 1px solid var(--border);
|
|
573
|
+
border-radius: var(--radius);
|
|
574
|
+
padding: 2rem 1.75rem;
|
|
575
|
+
transition: all .3s cubic-bezier(.16,1,.3,1);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.feature-card:hover {
|
|
579
|
+
transform: translateY(-4px);
|
|
580
|
+
box-shadow: var(--shadow-lg);
|
|
581
|
+
border-color: transparent;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.feature-icon {
|
|
585
|
+
width: 42px; height: 42px;
|
|
586
|
+
border-radius: 12px;
|
|
587
|
+
display: flex;
|
|
588
|
+
align-items: center;
|
|
589
|
+
justify-content: center;
|
|
590
|
+
margin-bottom: 1.25rem;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.feature-icon svg {
|
|
594
|
+
width: 20px; height: 20px;
|
|
595
|
+
stroke-width: 2;
|
|
596
|
+
stroke-linecap: round;
|
|
597
|
+
stroke-linejoin: round;
|
|
598
|
+
fill: none;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.fi-blue { background: var(--blue-wash); }
|
|
602
|
+
.fi-blue svg { stroke: var(--blue); }
|
|
603
|
+
.fi-violet { background: var(--violet-wash); }
|
|
604
|
+
.fi-violet svg { stroke: var(--violet); }
|
|
605
|
+
.fi-orange { background: var(--orange-wash); }
|
|
606
|
+
.fi-orange svg { stroke: var(--orange); }
|
|
607
|
+
|
|
608
|
+
.feature-title {
|
|
609
|
+
font-size: .95rem;
|
|
610
|
+
font-weight: 700;
|
|
611
|
+
color: var(--text);
|
|
612
|
+
margin-bottom: .35rem;
|
|
613
|
+
letter-spacing: -.01em;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.feature-desc {
|
|
617
|
+
font-size: .85rem;
|
|
618
|
+
font-weight: 500;
|
|
619
|
+
color: var(--text-sub);
|
|
620
|
+
line-height: 1.65;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
/* ======== SCREENSHOT SLIDER ======== */
|
|
624
|
+
.screenshot-slider {
|
|
625
|
+
position: relative;
|
|
626
|
+
max-width: 900px;
|
|
627
|
+
margin: 0 auto;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.screenshot-track {
|
|
631
|
+
display: flex;
|
|
632
|
+
overflow-x: auto;
|
|
633
|
+
scroll-snap-type: x mandatory;
|
|
634
|
+
-webkit-overflow-scrolling: touch;
|
|
635
|
+
gap: 24px;
|
|
636
|
+
padding: 0 0 1.5rem;
|
|
637
|
+
scrollbar-width: none;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.screenshot-track::-webkit-scrollbar { display: none; }
|
|
641
|
+
|
|
642
|
+
.screenshot-slide {
|
|
643
|
+
flex: 0 0 100%;
|
|
644
|
+
scroll-snap-align: center;
|
|
645
|
+
border-radius: var(--radius-xl);
|
|
646
|
+
overflow: hidden;
|
|
647
|
+
border: 1px solid var(--border);
|
|
648
|
+
box-shadow: var(--shadow-lg);
|
|
649
|
+
background: var(--bg);
|
|
650
|
+
line-height: 0;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.screenshot-slide img {
|
|
654
|
+
width: 100%;
|
|
655
|
+
height: auto;
|
|
656
|
+
display: block;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
/* Dots */
|
|
660
|
+
.screenshot-dots {
|
|
661
|
+
display: flex;
|
|
662
|
+
justify-content: center;
|
|
663
|
+
gap: 8px;
|
|
664
|
+
margin-top: .5rem;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.screenshot-dot {
|
|
668
|
+
width: 8px;
|
|
669
|
+
height: 8px;
|
|
670
|
+
border-radius: 50%;
|
|
671
|
+
background: var(--border);
|
|
672
|
+
border: none;
|
|
673
|
+
padding: 0;
|
|
674
|
+
cursor: pointer;
|
|
675
|
+
transition: all .3s ease;
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
.screenshot-dot.active {
|
|
679
|
+
background: var(--blue);
|
|
680
|
+
width: 24px;
|
|
681
|
+
border-radius: 4px;
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
/* Arrow buttons */
|
|
685
|
+
.screenshot-arrow {
|
|
686
|
+
position: absolute;
|
|
687
|
+
top: calc(50% - 1.5rem);
|
|
688
|
+
transform: translateY(-50%);
|
|
689
|
+
width: 40px;
|
|
690
|
+
height: 40px;
|
|
691
|
+
border-radius: 50%;
|
|
692
|
+
background: var(--bg);
|
|
693
|
+
border: 1px solid var(--border);
|
|
694
|
+
box-shadow: var(--shadow-md);
|
|
695
|
+
display: flex;
|
|
696
|
+
align-items: center;
|
|
697
|
+
justify-content: center;
|
|
698
|
+
cursor: pointer;
|
|
699
|
+
z-index: 2;
|
|
700
|
+
transition: all .2s ease;
|
|
701
|
+
color: var(--text-sub);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
.screenshot-arrow:hover {
|
|
705
|
+
background: var(--bg-soft);
|
|
706
|
+
border-color: var(--border-hover);
|
|
707
|
+
box-shadow: var(--shadow-lg);
|
|
708
|
+
color: var(--text);
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.screenshot-arrow svg {
|
|
712
|
+
width: 18px;
|
|
713
|
+
height: 18px;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.screenshot-arrow--prev { left: -20px; }
|
|
717
|
+
.screenshot-arrow--next { right: -20px; }
|
|
718
|
+
|
|
719
|
+
@media (max-width: 960px) {
|
|
720
|
+
.screenshot-arrow--prev { left: 8px; }
|
|
721
|
+
.screenshot-arrow--next { right: 8px; }
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
@media (max-width: 480px) {
|
|
725
|
+
.screenshot-arrow { display: none; }
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
/* ======== TESTIMONIALS ======== */
|
|
729
|
+
.testimonials-grid {
|
|
730
|
+
display: flex;
|
|
731
|
+
flex-direction: column;
|
|
732
|
+
gap: 20px;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.testimonial-row {
|
|
736
|
+
display: grid;
|
|
737
|
+
grid-template-columns: repeat(2, 1fr);
|
|
738
|
+
gap: 20px;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.testimonial-img-wrap {
|
|
742
|
+
border-radius: var(--radius);
|
|
743
|
+
border: 1px solid var(--border);
|
|
744
|
+
overflow: hidden;
|
|
745
|
+
background: var(--bg);
|
|
746
|
+
transition: all .3s cubic-bezier(.16,1,.3,1);
|
|
747
|
+
box-shadow: var(--shadow-xs);
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
.testimonial-img-wrap:hover {
|
|
751
|
+
transform: translateY(-3px);
|
|
752
|
+
box-shadow: var(--shadow-lg);
|
|
753
|
+
border-color: transparent;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.testimonial-img-wrap--featured {
|
|
757
|
+
border-color: rgba(59,130,246,0.15);
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
.testimonial-img-wrap--featured:hover {
|
|
761
|
+
border-color: rgba(59,130,246,0.25);
|
|
762
|
+
}
|
|
763
|
+
|
|
764
|
+
.testimonial-img-wrap img {
|
|
765
|
+
width: 100%;
|
|
766
|
+
height: auto;
|
|
767
|
+
display: block;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
@media (max-width: 768px) {
|
|
771
|
+
.testimonial-row {
|
|
772
|
+
grid-template-columns: 1fr;
|
|
773
|
+
}
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
/* ======== STORY ======== */
|
|
777
|
+
.story-card {
|
|
778
|
+
max-width: 560px;
|
|
779
|
+
margin: 0 auto;
|
|
780
|
+
text-align: center;
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.story-avatar {
|
|
784
|
+
width: 52px; height: 52px;
|
|
785
|
+
border-radius: 50%;
|
|
786
|
+
background: linear-gradient(135deg, var(--blue), var(--violet));
|
|
787
|
+
display: flex;
|
|
788
|
+
align-items: center;
|
|
789
|
+
justify-content: center;
|
|
790
|
+
margin: 0 auto 1.5rem;
|
|
791
|
+
color: #fff;
|
|
792
|
+
font-weight: 800;
|
|
793
|
+
font-size: 1rem;
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
.story-text {
|
|
797
|
+
font-size: 1.05rem;
|
|
798
|
+
font-weight: 500;
|
|
799
|
+
color: var(--text-sub);
|
|
800
|
+
line-height: 1.8;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
.story-text strong {
|
|
804
|
+
color: var(--text);
|
|
805
|
+
font-weight: 700;
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
/* ======== TRUST ======== */
|
|
809
|
+
.trust-row {
|
|
810
|
+
display: flex;
|
|
811
|
+
justify-content: center;
|
|
812
|
+
gap: 2.5rem;
|
|
813
|
+
flex-wrap: wrap;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
.trust-item {
|
|
817
|
+
display: flex;
|
|
818
|
+
align-items: center;
|
|
819
|
+
gap: 7px;
|
|
820
|
+
font-size: .82rem;
|
|
821
|
+
font-weight: 600;
|
|
822
|
+
color: var(--text-sub);
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
.trust-item svg {
|
|
826
|
+
width: 16px; height: 16px;
|
|
827
|
+
color: var(--emerald);
|
|
828
|
+
flex-shrink: 0;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
/* ======== CTA ======== */
|
|
832
|
+
.cta-section {
|
|
833
|
+
padding: 5rem 2rem 3rem;
|
|
834
|
+
text-align: center;
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
.cta-inner {
|
|
838
|
+
max-width: 520px;
|
|
839
|
+
margin: 0 auto;
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
.cta-title {
|
|
843
|
+
font-weight: 800;
|
|
844
|
+
font-size: clamp(1.65rem, 3.2vw, 2.35rem);
|
|
845
|
+
letter-spacing: -.03em;
|
|
846
|
+
margin-bottom: .5rem;
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
.cta-desc {
|
|
850
|
+
font-size: 1rem;
|
|
851
|
+
font-weight: 500;
|
|
852
|
+
color: var(--text-sub);
|
|
853
|
+
margin-bottom: 2rem;
|
|
854
|
+
line-height: 1.7;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
.cta-cmd-wrap {
|
|
858
|
+
margin-bottom: 2rem;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
.cta-links {
|
|
862
|
+
display: flex;
|
|
863
|
+
justify-content: center;
|
|
864
|
+
align-items: center;
|
|
865
|
+
gap: 1.75rem;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
.cta-link {
|
|
869
|
+
display: flex;
|
|
870
|
+
align-items: center;
|
|
871
|
+
gap: 6px;
|
|
872
|
+
font-size: .82rem;
|
|
873
|
+
font-weight: 600;
|
|
874
|
+
color: var(--text-sub);
|
|
875
|
+
text-decoration: none;
|
|
876
|
+
transition: color .2s;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
.cta-link:hover { color: var(--blue); }
|
|
880
|
+
|
|
881
|
+
.cta-link svg { width: 16px; height: 16px; }
|
|
882
|
+
|
|
883
|
+
/* ======== FOOTER ======== */
|
|
884
|
+
.footer {
|
|
885
|
+
border-top: 1px solid var(--border);
|
|
886
|
+
padding: 1.75rem 2rem;
|
|
887
|
+
text-align: center;
|
|
888
|
+
font-size: .78rem;
|
|
889
|
+
font-weight: 500;
|
|
890
|
+
color: var(--text-muted);
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
.footer a {
|
|
894
|
+
color: var(--text-sub);
|
|
895
|
+
text-decoration: none;
|
|
896
|
+
transition: color .2s;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.footer a:hover { color: var(--blue); }
|
|
900
|
+
|
|
901
|
+
/* ======== ANIMATIONS ======== */
|
|
902
|
+
@keyframes slideUp {
|
|
903
|
+
from { opacity: 0; transform: translateY(28px); }
|
|
904
|
+
to { opacity: 1; transform: translateY(0); }
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
@keyframes fadeIn {
|
|
908
|
+
from { opacity: 0; }
|
|
909
|
+
to { opacity: 1; }
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
.reveal {
|
|
913
|
+
opacity: 0;
|
|
914
|
+
transform: translateY(28px);
|
|
915
|
+
transition: opacity .7s cubic-bezier(.16,1,.3,1),
|
|
916
|
+
transform .7s cubic-bezier(.16,1,.3,1);
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
920
|
+
.rd1 { transition-delay: .06s; }
|
|
921
|
+
.rd2 { transition-delay: .12s; }
|
|
922
|
+
.rd3 { transition-delay: .18s; }
|
|
923
|
+
|
|
924
|
+
/* ======== RESPONSIVE ======== */
|
|
925
|
+
@media (max-width: 768px) {
|
|
926
|
+
.steps-grid, .features-grid {
|
|
927
|
+
grid-template-columns: 1fr;
|
|
928
|
+
gap: 16px;
|
|
929
|
+
}
|
|
930
|
+
.nav-links { display: none; }
|
|
931
|
+
.section { padding: 4rem 1.5rem; }
|
|
932
|
+
.trust-row { gap: 1.25rem; }
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
@media (max-width: 480px) {
|
|
936
|
+
.hero { padding: 7rem 1.25rem 4rem; }
|
|
937
|
+
.hero-actions { flex-direction: column; width: 100%; }
|
|
938
|
+
.btn { width: 100%; justify-content: center; }
|
|
939
|
+
.scroll-cue { display: none; }
|
|
940
|
+
}
|
|
941
|
+
</style>
|
|
942
|
+
</head>
|
|
943
|
+
<body>
|
|
944
|
+
|
|
945
|
+
<!-- Top Banner -->
|
|
946
|
+
<div style="position:fixed;top:0;left:0;right:0;z-index:200;background:#0F172A;padding:8px 2rem;text-align:center;font-size:.8rem;font-weight:600;color:rgba(255,255,255,0.9);letter-spacing:-0.01em;">
|
|
947
|
+
200+ users and counting. <a href="https://www.linkedin.com/posts/writetoaniketparihar_i-keep-hitting-the-claude-code-usage-limit-activity-7431248823735279617-rRZO" target="_blank" rel="noopener" style="color:#60A5FA;font-weight:700;text-decoration:none;margin-left:4px;">Read the story →</a>
|
|
948
|
+
</div>
|
|
949
|
+
|
|
950
|
+
<!-- Nav -->
|
|
951
|
+
<nav class="nav" style="top:36px;">
|
|
952
|
+
<div class="nav-brand">
|
|
953
|
+
<div class="nav-brand-icon">CS</div>
|
|
954
|
+
claude-spend
|
|
955
|
+
</div>
|
|
956
|
+
<ul class="nav-links">
|
|
957
|
+
<li><a href="#how-it-works">How It Works</a></li>
|
|
958
|
+
<li><a href="#features">Features</a></li>
|
|
959
|
+
<li>
|
|
960
|
+
<a href="https://github.com/writetoaniketparihar-collab/claude-spend" target="_blank" rel="noopener" class="nav-cta">
|
|
961
|
+
<svg viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
962
|
+
GitHub
|
|
963
|
+
</a>
|
|
964
|
+
</li>
|
|
965
|
+
</ul>
|
|
966
|
+
</nav>
|
|
967
|
+
|
|
968
|
+
<!-- Hero -->
|
|
969
|
+
<section class="hero">
|
|
970
|
+
<div class="hero-bg" aria-hidden="true">
|
|
971
|
+
<div class="orb orb-1"></div>
|
|
972
|
+
<div class="orb orb-2"></div>
|
|
973
|
+
<div class="orb orb-3"></div>
|
|
974
|
+
</div>
|
|
975
|
+
|
|
976
|
+
<div class="hero-content">
|
|
977
|
+
<div class="badge">
|
|
978
|
+
<span class="badge-dot"></span>
|
|
979
|
+
Open Source · Free Forever
|
|
980
|
+
</div>
|
|
981
|
+
|
|
982
|
+
<h1>You hit your Claude Code limit.</h1>
|
|
983
|
+
|
|
984
|
+
<div class="rotate-wrap" aria-live="polite">
|
|
985
|
+
<span class="rotate-word rotate-word--blue active">You don't know why.</span>
|
|
986
|
+
<span class="rotate-word rotate-word--violet">Again.</span>
|
|
987
|
+
<span class="rotate-word rotate-word--rose">Every single day.</span>
|
|
988
|
+
</div>
|
|
989
|
+
|
|
990
|
+
<p class="hero-sub">
|
|
991
|
+
Type one terminal command. Get a full breakdown of your usage in the browser.
|
|
992
|
+
</p>
|
|
993
|
+
|
|
994
|
+
<div class="hero-actions">
|
|
995
|
+
<div class="cmd-box" onclick="copyCmd(this)">
|
|
996
|
+
<code>npx claude-spend</code>
|
|
997
|
+
<div class="cmd-copy">
|
|
998
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|
999
|
+
</div>
|
|
1000
|
+
</div>
|
|
1001
|
+
<a href="https://github.com/writetoaniketparihar-collab/claude-spend" target="_blank" rel="noopener" class="btn btn-outline">
|
|
1002
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
1003
|
+
View on GitHub
|
|
1004
|
+
</a>
|
|
1005
|
+
</div>
|
|
1006
|
+
</div>
|
|
1007
|
+
|
|
1008
|
+
<div class="scroll-cue">
|
|
1009
|
+
<span>Learn more</span>
|
|
1010
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
|
|
1011
|
+
</div>
|
|
1012
|
+
</section>
|
|
1013
|
+
|
|
1014
|
+
<!-- Dashboard Preview -->
|
|
1015
|
+
<section class="section" id="dashboard-preview">
|
|
1016
|
+
<div class="section-inner">
|
|
1017
|
+
<div class="reveal" style="text-align:center; margin-bottom: 3rem;">
|
|
1018
|
+
<div class="section-eyebrow section-eyebrow--violet" style="justify-content:center;">Dashboard Preview</div>
|
|
1019
|
+
<h2 class="section-title" style="text-align:center;">Everything Claude Code<br>doesn't tell you.</h2>
|
|
1020
|
+
</div>
|
|
1021
|
+
|
|
1022
|
+
<div class="screenshot-slider reveal">
|
|
1023
|
+
<button class="screenshot-arrow screenshot-arrow--prev" onclick="slideScreenshot(-1)" aria-label="Previous screenshot">
|
|
1024
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
|
1025
|
+
</button>
|
|
1026
|
+
<button class="screenshot-arrow screenshot-arrow--next" onclick="slideScreenshot(1)" aria-label="Next screenshot">
|
|
1027
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
|
1028
|
+
</button>
|
|
1029
|
+
|
|
1030
|
+
<div class="screenshot-track" id="screenshotTrack">
|
|
1031
|
+
<div class="screenshot-slide">
|
|
1032
|
+
<img src="screenshots-dashboard/01-overview.png" alt="Dashboard overview with total usage stats and insights" loading="lazy">
|
|
1033
|
+
</div>
|
|
1034
|
+
<div class="screenshot-slide">
|
|
1035
|
+
<img src="screenshots-dashboard/02-insights.png" alt="Personalized insights about your usage patterns" loading="lazy">
|
|
1036
|
+
</div>
|
|
1037
|
+
<div class="screenshot-slide">
|
|
1038
|
+
<img src="screenshots-dashboard/03-charts.png" alt="Daily token chart and model breakdown" loading="lazy">
|
|
1039
|
+
</div>
|
|
1040
|
+
<div class="screenshot-slide">
|
|
1041
|
+
<img src="screenshots-dashboard/05-sessions.png" alt="All sessions table with search and filters" loading="lazy">
|
|
1042
|
+
</div>
|
|
1043
|
+
</div>
|
|
1044
|
+
|
|
1045
|
+
<div class="screenshot-dots" id="screenshotDots">
|
|
1046
|
+
<button class="screenshot-dot active" onclick="goToSlide(0)"></button>
|
|
1047
|
+
<button class="screenshot-dot" onclick="goToSlide(1)"></button>
|
|
1048
|
+
<button class="screenshot-dot" onclick="goToSlide(2)"></button>
|
|
1049
|
+
<button class="screenshot-dot" onclick="goToSlide(3)"></button>
|
|
1050
|
+
</div>
|
|
1051
|
+
</div>
|
|
1052
|
+
</div>
|
|
1053
|
+
</section>
|
|
1054
|
+
|
|
1055
|
+
<!-- How It Works -->
|
|
1056
|
+
<section class="section section--soft" id="how-it-works">
|
|
1057
|
+
<div class="section-inner">
|
|
1058
|
+
<div class="reveal">
|
|
1059
|
+
<div class="section-eyebrow section-eyebrow--blue">How It Works</div>
|
|
1060
|
+
<h2 class="section-title">Three steps. Thirty seconds.</h2>
|
|
1061
|
+
<p class="section-desc">No install. No sign-up. Your data never leaves your machine.</p>
|
|
1062
|
+
</div>
|
|
1063
|
+
|
|
1064
|
+
<div class="steps-grid">
|
|
1065
|
+
<div class="step-card reveal rd1">
|
|
1066
|
+
<div class="step-num step-num--blue">1</div>
|
|
1067
|
+
<div class="step-title">Open your terminal</div>
|
|
1068
|
+
<div class="step-desc">
|
|
1069
|
+
On Mac: press <code>Cmd + Space</code>, type "Terminal", hit Enter.<br>
|
|
1070
|
+
On Windows: press <code>Win + R</code>, type "cmd", hit Enter.
|
|
1071
|
+
</div>
|
|
1072
|
+
</div>
|
|
1073
|
+
|
|
1074
|
+
<div class="step-card reveal rd2">
|
|
1075
|
+
<div class="step-num step-num--violet">2</div>
|
|
1076
|
+
<div class="step-title">Paste this command and press Enter</div>
|
|
1077
|
+
<div class="step-desc">
|
|
1078
|
+
<code>npx claude-spend</code><br><br>
|
|
1079
|
+
That's it. It downloads temporarily, reads your local Claude Code data, and starts a mini dashboard.
|
|
1080
|
+
</div>
|
|
1081
|
+
<div class="step-note">
|
|
1082
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
1083
|
+
Nothing is sent to the internet
|
|
1084
|
+
</div>
|
|
1085
|
+
</div>
|
|
1086
|
+
|
|
1087
|
+
<div class="step-card reveal rd3">
|
|
1088
|
+
<div class="step-num step-num--emerald">3</div>
|
|
1089
|
+
<div class="step-title">Your dashboard opens automatically</div>
|
|
1090
|
+
<div class="step-desc">
|
|
1091
|
+
A new browser tab opens with your personal usage dashboard. See exactly which conversations, prompts, and days used the most.
|
|
1092
|
+
</div>
|
|
1093
|
+
</div>
|
|
1094
|
+
</div>
|
|
1095
|
+
</div>
|
|
1096
|
+
</section>
|
|
1097
|
+
|
|
1098
|
+
<!-- Features -->
|
|
1099
|
+
<section class="section" id="features">
|
|
1100
|
+
<div class="section-inner">
|
|
1101
|
+
<div class="reveal">
|
|
1102
|
+
<div class="section-eyebrow section-eyebrow--emerald">What You See</div>
|
|
1103
|
+
<h2 class="section-title">The answers you already want.</h2>
|
|
1104
|
+
<p class="section-desc">Every question you've had about your Claude Code usage, answered in one dashboard.</p>
|
|
1105
|
+
</div>
|
|
1106
|
+
|
|
1107
|
+
<div class="features-grid">
|
|
1108
|
+
<div class="feature-card reveal rd1">
|
|
1109
|
+
<div class="feature-icon fi-blue">
|
|
1110
|
+
<svg viewBox="0 0 24 24"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
|
|
1111
|
+
</div>
|
|
1112
|
+
<div class="feature-title">Usage breakdown</div>
|
|
1113
|
+
<div class="feature-desc">Every conversation ranked by how much it consumed. See the full picture in seconds.</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
|
|
1116
|
+
<div class="feature-card reveal rd2">
|
|
1117
|
+
<div class="feature-icon fi-orange">
|
|
1118
|
+
<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26z"/></svg>
|
|
1119
|
+
</div>
|
|
1120
|
+
<div class="feature-title">Expensive prompts</div>
|
|
1121
|
+
<div class="feature-desc">Your top 20 costliest queries, ranked. Find out what's burning through your limit.</div>
|
|
1122
|
+
</div>
|
|
1123
|
+
|
|
1124
|
+
<div class="feature-card reveal rd3">
|
|
1125
|
+
<div class="feature-icon fi-violet">
|
|
1126
|
+
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
1127
|
+
</div>
|
|
1128
|
+
<div class="feature-title">Daily patterns</div>
|
|
1129
|
+
<div class="feature-desc">See which days you burn through it fastest. Spot patterns and pace your work.</div>
|
|
1130
|
+
</div>
|
|
1131
|
+
</div>
|
|
1132
|
+
</div>
|
|
1133
|
+
</section>
|
|
1134
|
+
|
|
1135
|
+
<!-- Testimonials -->
|
|
1136
|
+
<section class="section section--soft">
|
|
1137
|
+
<div class="section-inner">
|
|
1138
|
+
<div class="reveal">
|
|
1139
|
+
<div class="section-eyebrow section-eyebrow--orange" style="justify-content:center; display:flex;">What people are saying</div>
|
|
1140
|
+
<h2 class="section-title" style="text-align:center;">Loved by the r/ClaudeAI community.</h2>
|
|
1141
|
+
<p class="section-desc" style="text-align:center; margin-left:auto; margin-right:auto;">Real comments from the Reddit post that started it all.</p>
|
|
1142
|
+
</div>
|
|
1143
|
+
|
|
1144
|
+
<div class="testimonials-grid">
|
|
1145
|
+
<!-- Featured: Mod stickied TL;DR -->
|
|
1146
|
+
<div class="testimonial-img-wrap testimonial-img-wrap--featured reveal">
|
|
1147
|
+
<img src="screenshots/reddit-mod.png" alt="ClaudeAI mod bot stickied comment: The community is giving OP a massive high-five for building this. The biggest eye-opener is that ~99% of your token usage is from Claude re-reading the entire conversation history with every single prompt.">
|
|
1148
|
+
</div>
|
|
1149
|
+
|
|
1150
|
+
<!-- Row: Coffee + Khalimero -->
|
|
1151
|
+
<div class="testimonial-row">
|
|
1152
|
+
<div class="testimonial-img-wrap reveal rd1">
|
|
1153
|
+
<img src="screenshots/reddit-coffee.png" alt="Coffee_And_Growth: Fix it and a well-written prompt cost similar tokens, but one gives you garbage and the other gives you results. Same spend, wildly different ROI.">
|
|
1154
|
+
</div>
|
|
1155
|
+
<div class="testimonial-img-wrap reveal rd2">
|
|
1156
|
+
<img src="screenshots/reddit-khalimero.png" alt="KHALIMER0: Incredible work, thanks! This is an amazing insight.">
|
|
1157
|
+
</div>
|
|
1158
|
+
</div>
|
|
1159
|
+
|
|
1160
|
+
<!-- theTraveler_2 -->
|
|
1161
|
+
<div class="testimonial-img-wrap reveal rd3" style="max-width: 500px;">
|
|
1162
|
+
<img src="screenshots/reddit-traveler.png" alt="theTraveler_2: Thanks for sharing, that is quite useful. Much appreciated.">
|
|
1163
|
+
</div>
|
|
1164
|
+
</div>
|
|
1165
|
+
</div>
|
|
1166
|
+
</section>
|
|
1167
|
+
|
|
1168
|
+
<!-- Story + Trust -->
|
|
1169
|
+
<section class="section section--soft">
|
|
1170
|
+
<div class="section-inner">
|
|
1171
|
+
<div class="story-card reveal">
|
|
1172
|
+
<div class="story-avatar">PM</div>
|
|
1173
|
+
<p class="story-text">
|
|
1174
|
+
Built by a PM who kept hitting the limit and had no idea why. Runs entirely on your machine, reads the files Claude Code already stores locally, <strong>sends nothing anywhere.</strong> Open source, always.
|
|
1175
|
+
</p>
|
|
1176
|
+
</div>
|
|
1177
|
+
|
|
1178
|
+
<div style="margin-top: 3rem;">
|
|
1179
|
+
<div class="trust-row reveal">
|
|
1180
|
+
<div class="trust-item">
|
|
1181
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
|
|
1182
|
+
100% local
|
|
1183
|
+
</div>
|
|
1184
|
+
<div class="trust-item">
|
|
1185
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
|
|
1186
|
+
Zero config
|
|
1187
|
+
</div>
|
|
1188
|
+
<div class="trust-item">
|
|
1189
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
|
|
1190
|
+
No data sent
|
|
1191
|
+
</div>
|
|
1192
|
+
<div class="trust-item">
|
|
1193
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
|
|
1194
|
+
Open source
|
|
1195
|
+
</div>
|
|
1196
|
+
</div>
|
|
1197
|
+
</div>
|
|
1198
|
+
</div>
|
|
1199
|
+
</section>
|
|
1200
|
+
|
|
1201
|
+
<!-- CTA -->
|
|
1202
|
+
<section class="cta-section">
|
|
1203
|
+
<div class="cta-inner reveal">
|
|
1204
|
+
<h2 class="cta-title">Try it now</h2>
|
|
1205
|
+
<p class="cta-desc">If you use Claude Code, you already have the data. Open a terminal, paste the command, done.</p>
|
|
1206
|
+
|
|
1207
|
+
<div class="cta-cmd-wrap">
|
|
1208
|
+
<div class="cmd-box" onclick="copyCmd(this)" style="cursor:pointer">
|
|
1209
|
+
<code>npx claude-spend</code>
|
|
1210
|
+
<div class="cmd-copy">
|
|
1211
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|
1212
|
+
</div>
|
|
1213
|
+
</div>
|
|
1214
|
+
</div>
|
|
1215
|
+
|
|
1216
|
+
<div class="cta-links">
|
|
1217
|
+
<a class="cta-link" href="https://github.com/writetoaniketparihar-collab/claude-spend" target="_blank" rel="noopener">
|
|
1218
|
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
1219
|
+
GitHub
|
|
1220
|
+
</a>
|
|
1221
|
+
<a class="cta-link" href="https://www.npmjs.com/package/claude-spend" target="_blank" rel="noopener">
|
|
1222
|
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0h-2.666V8.667h2.666v5.331zm12 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10 10v4h1.336v-4H10z"/></svg>
|
|
1223
|
+
npm
|
|
1224
|
+
</a>
|
|
1225
|
+
</div>
|
|
1226
|
+
</div>
|
|
1227
|
+
</section>
|
|
1228
|
+
|
|
1229
|
+
<!-- Footer -->
|
|
1230
|
+
<footer class="footer">
|
|
1231
|
+
Made with love and Claude Code by <a href="https://www.linkedin.com/in/writetoaniketparihar/" target="_blank" rel="noopener">Aniket Parihar</a>
|
|
1232
|
+
<br style="margin-bottom:6px;">
|
|
1233
|
+
<span style="display:inline-block;margin-top:6px;font-size:.72rem;color:#94A3B8;">This tool runs 100% locally and collects no user data, so there is no way to track usage or issues. If something breaks or you have feedback, please write to <a href="mailto:writetoaniketparihar@gmail.com" style="color:#3B82F6;text-decoration:none;font-weight:600;">writetoaniketparihar@gmail.com</a></span>
|
|
1234
|
+
</footer>
|
|
1235
|
+
|
|
1236
|
+
<script>
|
|
1237
|
+
// Rotating words
|
|
1238
|
+
const words = document.querySelectorAll('.rotate-word');
|
|
1239
|
+
let current = 0;
|
|
1240
|
+
|
|
1241
|
+
setInterval(() => {
|
|
1242
|
+
const prev = current;
|
|
1243
|
+
current = (current + 1) % words.length;
|
|
1244
|
+
words[prev].classList.remove('active');
|
|
1245
|
+
words[prev].classList.add('exit');
|
|
1246
|
+
words[current].classList.remove('exit');
|
|
1247
|
+
words[current].classList.add('active');
|
|
1248
|
+
setTimeout(() => words[prev].classList.remove('exit'), 450);
|
|
1249
|
+
}, 2500);
|
|
1250
|
+
|
|
1251
|
+
// Copy command
|
|
1252
|
+
function copyCmd(el) {
|
|
1253
|
+
navigator.clipboard.writeText('npx claude-spend').then(() => {
|
|
1254
|
+
const codeEl = el.querySelector('code');
|
|
1255
|
+
if (codeEl) {
|
|
1256
|
+
const orig = codeEl.textContent;
|
|
1257
|
+
codeEl.textContent = 'Copied!';
|
|
1258
|
+
codeEl.style.color = 'var(--blue)';
|
|
1259
|
+
setTimeout(() => { codeEl.textContent = orig; codeEl.style.color = ''; }, 1400);
|
|
1260
|
+
return;
|
|
1261
|
+
}
|
|
1262
|
+
// For the primary button
|
|
1263
|
+
const svg = el.querySelector('svg');
|
|
1264
|
+
const origHTML = el.innerHTML;
|
|
1265
|
+
el.textContent = '';
|
|
1266
|
+
if (svg) el.appendChild(svg);
|
|
1267
|
+
el.appendChild(document.createTextNode(' Copied!'));
|
|
1268
|
+
setTimeout(() => { el.innerHTML = origHTML; }, 1400);
|
|
1269
|
+
});
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
// Scroll reveal
|
|
1273
|
+
const reveals = document.querySelectorAll('.reveal');
|
|
1274
|
+
const observer = new IntersectionObserver(entries => {
|
|
1275
|
+
entries.forEach(entry => {
|
|
1276
|
+
if (entry.isIntersecting) {
|
|
1277
|
+
entry.target.classList.add('visible');
|
|
1278
|
+
observer.unobserve(entry.target);
|
|
1279
|
+
}
|
|
1280
|
+
});
|
|
1281
|
+
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
1282
|
+
reveals.forEach(el => observer.observe(el));
|
|
1283
|
+
|
|
1284
|
+
// Screenshot slider
|
|
1285
|
+
const track = document.getElementById('screenshotTrack');
|
|
1286
|
+
const dots = document.querySelectorAll('.screenshot-dot');
|
|
1287
|
+
let currentSlide = 0;
|
|
1288
|
+
|
|
1289
|
+
function updateDots(index) {
|
|
1290
|
+
dots.forEach((d, i) => d.classList.toggle('active', i === index));
|
|
1291
|
+
currentSlide = index;
|
|
1292
|
+
}
|
|
1293
|
+
|
|
1294
|
+
function goToSlide(index) {
|
|
1295
|
+
const slides = track.querySelectorAll('.screenshot-slide');
|
|
1296
|
+
if (index < 0 || index >= slides.length) return;
|
|
1297
|
+
const slideWidth = slides[0].offsetWidth + 24; // width + gap
|
|
1298
|
+
track.scrollTo({ left: index * slideWidth, behavior: 'smooth' });
|
|
1299
|
+
updateDots(index);
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
function slideScreenshot(dir) {
|
|
1303
|
+
const slides = track.querySelectorAll('.screenshot-slide');
|
|
1304
|
+
let next = currentSlide + dir;
|
|
1305
|
+
if (next < 0) next = slides.length - 1;
|
|
1306
|
+
if (next >= slides.length) next = 0;
|
|
1307
|
+
goToSlide(next);
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
// Sync dots on scroll
|
|
1311
|
+
track.addEventListener('scrollend', () => {
|
|
1312
|
+
const slides = track.querySelectorAll('.screenshot-slide');
|
|
1313
|
+
const trackRect = track.getBoundingClientRect();
|
|
1314
|
+
const center = trackRect.left + trackRect.width / 2;
|
|
1315
|
+
let closest = 0;
|
|
1316
|
+
let minDist = Infinity;
|
|
1317
|
+
slides.forEach((s, i) => {
|
|
1318
|
+
const r = s.getBoundingClientRect();
|
|
1319
|
+
const dist = Math.abs(r.left + r.width / 2 - center);
|
|
1320
|
+
if (dist < minDist) { minDist = dist; closest = i; }
|
|
1321
|
+
});
|
|
1322
|
+
updateDots(closest);
|
|
1323
|
+
});
|
|
1324
|
+
|
|
1325
|
+
// Auto-play every 4 seconds
|
|
1326
|
+
let autoplayTimer = setInterval(() => slideScreenshot(1), 4000);
|
|
1327
|
+
|
|
1328
|
+
// Pause on hover, resume on leave
|
|
1329
|
+
const slider = document.querySelector('.screenshot-slider');
|
|
1330
|
+
slider.addEventListener('mouseenter', () => clearInterval(autoplayTimer));
|
|
1331
|
+
slider.addEventListener('mouseleave', () => {
|
|
1332
|
+
autoplayTimer = setInterval(() => slideScreenshot(1), 4000);
|
|
1333
|
+
});
|
|
1334
|
+
</script>
|
|
1335
|
+
|
|
1336
|
+
</body>
|
|
1337
|
+
</html>
|