implement themes; implement custom checkboxes
Hunter
Saturday, August 3rd, 2024 at 1:51 PM
1 <!DOCTYPE html>
-<html lang="en">
2 +<html lang="en" data-theme="gak"> <!-- update to change theme -->
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪆</text></svg>">
7 <title>todo</title>
8 <style>
9 + :root {
10 + /* Base colors */
11 + --goldenrod: #eeba30;
12 + --tomato-soup: #FF6347;
13 + --forest: #3CB371;
14 +
15 + --slime: #ccff00;
16 + --grape: #7700ff;
17 + --snow: #ffffff;
18 + --coal: #000000;
19 +
20 + --chocolate: #59311a;
21 + --strawberry: #ffd1dc;
22 + --vanilla: #f3eedc;
23 +
24 + --acorn: #5a352b;
25 + --butternut-squash: #f4a127;
26 + --pumpkin: #e5771e;
27 + --olive: #4c620c;
28 +
29 + --primordial-soup: #8e9918;
30 + --clay: #58473d;
31 + --lichen: #b1b893; /* New color */
32 + --amber: #b76700; /* New color */
33 + --algae: #4a5d23;
34 +
35 + --mint: #00a88a;
36 + --lemoncurd: #ffc500;
37 +
38 + --gold: #ffd700;
39 + --red: #d32f2f;
40 + --lantern-red: #b71c1c;
41 + --firecracker: #ff5733;
42 +
43 + --algae-green: #4a5d23;
44 + --seaweed: #2e8b57;
45 + --kelp: #769830;
46 + --pond-scum: #9acd32;
47 +
48 +
49 + --teal: #008080;
50 + --gray: #c0c0c0;
51 + --dark-gray: #404040;
52 + --blue: #000080;
53 +
54 + --xp-blue: #004e92;
55 + --xp-green: #009e49;
56 + --xp-light-blue: #8fc8f7;
57 + --xp-gray: #ffffff;
58 +
59 + }
60 +
61 + :root[data-theme="gak"] {
62 + --background: var(--snow);
63 + --text: var(--coal);
64 + --active-task-highlight: var(--slime);
65 + --checkbox-accent-color: var(--grape);
66 + }
67 +
68 + :root[data-theme="harvest"] {
69 + --background: var(--goldenrod);
70 + --text: var(--acorn);
71 + --active-task-highlight: var(--butternut-squash);
72 + --checkbox-accent-color: var(--olive);
73 + }
74 +
75 body {
76 font-family: Arial, sans-serif;
77 max-width: 800px;
78 margin: 0 auto;
79 padding: 20px;
80 + background-color: var(--background);
81 + color: var(--text);
82 }
83 ul {
84 list-style-type: none;
92 width: calc(100% - 30px);
93 margin-left: 5px;
94 padding: 5px;
95 + color: var(--text)
96 }
97 input[type="text"]:focus {
98 outline: none;
101 display: flex;
102 align-items: center;
103 margin: 5px 0;
104 + padding-left: 11px;
105 + padding-top: 4px;
106 + padding-bottom: 4px;
107 }
108 .active {
- background-color: #e6f3ff;
109 + background-color: var(--active-task-highlight);
110 }
111 .parent-task {
112 font-size: 1.5em;
115 #breadcrumbs {
116 font-size: 24px;
117 margin-bottom: 10px;
118 + color: var(--text);
119 + }
120 + .custom-checkbox {
121 + display: none;
122 + }
123 + .checkbox-label {
124 + display: inline-block;
125 + width: 20px;
126 + height: 20px;
127 + background-color: var(--background);
128 + border: 2px solid var(--checkbox-accent-color);
129 + position: relative;
130 + cursor: pointer;
131 + box-sizing: border-box;
132 + border-radius: 4px;
133 + }
134 + .custom-checkbox:checked + .checkbox-label {
135 + background-color: var(--checkbox-accent-color);
136 + }
137 + .custom-checkbox:checked + .checkbox-label::before {
138 + content: '';
139 + position: absolute;
140 + left: 6px;
141 + top: 2px;
142 + width: 5px;
143 + height: 10px;
144 + border: solid var(--background);
145 + border-width: 0 2px 2px 0;
146 + transform: rotate(45deg);
147 + box-sizing: border-box;
148 + }
149 + .custom-checkbox:indeterminate + .checkbox-label::before {
150 + content: '';
151 + position: absolute;
152 + left: 25%;
153 + right: 25%;
154 + top: 50%;
155 + height: 2px;
156 + background-color: var(--checkbox-accent-color);
157 + transform: translateY(-50%);
158 }
159 </style>
160 <script>
194 function loadFromLocalStorage() {
195 const savedTasks = localStorage.getItem('taskTree');
196 if (savedTasks) {
- const loadedTask = deserializeTaskTree(savedTasks);
- loadedTask.id = 'root'; // Ensure the root always has 'root' as its ID
- return loadedTask;
197 + return deserializeTaskTree(savedTasks);
198 } else {
199 return { id: 'root', text: 'todo', state: 0, subtasks: [{ id: Date.now(), text: '', state: 0, subtasks: [] }], selectedSubtaskId: null };
200 }
265
266 const checkbox = document.createElement('input');
267 checkbox.type = 'checkbox';
268 + checkbox.className = 'custom-checkbox';
269 + checkbox.id = `checkbox-${task.id}`;
270 updateCheckboxState(checkbox, task.state);
271 checkbox.addEventListener('click', (e) => {
272 e.preventDefault();
273 toggleTaskState(task);
274 });
275
276 + const checkboxLabel = document.createElement('label');
277 + checkboxLabel.className = 'checkbox-label';
278 + checkboxLabel.setAttribute('for', `checkbox-${task.id}`);
279 +
280 const taskInput = document.createElement('input');
281 taskInput.type = 'text';
282 taskInput.value = task.text;
366 taskInput.addEventListener('focus', () => setActiveTask(taskInput, task));
367
368 taskContainer.appendChild(checkbox);
369 + taskContainer.appendChild(checkboxLabel);
370 taskContainer.appendChild(taskInput);
371
372 return taskContainer;