56 lines
2.6 KiB
HTML
56 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Todo App (Local)</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<meta name="description" content="A modern todo application with admin features">
|
|
</head>
|
|
<body>
|
|
<div id="app-container">
|
|
<h1>Todo App</h1>
|
|
<div id="password-section" style="display:none;">
|
|
<label for="password-input">Enter password:</label>
|
|
<input type="password" id="password-input" placeholder="Enter password">
|
|
<button id="password-submit">Unlock</button>
|
|
</div>
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" id="tab-list-btn" type="button">Todos List</button>
|
|
<button class="tab-btn" id="tab-form-btn" type="button">Add/Edit Todo</button>
|
|
<button class="tab-btn" id="tab-admin-btn" type="button">Admin</button>
|
|
</div>
|
|
<div id="tab-content-list" class="tab-content active">
|
|
<div id="todos-list"></div>
|
|
</div>
|
|
<div id="tab-content-form" class="tab-content">
|
|
<form id="todo-form">
|
|
<!-- Fields will be rendered by JS -->
|
|
</form>
|
|
</div>
|
|
<div id="tab-content-admin" class="tab-content">
|
|
<h2>Admin</h2>
|
|
<button id="export-json-btn" type="button">Export Todos as JSON</button>
|
|
<button id="import-json-btn" type="button" style="margin-left:8px;">Import JSON</button>
|
|
<input id="import-json-input" type="file" accept="application/json" style="display:none;" />
|
|
<button id="delete-all-btn" type="button" style="margin-left:16px;color:#fff;background:#d33;">Delete All Data</button>
|
|
<pre id="export-json-output" style="display:none;margin-top:16px;"></pre>
|
|
</div>
|
|
</div>
|
|
<div id="password-modal" class="modal" style="display:none;">
|
|
<div class="modal-content">
|
|
<h3 id="password-modal-title">Enter Password</h3>
|
|
<input type="password" id="password-modal-input" placeholder="Password">
|
|
<input type="password" id="password-modal-confirm" placeholder="Confirm Password" style="display:none; margin-top: 8px;">
|
|
<div style="margin-top: 14px;">
|
|
<button id="password-modal-ok">OK</button>
|
|
<button id="password-modal-cancel" style="margin-left:12px;">Cancel</button>
|
|
</div>
|
|
<div id="password-modal-error" style="color:#d33; margin-top:8px; display:none;"></div>
|
|
</div>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
<script src="modal.js"></script>
|
|
</body>
|
|
</html>
|