<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <title>DBS UFF Generator</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background: #0f172a;

      color: white;

      padding: 20px;

      max-width: 900px;

      margin: auto;

    }


    h1 { color: #38bdf8; }


    .card {

      background: #1e293b;

      padding: 20px;

      border-radius: 12px;

      margin-bottom: 20px;

    }


    label {

      display: block;

      margin-top: 10px;

      font-size: 14px;

    }


    input, select, button, textarea {

      width: 100%;

      padding: 8px;

      border-radius: 6px;

      border: none;

      margin-top: 5px;

    }


    button {

      background: #38bdf8;

      color: black;

      font-weight: bold;

      cursor: pointer;

      margin-top: 15px;

    }


    textarea {

      height: 180px;

      font-family: monospace;

    }

  </style>

</head>

<body>


<h1>DBS UFF File Generator</h1>


<div class="card">

  <h2>Header</h2>

  <label>File Creation Date (DDMMYYYY)</label>

  <input id="date">

  <label>Organization ID</label>

  <input id="org">

  <label>Sender Name</label>

  <input id="sender">

</div>


<div class="card">

  <h2>Payment</h2>

  <label>Product Type</label>

  <select id="product">

    <option>ACT</option>

    <option>TT</option>

    <option>SAL</option>

    <option>BPP</option>

    <option>PPP</option>

  </select>


  <label>From Account</label>

  <input id="from">


  <label>Currency</label>

  <select id="currency">

    <option>SGD</option>

    <option>USD</option>

  </select>


  <label>Beneficiary Name</label>

  <input id="toName">


  <label>Beneficiary Account / PayNow</label>

  <input id="toAcc">


  <label>Amount</label>

  <input id="amount">


  <label>Payment Date</label>

  <input id="payDate">

</div>


<div class="card">

  <button onclick="generate()">Generate UFF</button>

  <textarea id="output" readonly></textarea>

  <button onclick="download()">Download File</button>

</div>


<script>

function generate() {

  const header = `HEADER,${date.value},${org.value},${sender.value}`;

  const payment = `PAYMENT,${product.value},${from.value},${currency.value},,,${payDate.value},,${toName.value},,,${toAcc.value},,${amount.value}`;

  const trailer = `TRAILER,1`;


  output.value = header + "\n" + payment + "\n" + trailer;

}


function download() {

  const blob = new Blob([output.value], { type: "text/plain" });

  const a = document.createElement("a");

  a.href = URL.createObjectURL(blob);

  a.download = "DBS_UFF.txt";

  a.click();

}

</script>


</body>

</html>