feat: 娣诲姞缃戦〉鐗堝簲鐢ㄥ拰鑳岃鎺掑簭鍔熻兘

- 鍒涘缓Flask缃戦〉搴旂敤妗嗘灦(web_app.py) - 娣诲姞鑳岃鎺掑簭鍔熻兘锛氱煡璇嗙偣璇嗗埆鍜岄殢鏈烘帓搴?- 瀹炵幇杞洏鎶借儗鍔熻兘(鍩轰簬SVG) - 鍒涘缓鍓嶇椤甸潰锛氶椤靛拰鑳岃鎺掑簭椤甸潰 - 娣诲姞鍝嶅簲寮廋SS鏍峰紡 - 鍒涘缓鍚姩鑴氭湰(start_web.py) - 鏇存柊requirements.txt娣诲姞Flask渚濊禆 - 娣诲姞缃戦〉鐗堜娇鐢ㄨ鏄?README_WEB.md)
2025-11-02 20:44:19 +08:00
parent 14521369b9
commit 8b5063a092
9 changed files with 1258 additions and 1 deletions
--- a/templates/recitation.html
+++ b/templates/recitation.html
@@ -0,0 +1,72 @@
+<!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="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/recitation.css') }}">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>🎯 背诵排序工具</h1>
+            <p class="subtitle">随机抽背，高效复习</p>
+        </header>
+
+        <nav class="nav">
+            <a href="/" class="nav-item">首页</a>
+            <a href="/recitation" class="nav-item active">背诵排序</a>
+        </nav>
+
+        <main class="main">
+            <div class="recitation-container">
+                <!-- 输入区域 -->
+                <div class="input-section">
+                    <h2>第一步：输入背诵内容</h2>
+                    <p class="hint">请粘贴包含知识点列表的文本（支持从表格、列表等形式中自动识别）</p>
+                    <textarea 
+                        id="textInput" 
+                        class="text-input" 
+                        placeholder="例如：&#10;第一章 西周&#10;夏商学校名称&#10;西周学在官府&#10;国学乡学&#10;六艺&#10;私学兴起的原因与意义&#10;稷下学宫..."
+                        rows="10"
+                    ></textarea>
+                    <button id="extractBtn" class="btn btn-primary">识别知识点</button>
+                </div>
+
+                <!-- 提取结果显示 -->
+                <div id="extractedSection" class="extracted-section" style="display: none;">
+                    <h2>第二步：确认知识点列表</h2>
+                    <p class="info">已识别到 <span id="itemCount">0</span> 个知识点</p>
+                    <div id="itemsList" class="items-list"></div>
+                    <button id="sortBtn" class="btn btn-primary">开始随机排序</button>
+                </div>
+
+                <!-- 转盘区域 -->
+                <div id="wheelSection" class="wheel-section" style="display: none;">
+                    <h2>第三步：转盘抽背</h2>
+                    <div class="wheel-container">
+                        <div id="wheel" class="wheel"></div>
+                        <div class="wheel-pointer"></div>
+                    </div>
+                    <button id="spinBtn" class="btn btn-spin">转动转盘</button>
+                    <div id="currentItem" class="current-item"></div>
+                </div>
+
+                <!-- 排序结果显示 -->
+                <div id="resultSection" class="result-section" style="display: none;">
+                    <h2>随机排序结果</h2>
+                    <div id="sortedList" class="sorted-list"></div>
+                    <button id="resetBtn" class="btn btn-secondary">重新开始</button>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer">
+            <p>&copy; 2024 个性化饮食推荐助手</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/recitation.js') }}"></script>
+</body>
+</html>