Manual do Painel Administrativo Sistema de Site para Rádios com Painel Administrativo, Player ao Vivo e Integração com WhatsApp

Sobre o Sistema

O sistema é um site completo para rádios online, composto por:

• Site público — página principal com player ao vivo, programação, notícias, banners e contato
• Painel administrativo (/admin/) — gerencie todo o conteúdo sem mexer em código
• Player standalone (app.html) — versão simplificada para celular
• Integração com WhatsApp — receba recados dos ouvintes diretamente no WhatsApp

Requisitos do Servidor

Instalação

Primeiro Acesso

Credenciais padrão

Primeiros passos no painel

1. Vá na aba Streaming e configure a URL da sua rádio
2. Na aba Site, preencha as informações de contato e redes sociais
3. Na aba Tema, escolha a cor de destaque do site
4. Adicione sua programação em Programação
5. Publique notícias em Notícias
6. Adicione banners em Banners

Painel Administrativo — Seções

Cada aba do painel é explicada em detalhes a seguir.

Streaming

Configure o player de áudio ao vivo do site.

Programação

Gerencie a grade de programação da rádio. Os programas são exibidos na página Programação do site.

Adicionar um programa

1. Clique em Adicionar programa
2. Preencha os campos do modal que abrirá:

Após adicionar todos os programas, clique em Salvar programação.

Notícias

Publique notícias no site. Cada notícia pode conter texto formatado, imagens e links.

Editor de Conteúdo

Ao adicionar ou editar uma notícia, você encontra um editor de texto completo (rich text) com as seguintes ferramentas:

• Negrito
• Itálico
• Sublinhado
• Lista ordenada
• Lista não ordenada
• Título / Parágrafo
• Inserir link
• Inserir imagem da galeria

Campos da notícia

Banners

Os banners formam um carrossel de imagens na página inicial do site. É ideal para campanhas promocionais, comunicações importantes ou destaques.

Configurações

Galeria

Gerencie todas as imagens do site em um único lugar. As imagens são armazenadas na pasta uploads/.

Funcionalidades

• Enviar imagem — Selecione um arquivo JPG, PNG, GIF ou WebP de até 5 MB
• Renomear — Clique no nome da imagem para renomeá-la
• Excluir — Remove a imagem permanentemente
• Editor de imagem integrado — Ferramentas disponíveis:
  • Cortar — Selecione uma região da imagem
  • Redimensionar — Altere largura e altura (com opção de manter proporção)
  • Girar 90° — Rotaciona para a direita
  • Girar -90° — Rotaciona para a esquerda
  • Espelhar horizontal
  • Espelhar vertical
  • Resetar — Volta ao estado original da imagem

Site

Configure as informações públicas do site: sobre a rádio, contato e redes sociais.

Seção "Sobre"

Contato

Redes Sociais

Insira a URL completa de cada rede social:

• Instagram
• Facebook
• YouTube
• TikTok

Tema

Personalize a cor de destaque do site. A alteração se aplica instantaneamente a todas as páginas.

Cores prontas

Clique em uma das cores predefinidas para selecioná-la:

• Vermelho Azul Verde Roxo Laranja Rosa
• E diversas outras variações disponíveis no grid visual

Cor personalizada

