From 39cf2c84d97576dc8a8c3c45921fcaddcab37237 Mon Sep 17 00:00:00 2001 From: jc <419690370@qq.com> Date: Tue, 18 Mar 2025 23:16:38 +0800 Subject: [PATCH] first commit --- app.py | 52 +++++++++++++++++++++++++++++++++++++++++++++++ public/index.html | 19 +++++++++++++++++ public/scripts.js | 24 ++++++++++++++++++++++ public/styles.css | 42 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 137 insertions(+) create mode 100644 app.py create mode 100644 public/index.html create mode 100644 public/scripts.js create mode 100644 public/styles.css diff --git a/app.py b/app.py new file mode 100644 index 0000000..3e24908 --- /dev/null +++ b/app.py @@ -0,0 +1,52 @@ +from flask import Flask, jsonify, send_from_directory + +app = Flask(__name__, static_folder="public", static_url_path="") + + +# 根路径返回 index.html +@app.route("/") +def serve_index(): + return send_from_directory(app.static_folder, "index.html") + + +# API 子路径,提供新手游泳注意事项数据 +@app.route("/api/swimming-tips") +def swimming_tips(): + tips = { + "message": "欢迎来到新手游泳注意事项", + "tips": [ + { + "title": "安全第一", + "description": "始终在指定区域内游泳,并遵守游泳池或海滩的规则。不要独自游泳,尤其是新手。" + }, + { + "title": "学习基本技能", + "description": "从基本的游泳姿势开始,例如自由泳和仰泳。练习漂浮和踩水,以增强信心。" + }, + { + "title": "正确呼吸", + "description": "在水下缓慢呼气,当头部露出水面时快速吸气。练习有节奏的呼吸,保持稳定的节奏。" + }, + { + "title": "使用浮力辅助工具", + "description": "可以使用浮板、泳圈或救生衣等辅助工具,帮助你保持浮力并专注于技术练习。" + }, + { + "title": "热身和拉伸", + "description": "游泳前一定要热身。拉伸手臂、腿部和背部,以防止受伤。良好的热身可以提高你的表现。" + }, + { + "title": "保持水分", + "description": "游泳前后及过程中要多喝水。即使你在水中,也可能会脱水。" + }, + { + "title": "听从身体的信号", + "description": "如果感到疲劳,请停下来休息。不要过度劳累,尤其是刚开始学习游泳时。" + } + ] + } + return jsonify(tips) + + +if __name__ == "__main__": + app.run(debug=True,port=80) \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..d968b22 --- /dev/null +++ b/public/index.html @@ -0,0 +1,19 @@ + + + + + + 新手游泳注意事项 + + + +
+

新手游泳注意事项

+
+

新手游泳的重要提示

+
+
+
+ + + \ No newline at end of file diff --git a/public/scripts.js b/public/scripts.js new file mode 100644 index 0000000..c4c4fa3 --- /dev/null +++ b/public/scripts.js @@ -0,0 +1,24 @@ +document.addEventListener("DOMContentLoaded", () => { + fetch("/api/swimming-tips") + .then(response => response.json()) + .then(data => { + const tipsList = document.getElementById("tips-list"); + data.tips.forEach(tip => { + const tipDiv = document.createElement("div"); + tipDiv.classList.add("tip"); + + const tipTitle = document.createElement("h3"); + tipTitle.textContent = tip.title; + tipDiv.appendChild(tipTitle); + + const tipDescription = document.createElement("p"); + tipDescription.textContent = tip.description; + tipDiv.appendChild(tipDescription); + + tipsList.appendChild(tipDiv); + }); + }) + .catch(error => { + console.error("获取数据时出错:", error); + }); +}); \ No newline at end of file diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..8e7792d --- /dev/null +++ b/public/styles.css @@ -0,0 +1,42 @@ +body { + font-family: "Arial", sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +.container { + max-width: 800px; + margin: 20px auto; + padding: 20px; + background: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; +} + +h1, h2 { + text-align: center; + color: #333; +} + +#tips-list { + margin-top: 20px; +} + +.tip { + background: #e9f2ff; + padding: 10px; + margin-bottom: 10px; + border-radius: 5px; +} + +.tip h3 { + margin: 0 0 5px; + color: #007bff; +} + +.tip p { + margin: 0; + font-size: 14px; + color: #555; +} \ No newline at end of file