{"id":244,"date":"2026-08-13T15:12:36","date_gmt":"2026-08-13T15:12:36","guid":{"rendered":"https:\/\/kikistationary.pt\/?page_id=244"},"modified":"2026-08-17T17:02:58","modified_gmt":"2026-08-17T17:02:58","slug":"elementor-244","status":"publish","type":"page","link":"https:\/\/kikistationary.pt\/?page_id=244","title":{"rendered":"Habit Tracking Dash &#8211; Data Analyst Study"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"244\" class=\"elementor elementor-244\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e03ffbb e-flex e-con-boxed e-con e-parent\" data-id=\"e03ffbb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-871d05a elementor-widget elementor-widget-html\" data-id=\"871d05a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  .kks-header{\n    --kks-bg: #1b2b22;\n    --kks-paper: #f4efe3;\n    --kks-paper-soft: #fbf8f1;\n    --kks-ink: #22301f;\n    --kks-accent: #e8a33d;\n    --kks-line: rgba(244,239,227,0.16);\n    box-sizing: border-box;\n    font-family:'Inter', sans-serif;\n    position: sticky; top:0; z-index: 999;\n    background: rgba(27,43,34,0.94);\n    backdrop-filter: blur(8px);\n    border-bottom: 1px solid var(--kks-line);\n  }\n  .kks-header *{ box-sizing: border-box; }\n\n  .kks-header-inner{\n    max-width: 1200px; margin:0 auto;\n    display:flex; align-items:center; justify-content:space-between;\n    padding: 14px 20px;\n  }\n  .kks-logo{\n    font-family:'Oswald', sans-serif; font-weight:700; font-size:22px;\n    letter-spacing: .04em; color: var(--kks-paper-soft); text-decoration:none;\n    display:flex; align-items:baseline; gap:2px; flex-shrink:0;\n  }\n  .kks-logo span{ color: var(--kks-accent); }\n\n  .kks-desktop-nav{ display:flex; align-items:center; gap: 6px; }\n  .kks-nav-item{ position:relative; }\n  .kks-nav-btn{\n    font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:.04em;\n    text-transform:uppercase; background:transparent; color: var(--kks-paper-soft);\n    border: 1.5px solid transparent; border-radius: 8px; padding: 10px 14px;\n    cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;\n    transition: background .15s ease, color .15s ease, border-color .15s ease;\n  }\n  .kks-nav-btn:hover, .kks-nav-btn:focus-visible, .kks-nav-btn.kks-active{\n    background: var(--kks-accent); color: var(--kks-ink); border-color: var(--kks-accent);\n    outline:none;\n  }\n  .kks-nav-btn.kks-parent-active{ border-color: var(--kks-accent); color: var(--kks-accent); }\n  .kks-nav-btn .kks-caret{ font-size:9px; transition: transform .15s ease; }\n  .kks-nav-item.kks-open .kks-nav-btn .kks-caret{ transform: rotate(180deg); }\n\n  .kks-dropdown{\n    position:absolute; top: calc(100% + 8px); left:0;\n    background: var(--kks-paper); border-radius: 12px; min-width: 220px;\n    box-shadow: 0 14px 30px rgba(0,0,0,0.35);\n    padding: 6px; display:none; flex-direction:column; gap:2px;\n  }\n  .kks-nav-item.kks-open .kks-dropdown{ display:flex; }\n  .kks-dropdown a{\n    font-family:'Inter', sans-serif; font-size:13.5px; font-weight:500;\n    color: var(--kks-ink); text-decoration:none; padding: 10px 12px; border-radius: 8px;\n    transition: background .12s ease, color .12s ease;\n  }\n  .kks-dropdown a:hover, .kks-dropdown a:focus-visible{ background: var(--kks-accent); color: var(--kks-ink); outline:none; }\n\n  .kks-hamburger{\n    display:none; flex-direction:column; justify-content:center; gap:5px;\n    width: 40px; height: 40px; background:transparent; border:1.5px solid var(--kks-line);\n    border-radius: 8px; cursor:pointer; padding:0; align-items:center;\n  }\n  .kks-hamburger span{\n    width: 20px; height:2px; background: var(--kks-paper-soft); border-radius:2px;\n    transition: transform .2s ease, opacity .2s ease;\n  }\n  .kks-hamburger.kks-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }\n  .kks-hamburger.kks-open span:nth-child(2){ opacity:0; }\n  .kks-hamburger.kks-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }\n  .kks-hamburger:hover, .kks-hamburger:focus-visible{ background: rgba(232,163,61,0.12); border-color: var(--kks-accent); outline:none; }\n\n  .kks-mobile-nav{\n    display:none; flex-direction:column; gap:4px;\n    max-width:1200px; margin:0 auto; padding: 4px 20px 16px;\n  }\n  .kks-mobile-nav.kks-open{ display:flex; }\n  .kks-m-nav-item{ display:flex; flex-direction:column; }\n  .kks-m-nav-btn{\n    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.03em;\n    text-transform:uppercase; background:transparent; color: var(--kks-paper-soft);\n    border:none; text-align:left; padding: 13px 10px; border-radius: 8px;\n    cursor:pointer; display:flex; justify-content:space-between; align-items:center;\n    text-decoration:none; width:100%; transition: background .15s ease, color .15s ease;\n  }\n  .kks-m-nav-btn:hover, .kks-m-nav-btn:focus-visible, .kks-m-nav-btn.kks-active{\n    background: var(--kks-accent); color: var(--kks-ink); outline:none;\n  }\n  .kks-m-nav-btn.kks-parent-active{ color: var(--kks-accent); }\n  .kks-m-dropdown{ display:none; flex-direction:column; padding: 2px 4px 6px 14px; gap:2px; }\n  .kks-m-nav-item.kks-open .kks-m-dropdown{ display:flex; }\n  .kks-m-dropdown a{\n    font-family:'Inter', sans-serif; font-size:13px; color: rgba(244,239,227,0.75);\n    text-decoration:none; padding: 10px 12px; border-radius: 7px;\n    border-left: 2px solid var(--kks-line);\n    transition: background .12s ease, color .12s ease, border-color .12s ease;\n  }\n  .kks-m-dropdown a:hover, .kks-m-dropdown a:focus-visible{\n    background: rgba(232,163,61,0.14); color: var(--kks-accent); border-color: var(--kks-accent); outline:none;\n  }\n  .kks-m-nav-item.kks-open .kks-m-nav-btn .kks-caret{ transform: rotate(180deg); }\n\n  .kks-toast{\n    position: fixed; bottom: 24px; left:50%; transform: translateX(-50%) translateY(20px);\n    background: var(--kks-paper); color: var(--kks-ink); font-family:'IBM Plex Mono', monospace;\n    font-size:13px; padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,0.35);\n    opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; z-index:9999;\n  }\n  .kks-toast.kks-show{ opacity:1; transform: translateX(-50%) translateY(0); }\n\n  @media (max-width: 860px){\n    .kks-desktop-nav{ display:none; }\n    .kks-hamburger{ display:flex; }\n  }\n  @media (prefers-reduced-motion: reduce){ .kks-header *{ transition:none !important; } }\n<\/style>\n\n<header class=\"kks-header\">\n  <div class=\"kks-header-inner\">\n    <a href=\"\/\" class=\"kks-logo\">KIKI<span>STAT<\/span><\/a>\n\n    <nav class=\"kks-desktop-nav\" aria-label=\"Navega\u00e7\u00e3o principal\">\n      <div class=\"kks-nav-item\" data-kks-nav=\"compra\">\n        <button class=\"kks-nav-btn\" data-kks-toggle=\"compra\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          Compra do M\u00eas <span class=\"kks-caret\">\u25be<\/span>\n        <\/button>\n        <div class=\"kks-dropdown\">\n          <a href=\"https:\/\/kikistationary.pt\/?page_id=250\" data-kks-id=\"casal\">Casal<\/a>\n          <a href=\"https:\/\/kikistationary.pt\/?page_id=318\" data-kks-id=\"2000kcal\">Individual 2000kcal<\/a>\n          <a href=\"https:\/\/kikistationary.pt\/?page_id=309\" data-kks-id=\"3000kcal\">Individual 3000kcal<\/a>\n        <\/div>\n      <\/div>\n      <a class=\"kks-nav-btn\" href=\"https:\/\/kikistationary.pt\/?page_id=286\" data-kks-id=\"limpeza\">Limpeza da Casa<\/a>\n      <a class=\"kks-nav-btn\" href=\"https:\/\/kikistationary.pt\/?page_id=244\" data-kks-id=\"habit\">Habit Tracker<\/a>\n    <\/nav>\n\n    <button class=\"kks-hamburger\" id=\"kksHamburgerBtn\" aria-label=\"Abrir menu\" aria-expanded=\"false\">\n      <span><\/span><span><\/span><span><\/span>\n    <\/button>\n  <\/div>\n\n  <nav class=\"kks-mobile-nav\" id=\"kksMobileNav\" aria-label=\"Navega\u00e7\u00e3o m\u00f3vel\">\n    <div class=\"kks-m-nav-item\" data-kks-mnav=\"compra\">\n      <button class=\"kks-m-nav-btn\" data-kks-mtoggle=\"compra\" aria-haspopup=\"true\" aria-expanded=\"false\">\n        Compra do M\u00eas <span class=\"kks-caret\">\u25be<\/span>\n      <\/button>\n      <div class=\"kks-m-dropdown\">\n        <a href=\"https:\/\/kikistationary.pt\/?page_id=250\" data-kks-id=\"casal\">Casal<\/a>\n        <a href=\"https:\/\/kikistationary.pt\/?page_id=318\" data-kks-id=\"2000kcal\">Individual 2000kcal<\/a>\n        <a href=\"https:\/\/kikistationary.pt\/?page_id=309\" data-kks-id=\"3000kcal\">Individual 3000kcal<\/a>\n      <\/div>\n    <\/div>\n    <a class=\"kks-m-nav-btn\" href=\"https:\/\/kikistationary.pt\/?page_id=286\" data-kks-id=\"limpeza\">Limpeza da Casa<\/a>\n    <a class=\"kks-m-nav-btn\" href=\"https:\/\/kikistationary.pt\/?page_id=244\" data-kks-id=\"habit\">Habit Tracker<\/a>\n    <button class=\"kks-m-nav-btn\" data-kks-placeholder=\"Estudo\">Estudo<\/button>\n  <\/nav>\n<\/header>\n\n<div class=\"kks-toast\" id=\"kksToast\"><\/div>\n\n<script>\n(function(){\n  var navItem = document.querySelector('.kks-nav-item[data-kks-nav=\"compra\"]');\n  var navBtn = navItem.querySelector('[data-kks-toggle=\"compra\"]');\n  navBtn.addEventListener('click', function(e){\n    e.stopPropagation();\n    var isOpen = navItem.classList.toggle('kks-open');\n    navBtn.setAttribute('aria-expanded', isOpen);\n  });\n  document.addEventListener('click', function(e){\n    if(!navItem.contains(e.target)){\n      navItem.classList.remove('kks-open');\n      navBtn.setAttribute('aria-expanded', 'false');\n    }\n  });\n  document.addEventListener('keydown', function(e){\n    if(e.key === 'Escape'){\n      navItem.classList.remove('kks-open');\n      navBtn.setAttribute('aria-expanded', 'false');\n    }\n  });\n\n  var hamburger = document.getElementById('kksHamburgerBtn');\n  var mobileNav = document.getElementById('kksMobileNav');\n  hamburger.addEventListener('click', function(){\n    var isOpen = hamburger.classList.toggle('kks-open');\n    mobileNav.classList.toggle('kks-open', isOpen);\n    hamburger.setAttribute('aria-expanded', isOpen);\n    hamburger.setAttribute('aria-label', isOpen ? 'Fechar menu' : 'Abrir menu');\n  });\n\n  var mNavItem = document.querySelector('.kks-m-nav-item[data-kks-mnav=\"compra\"]');\n  var mNavBtn = mNavItem.querySelector('[data-kks-mtoggle=\"compra\"]');\n  mNavBtn.addEventListener('click', function(){\n    var isOpen = mNavItem.classList.toggle('kks-open');\n    mNavBtn.setAttribute('aria-expanded', isOpen);\n  });\n\n  \/\/ ---- cache da sec\u00e7\u00e3o ativa (localStorage) ----\n  \/\/ Num site real cada clique recarrega a p\u00e1gina, por isso o bot\u00e3o \"ativo\"\n  \/\/ precisa de ficar guardado em localStorage para sobreviver ao reload.\n  var LS_KEY = 'kks-active-nav';\n\n  function lsGet(){\n    try{ return window.localStorage.getItem(LS_KEY); }\n    catch(e){ return null; } \/\/ ex: preview em iframe sandboxed (artefacto do Claude)\n  }\n  function lsSet(id){\n    try{ window.localStorage.setItem(LS_KEY, id); }\n    catch(e){ \/* localStorage indispon\u00edvel neste contexto \u2014 segue sem cache *\/ }\n  }\n\n  var SUBMENU_IDS = ['casal', '2000kcal', '3000kcal'];\n  var URL_MAP = {\n    'casal': 'page_id=250',\n    '2000kcal': 'page_id=318',\n    '3000kcal': 'page_id=309',\n    'limpeza': 'page_id=286',\n    'habit': 'page_id=244'\n  };\n\n  function applyActive(id){\n    if(!id) return;\n    document.querySelectorAll('[data-kks-id]').forEach(function(el){\n      el.classList.toggle('kks-active', el.dataset.kksId === id);\n    });\n    var isSubmenu = SUBMENU_IDS.indexOf(id) > -1;\n    document.querySelectorAll('[data-kks-toggle=\"compra\"], [data-kks-mtoggle=\"compra\"]').forEach(function(el){\n      el.classList.toggle('kks-parent-active', isSubmenu);\n    });\n  }\n\n  function detectFromUrl(){\n    var href = window.location.href;\n    for(var id in URL_MAP){\n      if(href.indexOf(URL_MAP[id]) > -1) return id;\n    }\n    return null;\n  }\n\n  var activeId = detectFromUrl() || lsGet();\n  applyActive(activeId);\n\n  document.querySelectorAll('[data-kks-id]').forEach(function(el){\n    el.addEventListener('click', function(){\n      lsSet(el.dataset.kksId);\n      applyActive(el.dataset.kksId);\n    });\n  });\n\n  var toastTimer = null;\n  function showToast(msg){\n    var toast = document.getElementById('kksToast');\n    toast.textContent = msg;\n    toast.classList.add('kks-show');\n    clearTimeout(toastTimer);\n    toastTimer = setTimeout(function(){ toast.classList.remove('kks-show'); }, 2200);\n  }\n  document.querySelectorAll('[data-kks-placeholder]').forEach(function(btn){\n    btn.addEventListener('click', function(){\n      showToast(btn.dataset.kksPlaceholder + \" \u2014 p\u00e1gina a caminho \ud83d\udea7\");\n      hamburger.classList.remove('kks-open');\n      mobileNav.classList.remove('kks-open');\n      hamburger.setAttribute('aria-expanded', 'false');\n    });\n  });\n\n  document.querySelectorAll('.kks-mobile-nav a').forEach(function(a){\n    a.addEventListener('click', function(){\n      hamburger.classList.remove('kks-open');\n      mobileNav.classList.remove('kks-open');\n      hamburger.setAttribute('aria-expanded', 'false');\n    });\n  });\n})();\n<\/script>\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-1754b6a e-flex e-con-boxed e-con e-parent\" data-id=\"1754b6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d6ede9f elementor-widget elementor-widget-html\" data-id=\"d6ede9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>365 Dias de Data Analytics<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        :root {\n            --color-primary: #38bdf8;\n            --color-success: #4ade80;\n            --color-warning: #fb923c;\n            --color-danger: #f472b6;\n            --color-purple: #a78bfa;\n            --color-emerald: #34d399;\n            --color-amber: #fbbf24;\n            --color-rose: #f43f5e;\n            --bg-dark: #0a0a0f;\n            --bg-darker: #0f0f1a;\n            --bg-card: #0f172a;\n            --border-color: #1e293b;\n            --text-primary: #e2e8f0;\n            --text-secondary: #64748b;\n            --text-tertiary: #475569;\n        }\n\n        html, body {\n            height: 100%;\n            width: 100%;\n            font-family: 'Fira Code', 'JetBrains Mono', monospace;\n            background: var(--bg-dark);\n            color: var(--text-primary);\n            overflow: hidden;\n        }\n\n        .app {\n            display: flex;\n            flex-direction: column;\n            height: 100vh;\n            background: var(--bg-dark);\n        }\n\n        \/* HEADER *\/\n        .header {\n            background: linear-gradient(135deg, var(--bg-darker) 0%, #1a0f2e 50%, #0f1a1a 100%);\n            border-bottom: 1px solid var(--border-color);\n            padding: 20px 16px;\n            flex-shrink: 0;\n        }\n\n        .header-content {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            flex-wrap: wrap;\n            gap: 16px;\n            margin-bottom: 12px;\n        }\n\n        .header-title {\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n\n        .header-title .label {\n            font-size: 10px;\n            letter-spacing: 0.2em;\n            color: var(--text-secondary);\n            text-transform: uppercase;\n        }\n\n        .header-title h1 {\n            font-size: 18px;\n            font-weight: 700;\n            letter-spacing: -0.02em;\n        }\n\n        .header-title h1 span {\n            color: var(--color-primary);\n        }\n\n        .stats {\n            display: flex;\n            gap: 20px;\n            font-size: 12px;\n        }\n\n        .stat {\n            text-align: center;\n        }\n\n        .stat-value {\n            font-size: 18px;\n            font-weight: 700;\n            margin-bottom: 2px;\n        }\n\n        .stat-label {\n            font-size: 9px;\n            color: var(--text-secondary);\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n        }\n\n        .progress-bar {\n            height: 5px;\n            background: var(--border-color);\n            border-radius: 99px;\n            overflow: hidden;\n            margin-bottom: 12px;\n        }\n\n        .progress-fill {\n            height: 100%;\n            background: linear-gradient(90deg, var(--color-primary), var(--color-purple), var(--color-danger));\n            border-radius: 99px;\n            transition: width 0.4s ease;\n        }\n\n        .tabs {\n            display: flex;\n            gap: 4px;\n        }\n\n        .tab {\n            padding: 6px 12px;\n            border-radius: 6px;\n            border: none;\n            background: transparent;\n            color: var(--text-secondary);\n            font-family: inherit;\n            font-size: 11px;\n            cursor: pointer;\n            letter-spacing: 0.05em;\n            transition: all 0.2s;\n        }\n\n        .tab.active {\n            background: var(--color-primary);\n            color: var(--bg-dark);\n            font-weight: 700;\n        }\n\n        \/* MAIN *\/\n        .main {\n            flex: 1;\n            overflow-y: auto;\n            padding: 16px;\n            display: flex;\n            flex-direction: column;\n        }\n\n        \/* GRID VIEW *\/\n        .grid-container {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));\n            gap: 4px;\n            margin-bottom: 16px;\n            max-width: 600px;\n        }\n\n        .day-box {\n            aspect-ratio: 1;\n            border-radius: 5px;\n            border: 1px solid var(--border-color);\n            background: #111827;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 8px;\n            font-weight: 700;\n            color: var(--text-tertiary);\n            position: relative;\n            transition: transform 0.1s, opacity 0.2s;\n            user-select: none;\n        }\n\n        .day-box:active {\n            transform: scale(0.95);\n        }\n\n        .day-box.completed {\n            border: none;\n            color: #0a0a0f;\n            font-weight: 700;\n        }\n\n        .day-box.has-note::after {\n            content: '';\n            position: absolute;\n            top: 2px;\n            right: 2px;\n            width: 3px;\n            height: 3px;\n            border-radius: 50%;\n            background: var(--color-danger);\n        }\n\n        .phases-legend {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 12px;\n            font-size: 10px;\n            color: var(--text-secondary);\n            margin-top: 12px;\n            padding-top: 12px;\n            border-top: 1px solid var(--border-color);\n        }\n\n        .phase-tag {\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        .phase-box {\n            width: 10px;\n            height: 10px;\n            border-radius: 2px;\n        }\n\n        \/* MODAL *\/\n        .modal {\n            position: fixed;\n            inset: 0;\n            background: rgba(0,0,0,0.8);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 100;\n            padding: 16px;\n            animation: fadeIn 0.2s;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        .modal.hidden {\n            display: none;\n        }\n\n        .modal-content {\n            background: var(--bg-card);\n            border: 1px solid var(--border-color);\n            border-radius: 16px;\n            padding: 20px;\n            width: 100%;\n            max-width: 380px;\n            max-height: 85vh;\n            overflow-y: auto;\n            animation: slideUp 0.3s;\n        }\n\n        @keyframes slideUp {\n            from { transform: translateY(20px); opacity: 0; }\n            to { transform: translateY(0); opacity: 1; }\n        }\n\n        .modal-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-start;\n            margin-bottom: 16px;\n        }\n\n        .modal-header-info {\n            flex: 1;\n        }\n\n        .modal-day-label {\n            font-size: 10px;\n            color: var(--text-secondary);\n            letter-spacing: 0.15em;\n            text-transform: uppercase;\n            margin-bottom: 2px;\n        }\n\n        .modal-phase-title {\n            font-size: 16px;\n            font-weight: 700;\n            margin-top: 2px;\n        }\n\n        .modal-phase-info {\n            font-size: 10px;\n            color: var(--text-tertiary);\n            margin-top: 2px;\n        }\n\n        .modal-toggle {\n            width: 40px;\n            height: 40px;\n            border-radius: 10px;\n            border: none;\n            background: var(--border-color);\n            color: var(--text-secondary);\n            font-size: 16px;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.2s;\n        }\n\n        .modal-toggle.active {\n            background: var(--color-primary);\n            color: var(--bg-dark);\n        }\n\n        .modal-section {\n            margin-bottom: 16px;\n        }\n\n        .modal-label {\n            font-size: 10px;\n            color: var(--text-tertiary);\n            margin-bottom: 6px;\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n        }\n\n        textarea {\n            width: 100%;\n            min-height: 80px;\n            background: var(--border-color);\n            border: 1px solid #334155;\n            border-radius: 8px;\n            color: var(--text-primary);\n            font-family: inherit;\n            font-size: 11px;\n            padding: 10px;\n            resize: vertical;\n            outline: none;\n        }\n\n        textarea:focus {\n            border-color: var(--color-primary);\n        }\n\n        .modal-actions {\n            display: flex;\n            gap: 8px;\n        }\n\n        .btn {\n            flex: 1;\n            padding: 10px 0;\n            border-radius: 8px;\n            border: none;\n            cursor: pointer;\n            font-family: inherit;\n            font-weight: 700;\n            font-size: 12px;\n            transition: all 0.2s;\n        }\n\n        .btn-primary {\n            background: var(--color-primary);\n            color: var(--bg-dark);\n        }\n\n        .btn-primary:active {\n            opacity: 0.9;\n        }\n\n        .btn-secondary {\n            background: transparent;\n            border: 1px solid var(--border-color);\n            color: var(--text-secondary);\n        }\n\n        .btn-secondary:active {\n            background: var(--border-color);\n        }\n\n        \/* PHASES VIEW *\/\n        .phases-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n            gap: 12px;\n        }\n\n        .phase-card {\n            background: var(--bg-card);\n            border: 1px solid var(--border-color);\n            border-radius: 12px;\n            padding: 14px;\n            position: relative;\n        }\n\n        .phase-card-header {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            margin-bottom: 8px;\n        }\n\n        .phase-emoji {\n            font-size: 16px;\n        }\n\n        .phase-info {\n            flex: 1;\n        }\n\n        .phase-name {\n            font-size: 11px;\n            font-weight: 700;\n        }\n\n        .phase-days {\n            font-size: 8px;\n            color: var(--text-secondary);\n        }\n\n        .phase-percent {\n            font-size: 14px;\n            font-weight: 800;\n        }\n\n        .phase-progress {\n            height: 3px;\n            background: var(--border-color);\n            border-radius: 99px;\n            overflow: hidden;\n            margin-bottom: 8px;\n        }\n\n        .phase-progress-fill {\n            height: 100%;\n            border-radius: 99px;\n            transition: width 0.5s;\n        }\n\n        .phase-stats {\n            font-size: 8px;\n            color: var(--text-secondary);\n        }\n\n        \/* STATS VIEW *\/\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n            gap: 12px;\n            margin-bottom: 16px;\n        }\n\n        .stat-card {\n            background: var(--bg-card);\n            border: 1px solid var(--border-color);\n            border-radius: 12px;\n            padding: 16px;\n            text-align: center;\n        }\n\n        .stat-card-emoji {\n            font-size: 24px;\n            margin-bottom: 6px;\n        }\n\n        .stat-card-value {\n            font-size: 20px;\n            font-weight: 800;\n            margin-bottom: 4px;\n        }\n\n        .stat-card-label {\n            font-size: 9px;\n            color: var(--text-secondary);\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n        }\n\n        \/* UTILITIES *\/\n        .hidden {\n            display: none !important;\n        }\n\n        @media (max-width: 600px) {\n            .stats {\n                gap: 12px;\n                font-size: 10px;\n            }\n\n            .stat-value {\n                font-size: 16px;\n            }\n\n            .header-title h1 {\n                font-size: 16px;\n            }\n\n            .grid-container {\n                grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));\n            }\n\n            .phases-grid {\n                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"app\">\n        <!-- HEADER -->\n        <div class=\"header\">\n            <div class=\"header-content\">\n                <div class=\"header-title\">\n                    <div class=\"label\">Desafio<\/div>\n                    <h1>365 Dias de <span>Data Analytics<\/span><\/h1>\n                <\/div>\n                <div class=\"stats\">\n                    <div class=\"stat\">\n                        <div class=\"stat-value\" id=\"stat-days\" style=\"color: var(--color-success);\">0<\/div>\n                        <div class=\"stat-label\">Dias<\/div>\n                    <\/div>\n                    <div class=\"stat\">\n                        <div class=\"stat-value\" id=\"stat-streak\" style=\"color: var(--color-warning);\">0\ud83d\udd25<\/div>\n                        <div class=\"stat-label\">Sequ\u00eancia<\/div>\n                    <\/div>\n                    <div class=\"stat\">\n                        <div class=\"stat-value\" id=\"stat-percent\" style=\"color: var(--color-purple);\">0%<\/div>\n                        <div class=\"stat-label\">Progresso<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"progress-bar\">\n                <div class=\"progress-fill\" id=\"progress-fill\"><\/div>\n            <\/div>\n\n            <div class=\"tabs\">\n                <button class=\"tab active\" onclick=\"switchTab('grid')\">Grade<\/button>\n                <button class=\"tab\" onclick=\"switchTab('phases')\">Fases<\/button>\n                <button class=\"tab\" onclick=\"switchTab('stats')\">Estat\u00edsticas<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- MAIN -->\n        <div class=\"main\">\n            <!-- GRID VIEW -->\n            <div id=\"grid-view\">\n                <div class=\"grid-container\" id=\"grid\"><\/div>\n                <div class=\"phases-legend\" id=\"legend\"><\/div>\n            <\/div>\n\n            <!-- PHASES VIEW -->\n            <div id=\"phases-view\" class=\"hidden\">\n                <div class=\"phases-grid\" id=\"phases-container\"><\/div>\n            <\/div>\n\n            <!-- STATS VIEW -->\n            <div id=\"stats-view\" class=\"hidden\">\n                <div class=\"stats-grid\" id=\"stats-container\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- MODAL -->\n    <div class=\"modal hidden\" id=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <div class=\"modal-header-info\">\n                    <div class=\"modal-day-label\">Dia <span id=\"modal-day\">1<\/span><\/div>\n                    <div class=\"modal-phase-title\"><span id=\"modal-emoji\">\ud83c\udf31<\/span> <span id=\"modal-phase\">Fundamentos<\/span><\/div>\n                    <div class=\"modal-phase-info\">Fase <span id=\"modal-phase-num\">1<\/span> \u2022 Dias <span id=\"modal-phase-days\">1\u201330<\/span><\/div>\n                <\/div>\n                <button class=\"modal-toggle\" id=\"modal-toggle\" onclick=\"toggleDay()\"><\/button>\n            <\/div>\n\n            <div class=\"modal-section\">\n                <div class=\"modal-label\">Anota\u00e7\u00f5es do dia<\/div>\n                <textarea id=\"modal-notes\" placeholder=\"O que voc\u00ea aprendeu? Links \u00fateis, insights...\"><\/textarea>\n            <\/div>\n\n            <div class=\"modal-actions\">\n                <button class=\"btn btn-primary\" onclick=\"saveNote()\">Salvar nota<\/button>\n                <button class=\"btn btn-secondary\" onclick=\"closeModal()\">Fechar<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const PHASES = [\n            { id: 1, name: 'Fundamentos', emoji: '\ud83c\udf31', start: 1, end: 30, color: '#4ade80' },\n            { id: 2, name: 'SQL & Dados', emoji: '\ud83d\uddc4\ufe0f', start: 31, end: 60, color: '#60a5fa' },\n            { id: 3, name: 'Visualiza\u00e7\u00e3o', emoji: '\ud83d\udcca', start: 61, end: 90, color: '#f472b6' },\n            { id: 4, name: 'Estat\u00edstica', emoji: '\ud83d\udcd0', start: 91, end: 120, color: '#a78bfa' },\n            { id: 5, name: 'Machine Learning', emoji: '\ud83e\udd16', start: 121, end: 180, color: '#fb923c' },\n            { id: 6, name: 'Big Data & Cloud', emoji: '\u2601\ufe0f', start: 181, end: 240, color: '#34d399' },\n            { id: 7, name: 'Analytics Avan\u00e7ado', emoji: '\ud83d\udd2c', start: 241, end: 300, color: '#fbbf24' },\n            { id: 8, name: 'Portf\u00f3lio & Carreira', emoji: '\ud83d\ude80', start: 301, end: 365, color: '#f43f5e' },\n        ];\n\n        let db;\n        let completed = {};\n        let notes = {};\n        let currentDay = null;\n\n        \/\/ IndexedDB Setup\n        function initDB() {\n            const request = indexedDB.open('DataChallenge365', 1);\n\n            request.onerror = () => console.error('DB error');\n            request.onsuccess = (e) => {\n                db = e.target.result;\n                loadData();\n            };\n\n            request.onupgradeneeded = (e) => {\n                const db = e.target.result;\n                if (!db.objectStoreNames.contains('completed')) {\n                    db.createObjectStore('completed');\n                }\n                if (!db.objectStoreNames.contains('notes')) {\n                    db.createObjectStore('notes');\n                }\n            };\n        }\n\n        function loadData() {\n            const tx1 = db.transaction('completed', 'readonly');\n            const store1 = tx1.objectStore('completed');\n            const req1 = store1.getAll();\n\n            req1.onsuccess = () => {\n                completed = {};\n                req1.result.forEach(key => {\n                    completed[key] = true;\n                });\n\n                const tx2 = db.transaction('notes', 'readonly');\n                const store2 = tx2.objectStore('notes');\n                const req2 = store2.getAll();\n\n                req2.onsuccess = () => {\n                    notes = {};\n                    req2.result.forEach(key => {\n                        const tx3 = db.transaction('notes', 'readonly');\n                        const store3 = tx3.objectStore('notes');\n                        const req3 = store3.get(key);\n                        req3.onsuccess = () => {\n                            notes[key] = req3.result;\n                        };\n                    });\n\n                    render();\n                };\n            };\n        }\n\n        function saveCompleted(day, value) {\n            const tx = db.transaction('completed', 'readwrite');\n            const store = tx.objectStore('completed');\n            if (value) {\n                store.put(day, day);\n            } else {\n                store.delete(day);\n            }\n            completed[day] = value;\n            render();\n        }\n\n        function saveNoteDB(day, text) {\n            const tx = db.transaction('notes', 'readwrite');\n            const store = tx.objectStore('notes');\n            store.put(text, day);\n            notes[day] = text;\n        }\n\n        function getDayPhase(day) {\n            return PHASES.find(p => day >= p.start && day <= p.end);\n        }\n\n        function getStats() {\n            const totalDone = Object.keys(completed).length;\n            let streak = 0;\n            for (let d = totalDone; d >= 1; d--) {\n                if (completed[d]) streak++;\n                else break;\n            }\n            return {\n                totalDone,\n                streak,\n                percent: Math.round((totalDone \/ 365) * 100)\n            };\n        }\n\n        function switchTab(tab) {\n            document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));\n            event.target.classList.add('active');\n\n            document.querySelectorAll('#grid-view, #phases-view, #stats-view').forEach(el => el.classList.add('hidden'));\n            document.getElementById(tab + '-view').classList.remove('hidden');\n        }\n\n        function openDay(day) {\n            currentDay = day;\n            const phase = getDayPhase(day);\n\n            document.getElementById('modal-day').textContent = day;\n            document.getElementById('modal-emoji').textContent = phase.emoji;\n            document.getElementById('modal-phase').textContent = phase.name;\n            document.getElementById('modal-phase-num').textContent = phase.id;\n            document.getElementById('modal-phase-days').textContent = `${phase.start}\u2013${phase.end}`;\n\n            document.getElementById('modal-notes').value = notes[day] || '';\n\n            const toggle = document.getElementById('modal-toggle');\n            toggle.textContent = completed[day] ? '\u2713' : '\u25cb';\n            toggle.classList.toggle('active', !!completed[day]);\n            toggle.style.background = completed[day] ? phase.color : 'var(--border-color)';\n            toggle.style.color = completed[day] ? 'var(--bg-dark)' : 'var(--text-secondary)';\n\n            document.getElementById('modal').classList.remove('hidden');\n        }\n\n        function closeModal() {\n            document.getElementById('modal').classList.add('hidden');\n        }\n\n        function toggleDay() {\n            saveCompleted(currentDay, !completed[currentDay]);\n            openDay(currentDay);\n        }\n\n        function saveNote() {\n            const text = document.getElementById('modal-notes').value;\n            saveNoteDB(currentDay, text);\n            closeModal();\n        }\n\n        function render() {\n            const stats = getStats();\n\n            \/\/ Update stats\n            document.getElementById('stat-days').textContent = stats.totalDone;\n            document.getElementById('stat-streak').textContent = stats.streak + '\ud83d\udd25';\n            document.getElementById('stat-percent').textContent = stats.percent + '%';\n            document.getElementById('progress-fill').style.width = stats.percent + '%';\n\n            \/\/ Grid\n            const grid = document.getElementById('grid');\n            grid.innerHTML = '';\n            for (let d = 1; d <= 365; d++) {\n                const phase = getDayPhase(d);\n                const box = document.createElement('button');\n                box.className = 'day-box';\n                if (completed[d]) {\n                    box.classList.add('completed');\n                    box.style.background = phase.color;\n                }\n                if (notes[d]) {\n                    box.classList.add('has-note');\n                }\n                box.textContent = d;\n                box.title = `Dia ${d} \u2014 ${phase.name}`;\n                box.onclick = () => openDay(d);\n                box.oncontextmenu = (e) => {\n                    e.preventDefault();\n                    saveCompleted(d, !completed[d]);\n                };\n                grid.appendChild(box);\n            }\n\n            \/\/ Legend\n            const legend = document.getElementById('legend');\n            legend.innerHTML = PHASES.map(p => `\n                <div class=\"phase-tag\">\n                    <div class=\"phase-box\" style=\"background: ${p.color};\"><\/div>\n                    ${p.emoji} ${p.name}\n                <\/div>\n            `).join('');\n\n            \/\/ Phases\n            const phasesContainer = document.getElementById('phases-container');\n            phasesContainer.innerHTML = PHASES.map(phase => {\n                const phaseDone = Array.from({ length: phase.end - phase.start + 1 }, (_, i) => i + phase.start)\n                    .filter(d => completed[d]).length;\n                const total = phase.end - phase.start + 1;\n                const pct = Math.round((phaseDone \/ total) * 100);\n\n                return `\n                    <div class=\"phase-card\" style=\"border-color: ${phase.color}22;\">\n                        <div class=\"phase-card-header\">\n                            <div class=\"phase-emoji\">${phase.emoji}<\/div>\n                            <div class=\"phase-info\">\n                                <div class=\"phase-name\" style=\"color: ${phase.color};\">${phase.name}<\/div>\n                                <div class=\"phase-days\">Dias ${phase.start}\u2013${phase.end}<\/div>\n                            <\/div>\n                            <div class=\"phase-percent\" style=\"color: ${phase.color};\">${pct}%<\/div>\n                        <\/div>\n                        <div class=\"phase-progress\">\n                            <div class=\"phase-progress-fill\" style=\"width: ${pct}%; background: ${phase.color};\"><\/div>\n                        <\/div>\n                        <div class=\"phase-stats\">${phaseDone}\/${total} dias<\/div>\n                    <\/div>\n                `;\n            }).join('');\n\n            \/\/ Stats\n            const statsContainer = document.getElementById('stats-container');\n            statsContainer.innerHTML = `\n                <div class=\"stat-card\">\n                    <div class=\"stat-card-emoji\">\ud83d\udcc5<\/div>\n                    <div class=\"stat-card-value\" style=\"color: var(--color-primary);\">${stats.totalDone}<\/div>\n                    <div class=\"stat-card-label\">Completados<\/div>\n                <\/div>\n                <div class=\"stat-card\">\n                    <div class=\"stat-card-emoji\">\ud83d\udd25<\/div>\n                    <div class=\"stat-card-value\" style=\"color: var(--color-warning);\">${stats.streak}<\/div>\n                    <div class=\"stat-card-label\">Sequ\u00eancia<\/div>\n                <\/div>\n                <div class=\"stat-card\">\n                    <div class=\"stat-card-emoji\">\ud83d\udcc8<\/div>\n                    <div class=\"stat-card-value\" style=\"color: var(--color-purple);\">${stats.percent}%<\/div>\n                    <div class=\"stat-card-label\">Progresso<\/div>\n                <\/div>\n                <div class=\"stat-card\">\n                    <div class=\"stat-card-emoji\">\ud83d\udcdd<\/div>\n                    <div class=\"stat-card-value\" style=\"color: var(--color-danger);\">${Object.keys(notes).filter(k => notes[k]).length}<\/div>\n                    <div class=\"stat-card-label\">Notas<\/div>\n                <\/div>\n            `;\n        }\n\n        \/\/ Close modal on background click\n        document.getElementById('modal').onclick = (e) => {\n            if (e.target.id === 'modal') closeModal();\n        };\n\n        \/\/ Init\n        initDB();\n    <\/script>\n<\/body>\n<\/html>\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>KIKISTAT Compra do M\u00eas \u25be Casal Individual 2000kcal Individual 3000kcal Limpeza da Casa Habit Tracker Compra do M\u00eas \u25be Casal Individual 2000kcal Individual 3000kcal Limpeza da Casa Habit Tracker Estudo 365 Dias de Data Analytics Desafio 365 Dias de Data Analytics 0 Dias 0\ud83d\udd25 Sequ\u00eancia 0% Progresso Grade Fases Estat\u00edsticas Dia 1 \ud83c\udf31 Fundamentos Fase [&hellip;]<\/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-244","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kikistationary.pt\/index.php?rest_route=\/wp\/v2\/pages\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kikistationary.pt\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kikistationary.pt\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kikistationary.pt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kikistationary.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=244"}],"version-history":[{"count":14,"href":"https:\/\/kikistationary.pt\/index.php?rest_route=\/wp\/v2\/pages\/244\/revisions"}],"predecessor-version":[{"id":384,"href":"https:\/\/kikistationary.pt\/index.php?rest_route=\/wp\/v2\/pages\/244\/revisions\/384"}],"wp:attachment":[{"href":"https:\/\/kikistationary.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}