cc-starter 1.0.6 → 1.0.7
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/docs/index.html
DELETED
|
@@ -1,969 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>cc-starter — Claude Code. Supercharged.</title>
|
|
7
|
-
<meta name="description" content="One command sets up everything — token-saving scripts, project cost estimation, plugin presets, and battle-tested rules for Claude Code.">
|
|
8
|
-
<meta name="theme-color" content="#0a0a0f">
|
|
9
|
-
<meta property="og:title" content="cc-starter — Claude Code. Supercharged.">
|
|
10
|
-
<meta property="og:description" content="One command sets up everything — token-saving scripts, COCOMO estimation, plugin presets, and battle-tested rules.">
|
|
11
|
-
<meta property="og:type" content="website">
|
|
12
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
13
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
14
|
-
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
15
|
-
<style>
|
|
16
|
-
/* ═══════════════════════════════════════════════════════════
|
|
17
|
-
RESET & BASE
|
|
18
|
-
═══════════════════════════════════════════════════════════ */
|
|
19
|
-
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
20
|
-
html { scroll-behavior: smooth; }
|
|
21
|
-
@media (prefers-reduced-motion: reduce) {
|
|
22
|
-
html { scroll-behavior: auto; }
|
|
23
|
-
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:root {
|
|
27
|
-
--bg: #0a0a0f;
|
|
28
|
-
--bg-card: rgba(255,255,255,0.03);
|
|
29
|
-
--bg-card-hover: rgba(255,255,255,0.05);
|
|
30
|
-
--cyan: #00d4ff;
|
|
31
|
-
--cyan-dim: rgba(0,212,255,0.15);
|
|
32
|
-
--purple: #a855f7;
|
|
33
|
-
--purple-dim: rgba(168,85,247,0.15);
|
|
34
|
-
--text: #e4e4e7;
|
|
35
|
-
--text-dim: #71717a;
|
|
36
|
-
--text-bright: #fafafa;
|
|
37
|
-
--red: #ef4444;
|
|
38
|
-
--red-dim: rgba(239,68,68,0.12);
|
|
39
|
-
--green: #22c55e;
|
|
40
|
-
--border: rgba(255,255,255,0.08);
|
|
41
|
-
--border-hover: rgba(255,255,255,0.15);
|
|
42
|
-
--font-heading: 'Outfit', system-ui, sans-serif;
|
|
43
|
-
--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
|
|
44
|
-
--max-w: 1200px;
|
|
45
|
-
--section-py: clamp(80px, 12vh, 140px);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
body {
|
|
49
|
-
font-family: var(--font-heading);
|
|
50
|
-
background: var(--bg);
|
|
51
|
-
color: var(--text);
|
|
52
|
-
line-height: 1.6;
|
|
53
|
-
overflow-x: hidden;
|
|
54
|
-
-webkit-font-smoothing: antialiased;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/* ═══════════════════════════════════════════════════════════
|
|
58
|
-
UTILITIES
|
|
59
|
-
═══════════════════════════════════════════════════════════ */
|
|
60
|
-
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
|
|
61
|
-
.section { padding: var(--section-py) 0; position: relative; }
|
|
62
|
-
.gradient-text {
|
|
63
|
-
background: linear-gradient(135deg, var(--cyan), var(--purple));
|
|
64
|
-
-webkit-background-clip: text;
|
|
65
|
-
-webkit-text-fill-color: transparent;
|
|
66
|
-
background-clip: text;
|
|
67
|
-
}
|
|
68
|
-
.badge {
|
|
69
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
70
|
-
padding: 5px 14px; border-radius: 999px; font-size: 0.8rem;
|
|
71
|
-
font-family: var(--font-mono); font-weight: 500;
|
|
72
|
-
border: 1px solid var(--border); background: var(--bg-card);
|
|
73
|
-
color: var(--text-dim); text-decoration: none;
|
|
74
|
-
transition: border-color 0.3s, color 0.3s;
|
|
75
|
-
}
|
|
76
|
-
.badge:hover { border-color: var(--cyan); color: var(--text); }
|
|
77
|
-
.section-label {
|
|
78
|
-
font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
|
|
79
|
-
letter-spacing: 0.15em; text-transform: uppercase;
|
|
80
|
-
color: var(--cyan); margin-bottom: 16px;
|
|
81
|
-
}
|
|
82
|
-
.section-title {
|
|
83
|
-
font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800;
|
|
84
|
-
line-height: 1.15; color: var(--text-bright); margin-bottom: 20px;
|
|
85
|
-
}
|
|
86
|
-
.section-subtitle {
|
|
87
|
-
font-size: 1.15rem; color: var(--text-dim); max-width: 640px;
|
|
88
|
-
line-height: 1.7;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/* ═══════════════════════════════════════════════════════════
|
|
92
|
-
SCROLL ANIMATIONS
|
|
93
|
-
═══════════════════════════════════════════════════════════ */
|
|
94
|
-
.animate-on-scroll {
|
|
95
|
-
opacity: 0; transform: translateY(32px);
|
|
96
|
-
transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
|
|
97
|
-
}
|
|
98
|
-
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
|
|
99
|
-
|
|
100
|
-
/* Staggered hero */
|
|
101
|
-
.hero-stagger { opacity: 0; transform: translateY(24px); animation: heroIn 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
|
|
102
|
-
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
|
|
103
|
-
|
|
104
|
-
/* ═══════════════════════════════════════════════════════════
|
|
105
|
-
FLOATING ORBS
|
|
106
|
-
═══════════════════════════════════════════════════════════ */
|
|
107
|
-
.orb {
|
|
108
|
-
position: fixed; border-radius: 50%; pointer-events: none;
|
|
109
|
-
filter: blur(120px); opacity: 0.12; z-index: 0;
|
|
110
|
-
}
|
|
111
|
-
.orb-1 { width: 600px; height: 600px; background: var(--cyan); top: -200px; left: -200px; animation: drift1 25s ease-in-out infinite; }
|
|
112
|
-
.orb-2 { width: 500px; height: 500px; background: var(--purple); bottom: -150px; right: -150px; animation: drift2 30s ease-in-out infinite; }
|
|
113
|
-
.orb-3 { width: 400px; height: 400px; background: var(--cyan); top: 50%; left: 60%; animation: drift3 20s ease-in-out infinite; }
|
|
114
|
-
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
|
|
115
|
-
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-80px)} }
|
|
116
|
-
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-40px,50px)} 66%{transform:translate(50px,-30px)} }
|
|
117
|
-
|
|
118
|
-
/* ═══════════════════════════════════════════════════════════
|
|
119
|
-
NAV
|
|
120
|
-
═══════════════════════════════════════════════════════════ */
|
|
121
|
-
nav {
|
|
122
|
-
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
123
|
-
padding: 16px 24px; backdrop-filter: blur(20px);
|
|
124
|
-
background: rgba(10,10,15,0.7); border-bottom: 1px solid var(--border);
|
|
125
|
-
}
|
|
126
|
-
nav .inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
|
|
127
|
-
nav .logo { font-weight: 800; font-size: 1.15rem; color: var(--text-bright); text-decoration: none; letter-spacing: -0.02em; }
|
|
128
|
-
nav .logo span { color: var(--cyan); }
|
|
129
|
-
nav .links { display: flex; gap: 28px; align-items: center; }
|
|
130
|
-
nav .links a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
|
|
131
|
-
nav .links a:hover { color: var(--text-bright); }
|
|
132
|
-
nav .links .gh-link {
|
|
133
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
134
|
-
padding: 7px 16px; border-radius: 8px; font-size: 0.85rem;
|
|
135
|
-
background: rgba(255,255,255,0.06); border: 1px solid var(--border);
|
|
136
|
-
color: var(--text); transition: all 0.2s;
|
|
137
|
-
}
|
|
138
|
-
nav .links .gh-link:hover { border-color: var(--cyan); background: rgba(0,212,255,0.06); }
|
|
139
|
-
@media (max-width: 640px) {
|
|
140
|
-
nav .links a:not(.gh-link) { display: none; }
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/* ═══════════════════════════════════════════════════════════
|
|
144
|
-
HERO
|
|
145
|
-
═══════════════════════════════════════════════════════════ */
|
|
146
|
-
.hero { padding-top: clamp(140px, 22vh, 220px); padding-bottom: var(--section-py); text-align: center; position: relative; z-index: 1; }
|
|
147
|
-
.hero h1 {
|
|
148
|
-
font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 900;
|
|
149
|
-
line-height: 1.05; letter-spacing: -0.03em;
|
|
150
|
-
margin-bottom: 24px;
|
|
151
|
-
}
|
|
152
|
-
.hero h1 .line2 { display: block; }
|
|
153
|
-
.hero .sub {
|
|
154
|
-
font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--text-dim);
|
|
155
|
-
max-width: 680px; margin: 0 auto 40px; line-height: 1.7;
|
|
156
|
-
}
|
|
157
|
-
.hero .cmd-box {
|
|
158
|
-
display: inline-flex; align-items: center; gap: 14px;
|
|
159
|
-
padding: 16px 28px; border-radius: 14px; font-family: var(--font-mono);
|
|
160
|
-
font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 600;
|
|
161
|
-
background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.2);
|
|
162
|
-
color: var(--cyan); cursor: pointer; transition: all 0.3s;
|
|
163
|
-
position: relative;
|
|
164
|
-
}
|
|
165
|
-
.hero .cmd-box:hover { background: rgba(0,212,255,0.1); border-color: rgba(0,212,255,0.4); transform: translateY(-2px); }
|
|
166
|
-
.hero .cmd-box .copy-icon { opacity: 0.5; transition: opacity 0.2s; font-size: 0.9em; }
|
|
167
|
-
.hero .cmd-box:hover .copy-icon { opacity: 1; }
|
|
168
|
-
.hero .cmd-box .copied-toast {
|
|
169
|
-
position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
|
|
170
|
-
background: var(--cyan); color: var(--bg); padding: 4px 14px;
|
|
171
|
-
border-radius: 6px; font-size: 0.75rem; font-weight: 600;
|
|
172
|
-
opacity: 0; transition: opacity 0.2s; pointer-events: none;
|
|
173
|
-
}
|
|
174
|
-
.hero .cmd-box .copied-toast.show { opacity: 1; }
|
|
175
|
-
.hero .badges { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
|
|
176
|
-
|
|
177
|
-
/* Gradient line below hero */
|
|
178
|
-
.hero-divider {
|
|
179
|
-
width: 100%; max-width: 600px; height: 1px; margin: 0 auto;
|
|
180
|
-
background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
|
|
181
|
-
opacity: 0.3;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
/* ═══════════════════════════════════════════════════════════
|
|
185
|
-
BEFORE / AFTER
|
|
186
|
-
═══════════════════════════════════════════════════════════ */
|
|
187
|
-
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
|
|
188
|
-
@media (max-width: 768px) { .ba-grid { grid-template-columns: 1fr; } }
|
|
189
|
-
.ba-col { padding: 32px; border-radius: 16px; border: 1px solid var(--border); }
|
|
190
|
-
.ba-col.before { background: var(--red-dim); border-color: rgba(239,68,68,0.15); }
|
|
191
|
-
.ba-col.after { background: var(--cyan-dim); border-color: rgba(0,212,255,0.15); }
|
|
192
|
-
.ba-col h3 { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; font-weight: 600; }
|
|
193
|
-
.ba-col.before h3 { color: var(--red); }
|
|
194
|
-
.ba-col.after h3 { color: var(--cyan); }
|
|
195
|
-
.ba-col ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
|
|
196
|
-
.ba-col li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; line-height: 1.5; }
|
|
197
|
-
.ba-col.before li::before { content: '✕'; color: var(--red); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
|
|
198
|
-
.ba-col.after li::before { content: '✓'; color: var(--cyan); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
|
|
199
|
-
|
|
200
|
-
/* ═══════════════════════════════════════════════════════════
|
|
201
|
-
GLOW CARDS (Feature Grid)
|
|
202
|
-
═══════════════════════════════════════════════════════════ */
|
|
203
|
-
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
|
|
204
|
-
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
|
|
205
|
-
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
|
|
206
|
-
|
|
207
|
-
.card {
|
|
208
|
-
position: relative; padding: 36px 32px; border-radius: 16px;
|
|
209
|
-
background: var(--bg-card); border: 1px solid var(--border);
|
|
210
|
-
transition: border-color 0.3s, background 0.3s, transform 0.3s;
|
|
211
|
-
overflow: hidden; z-index: 1;
|
|
212
|
-
}
|
|
213
|
-
.card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); transform: translateY(-4px); }
|
|
214
|
-
/* Cursor glow */
|
|
215
|
-
.card::before {
|
|
216
|
-
content: ''; position: absolute; inset: 0; border-radius: inherit;
|
|
217
|
-
background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0,212,255,0.08), transparent 40%);
|
|
218
|
-
opacity: 0; transition: opacity 0.35s; z-index: -1;
|
|
219
|
-
}
|
|
220
|
-
.card:hover::before { opacity: 1; }
|
|
221
|
-
/* Glow border */
|
|
222
|
-
.card::after {
|
|
223
|
-
content: ''; position: absolute; inset: -1px; border-radius: inherit;
|
|
224
|
-
background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(168,85,247,0.2));
|
|
225
|
-
opacity: 0; transition: opacity 0.3s; z-index: -2;
|
|
226
|
-
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
227
|
-
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
228
|
-
mask-composite: exclude; -webkit-mask-composite: xor;
|
|
229
|
-
padding: 1px;
|
|
230
|
-
}
|
|
231
|
-
.card:hover::after { opacity: 1; }
|
|
232
|
-
|
|
233
|
-
.card .icon { font-size: 2rem; margin-bottom: 16px; display: block; }
|
|
234
|
-
.card h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-bright); margin-bottom: 10px; }
|
|
235
|
-
.card p { font-size: 0.92rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 16px; }
|
|
236
|
-
.card .mini-term {
|
|
237
|
-
font-family: var(--font-mono); font-size: 0.72rem; padding: 12px 16px;
|
|
238
|
-
background: rgba(0,0,0,0.4); border-radius: 8px; border: 1px solid var(--border);
|
|
239
|
-
color: var(--cyan); overflow: hidden; white-space: pre-wrap; word-break: break-all; line-height: 1.6;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
/* ═══════════════════════════════════════════════════════════
|
|
243
|
-
PLUGIN DEEP-DIVE
|
|
244
|
-
═══════════════════════════════════════════════════════════ */
|
|
245
|
-
.plugin-table-wrap {
|
|
246
|
-
margin-top: 48px; overflow-x: auto; border-radius: 16px;
|
|
247
|
-
border: 1px solid var(--border); background: var(--bg-card);
|
|
248
|
-
}
|
|
249
|
-
.plugin-table { width: 100%; border-collapse: collapse; }
|
|
250
|
-
.plugin-table th, .plugin-table td { padding: 18px 24px; text-align: left; font-size: 0.92rem; }
|
|
251
|
-
.plugin-table th {
|
|
252
|
-
font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
|
|
253
|
-
text-transform: uppercase; color: var(--text-dim); font-weight: 600;
|
|
254
|
-
border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02);
|
|
255
|
-
}
|
|
256
|
-
.plugin-table td { border-bottom: 1px solid var(--border); color: var(--text-dim); }
|
|
257
|
-
.plugin-table tr:last-child td { border-bottom: none; }
|
|
258
|
-
.plugin-table td:first-child { color: var(--cyan); font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
|
|
259
|
-
|
|
260
|
-
.preset-chips { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
|
|
261
|
-
.preset-chip {
|
|
262
|
-
padding: 14px 24px; border-radius: 12px; border: 1px solid var(--border);
|
|
263
|
-
background: var(--bg-card); flex: 1; min-width: 200px;
|
|
264
|
-
}
|
|
265
|
-
.preset-chip h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-bright); margin-bottom: 6px; }
|
|
266
|
-
.preset-chip p { font-size: 0.82rem; color: var(--text-dim); font-family: var(--font-mono); line-height: 1.5; }
|
|
267
|
-
|
|
268
|
-
/* ═══════════════════════════════════════════════════════════
|
|
269
|
-
TERMINAL DEMO
|
|
270
|
-
═══════════════════════════════════════════════════════════ */
|
|
271
|
-
.terminal {
|
|
272
|
-
max-width: 720px; margin: 48px auto 0; border-radius: 16px;
|
|
273
|
-
border: 1px solid var(--border); overflow: hidden;
|
|
274
|
-
background: #0c0c14; box-shadow: 0 24px 80px rgba(0,0,0,0.5);
|
|
275
|
-
}
|
|
276
|
-
.terminal-bar {
|
|
277
|
-
display: flex; align-items: center; gap: 8px; padding: 14px 20px;
|
|
278
|
-
background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border);
|
|
279
|
-
}
|
|
280
|
-
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
|
|
281
|
-
.terminal-dot:nth-child(1) { background: #ff5f57; }
|
|
282
|
-
.terminal-dot:nth-child(2) { background: #febc2e; }
|
|
283
|
-
.terminal-dot:nth-child(3) { background: #28c840; }
|
|
284
|
-
.terminal-bar span { margin-left: 12px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }
|
|
285
|
-
.terminal-body {
|
|
286
|
-
padding: 24px; font-family: var(--font-mono); font-size: 0.82rem;
|
|
287
|
-
line-height: 1.7; color: var(--text-dim); min-height: 420px;
|
|
288
|
-
white-space: pre-wrap; overflow: hidden;
|
|
289
|
-
}
|
|
290
|
-
.terminal-body .prompt { color: var(--cyan); }
|
|
291
|
-
.terminal-body .success { color: var(--green); }
|
|
292
|
-
.terminal-body .highlight { color: var(--text-bright); }
|
|
293
|
-
.terminal-body .purple { color: var(--purple); }
|
|
294
|
-
.terminal-body .cursor-blink {
|
|
295
|
-
display: inline-block; width: 8px; height: 16px;
|
|
296
|
-
background: var(--cyan); vertical-align: text-bottom;
|
|
297
|
-
animation: blink 1s step-end infinite;
|
|
298
|
-
}
|
|
299
|
-
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
|
300
|
-
|
|
301
|
-
/* ═══════════════════════════════════════════════════════════
|
|
302
|
-
COMPARISON TABLE
|
|
303
|
-
═══════════════════════════════════════════════════════════ */
|
|
304
|
-
.comparison-wrap {
|
|
305
|
-
margin-top: 48px; overflow-x: auto; border-radius: 16px;
|
|
306
|
-
border: 1px solid var(--border); background: var(--bg-card);
|
|
307
|
-
}
|
|
308
|
-
.comparison-table { width: 100%; border-collapse: collapse; min-width: 700px; }
|
|
309
|
-
.comparison-table th, .comparison-table td { padding: 14px 20px; text-align: center; font-size: 0.88rem; }
|
|
310
|
-
.comparison-table th {
|
|
311
|
-
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
|
|
312
|
-
text-transform: uppercase; color: var(--text-dim); font-weight: 600;
|
|
313
|
-
border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02);
|
|
314
|
-
}
|
|
315
|
-
.comparison-table th:first-child { text-align: left; }
|
|
316
|
-
.comparison-table td { border-bottom: 1px solid var(--border); color: var(--text-dim); }
|
|
317
|
-
.comparison-table td:first-child { text-align: left; font-weight: 500; color: var(--text); white-space: nowrap; }
|
|
318
|
-
.comparison-table tr:last-child td { border-bottom: none; }
|
|
319
|
-
.comparison-table th.highlight-col { color: var(--cyan); }
|
|
320
|
-
.comparison-table td.highlight-col { background: rgba(0,212,255,0.04); color: var(--text); font-weight: 600; }
|
|
321
|
-
.check { color: var(--cyan); font-weight: 700; }
|
|
322
|
-
.cross { color: var(--text-dim); opacity: 0.4; }
|
|
323
|
-
|
|
324
|
-
/* ═══════════════════════════════════════════════════════════
|
|
325
|
-
CTA
|
|
326
|
-
═══════════════════════════════════════════════════════════ */
|
|
327
|
-
.cta-section { text-align: center; }
|
|
328
|
-
.steps-row {
|
|
329
|
-
display: flex; align-items: center; justify-content: center; gap: 16px;
|
|
330
|
-
margin-top: 40px; flex-wrap: wrap;
|
|
331
|
-
}
|
|
332
|
-
.step {
|
|
333
|
-
display: flex; align-items: center; gap: 10px;
|
|
334
|
-
padding: 12px 20px; border-radius: 12px;
|
|
335
|
-
background: var(--bg-card); border: 1px solid var(--border);
|
|
336
|
-
font-size: 0.95rem; color: var(--text-dim);
|
|
337
|
-
}
|
|
338
|
-
.step-num {
|
|
339
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
340
|
-
width: 28px; height: 28px; border-radius: 50%;
|
|
341
|
-
background: linear-gradient(135deg, var(--cyan), var(--purple));
|
|
342
|
-
color: var(--bg); font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
|
|
343
|
-
}
|
|
344
|
-
.step-arrow { color: var(--text-dim); font-size: 1.2rem; }
|
|
345
|
-
@media (max-width: 640px) {
|
|
346
|
-
.step-arrow { display: none; }
|
|
347
|
-
.steps-row { flex-direction: column; gap: 10px; }
|
|
348
|
-
}
|
|
349
|
-
.cta-section .cmd-box-lg {
|
|
350
|
-
display: inline-flex; align-items: center; gap: 16px;
|
|
351
|
-
padding: 22px 40px; border-radius: 16px; font-family: var(--font-mono);
|
|
352
|
-
font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 600;
|
|
353
|
-
background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(168,85,247,0.1));
|
|
354
|
-
border: 1px solid rgba(0,212,255,0.25); color: var(--cyan);
|
|
355
|
-
cursor: pointer; transition: all 0.3s; margin-top: 36px;
|
|
356
|
-
}
|
|
357
|
-
.cta-section .cmd-box-lg:hover { transform: translateY(-3px); border-color: rgba(0,212,255,0.5); box-shadow: 0 12px 40px rgba(0,212,255,0.15); }
|
|
358
|
-
.cta-note { margin-top: 20px; font-size: 0.88rem; color: var(--text-dim); }
|
|
359
|
-
.cta-links { display: flex; justify-content: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
|
|
360
|
-
.cta-links a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
|
|
361
|
-
.cta-links a:hover { color: var(--cyan); }
|
|
362
|
-
|
|
363
|
-
/* ═══════════════════════════════════════════════════════════
|
|
364
|
-
FOOTER
|
|
365
|
-
═══════════════════════════════════════════════════════════ */
|
|
366
|
-
footer {
|
|
367
|
-
padding: 48px 24px; border-top: 1px solid var(--border); text-align: center;
|
|
368
|
-
font-size: 0.85rem; color: var(--text-dim);
|
|
369
|
-
}
|
|
370
|
-
footer a { color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
|
|
371
|
-
footer a:hover { color: var(--cyan); }
|
|
372
|
-
footer .footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
|
|
373
|
-
footer .built-with { margin-top: 12px; font-size: 0.78rem; opacity: 0.5; }
|
|
374
|
-
|
|
375
|
-
/* ═══════════════════════════════════════════════════════════
|
|
376
|
-
LANGUAGE TOGGLE
|
|
377
|
-
═══════════════════════════════════════════════════════════ */
|
|
378
|
-
html[data-lang="en"] .lang-de { display: none !important; }
|
|
379
|
-
html[data-lang="de"] .lang-en { display: none !important; }
|
|
380
|
-
|
|
381
|
-
.lang-toggle {
|
|
382
|
-
display: inline-flex; align-items: center; gap: 4px;
|
|
383
|
-
font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
|
|
384
|
-
margin-left: 16px;
|
|
385
|
-
}
|
|
386
|
-
.lang-btn {
|
|
387
|
-
background: none; border: none; cursor: pointer;
|
|
388
|
-
color: var(--text-dim); font-family: var(--font-mono);
|
|
389
|
-
font-size: 0.8rem; font-weight: 600; padding: 4px 6px;
|
|
390
|
-
transition: color 0.2s;
|
|
391
|
-
}
|
|
392
|
-
.lang-btn:hover { color: var(--text); }
|
|
393
|
-
.lang-btn.active { color: var(--cyan); }
|
|
394
|
-
.lang-divider { color: var(--text-dim); opacity: 0.3; user-select: none; }
|
|
395
|
-
|
|
396
|
-
/* ═══════════════════════════════════════════════════════════
|
|
397
|
-
DIVIDER
|
|
398
|
-
═══════════════════════════════════════════════════════════ */
|
|
399
|
-
.section-divider {
|
|
400
|
-
width: 100%; max-width: 200px; height: 1px; margin: 0 auto;
|
|
401
|
-
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
|
402
|
-
}
|
|
403
|
-
</style>
|
|
404
|
-
</head>
|
|
405
|
-
<body>
|
|
406
|
-
|
|
407
|
-
<!-- Floating orbs -->
|
|
408
|
-
<div class="orb orb-1" aria-hidden="true"></div>
|
|
409
|
-
<div class="orb orb-2" aria-hidden="true"></div>
|
|
410
|
-
<div class="orb orb-3" aria-hidden="true"></div>
|
|
411
|
-
|
|
412
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
413
|
-
NAV
|
|
414
|
-
═══════════════════════════════════════════════════════════ -->
|
|
415
|
-
<nav>
|
|
416
|
-
<div class="inner">
|
|
417
|
-
<a href="#" class="logo">cc<span>-starter</span></a>
|
|
418
|
-
<div class="links">
|
|
419
|
-
<a href="#features">Features</a>
|
|
420
|
-
<a href="#plugins">Plugins</a>
|
|
421
|
-
<a href="#demo">Demo</a>
|
|
422
|
-
<a href="https://github.com/WAGMIStudios/cc-starter" target="_blank" rel="noopener" class="gh-link">
|
|
423
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
424
|
-
GitHub
|
|
425
|
-
</a>
|
|
426
|
-
<div class="lang-toggle">
|
|
427
|
-
<button class="lang-btn" data-lang-switch="de" aria-label="Deutsch">DE</button>
|
|
428
|
-
<span class="lang-divider">|</span>
|
|
429
|
-
<button class="lang-btn active" data-lang-switch="en" aria-label="English">EN</button>
|
|
430
|
-
</div>
|
|
431
|
-
</div>
|
|
432
|
-
</div>
|
|
433
|
-
</nav>
|
|
434
|
-
|
|
435
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
436
|
-
HERO
|
|
437
|
-
═══════════════════════════════════════════════════════════ -->
|
|
438
|
-
<section class="hero section">
|
|
439
|
-
<div class="container">
|
|
440
|
-
<h1>
|
|
441
|
-
<span class="hero-stagger" style="animation-delay:0ms">Claude Code.</span>
|
|
442
|
-
<span class="hero-stagger line2 gradient-text" style="animation-delay:150ms"><span class="lang-en">Supercharged.</span><span class="lang-de">Aufgeladen.</span></span>
|
|
443
|
-
</h1>
|
|
444
|
-
<p class="sub hero-stagger" style="animation-delay:300ms">
|
|
445
|
-
<span class="lang-en">One command sets up everything — token-saving scripts, project cost estimation, plugin presets, and battle-tested rules. Stop configuring, start coding.</span>
|
|
446
|
-
<span class="lang-de">Ein Befehl richtet alles ein — Token-sparende Scripts, Projekt-Kostenschätzung, Plugin-Presets und bewährte Regeln. Schluss mit Konfigurieren, los geht's.</span>
|
|
447
|
-
</p>
|
|
448
|
-
<div class="hero-stagger" style="animation-delay:450ms">
|
|
449
|
-
<div class="cmd-box" id="hero-copy" role="button" tabindex="0" aria-label="Copy npx cc-starter to clipboard">
|
|
450
|
-
<span>npx cc-starter</span>
|
|
451
|
-
<span class="copy-icon" aria-hidden="true">⎘</span>
|
|
452
|
-
<span class="copied-toast" id="hero-toast"><span class="lang-en">Copied!</span><span class="lang-de">Kopiert!</span></span>
|
|
453
|
-
</div>
|
|
454
|
-
</div>
|
|
455
|
-
<div class="badges hero-stagger" style="animation-delay:600ms">
|
|
456
|
-
<a href="https://www.npmjs.com/package/cc-starter" target="_blank" rel="noopener" class="badge">
|
|
457
|
-
<svg width="14" height="14" viewBox="0 0 16 16" fill="#cb3837"><rect width="16" height="16" rx="2"/><text x="8" y="12.5" fill="#fff" font-size="10" text-anchor="middle" font-weight="bold">n</text></svg>
|
|
458
|
-
npm
|
|
459
|
-
</a>
|
|
460
|
-
<a href="https://github.com/WAGMIStudios/cc-starter" target="_blank" rel="noopener" class="badge">
|
|
461
|
-
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
462
|
-
GitHub
|
|
463
|
-
</a>
|
|
464
|
-
<span class="badge">MIT License</span>
|
|
465
|
-
</div>
|
|
466
|
-
</div>
|
|
467
|
-
<div class="hero-divider hero-stagger" style="animation-delay:750ms"></div>
|
|
468
|
-
</section>
|
|
469
|
-
|
|
470
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
471
|
-
PROBLEM → SOLUTION
|
|
472
|
-
═══════════════════════════════════════════════════════════ -->
|
|
473
|
-
<section class="section" id="problem">
|
|
474
|
-
<div class="container">
|
|
475
|
-
<div class="animate-on-scroll" style="text-align:center">
|
|
476
|
-
<div class="section-label"><span class="lang-en">The Problem</span><span class="lang-de">Das Problem</span></div>
|
|
477
|
-
<h2 class="section-title"><span class="lang-en">Claude Code is powerful.<br>Setting it up shouldn't be painful.</span><span class="lang-de">Claude Code ist mächtig.<br>Das Setup sollte es nicht sein.</span></h2>
|
|
478
|
-
</div>
|
|
479
|
-
<div class="ba-grid">
|
|
480
|
-
<div class="ba-col before animate-on-scroll">
|
|
481
|
-
<h3><span class="lang-en">Without cc-starter</span><span class="lang-de">Ohne cc-starter</span></h3>
|
|
482
|
-
<ul>
|
|
483
|
-
<li><span class="lang-en">Every session starts from scratch</span><span class="lang-de">Jede Session startet von Null</span></li>
|
|
484
|
-
<li><span class="lang-en">Claude reads entire 500-line files</span><span class="lang-de">Claude liest ganze 500-Zeilen-Dateien</span></li>
|
|
485
|
-
<li><span class="lang-en">No memory between sessions</span><span class="lang-de">Kein Gedächtnis zwischen Sessions</span></li>
|
|
486
|
-
<li><span class="lang-en">Manual plugin setup, one by one</span><span class="lang-de">Manuelles Plugin-Setup</span></li>
|
|
487
|
-
<li><span class="lang-en">No idea what your project costs</span><span class="lang-de">Keine Ahnung was dein Projekt kostet</span></li>
|
|
488
|
-
</ul>
|
|
489
|
-
</div>
|
|
490
|
-
<div class="ba-col after animate-on-scroll">
|
|
491
|
-
<h3><span class="lang-en">With cc-starter</span><span class="lang-de">Mit cc-starter</span></h3>
|
|
492
|
-
<ul>
|
|
493
|
-
<li><span class="lang-en">Rules, memory, and context — ready from start</span><span class="lang-de">Regeln, Gedächtnis und Kontext — sofort bereit</span></li>
|
|
494
|
-
<li><span class="lang-en">Extract only types and signatures — 90% fewer tokens</span><span class="lang-de">Nur Types und Signaturen extrahieren — 90% weniger Tokens</span></li>
|
|
495
|
-
<li><span class="lang-en">Persistent memory across every session</span><span class="lang-de">Persistentes Gedächtnis über alle Sessions</span></li>
|
|
496
|
-
<li><span class="lang-en">One-click plugin presets</span><span class="lang-de">Plugin-Presets mit einem Klick</span></li>
|
|
497
|
-
<li><span class="lang-en">COCOMO estimation tells you instantly</span><span class="lang-de">COCOMO-Schätzung sagt es dir sofort</span></li>
|
|
498
|
-
</ul>
|
|
499
|
-
</div>
|
|
500
|
-
</div>
|
|
501
|
-
</div>
|
|
502
|
-
</section>
|
|
503
|
-
|
|
504
|
-
<div class="section-divider"></div>
|
|
505
|
-
|
|
506
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
507
|
-
FEATURE GRID
|
|
508
|
-
═══════════════════════════════════════════════════════════ -->
|
|
509
|
-
<section class="section" id="features">
|
|
510
|
-
<div class="container">
|
|
511
|
-
<div class="animate-on-scroll" style="text-align:center">
|
|
512
|
-
<div class="section-label"><span class="lang-en">What You Get</span><span class="lang-de">Was du bekommst</span></div>
|
|
513
|
-
<h2 class="section-title"><span class="lang-en">Everything you need.<br class="hide-mobile">Nothing you don't.</span><span class="lang-de">Alles was du brauchst.<br class="hide-mobile">Nichts, was du nicht brauchst.</span></h2>
|
|
514
|
-
<p class="section-subtitle" style="margin:0 auto"><span class="lang-en">Six tools that make every Claude Code session faster, cheaper, and smarter.</span><span class="lang-de">Sechs Tools, die jede Claude Code Session schneller, günstiger und smarter machen.</span></p>
|
|
515
|
-
</div>
|
|
516
|
-
<div class="card-grid">
|
|
517
|
-
<div class="card animate-on-scroll">
|
|
518
|
-
<span class="icon" aria-hidden="true">⚡</span>
|
|
519
|
-
<h3><span class="lang-en">Token-Saving Scripts</span><span class="lang-de">Token-sparende Scripts</span></h3>
|
|
520
|
-
<p><span class="lang-en">Stop wasting tokens. <code>vibe-code.js</code> extracts only what Claude needs — types, function signatures, imports, directory trees. ~90% fewer tokens per file read.</span><span class="lang-de">Schluss mit Token-Verschwendung. <code>vibe-code.js</code> extrahiert nur was Claude braucht — Types, Funktions-Signaturen, Imports, Verzeichnisbäume. ~90% weniger Tokens pro Datei.</span></p>
|
|
521
|
-
<div class="mini-term"><span style="color:var(--text-dim)">$</span> vibe-code.js types api.ts
|
|
522
|
-
<span style="color:var(--green)">✓</span> 200 tokens <span style="color:var(--text-dim)">(saved 1,800)</span></div>
|
|
523
|
-
</div>
|
|
524
|
-
<div class="card animate-on-scroll">
|
|
525
|
-
<span class="icon" aria-hidden="true">💰</span>
|
|
526
|
-
<h3><span class="lang-en">COCOMO Estimation</span><span class="lang-de">COCOMO-Schätzung</span></h3>
|
|
527
|
-
<p><span class="lang-en">Know what your project is worth. COCOMO-II model calculates effort, schedule, team size, and cost based on your actual codebase.</span><span class="lang-de">Wisse, was dein Projekt wert ist. Das COCOMO-II-Modell berechnet Aufwand, Zeitplan, Teamgröße und Kosten basierend auf deiner Codebase.</span></p>
|
|
528
|
-
<div class="mini-term"><span style="color:var(--text-dim)">Effort:</span> 5.9 person-months
|
|
529
|
-
<span style="color:var(--text-dim)">Schedule:</span> 5.3 months
|
|
530
|
-
<span style="color:var(--cyan)">Cost:</span> <span style="color:var(--text-bright)">€47,040</span> <span style="color:var(--text-dim)">(at €80/h)</span></div>
|
|
531
|
-
</div>
|
|
532
|
-
<div class="card animate-on-scroll">
|
|
533
|
-
<span class="icon" aria-hidden="true">📊</span>
|
|
534
|
-
<h3><span class="lang-en">HTML Project Report</span><span class="lang-de">HTML Projekt-Report</span></h3>
|
|
535
|
-
<p><span class="lang-en">Visual statistics at a glance. LOC by language, folder sizes, complexity hotspots, git stats — all in one beautiful HTML report.</span><span class="lang-de">Visuelle Statistiken auf einen Blick. LOC nach Sprache, Ordnergrößen, Komplexitäts-Hotspots, Git-Stats — alles in einem schönen HTML-Report.</span></p>
|
|
536
|
-
<div class="mini-term"><span style="color:var(--text-dim)">Two modes:</span>
|
|
537
|
-
<span style="color:var(--cyan)">Minimal</span> — zero dependencies
|
|
538
|
-
<span style="color:var(--purple)">Fancy</span> — with Chart.js visuals</div>
|
|
539
|
-
</div>
|
|
540
|
-
<div class="card animate-on-scroll">
|
|
541
|
-
<span class="icon" aria-hidden="true">🔌</span>
|
|
542
|
-
<h3><span class="lang-en">Plugin Presets</span><span class="lang-de">Plugin-Auswahl</span></h3>
|
|
543
|
-
<p><span class="lang-en">Best Claude Code plugins, one click. Curated presets from Minimal to Full — including superpowers, feature-dev, pr-review, frontend-design, and more.</span><span class="lang-de">Die besten Claude Code Plugins, ein Klick. Kuratierte Presets von Minimal bis Full — inklusive superpowers, feature-dev, pr-review, frontend-design und mehr.</span></p>
|
|
544
|
-
<div class="mini-term"><span style="color:var(--text-dim)">? Plugin preset:</span>
|
|
545
|
-
<span style="color:var(--cyan)">Minimal</span> → superpowers
|
|
546
|
-
<span style="color:var(--cyan)">Standard</span> → + feature-dev, pr-review
|
|
547
|
-
<span style="color:var(--cyan)">Full</span> → + frontend, ui-ux-pro</div>
|
|
548
|
-
</div>
|
|
549
|
-
<div class="card animate-on-scroll">
|
|
550
|
-
<span class="icon" aria-hidden="true">🧠</span>
|
|
551
|
-
<h3><span class="lang-en">Memory System</span><span class="lang-de">Gedächtnis-System</span></h3>
|
|
552
|
-
<p><span class="lang-en">Claude remembers everything. Persistent memory across sessions — user preferences, project decisions, feedback, and references. Never re-explain twice.</span><span class="lang-de">Claude erinnert sich an alles. Persistentes Gedächtnis über Sessions hinweg — Präferenzen, Projekt-Entscheidungen, Feedback und Referenzen. Nie wieder doppelt erklären.</span></p>
|
|
553
|
-
<div class="mini-term"><span style="color:var(--text-dim)">.claude/memory/</span>
|
|
554
|
-
<span style="color:var(--text-bright)">MEMORY.md</span> → persists across sessions
|
|
555
|
-
<span style="color:var(--text-dim)">+ auto-detected tech stack</span></div>
|
|
556
|
-
</div>
|
|
557
|
-
<div class="card animate-on-scroll">
|
|
558
|
-
<span class="icon" aria-hidden="true">📋</span>
|
|
559
|
-
<h3><span class="lang-en">Smart Rules</span><span class="lang-de">Bewährte Regeln</span></h3>
|
|
560
|
-
<p><span class="lang-en">Battle-tested from production. Task tracking, automatic re-planning when things derail, diff-before-done checks, and token efficiency rules baked in.</span><span class="lang-de">Praxiserprobt aus der Produktion. Task-Tracking, automatisches Umplanen bei Problemen, Diff-vor-Fertig-Checks und Token-Effizienz-Regeln eingebaut.</span></p>
|
|
561
|
-
<div class="mini-term"><span style="color:var(--text-dim)">.claude/rules/</span>
|
|
562
|
-
<span style="color:var(--text-bright)">general.md</span> → task tracking
|
|
563
|
-
<span style="color:var(--text-bright)">standards.md</span> → code quality
|
|
564
|
-
<span style="color:var(--text-bright)">workflow.md</span> → efficiency</div>
|
|
565
|
-
</div>
|
|
566
|
-
</div>
|
|
567
|
-
</div>
|
|
568
|
-
</section>
|
|
569
|
-
|
|
570
|
-
<div class="section-divider"></div>
|
|
571
|
-
|
|
572
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
573
|
-
PLUGIN DEEP-DIVE
|
|
574
|
-
═══════════════════════════════════════════════════════════ -->
|
|
575
|
-
<section class="section" id="plugins">
|
|
576
|
-
<div class="container">
|
|
577
|
-
<div class="animate-on-scroll" style="text-align:center">
|
|
578
|
-
<div class="section-label"><span class="lang-en">Plugin Ecosystem</span><span class="lang-de">Plugin-Ökosystem</span></div>
|
|
579
|
-
<h2 class="section-title"><span class="lang-en">Curated plugins.<br>Zero configuration.</span><span class="lang-de">Kuratierte Plugins.<br>Null Konfiguration.</span></h2>
|
|
580
|
-
<p class="section-subtitle" style="margin:0 auto"><span class="lang-en">Hand-picked plugins that unlock advanced Claude Code workflows. Choose a preset or pick individually.</span><span class="lang-de">Handverlesene Plugins für fortgeschrittene Claude Code Workflows. Wähle ein Preset oder einzelne Plugins.</span></p>
|
|
581
|
-
</div>
|
|
582
|
-
<div class="plugin-table-wrap animate-on-scroll">
|
|
583
|
-
<table class="plugin-table">
|
|
584
|
-
<thead>
|
|
585
|
-
<tr>
|
|
586
|
-
<th>Plugin</th>
|
|
587
|
-
<th><span class="lang-en">What It Does</span><span class="lang-de">Was es macht</span></th>
|
|
588
|
-
</tr>
|
|
589
|
-
</thead>
|
|
590
|
-
<tbody>
|
|
591
|
-
<tr>
|
|
592
|
-
<td>superpowers</td>
|
|
593
|
-
<td><span class="lang-en">TDD, systematic debugging, brainstorming, plan writing & execution, code review, parallel agents</span><span class="lang-de">TDD, systematisches Debugging, Brainstorming, Planung & Ausführung, Code Review, parallele Agents</span></td>
|
|
594
|
-
</tr>
|
|
595
|
-
<tr>
|
|
596
|
-
<td>feature-dev</td>
|
|
597
|
-
<td><span class="lang-en">Code explorer agent, architecture designer, quality reviewer</span><span class="lang-de">Code-Explorer-Agent, Architektur-Designer, Qualitäts-Reviewer</span></td>
|
|
598
|
-
</tr>
|
|
599
|
-
<tr>
|
|
600
|
-
<td>pr-review-toolkit</td>
|
|
601
|
-
<td><span class="lang-en">PR test analyzer, silent-failure-hunter, comment analyzer, type-design analyzer, code simplifier</span><span class="lang-de">PR-Test-Analyzer, Silent-Failure-Hunter, Kommentar-Analyzer, Type-Design-Analyzer, Code-Simplifier</span></td>
|
|
602
|
-
</tr>
|
|
603
|
-
<tr>
|
|
604
|
-
<td>frontend-design</td>
|
|
605
|
-
<td><span class="lang-en">Production-grade UI/UX implementation with distinctive design language</span><span class="lang-de">Produktionsreife UI/UX-Implementierung mit eigenständiger Design-Sprache</span></td>
|
|
606
|
-
</tr>
|
|
607
|
-
<tr>
|
|
608
|
-
<td>ui-ux-pro-max</td>
|
|
609
|
-
<td><span class="lang-en">AI design intelligence — 67 UI styles, 161 color palettes, 57 font pairings, industry-specific rules</span><span class="lang-de">KI-Design-Intelligenz — 67 UI-Styles, 161 Farbpaletten, 57 Font-Pairings, branchenspezifische Regeln</span></td>
|
|
610
|
-
</tr>
|
|
611
|
-
<tr>
|
|
612
|
-
<td>claude-seo</td>
|
|
613
|
-
<td><span class="lang-en">SEO audits, E-E-A-T analysis, schema markup, Core Web Vitals, AI search optimization (Google AI Overviews, ChatGPT, Perplexity)</span><span class="lang-de">SEO-Audits, E-E-A-T-Analyse, Schema-Markup, Core Web Vitals, KI-Suchoptimierung (Google AI Overviews, ChatGPT, Perplexity)</span></td>
|
|
614
|
-
</tr>
|
|
615
|
-
</tbody>
|
|
616
|
-
</table>
|
|
617
|
-
</div>
|
|
618
|
-
<div class="preset-chips animate-on-scroll">
|
|
619
|
-
<div class="preset-chip">
|
|
620
|
-
<h4>Minimal</h4>
|
|
621
|
-
<p>superpowers</p>
|
|
622
|
-
</div>
|
|
623
|
-
<div class="preset-chip">
|
|
624
|
-
<h4>Standard</h4>
|
|
625
|
-
<p>superpowers, feature-dev, pr-review-toolkit</p>
|
|
626
|
-
</div>
|
|
627
|
-
<div class="preset-chip">
|
|
628
|
-
<h4>Full</h4>
|
|
629
|
-
<p>superpowers, feature-dev, pr-review-toolkit, frontend-design, ui-ux-pro-max, claude-seo</p>
|
|
630
|
-
</div>
|
|
631
|
-
</div>
|
|
632
|
-
</div>
|
|
633
|
-
</section>
|
|
634
|
-
|
|
635
|
-
<div class="section-divider"></div>
|
|
636
|
-
|
|
637
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
638
|
-
TERMINAL DEMO
|
|
639
|
-
═══════════════════════════════════════════════════════════ -->
|
|
640
|
-
<section class="section" id="demo">
|
|
641
|
-
<div class="container">
|
|
642
|
-
<div class="animate-on-scroll" style="text-align:center">
|
|
643
|
-
<div class="section-label"><span class="lang-en">See It In Action</span><span class="lang-de">In Aktion sehen</span></div>
|
|
644
|
-
<h2 class="section-title"><span class="lang-en">30 seconds to a<br>perfect setup.</span><span class="lang-de">30 Sekunden bis zum<br>perfekten Setup.</span></h2>
|
|
645
|
-
</div>
|
|
646
|
-
<div class="terminal animate-on-scroll" id="terminal-demo">
|
|
647
|
-
<div class="terminal-bar">
|
|
648
|
-
<div class="terminal-dot"></div>
|
|
649
|
-
<div class="terminal-dot"></div>
|
|
650
|
-
<div class="terminal-dot"></div>
|
|
651
|
-
<span>Terminal</span>
|
|
652
|
-
</div>
|
|
653
|
-
<div class="terminal-body" id="terminal-body">
|
|
654
|
-
<span class="cursor-blink" id="terminal-cursor"></span>
|
|
655
|
-
</div>
|
|
656
|
-
</div>
|
|
657
|
-
</div>
|
|
658
|
-
</section>
|
|
659
|
-
|
|
660
|
-
<div class="section-divider"></div>
|
|
661
|
-
|
|
662
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
663
|
-
COMPARISON TABLE
|
|
664
|
-
═══════════════════════════════════════════════════════════ -->
|
|
665
|
-
<section class="section" id="compare">
|
|
666
|
-
<div class="container">
|
|
667
|
-
<div class="animate-on-scroll" style="text-align:center">
|
|
668
|
-
<div class="section-label"><span class="lang-en">How It Compares</span><span class="lang-de">Im Vergleich</span></div>
|
|
669
|
-
<h2 class="section-title"><span class="lang-en">Not all starters<br>are created equal.</span><span class="lang-de">Nicht alle Starter<br>sind gleich.</span></h2>
|
|
670
|
-
</div>
|
|
671
|
-
<div class="comparison-wrap animate-on-scroll">
|
|
672
|
-
<table class="comparison-table">
|
|
673
|
-
<thead>
|
|
674
|
-
<tr>
|
|
675
|
-
<th><span class="lang-en">Feature</span><span class="lang-de">Feature</span></th>
|
|
676
|
-
<th class="highlight-col">cc-starter</th>
|
|
677
|
-
<th>TheDecipherist</th>
|
|
678
|
-
<th>serpro69</th>
|
|
679
|
-
<th>cloudnative-co</th>
|
|
680
|
-
</tr>
|
|
681
|
-
</thead>
|
|
682
|
-
<tbody>
|
|
683
|
-
<tr>
|
|
684
|
-
<td><span class="lang-en">Token-saving scripts</span><span class="lang-de">Token-sparende Scripts</span></td>
|
|
685
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
686
|
-
<td><span class="cross">—</span></td>
|
|
687
|
-
<td><span class="cross">—</span></td>
|
|
688
|
-
<td><span class="cross">—</span></td>
|
|
689
|
-
</tr>
|
|
690
|
-
<tr>
|
|
691
|
-
<td><span class="lang-en">COCOMO estimation</span><span class="lang-de">COCOMO-Schätzung</span></td>
|
|
692
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
693
|
-
<td><span class="cross">—</span></td>
|
|
694
|
-
<td><span class="cross">—</span></td>
|
|
695
|
-
<td><span class="cross">—</span></td>
|
|
696
|
-
</tr>
|
|
697
|
-
<tr>
|
|
698
|
-
<td><span class="lang-en">HTML project report</span><span class="lang-de">HTML Projekt-Report</span></td>
|
|
699
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
700
|
-
<td><span class="cross">—</span></td>
|
|
701
|
-
<td><span class="cross">—</span></td>
|
|
702
|
-
<td><span class="cross">—</span></td>
|
|
703
|
-
</tr>
|
|
704
|
-
<tr>
|
|
705
|
-
<td><span class="lang-en">Interactive wizard</span><span class="lang-de">Interaktiver Wizard</span></td>
|
|
706
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
707
|
-
<td><span class="cross">—</span></td>
|
|
708
|
-
<td><span class="check">✓</span></td>
|
|
709
|
-
<td><span class="cross">—</span></td>
|
|
710
|
-
</tr>
|
|
711
|
-
<tr>
|
|
712
|
-
<td><span class="lang-en">Plugin installation</span><span class="lang-de">Plugin-Installation</span></td>
|
|
713
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
714
|
-
<td><span class="cross">—</span></td>
|
|
715
|
-
<td><span class="cross">—</span></td>
|
|
716
|
-
<td><span class="cross">—</span></td>
|
|
717
|
-
</tr>
|
|
718
|
-
<tr>
|
|
719
|
-
<td><span class="lang-en">Memory system</span><span class="lang-de">Gedächtnis-System</span></td>
|
|
720
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
721
|
-
<td><span class="cross">—</span></td>
|
|
722
|
-
<td><span class="check">✓</span></td>
|
|
723
|
-
<td><span class="cross">—</span></td>
|
|
724
|
-
</tr>
|
|
725
|
-
<tr>
|
|
726
|
-
<td><span class="lang-en">Tech stack detection</span><span class="lang-de">Tech-Stack-Erkennung</span></td>
|
|
727
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
728
|
-
<td><span class="cross">—</span></td>
|
|
729
|
-
<td><span class="cross">—</span></td>
|
|
730
|
-
<td><span class="cross">—</span></td>
|
|
731
|
-
</tr>
|
|
732
|
-
<tr>
|
|
733
|
-
<td>i18n (DE/EN)</td>
|
|
734
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
735
|
-
<td><span class="cross">—</span></td>
|
|
736
|
-
<td><span class="cross">—</span></td>
|
|
737
|
-
<td><span class="cross">—</span></td>
|
|
738
|
-
</tr>
|
|
739
|
-
<tr>
|
|
740
|
-
<td><span class="lang-en">Zero output deps</span><span class="lang-de">Keine Output-Deps</span></td>
|
|
741
|
-
<td class="highlight-col"><span class="check">✓</span></td>
|
|
742
|
-
<td><span class="check">✓</span></td>
|
|
743
|
-
<td><span class="check">✓</span></td>
|
|
744
|
-
<td><span class="check">✓</span></td>
|
|
745
|
-
</tr>
|
|
746
|
-
</tbody>
|
|
747
|
-
</table>
|
|
748
|
-
</div>
|
|
749
|
-
</div>
|
|
750
|
-
</section>
|
|
751
|
-
|
|
752
|
-
<div class="section-divider"></div>
|
|
753
|
-
|
|
754
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
755
|
-
CTA
|
|
756
|
-
═══════════════════════════════════════════════════════════ -->
|
|
757
|
-
<section class="section cta-section" id="install">
|
|
758
|
-
<div class="container">
|
|
759
|
-
<div class="animate-on-scroll">
|
|
760
|
-
<div class="section-label"><span class="lang-en">Get Started</span><span class="lang-de">Loslegen</span></div>
|
|
761
|
-
<h2 class="section-title"><span class="lang-en">Ready to supercharge<br>your Claude Code?</span><span class="lang-de">Bereit, dein Claude Code<br>aufzuladen?</span></h2>
|
|
762
|
-
<div class="steps-row">
|
|
763
|
-
<div class="step">
|
|
764
|
-
<span class="step-num">1</span>
|
|
765
|
-
<span class="lang-en">Open your terminal</span><span class="lang-de">Terminal öffnen</span>
|
|
766
|
-
</div>
|
|
767
|
-
<div class="step-arrow" aria-hidden="true">→</div>
|
|
768
|
-
<div class="step">
|
|
769
|
-
<span class="step-num">2</span>
|
|
770
|
-
<span class="lang-en">Navigate to your project folder</span><span class="lang-de">Ins Projektverzeichnis wechseln</span>
|
|
771
|
-
</div>
|
|
772
|
-
<div class="step-arrow" aria-hidden="true">→</div>
|
|
773
|
-
<div class="step">
|
|
774
|
-
<span class="step-num">3</span>
|
|
775
|
-
<span class="lang-en">Run the command</span><span class="lang-de">Befehl ausführen</span>
|
|
776
|
-
</div>
|
|
777
|
-
</div>
|
|
778
|
-
<div class="cmd-box-lg" id="cta-copy" role="button" tabindex="0" aria-label="Copy npx cc-starter to clipboard">
|
|
779
|
-
<span>npx cc-starter</span>
|
|
780
|
-
<span class="copy-icon" aria-hidden="true">⎘</span>
|
|
781
|
-
</div>
|
|
782
|
-
<p class="cta-note"><span class="lang-en">Requires Node.js 18+. Claude Code CLI optional but recommended.</span><span class="lang-de">Benötigt Node.js 18+. Claude Code CLI optional, aber empfohlen.</span></p>
|
|
783
|
-
<div class="cta-links">
|
|
784
|
-
<a href="https://github.com/WAGMIStudios/cc-starter" target="_blank" rel="noopener">GitHub Repository</a>
|
|
785
|
-
<a href="https://www.npmjs.com/package/cc-starter" target="_blank" rel="noopener">npm Package</a>
|
|
786
|
-
<a href="https://github.com/WAGMIStudios/cc-starter#readme" target="_blank" rel="noopener"><span class="lang-en">Documentation</span><span class="lang-de">Dokumentation</span></a>
|
|
787
|
-
</div>
|
|
788
|
-
</div>
|
|
789
|
-
</div>
|
|
790
|
-
</section>
|
|
791
|
-
|
|
792
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
793
|
-
FOOTER
|
|
794
|
-
═══════════════════════════════════════════════════════════ -->
|
|
795
|
-
<footer>
|
|
796
|
-
<div class="footer-links">
|
|
797
|
-
<a href="https://www.linkedin.com/in/lars-fanter" target="_blank" rel="noopener"><span class="lang-en">Built by Lars Fanter</span><span class="lang-de">Entwickelt von Lars Fanter</span></a>
|
|
798
|
-
<a href="https://github.com/WAGMIStudios/cc-starter" target="_blank" rel="noopener">GitHub</a>
|
|
799
|
-
<a href="https://www.npmjs.com/package/cc-starter" target="_blank" rel="noopener">npm</a>
|
|
800
|
-
<span>MIT License</span>
|
|
801
|
-
</div>
|
|
802
|
-
<div class="built-with"><span class="lang-en">Built with Claude Code + cc-starter</span><span class="lang-de">Erstellt mit Claude Code + cc-starter</span></div>
|
|
803
|
-
</footer>
|
|
804
|
-
|
|
805
|
-
<!-- ═══════════════════════════════════════════════════════════
|
|
806
|
-
JAVASCRIPT
|
|
807
|
-
═══════════════════════════════════════════════════════════ -->
|
|
808
|
-
<script>
|
|
809
|
-
/* ─── Scroll-triggered animations ─── */
|
|
810
|
-
const observer = new IntersectionObserver((entries) => {
|
|
811
|
-
entries.forEach(entry => {
|
|
812
|
-
if (entry.isIntersecting) {
|
|
813
|
-
entry.target.classList.add('visible');
|
|
814
|
-
}
|
|
815
|
-
});
|
|
816
|
-
}, { threshold: 0.1 });
|
|
817
|
-
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
|
|
818
|
-
|
|
819
|
-
/* ─── Cursor-following glow on cards ─── */
|
|
820
|
-
document.querySelectorAll('.card').forEach(card => {
|
|
821
|
-
card.addEventListener('mousemove', (e) => {
|
|
822
|
-
const rect = card.getBoundingClientRect();
|
|
823
|
-
card.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
|
|
824
|
-
card.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
|
|
825
|
-
});
|
|
826
|
-
});
|
|
827
|
-
|
|
828
|
-
/* ─── Copy to clipboard ─── */
|
|
829
|
-
function copyCommand(btnEl, toastEl) {
|
|
830
|
-
navigator.clipboard.writeText('npx cc-starter').then(() => {
|
|
831
|
-
if (toastEl) {
|
|
832
|
-
toastEl.classList.add('show');
|
|
833
|
-
setTimeout(() => toastEl.classList.remove('show'), 1500);
|
|
834
|
-
}
|
|
835
|
-
});
|
|
836
|
-
}
|
|
837
|
-
document.getElementById('hero-copy').addEventListener('click', () => {
|
|
838
|
-
copyCommand(null, document.getElementById('hero-toast'));
|
|
839
|
-
});
|
|
840
|
-
document.getElementById('hero-copy').addEventListener('keydown', (e) => {
|
|
841
|
-
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); copyCommand(null, document.getElementById('hero-toast')); }
|
|
842
|
-
});
|
|
843
|
-
document.getElementById('cta-copy').addEventListener('click', () => {
|
|
844
|
-
copyCommand(null, null);
|
|
845
|
-
const el = document.getElementById('cta-copy');
|
|
846
|
-
const cmdSpan = el.querySelector('span');
|
|
847
|
-
const orig = cmdSpan.textContent;
|
|
848
|
-
const lang = document.documentElement.getAttribute('data-lang');
|
|
849
|
-
cmdSpan.textContent = lang === 'de' ? 'Kopiert!' : 'Copied!';
|
|
850
|
-
setTimeout(() => { cmdSpan.textContent = orig; }, 1500);
|
|
851
|
-
});
|
|
852
|
-
document.getElementById('cta-copy').addEventListener('keydown', (e) => {
|
|
853
|
-
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); document.getElementById('cta-copy').click(); }
|
|
854
|
-
});
|
|
855
|
-
|
|
856
|
-
/* ─── Terminal typewriter animation ─── */
|
|
857
|
-
const terminalLines = [
|
|
858
|
-
{ text: '$ npx cc-starter', cls: 'prompt', delay: 60 },
|
|
859
|
-
{ text: '', cls: '', delay: 400 },
|
|
860
|
-
{ text: ' \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557', cls: 'purple', delay: 0 },
|
|
861
|
-
{ text: ' \u2551 cc-starter v1.0.5 \u2551', cls: 'purple', delay: 0 },
|
|
862
|
-
{ text: ' \u2551 Claude Code Project Kickstart \u2551', cls: 'purple', delay: 0 },
|
|
863
|
-
{ text: ' \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D', cls: 'purple', delay: 300 },
|
|
864
|
-
{ text: '', cls: '', delay: 200 },
|
|
865
|
-
{ text: ' ? Sprache / Language: English', cls: 'highlight', delay: 40 },
|
|
866
|
-
{ text: ' ? Project name: my-saas-app', cls: 'highlight', delay: 40 },
|
|
867
|
-
{ text: ' ? Short description: SaaS dashboard with analytics', cls: 'highlight', delay: 40 },
|
|
868
|
-
{ text: '', cls: '', delay: 300 },
|
|
869
|
-
{ text: ' Detected: TypeScript, Next.js, Tailwind CSS', cls: '', delay: 30 },
|
|
870
|
-
{ text: '', cls: '', delay: 200 },
|
|
871
|
-
{ text: ' ? Plugin preset: Standard', cls: 'highlight', delay: 40 },
|
|
872
|
-
{ text: '', cls: '', delay: 400 },
|
|
873
|
-
{ text: ' \u2713 .claude/rules/ 4 files', cls: 'success', delay: 0 },
|
|
874
|
-
{ text: ' \u2713 .claude/memory/ MEMORY.md', cls: 'success', delay: 0 },
|
|
875
|
-
{ text: ' \u2713 CLAUDE.md created', cls: 'success', delay: 0 },
|
|
876
|
-
{ text: ' \u2713 scripts/stats/ 4 tools', cls: 'success', delay: 0 },
|
|
877
|
-
{ text: ' \u2713 Plugins installed 3 plugins', cls: 'success', delay: 200 },
|
|
878
|
-
{ text: '', cls: '', delay: 100 },
|
|
879
|
-
{ text: ' Done! Run \'claude\' to start coding.', cls: 'highlight', delay: 30 },
|
|
880
|
-
];
|
|
881
|
-
|
|
882
|
-
let terminalPlayed = false;
|
|
883
|
-
const terminalEl = document.getElementById('terminal-demo');
|
|
884
|
-
const termBody = document.getElementById('terminal-body');
|
|
885
|
-
const termCursor = document.getElementById('terminal-cursor');
|
|
886
|
-
|
|
887
|
-
const termObserver = new IntersectionObserver((entries) => {
|
|
888
|
-
entries.forEach(entry => {
|
|
889
|
-
if (entry.isIntersecting && !terminalPlayed) {
|
|
890
|
-
terminalPlayed = true;
|
|
891
|
-
playTerminal();
|
|
892
|
-
}
|
|
893
|
-
});
|
|
894
|
-
}, { threshold: 0.3 });
|
|
895
|
-
termObserver.observe(terminalEl);
|
|
896
|
-
|
|
897
|
-
async function playTerminal() {
|
|
898
|
-
termBody.innerHTML = '';
|
|
899
|
-
for (const line of terminalLines) {
|
|
900
|
-
const lineEl = document.createElement('div');
|
|
901
|
-
if (line.cls) lineEl.className = line.cls;
|
|
902
|
-
termBody.appendChild(lineEl);
|
|
903
|
-
|
|
904
|
-
if (line.delay > 0 && line.text.length > 0) {
|
|
905
|
-
// Typewriter
|
|
906
|
-
for (let i = 0; i < line.text.length; i++) {
|
|
907
|
-
lineEl.textContent += line.text[i];
|
|
908
|
-
termBody.scrollTop = termBody.scrollHeight;
|
|
909
|
-
await sleep(line.delay);
|
|
910
|
-
}
|
|
911
|
-
} else {
|
|
912
|
-
lineEl.textContent = line.text || '\u00A0';
|
|
913
|
-
}
|
|
914
|
-
termBody.scrollTop = termBody.scrollHeight;
|
|
915
|
-
if (line.text === '' || line.delay === 0) await sleep(80);
|
|
916
|
-
else await sleep(120);
|
|
917
|
-
}
|
|
918
|
-
// Add blinking cursor at end
|
|
919
|
-
const cursorSpan = document.createElement('span');
|
|
920
|
-
cursorSpan.className = 'cursor-blink';
|
|
921
|
-
termBody.appendChild(cursorSpan);
|
|
922
|
-
}
|
|
923
|
-
|
|
924
|
-
function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
|
|
925
|
-
|
|
926
|
-
/* ─── Smooth anchor scrolling (fallback for older browsers) ─── */
|
|
927
|
-
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
|
928
|
-
a.addEventListener('click', (e) => {
|
|
929
|
-
const target = document.querySelector(a.getAttribute('href'));
|
|
930
|
-
if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth' }); }
|
|
931
|
-
});
|
|
932
|
-
});
|
|
933
|
-
|
|
934
|
-
/* ─── Language toggle (DE/EN) ─── */
|
|
935
|
-
(function() {
|
|
936
|
-
const html = document.documentElement;
|
|
937
|
-
const langBtns = document.querySelectorAll('[data-lang-switch]');
|
|
938
|
-
|
|
939
|
-
function setLang(lang) {
|
|
940
|
-
html.setAttribute('data-lang', lang);
|
|
941
|
-
html.setAttribute('lang', lang);
|
|
942
|
-
langBtns.forEach(btn => {
|
|
943
|
-
btn.classList.toggle('active', btn.getAttribute('data-lang-switch') === lang);
|
|
944
|
-
});
|
|
945
|
-
try { localStorage.setItem('cc-starter-lang', lang); } catch(e) {}
|
|
946
|
-
}
|
|
947
|
-
|
|
948
|
-
// Determine initial language: localStorage > browser language > default EN
|
|
949
|
-
let savedLang = null;
|
|
950
|
-
try { savedLang = localStorage.getItem('cc-starter-lang'); } catch(e) {}
|
|
951
|
-
if (!savedLang) {
|
|
952
|
-
const browserLang = (navigator.language || '').toLowerCase();
|
|
953
|
-
savedLang = browserLang.startsWith('de') ? 'de' : 'en';
|
|
954
|
-
}
|
|
955
|
-
setLang(savedLang);
|
|
956
|
-
|
|
957
|
-
langBtns.forEach(btn => {
|
|
958
|
-
btn.addEventListener('click', () => {
|
|
959
|
-
setLang(btn.getAttribute('data-lang-switch'));
|
|
960
|
-
});
|
|
961
|
-
});
|
|
962
|
-
|
|
963
|
-
// Also handle the CTA copy button "Copied!" text based on language
|
|
964
|
-
const origCtaCopyHandler = document.getElementById('cta-copy');
|
|
965
|
-
// Override is handled inline already via lang-en/lang-de spans
|
|
966
|
-
})();
|
|
967
|
-
</script>
|
|
968
|
-
</body>
|
|
969
|
-
</html>
|