File size: 31,687 Bytes
63b381a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<html lang="en" data-preview-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="generator" content="archify gallery [[ARCHIFY_VERSION]]">
  <title>Archify Proof Lab — Generated Diagram Gallery</title>
  <meta name="description" content="A generated gallery of validated, self-contained Archify diagrams. Every preview links to its exact JSON source and interactive HTML artifact.">
  <meta name="theme-color" content="#eff2f1">
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><polygon points='14,2 26,8 26,20 14,26 2,20 2,8' fill='%23083344' stroke='%2322d3ee' stroke-width='1.5'/><circle cx='14' cy='15' r='2.5' fill='%2322d3ee'/></svg>">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/site-navigation.css">
  <style>
    :root {
      /* Drafted-sheet palette — shared with the project page */
      --paper-site:#eff2f1; --paper-raised:#f8faf9;
      --ink-site:#15181b; --ink-soft:#363c41; --muted:#60686d; --dim:#929a9e;
      --line:rgba(20,23,26,0.14); --line-hi:rgba(20,23,26,0.3);
      --accent-site:#e14a0e; --accent-soft:rgba(225,74,14,0.08);
      --plate:#0f1216;
      --emerald:#047857;
      --font-display:'Fraunces','Songti SC','STSong',Georgia,serif;
      --font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
      --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
      --ease-out:cubic-bezier(.22,1,.36,1);
      --content: 1320px;
    }
    *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family:var(--font-body);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      background:var(--paper-site); color:var(--ink-site); min-height:100vh; overflow-x:hidden;
    }
    body::after {
      content:''; position:fixed; inset:0; z-index:1000; pointer-events:none;
      opacity:.05; mix-blend-mode:multiply;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
    }
    ::selection { background:rgba(225,74,14,.18); color:var(--ink-site); }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font:inherit; }
    :focus-visible { outline: 2px solid var(--accent-site); outline-offset: 3px; border-radius:4px; }

    .grid-bg {
      position:fixed; inset:0; z-index:0; pointer-events:none;
      background-image:linear-gradient(rgba(20,23,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,23,26,.045) 1px,transparent 1px);
      background-size:56px 56px;
      -webkit-mask-image:radial-gradient(ellipse 95% 62% at 50% -6%, black 12%, transparent 75%);
      mask-image:radial-gradient(ellipse 95% 62% at 50% -6%, black 12%, transparent 75%);
    }
    .shell { position:relative; z-index:1; width: min(var(--content), calc(100% - 48px)); margin: 0 auto; }

    .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.15rem; border-radius:6px; font-family:var(--font-body); font-size:.8125rem; font-weight:500; letter-spacing:-.005em; cursor:pointer; text-decoration:none; transition:all .2s var(--ease-out); border:1px solid transparent; }
    .btn-primary { background:var(--ink-site); color:var(--paper-site); }
    .btn-primary:hover { background:#272c31; transform:translateY(-1px); }
    /* HERO */
    .hero { padding: 10rem 0 4.5rem; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr); gap: 4.5rem; align-items: end; }
    .lead-label { display:flex; align-items:center; gap:.875rem; margin-bottom:1.5rem; font-family:var(--font-mono); font-size:.625rem; font-weight:500; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }
    .lead-label::before { content:''; width:2.75rem; height:1px; background:var(--line-hi); }
    .hero h1 {
      max-width: 860px;
      font-family:var(--font-display); font-optical-sizing:auto;
      font-size: clamp(2.75rem, 6vw, 5rem);
      font-weight:400; line-height: 1.02; letter-spacing: -.03em;
      color:var(--ink-site); text-wrap: balance;
    }
    .hero h1 em { font-style:italic; color: var(--accent-site); }
    .hero-copy { margin-top: 1.5rem; max-width: 640px; color: var(--muted); font-size: .9375rem; line-height: 1.72; text-wrap:pretty; }
    .hero-copy strong { color: var(--ink-site); font-weight: 500; }
    .proof-board { border:1px solid var(--line-hi); border-radius:12px; background:var(--paper-raised); overflow:hidden; }
    .proof-row { min-height: 64px; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap:1rem; padding:.9rem 1.25rem; border-bottom: 1px solid var(--line); }
    .proof-row:last-child { border-bottom:0; }
    .proof-value { font-family:var(--font-display); font-style:italic; font-optical-sizing:auto; font-weight:400; font-size: 1.625rem; line-height:1; color: var(--ink-site); }
    .proof-label { color: var(--dim); font-family:var(--font-mono); font-size: .5625rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
    .proof-status { display: inline-flex; align-items: center; gap: .5rem; color: var(--emerald); font-style:normal; font-family:var(--font-mono); font-size:.8125rem; font-weight:600; letter-spacing:.08em; }
    .proof-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }

    /* CONTROLS */
    .controls { padding: 1.25rem 0; border-top:1px solid var(--line); border-bottom: 1px solid var(--line); }
    .controls-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
    .controls-actions { display:flex; align-items:center; justify-content:flex-end; gap:1rem; }
    .filter-button {
      min-height: 44px;
      padding: 0 .85rem;
      border: 1px solid var(--line-hi);
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-family:var(--font-mono); font-size:.5625rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
      cursor: pointer;
      transition:all .18s var(--ease-out);
    }
    .filter-button:hover { color: var(--ink-site); border-color:var(--ink-site); }
    .filter-button[aria-pressed="true"] { color: var(--paper-site); background:var(--ink-site); border-color:var(--ink-site); }
    .controls-note { color: var(--dim); font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .12em; text-align: right; text-transform: uppercase; }

    /* GALLERY */
    .gallery-section { padding: 4rem 0 6rem; }
    .section-intro { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.75rem; }
    .section-intro h2 { font-family:var(--font-display); font-optical-sizing:auto; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight:400; letter-spacing: -.026em; color:var(--ink-site); }
    .section-intro p { max-width: 440px; color: var(--muted); font-size: .8125rem; line-height: 1.7; text-align: right; }
    .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .showcase-card {
      min-width: 0;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line-hi);
      border-radius: 14px;
      background: var(--paper-raised);
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
    }
    .showcase-card.visible { opacity: 1; transform: translateY(0); }
    .showcase-card:hover { border-color: var(--ink-site); box-shadow:0 22px 54px rgba(20,23,26,.12); }
    .showcase-card:target { scroll-margin-top: 86px; border-color: var(--accent, var(--accent-site)); box-shadow: 0 0 0 1px var(--accent, var(--accent-site)), 0 24px 60px rgba(20,23,26,.14); }
    .showcase-card.is-featured { grid-column: 1 / -1; }
    .showcase-card[hidden] { display: none; }
    .card-header { min-height: 76px; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
    .card-index { height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--dim); font-family:var(--font-display); font-style:italic; font-optical-sizing:auto; font-size: 1.125rem; }
    .card-title-wrap { min-width: 0; padding: 1rem 1.375rem; }
    .card-kicker { margin-bottom: .35rem; color: var(--accent, var(--accent-site)); font-family:var(--font-mono); font-size: .5625rem; font-weight:600; letter-spacing: .14em; text-transform: uppercase; }
    .card-title { font-family:var(--font-display); font-optical-sizing:auto; font-size: 1.375rem; font-weight:500; letter-spacing: -.02em; color:var(--ink-site); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-mode { margin-right: 1.375rem; padding: .4rem .65rem; border: 1px solid var(--line); border-radius:999px; color: var(--muted); font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; }
    .preview-shell { position: relative; height: 370px; overflow: hidden; background: var(--plate); border-bottom: 1px solid var(--line); }
    .showcase-card.is-featured .preview-shell { height: 600px; }
    .preview-shell iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: var(--plate); }
    .live-flag { position: absolute; z-index: 2; top: .875rem; left: .875rem; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .6rem; border: 1px solid rgba(52,211,153,.35); border-radius:6px; background: rgba(15,18,22,.82); color: #34d399; font-family:var(--font-mono); font-size: .5rem; font-weight:600; letter-spacing: .14em; text-transform: uppercase; }
    .live-flag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .card-body { padding: 1.5rem 1.625rem 1.5rem; }
    .card-description { min-height: 44px; margin-bottom: 1.25rem; color: var(--muted); font-size: .8125rem; line-height: 1.7; text-wrap:pretty; }
    .engineering-proof { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.375rem 0 .875rem; padding: .6rem .8rem; border: 1px solid rgba(4,120,87,.3); border-radius: 8px; background: rgba(4,120,87,.05); color: var(--dim); font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; }
    .engineering-proof strong { color: var(--emerald); font-weight: 600; white-space: nowrap; }
    .receipt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius:8px; overflow:hidden; }
    .receipt-cell { min-width: 0; padding: .7rem .8rem; border-right: 1px solid var(--line); }
    .receipt-cell:last-child { border-right: 0; }
    .receipt-label { display: block; margin-bottom: .35rem; color: var(--dim); font-family:var(--font-mono); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; }
    .receipt-value { display: block; color: var(--ink-soft); font-family:var(--font-mono); font-size: .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .receipt-value.ok { color: var(--emerald); }
    .card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.25rem; }
    .card-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 .9rem; border: 1px solid var(--line-hi); border-radius: 8px; color: var(--ink-soft); font-size: .75rem; font-weight: 500; text-decoration: none; transition: all .2s var(--ease-out); }
    .card-link:hover { color: var(--ink-site); border-color: var(--ink-site); }
    .card-link.primary { border-color: var(--ink-site); background:var(--ink-site); color: var(--paper-site); }
    .card-link.primary:hover { background:var(--accent-site); border-color: var(--accent-site); color:var(--paper-site); }
    .card-link.create-link { margin-left: auto; border-color: rgba(4,120,87,.35); color: var(--emerald); background: rgba(4,120,87,.05); }
    .card-link.create-link:hover { border-color: var(--emerald); background: rgba(4,120,87,.1); color:var(--emerald); }
    .empty-state { display: none; margin-top:14px; padding: 4rem 1.5rem; border: 1px dashed var(--line-hi); border-radius:14px; color: var(--muted); text-align: center; font-size: .8125rem; }
    .empty-state.visible { display: block; }
    .community-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; margin-top: 14px; padding: 1.75rem 2rem; border: 1px solid rgba(4,120,87,.3); border-radius:14px; background: rgba(4,120,87,.045); }
    .community-callout-copy { max-width: 760px; }
    .community-callout-title { display: block; margin-bottom: .5rem; color: var(--ink-site); font-family:var(--font-display); font-optical-sizing:auto; font-size: 1.25rem; font-weight:500; letter-spacing: -.02em; }
    .community-callout p { color: var(--muted); font-size: .8125rem; line-height: 1.7; }
    .community-callout .card-link { min-width: 220px; border-color: rgba(4,120,87,.4); color: var(--emerald); background: rgba(4,120,87,.06); }
    .community-callout .card-link:hover { border-color: var(--emerald); background: rgba(4,120,87,.12); color:var(--emerald); }

    /* METHOD */
    .method { border-top: 1px solid var(--line); padding: 4.5rem 0; }
    .method-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4.5rem; }
    .method h2 { font-family:var(--font-display); font-optical-sizing:auto; font-size: clamp(1.5rem,2.6vw,2.25rem); font-weight:400; letter-spacing: -.026em; color:var(--ink-site); }
    .method-copy { color: var(--muted); font-size: .8125rem; line-height: 1.8; }
    .pipeline { margin-top: 1.75rem; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line-hi); border-radius:12px; overflow:hidden; }
    .pipeline-step { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 1rem; min-height: 56px; padding: 0 1.125rem; background: var(--paper-raised); }
    .pipeline-num { color: var(--accent-site); font-family:var(--font-mono); font-size: .625rem; font-weight:600; }
    .pipeline-label { font-size: .8125rem; color:var(--ink-soft); }
    .pipeline-state { color: var(--emerald); font-family:var(--font-mono); font-size: .5625rem; font-weight:600; letter-spacing: .12em; text-transform: uppercase; }
    .method-code { border: 1px solid var(--ink-site); border-radius:12px; overflow:hidden; background: var(--plate); align-self:start; }
    .method-code-bar { display: flex; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid rgba(232,237,242,.1); color: #7d8894; font-family:var(--font-mono); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; }
    .method-code pre { margin: 0; padding: 1.5rem; color: #aab3bb; font: 500 .6875rem/1.9 var(--font-mono); white-space: pre-wrap; }
    .method-code .accent { color: var(--accent-site); }

    footer { border-top: 1px solid var(--line); padding: 1.75rem 0 2.5rem; color: var(--dim); font-family:var(--font-mono); font-size: .625rem; letter-spacing:.04em; }
    .footer-inner { display: flex; justify-content: space-between; gap: 1.5rem; }

    @media (max-width: 960px) {
      .hero-grid, .method-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .proof-board { display: grid; grid-template-columns: repeat(3, 1fr); }
      .proof-row { grid-template-columns: 1fr; align-content: center; gap: .35rem; border-bottom:0; border-right: 1px solid var(--line); }
      .proof-row:last-child { border-right:0; }
      .gallery-grid { grid-template-columns: 1fr; }
      .showcase-card.is-featured { grid-column: auto; }
      .showcase-card.is-featured .preview-shell { height: 440px; }
    }
    @media (max-width: 640px) {
      .shell { width: min(100% - 28px, var(--content)); }
      .hero { padding: 7.5rem 0 3rem; }
      .hero h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
      .proof-board { grid-template-columns: 1fr; }
      .proof-row { grid-template-columns: 72px 1fr; min-height: 54px; border-right: 0; border-bottom:1px solid var(--line); }
      .proof-row:last-child { border-bottom:0; }
      .controls-inner, .section-intro { align-items: flex-start; flex-direction: column; }
      .controls-actions { width:100%; justify-content:space-between; }
      .controls-note, .section-intro p { text-align: left; }
      .filter-group { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
      .card-header { grid-template-columns: 48px 1fr; }
      .card-mode { display: none; }
      .card-title-wrap { padding: .9rem 1rem; }
      .card-title { font-size: 1.125rem; }
      .preview-shell, .showcase-card.is-featured .preview-shell { height: 310px; }
      .card-body { padding: 1.125rem 1rem; }
      .engineering-proof { align-items: flex-start; flex-direction: column; gap: .35rem; }
      .receipt { grid-template-columns: 1fr 1fr; }
      .receipt-cell:nth-child(2) { border-right: 0; }
      .receipt-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .card-actions { flex-wrap: wrap; }
      .card-link { flex: 1; min-width: 118px; }
      .card-link.create-link { margin-left: 0; }
      .community-callout { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem; }
      .community-callout .card-link { width: 100%; min-width: 0; }
      .method { padding: 3.25rem 0; }
      .footer-inner { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .showcase-card { opacity:1; transform:none; transition:none; }
    }
  </style>
</head>
<body>
  <div class="grid-bg" aria-hidden="true"></div>

  <nav class="site-nav" aria-label="Primary navigation">
    <a class="nav-logo" href="./" aria-label="Back to Archify home">
      <span class="nav-logo-text">Archify</span>
      <span class="nav-logo-path" data-en="/ proof lab" data-zh="/ 验证作品集">/ proof lab</span>
    </a>
    <div class="nav-right">
      <a class="nav-link" href="guide.html" data-en="Guide" data-zh="场景指南">Guide</a>
      <a class="nav-link" href="gallery.html" aria-current="page" data-en="Proof Lab" data-zh="验证作品集">Proof Lab</a>
      <a class="nav-link" href="start.html" data-en="Start" data-zh="快速上手">Start</a>
      <a class="nav-link" href="https://github.com/tt-a1i/archify" target="_blank" rel="noopener">GitHub</a>
      <button class="btn-lang" id="language" type="button" aria-label="Switch language">中文</button>
      <a class="btn btn-primary nav-cta" href="start.html" data-en="Install Skill" data-zh="安装技能">Install Skill</a>
    </div>
  </nav>

  <main>
    <section class="hero">
      <div class="shell hero-grid">
        <div>
          <div class="lead-label" data-en="Generated showcase / verified artifacts" data-zh="自动生成作品集 / 真实验证成品">Generated showcase / verified artifacts</div>
          <h1 data-en="Proof,<br><em>not promises.</em>" data-zh="先看成品,<br><em>再谈能力。</em>">Proof,<br><em>not promises.</em></h1>
          <p class="hero-copy" data-en="Every frame below is a live Archify artifact—not a mockup. Each one is regenerated from versioned JSON IR, checked for structural integrity, and linked to the exact source that produced it." data-zh="下面每一帧都是可运行的 Archify 成品,不是效果图。它们全部由版本化 JSON IR 重新生成、经过结构检查,并链接到产生它的精确源数据。">Every frame below is a live Archify artifact—not a mockup. Each one is regenerated from versioned JSON IR, checked for structural integrity, and linked to the exact source that produced it.</p>
        </div>
        <div class="proof-board" aria-label="Gallery quality summary">
          <div class="proof-row"><span class="proof-value">[[ENTRY_COUNT]]</span><span class="proof-label" data-en="scenario proofs<br>from real IR" data-zh="个场景成品<br>来自真实 IR">scenario proofs<br>from real IR</span></div>
          <div class="proof-row"><span class="proof-value">[[CHECK_COUNT]]</span><span class="proof-label" data-en="structural checks<br>passed" data-zh="项结构检查<br>全部通过">structural checks<br>passed</span></div>
          <div class="proof-row"><span class="proof-value proof-status">PASS</span><span class="proof-label" data-en="generated from<br>source of truth" data-zh="从源数据<br>自动生成">generated from<br>source of truth</span></div>
        </div>
      </div>
    </section>

    <section class="controls" aria-label="Gallery controls">
      <div class="shell controls-inner">
        <div class="filter-group" role="group" aria-label="Filter diagrams by type">
          <button class="filter-button" type="button" data-filter="all" aria-pressed="true" data-en="All / [[ENTRY_COUNT]]" data-zh="全部配方 / [[ENTRY_COUNT]]">All / [[ENTRY_COUNT]]</button>
          <button class="filter-button" type="button" data-filter="architecture" aria-pressed="false" data-en="[[DIAGRAM_TYPE_ARCHITECTURE_EN]]" data-zh="[[DIAGRAM_TYPE_ARCHITECTURE_ZH]]">[[DIAGRAM_TYPE_ARCHITECTURE_EN]]</button>
          <button class="filter-button" type="button" data-filter="workflow" aria-pressed="false" data-en="[[DIAGRAM_TYPE_WORKFLOW_EN]]" data-zh="[[DIAGRAM_TYPE_WORKFLOW_ZH]]">[[DIAGRAM_TYPE_WORKFLOW_EN]]</button>
          <button class="filter-button" type="button" data-filter="sequence" aria-pressed="false" data-en="[[DIAGRAM_TYPE_SEQUENCE_EN]]" data-zh="[[DIAGRAM_TYPE_SEQUENCE_ZH]]">[[DIAGRAM_TYPE_SEQUENCE_EN]]</button>
          <button class="filter-button" type="button" data-filter="dataflow" aria-pressed="false" data-en="[[DIAGRAM_TYPE_DATAFLOW_EN]]" data-zh="[[DIAGRAM_TYPE_DATAFLOW_ZH]]">[[DIAGRAM_TYPE_DATAFLOW_EN]]</button>
          <button class="filter-button" type="button" data-filter="lifecycle" aria-pressed="false" data-en="[[DIAGRAM_TYPE_LIFECYCLE_EN]]" data-zh="[[DIAGRAM_TYPE_LIFECYCLE_ZH]]">[[DIAGRAM_TYPE_LIFECYCLE_EN]]</button>
        </div>
        <div class="controls-actions">
          <button class="filter-button" id="preview-theme" type="button">Preview: dark</button>
          <div class="controls-note" data-en="Live HTML previews · open any artifact to explore" data-zh="实时 HTML 预览 · 打开任意成品继续探索">Live HTML previews · open any artifact to explore</div>
        </div>
      </div>
    </section>

    <section class="gallery-section" id="gallery">
      <div class="shell">
        <div class="section-intro">
          <h2 data-en="Five lenses. Eleven real stories." data-zh="五种视角,十一个真实故事。">Five lenses. Eleven real stories.</h2>
          <p data-en="Every scenario has named reader views with a path-aware Story Trail, shareable navigation, dark/light rendering, self-contained export, and a machine-readable quality receipt." data-zh="每个场景都有能辨别真实方向的 Story Trail 命名视图、可分享导航、深浅主题、自包含导出和机器可读质量凭证。">Every scenario has named reader views with a path-aware Story Trail, shareable navigation, dark/light rendering, self-contained export, and a machine-readable quality receipt.</p>
        </div>
        <div class="gallery-grid" id="gallery-grid">
[[GALLERY_CARDS]]
        </div>
        <div class="empty-state" id="empty-state" data-en="No proof cards match this filter." data-zh="当前筛选条件下没有成品。">No proof cards match this filter.</div>
        <div class="community-callout">
          <div class="community-callout-copy">
            <strong class="community-callout-title" data-en="Built something real?" data-zh="做出了真实成品?">Built something real?</strong>
            <p data-en="Share the redacted source, verified artifact, validation receipt, and visual-review result. Approved work can join the community Proof Lab with attribution." data-zh="提交脱敏源数据、已验证成品、验证凭证和视觉审查结果。通过审核的作品可署名加入社区 Proof Lab。">Share the redacted source, verified artifact, validation receipt, and visual-review result. Approved work can join the community Proof Lab with attribution.</p>
          </div>
          <a class="card-link" href="https://github.com/tt-a1i/archify/issues/new?template=showcase.yml" target="_blank" rel="noopener noreferrer" data-en="Share a verified diagram ↗" data-zh="提交已验证成品 ↗">Share a verified diagram ↗</a>
        </div>
      </div>
    </section>

    <section class="method">
      <div class="shell method-grid">
        <div>
          <div class="lead-label" data-en="Build receipt" data-zh="生成凭证">Build receipt</div>
          <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会和产品事实分叉。">The gallery cannot drift from the product.</h2>
          <div class="pipeline" aria-label="Gallery generation pipeline">
            <div class="pipeline-step"><span class="pipeline-num">01</span><span class="pipeline-label" data-en="Read versioned JSON IR" data-zh="读取版本化 JSON IR">Read versioned JSON IR</span><span class="pipeline-state">PASS</span></div>
            <div class="pipeline-step"><span class="pipeline-num">02</span><span class="pipeline-label" data-en="Run the typed renderer" data-zh="执行类型化 renderer">Run the typed renderer</span><span class="pipeline-state">PASS</span></div>
            <div class="pipeline-step"><span class="pipeline-num">03</span><span class="pipeline-label" data-en="Check HTML and SVG structure" data-zh="检查 HTML 与 SVG 结构">Check HTML and SVG structure</span><span class="pipeline-state">PASS</span></div>
            <div class="pipeline-step"><span class="pipeline-num">04</span><span class="pipeline-label" data-en="Publish artifact, source, and digest" data-zh="发布成品、源数据与摘要">Publish artifact, source, and digest</span><span class="pipeline-state">PASS</span></div>
          </div>
        </div>
        <div class="method-code">
          <div class="method-code-bar"><span>reproduce locally</span><span>zero runtime deps</span></div>
          <pre><span class="accent">$ node scripts/build-gallery.mjs</span>

render  workflow      ✓
render  sequence      ✓
render  dataflow      ✓
render  lifecycle     ✓
render  architecture  ✓

receipt [[CHECK_COUNT]] checks / [[ENTRY_COUNT]] artifacts / deterministic hashes</pre>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="shell footer-inner">
      <span data-en="Generated from Archify's checked-in examples. No hand-authored capability claims." data-zh="由 Archify 仓库内示例自动生成,不手写可能过期的能力声明。">Generated from Archify's checked-in examples. No hand-authored capability claims.</span>
      <span data-en="Archify v[[ARCHIFY_VERSION]] · development · MIT" data-zh="Archify v[[ARCHIFY_VERSION]] · 开发版 · MIT">Archify v[[ARCHIFY_VERSION]] · development · MIT</span>
    </div>
  </footer>

  <script id="gallery-manifest" type="application/json">[[MANIFEST_JSON]]</script>
  <script src="assets/site-language.js"></script>
  <script>
    (function () {
      var cards = Array.prototype.slice.call(document.querySelectorAll('.showcase-card'));
      var filterButtons = Array.prototype.slice.call(document.querySelectorAll('[data-filter]'));
      var empty = document.getElementById('empty-state');
      var previewTheme = 'dark';
      var language = ArchifySiteLanguage.read();

      function applyLanguage(next) {
        language = ArchifySiteLanguage.write(next);
        document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en';
        document.querySelectorAll('[data-en][data-zh]').forEach(function (node) {
          node.innerHTML = node.getAttribute(language === 'zh' ? 'data-zh' : 'data-en');
        });
        var languageButton = document.getElementById('language');
        languageButton.textContent = language === 'zh' ? 'EN' : '中文';
        languageButton.setAttribute('aria-label', language === 'zh' ? 'Switch to English' : '切换到中文');
      }

      function applyFilter(type, updateUrl) {
        var visible = 0;
        cards.forEach(function (card) {
          var match = type === 'all' || card.getAttribute('data-type') === type;
          card.hidden = !match;
          if (match) visible += 1;
        });
        filterButtons.forEach(function (button) {
          button.setAttribute('aria-pressed', button.getAttribute('data-filter') === type ? 'true' : 'false');
        });
        empty.classList.toggle('visible', visible === 0);
        if (updateUrl) {
          var url = new URL(location.href);
          if (type === 'all') url.searchParams.delete('type');
          else url.searchParams.set('type', type);
          history.replaceState(null, '', url.pathname + url.search + url.hash);
        }
      }

      function applyPreviewTheme(next) {
        previewTheme = next === 'light' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-preview-theme', previewTheme);
        document.getElementById('preview-theme').textContent = 'Preview: ' + previewTheme;
        document.querySelectorAll('iframe[data-src-base]').forEach(function (frame) {
          frame.src = frame.getAttribute('data-src-base') + '?embed=1&theme=' + previewTheme;
        });
      }

      filterButtons.forEach(function (button) {
        button.addEventListener('click', function () { applyFilter(button.getAttribute('data-filter'), true); });
      });
      document.getElementById('language').addEventListener('click', function () { applyLanguage(language === 'en' ? 'zh' : 'en'); });
      document.getElementById('preview-theme').addEventListener('click', function () { applyPreviewTheme(previewTheme === 'dark' ? 'light' : 'dark'); });

      var allowed = ['architecture', 'workflow', 'sequence', 'dataflow', 'lifecycle'];
      var requested = new URLSearchParams(location.search).get('type') || 'all';
      applyFilter(allowed.indexOf(requested) >= 0 ? requested : 'all', false);
      applyLanguage(language);

      if ('IntersectionObserver' in window) {
        var observer = new IntersectionObserver(function (entries) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              entry.target.classList.add('visible');
              observer.unobserve(entry.target);
            }
          });
        }, { threshold: 0.08 });
        cards.forEach(function (card) { observer.observe(card); });
      } else {
        cards.forEach(function (card) { card.classList.add('visible'); });
      }
    })();
  </script>
</body>
</html>