mirror of
https://github.com/tt-a1i/archify.git
synced 2026-09-28 23:16:23 +08:00
407 lines
31 KiB
HTML
407 lines
31 KiB
HTML
<!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="assets/archify-mark.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">
|
|
<img class="nav-logo-text brand-lockup" src="assets/archify-lockup-light.svg" alt="Archify" width="117" height="32">
|
|
<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 focus, reach, and path exploration, shareable links, dark/light rendering, self-contained export, and a machine-readable quality receipt." data-zh="每个场景都支持聚焦、上下游与路径探索、可分享链接、深浅主题、自包含导出和机器可读质量凭证。">Every scenario has focus, reach, and path exploration, shareable links, 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]] · stable · MIT" data-zh="Archify v[[ARCHIFY_VERSION]] · 稳定版 · MIT">Archify v[[ARCHIFY_VERSION]] · stable · 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>
|