dcovington
/
AI_AGENT_OS
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
3 Revize
1 Větev
187KB
Strom: 2cd39dbf6a
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „2cd39dbf6a“
${ noResults }
AI_AGENT_OS/.ai/time_managment/time_planner.html

867 řádky
25KB
Surový Blame Historie 

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.   <meta charset="utf-8">

  5.   <meta name="viewport" content="width=device-width, initial-scale=1">

  6.   <title>Time Management Planner</title>

  7.   <style>

  8.     :root {

  9.       --ink: #202124;

  10.       --muted: #5f6368;

  11.       --line: #d8dde3;

  12.       --page: #f6f7f9;

  13.       --panel: #ffffff;

  14.       --teal: #176b5d;

  15.       --blue: #2f5f98;

  16.       --coral: #b75542;

  17.       --gold: #8a6500;

  18.       --green: #4d7653;

  19.       --violet: #7b5aa6;

  20.       --shadow: 0 10px 28px rgba(32, 33, 36, 0.08);

  21.       --radius: 8px;

  22.       --space: clamp(14px, 2vw, 22px);

  23.       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  24.       color: var(--ink);

  25.       background: var(--page);

  26.     }

  27. 

  28.     * {

  29.       box-sizing: border-box;

  30.     }

  31. 

  32.     body {

  33.       margin: 0;

  34.       min-width: 320px;

  35.       background:

  36.         linear-gradient(180deg, rgba(237, 244, 242, 0.9), rgba(246, 247, 249, 0.2) 280px),

  37.         var(--page);

  38.     }

  39. 

  40.     button,

  41.     input,

  42.     textarea {

  43.       font: inherit;

  44.     }

  45. 

  46.     .shell {

  47.       max-width: 1180px;

  48.       margin: 0 auto;

  49.       padding: 24px var(--space) 48px;

  50.     }

  51. 

  52.     .topbar {

  53.       display: flex;

  54.       align-items: flex-start;

  55.       justify-content: space-between;

  56.       gap: 16px;

  57.       margin-bottom: 20px;

  58.     }

  59. 

  60.     h1 {

  61.       margin: 0 0 6px;

  62.       font-size: 2rem;

  63.       line-height: 1.08;

  64.       letter-spacing: 0;

  65.     }

  66. 

  67.     .subtitle {

  68.       margin: 0;

  69.       max-width: 780px;

  70.       color: var(--muted);

  71.       line-height: 1.45;

  72.     }

  73. 

  74.     .toolbar {

  75.       display: flex;

  76.       gap: 8px;

  77.       flex-wrap: wrap;

  78.       justify-content: flex-end;

  79.       min-width: 220px;

  80.     }

  81. 

  82.     .button {

  83.       min-height: 38px;

  84.       border: 1px solid var(--line);

  85.       border-radius: 6px;

  86.       padding: 8px 12px;

  87.       background: var(--panel);

  88.       color: var(--ink);

  89.       cursor: pointer;

  90.       box-shadow: 0 1px 0 rgba(32, 33, 36, 0.04);

  91.     }

  92. 

  93.     .button.primary {

  94.       border-color: var(--teal);

  95.       background: var(--teal);

  96.       color: #fff;

  97.     }

  98. 

  99.     .button:hover {

  100.       filter: brightness(0.98);

  101.     }

  102. 

  103.     .summary {

  104.       display: grid;

  105.       grid-template-columns: repeat(4, minmax(0, 1fr));

  106.       gap: 12px;

  107.       margin: 18px 0 22px;

  108.     }

  109. 

  110.     .metric {

  111.       background: var(--panel);

  112.       border: 1px solid var(--line);

  113.       border-radius: var(--radius);

  114.       padding: 14px;

  115.       box-shadow: var(--shadow);

  116.       min-height: 108px;

  117.     }

  118. 

  119.     .metric strong {

  120.       display: block;

  121.       font-size: 1.55rem;

  122.       line-height: 1.05;

  123.       margin-bottom: 6px;

  124.     }

  125. 

  126.     .metric span {

  127.       color: var(--muted);

  128.       line-height: 1.35;

  129.       display: block;

  130.     }

  131. 

  132.     .layout {

  133.       display: grid;

  134.       grid-template-columns: minmax(0, 1fr) 330px;

  135.       gap: 18px;

  136.       align-items: start;

  137.     }

  138. 

  139.     .section {

  140.       margin-bottom: 18px;

  141.     }

  142. 

  143.     .section-head {

  144.       display: flex;

  145.       align-items: center;

  146.       justify-content: space-between;

  147.       gap: 12px;

  148.       margin-bottom: 10px;

  149.     }

  150. 

  151.     h2 {

  152.       margin: 0;

  153.       font-size: 1.08rem;

  154.       letter-spacing: 0;

  155.     }

  156. 

  157.     .hint {

  158.       color: var(--muted);

  159.       font-size: 0.92rem;

  160.       line-height: 1.35;

  161.       margin: 0;

  162.     }

  163. 

  164.     .week {

  165.       display: grid;

  166.       grid-template-columns: repeat(7, minmax(140px, 1fr));

  167.       gap: 10px;

  168.       overflow-x: auto;

  169.       padding-bottom: 4px;

  170.     }

  171. 

  172.     .day {

  173.       background: var(--panel);

  174.       border: 1px solid var(--line);

  175.       border-radius: var(--radius);

  176.       min-height: 460px;

  177.       box-shadow: var(--shadow);

  178.       display: flex;

  179.       flex-direction: column;

  180.     }

  181. 

  182.     .day header {

  183.       padding: 12px 12px 8px;

  184.       border-bottom: 1px solid var(--line);

  185.       min-height: 62px;

  186.     }

  187. 

  188.     .day h3 {

  189.       margin: 0 0 4px;

  190.       font-size: 1rem;

  191.       letter-spacing: 0;

  192.     }

  193. 

  194.     .day .tone {

  195.       color: var(--muted);

  196.       font-size: 0.8rem;

  197.       line-height: 1.25;

  198.     }

  199. 

  200.     .items {

  201.       display: flex;

  202.       flex-direction: column;

  203.       gap: 8px;

  204.       padding: 10px;

  205.     }

  206. 

  207.     .block {

  208.       border-left: 4px solid var(--line);

  209.       background: #fafbfc;

  210.       border-radius: 6px;

  211.       padding: 9px 9px 9px 10px;

  212.       min-height: 58px;

  213.     }

  214. 

  215.     .block.work { border-left-color: var(--blue); }

  216.     .block.spiritual { border-left-color: var(--teal); }

  217.     .block.health { border-left-color: var(--green); }

  218.     .block.home { border-left-color: var(--gold); }

  219.     .block.creative { border-left-color: var(--coral); }

  220.     .block.relationship { border-left-color: var(--violet); }

  221.     .block.rest { border-left-color: #6c737f; }

  222. 

  223.     .time {

  224.       display: block;

  225.       color: var(--muted);

  226.       font-size: 0.78rem;

  227.       line-height: 1.3;

  228.       margin-bottom: 4px;

  229.     }

  230. 

  231.     .task {

  232.       display: block;

  233.       font-weight: 650;

  234.       line-height: 1.25;

  235.       overflow-wrap: anywhere;

  236.     }

  237. 

  238.     .note {

  239.       display: block;

  240.       color: var(--muted);

  241.       font-size: 0.82rem;

  242.       line-height: 1.35;

  243.       margin-top: 3px;

  244.       overflow-wrap: anywhere;

  245.     }

  246. 

  247.     .panel {

  248.       background: var(--panel);

  249.       border: 1px solid var(--line);

  250.       border-radius: var(--radius);

  251.       box-shadow: var(--shadow);

  252.       padding: 14px;

  253.     }

  254. 

  255.     .panel + .panel {

  256.       margin-top: 14px;

  257.     }

  258. 

  259.     .checklist {

  260.       display: grid;

  261.       gap: 8px;

  262.       margin-top: 10px;

  263.     }

  264. 

  265.     .check {

  266.       display: grid;

  267.       grid-template-columns: 22px minmax(0, 1fr);

  268.       gap: 8px;

  269.       align-items: start;

  270.       padding: 8px;

  271.       border: 1px solid var(--line);

  272.       border-radius: 6px;

  273.       background: #fbfcfd;

  274.       min-height: 42px;

  275.     }

  276. 

  277.     .check input {

  278.       width: 18px;

  279.       height: 18px;

  280.       margin: 1px 0 0;

  281.       accent-color: var(--teal);

  282.     }

  283. 

  284.     .check span {

  285.       line-height: 1.35;

  286.       overflow-wrap: anywhere;

  287.     }

  288. 

  289.     .check small {

  290.       display: block;

  291.       color: var(--muted);

  292.       margin-top: 2px;

  293.       line-height: 1.3;

  294.     }

  295. 

  296.     .tags {

  297.       display: flex;

  298.       flex-wrap: wrap;

  299.       gap: 7px;

  300.       margin-top: 10px;

  301.     }

  302. 

  303.     .tag {

  304.       border-radius: 999px;

  305.       padding: 5px 8px;

  306.       border: 1px solid var(--line);

  307.       background: #fbfcfd;

  308.       color: var(--muted);

  309.       font-size: 0.82rem;

  310.       white-space: nowrap;

  311.     }

  312. 

  313.     textarea {

  314.       width: 100%;

  315.       min-height: 120px;

  316.       resize: vertical;

  317.       border: 1px solid var(--line);

  318.       border-radius: 6px;

  319.       padding: 10px;

  320.       color: var(--ink);

  321.       background: #fbfcfd;

  322.       line-height: 1.4;

  323.     }

  324. 

  325.     .reflection-grid {

  326.       display: grid;

  327.       gap: 10px;

  328.       margin-top: 10px;

  329.     }

  330. 

  331.     .field-label {

  332.       display: grid;

  333.       gap: 5px;

  334.       color: var(--muted);

  335.       font-size: 0.84rem;

  336.       line-height: 1.3;

  337.     }

  338. 

  339.     .field-label textarea {

  340.       min-height: 74px;

  341.       color: var(--ink);

  342.       font-size: 0.95rem;

  343.     }

  344. 

  345.     .field-label.compact textarea {

  346.       min-height: 52px;

  347.     }

  348. 

  349.     .export-box {

  350.       margin-top: 10px;

  351.       min-height: 180px;

  352.       white-space: pre-wrap;

  353.     }

  354. 

  355.     .legend {

  356.       display: grid;

  357.       grid-template-columns: repeat(2, minmax(0, 1fr));

  358.       gap: 8px;

  359.       margin-top: 10px;

  360.     }

  361. 

  362.     .legend-item {

  363.       display: flex;

  364.       align-items: center;

  365.       gap: 8px;

  366.       color: var(--muted);

  367.       font-size: 0.88rem;

  368.       min-width: 0;

  369.     }

  370. 

  371.     .swatch {

  372.       width: 12px;

  373.       height: 12px;

  374.       border-radius: 3px;

  375.       flex: 0 0 12px;

  376.     }

  377. 

  378.     .footer {

  379.       margin-top: 18px;

  380.       color: var(--muted);

  381.       font-size: 0.9rem;

  382.       line-height: 1.4;

  383.     }

  384. 

  385.     @media (max-width: 980px) {

  386.       .layout {

  387.         grid-template-columns: 1fr;

  388.       }

  389. 

  390.       .summary {

  391.         grid-template-columns: repeat(2, minmax(0, 1fr));

  392.       }

  393. 

  394.       .topbar {

  395.         flex-direction: column;

  396.       }

  397. 

  398.       .toolbar {

  399.         justify-content: flex-start;

  400.       }

  401.     }

  402. 

  403.     @media (max-width: 560px) {

  404.       .shell {

  405.         padding-top: 18px;

  406.       }

  407. 

  408.       h1 {

  409.         font-size: 1.55rem;

  410.       }

  411. 

  412.       .summary {

  413.         grid-template-columns: 1fr;

  414.       }

  415. 

  416.       .toolbar,

  417.       .button {

  418.         width: 100%;

  419.       }

  420. 

  421.       .week {

  422.         grid-template-columns: repeat(7, minmax(230px, 78vw));

  423.       }

  424. 

  425.       .legend {

  426.         grid-template-columns: 1fr;

  427.       }

  428.     }

  429. 

  430.     @media print {

  431.       body {

  432.         background: #fff;

  433.       }

  434. 

  435.       .toolbar,

  436.       .export-box,

  437.       #exportText,

  438.       .footer {

  439.         display: none;

  440.       }

  441. 

  442.       .shell {

  443.         max-width: none;

  444.         padding: 0;

  445.       }

  446. 

  447.       .layout {

  448.         grid-template-columns: 1fr;

  449.       }

  450. 

  451.       .week {

  452.         overflow: visible;

  453.         grid-template-columns: repeat(2, 1fr);

  454.       }

  455. 

  456.       .day,

  457.       .metric,

  458.       .panel {

  459.         box-shadow: none;

  460.         break-inside: avoid;

  461.       }

  462.     }

  463.   </style>

  464. </head>

  465. <body>

  466.   <main class="shell">

  467.     <div class="topbar">

  468.       <div>

  469.         <h1>Time Management Planner</h1>

  470.         <p class="subtitle">A first working rhythm for work, congregation care, marriage, home responsibilities, exercise, dance, guitar, Bible study, and flexible creative time.</p>

  471.       </div>

  472.       <div class="toolbar" aria-label="Planner actions">

  473.         <button class="button primary" id="exportBtn" type="button">Export</button>

  474.         <button class="button" id="printBtn" type="button">Print</button>

  475.         <button class="button" id="resetBtn" type="button">Reset Checks</button>

  476.       </div>

  477.     </div>

  478. 

  479.     <section class="summary" aria-label="Weekly time summary">

  480.       <div class="metric">

  481.         <strong>45 min</strong>

  482.         <span>Daily morning workout target.</span>

  483.       </div>

  484.       <div class="metric">

  485.         <strong>10:00 PM</strong>

  486.         <span>Hard stop for bedtime. No planned block ends after this.</span>

  487.       </div>

  488.       <div class="metric">

  489.         <strong>90 min</strong>

  490.         <span>Saturday elder and congregation care block.</span>

  491.       </div>

  492.       <div class="metric">

  493.         <strong>Sunday</strong>

  494.         <span>Lowest-pressure day: meeting, cleaning, rest, and light planning.</span>

  495.       </div>

  496.     </section>

  497. 

  498.     <div class="layout">

  499.       <section class="section" aria-labelledby="weekTitle">

  500.         <div class="section-head">

  501.           <h2 id="weekTitle">Weekly Skeleton</h2>

  502.           <p class="hint">Travel is built in as 15 minutes each way. Flexible blocks use first-draft times.</p>

  503.         </div>

  504. 

  505.         <div class="week" id="weekGrid"></div>

  506.       </section>

  507. 

  508.       <aside aria-label="Daily and weekly checklists">

  509.         <section class="panel">

  510.           <h2>Daily Anchors</h2>

  511.           <div class="checklist" id="dailyChecks"></div>

  512.         </section>

  513. 

  514.         <section class="panel">

  515.           <h2>Weekly Responsibilities</h2>

  516.           <div class="checklist" id="weeklyChecks"></div>

  517.         </section>

  518. 

  519.         <section class="panel">

  520.           <h2>Priorities & Motivation</h2>

  521.           <p class="hint">Keep this small: what matters, why it matters, and the next visible move.</p>

  522.           <div class="reflection-grid">

  523.             <label class="field-label compact">

  524.               Top priorities

  525.               <textarea id="priorities" data-state-field="priorities" aria-label="Top priorities" placeholder="1.&#10;2.&#10;3."></textarea>

  526.             </label>

  527.             <label class="field-label">

  528.               Thoughts to hold

  529.               <textarea id="thoughts" data-state-field="thoughts" aria-label="Thoughts to hold" placeholder="Loose thoughts, concerns, ideas, things to remember."></textarea>

  530.             </label>

  531.             <label class="field-label compact">

  532.               Why this matters

  533.               <textarea id="motivation" data-state-field="motivation" aria-label="Why this matters" placeholder="Connect the work to people, peace, service, health, or growth."></textarea>

  534.             </label>

  535.             <label class="field-label compact">

  536.               Wins

  537.               <textarea id="wins" data-state-field="wins" aria-label="Wins" placeholder="What moved forward today? Small counts."></textarea>

  538.             </label>

  539.             <label class="field-label compact">

  540.               Next tiny step

  541.               <textarea id="nextStep" data-state-field="nextStep" aria-label="Next tiny step" placeholder="One action small enough to start."></textarea>

  542.             </label>

  543.           </div>

  544.         </section>

  545. 

  546.         <section class="panel">

  547.           <h2>Protected Roles</h2>

  548.           <div class="tags">

  549.             <span class="tag">IT Director</span>

  550.             <span class="tag">Programmer</span>

  551.             <span class="tag">Congregation elder</span>

  552.             <span class="tag">Husband</span>

  553.             <span class="tag">Homeowner/renter</span>

  554.           </div>

  555.         </section>

  556. 

  557.         <section class="panel">

  558.           <h2>Color Key</h2>

  559.           <div class="legend">

  560.             <div class="legend-item"><span class="swatch" style="background: var(--blue)"></span>Work</div>

  561.             <div class="legend-item"><span class="swatch" style="background: var(--teal)"></span>Spiritual</div>

  562.             <div class="legend-item"><span class="swatch" style="background: var(--green)"></span>Health</div>

  563.             <div class="legend-item"><span class="swatch" style="background: var(--gold)"></span>Home</div>

  564.             <div class="legend-item"><span class="swatch" style="background: var(--coral)"></span>Creative</div>

  565.             <div class="legend-item"><span class="swatch" style="background: var(--violet)"></span>Marriage</div>

  566.           </div>

  567.         </section>

  568. 

  569.         <section class="panel">

  570.           <h2>Notes</h2>

  571.           <textarea id="notes" aria-label="Planner notes">Saturday bills. Sunday light. Painting and writing are bonus creative blocks.</textarea>

  572.         </section>

  573. 

  574.         <section class="panel">

  575.           <h2>Export</h2>

  576.           <textarea class="export-box" id="exportText" aria-label="Exported Markdown"></textarea>

  577.         </section>

  578.       </aside>

  579.     </div>

  580. 

  581.     <p class="footer">Source: interview answers gathered for the time_managment project folder. This page saves checklist state and notes in this browser.</p>

  582.   </main>

  583. 

  584.   <script>

  585.     const planner = {

  586.       days: [

  587.         {

  588.           name: "Monday",

  589.           tone: "Best normal build day",

  590.           blocks: [

  591.             ["6:00-6:45 AM", "Workout", "45 minutes before work", "health"],

  592.             ["8:30 AM-5:30 PM", "Work", "IT Director/programmer block", "work"],

  593.             ["6:00-6:30 PM", "Wife connection", "Target 30 minutes", "relationship"],

  594.             ["7:00-7:45 PM", "Bible study / meeting prep", "Use this as the main weekday study block", "spiritual"],

  595.             ["9:15-10:00 PM", "Guitar", "30-45 minutes before hard stop", "creative"],

  596.             ["10:00 PM", "Bedtime hard stop", "Stop the day here", "rest"]

  597.           ]

  598.         },

  599.         {

  600.           name: "Tuesday",

  601.           tone: "Meeting night",

  602.           blocks: [

  603.             ["6:00-6:45 AM", "Workout", "45 minutes before work", "health"],

  604.             ["8:30 AM-5:30 PM", "Work", "IT Director/programmer block", "work"],

  605.             ["6:45-9:00 PM", "Kingdom Hall", "15-minute travel each way plus 7:00-8:45 meeting", "spiritual"],

  606.             ["9:15-9:35 PM", "Wife connection", "Short version after meeting", "relationship"],

  607.             ["9:35-9:50 PM", "Guitar minimum", "15 minutes counts", "creative"],

  608.             ["9:50-10:00 PM", "Light reset only", "Keep this simple", "home"],

  609.             ["10:00 PM", "Bedtime hard stop", "Stop the day here", "rest"]

  610.           ]

  611.         },

  612.         {

  613.           name: "Wednesday",

  614.           tone: "Dance night",

  615.           blocks: [

  616.             ["6:00-6:45 AM", "Workout", "45 minutes before work", "health"],

  617.             ["8:30 AM-5:30 PM", "Work", "IT Director/programmer block", "work"],

  618.             ["5:45-7:45 PM", "Dance", "15-minute travel each way plus 6:00-7:30 class", "health"],

  619.             ["8:00-8:30 PM", "Wife connection", "Target 30 minutes", "relationship"],

  620.             ["9:15-9:45 PM", "Guitar minimum", "15-30 minutes", "creative"],

  621.             ["10:00 PM", "Bedtime hard stop", "Stop the day here", "rest"]

  622.           ]

  623.         },

  624.         {

  625.           name: "Thursday",

  626.           tone: "Late dance night",

  627.           blocks: [

  628.             ["6:00-6:45 AM", "Workout", "45 minutes before work", "health"],

  629.             ["8:30 AM-5:30 PM", "Work", "IT Director/programmer block", "work"],

  630.             ["5:45-6:05 PM", "Quick elder check", "Messages, calls, urgent follow-up", "spiritual"],

  631.             ["6:05-6:35 PM", "Wife connection", "Target 30 minutes before dance", "relationship"],

  632.             ["7:45-9:30 PM", "Dance", "Travel plus 8:15-9:15 class", "health"],

  633.             ["9:40-9:55 PM", "Guitar minimum", "15 minutes if energy is low", "creative"],

  634.             ["10:00 PM", "Bedtime hard stop", "Stop the day here", "rest"]

  635.           ]

  636.         },

  637.         {

  638.           name: "Friday",

  639.           tone: "Lighter landing",

  640.           blocks: [

  641.             ["6:00-6:45 AM", "Workout", "45 minutes before work", "health"],

  642.             ["8:30 AM-12:45 PM", "Work", "Morning work block", "work"],

  643.             ["1:00-2:15 PM", "Dance", "Travel plus 1:15-2:00 class", "health"],

  644.             ["2:15-5:30 PM", "Work", "Afternoon work block", "work"],

  645.             ["6:00-6:30 PM", "Wife connection", "Keep the evening lighter", "relationship"],

  646.             ["9:15-10:00 PM", "Guitar", "30-45 minutes if recovered", "creative"],

  647.             ["10:00 PM", "Bedtime hard stop", "Stop the day here", "rest"]

  648.           ]

  649.         },

  650.         {

  651.           name: "Saturday",

  652.           tone: "Admin, service, and home",

  653.           blocks: [

  654.             ["7:00-7:45 AM", "Workout", "45 minutes", "health"],

  655.             ["9:00-10:30 AM", "Elder/congregation block", "90 minutes for calls, shepherding, talks, prep, texts, organizing, ministry", "spiritual"],

  656.             ["10:45-11:15 AM", "Bills", "Weekly money/admin pass", "home"],

  657.             ["11:15 AM-12:45 PM", "Honey-do list and repairs", "Small weekly tasks", "home"],

  658.             ["3:30-4:15 PM", "Bible study / family worship", "Use as needed for all-of-the-above study", "spiritual"],

  659.             ["4:30-5:30 PM", "Painting or writing", "Optional creative block", "creative"],

  660.             ["9:15-10:00 PM", "Guitar", "30-45 minutes", "creative"],

  661.             ["10:00 PM", "Bedtime hard stop", "Stop the day here", "rest"]

  662.           ]

  663.         },

  664.         {

  665.           name: "Sunday",

  666.           tone: "Lowest-pressure day",

  667.           blocks: [

  668.             ["7:00-7:45 AM", "Workout", "45 minutes, easier pace if needed", "health"],

  669.             ["9:30-11:30 AM", "Cleaning", "2 hours: kitchen floor, vacuum, master bath", "home"],

  670.             ["12:45-3:15 PM", "Sunday meeting", "15-minute travel each way plus 1:00-3:00 meeting", "spiritual"],

  671.             ["3:30-5:30 PM", "Wife/rest time", "Keep this protected", "relationship"],

  672.             ["6:30-6:45 PM", "Light weekly planning", "Look at the week without loading the day", "rest"],

  673.             ["9:15-9:30 PM", "Guitar minimum", "15 minutes only if it feels good", "creative"],

  674.             ["10:00 PM", "Bedtime hard stop", "Stop the day here", "rest"]

  675.           ]

  676.         }

  677.       ],

  678.       daily: [

  679.         ["Workout", "45 minutes, preferably morning"],

  680.         ["Wife connection", "Target 30 minutes"],

  681.         ["Guitar", "30-45 minutes late evening; 15-minute minimum; always end by 10:00 PM"],

  682.         ["Quick elder check", "Messages, calls, urgent follow-up"],

  683.         ["Basic reset", "Trash, small cleanup, next-day planning"],

  684.         ["Spiritual minimum", "10-15 minutes on full days"],

  685.         ["Bedtime", "10:00 PM hard stop"]

  686.       ],

  687.       weekly: [

  688.         ["Bible study", "Personal study, meeting prep, talk/elder prep, family worship"],

  689.         ["Saturday elder block", "90 minutes"],

  690.         ["Bills", "Saturday"],

  691.         ["House repairs", "Small weekly tasks"],

  692.         ["Trash", "Weekly and as needed"],

  693.         ["Honey-do list", "Small weekly tasks"],

  694.         ["General cleaning", "Sunday cleaning plus small resets"],

  695.         ["Watercolor painting", "Nice if possible"],

  696.         ["Writing", "Nice if possible"]

  697.       ]

  698.     };

  699. 

  700.     const stateKey = "time-management-planner-state-v2";

  701.     const state = loadState();

  702. 

  703.     function loadState() {

  704.       try {

  705.         const legacy = JSON.parse(localStorage.getItem("time-management-planner-state-v1")) || {};

  706.         const saved = JSON.parse(localStorage.getItem(stateKey)) || {};

  707.         return {

  708.           checks: {},

  709.           notes: "",

  710.           priorities: "",

  711.           thoughts: "",

  712.           motivation: "",

  713.           wins: "",

  714.           nextStep: "",

  715.           ...legacy,

  716.           ...saved

  717.         };

  718.       } catch (error) {

  719.         return {

  720.           checks: {},

  721.           notes: "",

  722.           priorities: "",

  723.           thoughts: "",

  724.           motivation: "",

  725.           wins: "",

  726.           nextStep: ""

  727.         };

  728.       }

  729.     }

  730. 

  731.     function saveState() {

  732.       localStorage.setItem(stateKey, JSON.stringify(state));

  733.     }

  734. 

  735.     function blockMarkup(block) {

  736.       const [time, task, note, type] = block;

  737.       return `

  738.         <div class="block ${type}">

  739.           <span class="time">${time}</span>

  740.           <span class="task">${task}</span>

  741.           <span class="note">${note}</span>

  742.         </div>

  743.       `;

  744.     }

  745. 

  746.     function renderWeek() {

  747.       const grid = document.getElementById("weekGrid");

  748.       grid.innerHTML = planner.days.map(day => `

  749.         <article class="day">

  750.           <header>

  751.             <h3>${day.name}</h3>

  752.             <span class="tone">${day.tone}</span>

  753.           </header>

  754.           <div class="items">

  755.             ${day.blocks.map(blockMarkup).join("")}

  756.           </div>

  757.         </article>

  758.       `).join("");

  759.     }

  760. 

  761.     function renderChecks(list, id, prefix) {

  762.       const target = document.getElementById(id);

  763.       target.innerHTML = list.map(([label, detail], index) => {

  764.         const key = `${prefix}-${index}`;

  765.         const checked = state.checks[key] ? "checked" : "";

  766.         return `

  767.           <label class="check">

  768.             <input type="checkbox" data-check-key="${key}" ${checked}>

  769.             <span>${label}<small>${detail}</small></span>

  770.           </label>

  771.         `;

  772.       }).join("");

  773.     }

  774. 

  775.     function markdownExport() {

  776.       const checks = [...document.querySelectorAll("[data-check-key]")].map(input => {

  777.         const text = input.closest("label").innerText.trim().replace(/\n+/g, " - ");

  778.         return `- [${input.checked ? "x" : " "}] ${text}`;

  779.       }).join("\n");

  780. 

  781.       const days = planner.days.map(day => {

  782.         const blocks = day.blocks.map(([time, task, note]) => `- ${time}: ${task} (${note})`).join("\n");

  783.         return `## ${day.name}\n${blocks}`;

  784.       }).join("\n\n");

  785. 

  786.       const priorities = document.getElementById("priorities").value.trim();

  787.       const thoughts = document.getElementById("thoughts").value.trim();

  788.       const motivation = document.getElementById("motivation").value.trim();

  789.       const wins = document.getElementById("wins").value.trim();

  790.       const nextStep = document.getElementById("nextStep").value.trim();

  791.       const notes = document.getElementById("notes").value.trim();

  792. 

  793.       return `# Time Management Planner\n\n## Priorities\n\n${priorities}\n\n## Thoughts To Hold\n\n${thoughts}\n\n## Why This Matters\n\n${motivation}\n\n## Wins\n\n${wins}\n\n## Next Tiny Step\n\n${nextStep}\n\n## Weekly Skeleton\n\n${days}\n\n## Checklists\n\n${checks}\n\n## Notes\n\n${notes}`;

  794.     }

  795. 

  796.     function updateExport() {

  797.       document.getElementById("exportText").value = markdownExport();

  798.     }

  799. 

  800.     function init() {

  801.       renderWeek();

  802.       renderChecks(planner.daily, "dailyChecks", "daily");

  803.       renderChecks(planner.weekly, "weeklyChecks", "weekly");

  804. 

  805.       const notes = document.getElementById("notes");

  806.       if (state.notes) {

  807.         notes.value = state.notes;

  808.       }

  809. 

  810.       document.querySelectorAll("[data-state-field]").forEach(field => {

  811.         if (state[field.dataset.stateField]) {

  812.           field.value = state[field.dataset.stateField];

  813.         }

  814. 

  815.         field.addEventListener("input", () => {

  816.           state[field.dataset.stateField] = field.value;

  817.           saveState();

  818.           updateExport();

  819.         });

  820.       });

  821. 

  822.       document.addEventListener("change", event => {

  823.         if (event.target.matches("[data-check-key]")) {

  824.           state.checks[event.target.dataset.checkKey] = event.target.checked;

  825.           saveState();

  826.           updateExport();

  827.         }

  828.       });

  829. 

  830.       notes.addEventListener("input", () => {

  831.         state.notes = notes.value;

  832.         saveState();

  833.         updateExport();

  834.       });

  835. 

  836.       document.getElementById("exportBtn").addEventListener("click", async () => {

  837.         updateExport();

  838.         const text = document.getElementById("exportText").value;

  839.         try {

  840.           await navigator.clipboard.writeText(text);

  841.           document.getElementById("exportBtn").textContent = "Copied";

  842.           setTimeout(() => document.getElementById("exportBtn").textContent = "Export", 1200);

  843.         } catch (error) {

  844.           document.getElementById("exportText").focus();

  845.           document.getElementById("exportText").select();

  846.         }

  847.       });

  848. 

  849.       document.getElementById("printBtn").addEventListener("click", () => window.print());

  850. 

  851.       document.getElementById("resetBtn").addEventListener("click", () => {

  852.         state.checks = {};

  853.         saveState();

  854.         document.querySelectorAll("[data-check-key]").forEach(input => {

  855.           input.checked = false;

  856.         });

  857.         updateExport();

  858.       });

  859. 

  860.       updateExport();

  861.     }

  862. 

  863.     init();

  864.   </script>

  865. </body>

  866. </html>

Powered by TurnKey Linux.