yggdrasil/server/templates/notes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes — Yggdrasil</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='retro.css') }}">
</head>
<body>
    <nav>
        <a href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('sensors_page') }}">Sensors</a>
        <a href="{{ url_for('notes_page') }}">Notes</a>
        <a href="{{ url_for('clipboard_page') }}">Clipboard</a>
        <a href="{{ url_for('calendar_page') }}">Calendar</a>
        <a href="{{ url_for('notifications_page') }}">Notifications{% if unread_notifications %} <span class="nav-badge">{{ unread_notifications }}</span>{% endif %}</a>
        <a href="{{ url_for('api_docs') }}">API</a>
        <a href="{{ url_for('logout') }}">Log out</a>
        <img class="nav-logo" src="{{ url_for('static', filename='yggdrasil-logo.png') }}" alt="Yggdrasil logo">
    </nav>
    <h1>Notes</h1>

    <div class="panel">
        <h2>New note</h2>
        <form method="post" action="{{ url_for('notes_create') }}">
            <label for="new-note-title">Title</label>
            <input type="text" id="new-note-title" name="title" maxlength="200"
                   placeholder="Note title" required>
            <label for="new-note-content">Text</label>
            <textarea id="new-note-content" name="content" rows="3" maxlength="2000"
                      placeholder="Write a short note..." required></textarea>
            <button type="submit">[ Add note ]</button>
        </form>
    </div>

    {% if not notes %}
    <p class="hint">No notes yet. Add your first note above.</p>
    {% endif %}

    {% for note in notes %}
    <section class="note-card" id="note-{{ note.id }}">
        <form method="post" action="{{ url_for('notes_update', note_id=note.id) }}">
            <label for="note-title-{{ note.id }}">Title</label>
            <input type="text" id="note-title-{{ note.id }}" name="title"
                   value="{{ note.title }}" maxlength="200" required>
            <label for="note-content-{{ note.id }}">Text</label>
            <textarea id="note-content-{{ note.id }}" name="content" rows="2"
                      maxlength="2000" required>{{ note.content }}</textarea>
            <div class="note-actions">
                <button type="submit">[ Save ]</button>
                <span class="note-meta">{{ note.updated_at.strftime("%Y-%m-%d %H:%M") }}</span>
            </div>
        </form>

        <ul class="checklist">
            {% for item in note.ordered_items %}
            <li class="{{ 'done' if item.is_done else '' }}">
                <form method="post"
                      action="{{ url_for('notes_toggle_item', note_id=note.id, item_id=item.id) }}"
                      class="check-form">
                    <input type="checkbox" name="is_done" value="1"
                           {% if item.is_done %}checked{% endif %}
                           onchange="this.form.submit()"
                           aria-label="Mark '{{ item.text }}' as done">
                    <noscript><button type="submit">[ Update ]</button></noscript>
                </form>
                <form method="post"
                      action="{{ url_for('notes_update_item', note_id=note.id, item_id=item.id) }}"
                      class="item-edit-form">
                    <input type="text" name="text" value="{{ item.text }}"
                           maxlength="255" required aria-label="Checklist item text">
                    <button type="submit">[ Save ]</button>
                </form>
                <form method="post"
                      action="{{ url_for('notes_delete_item', note_id=note.id, item_id=item.id) }}"
                      class="item-delete-form">
                    <button type="submit" title="Delete checklist item"
                            aria-label="Delete checklist item">[x]</button>
                </form>
            </li>
            {% endfor %}
        </ul>

        <form method="post" action="{{ url_for('notes_add_item', note_id=note.id) }}"
              class="add-item-form">
            <input type="text" name="text" maxlength="255" required
                   placeholder="New checklist item">
            <button type="submit">[ Add item ]</button>
        </form>

        <form method="post" action="{{ url_for('notes_delete', note_id=note.id) }}"
              class="note-delete-form">
            <button type="submit">[ Delete note ]</button>
        </form>
    </section>
    {% endfor %}

    <footer class="statusbar">
        <span>{{ user.username }}@yggdrasil:~/notes$</span>
    </footer>
</body>
</html>