添加嵌入式卡片，还没想好怎么用

gradle.properties

@@ -6,7 +6,7 @@ minecraft_version=1.21.4
 yarn_mappings=1.21.4+build.8
 loader_version=0.16.10
 # Mod Properties
-mod_version=1.14.514.105
+mod_version=1.14.514.111
 maven_group=org.example1
 archives_base_name=playerOnlineTimeTrackerMod
 # Dependencies

src/main/java/com/example/playertime/ModConfig.java

@@ -0,0 +1,50 @@
+package com.example.playertime;
+
+import com.google.gson.*;
+import java.io.*;
+import java.nio.file.*;
+
+public class ModConfig {
+    private static final Gson GSON = new GsonBuilder().setPrettyPrinting().create();
+    private final Path configPath;
+    private int webPort = 60048;
+
+    public ModConfig(Path configDir) {
+        this.configPath = configDir.resolve("playertime-config.json");
+        loadConfig();
+    }
+
+    private void loadConfig() {
+        if (!Files.exists(configPath)) {
+            saveConfig();
+            return;
+        }
+
+        try (Reader reader = Files.newBufferedReader(configPath)) {
+            JsonObject json = JsonParser.parseReader(reader).getAsJsonObject();
+            if (json.has("webPort")) {
+                webPort = json.get("webPort").getAsInt();
+            }
+        } catch (Exception e) {
+            PlayerTimeMod.LOGGER.error("[在线时间] 加载配置失败", e);
+        }
+    }
+
+    private void saveConfig() {
+        JsonObject json = new JsonObject();
+        json.addProperty("webPort", webPort);
+
+        try {
+            Files.createDirectories(configPath.getParent());
+            try (Writer writer = Files.newBufferedWriter(configPath)) {
+                GSON.toJson(json, writer);
+            }
+        } catch (Exception e) {
+            PlayerTimeMod.LOGGER.error("[在线时间] 保存配置失败", e);
+        }
+    }
+
+    public int getWebPort() {
+        return webPort;
+    }
+}

src/main/java/com/example/playertime/PlayerTimeMod.java

@@ -3,6 +3,7 @@ package com.example.playertime;
 import net.fabricmc.api.ModInitializer;
 import net.fabricmc.fabric.api.event.lifecycle.v1.ServerLifecycleEvents;
 import net.fabricmc.fabric.api.networking.v1.ServerPlayConnectionEvents;
+import net.fabricmc.loader.api.FabricLoader;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
@@ -10,23 +11,26 @@ public class PlayerTimeMod implements ModInitializer {
     public static final Logger LOGGER = LoggerFactory.getLogger("PlayerTimeTracker");
     private static PlayerTimeTracker timeTracker;
     private static WebServer webServer;
+    private static ModConfig config;
 
     @Override
     public void onInitialize() {
+
+        config = new ModConfig(FabricLoader.getInstance().getConfigDir());
+
+
         try {
             LOGGER.info("[在线时间] 初始化玩家在线时长视奸MOD");
 
+            // 修改服务器启动部分
             ServerLifecycleEvents.SERVER_STARTING.register(server -> {
-                LOGGER.info("[在线时间] 服务器启动 - 初始化跟踪器");
                 timeTracker = new PlayerTimeTracker(server);
-
                 try {
-                    webServer = new WebServer(timeTracker, 60048);
+                    webServer = new WebServer(timeTracker, config.getWebPort(), server); // 传入 MinecraftServer
                     webServer.start();
-                    LOGGER.info("[在线时间] 在线时长Web服务器启动在端口60048");
+                    LOGGER.info("[在线时间] Web服务器在端口 " + config.getWebPort() + " 启动");
                 } catch (Exception e) {
-                    LOGGER.error("[在线时间] 无法启动 Web 服务器", e);
-                    throw new RuntimeException("[在线时间] Web 服务器启动失败", e);
+                    LOGGER.error("[在线时间] 无法启动Web服务器", e);
                 }
             });
 
@@ -58,6 +62,10 @@ public class PlayerTimeMod implements ModInitializer {
         }
     }
 
+    public static ModConfig getConfig() {
+        return config;
+    }
+
     public static PlayerTimeTracker getTimeTracker() {
         return timeTracker;
     }

src/main/java/com/example/playertime/PlayerTimeTracker.java

@@ -136,7 +136,7 @@ public class PlayerTimeTracker {
                 playerData.put(uuid, GSON.fromJson(entry.getValue(), PlayerTimeData.class));
             }
         } catch (Exception e) {
-            PlayerTimeMod.LOGGER.error("无法加载玩家在线时间数据", e);
+            PlayerTimeMod.LOGGER.error("[在线时间] 无法加载玩家在线时间数据", e);
         }
     }
 
