Spaces:
Running
Running
## 🎮 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
a525584 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🎮 Trader Hardcore - Sobrevive Quem Pensa</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| traderDark: '#0d0f1a', | |
| traderRed: '#e63946', | |
| traderGreen: '#2a9d8f', | |
| traderBlue: '#457b9d', | |
| traderGold: '#e9c46a', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .trading-card { | |
| background: linear-gradient(135deg, rgba(13,15,26,0.8) 0%, rgba(27,38,59,0.9) 100%); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.5); | |
| } | |
| .glow-red { | |
| box-shadow: 0 0 15px rgba(230,57,70,0.7); | |
| } | |
| .glow-green { | |
| box-shadow: 0 0 15px rgba(42,157,143,0.7); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .chart-container { | |
| height: 400px; | |
| background: rgba(15, 23, 42, 0.5); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| overflow: hidden; | |
| } | |
| .skill-meter { | |
| display: flex; | |
| justify-content: space-between; | |
| width: 100%; | |
| } | |
| .skill-level { | |
| height: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-traderDark text-white min-h-screen font-sans"> | |
| <!-- Header --> | |
| <header class="bg-black/50 backdrop-blur-md py-4 px-6 sticky top-0 z-50 border-b border-traderBlue/20"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-traderGold text-3xl"> | |
| <i class="fas fa-coins"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-traderGold to-traderGreen"> | |
| TRADER HARDCORE | |
| </h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-traderGold transition-colors">Home</a> | |
| <a href="#" class="hover:text-traderGold transition-colors">Regras</a> | |
| <a href="#" class="hover:text-traderGold transition-colors">Ranking</a> | |
| <a href="#" class="hover:text-traderGold transition-colors">Tutorial</a> | |
| <a href="#" class="text-traderRed font-bold">Jogar Agora</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative py-16 px-6 bg-gradient-to-b from-traderDark to-traderBlue/10"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6"> | |
| <span class="text-traderRed">SOBREVIVE</span> QUEM PENSA | |
| </h2> | |
| <p class="text-lg mb-8 text-gray-300"> | |
| O jogo de trading mais implacável já criado. Um erro e <span class="text-traderRed font-bold">GAME OVER</span>. | |
| Desenvolva disciplina, estratégia e controle emocional para se tornar uma lenda dos mercados. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-traderRed hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg text-center transition-colors pulse"> | |
| <i class="fas fa-play mr-2"></i> Começar Jogo | |
| </a> | |
| <a href="#" class="border border-traderGold hover:bg-traderGold/10 text-traderGold font-bold py-3 px-6 rounded-lg text-center transition-colors"> | |
| <i class="fas fa-book mr-2"></i> Regras do Jogo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="trading-card rounded-2xl overflow-hidden w-full max-w-lg"> | |
| <div class="bg-traderDark/50 p-4 border-b border-traderBlue/20 flex justify-between items-center"> | |
| <div> | |
| <span class="text-traderGold">USD/BRL</span> | |
| <span class="ml-2 text-green-400">▲ 5.2478</span> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <i class="fas fa-clock mr-1"></i> Dia 7/30 | |
| </div> | |
| </div> | |
| <div class="chart-container p-4"> | |
| <!-- Chart placeholder --> | |
| <div class="h-full bg-gray-900/50 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="text-5xl mb-4 text-traderGold"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <p class="text-gray-400">Gráfico interativo em tempo real</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-traderDark/80 p-4 grid grid-cols-2 gap-4"> | |
| <div class="bg-traderDark p-3 rounded-lg border border-traderBlue/20"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-400">Disciplina</span> | |
| <span class="text-xs bg-traderGreen/20 text-traderGreen px-2 py-1 rounded">12/30</span> | |
| </div> | |
| <div class="progress-bar bg-gray-800 rounded-full"> | |
| <div class="bg-traderGreen h-full rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-traderDark p-3 rounded-lg border border-traderBlue/20"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-400">Conhecimento</span> | |
| <span class="text-xs bg-traderBlue/20 text-traderBlue px-2 py-1 rounded">8/30</span> | |
| </div> | |
| <div class="progress-bar bg-gray-800 rounded-full"> | |
| <div class="bg-traderBlue h-full rounded-full" style="width: 27%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Game Features --> | |
| <section class="py-16 px-6 bg-traderDark"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center"> | |
| <span class="text-traderGold">MECÂNICAS</span> DO JOGO | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-traderDark/50 border border-traderBlue/20 rounded-xl p-6 hover:border-traderGold/50 transition-all"> | |
| <div class="text-traderRed text-4xl mb-4"> | |
| <i class="fas fa-calendar-day"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Sistema de Dias</h3> | |
| <p class="text-gray-400"> | |
| 30 dias de trading simulado onde cada dia real equivale a um dia no jogo. Dias críticos têm eventos aleatórios. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-traderDark/50 border border-traderBlue/20 rounded-xl p-6 hover:border-traderGold/50 transition-all"> | |
| <div class="text-traderRed text-4xl mb-4"> | |
| <i class="fas fa-skull"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Regras Mortais</h3> | |
| <p class="text-gray-400"> | |
| 20 regras implacáveis. Uma violação resulta em Game Over instantâneo e reinício do dia. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-traderDark/50 border border-traderBlue/20 rounded-xl p-6 hover:border-traderGold/50 transition-all"> | |
| <div class="text-traderRed text-4xl mb-4"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Pontuação Tripla</h3> | |
| <p class="text-gray-400"> | |
| Domine três habilidades: Disciplina, Conhecimento e Controle de Risco para desbloquear novos níveis. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Rules Section --> | |
| <section class="py-16 px-6 bg-gradient-to-b from-traderDark to-traderBlue/10"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center"> | |
| <span class="text-traderGold">REGRAS</span> IMPLACÁVEIS | |
| </h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Rule 1 --> | |
| <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3"> | |
| <i class="fas fa-ban"></i> | |
| </div> | |
| <h3 class="font-bold">Operar sem Stop Loss</h3> | |
| </div> | |
| <p class="text-gray-300 text-sm"> | |
| Todas as operações devem ter stop loss definido. Violação resulta em Game Over imediato. | |
| </p> | |
| </div> | |
| <!-- Rule 2 --> | |
| <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3"> | |
| <i class="fas fa-undo-alt"></i> | |
| </div> | |
| <h3 class="font-bold">Revenge Trading</h3> | |
| </div> | |
| <p class="text-gray-300 text-sm"> | |
| Tentar recuperar perdas imediatamente após uma operação perdida é proibido. | |
| </p> | |
| </div> | |
| <!-- Rule 3 --> | |
| <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3"> | |
| <i class="fas fa-chart-bar"></i> | |
| </div> | |
| <h3 class="font-bold">Negociar em Baixa Liquidez</h3> | |
| </div> | |
| <p class="text-gray-300 text-sm"> | |
| Operar em períodos de baixa liquidez resulta em penalidade imediata. | |
| </p> | |
| </div> | |
| <!-- Rule 4 --> | |
| <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3"> | |
| <i class="fas fa-percentage"></i> | |
| </div> | |
| <h3 class="font-bold">Ignorar Spread</h3> | |
| </div> | |
| <p class="text-gray-300 text-sm"> | |
| Operar sem considerar o spread entre compra e veda é considerado violação. | |
| </p> | |
| </div> | |
| <!-- Rule 5 --> | |
| <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| <h3 class="font-bold">Alavancagem Excessiva</h3> | |
| </div> | |
| <p class="text-gray-300 text-sm"> | |
| Usar alavancagem acima do limite diário resulta em Game Over. | |
| </p> | |
| </div> | |
| <!-- Rule 6 --> | |
| <div class="bg-traderDark/80 border border-traderRed/20 rounded-lg p-5 hover:glow-red transition-all"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-traderRed/20 flex items-center justify-center text-traderRed mr-3"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h3 class="font-bold">Emocional</h3> | |
| </div> | |
| <p class="text-gray-300 text-sm"> | |
| Sistema detecta padrões de operação emocional e aplica penalidades. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block border border-traderGold text-traderGold hover:bg-traderGold/10 px-6 py-3 rounded-lg transition-colors"> | |
| <i class="fas fa-scroll mr-2"></i> Ver Todas as 20 Regras | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Progress Section --> | |
| <section class="py-16 px-6 bg-traderDark"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center"> | |
| <span class="text-traderGold">JORNADA</span> DO TRADER | |
| </h2> | |
| <div class="relative"> | |
| <!-- Progress line --> | |
| <div class="absolute left-0 right-0 top-1/2 h-1 bg-gray-700 transform -translate-y-1/2 z-0"></div> | |
| <div class="relative flex justify-between max-w-4xl mx-auto"> | |
| <!-- Stage 1 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGreen flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-traderGreen font-bold">5</span> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-traderGreen">Novato</h3> | |
| </div> | |
| </div> | |
| <!-- Stage 2 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGreen flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-traderGreen font-bold">3</span> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-traderGreen">Sobrevivente</h3> | |
| </div> | |
| </div> | |
| <!-- Stage 3 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGold flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-traderGold font-bold">5</span> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-traderGold">Estrategista</h3> | |
| </div> | |
| </div> | |
| <!-- Stage 4 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderGold flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-traderGold font-bold">2</span> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-traderGold">Mestre</h3> | |
| </div> | |
| </div> | |
| <!-- Stage 5 --> | |
| <div class="relative z-10"> | |
| <div class="w-16 h-16 rounded-full bg-traderDark border-2 border-traderRed flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-traderRed font-bold">1</span> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-traderRed">Lenda</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-2xl mx-auto mt-16"> | |
| <div class="bg-traderDark/80 border border-traderBlue/20 rounded-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-center text-traderGold">Seu Progresso</h3> | |
| <div class="space-y-5"> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Disciplina</span> | |
| <span class="text-traderGreen">12/30 pontos</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-traderGreen h-2.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Conhecimento</span> | |
| <span class="text-traderBlue">8/30 pontos</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-traderBlue h-2.5 rounded-full" style="width: 27%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Controle de Risco</span> | |
| <span class="text-traderGold">6/30 pontos</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-traderGold h-2.5 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-sm text-gray-400"> | |
| Complete todas as categorias para desbloquear o <span class="text-traderRed">Modo Realista</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Section --> | |
| <section class="py-16 px-6 bg-gradient-to-b from-traderBlue/10 to-traderDark"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <div class="bg-traderDark/80 border border-traderGold/20 rounded-xl overflow-hidden"> | |
| <div class="bg-gradient-to-r from-traderBlue/10 to-traderGold/10 p-5 border-b border-traderGold/20"> | |
| <h2 class="text-2xl font-bold text-center"> | |
| <i class="fas fa-robot text-traderGold mr-2"></i> | |
| <span class="text-traderGold">ANÁLISE</span> COM IA | |
| </h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-traderGold/20 w-10 h-10 rounded-full flex items-center justify-center text-traderGold mr-4 flex-shrink-0"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">Feedback Instantâneo</h3> | |
| <p class="text-gray-300"> | |
| Após cada operação, nossa IA analisa sua performance comparando com traders profissionais. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-traderGold/20 w-10 h-10 rounded-full flex items-center justify-center text-traderGold mr-4 flex-shrink-0"> | |
| <i class="fas fa-reply-all"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">Replay Tático</h3> | |
| <p class="text-gray-300"> | |
| Após cada Game Over, assista a um replay com marcadores estratégicos e pontos de virada. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-traderGold/20 w-10 h-10 rounded-full flex items-center justify-center text-traderGold mr-4 flex-shrink-0"> | |
| <i class="fas fa-book-open"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">Biblioteca de Erros</h3> | |
| <p class="text-gray-300"> | |
| Acesse casos reais de traders que cometeram erros similares e como eles os superaram. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-20 px-6 bg-traderDark"> | |
| <div class="container mx-auto text-center"> | |
| <div class="max-w-2xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| PRONTO PARA O <span class="text-traderRed">DESAFIO</span>? | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-10"> | |
| Apenas 1% completam os 30 dias. Você será um deles? | |
| </p> | |
| <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"> | |
| <i class="fas fa-play mr-2"></i> INICIAR JORNADA | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black/50 backdrop-blur-md py-10 px-6 border-t border-traderBlue/20"> | |
| <div class="container mx-auto"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 text-traderGold"> | |
| <i class="fas fa-coins mr-2"></i> TRADER HARDCORE | |
| </h3> | |
| <p class="text-gray-400"> | |
| O simulador de trading mais implacável já criado. Desenvolva habilidades reais através de desafios extremos. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-traderGold">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Regras do Jogo</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Ranking Global</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Desafios Diários</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-traderGold transition-colors">Biblioteca</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-traderGold">Redes Sociais</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="w1.h-10 rounded-full bg-traderBlue/20 hover:bg-traderBlue/30 text-traderBlue flex items-center justify-center transition-colors"> | |
| <i class="fab fa-twitch"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-traderBlue/20 mt-10 pt-6 text-center text-gray-500"> | |
| <p>© 2023 Trader Hardcore. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for skill bars - would be replaced with real data | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const skillBars = document.querySelectorAll('.progress-bar div'); | |
| skillBars.forEach(bar => { | |
| const width = bar.style.width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.width = width; | |
| }, 200); | |
| }); | |
| // Simulate a trade execution | |
| const tradeButton = document.querySelector('.pulse'); | |
| if(tradeButton) { | |
| tradeButton.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| alert('⚠️ AVISO HARDCORE ⚠️\n\nVocê está prestes a embarcar em uma jornada que testará seus limites. Está preparado para aprender através da dor?'); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <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> | |
| </html> |