3c325bdb0f
- Implement notes database schema and API endpoints - Add notes page with filtering, search, and markdown support - Persist selected goal and task preferences for better UX - Include responsive design and mobile-friendly layout
84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Notes - GoalsBreakDown{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/notes.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="notes-page">
|
|
<div class="notes-header">
|
|
<h1>Notes</h1>
|
|
<button id="create-note-btn" class="btn-success">+ New Note</button>
|
|
</div>
|
|
|
|
<div class="notes-filters">
|
|
<div class="filter-group">
|
|
<label for="filter-goal">Goal:</label>
|
|
<select id="filter-goal">
|
|
<option value="">All Goals</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group search-group">
|
|
<input type="text" id="filter-search" placeholder="Search notes...">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="notes-list" class="notes-list"></div>
|
|
</div>
|
|
|
|
<div id="note-modal" class="modal">
|
|
<div class="modal-content note-modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="note-modal-title">New Note</h2>
|
|
<button class="modal-close" id="note-modal-close">×</button>
|
|
</div>
|
|
<form id="note-form">
|
|
<input type="hidden" id="note-id">
|
|
<div class="form-group">
|
|
<label for="note-title">Title</label>
|
|
<input type="text" id="note-title" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="note-goal">Goal</label>
|
|
<select id="note-goal">
|
|
<option value="">None</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="note-task">Task</label>
|
|
<select id="note-task">
|
|
<option value="">None</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group note-editor">
|
|
<div class="editor-panes">
|
|
<div class="editor-pane">
|
|
<label>Content (Markdown)</label>
|
|
<textarea id="note-content" rows="16"></textarea>
|
|
</div>
|
|
<div class="preview-pane">
|
|
<label>Preview</label>
|
|
<div id="note-preview" class="markdown-preview"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="note-error" class="error-message"></div>
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn-primary">Save</button>
|
|
<button type="button" class="btn-secondary" id="note-modal-cancel">Cancel</button>
|
|
<button type="button" class="btn-danger" id="delete-note-btn" style="display:none;">Delete</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/marked@5.1.0/marked.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/notes.js') }}"></script>
|
|
{% endblock %}
|