Painel do Motorista · Live do Passageiro · Console Lycce · Design System
O que é este documento. Apresenta as três telas de análise do Lycce Vision, construídas sobre o
modelo visual do LycceGeo (dark-tech, verde neon, tipografia Inter e números monoespaçados). São páginas estáticas,
sem backend, com dados de demonstração, criadas para avaliar a interface antes do desenvolvimento
funcional e para serem usadas no teste de conceito com motoristas e passageiros.
Premissas já aplicadas nas telas:
D1 — o início e o fim da corrida são controlados pela nossa plataforma (não pelo app de mobilidade).
D2 — a conexão é o Wi-Fi do motorista, com medidor de consumo e modo econômico visíveis.
D3 — plataforma neutra: serve a qualquer carro, com qualquer app ou sem app.
D4/D7 — servidor próprio (Dell R620), IP público, portas e protocolos sob nosso controle e link próprio de alta capacidade.
D5/D6 — custo mínimo: PoC com o hardware existente; produção sem módulo 4G (4G é upgrade opcional).
Gerado em 13/09/2026 · Arquivos: Web/*.html · Web/lycce-tokens.css ·
Web/lyccevision-app.css · Web/lyccevision-app.js ·
Não exige servidor: basta abrir o HTML no Chrome ou Edge.
1 · Painel do Motorista
Web/lyccevision-painel-motorista.html · mobile-first · usado pelo motorista antes, durante e depois da corrida
O que a tela faz
Botão principal gigante “Iniciar corrida” / “Encerrar corrida”: é o gatilho da sessão de segurança (D1), com cronômetro e estado visível.
Status do dispositivo: GNSS (satélites e precisão), câmera, sinal de Wi-Fi e espaço livre no cartão SD.
Consumo do plano do motorista: medidor da corrida, orçamento e modo econômico (480p, live sob demanda) — a decisão D2 virou transparência na tela.
QR do passageiro: o padrão que o passageiro escaneia. Na demonstração é um padrão gráfico; no produto, o adesivo traz um código fixo e opaco que abre a sessão com token rotativo, revogado ao encerrar.
SOS silencioso: alerta contatos de confiança e abre o acompanhamento em tempo real.
Linha do tempo da última corrida: início, parada, evento e fim — herança direta do time-slider do modelo.
Eventos da sessão e aviso LGPD (finalidade, retenção de 30 dias, direitos do titular, áudio desligado por padrão).
1/3 · sessão, status e consumo2/3 · QR, SOS e timeline3/3 · eventos e aviso LGPD
O que validar com motoristas: (a) um toque no início e um no fim é aceitável na rotina?
(b) o medidor de consumo reduz a objeção “vou gastar meus dados”? (c) a garantia de que nada é gravado com a
sessão fechada gera confiança? (d) o tamanho dos botões funciona com o celular no suporte do carro?
2 · Live do Passageiro
Web/lyccevision-live-passageiro.html · mobile-first · aberto pelo QR Code fixo do veículo (passageiro e até 3 observadores)
O que a tela faz
Aviso LGPD antes de qualquer imagem: finalidade, retenção de 30 dias, direitos do titular, contato do DPO e “áudio desligado” — o modelo do texto aprovado no PL 692/25.
Trajeto em tempo real: mapa com rota, veículo, parada e evento; distância restante e chegada prevista.
Duas câmeras (rua e cabine) com estado do stream e latência — em 480p, com live sob demanda para caber no plano do motorista.
Ações: assistir ao vivo, convidar observador (0/3) e compartilhar trajeto.
Dados da sessão: veículo, motorista verificado, “gravação apenas durante a corrida” e validade do acesso.
Demonstração do encerramento: um clique mostra o acesso sendo cortado e explica que o trajeto e as imagens continuam disponíveis até o motorista iniciar a próxima corrida.
QR + sessãoaté 3 observadoressem download para observadorretenção 30 dias
1/3 · aviso LGPD, mapa e rota2/3 · câmeras e ações da sessão3/3 · demonstração do fim da corrida
O que validar com passageiros: o aviso de monitoramento é compreensível e não assusta?
Ver a cabine ao vivo aumenta a sensação de segurança ou gera desconforto? O compartilhamento com um contato
(“família acompanha a corrida”) tem valor percebido? Você cancelaria a corrida por causa da câmera?
3 · Console Lycce
Web/lyccevision-console.html · desktop · usado pela operação: suporte, segurança, comercial e privacidade
O que a tela faz
Módulos: Mapa ao vivo, Sessões, Veículos, Mídias, Assinaturas, Privacidade/LGPD e Relatórios.
Operação agora: veículos online, sessões ativas, espectadores, sessões sem link, latência p95, uptime de 30 dias, CPU e disco.
Mapa da frota: veículos em sessão, paradas, eventos e tentativa de acesso negada — a proteção do QR aparece no monitoramento, não só no código.
Sessões em andamento: motorista, início, espectadores, qualidade do link e status (ao vivo / offline).
Alertas: QR acessado fora da área do veículo (token bloqueado), Wi-Fi que caiu durante a sessão (gravação local mantida e sincronizada depois) e expurgo automático por retenção.
Saúde do servidor R620: CPU, disco de mídia, upload do link próprio, streams ativos no MediaMTX e o checklist operacional (portas 443/TCP, 3478/UDP e 8189/UDP abertas, TURN em turns:443, backup 3-2-1 e no-break).
Card flutuante arrastável e minimizável (padrão herdado do modelo) com o resumo da sessão e o botão “Copiar relatório”.
D4/D7 · servidor e rede própriosretenção 30 diastentativas de acesso negadasrelatório copiável
O que validar com a operação: os indicadores escolhidos são os que você quer ver todos os dias?
O alerta de tentativa de acesso indevido precisa de ação automática (bloquear sessão) ou apenas notificar?
O console deve ter modo somente-leitura para clientes de frota?
Design System — tokens e tipografia
Fonte da verdade: Web/lycce-tokens.css. O mesmo arquivo alimenta as três telas: qualquer ajuste de marca é feito nele e reflete em todas.
Cores
Token
Valor
Uso
--ly-bg-deep
#030712
Fundo do app, do mapa e dos terminais
--ly-bg-card
#0f172a
Cards, painéis e header (efeito de vidro)
--ly-border-tech
#1e293b
Bordas e divisores
--ly-brand
#10b981
Marca, sessão ativa, ação primária
--ly-info
#3b82f6
Rota, GPS e telemetria
--ly-alert
#f59e0b
Atenção, offline, disco cheio
--ly-danger
#ef4444
Encerrar corrida, SOS, acesso negado
--ly-camera-road
#0ea5e9
Câmera 1 (rua)
--ly-camera-cabin
#22d3ee
Câmera 2 (cabine)
--ly-text-muted
#94a3b8
Texto secundário — contraste 7,9:1 (o modelo original usava #64748b, com apenas 4,2:1)
Tipografia (Inter, com 1 rem = 16 px)
Papel
Tamanho
Peso
Detalhe
Slogan
até 2,2 rem
200 (destaque 500)
tracking 0,15em
Logo / H1
1,6 rem
900
gradiente branco → verde
Título de painel
1,25 rem
700
—
Corpo
0,95 rem (1 rem no mobile)
400
—
Rótulo de KPI
0,7 rem
700
caixa alta, tracking 0,05em, cor secundária
Valores
1,0–1,6 rem
700 mono
tabular-nums: números não “pulam” ao atualizar
Movimento e acessibilidade
Entradas suaves em cubic-bezier(0.16,1,0.3,1); UI em (0.25,1,0.5,1); “pipoca” dos marcadores em (0.34,1.56,0.64,1).
prefers-reduced-motion respeitado em todas as animações (marcadores, rota, tiles, splash).
Foco visível em todos os controles, aria-live nos logs e alertas e nenhuma métrica fictícia apresentada como real — há um selo “demo de interface”.
Zero dependências externas: nenhum CDN, framework ou webfont remota (melhor desempenho e menos exposição de dados).
Arquivos, validações e próximos passos
Como usar as telas
Abrir: duplo clique em Web/lyccevision-painel-motorista.html (ou nos outros dois arquivos) — não é necessário servidor.
Navegar: os três chips no topo de cada tela levam de uma à outra.
Testar a sessão: no painel, toque em Iniciar corrida para ver cronômetro, consumo de dados e eventos em funcionamento; toque novamente para encerrar.
Testar o encerramento: na tela do passageiro, use as abas “Corrida aberta / Corrida encerrada”.
Trocar a identidade visual: edite apenas Web/lycce-tokens.css.
Estrutura de arquivos
Arquivo
Função
Web/lycce-tokens.css
Design tokens: cores, tipografia, espaçamento, forma, movimento, camadas e componentes base
Web/lyccevision-app.css
Componentes das telas: shell, topbar, navegação, botão de sessão, KPIs, medidores, mapa, tiles de vídeo, timeline, eventos e tabela
Web/lyccevision-app.js
Comportamento: relógio, sessão (iniciar/encerrar com log e consumo), SOS, QR de demonstração, marcadores, estado dos tiles, abas, card flutuante e copiar relatório
Web/lyccevision-painel-motorista.html
Tela 1 — Painel do Motorista (mobile-first)
Web/lyccevision-live-passageiro.html
Tela 2 — Live do Passageiro (mobile-first)
Web/lyccevision-console.html
Tela 3 — Console Lycce (desktop)
Web/Documentacao-Telas.html · .pdf
Este documento, em HTML (editável) e PDF (para envio/análise)
ModeloWeb/HTTP/*
Modelo original (LycceGeo), mantido como referência visual — é outro projeto
Validações já executadas
Sintaxe do JavaScript conferida com node --check — sem erros.
Integridade das três páginas: blocos balanceados (35/35, 29/29 e 50/50), todos os arquivos referenciados existem e todas fecham o documento corretamente.
Capturas geradas em navegador headless (Chrome 152) a 430 px (telas mobile) e 1300 px (console), em fatias e com as animações concluídas.
Próximos passos sugeridos
Validar as telas com 5 motoristas e 5 passageiros (roteiro do documento 02, Anexo A) e registrar os ajustes pedidos.
Aplicar os ajustes aprovados — sempre pelos tokens, para manter consistência.
Ligar a tela do passageiro a um stream de teste no servidor próprio (MediaMTX + WebRTC) para medir a latência real no seu link.
Subir a stack do servidor (Caddy + API + Mosquitto + MediaMTX + coturn + Postgres) seguindo o checklist da seção 7.4 do documento 04.
Montar o kit de PoC com o hardware existente (Orange Pi Win + A9 + GPS) e os complementos de R$ 215–430.
