184 lines
8.9 KiB
HTML
184 lines
8.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Recurring Checklist</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="loadingOverlay" class="loading-overlay">
|
||
|
|
<div class="loading-spinner"></div>
|
||
|
|
<div class="loading-text">Loading checklist...</div>
|
||
|
|
</div>
|
||
|
|
<div id="listModal" class="modal-overlay" style="display: none;">
|
||
|
|
<div class="modal">
|
||
|
|
<h3 id="listModalTitle"></h3>
|
||
|
|
<div id="listModalMessage" class="modal-message" style="display:none;"></div>
|
||
|
|
<input id="listModalInput" type="text" placeholder="List name" />
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button id="listModalCancel" class="btn btn-secondary btn-small" type="button">Cancel</button>
|
||
|
|
<button id="listModalSave" class="btn btn-primary btn-small" type="button">Save</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="editTaskModal" class="modal-overlay" style="display: none;">
|
||
|
|
<div class="modal wide">
|
||
|
|
<h3>Edit Task</h3>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editTitle">Title</label>
|
||
|
|
<input id="editTitle" type="text" placeholder="Task title..." />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editDescription">Description</label>
|
||
|
|
<textarea id="editDescription" placeholder="Description"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="checkbox-label"><input type="checkbox" id="editIsRecurring" /> Recurring Task</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" id="editRecurrenceOptions" style="display: none;">
|
||
|
|
<label for="editRecurrenceType">Repeat:</label>
|
||
|
|
<select id="editRecurrenceType">
|
||
|
|
<option value="daily">Daily</option>
|
||
|
|
<option value="weekly">Weekly</option>
|
||
|
|
<option value="monthly">Monthly</option>
|
||
|
|
</select>
|
||
|
|
<div id="editWeeklyOptions" style="display: none; margin-top: 8px;">
|
||
|
|
<label>Day of week:</label>
|
||
|
|
<select id="editDayOfWeek">
|
||
|
|
<option value="0">Sunday</option>
|
||
|
|
<option value="1">Monday</option>
|
||
|
|
<option value="2">Tuesday</option>
|
||
|
|
<option value="3">Wednesday</option>
|
||
|
|
<option value="4">Thursday</option>
|
||
|
|
<option value="5">Friday</option>
|
||
|
|
<option value="6">Saturday</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div id="editMonthlyOptions" style="display: none; margin-top: 8px;">
|
||
|
|
<label>Day of month:</label>
|
||
|
|
<input type="number" id="editDayOfMonth" min="1" max="31" value="1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button id="editModalCancel" class="btn btn-secondary btn-small" type="button">Cancel</button>
|
||
|
|
<button id="editModalSave" class="btn btn-primary btn-small" type="button">Save</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="moveItemModal" class="modal-overlay" style="display: none;">
|
||
|
|
<div class="modal">
|
||
|
|
<h3>Move Task</h3>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="moveItemSelect">Select destination list</label>
|
||
|
|
<select id="moveItemSelect"></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button id="moveItemCancel" class="btn btn-secondary btn-small" type="button">Cancel</button>
|
||
|
|
<button id="moveItemSave" class="btn btn-primary btn-small" type="button">Move</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="app-container">
|
||
|
|
<header>
|
||
|
|
<div class="header-left">
|
||
|
|
<div class="list-icon"></div>
|
||
|
|
<h1>Recurring Checklist</h1>
|
||
|
|
</div>
|
||
|
|
<div class="app-tabs">
|
||
|
|
<button class="tab-button active" data-tab="tasks" id="tasksTabBtn">Tasks</button>
|
||
|
|
<button class="tab-button" data-tab="add" id="addTabBtn">Add Task</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="main-content">
|
||
|
|
<div id="tasksView" class="tab-view active">
|
||
|
|
<div class="list-tabs-row">
|
||
|
|
<div id="listTabs" class="list-tabs"></div>
|
||
|
|
</div>
|
||
|
|
<div id="listMenu" class="list-menu">
|
||
|
|
<div id="listMenuHandle" class="list-menu-handle" role="button" tabindex="0" aria-label="Toggle list menu" aria-expanded="false">
|
||
|
|
<div class="list-menu-grip"></div>
|
||
|
|
</div>
|
||
|
|
<div id="listMenuPanel" class="list-menu-panel">
|
||
|
|
<button id="exportJsonBtn" class="btn btn-secondary btn-small">Export JSON</button>
|
||
|
|
<button id="importJsonBtn" class="btn btn-secondary btn-small">Import JSON</button>
|
||
|
|
<button id="addListBtn" class="btn btn-primary btn-small">+ Add List</button>
|
||
|
|
<button id="renameListBtn" class="btn btn-secondary btn-small">Rename List</button>
|
||
|
|
<button id="deleteListBtn" class="btn btn-danger btn-small">Delete List</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="checklists-section">
|
||
|
|
<div class="checklist-column">
|
||
|
|
<h2>To Do</h2>
|
||
|
|
<div id="todoList" class="checklist-list"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="checklist-column">
|
||
|
|
<h2>Done</h2>
|
||
|
|
<div id="doneList" class="checklist-list"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="addView" class="tab-view">
|
||
|
|
<div class="add-item-section">
|
||
|
|
<div class="add-header">
|
||
|
|
<h2>Add New Task</h2>
|
||
|
|
<div class="add-list-target">
|
||
|
|
<label for="addListSelect">Add to list:</label>
|
||
|
|
<select id="addListSelect"></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="itemTitle" placeholder="Task title..." />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<textarea id="itemDescription" placeholder="Description (optional) - You can add multiple lines or bullet points"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="checkbox-label">
|
||
|
|
<input type="checkbox" id="isRecurring" />
|
||
|
|
Recurring Task
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" id="recurrenceOptions" style="display: none;">
|
||
|
|
<label for="recurrenceType">Repeat:</label>
|
||
|
|
<select id="recurrenceType">
|
||
|
|
<option value="daily">Daily</option>
|
||
|
|
<option value="weekly">Weekly</option>
|
||
|
|
<option value="monthly">Monthly</option>
|
||
|
|
</select>
|
||
|
|
<div id="weeklyOptions" style="display: none;">
|
||
|
|
<label>Day of week:</label>
|
||
|
|
<select id="dayOfWeek">
|
||
|
|
<option value="0">Sunday</option>
|
||
|
|
<option value="1">Monday</option>
|
||
|
|
<option value="2">Tuesday</option>
|
||
|
|
<option value="3">Wednesday</option>
|
||
|
|
<option value="4">Thursday</option>
|
||
|
|
<option value="5">Friday</option>
|
||
|
|
<option value="6">Saturday</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div id="monthlyOptions" style="display: none;">
|
||
|
|
<label>Day of month:</label>
|
||
|
|
<input type="number" id="dayOfMonth" min="1" max="31" value="1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button id="addItemBtn" class="btn btn-primary">Add Task</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|