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, "&") 3597 .replace(/"/g, """) 3598 .replace(/</g, "<") 3599 .replace(/>/g, ">"); 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.