<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二元一次方程计算器</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        neutral: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .equation-input {
                @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300 text-lg;
            }
            .btn-calculate {
                @apply bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0;
            }
            .card {
                @apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <!-- 页面标题 -->
        <header class="text-center mb-10 mt-6">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-3">
                <i class="fa fa-calculator text-primary mr-3"></i>二元一次方程计算器
            </h1>
            <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                快速求解二元一次方程组，支持完整解题步骤展示，轻松验证答案
            </p>
        </header>

        <div class="grid md:grid-cols-12 gap-8">
            <!-- 输入区域 -->
            <div class="md:col-span-5">
                <div class="card h-full">
                    <h2 class="text-xl font-bold text-dark mb-5 flex items-center">
                        <i class="fa fa-pencil-square-o text-primary mr-2"></i>输入方程组
                    </h2>

                    <div class="space-y-6">
                        <!-- 方程格式说明 -->
                        <div class="bg-neutral p-4 rounded-lg text-sm text-gray-600">
                            方程组格式：<br>
                            ax + by = c<br>
                            dx + ey = f<br>
                            请输入系数a, b, c, d, e, f
                        </div>

                        <!-- 输入表单 -->
                        <form id="equationForm" class="space-y-4">
                            <div class="grid grid-cols-3 gap-3">
                                <div>
                                    <label for="a" class="block text-sm font-medium text-gray-700 mb-1">a</label>
                                    <input type="number" id="a" class="equation-input" placeholder="系数a" step="any" required>
                                </div>
                                <div>
                                    <label for="b" class="block text-sm font-medium text-gray-700 mb-1">b</label>
                                    <input type="number" id="b" class="equation-input" placeholder="系数b" step="any" required>
                                </div>
                                <div>
                                    <label for="c" class="block text-sm font-medium text-gray-700 mb-1">c</label>
                                    <input type="number" id="c" class="equation-input" placeholder="系数c" step="any" required>
                                </div>
                            </div>

                            <div class="grid grid-cols-3 gap-3">
                                <div>
                                    <label for="d" class="block text-sm font-medium text-gray-700 mb-1">d</label>
                                    <input type="number" id="d" class="equation-input" placeholder="系数d" step="any" required>
                                </div>
                                <div>
                                    <label for="e" class="block text-sm font-medium text-gray-700 mb-1">e</label>
                                    <input type="number" id="e" class="equation-input" placeholder="系数e" step="any" required>
                                </div>
                                <div>
                                    <label for="f" class="block text-sm font-medium text-gray-700 mb-1">f</label>
                                    <input type="number" id="f" class="equation-input" placeholder="系数f" step="any" required>
                                </div>
                            </div>

                            <div class="flex gap-3 pt-2">
                                <button type="submit" class="btn-calculate flex-1 flex items-center justify-center">
                                    <i class="fa fa-calculator mr-2"></i>计算
                                </button>
                                <button type="reset" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 px-6 rounded-lg transition-all duration-300">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 结果展示区域 -->
            <div class="md:col-span-7">
                <div class="card h-full">
                    <h2 class="text-xl font-bold text-dark mb-5 flex items-center">
                        <i class="fa fa-check-circle text-secondary mr-2"></i>计算结果
                    </h2>

                    <div id="resultContainer" class="space-y-6 min-h-[300px]">
                        <!-- 初始提示 -->
                        <div id="initialMessage" class="h-full flex flex-col items-center justify-center text-gray-500">
                            <i class="fa fa-lightbulb-o text-5xl mb-4 text-gray-300"></i>
                            <p class="text-center">请输入方程组系数并点击计算按钮</p>
                            <p class="text-sm mt-2">系统将自动求解并展示详细步骤</p>
                        </div>

                        <!-- 结果将在这里动态生成 -->
                        <div id="resultContent" class="hidden space-y-6">
                            <!-- 方程组展示 -->
                            <div class="bg-neutral p-4 rounded-lg">
                                <h3 class="font-semibold mb-2 text-gray-700">方程组：</h3>
                                <div id="equationDisplay" class="text-lg"></div>
                            </div>

                            <!-- 解的结果 -->
                            <div id="solutionResult" class="p-4 rounded-lg border-l-4 border-secondary bg-green-50"></div>

                            <!-- 解题步骤 -->
                            <div>
                                <h3 class="font-semibold mb-3 text-gray-700 flex items-center">
                                    <i class="fa fa-list-ol text-accent mr-2"></i>解题步骤：
                                </h3>
                                <div id="solutionSteps" class="space-y-3 pl-2"></div>
                            </div>
                        </div>

                        <!-- 错误信息 -->
                        <div id="errorMessage" class="hidden p-4 rounded-lg border-l-4 border-red-500 bg-red-50 text-red-600"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能说明 -->
        <div class="mt-10 card">
            <h2 class="text-xl font-bold text-dark mb-4 flex items-center">
                <i class="fa fa-info-circle text-primary mr-2"></i>功能说明
            </h2>
            <div class="grid md:grid-cols-3 gap-6 text-gray-600">
                <div class="flex flex-col">
                    <div class="text-primary text-lg mb-2"><i class="fa fa-bolt mr-1"></i> 快速求解</div>
                    <p class="text-sm">输入系数后一键计算，瞬间获得方程组的解，无需手动运算</p>
                </div>
                <div class="flex flex-col">
                    <div class="text-primary text-lg mb-2"><i class="fa fa-list-alt mr-1"></i> 步骤详解</div>
                    <p class="text-sm">展示完整解题步骤，包括消元、求解过程，帮助理解计算逻辑</p>
                </div>
                <div class="flex flex-col">
                    <div class="text-primary text-lg mb-2"><i class="fa fa-mobile mr-1"></i> 多端适配</div>
                    <p class="text-sm">适配电脑、平板和手机，随时随地使用，满足学习和作业需求</p>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="mt-12 text-center text-gray-500 text-sm pb-6">
            <p>二元一次方程计算器 &copy; 2023 | 一个实用的在线数学工具</p>
        </footer>
    </div>

    <script>
        // 处理表单提交
        document.getElementById('equationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            calculateEquation();
        });

        // 计算二元一次方程组
        function calculateEquation() {
            // 获取输入值
            const a = parseFloat(document.getElementById('a').value);
            const b = parseFloat(document.getElementById('b').value);
            const c = parseFloat(document.getElementById('c').value);
            const d = parseFloat(document.getElementById('d').value);
            const e = parseFloat(document.getElementById('e').value);
            const f = parseFloat(document.getElementById('f').value);

            // 显示结果区域，隐藏初始提示和错误信息
            document.getElementById('initialMessage').classList.add('hidden');
            document.getElementById('resultContent').classList.remove('hidden');
            document.getElementById('errorMessage').classList.add('hidden');

            // 显示方程组
            displayEquation(a, b, c, d, e, f);

            // 计算行列式（分母）
            const denominator = a * e - b * d;
            const steps = [];

            try {
                // 记录步骤：计算行列式（使用字符串拼接替换模板字符串）
                steps.push("1. 计算系数行列式 D = a×e - b×d = " + a + "×" + e + " - " + b + "×" + d + " = " + denominator);

                if (denominator === 0) {
                    // 行列式为0，检查分子
                    const numeratorX = c * e - b * f;
                    const numeratorY = a * f - c * d;

                    steps.push("2. 计算分子行列式 Dx = c×e - b×f = " + c + "×" + e + " - " + b + "×" + f + " = " + numeratorX);
                    steps.push("3. 计算分子行列式 Dy = a×f - c×d = " + a + "×" + f + " - " + c + "×" + d + " = " + numeratorY);

                    if (numeratorX === 0 && numeratorY === 0) {
                        // 无穷多解
                        steps.push("4. 由于 D = 0 且 Dx = 0, Dy = 0，方程组有无穷多解");
                        displayResult("方程组有无穷多解", steps);
                    } else {
                        // 无解
                        steps.push("4. 由于 D = 0 但 Dx ≠ 0 或 Dy ≠ 0，方程组无解");
                        displayResult("方程组无解", steps);
                    }
                } else {
                    // 有唯一解，使用克莱姆法则求解
                    const x = (c * e - b * f) / denominator;
                    const y = (a * f - c * d) / denominator;

                    steps.push("2. 计算分子行列式 Dx = c×e - b×f = " + c + "×" + e + " - " + b + "×" + f + " = " + (c*e - b*f));
                    steps.push("3. 计算分子行列式 Dy = a×f - c×d = " + a + "×" + f + " - " + c + "×" + d + " = " + (a*f - c*d));
                    steps.push("4. 求解 x = Dx/D = " + (c*e - b*f) + "/" + denominator + " = " + x.toFixed(6));
                    steps.push("5. 求解 y = Dy/D = " + (a*f - c*d) + "/" + denominator + " = " + y.toFixed(6));

                    // 验证解
                    const verify1 = (a * x + b * y).toFixed(6);
                    const verify2 = (d * x + e * y).toFixed(6);
                    steps.push("6. 验证：" + a + "×" + x.toFixed(6) + " + " + b + "×" + y.toFixed(6) + " = " + verify1 + "（应等于" + c + "）");
                    steps.push("7. 验证：" + d + "×" + x.toFixed(6) + " + " + e + "×" + y.toFixed(6) + " = " + verify2 + "（应等于" + f + "）");

                    displayResult("方程组的解为：x = " + x.toFixed(6) + "，y = " + y.toFixed(6), steps);
                }
            } catch (error) {
                // 显示错误信息（使用字符串拼接）
                document.getElementById('resultContent').classList.add('hidden');
                document.getElementById('errorMessage').classList.remove('hidden');
                document.getElementById('errorMessage').innerHTML =
                    "<i class='fa fa-exclamation-triangle mr-2'></i>计算出错：" + error.message;
            }
        }

        // 显示方程组
        function displayEquation(a, b, c, d, e, f) {
            const eq1 = formatEquation(a, b, c);
            const eq2 = formatEquation(d, e, f);
            document.getElementById('equationDisplay').innerHTML = eq1 + "<br>" + eq2;
        }

        // 格式化方程显示
        function formatEquation(a, b, c) {
            let terms = [];

            // 处理x项
            if (a !== 0) {
                terms.push(formatTerm(a, 'x'));
            }

            // 处理y项
            if (b !== 0) {
                // 如果不是第一项且系数为正，添加加号
                if (terms.length > 0 && b > 0) {
                    terms.push('+');
                }
                terms.push(formatTerm(b, 'y'));
            }

            // 如果没有x和y项
            if (terms.length === 0) {
                terms.push('0');
            }

            return terms.join(' ') + " = " + c;
        }

        // 格式化单项
        function formatTerm(coeff, variable) {
            if (coeff === 1) {
                return variable;
            } else if (coeff === -1) {
                return "-" + variable;
            } else {
                return coeff + variable;
            }
        }

        // 显示计算结果和步骤
        function displayResult(result, steps) {
            // 显示结果（使用字符串拼接）
            document.getElementById('solutionResult').innerHTML =
                "<div class='font-semibold text-lg'>" + result + "</div>";

            // 显示步骤
            const stepsContainer = document.getElementById('solutionSteps');
            stepsContainer.innerHTML = '';

            steps.forEach(function(step, index) {
                const stepElement = document.createElement('div');
                stepElement.className = 'step-item opacity-0 transform translate-y-2 transition-all duration-500';
                stepElement.style.transitionDelay = index * 100 + "ms";
                stepElement.innerHTML = "<span class='inline-block w-6 h-6 rounded-full bg-accent text-white text-center text-sm mr-2'>" + (index + 1) + "</span>" + step;
                stepsContainer.appendChild(stepElement);

                // 触发动画
                setTimeout(function() {
                    stepElement.classList.remove('opacity-0', 'translate-y-2');
                }, 50);
            });
        }

        // 为输入框添加动画效果
        const inputs = document.querySelectorAll('.equation-input');
        inputs.forEach(function(input) {
            input.addEventListener('focus', function() {
                input.parentElement.classList.add('scale-105');
                input.parentElement.style.transition = 'transform 0.3s ease';
            });

            input.addEventListener('blur', function() {
                input.parentElement.classList.remove('scale-105');
            });
        });
    </script>
</body>
</html>