@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.
- package/GUIA_INICIO.md +836 -836
- package/README.md +288 -208
- package/bin/claudinho.cmd +2 -0
- package/dist/Landing/_prompts/loading-screen-analysis.md +227 -0
- package/dist/Landing/_prompts/prompt-loading-screen.md +43 -0
- package/dist/Landing/dark-landing-analysis.md +266 -0
- package/dist/Landing/index.html +1152 -0
- package/dist/Landing/index.v1.html +607 -0
- package/dist/Landing/index.v3.html +604 -0
- package/dist/Landing/index.v4.html +512 -0
- package/dist/Landing/index.v5.html +513 -0
- package/dist/cli.mjs +322 -242
- package/dist/cli.mjs.map +15 -15
- package/docs/advanced-setup.md +276 -276
- package/docs/quick-start-mac-linux.md +110 -110
- package/docs/quick-start-windows.md +106 -106
- package/package.json +2 -2
|
@@ -0,0 +1,1152 @@
|
|
|
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 — Claude Code, do Seu Jeito</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<script src="https://unpkg.com/lucide@latest"></script>
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
11
|
+
<script>
|
|
12
|
+
tailwind.config = {
|
|
13
|
+
theme: {
|
|
14
|
+
extend: {
|
|
15
|
+
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
16
|
+
colors: {
|
|
17
|
+
border: 'hsl(240 3.7% 15.9%)',
|
|
18
|
+
input: 'hsl(240 3.7% 15.9%)',
|
|
19
|
+
ring: 'hsl(240 4.9% 83.9%)',
|
|
20
|
+
background: 'hsl(240 10% 3.9%)',
|
|
21
|
+
foreground: 'hsl(0 0% 98%)',
|
|
22
|
+
muted: { DEFAULT: 'hsl(240 3.7% 15.9%)', foreground: 'hsl(240 5% 64.9%)' },
|
|
23
|
+
accent: { DEFAULT: 'hsl(240 3.7% 15.9%)', foreground: 'hsl(0 0% 98%)' },
|
|
24
|
+
card: { DEFAULT: 'hsl(240 10% 3.9%)', foreground: 'hsl(0 0% 98%)' },
|
|
25
|
+
primary: { DEFAULT: 'hsl(0 0% 98%)', foreground: 'hsl(240 5.9% 10%)' },
|
|
26
|
+
secondary: { DEFAULT: 'hsl(240 3.7% 15.9%)', foreground: 'hsl(0 0% 98%)' },
|
|
27
|
+
'claudinho-purple': '#a78bfa',
|
|
28
|
+
'claudinho-pink': '#f472b6',
|
|
29
|
+
'claudinho-cyan': '#22d3ee',
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</script>
|
|
35
|
+
<style>
|
|
36
|
+
@keyframes gradient-shift { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
|
|
37
|
+
@keyframes float { 0%,100% { transform: translateY(0px) } 50% { transform: translateY(-10px) } }
|
|
38
|
+
@keyframes pulse-glow { 0%,100% { opacity: .3 } 50% { opacity: .7 } }
|
|
39
|
+
@keyframes slide-up { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
|
|
40
|
+
@keyframes slide-in { from { opacity: 0; transform: translateX(-20px) } to { opacity: 1; transform: translateX(0) } }
|
|
41
|
+
@keyframes count-up { from { opacity: 0; transform: scale(0.5) } to { opacity: 1; transform: scale(1) } }
|
|
42
|
+
@keyframes marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
|
|
43
|
+
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
|
|
44
|
+
@keyframes border-shimmer { 0% { background-position: 200% center } 100% { background-position: -200% center } }
|
|
45
|
+
|
|
46
|
+
.gradient-bg {
|
|
47
|
+
background: linear-gradient(-45deg, #0c0a09, #1a0a2e, #0f172a, #0c0a09);
|
|
48
|
+
background-size: 400% 400%;
|
|
49
|
+
animation: gradient-shift 15s ease infinite;
|
|
50
|
+
}
|
|
51
|
+
.gradient-text {
|
|
52
|
+
background: linear-gradient(135deg, #a78bfa, #f472b6, #22d3ee);
|
|
53
|
+
background-size: 200% 200%;
|
|
54
|
+
animation: gradient-shift 4s ease infinite;
|
|
55
|
+
-webkit-background-clip: text;
|
|
56
|
+
-webkit-text-fill-color: transparent;
|
|
57
|
+
background-clip: text;
|
|
58
|
+
}
|
|
59
|
+
.float { animation: float 6s ease-in-out infinite; }
|
|
60
|
+
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
|
|
61
|
+
.slide-up { animation: slide-up 0.6s ease-out forwards; }
|
|
62
|
+
.slide-in { animation: slide-in 0.4s ease-out forwards; }
|
|
63
|
+
.border-shimmer {
|
|
64
|
+
background: linear-gradient(90deg, transparent 0%, rgba(167,139,250,0.3) 50%, transparent 100%);
|
|
65
|
+
background-size: 200% 100%;
|
|
66
|
+
animation: border-shimmer 3s linear infinite;
|
|
67
|
+
}
|
|
68
|
+
.marquee-track { animation: marquee 30s linear infinite; }
|
|
69
|
+
.cursor-blink { animation: blink 1s step-end infinite; }
|
|
70
|
+
|
|
71
|
+
.glass {
|
|
72
|
+
background: rgba(240, 243, 250, 0.03);
|
|
73
|
+
backdrop-filter: blur(16px);
|
|
74
|
+
-webkit-backdrop-filter: blur(16px);
|
|
75
|
+
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
76
|
+
}
|
|
77
|
+
.glass-card {
|
|
78
|
+
background: rgba(240, 243, 250, 0.04);
|
|
79
|
+
backdrop-filter: blur(12px);
|
|
80
|
+
-webkit-backdrop-filter: blur(12px);
|
|
81
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
82
|
+
transition: all 0.3s ease;
|
|
83
|
+
}
|
|
84
|
+
.glass-card:hover {
|
|
85
|
+
background: rgba(240, 243, 250, 0.07);
|
|
86
|
+
border-color: rgba(167, 139, 250, 0.3);
|
|
87
|
+
transform: translateY(-4px);
|
|
88
|
+
box-shadow: 0 8px 32px rgba(167, 139, 250, 0.1);
|
|
89
|
+
}
|
|
90
|
+
.glow-hover:hover { box-shadow: 0 0 30px rgba(167, 139, 250, 0.15), 0 0 60px rgba(244, 114, 182, 0.08); }
|
|
91
|
+
|
|
92
|
+
.grid-bg {
|
|
93
|
+
background-image:
|
|
94
|
+
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
|
95
|
+
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
|
|
96
|
+
background-size: 60px 60px;
|
|
97
|
+
}
|
|
98
|
+
.radial-fade {
|
|
99
|
+
background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(167,139,250,0.08), transparent);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.delay-100 { animation-delay: 0.1s } .delay-200 { animation-delay: 0.2s }
|
|
103
|
+
.delay-300 { animation-delay: 0.3s } .delay-400 { animation-delay: 0.4s }
|
|
104
|
+
.delay-500 { animation-delay: 0.5s } .delay-600 { animation-delay: 0.6s }
|
|
105
|
+
.delay-700 { animation-delay: 0.7s } .delay-800 { animation-delay: 0.8s }
|
|
106
|
+
|
|
107
|
+
* { scrollbar-width: thin; scrollbar-color: #a78bfa #0c0a09; }
|
|
108
|
+
::-webkit-scrollbar { width: 6px; }
|
|
109
|
+
</style>
|
|
110
|
+
</head>
|
|
111
|
+
<body class="bg-[hsl(240,10%,3.9%)] text-white font-sans antialiased overflow-x-hidden">
|
|
112
|
+
|
|
113
|
+
<!-- ====== NAVBAR ====== -->
|
|
114
|
+
<nav class="fixed inset-x-0 top-0 z-50 glass border-b border-white/5">
|
|
115
|
+
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
116
|
+
<div class="flex items-center gap-2">
|
|
117
|
+
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-claudinho-purple to-claudinho-pink flex items-center justify-center text-sm font-bold">C</div>
|
|
118
|
+
<span class="font-bold text-lg">claudinho</span>
|
|
119
|
+
<span class="text-xs px-2 py-0.5 rounded-full bg-white/5 text-muted-foreground border border-white/5">v0.1.7</span>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="hidden md:flex items-center gap-8 text-sm text-muted-foreground">
|
|
122
|
+
<a href="#features" class="hover:text-white transition">Features</a>
|
|
123
|
+
<a href="#providers" class="hover:text-white transition">Providers</a>
|
|
124
|
+
<a href="#tools" class="hover:text-white transition">Tools</a>
|
|
125
|
+
<a href="#commands" class="hover:text-white transition">Commands</a>
|
|
126
|
+
<a href="#security" class="hover:text-white transition">Segurança</a>
|
|
127
|
+
<a href="https://github.com/touchzada/Claudinho" target="_blank" class="text-white border border-white/10 px-4 py-2 rounded-lg text-xs hover:bg-white/5 transition">GitHub ↗</a>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</nav>
|
|
131
|
+
|
|
132
|
+
<!-- ====== HERO ====== -->
|
|
133
|
+
<section class="relative min-h-screen flex items-center justify-center gradient-bg grid-bg radial-fade pt-16 overflow-hidden">
|
|
134
|
+
<!-- Decorative orbs -->
|
|
135
|
+
<div class="absolute top-1/3 left-1/4 w-64 h-64 rounded-full bg-claudinho-purple/10 blur-[100px] pulse-glow"></div>
|
|
136
|
+
<div class="absolute bottom-1/3 right-1/4 w-48 h-48 rounded-full bg-claudinho-pink/10 blur-[80px] pulse-glow" style="animation-delay: 1.5s"></div>
|
|
137
|
+
<div class="absolute top-1/2 left-1/2 w-40 h-40 rounded-full bg-claudinho-cyan/5 blur-[80px] pulse-glow" style="animation-delay: 3s"></div>
|
|
138
|
+
|
|
139
|
+
<div class="relative text-center max-w-5xl mx-auto px-6 py-20">
|
|
140
|
+
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-xs text-muted-foreground mb-8 slide-up" style="animation-delay:.1s; opacity:0">
|
|
141
|
+
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
142
|
+
Open-source · 10 providers · ~100 commands · v0.1.8
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<h1 class="text-5xl md:text-7xl lg:text-8xl font-black tracking-tight mb-6 slide-up" style="animation-delay:.2s; opacity:0">
|
|
146
|
+
IA no terminal,<br><span class="gradient-text">do seu jeito.</span>
|
|
147
|
+
</h1>
|
|
148
|
+
|
|
149
|
+
<p class="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed slide-up" style="animation-delay:.3s; opacity:0">
|
|
150
|
+
Roda o Claude Code com qualquer modelo. OpenAI, Gemini, Ollama, Groq, Bedrock,
|
|
151
|
+
e mais <span class="text-claudinho-purple font-semibold">10 providers</span> —
|
|
152
|
+
tudo via shim OpenAI, sem depender de assinatura da Anthropic.
|
|
153
|
+
</p>
|
|
154
|
+
|
|
155
|
+
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 slide-up" style="animation-delay:.4s; opacity:0">
|
|
156
|
+
<a href="#features" class="px-8 py-3.5 rounded-xl bg-white text-black font-semibold text-sm hover:bg-white/90 transition glow-hover">
|
|
157
|
+
Ver Features
|
|
158
|
+
</a>
|
|
159
|
+
<button onclick="document.getElementById('terminal').scrollIntoView({behavior:'smooth'})" class="px-8 py-3.5 rounded-xl glass text-sm font-medium hover:bg-white/5 transition">
|
|
160
|
+
Terminal de Demo ↓
|
|
161
|
+
</button>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<!-- Stats strip -->
|
|
165
|
+
<div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 slide-up" style="animation-delay:.5s; opacity:0">
|
|
166
|
+
<div class="glass-card rounded-xl p-4">
|
|
167
|
+
<div class="text-2xl font-bold gradient-text">10+</div>
|
|
168
|
+
<div class="text-xs text-muted-foreground mt-1">Providers</div>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="glass-card rounded-xl p-4">
|
|
171
|
+
<div class="text-2xl font-bold gradient-text">~100</div>
|
|
172
|
+
<div class="text-xs text-muted-foreground mt-1">Commands</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="glass-card rounded-xl p-4">
|
|
175
|
+
<div class="text-2xl font-bold gradient-text">45</div>
|
|
176
|
+
<div class="text-xs text-muted-foreground mt-1">Tools</div>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="glass-card rounded-xl p-4">
|
|
179
|
+
<div class="text-2xl font-bold gradient-text">32K</div>
|
|
180
|
+
<div class="text-xs text-muted-foreground mt-1">Max Output</div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<!-- Scroll indicator -->
|
|
185
|
+
<div class="mt-16 text-xs text-muted-foreground/50 flex flex-col items-center gap-2">
|
|
186
|
+
<div class="w-px h-12 bg-gradient-to-b from-transparent via-claudinho-purple/30 to-transparent"></div>
|
|
187
|
+
SCROLL
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</section>
|
|
191
|
+
|
|
192
|
+
<!-- ====== PROVIDERS MARQUEE ====== -->
|
|
193
|
+
<section class="py-10 border-y border-white/5 bg-black/30 overflow-hidden">
|
|
194
|
+
<div class="text-center text-xs text-muted-foreground uppercase tracking-[0.2em] mb-6">Providers Suportados</div>
|
|
195
|
+
<div class="flex marquee-track whitespace-nowrap">
|
|
196
|
+
<div class="flex items-center gap-8 px-8">
|
|
197
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-purple">Anthropic</span>
|
|
198
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-cyan">OpenAI</span>
|
|
199
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-pink">Gemini</span>
|
|
200
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-green-400">Ollama</span>
|
|
201
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-yellow-400">Groq</span>
|
|
202
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-orange-400">DeepSeek</span>
|
|
203
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-blue-400">Mistral</span>
|
|
204
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-red-400">GitHub Models</span>
|
|
205
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-sky-400">Azure OpenAI</span>
|
|
206
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-emerald-400">OpenRouter</span>
|
|
207
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-purple-400">AWS Bedrock</span>
|
|
208
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-rose-400">Google Vertex</span>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="flex items-center gap-8 px-8">
|
|
211
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-purple">Anthropic</span>
|
|
212
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-cyan">OpenAI</span>
|
|
213
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-pink">Gemini</span>
|
|
214
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-green-400">Ollama</span>
|
|
215
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-yellow-400">Groq</span>
|
|
216
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-orange-400">DeepSeek</span>
|
|
217
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-blue-400">Mistral</span>
|
|
218
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-red-400">GitHub Models</span>
|
|
219
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-sky-400">Azure OpenAI</span>
|
|
220
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-emerald-400">OpenRouter</span>
|
|
221
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-purple-400">AWS Bedrock</span>
|
|
222
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-rose-400">Google Vertex</span>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</section>
|
|
226
|
+
|
|
227
|
+
<!-- ====== FEATURES ====== -->
|
|
228
|
+
<section id="features" class="py-24 relative radial-fade">
|
|
229
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
230
|
+
<div class="text-center mb-16">
|
|
231
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-purple">Features</span>
|
|
232
|
+
<h2 class="text-4xl md:text-5xl font-bold mt-4">Tudo que o Claude Code tem —<br><span class="gradient-text">e o que ele não tem</span></h2>
|
|
233
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-4">Mesmo streaming, tool calling, sub-agentes, memória... só que com seus modelos favoritos.</p>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
237
|
+
<!-- Feature cards -->
|
|
238
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
239
|
+
<div class="w-10 h-10 rounded-lg bg-claudinho-purple/10 flex items-center justify-center mb-4">
|
|
240
|
+
<i data-lucide="zap" class="w-5 h-5 text-claudinho-purple"></i>
|
|
241
|
+
</div>
|
|
242
|
+
<h3 class="text-lg font-semibold mb-2">Shim OpenAI Bidirecional</h3>
|
|
243
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Traduz Anthropic ↔ OpenAI Chat Completions. Tool calls, streaming SSE, system prompts — Claude Code nem percebe que tá falando com outro modelo.</p>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
247
|
+
<div class="w-10 h-10 rounded-lg bg-claudinho-pink/10 flex items-center justify-center mb-4">
|
|
248
|
+
<i data-lucide="cpu" class="w-5 h-5 text-claudinho-pink"></i>
|
|
249
|
+
</div>
|
|
250
|
+
<h3 class="text-lg font-semibold mb-2">45+ Tools Integradas</h3>
|
|
251
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Bash, FileRead, FileEdit, Glob, Grep, WebFetch, WebSearch, Agent, MCP, LSP, NotebookEdit, Tasks e mais. Tudo com schema Zod e 23 checks de segurança.</p>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
255
|
+
<div class="w-10 h-10 rounded-lg bg-claudinho-cyan/10 flex items-center justify-center mb-4">
|
|
256
|
+
<i data-lucide="command" class="w-5 h-5 text-claudinho-cyan"></i>
|
|
257
|
+
</div>
|
|
258
|
+
<h3 class="text-lg font-semibold mb-2">~100+ Slash Commands</h3>
|
|
259
|
+
<p class="text-sm text-muted-foreground leading-relaxed">/status, /config, /provider, /model, /plan, /tasks, /clear, /exit... 3 tipos de dispatch com fast-path routing. Interface TUI completa.</p>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
263
|
+
<div class="w-10 h-10 rounded-lg bg-green-400/10 flex items-center justify-center mb-4">
|
|
264
|
+
<i data-lucide="users" class="w-5 h-5 text-green-400"></i>
|
|
265
|
+
</div>
|
|
266
|
+
<h3 class="text-lg font-semibold mb-2">Swarm & Multi-Agent</h3>
|
|
267
|
+
<p class="text-sm text-muted-foreground leading-relaxed">7 tipos de tasks, 5 tipos de agents, orquestração com abort hierárquico. Agents conversam entre si via mailbox.</p>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
271
|
+
<div class="w-10 h-10 rounded-lg bg-yellow-400/10 flex items-center justify-center mb-4">
|
|
272
|
+
<i data-lucide="refresh-cw" class="w-5 h-5 text-yellow-400"></i>
|
|
273
|
+
</div>
|
|
274
|
+
<h3 class="text-lg font-semibold mb-2">Retry & WebSocket</h3>
|
|
275
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Retry exponencial automático. Bridge V2 com Remote Control, auth multi-camada, recovery de 401, e session management robusto.</p>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
279
|
+
<div class="w-10 h-10 rounded-lg bg-orange-400/10 flex items-center justify-center mb-4">
|
|
280
|
+
<i data-lucide="brain" class="w-5 h-5 text-orange-400"></i>
|
|
281
|
+
</div>
|
|
282
|
+
<h3 class="text-lg font-semibold mb-2">Memória Persistente</h3>
|
|
283
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Sistema de memória file-based com 4 tipos: user, feedback, project, reference. Persiste entre sessões e conversas.</p>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<!-- "Not in original" sub-section -->
|
|
288
|
+
<div class="mt-20">
|
|
289
|
+
<div class="text-center mb-12">
|
|
290
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-pink">O que adicionamos</span>
|
|
291
|
+
<h3 class="text-3xl font-bold mt-3">Diferenças do Original</h3>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
|
294
|
+
<div class="glass-card rounded-xl p-6">
|
|
295
|
+
<div class="flex items-start gap-3">
|
|
296
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-green-400/10 flex items-center justify-center text-[10px] text-green-400">✓</span>
|
|
297
|
+
<div>
|
|
298
|
+
<h4 class="font-semibold text-sm">Todos os providers via OPENAI_BASE_URL</h4>
|
|
299
|
+
<p class="text-xs text-muted-foreground mt-1">Ollama local, Groq, DeepSeek, Mistral — qualquer OpenAI-compatible.</p>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
<div class="glass-card rounded-xl p-6">
|
|
304
|
+
<div class="flex items-start gap-3">
|
|
305
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-green-400/10 flex items-center justify-center text-[10px] text-green-400">✓</span>
|
|
306
|
+
<div>
|
|
307
|
+
<h4 class="font-semibold text-sm">Analytics desligado por padrão</h4>
|
|
308
|
+
<p class="text-xs text-muted-foreground mt-1">~2000+ linhas de Datadog, GrowthBook stubbed no build. Sem tracking.</p>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="glass-card rounded-xl p-6">
|
|
313
|
+
<div class="flex items-start gap-3">
|
|
314
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-green-400/10 flex items-center justify-center text-[10px] text-green-400">✓</span>
|
|
315
|
+
<div>
|
|
316
|
+
<h4 class="font-semibold text-sm">Build externo com 26 feature flags off</h4>
|
|
317
|
+
<p class="text-xs text-muted-foreground mt-1">Código proprietário da Anthropic removido via flags no Bun.build().</p>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="glass-card rounded-xl p-6">
|
|
322
|
+
<div class="flex items-start gap-3">
|
|
323
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-yellow-400/10 flex items-center justify-center text-[10px] text-yellow-400">!</span>
|
|
324
|
+
<div>
|
|
325
|
+
<h4 class="font-semibold text-sm">Sem Extended Thinking</h4>
|
|
326
|
+
<p class="text-xs text-muted-foreground mt-1">Extended thinking desabilitado para modelos OpenAI. Vem de fábrica.</p>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</section>
|
|
334
|
+
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
</section>
|
|
338
|
+
|
|
339
|
+
<!-- ====== PROVIDER SELECTOR ====== -->
|
|
340
|
+
<section id="providers" class="py-24 relative bg-black/30">
|
|
341
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
342
|
+
<div class="text-center mb-16">
|
|
343
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-cyan">Multi-Provider</span>
|
|
344
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">Escolha teu provider. <span class="gradient-text">Qualquer um funciona.</span></h2>
|
|
345
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">OpenAI, Gemini, Ollama local, Groq, DeepSeek, Mistral, Together AI, LM Studio — 11 providers com as variáveis reais.</p>
|
|
346
|
+
</div>
|
|
347
|
+
|
|
348
|
+
<!-- Quick Setup Banner -->
|
|
349
|
+
<div class="max-w-2xl mx-auto mb-12">
|
|
350
|
+
<div class="glass rounded-lg border border-white/10 p-5">
|
|
351
|
+
<div class="text-xs text-muted-foreground mb-3 uppercase tracking-wider">Setup universal (todos os providers OpenAI-compatible)</div>
|
|
352
|
+
<code class="text-xs font-mono text-green-400 block">export CLAUDE_CODE_USE_OPENAI=1</code>
|
|
353
|
+
<code class="text-xs font-mono text-green-400 block mt-1">export OPENAI_API_KEY="<span class="text-claudinho-pink">sua-chave</span>"</code>
|
|
354
|
+
<code class="text-xs font-mono text-green-400 block mt-1">export OPENAI_BASE_URL="<span class="text-claudinho-cyan">endpoint</span>"</code>
|
|
355
|
+
<code class="text-xs font-mono text-green-400 block mt-1">export OPENAI_MODEL="<span class="text-yellow-400">modelo</span>"</code>
|
|
356
|
+
<div class="mt-3 text-xs text-muted-foreground">Ou perfis automáticos: <code class="text-white">bun run profile:auto -- --goal coding</code></div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
360
|
+
<!-- Provider Selector Interactive -->
|
|
361
|
+
<div class="max-w-5xl mx-auto">
|
|
362
|
+
<!-- Provider Tabs -->
|
|
363
|
+
<div class="flex flex-wrap gap-2 mb-8 justify-center" id="providerTabs">
|
|
364
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/10 text-white" data-provider="openai" onclick="switchProvider('openai')">OpenAI</button>
|
|
365
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="codex" onclick="switchProvider('codex')">Codex</button>
|
|
366
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="deepseek" onclick="switchProvider('deepseek')">DeepSeek</button>
|
|
367
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="gemini" onclick="switchProvider('gemini')">Gemini</button>
|
|
368
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="ollama" onclick="switchProvider('ollama')">Ollama</button>
|
|
369
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="groq" onclick="switchProvider('groq')">Groq</button>
|
|
370
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="mistral" onclick="switchProvider('mistral')">Mistral</button>
|
|
371
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="together" onclick="switchProvider('together')">Together AI</button>
|
|
372
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="lmstudio" onclick="switchProvider('lmstudio')">LM Studio</button>
|
|
373
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="atomic" onclick="switchProvider('atomic')">Atomic Chat</button>
|
|
374
|
+
<button class="provider-tab px-3 py-2 rounded-lg text-xs font-medium border border-white/10 transition bg-white/5 text-muted-foreground hover:text-white hover:bg-white/10" data-provider="azure" onclick="switchProvider('azure')">Azure</button>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<!-- Provider Details -->
|
|
378
|
+
<div id="provider-cards">
|
|
379
|
+
|
|
380
|
+
<!-- OpenAI -->
|
|
381
|
+
<div class="provider-detail active" data-provider="openai">
|
|
382
|
+
<div class="glass-card rounded-xl p-8">
|
|
383
|
+
<div class="flex items-start gap-6 mb-6">
|
|
384
|
+
<div class="w-14 h-14 rounded-xl bg-white flex items-center justify-center flex-shrink-0">
|
|
385
|
+
<svg viewBox="0 0 24 24" class="w-8 h-8" fill="black"><path d="M22.201 11.201a9.714 9.714 0 1 0-8.91 8.891V18a1.5 1.5 0 0 0 1.5 1.5h3.6a1.5 1.5 0 0 0 1.5-1.5v-3.6a1.5 1.5 0 0 0-1.5-1.5h-1.899v.47c0 1.95-1.55 3.53-3.46 3.53a3.48 3.48 0 0 1-3.47-3.53v-.47c0-1.95 1.55-3.53 3.46-3.53h5.45v.03c1.91 0 3.46 1.58 3.46 3.53v.47h.27a1.5 1.5 0 0 0 1.5-1.5v-3.6a1.5 1.5 0 0 0-1.5-1.5h-1.89v.5c0 1.95-1.55 3.53-3.46 3.53a3.48 3.48 0 0 1-3.47-3.53v-.5c0-1.95 1.55-3.53 3.46-3.53h5.45v.03c1.47 0 2.8 1.02 3.28 2.44z"/></svg>
|
|
386
|
+
</div>
|
|
387
|
+
<div>
|
|
388
|
+
<h3 class="text-xl font-bold mb-1">OpenAI</h3>
|
|
389
|
+
<p class="text-sm text-muted-foreground">GPT-4o, o1, o3-mini — modelos de ponta com API estável</p>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
393
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
394
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
395
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
396
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_API_KEY=sk-sua-chave</code>
|
|
397
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=gpt-4o</code>
|
|
398
|
+
<code class="text-xs font-mono text-muted-foreground block mt-1">(BASE_URL = default)</code>
|
|
399
|
+
</div>
|
|
400
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
401
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
402
|
+
<div class="flex flex-wrap gap-1.5">
|
|
403
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gpt-4o</span>
|
|
404
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gpt-4o-mini</span>
|
|
405
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">o1</span>
|
|
406
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">o3-mini</span>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
410
|
+
<div class="text-xs text-muted-foreground mb-2">Profiles</div>
|
|
411
|
+
<code class="text-xs font-mono text-yellow-400 block mb-1">bun run dev:openai</code>
|
|
412
|
+
<code class="text-xs font-mono text-yellow-400 block">bun run profile:init -- --provider openai</code>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
416
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Streaming SSE</span>
|
|
417
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Tool Calling</span>
|
|
418
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Vision</span>
|
|
419
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-yellow-400"></span> ~128K context</span>
|
|
420
|
+
</div>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
<!-- Codex -->
|
|
425
|
+
<div class="provider-detail" data-provider="codex" style="display:none">
|
|
426
|
+
<div class="glass-card rounded-xl p-8">
|
|
427
|
+
<div class="flex items-start gap-6 mb-6">
|
|
428
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-green-400 to-emerald-600 flex items-center justify-center flex-shrink-0">
|
|
429
|
+
<span class="text-black text-2xl font-black">Cx</span>
|
|
430
|
+
</div>
|
|
431
|
+
<div>
|
|
432
|
+
<h3 class="text-xl font-bold mb-1">Codex (ChatGPT auth)</h3>
|
|
433
|
+
<p class="text-sm text-muted-foreground">codexplan usa GPT-5.4 no backend Codex. codexspark usa GPT-5.3 para voltas mais rápidas.</p>
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
437
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
438
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
439
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
440
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_MODEL=codexplan</code>
|
|
441
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CODEX_API_KEY=sua-chave</code>
|
|
442
|
+
<code class="text-xs font-mono text-muted-foreground block mt-1">(lê ~/.codex/auth.json auto)</code>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
445
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
446
|
+
<div class="flex flex-wrap gap-1.5">
|
|
447
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">codexplan</span>
|
|
448
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">codexspark</span>
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
451
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
452
|
+
<div class="text-xs text-muted-foreground mb-2">Profiles</div>
|
|
453
|
+
<code class="text-xs font-mono text-yellow-400 block mb-1">bun run profile:codex</code>
|
|
454
|
+
<code class="text-xs font-mono text-yellow-400 block">bun run dev:codex</code>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
458
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Auto-auth via ~/.codex/auth.json</span>
|
|
459
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Alto raciocínio</span>
|
|
460
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-yellow-400"></span> POST /responses</span>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
<!-- DeepSeek -->
|
|
466
|
+
<div class="provider-detail" data-provider="deepseek" style="display:none">
|
|
467
|
+
<div class="glass-card rounded-xl p-8">
|
|
468
|
+
<div class="flex items-start gap-6 mb-6">
|
|
469
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-400 to-red-600 flex items-center justify-center flex-shrink-0">
|
|
470
|
+
<span class="text-white text-xl font-black">DS</span>
|
|
471
|
+
</div>
|
|
472
|
+
<div>
|
|
473
|
+
<h3 class="text-xl font-bold mb-1">DeepSeek</h3>
|
|
474
|
+
<p class="text-sm text-muted-foreground">R1 com Chain of Thought — open-source, barato, potente</p>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
478
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
479
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
480
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
481
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_API_KEY=sk-sua-chave</code>
|
|
482
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=https://api.deepseek.com/v1</code>
|
|
483
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=deepseek-chat</code>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
486
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
487
|
+
<div class="flex flex-wrap gap-1.5">
|
|
488
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">deepseek-reasoner</span>
|
|
489
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">deepseek-chat</span>
|
|
490
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">deepseek-coder</span>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
494
|
+
<div class="text-xs text-muted-foreground mb-2">Via OpenRouter</div>
|
|
495
|
+
<code class="text-xs font-mono text-muted-foreground block mb-1">OPENAI_BASE_URL=https://openrouter.ai/api/v1</code>
|
|
496
|
+
<code class="text-xs font-mono text-muted-foreground block">OPENAI_MODEL=google/gemini-2.0-flash-001</code>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
500
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Reasoning mode</span>
|
|
501
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Tool Calling</span>
|
|
502
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Preço baixo</span>
|
|
503
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-yellow-400"></span> ~64K context</span>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<!-- Gemini -->
|
|
509
|
+
<div class="provider-detail" data-provider="gemini" style="display:none">
|
|
510
|
+
<div class="glass-card rounded-xl p-8">
|
|
511
|
+
<div class="flex items-start gap-6 mb-6">
|
|
512
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-green-400 flex items-center justify-center flex-shrink-0">
|
|
513
|
+
<span class="text-white text-2xl font-black">G</span>
|
|
514
|
+
</div>
|
|
515
|
+
<div>
|
|
516
|
+
<h3 class="text-xl font-bold mb-1">Google Gemini via OpenRouter</h3>
|
|
517
|
+
<p class="text-sm text-muted-foreground">Gemini 2.5 Pro, 2.0 Flash — contextão absurdo de 1M tokens</p>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
521
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
522
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
523
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
524
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_API_KEY=sk-or-sua-chave</code>
|
|
525
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=https://openrouter.ai/api/v1</code>
|
|
526
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=google/gemini-2.0-flash-001</code>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
529
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
530
|
+
<div class="flex flex-wrap gap-1.5">
|
|
531
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gemini-2.5-pro</span>
|
|
532
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gemini-2.5-flash</span>
|
|
533
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gemini-2.0-flash</span>
|
|
534
|
+
</div>
|
|
535
|
+
</div>
|
|
536
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
537
|
+
<div class="text-xs text-muted-foreground mb-2">Nota</div>
|
|
538
|
+
<p class="text-xs text-muted-foreground">Modelos disponíveis no OpenRouter mudam com o tempo. Se um modelo parar de funcionar, tente outro.</p>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
542
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> 1M context</span>
|
|
543
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Tool Calling</span>
|
|
544
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Vision</span>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
|
|
549
|
+
<!-- Ollama -->
|
|
550
|
+
<div class="provider-detail" data-provider="ollama" style="display:none">
|
|
551
|
+
<div class="glass-card rounded-xl p-8">
|
|
552
|
+
<div class="flex items-start gap-6 mb-6">
|
|
553
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-600 to-yellow-500 flex items-center justify-center flex-shrink-0">
|
|
554
|
+
<span class="text-white text-2xl font-black">🦙</span>
|
|
555
|
+
</div>
|
|
556
|
+
<div>
|
|
557
|
+
<h3 class="text-xl font-bold mb-1">Ollama (100% Local)</h3>
|
|
558
|
+
<p class="text-sm text-muted-foreground">Roda na tua máquina. Sem API key, sem cloud, sem rastreio. Puxa e go.</p>
|
|
559
|
+
</div>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
562
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
563
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
564
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
565
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=http://localhost:11434/v1</code>
|
|
566
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=llama3.3:70b</code>
|
|
567
|
+
<div class="mt-2 text-xs text-muted-foreground">(Sem API key needed)</div>
|
|
568
|
+
</div>
|
|
569
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
570
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos populares</div>
|
|
571
|
+
<div class="flex flex-wrap gap-1.5">
|
|
572
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">llama3.3:70b</span>
|
|
573
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">qwen2.5</span>
|
|
574
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">mistral</span>
|
|
575
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">deepseek-coder</span>
|
|
576
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">phi4</span>
|
|
577
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">llama3.1:8b</span>
|
|
578
|
+
</div>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
581
|
+
<div class="text-xs text-muted-foreground mb-2">Profiles</div>
|
|
582
|
+
<code class="text-xs font-mono text-yellow-400 block mb-1">bun run dev:ollama</code>
|
|
583
|
+
<code class="text-xs font-mono text-yellow-400 block mb-1">bun run profile:init -- --provider ollama --goal coding</code>
|
|
584
|
+
<div class="mt-2 text-xs text-muted-foreground">Roda doctor:runtime antes de abrir</div>
|
|
585
|
+
</div>
|
|
586
|
+
</div>
|
|
587
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
588
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Sem API key</span>
|
|
589
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> 100% offline</span>
|
|
590
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Privacidade total</span>
|
|
591
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Profile recommend</span>
|
|
592
|
+
</div>
|
|
593
|
+
</div>
|
|
594
|
+
</div>
|
|
595
|
+
|
|
596
|
+
<!-- Groq -->
|
|
597
|
+
<div class="provider-detail" data-provider="groq" style="display:none">
|
|
598
|
+
<div class="glass-card rounded-xl p-8">
|
|
599
|
+
<div class="flex items-start gap-6 mb-6">
|
|
600
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
|
601
|
+
<span class="text-black text-2xl font-black">G</span>
|
|
602
|
+
</div>
|
|
603
|
+
<div>
|
|
604
|
+
<h3 class="text-xl font-bold mb-1">Groq — Insanely Fast</h3>
|
|
605
|
+
<p class="text-sm text-muted-foreground">Inferência em LPU — o provider mais rápido do planeta</p>
|
|
606
|
+
</div>
|
|
607
|
+
</div>
|
|
608
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
609
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
610
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
611
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
612
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_API_KEY=gsk_sua-chave</code>
|
|
613
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=https://api.groq.com/openai/v1</code>
|
|
614
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=llama-3.3-70b-versatile</code>
|
|
615
|
+
</div>
|
|
616
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
617
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
618
|
+
<div class="flex flex-wrap gap-1.5">
|
|
619
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">llama-3.3-70b-versatile</span>
|
|
620
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">mixtral-8x7b</span>
|
|
621
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gemma2-9b</span>
|
|
622
|
+
</div>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
625
|
+
<div class="text-xs text-muted-foreground mb-2">Highlights</div>
|
|
626
|
+
<ul class="text-xs text-muted-foreground space-y-1">
|
|
627
|
+
<li>• Sub-second response time</li>
|
|
628
|
+
<li>• Tool calling nativo</li>
|
|
629
|
+
<li>• ~32K context</li>
|
|
630
|
+
</ul>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
634
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Sub-second response</span>
|
|
635
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Tool Calling</span>
|
|
636
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-yellow-400"></span> ~32K context</span>
|
|
637
|
+
</div>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
|
|
641
|
+
<!-- Mistral -->
|
|
642
|
+
<div class="provider-detail" data-provider="mistral" style="display:none">
|
|
643
|
+
<div class="glass-card rounded-xl p-8">
|
|
644
|
+
<div class="flex items-start gap-6 mb-6">
|
|
645
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center flex-shrink-0">
|
|
646
|
+
<span class="text-white text-lg font-black">Mi</span>
|
|
647
|
+
</div>
|
|
648
|
+
<div>
|
|
649
|
+
<h3 class="text-xl font-bold mb-1">Mistral AI</h3>
|
|
650
|
+
<p class="text-sm text-muted-foreground">Mistral Large, Pixtral — a francesa que compete com a OpenAI</p>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
654
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
655
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
656
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
657
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_API_KEY=sua-chave</code>
|
|
658
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=https://api.mistral.ai/v1</code>
|
|
659
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=mistral-large-latest</code>
|
|
660
|
+
</div>
|
|
661
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
662
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
663
|
+
<div class="flex flex-wrap gap-1.5">
|
|
664
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">mistral-large-latest</span>
|
|
665
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">pixtral-12b</span>
|
|
666
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">codestral-latest</span>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
670
|
+
<div class="text-xs text-muted-foreground mb-2">Highlights</div>
|
|
671
|
+
<ul class="text-xs text-muted-foreground space-y-1">
|
|
672
|
+
<li>• European, GDPR-friendly</li>
|
|
673
|
+
<li>• Codestral para código</li>
|
|
674
|
+
<li>• Pixtral para visão</li>
|
|
675
|
+
</ul>
|
|
676
|
+
</div>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
679
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Tool Calling</span>
|
|
680
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Vision</span>
|
|
681
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-yellow-400"></span> ~32K context</span>
|
|
682
|
+
</div>
|
|
683
|
+
</div>
|
|
684
|
+
</div>
|
|
685
|
+
|
|
686
|
+
<!-- Together AI -->
|
|
687
|
+
<div class="provider-detail" data-provider="together" style="display:none">
|
|
688
|
+
<div class="glass-card rounded-xl p-8">
|
|
689
|
+
<div class="flex items-start gap-6 mb-6">
|
|
690
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-violet-700 flex items-center justify-center flex-shrink-0">
|
|
691
|
+
<span class="text-white text-lg font-black">T</span>
|
|
692
|
+
</div>
|
|
693
|
+
<div>
|
|
694
|
+
<h3 class="text-xl font-bold mb-1">Together AI</h3>
|
|
695
|
+
<p class="text-sm text-muted-foreground">Llama 3.3 70B, Qwen e mais — API compatível OpenAI, preço baixo</p>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
699
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
700
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
701
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
702
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_API_KEY=sua-chave</code>
|
|
703
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=https://api.together.xyz/v1</code>
|
|
704
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=meta-llama/Llama-3.3-70B-Instruct-Turbo</code>
|
|
705
|
+
</div>
|
|
706
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
707
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
708
|
+
<div class="flex flex-wrap gap-1.5">
|
|
709
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">Llama-3.3-70B</span>
|
|
710
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">Qwen-72B</span>
|
|
711
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">+50 modelos</span>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
715
|
+
<div class="text-xs text-muted-foreground mb-2">Highlights</div>
|
|
716
|
+
<ul class="text-xs text-muted-foreground space-y-1">
|
|
717
|
+
<li>• 50+ open models</li>
|
|
718
|
+
<li>• Preço competitivo</li>
|
|
719
|
+
<li>• API OpenAI-compatible</li>
|
|
720
|
+
</ul>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
724
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Tool Calling</span>
|
|
725
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> 50+ modelos</span>
|
|
726
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-yellow-400"></span> ~8K-32K context</span>
|
|
727
|
+
</div>
|
|
728
|
+
</div>
|
|
729
|
+
</div>
|
|
730
|
+
|
|
731
|
+
<!-- LM Studio -->
|
|
732
|
+
<div class="provider-detail" data-provider="lmstudio" style="display:none">
|
|
733
|
+
<div class="glass-card rounded-xl p-8">
|
|
734
|
+
<div class="flex items-start gap-6 mb-6">
|
|
735
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-gray-600 to-gray-900 flex items-center justify-center flex-shrink-0">
|
|
736
|
+
<span class="text-white text-2xl font-black">LM</span>
|
|
737
|
+
</div>
|
|
738
|
+
<div>
|
|
739
|
+
<h3 class="text-xl font-bold mb-1">LM Studio (Local)</h3>
|
|
740
|
+
<p class="text-sm text-muted-foreground">App GUI com servidor OpenAI local. Roda qualquer GGUF que tu baixar.</p>
|
|
741
|
+
</div>
|
|
742
|
+
</div>
|
|
743
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
744
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
745
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
746
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
747
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=http://localhost:1234/v1</code>
|
|
748
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=nome-do-modelo</code>
|
|
749
|
+
<div class="mt-2 text-xs text-muted-foreground">(Sem API key needed)</div>
|
|
750
|
+
</div>
|
|
751
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
752
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
753
|
+
<p class="text-xs text-muted-foreground">Qualquer GGUF do HuggingFace. Baixa, carrega no LM Studio e roda.</p>
|
|
754
|
+
</div>
|
|
755
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
756
|
+
<div class="text-xs text-muted-foreground mb-2">Highlights</div>
|
|
757
|
+
<ul class="text-xs text-muted-foreground space-y-1">
|
|
758
|
+
<li>• GUI amigável</li>
|
|
759
|
+
<li>• Sem API key</li>
|
|
760
|
+
<li>• Local, offline</li>
|
|
761
|
+
<li>• Suporte a GGUF</li>
|
|
762
|
+
</ul>
|
|
763
|
+
</div>
|
|
764
|
+
</div>
|
|
765
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
766
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Local</span>
|
|
767
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Sem API key</span>
|
|
768
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Qualquer GGUF</span>
|
|
769
|
+
</div>
|
|
770
|
+
</div>
|
|
771
|
+
</div>
|
|
772
|
+
|
|
773
|
+
<!-- Atomic Chat -->
|
|
774
|
+
<div class="provider-detail" data-provider="atomic" style="display:none">
|
|
775
|
+
<div class="glass-card rounded-xl p-8">
|
|
776
|
+
<div class="flex items-start gap-6 mb-6">
|
|
777
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-teal-400 to-cyan-600 flex items-center justify-center flex-shrink-0">
|
|
778
|
+
<span class="text-black text-lg font-black">AC</span>
|
|
779
|
+
</div>
|
|
780
|
+
<div>
|
|
781
|
+
<h3 class="text-xl font-bold mb-1">Atomic Chat (Apple Silicon)</h3>
|
|
782
|
+
<p class="text-sm text-muted-foreground">Local em Apple Silicon via atomic.chat. Baixa o app, carrega modelo e roda.</p>
|
|
783
|
+
</div>
|
|
784
|
+
</div>
|
|
785
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
786
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
787
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
788
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
789
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=http://127.0.0.1:1337/v1</code>
|
|
790
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=nome-do-modelo</code>
|
|
791
|
+
<div class="mt-2 text-xs text-muted-foreground">(Sem API key needed)</div>
|
|
792
|
+
</div>
|
|
793
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
794
|
+
<div class="text-xs text-muted-foreground mb-2">Profiles</div>
|
|
795
|
+
<code class="text-xs font-mono text-yellow-400 block mb-1">bun run profile:init -- --provider atomic-chat</code>
|
|
796
|
+
<code class="text-xs font-mono text-yellow-400 block">bun run dev:atomic-chat</code>
|
|
797
|
+
</div>
|
|
798
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
799
|
+
<div class="text-xs text-muted-foreground mb-2">Nota</div>
|
|
800
|
+
<p class="text-xs text-muted-foreground">Precisa do Atomic Chat rodando com modelo carregado antes. Baixa em <span class="text-claudinho-cyan">atomic.chat</span></p>
|
|
801
|
+
</div>
|
|
802
|
+
</div>
|
|
803
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
804
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Apple Silicon</span>
|
|
805
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Local</span>
|
|
806
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Detecta modelo auto</span>
|
|
807
|
+
</div>
|
|
808
|
+
</div>
|
|
809
|
+
</div>
|
|
810
|
+
|
|
811
|
+
<!-- Azure OpenAI -->
|
|
812
|
+
<div class="provider-detail" data-provider="azure" style="display:none">
|
|
813
|
+
<div class="glass-card rounded-xl p-8">
|
|
814
|
+
<div class="flex items-start gap-6 mb-6">
|
|
815
|
+
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center flex-shrink-0">
|
|
816
|
+
<svg viewBox="0 0 24 24" class="w-7 h-7 text-white" fill="currentColor"><path d="M13.05 4.740a11.27 11.27 0 0 0-.555 4.329c0 1.83.413 3.594 1.151 5.16l-.748 2.357-.897-4.374-.902 4.374-.747-2.356a10.73 10.73 0 0 1-1.243-3.682l-.059 1.171L2 12l9.204-8.311L4.192 2 17.72 12 8.25 20.425l5.43-1.236c2.11.374 3.99.407 4.988.407 2.172 0 3.977-.838 4.867-1.764C22.652 16.391 22 9.592 19.178 7.4c-1.103-.86-2.598-1.621-4.717-2.278z"/></svg>
|
|
817
|
+
</div>
|
|
818
|
+
<div>
|
|
819
|
+
<h3 class="text-xl font-bold mb-1">Azure OpenAI</h3>
|
|
820
|
+
<p class="text-sm text-muted-foreground">Deploy corporativo via Azure — GPT-4o, o1 com rede privada e IAM</p>
|
|
821
|
+
</div>
|
|
822
|
+
</div>
|
|
823
|
+
<div class="grid md:grid-cols-3 gap-4">
|
|
824
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
825
|
+
<div class="text-xs text-muted-foreground mb-2">Variáveis</div>
|
|
826
|
+
<code class="text-xs font-mono text-green-400 block mb-1">CLAUDE_CODE_USE_OPENAI=1</code>
|
|
827
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_API_KEY=chave-azure</code>
|
|
828
|
+
<code class="text-xs font-mono text-green-400 block mb-1">OPENAI_BASE_URL=https://seu-recurso.openai.azure.com/openai/deployments/seu-deploy/v1</code>
|
|
829
|
+
<code class="text-xs font-mono text-green-400 block">OPENAI_MODEL=gpt-4o</code>
|
|
830
|
+
</div>
|
|
831
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
832
|
+
<div class="text-xs text-muted-foreground mb-2">Modelos</div>
|
|
833
|
+
<div class="flex flex-wrap gap-1.5">
|
|
834
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gpt-4o</span>
|
|
835
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">gpt-4o-mini</span>
|
|
836
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">text-embedding-ada</span>
|
|
837
|
+
<span class="px-2 py-1 rounded text-xs bg-white/5 text-white font-mono">dall-e-3</span>
|
|
838
|
+
</div>
|
|
839
|
+
</div>
|
|
840
|
+
<div class="rounded-lg p-4 bg-white/5 border border-white/5">
|
|
841
|
+
<div class="text-xs text-muted-foreground mb-2">Highlights</div>
|
|
842
|
+
<ul class="text-xs text-muted-foreground space-y-1">
|
|
843
|
+
<li>• VPC Private endpoints</li>
|
|
844
|
+
<li>• Azure Active Directory</li>
|
|
845
|
+
<li>• SLA enterprise</li>
|
|
846
|
+
</ul>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
<div class="mt-4 flex items-center gap-6 text-xs text-muted-foreground">
|
|
850
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Azure IAM</span>
|
|
851
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Private network</span>
|
|
852
|
+
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-400"></span> Enterprise</span>
|
|
853
|
+
</div>
|
|
854
|
+
</div>
|
|
855
|
+
</div>
|
|
856
|
+
</div>
|
|
857
|
+
</div>
|
|
858
|
+
</div>
|
|
859
|
+
</section>
|
|
860
|
+
|
|
861
|
+
<!-- ====== TERMINAL DEMO ====== -->
|
|
862
|
+
<section id="terminal" class="py-24 relative">
|
|
863
|
+
<div class="max-w-4xl mx-auto px-6">
|
|
864
|
+
<div class="text-center mb-12">
|
|
865
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-cyan">Veja funcionando</span>
|
|
866
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">Poder real, modelo que você escolher</h2>
|
|
867
|
+
</div>
|
|
868
|
+
|
|
869
|
+
<div class="glass rounded-xl overflow-hidden border border-white/10">
|
|
870
|
+
<!-- Terminal header -->
|
|
871
|
+
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/5 bg-black/30">
|
|
872
|
+
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
|
|
873
|
+
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
|
|
874
|
+
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
|
|
875
|
+
<span class="ml-2 text-xs text-muted-foreground font-mono">claudinho — v0.1.7</span>
|
|
876
|
+
</div>
|
|
877
|
+
<!-- Terminal body -->
|
|
878
|
+
<div id="terminal" class="p-6 font-mono text-sm leading-relaxed min-h-[340px]">
|
|
879
|
+
<div class="text-muted-foreground">
|
|
880
|
+
<span class="text-green-400">➜</span> <span class="text-claudinho-purple">~</span> npm i -g @touchzada/claudinho
|
|
881
|
+
</div>
|
|
882
|
+
<div class="text-muted-foreground mt-2">
|
|
883
|
+
<span class="text-claudinho-cyan">✔</span> installed @touchzada/claudinho@0.1.7
|
|
884
|
+
</div>
|
|
885
|
+
<div class="text-green-400 mt-4">
|
|
886
|
+
<span>➜</span> <span class="text-claudinho-purple">~</span> claudinho
|
|
887
|
+
</div>
|
|
888
|
+
<div class="text-muted-foreground mt-2">
|
|
889
|
+
<span class="text-claudinho-pink">◐</span> connected to <span class="text-white">OpenRouter</span> · qwen/qwen3.6-plus:free
|
|
890
|
+
</div>
|
|
891
|
+
<div class="text-muted-foreground mt-4 text-claudinho-purple">
|
|
892
|
+
claudinho> <span class="text-white">me mostra os arquivos deste projeto</span>
|
|
893
|
+
</div>
|
|
894
|
+
<div class="text-muted-foreground mt-2">
|
|
895
|
+
<span class="text-claudinho-cyan">[Glob]</span> src/commands/**/*.ts → <span class="text-white">1,956 arquivos</span>
|
|
896
|
+
</div>
|
|
897
|
+
<div class="text-muted-foreground mt-1">
|
|
898
|
+
<span class="text-claudinho-cyan">[Bash]</span> find . -name "*.ts" | wc -l → <span class="text-white">1956</span>
|
|
899
|
+
</div>
|
|
900
|
+
<div class="text-muted-foreground mt-4 text-claudinho-purple">
|
|
901
|
+
claudinho> <span class="text-white">quanta memory isso tá gastando?</span>
|
|
902
|
+
</div>
|
|
903
|
+
<div class="text-muted-foreground mt-2">
|
|
904
|
+
<span class="text-claudinho-cyan">[Bash]</span> ps aux | grep claudinho
|
|
905
|
+
</div>
|
|
906
|
+
<div class="text-muted-foreground mt-1">
|
|
907
|
+
PID 12847 · <span class="text-green-400">312MB RSS</span> · CPU 1.2%
|
|
908
|
+
</div>
|
|
909
|
+
<div class="text-muted-foreground mt-4 text-claudinho-purple">
|
|
910
|
+
claudinho> <span class="text-white cursor-blink">_</span>
|
|
911
|
+
</div>
|
|
912
|
+
</div>
|
|
913
|
+
</div>
|
|
914
|
+
</div>
|
|
915
|
+
</section>
|
|
916
|
+
|
|
917
|
+
<!-- ====== TOOLS GRID ====== -->
|
|
918
|
+
<section id="tools" class="py-24 bg-black/20 radial-fade">
|
|
919
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
920
|
+
<div class="text-center mb-16">
|
|
921
|
+
<span class="text-xs uppercase tracking-[0.2em] text-green-400">Capacidades</span>
|
|
922
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">45 Tools — Todas Funcionando</h2>
|
|
923
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">Cada tool com schema Zod validado, AgentTool e MCPTool compatíveis.</p>
|
|
924
|
+
</div>
|
|
925
|
+
|
|
926
|
+
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
927
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="terminal" class="w-5 h-5 mx-auto mb-2 text-claudinho-purple"></i><div class="text-xs font-medium">Bash</div></div>
|
|
928
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="file-text" class="w-5 h-5 mx-auto mb-2 text-claudinho-cyan"></i><div class="text-xs font-medium">FileRead</div></div>
|
|
929
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="file-edit" class="w-5 h-5 mx-auto mb-2 text-claudinho-pink"></i><div class="text-xs font-medium">FileEdit</div></div>
|
|
930
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="file-plus" class="w-5 h-5 mx-auto mb-2 text-green-400"></i><div class="text-xs font-medium">FileWrite</div></div>
|
|
931
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="search" class="w-5 h-5 mx-auto mb-2 text-yellow-400"></i><div class="text-xs font-medium">Glob</div></div>
|
|
932
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="filter" class="w-5 h-5 mx-auto mb-2 text-orange-400"></i><div class="text-xs font-medium">Grep</div></div>
|
|
933
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="globe" class="w-5 h-5 mx-auto mb-2 text-blue-400"></i><div class="text-xs font-medium">WebFetch</div></div>
|
|
934
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="search-check" class="w-5 h-5 mx-auto mb-2 text-teal-400"></i><div class="text-xs font-medium">WebSearch</div></div>
|
|
935
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="bot" class="w-5 h-5 mx-auto mb-2 text-claudinho-purple"></i><div class="text-xs font-medium">Agent</div></div>
|
|
936
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="plug" class="w-5 h-5 mx-auto mb-2 text-claudinho-pink"></i><div class="text-xs font-medium">MCP</div></div>
|
|
937
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="code" class="w-5 h-5 mx-auto mb-2 text-claudinho-cyan"></i><div class="text-xs font-medium">LSP</div></div>
|
|
938
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="list-todo" class="w-5 h-5 mx-auto mb-2 text-green-400"></i><div class="text-xs font-medium">Tasks</div></div>
|
|
939
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="notebook" class="w-5 h-5 mx-auto mb-2 text-yellow-400"></i><div class="text-xs font-medium">NotebookEdit</div></div>
|
|
940
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="image" class="w-5 h-5 mx-auto mb-2 text-pink-400"></i><div class="text-xs font-medium">Imagens</div></div>
|
|
941
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="message-square" class="w-5 h-5 mx-auto mb-2 text-indigo-400"></i><div class="text-xs font-medium">Streaming</div></div>
|
|
942
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="shield-check" class="w-5 h-5 mx-auto mb-2 text-emerald-400"></i><div class="text-xs font-medium">Security(23)</div></div>
|
|
943
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="memory-stick" class="w-5 h-5 mx-auto mb-2 text-lime-400"></i><div class="text-xs font-medium">Memória</div></div>
|
|
944
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="git-branch" class="w-5 h-5 mx-auto mb-2 text-amber-400"></i><div class="text-xs font-medium">Git</div></div>
|
|
945
|
+
</div>
|
|
946
|
+
</div>
|
|
947
|
+
</section>
|
|
948
|
+
|
|
949
|
+
<!-- ====== COMMANDS ====== -->
|
|
950
|
+
<section id="commands" class="py-24 relative">
|
|
951
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
952
|
+
<div class="text-center mb-16">
|
|
953
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-pink">Interface</span>
|
|
954
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">~100+ Slash Commands</h2>
|
|
955
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">Fast-path dispatch, 3 tipos de handler, tudo integrado no TUI em React 19 + Yoga WASM.</p>
|
|
956
|
+
</div>
|
|
957
|
+
|
|
958
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-3 max-w-6xl mx-auto">
|
|
959
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-claudinho-purple">/status</div>
|
|
960
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-claudinho-cyan">/provider</div>
|
|
961
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-claudinho-pink">/model</div>
|
|
962
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-green-400">/config</div>
|
|
963
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-yellow-400">/plan</div>
|
|
964
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-blue-400">/tasks</div>
|
|
965
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-teal-400">/clear</div>
|
|
966
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-orange-400">/exit</div>
|
|
967
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-red-400">/resume</div>
|
|
968
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-indigo-400">/ide</div>
|
|
969
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-emerald-400">/mcp</div>
|
|
970
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-lime-400">/hooks</div>
|
|
971
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-amber-400">/skills</div>
|
|
972
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-rose-400">/vim</div>
|
|
973
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-cyan-300">/diff</div>
|
|
974
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-violet-400">/+47 mais...</div>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
</section>
|
|
978
|
+
|
|
979
|
+
<!-- ====== ARCHITECTURE ====== -->
|
|
980
|
+
<section class="py-24 bg-black/20 radial-fade">
|
|
981
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
982
|
+
<div class="text-center mb-16">
|
|
983
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-cyan">Por dentro</span>
|
|
984
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">Arquitetura Técnica</h2>
|
|
985
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">1,956 arquivos TypeScript. Build com Bun.build(). 26 feature flags. Multi-provider real, não fake.</p>
|
|
986
|
+
</div>
|
|
987
|
+
|
|
988
|
+
<div class="grid md:grid-cols-3 gap-6">
|
|
989
|
+
<div class="glass-card rounded-xl p-6">
|
|
990
|
+
<div class="flex items-center gap-2 mb-4">
|
|
991
|
+
<i data-lucide="layers" class="w-5 h-5 text-claudinho-purple"></i>
|
|
992
|
+
<h3 class="font-semibold">Core</h3>
|
|
993
|
+
</div>
|
|
994
|
+
<div class="space-y-2 text-xs text-muted-foreground">
|
|
995
|
+
<div class="flex justify-between"><span>Arquivos TS</span><span class="text-white font-mono">1,956</span></div>
|
|
996
|
+
<div class="flex justify-between"><span>OpenAI Shim</span><span class="text-white font-mono">1,099 linhas</span></div>
|
|
997
|
+
<div class="flex justify-between"><span>Tools</span><span class="text-white font-mono">45 com Zod</span></div>
|
|
998
|
+
<div class="flex justify-between"><span>Bash Security</span><span class="text-white font-mono">23 checks</span></div>
|
|
999
|
+
</div>
|
|
1000
|
+
</div>
|
|
1001
|
+
|
|
1002
|
+
<div class="glass-card rounded-xl p-6">
|
|
1003
|
+
<div class="flex items-center gap-2 mb-4">
|
|
1004
|
+
<i data-lucide="server" class="w-5 h-5 text-claudinho-pink"></i>
|
|
1005
|
+
<h3 class="font-semibold">Bridge & Session</h3>
|
|
1006
|
+
</div>
|
|
1007
|
+
<div class="space-y-2 text-xs text-muted-foreground">
|
|
1008
|
+
<div class="flex justify-between"><span>Bridge Version</span><span class="text-white font-mono">V1 + V2</span></div>
|
|
1009
|
+
<div class="flex justify-between"><span>Auth</span><span class="text-white font-mono">Multi-camada</span></div>
|
|
1010
|
+
<div class="flex justify-between"><span>WebSocket</span><span class="text-white font-mono">Reconnect</span></div>
|
|
1011
|
+
<div class="flex justify-between"><span>Token Refresh</span><span class="text-white font-mono">Automático</span></div>
|
|
1012
|
+
</div>
|
|
1013
|
+
</div>
|
|
1014
|
+
|
|
1015
|
+
<div class="glass-card rounded-xl p-6">
|
|
1016
|
+
<div class="flex items-center gap-2 mb-4">
|
|
1017
|
+
<i data-lucide="palette" class="w-5 h-5 text-claudinho-cyan"></i>
|
|
1018
|
+
<h3 class="font-semibold">UI / TUI</h3>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div class="space-y-2 text-xs text-muted-foreground">
|
|
1021
|
+
<div class="flex justify-between"><span>Framework</span><span class="text-white font-mono">React 19</span></div>
|
|
1022
|
+
<div class="flex justify-between"><span>Layout</span><span class="text-white font-mono">Yoga WASM</span></div>
|
|
1023
|
+
<div class="flex justify-between"><span>Componentes</span><span class="text-white font-mono">35+</span></div>
|
|
1024
|
+
<div class="flex justify-between"><span>Render</span><span class="text-white font-mono">Double Buffer</span></div>
|
|
1025
|
+
</div>
|
|
1026
|
+
</div>
|
|
1027
|
+
</div>
|
|
1028
|
+
</div>
|
|
1029
|
+
</section>
|
|
1030
|
+
|
|
1031
|
+
<!-- ====== SECURITY ====== -->
|
|
1032
|
+
<section id="security" class="py-24 relative">
|
|
1033
|
+
<div class="max-w-4xl mx-auto px-6">
|
|
1034
|
+
<div class="text-center mb-16">
|
|
1035
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-purple">Segurança</span>
|
|
1036
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">Auditoria Completa de Segurança</h2>
|
|
1037
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">15 vulnerabilidades mapeadas. 1 Crítica, 4 Altas, 5 Médias, 1 Baixa. Sabemos onde dói.</p>
|
|
1038
|
+
</div>
|
|
1039
|
+
|
|
1040
|
+
<div class="space-y-4">
|
|
1041
|
+
<!-- Critical -->
|
|
1042
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-red-500">
|
|
1043
|
+
<div class="flex items-center gap-3 mb-2">
|
|
1044
|
+
<span class="px-2 py-0.5 rounded bg-red-500/10 text-red-400 text-xs font-bold">CRÍTICO</span>
|
|
1045
|
+
<h4 class="font-semibold text-sm">API Key exposta no repo</h4>
|
|
1046
|
+
</div>
|
|
1047
|
+
<p class="text-xs text-muted-foreground">Chave OpenRouter visível em .env.example. .env tracked no git. Rotacionar imediatamente.</p>
|
|
1048
|
+
</div>
|
|
1049
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-orange-500">
|
|
1050
|
+
<div class="flex items-center gap-3 mb-2">
|
|
1051
|
+
<span class="px-2 py-0.5 rounded bg-orange-500/10 text-orange-400 text-xs font-bold">ALTO</span>
|
|
1052
|
+
<h4 class="font-semibold text-sm">apiKeyHelper executa código arbitrário</h4>
|
|
1053
|
+
</div>
|
|
1054
|
+
<p class="text-xs text-muted-foreground">Qualquer projeto pode injetar execução shell. Gated por trust dialog só em sessions interativas.</p>
|
|
1055
|
+
</div>
|
|
1056
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-yellow-500">
|
|
1057
|
+
<div class="flex items-center gap-3 mb-2">
|
|
1058
|
+
<span class="px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-400 text-xs font-bold">MÉDIO</span>
|
|
1059
|
+
<h4 class="font-semibold text-sm">Sem sandbox no Windows nativo</h4>
|
|
1060
|
+
</div>
|
|
1061
|
+
<p class="text-xs text-muted-foreground">Sandbox só funciona em macOS (seatbelt) e WSL2 (bubblewrap). No Windows: zero proteção.</p>
|
|
1062
|
+
</div>
|
|
1063
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-green-500">
|
|
1064
|
+
<div class="flex items-center gap-3 mb-2">
|
|
1065
|
+
<span class="px-2 py-0.5 rounded bg-green-500/10 text-green-400 text-xs font-bold">AUDITADO</span>
|
|
1066
|
+
<h4 class="font-semibold text-sm">Matriz completa documentada</h4>
|
|
1067
|
+
</div>
|
|
1068
|
+
<p class="text-xs text-muted-foreground">Todas as 15 vulnerabilidades catalogadas com arquivo, linha, severidade e recomendação. Transparência total.</p>
|
|
1069
|
+
</div>
|
|
1070
|
+
</div>
|
|
1071
|
+
</div>
|
|
1072
|
+
</section>
|
|
1073
|
+
|
|
1074
|
+
<!-- ====== CTA / FOOTER ====== -->
|
|
1075
|
+
<section class="py-24 relative radial-fade">
|
|
1076
|
+
<div class="max-w-3xl mx-auto text-center px-6">
|
|
1077
|
+
<h2 class="text-4xl md:text-5xl font-bold mb-6">Pronto pra rodar?</h2>
|
|
1078
|
+
<p class="text-lg text-muted-foreground mb-10">Instala, configura teu provider favorito e bora codar. É MIT, é open, é teu.</p>
|
|
1079
|
+
|
|
1080
|
+
<div class="glass rounded-xl border border-white/10 p-6 text-left font-mono text-sm max-w-lg mx-auto mb-8">
|
|
1081
|
+
<div class="text-muted-foreground mb-1 text-xs"># Instalação</div>
|
|
1082
|
+
<div class="text-green-400">npm i -g <span class="text-white">@touchzada/claudinho</span></div>
|
|
1083
|
+
<div class="mt-4 text-muted-foreground mb-1 text-xs"># Ou clona o repo</div>
|
|
1084
|
+
<div class="text-green-400">git clone <span class="text-white">https://github.com/touchzada/Claudinho</span></div>
|
|
1085
|
+
<div class="mt-4 text-muted-foreground mb-1 text-xs"># Configura teu provider</div>
|
|
1086
|
+
<div class="text-green-400">export OPENAI_BASE_URL="<span class="text-white">https://api.openrouter.ai/v1</span>"</div>
|
|
1087
|
+
<div class="text-green-400">export OPENAI_API_KEY="<span class="text-claudinho-pink">sua-key-aqui</span>"</div>
|
|
1088
|
+
<div class="mt-2 text-green-400">claudinho</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
|
|
1091
|
+
<a href="https://github.com/touchzada/Claudinho" target="_blank" class="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-claudinho-purple to-claudinho-pink font-semibold text-sm hover:opacity-90 transition glow-hover">
|
|
1092
|
+
<i data-lucide="github" class="w-5 h-5"></i>
|
|
1093
|
+
Ver no GitHub
|
|
1094
|
+
</a>
|
|
1095
|
+
|
|
1096
|
+
<div class="mt-20 pt-10 border-t border-white/5 text-xs text-muted-foreground">
|
|
1097
|
+
<p>Claudinho v0.1.8 · Feito com muito ☕ café e alucinação de IA 🤖</p>
|
|
1098
|
+
<p class="mt-4 text-muted-foreground/50">MIT License · Feito no 🇧🇷 com amor, resenha e um pouco de gambiarra</p>
|
|
1099
|
+
</div>
|
|
1100
|
+
</div>
|
|
1101
|
+
</section>
|
|
1102
|
+
|
|
1103
|
+
<script>
|
|
1104
|
+
// Init Lucide icons
|
|
1105
|
+
lucide.createIcons();
|
|
1106
|
+
|
|
1107
|
+
// Intersection Observer for scroll animations
|
|
1108
|
+
const observer = new IntersectionObserver((entries) => {
|
|
1109
|
+
entries.forEach(entry => {
|
|
1110
|
+
if (entry.isIntersecting) {
|
|
1111
|
+
entry.target.classList.add('slide-up');
|
|
1112
|
+
entry.target.style.opacity = '1';
|
|
1113
|
+
}
|
|
1114
|
+
});
|
|
1115
|
+
}, { threshold: 0.1 });
|
|
1116
|
+
|
|
1117
|
+
document.querySelectorAll('section:not(:first-child)').forEach(s => {
|
|
1118
|
+
s.style.opacity = '0';
|
|
1119
|
+
observer.observe(s);
|
|
1120
|
+
});
|
|
1121
|
+
|
|
1122
|
+
// Smooth scroll for nav links
|
|
1123
|
+
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
|
1124
|
+
a.addEventListener('click', e => {
|
|
1125
|
+
e.preventDefault();
|
|
1126
|
+
const target = document.querySelector(a.getAttribute('href'));
|
|
1127
|
+
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
1128
|
+
});
|
|
1129
|
+
});
|
|
1130
|
+
|
|
1131
|
+
// Provider tab switcher
|
|
1132
|
+
function switchProvider(name) {
|
|
1133
|
+
document.querySelectorAll('.provider-detail').forEach(d => d.style.display = 'none');
|
|
1134
|
+
document.querySelectorAll('.provider-tab').forEach(t => {
|
|
1135
|
+
t.classList.remove('bg-white/10', 'text-white');
|
|
1136
|
+
t.classList.add('bg-white/5', 'text-muted-foreground');
|
|
1137
|
+
});
|
|
1138
|
+
const detail = document.querySelector(`.provider-detail[data-provider="${name}"]`);
|
|
1139
|
+
const tab = document.querySelector(`.provider-tab[data-provider="${name}"]`);
|
|
1140
|
+
if (detail) {
|
|
1141
|
+
detail.style.display = 'block';
|
|
1142
|
+
detail.classList.remove('slide-up');
|
|
1143
|
+
detail.style.opacity = '0';
|
|
1144
|
+
void detail.offsetWidth; // reflow
|
|
1145
|
+
detail.classList.add('slide-up');
|
|
1146
|
+
detail.style.opacity = '1';
|
|
1147
|
+
}
|
|
1148
|
+
if (tab) { tab.classList.add('bg-white/10', 'text-white'); tab.classList.remove('bg-white/5', 'text-muted-foreground'); }
|
|
1149
|
+
}
|
|
1150
|
+
</script>
|
|
1151
|
+
</body>
|
|
1152
|
+
</html>
|