pkg/darkmatter/assets/index.html 9.0 K raw
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="theme-color" content="#121113">
7
  <title>Darkmatter — Gallery</title>
8
  <link rel="stylesheet" href="/assets/darkmatter.css">
9
  <style>
10
    .section { width: 100%; border-bottom: 1px solid #333; padding-bottom: 2rem; }
11
    .section h2 { font-size: 16px; margin-bottom: 0.5rem; }
12
    .section p.desc { font-size: 12px; opacity: 0.5; margin-bottom: 0.75rem; }
13
    .row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
14
    .swatch { width: 40px; height: 24px; border: 1px solid #333; }
15
    .opacity-scale { display: flex; flex-direction: column; gap: 0.25rem; }
16
  </style>
17
</head>
18
<body>
19
  <header class="header">
20
    <a href="/darkmatter" class="logo">DARKMATTER</a>
21
    <nav class="links">
22
      <a href="#reset">reset</a>
23
      <a href="#typography">typography</a>
24
      <a href="#buttons">buttons</a>
25
      <a href="#forms">forms</a>
26
      <a href="#feedback">feedback</a>
27
      <a href="#lists">lists</a>
28
      <a href="#tags">tags</a>
29
      <a href="#table">table</a>
30
      <a href="#code">code</a>
31
    </nav>
32
  </header>
33
34
  <main>
35
    <section class="section" id="reset">
36
      <h2>Palette</h2>
37
      <p class="desc">Background <code>#121113</code>, foreground <code>#ffffff</code>, grays <code>#1e1c1f</code> / <code>#333</code> / <code>#555</code>. No accent colors.</p>
38
      <div class="row">
39
        <div class="swatch" style="background:#121113"></div>
40
        <div class="swatch" style="background:#1e1c1f"></div>
41
        <div class="swatch" style="background:#333"></div>
42
        <div class="swatch" style="background:#555"></div>
43
        <div class="swatch" style="background:#ffffff"></div>
44
      </div>
45
    </section>
46
47
    <section class="section" id="typography">
48
      <h2>Typography</h2>
49
      <p class="desc">Commit Mono. Hierarchy by opacity, not gray hex.</p>
50
      <div class="opacity-scale">
51
        <div>Primary text — opacity 1.0</div>
52
        <div style="opacity: 0.7">Secondary text — opacity 0.7 (labels, blockquotes)</div>
53
        <div style="opacity: 0.5">Tertiary text — opacity 0.5 (metadata, dates, table headers)</div>
54
        <div style="opacity: 0.3">Muted text — opacity 0.3 (null, placeholder)</div>
55
      </div>
56
      <div class="row" style="margin-top: 0.75rem">
57
        <span style="font-size: 28px; font-weight: 700; text-transform: uppercase">LOGO 28</span>
58
        <span style="font-size: 18px">h1 18</span>
59
        <span style="font-size: 16px">h2 / title 16</span>
60
        <span style="font-size: 14px">body 14</span>
61
        <span style="font-size: 12px">meta 12</span>
62
        <span style="font-size: 11px">tag 11</span>
63
      </div>
64
    </section>
65
66
    <section class="section" id="buttons">
67
      <h2>Buttons &amp; links</h2>
68
      <p class="desc"><code>button</code>, <code>.btn</code>, <code>.link-button</code>, <code>.link-button.danger</code>, <code>.spinner</code>.</p>
69
      <div class="row">
70
        <button>Submit</button>
71
        <a href="#" class="btn">Link as button</a>
72
        <button class="loading">Saving<span class="spinner"></span></button>
73
        <button class="link-button">edit</button>
74
        <button class="link-button danger">delete</button>
75
        <a href="#">plain link</a>
76
      </div>
77
    </section>
78
79
    <section class="section" id="forms">
80
      <h2>Form controls</h2>
81
      <p class="desc">Inputs use 16px font-size to prevent iOS focus zoom. All <code>-webkit-appearance: none</code> to kill default iOS chrome.</p>
82
      <form class="form" onsubmit="event.preventDefault()">
83
        <div class="form-field">
84
          <label for="demo-text">Text input</label>
85
          <input id="demo-text" type="text" placeholder="placeholder">
86
        </div>
87
        <div class="form-field">
88
          <label for="demo-search">Search</label>
89
          <input id="demo-search" type="search" placeholder="search...">
90
        </div>
91
        <div class="form-row">
92
          <div class="form-field">
93
            <label for="demo-a">Split field A</label>
94
            <input id="demo-a" type="text">
95
          </div>
96
          <div class="form-field">
97
            <label for="demo-b">Split field B</label>
98
            <input id="demo-b" type="text">
99
          </div>
100
        </div>
101
        <div class="form-field">
102
          <label for="demo-select">Select</label>
103
          <select id="demo-select">
104
            <option>one</option>
105
            <option>two</option>
106
          </select>
107
        </div>
108
        <div class="form-field">
109
          <label for="demo-textarea">Textarea</label>
110
          <textarea id="demo-textarea" style="min-height: 120px">multiline input</textarea>
111
        </div>
112
        <div class="form-field">
113
          <label for="demo-file">File upload</label>
114
          <input id="demo-file" type="file">
115
        </div>
116
        <div class="form-field checkbox-field">
117
          <label>
118
            <input type="checkbox" checked>
119
            Checkbox (checked)
120
          </label>
121
          <label>
122
            <input type="checkbox">
123
            Checkbox (unchecked)
124
          </label>
125
        </div>
126
        <div class="form-field">
127
          <label>
128
            <input type="radio" name="demo-radio" checked> Option A
129
          </label>
130
          <label>
131
            <input type="radio" name="demo-radio"> Option B
132
          </label>
133
        </div>
134
        <div class="switch-row">
135
          <label class="switch">
136
            <input type="checkbox" checked>
137
            <span class="switch-slider"></span>
138
          </label>
139
          <span class="switch-label">Switch toggle</span>
140
        </div>
141
        <div class="form-actions">
142
          <button type="submit">Save</button>
143
          <button type="button" class="link-button danger">Cancel</button>
144
        </div>
145
      </form>
146
    </section>
147
148
    <section class="section" id="feedback">
149
      <h2>Feedback</h2>
150
      <p class="desc"><code>.error</code>, <code>.success</code>, <code>.empty</code>. No red/green — borders + opacity only.</p>
151
      <div class="error">Something went wrong.</div>
152
      <div class="success" style="margin-top: 0.5rem">Saved successfully.</div>
153
      <div class="empty" style="margin-top: 0.5rem">No items yet.</div>
154
    </section>
155
156
    <section class="section" id="lists">
157
      <h2>Item list</h2>
158
      <p class="desc"><code>.item-list</code> / <code>.item</code> — stacked with <code>#333</code> bottom divider.</p>
159
      <div class="item-list">
160
        <a href="#" class="item">
161
          <div class="item-title">First entry title</div>
162
          <div class="item-meta">apr 18, 2026</div>
163
        </a>
164
        <a href="#" class="item">
165
          <div class="item-title">Second entry title</div>
166
          <div class="item-meta">apr 17, 2026</div>
167
        </a>
168
      </div>
169
170
      <h2 style="margin-top: 1rem">Admin list</h2>
171
      <p class="desc"><code>.admin-list</code> — horizontal row with inline actions.</p>
172
      <div class="admin-list">
173
        <div class="admin-list-item">
174
          <div class="admin-list-info">
175
            <div class="admin-list-title">example-item-one</div>
176
            <div class="admin-list-meta">
177
              <span class="status-badge status-published">published</span>
178
              <span class="admin-list-date">2026-04-18</span>
179
            </div>
180
          </div>
181
          <div class="admin-list-actions">
182
            <a href="#">edit</a>
183
            <button class="link-button danger">delete</button>
184
          </div>
185
        </div>
186
        <div class="admin-list-item">
187
          <div class="admin-list-info">
188
            <div class="admin-list-title">example-item-two</div>
189
            <div class="admin-list-meta">
190
              <span class="status-badge status-draft">draft</span>
191
              <span class="admin-list-date">2026-04-17</span>
192
            </div>
193
          </div>
194
          <div class="admin-list-actions">
195
            <a href="#">edit</a>
196
            <button class="link-button danger">delete</button>
197
          </div>
198
        </div>
199
      </div>
200
    </section>
201
202
    <section class="section" id="tags">
203
      <h2>Tags</h2>
204
      <div class="row">
205
        <span class="tag">rust</span>
206
        <span class="tag">web</span>
207
        <span class="tag">css</span>
208
      </div>
209
    </section>
210
211
    <section class="section" id="table">
212
      <h2>Table</h2>
213
      <table>
214
        <thead>
215
          <tr>
216
            <th>name</th>
217
            <th>status</th>
218
            <th>date</th>
219
          </tr>
220
        </thead>
221
        <tbody>
222
          <tr>
223
            <td>first</td>
224
            <td>ok</td>
225
            <td style="opacity: 0.5">2026-04-18</td>
226
          </tr>
227
          <tr>
228
            <td>second</td>
229
            <td>ok</td>
230
            <td style="opacity: 0.5">2026-04-17</td>
231
          </tr>
232
        </tbody>
233
      </table>
234
    </section>
235
236
    <section class="section" id="code">
237
      <h2>Code</h2>
238
      <p>Inline <code>let x = 42;</code> and block:</p>
239
      <pre><code>fn main() {
240
    println!("hello, darkmatter");
241
}</code></pre>
242
    </section>
243
  </main>
244
245
  <footer class="footer">
246
    <span style="opacity: 0.5; font-size: 12px">darkmatter-css · andromeda workspace</span>
247
  </footer>
248
</body>
249
</html>