@@ -149,7 +149,7 @@ public class PlayerTimeTracker {
         try (Writer writer = Files.newBufferedWriter(dataFile)) {
             GSON.toJson(root, writer);
         } catch (Exception e) {
-            PlayerTimeMod.LOGGER.error("无法保存玩家在线时间数据", e);
+            PlayerTimeMod.LOGGER.error("[在线时间] 无法保存玩家在线时间数据", e);
         }
     }
 
@@ -176,7 +176,7 @@ public class PlayerTimeTracker {
             try (Writer writer = Files.newBufferedWriter(dataFile)) {
                 GSON.toJson(root, writer);
             } catch (Exception e) {
-                PlayerTimeMod.LOGGER.error("无法保存" + uuid + "的在线时间数据", e);
+                PlayerTimeMod.LOGGER.error("[在线时间] 无法保存" + uuid + "的在线时间数据", e);
             }
         });
     }

src/main/java/com/example/playertime/WebServer.java

@@ -4,6 +4,7 @@ import com.google.gson.Gson;
 import com.sun.net.httpserver.HttpServer;
 import com.sun.net.httpserver.HttpHandler;
 import com.sun.net.httpserver.HttpExchange;
+import net.minecraft.server.MinecraftServer;
 
 import java.io.*;
 import java.net.InetSocketAddress;
@@ -13,10 +14,13 @@ import java.nio.file.*;
 import java.util.*;
 import java.util.concurrent.*;
 
+import static com.mojang.text2speech.Narrator.LOGGER;
+
 public class WebServer {
     private final HttpServer server;
     private final PlayerTimeTracker timeTracker;
     private final ExecutorService executor = Executors.newFixedThreadPool(4);
+    private final MinecraftServer minecraftServer;
     private static final Map<String, String> MIME_TYPES = Map.of(
             "html", "text/html",
             "css", "text/css",
@@ -24,7 +28,11 @@ public class WebServer {
             "json", "application/json"
     );
 
-    public WebServer(PlayerTimeTracker timeTracker, int port) throws IOException {
+    public WebServer(PlayerTimeTracker timeTracker, int port, MinecraftServer minecraftServer) throws IOException {
+        this.minecraftServer = minecraftServer;
+        if (port < 1 || port > 65535) {
+            throw new IllegalArgumentException("Invalid port number: " + port);
+        }
         this.timeTracker = timeTracker;
         this.server = HttpServer.create(new InetSocketAddress(port), 0);
         setupContexts();
@@ -45,7 +53,7 @@ public class WebServer {
                 String response = new Gson().toJson(stats);
                 sendResponse(exchange, 200, response.getBytes(), "application/json");
             } catch (Exception e) {
-                PlayerTimeMod.LOGGER.error("Failed to get stats", e);
+                PlayerTimeMod.LOGGER.error("[在线时间] 无法获得统计数据", e);
                 sendResponse(exchange, 500, "Internal Server Error");
             }
         });
@@ -80,11 +88,56 @@ public class WebServer {
 
                 sendResponse(exchange, 200, buffer.toByteArray(), contentType);
             } catch (Exception e) {
-                PlayerTimeMod.LOGGER.error("Failed to serve resource", e);
+                PlayerTimeMod.LOGGER.error("[在线时间] 无法提供资源", e);
                 sendResponse(exchange, 500, "Internal Server Error");
             }
         });
 
