@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.v5.html ADDED
@@ -0,0 +1,513 @@
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</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
9
+ <style>
10
+ *{margin:0;padding:0;box-sizing:border-box}
11
+ :root{--bg:#0a0a0a;--surface:rgba(255,255,255,.02);--border:rgba(255,255,255,.06);--accent:#C967E8;--pink:#FA93FA;--deep:#983AD6;--clay:#c88b56;--teal:#89AACC;--text:#fafafa;--muted:#6b6b6b}
12
+ html{scroll-behavior:smooth}
13
+ body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
14
+
15
+ /* Noise */
16
+ body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.025;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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:nois .6s steps(2) infinite}@keyframes nois{0%,100%{transform:translate(0,0)}50%{transform:translate(-2%,1%)}}
17
+
18
+ /* Loading Screen */
19
+ #loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .6s cubic-bezier(.4,0,.2,1),visibility .6s,transform .6s cubic-bezier(.4,0,.2,1)}
20
+ #loader.out{opacity:0;visibility:hidden;transform:scale(1.02)}
21
+ #loader .brand{position:absolute;top:32px;left:32px;font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:var(--muted)}
22
+ #loader .words-box{position:relative;height:80px;width:300px;text-align:center;overflow:visible}
23
+ #loader .word{position:absolute;inset:0;font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(28px,5vw,48px);color:rgba(255,255,255,.55);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease}
24
+ #loader .word.active{opacity:1;transform:translateY(0)}
25
+ #loader .word.exit{opacity:0;transform:translateY(-16px)}
26
+ #loader .cnt{position:absolute;bottom:32px;right:32px;font-family:'DM Serif Display',serif;font-size:clamp(40px,8vw,72px);color:var(--text);tabular-nums:tabular-nums;line-height:1}
27
+
28
+ /* Progress bar */
29
+ #landBar{position:fixed;bottom:0;left:0;right:0;height:2px;background:var(--surface);z-index:10001}
30
+ #landBarFill{height:100%;width:0%;background:linear-gradient(90deg,#89AACC,#4E85BF);box-shadow:0 0 8px rgba(137,170,204,.3);transition:width .05s linear;transform-origin:left}
31
+
32
+ /* Navbar - floating pill */
33
+ nav{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:50;margin-top:16px;background:rgba(255,255,255,.04);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:9999px;padding:8px 24px;display:flex;align-items:center;gap:20px;transition:all .3s ease}
34
+ nav .logo{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px rgba(201,103,232,.4)}
35
+ nav a{font-size:11px;color:var(--muted);text-decoration:none;transition:color .2s;letter-spacing:.02em}
36
+ nav a:hover{color:var(--text)}
37
+ nav .gh{border:1px solid var(--border);padding:6px 14px;border-radius:9999px;font-size:10px;color:var(--muted)}
38
+ nav .gh:hover{color:var(--text);background:rgba(255,255,255,.04)}
39
+
40
+ /* Sections */
41
+ section{position:relative}
42
+
43
+ /* Reveal */
44
+ .r{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.16,1,.3,1)}.r.v{opacity:1;transform:translateY(0)}
45
+ .r2{opacity:0;transform:translateY(60px) scale(.97);transition:all 1s cubic-bezier(.16,1,.3,1)}.r2.v{opacity:1;transform:translateY(0) scale(1)}
46
+
47
+ /* Hero vertical */
48
+ .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 24px 100px;position:relative;overflow:hidden}
49
+ .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 40% at 60% 35%,rgba(201,103,232,.08),transparent)}
50
+ .hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
51
+
52
+ .hero-tag{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;gap:8px}
53
+ .hero-tag::before{content:'';width:16px;height:1px;background:var(--muted)}
54
+
55
+ .hero h1{font-family:'DM Serif Display',serif;font-size:clamp(36px,7vw,100px);line-height:.92;max-width:900px;margin-bottom:20px}
56
+ .hero h1 em{font-style:italic;background:linear-gradient(135deg,#fff 0%,var(--pink) 40%,var(--accent) 70%,var(--deep) 100%);background-size:200% 200%;animation:gShift 6s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
57
+ @keyframes gShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
58
+
59
+ .hero-sub{font-size:clamp(14px,1.5vw,17px);color:var(--muted);max-width:420px;line-height:1.6;margin-bottom:40px;font-weight:300}
60
+
61
+ .hero-cta{display:inline-flex;align-items:center;gap:10px;background:white;color:var(--bg);padding:14px 28px;border-radius:9999px;font-size:13px;font-weight:600;text-decoration:none;transition:all .3s;width:fit-content}
62
+ .hero-cta:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(255,255,255,.1)}
63
+ .hero-cta .arr{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--deep));display:flex;align-items:center;justify-content:center}
64
+ .hero-cta .arr svg{width:10px;height:10px;color:white}
65
+
66
+ .hero-meta{font-size:10px;color:var(--muted);margin-top:16px;display:flex;gap:16px}
67
+ .hero-meta span::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-right:6px}
68
+
69
+ /* Split section - large number + text */
70
+ .split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;max-width:1200px;margin:0 auto;padding:120px 24px}
71
+ @media(max-width:768px){.split{grid-template-columns:1fr;gap:40px}}
72
+ .split .bignum{font-family:'DM Serif Display',serif;font-size:clamp(64px,12vw,160px);line-height:.85;color:rgba(255,255,255,.06);position:sticky;top:80px}
73
+ .split .content{padding-top:40px}
74
+ .split .content h2{font-family:'DM Serif Display',serif;font-size:clamp(28px,4vw,48px);margin-bottom:16px}
75
+ .split .content p{color:var(--muted);line-height:1.7;font-size:14px;max-width:380px}
76
+
77
+ /* Provider section - horizontal scroll */
78
+ .psection{padding:120px 0;position:relative}
79
+ .psection .hdr{text-align:center;margin-bottom:60px;overflow:visible}
80
+ .psection .hdr small{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
81
+ .psection .hdr h2{font-family:'DM Serif Display',serif;font-size:clamp(28px,5vw,56px);margin-top:12px}
82
+ .psection .hdr p{color:var(--muted);margin-top:12px;font-size:14px;max-width:400px;margin-left:auto;margin-right:auto}
83
+
84
+ /* Provider setup box */
85
+ .psetup{max-width:500px;margin:0 auto 50px;border:1px solid var(--border);border-radius:8px;padding:20px 24px;background:var(--surface)}
86
+ .psetup .label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
87
+ .psetup code{font-family:'SF Mono',monospace;font-size:11px;color:var(--teal);display:block;line-height:1.8}
88
+ .psetup code .kw{color:var(--pink)}
89
+ .psetup code .val{color:white}
90
+ .psetup code .cmt{color:var(--muted);font-size:10px}
91
+
92
+ /* Provider tabs */
93
+ .pgrid{max-width:1100px;margin:0 auto;padding:0 24px}
94
+ .ptabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:24px}
95
+ .ptabs button{background:transparent;border:1px solid var(--border);padding:6px 14px;font-size:10px;color:var(--muted);cursor:pointer;border-radius:4px;transition:all .2s;font-family:inherit;letter-spacing:.02em}
96
+ .ptabs button:hover{border-color:rgba(201,103,232,.3)}
97
+ .ptabs button.on{background:linear-gradient(135deg,var(--pink),var(--deep));border-color:transparent;color:white}
98
+
99
+ /* Provider card */
100
+ .pcard{border:1px solid var(--border);border-radius:12px;padding:32px;background:var(--surface);transition:all .3s ease;opacity:0;transform:translateY(8px)}
101
+ .pcard.show{opacity:1;transform:translateY(0)}
102
+ .pcard .pc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px}
103
+ .pcard .pc-name{font-size:18px;font-weight:600}
104
+ .pcard .pc-desc{font-size:12px;color:var(--muted);margin-top:4px}
105
+ .pcard .pc-badge{font-size:9px;padding:4px 10px;border-radius:9999px;background:rgba(201,103,232,.1);color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
106
+ .pcard .pc-body{display:grid;grid-template-columns:1fr 1fr;gap:20px}
107
+ @media(max-width:600px){.pcard .pc-body{grid-template-columns:1fr}}
108
+ .pcard .pc-col small{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
109
+ .pcard .pc-col code{font-family:'SF Mono',monospace;font-size:10px;color:var(--teal);line-height:1.8;display:block}
110
+ .pcard .pc-col code .kw{color:var(--pink)}
111
+ .pcard .pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
112
+ .pcard .pc-tags span{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:4px}
113
+ .pcard .pc-tags .dot{width:4px;height:4px;border-radius:50%;background:var(--accent)}
114
+ .pcard .pc-models{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
115
+ .pcard .pc-models span{font-size:10px;background:rgba(255,255,255,.04);padding:4px 10px;border-radius:4px;font-family:'SF Mono',monospace;color:var(--muted)}
116
+
117
+ /* Terminal demo */
118
+ .tdemo{max-width:700px;margin:0 auto;padding:120px 24px}
119
+ .tdemo .card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.4)}
120
+ .tdemo .tbar{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--border)}
121
+ .tdemo .tbar .dot{width:8px;height:8px;border-radius:50%}
122
+ .tdemo .tbar .d1{background:#ff5f57}.tdemo .tbar .d2{background:#febc2e}.tdemo .tbar .d3{background:#28c840}
123
+ .tdemo .tbar .ver{font-size:9px;color:var(--muted);margin-left:8px;font-family:monospace}
124
+ .tdemo .tbody{padding:24px;font-family:'SF Mono','Fira Code',monospace;font-size:12px;line-height:2}
125
+ .tdemo .tbody .line{white-space:nowrap}
126
+ .tdemo .tbody .pr{color:var(--pink)}
127
+ .tdemo .tbody .te{color:var(--teal)}
128
+ .tdemo .tbody .w{color:white}
129
+ .tdemo .tbody .m{color:var(--muted)}
130
+ .tdemo .tbody .cur{animation:blink 1s step-end infinite}
131
+ @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
132
+
133
+ /* Features - diagonal layout */
134
+ .fdiag{max-width:1200px;margin:0 auto;padding:120px 24px}
135
+ .fdiag .hdr{text-align:center;margin-bottom:80px}
136
+ .fdiag .hdr small{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
137
+ .fdiag .hdr h2{font-family:'DM Serif Display',serif;font-size:clamp(28px,4vw,48px);margin-top:12px}
138
+
139
+ .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
140
+ @media(max-width:768px){.fgrid{grid-template-columns:1fr}}
141
+ .fgrid .fcard{background:var(--bg);padding:40px;transition:background .3s}
142
+ .fgrid .fcard:hover{background:rgba(255,255,255,.02)}
143
+ .fgrid .fcard .fi{width:32px;height:32px;border-radius:6px;background:rgba(201,103,232,.08);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
144
+ .fgrid .fcard .fi svg{width:16px;height:16px;color:var(--accent)}
145
+ .fgrid .fcard h3{font-size:14px;font-weight:600;margin-bottom:8px}
146
+ .fgrid .fcard p{font-size:12px;color:var(--muted);line-height:1.6;max-width:300px}
147
+
148
+ /* FAQ - clean list */
149
+ .faqsec{max-width:700px;margin:0 auto;padding:120px 24px;border-top:1px solid var(--border)}
150
+ .faqsec .hdr{text-align:center;margin-bottom:60px}
151
+ .faqsec .hdr h2{font-family:'DM Serif Display',serif;font-size:clamp(28px,4vw,48px)}
152
+ .faqsec .hdr p{color:var(--muted);font-size:13px;margin-top:8px}
153
+ .faq-item{border-bottom:1px solid var(--border)}
154
+ .faq-btn{width:100%;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--text);text-align:left;font-size:13px;font-family:inherit;transition:color .2s}
155
+ .faq-btn:hover{color:var(--accent)}
156
+ .faq-btn svg{width:16px;height:16px;color:var(--muted);flex-shrink:0;transition:transform .25s ease}
157
+ .faq-btn.on svg{transform:rotate(45deg)}
158
+ .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
159
+ .faq-a.open{max-height:300px}
160
+ .faq-a p{font-size:12px;color:var(--muted);line-height:1.7;padding:0 0 20px 0}
161
+ .faq-a code{background:rgba(255,255,255,.05);padding:1px 6px;border-radius:4px;font-size:11px;color:var(--teal)}
162
+
163
+ /* CTA - simple */
164
+ .ctafin{text-align:center;padding:160px 24px 100px}
165
+ .ctafin h2{font-family:'DM Serif Display',serif;font-size:clamp(36px,7vw,80px);margin-bottom:16px}
166
+ .ctafin .cmd{max-width:420px;margin:32px auto;border:1px solid var(--border);border-radius:8px;padding:20px 24px;background:var(--surface);text-align:left}
167
+ .ctafin .cmd code{font-family:'SF Mono',monospace;font-size:11px;color:var(--teal);line-height:2;display:block}
168
+ .ctafin .cmd code .kw{color:var(--pink)}
169
+ .ctafin .cmd code .w{color:white}
170
+ .ctafin .btn{display:inline-flex;align-items:center;gap:8px;background:white;color:var(--bg);padding:14px 28px;border-radius:9999px;font-size:13px;font-weight:600;text-decoration:none;transition:all .3s;margin-top:32px}
171
+ .ctafin .btn:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(255,255,255,.1)}
172
+
173
+ /* Footer */
174
+ .foot{text-align:center;padding:40px 24px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}
175
+ .foot a{color:var(--muted);text-decoration:underline;transition:color .2s}
176
+ .foot a:hover{color:var(--text)}
177
+
178
+ /* Smooth scroll indicator */
179
+ .scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px}
180
+ .scroll-hint .line{width:1px;height:32px;background:linear-gradient(to bottom,transparent,var(--muted))}
181
+
182
+ /* Mobile fix for navbar */
183
+ @media(max-width:640px){
184
+ nav{left:16px;right:16px;transform:none;margin-top:12px;padding:8px 16px;gap:12px;overflow-x:auto;white-space:nowrap;justify-content:flex-start}
185
+ nav a.mobhide{display:none}
186
+ }
187
+ </style>
188
+ </head>
189
+ <body>
190
+
191
+ <!-- Loader -->
192
+ <div id="loader">
193
+ <div class="brand">claudinho</div>
194
+ <div class="words-box">
195
+ <span class="word active" id="lw0">Codar</span>
196
+ <span class="word" id="lw1">Rodar</span>
197
+ <span class="word" id="lw2">Criar</span>
198
+ </div>
199
+ <div class="cnt" id="lcnt">000</div>
200
+ </div>
201
+
202
+ <!-- Progress bar -->
203
+ <div id="landBar"><div id="landBarFill"></div></div>
204
+
205
+ <!-- Navbar -->
206
+ <nav id="navbar">
207
+ <svg class="logo" fill="none" viewBox="0 0 7 7"><circle cx="3.5" cy="3.5" r="3.5" fill="currentColor" style="color:var(--accent)"/></svg>
208
+ <a href="#how">Como funciona</a>
209
+ <a href="#providers">Providers</a>
210
+ <a href="#features">Features</a>
211
+ <a class="mobhide" href="#faq">FAQ</a>
212
+ <a href="https://github.com/touchzada/Claudinho" target="_blank" class="gh">GitHub</a>
213
+ </nav>
214
+
215
+ <!-- Main content -->
216
+ <div id="main" style="opacity:0;transform:translateY(10px);transition:all .5s ease-out">
217
+
218
+ <!-- Section: Terminal demo (first visual after hero-like content) -->
219
+ <div class="tdemo">
220
+ <div class="card r2">
221
+ <div class="tbar">
222
+ <div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div>
223
+ <span class="ver">claudinho v0.1.8</span>
224
+ </div>
225
+ <div class="tbody">
226
+ <div class="line"><span class="te">&#10095;</span> <span class="pr">claudinho</span></div>
227
+ <div class="line m"><span class="te">◐</span> conectado a <span class="w">OpenRouter</span> · qwen/qwen3.6-plus:free</div>
228
+ <div class="line"><br></div>
229
+ <div class="line"><span class="pr">claudinho&gt;</span> <span class="w">cria uma API REST com Express</span></div>
230
+ <div class="line m"><span class="te">[FileWrite]</span> criando package.json, server.js, routes/...</div>
231
+ <div class="line m"><span class="te">[Done]</span> 3 arquivos · 247 linhas</div>
232
+ <div class="line"><br></div>
233
+ <div class="line"><span class="pr">claudinho&gt;</span> <span class="w">adiciona teste com Vitest</span></div>
234
+ <div class="line m"><span class="te">[Bash]</span> npm install -D vitest</div>
235
+ <div class="line m"><span class="te">[FileWrite]</span> package.json, vitest.config.ts</div>
236
+ <div class="line"><span class="pr">claudinho&gt;</span> <span class="cur">_</span></div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Section: How it works - Split -->
242
+ <div class="split" id="how">
243
+ <div class="bignum r">01</div>
244
+ <div class="content">
245
+ <h2 class="r">Três passos.</h2>
246
+ <p class="r">Mais simples que configurar Wi-Fi. Sem rodeio, sem wizard de 5 páginas.</p>
247
+ <div class="r" style="margin-top:32px">
248
+ <div style="border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin-bottom:12px;background:var(--surface)">
249
+ <div style="font-size:10px;color:var(--muted);margin-bottom:4px">1. INSTALA</div>
250
+ <code style="font-family:monospace;font-size:12px;color:var(--teal)">npm i -g @touchzada/claudinho</code>
251
+ </div>
252
+ <div style="border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin-bottom:12px;background:var(--surface)">
253
+ <div style="font-size:10px;color:var(--muted);margin-bottom:4px">2. CONFIGURA</div>
254
+ <code style="font-family:monospace;font-size:12px;color:var(--teal)">export OPENAI_API_KEY="sk-..."</code>
255
+ </div>
256
+ <div style="border:1px solid var(--border);border-radius:8px;padding:16px 20px;background:var(--surface)">
257
+ <div style="font-size:10px;color:var(--muted);margin-bottom:4px">3. RODA</div>
258
+ <code style="font-family:monospace;font-size:12px;color:var(--teal)">claudinho</code>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Section: Statement -->
265
+ <div class="split">
266
+ <div class="bignum r2">11</div>
267
+ <div class="content" style="padding-top:80px">
268
+ <h2 class="r">Providers que tu quiser.</h2>
269
+ <p class="r">OpenAI, Anthropic, Google, Groq, DeepSeek, Ollama, Mistral, Together, Azure, LM Studio, Atomic Chat. 11 opções. A API key é tua. A escolha é tua.</p>
270
+ <p class="r" style="margin-top:12px">Ou roda local sem chave nenhuma. Teu dado fica teu.</p>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Section: Feature grid -->
275
+ <div class="fdiag" id="features">
276
+ <div class="hdr">
277
+ <small class="r">Ferramentas</small>
278
+ <h2 class="r">Não é só chat.</h2>
279
+ </div>
280
+ <div class="fgrid r">
281
+ <div class="fcard">
282
+ <div class="fi"><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg></div>
283
+ <h3>Shim OpenAI bidirecional</h3>
284
+ <p>Traduz Anthropic ↔ OpenAI. Tool calls, streaming, system prompts. O modelo nem percebe que trocou.</p>
285
+ </div>
286
+ <div class="fcard">
287
+ <div class="fi"><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21m0 0 5.83-5.83m-5.83 5.83-11.42-5.83M17.25 21 5.83 9.59m11.42 11.42-5.59-5.59"/></svg></div>
288
+ <h3>45 Tools com Zod schema</h3>
289
+ <p>Bash, FileRead, FileEdit, Glob, Grep, Agent, MCP e mais. Cada uma com schema validado e 23 checks de segurança.</p>
290
+ </div>
291
+ <div class="fcard">
292
+ <div class="fi"><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 9.75A2.25 2.25 0 0 0 7.5 3V3.75m12 8.25v3"/></svg></div>
293
+ <h3>~100 slash commands</h3>
294
+ <p>/status, /provider, /model, /plan, /tasks. Fast-path dispatch com 3 tipos de handler no TUI.</p>
295
+ </div>
296
+ <div class="fcard">
297
+ <div class="fi"><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197"/></svg></div>
298
+ <h3>Swarm Multi-Agent</h3>
299
+ <p>7 tipos de tasks, 5 tipos de agents. Orquestração com abort hierárquico e mailbox entre agents.</p>
300
+ </div>
301
+ <div class="fcard">
302
+ <div class="fi"><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75"/></svg></div>
303
+ <h3>Memória persistente</h3>
304
+ <p>4 tipos: user, feedback, project, reference. File-based, persiste entre sessões. Teu contexto não some.</p>
305
+ </div>
306
+ <div class="fcard">
307
+ <div class="fi"><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/></svg></div>
308
+ <h3>Security + Doctor</h3>
309
+ <p>Tree-sitter AST, 20+ regex patterns, doctor runtime embutido. Valida teu setup antes de abrir.</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Section: Statement 3 -->
315
+ <div class="split">
316
+ <div class="bignum r2">0</div>
317
+ <div class="content" style="padding-top:80px">
318
+ <h2 class="r">Zero tracking.</h2>
319
+ <p class="r">~2000 linhas de Datadog e GrowthBook removidas do build. O Claudinho não envia nada. Seus prompts ficam teus, teu código fica teu, teu dado some teu.</p>
320
+ <p class="r" style="margin-top:12px">MIT license — faz o que quiser.</p>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Section: Providers -->
325
+ <div class="psection" id="providers">
326
+ <div class="hdr r">
327
+ <small>Multi-Provider</small>
328
+ <h2>Escolha teu provider.</h2>
329
+ <p>Onze opções reais, com as variáveis certas da doc.</p>
330
+ </div>
331
+
332
+ <div class="psetup r">
333
+ <div class="label">Setup universal (todos OpenAI-compatible)</div>
334
+ <code>
335
+ <span class="kw">export</span> <span class="val">CLAUDE_CODE_USE_OPENAI=1</span><br>
336
+ <span class="kw">export</span> <span class="val">OPENAI_API_KEY="sua-chave"</span><br>
337
+ <span class="kw">export</span> <span class="val">OPENAI_BASE_URL="endpoint"</span><br>
338
+ <span class="kw">export</span> <span class="val">OPENAI_MODEL="modelo"</span>
339
+ </code>
340
+ </div>
341
+
342
+ <div class="ptabs r" id="ptabs"></div>
343
+ <div class="pgrid">
344
+ <div class="pcard" id="pcard">
345
+ <div class="pc-top">
346
+ <div>
347
+ <div class="pc-name" id="pname"></div>
348
+ <div class="pc-desc" id="pdesc"></div>
349
+ </div>
350
+ <div class="pc-badge" id="pbadge"></div>
351
+ </div>
352
+ <div class="pc-body">
353
+ <div class="pc-col">
354
+ <small>Variáveis</small>
355
+ <div id="pvars"></div>
356
+ </div>
357
+ <div class="pc-col">
358
+ <small>Modelos</small>
359
+ <div class="pc-models" id="pmodels"></div>
360
+ <div class="pc-tags" id="pcaps"></div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Section: FAQ -->
368
+ <div class="faqsec" id="faq">
369
+ <div class="hdr">
370
+ <h2 class="r">Perguntas.</h2>
371
+ <p class="r">O que sempre perguntam antes de instalar.</p>
372
+ </div>
373
+ <div class="r">
374
+ <div class="faq-item">
375
+ <button class="faq-btn" onclick="tf(this)"><span>Precisa pagar?</span><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
376
+ <div class="faq-a"><p>Não. MIT license, open-source. Só paga se teu provider cobrar — e Ollama é grátis e roda local.</p></div>
377
+ </div>
378
+ <div class="faq-item">
379
+ <button class="faq-btn" onclick="tf(this)"><span>Funciona no Windows?</span><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
380
+ <div class="faq-a"><p>Sim. Windows, macOS e Linux. Sandbox nativo só em macOS e WSL2, mas o resto funciona igual.</p></div>
381
+ </div>
382
+ <div class="faq-item">
383
+ <button class="faq-btn" onclick="tf(this)"><span>Precisa de GPU?</span><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
384
+ <div class="faq-a"><p>Pra cloud (OpenAI, Gemini etc): não. Pra Ollama local: depende do modelo. Modelos pequenos rodam em notebook normal.</p></div>
385
+ </div>
386
+ <div class="faq-item">
387
+ <button class="faq-btn" onclick="tf(this)"><span>É da Anthropic?</span><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
388
+ <div class="faq-a"><p>Não. Projeto independente. Não afiliado ou endossado pela Anthropic.</p></div>
389
+ </div>
390
+ <div class="faq-item">
391
+ <button class="faq-btn" onclick="tf(this)"><span>Roda analytics?</span><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
392
+ <div class="faq-a"><p>Não. ~2000 linhas de Datadog/GrowthBook removidas. Dados seus ficam seus.</p></div>
393
+ </div>
394
+ <div class="faq-item">
395
+ <button class="faq-btn" onclick="tf(this)"><span>Qual modelo uso pra começar?</span><svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg></button>
396
+ <div class="faq-a"><p>Grátis: OpenRouter free tier (qwen/qwen3.6-plus). Poder: GPT-4o. Local: Ollama llama3.1:8b. Usa <code>bun run profile:recommend</code> pra auto-recomendação.</p></div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- CTA Final -->
402
+ <div class="ctafin">
403
+ <h2 class="r">Bora?</h2>
404
+ <div class="cmd r">
405
+ <code>
406
+ <span class="cmt"># instala e roda</span><br>
407
+ <span class="kw">npm i -g</span> <span class="w">@touchzada/claudinho</span><br>
408
+ <span class="kw">export</span> <span class="w">OPENAI_API_KEY="sua-chave"</span><br>
409
+ <span>w</span>claudinho<span class="w"></span>
410
+ </code>
411
+ </div>
412
+ <a href="https://github.com/touchzada/Claudinho" target="_blank" class="btn r">
413
+ Ver no GitHub
414
+ <svg width="14" height="14" 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>
415
+ </a>
416
+ </div>
417
+
418
+ <!-- Footer -->
419
+ <div class="foot">
420
+ <p>Claudinho v0.1.8 · Feito com muito café, código e teimosia.</p>
421
+ <p style="margin-top:4px">MIT License · <a href="https://github.com/touchzada/Claudinho">touchzada/Claudinho</a> · Feito no Brasil</p>
422
+ </div>
423
+
424
+ </div><!-- /main -->
425
+
426
+ <script>
427
+ // Loading screen
428
+ (function(){
429
+ const W=['Codar','Rodar','Criar'];
430
+ const DUR=2700,IV=900;
431
+ const lo=document.getElementById('loader'),mn=document.getElementById('main');
432
+ const cnt=document.getElementById('lcnt'),bar=document.getElementById('landBarFill');
433
+ const ws=[document.getElementById('lw0'),document.getElementById('lw1'),document.getElementById('lw2')];
434
+
435
+ let wi=0;
436
+ const wt=setInterval(()=>{
437
+ wi++;
438
+ if(wi>=W.length){clearInterval(wt);return}
439
+ ws[wi-1].classList.remove('active');ws[wi-1].classList.add('exit');
440
+ ws[wi].classList.add('active');
441
+ },IV);
442
+
443
+ const t0=performance.now();
444
+ function tick(now){
445
+ const p=Math.min((now-t0)/DUR*100,100);
446
+ cnt.textContent=Math.round(p).toString().padStart(3,'0');
447
+ bar.style.width=p+'%';
448
+ if(p<100)requestAnimationFrame(tick);
449
+ else setTimeout(()=>{
450
+ lo.classList.add('out');
451
+ setTimeout(()=>{mn.style.opacity='1';mn.style.transform='translateY(0)';lo.style.display='none'},650);
452
+ },400);
453
+ }
454
+ requestAnimationFrame(tick);
455
+ })();
456
+
457
+ // Provider data
458
+ const PR={
459
+ openai:{name:'OpenAI',desc:'GPT-4o, o1, o3-mini — modelos de ponta',badge:'CLOUD',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','sk-...'],['OPENAI_MODEL','gpt-4o']],mods:['gpt-4o','gpt-4o-mini','o1','o3-mini'],caps:['Streaming','Tool Calling','Vision','~128K ctx']},
460
+ codex:{name:'Codex',desc:'GPT-5.4 via ChatGPT auth · codexplan / codexspark',badge:'CHATGPT AUTH',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_MODEL','codexplan'],['CODEX_API_KEY','(ou ~/.codex/auth.json)']],mods:['codexplan','codexspark'],caps:['Alto raciocínio','Auto-auth','POST /responses']},
461
+ deepseek:{name:'DeepSeek',desc:'R1 com reasoning — barato, open-source',badge:'LOW COST',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','sk-...'],['OPENAI_BASE_URL','https://api.deepseek.com/v1'],['OPENAI_MODEL','deepseek-chat']],mods:['deepseek-reasoner','deepseek-chat','deepseek-coder'],caps:['Reasoning','Tool Calling','~64K ctx']},
462
+ gemini:{name:'Google Gemini',desc:'Gemini 2.5 Pro · 1M tokens de contexto',badge:'VIA OPENROUTER',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','sk-or-...'],['OPENAI_BASE_URL','https://openrouter.ai/api/v1'],['OPENAI_MODEL','google/gemini-2.0-flash-001']],mods:['gemini-2.5-pro','gemini-2.5-flash','gemini-2.0-flash'],caps:['1M context','Tool Calling','Vision']},
463
+ ollama:{name:'Ollama',desc:'100% local · sem API key · privacidade total',badge:'LOCAL',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_BASE_URL','http://localhost:11434/v1'],['OPENAI_MODEL','llama3.3:70b'],['','(sem API key)']],mods:['llama3.3:70b','qwen2.5','mistral','deepseek-coder','phi4','llama3.1:8b'],caps:['Local','Sem API key','Profile recommend']},
464
+ groq:{name:'Groq',desc:'Inferência LPU — o mais rápido que existe',badge:'FAST',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','gsk_...'],['OPENAI_BASE_URL','https://api.groq.com/openai/v1'],['OPENAI_MODEL','llama-3.3-70b-versatile']],mods:['llama-3.3-70b-versatile','mixtral-8x7b','gemma2-9b'],caps:['Sub-second response','Tool Calling','~32K ctx']},
465
+ openrouter:{name:'OpenRouter',desc:'100+ modelos com uma chave · tem free tier',badge:'FREE TIER',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','sk-or-...'],['OPENAI_BASE_URL','https://openrouter.ai/api/v1'],['OPENAI_MODEL','qwen/qwen3.6-plus:free']],mods:['qwen/qwen3.6-plus:free',':free tier','+100 modelos'],caps:['Free tier','100+ modelos','Routing inteligente']},
466
+ mistral:{name:'Mistral AI',desc:'Europeu, GDPR-friendly · Mixtral, Codestral, Pixtral',badge:'EUROPEAN',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','sua-chave'],['OPENAI_BASE_URL','https://api.mistral.ai/v1'],['OPENAI_MODEL','mistral-large-latest']],mods:['mistral-large-latest','pixtral-12b','codestral-latest'],caps:['Tool Calling','Vision','~32K ctx']},
467
+ together:{name:'Together AI',desc:'50+ open models · preço baixo · API compatível',badge:'MULTI-MODEL',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','sua-chave'],['OPENAI_BASE_URL','https://api.together.xyz/v1'],['OPENAI_MODEL','meta-llama/Llama-3.3-70B-Instruct-Turbo']],mods:['Llama-3.3-70B','Qwen-72B','+50 modelos'],caps:['50+ modelos','Tool Calling','Preço baixo']},
468
+ lmstudio:{name:'LM Studio',desc:'GUI amigável · qualquer GGUF · roda local',badge:'LOCAL GUI',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_BASE_URL','http://localhost:1234/v1'],['OPENAI_MODEL','nome-do-modelo'],['','(sem API key)']],mods:['Qualquer GGUF'],caps:['Local','Sem API key','Qualquer GGUF']},
469
+ atomic:{name:'Atomic Chat',desc:'Apple Silicon · local · detecta modelo automaticamente',badge:'APPLE SILICON',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_BASE_URL','http://127.0.0.1:1337/v1'],['OPENAI_MODEL','nome-do-modelo'],['','(sem API key)']],mods:['Detecta auto'],caps:['Apple Silicon','Local','Auto-detect modelo']},
470
+ azure:{name:'Azure OpenAI',desc:'Enterprise · VPC privada · IAM · SLA',badge:'ENTERPRISE',vars:[['CLAUDE_CODE_USE_OPENAI','1'],['OPENAI_API_KEY','chave-azure'],['OPENAI_BASE_URL','https://seu-recurso.openai.azure.com/.../v1'],['OPENAI_MODEL','gpt-4o']],mods:['gpt-4o','gpt-4o-mini','dall-e-3'],caps:['Azure IAM','Private network','Enterprise SLA']}
471
+ };
472
+
473
+ // Build tabs
474
+ const ptabs=document.getElementById('ptabs');
475
+ Object.keys(PR).forEach(k=>{
476
+ const b=document.createElement('button');
477
+ b.textContent=PR[k].name.split(' ')[0];
478
+ b.dataset.p=k;
479
+ b.onclick=()=>sw(k);
480
+ ptabs.appendChild(b);
481
+ });
482
+
483
+ function sw(n){
484
+ const p=PR[n];if(!p)return;
485
+ document.querySelectorAll('.ptabs button').forEach(t=>t.classList.remove('on'));
486
+ document.querySelector(`.ptabs button[data-p="${n}"]`).classList.add('on');
487
+ document.getElementById('pname').textContent=p.name;
488
+ document.getElementById('pdesc').textContent=p.desc;
489
+ document.getElementById('pbadge').textContent=p.badge;
490
+ document.getElementById('pvars').innerHTML=p.vars.map(v=>v[0]?`<code class="mb-1 block"><span class="kw">export</span> <span class="val">${v[0]}${v[1]?'='+v[1]:''}</span></code>`:`<code class="block" style="color:var(--muted)">${v[1]}</code>`).join('');
491
+ document.getElementById('pmodels').innerHTML=p.mods.map(m=>`<span>${m}</span>`).join('');
492
+ document.getElementById('pcaps').innerHTML=p.caps.map(c=>`<span><span class="dot"></span>${c}</span>`).join('');
493
+ const card=document.getElementById('pcard');
494
+ card.classList.remove('show');
495
+ requestAnimationFrame(()=>card.classList.add('show'));
496
+ }
497
+ sw('openai');
498
+
499
+ // FAQ
500
+ function tf(btn){
501
+ const a=btn.nextElementSibling;
502
+ const open=a.classList.contains('open');
503
+ document.querySelectorAll('.faq-a').forEach(x=>x.classList.remove('open'));
504
+ document.querySelectorAll('.faq-btn').forEach(x=>x.classList.remove('on'));
505
+ if(!open){a.classList.add('open');btn.classList.add('on')}
506
+ }
507
+
508
+ // Scroll reveal
509
+ const obs=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting)x.target.classList.add('v')})},{threshold:.1,rootMargin:'0px 0px -40px 0px'});
510
+ document.querySelectorAll('.r,.r2').forEach(el=>obs.observe(el));
511
+ </script>
512
+ </body>
513
+ </html>