Add interactive projects mindmap (markmap)

This commit is contained in:
neo committed 2026-06-24 14:53:24 +05:00
1 parent b42b866a8c
commit 357729b091
2 files changed
+129

No files matched your search

+52
View File
@@ -0,0 +1,52 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
.markmap-dark {
background: #27272a;
color: white;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/markmap-toolbar@0.18.12/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://unpkg.com/d3@7.9.0/dist/d3.min.js"></script><script src="https://unpkg.com/markmap-view@0.18.12/dist/browser/index.js"></script><script src="https://unpkg.com/markmap-toolbar@0.18.12/dist/index.js"></script><script>((r) => {
setTimeout(r);
})(() => {
const { markmap, mm } = window;
const toolbar = new markmap.Toolbar();
toolbar.attach(mm);
const el = toolbar.render();
el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
document.body.append(el);
})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
const markmap = getMarkmap();
window.mm = markmap.Markmap.create(
"svg#mindmap",
(getOptions || markmap.deriveOptions)(jsonOptions),
root2
);
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("markmap-dark");
}
})(() => window.markmap,null,{"content":"&#x41c;&#x43e;&#x438; &#x43f;&#x440;&#x43e;&#x435;&#x43a;&#x442;&#x44b;","children":[{"content":"&#x1f3af; wow-design","children":[{"content":"<strong>calls24-landing</strong>","children":[{"content":"index-v4.html &#x2014; &#x43f;&#x440;&#x43e;&#x434;&#x430;&#x43a;&#x448;&#x43d;","children":[],"payload":{"tag":"li","lines":"4,5"}},{"content":"STATUS.md &#x2014; &#x442;&#x440;&#x435;&#x43a;&#x438;&#x43d;&#x433;","children":[],"payload":{"tag":"li","lines":"5,6"}},{"content":"logos/ &#x2014; SVG-&#x43b;&#x43e;&#x433;&#x43e;&#x442;&#x438;&#x43f;&#x44b;","children":[],"payload":{"tag":"li","lines":"6,7"}},{"content":"prompts/ &#x2014; AI-&#x43f;&#x440;&#x43e;&#x43c;&#x43f;&#x442;&#x44b;","children":[],"payload":{"tag":"li","lines":"7,8"}}],"payload":{"tag":"li","lines":"3,8"}},{"content":"<strong>visual-data</strong>","children":[{"content":"VT2-examples/ (110 &#x444;&#x430;&#x439;&#x43b;&#x43e;&#x432;)","children":[{"content":"ch3: Data Scraping &amp; ETL","children":[],"payload":{"tag":"li","lines":"10,11"}},{"content":"ch4: Trends &amp; Cycles","children":[],"payload":{"tag":"li","lines":"11,12"}},{"content":"ch5: Categorical Data","children":[],"payload":{"tag":"li","lines":"12,13"}},{"content":"ch6: Multivariate Data","children":[],"payload":{"tag":"li","lines":"13,14"}},{"content":"ch7: Spatial Data","children":[],"payload":{"tag":"li","lines":"14,15"}},{"content":"ch8: Distributions","children":[],"payload":{"tag":"li","lines":"15,16"}}],"payload":{"tag":"li","lines":"9,16"}},{"content":"README.md &#x2014; &#x438;&#x441;&#x441;&#x43b;&#x435;&#x434;&#x43e;&#x432;&#x430;&#x43d;&#x438;&#x435; &#x438;&#x43d;&#x441;&#x442;&#x440;&#x443;&#x43c;&#x435;&#x43d;&#x442;&#x43e;&#x432;","children":[],"payload":{"tag":"li","lines":"16,17"}},{"content":"examples.md &#x2014; D2, Mermaid, markmap","children":[],"payload":{"tag":"li","lines":"17,18"}}],"payload":{"tag":"li","lines":"8,18"}},{"content":"<strong>dracon-tldraw/</strong>","children":[{"content":"DRAKON-&#x434;&#x438;&#x430;&#x433;&#x440;&#x430;&#x43c;&#x43c;&#x44b; (tldraw v5)","children":[],"payload":{"tag":"li","lines":"19,20"}},{"content":"public/dracon.html &#x2014; HTML-&#x432;&#x435;&#x440;&#x441;&#x438;&#x44f;","children":[],"payload":{"tag":"li","lines":"20,21"}}],"payload":{"tag":"li","lines":"18,21"}},{"content":"<strong>wow-design-wiki/</strong>","children":[{"content":"2673 Carbon &#x438;&#x43a;&#x43e;&#x43d;&#x43a;&#x438;","children":[],"payload":{"tag":"li","lines":"22,23"}},{"content":"74 DESIGN.md &#x431;&#x440;&#x435;&#x43d;&#x434;&#x430;","children":[],"payload":{"tag":"li","lines":"23,24"}},{"content":"layout, typography, motion","children":[],"payload":{"tag":"li","lines":"24,25"}},{"content":"psychology, systems","children":[],"payload":{"tag":"li","lines":"25,26"}}],"payload":{"tag":"li","lines":"21,26"}},{"content":"<strong>roi24/</strong>","children":[{"content":"&#x41b;&#x435;&#x43d;&#x434;&#x438;&#x43d;&#x433; ROI24 (100&#x41a;&#x20bd;)","children":[],"payload":{"tag":"li","lines":"27,28"}},{"content":"&#x418;&#x441;&#x441;&#x43b;&#x435;&#x434;&#x43e;&#x432;&#x430;&#x43d;&#x438;&#x435; &#x434;&#x438;&#x437;&#x430;&#x439;&#x43d;&#x43e;&#x432;","children":[],"payload":{"tag":"li","lines":"28,29"}},{"content":"ECharts + GSAP","children":[],"payload":{"tag":"li","lines":"29,30"}}],"payload":{"tag":"li","lines":"26,30"}},{"content":"<strong>landing-pages/</strong>","children":[{"content":"&#x414;&#x438;&#x437;&#x430;&#x439;&#x43d; &#x43b;&#x435;&#x43d;&#x434;&#x438;&#x43d;&#x433;&#x43e;&#x432;","children":[],"payload":{"tag":"li","lines":"31,32"}},{"content":"Conversion &#x43e;&#x43f;&#x442;&#x438;&#x43c;&#x438;&#x437;&#x430;&#x446;&#x438;&#x44f;","children":[],"payload":{"tag":"li","lines":"32,34"}}],"payload":{"tag":"li","lines":"30,34"}}],"payload":{"tag":"h2","lines":"2,3"}},{"content":"&#x1f4de; calls-analytics","children":[{"content":"<strong>callpulse/</strong>","children":[{"content":"app.py &#x2014; FastAPI","children":[],"payload":{"tag":"li","lines":"36,37"}},{"content":"dashboard.html &#x2014; ECharts","children":[],"payload":{"tag":"li","lines":"37,38"}},{"content":"engine.py &#x2014; &#x43e;&#x431;&#x440;&#x430;&#x431;&#x43e;&#x442;&#x43a;&#x430;","children":[],"payload":{"tag":"li","lines":"38,39"}},{"content":"config.yaml","children":[],"payload":{"tag":"li","lines":"39,40"}}],"payload":{"tag":"li","lines":"35,40"}},{"content":"<strong>data/</strong>","children":[{"content":"samples/ &#x2014; &#x43f;&#x440;&#x438;&#x43c;&#x435;&#x440;&#x44b; &#x432;&#x44b;&#x437;&#x43e;&#x432;&#x43e;&#x432;","children":[],"payload":{"tag":"li","lines":"41,42"}},{"content":"analysis_report.json","children":[],"payload":{"tag":"li","lines":"42,43"}},{"content":"report.md","children":[],"payload":{"tag":"li","lines":"43,44"}}],"payload":{"tag":"li","lines":"40,44"}},{"content":"<strong>scripts/</strong>","children":[{"content":"&#x43e;&#x431;&#x440;&#x430;&#x431;&#x43e;&#x442;&#x43a;&#x43Line truncated
</body>
</html>