+        server.createContext("/embed", exchange -> {
+            try {
+                Map<String, String> stats = timeTracker.getWhitelistedPlayerStats();
+                int onlinePlayers = minecraftServer.getPlayerManager().getCurrentPlayerCount(); // 使用 minecraftServer
+
+                String html = """
+                        <!DOCTYPE html>
+                        <html>
+                        <head>
+                            <meta charset="UTF-8">
+                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                            <title>服务器状态卡片</title>
+                        </head>
+                        <body>
+                            <div class="server-card">
+                                <div class="card-header">
+                                    <h3>%s 服务器状态</h3>
+                                </div>
+                                <div class="card-body">
+                                    <div class="player-count">在线玩家: %d/%d</div>
+                                    <div class="player-list">
+                                        %s
+                                    </div>
+                                </div>
+                                <div class="card-footer">
+                                    <div class="refresh-info">实时更新，忘了几分钟</div>
+                                </div>
+                            </div>
+                        </body>
+                        </html>
+            """.formatted(
+                        minecraftServer.getServerMotd(), // 使用 minecraftServer
+                        onlinePlayers,
+                        minecraftServer.getPlayerManager().getMaxPlayerCount(),
+                        generatePlayerList(stats)
+                );
+
+                exchange.getResponseHeaders().add("Access-Control-Allow-Origin", "*");
+                sendResponse(exchange, 200, html.getBytes(StandardCharsets.UTF_8), "text/html");
+            } catch (Exception e) {
+                LOGGER.error("无法生成嵌入式卡片", e);
+                sendResponse(exchange, 500, Arrays.toString("Internal Server Error".getBytes(StandardCharsets.UTF_8)));
+            }
+        });
+
         server.setExecutor(executor);
     }
 
@@ -108,4 +161,18 @@ public class WebServer {
         server.stop(0);
         executor.shutdown();
     }
+
+    private String generatePlayerList(Map<String, String> stats) {
+        if (stats.isEmpty()) return "<p>暂无玩家数据</p>";
+
+        StringBuilder sb = new StringBuilder("<ul style='list-style-type: none; padding-left: 5px;'>");
+        stats.keySet().stream().limit(5).forEach(player -> {
+            sb.append("<li>• ").append(player).append("</li>");
+        });
+        if (stats.size() > 5) {
+            sb.append("<li>... 等 ").append(stats.size() - 5).append(" 位玩家</li>");
+        }
+        sb.append("</ul>");
+        return sb.toString();
+    }
 }

src/main/resources/assets/playertime/web/css/style.css

