-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
48 lines (44 loc) · 3.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToDo List</title>
</head>
<body class="h-full m-0 p-0 font-NotoSans font-normal toggleBackground toggleIcon">
<div class="flex" id="main">
<div class="p-5 w-72 border-r-2 shadow-lg toggleForeground" id="sidebar">
<div class="flex justify-between border-b-2 pb-2" id="categories-header">
<span class="large-text font-medium toggleMainText ">Categories</span>
<div class="svgButton showModal" id="category"><svg xmlns="http://www.w3.org/2000/svg" height="31" viewBox="0 -960 960 960" width="31" alt="add box svg"><path class="toggleIcon" d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg></div>
</div>
<div class="" id="categoryContainer"></div>
</div>
<div class="relative h-screen w-screen" id="taskInfo">
<div class="p-5 border-b-2 flex justify-between shadow-lg mb-8 toggleForeground" id="todoHeader">
<button class="svgButton" id="toggleSidebarButton">
<svg class="sidebarClose" xmlns="http://www.w3.org/2000/svg" height="31" viewBox="0 -960 960 960" width="31" alt="sidebar close svg"><path class="toggleIcon" d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"/></svg>
<svg class="sidebarOpen hidden" xmlns="http://www.w3.org/2000/svg" height="31" viewBox="0 -960 960 960" width="31"><path class="toggleIcon" d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></button>
<div class="text-4xl toggleMainText" id="headerName">ToDo List</div>
<div class="svgButton">
<svg class="moon cursor-pointer" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 -960 960 960" width="31" alt="dark mode icon"><path class="toggleIcon" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/>
</svg>
<svg class="sun cursor-pointer" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 -960 960 960" width="31"><path class="toggleIcon" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/>
</svg>
</div>
</div>
<div id="taskHeaderContainer">
<div class="toggleMainText" id="taskCategoryHeader"></div>
<div class="svgButton showModal" id="task">
<svg xmlns="http://www.w3.org/2000/svg" height="31" viewBox="0 -960 960 960" width="31" alt="add box svg"><path class="toggleIcon" d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/>
</svg>
</div>
</div>
<div class="mt-10 text-center toggleSubText" id="addTaskMessage">No tasks yet</div>
</div>
</div>
<div class="hidden toggleMainText" id="modal-container">
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>