static/index.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PayParse — Asisten Keuangan</title>
  <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
  <div class="app">
    <header class="app-header">
      <div class="brand">
        <span class="brand-dot"></span>
        <span class="brand-name">PayParse</span>
      </div>
      <div class="engine-badge" id="engineBadge">memuat…</div>
    </header>

    <main class="chat-shell">
      <div class="chat-window" id="chatWindow">
        <div class="msg msg-bot">
          <div class="bubble">
            Halo! Aku bisa bantu <b>transfer uang</b>, <b>beli pulsa</b>, atau
            <b>bayar listrik PLN</b>. Coba ketik misalnya:
            <em>"tf goceng ke budi"</em>.
          </div>
        </div>
      </div>

      <div class="quick-replies" id="quickReplies">
        <button class="chip" data-text="transfer 50 ribu ke Budi">transfer 50 ribu ke Budi</button>
        <button class="chip" data-text="beliin pulsa 25rb ke 081234567890">beli pulsa 25rb</button>
        <button class="chip" data-text="bayar listrik id pelanggan 4512345678">bayar listrik PLN</button>
      </div>

      <form class="composer" id="composerForm">
        <input
          type="text"
          id="messageInput"
          placeholder="Ketik pesan… misal: tf goceng ke budi"
          autocomplete="off"
        />
        <button type="submit" id="sendButton">Kirim</button>
        <button type="button" id="resetButton" title="Mulai percakapan baru">Reset</button>
      </form>
    </main>
  </div>

  <script src="/static/app.js"></script>
</body>
</html>