@@ -1,77 +1,218 @@
+:root {
+  --primary-color: #4361ee;
+  --primary-hover: #3a56d4;
+  --text-color: #2b2d42;
+  --bg-color: #f8f9fa;
+  --card-bg: #ffffff;
+  --border-color: #e9ecef;
+  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  --hover-bg: #f1f3f5;
+  --even-row: #f8f9fa;
+  --transition: all 0.3s ease;
+}
+
+[data-theme="dark"] {
+  --primary-color: #3252df;
+  --primary-hover: #2360cf;
+  --text-color: #f8f9fa;
+  --bg-color: #121212;
+  --card-bg: #1e1e1e;
+  --border-color: #333;
+  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  --hover-bg: #2d2d2d;
+  --even-row: #252525;
+}
+
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f5f5f5;
-    color: #333;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: var(--transition);
+  min-height: 100vh;
 }
 
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
 }
 
 h1 {
-    color: #2c3e50;
-    text-align: center;
-    margin-bottom: 30px;
+  color: var(--primary-color);
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 600;
 }
 
 .controls {
-    margin-bottom: 20px;
-    text-align: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.info-note {
+  margin: 0;
+  color: var(--text-color);
+  opacity: 0.8;
+  font-size: 0.9rem;
 }
 
 button {
-    background-color: #3498db;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: background-color 0.3s;
+  transition: var(--transition);
+  cursor: pointer;
+  border: none;
+  border-radius: 8px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-button:hover {
-    background-color: #2980b9;
+.refresh-btn {
+  background-color: var(--primary-color);
+  color: white;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+}
+
+.refresh-btn:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.refresh-btn:active {
+  transform: translateY(0);
+}
+
+.refresh-btn i {
+  transition: transform 0.5s ease;
+}
+
+.refresh-btn.loading i {
+  transform: rotate(360deg);
+}
+
+.theme-toggle {
+  background: transparent;
+  color: var(--text-color);
+  font-size: 1.25rem;
+  padding: 0.5rem;
+  position: relative;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-toggle:hover {
+  background-color: var(--hover-bg);
+}
+
+.theme-toggle i {
+  position: absolute;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.theme-toggle .fa-moon {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+[data-theme="dark"] .theme-toggle .fa-moon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+[data-theme="dark"] .theme-toggle .fa-sun {
+  opacity: 0;
+  transform: scale(0.8);
 }
 
 .stats-container {
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
+  background-color: var(--card-bg);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  transition: var(--transition);
 }
 
 table {
-    width: 100%;
-    border-collapse: collapse;
+  width: 100%;
+  border-collapse: collapse;
 }
 
 th, td {
-    padding: 12px 15px;
-    text-align: left;
-    border-bottom: 1px solid #ddd;
+  padding: 1rem 1.5rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+  transition: var(--transition);
 }
 
 th {
-    background-color: #3498db;
-    color: white;
+  background-color: var(--primary-color);
+  color: white;
+  font-weight: 500;
+}
+
+tr {
+  transition: var(--transition);
 }
 
 tr:hover {
-    background-color: #f1f1f1;
+  background-color: var(--hover-bg);
 }
 
 tr:nth-child(even) {
-    background-color: #f9f9f9;
+  background-color: var(--even-row);
 }
 
+/* Loading animation */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+tbody tr {
+  animation: fadeIn 0.3s ease forwards;
+  opacity: 0;
+}
+
+tbody tr:nth-child(1) { animation-delay: 0.05s; }
+tbody tr:nth-child(2) { animation-delay: 0.1s; }
+tbody tr:nth-child(3) { animation-delay: 0.15s; }
+tbody tr:nth-child(4) { animation-delay: 0.2s; }
+tbody tr:nth-child(5) { animation-delay: 0.25s; }
+tbody tr:nth-child(6) { animation-delay: 0.3s; }
+tbody tr:nth-child(7) { animation-delay: 0.35s; }
+tbody tr:nth-child(8) { animation-delay: 0.4s; }
+tbody tr:nth-child(9) { animation-delay: 0.45s; }
+tbody tr:nth-child(10) { animation-delay: 0.5s; }
+
 @media (max-width: 768px) {
-    table {
-        display: block;
-        overflow-x: auto;
-    }
+  .container {
+    padding: 1.5rem 1rem;
+  }
+
+  th, td {
+    padding: 0.75rem 1rem;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+  }
 }

src/main/resources/assets/playertime/web/index.html

@@ -5,12 +5,75 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>[在线时间] 玩家在线时间</title>
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!--  以下css是嵌入代码，可以抄-->
+  <style>
+    .draggable-card {
+        position: fixed;
+        top: 20px;
+        left: 20px;
+        width: 300px;
+        height: 350px;
+        border-radius: 12px;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+        overflow: hidden;
+        resize: both;
+        z-index: 1000;
+        background: white;
+    }
+
+    .drag-handle {
+        background: linear-gradient(135deg, #1e88e5, #0d47a1);
+        color: white;
+        padding: 10px 16px;
+        cursor: move;
+        font-weight: bold;
+        user-select: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .close-btn {
+        background: rgba(255, 255, 255, 0.2);
+        border: none;
+        color: white;
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        transition: background 0.2s;
+    }
+
+    .close-btn:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+
+    .draggable-card iframe {
+        width: 100%;
+        height: calc(100% - 40px);
+        border: none;
+    }
+  </style>
 </head>
 <body>
 <div class="container">
-  <h1>KSE玩家在线时间统计</h1>
+  <div class="header">
+    <h1>玩家在线时间统计</h1>
+    <button id="theme-toggle" class="theme-toggle" aria-label="切换主题">
+      <i class="fas fa-moon"></i>
+      <i class="fas fa-sun"></i>
+    </button>
+  </div>
   <div class="controls">
-    <button id="refresh-btn">刷新数据</button>
+    <button id="refresh-btn" class="refresh-btn">
+      <i class="fas fa-sync-alt"></i>
+      <span>刷新数据</span>
+    </button>
     <p class="info-note">仅跟踪和显示列入白名单的玩家</p>
   </div>
   <div class="stats-container">
@@ -28,5 +91,51 @@
   </div>
 </div>
 <script src="js/app.js"></script>
+
+<!--卡片本体-->
+<div class="draggable-card" id="serverCard">
+  <div class="drag-handle">
+    <span>嵌入卡片代码，f12可以抄</span>
+    <button class="close-btn" id="closeBtn">×</button>
+  </div>
+  <iframe src="http://localhost:60048/embed" frameborder="0"></iframe>
+</div>
+
+<!--卡片相关js脚本-->
+<script>
+  const card = document.getElementById('serverCard');
+  const handle = card.querySelector('.drag-handle');
+  const closeBtn = document.getElementById('closeBtn');
+
+  let isDragging = false;
+  let offsetX, offsetY;
+
+  handle.addEventListener('mousedown', (e) => {
+      if (e.target === closeBtn) return;
+
+      isDragging = true;
+      offsetX = e.clientX - card.getBoundingClientRect().left;
+      offsetY = e.clientY - card.getBoundingClientRect().top;
+      card.style.cursor = 'grabbing';
+  });
+
+  document.addEventListener('mousemove', (e) => {
+      if (!isDragging) return;
+      card.style.left = (e.clientX - offsetX) + 'px';
+      card.style.top = (e.clientY - offsetY) + 'px';
+  });
+
+  document.addEventListener('mouseup', () => {
+      isDragging = false;
+      card.style.cursor = '';
+  });
+
+  closeBtn.addEventListener('click', () => {
+      card.style.display = 'none';
+
+      // setTimeout(() => { card.style.display = 'block'; }, 2000);  // 关闭后超时重新显示，这里暂时放着，看需求
+  });
+</script>
+
 </body>
 </html>

src/main/resources/assets/playertime/web/js/app.js

@@ -1,14 +1,30 @@
 document.addEventListener('DOMContentLoaded', function() {
     const refreshBtn = document.getElementById('refresh-btn');
+    const themeToggle = document.getElementById('theme-toggle');
     const statsTable = document.getElementById('stats-table').getElementsByTagName('tbody')[0];
 
-    // 初始加载数据
+    // 初始化主题
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+
+    // 主题切换功能
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+    });
+
     loadStats();
 
-    // 刷新按钮点击事件
-    refreshBtn.addEventListener('click', loadStats);
+    refreshBtn.addEventListener('click', function() {
+        refreshBtn.classList.add('loading');
+        loadStats();
+        setTimeout(() => {
+            refreshBtn.classList.remove('loading');
+        }, 1000);
+    });
 
-    // 加载统计数据
     function loadStats() {
         fetch('/api/stats')
             .then(response => response.json())
@@ -16,46 +32,55 @@ document.addEventListener('DOMContentLoaded', function() {
                 updateTable(data);
             })
             .catch(error => {
-                console.error('Error fetching stats:', error);
-                alert('Failed to load player stats. Check console for details.');
+                console.error('获取统计信息时出错：', error);
+                showError('未能加载玩家统计信息。 检查控制台以获取详细信息');
             });
     }
 
-    // 更新表格数据
     function updateTable(statsData) {
-        const statsTable = document.getElementById('stats-table').getElementsByTagName('tbody')[0];
         statsTable.innerHTML = '';
 
-        // 新数据格式是 { "玩家名": "统计信息", ... }
         Object.entries(statsData).forEach(([playerName, statString]) => {
             const row = statsTable.insertRow();
 
-            // 玩家名列
             const nameCell = row.insertCell(0);
             nameCell.textContent = playerName;
 
-            // 解析统计信息
             const stats = {};
             statString.split(" | ").forEach(part => {
                 const [label, value] = part.split(": ");
                 stats[label.trim()] = value;
             });
 
-            // 总时长列
             const totalCell = row.insertCell(1);
             totalCell.textContent = stats["总时长"];
 
-            // 30天列
             const thirtyCell = row.insertCell(2);
             thirtyCell.textContent = stats["30天"];
 
-            // 7天列
             const sevenCell = row.insertCell(3);
             sevenCell.textContent = stats["7天"];
         });
     }
 
-    // 辅助函数：将"Xh Ym"格式的时间转换为分钟数
+    function showError(message) {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'error-message';
+        errorEl.textContent = message;
+        document.body.appendChild(errorEl);
+
+        setTimeout(() => {
+            errorEl.classList.add('show');
+        }, 10);
+
+        setTimeout(() => {
+            errorEl.classList.remove('show');
+            setTimeout(() => {
+                document.body.removeChild(errorEl);
+            }, 300);
+        }, 5000);
+    }
+
     function parseTime(timeStr) {
         const [hPart, mPart] = timeStr.split(' ');
         const hours = parseInt(hPart.replace('h', ''));

src/main/resources/config/playertime-default-config.json

@@ -0,0 +1,3 @@
+{
+  "webPort": 60048
+}

关于外链卡片代码看这.TXT

@@ -0,0 +1,108 @@
+如何给其他网站添加在线玩家嵌入式卡片
+
+以下是css，放到head里面，也可以搞个单独的css文件放：
+<style>
+        .draggable-card {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            width: 300px;
+            height: 350px;
+            border-radius: 12px;
+            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+            overflow: hidden;
+            resize: both;
+            z-index: 1000;
+            background: white;
+        }
+
+        .drag-handle {
+            background: linear-gradient(135deg, #1e88e5, #0d47a1);
+            color: white;
+            padding: 10px 16px;
+            cursor: move;
+            font-weight: bold;
+            user-select: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .close-btn {
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            transition: background 0.2s;
+        }
+
+        .close-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .draggable-card iframe {
+            width: 100%;
+            height: calc(100% - 40px);
+            border: none;
+        }
+</style>
+
+
+
+
+
+以下是卡片本体，直接塞进html里面：
+<div class="draggable-card" id="serverCard">
+        <div class="drag-handle">
+            <span>服务器状态 (可拖动)</span>
+            <button class="close-btn" id="closeBtn">×</button>
+        </div>
+        <iframe src="http://localhost:60048/embed" frameborder="0"></iframe>
+</div>
+
+
+
+
+
+以下是js脚本，可以跟着放script里面，也可以单独放个js文件：
+<script>
+        const card = document.getElementById('serverCard');
+        const handle = card.querySelector('.drag-handle');
+        const closeBtn = document.getElementById('closeBtn');
+
+        let isDragging = false;
+        let offsetX, offsetY;
+
+        handle.addEventListener('mousedown', (e) => {
+            if (e.target === closeBtn) return;
+
+            isDragging = true;
+            offsetX = e.clientX - card.getBoundingClientRect().left;
+            offsetY = e.clientY - card.getBoundingClientRect().top;
+            card.style.cursor = 'grabbing';
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            card.style.left = (e.clientX - offsetX) + 'px';
+            card.style.top = (e.clientY - offsetY) + 'px';
+        });
+
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+            card.style.cursor = '';
+        });
+
+        closeBtn.addEventListener('click', () => {
+            card.style.display = 'none';
+
+            // setTimeout(() => { card.style.display = 'block'; }, 2000);  // 关闭后超时重新显示，这里暂时放着，看需求
+        });
+</script>