views/encoder.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drpyS源加解密工具</title>
    <script src="/public/jquery.min.js"></script>
    <style>
        /* 通用样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f7f6;
            overflow-x: hidden; /* 防止页面水平滚动 */
        }

        .container {
            width: 100%;
            max-width: 800px; /* 最大宽度限制 */
            padding: 20px;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            box-sizing: border-box;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        /* 文本框 */
        .input-box, .result-box {
            width: 100%;
            height: 35vh; /* 设置为视口高度的35%，以适应各种屏幕 */
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
            font-size: 14px;
            background-color: #fafafa;
            box-sizing: border-box;
        }

        /* 选择框和按钮布局 */
        .select-group, .button-group {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            width: 100%;
        }

        .select-group select, .button-group button {
            width: 48%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }

        /* 按钮 */
        .button-group button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        .button-group button:hover {
            background-color: #45a049;
        }

        /* 复制按钮样式 */
        .button-group .copy-btn {
            background-color: #2196F3;
        }

        .button-group .copy-btn:hover {
            background-color: #0b7dda;
        }

        /* 清空按钮样式 */
        .button-group .clear-btn {
            background-color: #f44336;
        }

        .button-group .clear-btn:hover {
            background-color: #e53935;
        }

        /* 适配小屏设备 */
        @media (max-width: 600px) {
            .select-group, .button-group {
                flex-direction: column;
            }

            .select-group select, .button-group button {
                width: 100%;
                margin-bottom: 10px;
            }

            .input-box, .result-box {
                height: 20vh; /* 小屏设备上减小高度 */
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h2>drpyS源加解密工具</h2>

    <!-- 输入框 -->
    <textarea class="input-box" id="input-code" placeholder="在此输入待加密的文本..."></textarea>

    <!-- 加密方式选择 -->
    <div class="select-group">
        <select id="encryption-type">
            <option value="base64">Base64</option>
            <option value="gzip">Gzip</option>
            <option value="aes">AES</option>
            <option value="rsa">RSA</option>
        </select>
    </div>

    <!-- 加密按钮 -->
    <div class="button-group">
        <button id="encrypt-btn">加密</button>
        <button class="clear-btn" id="clear-input-btn">清空输入</button>
        <button class="clear-btn" id="clear-output-btn">清空输出</button>
        <button class="copy-btn" id="copy-result-btn">复制加密结果</button>
        <button class="copy-btn" id="decrypt-btn">解密</button>
    </div>

    <!-- 加密结果 -->
    <textarea class="result-box" id="result-code" placeholder="加密后的结果将显示在此..."></textarea>
</div>

<script>
    $(document).ready(function () {
        // 加密按钮点击事件
        $('#encrypt-btn').click(function () {
            // 获取输入的内容和加密类型
            const code = $('#input-code').val();
            const type = $('#encryption-type').val();

            if (!code || !type) {
                alert('请填写文本和选择加密方式');
                return;
            }

            // 发送 POST 请求到后端
            $.ajax({
                url: '/encoder',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({code, type}),
                success: function (response) {
                    // 显示加密后的结果
                    if (response.success) {
                        $('#result-code').val(response.result);
                    } else {
                        alert('加密失败：' + response.error);
                    }
                },
                error: function (xhr, status, error) {
                    // 获取返回的 body
                    const responseBody = xhr.responseText;
                    console.log('Response body:', responseBody);
                    // 可选：如果返回的是 JSON，解析它
                    try {
                        const jsonResponse = JSON.parse(responseBody);
                        console.log('Parsed response:', jsonResponse);
                        alert('请求失败，请稍后再试。' + jsonResponse.error);
                    } catch (e) {
                        console.log('Failed to parse response as JSON');
                        alert('请求失败，请稍后再试。' + error);
                    }
                }
            });
        });

        // 清空输入框按钮点击事件
        $('#clear-input-btn').click(function () {
            $('#input-code').val('');
        });

        // 清空输出框按钮点击事件
        $('#clear-output-btn').click(function () {
            $('#result-code').val('');
        });

        // 复制加密结果按钮点击事件
        $('#copy-result-btn').click(function () {
            const resultText = $('#result-code').val();
            if (resultText) {
                // 创建临时文本框来复制文本
                const tempInput = document.createElement('input');
                document.body.appendChild(tempInput);
                tempInput.value = resultText;
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                alert('加密结果已复制到剪贴板');
            } else {
                alert('没有加密结果可以复制');
            }
        });

        // 解密按钮点击事件
        $('#decrypt-btn').click(function () {
            const code = $('#result-code').val();
            if (!code) {
                alert("请填写密文！");
                return;
            }
            // 弹窗提示用户支付凭证
            if (confirm("此功能仅限会员使用，V我50开启，是否继续？")) {
                const authCode = prompt("请输入您的支付凭证：");

                if (authCode) {
                    // 发送解密请求
                    $.ajax({
                        url: '/decoder',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({auth_code: authCode, code}),
                        success: function (response) {
                            if (response.success) {
                                // 解密成功，将结果放入待加密框
                                $('#input-code').val(response.result);
                            } else {
                                alert("解密失败：" + response.error);
                            }
                        },
                        error: function (xhr, status, error) {
                            alert("解密请求失败，请稍后再试。" + error);
                        }
                    });
                }
            }
        });

    });
</script>

</body>
</html>