| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TradingScript AI - Assistente de Estratégias TradingView</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .code-editor { |
| font-family: 'Fira Code', monospace; |
| background: #1a202c; |
| border-radius: 0.5rem; |
| } |
| .chat-message { |
| max-width: 80%; |
| } |
| .user-message { |
| margin-left: auto; |
| } |
| .ai-message { |
| margin-right: auto; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="trending-up" class="w-8 h-8"></i> |
| <h1 class="text-2xl font-bold">TradingScript AI</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#strategies" class="hover:text-blue-200 transition">Estratégias</a> |
| <a href="#indicators" class="hover:text-blue-200 transition">Indicadores</a> |
| <a href="#documentation" class="hover:text-blue-200 transition">Documentação</a> |
| <a href="#chat" class="hover:text-blue-200 transition">Assistente AI</a> |
| </nav> |
| <button class="md:hidden"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-4 text-center" data-aos="fade-up"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Crie Estratégias de Trading com IA</h2> |
| <p class="text-xl mb-8">Desenvolva indicadores e estratégias avançadas para TradingView com assistência de inteligência artificial</p> |
| <button class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg"> |
| Começar Agora |
| </button> |
| </div> |
| </section> |
|
|
| |
| <section id="strategies" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Modelos de Estratégias</h2> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="bg-gray-100 p-6 rounded-xl shadow-md" data-aos="fade-right"> |
| <h3 class="text-xl font-semibold mb-4">Upload de Estratégia</h3> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
| <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i> |
| <p class="text-gray-600 mb-4">Arraste ou clique para fazer upload</p> |
| <input type="file" class="hidden" id="strategy-upload"> |
| <label for="strategy-upload" class="bg-purple-600 text-white px-4 py-2 rounded cursor-pointer">Selecionar Arquivo</label> |
| </div> |
| </div> |
| <div class="bg-gray-100 p-6 rounded-xl shadow-md" data-aos="fade-left"> |
| <h3 class="text-xl font-semibold mb-4">Estratégias Salvas</h3> |
| <div class="space-y-4" id="strategies-container"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <h4 class="font-medium">RSI + MACD Strategy</h4> |
| <p class="text-sm text-gray-600">Última modificação: 12/05/2023</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <h4 class="font-medium">Moving Average Crossover</h4> |
| <p class="text-sm text-gray-600">Última modificação: 08/05/2023</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="indicators" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Indicadores Personalizados</h2> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="zoom-in"> |
| <div class="code-editor p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-white font-semibold">Editor Pine Script v6</h3> |
| <button class="bg-purple-600 text-white px-4 py-2 rounded text-sm">Executar Teste</button> |
| </div> |
| <textarea class="w-full h-64 bg-gray-900 text-green-400 p-4 rounded" placeholder="// Escreva seu código Pine Script aqui..."> |
| //@version=6 |
| indicator("Meu Indicador", overlay=true) |
| maFast = ta.sma(close, 14) |
| maSlow = ta.sma(close, 28) |
| plot(maFast, color=color.blue) |
| plot(maSlow, color=color.red) |
| </textarea> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="documentation" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Documentação</h2> |
| <div class="max-w-2xl mx-auto" data-aos="fade-up"> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
| <i data-feather="file-text" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i> |
| <p class="text-gray-600 mb-4">Faça upload de documentação de referência</p> |
| <input type="file" class="hidden" id="doc-upload" multiple> |
| <label for="doc-upload" class="bg-purple-600 text-white px-4 py-2 rounded cursor-pointer">Selecionar Arquivos</label> |
| </div> |
| <div class="mt-8 grid gap-4 grid-cols-1 md:grid-cols-2"> |
| <div class="bg-gray-100 p-4 rounded-lg flex items-center"> |
| <i data-feather="file" class="w-6 h-6 mr-3 text-gray-600"></i> |
| <span>Manual_PineScript.pdf</span> |
| </div> |
| <div class="bg-gray-100 p-4 rounded-lg flex items-center"> |
| <i data-feather="file" class="w-6 h-6 mr-3 text-gray-600"></i> |
| <span>Estrategias_Avancadas.docx</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="chat" class="py-16 gradient-bg text-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Assistente AI</h2> |
| <div class="bg-white text-gray-800 rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto" data-aos="zoom-in"> |
| <div class="p-6 border-b"> |
| <h3 class="font-semibold">Solicite estratégias personalizadas</h3> |
| <p class="text-sm text-gray-600">Nossa IA pode ajudar a criar indicadores e estratégias em Pine Script v6</p> |
| </div> |
| <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages"> |
| <div class="chat-message ai-message bg-purple-100 p-4 rounded-lg"> |
| <p>Olá! Sou seu assistente para criação de scripts TradingView. Como posso ajudar hoje?</p> |
| </div> |
| </div> |
| <div class="p-4 border-t"> |
| <div class="flex space-x-2"> |
| <input type="text" id="chat-input" placeholder="Descreva sua estratégia ou ideia..." class="flex-1 border rounded-lg px-4 py-2"> |
| <button id="send-chat" class="bg-purple-600 text-white px-4 py-2 rounded-lg"> |
| <i data-feather="send" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="mt-3 flex flex-wrap gap-2"> |
| <span class="text-xs bg-gray-200 px-2 py-1 rounded">Exemplo: RSI com oversold</span> |
| <span class="text-xs bg-gray-200 px-2 py-1 rounded">MACD crossover</span> |
| <span class="text-xs bg-gray-200 px-2 py-1 rounded">Suporte e resistência</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">TradingScript AI</h3> |
| <p>Ferramentas avançadas para traders que desenvolvem estratégias automatizadas</p> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Recursos</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-purple-300">Documentação</a></li> |
| <li><a href="#" class="hover:text-purple-300">Tutoriais</a></li> |
| <li><a href="#" class="hover:text-purple-300">Exemplos</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Contato</h4> |
| <p>suporte@tradingscript.ai</p> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center"> |
| <p>© 2023 TradingScript AI. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init({ |
| duration: 800, |
| once: true |
| }); |
| |
| feather.replace(); |
| |
| |
| function setupFileUpload(inputId, containerId) { |
| const fileInput = document.getElementById(inputId); |
| const container = document.getElementById(containerId); |
| |
| fileInput.addEventListener('change', function(event) { |
| const files = event.target.files; |
| if (files.length > 0) { |
| Array.from(files).forEach(file => { |
| const fileElement = document.createElement('div'); |
| fileElement.className = 'bg-gray-100 p-4 rounded-lg flex items-center'; |
| fileElement.innerHTML = ` |
| <i data-feather="file" class="w-6 h-6 mr-3 text-gray-600"></i> |
| <span>${file.name}</span> |
| `; |
| container.appendChild(fileElement); |
| }); |
| feather.replace(); |
| } |
| }); |
| } |
| |
| |
| setupFileUpload('doc-upload', 'doc-files-container'); |
| setupFileUpload('strategy-upload', 'strategies-container'); |
| |
| |
| const chatInput = document.getElementById('chat-input'); |
| const sendButton = document.getElementById('send-chat'); |
| const chatContainer = document.getElementById('chat-messages'); |
| |
| function sendMessage() { |
| const message = chatInput.value.trim(); |
| if (message) { |
| |
| const userMessage = document.createElement('div'); |
| userMessage.className = 'chat-message user-message bg-blue-100 p-4 rounded-lg'; |
| userMessage.innerHTML = `<p>${message}</p>`; |
| chatContainer.appendChild(userMessage); |
| |
| |
| const loadingMessage = document.createElement('div'); |
| loadingMessage.className = 'chat-message ai-message bg-purple-100 p-4 rounded-lg'; |
| loadingMessage.innerHTML = '<p>Processando sua solicitação...</p>'; |
| chatContainer.appendChild(loadingMessage); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| |
| |
| setTimeout(() => { |
| chatContainer.removeChild(loadingMessage); |
| const aiMessage = document.createElement('div'); |
| aiMessage.className = 'chat-message ai-message bg-purple-100 p-4 rounded-lg'; |
| aiMessage.innerHTML = `<p>Baseado na sua ideia, aqui está um esboço em Pine Script v6:</p> |
| <pre class="bg-gray-800 text-green-400 p-2 mt-2 rounded text-sm overflow-x-auto"> |
| //@version=6 |
| indicator("Sua Estratégia", overlay=true) |
| // Código gerado automaticamente |
| rsi = ta.rsi(close, 14) |
| plot(rsi, color=color.blue) |
| // Adicione mais lógica conforme necessário</pre> |
| <p class="text-sm text-gray-600 mt-2">Você pode modificar e testar no editor acima.</p>`; |
| chatContainer.appendChild(aiMessage); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| }, 2000); |
| |
| chatInput.value = ''; |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| } |
| |
| sendButton.addEventListener('click', sendMessage); |
| chatInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
