Prompt
Crie um aplicativo completo e responsivo para espelhamento da tela do celular no computador, semelhante ao Scrcpy, AirDroid e Vysor, com interface moderna, escura e profissional.
Objetivo
O aplicativo deve permitir que o usuário visualize e controle a tela do smartphone diretamente pelo computador em tempo real.
Interface Responsiva
No Computador (Desktop)
Layout dividido em três colunas.
Coluna Esquerda
Visualização grande do celular.
Moldura de smartphone realista.
Informações do aparelho:
Nome
Modelo
Bateria
Wi-Fi
IP
Android/iPhone
Coluna Central
Botões grandes:
Conectar dispositivo
Espelhar Tela
Tela Cheia
Gravar Tela
Tirar Screenshot
Reiniciar Conexão
Configurações
Cada botão com ícones modernos.
Coluna Direita
Painel de informações:
Status da conexão
FPS
Resolução
Latência
Qualidade do vídeo
Histórico:
Últimos dispositivos conectados
Tempo conectado
No Celular
Quando aberto em smartphone:
A interface deve reorganizar automaticamente.
Ordem:
Visualização do celular
Botão Conectar
Botão Espelhar
Botão Tela Cheia
Botão Screenshot
Botão Configurações
Informações da conexão
Tudo empilhado verticalmente.
Recursos
Espelhamento em tempo real.
Baixa latência.
Alta qualidade.
Resolução automática.
Suporte:
Android
iPhone
Conexão por:
USB
Wi-Fi
QR Code
Painel Administrativo
Criar um painel de administração protegido por login.
Funções:
Gerenciar usuários
Ver dispositivos conectados
Histórico de conexões
Estatísticas
Configurar qualidade padrão
Limitar conexões
Alterar logo
Alterar nome do aplicativo
Tecnologias
Frontend:
HTML5
CSS3
JavaScript
Bootstrap 5
Backend:
Node.js
Express
Comunicação:
WebSocket
Banco de dados:
SQLite ou Firebase
Aparência
Tema escuro.
Azul Neon.
Cinza Grafite.
Animações suaves.
Cards arredondados.
Sombras modernas.
Ícones Material Design.
Recursos Extras
Modo Tela Cheia.
Modo Escuro.
Gravação de Tela.
Captura de Imagem.
Transferência de Arquivos.
Área de Transferência Compartilhada.
Enviar Texto para o Celular.
Receber Notificações.
Controle por Mouse.
Controle por Teclado.
Rotação Automática.
Zoom.
Controle de Volume.
Controle de Brilho.
Segurança
Login com senha.
Conexão criptografada.
Pareamento por QR Code.
Confirmação no celular antes da conexão.
Compatibilidade
Windows
Linux
macOS
Android
iPhone
Design Responsivo
O layout deve funcionar exatamente como no exemplo:
No computador, os painéis ficam lado a lado.
No tablet, reorganizam em duas colunas.
No celular, ficam empilhados automaticamente.
A tela espelhada ocupa sempre o maior espaço disponível.
Objetivo Final
Criar um aplicativo moderno, rápido e profissional para espelhar e controlar a tela do celular no computador, com aparência semelhante a softwares como Scrcpy, AirDroid e Vysor, totalmente responsivo, com painel administrativo completo, suporte a conexão USB e Wi-Fi, interface intuitiva e desempenho otimizado para uso em Windows, Linux e macOS.
so colar e fazer o app
