Olho M\u00e1gico Smart – Interfone Pessoal<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n body { font-family: 'Inter', sans-serif; }\n <\/style>\n<\/head>\n<body class=\"bg-black text-emerald-400 flex justify-center items-center min-h-screen p-0 sm:p-4\">\n\n \n <div class=\"w-full sm:max-w-md bg-black sm:rounded-3xl shadow-[0_0_50px_rgba(16,185,129,0.15)] overflow-hidden min-h-screen sm:min-h-[850px] flex flex-col border border-emerald-500\/35 relative\">\n\n \n <header class=\"bg-black border-b border-emerald-500\/20 p-4 flex justify-between items-center z-10\">\n <div class=\"flex items-center space-x-2\">\n <div class=\"bg-emerald-500 text-black p-2 rounded-xl font-bold flex items-center justify-center w-9 h-9 shadow-lg shadow-emerald-500\/20\">\n <i class=\"fa-solid fa-eye\"><\/i>\n <\/div>\n <div>\n <h1 class=\"font-bold text-sm leading-tight text-emerald-400\">Olho M\u00e1gico Smart<\/h1>\n <span class=\"text-xs text-emerald-600\">Seu Interfone Pessoal<\/span>\n <\/div>\n <\/div>\n <button id=\"nav-visitor-btn\" onclick=\"switchView('visitor')\" class=\"text-xs bg-emerald-500\/10 hover:bg-emerald-500\/20 text-emerald-400 px-3 py-1.5 rounded-lg transition border border-emerald-500\/30 flex items-center gap-1.5 font-medium\">\n <i class=\"fa-solid fa-qrcode\"><\/i> Ver como Visitante\n <\/button>\n <\/header>\n\n \n <main class=\"flex-1 overflow-y-auto p-5 flex flex-col\">\n\n \n <section id=\"view-auth\" class=\"space-y-6 my-auto\">\n <div class=\"text-center space-y-2\">\n <div class=\"w-16 h-16 bg-emerald-500\/10 rounded-2xl border border-emerald-500\/30 mx-auto flex items-center justify-center text-emerald-400 text-2xl shadow-inner mb-3\">\n <i class=\"fa-solid fa-shield-halved\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-bold tracking-tight text-emerald-400\">Configurar Olho M\u00e1gico<\/h2>\n <p class=\"text-xs text-emerald-600\">Configure seus dados para receber chamadas diretas no seu WhatsApp quando baterem \u00e0 sua porta.<\/p>\n <\/div>\n\n \n <div class=\"flex bg-black p-1 rounded-xl border border-emerald-500\/20\">\n <button onclick=\"switchAuthTab('login')\" id=\"tab-login-btn\" class=\"flex-1 py-2 text-xs font-semibold rounded-lg bg-emerald-500 text-black transition shadow\">Entrar<\/button>\n <button onclick=\"switchAuthTab('register')\" id=\"tab-register-btn\" class=\"flex-1 py-2 text-xs font-semibold rounded-lg text-emerald-600 hover:text-emerald-400 transition\">Cadastrar \/ Configurar<\/button>\n <\/div>\n\n \n <form id=\"form-login\" onsubmit=\"handleLogin(event)\" class=\"space-y-4\">\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">E-mail Cadastrado<\/label>\n <input type=\"email\" id=\"login-email\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-4 py-3 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 transition placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Senha<\/label>\n <input type=\"password\" id=\"login-password\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-4 py-3 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 transition placeholder-emerald-900\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-semibold py-3 rounded-xl text-sm transition shadow-lg shadow-emerald-500\/20\">Acessar Meu Painel<\/button>\n <\/form>\n\n \n <form id=\"form-register\" onsubmit=\"handleRegister(event)\" class=\"space-y-4 hidden\">\n <div class=\"grid grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Resid\u00eancia \/ Bloco<\/label>\n <input type=\"text\" id=\"reg-bloco\" placeholder=\"Ex: Casa 03 \/ Apto 101\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">N\u00famero<\/label>\n <input type=\"text\" id=\"reg-ap\" placeholder=\"Ex: 101\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Seu Nome Completo<\/label>\n <input type=\"text\" id=\"reg-nome\" placeholder=\"Ex: Leonardo Rodrigues\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Seu WhatsApp (com DDD)<\/label>\n <input type=\"text\" id=\"reg-whatsapp\" placeholder=\"21999999999\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">E-mail de Acesso<\/label>\n <input type=\"email\" id=\"reg-email\" placeholder=\"seu@email.com\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Senha<\/label>\n <input type=\"password\" id=\"reg-senha\" placeholder=\"********\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Sua Foto<\/label>\n <input type=\"file\" id=\"reg-foto\" accept=\"image\/*\" class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2 text-xs text-emerald-600 file:mr-4 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-500\/10 file:text-emerald-400 hover:file:bg-emerald-500\/20\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-semibold py-3 rounded-xl text-sm transition shadow-lg shadow-emerald-500\/20\">Salvar e Ativar Olho M\u00e1gico<\/button>\n <\/form>\n <\/section>\n\n \n <section id=\"view-dashboard\" class=\"space-y-5 hidden\">\n \n <div class=\"bg-black border border-emerald-500\/30 rounded-2xl p-4 flex items-center space-x-4 shadow-inner\">\n <img decoding=\"async\" id=\"dash-foto\" src=\"\" alt=\"Foto\" class=\"w-16 h-16 rounded-2xl object-cover border-2 border-emerald-500 bg-black\">\n <div class=\"flex-1 overflow-hidden\">\n <span id=\"dash-bloco-ap\" class=\"text-xs font-semibold px-2 py-0.5 bg-emerald-500\/10 text-emerald-400 rounded-md border border-emerald-500\/20\">Resid\u00eancia<\/span>\n <h2 id=\"dash-nome\" class=\"text-base font-bold text-emerald-400 mt-1 truncate\">Nome<\/h2>\n <p id=\"dash-whatsapp\" class=\"text-xs text-emerald-600 truncate\"><\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-2\">\n <button onclick=\"openEditProfile()\" class=\"bg-emerald-500\/10 hover:bg-emerald-500\/20 text-emerald-400 border border-emerald-500\/30 font-semibold py-2.5 rounded-xl text-xs transition flex items-center justify-center gap-1.5\">\n <i class=\"fa-solid fa-pen-to-square\"><\/i> Editar Perfil\n <\/button>\n <button onclick=\"simulateVisit()\" class=\"bg-emerald-500 text-black font-bold py-2.5 rounded-xl text-xs transition flex items-center justify-center gap-1.5 shadow-lg shadow-emerald-500\/20\">\n <i class=\"fa-solid fa-bell\"><\/i> Simular Visita\n <\/button>\n <\/div>\n\n \n <div class=\"bg-black border border-emerald-500\/30 rounded-2xl p-4 space-y-3 flex-1 flex flex-col\">\n <div class=\"flex justify-between items-center border-b border-emerald-500\/20 pb-2\">\n <h3 class=\"text-xs font-bold text-emerald-400 uppercase tracking-wider flex items-center gap-2\">\n <i class=\"fa-solid fa-clock-rotate-left text-emerald-500\"><\/i> O Que Acontece no Olho M\u00e1gico\n <\/h3>\n <button onclick=\"clearLogs()\" class=\"text-[10px] text-emerald-600 hover:text-red-400 transition\">Limpar Hist\u00f3rico<\/button>\n <\/div>\n\n \n <div id=\"activity-log-list\" class=\"space-y-2.5 overflow-y-auto max-h-[300px] pr-1\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"flex gap-2\">\n <button onclick=\"handleLogout()\" class=\"flex-1 bg-black hover:bg-emerald-500\/10 text-emerald-600 hover:text-emerald-400 border border-emerald-500\/20 font-semibold py-2 rounded-xl text-xs transition\">\n Sair da Conta\n <\/button>\n <button onclick=\"handleDeleteAccount()\" class=\"bg-red-500\/10 hover:bg-red-500\/20 text-red-400 border border-red-500\/20 font-semibold py-2 px-3 rounded-xl text-xs transition\">\n Excluir\n <\/button>\n <\/div>\n <\/section>\n\n \n <section id=\"view-edit\" class=\"space-y-6 hidden\">\n <div class=\"flex items-center justify-between\">\n <button onclick=\"switchView('dashboard')\" class=\"text-xs text-emerald-600 hover:text-emerald-400 flex items-center gap-1\">\n <i class=\"fa-solid fa-arrow-left\"><\/i> Voltar ao Painel\n <\/button>\n <h2 class=\"text-sm font-bold text-emerald-400\">Editar Seus Dados<\/h2>\n <\/div>\n\n <form id=\"form-edit\" onsubmit=\"handleUpdateProfile(event)\" class=\"space-y-4\">\n <div class=\"grid grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Resid\u00eancia \/ Bloco<\/label>\n <input type=\"text\" id=\"edit-bloco\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">N\u00famero<\/label>\n <input type=\"text\" id=\"edit-ap\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Seu Nome Completo<\/label>\n <input type=\"text\" id=\"edit-nome\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">WhatsApp (com DDD)<\/label>\n <input type=\"text\" id=\"edit-whatsapp\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">E-mail<\/label>\n <input type=\"email\" id=\"edit-email\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Nova Senha<\/label>\n <input type=\"password\" id=\"edit-senha\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Alterar Foto<\/label>\n <input type=\"file\" id=\"edit-foto\" accept=\"image\/*\" class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2 text-xs text-emerald-600 file:mr-4 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-500\/10 file:text-emerald-400 hover:file:bg-emerald-500\/20\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-semibold py-3 rounded-xl text-sm transition shadow-lg shadow-emerald-500\/20\">Salvar Altera\u00e7\u00f5es<\/button>\n <\/form>\n <\/section>\n\n \n <section id=\"view-visitor\" class=\"space-y-6 hidden my-auto text-center\">\n <button onclick=\"switchView(currentUser ? 'dashboard' : 'auth')\" class=\"text-xs text-emerald-600 hover:text-emerald-400 flex items-center gap-1 mb-2\">\n <i class=\"fa-solid fa-arrow-left\"><\/i> Voltar\n <\/button>\n <div class=\"bg-black border border-emerald-500\/30 rounded-3xl p-6 space-y-4 shadow-xl\">\n <div class=\"relative w-28 h-28 mx-auto\">\n <img decoding=\"async\" id=\"visitor-foto\" src=\"\" alt=\"Residente\" class=\"w-28 h-28 rounded-full object-cover border-4 border-emerald-500 shadow-lg bg-black\">\n <span class=\"absolute bottom-0 right-0 bg-emerald-500 text-black p-1.5 rounded-full text-xs shadow\">\n <i class=\"fa-solid fa-bell animate-bounce\"><\/i>\n <\/span>\n <\/div>\n <div>\n <span id=\"visitor-bloco-ap\" class=\"text-xs font-semibold px-3 py-1 bg-emerald-500\/10 text-emerald-400 rounded-full border border-emerald-500\/20\">Resid\u00eancia<\/span>\n <h2 id=\"visitor-nome\" class=\"text-xl font-bold text-emerald-400 mt-2\">Nome do Morador<\/h2>\n <\/div>\n <p class=\"text-xs text-emerald-600 leading-relaxed\">Voc\u00ea acionou o <strong>Olho M\u00e1gico Smart<\/strong>. Clique abaixo para tocar a campainha e falar diretamente no WhatsApp do morador.<\/p>\n \n <div class=\"pt-2\">\n <a id=\"visitor-whatsapp-btn\" href=\"#\" onclick=\"logVisitorCall()\" target=\"_blank\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-bold py-3.5 px-4 rounded-xl text-sm transition flex items-center justify-center gap-2 shadow-lg shadow-emerald-500\/25\">\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i> Chamar no WhatsApp agora\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"bg-black border-t border-emerald-500\/20 p-3 text-center text-[10px] text-emerald-600\">\n Olho M\u00e1gico Smart • Sua seguran\u00e7a conectada\n <\/footer>\n\n <\/div>\n\n \n <script>\n \/\/ Dados do usu\u00e1rio \u00fanico e logs do Olho M\u00e1gico\n let currentUser = JSON.parse(localStorage.getItem('olho_magico_user')) || null;\n let activityLogs = JSON.parse(localStorage.getItem('olho_magico_logs')) || [\n { id: 1, type: 'system', text: 'Sistema do Olho M\u00e1gico ativado com sucesso.', time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) }\n ];\n\n \/\/ Inicializa\u00e7\u00e3o\n document.addEventListener('DOMContentLoaded', () => {\n if (currentUser) {\n loadDashboard();\n switchView('dashboard');\n } else {\n switchView('auth');\n }\n });\n\n \/\/ Alternar Visualiza\u00e7\u00f5es\n function switchView(viewName) {\n document.getElementById('view-auth').classList.add('hidden');\n document.getElementById('view-dashboard').classList.add('hidden');\n document.getElementById('view-edit').classList.add('hidden');\n document.getElementById('view-visitor').classList.add('hidden');\n\n if (viewName === 'auth') {\n document.getElementById('view-auth').classList.remove('hidden');\n } else if (viewName === 'dashboard') {\n if (!currentUser) { switchView('auth'); return; }\n loadDashboard();\n document.getElementById('view-dashboard').classList.remove('hidden');\n } else if (viewName === 'edit') {\n document.getElementById('view-edit').classList.remove('hidden');\n } else if (viewName === 'visitor') {\n setupVisitorView();\n document.getElementById('view-visitor').classList.remove('hidden');\n }\n }\n\n \/\/ Alternar Abas Login \/ Cadastro\n function switchAuthTab(tab) {\n const loginBtn = document.getElementById('tab-login-btn');\n const registerBtn = document.getElementById('tab-register-btn');\n const loginForm = document.getElementById('form-login');\n const registerForm = document.getElementById('form-register');\n\n if (tab === 'login') {\n loginBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg bg-emerald-500 text-black transition shadow\";\n registerBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg text-emerald-600 hover:text-emerald-400 transition\";\n loginForm.classList.remove('hidden');\n registerForm.classList.add('hidden');\n } else {\n registerBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg bg-emerald-500 text-black transition shadow\";\n loginBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg text-emerald-600 hover:text-emerald-400 transition\";\n registerForm.classList.remove('hidden');\n loginForm.classList.add('hidden');\n }\n }\n\n \/\/ Registrar \/ Configurar Usu\u00e1rio\n function handleRegister(event) {\n event.preventDefault();\n const bloco = document.getElementById('reg-bloco').value.trim();\n const ap = document.getElementById('reg-ap').value.trim();\n const nome = document.getElementById('reg-nome').value.trim();\n const whatsapp = document.getElementById('reg-whatsapp').value.trim();\n const email = document.getElementById('reg-email').value.trim();\n const senha = document.getElementById('reg-senha').value;\n const fotoInput = document.getElementById('reg-foto');\n\n let defaultFoto = 'https:\/\/images.unsplash.com\/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=300&q=80';\n\n const saveUser = (fotoUrl) => {\n currentUser = { bloco, ap, nome, whatsapp, email, senha, foto: fotoUrl };\n localStorage.setItem('olho_magico_user', JSON.stringify(currentUser));\n \n addLog('system', `Conta configurada para ${nome} (${bloco} - ${ap}).`);\n switchView('dashboard');\n alert('Olho M\u00e1gico configurado com sucesso!');\n };\n\n if (fotoInput.files && fotoInput.files[0]) {\n const reader = new FileReader();\n reader.onload = e => saveUser(e.target.result);\n reader.readAsDataURL(fotoInput.files[0]);\n } else {\n saveUser(defaultFoto);\n }\n }\n\n \/\/ Login\n function handleLogin(event) {\n event.preventDefault();\n const email = document.getElementById('login-email').value.trim();\n const senha = document.getElementById('login-password').value;\n\n if (currentUser && currentUser.email === email && currentUser.senha === senha) {\n addLog('system', `Sess\u00e3o iniciada por ${currentUser.nome}.`);\n switchView('dashboard');\n } else {\n alert('E-mail ou senha incorretos ou nenhuma conta cadastrada neste dispositivo.');\n }\n }\n\n \/\/ Logout\n function handleLogout() {\n addLog('system', 'Sess\u00e3o encerrada.');\n currentUser = null;\n localStorage.removeItem('olho_magico_user');\n switchView('auth');\n }\n\n \/\/ Excluir Conta\n function handleDeleteAccount() {\n if (confirm('Tem certeza que deseja excluir sua conta do Olho M\u00e1gico?')) {\n currentUser = null;\n localStorage.removeItem('olho_magico_user');\n localStorage.removeItem('olho_magico_logs');\n activityLogs = [];\n switchView('auth');\n }\n }\n\n \/\/ Abrir Edi\u00e7\u00e3o\n function openEditProfile() {\n if (!currentUser) return;\n document.getElementById('edit-bloco').value = currentUser.bloco;\n document.getElementById('edit-ap').value = currentUser.ap;\n document.getElementById('edit-nome').value = currentUser.nome;\n document.getElementById('edit-whatsapp').value = currentUser.whatsapp;\n document.getElementById('edit-email').value = currentUser.email;\n document.getElementById('edit-senha').value = currentUser.senha;\n switchView('edit');\n }\n\n \/\/ Salvar Edi\u00e7\u00e3o\n function handleUpdateProfile(event) {\n event.preventDefault();\n if (!currentUser) return;\n\n const bloco = document.getElementById('edit-bloco').value.trim();\n const ap = document.getElementById('edit-ap').value.trim();\n const nome = document.getElementById('edit-nome').value.trim();\n const whatsapp = document.getElementById('edit-whatsapp').value.trim();\n const email = document.getElementById('edit-email').value.trim();\n const senha = document.getElementById('edit-senha').value;\n const fotoInput = document.getElementById('edit-foto');\n\n const update = (fotoUrl) => {\n currentUser = { bloco, ap, nome, whatsapp, email, senha, foto: fotoUrl };\n localStorage.setItem('olho_magico_user', JSON.stringify(currentUser));\n addLog('system', 'Dados do perfil atualizados.');\n switchView('dashboard');\n alert('Perfil atualizado com sucesso!');\n };\n\n if (fotoInput.files && fotoInput.files[0]) {\n const reader = new FileReader();\n reader.onload = e => update(e.target.result);\n reader.readAsDataURL(fotoInput.files[0]);\n } else {\n update(currentUser.foto);\n }\n }\n\n \/\/ Carregar Dashboard e logs (\"Tudo que acontece\")\n function loadDashboard() {\n if (!currentUser) return;\n document.getElementById('dash-foto').src = currentUser.foto;\n document.getElementById('dash-bloco-ap').innerText = `${currentUser.bloco} - ${currentUser.ap}`;\n document.getElementById('dash-nome').innerText = currentUser.nome;\n document.getElementById('dash-whatsapp').innerText = `WhatsApp: ${currentUser.whatsapp}`;\n renderLogs();\n }\n\n \/\/ Adicionar Log de Evento\n function addLog(type, text) {\n const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});\n const newLog = { id: Date.now(), type, text, time };\n activityLogs.unshift(newLog); \/\/ mais recente no topo\n localStorage.setItem('olho_magico_logs', JSON.stringify(activityLogs));\n if (currentUser) renderLogs();\n }\n\n \/\/ Renderizar Logs na Tela\n function renderLogs() {\n const container = document.getElementById('activity-log-list');\n container.innerHTML = '';\n\n if (activityLogs.length === 0) {\n container.innerHTML = `<p class=\"text-center text-xs text-emerald-600 py-4\">Nenhum evento registrado ainda.<\/p>`;\n return;\n }\n\n activityLogs.forEach(log => {\n let icon = 'fa-circle-info text-emerald-500';\n let bgBorder = 'border-emerald-500\/20 bg-emerald-500\/5';\n if (log.type === 'visit') {\n icon = 'fa-bell text-emerald-400 animate-pulse';\n bgBorder = 'border-emerald-500\/40 bg-emerald-500\/10';\n } else if (log.type === 'system') {\n icon = 'fa-gear text-emerald-600';\n }\n\n const item = document.createElement('div');\n item.className = `border ${bgBorder} rounded-xl p-2.5 flex items-start space-x-2.5 text-xs`;\n item.innerHTML = `\n <div class=\"mt-0.5\"><i class=\"fa-solid ${icon}\"><\/i><\/div>\n <div class=\"flex-1\">\n <p class=\"text-emerald-300 font-medium\">${log.text}<\/p>\n <span class=\"text-[10px] text-emerald-600\">${log.time}<\/span>\n <\/div>\n `;\n container.appendChild(item);\n });\n }\n\n \/\/ Simular Visita (Para testar o Olho M\u00e1gico)\n function simulateVisit() {\n addLog('visit', 'Algu\u00e9m acionou o Olho M\u00e1gico na sua porta! Campainha tocada.');\n alert('Campainha tocada! Um registro foi adicionado no seu feed.');\n }\n\n \/\/ Configurar Vis\u00e3o do Visitante\n function setupVisitorView() {\n if (!currentUser) {\n alert('Nenhum usu\u00e1rio configurado. Cadastre seus dados primeiro.');\n switchView('auth');\n return;\n }\n document.getElementById('visitor-foto').src = currentUser.foto;\n document.getElementById('visitor-bloco-ap').innerText = `${currentUser.bloco} - ${currentUser.ap}`;\n document.getElementById('visitor-nome').innerText = currentUser.nome;\n\n const mensagem = encodeURIComponent(`Ol\u00e1 ${currentUser.nome}, acabei de tocar a campainha do seu Olho M\u00e1gico (${currentUser.bloco} - ${currentUser.ap}).`);\n document.getElementById('visitor-whatsapp-btn').href = `https:\/\/wa.me\/55${currentUser.whatsapp}?text=${mensagem}`;\n }\n\n \/\/ Registrar Chamada do Visitante\n function logVisitorCall() {\n addLog('visit', 'Um visitante clicou para chamar no WhatsApp pelo Olho M\u00e1gico.');\n }\n\n \/\/ Limpar Logs\n function clearLogs() {\n if (confirm('Deseja limpar o hist\u00f3rico de eventos?')) {\n activityLogs = [];\n localStorage.setItem('olho_magico_logs', JSON.stringify(activityLogs));\n renderLogs();\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Olho M\u00e1gico Smart – Interfone Pessoal Olho M\u00e1gico Smart Seu Interfone Pessoal Ver como Visitante Configurar Olho M\u00e1gico Configure seus […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1701","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages\/1701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1701"}],"version-history":[{"count":1,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages\/1701\/revisions"}],"predecessor-version":[{"id":1702,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages\/1701\/revisions\/1702"}],"wp:attachment":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1701,"date":"2026-07-22T18:40:24","date_gmt":"2026-07-22T18:40:24","guid":{"rendered":"https:\/\/shipforge.com.br\/home\/?page_id=1701"},"modified":"2026-07-22T18:40:24","modified_gmt":"2026-07-22T18:40:24","slug":"1701-2","status":"publish","type":"page","link":"https:\/\/shipforge.com.br\/home\/?page_id=1701","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Olho M\u00e1gico Smart – Interfone Pessoal<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n body { font-family: 'Inter', sans-serif; }\n <\/style>\n<\/head>\n<body class=\"bg-black text-emerald-400 flex justify-center items-center min-h-screen p-0 sm:p-4\">\n\n \n <div class=\"w-full sm:max-w-md bg-black sm:rounded-3xl shadow-[0_0_50px_rgba(16,185,129,0.15)] overflow-hidden min-h-screen sm:min-h-[850px] flex flex-col border border-emerald-500\/35 relative\">\n\n \n <header class=\"bg-black border-b border-emerald-500\/20 p-4 flex justify-between items-center z-10\">\n <div class=\"flex items-center space-x-2\">\n <div class=\"bg-emerald-500 text-black p-2 rounded-xl font-bold flex items-center justify-center w-9 h-9 shadow-lg shadow-emerald-500\/20\">\n <i class=\"fa-solid fa-eye\"><\/i>\n <\/div>\n <div>\n <h1 class=\"font-bold text-sm leading-tight text-emerald-400\">Olho M\u00e1gico Smart<\/h1>\n <span class=\"text-xs text-emerald-600\">Seu Interfone Pessoal<\/span>\n <\/div>\n <\/div>\n <button id=\"nav-visitor-btn\" onclick=\"switchView('visitor')\" class=\"text-xs bg-emerald-500\/10 hover:bg-emerald-500\/20 text-emerald-400 px-3 py-1.5 rounded-lg transition border border-emerald-500\/30 flex items-center gap-1.5 font-medium\">\n <i class=\"fa-solid fa-qrcode\"><\/i> Ver como Visitante\n <\/button>\n <\/header>\n\n \n <main class=\"flex-1 overflow-y-auto p-5 flex flex-col\">\n\n \n <section id=\"view-auth\" class=\"space-y-6 my-auto\">\n <div class=\"text-center space-y-2\">\n <div class=\"w-16 h-16 bg-emerald-500\/10 rounded-2xl border border-emerald-500\/30 mx-auto flex items-center justify-center text-emerald-400 text-2xl shadow-inner mb-3\">\n <i class=\"fa-solid fa-shield-halved\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-bold tracking-tight text-emerald-400\">Configurar Olho M\u00e1gico<\/h2>\n <p class=\"text-xs text-emerald-600\">Configure seus dados para receber chamadas diretas no seu WhatsApp quando baterem \u00e0 sua porta.<\/p>\n <\/div>\n\n \n <div class=\"flex bg-black p-1 rounded-xl border border-emerald-500\/20\">\n <button onclick=\"switchAuthTab('login')\" id=\"tab-login-btn\" class=\"flex-1 py-2 text-xs font-semibold rounded-lg bg-emerald-500 text-black transition shadow\">Entrar<\/button>\n <button onclick=\"switchAuthTab('register')\" id=\"tab-register-btn\" class=\"flex-1 py-2 text-xs font-semibold rounded-lg text-emerald-600 hover:text-emerald-400 transition\">Cadastrar \/ Configurar<\/button>\n <\/div>\n\n \n <form id=\"form-login\" onsubmit=\"handleLogin(event)\" class=\"space-y-4\">\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">E-mail Cadastrado<\/label>\n <input type=\"email\" id=\"login-email\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-4 py-3 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 transition placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Senha<\/label>\n <input type=\"password\" id=\"login-password\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-4 py-3 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 transition placeholder-emerald-900\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-semibold py-3 rounded-xl text-sm transition shadow-lg shadow-emerald-500\/20\">Acessar Meu Painel<\/button>\n <\/form>\n\n \n <form id=\"form-register\" onsubmit=\"handleRegister(event)\" class=\"space-y-4 hidden\">\n <div class=\"grid grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Resid\u00eancia \/ Bloco<\/label>\n <input type=\"text\" id=\"reg-bloco\" placeholder=\"Ex: Casa 03 \/ Apto 101\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">N\u00famero<\/label>\n <input type=\"text\" id=\"reg-ap\" placeholder=\"Ex: 101\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Seu Nome Completo<\/label>\n <input type=\"text\" id=\"reg-nome\" placeholder=\"Ex: Leonardo Rodrigues\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Seu WhatsApp (com DDD)<\/label>\n <input type=\"text\" id=\"reg-whatsapp\" placeholder=\"21999999999\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">E-mail de Acesso<\/label>\n <input type=\"email\" id=\"reg-email\" placeholder=\"seu@email.com\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Senha<\/label>\n <input type=\"password\" id=\"reg-senha\" placeholder=\"********\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400 placeholder-emerald-900\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Sua Foto<\/label>\n <input type=\"file\" id=\"reg-foto\" accept=\"image\/*\" class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2 text-xs text-emerald-600 file:mr-4 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-500\/10 file:text-emerald-400 hover:file:bg-emerald-500\/20\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-semibold py-3 rounded-xl text-sm transition shadow-lg shadow-emerald-500\/20\">Salvar e Ativar Olho M\u00e1gico<\/button>\n <\/form>\n <\/section>\n\n \n <section id=\"view-dashboard\" class=\"space-y-5 hidden\">\n \n <div class=\"bg-black border border-emerald-500\/30 rounded-2xl p-4 flex items-center space-x-4 shadow-inner\">\n <img decoding=\"async\" id=\"dash-foto\" src=\"\" alt=\"Foto\" class=\"w-16 h-16 rounded-2xl object-cover border-2 border-emerald-500 bg-black\">\n <div class=\"flex-1 overflow-hidden\">\n <span id=\"dash-bloco-ap\" class=\"text-xs font-semibold px-2 py-0.5 bg-emerald-500\/10 text-emerald-400 rounded-md border border-emerald-500\/20\">Resid\u00eancia<\/span>\n <h2 id=\"dash-nome\" class=\"text-base font-bold text-emerald-400 mt-1 truncate\">Nome<\/h2>\n <p id=\"dash-whatsapp\" class=\"text-xs text-emerald-600 truncate\"><\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-2\">\n <button onclick=\"openEditProfile()\" class=\"bg-emerald-500\/10 hover:bg-emerald-500\/20 text-emerald-400 border border-emerald-500\/30 font-semibold py-2.5 rounded-xl text-xs transition flex items-center justify-center gap-1.5\">\n <i class=\"fa-solid fa-pen-to-square\"><\/i> Editar Perfil\n <\/button>\n <button onclick=\"simulateVisit()\" class=\"bg-emerald-500 text-black font-bold py-2.5 rounded-xl text-xs transition flex items-center justify-center gap-1.5 shadow-lg shadow-emerald-500\/20\">\n <i class=\"fa-solid fa-bell\"><\/i> Simular Visita\n <\/button>\n <\/div>\n\n \n <div class=\"bg-black border border-emerald-500\/30 rounded-2xl p-4 space-y-3 flex-1 flex flex-col\">\n <div class=\"flex justify-between items-center border-b border-emerald-500\/20 pb-2\">\n <h3 class=\"text-xs font-bold text-emerald-400 uppercase tracking-wider flex items-center gap-2\">\n <i class=\"fa-solid fa-clock-rotate-left text-emerald-500\"><\/i> O Que Acontece no Olho M\u00e1gico\n <\/h3>\n <button onclick=\"clearLogs()\" class=\"text-[10px] text-emerald-600 hover:text-red-400 transition\">Limpar Hist\u00f3rico<\/button>\n <\/div>\n\n \n <div id=\"activity-log-list\" class=\"space-y-2.5 overflow-y-auto max-h-[300px] pr-1\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"flex gap-2\">\n <button onclick=\"handleLogout()\" class=\"flex-1 bg-black hover:bg-emerald-500\/10 text-emerald-600 hover:text-emerald-400 border border-emerald-500\/20 font-semibold py-2 rounded-xl text-xs transition\">\n Sair da Conta\n <\/button>\n <button onclick=\"handleDeleteAccount()\" class=\"bg-red-500\/10 hover:bg-red-500\/20 text-red-400 border border-red-500\/20 font-semibold py-2 px-3 rounded-xl text-xs transition\">\n Excluir\n <\/button>\n <\/div>\n <\/section>\n\n \n <section id=\"view-edit\" class=\"space-y-6 hidden\">\n <div class=\"flex items-center justify-between\">\n <button onclick=\"switchView('dashboard')\" class=\"text-xs text-emerald-600 hover:text-emerald-400 flex items-center gap-1\">\n <i class=\"fa-solid fa-arrow-left\"><\/i> Voltar ao Painel\n <\/button>\n <h2 class=\"text-sm font-bold text-emerald-400\">Editar Seus Dados<\/h2>\n <\/div>\n\n <form id=\"form-edit\" onsubmit=\"handleUpdateProfile(event)\" class=\"space-y-4\">\n <div class=\"grid grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Resid\u00eancia \/ Bloco<\/label>\n <input type=\"text\" id=\"edit-bloco\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">N\u00famero<\/label>\n <input type=\"text\" id=\"edit-ap\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Seu Nome Completo<\/label>\n <input type=\"text\" id=\"edit-nome\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">WhatsApp (com DDD)<\/label>\n <input type=\"text\" id=\"edit-whatsapp\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">E-mail<\/label>\n <input type=\"email\" id=\"edit-email\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Nova Senha<\/label>\n <input type=\"password\" id=\"edit-senha\" required class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2.5 text-sm text-emerald-400 focus:outline-none focus:border-emerald-400\">\n <\/div>\n <div>\n <label class=\"block text-xs font-medium text-emerald-500 mb-1\">Alterar Foto<\/label>\n <input type=\"file\" id=\"edit-foto\" accept=\"image\/*\" class=\"w-full bg-black border border-emerald-500\/30 rounded-xl px-3 py-2 text-xs text-emerald-600 file:mr-4 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-500\/10 file:text-emerald-400 hover:file:bg-emerald-500\/20\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-semibold py-3 rounded-xl text-sm transition shadow-lg shadow-emerald-500\/20\">Salvar Altera\u00e7\u00f5es<\/button>\n <\/form>\n <\/section>\n\n \n <section id=\"view-visitor\" class=\"space-y-6 hidden my-auto text-center\">\n <button onclick=\"switchView(currentUser ? 'dashboard' : 'auth')\" class=\"text-xs text-emerald-600 hover:text-emerald-400 flex items-center gap-1 mb-2\">\n <i class=\"fa-solid fa-arrow-left\"><\/i> Voltar\n <\/button>\n <div class=\"bg-black border border-emerald-500\/30 rounded-3xl p-6 space-y-4 shadow-xl\">\n <div class=\"relative w-28 h-28 mx-auto\">\n <img decoding=\"async\" id=\"visitor-foto\" src=\"\" alt=\"Residente\" class=\"w-28 h-28 rounded-full object-cover border-4 border-emerald-500 shadow-lg bg-black\">\n <span class=\"absolute bottom-0 right-0 bg-emerald-500 text-black p-1.5 rounded-full text-xs shadow\">\n <i class=\"fa-solid fa-bell animate-bounce\"><\/i>\n <\/span>\n <\/div>\n <div>\n <span id=\"visitor-bloco-ap\" class=\"text-xs font-semibold px-3 py-1 bg-emerald-500\/10 text-emerald-400 rounded-full border border-emerald-500\/20\">Resid\u00eancia<\/span>\n <h2 id=\"visitor-nome\" class=\"text-xl font-bold text-emerald-400 mt-2\">Nome do Morador<\/h2>\n <\/div>\n <p class=\"text-xs text-emerald-600 leading-relaxed\">Voc\u00ea acionou o <strong>Olho M\u00e1gico Smart<\/strong>. Clique abaixo para tocar a campainha e falar diretamente no WhatsApp do morador.<\/p>\n \n <div class=\"pt-2\">\n <a id=\"visitor-whatsapp-btn\" href=\"#\" onclick=\"logVisitorCall()\" target=\"_blank\" class=\"w-full bg-emerald-500 hover:bg-emerald-400 text-black font-bold py-3.5 px-4 rounded-xl text-sm transition flex items-center justify-center gap-2 shadow-lg shadow-emerald-500\/25\">\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i> Chamar no WhatsApp agora\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"bg-black border-t border-emerald-500\/20 p-3 text-center text-[10px] text-emerald-600\">\n Olho M\u00e1gico Smart • Sua seguran\u00e7a conectada\n <\/footer>\n\n <\/div>\n\n \n <script>\n \/\/ Dados do usu\u00e1rio \u00fanico e logs do Olho M\u00e1gico\n let currentUser = JSON.parse(localStorage.getItem('olho_magico_user')) || null;\n let activityLogs = JSON.parse(localStorage.getItem('olho_magico_logs')) || [\n { id: 1, type: 'system', text: 'Sistema do Olho M\u00e1gico ativado com sucesso.', time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) }\n ];\n\n \/\/ Inicializa\u00e7\u00e3o\n document.addEventListener('DOMContentLoaded', () => {\n if (currentUser) {\n loadDashboard();\n switchView('dashboard');\n } else {\n switchView('auth');\n }\n });\n\n \/\/ Alternar Visualiza\u00e7\u00f5es\n function switchView(viewName) {\n document.getElementById('view-auth').classList.add('hidden');\n document.getElementById('view-dashboard').classList.add('hidden');\n document.getElementById('view-edit').classList.add('hidden');\n document.getElementById('view-visitor').classList.add('hidden');\n\n if (viewName === 'auth') {\n document.getElementById('view-auth').classList.remove('hidden');\n } else if (viewName === 'dashboard') {\n if (!currentUser) { switchView('auth'); return; }\n loadDashboard();\n document.getElementById('view-dashboard').classList.remove('hidden');\n } else if (viewName === 'edit') {\n document.getElementById('view-edit').classList.remove('hidden');\n } else if (viewName === 'visitor') {\n setupVisitorView();\n document.getElementById('view-visitor').classList.remove('hidden');\n }\n }\n\n \/\/ Alternar Abas Login \/ Cadastro\n function switchAuthTab(tab) {\n const loginBtn = document.getElementById('tab-login-btn');\n const registerBtn = document.getElementById('tab-register-btn');\n const loginForm = document.getElementById('form-login');\n const registerForm = document.getElementById('form-register');\n\n if (tab === 'login') {\n loginBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg bg-emerald-500 text-black transition shadow\";\n registerBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg text-emerald-600 hover:text-emerald-400 transition\";\n loginForm.classList.remove('hidden');\n registerForm.classList.add('hidden');\n } else {\n registerBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg bg-emerald-500 text-black transition shadow\";\n loginBtn.className = \"flex-1 py-2 text-xs font-semibold rounded-lg text-emerald-600 hover:text-emerald-400 transition\";\n registerForm.classList.remove('hidden');\n loginForm.classList.add('hidden');\n }\n }\n\n \/\/ Registrar \/ Configurar Usu\u00e1rio\n function handleRegister(event) {\n event.preventDefault();\n const bloco = document.getElementById('reg-bloco').value.trim();\n const ap = document.getElementById('reg-ap').value.trim();\n const nome = document.getElementById('reg-nome').value.trim();\n const whatsapp = document.getElementById('reg-whatsapp').value.trim();\n const email = document.getElementById('reg-email').value.trim();\n const senha = document.getElementById('reg-senha').value;\n const fotoInput = document.getElementById('reg-foto');\n\n let defaultFoto = 'https:\/\/images.unsplash.com\/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=300&q=80';\n\n const saveUser = (fotoUrl) => {\n currentUser = { bloco, ap, nome, whatsapp, email, senha, foto: fotoUrl };\n localStorage.setItem('olho_magico_user', JSON.stringify(currentUser));\n \n addLog('system', `Conta configurada para ${nome} (${bloco} - ${ap}).`);\n switchView('dashboard');\n alert('Olho M\u00e1gico configurado com sucesso!');\n };\n\n if (fotoInput.files && fotoInput.files[0]) {\n const reader = new FileReader();\n reader.onload = e => saveUser(e.target.result);\n reader.readAsDataURL(fotoInput.files[0]);\n } else {\n saveUser(defaultFoto);\n }\n }\n\n \/\/ Login\n function handleLogin(event) {\n event.preventDefault();\n const email = document.getElementById('login-email').value.trim();\n const senha = document.getElementById('login-password').value;\n\n if (currentUser && currentUser.email === email && currentUser.senha === senha) {\n addLog('system', `Sess\u00e3o iniciada por ${currentUser.nome}.`);\n switchView('dashboard');\n } else {\n alert('E-mail ou senha incorretos ou nenhuma conta cadastrada neste dispositivo.');\n }\n }\n\n \/\/ Logout\n function handleLogout() {\n addLog('system', 'Sess\u00e3o encerrada.');\n currentUser = null;\n localStorage.removeItem('olho_magico_user');\n switchView('auth');\n }\n\n \/\/ Excluir Conta\n function handleDeleteAccount() {\n if (confirm('Tem certeza que deseja excluir sua conta do Olho M\u00e1gico?')) {\n currentUser = null;\n localStorage.removeItem('olho_magico_user');\n localStorage.removeItem('olho_magico_logs');\n activityLogs = [];\n switchView('auth');\n }\n }\n\n \/\/ Abrir Edi\u00e7\u00e3o\n function openEditProfile() {\n if (!currentUser) return;\n document.getElementById('edit-bloco').value = currentUser.bloco;\n document.getElementById('edit-ap').value = currentUser.ap;\n document.getElementById('edit-nome').value = currentUser.nome;\n document.getElementById('edit-whatsapp').value = currentUser.whatsapp;\n document.getElementById('edit-email').value = currentUser.email;\n document.getElementById('edit-senha').value = currentUser.senha;\n switchView('edit');\n }\n\n \/\/ Salvar Edi\u00e7\u00e3o\n function handleUpdateProfile(event) {\n event.preventDefault();\n if (!currentUser) return;\n\n const bloco = document.getElementById('edit-bloco').value.trim();\n const ap = document.getElementById('edit-ap').value.trim();\n const nome = document.getElementById('edit-nome').value.trim();\n const whatsapp = document.getElementById('edit-whatsapp').value.trim();\n const email = document.getElementById('edit-email').value.trim();\n const senha = document.getElementById('edit-senha').value;\n const fotoInput = document.getElementById('edit-foto');\n\n const update = (fotoUrl) => {\n currentUser = { bloco, ap, nome, whatsapp, email, senha, foto: fotoUrl };\n localStorage.setItem('olho_magico_user', JSON.stringify(currentUser));\n addLog('system', 'Dados do perfil atualizados.');\n switchView('dashboard');\n alert('Perfil atualizado com sucesso!');\n };\n\n if (fotoInput.files && fotoInput.files[0]) {\n const reader = new FileReader();\n reader.onload = e => update(e.target.result);\n reader.readAsDataURL(fotoInput.files[0]);\n } else {\n update(currentUser.foto);\n }\n }\n\n \/\/ Carregar Dashboard e logs (\"Tudo que acontece\")\n function loadDashboard() {\n if (!currentUser) return;\n document.getElementById('dash-foto').src = currentUser.foto;\n document.getElementById('dash-bloco-ap').innerText = `${currentUser.bloco} - ${currentUser.ap}`;\n document.getElementById('dash-nome').innerText = currentUser.nome;\n document.getElementById('dash-whatsapp').innerText = `WhatsApp: ${currentUser.whatsapp}`;\n renderLogs();\n }\n\n \/\/ Adicionar Log de Evento\n function addLog(type, text) {\n const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});\n const newLog = { id: Date.now(), type, text, time };\n activityLogs.unshift(newLog); \/\/ mais recente no topo\n localStorage.setItem('olho_magico_logs', JSON.stringify(activityLogs));\n if (currentUser) renderLogs();\n }\n\n \/\/ Renderizar Logs na Tela\n function renderLogs() {\n const container = document.getElementById('activity-log-list');\n container.innerHTML = '';\n\n if (activityLogs.length === 0) {\n container.innerHTML = `<p class=\"text-center text-xs text-emerald-600 py-4\">Nenhum evento registrado ainda.<\/p>`;\n return;\n }\n\n activityLogs.forEach(log => {\n let icon = 'fa-circle-info text-emerald-500';\n let bgBorder = 'border-emerald-500\/20 bg-emerald-500\/5';\n if (log.type === 'visit') {\n icon = 'fa-bell text-emerald-400 animate-pulse';\n bgBorder = 'border-emerald-500\/40 bg-emerald-500\/10';\n } else if (log.type === 'system') {\n icon = 'fa-gear text-emerald-600';\n }\n\n const item = document.createElement('div');\n item.className = `border ${bgBorder} rounded-xl p-2.5 flex items-start space-x-2.5 text-xs`;\n item.innerHTML = `\n <div class=\"mt-0.5\"><i class=\"fa-solid ${icon}\"><\/i><\/div>\n <div class=\"flex-1\">\n <p class=\"text-emerald-300 font-medium\">${log.text}<\/p>\n <span class=\"text-[10px] text-emerald-600\">${log.time}<\/span>\n <\/div>\n `;\n container.appendChild(item);\n });\n }\n\n \/\/ Simular Visita (Para testar o Olho M\u00e1gico)\n function simulateVisit() {\n addLog('visit', 'Algu\u00e9m acionou o Olho M\u00e1gico na sua porta! Campainha tocada.');\n alert('Campainha tocada! Um registro foi adicionado no seu feed.');\n }\n\n \/\/ Configurar Vis\u00e3o do Visitante\n function setupVisitorView() {\n if (!currentUser) {\n alert('Nenhum usu\u00e1rio configurado. Cadastre seus dados primeiro.');\n switchView('auth');\n return;\n }\n document.getElementById('visitor-foto').src = currentUser.foto;\n document.getElementById('visitor-bloco-ap').innerText = `${currentUser.bloco} - ${currentUser.ap}`;\n document.getElementById('visitor-nome').innerText = currentUser.nome;\n\n const mensagem = encodeURIComponent(`Ol\u00e1 ${currentUser.nome}, acabei de tocar a campainha do seu Olho M\u00e1gico (${currentUser.bloco} - ${currentUser.ap}).`);\n document.getElementById('visitor-whatsapp-btn').href = `https:\/\/wa.me\/55${currentUser.whatsapp}?text=${mensagem}`;\n }\n\n \/\/ Registrar Chamada do Visitante\n function logVisitorCall() {\n addLog('visit', 'Um visitante clicou para chamar no WhatsApp pelo Olho M\u00e1gico.');\n }\n\n \/\/ Limpar Logs\n function clearLogs() {\n if (confirm('Deseja limpar o hist\u00f3rico de eventos?')) {\n activityLogs = [];\n localStorage.setItem('olho_magico_logs', JSON.stringify(activityLogs));\n renderLogs();\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Olho M\u00e1gico Smart – Interfone Pessoal Olho M\u00e1gico Smart Seu Interfone Pessoal Ver como Visitante Configurar Olho M\u00e1gico Configure seus […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1701","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages\/1701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1701"}],"version-history":[{"count":1,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages\/1701\/revisions"}],"predecessor-version":[{"id":1702,"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=\/wp\/v2\/pages\/1701\/revisions\/1702"}],"wp:attachment":[{"href":"https:\/\/shipforge.com.br\/home\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}