1. Use o seletor de cor visual ou digite o código hexadecimal (ex: #ff0033)
2. Clique em Salvar tema

Mensagens

Gerencie os recados enviados pelos ouvintes através do formulário de WhatsApp no site. Esta seção possui 3 sub-abas:

Sub-aba "Todas"

Lista todas as mensagens recebidas. Você pode:

• Visualizar — Clique em uma mensagem para ver os detalhes completos
• Marcar como lida — Clique no ícone de envelope
• Selecionar múltiplas — Use o checkbox "Marcar todas" para seleções em massa
• Excluir — Exclua mensagens selecionadas

Sub-aba "Promoção"

Exibe apenas as mensagens cadastradas durante o modo promoção. Aqui você pode:

• Sortear ouvinte — Clique no botão para abrir o modal de sorteio

Sorteio

1. Defina quantos ouvintes serão sorteados
2. Clique em Sortear — o sistema seleciona aleatoriamente
3. Preencha horário e programa do sorteio
4. Clique em Salvar sorteados — os ganhadores ficam registrados

Sub-aba "Ganhadores"

Histórico completo de todos os sorteios realizados, com data, horário e nome dos ganhadores.

Usuários

Gerencie quem tem acesso ao painel administrativo e quais seções cada usuário pode ver.

Adicionar usuário

1. Clique em Adicionar usuário
2. Preencha:
   • Nome de usuário — identificador único para login
   • Senha — deixe em branco para manter a atual (ao editar)
   • Permissões de acesso — marque as seções que o usuário poderá gerenciar

Permissões disponíveis

Configurações Avançadas

Estes arquivos ficam na pasta config/ e podem ser editados manualmente para configurações que não estão disponíveis no painel.

config/credentials.php

Armazena as credenciais de login do administrador:

<?php
return [
    'username'      => 'admin',
    'password_hash' => '$2y$10$...',
];

Para alterar a senha, gere um novo hash bcrypt e substitua o valor de password_hash.

config/whatsapp.php

Configuração da integração com WhatsApp (versão futura):

<?php
return [
    'api_url' => 'https://exemplo.com/whatsapp-api',
    'token'   => 'SEU_TOKEN_AQUI',
];

.ftpconfig.json

Arquivo de configuração para ferramentas de deploy por FTP. Contém servidor, usuário e senha. Mantenha este arquivo seguro e nunca o inclua em版本的 públicas.

Estrutura de Arquivos

/
├── admin/                  # Painel administrativo
│   ├── index.html          # Interface do painel
│   ├── login.php           # Processamento de login
│   ├── logout.php          # Logout
│   ├── init_session.php    # Inicia sessão
│   ├── session_check.php   # Verifica sessão (iframe)
│   ├── save.php            # API para salvar dados
│   ├── load.php            # API para carregar dados
│   ├── upload.php          # Upload de imagens
│   ├── gallery.php         # Listagem da galeria
│   ├── salvar_recado.php   # Recebe recados do formulário
│   ├── salvar_sorteio.php  # Registra sorteios
│   ├── whatsapp_proxy.php  # Proxy para API WhatsApp
│   └── whatsapp_webhook.php# Webhook WhatsApp
│
├── assets/                 # Recursos estáticos
│   ├── css/
│   │   ├── variables.css   # Variáveis CSS do tema
│   │   ├── base.css        # Estilos base do site
│   │   ├── admin.css       # Estilos do painel
│   │   └── player-bar.css  # Estilos do player
│   └── js/
│       ├── theme.js        # Aplica o tema no site
│       ├── utils.js        # Utilitários JS
│       ├── admin.js        # Lógica do painel
│       └── player-bar.js   # Controles do player
│
├── automacao/              # Tarefas automatizadas
│   └── cron.php            # Script para cron jobs
│
├── config/                 # Configurações
│   ├── credentials.php     # Login do admin
│   ├── whatsapp.php        # Configuração WhatsApp
│   └── whatsapp.example.php# Exemplo de configuração
│
├── data/                   # Dados do sistema (JSON)
│   ├── streaming.json      # Config. do player
│   ├── programacao.json    # Grade de programação
│   ├── noticias.json       # Notícias
│   ├── banners.json        # Banners do carrossel
│   ├── site.json           # Informações do site
│   ├── theme.json          # Tema selecionado
│   ├── usuarios.json       # Usuários do painel
│   ├── mensagens.json      # Recados dos ouvintes
│   ├── sorteios.json       # Histórico de sorteios
│   └── backups/            # Backup automático dos dados
│
├── paginas/                # Páginas do site
│   ├── home.html           # Página inicial
│   ├── programacao.html    # Grade de programação
│   ├── noticias.html       # Lista de notícias
│   ├── sobre.html          # Página sobre a rádio
│   └── contato.html        # Formulário de contato
│
├── uploads/                # Imagens enviadas
├── index.html              # Página principal
├── app.html                # Player standalone mobile
├── .htaccess               # Config. do servidor Apache
├── .ftpconfig.json         # Config. de FTP (deploy)
└── README.md               # Instruções de instalação

FAQ — Perguntas Frequentes