<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数学函数自动作图工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏：函数输入区 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1>📐 函数作图</h1>
                <p class="subtitle">输入数学函数，自动绘制曲线</p>
            </div>

            <!-- 函数输入列表 -->
            <div class="function-list" id="functionList">
                <!-- 动态生成 -->
            </div>

            <!-- 添加函数按钮 -->
            <button class="btn-add" id="btnAddFunction">
                + 添加函数
            </button>

            <!-- 预设函数 -->
            <div class="presets">
                <h3>快速预设</h3>
                <div class="preset-grid">
                    <button class="preset-btn" data-fn="sin(x)">sin(x)</button>
                    <button class="preset-btn" data-fn="cos(x)">cos(x)</button>
                    <button class="preset-btn" data-fn="tan(x)">tan(x)</button>
                    <button class="preset-btn" data-fn="x^2">x²</button>
                    <button class="preset-btn" data-fn="x^3">x³</button>
                    <button class="preset-btn" data-fn="sqrt(x)">√x</button>
                    <button class="preset-btn" data-fn="log(x)">ln(x)</button>
                    <button class="preset-btn" data-fn="exp(x)">eˣ</button>
                    <button class="preset-btn" data-fn="abs(x)">|x|</button>
                    <button class="preset-btn" data-fn="1/x">1/x</button>
                    <button class="preset-btn" data-fn="sin(x)/x">sin(x)/x</button>
                    <button class="preset-btn" data-fn="x*sin(x)">x·sin(x)</button>
                </div>
            </div>

            <!-- 控制面板 -->
            <div class="controls">
                <h3>视图控制</h3>
                <div class="control-row">
                    <label>X 范围:</label>
                    <input type="number" id="xRange" value="10" min="1" max="100" step="1">
                </div>
                <div class="control-row">
                    <label>精度:</label>
                    <input type="range" id="precision" value="1" min="0.1" max="5" step="0.1">
                    <span id="precisionValue">1</span>
                </div>
                <div class="control-row">
                    <label>网格:</label>
                    <input type="checkbox" id="showGrid" checked>
                </div>
                <div class="control-row">
                    <label>坐标轴:</label>
                    <input type="checkbox" id="showAxes" checked>
                </div>
                <button class="btn-reset" id="btnReset">重置视图</button>
            </div>

            <!-- 帮助 -->
            <div class="help-section">
                <h3>使用说明</h3>
                <ul>
                    <li><b>支持的函数:</b> sin, cos, tan, asin, acos, atan, log, exp, sqrt, abs, pow</li>
                    <li><b>运算符:</b> + - * / ^ ( )</li>
                    <li><b>常量:</b> pi (π), e</li>
                    <li><b>操作:</b> 滚轮缩放，拖拽平移</li>
                    <li><b>示例:</b> 2*sin(x)+cos(2*x)</li>
                </ul>
            </div>
        </aside>

        <!-- 主画布区 -->
        <main class="canvas-area">
            <canvas id="graphCanvas"></canvas>
            <div class="canvas-info" id="canvasInfo">
                <span class="info-item">缩放: <b id="zoomLevel">100%</b></span>
                <span class="info-item">中心: (<b id="centerX">0</b>, <b id="centerY">0</b>)</span>
                <span class="info-item">鼠标: (<b id="mouseX">-</b>, <b id="mouseY">-</b>)</span>
            </div>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html>