Spaces:
Paused
Paused
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Área do corretor — SK Imobiliária</title> | |
| <meta name="robots" content="noindex"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet"> | |
| <link rel="icon" type="image/svg+xml" href="/img/logo-sk.svg"> | |
| <link rel="stylesheet" href="/css/style.css?v=8"> | |
| </head> | |
| <body> | |
| {% include "_header.html" %} | |
| <section class="page-hero" style="padding-bottom:24px"> | |
| <div class="container"> | |
| <span class="eyebrow reveal">Área do corretor</span> | |
| <h1 class="reveal" style="--i:1">Gerenciar anúncios</h1> | |
| <p class="reveal" style="--i:2">Painel para criar, editar, destacar e remover anúncios diretamente na planilha que alimenta o site.</p> | |
| <a class="admin-logout-link reveal" style="--i:3" href="/admin/logout">Sair do painel →</a> | |
| </div> | |
| </section> | |
| <section class="container"> | |
| <div class="admin-tabs" role="tablist"> | |
| <button type="button" class="admin-tab is-active" data-tab="adicionar" role="tab" aria-selected="true">Adicionar anúncio</button> | |
| <button type="button" class="admin-tab" data-tab="editar" role="tab" aria-selected="false">Editar anúncios</button> | |
| <button type="button" class="admin-tab" data-tab="destaques" role="tab" aria-selected="false">Selecionar destaques</button> | |
| <button type="button" class="admin-tab" data-tab="config" role="tab" aria-selected="false">Configurações do site</button> | |
| <button type="button" class="admin-tab" data-tab="paginas" role="tab" aria-selected="false">Editar páginas HTML</button> | |
| <button type="button" class="admin-tab" data-tab="backup" role="tab" aria-selected="false">Backup e restauração</button> | |
| <a class="btn btn-outline admin-tabs-extra" href="/api/anuncios/export/planilha">Baixar planilha (.xlsx)</a> | |
| </div> | |
| <!-- ==================== Aba: Adicionar anúncio (também usada para editar) ==================== --> | |
| <div class="admin-panel" id="painel-adicionar" data-panel="adicionar"> | |
| <div class="section-head"> | |
| <div> | |
| <h2 class="mt-0" id="form-heading">Novo anúncio</h2> | |
| <p>Os campos seguem exatamente o que a API espera — nada de retrabalho na planilha.</p> | |
| </div> | |
| </div> | |
| <form class="form-card" id="form-anuncio"> | |
| <input type="hidden" id="a-id"> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="a-tipo-negocio">Tipo de negócio</label> | |
| <select id="a-tipo-negocio" required> | |
| <option value="Venda">Venda</option> | |
| <option value="Locação">Locação</option> | |
| </select> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-tipo-imovel">Tipo de imóvel</label> | |
| <select id="a-tipo-imovel" required> | |
| <option>Casa</option><option>Apartamento</option><option>Terreno</option> | |
| <option>Comercial</option><option>Sala Comercial</option><option>Galpão</option> | |
| <option>Chácara/Sítio</option><option>Cobertura</option><option>Kitnet/Studio</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-titulo">Título</label> | |
| <input type="text" id="a-titulo" required minlength="3" maxlength="150" placeholder="Ex.: Apartamento 2 quartos vista mar - Caiobá"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-descricao">Descrição</label> | |
| <textarea id="a-descricao" maxlength="3000"></textarea> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="a-endereco">Endereço</label> | |
| <input type="text" id="a-endereco"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-bairro">Bairro</label> | |
| <input type="text" id="a-bairro"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-cidade">Cidade</label> | |
| <input type="text" id="a-cidade" required list="cidades-litoral"> | |
| <datalist id="cidades-litoral"> | |
| <option value="Matinhos"><option value="Guaratuba"><option value="Pontal do Paraná"> | |
| </datalist> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-estado">UF</label> | |
| <input type="text" id="a-estado" required maxlength="2" value="PR"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-cep">CEP</label> | |
| <input type="text" id="a-cep"> | |
| </div> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="a-preco">Preço (R$)</label> | |
| <input type="number" id="a-preco" required min="0" step="0.01"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-condominio">Condomínio (R$)</label> | |
| <input type="number" id="a-condominio" min="0" step="0.01" value="0"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-iptu">IPTU (R$)</label> | |
| <input type="number" id="a-iptu" min="0" step="0.01" value="0"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-area-util">Área útil (m²)</label> | |
| <input type="number" id="a-area-util" min="0" step="0.01" value="0"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-area-total">Área total (m²)</label> | |
| <input type="number" id="a-area-total" min="0" step="0.01" value="0"> | |
| </div> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="a-quartos">Quartos</label> | |
| <input type="number" id="a-quartos" min="0" value="0"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-suites">Suítes</label> | |
| <input type="number" id="a-suites" min="0" value="0"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-banheiros">Banheiros</label> | |
| <input type="number" id="a-banheiros" min="0" value="0"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-vagas">Vagas de garagem</label> | |
| <input type="number" id="a-vagas" min="0" value="0"> | |
| </div> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="a-status">Status</label> | |
| <select id="a-status"> | |
| <option>Disponível</option><option>Lançamento</option><option>Reservado</option><option>Vendido</option> | |
| <option>Alugado</option><option>Inativo</option> | |
| </select> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-corretor">Corretor responsável</label> | |
| <input type="text" id="a-corretor"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="a-telefone">Telefone de contato</label> | |
| <input type="text" id="a-telefone"> | |
| </div> | |
| <div class="form-field" style="justify-content:center"> | |
| <label><input type="checkbox" id="a-destaque"> Marcar como destaque</label> | |
| </div> | |
| </div> | |
| <div style="display:flex;gap:12px;margin-top:8px"> | |
| <button class="btn btn-primary" type="submit" id="btn-salvar">Salvar anúncio</button> | |
| <button class="btn btn-outline" type="button" id="btn-cancelar" style="display:none">Cancelar edição</button> | |
| </div> | |
| </form> | |
| <div class="section-head" style="margin-top:44px"> | |
| <div> | |
| <h2 class="mt-0">Mídias do anúncio</h2> | |
| <p class="muted" id="midia-hint">Salve um anúncio acima para liberar o gerenciamento de fotos, vídeos e áudios.</p> | |
| </div> | |
| <button type="button" class="btn btn-primary" id="btn-midia-nova-janela" style="display:none">Gerenciar mídias deste anúncio →</button> | |
| </div> | |
| <p class="muted" style="margin-top:-10px;font-size:.82rem"> | |
| O envio, adição por URL e exclusão de fotos, vídeos e áudios é feito numa página própria (não é um pop-up), para não misturar com os dados do anúncio. | |
| </p> | |
| </div> | |
| <!-- ==================== Aba: Editar anúncios (lista) ==================== --> | |
| <div class="admin-panel" id="painel-editar" data-panel="editar" hidden> | |
| <div class="section-head"> | |
| <div> | |
| <h2 class="mt-0">Anúncios cadastrados</h2> | |
| <p id="admin-total" class="muted">carregando…</p> | |
| </div> | |
| </div> | |
| <div style="overflow-x:auto"> | |
| <table class="table-admin"> | |
| <thead> | |
| <tr><th>#</th><th>Título</th><th>Negócio</th><th>Cidade</th><th>Preço</th><th>Status</th><th>Mídias</th><th>Ações</th></tr> | |
| </thead> | |
| <tbody id="admin-tbody"> | |
| <tr><td colspan="8" class="muted">Carregando anúncios…</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- ==================== Aba: Selecionar destaques ==================== --> | |
| <div class="admin-panel" id="painel-destaques" data-panel="destaques" hidden> | |
| <div class="section-head"> | |
| <div> | |
| <h2 class="mt-0">Selecionar destaques</h2> | |
| <p class="muted">Ative para exibir o imóvel na vitrine/carrossel de destaques do site. A alteração é salva na hora.</p> | |
| </div> | |
| </div> | |
| <div id="destaques-lista" class="destaques-lista"> | |
| <p class="muted">Carregando anúncios…</p> | |
| </div> | |
| </div> | |
| <!-- ==================== Aba: Configurações do site ==================== --> | |
| <div class="admin-panel" id="painel-config" data-panel="config" hidden> | |
| <div class="section-head"> | |
| <div> | |
| <h2 class="mt-0">Configurações do site</h2> | |
| <p class="muted">Dados de contato usados no cabeçalho, rodapé, página de contato e nos links de WhatsApp de todo o site.</p> | |
| </div> | |
| </div> | |
| <form class="form-card" id="form-config"> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="cfg-nome-empresa">Nome da empresa</label> | |
| <input type="text" id="cfg-nome-empresa" required> | |
| </div> | |
| <div class="form-field"> | |
| <label for="cfg-responsavel">Responsável / corretor(a) principal</label> | |
| <input type="text" id="cfg-responsavel"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="cfg-creci">CRECI</label> | |
| <input type="text" id="cfg-creci"> | |
| </div> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="cfg-whatsapp-numero">Número do WhatsApp (só dígitos, com DDI+DDD)</label> | |
| <input type="text" id="cfg-whatsapp-numero" required placeholder="5541998112201"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="cfg-telefone-exibicao">Telefone (formatado, para exibir no site)</label> | |
| <input type="text" id="cfg-telefone-exibicao" required placeholder="(41) 99811-2201"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="cfg-email">E-mail de contato</label> | |
| <input type="email" id="cfg-email" required> | |
| </div> | |
| </div> | |
| <div class="form-field"> | |
| <label for="cfg-whatsapp-texto">Mensagem padrão do botão de WhatsApp do site</label> | |
| <textarea id="cfg-whatsapp-texto" maxlength="300"></textarea> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label for="cfg-endereco">Endereço</label> | |
| <input type="text" id="cfg-endereco"> | |
| </div> | |
| <div class="form-field"> | |
| <label for="cfg-horario">Horário de atendimento</label> | |
| <input type="text" id="cfg-horario" placeholder="Seg–sáb, 9h às 18h"> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" type="submit" id="btn-salvar-config">Salvar configurações</button> | |
| </form> | |
| </div> | |
| <!-- ==================== Aba: Editar páginas HTML ==================== --> | |
| <div class="admin-panel" id="painel-paginas" data-panel="paginas" hidden> | |
| <div class="section-head"> | |
| <div> | |
| <h2 class="mt-0">Editar páginas HTML</h2> | |
| <p class="muted">Edite o HTML das páginas institucionais direto por aqui. Cuidado com as marcações entre <code>{% raw %}{{ }}{% endraw %}</code> e <code>{% raw %}{% %}{% endraw %}</code> — elas são geradas pelo sistema; removê-las ou digitar errado pode quebrar a página para os visitantes. Uma cópia da versão anterior é guardada automaticamente a cada salvamento.</p> | |
| </div> | |
| </div> | |
| <div class="form-card"> | |
| <div class="form-grid" style="margin-bottom:18px"> | |
| <div class="form-field"> | |
| <label for="pg-select">Página</label> | |
| <select id="pg-select"></select> | |
| </div> | |
| <div class="form-field" style="justify-content:flex-end"> | |
| <a class="btn btn-outline" id="pg-ver-link" href="#" target="_blank" rel="noopener">Ver página no site ↗</a> | |
| </div> | |
| </div> | |
| <p class="muted" id="pg-descricao" style="margin-top:-10px;margin-bottom:14px;font-size:.82rem"></p> | |
| <div class="pg-mode-tabs"> | |
| <button type="button" class="pg-mode-tab is-active" id="pg-modo-visual" data-modo="visual">✏️ Visual</button> | |
| <button type="button" class="pg-mode-tab" id="pg-modo-codigo" data-modo="codigo"></> Código HTML</button> | |
| </div> | |
| <div id="pg-bloco-visual"> | |
| <div class="pg-toolbar" id="pg-toolbar"> | |
| <button type="button" data-cmd="bold" title="Negrito"><strong>B</strong></button> | |
| <button type="button" data-cmd="italic" title="Itálico"><em>I</em></button> | |
| <button type="button" data-cmd="underline" title="Sublinhado"><u>U</u></button> | |
| <span class="pg-tb-sep"></span> | |
| <button type="button" data-block="H1" title="Título 1">H1</button> | |
| <button type="button" data-block="H2" title="Título 2">H2</button> | |
| <button type="button" data-block="H3" title="Título 3">H3</button> | |
| <button type="button" data-block="P" title="Parágrafo">¶</button> | |
| <span class="pg-tb-sep"></span> | |
| <button type="button" data-cmd="insertUnorderedList" title="Lista com marcadores">• Lista</button> | |
| <button type="button" data-cmd="insertOrderedList" title="Lista numerada">1. Lista</button> | |
| <span class="pg-tb-sep"></span> | |
| <button type="button" id="pg-tb-link" title="Inserir link">🔗 Link</button> | |
| <button type="button" data-cmd="unlink" title="Remover link">🔗✕</button> | |
| <button type="button" id="pg-tb-img" title="Inserir imagem por URL">🖼️ Imagem</button> | |
| <span class="pg-tb-sep"></span> | |
| <button type="button" data-cmd="undo" title="Desfazer">↶</button> | |
| <button type="button" data-cmd="redo" title="Refazer">↷</button> | |
| </div> | |
| <div id="pg-visual" class="pg-visual-editor" contenteditable="true"></div> | |
| <p class="muted" style="font-size:.78rem;margin-top:8px"> | |
| Os trechos com fundo destacado (🔒) são gerados pelo sistema (cabeçalho, rodapé, scripts) e não podem ser editados aqui — dá pra mover ou apagar o bloco inteiro, mas não editar o conteúdo dele. Para mexer neles, use o modo "Código HTML". | |
| </p> | |
| </div> | |
| <textarea id="pg-conteudo" spellcheck="false" hidden style="width:100%;min-height:480px;font-family:'IBM Plex Mono',monospace;font-size:.82rem;line-height:1.5;padding:16px;border-radius:10px;border:1px solid rgba(27,75,79,.2);resize:vertical"></textarea> | |
| <div style="display:flex;gap:12px;margin-top:14px;align-items:center"> | |
| <button class="btn btn-primary" type="button" id="btn-salvar-pagina">Salvar página</button> | |
| <span class="form-note" id="pg-status" style="margin-top:0"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ==================== Aba: Backup e restauração ==================== --> | |
| <div class="admin-panel" id="painel-backup" data-panel="backup" hidden> | |
| <div class="section-head"> | |
| <div> | |
| <h2 class="mt-0">Backup e restauração</h2> | |
| <p class="muted">Baixe uma cópia completa do site (planilha de anúncios, configurações, fotos/vídeos/áudios dos anúncios e páginas institucionais) ou restaure a partir de um backup anterior.</p> | |
| </div> | |
| </div> | |
| <div class="form-card"> | |
| <h3 class="mt-0" style="font-size:1.05rem">Baixar backup completo</h3> | |
| <p class="muted" style="font-size:.85rem;margin-top:-6px"> | |
| Gera um arquivo .zip com tudo: a planilha (data/imoveis.xlsx), as configurações do site, todas as mídias enviadas para os anúncios e o HTML das páginas editáveis. Guarde esse arquivo em local seguro. | |
| </p> | |
| <a class="btn btn-primary" id="btn-baixar-backup" href="/api/backup/exportar">Baixar backup (.zip)</a> | |
| </div> | |
| <div class="form-card" style="margin-top:24px"> | |
| <h3 class="mt-0" style="font-size:1.05rem">Restaurar a partir de um backup</h3> | |
| <p class="muted" style="font-size:.85rem;margin-top:-6px"> | |
| ⚠️ Isso substitui os dados atuais (planilha, configurações, mídias e páginas) pelos dados do arquivo enviado. Antes de restaurar, o sistema tira automaticamente um backup de segurança do estado atual — então dá pra desfazer se algo der errado. | |
| </p> | |
| <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px"> | |
| <input type="file" id="backup-arquivo" accept=".zip,application/zip"> | |
| <button class="btn btn-outline" id="btn-restaurar-backup" type="button">Restaurar backup</button> | |
| <span class="form-note" id="backup-restaurar-status" style="margin-top:0"></span> | |
| </div> | |
| </div> | |
| <div class="form-card" style="margin-top:24px"> | |
| <h3 class="mt-0" style="font-size:1.05rem">Backups de segurança automáticos</h3> | |
| <p class="muted" style="font-size:.85rem;margin-top:-6px"> | |
| Cópias tiradas automaticamente pelo sistema logo antes de cada restauração (as 8 mais recentes ficam guardadas). | |
| </p> | |
| <div style="overflow-x:auto"> | |
| <table class="table-admin"> | |
| <thead><tr><th>Arquivo</th><th>Criado em</th><th>Tamanho</th><th>Ações</th></tr></thead> | |
| <tbody id="backup-auto-tbody"><tr><td colspan="4" class="muted">Carregando…</td></tr></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {% include "_footer.html" %} | |
| <script src="/js/api.js?v=2"></script> | |
| <script src="/js/main.js?v=2"></script> | |
| <script src="/js/admin.js?v=4"></script> | |
| </body> | |
| </html> | |