Download scripts/gallery-template.html from smlflg/archify-hai: direct link, hf CLI and curl.
- Browser
- Download file 31.7 kB
-
https://huggingface.co/smlflg/archify-hai/resolve/main/scripts/gallery-template.html
- Command line
-
hf download hf://smlflg/archify-hai/scripts/gallery-template.html
-
curl -L -o gallery-template.html https://huggingface.co/smlflg/archify-hai/resolve/main/scripts/gallery-template.html
31.7 kB
| <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> | |