[teamai] Push 87 resource(s) from XingfenD
This commit is contained in:
@@ -0,0 +1,363 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Diagram Design · Gallery</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
:root {
|
||||
--paper: #f5f4ed;
|
||||
--paper-2: #efeee5;
|
||||
--ink: #0b0d0b;
|
||||
--muted: #52534e;
|
||||
--soft: #65655c;
|
||||
--rule: rgba(11, 13, 11, 0.12);
|
||||
--rule-strong: rgba(11, 13, 11, 0.25);
|
||||
--accent: #f7591f;
|
||||
--sans: "Geist", system-ui, sans-serif;
|
||||
--serif: "Instrument Serif", serif;
|
||||
--mono: "Geist Mono", ui-monospace, monospace;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
font-family: var(--sans);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 1rem 1.25rem 0.625rem;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.title-row h1 {
|
||||
font-family: var(--serif);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1;
|
||||
}
|
||||
.title-row .meta {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.title-row .open-raw {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
padding: 0.3rem 0.625rem;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
color 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
.open-raw:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tabs.variants {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.tab {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.tab:hover {
|
||||
color: var(--ink);
|
||||
border-color: var(--rule-strong);
|
||||
}
|
||||
.tab:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.tab.active {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
.tab .eyebrow {
|
||||
display: inline-block;
|
||||
margin-right: 0.25rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.56rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.tab.new::after {
|
||||
content: "NEW";
|
||||
display: inline-block;
|
||||
margin-left: 0.35rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.54rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--accent);
|
||||
vertical-align: 1px;
|
||||
}
|
||||
.tab.active.new::after {
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
background: var(--paper-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: var(--paper);
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="title-row">
|
||||
<h1>
|
||||
Diagram Design
|
||||
<span
|
||||
class="meta"
|
||||
style="
|
||||
font-family: var(--mono);
|
||||
font-size: 0.66rem;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>· gallery</span
|
||||
>
|
||||
</h1>
|
||||
<div style="display: flex; gap: 0.5rem">
|
||||
<a class="open-raw" href="icons.html" target="_blank" rel="noopener"
|
||||
>icon library ↗</a
|
||||
>
|
||||
<a
|
||||
class="open-raw"
|
||||
id="open-raw"
|
||||
href="#"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>open in new tab ↗</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs" id="type-tabs" role="tablist" aria-label="Diagram type">
|
||||
<button class="tab active" data-type="architecture">
|
||||
<span class="eyebrow">01</span>Architecture
|
||||
</button>
|
||||
<button class="tab" data-type="flowchart">
|
||||
<span class="eyebrow">02</span>Flowchart
|
||||
</button>
|
||||
<button class="tab" data-type="sequence">
|
||||
<span class="eyebrow">03</span>Sequence
|
||||
</button>
|
||||
<button class="tab" data-type="state">
|
||||
<span class="eyebrow">04</span>State
|
||||
</button>
|
||||
<button class="tab" data-type="er">
|
||||
<span class="eyebrow">05</span>ER
|
||||
</button>
|
||||
<button class="tab" data-type="timeline">
|
||||
<span class="eyebrow">06</span>Timeline
|
||||
</button>
|
||||
<button class="tab" data-type="swimlane">
|
||||
<span class="eyebrow">07</span>Swimlane
|
||||
</button>
|
||||
<button class="tab" data-type="quadrant">
|
||||
<span class="eyebrow">08</span>Quadrant
|
||||
</button>
|
||||
<button class="tab new" data-type="nested">
|
||||
<span class="eyebrow">09</span>Nested
|
||||
</button>
|
||||
<button class="tab new" data-type="tree">
|
||||
<span class="eyebrow">10</span>Tree
|
||||
</button>
|
||||
<button class="tab new" data-type="org-chart">
|
||||
<span class="eyebrow">11</span>Org chart
|
||||
</button>
|
||||
<button class="tab new" data-type="layers">
|
||||
<span class="eyebrow">12</span>Layers
|
||||
</button>
|
||||
<button class="tab new" data-type="venn">
|
||||
<span class="eyebrow">13</span>Venn
|
||||
</button>
|
||||
<button class="tab new" data-type="pyramid">
|
||||
<span class="eyebrow">14</span>Pyramid
|
||||
</button>
|
||||
<button class="tab new" data-type="radar">
|
||||
<span class="eyebrow">15</span>Radar
|
||||
</button>
|
||||
<button class="tab new" data-type="loop">
|
||||
<span class="eyebrow">16</span>Loop
|
||||
</button>
|
||||
<button class="tab new" data-type="datalake">
|
||||
<span class="eyebrow">17</span>Data lake
|
||||
</button>
|
||||
<button class="tab new" data-type="bar">
|
||||
<span class="eyebrow">18</span>Bar
|
||||
</button>
|
||||
<button class="tab new" data-type="line">
|
||||
<span class="eyebrow">19</span>Line
|
||||
</button>
|
||||
<button class="tab new" data-type="gantt">
|
||||
<span class="eyebrow">20</span>Gantt
|
||||
</button>
|
||||
<button class="tab new" data-type="scatter">
|
||||
<span class="eyebrow">21</span>Scatter
|
||||
</button>
|
||||
<button class="tab new" data-type="medallion">
|
||||
<span class="eyebrow">22</span>Medallion
|
||||
</button>
|
||||
<button class="tab new" data-type="high-level">
|
||||
<span class="eyebrow">23</span>High-Level
|
||||
</button>
|
||||
<button class="tab new" data-type="process">
|
||||
<span class="eyebrow">24</span>Process
|
||||
</button>
|
||||
<button class="tab new" data-type="data-flow">
|
||||
<span class="eyebrow">26</span>Data flow
|
||||
</button>
|
||||
<button class="tab new" data-type="dp-integration">
|
||||
<span class="eyebrow">27</span>DP integration
|
||||
</button>
|
||||
<button class="tab new" data-type="high-level-vertical">
|
||||
<span class="eyebrow">28</span>High-Level / Parametric
|
||||
</button>
|
||||
<button class="tab new" data-type="dp-security-matrix">
|
||||
<span class="eyebrow">32</span>DP security matrix
|
||||
</button>
|
||||
<button class="tab new" data-type="it-state">
|
||||
<span class="eyebrow">33</span>IT current-state
|
||||
</button>
|
||||
<button class="tab new" data-type="sequence-oauth">
|
||||
<span class="eyebrow">34</span>Sequence · OAuth
|
||||
</button>
|
||||
<button class="tab new" data-type="import-drawio" data-single>
|
||||
<span class="eyebrow">35</span>Import · draw.io
|
||||
</button>
|
||||
<button class="tab new" data-type="import-mermaid" data-single>
|
||||
<span class="eyebrow">36</span>Import · Mermaid
|
||||
</button>
|
||||
<button class="tab new" data-type="quadrant-consultant" data-single>
|
||||
<span class="eyebrow">37</span>Quadrant · consultant
|
||||
</button>
|
||||
<button class="tab new" data-type="loop-terminal" data-single>
|
||||
<span class="eyebrow">38</span>Loop · terminal
|
||||
</button>
|
||||
<button class="tab new" data-type="policy-trace-animated" data-single>
|
||||
<span class="eyebrow">39</span>Policy trace · animated
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tabs variants"
|
||||
id="variant-tabs"
|
||||
role="tablist"
|
||||
aria-label="Variant"
|
||||
>
|
||||
<button class="tab active" data-variant="">Minimal light</button>
|
||||
<button class="tab" data-variant="-dark">Minimal dark</button>
|
||||
<button class="tab" data-variant="-full">Full editorial</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<iframe
|
||||
id="preview"
|
||||
src="example-architecture.html"
|
||||
title="Preview"
|
||||
></iframe>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const state = { type: "architecture", variant: "" };
|
||||
const iframe = document.getElementById("preview");
|
||||
const openRaw = document.getElementById("open-raw");
|
||||
|
||||
function update() {
|
||||
const activeType = document.querySelector("#type-tabs .tab.active");
|
||||
const single = activeType && activeType.hasAttribute("data-single");
|
||||
const variantTabs = document.querySelectorAll("#variant-tabs .tab");
|
||||
if (single) state.variant = "";
|
||||
variantTabs.forEach((tab) => {
|
||||
tab.disabled = single && tab.dataset.variant !== "";
|
||||
tab.classList.toggle("active", tab.dataset.variant === state.variant);
|
||||
});
|
||||
const src = `example-${state.type}${state.variant}.html`;
|
||||
iframe.src = src;
|
||||
openRaw.href = src;
|
||||
}
|
||||
|
||||
function bindTabs(containerId, key) {
|
||||
const container = document.getElementById(containerId);
|
||||
container.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest(".tab");
|
||||
if (!btn) return;
|
||||
container
|
||||
.querySelectorAll(".tab")
|
||||
.forEach((t) => t.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
state[key] = btn.dataset[key];
|
||||
update();
|
||||
});
|
||||
}
|
||||
|
||||
bindTabs("type-tabs", "type");
|
||||
bindTabs("variant-tabs", "variant");
|
||||
update();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user