Mercurial

comparison mrjunejune/src/notes/index.html @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 60918f88070e
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
5 <title>Notes</title> 5 <title>Notes</title>
6 <style> 6 <style>
7 .notes-page { 7 .notes-page {
8 min-width: 70%; 8 min-width: 70%;
9 margin: 0 auto; 9 margin: 0 auto;
10 padding: 20px; 10 padding: var(--zenbu-sys-padding-lg);
11 } 11 }
12 .notes-header { 12 .notes-header {
13 display: flex; 13 display: flex;
14 justify-content: space-between; 14 justify-content: space-between;
15 align-items: center; 15 align-items: center;
16 margin-bottom: 20px; 16 margin-bottom: 20px;
17 flex-wrap: wrap; 17 flex-wrap: wrap;
18 gap: 12px; 18 gap: var(--zenbu-sys-space-control);
19 } 19 }
20 .notes-header h1 { 20 .notes-header h1 {
21 margin: 0; 21 margin: 0;
22 display: flex; 22 display: flex;
23 align-items: center; 23 align-items: center;
24 gap: 12px; 24 gap: var(--zenbu-sys-space-control);
25 } 25 }
26 .note-id-display { 26 .note-id-display {
27 font-size: 14px; 27 font-size: var(--zenbu-sys-font-size-sm);
28 color: #666; 28 color: #666;
29 background: #f0f0f0; 29 background: #f0f0f0;
30 padding: 4px 12px; 30 padding:
31 border-radius: 4px; 31 var(--zenbu-sys-control-padding-block-xs)
32 var(--zenbu-sys-control-padding-inline-sm);
33 border-radius: var(--zenbu-sys-radius-control-small);
32 font-weight: normal; 34 font-weight: normal;
33 } 35 }
34 .notes-actions { 36 .notes-actions {
35 display: flex; 37 display: flex;
36 gap: 8px; 38 gap: var(--zenbu-sys-space-related);
37 align-items: center; 39 align-items: center;
38 } 40 }
39 .notes-actions button, .notes-actions a { 41 .notes-actions button, .notes-actions a {
40 padding: 8px 16px;
41 border: 1px solid #ccc; 42 border: 1px solid #ccc;
42 border-radius: 4px; 43 border-radius: var(--zenbu-sys-radius-control-small);
43 background: #fff; 44 background: #fff;
44 cursor: pointer; 45 cursor: pointer;
45 text-decoration: none; 46 text-decoration: none;
46 color: #333; 47 color: #333;
47 font-size: 14px;
48 } 48 }
49 .notes-actions button:hover, .notes-actions a:hover { 49 .notes-actions button:hover, .notes-actions a:hover {
50 background: #f5f5f5; 50 background: #f5f5f5;
51 } 51 }
52 .notes-actions .btn-primary { 52 .notes-actions .btn-primary {
76 .new-note-dialog.show { 76 .new-note-dialog.show {
77 display: flex; 77 display: flex;
78 } 78 }
79 .new-note-form { 79 .new-note-form {
80 background: white; 80 background: white;
81 padding: 24px; 81 padding: var(--zenbu-sys-padding-lg);
82 border-radius: 8px; 82 border-radius: var(--zenbu-sys-radius-control);
83 width: 400px; 83 width: 400px;
84 max-width: 90%; 84 max-width: 90%;
85 } 85 }
86 .new-note-form h2 { 86 .new-note-form h2 {
87 margin: 0 0 16px 0; 87 margin: 0 0 16px 0;
88 } 88 }
89 .new-note-form input { 89 .new-note-form input {
90 width: 100%; 90 width: 100%;
91 padding: 10px; 91 padding: var(--zenbu-sys-padding-sm);
92 border: 1px solid #ccc; 92 border: 1px solid #ccc;
93 border-radius: 4px; 93 border-radius: var(--zenbu-sys-radius-control-small);
94 font-size: 16px; 94 font-size: var(--zenbu-sys-font-size-md);
95 box-sizing: border-box; 95 box-sizing: border-box;
96 margin-bottom: 16px; 96 margin-bottom: 16px;
97 } 97 }
98 .new-note-form .form-actions { 98 .new-note-form .form-actions {
99 display: flex; 99 display: flex;
100 gap: 8px; 100 gap: var(--zenbu-sys-space-related);
101 justify-content: flex-end; 101 justify-content: flex-end;
102 } 102 }
103 .new-note-form button { 103 .new-note-form button {
104 padding: 8px 16px; 104 border-radius: var(--zenbu-sys-radius-control-small);
105 border-radius: 4px;
106 cursor: pointer; 105 cursor: pointer;
107 font-size: 14px;
108 } 106 }
109 .new-note-form .btn-cancel { 107 .new-note-form .btn-cancel {
110 background: #f5f5f5; 108 background: #f5f5f5;
111 border: 1px solid #ccc; 109 border: 1px solid #ccc;
112 } 110 }
114 background: #0078ff; 112 background: #0078ff;
115 color: white; 113 color: white;
116 border: none; 114 border: none;
117 } 115 }
118 .note-hint { 116 .note-hint {
119 font-size: 12px; 117 font-size: var(--zenbu-sys-font-size-xs);
120 color: #666; 118 color: #666;
121 margin-top: -12px; 119 margin-top: -12px;
122 margin-bottom: 16px; 120 margin-bottom: 16px;
123 } 121 }
124 </style> 122 </style>
131 <h1> 129 <h1>
132 Notes 130 Notes
133 <span class="note-id-display" id="note-id-display">index</span> 131 <span class="note-id-display" id="note-id-display">index</span>
134 </h1> 132 </h1>
135 <div class="notes-actions"> 133 <div class="notes-actions">
136 <button onclick="goHome()"> Home </button> 134 <zen-button appearance="plain" size="sm">
137 <button onclick="logout()" class="btn-danger">Logout</button> 135 <button onclick="goHome()"> Home </button>
136 </zen-button>
137 <zen-button appearance="plain" size="sm">
138 <button onclick="logout()" class="btn-danger">Logout</button>
139 </zen-button>
138 </div> 140 </div>
139 </div> 141 </div>
140 142
141 <div id="editor-container"></div> 143 <div id="editor-container"></div>
142 </main> 144 </main>
143 145
144 <!-- New Note Dialog --> 146 <!-- New Note Dialog -->
145 <div class="new-note-dialog" id="new-note-dialog"> 147 <div class="new-note-dialog" id="new-note-dialog">
146 <div class="new-note-form"> 148 <div class="new-note-form">
147 <h2>Create New Note</h2> 149 <h2>Create New Note</h2>
148 <input type="text" id="new-note-id" placeholder="note-id (e.g., my-ideas)"> 150 <zen-input appearance="plain" size="md">
151 <input type="text" id="new-note-id" placeholder="note-id (e.g., my-ideas)">
152 </zen-input>
149 <p class="note-hint">Use lowercase letters, numbers, and hyphens only</p> 153 <p class="note-hint">Use lowercase letters, numbers, and hyphens only</p>
150 <div class="form-actions"> 154 <div class="form-actions">
151 <button class="btn-cancel" onclick="hideNewNoteDialog()">Cancel</button> 155 <zen-button appearance="plain" size="sm">
152 <button class="btn-create" onclick="createNewNote()">Create & Open</button> 156 <button class="btn-cancel" onclick="hideNewNoteDialog()">Cancel</button>
157 </zen-button>
158 <zen-button appearance="plain" size="sm">
159 <button class="btn-create" onclick="createNewNote()">Create & Open</button>
160 </zen-button>
153 </div> 161 </div>
154 </div> 162 </div>
155 </div> 163 </div>
156 164
157 {{/parts/footer.html}} 165 {{/parts/footer.html}}