Skip to content

README.md

Latest commit

 

History

History
128 lines (90 loc) · 6.04 KB

README.md

File metadata and controls

128 lines (90 loc) · 6.04 KB
Raw

🏭 Painel de Controle Industrial 4.0 com Assistente IA (Orion)

HTML5 CSS3 JavaScript Tailwind CSS

Nota: Este é um projeto de portfólio desenvolvido para demonstrar habilidades avançadas em desenvolvimento front-end, UI/UX e visualização de dados, simulando uma aplicação de Indústria 4.0 em tempo real.

📋 Índice

🎯 Visão Geral

Este projeto é uma simulação completa de um Painel de Controle de Setores (PCS) para uma moderna indústria moveleira. A aplicação não apenas exibe dados operacionais em um formato Kanban interativo, mas também integra um assistente de IA chamado Orion para diagnóstico e suporte à decisão, além de dashboards de Business Intelligence (BI) para uma visão gerencial completa.

O objetivo foi criar uma ferramenta visualmente impressionante, funcional e rica em detalhes, utilizando apenas tecnologias web estáticas (HTML, CSS e JavaScript puro), provando que é possível construir aplicações complexas e com ótima experiência de usuário sem a necessidade de frameworks pesados.

➡️ Acesse a demonstração ao vivo aqui!

🎨 Visualização do Kanban

Aqui está uma prévia de como o dashboard se parece em um dispositivo móvel. O design é totalmente responsivo e se adapta a qualquer tamanho de tela.

Dashboard Preview

💡 Instrução: Para que sua imagem apareça aqui, tire uma captura de tela do seu dashboard, envie para um site como o Imgur e substitua o link acima pelo link direto da sua imagem.

✨ Funcionalidades Principais

📊 Dashboard de BI Integrado

  • KPIs Globais: Visão geral da saúde da fábrica com os principais indicadores (OEE, Qualidade, Produção Total).
  • Gráfico de Eficiência: Gráfico de barras interativo que compara o OEE entre os setores, permitindo uma análise visual rápida dos pontos de melhoria.

📌 Kanban de Controle de Produção

  • Colunas de Status: Organização visual dos setores da fábrica por status (Normal, Atenção, Crítico, Otimização, Logística).
  • Drag-and-Drop: Realoque setores entre as colunas para simular mudanças de status de forma intuitiva.
  • Cards de Setor Detalhados: Cada card exibe KPIs essenciais, oferecendo um resumo rápido sem a necessidade de cliques.

🤖 Assistente IA "Orion"

  • Interface Conversacional: Um chatbot acessível por um botão flutuante, pronto para ajudar.
  • Diagnóstico Inteligente (Simulado): Peça um "resumo dos setores" ou pergunte sobre problemas específicos (ex: "solução para AGV parado") e receba planos de ação baseados nos dados do painel.

🎨 Interface e UX de Alta Qualidade

  • Seletor de Tema: Alterne entre os modos Claro (Light), Escuro (Dark) e Sistema, com persistência via localStorage.
  • Design Totalmente Responsivo: Experiência de uso perfeita em desktops, tablets e smartphones.
  • Modal de Detalhes: Clique em qualquer setor para abrir uma janela com um dashboard completo, incluindo diagnóstico, plano de ação e todos os KPIs.
  • Microinterações e Animações: Animações sutis que guiam o usuário e tornam a experiência mais fluida e profissional.

🛠️ Tecnologias Utilizadas

Tecnologia Descrição
HTML5 Estrutura semântica e acessível
CSS3 Estilização avançada e layouts responsivos
Tailwind CSS Framework CSS para desenvolvimento ágil e design consistente
JavaScript (ES6+) Manipulação avançada do DOM, lógica do Kanban (Drag and Drop API), gerenciamento de estado e "inteligência" simulada do Orion
Chart.js Biblioteca para a criação de gráficos interativos e responsivos
Lucide Icons Iconografia vetorial limpa e leve

🚀 Como Executar Localmente

Pré-requisitos

  • Um navegador moderno (Chrome, Firefox, Safari, Edge)
  • Git instalado

Passos de Instalação

  1. Clone o repositório:
git clone https://github.com/bersou/Painel-De-Monitoramento.git
  1. Navegue até a pasta do projeto:
cd Painel-De-Monitoramento
  1. Abra o arquivo index.html em seu navegador preferido:
    • Duplo clique no arquivo index.html, ou
    • Clique com o botão direito e selecione "Abrir com" e escolha seu navegador preferido

🎉 E pronto! A aplicação estará rodando.

📝 Estrutura do Projeto

Painel-De-Monitoramento/
├── index.html          # Arquivo principal da aplicação
├── README.md           # Este arquivo
└── [outros arquivos]   # Arquivos de estilo e lógica

🤝 Contribuindo

Contribuições são bem-vindas! Para contribuir, por favor:

  1. Faça um Fork do projeto
  2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
  3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
  4. Push para a branch (git push origin feature/AmazingFeature)
  5. Abra um Pull Request

👨‍💻 Autor

Desenvolvido com dedicação por José Bernardo

Feito com ❤️ por José Bernardo

© 2025 - Todos os direitos reservados