Interface do Centro de Comando

"Controle de Missão. Monitoramento global, alertas em tempo real e visualização de dados de alto risco."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Fundos Escuros/Pretos: Essencial para uma sala cheia de monitores brilhantes (NOCs). Isso faz com que os dados se destaquem e reduz o reflexo.
2. Mapas e Topologias: O centro da interface é quase sempre um mapa geográfico em modo escuro ou uma topologia de rede baseada em nós.
3. Hierarquia de Alertas: 90% da tela é calma e azul/cinza. Quando ocorre um aviso, ele pisca em âmbar ou vermelho brilhante para chamar a atenção imediatamente.

DNA Visual

• Cores: Preto puro (#000000) ou azul marinho profundo (#0B132B). Os destaques são ciano elétrico (#00FFFF), âmbar (#FFBF00) e vermelho crítico (#FF0000).
• Tipografia: Fontes sans-serif limpas e focadas em tecnologia (Orbitron, Roboto, Share Tech).
• Estilização: Bordas brilhantes, varreduras de radar e gráficos nítidos e orientados por dados.

Implementação Web

• Exemplo de CSS:

body {
  background-color: #030a16;
  color: #8ab4f8;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  height: 100vh;
}

.panel {
  background-color: rgba(13, 27, 42, 0.8);
  border: 1px solid #1c355e;
  box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.05);
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.panel-header {
  background: linear-gradient(90deg, #1c355e, transparent);
  color: #00ffff;
  padding: 8px 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid #00ffff;
}

/* The Map/Center view */
.main-view {
  /* Placeholder for a massive globe or map */
  background: radial-gradient(circle, #0d1b2a 0%, #030a16 100%);
  position: relative;
}

/* Critical Alert */
.alert-critical {
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid #ff0000;
  color: #ff0000;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); }
  100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
}

Implementação de Aplicativo

SwiftUI

struct CommandCenterView: View {
    @State private var isAlerting = false
    
    var body: some View {
        VStack(spacing: 16) {
            // Header
            HStack {
                Text("GLOBAL_OPS // ALPHA")
                    .font(.custom("Orbitron", size: 20))
                    .foregroundColor(Color(red: 0.0, green: 1.0, blue: 1.0)) // Cyan
                Spacer()
                Text(Date(), style: .time).foregroundColor(.gray)
            }
            .padding()
            .border(Color(red: 0.0, green: 1.0, blue: 1.0), width: 1)
            
            // Map or main visual placeholder
            Circle()
                .strokeBorder(
                    LinearGradient(colors: [.cyan, .blue], startPoint: .top, endPoint: .bottom),
                    lineWidth: 2
                )
                .frame(height: 250)
                .overlay(Text("TOPOLOGY SCAN").foregroundColor(.cyan.opacity(0.5)))
            
            // Critical Alert Panel
            VStack(alignment: .leading) {
                Text("WARNING: SECTOR 7G")
                    .font(.headline)
                    .foregroundColor(.red)
                Text("Anomalous activity detected.")
                    .font(.subheadline)
                    .foregroundColor(.white)
            }
            .padding()
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(Color.red.opacity(0.1))
            .border(Color.red, width: 2)
            .shadow(color: isAlerting ? .red : .clear, radius: 10)
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(red: 0.01, green: 0.04, blue: 0.09)) // Very dark navy
        .onAppear {
            withAnimation(.easeInOut(duration: 1.0).repeatForever()) {
                isAlerting.toggle()
            }
        }
    }
}

• Confie muito em .border() e .strokeBorder() combinados com gradientes para criar wireframes técnicos e brilhantes.
• Use .shadow() animado continuamente para alertas de pulso.

Flutter

class CommandCenterScreen extends StatefulWidget {
  @override

…