script.js

/**
 * 注册挑战 - 愚人节整蛊页面
 * 所有输入框禁用键盘，必须用奇怪方式输入
 */

const state = {
    currentStep: 1,
    startTime: Date.now(),
    clicks: 0,
    scrolls: 0,
    wheelLetterIndex: 0,
    usernameValue: '',
    emailValue: '',
    passwordValue: '',
    confirmValue: '',
    isSpinning: false,
    genderClickCount: 0,
    genderSelected: false,
    captchaTarget: 0,
    checkboxEscapeCount: 0,
    submitEscapeCount: 0,
    termsAgreed: false,
};

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || ('ontouchstart' in window);

document.addEventListener('DOMContentLoaded', () => {
    createParticles();
    initStep1();
    initStep2();
    initStep3();
    document.addEventListener('click', () => state.clicks++);
    document.addEventListener('keydown', (e) => {
        const tag = e.target.tagName;
        if (tag === 'INPUT' || tag === 'TEXTAREA') {
            e.preventDefault();
            showToast('键盘已被没收！用页面上的方式输入吧 😈', '⌨️');
        }
    });
});

function createParticles() {
    const c = document.getElementById('particles');
    for (let i = 0; i < 30; i++) {
        const p = document.createElement('div');
        p.className = 'particle';
        p.style.left = Math.random() * 100 + '%';
        p.style.animationDuration = (8 + Math.random() * 12) + 's';
        p.style.animationDelay = Math.random() * 8 + 's';
        const s = (2 + Math.random() * 4) + 'px';
        p.style.width = s; p.style.height = s;
        c.appendChild(p);
    }
}

function showToast(msg, icon = 'ℹ️') {
    const t = document.createElement('div');
    t.className = 'toast';
    t.innerHTML = `<span>${icon}</span><span>${msg}</span>`;
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 3200);
}

function goToStep(step) {
    document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));
    document.querySelectorAll('.progress-steps .step').forEach(s => {
        const n = parseInt(s.dataset.step);
        s.classList.remove('active', 'completed');
        if (n < step) s.classList.add('completed');
        if (n === step) s.classList.add('active');
    });
    const id = step === 4 ? 'stepFinal' : `step${step}`;
    document.getElementById(id).classList.add('active');
    document.getElementById('progressFill').style.width = (step <= 3 ? step * 33.33 : 100) + '%';
    state.currentStep = step;
    if (step === 3) generateCaptchaTarget();
    if (step === 4) showFinalReveal();
}

// ================================================================
// STEP 1: 昵称(滚轮) + 邮箱(乱序键盘)
// ================================================================
function initStep1() {
    const text = document.getElementById('usernameText');
    const placeholder = document.getElementById('usernamePlaceholder');
    const letter = document.getElementById('wheelLetter');

    document.querySelector('#usernameGroup').addEventListener('wheel', (e) => {
        e.preventDefault();
        state.scrolls++;
        if (e.deltaY < 0) {
            state.wheelLetterIndex = (state.wheelLetterIndex + 1) % 26;
            letter.className = 'wheel-letter up';
        } else {
            state.wheelLetterIndex = (state.wheelLetterIndex - 1 + 26) % 26;
            letter.className = 'wheel-letter down';
        }
        letter.textContent = String.fromCharCode(65 + state.wheelLetterIndex);
        setTimeout(() => letter.className = 'wheel-letter', 120);
    });

    // Arrow buttons for letter selection (mobile-friendly)
    document.getElementById('wheelUp').addEventListener('click', () => {
        state.scrolls++;
        state.wheelLetterIndex = (state.wheelLetterIndex + 1) % 26;
        letter.className = 'wheel-letter up';
        letter.textContent = String.fromCharCode(65 + state.wheelLetterIndex);
        setTimeout(() => letter.className = 'wheel-letter', 120);
    });
    document.getElementById('wheelDown').addEventListener('click', () => {
        state.scrolls++;
        state.wheelLetterIndex = (state.wheelLetterIndex - 1 + 26) % 26;
        letter.className = 'wheel-letter down';
        letter.textContent = String.fromCharCode(65 + state.wheelLetterIndex);
        setTimeout(() => letter.className = 'wheel-letter', 120);
    });

    // Update hints for mobile
    if (isMobile) {
        document.getElementById('usernameHint').querySelector('span:last-child').textContent =
            '键盘坏了，只能点按钮选字母，一个一个来～';
        document.getElementById('usernamePlaceholder').textContent = '点击箭头按钮选择字母...';
    }

    document.getElementById('wheelConfirm').addEventListener('click', () => {
        if (state.usernameValue.length >= 16) return showToast('够了够了！', '📝');
        const ch = String.fromCharCode(65 + state.wheelLetterIndex);
        state.usernameValue += ch;
        text.textContent = state.usernameValue;
        placeholder.style.display = 'none';
    });

    document.getElementById('wheelDelete').addEventListener('click', () => {
        if (!state.usernameValue.length) return;
        state.usernameValue = state.usernameValue.slice(0, -1);
        text.textContent = state.usernameValue;
        if (!state.usernameValue.length) placeholder.style.display = '';
    });

    buildVirtualKeyboard();

    document.getElementById('nextBtn1').addEventListener('click', () => {
        if (state.usernameValue.length < 1) {
            showToast('好歹写个名字吧！一个字母就行！', '🖱️');
            document.getElementById('usernameGroup').classList.add('shake');
            setTimeout(() => document.getElementById('usernameGroup').classList.remove('shake'), 500);
            return;
        }
        if (state.emailValue.length < 5 || !state.emailValue.includes('@')) {
            showToast('邮箱呢？要有@哦，慢慢在键盘上找吧', '📧');
            document.getElementById('emailGroup').classList.add('shake');
            setTimeout(() => document.getElementById('emailGroup').classList.remove('shake'), 500);
            return;
        }
        goToStep(2);
        showToast('居然过了第一关？？不可能！', '😱');
    });
}

