Mercurial

comparison mrjunejune/src/notes/login.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 6cdee35a7ba9
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
5 <title>Login | Notes</title> 5 <title>Login | Notes</title>
6 <style> 6 <style>
7 .login-page { 7 .login-page {
8 max-width: 400px; 8 max-width: 400px;
9 margin: 100px auto; 9 margin: 100px auto;
10 padding: 20px; 10 padding: var(--zenbu-sys-padding-lg);
11 } 11 }
12 .login-box { 12 .login-box {
13 background: #fff; 13 background: #fff;
14 border: 1px solid #ddd; 14 border: 1px solid #ddd;
15 border-radius: 8px; 15 border-radius: var(--zenbu-sys-radius-control);
16 padding: 32px; 16 padding: var(--zenbu-sys-padding-xl);
17 box-shadow: 0 2px 8px rgba(0,0,0,0.1); 17 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
18 } 18 }
19 .login-box h1 { 19 .login-box h1 {
20 margin: 0 0 24px 0; 20 margin: 0 0 24px 0;
21 font-size: 24px; 21 font-size: var(--zenbu-sys-font-size-2xl);
22 text-align: center; 22 text-align: center;
23 } 23 }
24 .login-box label { 24 .login-box label {
25 display: block; 25 display: block;
26 margin-bottom: 8px; 26 margin-bottom: 8px;
27 font-weight: 500; 27 font-weight: 500;
28 } 28 }
29 .login-box input { 29 .login-box input {
30 width: 100%; 30 width: 100%;
31 padding: 12px; 31 min-height: var(--zenbu-control-height);
32 padding:
33 var(--zenbu-control-padding-block)
34 var(--zenbu-control-padding-inline);
32 border: 1px solid #ccc; 35 border: 1px solid #ccc;
33 border-radius: 4px; 36 border-radius: var(--zenbu-sys-radius-control-small);
34 font-size: 16px; 37 font-size: var(--zenbu-control-font-size);
38 line-height: var(--zenbu-control-line-height);
35 box-sizing: border-box; 39 box-sizing: border-box;
36 } 40 }
37 .login-box input:focus { 41 .login-box input:focus {
38 outline: none; 42 outline: none;
39 border-color: #0078ff; 43 border-color: #0078ff;
40 } 44 }
41 .login-box button { 45 .login-box button {
42 width: 100%; 46 width: 100%;
43 padding: 12px;
44 margin-top: 16px; 47 margin-top: 16px;
45 background: #0078ff; 48 background: #0078ff;
46 color: white; 49 color: white;
47 border: none; 50 border: none;
48 border-radius: 4px; 51 border-radius: var(--zenbu-sys-radius-control-small);
49 font-size: 16px;
50 cursor: pointer; 52 cursor: pointer;
53 }
54 .login-box zen-button {
55 width: 100%;
51 } 56 }
52 .login-box button:hover { 57 .login-box button:hover {
53 background: #0066dd; 58 background: #0066dd;
54 } 59 }
55 .error-msg { 60 .error-msg {
65 70
66 <main class="login-page"> 71 <main class="login-page">
67 <div class="login-box"> 72 <div class="login-box">
68 <h1>Notes Login</h1> 73 <h1>Notes Login</h1>
69 <form id="login-form"> 74 <form id="login-form">
70 <label for="token">Access Token</label> 75 <zen-field appearance="plain" size="lg">
71 <input type="password" id="token" placeholder="Enter your access token" required> 76 <label for="token">Access Token</label>
72 <button type="submit">Login</button> 77 <input type="password" id="token" placeholder="Enter your access token" required>
78 </zen-field>
79 <zen-button appearance="plain" size="lg">
80 <button type="submit">Login</button>
81 </zen-button>
73 <p class="error-msg" id="error-msg">Invalid token</p> 82 <p class="error-msg" id="error-msg">Invalid token</p>
74 </form> 83 </form>
75 </div> 84 </div>
76 </main> 85 </main>
77 86