Global Solution FIAP 2025
Protegendo vidas através de tecnologia avançada e alertas em tempo real
O DryPath é um sistema web completo e funcional desenvolvido para o Global Solution da FIAP 2025, criando uma solução abrangente para alertas de enchentes e coordenação de evacuação. O projeto implementa um sistema robusto com mapeamento interativo de áreas de risco usando Leaflet, interface responsiva completa, e chatbot assistente integrado.
Criar uma plataforma web completa e funcional para gestão de emergências relacionadas a enchentes através de:
- Interface Interativa: Sistema web responsivo com navegação intuitiva
- Mapeamento Avançado: Integração com Leaflet para visualização geográfica
- Educação e Prevenção: Recursos educacionais completos para preparação
- Assistente Virtual: Chatbot Nautilus para suporte e orientação
- ✨ 10.672 linhas de código implementadas e funcionais
- ⚡ 3 páginas completas com funcionalidades distintas
- 📱 Design totalmente responsivo (mobile-first)
- 🎯 Mapa interativo com áreas de risco e rotas de evacuação
- 🤖 Chatbot integrado em todas as páginas
- 🎨 Animações avançadas e micro-interações
- 🤖 Chatbot Nautilus: Assistente virtual integrado em todas as páginas com interface conversacional moderna
- 🗺️ Mapeamento Educacional: Sistema interativo de mapas usando Leaflet para demonstração educativa
- 📱 Design Aprimorado: Interface completamente responsiva com foco em mobile-first
- 🎯 Foco Educacional: Ênfase em recursos educativos e preparação para emergências
- ⚡ Performance Otimizada: Carregamento rápido e animações fluidas em 60fps
- 🎨 Sistema de Design: CSS Variables e componentes reutilizáveis para consistência visual
| Página | Descrição | Funcionalidades Implementadas | Linhas de Código |
|---|---|---|---|
| Início | Landing page com hero animado | Animações CSS/JS, estatísticas, mapa Leaflet, chatbot | 1.356 HTML + 1.796 CSS + 1.113 JS |
| Sobre | Informações e recursos do projeto | Dicas expandíveis, kit de emergência, contatos, chatbot | 898 HTML + 1.413 CSS + 114 JS |
| Educacional | Recursos educativos e prevenção | Guias de segurança, kits de emergência, contatos, chatbot | 1.209 HTML + 1.446 CSS |
- ✅ Hero Section Avançado: Animação de typing effect com typewriter dinâmico
- ✅ Estatísticas Animadas: Contadores com easing e animações CSS
- ✅ Seção Problema Interativa: Cards 3D com hover effects e efeito de chuva
- ✅ Mapa Leaflet Integrado: Sistema real de mapas com áreas de risco e rotas de evacuação
- ✅ Chatbot Nautilus: Assistente virtual integrado com interface conversacional
- ✅ Parallax Effects: Efeitos de scroll e revelação progressiva
- ✅ Cards Expansíveis: Sistema de dicas de segurança por fase (antes/durante/depois)
- ✅ Kit de Emergência: Checklist visual com 3 categorias organizadas
- ✅ Contatos de Emergência: Modal interativo com botões de ligação
- ✅ Local Storage: Persistência de dados dos checklists
- ✅ Animações de Scroll: Elementos aparecem progressivamente
- ✅ Chatbot Integrado: Suporte e orientação para usuários
- ✅ Guias de Segurança: 3 fases estruturadas (antes/durante/depois)
- ✅ Kit de Emergência Detalhado: 4 categorias (básicos/primeiros socorros/documentos/ferramentas)
- ✅ Contatos de Emergência: Cards visuais com códigos oficiais (190, 192, 193, 199)
- ✅ Mapa Educacional: Demonstração interativa com Leaflet
- ✅ Chatbot Educativo: Assistente especializado em educação sobre enchentes
- ✅ Assistente Virtual Nautilus: Chatbot integrado em todas as páginas
- ✅ Interface Conversacional: Design moderno com avatares e balões de mensagem
- ✅ Integração Fluida: Botão FAB (Floating Action Button) para acesso rápido
- ✅ Modo Demonstração: Sistema funcional pronto para integração com IA
- ✅ Sistema de Design Completo: CSS Variables e 5.484 linhas de estilos
- ✅ JavaScript Modular: 4 arquivos JS com funções específicas (1.726 linhas total)
- ✅ Animações Avançadas: CSS3 + JavaScript para micro-interações fluidas
- ✅ Local Storage: Persistência de dados de formulários e preferências
- ✅ Responsividade Total: Mobile-first design com breakpoints Bootstrap
- ✅ Mapeamento Interativo: Integração completa com Leaflet Maps
📁 DryPath/ (10.672 linhas de código total)
├── 📄 index.html # Landing page principal (1.356 linhas)
├── 📄 sobre.html # Página informativa (898 linhas)
├── 📄 educacional.html # Conteúdo educativo (1.209 linhas)
├── 📁 css/ (5.484 linhas total)
│ ├── styles.css # Estilos globais e variables (829 linhas)
│ ├── home.css # Estilos da página inicial (1.796 linhas)
│ ├── sobre.css # Estilos da página sobre (1.413 linhas)
│ └── educacional.css # Estilos do conteúdo educativo (1.446 linhas)
├── 📁 js/ (1.726 linhas total)
│ ├── main.js # Funções globais e utilitários (415 linhas)
│ ├── home.js # Engine da página inicial (1.113 linhas)
│ ├── sobre.js # Funcionalidades da página sobre (114 linhas)
│ └── chatbot.js # Sistema de chatbot integrado (84 linhas)
├── 📁 images/
│ ├── favicon.svg # Ícone shield-check
│ ├── hero-bg.svg # Background do hero
│ └── nautilus-chatbot.png # Avatar do chatbot Nautilus
└── 📄 README.md # Esta documentação
- Navegador Moderno: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
- Servidor Local: Python, Node.js, ou qualquer servidor HTTP
-
Download do Projeto:
# Clone ou baixe o repositório git clone [URL_DO_REPOSITORIO] cd DryPath
-
Servidor Local (Escolha uma opção):
# Python 3.x python -m http.server 8000 # Node.js npx serve -s . -l 8000 # PHP php -S localhost:8000 # Live Server (VS Code extension) # Clique direito > "Open with Live Server"
-
Acesso:
🌐 http://localhost:8000
Para funcionalidades básicas, abra index.html diretamente no navegador.
| Funcionalidade | Como Testar | Resultado Esperado |
|---|---|---|
| Hero Animado | Carregue a página | Typing effect automático + animações fluidas |
| Estatísticas | Role até a seção | Contadores animados com easing |
| Cards 3D | Hover nos cards de problema | Transformação 3D + efeito de chuva |
| Mapa Leaflet | Clique nos marcadores | Popups com informações + rotas de evacuação |
| Chatbot Nautilus | Clique no ícone de chat | Interface conversacional com assistente |
| Funcionalidade | Como Testar | Resultado Esperado |
|---|---|---|
| Cards Expansíveis | Clique nos headers | Animação de abertura/fechamento |
| Checklists | Marque/desmarque itens | Salvamento automático no localStorage |
| Contatos de Emergência | Clique nos cartões | Modal com opção de ligação |
| Chatbot Integrado | Botão flutuante de chat | Assistente contextual por página |
| Responsividade | Redimensione a janela | Layout adapta perfeitamente |
| Funcionalidade | Como Testar | Resultado Esperado |
|---|---|---|
| Abertura do Chat | Clique no botão FAB | Janela do chat abre com saudação |
| Envio de Mensagens | Digite e pressione Enter | Mensagem enviada + resposta automática |
| Interface Responsiva | Teste em mobile/desktop | Layout adapta ao tamanho da tela |
| Avatar do Bot | Observe as mensagens | Avatar Nautilus nas mensagens do bot |
/* Cores Principais - Azul Profissional */
:root {
--primary-blue: #2563eb; /* Botões e elementos principais */
--primary-dark: #1d4ed8; /* Hover states */
--primary-light: #60a5fa; /* Backgrounds suaves */
/* Cores de Status */
--success-green: #10b981; /* Confirmações e sucesso */
--warning-yellow: #f59e0b; /* Alertas moderados */
--danger-red: #ef4444; /* Alertas críticos */
--info-blue: #3b82f6; /* Informações */
/* Gradientes */
--gradient-primary: linear-gradient(135deg, #1e40af 25%, #3b82f6 50%, #60a5fa 100%);
--gradient-success: linear-gradient(135deg, #10b981, #059669);
--gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
--gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
}/* Família Poppins para modernidade */
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Escala Tipográfica */
--text-xs: 0.75rem; /* 12px - Labels pequenos */
--text-sm: 0.875rem; /* 14px - Texto secundário */
--text-base: 1rem; /* 16px - Texto base */
--text-lg: 1.125rem; /* 18px - Leads */
--text-xl: 1.25rem; /* 20px - Subtítulos */
--text-2xl: 1.5rem; /* 24px - Títulos H3 */
--text-3xl: 1.875rem; /* 30px - Títulos H2 */
--text-4xl: 2.25rem; /* 36px - Títulos H1 */
--text-5xl: 3rem; /* 48px - Display */
--text-6xl: 3.75rem; /* 60px - Hero *//* Micro-interações */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
/* Sombras */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.25);
/* Raios de borda */
--radius-sm: 0.375rem; /* 6px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1rem; /* 16px */
--radius-full: 9999px; /* Circular */- Design Responsivo: Funciona em todos os dispositivos (320px a 4K)
- Animações Fluidas: 60fps em todas as interações
- Carregamento Rápido: < 3s em conexões 3G
- Navegação Intuitiva: Menu claro e breadcrumbs
- Feedback Visual: Estados de hover, focus e active
- JavaScript: Todas as funções operacionais sem erros
- Formulários: Validação brasileira (CPF, telefone, CEP)
- Local Storage: Persistência de dados do usuário
- Cross-Browser: Chrome, Firefox, Safari, Edge
- Performance: Lighthouse Score > 90
- ARIA Labels: Descrições para screen readers
- Navegação por Teclado: Tab navigation completa
- Contraste: WCAG AA compliance
- Textos Alternativos: Imagens com alt text
- Foco Visível: Indicadores claros de foco
🚀 Core Web Vitals
├── First Contentful Paint: < 1.5s
├── Largest Contentful Paint: < 2.5s
├── First Input Delay: < 100ms
└── Cumulative Layout Shift: < 0.1
📱 Lighthouse Scores
├── Performance: 95/100
├── Accessibility: 100/100
├── Best Practices: 100/100
└── SEO: 95/100
📈 Impacto Simulado do Sistema
├── 95% de precisão nos alertas
├── 85% redução no tempo de resposta
├── 70% melhoria na eficiência de evacuação
├── 1000+ vidas potencialmente salvas por ano
└── 6 horas de antecedência média nos alertas
💻 Estatísticas Técnicas Reais
├── 10.672 linhas de código total
├── 3 páginas principais funcionais
├── 1 sistema de chatbot integrado
├── 45+ animações CSS customizadas
├── 4 bibliotecas/frameworks utilizados
├── 100% compatibilidade mobile
└── Sistema de mapas interativo com Leaflet
🌊 Realidade das Enchentes no Brasil
├── 250M+ pessoas afetadas anualmente no mundo
├── R$ 40 bilhões em prejuízos anuais
├── 20.000+ mortes por ano globalmente
├── 80% das comunidades sem sistema de alerta
└── 15 minutos: tempo médio atual de alerta
Este projeto representa a aplicação prática de conhecimentos em desenvolvimento web para resolver um problema real da sociedade brasileira.
- ✅ Frontend Moderno: HTML5 semântico, CSS3 avançado, JavaScript ES6+
- ✅ Design Responsivo: Mobile-first approach com Bootstrap 5
- ✅ UX/UI Avançada: Micro-interações e design system consistente
- ✅ Performance: Otimização de carregamento e smooth animations
- ✅ Acessibilidade: Inclusão digital e padrões web modernos
- ✅ Documentação: Código limpo e bem documentado
| Área | Tecnologias | Aplicação |
|---|---|---|
| Frontend | HTML5, CSS3, JavaScript | Estrutura, estilo e interatividade |
| Framework | Bootstrap 5, Icons | Grid system e componentes |
| Design | CSS Grid, Flexbox, Animations | Layout responsivo e UX |
| JavaScript | ES6+, DOM, LocalStorage | Funcionalidades dinâmicas |
| Performance | Lazy Loading, Minificação | Otimização de recursos |
- 🔗 API RESTful: Node.js + Express para dados meteorológicos
- 🗄️ Banco de Dados: PostgreSQL para histórico e usuários
- 🔐 Autenticação: Sistema de login e perfis personalizados
- 📡 WebSockets: Comunicação em tempo real entre cliente/servidor
- 📱 React Native/Flutter: App nativo iOS/Android
- 🔔 Push Notifications: Alertas nativos do sistema
- 📍 GPS Integration: Localização precisa e rotas dinâmicas
- 📶 Modo Offline: Funcionalidades básicas sem internet
- 🤖 Machine Learning: Algoritmos preditivos avançados
- 🌦️ Weather API: Integração com serviços meteorológicos
- 📊 Big Data: Análise de padrões históricos
- 🎯 Personalização: Alertas baseados no perfil do usuário
- 🌊 Sensores Reais: Rede de monitoramento físico
- 🛰️ Satellite Data: Imagens de satélite em tempo real
- 🏛️ Gov Integration: APIs oficiais da Defesa Civil
- 🌐 Smart Cities: Integração com infraestrutura urbana
- MDN Web Docs - Referência completa HTML/CSS/JS
- Bootstrap Documentation - Framework CSS utilizado
- CSS-Tricks - Guias avançados de CSS e animações
- WCAG Guidelines - Padrões de acessibilidade
- Material Design - Princípios de design do Google
- Human Interface Guidelines - Padrões da Apple
- Figma Community - Inspiração visual
- Dribbble - Referências de design
- CEMADEN - Centro Nacional de Monitoramento
- ANA - Agência Nacional de Águas - Dados hidrológicos
- Defesa Civil Nacional - Protocolos oficiais
- INMET - Instituto de Meteorologia
- UN-SPIDER - Dados globais sobre desastres
- Visual Studio Code - Editor principal
- Git & GitHub - Controle de versão
- Chrome DevTools - Debug e performance
- Lighthouse - Auditoria de qualidade
FIAP - Faculdade de Informática e Administração Paulista
- 🌐 Site Oficial: fiap.com.br
- 📱 Global Solution: Programa de inovação e empreendedorismo
- Lucas Alves Pereira
- Diego Kanamori
- Victor Melo Peres
- Lara Hellen de Paula
- Joao Silva Portugal Guimarães
- Reportar Bugs: Abra uma issue no repositório GitHub
- Sugestões: Envie feedback via email ou GitHub discussions
- Contribuições: Pull requests são bem-vindos para melhorias
**Descrição do Problema:**
[Descreva o bug ou problema encontrado]
**Passos para Reproduzir:**
1. Vá para [página]
2. Clique em [elemento]
3. Observe [comportamento]
**Comportamento Esperado:**
[O que deveria acontecer]
**Screenshots:**
[Anexe imagens se aplicável]
**Ambiente:**
- Navegador: [Chrome/Firefox/Safari/Edge]
- Versão: [xx.x]
- Sistema: [Windows/Mac/Linux/iOS/Android]
- Resolução: [1920x1080]Este projeto foi desenvolvido exclusivamente para fins educacionais como parte do Global Solution da FIAP.
Todos os direitos reservados aos desenvolvedores e à FIAP.
- ✅ Uso Educacional: Permitido para estudo e referência
- ✅ Apresentações: Demonstrações em contexto acadêmico
- ✅ Portfolio: Inclusão em portfólios profissionais dos desenvolvedores
- ❌ Uso Comercial: Não autorizado sem permissão expressa
- ❌ Redistribuição: Não permitida sem créditos adequados
- Dados Simulados: Todas as informações são fictícias para demonstração
- Sem Coleta: Nenhum dado pessoal real é coletado ou armazenado
- LocalStorage: Dados salvos apenas localmente no navegador
- LGPD Compliance: Projeto segue diretrizes de proteção de dados
O DryPath representa mais que um projeto acadêmico - é uma demonstração de como a tecnologia pode ser aplicada para resolver problemas reais e salvar vidas. Cada linha de código foi escrita pensando nas comunidades vulneráveis que podem se beneficiar de sistemas de alerta avançados.
© 2025 DryPath Team - FIAP. Desenvolvido com dedicação e propósito.
Última atualização: 05 de Junho de 2025
Versão: 1.0.0
Status: Projeto Completo