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>
|