BFHelper

by darkk6

HTML

<div class="container">
  <div class="instructions">
      <ol>
          <li>電腦上先到 <a target="_blank" href="https://tw.beanfun.com/game_zone/">BFLogin</a>，點選底下 <strong>登入</strong> 進入登入畫面</li>
          <li>要點開 QRCode login，目的是確保 QRCode 沒有過期，以及登入成功才會自動轉跳</li>
          <li>複製網址給手機，注意，網址應該是類似這樣：<br />
          <strong>https://tw.newlogin.beanfun.com/loginform.aspx?...</strong>
          </li>
          <li>
            手機拿到網址後，貼到底下的文字框內，再按下生成
          </li>
      </ol>
  </div>

  <div class="input-section">
      <div class="input-group">
          <input type="text" id="urlInput" placeholder="請貼上網址...">
          <button id="clearBtn" class="btn-clear">清除</button>
      </div>
      <button id="generateBtn" class="btn-generate">生成</button>
  </div>

  <div id="output" class="output-section"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft JhengHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 700px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.instructions {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid #667eea;
}

.instructions ol {
    margin-left: 20px;
}

.instructions li {
    margin-bottom: 12px;
    line-height: 1.6;
}

.instructions a {
    color: #667eea;
    text-decoration: none;
    font-weight: bold;
}

.instructions a:hover {
    text-decoration: underline;
}

.input-section {
    margin-bottom: 25px;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

#urlInput {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
}

#urlInput:focus {
    outline: none;
    border-color: #667eea;
}

.btn-clear {
    padding: 12px 20px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.btn-clear:hover {
    background: #5a6268;
}

.btn-generate {
    width: 100%;
    padding: 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-generate:hover {
    background: #5568d3;
}

.output-section {
    min-height: 60px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const urlInput = document.getElementById('urlInput');
    const clearBtn = document.getElementById('clearBtn');
    const generateBtn = document.getElementById('generateBtn');
    const output = document.getElementById('output');

    // 清除按鈕事件
    clearBtn.addEventListener('click', function() {
        urlInput.value = '';
        urlInput.focus();
    });

    // 生成按鈕事件
    generateBtn.addEventListener('click', async function() {
        const url = urlInput.value.trim();
        
        // 清空輸出區
        output.innerHTML = '';
        
        // 步驟 1: 檢查網址格式
        if (!url.startsWith('https://tw.newlogin.beanfun.com/loginform.aspx?')) {
            showError('網址格式不符');
            return;
        }

        // 步驟 2: 取得 skey 值
        const skey = extractSkey(url);
        if (!skey) {
            showError('找不到 skey');
            return;
        }

        // 步驟 3: 發送 GET request
        try {
            const apiUrl = `https://tw.newlogin.beanfun.com/generic_handlers/get_qrcodeData.ashx?skey=${skey}&startGame=&clientID=`;
            // 使用 CORS 代理
            const proxyUrl = 'https://corsproxy.io/?';
            const response = await fetch(proxyUrl + encodeURIComponent(apiUrl));
            
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }

            const data = await response.json();
            
            // 檢查是否有 strEncryptBCDOData 欄位且不為空
            if (!data.strEncryptBCDOData || data.strEncryptBCDOData.trim() === '') {
                showError('無法取得 QRCode 資訊');
                return;
            }

            // 步驟 4: 顯示成功結果
            showSuccess(data.strEncryptBCDOData);

        } catch (error) {
            console.error('Error:', error);
            showError('無法取得 QRCode 資訊');
        }
    });

    // 從網址中提取 skey 參數
    function extractSkey(url)...