Mercurial
diff mrjunejune/src/notes/index.html @ 219:8c9bb0b0759e hg-web
[hg-web] Merge current Zenbu baseline
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sun, 02 Aug 2026 08:34:54 -0700 |
| parents | 60918f88070e |
| children | 60a876c4587a |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/src/notes/index.html Sun Aug 02 08:34:54 2026 -0700 @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + {{/parts/base_head.html}} + <title>Notes</title> + <style> + .notes-page { + min-width: 70%; + margin: 0 auto; + padding: 20px; + } + .notes-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + flex-wrap: wrap; + gap: 12px; + } + .notes-header h1 { + margin: 0; + display: flex; + align-items: center; + gap: 12px; + } + .note-id-display { + font-size: 14px; + color: #666; + background: #f0f0f0; + padding: 4px 12px; + border-radius: 4px; + font-weight: normal; + } + .notes-actions { + display: flex; + gap: 8px; + align-items: center; + } + .notes-actions button, .notes-actions a { + padding: 8px 16px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + cursor: pointer; + text-decoration: none; + color: #333; + font-size: 14px; + } + .notes-actions button:hover, .notes-actions a:hover { + background: #f5f5f5; + } + .notes-actions .btn-primary { + background: #0078ff; + color: white; + border-color: #0078ff; + } + .notes-actions .btn-primary:hover { + background: #0066dd; + } + .notes-actions .btn-danger { + color: #d32f2f; + border-color: #d32f2f; + } + .new-note-dialog { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.5); + display: none; + align-items: center; + justify-content: center; + z-index: 100; + } + .new-note-dialog.show { + display: flex; + } + .new-note-form { + background: white; + padding: 24px; + border-radius: 8px; + width: 400px; + max-width: 90%; + } + .new-note-form h2 { + margin: 0 0 16px 0; + } + .new-note-form input { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; + box-sizing: border-box; + margin-bottom: 16px; + } + .new-note-form .form-actions { + display: flex; + gap: 8px; + justify-content: flex-end; + } + .new-note-form button { + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + } + .new-note-form .btn-cancel { + background: #f5f5f5; + border: 1px solid #ccc; + } + .new-note-form .btn-create { + background: #0078ff; + color: white; + border: none; + } + .note-hint { + font-size: 12px; + color: #666; + margin-top: -12px; + margin-bottom: 16px; + } + </style> +</head> +<body> + {{/parts/header.html}} + + <main class="notes-page"> + <div class="notes-header"> + <h1> + Notes + <span class="note-id-display" id="note-id-display">index</span> + </h1> + <div class="notes-actions"> + <button onclick="goHome()"> Home </button> + <button onclick="logout()" class="btn-danger">Logout</button> + </div> + </div> + + <div id="editor-container"></div> + </main> + + <!-- New Note Dialog --> + <div class="new-note-dialog" id="new-note-dialog"> + <div class="new-note-form"> + <h2>Create New Note</h2> + <input type="text" id="new-note-id" placeholder="note-id (e.g., my-ideas)"> + <p class="note-hint">Use lowercase letters, numbers, and hyphens only</p> + <div class="form-actions"> + <button class="btn-cancel" onclick="hideNewNoteDialog()">Cancel</button> + <button class="btn-create" onclick="createNewNote()">Create & Open</button> + </div> + </div> + </div> + + {{/parts/footer.html}} + + <script src="/public/js/rich_editor.js"></script> + <script src="/public/editor.js"></script> +</body> +</html>