Ctrl+K
- 1.52 kB initial commit
- 206 Bytes Gerar um único arquivo HTML auto-contido (dashboard.html) que inclua todo o CSS e JavaScript necessários. O design deve ser moderno, responsivo e com um tema escuro (dark mode), ideal para visualização de dados financeiros. Estrutura da Página: A página deve ter três seções principais: Cabeçalho (Header): Um título simples: "Dashboard de Performance de Sinais". Cartões de Resumo (KPIs - Key Performance Indicators): Uma linha contendo quatro cartões que exibem métricas gerais. Cartão 1: "Total de Sinais Analisados" (Ex: 1,258) Cartão 2: "Assertividade Média" (Ex: 68%) Cartão 3: "Melhor Canal" (Ex: "GOLD CHART EXPERT") Cartão 4: "Pior Canal" (Ex: "SMC AND ICT") Cada cartão deve ter um ícone sutil relacionado ao seu conteúdo (ex: um gráfico de barras, um alvo, um troféu, etc.). Tabela Principal: Performance por Canal: Esta é a seção mais importante. Crie uma tabela detalhada que lista a performance de cada canal. As colunas devem ser: Canal: O nome do canal (Ex: "TRADE WITH JOSPER"). Total de Sinais: Número total de sinais vindos daquele canal. Assertividade (%): A porcentagem de sinais que atingiram o TP. Resultado (Pips): O balanço total de pips (pode ser positivo ou negativo). Status: Um indicador visual (um círculo verde para lucrativo, vermelho para prejuízo). As linhas da tabela devem ter um efeito de "hover" para indicar que são clicáveis. Estilo e Design (Dark Mode): Fundo Principal: Um cinza bem escuro (ex: #121212). Fundos dos Componentes (Cartões, Tabela): Um cinza um pouco mais claro (ex: #1E1E1E). Cores de Destaque (Acento): Verde para Positivo/Sucesso: Um verde vibrante (ex: #28a745 ou um verde-limão). Vermelho para Negativo/Falha: Um vermelho claro (ex: #dc3545). Cor Primária (Links, Títulos): Branco ou um ciano/azul claro. Fontes: Use uma fonte limpa e moderna como 'Inter', 'Poppins' ou 'Roboto' (pode importar do Google Fonts). Ícones: Utilize a biblioteca Font Awesome ou Bootstrap Icons para os ícones dos KPIs. Dados de Exemplo (Placeholders): Para popular a interface, use os seguintes dados de exemplo. Isso é crucial para que a estrutura do HTML faça sentido. Dados para a Tabela de Performance por Canal: code JSON [ { "canal": "GOLD CHART EXPERT", "total_sinais": 150, "assertividade": 75, "resultado_pips": 2350, "status": "positivo" }, { "canal": "TRADE WITH JOSPER", "total_sinais": 210, "assertividade": 68, "resultado_pips": 1980, "status": "positivo" }, { "canal": "NASDAQ+US30 TRADING SIGNALS", "total_sinais": 180, "assertividade": 71, "resultado_pips": 1500, "status": "positivo" }, { "canal": "SMC AND ICT", "total_sinais": 95, "assertividade": 45, "resultado_pips": -850, "status": "negativo" } ]``` **Interatividade (JavaScript Simples):** Inclua um JavaScript mínimo (pode ser dentro da tag `<script>` no final do arquivo HTML) para simular interatividade: * Quando o usuário clicar em uma linha da tabela "Performance por Canal", a linha deve ficar destacada (ex: com uma borda na cor de acento). Não é necessário carregar dados reais, apenas simular a seleção. **Requisitos Finais:** * O resultado final deve ser um **único arquivo HTML**. * O layout deve ser **responsivo**, adaptando-se bem a telas de desktop e de celular. * O código deve ser limpo e bem comentado. Por favor, gere o código completo para `dashboard.html`. - Initial Deployment
- 12.8 kB Gerar um único arquivo HTML auto-contido (dashboard.html) que inclua todo o CSS e JavaScript necessários. O design deve ser moderno, responsivo e com um tema escuro (dark mode), ideal para visualização de dados financeiros. Estrutura da Página: A página deve ter três seções principais: Cabeçalho (Header): Um título simples: "Dashboard de Performance de Sinais". Cartões de Resumo (KPIs - Key Performance Indicators): Uma linha contendo quatro cartões que exibem métricas gerais. Cartão 1: "Total de Sinais Analisados" (Ex: 1,258) Cartão 2: "Assertividade Média" (Ex: 68%) Cartão 3: "Melhor Canal" (Ex: "GOLD CHART EXPERT") Cartão 4: "Pior Canal" (Ex: "SMC AND ICT") Cada cartão deve ter um ícone sutil relacionado ao seu conteúdo (ex: um gráfico de barras, um alvo, um troféu, etc.). Tabela Principal: Performance por Canal: Esta é a seção mais importante. Crie uma tabela detalhada que lista a performance de cada canal. As colunas devem ser: Canal: O nome do canal (Ex: "TRADE WITH JOSPER"). Total de Sinais: Número total de sinais vindos daquele canal. Assertividade (%): A porcentagem de sinais que atingiram o TP. Resultado (Pips): O balanço total de pips (pode ser positivo ou negativo). Status: Um indicador visual (um círculo verde para lucrativo, vermelho para prejuízo). As linhas da tabela devem ter um efeito de "hover" para indicar que são clicáveis. Estilo e Design (Dark Mode): Fundo Principal: Um cinza bem escuro (ex: #121212). Fundos dos Componentes (Cartões, Tabela): Um cinza um pouco mais claro (ex: #1E1E1E). Cores de Destaque (Acento): Verde para Positivo/Sucesso: Um verde vibrante (ex: #28a745 ou um verde-limão). Vermelho para Negativo/Falha: Um vermelho claro (ex: #dc3545). Cor Primária (Links, Títulos): Branco ou um ciano/azul claro. Fontes: Use uma fonte limpa e moderna como 'Inter', 'Poppins' ou 'Roboto' (pode importar do Google Fonts). Ícones: Utilize a biblioteca Font Awesome ou Bootstrap Icons para os ícones dos KPIs. Dados de Exemplo (Placeholders): Para popular a interface, use os seguintes dados de exemplo. Isso é crucial para que a estrutura do HTML faça sentido. Dados para a Tabela de Performance por Canal: code JSON [ { "canal": "GOLD CHART EXPERT", "total_sinais": 150, "assertividade": 75, "resultado_pips": 2350, "status": "positivo" }, { "canal": "TRADE WITH JOSPER", "total_sinais": 210, "assertividade": 68, "resultado_pips": 1980, "status": "positivo" }, { "canal": "NASDAQ+US30 TRADING SIGNALS", "total_sinais": 180, "assertividade": 71, "resultado_pips": 1500, "status": "positivo" }, { "canal": "SMC AND ICT", "total_sinais": 95, "assertividade": 45, "resultado_pips": -850, "status": "negativo" } ]``` **Interatividade (JavaScript Simples):** Inclua um JavaScript mínimo (pode ser dentro da tag `<script>` no final do arquivo HTML) para simular interatividade: * Quando o usuário clicar em uma linha da tabela "Performance por Canal", a linha deve ficar destacada (ex: com uma borda na cor de acento). Não é necessário carregar dados reais, apenas simular a seleção. **Requisitos Finais:** * O resultado final deve ser um **único arquivo HTML**. * O layout deve ser **responsivo**, adaptando-se bem a telas de desktop e de celular. * O código deve ser limpo e bem comentado. Por favor, gere o código completo para `dashboard.html`. - Initial Deployment
- 388 Bytes initial commit