PageSourceSearch

https://boardmix.com/pricing/

html boardmix.com collected 2026-10-02 15:02:15 UTC 150,914 bytes, 3,968 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<meta name="keywords" content="Boardmix price, Boardmix pricing, pricing of Boardmix">
7<meta name="description" content="Choose a Boardmix plan that suits your needs and embark on the journey to explore the extensive capabilities that Boardmix offers to both you and your team.">
8<title>Pricing - Boardmix</title>
9
10
11  <link rel="canonical" href="https://boardmix.com/pricing/">
12
13<!-- Google Tag Manager -->
14<script>
15	window.onload = function () {
16		(function (w, d, s, l, i) {
17			w[l] = w[l] || [];
18			w[l].push({
19				"gtm.start": new Date().getTime(),
20				event: "gtm.js",
21			});
22			var f = d.getElementsByTagName(s)[0],
23				j = d.createElement(s),
24				dl = l != "dataLayer" ? "&l=" + l : "";
25			j.async = true;
26			j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
27			f.parentNode.insertBefore(j, f);
28		})(window, document, "script", "dataLayer", "GTM-WDNXR73H");
29	};
30</script>
30
31<!-- End Google Tag Manager -->
32
33<!-- naver -->
34<meta name="naver-site-verification" content="54be9a1c50f04107d03b03ffd5f0efa235117c09" />
35<script type="text/javascript" src="//wcs.pstatic.net/wcslog.js"></script>
vendor: 2 bytes, line 35
35
36<script type="text/javascript">
37if(!wcs_add) var wcs_add = {};
38wcs_add["wa"] = "1b25b41edcc45b0";
39if(window.wcs) {
40wcs_do();
41}
42</script>
42
43
44<script
45	src="https://www.dwin1.com/82137.js"
46	type="text/javascript"
47	defer="defer"
48></script>
48
49<link rel="icon" href="https://cms.boardmix.com/images/board.ico" />
50
51<link
52  rel="stylesheet"
53  href="https://boardmix.com/assets/css/bootstrap-edraw.min.css"
54  title="boardmix"
55/>
56<link
57	href="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/style/reset-v4.css"
58	rel="stylesheet"
59/>
60<link
61	href="https://boardmix.com/assets/fonts/satoshi/font-satoshi.css?display=swap"
62	rel="stylesheet"
63/>
64<style>body,main{padding:0;margin:0;}.d-flex{display:flex;}.article-right #list-howto,.article-right #list-howto .menu-item{max-width:320px;padding-right: 8px; padding-left: 8px;}</style>
65<script>
66	function getCookie(name) {
67    var value = localStorage.getItem(name);
68
69    if (value !== null) {
70        return value;
71    }
72
73    var arr = document.cookie.match(new RegExp("(^|; )" + name + "=([^;]*)(;|$)"));
74
75    if (arr != null) {
76        return decodeURIComponent(arr[2]);
77    }
78
79    return null;
80}
81
82</script>
vendor: 2 bytes, line 82
82
83<script type="text/javascript">
84	(function (c, l, a, r, i, t, y) {
85		c[a] =
86			c[a] ||
87			function () {
88				(c[a].q = c[a].q || []).push(arguments);
89			};
90		t = l.createElement(r);
91		t.async = 1;
92		t.src = "https://www.clarity.ms/tag/" + i;
93		y = l.getElementsByTagName(r)[0];
94		y.parentNode.insertBefore(t, y);
95	})(window, document, "clarity", "script", "riwwy8n8zq");
96</script>
96
97<style>
98    
99@keyframes fx-shake-input {
100    0% {
101      margin-left: 0;
102    }
103    15% {
104      margin-left: -8px;
105    }
106    30% {
107      margin-left: 6px;
108    }
109    45% {
110      margin-left: -4px;
111    }
112    60% {
113      margin-left: 3px;
114    }
115    75% {
116      margin-left: -2px;
117    }
118    100% {
119      margin-left: 0;
120    }
121  }
122  .fx-shake-input {
123    animation: fx-shake-input 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97);
124  }
125
126/* Boardmix shared header mobile repair 2026-09-11 */
127button.header--expand {border:0;background:transparent;color:inherit;font:inherit;padding:0;}
128button.header--expand:focus-visible {outline:2px solid #832fff;outline-offset:6px;}
129@media(max-width:767px){
130 .global-banner {height:80px;box-sizing:border-box;padding:8px 36px 8px 12px;background-image:none !important;}
131 .global-banner:not(.d-none)+.header {top:80px;}
132 .global-banner .global-banner-wrap {width:100%;max-width:100% !important;box-sizing:border-box;padding-left:0;gap:10px;}
133 .global-banner-wrap::after {display:none;}
134 .global-banner-text {flex:1 1 auto;min-width:0;font-size:11px;line-height:15px;white-space:normal;}
135 .global-banner .global-banner-price,.global-banner-text > br {display:none;}
136 .global-banner-btn {flex:0 0 auto;min-width:70px;height:32px;font-size:12px;line-height:16px;padding:0 8px;box-sizing:border-box;}
137 .global-banner-close {right:8px;width:20px;height:20px;}
138}
139</style>
140
141<!-- IP 地理位置检测:俄罗斯用户跳转 -->
142<script>
143  (function () {
144    var xhr = new XMLHttpRequest();
145    xhr.onload = function () {
146      if (xhr.status >= 200 && xhr.status < 300) {
147        try {
148          var res = JSON.parse(xhr.responseText);
149          if (
150            res &&
151            res.data &&
152            res.data.iso_code &&
153            res.data.iso_code.indexOf("RU") !== -1
154          ) {
155            location.href = "https://boardmix.com/ru/pricing/";
156          }
157        } catch (e) { }
158      }
159    };
160    xhr.onerror = function () { };
161    xhr.open("GET", "https://api.boardmix.com/api/user/ipgeo", true);
162    xhr.send();
163  })();
164</script>
164
165<style>
166  /* ============================================================
167   CSS 样式 — 合并自 head.html,移除 Vue/jQuery 相关依赖
168   ============================================================ */
169
170  /* --- 基础/通用 --- */
171  * {
172    box-sizing: border-box;
173    margin: 0;
174    padding: 0;
175  }
176
177  /* --- 页面整体显隐(登录检测完成后显示) --- */
178  .price { opacity: 1; min-width: 0; width: 100%; }
179
180  .price-show {
181    opacity: 1;
182    transition: opacity 0.3s ease;
183  }
184
185  /* --- 计划卡片 & 浮动表头显隐控制 --- */
186  .plan-item[data-tab],
187  .compare-float--header-item[data-float-login] {
188    display: none;
189  }
190
191  .plan-item.plan-visible,
192  .compare-float--header-item.float-visible {
193    display: block;
194  }
195
196  .team-ai-buy-text {
197    margin-top: 10px;
198    font-size: 14px;
199    line-height: 20px;
200    width: calc(100% - 56px);
201    text-align: center;
202    cursor: pointer;
203    position: absolute;
204  }
205
206  .plan-item--annual {
207    position: relative;
208  }
209
210  .plan-item--annual::after {
211    content: "MOST POPULAR";
212    font-weight: 800;
213    color: #fff;
214    width: calc(100% + 2px);
215    height: calc(100% + 37px);
216    text-align: center;
217    z-index: -1;
218    padding-top: 7px;
219    border-radius: 20px;
220    top: -36px;
221    left: -1px;
222    background: #95f;
223    position: absolute;
224  }
225
226  /* --- Tooltip (替代 Bootstrap Popover) --- */
227  .question-mark {
228    display: inline-block;
229    width: 16px;
230    height: 16px;
231    margin-bottom: -3px;
232    background: url(https://cms.boardmix.com/images/price/question-mark.svg) center 16px;
233    opacity: 0.2;
234    cursor: pointer;
235    position: relative;
236    z-index: 100;
237    margin-left: 4px;
238  }
239
240  .question-mark:hover {
241    opacity: 0.4;
242  }
243
244  .tooltip-box {
245    position: absolute;
246    border: none;
247    background: rgba(13, 14, 16, 0.96);
248    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
249    border-radius: 6px;
250    padding: 8px 14px;
251    color: #fff;
252    font-size: 14px;
253    font-weight: 400;
254    white-space: nowrap;
255    z-index: 1000;
256    pointer-events: none;
257    opacity: 0;
258    transition: opacity 0.15s;
259  }
260
261  .tooltip-box.visible {
262    opacity: 1;
263  }
264
265  .tab-text {
266    user-select: none;
267  }
268
269  /* --- Banner --- */
270  .banner {
271    padding-top: 96px;
272    position: relative;
273  }
274
275  .banner-desc {
276    color: rgba(30, 25, 44, 0.6);
277    font-size: 20px;
278    font-weight: 400;
279    line-height: 30px;
280    margin: 4px 0 27px;
281  }
282
283  .plan-item-tag {
284    padding: 0 12px;
285    background-color: rgba(255, 255, 255, 0.24);
286    font-weight: 600;
287    font-size: 16px;
288    height: 31px;
289    line-height: 31px;
290    text-align: center;
291    border-radius: 0 20px 0 20px;
292    max-width: 96px;
293    position: absolute;
294    right: 0;
295    top: 0;
296  }
297
298  .plan-btn-primary:hover {
299    color: #fff;
300  }
301
302  .plan-btn-primary:active {
303    background-color: #3482f3;
304  }
305
306  .title {
307    font-size: 48px;
308    font-weight: 700;
309    line-height: 56px;
310    margin-bottom: 24px;
311  }
312
313  .px-desc {
314    color: rgba(0, 0, 0, 0.5);
315    font-size: 20px;
316    font-weight: 400;
317    line-height: 28px;
318    margin-bottom: 80px;
319  }
320
321  .bg-transparent {
322    box-shadow: none;
323    color: #fff;
324  }
325
326  .bg-transparent a {
327    color: #fff;
328    transition: none;
329  }
330
331  .header--item a {
332    transition: none;
333  }
334
335  main {
336    color: #121212;
337  }
338
339  .px-container {
340    max-width: 1550px;
341    margin-left: auto;
342    margin-right: auto;
343  }
344
345  .banner h1 {
346    color: #121212;
347    font-size: 48px;
348    font-weight: 800;
349    line-height: 56px;
350    margin-bottom: 0;
351  }
352
353  .banner-tabs {
354    background: #f6f6f8;
355    justify-content: center;
356    align-items: center;
357    border-radius: 84px;
358    min-height: 48px;
359    display: inline-block;
360    position: relative;
361    max-width: 216px;
362    margin: 42px auto 35px;
363  }
364
365  .plans-promotion {
366    padding-top: 36px;
367  }
368
369  [name="resource-tab--item"] {
370    position: absolute;
371    visibility: hidden;
372  }
373
374  .tab-title {
375    border-radius: 52px;
376    flex: 1;
377    height: 40px;
378    font-size: 16px;
379    font-weight: 400;
380    line-height: 40px;
381    transition:
382      color 0.3s ease-in,
383      background-color 0.2s ease;
384    margin-bottom: 0;
385    color: #898b8e;
386    position: relative;
387    z-index: 2;
388  }
389
390  .tab-title:hover {
391    color: #19191a;
392  }
393
394  .active-tab {
395    position: absolute;
396    left: 4px;
397    top: 4px;
398    height: 40px;
399    width: calc(100% / 2 - 8px);
400    transition: left 0.3s ease-out;
401    background: #fff;
402    border-radius: 52px;
403    z-index: 0;
404    box-shadow:
405      0 0 1px rgba(25, 25, 26, 0.08),
406      0 2px 8px rgba(25, 25, 26, 0.12);
407  }
408
409  /* --- Plan Items --- */
410  .plan-item {
411    min-height: 663px;
412    position: relative;
413    padding: 24px 28px 24px 28px;
414    border-radius: 20px;
415    box-shadow:
416      0 3px 6px 0 rgba(0, 0, 0, 0.03),
417      0 10px 20px 0 rgba(0, 0, 0, 0.02),
418      0 0 2px 0 rgba(0, 0, 0, 0.25);
419    background: #fff;
420  }
421
422  .plans-promotion .plan-item-promotion::before {
423    position: absolute;
424    top: 0;
425    right: 0;
426    left: 0;
427    bottom: 0;
428    z-index: 0;
429    margin: -2px;
430    border-radius: inherit;
431    background: linear-gradient(45deg,
432        rgba(255, 255, 255, 0.23) 0,
433        rgba(255, 255, 255, 0) 100%);
434  }
435
436  .plans-promotion .plan-item-promotion::after {
437    text-align: center;
438    padding-top: 8px;
439    content: "公测用户福利";
440    font-size: 14px;
441    position: absolute;
442    top: -40px;
443    width: 100%;
444    height: 100%;
445    display: inline-block;
446    left: 0;
447    background: linear-gradient(45deg, #7d04ff 0, #b100e2 100%);
448    z-index: -1;
449    border: 1px solid transparent;
450    border-radius: 20px;
451  }
452
453  .plan-title {
454    font-size: 18px;
455    font-weight: 700;
456    line-height: 25px;
457    margin-bottom: 4px;
458  }
459
460  .plan-title2 {
461    font-size: 18px;
462    font-weight: 700;
463    line-height: 25px;
464  }
465
466  .plan-title--tips {
467    color: rgba(30, 25, 44, 0.7);
468    font-size: 14px;
469    line-height: 19px;
470    height: 38px;
471    letter-spacing: 0;
472    text-align: left;
473    margin-bottom: 0;
474  }
475
476  .plan-item--monthly .plan-title {
477    color: #3788ff;
478  }
479
480  .plan-desc {
481    height: 44px;
482    font-size: 16px;
483    line-height: 22px;
484    color: rgba(30, 25, 44, 0.7);
485    margin-bottom: 18px;
486  }
487
488  .plan-price {
489    font-size: 32px;
490    line-height: 42px;
491    font-weight: 700;
492    margin-bottom: 7px;
493    height: 50px;
494  }
495
496  .plan-price--symbol,
497  .plan-price--unit {
498    font-size: 16px;
499    font-weight: 700;
500    line-height: 24px;
501  }
502
503  .plan-price--number {
504    font-size: 38px;
505    font-weight: 800;
506    line-height: 52px;
507  }
508
509  .plan-price--time {
510    font-size: 16px;
511    font-weight: 500;
512    line-height: 24px;
513  }
514
515  .plan-btn {
516    font-size: 18px;
517    height: 54px;
518    display: flex;
519    max-width: 318px;
520    align-items: center;
521    justify-content: center;
522    font-weight: 800;
523    border-radius: 10px;
524    position: relative;
525    color: #1e192c;
526    transition: all 0.2s;
527    text-decoration: none;
528    cursor: pointer;
529  }
530
531  .plan-item--monthly .plan-btn {
532    background: #3788ff;
533    color: #fff;
534  }
535
536  .plan-btn--tips {
537    background: linear-gradient(135deg,
538        rgba(255, 116, 206, 1) 4%,
539        rgba(255, 78, 119, 1) 100%);
540    position: absolute;
541    top: 16px;
542    left: 0;
543    transform: translateY(-100%);
544    font-size: 14px;
545    font-weight: 400;
546    line-height: 33px;
547    height: 33px;
548    color: #fff;
549    border-radius: 16px 16px 16px 0;
550    padding: 0 20px;
551  }
552
553  .plan-btn:active {
554    transform: scale(0.95);
555  }
556
557  .plan-btn-1 {
558    border: 2px solid #832fff;
559    transition: all 0.15s;
560  }
561
562  .plan-btn-2 {
563    background-color: #832fff;
564    color: #fff !important;
565    border: none !important;
566  }
567
568  .plan-btn-4 {
569    color: #fff;
570    background: linear-gradient(223.88deg, #ff4685 26.764%, #a748ff 90.819%);
571  }
572
573  .plan-btn-4:hover {
574    background: linear-gradient(223.88deg, #ff528e 26.764%, #b05aff 90.819%);
575  }
576
577  .plan-btn-1:hover {
578    background-color: #832fff;
579    color: #fff !important;
580  }
581
582  .plan-btn-2:hover {
583    background-color: #9751ff;
584  }
585
586  .plan-primary-btn {
587    background-color: #fff;
588  }
589
590  .plan-subtitle {
591    font-size: 16px;
592    font-weight: 700;
593    line-height: 24px;
594    margin: 44px 0 8px;
595    color: #1e192c;
596  }
597
598  .plan-desc-item {
599    font-size: 14px;
600    height: 42px;
601    display: flex;
602    align-items: center;
603    color: #1e192c;
604  }
605
606  .plan-desc-item .mr-1 {
607    min-width: 16px;
608  }
609
610  .banner-skew--divider {
611    width: 1px;
612    height: 14px;
613    background: rgba(29, 20, 108, 0.3);
614    transform: rotate(2.22deg);
615    margin: 0 24px;
616  }
617
618  .banner-skew-img {
619    margin-right: 12px;
620  }
621
622  .h1-img {
623    max-width: 760px;
624    min-height: 204px;
625  }
626
627  /* --- Feature Comparison Table --- */
628  .compare-table {
629    position: relative;
630    width: 100%;
631  }
632
633  .compare-float--header-item,
634  .compare-table td,
635  .compare-table th {
636    width: 16.67%;
637  }
638
639  .compare-float--header-item:nth-child(1),
640  .compare-table tr td:nth-child(1) {
641    width: 16.67%;
642  }
643
644  .compare-float--header-item {
645    font-size: 18px;
646    line-height: 32px;
647    color: #121212;
648    font-weight: 700;
649    text-align: center;
650    padding: 22px 0;
651  }
652
653  .plan-checkbox-wrap {
654    display: flex;
655    align-items: center;
656    cursor: pointer;
657    font-size: 14px;
658    height: 36px;
659    color: #1e192c;
660  }
661
662  .plan-addition {
663    border-top: 1px solid rgba(255, 255, 255, 0.16);
664    padding-left: 28px;
665    font-size: 14px;
666    height: 56px;
667    position: absolute;
668    width: 100%;
669    display: flex;
670    align-items: center;
671    left: 0;
672    bottom: 0;
673    background-color: #f7f2ff;
674    color: #1e192c;
675    border-radius: 0 0 20px 20px;
676  }
677
678  [data-type="TEAM"]~.plan-right-detail .plan-desc-item:last-child {
679    text-decoration: line-through;
680    color: rgba(30, 25, 44, 0.5);
681  }
682
683  [data-type="TEAM"]~.plan-right-detail .plan-desc-item:last-child .mr-1 {
684    opacity: 0;
685  }
686
687  [data-type="TEAM"]~.plan-addition {
688    opacity: 0.8;
689  }
690
691  .plan-addition-text {
692    color: rgba(255, 255, 255, 0.7);
693    padding: 7px 0 0 18px;
694  }
695
696  .plan-checkbox-wrap:hover .plan-checkbox {
697    opacity: 0.8;
698  }
699
700  .plan-checkbox {
701    width: 16px;
702    height: 16px;
703    border: 1px solid #8735ff;
704    margin-right: 8px;
705    border-radius: 2px;
706  }
707
708  .plan-checkbox-wrap.checked .plan-checkbox {
709    border: none;
710    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYuMDAwMDAwIiBoZWlnaHQ9IjE2LjAwMDAwMCIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KCgk8ZGVmcz4KCQk8Y2xpcFBhdGggaWQ9ImNsaXA5MTk5XzE0MTMwNiI+CgkJCTxyZWN0IGlkPSLnlLvmnb8gMTMwOCIgcng9IjIuMDAwMDAwIiB3aWR0aD0iMTQuNTAwMDAwIiBoZWlnaHQ9IjE0LjUwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC43NTAwMDAgMC43NTAwMDApIiBmaWxsPSJ3aGl0ZSIvPgoJCTwvY2xpcFBhdGg+Cgk8L2RlZnM+Cgk8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDkxOTlfMTQxMzA2KSI+CgkJPHBhdGggaWQ9IuefqeW9oiAyNjg3IiBkPSJNMTAuNDg1NSA2LjUxNDUzTDYuODI4NDkgMTAuMTcxNUw1IDguMzQzMDIiIHN0cm9rZT0iIzg3MzVGRiIgc3Ryb2tlLXdpZHRoPSIxLjUwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cgk8L2c+Cgk8cmVjdCBpZD0i55S75p2/IDEzMDgiIHJ4PSIyLjAwMDAwMCIgd2lkdGg9IjE0LjUwMDAwMCIgaGVpZ2h0PSIxNC41MDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNzUwMDAwIDAuNzUwMDAwKSIgc3Ryb2tlPSIjODczNUZGIiBzdHJva2Utd2lkdGg9IjEuNTAwMDAwIi8+Cjwvc3ZnPgo=) center center/cover no-repeat;
711  }
712
713  .plan-checkbox-text {
714    user-select: none;
715    border-bottom: 1px dashed rgba(30, 25, 44, 0.4);
716  }
717
718  .compare-table tr td:nth-child(1),
719  .compare-table tr th:nth-child(1) {
720    text-align: left;
721    padding-left: 16px;
722  }
723
724  .compare-table th,
725  .compare-title {
726    color: #121212;
727    font-size: 24px;
728    font-weight: 700;
729    line-height: 32px;
730  }
731
732  .td-24 {
733    height: 0 !important;
734    border-top: none !important;
735    line-height: 0 !important;
736    position: relative !important;
737    z-index: 0;
738    font-size: 0;
739    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
740    padding-top: 24px;
741  }
742
743  .compare-title.compare-title {
744    height: 80px;
745    padding-top: 24px;
746    background-color: #fff;
747  }
748
749  .compare-title.compare-title1 {
750    top: calc(18px + 110px - 12px - 45px);
751  }
752
753  .compare-table th {
754    height: 48px;
755    padding-bottom: 7px;
756  }
757
758  .compare-table td {
759    height: 56px;
760    padding: 0 4px;
761  }
762
763  .tips-icon {
764    width: 18px;
765    height: 18px;
766    border-radius: 50%;
767    margin: 0 auto;
768    display: flex;
769    align-items: center;
770    justify-content: center;
771  }
772
773  .no-icon {
774    width: 13px;
775    height: 2px;
776    background-color: rgba(0, 0, 0, 0.3);
777    margin: 0 auto;
778  }
779
780  .compare-btn {
781    transition: all 0.15s;
782    width: calc(100% - 20px);
783    height: 48px;
784    margin: 12px auto 0;
785    font-size: 16px;
786    display: flex;
787    align-items: center;
788    justify-content: center;
789    border-radius: 8px;
790    color: #1e192c;
791    border: 2px solid #832fff;
792  }
793
794  .compare-float--header {
795    border-bottom: 1px solid #f1f1f1;
796    position: fixed;
797    top: -150px;
798    background: #fff;
799    z-index: 4;
800    transition: top 0.2s ease;
801    width: 100%;
802  }
803
804  .compare-float--header__visible {
805    top: 128px;
806  }
807
808  .compare-float--header__visible1 {
809    top: 64px;
810  }
811
812  .compare-float--header-item {
813    width: 16.67% !important;
814  }
815
816  .compare-row:not(.compare-row__disable):hover {
817    background-color: rgba(0, 0, 0, 0.03);
818    border-radius: 8px;
819  }
820
821  .compare-row td:nth-child(1) {
822    border-radius: 8px 0 0 8px;
823  }
824
825  .compare-row td:nth-child(3) {
826    border-radius: 0 8px 8px 0;
827  }
828
829  .compare-row td {
830    color: rgba(0, 0, 0, 0.85);
831  }
832
833  .plan-gradient-btn {
834    background: #fff;
835  }
836
837  .plan-gradient-btn:hover {
838    color: #fff;
839  }
840
841  .plan-item--free .plan-btn {
842    border: 2px solid #832fff;
843  }
844
845  /* --- FAQ Accordion --- */
846  .question.sec {
847    margin-bottom: 128px;
848  }
849
850  .compare.sec {
851    margin-top: 128px;
852    margin-bottom: 100px;
853  }
854
855  .bottom-title {
856    font-size: 48px;
857    font-weight: 600;
858    line-height: 56px;
859    margin-bottom: 56px;
860    color: #fff;
861  }
862
863  .ed-footer {
864    background: #0d0d0d;
865  }
866
867  .bottom-grid {
868    display: flex;
869    justify-content: space-between;
870    max-width: 1085px;
871  }
872
873  .question-list {
874    margin-top: 48px;
875  }
876
877  .question-item {
878    padding: 0 28px;
879    background: #fbfbfb;
880    outline: 1px solid rgba(0, 0, 0, 0.05);
881    border-radius: 12px;
882    padding-bottom: 8px;
883  }
884
885  .question-header {
886    display: flex;
887    justify-content: space-between;
888    cursor: pointer;
889    padding: 24px 0 16px;
890  }
891
892  .question-title {
893    text-align: left;
894    color: #121212;
895    font-size: 20px;
896    font-weight: 500;
897    line-height: 32px;
898    margin-bottom: 0;
899    user-select: none;
900  }
901
902  .question .arrow {
903    transition: all 0.3s;
904  }
905
906  .question-header.open .arrow {
907    transition: all 0.4s;
908    transform: rotate(-180deg);
909  }
910
911  .question-body {
912    display: grid;
913    grid-template-rows: 0fr;
914    overflow: hidden;
915    padding-bottom: 0;
916    transition:
917      grid-template-rows 0.35s ease,
918      padding-bottom 0.35s ease;
919    text-align: left;
920  }
921
922  .question-body.open {
923    grid-template-rows: 1fr;
924    padding-bottom: 16px;
925  }
926
927  .question-body>.question-desc {
928    overflow: hidden;
929    min-height: 0;
930  }
931
932  .question-desc {
933    color: rgba(0, 0, 0, 0.7);
934    font-size: 16px;
935    margin-bottom: 0;
936    line-height: 28px;
937    padding-bottom: 0;
938    user-select: none;
939  }
940
941  .question-item:nth-child(n + 2) {
942    margin-top: 24px;
943  }
944
945  .contact-grid {
946    display: flex;
947    align-items: center;
948    justify-content: center;
949  }
950
951  .contact-divider {
952    height: 226px;
953    width: 1px;
954    background: rgba(0, 0, 0, 0.08);
955    margin: 0 108px;
956  }
957
958  .contact-right {
959    padding: 30px 30px 15px;
960    text-align: center;
961  }
962
963  .contact-desc {
964    color: rgba(0, 0, 0, 0.5);
965    font-size: 20px;
966    line-height: 28px;
967    margin-bottom: 42px;
968  }
969
970  .contact-right {
971    width: 228px;
972    height: 250px;
973  }
974
975  .contact-right--img {
976    width: 126px;
977  }
978
979  .contact-right--desc {
980    color: rgba(0, 0, 0, 0.5);
981    margin-top: 4px;
982    font-size: 14px;
983    font-weight: 400;
984    line-height: 21px;
985    text-align: center;
986  }
987
988  /* --- Price Tabs --- */
989  .price-tabs {
990    display: inline-flex;
991    height: 45px;
992    padding: 4px;
993    border: 1px solid rgba(0, 0, 0, 1);
994    border-radius: 100px;
995    margin: 0 auto 50px;
996    position: relative;
997  }
998
999  .price-tab--item {
1000    min-width: 94px;
1001    height: 37px;
1002    display: flex;
1003    justify-content: center;
1004    align-items: center;
1005    position: relative;
1006    cursor: pointer;
1007    transition: color 300ms ease-in-out;
1008    padding: 0 8px;
1009    white-space: nowrap;
1010  }
1011
1012  .price-tab--item-active {
1013    color: white;
1014  }
1015
1016  .price-tab--item-swiper {
1017    min-width: 96px;
1018    height: 37px;
1019    border-radius: 1000px;
1020    background: rgba(30, 25, 44, 1);
1021    position: absolute;
1022    top: 3px;
1023    transition:
1024      left 300ms ease-in-out,
1025      width 300ms ease-in-out;
1026  }
1027
1028  /* --- Plans Grid --- */
1029  .plans {
1030    position: relative;
1031    display: flex;
1032    align-items: center;
1033    flex-direction: column;
1034    width: 1694px;
1035    margin: 0 auto;
1036  }
1037
1038  /* Annual 计划使用滚动容器 */
1039  .plans-scroll-wrap {
1040    position: relative;
1041    width: 1514px;
1042    overflow: hidden;
1043    padding: 37px 0 16px;
1044    /* 通过 class 切换启用滚动 */
1045  }
1046
1047  .plans-scroll-wrap.scrollable {
1048    /* 未登录 5 个 item 时启用滚动 */
1049  }
1050
1051  .plans-scroll-inner {
1052    display: flex;
1053    gap: 30px;
1054    transition: transform 0.4s ease;
1055    will-change: transform;
1056    padding: 0 8px;
1057  }
1058
1059  .plans-scroll-inner>.plan-item {
1060    flex: 0 0 calc((100% - 90px) / 4);
1061    min-width: 280px;
1062  }
1063
1064  /* 滚动按钮 */
1065  .plans-scroll-btn {
1066    position: absolute;
1067    top: 50%;
1068    transform: translateY(-50%);
1069    width: 42px;
1070    height: 42px;
1071    border-radius: 10px;
1072    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06);
1073    border: 1px solid rgba(0, 0, 0, 0.08);
1074    display: flex;
1075    align-items: center;
1076    justify-content: center;
1077    z-index: 5;
1078    color: #000;
1079    transition: all 0.15s;
1080    cursor: pointer;
1081  }
1082
1083  .plans-scroll-btn:hover {
1084    color: rgb(131, 47, 255);
1085    border-color: rgba(0, 0, 0, 0);
1086    background: rgba(131, 47, 255, 0.1);
1087  }
1088
1089  .plans-scroll-btn--left {
1090    left: 24px;
1091  }
1092
1093  .plans-scroll-btn--left svg {
1094    transform: rotate(180deg);
1095  }
1096
1097  .plans-scroll-btn--right {
1098    right: 24px;
1099  }
1100
1101  /* Lifetime 计划在滚动区域内,与其他 plan-item 统一布局 */
1102  .plan-item--ai {
1103    grid-column: 1/-1;
1104    padding: 51px 90px 46px 74px;
1105    height: auto;
1106    display: flex;
1107    justify-content: space-between;
1108    flex-wrap: wrap;
1109  }
1110
1111  .plan-item--ai .plan-desc-item {
1112    height: 32px;
1113  }
1114
1115  .plan-item--ai-slide {
1116    position: relative;
1117    width: 54.75%;
1118    max-width: 657px;
1119    text-align: center;
1120    display: flex;
1121    flex-direction: column;
1122    justify-content: center;
1123    overflow: hidden;
1124    border-radius: 20px;
1125  }
1126
1127  .plan-item--ai-slide::after {
1128    content: "";
1129    display: inline-block;
1130    position: absolute;
1131    left: 0;
1132    top: 0;
1133    width: 100%;
1134    height: 100%;
1135    z-index: 0;
1136    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0), #fff);
1137  }
1138
1139  .plan-item--ai-slide-item {
1140    color: #1e192c;
1141    font-size: 14px;
1142    background-color: #f7f6fc;
1143    border-radius: 18px;
1144    min-width: 223px;
1145    margin: 0 5px;
1146    font-weight: 700;
1147    height: 130px;
1148    padding-top: 15px;
1149  }
1150
1151  .plan-item--ai-slide-img {
1152    height: 78px;
1153    display: block;
1154    margin: 0 auto;
1155  }
1156
1157  .plan-item--ai-slide-row {
1158    display: flex;
1159    overflow: hidden;
1160  }
1161
1162  .plan-item--ai-slide-row:nth-child(1) {
1163    width: calc(233px * 6);
1164    animation: left-effect 45s linear infinite;
1165    will-change: transform;
1166  }
1167
1168  .plan-item--ai-slide-row:nth-child(2) {
1169    width: calc(233px * 6);
1170    animation: right-effect 45s linear infinite;
1171    will-change: transform;
1172  }
1173
1174  @keyframes left-effect {
1175    0% {
1176      transform: translateX(0);
1177    }
1178
1179    100% {
1180      transform: translateX(-50%);
1181    }
1182  }
1183
1184  @keyframes right-effect {
1185    0% {
1186      transform: translateX(-50%);
1187    }
1188
1189    100% {
1190      transform: translateX(0);
1191    }
1192  }
1193
1194  .plan-item--ai-slide-row+.plan-item--ai-slide-row {
1195    margin-top: 10px;
1196  }
1197
1198  .plan-item--ai-slide-center {
1199    position: absolute;
1200    top: 50%;
1201    left: 50%;
1202    transform: translate(-50%, -50%);
1203    z-index: 1;
1204    height: 100%;
1205  }
1206
1207  .gradient-border {
1208    position: relative;
1209  }
1210
1211  .gradient-border::before {
1212    content: "";
1213    position: absolute;
1214    top: -2px;
1215    left: -2px;
1216    z-index: -1;
1217    width: calc(100% + 4px);
1218    height: calc(100% + 4px);
1219    border-radius: 22px;
1220    background-image: linear-gradient(to left, #9760ff, #ff3697, #ff9b49);
1221  }
1222
1223  /* --- Bottom CTA --- */
1224  .bm-bottom {
1225    min-height: 620px;
1226    padding: 192px 0;
1227    position: relative;
1228    overflow: hidden;
1229  }
1230
1231  .bm-bottom-decoration {
1232    position: absolute;
1233    top: 111px;
1234  }
1235
1236  .bm-botom-left {
1237    left: -110px;
1238    transform: translateX(var(--bottom-translateX));
1239    animation: bottom-left-effect var(--bottom-duration) ease-in-out forwards;
1240    animation-play-state: paused;
1241    will-change: transform;
1242    opacity: 0;
1243    transition: opacity 0.15s;
1244    z-index: -1;
1245  }
1246
1247  .bm-botom-right {
1248    right: -110px;
1249    transform: translateX(calc(var(--bottom-translateX) * -1));
1250    animation: bottom-right-effect var(--bottom-duration) ease-in-out forwards;
1251    animation-play-state: paused;
1252    will-change: transform;
1253    opacity: 0;
1254    transition: opacity 0.15s;
1255    z-index: -1;
1256  }
1257
1258  .active .bm-botom-left,
1259  .active .bm-botom-right {
1260    animation-play-state: running;
1261    opacity: 1;
1262  }
1263
1264  @keyframes bottom-left-effect {
1265    0% {
1266      transform: translateX(381px);
1267    }
1268
1269    25% {
1270      transform: translateX(var(--bottom-translateX));
1271    }
1272
1273    100% {
1274      transform: translateX(0);
1275    }
1276  }
1277
1278  @keyframes bottom-right-effect {
1279    0% {
1280      transform: translateX(-381px);
1281    }
1282
1283    25% {
1284      transform: translateX(calc(var(--bottom-translateX) * -1));
1285    }
1286
1287    100% {
1288      transform: translateX(0);
1289    }
1290  }
1291
1292  .bm-btn-arrow {
1293    margin-left: 10px;
1294    animation: btnArrowEffect 3s both infinite;
1295    width: 19.5px;
1296    height: 14px;
1297  }
1298
1299  @keyframes btnArrowEffect {
1300    0% {
1301      transform: translate(0);
1302    }
1303
1304    10% {
1305      transform: translate(4px);
1306    }
1307
1308    20% {
1309      transform: translate(-2px);
1310    }
1311
1312    30% {
1313      transform: translate(4px);
1314    }
1315
1316    40% {
1317      transform: translate(-2px);
1318    }
1319
1320    50% {
1321      transform: translate(0);
1322    }
1323  }
1324
1325  .bm-bottom-title {
1326    font-size: 56px;
1327    font-weight: 600;
1328    line-height: 64px;
1329    color: #1b192c;
1330    margin: 0 auto 69px;
1331    max-width: 660px;
1332  }
1333
1334  .bm-container {
1335    max-width: 1200px;
1336    margin-left: auto;
1337    margin-right: auto;
1338  }
1339
1340  .bm-bottom-desc {
1341    color: rgba(0, 0, 0, 0.6);
1342    font-size: 20px;
1343    font-weight: 400;
1344    margin-bottom: 69px;
1345    line-height: 20px;
1346  }
1347
1348  .bm-btn {
1349    user-select: none;
1350    height: 56px;
1351    width: 214px;
1352    background-color: #832fff;
1353    border-radius: 16px;
1354    display: flex;
1355    justify-content: center;
1356    align-items: center;
1357    color: #fff;
1358    text-align: center;
1359    line-height: 56px;
1360    font-size: 18px;
1361    font-weight: 600;
1362    cursor: pointer;
1363    transition:
1364      transform 0.44s ease,
1365      box-shadow 0.44s ease;
1366    will-change: transform;
1367  }
1368
1369  .bm-btn:hover {
1370    color: #fff;
1371    transform: translateY(-6px);
1372  }
1373
1374  .bm-btn:active,
1375  .compare-btn:active,
1376  .plan-btn:active {
1377    transform: scale(0.96);
1378    transition:
1379      transform ease-in 0.1s,
1380      box-shadow ease-in 0.25s;
1381  }
1382
1383  .bm-btn-arrow {
1384    margin-left: 12px;
1385  }
1386
1387  .bm-btn:hover .bm-btn-arrow {
1388    animation-play-state: paused;
1389  }
1390
1391  .bm-btn:hover {
1392    color: #fff;
1393  }
1394
1395  /* --- Buy Iframe Overlay --- */
1396  .buy-iframe {
1397    position: fixed;
1398    left: 0;
1399    top: 0;
1400    width: 100%;
1401    height: 101%;
1402    opacity: 0;
1403    z-index: -1;
1404    background: rgba(0, 0, 0, 0.4);
1405  }
1406
1407  .buy-iframe__active {
1408    opacity: 1;
1409    z-index: 999;
1410  }
1411
1412  /* --- Misc --- */
1413  .goods-dialog--pay-iframe {
1414    position: absolute;
1415    width: 100%;
1416    height: 100%;
1417  }
1418
1419  .buy-btn {
1420    cursor: pointer;
1421  }
1422
1423  .oversea-lift-time-select--desc-list {
1424    list-style: none;
1425    padding-left: 0;
1426    display: none;
1427  }
1428
1429  .oversea-lift-time-select--desc-item {
1430    position: relative;
1431    font-size: 14px;
1432    min-height: 40px;
1433    line-height: 20px;
1434    color: #1e192c;
1435    padding: 10px 0 10px 20px;
1436  }
1437
1438  .oversea-lift-time-select--desc-item:before {
1439    content: "";
1440    display: inline-block;
1441    position: absolute;
1442    width: 16px;
1443    height: 16px;
1444    top: 12px;
1445    left: 0;
1446    background: url(https://cms.boardmix.com/images/price/support.png) center center/contain no-repeat;
1447  }
1448
1449  .life-goods-title {
1450    display: none;
1451  }
1452
1453  /* ============================================================
1454   响应式
1455   ============================================================ */
1456  @media (max-width: 1694px) {
1457    .plans {
1458      width: 1312px;
1459    }
1460
1461    .plans-scroll-wrap {
1462      width: 1132px;
1463    }
1464
1465    .plans-scroll-inner>.plan-item {
1466      flex: 0 0 calc((100% - 60px) / 3);
1467    }
1468  }
1469
1470  .h1-img-mobile {
1471    display: none;
1472  }
1473
1474  /* 2026-09-11 mobile baseline: keep pricing readable before login detection. */
1475  .price { opacity: 1; min-width: 0; width: 100%; }
1476  .plans { width: 100%; max-width: 1694px; min-width: 0; }
1477  .plans-scroll-wrap { width: 100%; max-width: 1514px; min-width: 0; overflow-x: auto; }
1478  .plans-scroll-inner { min-width: max-content; }
1479  @media (max-width: 1694px) { .plans { width: 100%; } .plans-scroll-wrap { width: 100%; } }
1480
1481  /* 2026-09-11 pricing mobile layout: vertical cards, local table scroll. */
1482  @media (max-width: 767px) {
1483    .price .px-container { width: 100%; max-width: 100%; padding-left: 16px; padding-right: 16px; }
1484    .price .banner { padding-top: 48px; }
1485    .price .banner h1 { font-size: 36px; line-height: 44px; }
1486    .price .banner-desc { font-size: 18px; line-height: 26px; }
1487    .price .plans { width: 100%; max-width: 100%; padding: 0 16px; }
1488    .price .plans-scroll-wrap { width: 100%; max-width: 100%; overflow: visible; }
1489    .price .plans-scroll-inner { display: block; width: 100%; min-width: 0; padding: 0; transform: none !important; }
1490    .price .plans-scroll-inner > .plan-item { width: 100%; max-width: 100%; min-width: 0; margin: 0 0 52px; }
1491    .price .plans-scroll-btn { display: none !important; }
1492    .price .compare-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
1493    .price .compare-table th, .price .compare-table td { min-width: 110px; }
1494    .price .compare-float--header { display: none !important; }
1495    .price img { max-width: 100%; height: auto; }
1496    .price .tooltip-box { max-width: calc(100vw - 32px); white-space: normal; }
1497  }
1498
1499  /* 2026-09-11 desktop pricing layout correction. */
1500  @media (min-width: 768px) {
1501    .price .plans { width: 1694px; max-width: calc(100vw - 64px); min-width: 0; padding: 0; }
1502    .price .plans-scroll-wrap { width: min(1514px, calc(100vw - 64px)); max-width: 1514px; min-width: 0; overflow-x: hidden; }
1503    .price .plans-scroll-inner { display: flex; width: 100%; min-width: 0; padding: 0; transform: none; }
1504    .price .plans-scroll-inner > .plan-item { flex: 0 0 calc((100% - 90px) / 4); width: auto; min-width: 280px; max-width: none; }
1505    .price .compare-table { display: table; width: 100%; max-width: none; overflow: visible; }
1506  }
1507
1508  /* 2026-09-11 desktop pricing breakpoint correction. */
1509  @media (min-width: 768px) and (max-width: 1694px) {
1510    .price .plans-scroll-wrap { width: min(1132px, calc(100vw - 64px)); }
1511    .price .plans-scroll-inner > .plan-item { flex-basis: calc((100% - 60px) / 3); }
1512  }
1513
1514  /* 2026-09-11 pricing border visibility: preserve card edge inside clipped rail. */
1515  @media (min-width: 768px) {
1516    .price .plans-scroll-wrap { box-sizing: border-box; padding-right: 4px; }
1517    .price .plans-scroll-inner { width: calc(100% - 4px); }
1518  }
1519
1520  /* 2026-09-11 annual card border: keep highlighted edge visible inside rail. */
1521  @media (min-width: 768px) {
1522    .price .plans-scroll-inner > .plan-item--annual { border: 1px solid #9955ff; box-sizing: border-box; }
1523  }
1524</style>
1525<!-- SEO hreflang alternates - added 2026-09-03 -->
1526<link rel="alternate" hreflang="en" href="https://boardmix.com/pricing/">
1527<link rel="alternate" hreflang="es" href="https://boardmix.com/es/pricing/">
1528<link rel="alternate" hreflang="ru" href="https://boardmix.com/ru/pricing/">
1529<link rel="alternate" hreflang="ja" href="https://boardmix.com/jp/pricing/">
1530<link rel="alternate" hreflang="ko-KR" href="https://boardmix.com/kr/pricing/">
1531<link rel="alternate" hreflang="x-default" href="https://boardmix.com/pricing/">
1532<!-- /SEO hreflang alternates -->
1533
1534</head>
1535<body data-pro="boardmix" data-cat="template" data-nav="basic" data-sys="auto" data-dev="auto" data-tar="auto" data-lan="en">
1536<a href="https://boardmix.com/boardmix-lifetime-deal/" target="_blank" class="global-banner" style="
1537    display: block;
1538    background: #1b111e
1539      url(https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/2024black/banner-top3.jpeg)
1540      center center/cover no-repeat;
1541  ">
1542    <div class="global-banner-wrap" style="max-width: 900px">
1543        <div class="global-banner-text">
1544            <span class="global-banner-price" style="white-space: nowrap; font-size: 16px">Affordable AI-Powered
1545                Collaboration Starts Here! Go Pro for Less🎉 </span><br />Lifetime plans start at just $99/seat, upgrade
1546            today and save big for your team.
1547        </div>
1548        <div class="global-banner-btn">Shop Now</div>
1549    </div>
1550    <img src="https://cms.boardmix.com/images/lifetime/banner-close.svg" class="global-banner-close"
1551        alt="activity banner" />
1552</a>
1553<header class="header">
1554    <div class="header--container">
1555        <a href="https://boardmix.com" class="header--brand" style="min-width: 144px"><img
1556                src="https://cms.boardmix.com/images/[email protected]" width="144" height="33" class="logo-black"
1557                alt="logo" />
1558            <img src="https://cms.boardmix.com/images/board-logo-white.svg" class="logo-white" alt="logo "
1559                style="width: 144px" /></a>
1560        <button type="button" class="header--expand" aria-label="Open navigation menu" aria-expanded="false" aria-controls="boardmix-navigation">
1561            <i class="wsc-icon aria-expanded-false-show expand-icon"><svg class="wsc-svg-symbol-menu"
1562                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none"
1563                    stroke="currentcolor" stroke-linecap="butt" stroke-linejoin="bevel" stroke-width="2">
1564                    <path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24"></path>
1565                </svg></i><i class="wsc-icon aria-expanded-true-show shrink-icon d-none"
1566                style="width: 14px; left: -4px"><svg class="wsc-svg-symbol-close" xmlns="http://www.w3.org/2000/svg"
1567                    viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="butt"
1568                    stroke-linejoin="bevel" stroke-width="2">
1569                    <path d="M2 30 L30 2 M30 30 L2 2"></path>
1570                </svg></i>
1571        </button>
1572        <div class="header--menu--mask"></div>
1573        <div class="header--content" id="boardmix-navigation">
1574            <div class="header--first">
1575                <div class="header--item header--products">
1576                    <div class="d-flex">
1577                        <span>Product</span><svg class="header--products--arrow" viewBox="0 0 20 20">
1578                            <use href="#header-dropdown--arrow"></use>
1579                        </svg>
1580                    </div>
1581                    <div class="header--products--float-box header--products--float-solution-box">
1582                        <div class="header--float-products" style="height: auto">
1583                            <div class="header-panel--column header-logos">
1584                                <div class="header--panel-link" data-nav-link="">
1585                                    <div class="header--link-img-wrap">
1586                                        <img loading="lazy"
1587                                            src="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/2025/product-board.png"
1588                                            width="44" height="44" class="header--link-img" alt="Boardmix" />
1589                                    </div>
1590                                    <div class="header--panel-subtitle">
1591                                        <a href="https://boardmix.com/online-whiteboard/">Boardmix</a>
1592                                        <p class="header--panel--p">Online Collaborative Whiteboard</p>
1593                                    </div>
1594                                </div>
1595                                <div class="header--panel-link" data-nav-link="">
1596                                    <div class="header--link-img-wrap">
1597                                        <img loading="lazy"
1598                                            src="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/2025/product-sdk.png"
1599                                            width="44" height="44" class="header--link-img" alt="SDK" />
1600                                    </div>
1601                                    <div class="header--panel-subtitle">
1602                                        <a href="https://boardmix.com/sdk-integration/">Boardmix SDK</a>
1603                                        <p class="header--panel--p">Boardmix Developer Platform</p>
1604                                    </div>
1605                                </div>
1606                                <div class="header--panel-link" data-nav-link="">
1607                                    <div class="header--link-img-wrap">
1608                                        <img loading="lazy" src="https://boardmix.com/assets/image/product-agent.png"
1609                                            width="44" height="44" class="header--link-img" alt="AI" />
1610                                    </div>
1611                                    <div class="header--panel-subtitle">
1612                                        <a href="https://boardmix.com/ai-agent/">Boardmix AI</a>
1613                                        <p class="header--panel--p">100+ AI Agents Integrated</p>
1614                                    </div>
1615                                </div>
1616                                <div class="header--panel-link" data-nav-link="">
1617                                    <div class="header--link-img-wrap">
1618                                        <img loading="lazy"
1619                                            src="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/2025/product-pixso.png"
1620                                            width="44" height="44" class="header--link-img" alt="Pixso" />
1621                                    </div>
1622                                    <div class="header--panel-subtitle">
1623                                        <a href="https://pixso.net/">Pixso</a>
1624                                        <p class="header--panel--p">UI/UX Tool, Figma Alternative</p>
1625                                    </div>
1626                                </div>
1627                                <div class="header--panel-link" data-nav-link="">
1628                                    <div class="header--link-img-wrap">
1629                                        <img loading="lazy"
1630                                            src="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/assets/presenti-logo.png"
1631                                            width="44" height="44" class="header--link-img" alt="Presenti AI " />
1632                                    </div>
1633                                    <div class="header--panel-subtitle">
1634                                        <a href="https://presenti.ai/">Presenti AI</a>
1635                                        <p class="header--panel--p">AI PPT Maker, Gamma Alternative</p>
1636                                    </div>
1637                                </div>
1638                            </div>
1639                        </div>
1640                    </div>
1641                </div>
1642                <div class="header--item header--products">
1643                    <div class="d-flex">
1644                        <span>Solutions</span><svg class="header--products--arrow" viewBox="0 0 20 20">
1645                            <use href="#header-dropdown--arrow"></use>
1646                        </svg>
1647                    </div>
1648                    <div class="header--products--float-box header--products--float-solution-box">
1649                        <div class="header--float-products header--float-solution" style="height: auto">
1650                            <div class="header--float-solution-lf">
1651                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1652                                    Diagram
1653                                </div>
1654                                <div class="header--float-solution-lf-item-wrapper">
1655                                    <div class="header--float-solution-lf-item-wrap">
1656                                        <a href="https://boardmix.com/mind-map/"
1657                                            class="header--float-solution-lf-item">Mind Mapping</a><a
1658                                            href="https://boardmix.com/flow-chart/"
1659                                            class="header--float-solution-lf-item">Flowchart</a><a
1660                                            href="https://boardmix.com/er-diagram/"
1661                                            class="header--float-solution-lf-item">ER-Diagram</a><a
1662                                            href="https://boardmix.com/uml-diagram/"
1663                                            class="header--float-solution-lf-item">UML Diagram</a><a
1664                                            href="https://boardmix.com/organizational-chart/"
1665                                            class="header--float-solution-lf-item">Organizational Chart</a>
1666                                    </div>
1667                                    <div class="header--float-solution-lf-item-wrap">
1668                                        <a href="https://boardmix.com/smart-goals/"
1669                                            class="header--float-solution-lf-item">SMART Goals Setting</a><a
1670                                            href="https://boardmix.com/diagram-maker/"
1671                                            class="header--float-solution-lf-item">Technical Diagram</a><a
1672                                            href="https://boardmix.com/business-model-canvas/"
1673                                            class="header--float-solution-lf-item">Business Model Canvas</a><a
1674                                            href="https://boardmix.com/customer-journey-map/"
1675                                            class="header--float-solution-lf-item">Customer Journey Map</a><a
1676                                            href="https://boardmix.com/architecture-diagram/"
1677                                            class="header--float-solution-lf-item">Architecture Diagram</a>
1678                                    </div>
1679                                </div>
1680                            </div>
1681                            <div class="header--float-solution-lf">
1682                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1683                                    Workflow
1684                                </div>
1685                                <a href="https://boardmix.com/scrum-tool/" class="header--float-solution-lf-item">Scrum
1686                                    Board</a><a href="https://boardmix.com/brainstorming/"
1687                                    class="header--float-solution-lf-item">Brainstorming</a><a
1688                                    href="https://boardmix.com/hybrid-work/" class="header--float-solution-lf-item">Team
1689                                    Collaboration</a><a href="https://boardmix.com/research-and-analysis/"
1690                                    class="header--float-solution-lf-item">Research and Analysis</a><a
1691                                    href="https://boardmix.com/meeting-and-workshops/"
1692                                    class="header--float-solution-lf-item">Meeting and Workshop</a><a
1693                                    href="https://boardmix.com/product-planning/"
1694                                    class="header--float-solution-lf-item">Product Planning</a>
1695                            </div>
1696                        </div>
1697                    </div>
1698                </div>
1699                <div class="header--item header--products">
1700                    <div class="d-flex">
1701                        <span>AI</span><svg class="header--products--arrow" viewBox="0 0 20 20">
1702                            <use href="#header-dropdown--arrow"></use>
1703                        </svg>
1704                    </div>
1705                    <div class="header--products--float-box header--products--float-solution-box">
1706                        <div class="header--float-products header--float-solution" style="height: auto">
1707                            <div class="header--float-solution-lf">
1708                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1709                                    Creativity & Diagram
1710                                </div>
1711                                <a href="https://boardmix.com/ai-mind-map/" class="header--float-solution-lf-item">AI
1712                                    Mind Map</a><a href="https://boardmix.com/ai-flowchart/"
1713                                    class="header--float-solution-lf-item">AI Flowchart</a><a
1714                                    href="https://boardmix.com/ai-user-journey-map/"
1715                                    class="header--float-solution-lf-item">AI User Journey Map</a><a
1716                                    href="https://boardmix.com/ai-fishbone-diagram/"
1717                                    class="header--float-solution-lf-item">AI Fishbone Diagram</a>
1718                            </div>
1719                            <div class="header--float-solution-lf">
1720                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1721                                    Planning & Processing
1722                                </div>
1723                                <a href="https://boardmix.com/ai-business-model-canvas/"
1724                                    class="header--float-solution-lf-item">AI Business Model Canvas</a><a
1725                                    href="https://boardmix.com/ai-swot-analysis/"
1726                                    class="header--float-solution-lf-item">AI SWOT Analysis</a><a
1727                                    href="https://boardmix.com/ai-value-chain/"
1728                                    class="header--float-solution-lf-item">AI Value Chain</a>
1729                            </div>
1730                            <div class="header--float-solution-lf">
1731                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1732                                    Strategy & Analysis
1733                                </div>
1734                                <a href="https://boardmix.com/ai-user-persona/"
1735                                    class="header--float-solution-lf-item">AI User Persona</a><a
1736                                    href="https://boardmix.com/ai-smart-goal-generator/"
1737                                    class="header--float-solution-lf-item">AI SMART Goals</a><a
1738                                    href="https://boardmix.com/bcg-matrix-ai-generator/"
1739                                    class="header--float-solution-lf-item">AI BCG Matrix</a>
1740                            </div>
1741                            <div class="header--float-solution-lf">
1742                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1743                                    Smart Creation
1744                                </div>
1745                                <a href="https://boardmix.com/ai-whiteboard/" class="header--float-solution-lf-item">AI
1746                                    Whiteboard</a><a href="https://boardmix.com/ai-ppt/"
1747                                    class="header--float-solution-lf-item">AI Presentation</a><a
1748                                    href="https://boardmix.com/ai-resume-builder/"
1749                                    class="header--float-solution-lf-item">AI Resume Builder</a>
1750                            </div>
1751                        </div>
1752                    </div>
1753                </div>
1754                <div class="header--item header--products">
1755                    <div class="d-flex">
1756                        Resources<svg class="header--products--arrow" viewB
1756ox="0 0 20 20">
1757                            <use href="#header-dropdown--arrow"></use>
1758                        </svg>
1759                    </div>
1760                    <div class="header--products--float-box header--products--float-solution-box">
1761                        <div class="header--float-products header--float-solution" style="height: auto">
1762                            <div class="header--float-solution-lf">
1763                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1764                                    Explore
1765                                </div>
1766                                <a href="https://boardmix.com/templates/"
1767                                    class="header--float-solution-lf-item">Templates</a><a
1768                                    href="https://boardmix.com/download/"
1769                                    class="header--float-solution-lf-item">Download</a><a
1770                                    href="https://boardmix.com/releases/" class="header--float-solution-lf-item">What's
1771                                    New</a>
1772                            </div>
1773                            <div class="header--float-solution-lf">
1774                                <div class="header--float-solution-lf-title header--float-solution-lf-scene">
1775                                    Learn
1776                                </div>
1777                                <a href="https://boardmix.com/help/" class="header--float-solution-lf-item">Guide</a><a
1778                                    href="https://boardmix.com/articles/"
1779                                    class="header--float-solution-lf-item">Blog</a>
1780                            </div>
1781                        </div>
1782                    </div>
1783                </div>
1784                <div class="header--item header--products">
1785                    <div class="d-flex">
1786                        <span>Enterprise</span>
1786<svg class="header--products--arrow" viewBox="0 0 20 20">
1787                            <use href="#header-dropdown--arrow"></use>
1788                        </svg>
1789                    </div>
1790                    <div class="header--products--float-box header--products--float-solution-box">
1791                        <div class="header--float-products" style="height: auto">
1792                            <a href="https://boardmix.com/organization-application/"
1793                                class="header--float-solution-lf-item">Enterprise Edition</a><a
1794                                href="https://boardmix.com/private-deployment/"
1795                                class="header--float-solution-lf-item">Private Deployment</a>
1796                        </div>
1797                    </div>
1798                </div>
1799                <div class="header--item">
1800                    <a href="https://boardmix.com/pricing/" class="menu-track">Pricing</a>
1801                </div>
1802            </div>
1803            <div class="header--second">
1804                <a href="/app/?sign_in" class="header-btn__outline header--unlogin">Log in</a><a href="/app/?sign_up"
1805                    class="header-btn__primary header--unlogin" style="margin-left: 14px">Sign up free</a><a
1806                    href="/app/" class="header--login header-btn__primary">Go to Workspace</a>
1807            </div>
1808        </div>
1809    </div>
1810</header>
1811
1812
1813<body>
1814  <!-- ============================================================
1815     隐藏 SVG 图标定义
1816     ============================================================ -->
1817  <div style="position: absolute; width: 0; height: 0; overflow: hidden">
1818    <svg id="contact_svg" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="none">
1819      <path d="M0 0L50 0L50 50L0 50L0 0Z" fill-rule="nonzero"/>
1820      <path d="M37.5 22.9167L22.9167 22.9167C21.5278 22.9167 20.8334 22.2222 20.8334 20.8333L20.8334 8.33333C20.8334 6.94444 21.5278 6.25 22.9167 6.25L41.6667 6.25C43.0556 6.25 43.75 6.94444 43.75 8.33333L43.75 29.1667L37.5 22.9167Z" fill-rule="nonzero" stroke="rgba(0,0,0,1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.16666698"/>
1821      <path d="M29.1667 31.2499L29.1667 35.4166C29.1667 36.8055 28.4722 37.4999 27.0833 37.4999L12.5 37.4999L6.25 43.7499L6.25 22.9166C6.25 21.5277 6.94444 20.8333 8.33333 20.8333L12.5 20.8333" fill-rule="nonzero" stroke="rgba(0,0,0,1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.16666698"/>
1822    </svg>
1823    <svg id="support" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1824      <g clip-path="url(#clip9187)">
1825        <path d="M11.4853 6.17157L5.82843 11.8284L3 9" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
1826      </g>
1827      <defs>
1828        <clipPath id="clip9187">
1829          <rect width="16" height="16" fill="white"/>
1830        </clipPath>
1831      </defs>
1832    </svg>
1833    <svg id="question-arrow" class="arrow" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
1834      <g clip-path="url(#clip287)">
1835        <path d="M9 12.6841L15.8428 19.3157L23 12.6841" stroke="#000000" stroke-opacity="0.5" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
1836      </g>
1837      <defs>
1838        <clipPath id="clip287">
1839          <rect width="32" height="32" transform="translate(32 0) rotate(90)" fill="white"/>
1840        </clipPath>
1841      </defs>
1842    </svg>
1843    <svg id="btn-arrow" width="19.5" height="14" viewBox="0 0 19.5 14" fill="none" xmlns="http://www.w3.org/2000/svg">
1844      <path d="M12.5 1C12.5 2.875 16.58 7 18.5 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
1845      <path d="M12.5 13C12.5 11.125 16.58 7 18.5 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
1846      <path d="M1 7L18 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
1847    </svg>
1848  </div>
1849
1850  <!-- ============================================================
1851     主内容区域
1852     ============================================================ -->
1853  <main class="price" id="pricing-app">
1854    <!-- Banner: 标题 + Tab 切换 -->
1855    <section class="banner">
1856      <div class="text-center">
1857        <h1>Pricing</h1>
1858        <p class="banner-desc">Straightforward pricing. No hidden fees.</p>
1859
1860        <!-- Annual / Lifetime 切换 -->
1861        <div class="price-tabs" id="price-tabs">
1862          <div class="price-tab--item-swiper" id="tab-swiper"></div>
1863          <div class="price-tab--item price-tab--item-active" data-tab="Annual">
1864            Annual
1865          </div>
1866          <div class="price-tab--item" data-tab="Lifetime">Lifetime</div>
1867        </div>
1868
1869        <!-- 套餐卡片:通过 data-tab / data-login 控制显隐 -->
1870        <div class="plans" id="plans-container">
1871          <!-- ===== Annual 滚动容器 ===== -->
1872          <div class="plans-scroll-wrap" id="plans-scroll-wrap">
1873            <div class="plans-scroll-inner" id="plans-scroll-inner">
1874              <!-- Free(未登录) -->
1875              <div class="plan-item text-left plan-item--free plan-visible" data-tab="Annual" data-login="false" style="background-color: #fff">
1876                <h6 class="plan-title">Free</h6>
1877                <p class="plan-title--tips">
1878                  Start exploring before you commit
1879                </p>
1880                <div class="plan-price">
1881                  <span class="plan-price--number">$0</span>
1882                </div>
1883                <p class="plan-desc">No credit card required</p>
1884                <a href="/app/" class="plan-btn plan-btn-1">Get started</a>
1885                <div class="plan-subtitle">What's included:</div>
1886                <ul class="pl-0 mb-0" style="list-style: none">
1887                  <li class="oversea-lift-time-select--desc-item">
1888                    <strong>1</strong>  team workspace
1889                  </li>
1890                  <li class="oversea-lift-time-select--desc-item">
1891                    <strong>3</strong>  editable boards
1892                  </li>
1893                  <li class="oversea-lift-time-select--desc-item">
1894                    <strong>100</strong>  objects per board
1895                  </li>
1896                  <li class="oversea-lift-time-select--desc-item">
1897                    <strong>1 GB</strong>  of storage
1898                  </li>
1899                  <li class="oversea-lift-time-select--desc-item">
1900                    Standard-definition export
1901                  </li>
1902                  <li class="oversea-lift-time-select--desc-item">
1903                    <strong>10</strong>  version history records
1904                  </li>
1905                  <li class="oversea-lift-time-select--desc-item">
1906                    All basic features
1907                  </li>
1908                </ul>
1909              </div>
1910
1911              <!-- Starter -->
1912              <div class="plan-item text-left plan-item--free plan-visible" data-tab="Annual" data-login="any" style="background-color: #fff">
1913                <h6 class="plan-title">Starter</h6>
1914                <p class="plan-title--tips">
1915                  Built for solo creators and everyday work
1916                </p>
1917                <div class="plan-price">
1918                  <span class="plan-price--number">$5</span>
1919                </div>
1920                <p class="plan-desc">
1921                  Per member/month billed annually, or $12 billed monthly
1922                </p>
1923                <div class="plan-btn buy-btn team-try-free-btn plan-btn-2" data-type="TEAM_START" data-track="TEAM_BUY">
1924                  Buy now
1925                </div>
1926                <div class="plan-subtitle">Everything in Free, plus:</div>
1927                <ul class="pl-0 mb-0" style="list-style: none">
1928                  <li class="oversea-lift-time-select--desc-item">
1929                    <strong>1  Professional team workspace</strong>
1930                  </li>
1931                  <li class="oversea-lift-time-select--desc-item">
1932                    <strong>Unlimited</strong>  boards, objects, and projects
1933                  </li>
1934                  <li class="oversea-lift-time-select--desc-item">
1935                    <strong>Unlimited</strong>  visitors with editing rights
1936                  </li>
1937                  <li class="oversea-lift-time-select--desc-item">
1938                    <strong>10 GB</strong>  storage per seat
1939                  </li>
1940                  <li class="oversea-lift-time-select--desc-item">
1941                    <strong>HD, Ultra HD</strong>, and watermark-free exports
1942                  </li>
1943                  <li class="oversea-lift-time-select--desc-item">
1944                    <strong>100 version </strong> history records
1945                  </li>
1946                  <li class="oversea-lift-time-select--desc-item">
1947                    Smart creation tools
1948                  </li>
1949                </ul>
1950              </div>
1951
1952              <!-- AI Starter -->
1953              <div class="plan-item text-left plan-item--annual plan-visible" data-tab="Annual" data-login="any" style="background-color: #fff">
1954                <h6 class="plan-title">AI Starter</h6>
1955                <p class="plan-title--tips">
1956                  Create faster with essential AI power
1957                </p>
1958                <div class="plan-price">
1959                  <span class="plan-price--number">$10</span>
1960                </div>
1961                <p class="plan-desc">
1962                  Per member/month billed annually, or $15.9 billed monthly
1963                </p>
1964                <div class="plan-btn buy-btn team-try-free-btn plan-btn-2" data-type="AI_STARTER" data-track="TEAM_BUY">
1965                  Buy now
1966                </div>
1967                <div class="plan-subtitle">Everything in Starter, plus:</div>
1968                <ul class="pl-0 mb-0" style="list-style: none">
1969                  <li class="oversea-lift-time-select--desc-item">AI Agent</li>
1970                  <li class="oversea-lift-time-select--desc-item">
1971                    AI Mind Map
1972                  </li>
1973                  <li class="oversea-lift-time-select--desc-item">
1974                    AI Flowchart
1975                  </li>
1976                  <li class="oversea-lift-time-select--desc-item">
1977                    AI Presentation
1978                  </li>
1979                  <li class="oversea-lift-time-select--desc-item">
1980                    Access to all AI tools
1981                  </li>
1982                  <li class="oversea-lift-time-select--desc-item">
1983                    <strong>5,000</strong> total AI credits per
1984                    seat/month
1985                  </li>
1986                </ul>
1987              </div>
1988
1989              <!-- AI Business -->
1990              <div class="plan-item text-left plan-item--free plan-visible" data-tab="Annual" data-login="any" style="background-color: #fff">
1991                <h6 class="plan-title">AI Business</h6>
1992                <p class="plan-title--tips">
1993                  Scale collaboration with advanced AI capacity
1994                </p>
1995                <div class="plan-price">
1996                  <span class="plan-price--number">$20</span>
1997                </div>
1998                <p class="plan-desc">
1999                  Per member/month billed annually, or $29.9 billed monthly
2000                </p>
2001                <div class="plan-btn buy-btn team-try-free-btn plan-btn-2" data-type="AI_BUSINESS" data-track="TEAM_BUY">
2002                  Buy now
2003                </div>
2004                <div class="plan-subtitle">Everything in AI Starter, plus:</div>
2005                <ul class="pl-0 mb-0" style="list-style: none">
2006                  <li class="oversea-lift-time-select--desc-item">
2007                    <strong>20 GB</strong>  total storage per seat
2008                  </li>
2009                  <li class="oversea-lift-time-select--desc-item">
2010                    <strong>10,000 </strong>  total AI credits per seat/month
2011                  </li>
2012                </ul>
2013              </div>
2014              <!-- Enterprise / On-Premises(合并原 Enterprise + Private Deployment) -->
2015              <div class="plan-item text-left plan-item--free plan-visible" data-tab="Annual" data-login="any" style="background-color: #fff">
2016                <h6 class="plan-title">Enterprise / Private</h6>
2017                <p class="plan-title--tips">
2018                  Built for large teams with enterprise-grade control
2019                </p>
2020                <div class="plan-price">
2021                  <span class="plan-price--number"><svg class="mr-1" width="50" height="50">
2022                      <use href="#contact_svg"/>
2023                    </svg></span>
2024                </div>
2025                <p class="plan-desc">Contact us for a custom quote</p>
2026                <a href="https://boardmix.com/organization-application/" target="_blank" class="plan-btn plan-btn-1">Contact us</a>
2027                <div class="plan-subtitle">Everything in Starter, plus:</div>
2028                <ul class="pl-0 mb-0" style="list-style: none">
2029                  <li class="oversea-lift-time-select--desc-item">
2030                    Unlimited Professional team workspaces
2031                  </li>
2032                  <li class="oversea-lift-time-select--desc-item">
2033                    Enterprise member management
2034                  </li>
2035                  <li class="oversea-lift-time-select--desc-item">
2036                    Advanced permission controls
2037                  </li>
2038                  <li class="oversea-lift-time-select--desc-item">
2039                    Digital asset security management
2040                  </li>
2041                  <li class="oversea-lift-time-select--desc-item">
2042                    Dedicated customer success manager
2043                  </li>
2044                  <li class="oversea-lift-time-select--desc-item">
2045                    Product enablement and training
2046                  </li>
2047                  <li class="oversea-lift-time-select--desc-item">
2048                    Single sign-on (SSO) through OIDC
2049                  </li>
2050                </ul>
2051              </div>
2052
2053              <!-- Lifetime Plan 1 -->
2054              <div class="plan-item text-left plan-item--free" data-tab="Lifetime" data-login="any" style="background-color: #fff">
2055                <h6 class="plan-title plan-title2">Lifetime Plan 1</h6>
2056                <h6 class="plan-title">for 1 member</h6>
2057                <p class="plan-title--tips">One-time purchase of</p>
2058                <div class="plan-price">
2059                  <span class="plan-price--number">$99</span><del style="
2060                  color: rgba(30, 25, 44, 0.7);
2061                  font-size: 20px;
2062                  margin-left: 9px;
2063                  font-weight: 400;
2064                ">$248</del>
2065                </div>
2066                <p class="plan-desc">Own it for life & no renewal</p>
2067                <div class="plan-btn buy-btn team-try-free-btn plan-btn-2" data-type="SEAT_1" data-track="TEAM_BUY">
2068                  Buy now
2069                </div>
2070                <div class="plan-subtitle">Perfect for solopreneurs</div>
2071                <ul class="pl-0 mb-0" style="list-style: none">
2072                  <li class="oversea-lift-time-select--desc-item">
2073                    <strong>1</strong>  team member
2074                  </li>
2075                  <li class="oversea-lift-time-select--desc-item">
2076                    All editing features included
2077                  </li>
2078                  <li class="oversea-lift-time-select--desc-item">
2079                    <strong>1</strong>  Professional team workspace
2080                  </li>
2081                  <li class="oversea-lift-time-select--desc-item">
2082                    <strong>10 GB</strong>  of team workspace capacity
2083                  </li>
2084                  <li class="oversea-lift-time-select--desc-item">
2085                    Unlimited projects and folders
2086                  </li>
2087                  <li class="oversea-lift-time-select--desc-item">
2088                    Unlimited editable boards
2089                  </li>
2090                  <li class="oversea-lift-time-select--desc-item">
2091                    <strong>10,000</strong>  total AI credits
2092                  </li>
2093                  <li class="oversea-lift-time-select--desc-item">
2094                    Future upgrades
2095                  </li>
2096                </ul>
2097              </div>
2098
2099              <div class="plan-item text-left plan-item--annual" data-tab="Lifetime" data-login="any" style="background-color: #fff">
2100                <h6 class="plan-title plan-title2">Lifetime Plan 2</h6>
2101                <h6 class="plan-title">for 5 members</h6>
2102                <p class="plan-title--tips">One-time purchase of</p>
2103                <div class="plan-price">
2104                  <span class="plan-price--number">$399</span><del style="
2105                  color: rgba(30, 25, 44, 0.7);
2106                  font-size: 20px;
2107                  margin-left: 9px;
2108                  font-weight: 400;
2109                ">$1240</del>
2110                </div>
2111                <p class="plan-desc">Only $79.80 per member</p>
2112                <div class="plan-btn buy-btn team-try-free-btn plan-btn-2" data-type="SEAT_3" data-track="TEAM_BUY">
2113                  Buy now
2114                </div>
2115                <div class="plan-subtitle">Best for all small teams</div>
2116                <ul class="pl-0 mb-0" style="list-style: none">
2117                  <li class="oversea-lift-time-select--desc-item">
2118                    <strong>5</strong>  team members
2119                  </li>
2120                  <li class="oversea-lift-time-select--desc-item">
2121                    All editing features included
2122                  </li>
2123                  <li class="oversea-lift-time-select--desc-item">
2124                    <strong>1</strong>  Professional team workspace
2125                  </li>
2126                  <li class="oversea-lift-time-select--desc-item">
2127                    <strong>50 GB</strong>  of team workspace capacity
2128                  </li>
2129                  <li class="oversea-lift-time-select--desc-item">
2130                    Unlimited projects and folders
2131                  </li>
2132                  <li class="oversea-lift-time-select--desc-item">
2133                    Unlimited editable boards
2134                  </li>
2135                  <li class="oversea-lift-time-select--desc-item">
2136                    <strong>50,000</strong>  total AI credits
2137                  </li>
2138                  <li class="oversea-lift-time-select--desc-item">
2139                    Future upgrades
2140                  </li>
2141                </ul>
2142              </div>
2143
2144              <div class="plan-item text-left plan-item--free" data-tab="Lifetime" data-login="any" style="background-color: #fff">
2145                <h6 class="plan-title plan-title2">Lifetime Plan 3</h6>
2146                <h6 class="plan-title">for 10 members</h6>
2147                <p class="plan-title--tips">One-time purchase of</p>
2148                <div class="plan-price">
2149                  <span class="plan-price--number">$699</span><del style="
2150                  color: rgba(30, 25, 44, 0.7);
2151                  font-size: 20px;
2152                  margin-left: 9px;
2153                  font-weight: 400;
2154                ">$2480</del>
2155                </div>
2156                <p class="plan-desc">Only $69.90 per member</p>
2157                <div class="plan-btn buy-btn team-try-free-btn plan-btn-2" data-type="SEAT_10" data-track="TEAM_BUY">
2158                  Buy now
2159                </div>
2160                <div class="plan-subtitle">Best for growing teams</div>
2161                <ul class="pl-0 mb-0" style="list-style: none">
2162                  <li class="oversea-lift-time-select--desc-item">
2163                    <strong>10</strong>  team members
2164                  </li>
2165                  <li class="oversea-lift-time-select--desc-item">
2166                    All editing features included
2167                  </li>
2168                  <li class="oversea-lift-time-select--desc-item">
2169                    <strong>1</strong>  Professional team workspace
2170                  </li>
2171                  <li class="oversea-lift-time-select--desc-item">
2172                    <strong>100 GB</strong>  of team workspace capacity
2173                  </li>
2174                  <li class="oversea-lift-time-select--desc-item">
2175                    Unlimited projects and folders
2176                  </li>
2177                  <li class="oversea-lift-time-select--desc-item">
2178                    Unlimited editable boards
2179                  </li>
2180                  <li class="oversea-lift-time-select--desc-item">
2181                    <strong>100,000</strong>  total AI credits
2182                  </li>
2183                  <li class="oversea-lift-time-select--desc-item">
2184                    Future upgrades
2185                  </li>
2186                </ul>
2187              </div>
2188
2189              <div class="plan-item text-left plan-item--free" data-tab="Lifetime" data-login="any" style="background-color: #fff">
2190                <h6 class="plan-title plan-title2">Lifetime Plan 4</h6>
2191                <h6 class="plan-title">for 20 members</h6>
2192                <p class="plan-title--tips">One-time purchase of</p>
2193                <div class="plan-price">
2194                  <span class="plan-price--number">$999</span><del style="
2195                  color: rgba(30, 25, 44, 0.7);
2196                  font-size: 20px;
2197                  margin-left: 9px;
2198                  font-weight: 400;
2199                ">$4960</del>
2200                </div>
2201                <p class="plan-desc">Only $49.95 per member</p>
2202                <div class="plan-btn buy-btn team-try-free-btn plan-btn-2" data-type="SEAT_20" data-track="TEAM_BUY">
2203                  Buy now
2204                </div>
2205                <div class="plan-subtitle">Unlock full power and scale freely</div>
2206                <ul class="pl-0 mb-0" style="list-style: none">
2207                  <li class="oversea-lift-time-select--desc-item">
2208                    <strong>20</strong>  team members
2209                  </li>
2210                  <li class="oversea-lift-time-select--desc-item">
2211                    All editing features included
2212                  </li>
2213                  <li class="oversea-lift-time-select--desc-item">
2214                    <strong>1</strong>  Professional team workspace
2215                  </li>
2216                  <li class="oversea-lift-time-select--desc-item">
2217                    <strong>200 GB</strong>  of team workspace capacity
2218                  </li>
2219                  <li class="oversea-lift-time-select--desc-item">
2220                    Unlimited projects and folders
2221                  </li>
2222                  <li class="oversea-lift-time-select--desc-item">
2223                    Unlimited editable boards
2224                  </li>
2225                  <li class="oversea-lift-time-select--desc-item">
2226                    <strong>200,000</strong>  total AI credits
2227                  </li>
2228                  <li class="oversea-lift-time-select--desc-item">
2229                    Future upgrades
2230                  </li>
2231                </ul>
2232              </div>
2233            </div>
2234          </div>
2235          <!-- 滚动按钮(JS 控制显隐) -->
2236          <div class="plans-scroll-btn plans-scroll-btn--left" id="scroll-btn-left" aria-label="Scroll left" style="display: none">
2237            <svg viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42.000000" height="42.000000" fill="none" clip-path="url(#clipPath_2)" customframe="url(#clipPath_2)">
2238              <path id="矢量 612" d="M18 14L25 21L18 28" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.000000"/>
2239            </svg>
2240          </div>
2241          <div class="plans-scroll-btn plans-scroll-btn--right" id="scroll-btn-right" aria-label="Scroll right" style="display: none">
2242            <svg viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42.000000" height="42.000000" fill="none" clip-path="url(#clipPath_2)" customframe="url(#clipPath_2)">
2243              <path id="矢量 612" d="M18 14L25 21L18 28" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.000000"/>
2244            </svg>
2245
2246          </div>
2247          <div style="
2248            color: #555557;
2249            font-size: 14px;
2250            line-height: 20px;
2251            margin: 32px auto;
2252            width: 100%;
2253            text-align: center;
2254          ">
2255            Save big with our biggest offer yet. No subscriptions, no hassle, just
2256            a one-time deal with up to 80% off.
2257            <a href="https://boardmix.com/boardmix-lifetime-deal/?utm_source=web&utm_term=orderpage" style="color: #7856ff; font-weight: 600">Click here</a>
2258          </div>
2259        </div>
2260    </div></section>
2261
2262    <!-- Feature Comparison 表格 -->
2263    <section class="compare sec">
2264      <div class="px-container text-center">
2265        <h5 class="title">Feature Comparison</h5>
2266        <p class="px-desc">
2267          Compare what's included in each plan to find your perfect match.
2268        </p>
2269
2270        <!-- 浮动表头:通过 data-login 控制显隐 -->
2271        <div class="compare-float--header px-container" id="compare-float-header">
2272          <div class="d-flex">
2273            <div class="compare-float--header-item" style="opacity: 0"></div>
2274            <div class="compare-float--header-item" data-float-login="false">
2275              Free
2276              <a href="/app/" target="_blank" class="compare-btn plan-btn-1">Get started</a>
2277            </div>
2278            <div class="compare-float--header-item">
2279              Starter
2280              <div class="bm-buy compare-btn buy-btn plan-btn-1" style="border: 2px solid #8149fc" data-compare-type="TEAM_START" data-compare-track="TEAM_BUY">
2281                Buy now
2282              </div>
2283            </div>
2284            <div class="compare-float--header-item">
2285              AI Starter
2286              <div class="bm-buy compare-btn buy-btn plan-btn-1" style="border: 2px solid #8149fc" data-compare-type="AI_STARTER" data-compare-track="TEAM_BUY">
2287                Buy now
2288              </div>
2289            </div>
2290            <div class="compare-float--header-item">
2291              AI Business
2292              <div class="bm-buy compare-btn buy-btn plan-btn-1" style="border: 2px solid #8149fc" data-compare-type="AI_BUSINESS" data-compare-track="TEAM_BUY">
2293                Buy now
2294              </div>
2295            </div>
2296            <div class="compare-float--header-item">
2297              Enterprise / Private
2298              <a href="https://boardmix.com/organization-application/" target="_blank" class="bm-buy compare-btn plan-btn-primary plan-btn-1">Contact us</a>
2299            </div>
2300            <div class="compare-float--header-item compare-float--header-item__active" data-float-login="true">
2301              Lifetime
2302              <div class="bm-buy compare-btn buy-btn life-time-buy-btn plan-btn-2" data-compare-type="SEAT_1" data-compare-track="TEAM_BUY">
2303                Buy now
2304              </div>
2305            </div>
2306          </div>
2307        </div>
2308
2309        <table class="compare-table" id="compare-table">
2310          <thead id="compare-thead"></thead>
2311          <tbody id="compare-tbody"></tbody>
2312        </table>
2313      </div>
2314    </section>
2315
2316    <!-- FAQ 手风琴 -->
2317    <section class="question sec">
2318      <div class="px-container text-center">
2319        <h5 class="title">FAQ</h5>
2320        <div class="question-list" id="faq-list"></div>
2321      </div>
2322    </section>
2323
2324    <!-- 底部 CTA -->
2325    <section class="bm-bottom active">
2326      <div class="bm-container" style="text-align: center">
2327        <h6 class="bm-bottom-title">
2328          Use Boardmix for Efficiency and Creativity
2329        </h6>
2330        <div class="bm-bottom-desc">
2331          <div class="bm-btn mx-auto buy-btn" id="bottom-buy-btn">
2332            Buy it now
2333            <svg class="bm-btn-arrow" width="19.5" height="14">
2334              <use href="#btn-arrow"/>
2335            </svg>
2336          </div>
2337        </div>
2338      </div>
2339      <!-- 左侧装饰 SVG -->
2340      <svg class="bm-botom-left bm-bottom-decoration" width="343" height="398" viewBox="0 0 343 398" fill="none" xmlns="http://www.w3.org/2000/svg">
2341        <path d="M343 78.5784C343.013 90.1997 340.338 101.276 334.975 111.807C329.611 122.338 322.065 131.331 312.336 138.785C322.064 146.244 329.61 155.24 334.973 165.773C340.337 176.306 343.012 187.384 343 199.008C343.012 210.629 340.336 221.705 334.973 232.235C329.61 242.766 322.064 251.759 312.336 259.215C322.064 266.67 329.61 275.663 334.973 286.194C340.336 296.725 343.012 307.8 343 319.421C343 324.581 342.451 329.691 341.352 334.751C340.254 339.812 338.627 344.726 336.473 349.492C334.318 354.259 331.677 358.788 328.548 363.077C325.42 367.367 321.866 371.336 317.884 374.985C313.903 378.633 309.572 381.891 304.89 384.757C300.209 387.624 295.267 390.044 290.065 392.019C284.863 393.993 279.501 395.483 273.979 396.49C268.457 397.497 262.88 398 257.25 398L85.75 398C80.1196 398 74.5433 397.497 69.0211 396.49C63.4988 395.483 58.1368 393.993 52.935 392.019C47.7332 390.044 42.7915 387.624 38.11 384.757C33.4285 381.891 29.097 378.633 25.1157 374.985C21.1344 371.336 17.5797 367.367 14.4516 363.077C11.3235 358.788 8.68207 354.259 6.5274 349.492C4.37274 344.726 2.74609 339.812 1.647
234171 334.751C0.549316 329.691 0.00012207 324.581 0.00012207 319.421C-0.012085 307.8 2.66357 296.725 8.02698 286.194C13.3904 275.663 20.9362 266.67 30.6642 259.215C20.9362 251.759 13.3905 242.766 8.02698 232.235C2.66357 221.705-0.0120239 210.629 0.00012207 199.008C-0.012207 187.384 2.66333 176.306 8.02661 165.773C13.39 155.24 20.9359 146.244 30.6642 138.785C20.9353 131.331 13.389 122.338 8.02551 111.807C2.66193 101.276-0.0131836 90.2 0.00012207 78.5784C0.00012207 73.4189 0.549316 68.3091 1.64777 63.2485C2.74622 58.1882 4.37274 53.2747 6.5274 48.5078C8.68207 43.7412 11.3235 39.2126 14.4516 34.9226C17.5797 30.6328 21.1344 26.6636 25.1157 23.0151C29.097 19.3667 33.4285 16.1094 38.11 13.2429C42.7915 10.3765 47.7332 7.95605 52.935 5.98145C58.1368 4.00708 63.4989 2.5166 69.0211 1.50977C74.5433 0.503418 80.1196 0 85.75 0L257.25 0C262.88 0 268.457 0.503418 273.979 1.50977C279.501 2.5166 284.863 4.00708 290.065 5.98145C295.267 7.95605 300.209 10.3765 304.89 13.2429C309.572 16.1094 313.903 19.3667 317.884 23.0151C321.866 26.6636 325.42 30.6328 328.548 34.9226C331.677 39.2126 334.318 43.7412 336.473 48.5078C338.627 53.2747 340.254 58.1882 341.352 63.2485C342.451 68.3091 343 73.4189 343 78.5784Z" fill-rule="evenodd" fill="#832FFF"/>
2342        <path d="M187.082 258.937C169.323 240.24 150.398 184.01 187.082 137.937" stroke="#000" stroke-width="10" stroke-linecap="round"/>
2343        <circle cx="229.082" cy="254.937" r="30" fill="#FFF"/>
2344        <circle cx="229.082" cy="187.937" r="30" fill="#FFF"/>
2345        <circle cx="240.426" cy="254.343" r="16" fill="#000"/>
2346        <circle cx="241.649" cy="183.982" r="16" fill="#000"/>
2347      </svg>
2348      <!-- 右侧装饰 SVG -->
2349      <svg class="bm-botom-right bm-bottom-decoration" width="343" height="398" viewBox="0 0 343 398" fill="none" xmlns="http://www.w3.org/2000/svg">
2350        <path d="M0 78.5784C-0.013 90.1997 2.662 101.276 8.025 111.807C13.389 122.338 20.935 131.331 30.664 138.785C20.936 146.244 13.39 155.24 8.027 165.773C2.663 176.306-0.012 187.384 0 199.008C-0.012 210.629 2.664 221.705 8.027 232.235C13.39 242.766 20.936 251.759 30.664 259.215C20.936 266.67 13.39 275.663 8.027 286.194C2.664 296.725-0.012 307.8 0 319.421C0 324.581 0.549 329.691 1.648 334.751C2.746 339.812 4.373 344.726 6.527 349.492C8.682 354.259 11.323 358.788 14.452 363.077C17.58 367.367 21.134 371.336 25.116 374.985C29.097 378.633 33.428 381.891 38.11 384.757C42.791 387.624 47.733 390.044 52.935 392.019C58.137 393.993 63.499 395.483 69.021 396.49C74.543 397.497 80.12 398 85.75 398L257.25 398C262.88 398 268.457 397.497 273.979 396.49C279.501 395.483 284.863 393.993 290.065 392.019C295.267 390.044 300.209 387.624 304.89 384.757C309.572 381.891 313.903 378.633 317.884 374.985C321.866 371.336 325.42 367.367 328.548 363.077C331.677 358.788 334.318 354.259 336.473 349.492C338.627 344.726 340.254 339.812 341.352 334.751C342.451 329.691 343 324.581 343 319.421C343.012 307.8 340.336 296.725 334.973 286.194C329.61 275.663 322.064 266.67 312.336 259.215C322.064 251.759 329.609 242.766 334.973 232.235C340.336 221.705 343.012 210.629 343 199.008C343.012 187.384 340.337 176.306 334.973 165.773C329.61 155.24 322.064 146.244 312.336 138.785C322.065 131.331 329.611 122.338 334.975 111.807C340.338 101.276 343.013 90.2 343 78.5784C343 73.4189 342.451 68.3091 341.352 63.2485C340.254 58.1882 338.627 53.2747 336.473 48.5078C334.318 43.7412 331.677 39.2126 328.548 34.9226C325.42 30.6328 321.866 26.6636 317.884 23.0151C313.903 19.3667 309.572 16.1094 304.89 13.2429C300.209 10.3765 295.267 7.95605 290.065 5.98145C284.863 4.00708 279.501 2.5166 273.979 1.50977C268.457 0.503418 262.88 0 257.25 0L85.75 0C80.12 0 74.543 0.503418 69.021 1.50977C63.499 2.5166 58.137 4.00708 52.935 5.98145C47.733 7.95605 42.791 10.3765 38.11 13.2429C33.428 16.1094 29.097 19.3667 25.116 23.0151C21.134 26.6636 17.58 30.6328 14.452 34.9226C11.323 39.2126 8.682 43.7412 6.527 48.5078C4.373 53.2747 2.746 58.1882 1.648 63.2485C0.549 68.3091 0 73.4189 0 78.5784Z" fill-rule="evenodd" fill="#FFD635"/>
2351        <path d="M155.918 258.937C173.677 240.24 192.602 184.01 155.918 137.937" stroke="#000" stroke-width="10" stroke-linecap="round"/>
2352        <circle cx="113.918" cy="254.937" r="30" fill="#FFF"/>
2353        <circle cx="113.918" cy="187.937" r="30" fill="#FFF"/>
2354        <circle cx="119.348" cy="254.342" r="16" fill="#000"/>
2355        <circle cx="119.348" cy="183.981" r="16" fill="#000"/>
2356      </svg>
2357    </section>
2358
2359    <!-- 购买 iframe 弹层 -->
2360    <section class="buy-iframe" id="buy-iframe">
2361      <iframe src id="buyIframe" width="100%" height="100%"></iframe>
2362    </section>
2363  </main>
2364</body>
2365<div class="ed-footer-wrapper">
2366        <footer class="ed-footer ed-footer-new">
2367            <div class="company-introduction">
2368                <div><img loading="lazy" src="https://cms.boardmix.com/images/home/boardlogo.png" class="ed-logo"
2369                        alt="boardmix logo">
2370                    <div class="d-flex" style="margin-top:26px;min-width:180px">
2371                        <a href="https://x.com/boardmixhq" target="_blank" rel="nofollow">
2372                            <img loading="lazy" class="media-logo" alt="boardmix Twitter"
2373                                src="https://cms.boardmix.com/images/assets/new-x-logo.svg">
2374                        </a>
2375                        <a href="https://www.youtube.com/channel/UCV7X
2375Z36woJ8DTXdsvP3UL8A" target="_blank"
2376                            rel="nofollow">
2377                            <img loading="lazy" class="media-logo" alt="boardmix Youtube"
2378                                src="https://cms.boardmix.com/images/assets/new-youtube-logo.svg">
2379                        </a>
2380                        <a href="https://www.pinterest.com/boardmix/" target="_blank" rel="nofollow">
2381                            <img loading="lazy" class="media-logo" alt="boardmix Pinterest"
2382                                src="https://cms.boardmix.com/images/assets/new-pinterest-logo.svg">
2383                        </a>
2384                        <a href="https://www.instagram.com/boardmix/" target="_blank" rel="nofollow">
2385
2386                            <img loading="lazy" class="media-logo" alt="boardmix Ins"
2387                                src="https://cms.boardmix.com/images/assets/new-ins-logo.svg">
2388                        </a>
2389                        <a href="https://www.facebook.com/people/Boardmix/100089599024711/" target="_blank"
2390                            rel="nofollow">
2391                            <img loading="lazy" class="media-logo" alt="boardmix Facebook"
2392                                src="https://cms.boardmix.com/images/assets/new-facebook-logo.svg">
2393                        </a>
2394                        <a href="https://www.linkedin.com/company/boardmix/" target="_blank" rel="nofollow">
2395                            <img loading="lazy" class="media-logo" alt="boardmix linkedin"
2396                                src="https://cms.boardmix.com/images/assets/new-linkedin.svg">
2397                        </a>
2398                    </div>
2399                    <div class="lang-switch">
2400                        <div class="lang-switch-top" data-toggle="collapse" data-target="#collapse2"
2401                           >
2402                            <div class="d-flex align-items-center"><img loading="lazy" width="24" class="mr-1"
2403                                    src="https://cms.boardmix.com/images/footer/lang.svg" alt="the earth">English</div>
2404                            <svg class="lang-switch-arrow" viewB
2404ox="0 0 20 20">
2405                                <use href="#header-dropdown--arrow"></use>
2406                            </svg>
2407                        </div>
2408                        <div class="lang-switch--float" style="z-index: 2;">
2409                            <a href="https://boardmix.com/" class="lang-switch--item" target="_blank">English</a>
2410                            <a href="https://boardmix.com/es/" class="lang-switch--item" target="_blank">Español</a>
2411                             <a href="https://boardmix.com/ru/" class="lang-switch--item" target="_blank">Русский</a>
2412                            <a href="https://boardmix.com/jp/" class="lang-switch--item" target="_blank">日本語</a>
2413                            <a href="https://boardmix.com/kr/" class="lang-switch--item" target="_blank">한국어</a>
2414                        </div>
2415                    </div>
2416                </div>
2417                <div class="company-introduction-rt">
2418                    <dl>
2419                        <dt>Solutions<i class="el-icon-arrow-down"></i></dt>
2420                        <dd><a href="https://boardmix.com/online-whiteboard/" target="_blank" data-track="6"
2421                                class="menu-track">Online
2422                                Whiteboard</a></dd>
2423                        <dd><a href="https://boardmix.com/scrum-tool/" target="_blank" data-track="6"
2424                                class="menu-track">Scrum Tool</a>
2425                        </dd>
2426                        <!-- <dd><a href="/diagram-maker/" target="_blank" data-track="6" class="menu-track">Reserach &
2427                                Analysis</a></dd>
2428                        <dd><a href="/scrum-tool/" target="_blank" data-track="6" class="menu-track">Meeting &
2429                                Workshop</a></dd>
2430                        <dd><a href="/scrum-tool/" target="_blank" data-track="6" class="menu-track">Product
2431                                Planning</a></dd> -->
2432                        <dd><a href="https://boardmix.com/diagram-maker/" target="_blank" data-track="6"
2433                                class="menu-track">Technical
2434                                Diagram Maker</a></dd>
2435                        <dd><a href="https://boardmix.com/miro-alternative/" target="_blank" data-track="6"
2436                                class="menu-track">Miro
2437                                Alternative</a>
2438                        </dd>
2439                    </dl>
2440                    <dl>
2441                        <dt>Boardmix AI<i class="el-icon-arrow-down"></i></dt>
2442                        <dd><a href="https://boardmix.com/ai-whiteboard/" target="_blank" data-track="6"
2443                                class="menu-track">AI Whiteboard</a>
2444                        </dd>
2445                        <dd><a href="https://boardmix.com/ai-mind-map/" target="_blank" data-track="6"
2446                                class="menu-track">AI Mind Map</a></dd>
2447                        <dd><a href="https://boardmix.com/ai-ppt/" target="_blank" data-track="6" class="menu-track">AI
2448                                Presentation</a></dd>
2449                        <dd><a href="https://boardmix.com/ai-flowchart/" target="_blank" data-track="6"
2450                                class="menu-track">AI Flowchart</a>
2451                        </dd>
2452                    </dl>
2453                    <dl>
2454                        <dt>Resources<i class="el-icon-arrow-down"></i></dt>
2455                        <dd><a href="https://boardmix.com/articles/" target="_blank" data-track="9"
2456                                class="menu-track">Blog</a></dd>
2457                        <dd><a href="https://boardmix.com/online-whiteboard-for-real-time-collaboration/"
2458                                target="_blank" data-track="9" class="menu-track">Whiteboard Guide</a></dd>
2459                        <dd><a href="https://boardmix.com/flowchart-online/" target="_blank" data-track="9"
2460                                class="menu-track">Flowchart Guide</a></dd>
2461                        <dd><a href="https://boardmix.com/mind-map-examples/" target="_blank" data-track="9"
2462                                class="menu-track">
2462Mind Map Guide</a></dd>
2463                        <dd><a href="https://boardmix.com/ai-tools-guide/" target="_blank" data-track="9"
2464                                class="menu-track">AI Tools Guide</a></dd>
2465                        <dd><a href="https://boardmix.com/diagram-creator/" target="_blank" data-track="9"
2466                                class="menu-track">Diagramming Guide</a></dd>
2467                        <dd><a href="https://boardmix.com/free-project-management-software/" target="_blank"
2468                                data-track="9" class="menu-track">Project Management</a></dd>
2469                        <dd><a href="https://boardmix.com/templates/" target="_blank" data-track="10"
2470                                class="menu-track">Templates</a></dd>
2471                        <dd><a href="https://boardmix.com/help/" target="_blank" data-track="11" class="menu-track">Help
2472                                Center</a></dd>
2473                        <dd><a href="https://boardmix.com/releases/" target="_blank" data-track="11"
2474                                class="menu-track">Changelog</a></dd>
2475                        <dd><a href="https://discord.gg/d65DbmN83g" target="_blank" data-track="11"
2476                                class="menu-track">Discord Community</a>
2477                        </dd>
2478                        <dd><a href="https://t.me/+TRI5EKm2ewszYjM1" rel="nofollow" target="_blank" data-track="11"
2479                                class="menu-track">Telegram</a>
2480                        </dd>
2481                    </dl>
2482                    <dl>
2483                        <dt>Company<i class="el-icon-arrow-down"></i></dt>
2484                        <dd><a href="https://boardmix.com/about/" target="_blank" data-track="12"
2485                                class="menu-track">About Us</a></dd>
2486                        <dd><a href="https://boardmix.com/pricing/" target="_blank" data-track="12"
2487                                class="menu-track">Pricing</a></dd>
2488                        <dd><a href="https://boardmix.com/organization-application/" target="_blank" data-track="12"
2489                                class="menu-track">Enterprise</a></dd>
2490                        <dd><a href="https://boardmix.com/help/contact-us/" target="_blank" data-track="12"
2491                                class="menu-track">Contact Us</a></dd>
2492                        <dd><a href="https://boardmix.com/affiliate-program/" target="_blank" data-track="12"
2493                                class="menu-track">Affiliate Program</a>
2494                        </dd>
2495                    </dl>
2496                </div>
2497            </div>
2498            <div class="footer-logo-image-mobile mobile-show"><img loading="lazy" class="mobile-img-left"
2499                    src="https://cms.boardmix.com/images/footer/bm-footer-logo.png" alt="logo"></div>
2500            <div class="footer-copyright">
2501                <div class="footer-copyright-left"><a class="footer-brand" href="/terms-conditions/">Terms &
2502                        Conditions</a><br class="mobile-show"><a class="footer-brand" href="/license-agreement/">License
2503                        Agreement</a><a class="footer-brand" href="/private-policy/">Privacy Policy <img loading="lazy"
2504                            src="https://cms.boardmix.com/images/assets/bottom-new.svg" alt="New feature"
2505                            style="width:28px;height:16px;margin:0 0 0 3px;position: relative;top: -2px;"></a><a
2506                        class="footer-brand" href="/cookie-policy/">Cookies Policy</a><a class="footer-brand"
2507                        href="/refund-policy/">Refund
2508                        Policy</a><a class="footer-brand" style="margin-right:0"
2509                        href="/subscription-terms/">Subscription Terms</a><br><span class="footer-brand">
2510Copyright © 2026 Shenzhen Pixso Technology Co.,Ltd All rights reserved.</span><img loading="lazy"
2511                        src="https://cms.boardmix.com/images/assets/bottom-logo.png" alt="Payment"
2512                        style="display:block;width:340px;margin:4px 0 0;height:auto"></div>
2513            </div>
2514        </footer>
2515        <div style="position:absolute;width:0;height:0;overflow:hidden"><svg id="header-dropdown--arrow"
2516                width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
2517                xmlns:xlink="http://www.w3.org/1999/xlink">
2518                <defs />
2519                <g opacity="0.700000">
2520                    <path id="矢量 455 (边框)"
2521                        d="M6.53033 12.5518C6.23337 12.8486 5.76666 12.8486 5.4697 12.5518C5.1727 12.2549 5.1727 11.7881 5.4697 11.4912L9.4697 7.49121C9.64645 7.31445 9.82324 7.22559 10 7.22559C10.1768 7.22559 10.3536 7.31445 10.5303 7.49121L14.5303 11.4912C14.8273 11.7881 14.8273 12.2549 14.5303 12.5518C14.2334 12.8486 13.7667 12.8486 13.4697 12.5518L10 9.08203L6.53033 12.5518Z"
2522                        fill-rule="evenodd" fill="currentColor" />
2523                </g>
2524            </svg></div>
2525        <div class="fic-to-top__home fic-to-top"><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
2526                xmlns="http://www.w3.org/2000/svg">
2527                <path fill-rule="evenodd" clip-rule="evenodd"
2528                    d="M4.6863 27.3137C7.68685 30.3143 11.7565 32 16 32C20.2435 32 24.3132 30.3143 27.3137 27.3137C30.3143 24.3132 32 20.2435 32 16C32 11.7565 30.3143 7.68685 27.3137 4.6863C24.3132 1.6857 20.2435 0 16 0C11.7565 0 7.68685 1.6857 4.6863 4.6863C1.6857 7.68685 0 11.7565 0 16C0 20.2435 1.6857 24.3132 4.6863 27.3137Z"
2529                    fill="white"></path>
2530                <rect width="16" height="16" transform="translate(8 8)" fill="white"></rect>
2531                <path fill-rule="evenodd" clip-rule="evenodd"
2532                    d="M15.9868 10.2402C15.6668 10.2402 15.3788 10.3682 15.1548 10.5922L9.29883 16.8642C8.91484 17.2802 9.01084 17.6322 9.07485 17.7602C9.13884 17.8882 9.33084 18.2082 9.87484 18.2082H12.4348V22.8162C12.4348 23.4562 12.9788 24.0002 13.6188 24.0002H18.3228C18.9628 24.0002 19.5068 23.4882 19.5068 22.8162V18.2402H22.0988C22.6428 18.2402 22.8348 17.9202 22.8988 17.7922C22.9948 17.6322 23.0908 17.2802 22.7068 16.8642L16.8188 10.6242C16.6268 10.3682 16.3068 10.2402 15.9868 10.2402Z"
2533                    fill="#474747"></path>
2534                <path fill-rule="evenodd" clip-rule="evenodd"
2535                    d="M22.8349 8.512C22.8349 8.224 22.6109 8 22.3229 8H9.68286C9.39486 8 9.13885 8.224 9.13885 8.512C9.13885 8.8 9.39486 9.024 9.68286 9.024H22.3229C22.6109 9.024 22.8349 8.8 22.8349 8.512Z"
2536                    fill="#474747"></path>
2537            </svg></div>
2538    </div>
2539<style>
2540/* Boardmix shared footer mobile repair 2026-09-11 */
2541@media(max-width:767px){
2542 .ed-footer.ed-footer-new .company-introduction {box-sizing:border-box;width:calc(100% - 40px);max-width:100%;min-width:0;margin-left:20px;margin-right:20px;padding-left:0;padding-right:0;}
2543 .ed-footer.ed-footer-new .company-introduction-rt {box-sizing:border-box;min-width:0;width:100%;max-width:100%;}
2544 .ed-footer.ed-footer-new .company-introduction dl {min-width:0;max-width:100%;flex:1 1 140px;white-space:normal;}
2545 .ed-footer.ed-footer-new .footer-copyright {box-sizing:border-box;width:calc(100% - 40px);max-width:100%;margin-left:20px;margin-right:20px;}
2546 .ed-footer.ed-footer-new .footer-copyright-left {box-sizing:border-box;min-width:0;width:100%;max-width:100%;margin-left:0;white-space:normal;overflow-wrap:break-word;}
2547 .ed-footer.ed-footer-new .footer-copyright-left img[alt="Payment"] {max-width:100%;height:auto;}
2548}
2549</style>
2550<style>
2551/* Boardmix existing article mobile layout repair 2026-09-11 */
2552
2553/* Boardmix mobile readability repair 2026-09-11 */
2554@media (max-width:767px) {
2555  html[lang="en"] body .article-grid, html[lang="en"] .article-grid .article-main, html[lang="en"] .article-grid .article-body, html[lang="en"] .article-grid .article-bottom-container { min-width:0; max-width:100%; box-sizing:border-box; }
2556  html[lang="en"] body .article-grid { width:calc(100% - 32px); }
2557  html[lang="en"] .article-grid .article-main { width:100%; }
2558  html[lang="en"] .article-grid .article-main > h1 { font-size:32px; line-height:1.25; overflow-wrap:break-word; }
2559  html[lang="en"] .article-grid .article-body h2 { font-size:28px; line-height:1.35; }
2560  html[lang="en"] .article-grid .article-body h3 { font-size:24px; line-height:1.4; }
2561  html[lang="en"] .article-grid .article-body p, html[lang="en"] .article-grid .article-body li { overflow-wrap:break-word; word-break:normal; }
2562  html[lang="en"] .article-grid .article-body img, html[lang="en"] .article-grid .article-body iframe, html[lang="en"] .article-grid .article-body video { max-width:100%; }
2563  html[lang="en"] .article-grid .article-body figure { max-width:100%; margin-left:0; margin-right:0; }
2564  html[lang="en"] .article-grid ~ .related .bm-container { width:calc(100% - 32px); }
2565  html[lang="en"] .article-grid ~ .related .article-list { grid-template-columns:minmax(0,1fr); gap:24px; }
2566  html[lang="en"] .article-grid ~ .related .article-item { min-width:0; max-width:100%; }
2567  html[lang="en"] .article-grid .article-bottom { box-sizing:border-box; padding:32px 16px; }
2568  html[lang="en"] .article-grid .article-bottom-container { width:100%; }
2569  html[lang="en"] .article-grid .article-bottom-title { font-size:26px; line-height:1.35; max-width:100%; }
2570  html[lang="en"] .article-grid .article-bottom-btns { grid-template-columns:minmax(0,1fr); width:100%; }
2571  html[lang="en"] .article-grid .article-bottom-btn { width:100%; min-width:0; box-sizing:border-box; }
2572  html[lang="en"] body[data-pro="boardmix"] .article-nav-title { min-width:0; margin-right:12px; }
2573  html[lang="en"] body[data-pro="boardmix"] .article-nav .article-use-btn { min-width:136px; }
2574  html[lang="en"] .article-grid .pros-cons { flex-direction:column; gap:16px; }
2575  html[lang="en"] .article-grid .pros-cons fieldset { width:100%; min-width:0; box-sizing:border-box; }
2576}
2577
2578/* Boardmix template mobile repair 2026-09-11 */
2579@media (max-width:767px) {
2580  html[lang="en"] body[data-key] main .px-container { width:100%; max-width:100%; min-width:0; box-sizing:border-box; padding-left:16px; padding-right:16px; }
2581  html[lang="en"] body[data-key] .banner .px-container { min-height:0 !important; }
2582  html[lang="en"] body[data-key] .banner-lf, html[lang="en"] body[data-key] .article .article-body, html[lang="en"] body[data-key] .article-rt { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
2583  html[lang="en"] body[data-key] .banner h1 { font-size:32px; line-height:1.25; overflow-wrap:break-word; }
2584  html[lang="en"] body[data-key] .banner-desc { font-size:18px; line-height:1.5; margin:20px 0; }
2585  html[lang="en"] body[data-key] .banner-img { width:100%; height:auto; max-width:100%; }
2586  html[lang="en"] body[data-key] .banner-btns { flex-wrap:wrap; gap:12px; }
2587  html[lang="en"] body[data-key] .banner-share { margin-left:0 !important; }
2588  html[lang="en"] body[data-key] .banner-share--panel { left:auto; right:0; max-width:calc(100vw - 32px); }
2589  html[lang="en"] body[data-key] .article .article-body p, html[lang="en"] body[data-key] .article .article-body li { font-size:18px; line-height:1.5; overflow-wrap:break-word; word-break:normal; }
2590  html[lang="en"] body[data-key] .article .article-body h2 { font-size:28px; line-height:1.35; }
2591  html[lang="en"] body[data-key] .article .article-body h3 { font-size:24px; line-height:1.4; }
2592  html[lang="en"] body[data-key] .article-body figure { max-width:100%; margin-left:0; margin-right:0; }
2593  html[lang="en"] body[data-key] .article-body img, html[lang="en"] body[data-key] .article-body iframe, html[lang="en"] body[data-key] .article-body video { max-width:100%; }
2594  html[lang="en"] body[data-key] .related-list { grid-template-columns:minmax(0,1fr); gap:24px; }
2595  html[lang="en"] body[data-key] .related-item { min-width:0; max-width:100%; }
2596  html[lang="en"] body[data-key] .related-title { height:auto; }
2597  html[lang="en"] body[data-key] .related-item-desc { word-break:normal; }
2598  html[lang="en"] body[data-key] .article-bottom { box-sizing:border-box; padding:32px 16px; }
2599  html[lang="en"] body[data-key] .article-bottom-container { width:100%; min-width:0; max-width:100%; }
2600  html[lang="en"] body[data-key] .article-bottom-title { font-size:26px; line-height:1.35; max-width:100%; }
2601  html[lang="en"] body[data-key] .article-bottom-btns { grid-template-columns:minmax(0,1fr); width:100%; }
2602  html[lang="en"] body[data-key] .article-bottom-btn { width:100%; min-width:0; box-sizing:border-box; }
2603  html[lang="en"] body[data-key] .article-nav-title { min-width:0; margin-right:12px; }
2604}
2605
2606/* Boardmix legacy article mobile repair 2026-09-11 */
2607@media (max-width:767px) {
2608  html[lang="en"] .article-2022 .content, html[lang="en"] .article-2022 .article-container { min-width:0; max-width:100%; box-sizing:border-box; }
2609  html[lang="en"] .article-2022 .content img:not(.icon-img) { max-width:100%; height:auto; }
2610  html[lang="en"] .article-2022 .content figure { max-width:100%; }
2611}
2612
2613</style>
2614
2615
2616<!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 2616-2619
2616
2617<noscript
2618	><iframe
2619		src="https://www.googletagmanager.com/ns.html?id=
2619GTM-WDNXR73H
vendor: 95 bytes, lines 2619-2624
2619"
2620		height="0"
2621		width="0"
2622		style="display: none; visibility: hidden"
2623	></iframe
2624></noscript>
2625<!-- End Google Tag Manager (noscript) -->
2626<script src="https://boardmix.com/assets/js/wsc-vendor.js"></script>
vendor: 1 bytes, line 2626
2626
2627<script src="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/2025/success/wsc-common.min.js"></script>
vendor: 1 bytes, line 2627
2627
2628<script src="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/assets/cas-client-bosyun.www.js?v=1"></script>
vendor: 1 bytes, line 2628
2628
2629<script src="https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/js/lang.js"></script>
vendor: 1 bytes, line 2629
2629
2630<script
2631	src="https://boardmix.com/assets/cookie/1/monitor.iife.js"
2632	defer
2633></script>
vendor: 1 bytes, line 2633
2633
2634<script
2635	src="https://boardmix.com/assets/cookie/1/cookie-agree-init.js"
2636	defer
2637></script>
vendor: 1 bytes, line 2637
2637
2638<script>
2639     var {
2640		sensors
2641	} = bosyunSensors.sensorsInit("oversea", "board", bosyunSensors.StorageAPI.cookie);
2642        window.casClient = bosyunCas.casClient;
2643
2644	$(function () {
2645		wsc.common.init();
2646	});
2647</script>
vendor: 1 bytes, line 2647
2647
2648<script>
2649	const globalHelper = {
2650		userInfo: undefined,
2651		currentEnv: "https://boardmix.com/",
2652		onCheckLoginIgnoreFail: async function (isForceUpdate) {
2653			try {
2654				if (isForceUpdate || globalHelper.userInfo === undefined) {
2655					globalHelper.userInfo = await casClient.validate();
2656					return globalHelper.userInfo;
2657				} else {
2658					return globalHelper.userInfo;
2659				}
2660			} catch {
2661				globalHelper.userInfo = undefined;
2662				return globalHelper.userInfo;
2663			}
2664		},
2665		getQueryString: function (name) {
2666			const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
2667			const r = window.location.search.substr(1).match(reg);
2668			if (r !== null) {
2669				return decodeURIComponent(r[2]);
2670			}
2671			return null;
2672		},
2673		getUtmBaggage: function () {
2674			if (typeof globalHelper.getUtmBaggage.cache !== "undefined") {
2675				return globalHelper.getUtmBaggage.cache;
2676			}
2677			const utmList = [];
2678			[
2679				"utm_campaign",
2680				"utm_source",
2681				"utm_medium",
2682				"utm_term",
2683				"utm_content",
2684			].forEach((key) => {
2685				const value = globalHelper.getQueryString(key);
2686				if (value) {
2687					utmList.push(`${key}=${value}`);
2688				}
2689			});
2690			const utmBaggage = utmList.join("&");
2691			globalHelper.getUtmBaggage.cache = utmBaggage;
2692			return utmBaggage;
2693		},
2694		initAllAppLink: function () {
2695			$("a[href*='/app']:not([data-raw-link]),.article a[href='']").click(
2696				function (e) {
2697					e.preventDefault();
2698					if (
2699						!localStorage.getItem("lang") &&
2700						typeof setLang !== "undefined"
2701					) {
2702						setLang();
2703					}
2704					const targetHref = $(this).attr("href");
2705					const whiteList = ["https://boardmix.com/app/redeem/"];
2706					const isInWhiteList = whiteList.includes(targetHref);
2707					const signUpSuffix = targetHref.includes("sign_in")
2708						? "&page=sign_in"
2709						: "&page=sign_up";
2710					const turnLink = isInWhiteList ? targetHref : "/app/";
2711					if (globalHelper.userInfo != undefined || isInWhiteList) {
2712						if ($(this).attr("target") == "_blank") {
2713							window.open(turnLink);
2714						} else {
2715							location.href = turnLink;
2716						}
2717					} else {
2718						// flow / mindmap
2719						const curtScene =
2720							new URLSearchParams(
2721								targetHref.split("?")[1] || ""
2722							).get("scene") || "normal";
2723						const encodeRedirectUrl = encodeURIComponent(
2724							`https://boardmix.com/app/landing?scene=${curtScene}&action=scene`
2725						);
2726						const utmBaggage = globalHelper.getUtmBaggage();
2727						const utmBaggageSuffix = utmBaggage
2728							? `&${utmBaggage}`
2729							: "";
2730						location.href = `/user/login/?response_type=none&redirect_uri=${encodeRedirectUrl}&from=1&product=board&ux_mode=redirect${utmBaggageSuffix}${signUpSuffix}`;
2731					}
2732				}
2733			);
2734		},
2735	};
2736
2737	function throttle(func, limit) {
2738		let lastFunc;
2739		let lastRan;
2740		return function () {
2741			const context = this;
2742			const args = arguments;
2743			if (!lastRan) {
2744				func.apply(context, args);
2745				lastRan = Date.now();
2746			} else {
2747				clearTimeout(lastFunc);
2748				lastFunc = setTimeout(function () {
2749					if (Date.now() - lastRan >= limit) {
2750						func.apply(context, args);
2751						lastRan = Date.now();
2752					}
2753				}, limit - (Date.now() - lastRan));
2754			}
2755		};
2756	}
2757	function initCasClient(curtEnv) {
2758		casClient.init({
2759			redirect_url: location.origin + location.pathname + location.search,
2760			ux_mode: "redirect",
2761			login_page: `${curtEnv}user/login/`,
2762			userapi_url: `${curtEnv}api/user/`,
2763			product: "board",
2764			responseType: "none",
2765                        storageAPI: "cookie" 
2766		});
2767	}
2768
2769	function initHeaderCollapse() {
2770		function toggleHeaderExpand() {
2771			$(".header--expand").toggleClass("header--expand__active");
2772			$(".header--content").toggleClass("header--content__expand");
2773			$(".header--menu--mask").toggleClass("show");
2774			$(".expand-icon").toggleClass("d-none");
2775			$(".shrink-icon").toggleClass("d-none");
2776            // Boardmix navigation state repair 2026-09-11
2777            const expanded = $(".header--expand").hasClass("header--expand__active");
2778            $(".header--expand").attr("aria-expanded", String(expanded)).attr("aria-label", expanded ? "Close navigation menu" : "Open navigation menu");
2779		}
2780		$(".header--expand").click(function () {
2781			toggleHeaderExpand();
2782		});
2783		$(".header--menu--mask").click(function () {
2784			toggleHeaderExpand();
2785		});
2786        $(document).on("keydown.boardmixNavigation", function(event) {
2787            if(event.key === "Escape" && $(".header--expand").hasClass("header--expand__active")) {
2788                toggleHeaderExpand();
2789                document.querySelector(".header--expand").focus();
2790            }
2791        });
2792
2793		function handleMobileHeaderClick() {
2794			if (window.innerWidth < 1181) {
2795				$(".header #collapse1").addClass("collapse");
2796				$(".header #collapse2").addClass("collapse");
2797			} else {
2798				$(".header #collapse1").removeClass("collapse");
2799				$(".header #collapse2").removeClass("collapse");
2800			}
2801		}
2802		handleMobileHeaderClick();
2803		$(window).resize(function () {
2804			handleMobileHeaderClick();
2805		});
2806	}
2807
2808	const UTM_SOURCE_KEY = "utm_source";
2809    const UTM_CAMPAIGN_KEY = "utm_campaign";
2810    const UTM_MEDIUM_KEY = "utm_medium";
2811    const UTM_TERM_KEY = "utm_term";
2812    const UTM_CONTENT_KEY = "utm_content";
2813    
2814    function parseUtmResult(urlStr) {
2815    	if (!urlStr) return null;
2816    
2817    	try {
2818    		const url = new URL(urlStr);
2819    		const utm_source = url.searchParams.get(UTM_SOURCE_KEY);
2820    
2821    		if (utm_source) {
2822    			return {
2823    				from_url: urlStr,
2824    				utm_source,
2825    				utm_campaign: url.searchParams.get(UTM_CAMPAIGN_KEY) || "",
2826    				utm_medium: url.searchParams.get(UTM_MEDIUM_KEY) || "",
2827    				utm_term: url.searchParams.get(UTM_TERM_KEY) || "",
2828    				utm_content: url.searchParams.get(UTM_CONTENT_KEY) || "",
2829    			};
2830    		}
2831    		return null;
2832    	} catch (e) {
2833    		return null;
2834    	}
2835    }
2836    
2837    async function googleOneTapCallback(loginData) {
2838    	const url = `${globalHelper.currentEnv}api/user/user/auth/google/board?product=2&from=50`;
2839    
2840    	if (loginData && loginData.credential && casClient) {
2841    		const utmResult = parseUtmResult(location.href);
2842    
2843    		const response = await fetch(url, {
2844    			method: "POST",
2845    			headers: {
2846    				"Content-type": "application/json",
2847    			},
2848    			body: JSON.stringify({
2849    				id_token: loginData.credential,
2850    				...(utmResult || {}),
2851    			}),
2852    		});
2853    		const res = await response.json();
2854    		casClient.setLocal(res.data);
2855    		const currentPath = location.pathname.replace(/\/$/, "");
2856    		if (currentPath === "/organization-application") {
2857                location.reload();
2858            } else {
2859                location.href = `${globalHelper.currentEnv}app/`;
2860            }
2861    	}
2862    }
2863
2864
2865	async function getGoogleClientId() {
2866		const url = `${globalHelper.currentEnv}api/user/user/oauth2/auth/google/board/client_id`;
2867		const response = await fetch(decodeURIComponent(url), {
2868			method: "GET",
2869			headers: {
2870				"Content-type": "application/json",
2871			},
2872		});
2873		const res = await response.json();
2874		return res.data;
2875	}
2876
2877	function googleOneTapEvent() {
2878		const DELAY_TIME = 500;
2879		setTimeout(async () => {
2880			window.handleCb = googleOneTapCallback;
2881			const client_id = await getGoogleClientId();
2882			const googleOneTab = document.createElement("div");
2883			googleOneTab.id = "g_id_onload";
2884			googleOneTab.setAttribute("data-client_id", client_id);
2885			googleOneTab.setAttribute("data-close_on_tap_outside", "false");
2886			googleOneTab.setAttribute(
2887				"style",
2888				"position: fixed; top: 84px; right: 20px; width: 0; height: 0; z-index: 1001;"
2889			);
2890			googleOneTab.setAttribute("gdpr-message", "signup");
2891			googleOneTab.setAttribute("data-callback", "handleCb");
2892			googleOneTab.setAttribute("data-itp_support", "true");
2893			document.body.appendChild(googleOneTab);
2894			const googleScript = document.createElement("script");
2895			googleScript.src = "https://accounts.google.com/gsi/client";
2896			googleScript.setAttribute("async", "true");
2897			googleScript.setAttribute("defer", "true");
2898			document.body.appendChild(googleScript);
2899		}, DELAY_TIME);
2900	}
2901
2902	function initHeaderEvent() {
2903		let header = document.querySelector(".header");
2904		function updateHeaderStatus(isSticky) {
2905			console.log("isSticky", isSticky);
2906			header.classList.toggle("header-shadow", !isSticky);
2907		}
2908
2909		function handleScroll() {
2910			const currentScrollY =
2911				window.pageYOffset || document.documentElement.scrollTop;
2912			console.log("currentScrollY", currentScrollY);
2913			updateHeaderStatus(currentScrollY === 0);
2914		}
2915		handleScroll();
2916
2917		window.addEventListener("scroll", throttle(handleScroll, 200), {
2918			passive: true,
2919		});
2920	}
2921
2922	function globalInit() {
2923		initCasClient(globalHelper.currentEnv);
2924		globalHelper.onCheckLoginIgnoreFail().then((res) => {
2925			if (res) {
2926				globalHelper.userInfo = res;
2927				$(".header--login").css("display", "inline-flex");
2928			} else {
2929				$(".header--unlogin").css("display", "inline-flex");
2930				if (typeof window.__bmAfterFirstPaint === "function") {
2931                    window.__bmAfterFirstPaint(googleOneTapEvent);
2932                } else {
2933                    googleOneTapEvent();
2934                }
2935			}
2936		});
2937		initHeaderCollapse();
2938		globalHelper.initAllAppLink();
2939		initHeaderEvent();
2940	}
2941	function backTop(e) {
2942		e.preventDefault();
2943		$("html, body").animate(
2944			{
2945				scrollTop: 0,
2946			},
2947			"300"
2948		);
2949	}
2950	function handleIconFade(dom, className, timer) {
2951		if (dom) {
2952			var scrollTop = window.scrollY;
2953			if (scrollTop > 400) {
2954				dom.addClass(className);
2955			} else {
2956				dom.removeClass(className);
2957			}
2958		}
2959	}
2960	function backTopIconFade() {
2961		throttle(handleIconFade($(".fic-to-top"), "fic-to-top__show"), 500);
2962	}
2963	function track(event, properties) {
2964		if (window.sensors) {
2965			console.log(event, properties);
2966			sensors.track(`BM_${event}`, properties);
2967		}
2968	}
2969	globalInit();
2970	document.addEventListener("DOMContentLoaded", function () {
2971		window.addEventListener("scroll", backTopIconFade);
2972		$(".fic-to-top__home").click(function (e) {
2973			backTop(e);
2974		});
2975
2976		$(".global-banner-close").click(function (event) {
2977                        event.stopPropagation();
2978			$(".global-banner").addClass("d-none");
2979		});
2980		
2981		document
2982			.querySelector("header")
2983			?.addEventListener("click", function (event) {
2984				const header = event.currentTarget;
2985				const target = event.target;
2986				const navLinkElement = target.closest("[data-nav-link]");
2987				if (navLinkElement && header.contains(navLinkElement)) {
2988					const anchor = navLinkElement.querySelector("a[href]");
2989					if (anchor) {
2990						const text = anchor.textContent.trim();
2991						window.location.href = anchor.href;
2992						return;
2993					}
2994				}
2995			});
2996	});
2997</script>
vendor: 1 bytes, line 2997
2997
2998<script>(function loadScriptWithBlacklist({ link, blacklist = [] } = {}) {
2999		if (!link || !localStorage.getItem("bmCookie")) return;
3000		const currentPath = window.location.pathname;
3001		if (blacklist.some((item) => currentPath.includes(item))) return;
3002
3003		const script = document.createElement("script");
3004		script.src = link;
3005		script.defer = true;
3006		script.type = "text/javascript";
3007		document.head.appendChild(script);
3008	})({
3009		link: "https://boardmix-public-ff.oss-eu-central-1.aliyuncs.com/cms/assets/bm-float-button.js",
3010		blacklist: [
3011  "/private-policy/",
3012  "/about/",
3013  "/cookie-policy/",
3014  "/refund-policy/",
3015  "/pricing/",
3016  "/terms-conditions/",
3017  "/license-agreement/",
3018  "/organization-application/",
3019  "/contact-sales/",
3020  "/test/2-user/",
3021  "/env-check/",
3022  "/big-screen-policy/",
3023  "/big-screen-term/",
3024  "/kr/big-screen-term/",
3025  "/kr/big-screen-policy/",
3026  "/jp/big-screen-policy/",
3027  "/jp/big-screen-term/",
3028  "/server-upgrade/",
3029  "/demo/",
3030  "/purchase-successful/"
3031]
3032	});</script>
3032
3033	
3034<script>
3035	function attachEmptyShake({
3036		inputSelector,
3037		triggerSelector,
3038		wrapperSelector,
3039		onValid,
3040	}) {
3041		const input = document.querySelector(inputSelector);
3042		const wrapper = document.querySelector(wrapperSelector);
3043		const triggers = document.querySelectorAll(triggerSelector);
3044
3045		if (!input || !wrapper || !triggers.length) return;
3046
3047		function handleAction() {
3048			const value = input.value.trim();
3049			if (!value) {
3050				wrapper.classList.add("fx-shake-input");
3051				wrapper.addEventListener(
3052					"animationend",
3053					() => {
3054						wrapper.classList.remove("fx-shake-input");
3055					},
3056					{ once: true }
3057				);
3058				return;
3059			}
3060		}
3061
3062		triggers.forEach((btn) => btn.addEventListener("click", handleAction));
3063		input.addEventListener("keydown", (e) => {
3064			if (e.key === "Enter") handleAction();
3065		});
3066	}
3067	attachEmptyShake({
3068		inputSelector: ".bannerInput-inputField",
3069		triggerSelector: ".bannerInput-confirmBtn",
3070		wrapperSelector: ".bannerInput-inputWrapper",
3071	});
3072</script>
3072
3073
3074<script>
3075  /* ==========================================================
3076       1. 配置数据(与原文件完全一致)
3077       ========================================================== */
3078  // goods 链接前缀 — 依赖全局 globalHelper
3079  var prefixGoodsLink =
3080    (typeof globalHelper !== "undefined" ? globalHelper.currentEnv : "") +
3081    "goods/price/oversea?lang=en-US&selectTeam=true";
3082
3083  var goodsQueryMap = {
3084    AI: "goodsType=AI_PLAN_TEAM&selectTeam=true",
3085    TEAM_WITH_AI: "goodsType=Team&autoSelectAi=true&selectTeam=true",
3086    FREE_TRIAL: "goodsType=Team&selectTeam=true&trial=1",
3087    TEAM_START:
3088      "goodsType=Team&selectTeam=true&goodId=BoardMix-Oversea-Whiteboard-Team-Starter-Yearly-Subscription-10GB",
3089    AI_STARTER:
3090      "goodsType=Team&selectTeam=true&goodId=BoardMix-Oversea-Whiteboard-Team-AIStarter-Yearly-Subscription-10GB",
3091    AI_BUSINESS: "goodsType=Team&selectTeam=true&goodId=BoardMix-Oversea-Whiteboard-Team-AIBusiness-Yearly-Subscription-20GB",
3092    SEAT_1:
3093      "goodId=BoardMix-Oversea-Team-Business-Lifetime-1Seats&permanent=true",
3094    SEAT_3:
3095      "goodId=BoardMix-Oversea-Team-Business-Lifetime-5Seats&permanent=true",
3096    SEAT_10:
3097      "goodId=BoardMix-Oversea-Team-Business-Lifetime-10Seats&permanent=true",
3098    SEAT_20:
3099      "goodId=BoardMix-Oversea-Team-Business-Lifetime-20Seats&permanent=true",
3100    SEAT_30:
3101      "goodId=BoardMix-Oversea-Team-Business-Lifetime-30Seats&permanent=true",
3102  };
3103
3104  var goodsTrackMap = {
3105    AI: "AI订阅会员",
3106    TEAM_WITH_AI: "团队会员-直接购买",
3107    TEAM: "团队会员-直接购买",
3108  };
3109
3110  var trackMap = {
3111    AI_BUY: "AI-订阅",
3112    TEAM_FREE: "团队版-免费使用",
3113    TEAM_BUY: "团队版-直接购买",
3114    ENT_CONTACT: "企业版-联系我们",
3115    FREE_TRIAL: "免费试用",
3116  };
3117
3118  var curtGoodsType = "";
3119
3120  /* ==========================================================
3121       2. 功能对比数据
3122       ========================================================== */
3123
3124  function featureListCreate() {
3125    return [
3126      // --- AI Capabilities ---
3127      [""],
3128      ["AI Capabilities"],
3129      [
3130        "AI credits",
3131        "No extra subscription credits",
3132        "Total 5,000 credits/seat/month",
3133        "Total 10,000 credits/seat/month",
3134        "Custom AI credit pools",
3135        {
3136          questionMark: true,
3137          label: "Details",
3138          tipsContent:
3139            "Plan 1: 10,000<br>Plan 2: 50,000<br>Plan 3: 100,000<br>Plan 4: 200,000",
3140        },
3141      ],
3142      ["AI Agent", "Limited by credits", "yes", "yes", "yes", "yes"],
3143      ["AI Mind Map", "Limited by credits", "yes", "yes", "yes", "yes"],
3144      ["AI Flowchart", "Limited by credits", "yes", "yes", "yes", "yes"],
3145      ["AI PPT", "Limited by credits", "yes", "yes", "yes", "yes"],
3146      [
3147        "Access to all AI tools",
3148        "Limited by credits",
3149        "yes",
3150        "yes",
3151        "yes",
3152        "yes",
3153      ],
3154      // --- Workspace & Resources ---
3155      [""],
3156      ["Workspace & Resources"],
3157      ["Workspaces", "1", "1", "1", "Unlimited", "1"],
3158      [
3159        "Storage",
3160        "10 GB*N",
3161        "10 GB*N",
3162        "20 GB*N",
3163        "Unlimited",
3164        {
3165          questionMark: true,
3166          label: "Details",
3167          tipsContent:
3168            "Plan 1: 10GB<br>Plan 2: 50GB<br>Plan 3: 100GB<br>Plan 4: 200GB",
3169        },
3170      ],
3171      [
3172        "Editable boards",
3173        "Unlimited",
3174        "Unlimited",
3175        "Unlimited",
3176        "Unlimited",
3177        "Unlimited",
3178      ],
3179      ["File sharing", "yes", "yes", "yes", "yes", "yes"],
3180      ["File viewer", "yes", "yes", "yes", "yes", "yes"],
3181      [
3182        "File editor",
3183        "Unlimited",
3184        "Unlimited",
3185        "Unlimited",
3186        "Unlimited",
3187        "Unlimited",
3188      ],
3189      ["Password-protected sharing", "yes", "yes", "yes", "yes", "yes"],
3190      [
3191        "Uploads",
3192        "100 MB files, 30 MB images",
3193        "100 MB files, 30 MB images",
3194        "100 MB files, 30 MB images",
3195        "100 MB files, 30 MB images",
3196        "100 MB files, 30 MB images",
3197      ],
3198      [
3199        "Exports",
3200        "HD, Ultra HD, and watermark-free exports",
3201        "HD, Ultra HD, and watermark-free exports",
3202        "HD, Ultra HD, and watermark-free exports",
3203        "HD, Ultra HD, and watermark-free exports",
3204        "HD, Ultra HD, and watermark-free exports",
3205      ],
3206      // --- Creation & Collaboration ---
3207      [""],
3208      ["Creation & Collaboration"],
3209      ["Containers", "yes", "yes", "yes", "yes", "yes"],
3210      ["Sticky notes", "yes", "yes", "yes", "yes", "yes"],
3211      ["Mind maps", "Advanced", "Advanced", "Advanced", "Advanced", "Advanced"],
3212      ["Video meetings", "yes", "yes", "yes", "yes", "yes"],
3213      ["Comments", "yes", "yes", "yes", "yes", "yes"],
3214      ["Templates", "yes", "yes", "yes", "yes", "yes"],
3215      ["Voting", "yes", "yes", "yes", "yes", "yes"],
3216      ["Timer", "yes", "yes", "yes", "yes", "yes"],
3217      ["Presentation mode", "yes", "yes", "yes", "yes", "yes"],
3218      // --- Security & Admin ---
3219      [""],
3220      ["Security & Admin"],
3221      ["Admin console", "-", "-", "-", "yes", "-"],
3222      ["Member management", "-", "-", "-", "yes", "-"],
3223      ["Seat management", "-", "-", "-", "yes", "-"],
3224      ["Team management", "-", "-", "-", "yes", "-"],
3225      ["Analytics dashboard", "-", "-", "-", "yes", "-"],
3226      ["Member activity dashboard", "-", "-", "-", "yes", "-"],
3227      ["Asset handover", "-", "-", "-", "yes", "-"],
3228      ["Activity logs", "-", "-", "-", "yes", "-"],
3229      ["Permission controls", "-", "-", "-", "yes", "-"],
3230      ["SSO", "-", "-", "-", "yes", "-"],
3231      ["Custom domain", "-", "-", "-", "yes", "-"],
3232      // --- Support ---
3233      [""],
3234      ["Support"],
3235      ["Help center", "yes", "yes", "yes", "yes", "yes"],
3236      ["Community", "yes", "yes", "yes", "yes", "yes"],
3237      ["Dedicated CSM", "-", "-", "-", "yes", "-"],
3238      ["Deployment support", "-", "-", "-", "yes", "-"],
3239      ["Training", "-", "-", "-", "yes", "-"],
3240    ];
3241  }
3242
3243  var featureFree = [
3244    // AI Capabilities
3245    "500 sign-up credits",
3246    "Limited by credits",
3247    "Limited by credits",
3248    "Limited by credits",
3249    "Limited by credits",
3250    "Limited by credits",
3251    // Workspace & Resources
3252    "1 free workspace",
3253    "1 GB",
3254    "3",
3255    "yes",
3256    "yes",
3257    "5 editors per file",
3258    "-",
3259    "5 MB files, 5 MB images",
3260    "Standard-definition export",
3261    // Creation & Collaboration
3262    "yes",
3263    "yes",
3264    "Basic",
3265    "yes",
3266    "yes",
3267    "yes",
3268    "-",
3269    "-",
3270    "-",
3271    // Security & Admin
3272    "-",
3273    "-",
3274    "-",
3275    "-",
3276    "-",
3277    "-",
3278    "-",
3279    "-",
3280    "-",
3281    "-",
3282    "-",
3283    // Support
3284    "yes",
3285    "yes",
3286    "-",
3287    "-",
3288    "-",
3289  ];
3290
3291  /* ==========================================================
3292       3. FAQ 数据
3293       ========================================================== */
3294
3295  var faqData = [
3296    {
3297      question: "Which payment method do you accept?",
3298      answer:
3299        'We accept all major credit cards, PayPal, online wallets, and other payment methods that resonate with your locality. Simply click on the [BUY NOW] button to select your country and explore the diverse range of payment options available to you.<br><br>*All payments are securely processed by our partner, 2Checkout (Verifone). Who is <a href="https://www.2checkout.com/about/" target="_blank" style="color:#555cfd">2Checkout (Verifone)</a>?',
3300    },
3301    {
3302      question:
3303        "How can I stop subscription payments (cancel automatic renewal)?",
3304      answer:
3305        'If you purchased a subscription with automatic renewal, you will be informed at least 7 days before it expires about the date of the upcoming charge and the amount you will be charged.<br><br>You can stop automatic renewals anytime in the following two ways:<br>1. Follow these steps to unsubscribe in your workspace:<br>- Click on your team you want to unsubscribe In the bottom left corner of your workspace<br>- Click on the settings icon next to the <strong>"Space home"</strong><br>- Select <strong>"Team Information"</strong><br>- Scroll down and click <strong>"Unsubscribe"</strong><br><br><div style="text-align:center"><img src="https://cms.boardmix.com/images/price/unsub-guide.png" alt="unsubscription-direction" style="width:800px;height:auto"></div><br><br>2. Simply log into your <a href="https://secure.2co.com/myaccount/" target="_blank" style="color:#555cfd">2CO myAccount--My Products</a> if you have. Then enable the <strong>Stop automatic license renewal</strong> option beneath the product.<br><br>To find out more about your 2CO myAccount and login instructions, click <a href="https://support.avangate.com/hc/en-us/articles/360000968286" target="_blank" style="color:#555cfd">here</a>.',
3306    },
3307    {
3308      question: "What happens after I cancel my subscription?",
3309      answer:
3310        "After canceling, all team admins will receive an email notifying them that the subscription is about to expire. Unless you reactivate the subscription, they will no longer be able to change the team size or subscription plan.<br><br>Once the subscription expires, all whiteboards within your Boardmix team will be locked in read-only mode for all team members, and you will be downgraded to the free plan. The whiteboard files will not be deleted.<br><br>The cancelation takes effect after your current billing period. Until then, you have access to paid features.",
3311    },
3312    {
3313      question: "How to apply for a refund?",
3314      answer:
3315        'Normally Boardmix does not offer refunds for its monthly subscription services once the billing period has started. We advise you to cancel before the next billing cycle to avoid charges.<br><br>For any other inquiry, please contact us and fill in the form with necessary information. You can read our <a href="https://boardmix.com/refund-policy/" target="_blank" style="color:#555cfd">refund policy</a> for more details.',
3316    },
3317    {
3318      question: "How to reactivate my subscription?",
3319      answer:
3320        'If you change your mind after canceling, you can reactivate your subscription in the "Team Information" tab under "Team Settings" (the settings icon is next to the "Space home").<br><br>Once your subscription benefits expire, you will need to start a new subscription as reactivation will no longer be possible.',
3321    },
3322  ];
3323
3324  /* ==========================================================
3325       4. 应用状态
3326       ========================================================== */
3327
3328  var state = {
3329    tabTitle: "Annual", // "Annual" | "Lifetime"
3330    isLogin: false,
3331    buyLink: "",
3332  };
3333
3334  /* ==========================================================
3335       6. 工具函数
3336       ========================================================== */
3337
3338  function qs(selector) {
3339    return document.querySelector(selector);
3340  }
3341  function qsa(selector) {
3342    return document.querySelectorAll(selector);
3343  }
3344
3345  function getQueryString(name) {
3346    var reg = new RegExp("[?&]" + name + "=([^&#]*)", "i");
3347    var match = location.href.match(reg);
3348    return match ? decodeURIComponent(match[1]) : null;
3349  }
3350
3351  // SSO 登录检测 — 兼容 globalHelper 或独立运行
3352  function onCheckLoginIgnoreFail() {
3353    if (
3354      typeof globalHelper !== "undefined" &&
3355      globalHelper.onCheckLoginIgnoreFail
3356    ) {
3357      return globalHelper.onCheckLoginIgnoreFail();
3358    }
3359    // 无 globalHelper 时默认未登录
3360    return Promise.resolve(false);
3361  }
3362
3363  function getUtmBaggage() {
3364    if (typeof globalHelper !== "undefined" && globalHelper.getUtmBaggage) {
3365      return globalHelper.getUtmBaggage();
3366    }
3367    return "";
3368  }
3369
3370  function getCurrentEnv() {
3371    if (typeof globalHelper !== "undefined" && globalHelper.currentEnv) {
3372      return globalHelper.currentEnv;
3373    }
3374    return location.origin + "/";
3375  }
3376
3377  // SSO 登录跳转
3378  function onCheckLogin(type) {
3379    return onCheckLoginIgnoreFail().then(function (loggedIn) {
3380      if (!loggedIn) {
3381        var currentPath = location.origin + location.pathname;
3382        location.href =
3383          getCurrentEnv() +
3384          "user/login/?response_type=none&redirect_uri=" +
3385          encodeURIComponent(currentPath + "?show_buy_modal=" + type) +
3386          "&from=1&product=board&ux_mode=redirect&" +
3387          getUtmBaggage();
3388        return false;
3389      }
3390      return true;
3391    });
3392  }
3393
3394  // 埋点(兼容全局 track 函数)
3395  function trackEvent(name, data) {
3396    if (typeof track === "function") {
3397      track(name, data);
3398    }
3399  }
3400
3401  /* ==========================================================
3402       7. 渲染函数
3403       ========================================================== */
3404
3405  // 套餐卡片显隐控制(DOM 已预渲染,按 data-tab / data-login 过滤)
3406  function renderPlans() {
3407    var items = qsa("#plans-container .plan-item[data-tab]");
3408    items.forEach(function (el) {
3409      var matchTab = el.getAttribute("data-tab") === state.tabTitle;
3410      var loginAttr = el.getAttribute("data-login");
3411      var matchLogin =
3412        loginAttr === "any" ||
3413        (loginAttr === "true" && state.isLogin) ||
3414        (loginAttr === "false" && !state.isLogin);
3415      el.classList.toggle("plan-visible", matchTab && matchLogin);
3416    });
3417    // 滚动按钮逻辑:仅 Annual tab + 未登录时显示
3418    updateScrollButtons();
3419  }
3420
3421  // 滚动按钮状态更新
3422  var scrollPos = 0;
3423  function updateScrollButtons() {
3424    var wrap = qs("#plans-scroll-wrap");
3425    var inner = qs("#plans-scroll-inner");
3426    var btnLeft = qs("#scroll-btn-left");
3427    var btnRight = qs("#scroll-btn-right");
3428    if (!wrap || !inner) return;
3429
3430    // 重置滚动位置
3431    scrollPos = 0;
3432    inner.style.transform = "translateX(0)";
3433
3434    // 检测可见 item 数量是否超过容器能容纳的数量
3435    var visibleItems = qsa("#plans-scroll-inner .plan-item.plan-visible");
3436    var wrapWidth = wrap.offsetWidth;
3437    if (visibleItems.length > 0) {
3438      var itemWidth = visibleItems[0].offsetWidth;
3439      var gap = 30;
3440      var maxVisible = Math.floor((wrapWidth + gap) / (itemWidth + gap));
3441      var needScroll = visibleItems.length > maxVisible;
3442
3443      if (needScroll) {
3444        wrap.classList.add("scrollable");
3445        btnRight.style.display = "";
3446        btnLeft.style.display = "none";
3447      } else {
3448        wrap.classList.remove("scrollable");
3449        btnRight.style.display = "none";
3450        btnLeft.style.display = "none";
3451      }
3452    } else {
3453      wrap.classList.remove("scrollable");
3454      btnRight.style.display = "none";
3455      btnLeft.style.display = "none";
3456    }
3457  }
3458
3459  // 滚动按钮事件
3460  function initScrollButtons() {
3461    var inner = qs("#plans-scroll-inner");
3462    var btnLeft = qs("#scroll-btn-left");
3463    var btnRight = qs("#scroll-btn-right");
3464    if (!inner || !btnLeft || !btnRight) return;
3465
3466    function getVisibleItems() {
3467      return qsa("#plans-scroll-inner .plan-item.plan-visible");
3468    }
3469
3470    btnRight.addEventListener("click", function () {
3471      var items = getVisibleItems();
3472      if (items.length < 2) return;
3473      // 滚动到最后一个可见 item
3474      var last = items[items.length - 1];
3475      var wrapWidth = qs("#plans-scroll-wrap").offsetWidth;
3476      var maxScroll = Math.max(0, last.offsetLeft + last.offsetWidth - wrapWidth);
3477      var maxTranslate = Math.max(0, inner.scrollWidth - wrapWidth);
3478      maxScroll = Math.min(maxScroll, maxTranslate);
3479      scrollPos = Math.max(0, maxScroll);
3480      inner.style.transform = "translateX(-" + scrollPos + "px)";
3481      btnRight.style.display = "none";
3482      btnLeft.style.display = "";
3483    });
3484
3485    btnLeft.addEventListener("click", function () {
3486      scrollPos = 0;
3487      inner.style.transform = "translateX(0)";
3488      btnLeft.style.display = "none";
3489      btnRight.style.display = "";
3490    });
3491  }
3492
3493  // 浮动表头显隐控制(DOM 已预渲染,按 data-float-login 过滤)
3494  function renderCompareFloatHeader() {
3495    var items = qsa(
3496      "#compare-float-header .compare-float--header-item[data-float-login]",
3497    );
3498    items.forEach(function (el) {
3499      var loginAttr = el.getAttribute("data-float-login");
3500      var show =
3501        (loginAttr === "true" && state.isLogin) ||
3502        (loginAttr === "false" && !state.isLogin);
3503      el.classList.toggle("float-visible", show);
3504    });
3505  }
3506
3507  // 渲染对比表格
3508  function renderCompareTable() {
3509    var tabList = getTabList();
3510    var fList = featureListCreate();
3511    var index = 0;
3512
3513    if (state.isLogin) {
3514      // 已登录:不显示 Free,保留 Lifetime
3515    } else {
3516      // 未登录:插入 Free 列,移除 Lifetime 列
3517      fList.forEach(function (item) {
3518        if (item.length === 6) {
3519          item.splice(1, 0, featureFree[index]); // 插入 Free
3520          item.pop(); // 移除 Lifetime
3521          index++;
3522        }
3523      });
3524    }
3525
3526    // thead
3527    var theadHtml = "<tr>";
3528    tabList.forEach(function (item) {
3529      theadHtml += "<th>" + item + "</th>";
3530    });
3531    theadHtml += "</tr>";
3532    qs("#compare-thead").innerHTML = theadHtml;
3533
3534    // tbody
3535    var tbodyHtml = "";
3536    fList.forEach(function (feature, i) {
3537      var disableClass = feature.length === 1 ? " compare-row__disable" : "";
3538      tbodyHtml += '<tr class="compare-row' + disableClass + '">';
3539
3540      feature.forEach(function (item, index) {
3541        var isTitleRow = feature.length === 1 && item !== "";
3542        var isTd24 = item === "" && feature.length === 1;
3543        var tdClass = isTitleRow ? " compare-title" : isTd24 ? " td-24" : "";
3544        var colspan = item === "" && feature.length === 1 ? tabList.length : 1;
3545
3546        tbodyHtml += '<td class="' + tdClass + '"';
3547        tbodyHtml += ' colspan="' + colspan + '">';
3548
3549        if (index === 0) {
3550          if (feature.length === 1) {
3551            tbodyHtml += '<p class="d-inline-block mb-0">' + item + "</p>";
3552          } else if (typeof item === "object") {
3553            tbodyHtml +=
3554              '<p class="d-inline-block mb-0" style="color:rgba(0,0,0,.8)">' +
3555              item.label +
3556              "</p>";
3557            if (item.questionMark) {
3558              tbodyHtml +=
3559                '<div class="question-mark" data-tips="' +
3560                escapeAttr(item.tipsContent) +
3561                '"></div>';
3562            }
3563          } else {
3564            tbodyHtml +=
3565              '<p class="d-inline-block mb-0" style="color:rgba(0,0,0,.8)">' +
3566              item +
3567              "</p>";
3568          }
3569        } else {
3570          if (item === "yes") {
3571            tbodyHtml +=
3572              '<div class="tips-icon"><img src="https://cms.boardmix.com/images/image/pricing/support-purple.svg" class="yes-icon" alt="support"></div>';
3573          } else if (item === "") {
3574            tbodyHtml += '<div class="no-icon"></div>';
3575          } else if (typeof item === "object") {
3576            tbodyHtml += '<span class="desc mb-0">' + item.label + "</span>";
3577            if (item.questionMark) {
3578              tbodyHtml +=
3579                '<div class="question-mark" data-tips="' +
3580                escapeAttr(item.tipsContent) +
3581                '"></div>';
3582            }
3583          } else {
3584            tbodyHtml += '<p class="desc mb-0">' + item + "</p>";
3585          }
3586        }
3587        tbodyHtml += "</td>";
3588      });
3589      tbodyHtml += "</tr>";
3590    });
3591    qs("#compare-tbody").innerHTML = tbodyHtml;
3592  }
3593
3594  function escapeAttr(str) {
3595    return str
3596      .replace(/&/g, "&amp;")
3597      .replace(/"/g, "&quot;")
3598      .replace(/</g, "&lt;")
3599      .replace(/>/g, "&gt;");
3600  }
3601
3602  function getTabList() {
3603    if (state.isLogin) {
3604      // 登录后:不显示 Free
3605      return [
3606        "Features",
3607        "Starter",
3608        "AI Starter",
3609        "AI Business",
3610        "Enterprise",
3611        "Lifetime",
3612      ];
3613    }
3614    // 未登录:不显示 Lifetime
3615    return [
3616      "Features",
3617      "Free",
3618      "Starter",
3619      "AI Starter",
3620      "AI Business",
3621      "Enterprise",
3622    ];
3623  }
3624
3625  // 渲染 FAQ
3626  function renderFAQ() {
3627    var html = "";
3628    faqData.forEach(function (item, i) {
3629      html += '<div class="question-item">';
3630      html += '<div class="question-header" data-index="' + i + '">';
3631      html += '<p class="question-title">' + item.question + "</p>";
3632      html +=
3633        '<svg class="mr-1" width="32" height="32"><use href="#question-arrow"></use></svg>';
3634      html += "</div>";
3635      html += '<div class="question-body" id="faq-body-' + i + '">';
3636      html += '<div class="question-desc">' + item.answer + "</div>";
3637      html += "</div></div>";
3638    });
3639    qs("#faq-list").innerHTML = html;
3640
3641    // FAQ 手风琴事件
3642    qs("#faq-list")
3643      .querySelectorAll(".question-header")
3644      .forEach(function (header) {
3645        header.addEventListener("click", function () {
3646          var idx = this.getAttribute("data-index");
3647          var body = qs("#faq-body-" + idx);
3648          var isOpen = body.classList.contains("open");
3649
3650          // 关闭所有
3651          qsa(".question-body").forEach(function (b) {
3652            b.classList.remove("open");
3653          });
3654          qsa(".question-header").forEach(function (h) {
3655            h.classList.remove("open");
3656          });
3657
3658          // 切换当前
3659          if (!isOpen) {
3660            body.classList.add("open");
3661            this.classList.add("open");
3662          }
3663        });
3664      });
3665  }
3666
3667  /* ==========================================================
3668       8. 交互逻辑
3669       ========================================================== */
3670
3671  // Tab 切换
3672  function initTabs() {
3673    var tabs = qsa("#price-tabs .price-tab--item");
3674    var swiper = qs("#tab-swiper");
3675    var container = qs("#price-tabs");
3676
3677    // 动态计算最宽 tab 并统一宽度
3678    var maxW = 0;
3679    tabs.forEach(function (tab) {
3680      var w = tab.scrollWidth;
3681      if (w > maxW) maxW = w;
3682    });
3683    // 确保不小于最小宽度 94px
3684    maxW = Math.max(maxW, 94);
3685    tabs.forEach(function (tab) {
3686      tab.style.width = maxW + "px";
3687    });
3688    swiper.style.width = maxW + "px";
3689
3690    // 更新滑块位置:Annual 在左,Lifetime 在右
3691    var gap = 4; // padding 内间距
3692    function updateSwiperPos(title) {
3693      if (title === "Annual") {
3694        swiper.style.left = gap + "px";
3695      } else {
3696        swiper.style.left = maxW + gap + "px";
3697      }
3698    }
3699    // 初始化位置
3700    updateSwiperPos(state.tabTitle);
3701
3702    tabs.forEach(function (tab) {
3703      tab.addEventListener("click", function () {
3704        var title = this.getAttribute("data-tab");
3705        state.tabTitle = title;
3706
3707        // 更新 Tab 样式
3708        tabs.forEach(function (t) {
3709          t.classList.remove("price-tab--item-active");
3710        });
3711        this.classList.add("price-tab--item-active");
3712
3713        // 更新滑块位置
3714        updateSwiperPos(title);
3715
3716        // 重新渲染
3717        renderPlans();
3718        renderCompareFloatHeader();
3719        renderCompareTable();
3720        updateScrollButtons();
3721      });
3722    });
3723  }
3724
3725  // 购买逻辑
3726  function buyMember(data) {
3727    if (data.track && trackMap[data.track]) {
3728      trackEvent("offcialWebsite", {
3729        offcial_website_button_type: trackMap[data.track],
3730      });
3731    }
3732    if (data.type) {
3733      showBuyModal(data.type);
3734    }
3735  }
3736
3737  function showBuyModal(type) {
3738    curtGoodsType = type;
3739    onCheckLogin(type).then(function (loggedIn) {
3740      if (loggedIn && goodsQueryMap[type]) {
3741        state.buyLink = prefixGoodsLink + "&" + goodsQueryMap[type];
3742        qs("#buy-iframe").classList.add("buy-iframe__active");
3743        qs("#buyIframe").src = state.buyLink;
3744      }
3745    });
3746  }
3747
3748  function hideBuyModal() {
3749    state.buyLink = "";
3750    qs("#buy-iframe").classList.remove("buy-iframe__active");
3751    qs("#buyIframe").src = "";
3752  }
3753
3754  // 浮动对比表头(滚动监听)
3755  function initFloatHeader() {
3756    var compareTable = qs("#compare-table");
3757    var floatHeader = qs("#compare-float-header");
3758    var compareHeight = 2064;
3759    var isCloseHeader = false;
3760
3761    function onScroll() {
3762      if (window.innerWidth <= 678) return;
3763      var compareTop =
3764        compareTable.getBoundingClientRect().top + window.scrollY;
3765
3766      if (!isCloseHeader) {
3767        if (compareTop + compareHeight - window.scrollY - 400 <= 0) {
3768          floatHeader.classList.remove(
3769            "compare-float--header__visible",
3770            "compare-float--header__visible1",
3771          );
3772          return;
3773        }
3774        if (compareTop - window.scrollY - 185 <= 0) {
3775          floatHeader.classList.add("compare-float--header__visible");
3776        } else {
3777          floatHeader.classList.remove(
3778            "compare-float--header__visible",
3779            "compare-float--header__visible1",
3780          );
3781        }
3782      } else {
3783        if (compareTop + compareHeight - window.scrollY - 400 <= 0) {
3784          floatHeader.classList.remove(
3785            "compare-float--header__visible1",
3786            "compare-float--header__visible",
3787          );
3788          return;
3789        }
3790        if (compareTop - window.scrollY - 185 <= 0) {
3791          floatHeader.classList.add("compare-float--header__visible1");
3792        } else {
3793          floatHeader.classList.remove(
3794            "compare-float--header__visible1",
3795            "compare-float--header__visible",
3796          );
3797        }
3798      }
3799    }
3800
3801    window.addEventListener("scroll", onScroll, { passive: true });
3802
3803    // 顶部横幅关闭按钮(如有)
3804    var closeBtn = document.querySelector(
3805      ".global-banner-close, .close-tdesign-banner",
3806    );
3807    if (closeBtn) {
3808      closeBtn.addEventListener("click", function () {
3809        isCloseHeader = true;
3810        var compareTop =
3811          compareTable.getBoundingClientRect().top + window.scrollY;
3812        if (compareTop - window.scrollY - 185 <= 0) {
3813          floatHeader.classList.add("compare-float--header__visible1");
3814        }
3815        var titleCells = qsa(".compare-title");
3816        titleCells.forEach(function (c) {
3817          c.classList.add("compare-title1");
3818        });
3819      });
3820    }
3821  }
3822
3823  // Tooltip(替代 Bootstrap Popover)
3824  // 在 #compare-table 上做事件委托,覆盖 renderCompareTable 动态创建的元素
3825  function initTooltips() {
3826    var activeMark = null;
3827    var table = qs("#compare-table");
3828    if (!table) return;
3829
3830    function findMark(target) {
3831      var el = target.nodeType === 1 ? target : target.parentElement;
3832      return el && el.closest(".question-mark[data-tips]");
3833    }
3834
3835    function showTip(mark) {
3836      if (activeMark === mark) return;
3837      var tip = document.createElement("div");
3838      tip.className = "tooltip-box";
3839      tip.innerHTML = mark.getAttribute("data-tips");
3840      var rect = mark.getBoundingClientRect();
3841      tip.style.left = rect.width / 2 + "px";
3842      tip.style.top = rect.height + 8 + "px";
3843      tip.classList.add("visible");
3844      mark.appendChild(tip);
3845      activeMark = mark;
3846    }
3847
3848    function hideTip() {
3849      const tip = activeMark.querySelector(".tooltip-box");
3850      if (tip) {
3851        tip.remove();
3852      }
3853      activeMark = null;
3854    }
3855
3856    table.addEventListener("mouseover", function (e) {
3857      var mark = findMark(e.target);
3858      if (mark) {
3859        showTip(mark);
3860      }
3861    });
3862
3863    table.addEventListener("mouseout", function (e) {
3864      if (!activeMark) return;
3865      var mark = findMark(e.target);
3866      if (mark) {
3867        // 检查 relatedTarget 是否仍在同一个 .question-mark 内
3868        var related = e.relatedTarget;
3869        if (related && mark.contains(related)) return;
3870        hideTip();
3871      }
3872    });
3873  }
3874
3875  // iframe 消息监听
3876  function initIframeListener() {
3877    window.addEventListener("message", function (e) {
3878      try {
3879        if (e.data.event === "paySuccess") {
3880          trackEvent("offcialWebsiteclientmember", {
3881            offcialWebsiteclientmember_type: goodsTrackMap[curtGoodsType],
3882          });
3883        }
3884        if (e.data.event === "close") {
3885          hideBuyModal();
3886        } else if (e.data.event === "login") {
3887          onCheckLogin(curtGoodsType);
3888        }
3889      } catch (err) {
3890        console.log(err);
3891      }
3892    });
3893  }
3894
3895  // 底部 CTA 按钮
3896  function initBottomBtn() {
3897    qs("#bottom-buy-btn").addEventListener("click", function () {
3898      buyMember({ type: "TEAM", track: "TEAM_BUY" });
3899    });
3900  }
3901
3902  /* ==========================================================
3903       9. 初始化
3904       ========================================================== */
3905
3906  function init() {
3907    // 检查 URL 中的 show_buy_modal 参数(SSO 回调)
3908    curtGoodsType = getQueryString("show_buy_modal") || "";
3909    var initialBuyType = curtGoodsType;
3910
3911    // 绑定购买按钮事件(DOM 已预渲染,只需绑定一次)
3912    document.addEventListener("click", function (e) {
3913      var el = e.target.nodeType === 1 ? e.target : e.target.parentElement;
3914      if (!el) return;
3915      if (el.closest(".buy-btn[data-type], [data-compare-type], #bottom-buy-btn")) initialBuyType = "";
3916      var btn = el.closest(".buy-btn[data-type], [data-compare-type]");
3917      if (!btn) return;
3918      var type =
3919        btn.getAttribute("data-type") || btn.getAttribute("data-compare-type");
3920      var track =
3921        btn.getAttribute("data-track") ||
3922        btn.getAttribute("data-compare-track");
3923      buyMember({ type: type, track: track });
3924    });
3925
3926    // Public pricing renders before account detection; checkout still validates login.
3927    renderPlans();
3928    renderCompareFloatHeader();
3929    renderCompareTable();
3930    renderFAQ();
3931    initTabs();
3932    initFloatHeader();
3933    initTooltips();
3934    initIframeListener();
3935    initBottomBtn();
3936    initScrollButtons();
3937    window.addEventListener("resize", function () { updateScrollButtons(); });
3938    qs("#pricing-app").classList.add("price-show");
3939
3940    Promise.resolve().then(function () {
3941      return onCheckLoginIgnoreFail();
3942    }).then(function (loggedIn) {
3943      var changed = state.isLogin !== !!loggedIn;
3944      state.isLogin = !!loggedIn;
3945      if (changed) {
3946        renderPlans();
3947        renderCompareFloatHeader();
3948        renderCompareTable();
3949      }
3950      if (state.isLogin && initialBuyType) {
3951        var resumeType = initialBuyType;
3952        initialBuyType = "";
3953        showBuyModal(resumeType);
3954      }
3955    }).catch(function () {
3956      // Keep public prices and controls available when account detection fails.
3957    });
3958  }
3959
3960  // DOM Ready
3961  if (document.readyState === "loading") {
3962    document.addEventListener("DOMContentLoaded", init);
3963  } else {
3964    init();
3965  }
3966</script>
3966
3967</body>
3968</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.