function buildVirtualKeyboard() {
    const kb = document.getElementById('virtualKeyboard');
    const allKeys = 'abcdefghijklmnopqrstuvwxyz0123456789@._-'.split('');

    function shuffle(arr) {
        const a = [...arr];
        for (let i = a.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [a[i], a[j]] = [a[j], a[i]];
        }
        return a;
    }

    function render() {
        kb.innerHTML = '';
        shuffle(allKeys).forEach(ch => {
            const key = document.createElement('button');
            key.className = 'vk-key';
            key.textContent = ch;
            key.addEventListener('click', () => {
                state.emailValue += ch;
                document.getElementById('emailText').textContent = state.emailValue;
                document.getElementById('emailPlaceholder').style.display = 'none';
                document.getElementById('emailHint').style.display = 'flex';
                render();
            });
            kb.appendChild(key);
        });

        const bk = document.createElement('button');
        bk.className = 'vk-key special';
        bk.textContent = '⌫ 删除';
        bk.addEventListener('click', () => {
            state.emailValue = state.emailValue.slice(0, -1);
            document.getElementById('emailText').textContent = state.emailValue;
            if (!state.emailValue.length) document.getElementById('emailPlaceholder').style.display = '';
            render();
        });
        kb.appendChild(bk);

        const com = document.createElement('button');
        com.className = 'vk-key special';
        com.textContent = '.com';
        com.addEventListener('click', () => {
            state.emailValue += '.com';
            document.getElementById('emailText').textContent = state.emailValue;
            document.getElementById('emailPlaceholder').style.display = 'none';
            render();
        });
        kb.appendChild(com);
    }
    render();
}

