Mercurial

comparison mrjunejune/src/notes/index.html @ 219:8c9bb0b0759e hg-web

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[hg-web] Merge current Zenbu baseline
author MrJuneJune <me@mrjunejune.com>
date Sun, 02 Aug 2026 08:34:54 -0700
parents 60918f88070e
children 60a876c4587a
comparison
equal deleted inserted replaced
218:921ca3086879 219:8c9bb0b0759e
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 {{/parts/base_head.html}}
5 <title>Notes</title>
6 <style>
7 .notes-page {
8 min-width: 70%;
9 margin: 0 auto;
10 padding: 20px;
11 }
12 .notes-header {
13 display: flex;
14 justify-content: space-between;
15 align-items: center;
16 margin-bottom: 20px;
17 flex-wrap: wrap;
18 gap: 12px;
19 }
20 .notes-header h1 {
21 margin: 0;
22 display: flex;
23 align-items: center;
24 gap: 12px;
25 }
26 .note-id-display {
27 font-size: 14px;
28 color: #666;
29 background: #f0f0f0;
30 padding: 4px 12px;
31 border-radius: 4px;
32 font-weight: normal;
33 }
34 .notes-actions {
35 display: flex;
36 gap: 8px;
37 align-items: center;
38 }
39 .notes-actions button, .notes-actions a {
40 padding: 8px 16px;
41 border: 1px solid #ccc;
42 border-radius: 4px;
43 background: #fff;
44 cursor: pointer;
45 text-decoration: none;
46 color: #333;
47 font-size: 14px;
48 }
49 .notes-actions button:hover, .notes-actions a:hover {
50 background: #f5f5f5;
51 }
52 .notes-actions .btn-primary {
53 background: #0078ff;
54 color: white;
55 border-color: #0078ff;
56 }
57 .notes-actions .btn-primary:hover {
58 background: #0066dd;
59 }
60 .notes-actions .btn-danger {
61 color: #d32f2f;
62 border-color: #d32f2f;
63 }
64 .new-note-dialog {
65 position: fixed;
66 top: 0;
67 left: 0;
68 right: 0;
69 bottom: 0;
70 background: rgba(0,0,0,0.5);
71 display: none;
72 align-items: center;
73 justify-content: center;
74 z-index: 100;
75 }
76 .new-note-dialog.show {
77 display: flex;
78 }
79 .new-note-form {
80 background: white;
81 padding: 24px;
82 border-radius: 8px;
83 width: 400px;
84 max-width: 90%;
85 }
86 .new-note-form h2 {
87 margin: 0 0 16px 0;
88 }
89 .new-note-form input {
90 width: 100%;
91 padding: 10px;
92 border: 1px solid #ccc;
93 border-radius: 4px;
94 font-size: 16px;
95 box-sizing: border-box;
96 margin-bottom: 16px;
97 }
98 .new-note-form .form-actions {
99 display: flex;
100 gap: 8px;
101 justify-content: flex-end;
102 }
103 .new-note-form button {
104 padding: 8px 16px;
105 border-radius: 4px;
106 cursor: pointer;
107 font-size: 14px;
108 }
109 .new-note-form .btn-cancel {
110 background: #f5f5f5;
111 border: 1px solid #ccc;
112 }
113 .new-note-form .btn-create {
114 background: #0078ff;
115 color: white;
116 border: none;
117 }
118 .note-hint {
119 font-size: 12px;
120 color: #666;
121 margin-top: -12px;
122 margin-bottom: 16px;
123 }
124 </style>
125 </head>
126 <body>
127 {{/parts/header.html}}
128
129 <main class="notes-page">
130 <div class="notes-header">
131 <h1>
132 Notes
133 <span class="note-id-display" id="note-id-display">index</span>
134 </h1>
135 <div class="notes-actions">
136 <button onclick="goHome()"> Home </button>
137 <button onclick="logout()" class="btn-danger">Logout</button>
138 </div>
139 </div>
140
141 <div id="editor-container"></div>
142 </main>
143
144 <!-- New Note Dialog -->
145 <div class="new-note-dialog" id="new-note-dialog">
146 <div class="new-note-form">
147 <h2>Create New Note</h2>
148 <input type="text" id="new-note-id" placeholder="note-id (e.g., my-ideas)">
149 <p class="note-hint">Use lowercase letters, numbers, and hyphens only</p>
150 <div class="form-actions">
151 <button class="btn-cancel" onclick="hideNewNoteDialog()">Cancel</button>
152 <button class="btn-create" onclick="createNewNote()">Create & Open</button>
153 </div>
154 </div>
155 </div>
156
157 {{/parts/footer.html}}
158
159 <script src="/public/js/rich_editor.js"></script>
160 <script src="/public/editor.js"></script>
161 </body>
162 </html>