{"id":516,"date":"2026-02-02T16:27:30","date_gmt":"2026-02-02T16:27:30","guid":{"rendered":"https:\/\/beta.piyochaigold.com\/?page_id=516"},"modified":"2026-02-21T11:08:15","modified_gmt":"2026-02-21T11:08:15","slug":"to-do-planner-page","status":"publish","type":"page","link":"https:\/\/beta.piyochaigold.com\/index.php\/to-do-planner-page\/","title":{"rendered":"To do planner page"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_0 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_heading_0 et_pb_heading et_pb_module et_flex_module\"><div class=\"et_pb_heading_container\"><h1 class=\"et_pb_module_header\">Instant To-Do Planner<\/h1><\/div><\/div>\n\n<div class=\"et_pb_divider_0 et_pb_divider et_pb_space et_pb_divider_position_top et_pb_module\"><div class=\"et_pb_divider_internal\"><\/div><\/div>\n\n<div class=\"et_pb_row_1 et_pb_row et_pb_row_nested et_flex_row\">\n<div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_heading_1 et_pb_heading et_pb_module et_flex_module\"><div class=\"et_pb_heading_container\"><h1 class=\"et_pb_module_header\">How it Works<\/h1><\/div><\/div>\n\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>1. Choose a template.<br \/>\n2. Add task headline & notes.<br \/>\n3. Download styles PDF or blank version.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><!-- ================= CLEAN RESPONSIVE PLANNER MODULE ================= -->\n\n<div class=\"planner-wrapper\">\n\n  <!-- LEFT SIDE : TEMPLATES -->\n  <div class=\"template-panel\">\n    <h3>Select Template<\/h3>\n\n    <div class=\"template-grid\">\n\n      <div class=\"template-option active\" onclick=\"selectTemplate(0)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-5.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(1)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-20.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(2)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-19.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(3)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-16.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(4)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-15.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(5)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-14.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(6)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-13.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(7)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-12.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(8)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-8.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(9)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-7.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(10)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-6.jpg\">\n      <\/div>\n\n      <div class=\"template-option\" onclick=\"selectTemplate(11)\">\n        <img decoding=\"async\" src=\"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/Blank-template.jpg\">\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- GOLD DIVIDER -->\n  <div class=\"gold-divider\"><\/div>\n\n  <!-- RIGHT SIDE : TASK MANAGER -->\n  <div class=\"planner-panel\">\n\n   \n\n    <div class=\"planner-card\">\n      <input type=\"text\" id=\"taskInput\" placeholder=\"Task headline...\" \/>\n      <textarea id=\"taskNote\" placeholder=\"Notes (optional)\" rows=\"3\"><\/textarea>\n\n      <div class=\"button-row\">\n        <button onclick=\"addTask()\">Add Task<\/button>\n        <button onclick=\"clearAll()\">Clear All<\/button>\n      <\/div>\n\n      <div id=\"taskList\"><\/div>\n    <\/div>\n\n    <div class=\"download-area\">\n      <button class=\"download-btn\" onclick=\"downloadPDF()\">Download PDF<\/button>\n    <\/div>\n\n  <\/div>\n<\/div>\n<style>\n\/* ===== GENERAL ===== *\/\n\nbody{\n  overflow-x:hidden;\n}\n\n.planner-wrapper{\n  display:grid;\n  grid-template-columns:1.6fr 4px 1fr;\n  gap:50px;\n  padding:60px 3%;\n  background:#f3eee7;\n  box-sizing:border-box;\n  width:100%;\n}\n\n\/* Let Divi row be full width *\/\n.et_pb_row{\n  max-width:1400px !important;\n  width:95% !important;\n  margin:0 auto !important;\n}\n\n.gold-divider{\n  background:#c8a165;\n  width:4px;\n}\n\n\/* ===== TEMPLATE SIDE ===== *\/\n\n.template-panel h3{\n  font-family:serif;\n  margin-bottom:25px;\n  color:#6b4c2a;\n}\n\n.template-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:18px;\n}\n\n.template-option{\n  border:2px solid transparent;\n  background:#fff;\n  cursor:pointer;\n  transition:.3s;\n}\n\n.template-option img{\n  width:100%;\n  display:block;\n}\n\n.template-option.active{\n  border:2px solid #c8a165;\n  box-shadow:0 4px 10px rgba(0,0,0,0.08);\n}\n\n.template-option:hover{\n  transform:scale(1.03);\n}\n\n\/* ===== TASK SIDE ===== *\/\n\n.planner-panel{\n  padding-left:20px;\n}\n\n.planner-card{\n  background:#fff;\n  padding:28px;\n  border-radius:12px;\n  box-shadow:0 4px 15px rgba(0,0,0,0.05);\n}\n\n.planner-card input,\n.planner-card textarea{\n  width:100%;\n  padding:14px;\n  margin-bottom:16px;\n  border:1px solid #ddd;\n  font-size:14px;\n  box-sizing:border-box;\n}\n\n.button-row{\n  display:flex;\n  gap:12px;\n  margin-bottom:20px;\n}\n\n.button-row button{\n  flex:1;\n  padding:10px;\n  background:#fff;\n  border:1px solid #c8a165;\n  color:#6b4c2a;\n  cursor:pointer;\n  transition:.3s;\n}\n\n.button-row button:hover{\n  background:#c8a165;\n  color:#fff;\n}\n\n.download-area{\n  text-align:center;\n  margin-top:30px;\n}\n\n.download-btn{\n  padding:14px 30px;\n  background:#c8a165;\n  color:#fff;\n  border:none;\n  cursor:pointer;\n}\n\n.download-btn:hover{\n  background:#b38c55;\n}\n\n\/* ===== MOBILE & TABLET ===== *\/\n\n@media(max-width:1100px){\n\n  .planner-wrapper{\n    grid-template-columns:1fr;\n  }\n\n  .gold-divider{\n    display:none;\n  }\n\n  .planner-panel{\n    order:-1;\n    padding-left:0;\n    margin-bottom:30px;\n  }\n\n  .template-grid{\n    grid-template-columns:repeat(3,1fr);\n  }\n}\n\n@media(max-width:600px){\n\n  .template-grid{\n    grid-template-columns:repeat(3,1fr);\n    gap:10px;\n  }\n\n  .planner-card{\n    padding:18px;\n  }\n\n  .button-row{\n    flex-direction:column;\n  }\n}\n<\/style>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n<script>\nlet tasks = JSON.parse(localStorage.getItem(\"tasks\")) || [];\nlet selectedTemplate = 0;\n\nconst templateImages = [\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-5.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-20.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-19.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-16.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-15.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-14.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-13.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-12.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-8.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-7.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/download-6.jpg\",\n  \"https:\/\/beta.piyochaigold.com\/wp-content\/uploads\/2026\/02\/Blank-template.jpg\"\n];\n\nfunction saveTasks(){\n  localStorage.setItem(\"tasks\", JSON.stringify(tasks));\n}\n\nfunction renderTasks(){\n  const list = document.getElementById(\"taskList\");\n  list.innerHTML = \"\";\n\n  tasks.forEach(task=>{\n    const div = document.createElement(\"div\");\n    div.innerHTML = `\n      <strong>\u2022 ${task.title}<\/strong>\n      ${task.note ? `<div style=\"margin-left:15px;color:#666;\">- ${task.note}<\/div>` : \"\"}\n    `;\n    list.appendChild(div);\n  });\n}\n\nfunction addTask(){\n  const title = document.getElementById(\"taskInput\").value.trim();\n  const note = document.getElementById(\"taskNote\").value.trim();\n  if(!title) return;\n\n  tasks.push({title, note});\n  saveTasks();\n  renderTasks();\n\n  document.getElementById(\"taskInput\").value = \"\";\n  document.getElementById(\"taskNote\").value = \"\";\n}\n\nfunction clearAll(){\n  tasks = [];\n  localStorage.removeItem(\"tasks\");\n  renderTasks();\n}\n\nfunction selectTemplate(index){\n  selectedTemplate = index;\n  document.querySelectorAll(\".template-option\").forEach(el=>el.classList.remove(\"active\"));\n  document.querySelectorAll(\".template-option\")[index].classList.add(\"active\");\n}\n\nfunction downloadPDF(){\n  const { jsPDF } = window.jspdf;\n  const pdf = new jsPDF(\"p\",\"mm\",\"a4\");\n\n  const bg = new Image();\n  bg.crossOrigin = \"anonymous\";\n  bg.src = templateImages[selectedTemplate];\n\n  bg.onload = function(){\n    pdf.addImage(bg,\"JPG\",0,0,210,297);\n\n    let y = 60;\n\n    tasks.forEach(task=>{\n      if(y > 270) return;\n\n      pdf.circle(22,y-2,1.5,\"F\");\n      pdf.text(task.title,28,y);\n      y += 8;\n\n      if(task.note){\n        pdf.setFontSize(12);\n        pdf.text(\"- \"+task.note,32,y);\n        pdf.setFontSize(16);\n        y += 10;\n      }\n\n      y += 6;\n    });\n\n    pdf.save(\"planner.pdf\");\n  };\n}\n\nrenderTasks();\n<\/script>\n\n  \n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-516","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/pages\/516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/comments?post=516"}],"version-history":[{"count":60,"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/pages\/516\/revisions"}],"predecessor-version":[{"id":1614,"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/pages\/516\/revisions\/1614"}],"wp:attachment":[{"href":"https:\/\/beta.piyochaigold.com\/index.php\/wp-json\/wp\/v2\/media?parent=516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}