dcovington
/
AI_AGENT_OS
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
2 提交
1 分支
187KB
目录树: add6277b08
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'add6277b08'
${ noResults }
AI_AGENT_OS/.ai/time_managment/time_planner.html

777 行
22KB
原始文件 Blame 文件历史 

  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.     .export-box {

  326.       margin-top: 10px;

  327.       min-height: 180px;

  328.       white-space: pre-wrap;

  329.     }

  330. 

  331.     .legend {

  332.       display: grid;

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

  334.       gap: 8px;

  335.       margin-top: 10px;

  336.     }

  337. 

  338.     .legend-item {

  339.       display: flex;

  340.       align-items: center;

  341.       gap: 8px;

  342.       color: var(--muted);

  343.       font-size: 0.88rem;

  344.       min-width: 0;

  345.     }

  346. 

  347.     .swatch {

  348.       width: 12px;

  349.       height: 12px;

  350.       border-radius: 3px;

  351.       flex: 0 0 12px;

  352.     }

  353. 

  354.     .footer {

  355.       margin-top: 18px;

  356.       color: var(--muted);

  357.       font-size: 0.9rem;

  358.       line-height: 1.4;

  359.     }

  360. 

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

  362.       .layout {

  363.         grid-template-columns: 1fr;

  364.       }

  365. 

  366.       .summary {

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

  368.       }

  369. 

  370.       .topbar {

  371.         flex-direction: column;

  372.       }

  373. 

  374.       .toolbar {

  375.         justify-content: flex-start;

  376.       }

  377.     }

  378. 

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

  380.       .shell {

  381.         padding-top: 18px;

  382.       }

  383. 

  384.       h1 {

  385.         font-size: 1.55rem;

  386.       }

  387. 

  388.       .summary {

  389.         grid-template-columns: 1fr;

  390.       }

  391. 

  392.       .toolbar,

  393.       .button {

  394.         width: 100%;

  395.       }

  396. 

  397.       .week {

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

  399.       }

  400. 

  401.       .legend {

  402.         grid-template-columns: 1fr;

  403.       }

  404.     }

  405. 

  406.     @media print {

  407.       body {

  408.         background: #fff;

  409.       }

  410. 

  411.       .toolbar,

  412.       .export-box,

  413.       #exportText,

  414.       .footer {

  415.         display: none;

  416.       }

  417. 

  418.       .shell {

  419.         max-width: none;

  420.         padding: 0;

  421.       }

  422. 

  423.       .layout {

  424.         grid-template-columns: 1fr;

  425.       }

  426. 

  427.       .week {

  428.         overflow: visible;

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

  430.       }

  431. 

  432.       .day,

  433.       .metric,

  434.       .panel {

  435.         box-shadow: none;

  436.         break-inside: avoid;

  437.       }

  438.     }

  439.   </style>

  440. </head>

  441. <body>

  442.   <main class="shell">

  443.     <div class="topbar">

  444.       <div>

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

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

  447.       </div>

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

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

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

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

  452.       </div>

  453.     </div>

  454. 

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

  456.       <div class="metric">

  457.         <strong>45 min</strong>

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

  459.       </div>

  460.       <div class="metric">

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

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

  463.       </div>

  464.       <div class="metric">

  465.         <strong>90 min</strong>

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

  467.       </div>

  468.       <div class="metric">

  469.         <strong>Sunday</strong>

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

  471.       </div>

  472.     </section>

  473. 

  474.     <div class="layout">

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

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

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

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

  479.         </div>

  480. 

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

  482.       </section>

  483. 

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

  485.         <section class="panel">

  486.           <h2>Daily Anchors</h2>

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

  488.         </section>

  489. 

  490.         <section class="panel">

  491.           <h2>Weekly Responsibilities</h2>

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

  493.         </section>

  494. 

  495.         <section class="panel">

  496.           <h2>Protected Roles</h2>

  497.           <div class="tags">

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

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

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

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

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

  503.           </div>

  504.         </section>

  505. 

  506.         <section class="panel">

  507.           <h2>Color Key</h2>

  508.           <div class="legend">

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

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

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

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

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

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

  515.           </div>

  516.         </section>

  517. 

  518.         <section class="panel">

  519.           <h2>Notes</h2>

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

  521.         </section>

  522. 

  523.         <section class="panel">

  524.           <h2>Export</h2>

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

  526.         </section>

  527.       </aside>

  528.     </div>

  529. 

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

  531.   </main>

  532. 

  533.   <script>

  534.     const planner = {

  535.       days: [

  536.         {

  537.           name: "Monday",

  538.           tone: "Best normal build day",

  539.           blocks: [

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

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

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

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

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

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

  546.           ]

  547.         },

  548.         {

  549.           name: "Tuesday",

  550.           tone: "Meeting night",

  551.           blocks: [

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

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

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

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

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

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

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

  559.           ]

  560.         },

  561.         {

  562.           name: "Wednesday",

  563.           tone: "Dance night",

  564.           blocks: [

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

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

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

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

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

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

  571.           ]

  572.         },

  573.         {

  574.           name: "Thursday",

  575.           tone: "Late dance night",

  576.           blocks: [

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

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

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

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

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

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

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

  584.           ]

  585.         },

  586.         {

  587.           name: "Friday",

  588.           tone: "Lighter landing",

  589.           blocks: [

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

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

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

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

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

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

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

  597.           ]

  598.         },

  599.         {

  600.           name: "Saturday",

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

  602.           blocks: [

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

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

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

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

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

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

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

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

  611.           ]

  612.         },

  613.         {

  614.           name: "Sunday",

  615.           tone: "Lowest-pressure day",

  616.           blocks: [

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

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

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

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

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

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

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

  624.           ]

  625.         }

  626.       ],

  627.       daily: [

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

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

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

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

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

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

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

  635.       ],

  636.       weekly: [

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

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

  639.         ["Bills", "Saturday"],

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

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

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

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

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

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

  646.       ]

  647.     };

  648. 

  649.     const stateKey = "time-management-planner-state-v1";

  650.     const state = loadState();

  651. 

  652.     function loadState() {

  653.       try {

  654.         return JSON.parse(localStorage.getItem(stateKey)) || { checks: {}, notes: "" };

  655.       } catch (error) {

  656.         return { checks: {}, notes: "" };

  657.       }

  658.     }

  659. 

  660.     function saveState() {

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

  662.     }

  663. 

  664.     function blockMarkup(block) {

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

  666.       return `

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

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

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

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

  671.         </div>

  672.       `;

  673.     }

  674. 

  675.     function renderWeek() {

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

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

  678.         <article class="day">

  679.           <header>

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

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

  682.           </header>

  683.           <div class="items">

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

  685.           </div>

  686.         </article>

  687.       `).join("");

  688.     }

  689. 

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

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

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

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

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

  695.         return `

  696.           <label class="check">

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

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

  699.           </label>

  700.         `;

  701.       }).join("");

  702.     }

  703. 

  704.     function markdownExport() {

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

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

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

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

  709. 

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

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

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

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

  714. 

  715.       return `# Time Management Planner\n\n## Weekly Skeleton\n\n${days}\n\n## Checklists\n\n${checks}\n\n## Notes\n\n${document.getElementById("notes").value.trim()}`;

  716.     }

  717. 

  718.     function updateExport() {

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

  720.     }

  721. 

  722.     function init() {

  723.       renderWeek();

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

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

  726. 

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

  728.       if (state.notes) {

  729.         notes.value = state.notes;

  730.       }

  731. 

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

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

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

  735.           saveState();

  736.           updateExport();

  737.         }

  738.       });

  739. 

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

  741.         state.notes = notes.value;

  742.         saveState();

  743.         updateExport();

  744.       });

  745. 

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

  747.         updateExport();

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

  749.         try {

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

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

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

  753.         } catch (error) {

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

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

  756.         }

  757.       });

  758. 

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

  760. 

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

  762.         state.checks = {};

  763.         saveState();

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

  765.           input.checked = false;

  766.         });

  767.         updateExport();

  768.       });

  769. 

  770.       updateExport();

  771.     }

  772. 

  773.     init();

  774.   </script>

  775. </body>

  776. </html>

Powered by TurnKey Linux.