Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
liaoxg
/
cfc
1
1
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Ağaç: 41cf6f35aa
Dallar Biçim İmleri
cfc
/
web
/
knowledge.html

knowledge.html 19 KB
Geçmiş Ham

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4.   <meta charset="UTF-8">
    5. 

  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.   <meta name="description" content="浠艾福成长百科 — 围绕身·智·富·行·心五大维度，用科学知识为每个家庭的健康成长保驾护航。">
    7. 

  7.   <meta name="keywords" content="浠艾福,成长百科,育儿知识,五维能量,亲子教育">
    8. 

  8.   <meta property="og:title" content="成长百科 — 浠艾福主动健康学院">
    9. 

  9.   <meta property="og:description" content="围绕身·智·富·行·心五大维度，用科学知识为每个家庭的健康成长保驾护航。">
    10. 

  10.   <meta property="og:type" content="website">
    11. 

  11.   <meta property="og:url" content="https://www.etotem.com.cn/knowledge.html">
    12. 

  12.   <meta name="theme-color" content="#4A9BD7">
    13. 

  13.   <title>成长百科 — 浠艾福主动健康学院</title>
    14. 

  14.   <link rel="stylesheet" href="css/style.css">
    15. 

  15. 

  16.   <!-- Microsoft Clarity -->
    17. 

  17.   <script>
    18. 

  18.     (function(c,l,a,r,i,t,y){
    19. 

  19.       c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    20. 

  20.       t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    21. 

  21.       y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    22. 

  22.     })(window, document, "clarity", "script", "xj4p74ra9m");
    23. 

  23.   </script>
    24. 

  24. 

  25.   <style>
    26. 

  26.     :root {
    27. 

  27.       --c-body: #FF8C42;
    28. 

  28.       --c-wisdom: #6366F1;
    29. 

  29.       --c-wealth: #F59E0B;
    30. 

  30.       --c-action: #10B981;
    31. 

  31.       --c-heart: #FF6B9D;
    32. 

  32.     }
    33. 

  33. html.kb-page, .kb-page body { height: 100vh; overflow: hidden; }
    34. 

  34.     .kb-page body { display: flex; flex-direction: column; background: linear-gradient(135deg, #FAFBFC 0%, #F0F4F8 100%); }
    35. 

  35.     .kb-main { flex:1; display:flex; flex-direction:column; max-width:1200px; width:100%; margin:64px auto 0; padding:0 var(--space-lg); overflow:hidden; position:relative; z-index:1; }
    36. 

  36.     .kb-header { text-align:center; flex-shrink:0; padding:var(--space-lg) 0 var(--space-md); }
    37. 

  37.     .kb-header h1 { font-size:2rem; font-weight:800; color:var(--color-text-primary); margin-bottom:2px; }
    38. 

  38.     .kb-header p { font-size:var(--font-size-small); color:var(--color-text-secondary); }
    39. 

  39. 

  40.     .kb-body-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding-bottom:var(--space-md); min-height:0; position:relative; }
    41. 

  41.     .kb-body-inner { position:relative; width:100%; max-width:700px; height:100%; display:flex; align-items:center; justify-content:center; }
    42. 

  42.     .kb-body-img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-lg); box-shadow:0 8px 40px rgba(74,155,215,0.08); }
    43. 

  43. 

  44.     .kb-marker { position:absolute; z-index:2; }
    45. 

  45.     .kb-marker-card { pointer-events:auto; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color,var(--color-border-light)); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; transition:box-shadow .2s, transform .2s; }
    46. 

  46.     .kb-marker-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.10); transform:translateY(-1px); }
    47. 

  47.     .kb-marker-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--m-color); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.15); top:50%; margin-top:-6px; pointer-events:none; }
    48. 

  48.     .kb-marker--right .kb-marker-dot { left:-6px; }
    49. 

  49.     .kb-marker--left .kb-marker-dot { right:-6px; }
    50. 

  50.     .kb-marker-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--color-border-light); }
    51. 

  51.     .kb-marker-label { font-size:0.8125rem; font-weight:700; color:var(--m-color,var(--color-text-primary)); }
    52. 

  52.     .kb-marker .kb-more-btn { font-size:0.75rem; font-weight:700; color:var(--m-color); cursor:pointer; opacity:0.5; transition:opacity .2s; user-select:none; margin-left:auto; }
    53. 

  53.     .kb-marker .kb-more-btn:hover { opacity:1; }
    54. 

  54.     .kb-marker .kb-hidden-items { display:none; position:absolute; top:0; z-index:3; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:12px; padding:10px 14px; border:1.5px solid var(--m-color); box-shadow:0 4px 16px rgba(0,0,0,0.06); min-width:170px; max-width:220px; pointer-events:auto; }
    55. 

  55. 

  56.     .kb-marker--right .kb-hidden-items { left:100%; }
    57. 

  57.     .kb-marker--left .kb-hidden-items { right:100%; }
    58. 

  58.     .kb-marker-card a, .kb-hidden-items a { display:flex; align-items:center; gap:6px; padding:5px 0; text-decoration:none; color:var(--color-text-secondary); font-size:0.8125rem; line-height:1.3; border-bottom:1px solid var(--color-border-light); transition:color .2s; }
    59. 

  59.     .kb-marker-card a:last-child, .kb-hidden-items a:last-child { border-bottom:none; }
    60. 

  60.     .kb-marker-card a:hover, .kb-hidden-items a:hover { color:var(--m-color,var(--color-primary)); }
    61. 

  61.     .kb-marker-card a .ma-icon, .kb-hidden-items a .ma-icon { font-size:1rem; flex-shrink:0; }
    62. 

  62.     .kb-marker-card a .ma-title, .kb-hidden-items a .ma-title { flex:1; min-width:0; }
    63. 

  63.     .kb-marker-card a .ma-arrow, .kb-hidden-items a .ma-arrow { flex-shrink:0; font-size:0.75rem; opacity:0.3; transition:transform .2s; }
    64. 

  64.     .kb-marker-card a:hover .ma-arrow, .kb-hidden-items a:hover .ma-arrow { transform:translateX(3px); opacity:0.7; }
    65. 

  65.     .kb-marker-card .ma-coming, .kb-hidden-items .ma-coming { opacity:0.5; cursor:default; pointer-events:none; font-size:0.75rem; padding:4px 0; }
    66. 

  66. 

  67.     .kb-m-pos-brain  { top:13%; left:56%; }
    68. 

  68.     .kb-m-pos-heart  { top:33%; right:54%; }
    69. 

  69.     .kb-m-pos-body   { top:48%; left:54%; }
    70. 

  70.     .kb-m-pos-wealth { top:64%; right:54%; }
    71. 

  71.     .kb-m-pos-action { top:82%; left:54%; }
    72. 

  72. 

  73.     .kb-footer { flex-shrink:0; text-align:center; padding:var(--space-sm) 0; font-size:var(--font-size-tiny); color:var(--color-text-muted); border-top:1px solid var(--color-border-light); }
    74. 

  74.     .kb-footer a { color:var(--color-text-muted); text-decoration:none; }
    75. 

  75.     .kb-footer a:hover { color:var(--color-primary); }
    76. 

  76. 

  77.     .kb-mobile { display:none; }
    78. 

  78. 

  79.     @media (max-width:768px) {
    80. 

  80.       .kb-body-wrap { display:none; }
    81. 

  81.       .kb-mobile { display:flex; flex-direction:column; flex:1; min-height:0; }
    82. 

  82.       .kb-header { padding:var(--space-md) 0 var(--space-sm); }
    83. 

  83.       .kb-header h1 { font-size:1.5rem; }
    84. 

  84.       .kb-tabs { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-shrink:0; padding:0 0 var(--space-sm); }
    85. 

  85.       .kb-tabs::-webkit-scrollbar { display:none; }
    86. 

  86.       .kb-tab { flex-shrink:0; padding:0.45em 1em; font-size:0.9375rem; font-weight:700; border:2px solid var(--color-border-light); border-radius:var(--radius-full); background:#fff; color:var(--color-text-secondary); cursor:pointer; transition:all var(--transition-fast); font-family:inherit; line-height:1.3; }
    87. 

  87.       .kb-tab:hover { border-color:var(--tab-color,var(--color-primary)); color:var(--tab-color); }
    88. 

  88.       .kb-tab.active { border-color:var(--tab-color,var(--color-primary)); background:color-mix(in srgb, var(--tab-color,var(--color-primary)) 10%, white); color:var(--tab-color,var(--color-primary)); }
    89. 

  89.       .kb-articles { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-sm); }
    90. 

  90.       .kb-a-item { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-md); background:#fff; border-radius:var(--radius-md); border:1px solid var(--color-border-light); text-decoration:none; color:var(--color-text-primary); margin-bottom:var(--space-sm); transition:box-shadow var(--transition-fast), border-color var(--transition-fast); }
    91. 

  91.       .kb-a-item:last-child { margin-bottom:0; }
    92. 

  92.       .kb-a-item:active { box-shadow:var(--shadow-sm); border-color:var(--color-primary); }
    93. 

  93.       .kb-a-item .ai-icon { font-size:1.3rem; flex-shrink:0; }
    94. 

  94.       .kb-a-item .ai-info { flex:1; min-width:0; }
    95. 

  95.       .kb-a-item .ai-info h4 { font-size:0.9375rem; font-weight:700; margin-bottom:0.15em; line-height:1.3; }
    96. 

  96.       .kb-a-item .ai-info p { font-size:0.8125rem; color:var(--color-text-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    97. 

  97.       .kb-a-coming { opacity:0.55; pointer-events:none; }
    98. 

  98.     }
    99. 

  99.     @media (max-width:480px) {
    100. 

  100.       .kb-header h1 { font-size:1.3rem; }
    101. 

  101.       .kb-main { padding:0 var(--space-md); }
    102. 

  102.       .kb-tab { padding:0.35em 0.8em; font-size:0.875rem; }
    103. 

  103.     }
    104. 

  104.     .scroll-indicator { display:none; }
    105. 

  105.   </style>
    106. 

  106. </head>
    107. 

  107. <body class="kb-page">
    108. 

  108. 

  109.   <header class="site-header" id="header">
    110. 

  110.     <div class="container header-inner">
    111. 

  111.       <a href="index.html" class="logo">
    112. 

  112.         <img src="logo.png" alt="浠艾福" class="logo-img" width="36" height="36">
    113. 

  113.         <span class="logo-text">浠艾福</span>
    114. 

  114.         <span class="logo-tag">主动健康</span>
    115. 

  115.       </a>
    116. 

  116.       <button class="nav-toggle" id="navToggle" aria-label="切换导航"><span></span><span></span><span></span></button>
    117. 

  117.       <nav class="nav" id="nav">
    118. 

  118.         <ul class="nav-list">
    119. 

  119.           <li><a href="index.html" class="nav-link">首页</a></li>
    120. 

  120.           <li><a href="knowledge.html" class="nav-link active">成长百科</a></li>
    121. 

  121.         </ul>
    122. 

  122.       </nav>
    123. 

  123.     </div>
    124. 

  124.   </header>
    125. 

  125. 

  126.   <div class="kb-main">
    127. 

  127.     <div class="kb-header">
    128. 

  128.       <h1>成长百科</h1>
    129. 

  129.       <p>身 · 智 · 富 · 行 · 心 — 科学育儿，从了解自己开始</p>
    130. 

  130.     </div>
    131. 

  131. 

  132.     <div class="kb-body-wrap" id="kbDesktop">
    133. 

  133.       <div class="kb-body-inner" id="kbBodyInner">
    134. 

  134.         <img src="img/human-body.png" alt="人体五维成长百科" class="kb-body-img" id="kbBodyImg">
    135. 

  135.       </div>
    136. 

  136.     </div>
    137. 

  137. 

  138.     <div class="kb-mobile" id="kbMobile">
    139. 

  139.       <div class="kb-tabs" id="kbTabs"></div>
    140. 

  140.       <div class="kb-articles" id="kbArticles"></div>
    141. 

  141.     </div>
    142. 

  142. 

  143.   </div>
    144. 

  144. 

  145.   <!-- Footer (shared) -->
    146. 

  146.   <div id="footer-placeholder"></div>
    147. 

  147.   <script src="js/footer.js"></script>
    148. 

  148. 

  149.   <script>
    150. 

  150.     var DIMS = [
    151. 

  151.       { key:'body',   label:'身', color:'#FF8C42', subtitle:'根基永固 · 主动健康', bodyPart:'gut' },
    152. 

  152.       { key:'wisdom', label:'智', color:'#6366F1', subtitle:'赋能未来 · 智慧启迪', bodyPart:'brain' },
    153. 

  153.       { key:'wealth', label:'富', color:'#F59E0B', subtitle:'利他创富 · 价值创造', bodyPart:'hands' },
    154. 

  154.       { key:'action', label:'行', color:'#10B981', subtitle:'人际和谐 · 知行合一', bodyPart:'feet' },
    155. 

  155.       { key:'heart',  label:'心', color:'#FF6B9D', subtitle:'大爱相随 · 情感滋养', bodyPart:'heart' }
    156. 

  156.     ];
    157. 

  157. 

  158.     var ARTICLES = {
    159. 

  159.       body: [
    160. 

  160.         { icon:'🌿', title:'孩子过敏反复不好，根源可能在肠道', desc:'从肠道菌群-免疫-过敏三角关系出发，解析儿童过敏的深层原因。', url:'articles/geo-faq-1-allergy.html' },
    161. 

  161.         { icon:'🛡️', title:'儿童免疫力提升3大关键步骤', desc:'从肠道微生态、营养支持与睡眠节律三个维度系统提升自护力。', url:'articles/geo-faq-3-immunity.html' },
    162. 

  162.         { icon:'🌊', title:'微塑料对家庭健康的隐形危害', desc:'揭秘微塑料如何影响肠道菌群与激素系统及家庭防护策略。', url:'articles/plastic-health.html' },
    163. 

  163.         { icon:'🩺', title:'2型糖尿病：慢性炎症驱动的β细胞凋亡', desc:'从慢性炎症、肠道菌群与胰岛素抵抗角度解析2型糖尿病的发生机制与主动干预策略。', url:'articles/diabetes.html' },
    164. 

  164.         { icon:'🦴', title:'骨质疏松：骨骼健康的主动管理', desc:'骨质疏松的症-病-因分析与主动健康干预五步法，从营养运动到药物管理。', url:'articles/osteoporosis.html' },
    165. 

  165.         { icon:'🧬', title:'癌症预防：科学筛查与主动健康', desc:'癌症的发病机制与危险因素解析，提供主动健康五步干预策略降低患癌风险。', url:'articles/cancer.html' },
    166. 

  166.         { icon:'🧠', title:'阿尔茨海默病：认识认知衰退的早期信号', desc:'从神经炎症、肠道菌群与肠-脑轴角度解析阿尔茨海默病的发生机制与主动干预策略。', url:'articles/alzheimer.html' },
    167. 

  167.         { icon:'🍎', title:'精准营养：每个家庭的健康基石', desc:'基于个体代谢特征定制真正适合家人的膳食方案。', coming:true },
    168. 

  168.         { icon:'🚰', title:'自来水中的隐形威胁', desc:'自来水中抗生素、雌激素与内分泌干扰物污染全解析及对肠道菌群的影响。', url:'articles/tap-water-pollution.html' }
    169. 

  169.       ],
    170. 

  170.       wisdom: [
    171. 

  171.         { icon:'🧠', title:'注意力不集中，先查肠道再谈训练', desc:'肠道菌群通过肠-脑轴影响注意力与认知功能，科学认知从根源入手。', url:'articles/geo-faq-2-attention.html' },
    172. 

  172.         { icon:'📖', title:'成长型思维：帮助孩子拥抱挑战', desc:'从心理学研究出发，培养孩子面对困难时不放弃的核心信念。', coming:true }
    173. 

  173.       ],
    174. 

  174.       wealth: [
    175. 

  175.         { icon:'💡', title:'从小培养孩子的财商思维', desc:'零花钱管理、目标储蓄与价值交换，让财商教育融入日常生活。', coming:true },
    176. 

  176.         { icon:'🌱', title:'家庭创客生态：利他中的财富', desc:'在利他分享中创造价值，探索适合家庭的第二收入曲线。', coming:true }
    177. 

  177.       ],
    178. 

  178.       action: [
    179. 

  179.         { icon:'👨‍👩‍👧‍👦', title:'亲子关系：从控制到陪伴', desc:'当78%的孩子觉得父母不关心自己的感受，而100%的家长都认为自己非常关心孩子——这道鸿沟，到底在哪里？', url:'articles/parent-child-relationship.html' },
    180. 

  180.         { icon:'💑', title:'夫妻关系：从合伙人到同行者', desc:'结婚多年，对话浓缩成了"事务清单"。你们像两个优秀的合伙人，但少了什么？', url:'articles/marriage-relationship.html' },
    181. 

  181.         { icon:'🧰', title:'家庭关系实用工具箱', desc:'家庭会议、三明治沟通法、关系能量账户——三个经过验证的方法，明天就能用。', url:'articles/family-toolbox.html' }
    182. 

  182.       ],
    183. 

  183.       heart: [
    184. 

  184.         { icon:'❤️', title:'心脑血管疾病：从症-病-因到主动健康干预', desc:'心脑血管疾病的症状识别、发病机制与主动健康五步干预，科学守护心血管健康。', url:'articles/cardio-cerebro.html' },
    185. 

  185.         { icon:'💛', title:'亲子沟通：如何听懂孩子的心', desc:'从共情力到非暴力沟通，帮助家长走进孩子的内心世界。', coming:true },
    186. 

  186.         { icon:'🕊️', title:'儿童情绪管理：从认知到调节', desc:'理解各年龄段情绪发展规律，掌握实用的情绪疏导方法。', coming:true }
    187. 

  187.       ]
    188. 

  188.     };
    189. 

  189. 

  190.     var MARKER_POS = {
    191. 

  191.       brain: { top:'1%', side:'left', offset:'55%' },
    192. 

  192.       heart: { top:'21%', side:'right', offset:'52%' },
    193. 

  193.       gut:   { top:'36%', side:'left', offset:'53%' },
    194. 

  194.       hands: { top:'52%', side:'right', offset:'65%' },
    195. 

  195.       feet:  { top:'71%', side:'left', offset:'53%' }
    196. 

  196.     };
    197. 

  197. 

  198.     (function buildDesktop() {
    199. 

  199.       var c = document.getElementById('kbBodyInner');
    200. 

  200.       for (var i = 0; i < DIMS.length; i++) {
    201. 

  201.         var d = DIMS[i], pos = MARKER_POS[d.bodyPart], arts = ARTICLES[d.key] || [];
    202. 

  202.         var sideCls = pos.side==='left' ? 'kb-marker--right' : 'kb-marker--left';
    203. 

  203.         var m = document.createElement('div');
    204. 

  204.         m.className = 'kb-marker ' + sideCls;
    205. 

  205.         m.style.cssText = 'top:'+pos.top+';'+(pos.side==='left'?'left:'+pos.offset:'right:'+pos.offset);
    206. 

  206.         m.style.setProperty('--m-color', d.color);
    207. 

  207.         var card = document.createElement('div');
    208. 

  208.         card.className = 'kb-marker-card';
    209. 

  209.         card.style.setProperty('--m-color', d.color);
    210. 

  210.         var hd = document.createElement('div');
    211. 

  211.         hd.className = 'kb-marker-head';
    212. 

  212.         hd.innerHTML = '<span class="kb-marker-label">'+d.label+' · '+d.subtitle+'</span>';
    213. 

  213.         var maxVis = 3, hiddenDiv = null;
    214. 

  214.         if (arts.length > maxVis) {
    215. 

  215.           var moreBtn = document.createElement('span');
    216. 

  216.           moreBtn.className = 'kb-more-btn';
    217. 

  217.           moreBtn.textContent = '>>';
    218. 

  218.           hd.appendChild(moreBtn);
    219. 

  219.           hiddenDiv = document.createElement('div');
    220. 

  220.           hiddenDiv.className = 'kb-hidden-items';
    221. 

  221.           m.appendChild(hiddenDiv);
    222. 

  222.           (function(h,d){ var t=null; h.onmouseenter=function(){ if(t){clearTimeout(t);t=null} d.style.display='block'; }; h.onmouseleave=function(){ if(!t){t=setTimeout(function(){ if(!d.matches(':hover')){ d.style.display='none'; } t=null; },500);} }; d.onmouseenter=function(){ if(t){clearTimeout(t);t=null} d.style.display='block'; }; d.onmouseleave=function(){ if(!t){t=setTimeout(function(){ if(!h.matches(':hover')){ d.style.display='none'; } t=null; },500);} }; })(hd, hiddenDiv);
    223. 

  223.         }
    224. 

  224.         card.appendChild(hd);
    225. 

  225.         for (var j = 0; j < arts.length; j++) {
    226. 

  226.           var a = arts[j], el, container = card;
    227. 

  227.           if (j >= maxVis && hiddenDiv) container = hiddenDiv;
    228. 

  228.           if (a.coming) {
    229. 

  229.             el = document.createElement('div');
    230. 

  230.             el.className = 'ma-coming';
    231. 

  231.             el.innerHTML = '<span class="ma-icon">'+a.icon+'</span><span class="ma-title">'+a.title+' 即将上线</span>';
    232. 

  232.           } else {
    233. 

  233.             el = document.createElement('a');
    234. 

  234.             el.href = a.url;
    235. 

  235.             el.innerHTML = '<span class="ma-icon">'+a.icon+'</span><span class="ma-title">'+a.title+'</span><span class="ma-arrow">\u2192</span>';
    236. 

  236.           }
    237. 

  237.           container.appendChild(el);
    238. 

  238.         }
    239. 

  239.         var dot = document.createElement('div');
    240. 

  240.         dot.className = 'kb-marker-dot';
    241. 

  241.         dot.style.background = d.color;
    242. 

  242.         card.appendChild(dot);
    243. 

  243.         m.appendChild(card);
    244. 

  244.         c.appendChild(m);
    245. 

  245.       }
    246. 

  246.     })();
    247. 

  247. 

  248.     var activeDim = 'body';
    249. 

  249.     function buildTabs() {
    250. 

  250.       var c = document.getElementById('kbTabs'), h = '';
    251. 

  251.       for (var i = 0; i < DIMS.length; i++) {
    252. 

  252.         var d = DIMS[i];
    253. 

  253.         h += '<button class="kb-tab'+(d.key===activeDim?' active':'')+'" style="--tab-color:'+d.color+'" data-dim="'+d.key+'" onclick="switchTab(\''+d.key+'\')">'+d.label+'</button>';
    254. 

  254.       }
    255. 

  255.       c.innerHTML = h;
    256. 

  256.     }
    257. 

  257.     function renderArticles(k) {
    258. 

  258.       var c = document.getElementById('kbArticles'), arts = ARTICLES[k] || [], h = '';
    259. 

  259.       for (var i = 0; i < arts.length; i++) {
    260. 

  260.         var a = arts[i];
    261. 

  261.         if (a.coming) {
    262. 

  262.           h += '<div class="kb-a-item kb-a-coming"><span class="ai-icon">'+a.icon+'</span><div class="ai-info"><h4>'+a.title+'</h4><p>'+a.desc+'</p></div></div>';
    263. 

  263.         } else {
    264. 

  264.           h += '<a href="'+a.url+'" class="kb-a-item"><span class="ai-icon">'+a.icon+'</span><div class="ai-info"><h4>'+a.title+'</h4><p>'+a.desc+'</p></div><span style="color:var(--color-text-muted);font-size:0.9rem">→</span></a>';
    265. 

  265.         }
    266. 

  266.       }
    267. 

  267.       c.innerHTML = h;
    268. 

  268.     }
    269. 

  269.     function switchTab(k) { activeDim=k; var t=document.querySelectorAll('#kbTabs .kb-tab'); for(var i=0;i<t.length;i++){t[i].classList.remove('active');if(t[i].getAttribute('data-dim')===k)t[i].classList.add('active');} renderArticles(k); }
    270. 

  270.     buildTabs(); renderArticles(activeDim);
    271. 

  271. 

  272.     document.getElementById('navToggle').addEventListener('click',function(){document.getElementById('nav').classList.toggle('nav-open');this.classList.toggle('active');});
    273. 

  273.   </script>
    274. 

  274. </body>
    275. 

  275. </html>
    276.