LoRaMonitorProject/backend/templates/index.html

<h2 style="font-family:sans-serif;">📡 实时数据日志</h2>

<button onclick="clearLog()" style="
    margin-bottom: 10px;
    padding: 6px 16px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
">
  🧹 清空日志
</button>

<pre id="logBox" style="
    height: 600px;
    overflow: auto;
    background: #111;
    color: #0f0;
    padding: 16px;
    font-size: 18px;
    font-family: monospace;
    border-radius: 8px;
    box-shadow: 0 0 10px #0f0;
"></pre>

<script>
  const logBox = document.getElementById("logBox");
  const ws = new WebSocket("ws://" + location.host + "/ws");

  ws.onmessage = (event) => {
    logBox.textContent += event.data + "\n";
    logBox.scrollTop = logBox.scrollHeight;
  };

  function clearLog() {
    logBox.textContent = "";
  }
</script>