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

- 鍒涘缓Flask缃戦〉搴旂敤妗嗘灦(web_app.py)
- 娣诲姞鑳岃鎺掑簭鍔熻兘锛氱煡璇嗙偣璇嗗埆鍜岄殢鏈烘帓搴?- 瀹炵幇杞洏鎶借儗鍔熻兘(鍩轰簬SVG)
- 鍒涘缓鍓嶇椤甸潰锛氶椤靛拰鑳岃鎺掑簭椤甸潰
- 娣诲姞鍝嶅簲寮廋SS鏍峰紡
- 鍒涘缓鍚姩鑴氭湰(start_web.py)
- 鏇存柊requirements.txt娣诲姞Flask渚濊禆
- 娣诲姞缃戦〉鐗堜娇鐢ㄨ鏄?README_WEB.md)

static/css/recitation.css

@@ -0,0 +1,212 @@
+.recitation-container {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.input-section,
+.extracted-section,
+.wheel-section,
+.result-section {
+    margin-bottom: 40px;
+    padding: 30px;
+    background: #f8f9fa;
+    border-radius: 15px;
+}
+
+.input-section h2,
+.extracted-section h2,
+.wheel-section h2,
+.result-section h2 {
+    font-size: 1.8em;
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.hint,
+.info {
+    color: #666;
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.info span {
+    color: #667eea;
+    font-weight: bold;
+}
+
+.text-input {
+    width: 100%;
+    padding: 15px;
+    border: 2px solid #e9ecef;
+    border-radius: 10px;
+    font-size: 1em;
+    font-family: inherit;
+    resize: vertical;
+    margin-bottom: 20px;
+    transition: border-color 0.3s;
+}
+
+.text-input:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.items-list {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 15px;
+    background: white;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+
+.item-tag {
+    display: inline-block;
+    padding: 8px 15px;
+    margin: 5px;
+    background: #667eea;
+    color: white;
+    border-radius: 20px;
+    font-size: 0.9em;
+}
+
+/* 转盘样式 */
+.wheel-container {
+    position: relative;
+    width: 400px;
+    height: 400px;
+    margin: 40px auto;
+}
+
+.wheel {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    position: relative;
+    border: 8px solid #667eea;
+    background: white;
+    overflow: hidden;
+    transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+.wheel svg {
+    transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
+}
+
+.wheel-pointer {
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    border-top: 30px solid #667eea;
+    z-index: 10;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.btn-spin {
+    display: block;
+    margin: 30px auto;
+    padding: 15px 50px;
+    font-size: 1.2em;
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+    border: none;
+    border-radius: 30px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-spin:hover {
+    transform: scale(1.05);
+    box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
+}
+
+.btn-spin:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.current-item {
+    text-align: center;
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    margin-top: 20px;
+    font-size: 1.3em;
+    font-weight: bold;
+    color: #667eea;
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 排序结果列表 */
+.sorted-list {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    max-height: 500px;
+    overflow-y: auto;
+}
+
+.sorted-item {
+    padding: 15px;
+    margin: 10px 0;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border-left: 4px solid #667eea;
+    display: flex;
+    align-items: center;
+    transition: all 0.3s;
+}
+
+.sorted-item:hover {
+    background: #e9ecef;
+    transform: translateX(5px);
+}
+
+.sorted-item-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 35px;
+    height: 35px;
+    background: #667eea;
+    color: white;
+    border-radius: 50%;
+    font-weight: bold;
+    margin-right: 15px;
+    flex-shrink: 0;
+}
+
+.sorted-item-text {
+    flex: 1;
+    color: #333;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .wheel-container {
+        width: 300px;
+        height: 300px;
+    }
+
+    .wheel-item {
+        font-size: 0.7em;
+    }
+
+    .input-section,
+    .extracted-section,
+    .wheel-section,
+    .result-section {
+        padding: 20px;
+    }
+}
+