{"id":1298,"date":"2025-11-24T19:24:32","date_gmt":"2025-11-24T22:24:32","guid":{"rendered":"https:\/\/get84.com.br\/?page_id=1298"},"modified":"2025-11-24T20:21:54","modified_gmt":"2025-11-24T23:21:54","slug":"g-teste-app","status":"publish","type":"page","link":"https:\/\/get84.com.br\/index.php\/g-teste-app\/","title":{"rendered":"G Teste App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1298\" class=\"elementor elementor-1298\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-190b03f e-flex e-con-boxed e-con e-parent\" data-id=\"190b03f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3dced6 elementor-widget elementor-widget-html\" data-id=\"a3dced6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ESTILO (CSS) - Design do Calend\u00e1rio -->\r\n<style>\r\n  :root { --primary: #6200ea; --bg: #f3e5f5; }\r\n  \r\n  .app-container {\r\n    max-width: 500px; margin: 0 auto; padding: 20px;\r\n    background: #fff; border-radius: 15px;\r\n    box-shadow: 0 10px 25px rgba(0,0,0,0.1); font-family: 'Segoe UI', sans-serif;\r\n  }\r\n\r\n  \/* Login & Form Styles *\/\r\n  .app-input { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }\r\n  .app-btn { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }\r\n  .app-btn:hover { opacity: 0.9; }\r\n  .app-btn.secondary { background: #e0e0e0; color: #333; margin-top: 10px; }\r\n  .hidden { display: none !important; }\r\n  .error-msg { color: red; font-size: 12px; text-align: center; }\r\n\r\n  \/* CALEND\u00c1RIO STYLES *\/\r\n  .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }\r\n  .month-title { font-size: 1.5rem; font-weight: bold; color: var(--primary); margin: 0; }\r\n  \r\n  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }\r\n  .week-day { font-weight: bold; font-size: 0.8rem; color: #666; padding-bottom: 5px; }\r\n  \r\n  .day-cell {\r\n    aspect-ratio: 1\/1; display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n    background: #f9f9f9; border-radius: 8px; cursor: pointer; position: relative; border: 1px solid transparent;\r\n  }\r\n  .day-cell:hover { background: #ede7f6; border-color: var(--primary); }\r\n  .day-number { font-weight: bold; font-size: 1rem; }\r\n  \r\n  \/* Bolinha que indica evento *\/\r\n  .event-dot {\r\n    width: 6px; height: 6px; background-color: var(--primary);\r\n    border-radius: 50%; margin-top: 4px; display: none;\r\n  }\r\n  .day-cell.has-event .event-dot { display: block; }\r\n  .day-cell.has-event { background-color: #d1c4e9; color: var(--primary); }\r\n\r\n  \/* Lista de eventos abaixo do calend\u00e1rio *\/\r\n  .events-list { margin-top: 20px; border-top: 1px solid #eee; padding-top: 10px; text-align: left;}\r\n  .event-item { background: #f3f3f3; padding: 8px; margin-bottom: 5px; border-radius: 5px; font-size: 0.9rem; }\r\n<\/style>\r\n\r\n<div id=\"app-root\">\r\n\r\n  <!-- 1. TELA DE LOGIN (Igual anterior) -->\r\n  <div id=\"login-screen\" class=\"app-container\">\r\n    <h2 style=\"text-align:center;\">Agenda Segura \ud83d\udd12<\/h2>\r\n    <input type=\"email\" id=\"login-email\" class=\"app-input\" placeholder=\"E-mail\">\r\n    <input type=\"password\" id=\"login-pass\" class=\"app-input\" placeholder=\"Senha\">\r\n    <button id=\"btn-login\" class=\"app-btn\">Entrar<\/button>\r\n    <p id=\"error-login\" class=\"error-msg\"><\/p>\r\n    <div style=\"text-align:center; margin-top:10px; cursor:pointer; color:var(--primary);\" id=\"go-to-reg\">Criar conta<\/div>\r\n  <\/div>\r\n\r\n  <!-- 2. TELA DE CADASTRO -->\r\n  <div id=\"register-screen\" class=\"app-container hidden\">\r\n    <h2 style=\"text-align:center;\">Novo Usu\u00e1rio<\/h2>\r\n    <input type=\"email\" id=\"reg-email\" class=\"app-input\" placeholder=\"E-mail\">\r\n    <input type=\"password\" id=\"reg-pass\" class=\"app-input\" placeholder=\"Senha\">\r\n    <button id=\"btn-register\" class=\"app-btn\">Cadastrar<\/button>\r\n    <p id=\"error-reg\" class=\"error-msg\"><\/p>\r\n    <div style=\"text-align:center; margin-top:10px; cursor:pointer; color:var(--primary);\" id=\"go-to-login\">Voltar para Login<\/div>\r\n  <\/div>\r\n\r\n  <!-- 3. TELA DO CALEND\u00c1RIO (APP) -->\r\n  <div id=\"dashboard-screen\" class=\"app-container hidden\">\r\n    <div class=\"calendar-header\">\r\n      <h2 class=\"month-title\">Dezembro 2025<\/h2>\r\n      <button id=\"btn-logout\" style=\"background:none; border:none; color:red; cursor:pointer;\">Sair<\/button>\r\n    <\/div>\r\n\r\n    <!-- Cabe\u00e7alho Dias da Semana -->\r\n    <div class=\"calendar-grid\">\r\n      <div class=\"week-day\">Dom<\/div><div class=\"week-day\">Seg<\/div><div class=\"week-day\">Ter<\/div>\r\n      <div class=\"week-day\">Qua<\/div><div class=\"week-day\">Qui<\/div><div class=\"week-day\">Sex<\/div><div class=\"week-day\">S\u00e1b<\/div>\r\n    <\/div>\r\n\r\n    <!-- O Javascript vai preencher os dias aqui -->\r\n    <div id=\"calendar-days\" class=\"calendar-grid\" style=\"margin-top: 5px;\"><\/div>\r\n\r\n    <div class=\"events-list\">\r\n      <h4>Seus compromissos:<\/h4>\r\n      <div id=\"my-events-display\">Carregando...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- L\u00d3GICA JAVASCRIPT -->\r\n<script type=\"module\">\r\n  import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-app.js\";\r\n  import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-auth.js\";\r\n  import { getFirestore, collection, addDoc, query, where, onSnapshot, orderBy } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-firestore.js\";\r\n\r\n  \/\/ SUAS CHAVES (J\u00e1 configuradas)\r\n  const firebaseConfig = {\r\n    apiKey: \"AIzaSyBaNw3CUnbYKiqllP4jI29nKwzkbtcunHg\",\r\n    authDomain: \"g-teste-d2911.firebaseapp.com\",\r\n    projectId: \"g-teste-d2911\",\r\n    storageBucket: \"g-teste-d2911.firebasestorage.app\",\r\n    messagingSenderId: \"700318194244\",\r\n    appId: \"1:700318194244:web:33d1465a129d3e5d92fa11\"\r\n  };\r\n\r\n  const app = initializeApp(firebaseConfig);\r\n  const auth = getAuth(app);\r\n  const db = getFirestore(app);\r\n\r\n  let currentUser = null;\r\n\r\n  \/\/ --- NAVEGA\u00c7\u00c3O ENTRE TELAS ---\r\n  const showScreen = (screenId) => {\r\n    ['login-screen', 'register-screen', 'dashboard-screen'].forEach(id => {\r\n      document.getElementById(id).classList.add('hidden');\r\n    });\r\n    document.getElementById(screenId).classList.remove('hidden');\r\n  };\r\n\r\n  document.getElementById('go-to-reg').onclick = () => showScreen('register-screen');\r\n  document.getElementById('go-to-login').onclick = () => showScreen('login-screen');\r\n\r\n  \/\/ --- AUTHENTICATION ---\r\n  document.getElementById('btn-login').onclick = async () => {\r\n    try {\r\n      await signInWithEmailAndPassword(auth, document.getElementById('login-email').value, document.getElementById('login-pass').value);\r\n    } catch(e) { document.getElementById('error-login').innerText = \"Erro: \" + e.message; }\r\n  };\r\n\r\n  document.getElementById('btn-register').onclick = async () => {\r\n    try {\r\n      await createUserWithEmailAndPassword(auth, document.getElementById('reg-email').value, document.getElementById('reg-pass').value);\r\n    } catch(e) { document.getElementById('error-reg').innerText = \"Erro: \" + e.message; }\r\n  };\r\n\r\n  document.getElementById('btn-logout').onclick = () => signOut(auth);\r\n\r\n  \/\/ --- C\u00c9REBRO DO APP ---\r\n  onAuthStateChanged(auth, (user) => {\r\n    if (user) {\r\n      currentUser = user;\r\n      showScreen('dashboard-screen');\r\n      iniciarCalendario(); \/\/ Renderiza o calend\u00e1rio\r\n      carregarEventos(user.uid); \/\/ Busca dados DO USU\u00c1RIO\r\n    } else {\r\n      currentUser = null;\r\n      showScreen('login-screen');\r\n    }\r\n  });\r\n\r\n  \/\/ --- FUN\u00c7\u00d5ES DO CALEND\u00c1RIO ---\r\n  function iniciarCalendario() {\r\n    const calendarDays = document.getElementById('calendar-days');\r\n    calendarDays.innerHTML = \"\";\r\n\r\n    \/\/ Configura\u00e7\u00e3o para DEZEMBRO 2025\r\n    \/\/ 01\/Dez\/2025 \u00e9 uma Segunda-feira (index 1 no JS, pois Domingo \u00e9 0)\r\n    const emptyDays = 1; \r\n    const totalDays = 31;\r\n\r\n    \/\/ Criar espa\u00e7os vazios antes do dia 1\r\n    for(let i=0; i < emptyDays; i++) {\r\n      const empty = document.createElement('div');\r\n      calendarDays.appendChild(empty);\r\n    }\r\n\r\n    \/\/ Criar dias de 1 a 31\r\n    for(let i=1; i <= totalDays; i++) {\r\n      const dayEl = document.createElement('div');\r\n      dayEl.className = 'day-cell';\r\n      dayEl.id = `day-${i}`;\r\n      dayEl.innerHTML = `<span class=\"day-number\">${i}<\/span><div class=\"event-dot\"><\/div>`;\r\n      \r\n      \/\/ Clique para Adicionar Evento\r\n      dayEl.onclick = () => adicionarAgendamento(i);\r\n      \r\n      calendarDays.appendChild(dayEl);\r\n    }\r\n  }\r\n\r\n  async function adicionarAgendamento(dia) {\r\n    const compromisso = prompt(`O que voc\u00ea vai fazer no dia ${dia}\/12?`);\r\n    \r\n    if(compromisso) {\r\n      \/\/ SALVAR NO FIREBASE\r\n      await addDoc(collection(db, \"agendamentos\"), {\r\n        uid: currentUser.uid,     \/\/ O ID secreto do Google\r\n        email: currentUser.email, \/\/ <--- AQUI: O e-mail leg\u00edvel!\r\n        dia: dia,\r\n        descricao: compromisso,\r\n        timestamp: new Date()\r\n      });\r\n      \r\n      \/\/ Opcional: Feedback visual r\u00e1pido\r\n      alert(\"Salvo com sucesso!\");\r\n    }\r\n  }\r\n\r\n  \/\/ --- ESCUTAR DADOS EM TEMPO REAL ---\r\n  \/\/ --- VERS\u00c3O SIMPLIFICADA (Sem OrderBy para n\u00e3o travar) ---\r\n  function carregarEventos(uid) {\r\n    \/\/ Tirei o 'orderBy(\"dia\")' daqui para o Google n\u00e3o reclamar de \u00edndice\r\n    const q = query(collection(db, \"agendamentos\"), where(\"uid\", \"==\", uid));\r\n    \r\n    onSnapshot(q, (snapshot) => {\r\n      const display = document.getElementById('my-events-display');\r\n      if(!display) return;\r\n      \r\n      display.innerHTML = \"\";\r\n      \r\n      \/\/ Limpa as bolinhas roxas antes de redesenhar\r\n      document.querySelectorAll('.day-cell').forEach(el => el.classList.remove('has-event'));\r\n\r\n      if (snapshot.empty) {\r\n        display.innerHTML = \"<p>Nenhum agendamento encontrado.<\/p>\";\r\n        return; \/\/ Para por aqui se n\u00e3o tiver nada\r\n      }\r\n\r\n      snapshot.forEach((doc) => {\r\n        const data = doc.data();\r\n        \r\n        \/\/ Cria o item na lista\r\n        const item = document.createElement('div');\r\n        item.className = 'event-item';\r\n        \/\/ Convertendo o dia para garantir que \u00e9 n\u00famero\r\n        const diaNum = parseInt(data.dia);\r\n        \r\n        item.innerText = `Dia ${diaNum}: ${data.descricao}`;\r\n        display.appendChild(item);\r\n\r\n        \/\/ Pinta a bolinha no calend\u00e1rio\r\n        const diaCell = document.getElementById(`day-${diaNum}`);\r\n        if(diaCell) diaCell.classList.add('has-event');\r\n      });\r\n    }, (error) => {\r\n        \/\/ Se der erro, ele vai te mostrar qual \u00e9\r\n        console.error(\"Erro ao buscar dados:\", error);\r\n        document.getElementById('my-events-display').innerText = \"Erro: \" + error.message;\r\n    });\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7559b0c e-flex e-con-boxed e-con e-parent\" data-id=\"7559b0c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-231513b elementor-widget elementor-widget-html\" data-id=\"231513b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  \/* Bot\u00e3o Flutuante (Bolinha Verde) *\/\r\n  .whatsapp-float {\r\n    position: fixed; bottom: 20px; right: 20px;\r\n    background-color: #25d366; color: white;\r\n    width: 60px; height: 60px; border-radius: 50%;\r\n    text-align: center; font-size: 30px;\r\n    box-shadow: 2px 2px 3px #999; z-index: 1000;\r\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\r\n    transition: transform 0.3s;\r\n  }\r\n  .whatsapp-float:hover { transform: scale(1.1); }\r\n\r\n  \/* Janela do Chat (Escondida no in\u00edcio) *\/\r\n  .whatsapp-window {\r\n    display: none; position: fixed; bottom: 90px; right: 20px;\r\n    width: 300px; background: white; border-radius: 15px;\r\n    box-shadow: 0 5px 20px rgba(0,0,0,0.2); z-index: 1001;\r\n    overflow: hidden; font-family: sans-serif;\r\n    animation: slideUp 0.3s ease;\r\n  }\r\n\r\n  @keyframes slideUp { from {opacity:0; bottom: 70px;} to {opacity:1; bottom: 90px;} }\r\n\r\n  \/* Cabe\u00e7alho *\/\r\n  .wa-header {\r\n    background: #075e54; color: white; padding: 15px;\r\n    display: flex; align-items: center;\r\n  }\r\n  .wa-profile-pic {\r\n    width: 40px; height: 40px; background: #ddd; border-radius: 50%; margin-right: 10px;\r\n    display: flex; align-items: center; justify-content: center; font-size: 20px;\r\n  }\r\n  .wa-info h4 { margin: 0; font-size: 16px; }\r\n  .wa-info p { margin: 0; font-size: 11px; opacity: 0.8; }\r\n  .wa-close { margin-left: auto; cursor: pointer; font-size: 20px; }\r\n\r\n  \/* Corpo *\/\r\n  .wa-body {\r\n    background: #e5ddd5; padding: 15px; height: 150px;\r\n    background-image: url('https:\/\/user-images.githubusercontent.com\/15075759\/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');\r\n    display: flex; flex-direction: column;\r\n  }\r\n  .wa-msg-received {\r\n    background: white; padding: 8px 12px; border-radius: 0 10px 10px 10px;\r\n    width: fit-content; max-width: 80%; font-size: 13px; color: #333;\r\n    box-shadow: 0 1px 1px rgba(0,0,0,0.1); margin-bottom: 10px;\r\n  }\r\n\r\n  \/* Rodap\u00e9 (Input) *\/\r\n  .wa-footer { padding: 10px; background: #f0f0f0; display: flex; }\r\n  .wa-input {\r\n    flex: 1; padding: 10px; border: none; border-radius: 20px; outline: none;\r\n  }\r\n  .wa-send-btn {\r\n    background: #075e54; color: white; border: none;\r\n    width: 40px; height: 40px; border-radius: 50%;\r\n    margin-left: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center;\r\n  }\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n\r\n<div id=\"wa-root\">\r\n  \r\n  <div class=\"whatsapp-float\" onclick=\"toggleChat()\">\r\n    <i class=\"fab fa-whatsapp\"><\/i>\r\n  <\/div>\r\n\r\n  <div class=\"whatsapp-window\" id=\"wa-window\">\r\n    \r\n    <div class=\"wa-header\">\r\n      <div class=\"wa-profile-pic\">\ud83d\udc68\u200d\ud83d\udcbb<\/div>\r\n      <div class=\"wa-info\">\r\n        <h4>Suporte Online<\/h4>\r\n        <p>Responde r\u00e1pido<\/p>\r\n      <\/div>\r\n      <div class=\"wa-close\" onclick=\"toggleChat()\">\u00d7<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"wa-body\">\r\n      <div class=\"wa-msg-received\">\r\n        Ol\u00e1! \ud83d\udc4b<br>Como posso te ajudar hoje?\r\n        <div style=\"text-align: right; font-size: 10px; color: #999; margin-top: 3px;\">Agora<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"wa-footer\">\r\n      <input type=\"text\" id=\"wa-msg-input\" class=\"wa-input\" placeholder=\"Digite sua d\u00favida...\">\r\n      <button class=\"wa-send-btn\" onclick=\"enviarProZap()\">\r\n        <i class=\"fa fa-paper-plane\"><\/i>\r\n      <\/button>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  \/\/ CONFIGURE AQUI SEU N\u00daMERO\r\n  \/\/ Formato: 55 + DDD + Numero (Sem tra\u00e7os ou espa\u00e7os)\r\n  const TELEFONE_ADMIN = \"5581993508070\"; \r\n\r\n  function toggleChat() {\r\n    const window = document.getElementById('wa-window');\r\n    if (window.style.display === 'block') {\r\n      window.style.display = 'none';\r\n    } else {\r\n      window.style.display = 'block';\r\n      \/\/ Foca no input quando abrir\r\n      setTimeout(() => document.getElementById('wa-msg-input').focus(), 100);\r\n    }\r\n  }\r\n\r\n  function enviarProZap() {\r\n    const input = document.getElementById('wa-msg-input');\r\n    const texto = input.value;\r\n\r\n    if (texto.trim() === \"\") return;\r\n\r\n    \/\/ Cria o link inteligente\r\n    \/\/ Se for celular, abre o App. Se for PC, abre o Web.\r\n    const url = `https:\/\/api.whatsapp.com\/send?phone=${TELEFONE_ADMIN}&text=${encodeURIComponent(texto)}`;\r\n\r\n    \/\/ Abre em nova aba\r\n    window.open(url, '_blank');\r\n\r\n    \/\/ Limpa o input\r\n    input.value = \"\";\r\n    toggleChat(); \/\/ Fecha a janelinha\r\n  }\r\n\r\n  \/\/ Permitir enviar com Enter\r\n  document.getElementById('wa-msg-input').addEventListener('keypress', function (e) {\r\n    if (e.key === 'Enter') {\r\n      enviarProZap();\r\n    }\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Agenda Segura \ud83d\udd12 Entrar Criar conta Novo Usu\u00e1rio Cadastrar Voltar para Login Dezembro 2025 Sair DomSegTer QuaQuiSexS\u00e1b Seus compromissos: Carregando&#8230; \ud83d\udc68\u200d\ud83d\udcbb Suporte Online Responde r\u00e1pido \u00d7 Ol\u00e1! \ud83d\udc4bComo posso te ajudar hoje? Agora<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1298"}],"version-history":[{"count":31,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1298\/revisions"}],"predecessor-version":[{"id":1330,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1298\/revisions\/1330"}],"wp:attachment":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}