Terminal Cargueiro Monte Névoa

Posto Avançado Monte Névoa

A estação de pesquisas geológicas de Monte Névoa depende de um bonde cargueiro suspenso por cabos para receber suprimentos, equipamentos e correspondências durante as tempestades de inverno. Como único operador da estação, você precisa criar uma página web completa para monitorar a estação, registrar manifestos de carga e processar dados técnicos de rota.

Conceitos Praticados Neste Desafio

Este projeto exige a aplicação direta dos seguintes conhecimentos técnicos:

• Como a Web funciona: Compreensão do fluxo cliente-servidor, requisições HTTP e resolução DNS na entrega do documento HTML/CSS ao navegador.
• Estrutura básica do HTML: Declaração correta do documento com tags estruturais principais (head, body e metadados).
• Tags semânticas: Organização do layout usando header, nav, main, section, article e footer.
• Formulários em HTML: Construção de controles de despacho com input, select, textarea, label e validações nativas do HTML5.
• Introdução ao CSS: Vinculação de folha de estilo externa, seletores de classe/elemento e estilização base.
• Box Model: Controle rigoroso de dimensões, espaçamentos internos (padding), externos (margin) e bordas do painel.
• Cores, fontes e texto: Paleta em hexadecimal/RGB, hierarquia tipográfica e importação de tipografia via Google Fonts.
• Flexbox: Alinhamento e distribuição espacial dos módulos da estação via display: flex.
• Introdução ao JavaScript: Declaração de variáveis, tipos de dados e operadores matemáticos/lógicos.
• Estruturas de controle em JS: Aplicação de condicionais (if, else, switch) e laços de repetição (for, while) no processamento dos dados do bonde.

Requisitos de Interface e Marcação

1. Arquitetura Semântica

Estruture a aplicação em uma única página HTML dividida em blocos bem definidos:

• Cabeçalho (header): Identificação da estação, indicador visual de status do cabo (Ativo/Interrompido) e navegação rápida (nav).
• Conteúdo Principal (main): Dividido em duas seções principais (section): o painel estatístico do bonde e o formulário de despacho de carga.
• Cartões de Dados (article): Cada indicador de telemetria (Ex: Altitude, Capacidade Atual, Velocidade do Vento) deve ser um artigo isolado.
• Rodapé (footer): Informações do operador de turno, dados do servidor local e notas de segurança.

2. Formulário de Despacho de Carga

Crie um formulário funcional contendo as seguintes entradas com suas respectivas labels vinculadas:

• Identificador do Contêiner: Campo de texto obrigatório com limite mínimo de caracteres.
• Categoria de Carga: Caixa de seleção (select) com as opções: Alimentos/Mantimentos, Equipamento Científico, Combustível e Aposentadoria de Material.
• Peso Estimado (kg): Campo numérico com limites estipulados via atributos min e max.
• Turno de Envio: Botões de opção ou seleção para definir envio matutino, vespertino ou noturno.
• Observações de Risco: Área de texto (textarea) para notas do despachante.

Estilização e Layout com CSS

Aplique regras visuais para garantir que o painel pareça um terminal técnico robusto e funcional:

• Tipografia do Terminal: Importe e aplique uma fonte monoespaçada do Google Fonts (como Share Tech Mono ou Roboto Mono).
• Cores e Visibilidade: Defina uma paleta escura industrial usando valores HEX ou HSL, destacando alertas com cores quentes de alto contraste.
• Ajuste por Box Model: Garanta que os cartões de telemetria utilizem limites de largura bem definidos, bordas industriais estilizadas e espaçamento interno proporcional sem quebrar a grade.
• Organização em Flexbox: Monte o layout dos cartões de métricas e dos campos do formulário em alinhamentos flexíveis, usando flex-direction, gap e justify-content.

Módulo de Lógica e Validação (JavaScript)

Construa um script interno ou externo que execute a análise de dados do manifesto de carga diretamente nas estruturas de controle do JavaScript:

Regras de Processamento

1. Validação de Capacidade com Condicionais: Declare variáveis com o limite máximo suportado pelo bonde (ex: 850 kg) e o peso atual carregado. Use if/else para determinar se um novo contêiner pode ser adicionado ou se excede o limite.
2. Classificação por Código de Carga (Switch): Crie uma estrutura switch baseada no código da categoria selecionada para aplicar um fator de risco ou prioridade de transporte no console.
3. Varredura de Lote com Laços: Crie um array fictício de pesos de contêineres aguardando no pátio. Utilize um laço for ou while para somar o peso total do lote e exibir quantos contêineres conseguirão subir na viagem atual antes do limite ser atingido.

Critérios de Aceite

• O código HTML deve passar na validação estrutural sem erros de abertura/fechamento de tags ou labels órfãs.
• Todas as seções do documento devem utilizar tags semânticas apropriadas ao contexto.
• O visual deve refletir um design responsivo básico e organizado exclusivamente com Flexbox e regras de Box Model.
• A lógica em JavaScript deve rodar sem erros de sintaxe no console do navegador, atendendo às três regras de processamento.

Expansões Opcionais para Evolução

• Alertas Visuais CSS: Utilizar seletores CSS de estado como :focus e :invalid para destacar os campos do formulário preenchidos incorretamente.
• Simulação de Sensores: Criar um laço de repetição no JavaScript que gere leituras simuladas de temperatura da montanha para os últimos 5 dias e calcule a média de congelamento dos cabos.
• Temas de Interface: Criar uma classe CSS alternativa representando "Modo de Tempestade" que altera completamente as cores do painel para tons de alerta extremo.