add balance

2026-02-02 05:55:48 +07:00
parent 6062b037b7
commit 1fc17991ae
7 changed files with 901 additions and 3 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -91,11 +91,43 @@
        font-size: 12px;
        color: #6b8aaa;
      }
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #1e3a5f;
+        padding-bottom: 10px;
+      }
+      .header h1 {
+        margin-bottom: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+      .balance {
+        background: #0d1f35;
+        border: 1px solid #1e3a5f;
+        padding: 10px 20px;
+        font-size: 14px;
+      }
+      .balance-label {
+        color: #6b8aaa;
+      }
+      .balance-value {
+        color: #7dcea0;
+        font-weight: bold;
+      }
    </style>
  </head>
  <body>
    <div class="container">
-      <h1>SMS OTP Gateway</h1>
+      <div class="header">
+        <h1>SMS OTP Gateway</h1>
+        <div class="balance">
+          <span class="balance-label">Balance: </span>
+          <span class="balance-value" id="balance">--</span>
+        </div>
+      </div>
      <div class="controls">
        <button onclick="loadMessages()">Refresh</button>
        <button class="danger" onclick="clearMessages()">Clear All</button>
@@ -154,8 +186,20 @@
        return div.innerHTML;
      }

+      async function loadBalance() {
+        try {
+          const res = await fetch(basePath + "/balance");
+          const data = await res.json();
+          document.getElementById("balance").textContent = data.balance;
+        } catch (err) {
+          document.getElementById("balance").textContent = "Error";
+        }
+      }
+
      loadMessages();
+      loadBalance();
      setInterval(loadMessages, 5000);
+      setInterval(loadBalance, 30000);
    </script>
  </body>
 </html>