yue
/
calc24game


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数学24点游戏</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>数学24点游戏</h1>
            <div class="module-switcher">
                <select id="module-select">
                    <option value="1">练习题</option>
                    <option value="2">计算器</option>
                    <option value="3">一星数据</option>
                    <option value="4">二星数据</option>
                    <option value="5">历史记录</option>
                </select>
            </div>
        </div>
        <!-- 练习题 -->
        <div class="module module-1 module-container" style="display: block;">
            <h2>练习题</h2>
            <div class="problem-types">
                <div class="problem-type-select-container">
                    <select id="problem-type-select" class="problem-type-select">
                        <option value="0" selected>随机题型</option>
                        <option value="A">推理未知数</option>
                        <option value="B">一题多解1</option>
                        <option value="C">一题多解2</option>
                        <option value="D">一星题目</option>
                        <option value="E">二星题目</option>
                    </select>
                </div>
                <button id="generate-problem-btn" class="generate-problem-btn">出题</button>
            </div>

            <div class="problem-container">
                <div class="problem-content" id="problem-content">
                    <p class="placeholder">请选择题目类型</p>
                </div>
                <div class="problem-answer" id="problem-answer" style="display: none;"></div>
                <button id="show-answer-btn" class="secondary-btn" style="display: none;">显示答案</button>
            </div>
        </div>

        <!-- 24点计算器 -->
        <div class="module module-2 module-container" style="display: none;">
            <h2>24点计算器</h2>

            <div class="input-container">
                <div class="description">
                    <p>输入4个1-13之间的数字，查询所有可能的24点解法</p>
                </div>
                <div class="number-inputs">
                    <div class="input-group">
                        <input type="number" id="num1" min="1" max="13" value="1">
                    </div>
                    <div class="input-group">
                        <input type="number" id="num2" min="1" max="13" value="2">
                    </div>
                    <div class="input-group">
                        <input type="number" id="num3" min="1" max="13" value="3">
                    </div>
                    <div class="input-group">
                        <input type="number" id="num4" min="1" max="13" value="4">
                    </div>
                </div>
                <button id="calculate-btn">计算解法</button>
            </div>

            <div class="results-container">
                <div class="results-header">
                    <h3>计算结果</h3>
                    <div class="stats" id="stats"></div>
                </div>

                <div class="solutions" id="solutions">
                    <p class="placeholder">请输入4个数字并点击"计算解法"按钮</p>
                </div>
            </div>
        </div>
        <!-- 一星数据 -->
        <div class="module module-3 module-container" style="display: none;">
            <h2>一星数据</h2>
            <div class="flag-search-container">
                <div class="search-input">
                    <label for="flag1-min">最小数字：</label>
                    <input type="number" id="flag1-min" min="0" max="13" value="0">
                </div>
                <button class="search-btn" id="flag1-search-btn">查询</button>
            </div>
            <div class="flag-data-container">
                <table class="flag-table" id="flag1-table">
                    <thead>
                        <tr>
                            <th class="number-cell">数字组合</th>
                            <th>解答表达式</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="2" class="placeholder">请点击查询按钮获取数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 二星数据 -->
        <div class="module module-4 module-container" style="display: none;">
            <h2>二星数据</h2>
            <div class="flag-search-container">
                <div class="search-input">
                    <label for="flag2-min">最小数字：</label>
                    <input type="number" id="flag2-min" min="0" max="13" value="0">
                </div>
                <button class="search-btn" id="flag2-search-btn">查询</button>
            </div>
            <div class="flag-data-container">
                <table class="flag-table" id="flag2-table">
                    <thead>
                        <tr>
                            <th class="number-cell">数字组合</th>
                            <th>解答表达式</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="2" class="placeholder">请点击查询按钮获取数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 历史记录 -->
        <div class="module module-5 module-container" style="display: none;">
            <h2>历史记录</h2>
            <div class="history-search-container">
                <div class="search-input">
                    <label for="history-type">题型</label>
                    <select id="history-type">
                        <option value="" selected>全部</option>
                        <option value="A">推理未知数</option>
                        <option value="B">一题多解1</option>
                        <option value="C">一题多解2</option>
                        <option value="D">一星题目</option>
                        <option value="E">二星题目</option>
                    </select>
                </div>
                <div class="search-input">
                    <label for="history-start-date">开始日期</label>
                    <input type="date" id="history-start-date">
                </div>
                <div class="search-input">
                    <label for="history-end-date">结束日期</label>
                    <input type="date" id="history-end-date">
                </div>
                <button class="search-btn" id="history-search-btn">查询</button>
            </div>
            <div class="history-data-container">
                <div id="history-container" class="history-cards-container">
                    <div class="placeholder">请点击查询按钮获取历史记录</div>
                </div>
                <button id="history-load-more" class="load-more-btn" style="display: none;">加载更多</button>
            </div>
        </div>
    </div>

    <!-- 使用模块化的JavaScript结构 -->
    <script type="module" src="/static/script.js"></script>
</body>

</html>