65 lines
2.5 KiB
HTML
65 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Professional TODO App</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="sidebar" id="sidebar">
|
|
<button onclick="filterTodos('today')"><span class="icon">📅</span><span class="label">Today's
|
|
Todos</span></button>
|
|
<button onclick="filterTodos('all')"><span class="icon">📋</span><span class="label">All Todos</span></button>
|
|
<button onclick="toggleDarkMode()"><span class="icon">🌙</span><span class="label">Dark Mode</span></button>
|
|
<button onclick="toggleGlobalBlur()"><span class="icon">👁</span><span class="label">Blur/Unblur
|
|
All</span></button>
|
|
<button id="collapseBtn" onclick="toggleSidebar()">
|
|
<span class="icon" id="collapseIcon">▶</span>
|
|
<span class="label">Collapse</span>
|
|
</button>
|
|
|
|
<div class="status-filters">
|
|
<button onclick="filterByStatus('all')">
|
|
<span class="icon">📑</span>
|
|
</button>
|
|
<button onclick="filterByStatus('pend_delay')">
|
|
<span class="icon">❕✔</span>
|
|
</button>
|
|
<button onclick="filterByStatus('pending')">
|
|
<span class="icon">⏳</span>
|
|
</button>
|
|
<button onclick="filterByStatus('completed')">
|
|
<span class="icon">✔</span>
|
|
</button>
|
|
|
|
<button onclick="filterByStatus('delayed')">
|
|
<span class="icon">⚠</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div id="analytics"></div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="search-row">
|
|
<input type="text" id="searchTitle" placeholder="Search by title" autocomplete="off">
|
|
<input type="text" id="searchDescription" placeholder="Search by description" autocomplete="off">
|
|
<input type="text" id="searchBoth" placeholder="Search by both" autocomplete="off">
|
|
</div>
|
|
<form id="todoForm">
|
|
<div class="todoForm-row">
|
|
<input type="text" id="todoTitle" placeholder="Title" autocomplete="off">
|
|
<button type="submit" style="background-color: #3a3a3a;">Add to list</button>
|
|
</div>
|
|
<textarea id="todoText" placeholder="Description" required autocomplete="off"></textarea>
|
|
</form>
|
|
<div id="todoList"></div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |