notatki

server/templates/notes.html

@@ -0,0 +1,95 @@
+<!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('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">
+                    <span class="item-text">{{ item.text }}</span>
+                    <noscript><button type="submit">[ Update ]</button></noscript>
+                </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>