<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Offline Sticky Notes App">
<title>Sticky Notes - Offline App</title>
<link rel="stylesheet" href="styles.css">
<!-- Google Fonts: Sarabun (Thai) and Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<!-- Marked.js for Markdown support -->
<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
<link rel="manifest" href="manifest.json">
<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>">
</head>
<body>
<header class="app-header">
<div class="toolbar">
<button id="new-note-btn" class="btn btn-primary" aria-label="Create new note">
<span class="icon">+</span> New Note
</button>
<button id="template-btn" class="btn" aria-label="Templates">
<span class="material-symbols-outlined">description</span> Templates
</button>
<button id="view-toggle" class="btn" aria-label="Toggle view">
<span class="material-symbols-outlined">view_kanban</span> Kanban
</button>
<div class="search-container">
<input type="text" id="search-input" placeholder="Search notes..." aria-label="Search notes">
</div>
<select id="category-filter" class="category-select" aria-label="Filter by category">
<option value="">All Categories</option>
</select>
<button id="export-btn" class="btn" aria-label="Export notes">
<span class="material-symbols-outlined">download</span> Export
</button>
<button id="import-btn" class="btn" aria-label="Import notes">
<span class="material-symbols-outlined">upload</span> Import
</button>
<input type="file" id="import-file" accept=".json" style="display: none;">
<button id="theme-toggle" class="btn" aria-label="Toggle theme">
<span class="material-symbols-outlined">dark_mode</span>
</button>
<button id="recycle-bin-btn" class="btn" aria-label="Recycle bin">
<span class="material-symbols-outlined">delete</span>
</button>
<button id="help-btn" class="btn" aria-label="Help">
<span class="material-symbols-outlined">help_outline</span>
</button>
</div>
</header>
<main class="app-board sticky-view" id="board" role="main">
<div class="empty-state" id="empty-state" style="display: none;">
<div class="empty-icon">📝</div>
<h2>No notes yet</h2>
<p>Click the "+ New Note" button or double-click anywhere to create your first note.</p>
</div>
</main>
<main class="kanban-board" id="kanban-board" role="main" style="display: none;">
<div class="kanban-column" data-status="todo">
<div class="kanban-header">
<h3>To Do</h3>
<span class="kanban-count">0</span>
</div>
<div class="kanban-content" id="kanban-todo"></div>
</div>
<div class="kanban-column" data-status="in-progress">
<div class="kanban-header">
<h3>In Progress</h3>
<span class="kanban-count">0</span>
</div>
<div class="kanban-content" id="kanban-in-progress"></div>
</div>
<div class="kanban-column" data-status="done">
<div class="kanban-header">
<h3>Done</h3>
<span class="kanban-count">0</span>
</div>
<div class="kanban-content" id="kanban-done"></div>
</div>
</main>
<div id="recycle-bin-modal" class="modal" role="dialog" aria-labelledby="recycle-bin-title" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h2 id="recycle-bin-title">Recycle Bin</h2>
<button id="close-recycle-bin" class="close-btn" aria-label="Close">×</button>
</div>
<div class="modal-body">
<div id="recycle-bin-content" class="recycle-bin-content">
<!-- Deleted notes will appear here -->
</div>
<div class="modal-footer">
<button id="empty-recycle-bin" class="btn btn-danger">Empty Recycle Bin</button>
</div>
</div>
</div>
</div>
<div id="template-modal" class="modal" role="dialog" aria-labelledby="template-title" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h2 id="template-title">Choose Template</h2>
<button id="close-template" class="close-btn" aria-label="Close">×</button>
</div>
<div class="modal-body">
<div class="template-grid">
<div class="template-card" data-template="todo">
<span class="template-icon">✓</span>
<h3>To-Do List</h3>
<p>Task checklist</p>
</div>
<div class="template-card" data-template="meeting">
<span class="template-icon">📋</span>
<h3>Meeting Notes</h3>
<p>Meeting agenda & notes</p>
</div>
<div class="template-card" data-template="idea">
<span class="template-icon">💡</span>
<h3>Ideas</h3>
<p>Brainstorming ideas</p>
</div>
<div class="template-card" data-template="goals">
<span class="template-icon">🎯</span>
<h3>Goals</h3>
<p>Track your goals</p>
</div>
<div class="template-card" data-template="shopping">
<span class="template-icon">🛒</span>
<h3>Shopping List</h3>
<p>Items to buy</p>
</div>
<div class="template-card" data-template="blank">
<span class="template-icon">📝</span>
<h3>Blank Note</h3>
<p>Start from scratch</p>
</div>
</div>
</div>
</div>
</div>
<div id="help-modal" class="modal" role="dialog" aria-labelledby="help-title" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h2 id="help-title">Help & Shortcuts</h2>
<button id="close-help" class="close-btn" aria-label="Close">×</button>
</div>
<div class="modal-body">
<h3>Keyboard Shortcuts</h3>
<ul>
<li><kbd>N</kbd> - Create new note</li>
<li><kbd>Ctrl/Cmd + S</kbd> - Export notes</li>
<li><kbd>Delete</kbd> - Delete selected note</li>
<li><kbd>Ctrl/Cmd + Z</kbd> - Undo last delete</li>
<li><kbd>Esc</kbd> - Close editing / deselect</li>
</ul>
<h3>Markdown Support</h3>
<ul>
<li><strong>**bold**</strong> - Bold text</li>
<li><em>*italic*</em> - Italic text</li>
<li><code>`code`</code> - Inline code</li>
<li>- List item - Bullet list</li>
<li>[Link](url) - Hyperlink</li>
</ul>
<h3>How to use</h3>
<ul>
<li>Click and drag the header to move notes</li>
<li>Resize notes using the handle at the bottom-right corner</li>
<li>Click the pin icon to keep a note on top</li>
<li>Click the color icon to change note color</li>
<li>Add tags using #tag in the note content</li>
<li>Set reminders for important notes</li>
<li>Organize notes with categories</li>
<li>Use templates for quick start</li>
<li>Switch to Kanban view for task management</li>
</ul>
</div>
</div>
</div>
<div id="notification-container" class="notification-container" aria-live="polite"></div>
<script src="app.js"></script>
</body>
</html>