Hugging Face's logo

Spaces:
Agente7
/
trader-game
Running

App Files Community
Agente7 commited on
Commit
a525584
·
verified ·
1 Parent(s): bac48d8

## 🎮 Trader Hardcore: Sobrevive Quem Pensa - Design do Jogo Aqui está o design completo do jogo com mecânicas, regras e sistema de progressão: ### 🌐 Arquitetura do Sistema ```mermaid graph TD A[Jogador] --> B[Interface Web] B --> C[Núcleo do Jogo] C --> D[Sistema de Regras] C --> E[Simulador de Mercado] C --> F[Mecânica de Pontuação] D --> G[Feedback com IA] E --> H[Dados Históricos] F --> I[Progressão] ``` ### ⚙️ Mecânicas Principais 1. **Sistema de Dias** - 30 dias de trading simulado (1 dia real = 1 dia no jogo) - Cada dia dura 2-5 minutos de jogo - Relógio em tempo real com eventos programados 2. **Regras Mortais (20 regras implementadas)** - Sistema de detecção automática de violações - Cada erro = Game Over instantâneo - Exemplos: - Operar sem stop loss - Fazer revenge trade - Negociar em baixa liquidez - Ignorar spread 3. **Sistema de Pontuação Tripla** ```python def atualizar_pontuacao(): if dia_sem_erros: player.disciplina += 1 player.conhecimento += 1 player.controle_risco += 1 ``` ### 🖥️ Interface do Jogo ```mermaid graph LR A[Tela Principal] --> B[Painel Trading] A --> C[Calendário Econômico] A --> D[Relatório Diário] B --> E[Gráfico em Tempo Real] B --> F[Painel de Ordens] B --> G[Monitor de Risco] ``` ### 🧠 Sistema de IA Integrado 1. **Feedback Instantâneo** - Análise de erros com explicações detalhadas - Exemplo: "Você operou em RSI 88 - Isso é sobrecompra técnica. Veja o histórico..." 2. **Mecânica de Desbloqueio** - 30 pontos em todas categorias → Modo Realista - Modo Realista inclui: - Dados históricos reais - Eventos de notícias simulados - Slippage e spread variável ### 💾 Tecnologias Recomendadas | Componente | Tecnologia | |------------------|---------------------| | Frontend | React + Chart.js | | Backend | Python (FastAPI) | | IA | GPT-4 API | | Simulação Mercado| PyAlgotrade | | Banco de Dados | PostgreSQL | ### 📈 Progressão do Jogador ```mermaid journey title Jornada do Trader section Fase 1 Novato: 5: Jogador Sobrevivente: 3: Jogador section Fase 2 Estrategista: 5: Jogador Mestre: 2: Jogador section Fase Final Lenda: 1: Jogador ``` ### 🚀 Próximos Passos para Implementação 1. **Prototipagem Rápida (MVP):** - Implementar 5 regras centrais - Criar simulador de mercado básico - Sistema de pontuação mínimo 2. **Integração IA:** - Conectar API GPT para feedbacks - Treinar modelo com erros comuns de traders 3. **Sistema de Cenários:** ```python cenarios = { "noticia_impactante": { "probabilidade": 0.3, "efeito": "volatilidade_200%" }, "flash_crash": { "probabilidade": 0.1, "efeito": "queda_rapida_5%" } } ``` 4. **Modo Multiplayer (Futuro):** - Ranking global - Desafios semanais - Batalhas de trading PvP ### 💡 Diferenciais Inovadores - **Dark Souls do Trading**: Dificuldade progressiva e aprendizado na dor - **Replay Tático**: Após cada Game Over, replay com análise IA - **Certificação**: Ao completar 30 dias, certificado digital NFT - **Modo Sobrevivência**: Quantos dias seguidos você aguenta? Quer que eu: 1. Comece a codificar o backend em Python? 2. Desenvolva o design de UI/UX? 3. Crie um documento de especificação técnico detalhado? Ou vamos direto para o protótipo jogável? 🔥💻 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +543 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trader Game
3
- emoji: 🐨
4
  colorFrom: red
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: trader-game
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,543 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>🎮 Trader Hardcore - Sobrevive Quem Pensa</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ traderDark: '#0d0f1a',
15
+ traderRed: '#e63946',
16
+ traderGreen: '#2a9d8f',
17
+ traderBlue: '#457b9d',
18
+ traderGold: '#e9c46a',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ .trading-card {
26
+ background: linear-gradient(135deg, rgba(13,15,26,0.8) 0%, rgba(27,38,59,0.9) 100%);
27
+ backdrop-filter: blur(10px);
28
+ box-shadow: 0 10px 25px rgba(0,0,0,0.5);
29
+ }
30
+ .glow-red {
31
+ box-shadow: 0 0 15px rgba(230,57,70,0.7);
32
+ }
33
+ .glow-green {
34
+ box-shadow: 0 0 15px rgba(42,157,143,0.7);
35
+ }
36
+ .pulse {
37
+ animation: pulse 2s infinite;
38
+ }
39
+ @keyframes pulse {
40
+ 0% { transform: scale(1); }
41
+ 50% { transform: scale(1.05); }
42
+ 100% { transform: scale(1); }
43
+ }
44
+ .chart-container {
45
+ height: 400px;
46
+ background: rgba(15, 23, 42, 0.5);
47
+ }
48
+ .progress-bar {
49
+ height: 8px;
50
+ overflow: hidden;
51
+ }
52
+ .skill-meter {
53
+ display: flex;
54
+ justify-content: space-between;
55
+ width: 100%;
56
+ }
57
+ .skill-level {
58
+ height: 8px;
59
+ transition: all 0.3s ease;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-traderDark text-white min-h-screen font-sans">
64
+ <!-- Header -->
65
+ <header class="bg-black/50 backdrop-blur-md py-4 px-6 sticky top-0 z-50 border-b border-traderBlue/20">
66
+ <div class="container mx-auto flex justify-between items-center">
67
+ <div class="flex items-center space-x-2">
68
+ <div class="text-traderGold text-3xl">
69
+ <i class="fas fa-coins"></i>
70
+ </div>
71
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-traderGold to-traderGreen">
72
+ TRADER HARDCORE
73
+ </h1>
74
+ </div>
75
+ <nav class="hidden md:flex space-x-6">
76
+ <a href="#" class="hover:text-traderGold transition-colors">Home</a>
77
+ <a href="#" class="hover:text-traderGold transition-colors">Regras</a>
78
+ <a href="#" class="hover:text-traderGold transition-colors">Ranking</a>
79
+ <a href="#" class="hover:text-traderGold transition-colors">Tutorial</a>
80
+ <a href="#" class="text-traderRed font-bold">Jogar Agora</a>
81
+ </nav>
82
+ <button class="md:hidden text-xl">
83
+ <i class="fas fa-bars"></i>
84
+ </button>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Hero Section -->
89
+ <section class="relative py-16 px-6 bg-gradient-to-b from-traderDark to-traderBlue/10">
90
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
91
+ <div class="md:w-1/2 mb-10 md:mb-0">
92
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">
93
+ <span class="text-traderRed">SOBREVIVE</span> QUEM PENSA
94
+ </h2>
95
+ <p class="text-lg mb-8 text-gray-300">
96
+ O jogo de trading mais implacável já criado. Um erro e <span class="text-traderRed font-bold">GAME OVER</span>.
97
+ Desenvolva disciplina, estratégia e controle emocional para se tornar uma lenda dos mercados.
98
+ </p>
99
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
100
+ <a href="#" class="bg-traderRed hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg text-center transition-colors pulse">
101
+ <i class="fas fa-play mr-2"></i> Começar Jogo
102
+ </a>
103
+ <a href="#" class="border border-traderGold hover:bg-traderGold/10 text-traderGold font-bold py-3 px-6 rounded-lg text-center transition-colors">
104
+ <i class="fas fa-book mr-2"></i> Regras do Jogo
105
+ </a>
106
+ </div>
107
+ </div>
108
+ <div class="md:w-1/2 flex justify-center">
109
+ <div class="trading-card rounded-2xl overflow-hidden w-full max-w-lg">
110
+ <div class="bg-traderDark/50 p-4 border-b border-traderBlue/20 flex justify-between items-center">
111
+ <div>
112
+ <span class="text-traderGold">USD/BRL</span>
113
+ <span class="ml-2 text-green-400">▲ 5.2478</span>
114
+ </div>
115
+ <div class="text-sm text-gray-400">
116
+ <i class="fas fa-clock mr-1"></i> Dia 7/30
117
+ </div>
118
+ </div>
119
+ <div class="chart-container p-4">
120
+ <!-- Chart placeholder -->
121
+ <div class="h-full bg-gray-900/50 rounded-lg flex items-center justify-center">
122
+ <div class="text-center">
123
+ <div class="text-5xl mb-4 text-traderGold">
124
+ <i class="fas fa-chart-line"></i>
125
+ </div>
126
+ <p class="text-gray-400">Gráfico interativo em tempo real</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="bg-traderDark/80 p-4 grid grid-cols-2 gap-4">
131
+ <div class="bg-traderDark p-3 rounded-lg border border-traderBlue/20">
132
+ <div class="flex justify-between items-center mb-2">
133
+ <span class="text-sm text-gray-400">Disciplina</span>
134
+ <span class="text-xs bg-traderGreen/20 text-traderGreen px-2 py-1 rounded">12/30</span>
135
+ </div>
136
+ <div class="progress-bar bg-gray-800 rounded-full">
137
+ <div class="bg-traderGreen h-full rounded-full" style="width: 40%"></div>
138
+ </div>
139
+ </div>
140
+ <div class="bg-traderDark p-3 rounded-lg border border-traderBlue/20">
141
+ <div class="flex justify-between items-center mb-2">
142
+ <span class="text-sm text-gray-400">Conhecimento</span>
143
+ <span class="text-xs bg-traderBlue/20 text-traderBlue px-2 py-1 rounded">8/30</span>
144
+ </div>
145
+ <div class="progress-bar bg-gray-800 rounded-full">
146
+ <div class="bg-traderBlue h-full rounded-full" style="width: 27%"></div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Game Features -->
156
+ <section class="py-16 px-6 bg-traderDark">
157
+ <div class="container mx-auto">
158
+ <h2 class="text-3xl font-bold mb-12 text-center">
159
+ <span class="text-traderGold">MECÂNICAS</span> DO JOGO
160
+ </h2>
161
+
162
+ <div class="grid md:grid-cols-3 gap-8">
163
+ <!-- Feature 1 -->
164
+ <div class="bg-traderDark/50 border border-traderBlue/20 rounded-xl p-6 hover:border-traderGold/50 transition-all">
165
+ <div class="text-traderRed text-4xl mb-4">
166
+ <i class="fas fa-calendar-day"></i>
167
+ </div>
168
+ <h3 class="text-xl font-bold mb-3">Sistema de Dias</h3>
169
+ <p class="text-gray-400">
170
+ 30 dias de trading simulado onde cada dia real equivale a um dia no jogo. Dias críticos têm eventos aleatórios.
171
+ </p>
172
+ </div>
173
+
174
+ <!-- Feature 2 -->
175
+ <div class="bg-traderDark/50 border border-traderBlue/20 rounded-xl p-6 hover:border-traderGold/50 transition-all">
176
+ <div class="text-traderRed text-4xl mb-4">
177
+ <i class="fas fa-skull"></i>
178
+ </div>
179
+ <h3 class="text-xl font-bold mb-3">Regras Mortais</h3>
180
+ <p class="text-gray-400">
181
+ 20 regras implacáveis. Uma violação resulta em Game Over instantâneo e reinício do dia.
182
+ </p>
183
+ </div>
184
+
185
+ <!-- Feature 3 -->
186
+ <div class="bg-traderDark/50 border border-traderBlue/20 rounded-xl p-6 hover:border-traderGold/50 transition-all">
187
+ <div class="text-traderRed text-4xl mb-4">
188
+ <i class="fas fa-trophy"></i>
189
+ </div>
190
+ <h3 class="text-xl font-bold mb-3">Pontuação Tripla</h3>
191
+ <p class="text-gray-400">
192
+ Domine três habilidades: Disciplina, Conhecimento e Controle de Risco para desbloquear novos níveis.
193
+ </p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- Rules Section -->
200
+ <section class="py-16 px-6 bg-gradient-to-b from-traderDark to-traderBlue/10">
201
+ <div class="container mx-auto">
202
+ <h2 class="text-3xl font-bold mb-12 text-center">
203
+ <span class="text-traderGold">REGRAS</span> IMPLACÁVEIS
204
+ </h2>
205
+
206
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
207
+ <!-- Rule 1 -->
208
+ <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all">
209
+ <div class="flex items-center mb-3">
210
+ <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3">
211
+ <i class="fas fa-ban"></i>
212
+ </div>
213
+ <h3 class="font-bold">Operar sem Stop Loss</h3>
214
+ </div>
215
+ <p class="text-gray-300 text-sm">
216
+ Todas as operações devem ter stop loss definido. Violação resulta em Game Over imediato.
217
+ </p>
218
+ </div>
219
+
220
+ <!-- Rule 2 -->
221
+ <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all">
222
+ <div class="flex items-center mb-3">
223
+ <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3">
224
+ <i class="fas fa-undo-alt"></i>
225
+ </div>
226
+ <h3 class="font-bold">Revenge Trading</h3>
227
+ </div>
228
+ <p class="text-gray-300 text-sm">
229
+ Tentar recuperar perdas imediatamente após uma operação perdida é proibido.
230
+ </p>
231
+ </div>
232
+
233
+ <!-- Rule 3 -->
234
+ <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all">
235
+ <div class="flex items-center mb-3">
236
+ <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3">
237
+ <i class="fas fa-chart-bar"></i>
238
+ </div>
239
+ <h3 class="font-bold">Negociar em Baixa Liquidez</h3>
240
+ </div>
241
+ <p class="text-gray-300 text-sm">
242
+ Operar em períodos de baixa liquidez resulta em penalidade imediata.
243
+ </p>
244
+ </div>
245
+
246
+ <!-- Rule 4 -->
247
+ <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all">
248
+ <div class="flex items-center mb-3">
249
+ <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3">
250
+ <i class="fas fa-percentage"></i>
251
+ </div>
252
+ <h3 class="font-bold">Ignorar Spread</h3>
253
+ </div>
254
+ <p class="text-gray-300 text-sm">
255
+ Operar sem considerar o spread entre compra e veda é considerado violação.
256
+ </p>
257
+ </div>
258
+
259
+ <!-- Rule 5 -->
260
+ <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all">
261
+ <div class="flex items-center mb-3">
262
+ <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3">
263
+ <i class="fas fa-money-bill-wave"></i>
264
+ </div>
265
+ <h3 class="font-bold">Alavancagem Excessiva</h3>
266
+ </div>
267
+ <p class="text-gray-300 text-sm">
268
+ Usar alavancagem acima do limite diário resulta em Game Over.
269
+ </p>
270
+ </div>
271
+
272
+ <!-- Rule 6 -->
273
+ <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all">
274
+ <div class="flex items-center mb-3">
275
+ <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3">
276
+ <i class="fas fa-tint"></i>
277
+ </div>
278
+ <h3 class="font-bold">Emocional</h3>
279
+ </div>
280
+ <p class="text-gray-300 text-sm">
281
+ Sistema detecta padrões de operação emocional e aplica penalidades.
282
+ </p>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="text-center mt-12">
287
+ <a href="#" class="inline-block border border-traderGold text-traderGold hover:bg-traderGold/10 px-6 py-3 rounded-lg transition-colors">
288
+ <i class="fas fa-scroll mr-2"></i> Ver Todas as 20 Regras
289
+ </a>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Progress Section -->
295
+ <section class="py-16 px-6 bg-traderDark">
296
+ <div class="container mx-auto">
297
+ <h2 class="text-3xl font-bold mb-12 text-center">
298
+ <span class="text-traderGold">JORNADA</span> DO TRADER
299
+ </h2>
300
+
301
+ <div class="relative">
302
+ <!-- Progress line -->
303
+ <div class="absolute left-0 right-0 top-1/2 h-1 bg-gray-700 transform -translate-y-1/2 z-0"></div>
304
+
305
+ <div class="relative flex justify-between max-w-4xl mx-auto">
306
+ <!-- Stage 1 -->
307
+ <div class="relative z-10">
308
+ <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGreen flex items-center justify-center mx-auto mb-2">
309
+ <span class="text-traderGreen font-bold">5</span>
310
+ </div>
311
+ <div class="text-center">
312
+ <h3 class="font-bold text-traderGreen">Novato</h3>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Stage 2 -->
317
+ <div class="relative z-10">
318
+ <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGreen flex items-center justify-center mx-auto mb-2">
319
+ <span class="text-traderGreen font-bold">3</span>
320
+ </div>
321
+ <div class="text-center">
322
+ <h3 class="font-bold text-traderGreen">Sobrevivente</h3>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Stage 3 -->
327
+ <div class="relative z-10">
328
+ <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGold flex items-center justify-center mx-auto mb-2">
329
+ <span class="text-traderGold font-bold">5</span>
330
+ </div>
331
+ <div class="text-center">
332
+ <h3 class="font-bold text-traderGold">Estrategista</h3>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Stage 4 -->
337
+ <div class="relative z-10">
338
+ <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGold flex items-center justify-center mx-auto mb-2">
339
+ <span class="text-traderGold font-bold">2</span>
340
+ </div>
341
+ <div class="text-center">
342
+ <h3 class="font-bold text-traderGold">Mestre</h3>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Stage 5 -->
347
+ <div class="relative z-10">
348
+ <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderRed flex items-center justify-center mx-auto mb-2">
349
+ <span class="text-traderRed font-bold">1</span>
350
+ </div>
351
+ <div class="text-center">
352
+ <h3 class="font-bold text-traderRed">Lenda</h3>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="max-w-2xl mx-auto mt-16">
359
+ <div class="bg-traderDark/80 border border-traderBlue/20 rounded-lg p-6">
360
+ <h3 class="text-xl font-bold mb-4 text-center text-traderGold">Seu Progresso</h3>
361
+
362
+ <div class="space-y-5">
363
+ <div>
364
+ <div class="flex justify-between mb-2">
365
+ <span class="font-medium">Disciplina</span>
366
+ <span class="text-traderGreen">12/30 pontos</span>
367
+ </div>
368
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
369
+ <div class="bg-traderGreen h-2.5 rounded-full" style="width: 40%"></div>
370
+ </div>
371
+ </div>
372
+
373
+ <div>
374
+ <div class="flex justify-between mb-2">
375
+ <span class="font-medium">Conhecimento</span>
376
+ <span class="text-traderBlue">8/30 pontos</span>
377
+ </div>
378
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
379
+ <div class="bg-traderBlue h-2.5 rounded-full" style="width: 27%"></div>
380
+ </div>
381
+ </div>
382
+
383
+ <div>
384
+ <div class="flex justify-between mb-2">
385
+ <span class="font-medium">Controle de Risco</span>
386
+ <span class="text-traderGold">6/30 pontos</span>
387
+ </div>
388
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
389
+ <div class="bg-traderGold h-2.5 rounded-full" style="width: 20%"></div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="mt-6 text-center text-sm text-gray-400">
395
+ Complete todas as categorias para desbloquear o <span class="text-traderRed">Modo Realista</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </section>
401
+
402
+ <!-- AI Section -->
403
+ <section class="py-16 px-6 bg-gradient-to-b from-traderBlue/10 to-traderDark">
404
+ <div class="container mx-auto max-w-4xl">
405
+ <div class="bg-traderDark/80 border border-traderGold/20 rounded-xl overflow-hidden">
406
+ <div class="bg-gradient-to-r from-traderBlue/10 to-traderGold/10 p-5 border-b border-traderGold/20">
407
+ <h2 class="text-2xl font-bold text-center">
408
+ <i class="fas fa-robot text-traderGold mr-2"></i>
409
+ <span class="text-traderGold">ANÁLISE</span> COM IA
410
+ </h2>
411
+ </div>
412
+
413
+ <div class="p-6">
414
+ <div class="flex items-start mb-6">
415
+ <div class="bg-traderGold/20 w-10 h-10 rounded-full flex items-center justify-center text-traderGold mr-4 flex-shrink-0">
416
+ <i class="fas fa-brain"></i>
417
+ </div>
418
+ <div>
419
+ <h3 class="font-bold mb-2">Feedback Instantâneo</h3>
420
+ <p class="text-gray-300">
421
+ Após cada operação, nossa IA analisa sua performance comparando com traders profissionais.
422
+ </p>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="flex items-start mb-6">
427
+ <div class="bg-traderGold/20 w-10 h-10 rounded-full flex items-center justify-center text-traderGold mr-4 flex-shrink-0">
428
+ <i class="fas fa-reply-all"></i>
429
+ </div>
430
+ <div>
431
+ <h3 class="font-bold mb-2">Replay Tático</h3>
432
+ <p class="text-gray-300">
433
+ Após cada Game Over, assista a um replay com marcadores estratégicos e pontos de virada.
434
+ </p>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="flex items-start">
439
+ <div class="bg-traderGold/20 w-10 h-10 rounded-full flex items-center justify-center text-traderGold mr-4 flex-shrink-0">
440
+ <i class="fas fa-book-open"></i>
441
+ </div>
442
+ <div>
443
+ <h3 class="font-bold mb-2">Biblioteca de Erros</h3>
444
+ <p class="text-gray-300">
445
+ Acesse casos reais de traders que cometeram erros similares e como eles os superaram.
446
+ </p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </section>
453
+
454
+ <!-- Call to Action -->
455
+ <section class="py-20 px-6 bg-traderDark">
456
+ <div class="container mx-auto text-center">
457
+ <div class="max-w-2xl mx-auto">
458
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
459
+ PRONTO PARA O <span class="text-traderRed">DESAFIO</span>?
460
+ </h2>
461
+ <p class="text-xl text-gray-300 mb-10">
462
+ Apenas 1% completam os 30 dias. Você será um deles?
463
+ </p>
464
+ <a href="#" class="inline-block bg-traderRed hover:bg-red-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition-colors pulse">
465
+ <i class="fas fa-play mr-2"></i> INICIAR JORNADA
466
+ </a>
467
+ </div>
468
+ </div>
469
+ </section>
470
+
471
+ <!-- Footer -->
472
+ <footer class="bg-black/50 backdrop-blur-md py-10 px-6 border-t border-traderBlue/20">
473
+ <div class="container mx-auto">
474
+ <div class="grid md:grid-cols-3 gap-8">
475
+ <div>
476
+ <h3 class="text-xl font-bold mb-4 text-traderGold">
477
+ <i class="fas fa-coins mr-2"></i> TRADER HARDCORE
478
+ </h3>
479
+ <p class="text-gray-400">
480
+ O simulador de trading mais implacável já criado. Desenvolva habilidades reais através de desafios extremos.
481
+ </p>
482
+ </div>
483
+
484
+ <div>
485
+ <h4 class="font-bold mb-4 text-traderGold">Links Rápidos</h4>
486
+ <ul class="space-y-2">
487
+ <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Regras do Jogo</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Ranking Global</a></li>
489
+ <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Desafios Diários</a></li>
490
+ <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Biblioteca</a></li>
491
+ </ul>
492
+ </div>
493
+
494
+ <div>
495
+ <h4 class="font-bold mb-4 text-traderGold">Redes Sociais</h4>
496
+ <div class="flex space-x-4">
497
+ <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors">
498
+ <i class="fab fa-twitter"></i>
499
+ </a>
500
+ <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors">
501
+ <i class="fab fa-discord"></i>
502
+ </a>
503
+ <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors">
504
+ <i class="fab fa-youtube"></i>
505
+ </a>
506
+ <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors">
507
+ <i class="fab fa-twitch"></i>
508
+ </a>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="border-t border-traderBlue/20 mt-10 pt-6 text-center text-gray-500">
514
+ <p>© 2023 Trader Hardcore. Todos os direitos reservados.</p>
515
+ </div>
516
+ </div>
517
+ </footer>
518
+
519
+ <script>
520
+ // Simple animation for skill bars - would be replaced with real data
521
+ document.addEventListener('DOMContentLoaded', function() {
522
+ const skillBars = document.querySelectorAll('.progress-bar div');
523
+
524
+ skillBars.forEach(bar => {
525
+ const width = bar.style.width;
526
+ bar.style.width = '0';
527
+ setTimeout(() => {
528
+ bar.style.width = width;
529
+ }, 200);
530
+ });
531
+
532
+ // Simulate a trade execution
533
+ const tradeButton = document.querySelector('.pulse');
534
+ if(tradeButton) {
535
+ tradeButton.addEventListener('click', function(e) {
536
+ e.preventDefault();
537
+ alert('⚠️ AVISO HARDCORE ⚠️\n\nVocê está prestes a embarcar em uma jornada que testará seus limites. Está preparado para aprender através da dor?');
538
+ });
539
+ }
540
+ });
541
+ </script>
542
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Agente7/trader-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
543
+ </html>