From e4a05af6c37994f054babc26c8745af26165faf0 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Mon, 8 Sep 2025 12:00:31 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/XingJun/history_lesson.html | 157 +++++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 dsLightRag/XingJun/history_lesson.html
diff --git a/dsLightRag/XingJun/history_lesson.html b/dsLightRag/XingJun/history_lesson.html
new file mode 100644
index 00000000..8df62018
--- /dev/null
+++ b/dsLightRag/XingJun/history_lesson.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>历史战役模拟 - 锦州进攻动画</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+        .map-container {
+            position: relative;
+            width: 896px;
+            height: 1152px;
+            overflow: auto;
+            border: 1px solid #ccc;
+        }
+        #background-map {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        #attack-svg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .city-marker {
+            fill: red;
+            animation: pulse 2s infinite;
+        }
+        .city-label {
+            font-family: "SimSun", serif;
+            font-size: 18px;
+            font-weight: bold;
+            fill: darkred;
+        }
+        @keyframes pulse {
+            0% { r: 8; opacity: 1; }
+            50% { r: 12; opacity: 0.7; }
+            100% { r: 8; opacity: 1; }
+        }
+        .control-panel {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background-color: rgba(255,255,255,0.8);
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+        }
+        button {
+            padding: 8px 15px;
+            margin: 0 5px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div class="map-container">
+        <!-- 背景图 -->
+        <img id="background-map" src="c9fc2122-9324-4e2b-9bae-ced575575eca-1.png" alt="历史地图" width="896" height="1152">
+
+        <!-- SVG动画层 -->
+        <svg id="attack-svg" viewBox="0 0 896 1152">
+            <!-- 定义箭头标记 -->
+            <defs>
+                <marker id="arrowhead" markerWidth="10" markerHeight="7"
+                        refX="9" refY="3.5" orient="auto">
+                    <polygon points="0 0, 10 3.5, 0 7" fill="#ff0000" />
+                </marker>
+            </defs>
+
+            <!-- 锦州城市标记 -->
+            <circle cx="650" cy="420" r="8" class="city-marker" />
+            <text x="670" y="425" class="city-label">锦州</text>
+
+            <!-- 箭头1: 西北方向进攻 -->
+            <path id="arrow1" d="M 300,200 Q 450,280 550,350" fill="none" stroke="#ff0000"
+                  stroke-width="3" marker-end="url(#arrowhead)">
+                <animateMotion dur="8s" repeatCount="indefinite">
+                    <mpath href="#arrow1" />
+                </animateMotion>
+            </path>
+
+            <!-- 箭头2: 东北方向进攻 -->
+            <path id="arrow2" d="M 500,150 Q 550,250 600,350" fill="none" stroke="#0000ff"
+                  stroke-width="3" marker-end="url(#arrowhead)">
+                <animateMotion dur="6s" begin="1s" repeatCount="indefinite">
+                    <mpath href="#arrow2" />
+                </animateMotion>
+            </path>
+        </svg>
+
+        <!-- 控制面板 -->
+        <div class="control-panel">
+            <button onclick="startAnimation()">开始动画</button>
+            <button onclick="pauseAnimation()">暂停动画</button>
+            <button onclick="resetAnimation()">重置动画</button>
+        </div>
+    </div>
+
+    <script>
+        // 获取SVG元素和动画
+        const svg = document.getElementById('attack-svg');
+        const animations = svg.querySelectorAll('animateMotion');
+        const arrow1 = document.getElementById('arrow1');
+        const arrow2 = document.getElementById('arrow2');
+
+        // 初始化动画状态
+        animations.forEach(anim => {
+            anim.beginElement();
+        });
+
+        // 开始动画
+        function startAnimation() {
+            animations.forEach(anim => {
+                anim.beginElement();
+            });
+        }
+
+        // 暂停动画
+        function pauseAnimation() {
+            animations.forEach(anim => {
+                anim.pauseElement();
+            });
+        }
+
+        // 重置动画
+        function resetAnimation() {
+            animations.forEach(anim => {
+                anim.endElement();
+                setTimeout(() => anim.beginElement(), 100);
+            });
+        }
+
+        // 调整SVG大小以适应背景图
+        window.addEventListener('load', () => {
+            const background = document.getElementById('background-map');
+            const mapContainer = document.querySelector('.map-container');
+            svg.setAttribute('width', background.offsetWidth);
+            svg.setAttribute('height', background.offsetHeight);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