// ================================================================
// STEP 2: 密码(转盘抽字符) + 确认密码(按顺序点击打乱字符)
// ================================================================
function initStep2() {
    const passText = document.getElementById('passwordText');
    const passPlaceholder = document.getElementById('passwordPlaceholder');
    const spinnerDisplay = document.getElementById('spinnerDisplay');
    const spinBtn = document.getElementById('spinBtn');
    const spinDelBtn = document.getElementById('spinDelBtn');
    const strengthFill = document.getElementById('strengthFill');
    const strengthText = document.getElementById('strengthText');
    const passHint = document.getElementById('passwordHint');
    const passJudge = document.getElementById('passwordJudge');

    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
    const roasts = [
        '这密码…我家猫踩键盘都比这强 🐱',
        '你家WiFi密码都比这复杂 📶',
        '弱得像纸糊的门 📄',
        '全世界最弱密码排行第1名 🏅',
        '直接用"123456"得了，反正一样弱 🤷',
        'AI 0.0001秒破解 🤖',
        '密码学家看了直接哭晕 😭',
        '这安全级别 ≈ 没设密码 🚪',
        '你确定这不是你生日？🎂',
        '来自密码检测器的嘲笑 🤣',
    ];
    let roastIdx = 0;

    spinBtn.addEventListener('click', () => {
        if (state.passwordValue.length >= 20) return showToast('够了！虽然还是极弱', '🔑');
        if (state.isSpinning) return;
        state.isSpinning = true;
        spinBtn.disabled = true;
        let spins = 0;
        const max = 15 + Math.floor(Math.random() * 10);
        spinnerDisplay.classList.add('spinning');

        const iv = setInterval(() => {
            spinnerDisplay.textContent = chars[Math.floor(Math.random() * chars.length)];
            if (++spins >= max) {
                clearInterval(iv);
                const ch = chars[Math.floor(Math.random() * chars.length)];
                spinnerDisplay.textContent = ch;
                spinnerDisplay.classList.remove('spinning');
                state.passwordValue += ch;
                passText.textContent = '•'.repeat(state.passwordValue.length);
                passPlaceholder.style.display = 'none';
                state.isSpinning = false;
                spinBtn.disabled = false;
                strengthFill.style.width = Math.min(state.passwordValue.length * 2, 15) + '%';
                strengthFill.style.background = '#ef4444';
                strengthText.textContent = '极弱';
                strengthText.style.color = '#ef4444';
                passHint.style.display = 'flex';
                passJudge.textContent = roasts[roastIdx++ % roasts.length];

                if (state.passwordValue.length === 1) showToast(`抽到 "${ch}"！命运决定的，珍惜吧`, '🎰');
                if (state.passwordValue.length === 6) showToast('6位了！现在去下面确认密码吧～', '👇');

                // Update confirm area
                renderConfirmChars();
            }
        }, 60);
    });

    spinDelBtn.addEventListener('click', () => {
        if (!state.passwordValue.length) return;
        state.passwordValue = state.passwordValue.slice(0, -1);
        passText.textContent = '•'.repeat(state.passwordValue.length);
        if (!state.passwordValue.length) {
            passPlaceholder.style.display = '';
            passHint.style.display = 'none';
            strengthFill.style.width = '0';
            strengthText.textContent = '';
        }
        // Reset confirm
        state.confirmValue = '';
        document.getElementById('confirmText').textContent = '';
        document.getElementById('confirmPlaceholder').style.display = '';
        renderConfirmChars();
    });

    // Confirm reset button
    document.getElementById('confirmReset').addEventListener('click', () => {
        state.confirmValue = '';
        document.getElementById('confirmText').textContent = '';
        document.getElementById('confirmPlaceholder').style.display = '';
        renderConfirmChars();
        showToast('已重新打乱，再来一次！', '🔄');
    });

    // Nav
    document.getElementById('prevBtn2').addEventListener('click', () => goToStep(1));
    document.getElementById('nextBtn2').addEventListener('click', () => {
        if (state.passwordValue.length < 6) {
            showToast('密码至少6位！继续抽奖吧', '🎰');
            document.getElementById('passwordGroup').classList.add('shake');
            setTimeout(() => document.getElementById('passwordGroup').classList.remove('shake'), 500);
            return;
        }
        if (state.confirmValue !== state.passwordValue) {
            showToast('密码确认不一致！按正确顺序点击字符', '🧩');
            document.getElementById('confirmGroup').classList.add('shake');
            setTimeout(() => document.getElementById('confirmGroup').classList.remove('shake'), 500);
            return;
        }
        goToStep(3);
        showToast('到第三关了？不可能，肯定是bug 🐛', '🏁');
    });
}

// Render the shuffled confirm chars
function renderConfirmChars() {
    const container = document.getElementById('confirmChars');
    const resetBtn = document.getElementById('confirmReset');
    state.confirmValue = '';
    document.getElementById('confirmText').textContent = '';
    document.getElementById('confirmPlaceholder').style.display = '';

    if (state.passwordValue.length < 6) {
        container.innerHTML = '<p class="confirm-empty">先在上面抽取密码（至少6位）</p>';
        resetBtn.style.display = 'none';
        return;
    }

    resetBtn.style.display = 'block';
    container.innerHTML = '';

    // Shuffle password characters
    const pwChars = state.passwordValue.split('').map((ch, idx) => ({ ch, idx }));
    for (let i = pwChars.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [pwChars[i], pwChars[j]] = [pwChars[j], pwChars[i]];
    }

    pwChars.forEach(item => {
        const tile = document.createElement('button');
        tile.className = 'confirm-tile';
        tile.textContent = item.ch;
        tile.dataset.origIdx = item.idx;

        tile.addEventListener('click', () => {
            // Check if this is the correct next character
            const expectedIdx = state.confirmValue.length;
            const expectedChar = state.passwordValue[expectedIdx];

            if (item.ch === expectedChar) {
                // Correct!
                state.confirmValue += item.ch;
                tile.classList.add('used');
                document.getElementById('confirmText').textContent = '•'.repeat(state.confirmValue.length);
                document.getElementById('confirmPlaceholder').style.display = 'none';

                if (state.confirmValue === state.passwordValue) {
                    showToast('密码确认成功！你记忆力不错嘛', '🧠');
                }
            } else {
                // Wrong! Reset all
                showToast(`错了！这不是第${expectedIdx + 1}个字符，重新来吧`, '❌');
                state.confirmValue = '';
                document.getElementById('confirmText').textContent = '';
                document.getElementById('confirmPlaceholder').style.display = '';
                // Re-shuffle
                renderConfirmChars();
            }
        });

        container.appendChild(tile);
    });
}

