@touchzada/claudinho 0.1.7 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/GUIA_INICIO.md +836 -836
  2. package/README.md +288 -208
  3. package/bin/claudinho.cmd +2 -0
  4. package/dist/Landing/_prompts/loading-screen-analysis.md +227 -0
  5. package/dist/Landing/_prompts/prompt-loading-screen.md +43 -0
  6. package/dist/Landing/dark-landing-analysis.md +266 -0
  7. package/dist/Landing/index.html +1152 -0
  8. package/dist/Landing/index.v1.html +607 -0
  9. package/dist/Landing/index.v3.html +604 -0
  10. package/dist/Landing/index.v4.html +512 -0
  11. package/dist/Landing/index.v5.html +513 -0
  12. package/dist/cli.mjs +322 -242
  13. package/dist/cli.mjs.map +15 -15
  14. package/docs/advanced-setup.md +276 -276
  15. package/docs/quick-start-mac-linux.md +110 -110
  16. package/docs/quick-start-windows.md +106 -106
  17. package/package.json +2 -2
package/dist/Landing/index.v4.html ADDED
@@ -0,0 +1,512 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Claudinho — IA no terminal, do seu jeito</title>
7
+ <meta name="description" content="Rode IA no terminal com qualquer modelo. OpenAI, Gemini, Ollama, Groq, DeepSeek e mais. Open-source, grátis, feito no Brasil.">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/lucide@latest"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], serif: ['DM Serif Display', 'Georgia', 'serif'] },
15
+ colors: { bg: { DEFAULT: '#0a0a0a', light: '#111111' }, accent: { pink: '#FA93FA', purple: '#C967E8', deep: '#983AD6', blue: '#89AACC', blueDark: '#4E85BF' } }
16
+ }
17
+ }
18
+ }
19
+ </script>
20
+ <link rel="preconnect" href="https://fonts.googleapis.com">
21
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
22
+ <style>
23
+ @keyframes fade-up { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
24
+ @keyframes slide-down { from { opacity:0; transform:translateY(-20px) } to { opacity:1; transform:translateY(0) } }
25
+ @keyframes marquee { 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } }
26
+ @keyframes cursor-blink { 0%,100%{opacity:1}50%{opacity:0} }
27
+ @keyframes glow { 0%,100%{opacity:.3}50%{opacity:.7} }
28
+ @keyframes noise { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-5%)} 30%{transform:translate(3%,-3%)} 50%{transform:translate(5%,3%)} 70%{transform:translate(-3%,5%)} 90%{transform:translate(5%,-3%)} }
29
+ @keyframes word-in { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
30
+ @keyframes word-out { from { opacity:1; transform:translateY(0) } to { opacity:0; transform:translateY(-20px) } }
31
+
32
+ .fade-up { animation: fade-up 0.6s ease-out forwards; }
33
+ .delay-100 { animation-delay:.1s } .delay-200 { animation-delay:.15s } .delay-300 { animation-delay:.2s }
34
+ .delay-400 { animation-delay:.25s } .delay-500 { animation-delay:.3s } .delay-600 { animation-delay:.35s }
35
+ .delay-700 { animation-delay:.4s } .delay-800 { animation-delay:.45s }
36
+
37
+ .gradient-text-hero { background: linear-gradient(135deg, #ffffff 0%, #FA93FA 40%, #C967E8 70%, #983AD6 100%); background-size: 200% 200%; animation: fade-up 1s ease-out; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
38
+ .gradient-fill { background: linear-gradient(135deg, #FA93FA, #C967E8, #983AD6); }
39
+ .gradient-bar { background: linear-gradient(90deg, #89AACC, #4E85BF); box-shadow: 0 0 8px rgba(137,170,204,.35); }
40
+
41
+ .glass { background: rgba(255,255,255,.03); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.06); }
42
+ .card-hover { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: all .3s ease; }
43
+ .card-hover:hover { background: rgba(255,255,255,.06); border-color: rgba(201,103,232,.3); transform: translateY(-2px); }
44
+ .glass-nav { background: rgba(10,10,10,.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.05); }
45
+
46
+ .cta-btn { background: white; color: #0a0a0a; border-radius: 9999px; transition: all .3s ease; }
47
+ .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,255,255,.12); }
48
+
49
+ .marquee-track { animation: marquee 25s linear infinite; }
50
+ .cursor-blink { animation: cursor-blink 1s step-end infinite; }
51
+
52
+ /* Scroll reveal */
53
+ .reveal { opacity:0; transform:translateY(30px); transition: all .7s cubic-bezier(.16,1,.3,1); }
54
+ .reveal.visible { opacity:1; transform:translateY(0); }
55
+
56
+ /* FAQ */
57
+ .faq-answer { max-height:0; overflow:hidden; transition: max-height .3s ease; }
58
+ .faq-answer.open { max-height:300px; }
59
+ .faq-btn svg { transition: transform .2s ease; }
60
+ .faq-btn.active svg { transform: rotate(45deg); }
61
+
62
+ /* Provider tabs */
63
+ .prov-tab { transition: all .2s ease; }
64
+ .prov-tab.active { background: linear-gradient(135deg, #FA93FA, #C967E8, #983AD6); border-color: transparent; color: white; }
65
+
66
+ /* Loading screen words */
67
+ .word { position: absolute; }
68
+ .word.enter { animation: word-in .4s ease forwards; }
69
+ .word.exit { animation: word-out .4s ease forwards; }
70
+
71
+ /* Noise overlay - from Nura Health prompt */
72
+ .noise::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.05; mix-blend-mode:overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); animation: noise .8s steps(3) infinite; }
73
+
74
+ * { scrollbar-width: thin; scrollbar-color: #C967E8 #0a0a0a; }
75
+ ::-webkit-scrollbar { width:5px; }
76
+ ::-webkit-scrollbar-track { background:#0a0a0a; }
77
+ ::-webkit-scrollbar-thumb { background:#C967E8; border-radius:3px; }
78
+ </style>
79
+ </head>
80
+ <body class="bg-[#0a0a0a] text-white font-sans antialiased noise">
81
+
82
+ <!-- ====== TOP PROGRESS BAR ====== -->
83
+ <div class="fixed top-0 left-0 right-0 z-[9999]">
84
+ <div class="h-[2px] bg-white/5 w-full"><div id="landBarFill" class="h-full gradient-bar" style="width:0%"></div></div>
85
+ </div>
86
+
87
+ <!-- ====== LOADING SCREEN ====== -->
88
+ <div id="loader" class="fixed inset-0 z-[10000] bg-[#0a0a0a] flex flex-col items-center justify-center" style="transition: opacity .6s ease, visibility .6s ease;">
89
+ <div class="text-[10px] uppercase tracking-[.3em] text-zinc-500 absolute top-8 left-8 md:top-12 md:left-12 opacity-0" id="loaderBrand">claudinho</div>
90
+ <div class="relative h-16 flex items-center justify-center">
91
+ <span class="font-serif italic text-4xl md:text-6xl text-white/70 opacity-0" id="loaderWord">Codar</span>
92
+ </div>
93
+ <div class="absolute bottom-8 right-8 md:bottom-12 md:right-12 font-serif text-6xl md:text-8xl text-white/90 tabular-nums opacity-0" id="loaderCounter">000</div>
94
+ </div>
95
+
96
+ <!-- ====== MAIN PAGE (fades in after loader) ====== -->
97
+ <div id="mainContent" style="opacity:0; transition: opacity .5s ease-out;">
98
+
99
+ <!-- ====== NAVBAR (The Floating Pill) ====== -->
100
+ <nav class="fixed inset-x-0 top-0 z-50 glass-nav">
101
+ <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
102
+ <div class="flex items-center gap-3">
103
+ <div class="w-7 h-7 flex items-center justify-center text-white font-black text-xs" style="border-radius:4px; background:linear-gradient(135deg,#FA93FA,#983AD6)">C</div>
104
+ <span class="font-bold text-white/90 text-sm">claudinho</span>
105
+ </div>
106
+ <div class="hidden md:flex items-center gap-8 text-sm text-zinc-400">
107
+ <a href="#providers" class="hover:text-white transition">Providers</a>
108
+ <a href="#features" class="hover:text-white transition">Features</a>
109
+ <a href="#faq" class="hover:text-white transition">FAQ</a>
110
+ <a href="https://github.com/touchzada/Claudinho" target="_blank" class="text-white/70 border border-white/10 px-4 py-2 text-xs hover:bg-white/5 transition leading-none" style="border-radius:2px">GitHub ↗</a>
111
+ </div>
112
+ </div>
113
+ </nav>
114
+
115
+ <!-- ====== HERO ====== -->
116
+ <section class="relative min-h-screen flex items-center pt-14 overflow-hidden">
117
+ <!-- Glow orbs -->
118
+ <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full opacity-[.07]" style="background:radial-gradient(circle, #C967E8, transparent 70%)"></div>
119
+ <div class="absolute bottom-0 left-0 w-[400px] h-[400px] rounded-full opacity-[.04]" style="background:radial-gradient(circle, #89AACC, transparent 70%)"></div>
120
+
121
+ <div class="max-w-5xl mx-auto px-6 py-20 text-center relative z-10">
122
+ <!-- Announcement Pill -->
123
+ <div class="inline-flex items-center gap-3 px-4 py-2 mb-8 glass" style="border-radius:9999px;">
124
+ <div class="w-6 h-6 gradient-fill flex items-center justify-center" style="border-radius:4px">
125
+ <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
126
+ </div>
127
+ <span class="text-xs text-zinc-300">Usado por devs. Roda em qualquer modelo.</span>
128
+ </div>
129
+
130
+ <!-- Headline -->
131
+ <h1 class="font-serif text-5xl md:text-7xl lg:text-8xl leading-[.95] mb-6" style="font-family:'DM Serif Display',serif">
132
+ <span class="gradient-text-hero">IA no terminal.</span><br>
133
+ <span class="text-white/90">Do seu jeito.</span>
134
+ </h1>
135
+
136
+ <!-- Subheadline -->
137
+ <p class="text-lg md:text-xl text-zinc-400 max-w-xl mx-auto leading-relaxed mb-10">
138
+ OpenAI, Gemini, Ollama, Groq, DeepSeek e mais.<br>
139
+ Uma instalação. Uma API key. Funciona.
140
+ </p>
141
+
142
+ <!-- CTA -->
143
+ <div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-12">
144
+ <a href="#terminal" class="cta-btn px-7 py-3.5 text-sm font-medium flex items-center gap-2.5">
145
+ <span>Ver funcionando</span>
146
+ <div class="arrow-icon w-5 h-5 flex items-center justify-center">
147
+ <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-7-7l7 7-7 7"/></svg>
148
+ </div>
149
+ </a>
150
+ <a href="https://github.com/touchzada/Claudinho" target="_blank" class="px-7 py-3.5 border border-white/10 text-zinc-300 text-sm hover:bg-white/5 hover:border-white/20 transition leading-none" style="border-radius:9999px">
151
+ GitHub
152
+ </a>
153
+ </div>
154
+
155
+ <!-- Friction remover -->
156
+ <p class="text-xs text-zinc-500">Instala em 30s. Sem cartão. Sem tracking.</p>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- ====== STATS ====== -->
161
+ <section class="border-y border-white/5 bg-[#0a0a0a]">
162
+ <div class="max-w-6xl mx-auto px-6 py-10 grid grid-cols-2 md:grid-cols-4 gap-8">
163
+ <div class="text-center"><div class="text-3xl font-mono font-bold gradient-text-accent">11</div><div class="text-[10px] uppercase tracking-wider text-zinc-500 mt-1">Providers</div></div>
164
+ <div class="text-center"><div class="text-3xl font-mono font-bold gradient-text-accent">45</div><div class="text-[10px] uppercase tracking-wider text-zinc-500 mt-1">Tools</div></div>
165
+ <div class="text-center"><div class="text-3xl font-mono font-bold gradient-text-accent">~100</div><div class="text-[10px] uppercase tracking-wider text-zinc-500 mt-1">Commands</div></div>
166
+ <div class="text-center"><div class="text-3xl font-mono font-bold gradient-text-accent">MIT</div><div class="text-[10px] uppercase tracking-wider text-zinc-500 mt-1">License</div></div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- ====== LOGO/PROVIDER MARQUEE ====== -->
171
+ <section class="border-b border-white/5 bg-black/30 overflow-hidden">
172
+ <div class="flex marquee-track whitespace-nowrap py-5">
173
+ <div class="flex items-center gap-6 px-6">
174
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">OpenAI</span>
175
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Anthropic</span>
176
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Google Gemini</span>
177
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Ollama</span>
178
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Groq</span>
179
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">DeepSeek</span>
180
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Mistral</span>
181
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Together AI</span>
182
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">LM Studio</span>
183
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">OpenRouter</span>
184
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Azure OpenAI</span>
185
+ </div>
186
+ <div class="flex items-center gap-6 px-6">
187
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">OpenAI</span>
188
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Anthropic</span>
189
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Google Gemini</span>
190
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Ollama</span>
191
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Groq</span>
192
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">DeepSeek</span>
193
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Mistral</span>
194
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Together AI</span>
195
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">LM Studio</span>
196
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">OpenRouter</span>
197
+ <span class="px-5 py-1.5 glass text-xs font-medium text-zinc-300" style="border-radius:2px">Azure OpenAI</span>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- ====== TERMINAL DEMO ====== -->
203
+ <section id="terminal" class="py-24 relative">
204
+ <div class="max-w-3xl mx-auto px-6">
205
+ <div class="text-center mb-12 reveal">
206
+ <p class="text-xs uppercase tracking-[.2em] text-zinc-500 mb-3">Veja funcionando</p>
207
+ <h2 class="font-serif text-3xl md:text-4xl text-white/90">Poder real. Modelo que tu escolher.</h2>
208
+ </div>
209
+ <div class="glass rounded-xl overflow-hidden border border-white/10 reveal">
210
+ <div class="flex items-center gap-2 px-4 py-3 border-b border-white/5 bg-white/[.02]">
211
+ <div class="w-2.5 h-2.5 rounded-full bg-red-500/70"></div>
212
+ <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/70"></div>
213
+ <div class="w-2.5 h-2.5 rounded-full bg-green-500/70"></div>
214
+ <span class="ml-2 text-[10px] text-zinc-500 font-mono">claudinho v0.1.8</span>
215
+ </div>
216
+ <div class="p-6 font-mono text-sm leading-relaxed">
217
+ <div class="text-zinc-400"><span class="text-pine-400" style="color:#89AACC">➜</span> <span style="color:#C967E8">~</span> claudinho</div>
218
+ <div class="text-zinc-500 mt-2"><span style="color:#89AACC">◐</span> conectado a <span class="text-white">OpenRouter</span> · qwen/qwen3.6-plus:free</div>
219
+ <div class="mt-4" style="color:#C967E8">&nbsp;&nbsp;claudinho&gt; <span class="text-zinc-300">me mostra os arquivos deste projeto</span></div>
220
+ <div class="text-zinc-500 mt-1"><span style="color:#89AACC">[Glob]</span> src/commands/**/*.ts → <span class="text-white">1.956 arquivos</span></div>
221
+ <div class="text-zinc-500 mt-1"><span style="color:#89AACC">[Bash]</span> find . -name "*.ts" | wc -l → <span class="text-white">1956</span></div>
222
+ <div class="mt-4" style="color:#C967E8">&nbsp;&nbsp;claudinho&gt; <span class="text-zinc-300">cria uma API REST com Express</span></div>
223
+ <div class="text-zinc-500 mt-1"><span style="color:#89AACC">[FileWrite]</span> package.json, server.js, routes/...</div>
224
+ <div class="text-zinc-500 mt-1"><span style="color:#89AACC">[Done]</span> 3 arquivos · 247 linhas</div>
225
+ <div class="mt-4">&nbsp;&nbsp;<span class="cursor-blink text-zinc-400">_</span></div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- ====== PROVIDERS ====== -->
232
+ <section id="providers" class="py-24 bg-white/[.01]">
233
+ <div class="max-w-6xl mx-auto px-6">
234
+ <div class="text-center mb-12 reveal">
235
+ <p class="text-xs uppercase tracking-[.2em] text-zinc-500 mb-3">Multi-Provider</p>
236
+ <h2 class="font-serif text-3xl md:text-4xl text-white/90">Escolha teu provider. <span class="gradient-text-accent">Qualquer um funciona.</span></h2>
237
+ <p class="text-zinc-500 max-w-md mx-auto mt-3">Onze opções. A API key é tua. A escolha é tua.</p>
238
+ </div>
239
+
240
+ <!-- Setup -->
241
+ <div class="max-w-xl mx-auto mb-12 reveal">
242
+ <div class="glass p-5 border border-white/10" style="border-radius:4px">
243
+ <div class="text-[10px] uppercase tracking-wider text-zinc-500 mb-3">Setup (todos os providers OpenAI-compatible)</div>
244
+ <div class="font-mono text-xs space-y-1" style="color:#89AACC">
245
+ <div><span style="color:#FA93FA">export</span> CLAUDE_CODE_USE_OPENAI=1</div>
246
+ <div><span style="color:#FA93FA">export</span> OPENAI_API_KEY="sua-chave"</div>
247
+ <div><span style="color:#FA93FA">export</span> OPENAI_BASE_URL="endpoint"</div>
248
+ <div><span style="color:#FA93FA">export</span> OPENAI_MODEL="modelo"</div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Provider Tabs -->
254
+ <div class="flex flex-wrap gap-2 mb-8 justify-center reveal" id="providerTabs">
255
+ <button class="prov-tab active px-3 py-2 text-xs font-medium border border-white/10 text-white rounded-sm cursor-pointer" data-provider="openai" onclick="sw('openai')">OpenAI</button>
256
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="codex" onclick="sw('codex')">Codex</button>
257
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="deepseek" onclick="sw('deepseek')">DeepSeek</button>
258
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="gemini" onclick="sw('gemini')">Gemini</button>
259
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="ollama" onclick="sw('ollama')">Ollama</button>
260
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="groq" onclick="sw('groq')">Groq</button>
261
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="openrouter" onclick="sw('openrouter')">OpenRouter</button>
262
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="mistral" onclick="sw('mistral')">Mistral</button>
263
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="together" onclick="sw('together')">Together AI</button>
264
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="lmstudio" onclick="sw('lmstudio')">LM Studio</button>
265
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="atomic" onclick="sw('atomic')">Atomic Chat</button>
266
+ <button class="prov-tab px-3 py-2 text-xs font-medium border border-white/10 text-zinc-500 rounded-sm cursor-pointer" data-provider="azure" onclick="sw('azure')">Azure</button>
267
+ </div>
268
+
269
+ <!-- Provider Card -->
270
+ <div id="provDetail" class="max-w-4xl mx-auto reveal" style="transition:opacity .3s ease,transform .3s ease">
271
+ <div class="card-hover rounded-xl p-7">
272
+ <div class="grid md:grid-cols-3 gap-6">
273
+ <div>
274
+ <h3 class="text-base font-semibold text-white mb-1" id="provName">OpenAI</h3>
275
+ <p class="text-xs text-zinc-500 mb-4" id="provDesc">GPT-4o, o1, o3-mini — modelos de ponta</p>
276
+ </div>
277
+ <div class="font-mono text-xs space-y-1" id="provVars" style="color:#89AACC"></div>
278
+ <div>
279
+ <div class="text-[10px] uppercase tracking-wider text-zinc-500 mb-2">Modelos</div>
280
+ <div class="flex flex-wrap gap-1.5" id="provModels"></div>
281
+ <div class="mt-3 flex flex-wrap gap-3 text-[10px] text-zinc-500" id="provCaps"></div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- ====== FEATURES ====== -->
290
+ <section id="features" class="py-24">
291
+ <div class="max-w-6xl mx-auto px-6">
292
+ <div class="text-center mb-16 reveal">
293
+ <p class="text-xs uppercase tracking-[.2em] text-zinc-500 mb-3">O que ele faz</p>
294
+ <h2 class="font-serif text-3xl md:text-4xl text-white/90">Não é só chat. É ferramenta de trabalho.</h2>
295
+ </div>
296
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5 reveal">
297
+ <div class="card-hover rounded-xl p-6">
298
+ <div class="w-9 h-9 flex items-center justify-center mb-4" style="border-radius:4px; background:rgba(201,103,232,.1)"><i data-lucide="shuffle" class="w-4 h-4" style="color:#C967E8"></i></div>
299
+ <h3 class="text-sm font-semibold text-white mb-2">Shim OpenAI</h3>
300
+ <p class="text-xs text-zinc-500 leading-relaxed">Traduz Anthropic ↔ OpenAI. Tool calls, streaming, system prompts — o modelo nem percebe.</p>
301
+ </div>
302
+ <div class="card-hover rounded-xl p-6">
303
+ <div class="w-9 h-9 flex items-center justify-center mb-4" style="border-radius:4px; background:rgba(201,103,232,.1)"><i data-lucide="wrench" class="w-4 h-4" style="color:#C967E8"></i></div>
304
+ <h3 class="text-sm font-semibold text-white mb-2">45 Tools</h3>
305
+ <p class="text-xs text-zinc-500 leading-relaxed">Bash, FileRead, FileEdit, Glob, Grep, Agent, MCP. Schema Zod validado em cada uma.</p>
306
+ </div>
307
+ <div class="card-hover rounded-xl p-6">
308
+ <div class="w-9 h-9 flex items-center justify-center mb-4" style="border-radius:4px; background:rgba(201,103,232,.1)"><i data-lucide="terminal-square" class="w-4 h-4" style="color:#C967E8"></i></div>
309
+ <h3 class="text-sm font-semibold text-white mb-2">~100+ Commands</h3>
310
+ <p class="text-xs text-zinc-500 leading-relaxed">/status, /provider, /model, /plan, /tasks. Fast-path dispatch, TUI em React 19.</p>
311
+ </div>
312
+ <div class="card-hover rounded-xl p-6">
313
+ <div class="w-9 h-9 flex items-center justify-center mb-4" style="border-radius:4px; background:rgba(201,103,232,.1)"><i data-lucide="users" class="w-4 h-4" style="color:#C967E8"></i></div>
314
+ <h3 class="text-sm font-semibold text-white mb-2">Multi-Agent</h3>
315
+ <p class="text-xs text-zinc-500 leading-relaxed">7 tipos de tasks, 5 tipos de agents. Swarm com abort hierárquico.</p>
316
+ </div>
317
+ <div class="card-hover rounded-xl p-6">
318
+ <div class="w-9 h-9 flex items-center justify-center mb-4" style="border-radius:4px; background:rgba(201,103,232,.1)"><i data-lucide="brain" class="w-4 h-4" style="color:#C967E8"></i></div>
319
+ <h3 class="text-sm font-semibold text-white mb-2">Memória persistente</h3>
320
+ <p class="text-xs text-zinc-500 leading-relaxed">File-based. user, feedback, project, reference. Persiste entre sessões.</p>
321
+ </div>
322
+ <div class="card-hover rounded-xl p-6">
323
+ <div class="w-9 h-9 flex items-center justify-center mb-4" style="border-radius:4px; background:rgba(201,103,232,.1)"><i data-lucide="shield" class="w-4 h-4" style="color:#C967E8"></i></div>
324
+ <h3 class="text-sm font-semibold text-white mb-2">Security hardening</h3>
325
+ <p class="text-xs text-zinc-500 leading-relaxed">23 checks no Bash, tree-sitter AST. Doctor runtime embutido.</p>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- ====== FAQ ====== -->
332
+ <section id="faq" class="py-24 border-t border-white/5">
333
+ <div class="max-w-2xl mx-auto px-6">
334
+ <div class="text-center mb-12 reveal">
335
+ <h2 class="font-serif text-3xl md:text-4xl text-white/90 mb-2">Perguntas.</h2>
336
+ <p class="text-zinc-500 text-sm">O que as pessoas sempre perguntam.</p>
337
+ </div>
338
+ <div class="space-y-0 reveal">
339
+ <div class="faq-item border-b border-white/5">
340
+ <button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)"><span class="text-sm text-zinc-200 pr-8">Precisa pagar alguma coisa?</span><svg class="w-4 h-4 text-zinc-500 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
341
+ <div class="faq-answer"><p class="text-xs text-zinc-500 leading-relaxed pb-5">Não. O Claudinho é open-source (MIT). O único custo é do teu provider. E Ollama é 100% grátis e roda local.</p></div>
342
+ </div>
343
+ <div class="faq-item border-b border-white/5">
344
+ <button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)"><span class="text-sm text-zinc-200 pr-8">Funciona no Windows?</span><svg class="w-4 h-4 text-zinc-500 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
345
+ <div class="faq-answer"><p class="text-xs text-zinc-500 leading-relaxed pb-5">Sim. Roda em Windows, macOS e Linux. Sandbox nativo só no macOS e WSL2, mas o resto funciona tudo.</p></div>
346
+ </div>
347
+ <div class="faq-item border-b border-white/5">
348
+ <button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)"><span class="text-sm text-zinc-200 pr-8">Precisa de GPU ou máquina potente?</span><svg class="w-4 h-4 text-zinc-500 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
349
+ <div class="faq-answer"><p class="text-xs text-zinc-500 leading-relaxed pb-5">Para providers cloud (OpenAI, Gemini, etc): não. Para Ollama local: depende do modelo. Modelos pequenos rodam em notebook normal.</p></div>
350
+ </div>
351
+ <div class="faq-item border-b border-white/5">
352
+ <button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)"><span class="text-sm text-zinc-200 pr-8">É afiliado à Anthropic?</span><svg class="w-4 h-4 text-zinc-500 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
353
+ <div class="faq-answer"><p class="text-xs text-zinc-500 leading-relaxed pb-5">Não. O Claudinho não é afiliado ou endossado pela Anthropic. Projeto independente sob MIT License.</p></div>
354
+ </div>
355
+ <div class="faq-item border-b border-white/5">
356
+ <button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)"><span class="text-sm text-zinc-200 pr-8">Roda tracking ou envia dados?</span><svg class="w-4 h-4 text-zinc-500 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
357
+ <div class="faq-answer"><p class="text-xs text-zinc-500 leading-relaxed pb-5">Não. Analytics (Datadog, GrowthBook) é desligado. ~2000 linhas de tracking removidas do build. Seus dados ficam seus.</p></div>
358
+ </div>
359
+ <div class="faq-item border-b border-white/5">
360
+ <button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)"><span class="text-sm text-zinc-200 pr-8">Qual modelo uso pra começar?</span><svg class="w-4 h-4 text-zinc-500 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
361
+ <div class="faq-answer"><p class="text-xs text-zinc-500 leading-relaxed pb-5">De graça: OpenRouter tier free (qwen/qwen3.6-plus:free). Melhor: GPT-4o. Local: Ollama com llama3.1:8b. Usa <code class="bg-white/5 px-1 text-zinc-300">bun run profile:recommend</code> pra auto-recomendação.</p></div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- ====== FULL STOP ====== -->
368
+ <section class="py-24 bg-white/[.01]">
369
+ <div class="max-w-2xl mx-auto px-6 text-center">
370
+ <h2 class="font-serif text-4xl md:text-5xl text-white/90 mb-4" style="font-family:'DM Serif Display',serif">Bora?</h2>
371
+ <p class="text-sm text-zinc-500 mb-10">11 providers. 45 tools. ~100 commands.<br>MIT. Zero tracking. Feito no Brasil.</p>
372
+ <div class="glass border border-white/10 p-6 text-left font-mono text-sm max-w-lg mx-auto mb-8" style="border-radius:4px">
373
+ <div class="text-zinc-500 text-[10px] mb-3 uppercase tracking-wider">Instala e roda</div>
374
+ <div style="color:#89AACC" class="space-y-2">
375
+ <div>npm i -g <span class="text-white font-semibold">@touchzada/claudinho</span></div>
376
+ <div>export OPENAI_API_KEY="sua-chave"</div>
377
+ <div class="text-white">claudinho</div>
378
+ </div>
379
+ </div>
380
+ <a href="https://github.com/touchzada/Claudinho" target="_blank" class="cta-btn inline-flex items-center gap-2 px-8 py-4 text-sm font-medium" style="border-radius:9999px">
381
+ Ver no GitHub
382
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
383
+ </a>
384
+ <div class="mt-20 pt-8 border-t border-white/5 text-[10px] text-zinc-600">
385
+ <p>Claudinho v0.1.8 · Feito com muito café, código e teimosia.</p>
386
+ <p class="mt-1">MIT License · <a href="https://github.com/touchzada/Claudinho" class="underline text-zinc-500 hover:text-zinc-300">touchzada/Claudinho</a></p>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ </div><!-- /mainContent -->
392
+
393
+ <script>
394
+ // ===== LOADING SCREEN =====
395
+ (function() {
396
+ const words = ['Codar', 'Rodar', 'Criar'];
397
+ const duration = 2700;
398
+ const wordInterval = 900;
399
+
400
+ const loader = document.getElementById('loader');
401
+ const mainContent = document.getElementById('mainContent');
402
+ const brand = document.getElementById('loaderBrand');
403
+ const wordEl = document.getElementById('loaderWord');
404
+ const counterEl = document.getElementById('loaderCounter');
405
+ const barFill = document.getElementById('landBarFill');
406
+
407
+ // Animate elements in
408
+ setTimeout(() => { brand.style.transition = 'opacity .6s ease'; brand.style.opacity = '1'; }, 100);
409
+
410
+ // Word rotation
411
+ let wordIdx = 0;
412
+ function showWord(idx) {
413
+ wordEl.classList.remove('enter', 'exit');
414
+ void wordEl.offsetWidth;
415
+ wordEl.textContent = words[idx];
416
+ wordEl.style.transition = 'none';
417
+ wordEl.style.opacity = '1';
418
+ wordEl.style.transform = 'translateY(0)';
419
+ }
420
+ showWord(0);
421
+
422
+ const wordTimer = setInterval(() => {
423
+ wordIdx++;
424
+ if (wordIdx >= words.length) { clearInterval(wordTimer); return; }
425
+ wordEl.style.transition = 'opacity .4s ease, transform .4s ease';
426
+ wordEl.style.opacity = '0';
427
+ wordEl.style.transform = 'translateY(-20px)';
428
+ setTimeout(() => showWord(wordIdx), 200);
429
+ }, wordInterval);
430
+
431
+ // Counter animation (000->100 over 2.7s)
432
+ const start = performance.now();
433
+ function tick(now) {
434
+ const elapsed = now - start;
435
+ const progress = Math.min(elapsed / duration * 100, 100);
436
+ counterEl.textContent = Math.round(progress).toString().padStart(3, '0');
437
+ counterEl.style.transition = 'none';
438
+ counterEl.style.opacity = '1';
439
+ barFill.style.width = progress + '%';
440
+ if (progress < 100) { requestAnimationFrame(tick); }
441
+ else { setTimeout(complete, 400); }
442
+ }
443
+ setTimeout(() => {
444
+ counterEl.style.opacity = '1';
445
+ requestAnimationFrame(tick);
446
+ }, 100);
447
+
448
+ function complete() {
449
+ loader.style.transition = 'opacity .6s cubic-bezier(.4,0,.2,1)';
450
+ loader.style.opacity = '0';
451
+ loader.style.visibility = 'hidden';
452
+ setTimeout(() => {
453
+ loader.style.display = 'none';
454
+ mainContent.style.opacity = '1';
455
+ }, 700);
456
+ }
457
+ })();
458
+
459
+ // ===== PROVIDER SWITCHER =====
460
+ const P = {
461
+ openai:{name:'OpenAI',desc:'GPT-4o, o1, o3-mini',vars:['OPENAI_API_KEY=sk-sua-chave','OPENAI_MODEL=gpt-4o','(BASE_URL = padrão)'],models:['gpt-4o','gpt-4o-mini','o1','o3-mini'],caps:[{l:'Streaming'},{l:'Tool Calling'}]},
462
+ codex:{name:'Codex',desc:'GPT-5.4 via ChatGPT auth',vars:['OPENAI_MODEL=codexplan','CODEX_API_KEY=sua-chave','(lê ~/.codex/auth.json)'],models:['codexplan','codexspark'],caps:[{l:'Alto raciocínio'},{l:'Auto-auth'}]},
463
+ deepseek:{name:'DeepSeek',desc:'R1 com reasoning, barato',vars:['OPENAI_API_KEY=sk-chave','OPENAI_BASE_URL=https://api.deepseek.com/v1','OPENAI_MODEL=deepseek-chat'],models:['deepseek-reasoner','deepseek-chat','deepseek-coder'],caps:[{l:'Reasoning'},{l:'~64K ctx'}]},
464
+ gemini:{name:'Google Gemini',desc:'Gemini 2.5 Pro · 1M tokens',vars:['OPENAI_API_KEY=sk-or-chave','OPENAI_BASE_URL=https://openrouter.ai/api/v1','OPENAI_MODEL=google/gemini-2.0-flash-001'],models:['gemini-2.5-pro','gemini-2.5-flash','gemini-2.0-flash'],caps:[{l:'1M context'},{l:'Vision'}]},
465
+ ollama:{name:'Ollama (Local)',desc:'Sem API key. Roda na máquina.',vars:['OPENAI_BASE_URL=http://localhost:11434/v1','OPENAI_MODEL=llama3.3:70b','(sem API key needed)'],models:['llama3.3:70b','qwen2.5','mistral','deepseek-coder','phi4'],caps:[{l:'100% local'},{l:'Sem API key'}]},
466
+ groq:{name:'Groq',desc:'LPU — o mais rápido',vars:['OPENAI_API_KEY=gsk_chave','OPENAI_BASE_URL=https://api.groq.com/openai/v1','OPENAI_MODEL=llama-3.3-70b-versatile'],models:['llama-3.3-70b-versatile','mixtral-8x7b','gemma2-9b'],caps:[{l:'Sub-second'},{l:'~32K ctx'}]},
467
+ openrouter:{name:'OpenRouter',desc:'100+ modelos, tem free tier',vars:['OPENAI_API_KEY=sk-or-chave','OPENAI_BASE_URL=https://openrouter.ai/api/v1','OPENAI_MODEL=qwen/qwen3.6-plus:free'],models:['qwen/qwen3.6-plus:free','+100 modelos'],caps:[{l:'Free tier'},{l:'100+ modelos'}]},
468
+ mistral:{name:'Mistral AI',desc:'Europeu, GDPR-friendly',vars:['OPENAI_API_KEY=chave','OPENAI_BASE_URL=https://api.mistral.ai/v1','OPENAI_MODEL=mistral-large-latest'],models:['mistral-large-latest','pixtral-12b','codestral-latest'],caps:[{l:'Tool Calling'},{l:'Vision'}]},
469
+ together:{name:'Together AI',desc:'50+ modelos, preço baixo',vars:['OPENAI_API_KEY=chave','OPENAI_BASE_URL=https://api.together.xyz/v1','OPENAI_MODEL=meta-llama/Llama-3.3-70B-Instruct-Turbo'],models:['Llama-3.3-70B','Qwen-72B','+50'],caps:[{l:'50+ modelos'},{l:'Preço baixo'}]},
470
+ lmstudio:{name:'LM Studio (Local)',desc:'GUI amigável, qualquer GGUF',vars:['OPENAI_BASE_URL=http://localhost:1234/v1','OPENAI_MODEL=nome-do-modelo','(sem API key)'],models:['Qualquer GGUF'],caps:[{l:'Local'},{l:'Qualquer GGUF'}]},
471
+ atomic:{name:'Atomic Chat',desc:'Apple Silicon, local',vars:['OPENAI_BASE_URL=http://127.0.0.1:1337/v1','OPENAI_MODEL=nome-do-modelo','(sem API key)'],models:['Auto-detect'],caps:[{l:'Apple Silicon'},{l:'Auto-detect'}]},
472
+ azure:{name:'Azure OpenAI',desc:'Enterprise, VPC privada',vars:['OPENAI_API_KEY=chave-azure','OPENAI_BASE_URL=https://seu-recurso.openai.azure.com/.../v1','OPENAI_MODEL=gpt-4o'],models:['gpt-4o','gpt-4o-mini','dall-e-3'],caps:[{l:'Azure IAM'},{l:'Private network'}]}
473
+ };
474
+
475
+ function sw(n) {
476
+ const p = P[n]; if(!p) return;
477
+ document.querySelectorAll('.prov-tab').forEach(t=>{t.classList.remove('active');t.classList.add('text-zinc-500')});
478
+ const tab = document.querySelector(`.prov-tab[data-provider="${n}"]`);
479
+ if(tab){tab.classList.add('active');tab.classList.remove('text-zinc-500')}
480
+ document.getElementById('provName').textContent = p.name;
481
+ document.getElementById('provDesc').textContent = p.desc;
482
+ document.getElementById('provVars').innerHTML = p.vars.map(v => `<div><span style="color:#FA93FA">export</span> ${v}</div>`).join('');
483
+ document.getElementById('provModels').innerHTML = p.models.map(m => `<span class="px-2 py-1 text-[10px] bg-white/5 text-zinc-300 font-mono">${m}</span>`).join('');
484
+ document.getElementById('provCaps').innerHTML = p.caps.map(c => `<span class="flex items-center gap-1"><span class="w-1 h-1 rounded-full" style="background:#C967E8"></span> ${c.l}</span>`).join('');
485
+ const d = document.getElementById('provDetail');
486
+ d.style.opacity='0';d.style.transform='translateY(10px)';
487
+ requestAnimationFrame(()=>{d.style.transition='all .3s ease';d.style.opacity='1';d.style.transform='translateY(0)';});
488
+ }
489
+
490
+ // Init OpenAI provider
491
+ sw('openai');
492
+
493
+ // FAQ toggle
494
+ function toggleFaq(btn) {
495
+ const ans = btn.nextElementSibling;
496
+ const open = ans.classList.contains('open');
497
+ document.querySelectorAll('.faq-answer').forEach(a=>a.classList.remove('open'));
498
+ document.querySelectorAll('.faq-btn').forEach(b=>b.classList.remove('active'));
499
+ if(!open){ans.classList.add('open');btn.classList.add('active')}
500
+ }
501
+
502
+ // Scroll reveal
503
+ const obs = new IntersectionObserver(entries => {
504
+ entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); });
505
+ }, {threshold:.1});
506
+ document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
507
+
508
+ // Lucide icons
509
+ lucide.createIcons();
510
+ </script>
511
+ </body>
512
+ </html>