first commit

3 months ago · 39cf2c84d9
4 changed files with 137 additions and 0 deletions
--- a/app.py
+++ 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)
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,19 @@
+<!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="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>新手游泳注意事项</h1>
+        <div id="tips-container">
+            <h2>新手游泳的重要提示</h2>
+            <div id="tips-list"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/public/scripts.js
+++ 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);
+        });
+});
--- a/public/styles.css
+++ 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;
+}