// ================================================================
// STEP 3: 性别(逃跑) + 验证码(滑块±10) + 条款(逃跑) + 提交(逃跑)
// ================================================================
function initStep3() {
    const genderBtns = document.querySelectorAll('.gender-btn');
    const genderHint = document.getElementById('genderHint');

    const genderMaxEscape = isMobile ? 5 : 8;
    genderBtns.forEach(btn => {
        // Desktop: dodge on mouseenter
        if (!isMobile) {
            btn.addEventListener('mouseenter', () => {
                if (state.genderSelected) return;
                state.genderClickCount++;
                if (state.genderClickCount <= genderMaxEscape) {
                    btn.style.transform = `translate(${(Math.random()-.5)*140}px, ${(Math.random()-.5)*60}px)`;
                    if (state.genderClickCount === 1) genderHint.style.display = 'flex';
                    if (state.genderClickCount === 4) showToast('按钮：你永远抓不到我！', '🏃');
                    if (state.genderClickCount === 7) showToast('好累…再试一次就不跑了…', '😩');
                } else {
                    state.genderSelected = true;
                    genderBtns.forEach(b => b.style.transform = 'none');
                    showToast('行吧，不跑了，你选吧', '😮‍💨');
                }
            });
        }
        btn.addEventListener('click', () => {
            // Mobile: dodge on click
            if (isMobile && !state.genderSelected) {
                state.genderClickCount++;
                if (state.genderClickCount <= genderMaxEscape) {
                    btn.style.transform = `translate(${(Math.random()-.5)*80}px, ${(Math.random()-.5)*35}px)`;
                    if (state.genderClickCount === 1) genderHint.style.display = 'flex';
                    if (state.genderClickCount === 3) showToast('按钮：你永远抓不到我！', '🏃');
                    if (state.genderClickCount === 4) showToast('好累…再试一次就不跑了…', '😩');
                    return;
                } else {
                    state.genderSelected = true;
                    genderBtns.forEach(b => b.style.transform = 'none');
                    showToast('行吧，不跑了，你选吧', '😮‍💨');
                }
            }
            if (!isMobile && !state.genderSelected && state.genderClickCount <= genderMaxEscape) return;
            genderBtns.forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
        });
    });

    // Captcha slider
    const slider = document.getElementById('captchaSlider');
    const sliderVal = document.getElementById('sliderValue');
    slider.addEventListener('input', () => { sliderVal.textContent = slider.value; });

    // Terms checkbox escapes
    const cbox = document.getElementById('checkboxContainer');
    const check = document.getElementById('termsCheckbox');
    const cboxMaxEscape = isMobile ? 3 : 5;
    cbox.addEventListener('click', (e) => {
        if (state.termsAgreed) return;
        e.preventDefault();
        state.checkboxEscapeCount++;
        if (state.checkboxEscapeCount <= cboxMaxEscape) {
            const dodgeX = isMobile ? 60 : 200;
            const dodgeY = isMobile ? 20 : 40;
            cbox.style.transform = `translate(${(Math.random()-.5)*dodgeX}px, ${(Math.random()-.5)*dodgeY}px)`;
            cbox.style.transition = 'transform 0.2s ease';
            const msgs = ['你确定你读了那20000字？📜','别碰我！','再试试？我可以一直跑 🏃‍♂️','认输协议表示拒绝被同意','你真执着…'];
            showToast(msgs[(state.checkboxEscapeCount-1) % msgs.length], '☑️');
        } else {
            cbox.style.transform = 'none';
            check.checked = true;
            state.termsAgreed = true;
            showToast('行行行，算你狠 ✅', '✅');
        }
    });

    // Submit dodges cursor / finger
    const submitBtn = document.getElementById('submitBtn');
    const submitMaxEscape = isMobile ? 3 : 6;

    // Desktop: dodge on mouseenter
    if (!isMobile) {
        submitBtn.addEventListener('mouseenter', () => {
            if (state.submitEscapeCount >= submitMaxEscape) return;
            state.submitEscapeCount++;
            submitBtn.style.transform = `translate(${(Math.random()-.5)*200}px, ${(Math.random()-.5)*80}px)`;
            if (state.submitEscapeCount === 1) showToast('按钮：我没准备好！', '🫣');
            else if (state.submitEscapeCount === 3) showToast('抓不到我～', '😝');
            else if (state.submitEscapeCount === 5) showToast('好累…下次不跑了…', '😩');
            if (state.submitEscapeCount >= submitMaxEscape) {
                submitBtn.style.transform = 'none';
                showToast('投降了…你点吧', '🏳️');
            }
        });
    }

    submitBtn.addEventListener('click', () => {
        // Mobile: dodge on click
        if (isMobile && state.submitEscapeCount < submitMaxEscape) {
            state.submitEscapeCount++;
            submitBtn.style.transform = `translate(${(Math.random()-.5)*80}px, ${(Math.random()-.5)*35}px)`;
            if (state.submitEscapeCount === 1) showToast('按钮：我没准备好！', '🫣');
            else if (state.submitEscapeCount === 2) showToast('抓不到我～', '😝');
            if (state.submitEscapeCount >= submitMaxEscape) {
                submitBtn.style.transform = 'none';
                showToast('投降了…你点吧', '🏳️');
            }
            return;
        }

        if (!isMobile && state.submitEscapeCount < submitMaxEscape) return;
        if (!state.termsAgreed) return showToast('先承认智商不够用！勾上面的框！', '📋');
        if (!document.querySelector('.gender-btn.selected')) return showToast('性别还没选呢！抓住那个按钮！', '🤔');

        const val = parseInt(slider.value);
        const diff = Math.abs(val - state.captchaTarget);
        if (diff >= 10) {
            const hint = document.getElementById('captchaHint');
            hint.style.display = 'flex';
            let msg;
            if (diff > 2000) msg = '差太远了！大胆滑！';
            else if (diff > 500) msg = '方向对了，继续调！';
            else if (diff > 100) msg = '接近了！小心翼翼地滑…';
            else if (diff > 30) msg = '就差一点点了！';
            else msg = '几乎了！再精确一丢丢！';
            document.getElementById('captchaJudge').textContent = `${msg}（当前 ${val}，目标 ${state.captchaTarget}，差 ${diff}）`;
            return;
        }

        goToStep(4);
    });

    document.getElementById('prevBtn3').addEventListener('click', () => goToStep(2));
}

