ontoref/assets/web/architecture-diagram-details.html

2 lines
31 KiB
HTML
Raw Normal View History

2026-03-13 00:19:51 +00:00
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Ontoref — Architecture</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" /><style>:root{--bg:#0f172a;--bg2:#1e293b;--bg3:#0a0f1e;--text:#e2e8f0;--muted:#64748b;--subtle:#334155;--blue:#60a5fa;--orange:#E8A838;--green:#4ade80;--purple:#c084fc;--teal:#22d3ee;--yellow:#facc15;--red:#f87171;--border:rgba(96,165,250,0.2);}html.light{--bg:#f8fafc;--bg2:#f1f5f9;--bg3:#e2e8f0;--text:#0f172a;--muted:#64748b;--subtle:#cbd5e1;--border:rgba(96,165,250,0.35);}*{margin:0;padding:0;box-sizing:border-box;}body{background:var(--bg);color:var(--text);font-family:"Inter",sans-serif;min-height:100vh;transition:background 0.3s,color 0.3s;padding:2rem;padding-top:5rem;}.nav{position:fixed;top:1.5rem;right:1.5rem;z-index:100;display:flex;gap:0.4rem;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:0.3rem;backdrop-filter:blur(10px);}.nav a,.nav button{background:transparent;border:none;color:var(--muted);padding:0.4rem 0.9rem;border-radius:16px;cursor:pointer;font-weight:700;font-size:0.8rem;text-transform:uppercase;font-family:"JetBrains Mono",monospace;text-decoration:none;transition:all 0.2s;}.nav a:hover,.nav button:hover{color:var(--blue);}.nav .back{background:rgba(96,165,250,0.12);color:var(--blue);border:1px solid rgba(96,165,250,0.3);}.nav .back:hover{background:rgba(96,165,250,0.2);}.page{max-width:1200px;margin:0 auto;}.page-title{text-align:center;margin-bottom:3rem;}.page-title h1{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,var(--blue) 0%,var(--orange) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5rem;}.page-title p{color:var(--muted);font-size:0.95rem;}.arch{display:flex;flex-direction:column;gap:1px;border-radius:16px;overflow:hidden;border:1px solid var(--border);margin-bottom:3rem;}.layer{display:grid;grid-template-columns:180px 1fr;min-height:80px;position:relative;}.layer-tag{display:flex;align-items:center;justify-content:center;padding:1rem;font-family:"JetBrains Mono",monospace;font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-align:center;line-height:1.4;border-right:1px solid var(--border);}.layer-body{padding:1rem 1.5rem;display:flex;flex-direction:column;justify-content:center;gap:0.4rem;}.layer-body .items{display:flex;flex-wrap:wrap;gap:0.4rem;}.chip{font-family:"JetBrains Mono",monospace;font-size:0.72rem;padding:0.2rem 0.6rem;border-radius:6px;background:rgba(255,255,255,0.04);border:1px solid var(--subtle);color:var(--muted);}.layer-body .desc{font-size:0.78rem;color:var(--muted);font-style:italic;line-height:1.5;}.l-declarative .layer-tag{background:rgba(96,165,250,0.08);color:var(--blue);border-color:rgba(96,165,250,0.2);}.l-declarative .layer-body{background:rgba(96,165,250,0.03);}.l-operational .layer-tag{background:rgba(232,168,56,0.08);color:var(--orange);border-color:rgba(232,168,56,0.2);}.l-operational .layer-body{background:rgba(232,168,56,0.02);}.l-entry .layer-tag{background:rgba(74,222,128,0.08);color:var(--green);border-color:rgba(74,222,128,0.2);}.l-entry .layer-body{background:rgba(74,222,128,0.02);}.l-graph .layer-tag{background:rgba(192,132,252,0.08);color:var(--purple);border-color:rgba(192,132,252,0.2);}.l-graph .layer-body{background:rgba(192,132,252,0.02);}.l-runtime .layer-tag{background:rgba(34,211,238,0.08);color:var(--teal);border-color:rgba(34,211,238,0.2);}.l-runtime .layer-body{background:rgba(34,211,238,0.02);}.l-adopt .layer-tag{background:rgba(250,204,21,0.08);color:var(--yellow);border-color:rgba(250,204,21,0.2);}.l-adopt .layer-body{background:rgba(250,204,21,0.02);}.daemon-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem;}.daemon-detail .span2{grid-column:span 2;}.daemon-box{border-radius:12px;padding:1.5rem;border:1px solid var(--