web
/
h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>BEX邀请注册</title>
    <link rel="stylesheet" href="/css/invite.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="/images/image.png" alt="">


            <div class="lang-switcher" id="langSwitcher">
                <button class="lang-switcher-btn" id="langSwitcherBtn">
                    <span class="lang-switcher-label" id="langSwitcherLabel">简体中文</span>
                    <svg class="lang-switcher-arrow" viewBox="0 0 10 6">
                        <path d="M1 1l4 4 4-4" stroke="#888888" stroke-width="1.5" fill="none" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </button>
                <div class="lang-dropdown" id="langDropdown" style="display: none;">
                </div>
            </div>
        </div>

        <div class="content-area">
            <div class="banner-section">
                <div class="banner-heading">
                    <span data-i18n="bannerHeadingLabel">立即注册最高可获得</span><span data-i18n="bannerHeadingValue"
                        class="banner-heading-highlight">888 BEX代币</span>
                </div>
                <div class="banner-bg">
                    <img class="banner-left-decor" src="/images/invite-banner-coin.png" alt="">
                    <img class="banner-coin-img" src="/images/invite-banner-left-decor-646f6a.png" alt="">
                </div>
                <div class="banner-content">
                    <div class="invite-highlight">
                        <div class="invite-highlight-line"></div>
                        <div class="invite-highlight-text" data-i18n="bannerTitle">邀请您立即注册，独家奖励等你来拿！</div>
                        <div class="invite-highlight-line"></div>
                    </div>
                </div>
            </div>

            <div class="form-section" id="registerForm">
                <div class="form-group">
                    <div class="input-wrapper">
                        <input type="email" id="email" placeholder="" required>
                        <label class="input-label" data-i18n="emailPlaceholder">请输入邮箱</label>
                    </div>
                    <span class="error-message" id="emailError"></span>
                </div>

                <div class="form-group">
                    <div class="input-wrapper">
                        <input type="password" id="password" placeholder="" required>
                        <label class="input-label" data-i18n="passwordPlaceholder">请设置密码</label>
                    </div>
                    <span class="error-message" id="passwordError"></span>
                    <span class="password-rule" data-i18n="passwordRule">8-32位，需包含大小写字母和特殊字符</span>
                </div>

                <div class="form-group invite-code-group">
                    <div class="invite-code-label" data-i18n="inviteCodeTitle">邀请码</div>
                    <div class="invite-code-box">
                        <div class="invite-code-value" id="inviteCode"></div>
                        <div class="invite-code-copy" id="copyBtn">
                            <svg viewBox="0 0 24 24">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <button class="btn-primary primary" id="registerBtn" data-i18n="registerButton">立即注册</button>
                    <button class="btn-primary" id="appDownloadBtn" data-i18n="appDownloadButton">下载APP</button>
                </div>

                <div class="agreement-text" data-i18n="agreementText">注册即表示我同意<a
                        href="/privacy-policy.html">《用户协议》</a>及<a href="/privacy-policy.html">《隐私协议》</a></div>
            </div>

            <div class="form-section verification-section" id="verificationForm" style="display: none;">
                <div class="form-group">
                    <div class="input-wrapper">
                        <input type="text" id="verificationCode" placeholder="" required maxlength="6">
                        <label class="input-label" data-i18n="verificationPlaceholder">请输入邮箱验证码</label>
                        <span class="verification-timer" id="timer"></span>
                    </div>
                    <span class="error-message" id="verificationError"></span>
                </div>

                <button class="btn-primary" id="submitBtn" data-i18n="submitButton">提交验证码</button>

                <div class="agreement-text" style="margin-top: 24px;">
                    <!-- <span data-i18n="resendCode">未收到验证码？</span> -->
                    <span id="resendBtn" class="resend-code" style="margin-left: 8px;"
                        data-i18n="resendButton">重新发送</span>
                </div>
            </div>

            <div class="features-section">
                <div class="features-title" data-i18n="featuresTitle">前沿交易工具，多元交易策略</div>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g id="Frame">
                                    <path id="Vector"
                                        d="M12 4H5.33333C4.59695 4 4 4.59695 4 5.33333V12C4 12.7364 4.59695 13.3333 5.33333 13.3333H12C12.7364 13.3333 13.3333 12.7364 13.3333 12V5.33333C13.3333 4.59695 12.7364 4 12 4Z"
                                        stroke="white" stroke-width="2" stroke-linejoin="round" />
                                    <path id="Vector_2"
                                        d="M12 18.666H5.33333C4.59695 18.666 4 19.2629 4 19.9993V26.666C4 27.4024 4.59695 27.9993 5.33333 27.9993H12C12.7364 27.9993 13.3333 27.4024 13.3333 26.666V19.9993C13.3333 19.2629 12.7364 18.666 12 18.666Z"
                                        stroke="white" stroke-width="2" stroke-linejoin="round" />
                                    <path id="Vector_3"
                                        d="M26.667 4H20.0003C19.2639 4 18.667 4.59695 18.667 5.33333V12C18.667 12.7364 19.2639 13.3333 20.0003 13.3333H26.667C27.4034 13.3333 28.0003 12.7364 28.0003 12V5.33333C28.0003 4.59695 27.4034 4 26.667 4Z"
                                        stroke="#FD6F23" stroke-width="2" stroke-linejoin="round" />
                                    <path id="Vector_4"
                                        d="M26.667 18.666H20.0003C19.2639 18.666 18.667 19.2629 18.667 19.9993V26.666C18.667 27.4024 19.2639 27.9993 20.0003 27.9993H26.667C27.4034 27.9993 28.0003 27.4024 28.0003 26.666V19.9993C28.0003 19.2629 27.4034 18.666 26.667 18.666Z"
                                        stroke="white" stroke-width="2" stroke-linejoin="round" />
                                </g>
                            </svg>
                        </div>
                        <div class="feature-name" data-i18n="feature1">分仓管理</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M3.33334 16C3.33334 22.9956 9.00441 28.6666 16 28.6666V17.3333C16 16.5969 16.5969 16 17.3333 16H28.6667C28.6667 9.00438 22.9956 3.33331 16 3.33331C9.00441 3.33331 3.33334 9.00438 3.33334 16Z"
                                    stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M28 20H20V28H28V20Z" stroke="#FD6F23" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div class="feature-name" data-i18n="feature2">批量交易</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 4V28H28" stroke="white" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M9.33334 22.6667L14.6667 12L21.3333 18L28 4" stroke="#FD6F23" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>

                        </div>
                        <div class="feature-name" data-i18n="feature3">画线下单</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12.6667 13.3333C15.244 13.3333 17.3333 11.244 17.3333 8.66667C17.3333 6.08934 15.244 4 12.6667 4C10.0893 4 8 6.08934 8 8.66667C8 11.244 10.0893 13.3333 12.6667 13.3333Z"
                                    stroke="white" stroke-width="2" stroke-linejoin="round" />
                                <path d="M24 19.3334V27.3334M20 23.3334H28" stroke="#FD6F23" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M18 18.6666H12.5333C9.5464 18.6666 8.05293 18.6666 6.91207 19.2479C5.90852 19.7592 5.09262 20.5752 4.5813 21.5787C4 22.7196 4 24.213 4 27.2V28H18"
                                    stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>

                        </div>
                        <div class="feature-name" data-i18n="feature4">跟单下单</div>
                    </div>
                </div>
            </div>

            <div class="stats-section">
                <img src="/images/IMG_7495 1@3x.png" alt="">
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-value">30+</div>
                        <div class="stat-label" data-i18n="stat1">覆盖国家及地区</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">500+</div>
                        <div class="stat-label" data-i18n="stat2">数字资产</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">6+</div>
                        <div class="stat-label" data-i18n="stat3">稳定运营6年</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">100W+</div>
                        <div class="stat-label" data-i18n="stat4">全球用户</div>
                    </div>
                </div>
            </div>

        </div>

        <div class="success-overlay" id="successOverlay" style="display: none;">
            <div class="success-content">
                <div class="success-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
                    </svg>
                </div>
                <div class="success-title" data-i18n="successTitle">注册成功</div>
                <div class="success-desc" data-i18n="successDesc">即将跳转到下载页面...</div>
            </div>
        </div>

        <div class="loading-overlay" id="loadingOverlay" style="display: none;">
            <div class="loading-content">
                <div class="loading-spinner"></div>
                <span class="loading-text" data-i18n="loadingText">加载中...</span>
            </div>
        </div>

        <div class="error-overlay" id="errorOverlay" style="display: none;">
            <div class="error-content">
                <div class="error-icon">!</div>
                <span class="error-text" data-i18n="errorText">操作失败，请稍后重试</span>
                <button class="error-retry" id="retryBtn" data-i18n="retryBtn">重试</button>
            </div>
        </div>
    </div>
    <script src="/js/common.js"></script>
    <script>
        (function () {
            function applyTranslations(lang) {
                BEXI18n.applyTranslations('inviteRegister', {
                    htmlKeys: ['bannerTitle', 'agreementText']
                });
            }

            let countdown = 60;
            let timerInterval = null;

            function startCountdown() {
                countdown = 60;
                const timerEl = document.getElementById('timer');
                const resendBtn = document.getElementById('resendBtn');

                timerEl.textContent = countdown + 's';
                timerEl.classList.add('timer-active');
                resendBtn.style.display = 'none';

                timerInterval = setInterval(() => {
                    countdown--;
                    timerEl.textContent = countdown + 's';

                    if (countdown <= 0) {
                        clearInterval(timerInterval);
                        timerEl.textContent = '';
                        timerEl.classList.remove('timer-active');
                        resendBtn.style.display = 'inline';
                    }
                }, 1000);
            }

            function showLoading() {
                document.getElementById('loadingOverlay').style.display = 'flex';
            }

            function hideLoading() {
                document.getElementById('loadingOverlay').style.display = 'none';
            }

            function showError() {
                hideLoading();
                document.getElementById('errorOverlay').style.display = 'flex';
            }

            function hideError() {
                document.getElementById('errorOverlay').style.display = 'none';
            }

            function showSuccess() {
                hideLoading();
                document.getElementById('successOverlay').style.display = 'flex';
                // setTimeout(() => {
                window.location.href = '/invite-download.html?lang=' + getCurrentLang();
                // }, 2000);
            }

            function switchToVerification() {
                document.getElementById('registerForm').style.display = 'none';
                document.getElementById('verificationForm').style.display = 'block';
                startCountdown();
            }

            function getFromUrl() {
                const searchParams = new URLSearchParams(window.location.search);
                const params = Object.fromEntries(searchParams);
                return params;
            }

            function initInviteCode() {
                const inviteCode = getFromUrl().inviteCode || '';
                document.getElementById('inviteCode').textContent = inviteCode;
            }

            function showError(elementId, message) {
                const errorEl = document.getElementById(elementId);
                if (errorEl) {
                    errorEl.textContent = message;
                    errorEl.style.display = 'block';
                }
            }

            function hideError(elementId) {
                const errorEl = document.getElementById(elementId);
                if (errorEl) {
                    errorEl.textContent = '';
                    errorEl.style.display = 'none';
                }
            }

            function validatePassword(password) {
                if (!password) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'passwordRequired') };
                }
                if (password.length < 8) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'passwordMinLength') };
                }
                if (password.length > 32) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'passwordMaxLength') };
                }
                if (!/[a-z]/.test(password)) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'passwordLowercase') };
                }
                if (!/[A-Z]/.test(password)) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'passwordUppercase') };
                }
                if (!/[!@#$%^&*()_+\-=\[\]{}|;:,.<>?]/.test(password)) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'passwordSpecial') };
                }
                return { valid: true, message: '' };
            }

            function validateEmail(email) {
                if (!email) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'emailRequired') };
                }
                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    return { valid: false, message: BEXI18n.t('inviteRegister', 'emailInvalid') };
                }
                return { valid: true, message: '' };
            }

            document.getElementById('copyBtn').addEventListener('click', () => {
                const inviteCode = document.getElementById('inviteCode').textContent;
                navigator.clipboard.writeText(inviteCode).then(() => {
                    showError('passwordError', BEXI18n.t('inviteRegister', 'inviteCodeCopied'));
                    setTimeout(() => {
                        hideError('passwordError');
                    }, 2000);
                }).catch(() => {
                    showError('passwordError', BEXI18n.t('inviteRegister', 'copyFailed'));
                });
            });

            async function sendVerifyCode(email) {
                return await window.BEXApi.request('/api/v1/auth/send-code', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'localeName': getCurrentLang(),
                        ...globalHeaders
                    },
                    body: JSON.stringify({
                        target: email,
                        scene: 'REGISTER'
                    })
                });
            }

            async function registerUser(email, password, code) {
                const obj = getFromUrl() || {};
                inviteCode = obj.inviteCode || '';
                activityId = obj.activityId || '';
                return await window.BEXApi.request('/api/v1/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'localeName': getCurrentLang(),
                        ...globalHeaders
                    },
                    body: JSON.stringify({
                        email: email,
                        password: password,
                        isWeb: true,
                        inviteCode: inviteCode,
                        verifyCode: code,
                        activityId: activityId,
                        type: 'email'
                    })
                });
            }
            document.getElementById('appDownloadBtn').addEventListener('click', () => {
                window.location.href = '/invite-download.html?lang=' + getCurrentLang();
            });
            document.getElementById('registerBtn').addEventListener('click', async () => {
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;

                hideError('emailError');
                hideError('passwordError');

                const emailResult = validateEmail(email);
                if (!emailResult.valid) {
                    showError('emailError', emailResult.message);
                    return;
                }

                const passwordResult = validatePassword(password);
                if (!passwordResult.valid) {
                    showError('passwordError', passwordResult.message);
                    return;
                }

                showLoading();

                try {
                    await sendVerifyCode(email);
                    hideError('emailError');
                    hideError('passwordError');
                    switchToVerification();
                } catch (error) {
                    showError('emailError', BEXI18n.t('inviteRegister', 'sendCodeFailedPrefix') + error.message);
                } finally {
                    hideLoading();
                }
            });

            document.getElementById('resendBtn').addEventListener('click', async () => {
                const email = document.getElementById('email').value;
                showLoading();

                try {
                    await sendVerifyCode(email);
                    hideError('verificationError');
                    startCountdown();
                } catch (error) {
                    showError('verificationError', BEXI18n.t('inviteRegister', 'resendFailedPrefix') + error.message);
                } finally {
                    hideLoading();
                }
            });

            document.getElementById('submitBtn').addEventListener('click', async () => {
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                const code = document.getElementById('verificationCode').value;

                hideError('verificationError');

                if (!code || code.length !== 6) {
                    showError('verificationError', BEXI18n.t('inviteRegister', 'verificationCodeRequired'));
                    return;
                }

                showLoading();

                try {
                    await registerUser(email, password, code);
                    showSuccess();
                } catch (error) {
                    showError('verificationError', BEXI18n.t('inviteRegister', 'registerFailedPrefix') + error.message);
                } finally {
                    hideLoading();
                }
            });

            document.getElementById('retryBtn').addEventListener('click', hideError);

            document.addEventListener('click', (e) => {
                const target = e.target.closest('.agreement-link');
                if (target) {
                    e.preventDefault();
                    const url = target.dataset.url;
                    const lang = getCurrentLang();
                    window.location.href = url + '?lang=' + lang;
                }
            });

            const lang = getCurrentLang();
            applyTranslations(lang);
            initInviteCode();
            initLangSwitcher(lang);
        })();

        function initLangSwitcher(currentLang) {
            var languageOptions = window.BEXI18nConfig.languageOptions;
            var langSwitcher = document.getElementById('langSwitcher');
            var langSwitcherBtn = document.getElementById('langSwitcherBtn');
            var langDropdown = document.getElementById('langDropdown');
            var langLabel = document.getElementById('langSwitcherLabel');

            // 设置当前语言标签
            var currentOption = languageOptions.find(function (opt) { return opt.value === currentLang; });
            if (currentOption) {
                langLabel.textContent = currentOption.label;
            }

            // 构建下拉选项
            languageOptions.forEach(function (opt) {
                var item = document.createElement('button');
                item.className = 'lang-dropdown-item';
                if (opt.value === currentLang) {
                    item.classList.add('active');
                }
                item.textContent = opt.label;
                item.addEventListener('click', function () {
                    if (opt.value !== currentLang) {
                        var url = new URL(window.location.href);
                        url.searchParams.set('lang', opt.value);
                        window.location.href = url.toString();
                    } else {
                        closeDropdown();
                    }
                });
                langDropdown.appendChild(item);
            });

            // 切换下拉
            langSwitcherBtn.addEventListener('click', function (e) {
                e.stopPropagation();
                var isOpen = langDropdown.style.display === 'block';
                if (isOpen) {
                    closeDropdown();
                } else {
                    openDropdown();
                }
            });

            // 点击外部关闭
            document.addEventListener('click', function () {
                closeDropdown();
            });

            function openDropdown() {
                langDropdown.style.display = 'block';
                langSwitcher.classList.add('open');
            }

            function closeDropdown() {
                langDropdown.style.display = 'none';
                langSwitcher.classList.remove('open');
            }
        }
    </script>
</body>

</html>