function generateCaptchaTarget() {
    state.captchaTarget = 1000 + Math.floor(Math.random() * 9000);
    document.getElementById('captchaTarget').textContent = state.captchaTarget;
    document.getElementById('captchaSlider').value = 1000;
    document.getElementById('sliderValue').textContent = '1000';
    document.getElementById('captchaHint').style.display = 'none';
}

function showFinalReveal() {
    const elapsed = Math.round((Date.now() - state.startTime) / 1000);
    document.getElementById('statTime').textContent = elapsed;
    document.getElementById('statClicks').textContent = state.clicks;
    document.getElementById('statScrolls').textContent = state.scrolls;
    document.querySelectorAll('.progress-steps .step').forEach(s => s.classList.add('completed'));
    const pf = document.getElementById('progressFill');
    pf.style.width = '100%';
    pf.style.background = 'linear-gradient(135deg, #10b981, #059669)';
    launchConfetti();
    document.getElementById('replayBtn').addEventListener('click', () => location.reload());
}

function launchConfetti() {
    const container = document.getElementById('confettiContainer');
    const colors = ['#3b82f6','#2563eb','#ec4899','#f59e0b','#10b981','#ef4444','#06b6d4'];
    for (let i = 0; i < 50; i++) {
        setTimeout(() => {
            const c = document.createElement('div');
            c.className = 'confetti';
            c.style.left = Math.random() * 100 + '%';
            c.style.background = colors[Math.floor(Math.random() * colors.length)];
            c.style.animationDuration = (2 + Math.random() * 2) + 's';
            const shapes = ['50%','0','30% 70% 70% 30% / 30% 30% 70% 70%'];
            c.style.borderRadius = shapes[Math.floor(Math.random() * shapes.length)];
            const sz = (6 + Math.random() * 8) + 'px';
            c.style.width = sz; c.style.height = sz;
            container.appendChild(c);
            setTimeout(() => c.remove(), 4000);
        }, i * 50);
    }
}