Lab 4: Kustomisasi Landing Page Hotspot & Status Dashboard Pelanggan

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hotspot Portal | Akses Internet Cepat</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white min-h-screen flex items-center justify-center p-4">
  <div class="max-w-md w-full bg-slate-800/80 backdrop-blur-md border border-slate-700 rounded-2xl p-6 shadow-2xl">
    <div class="text-center mb-6">
      <h1 class="text-2xl font-bold text-amber-400">NETSPEED FIBER</h1>
      <p class="text-xs text-slate-400">Silakan masukkan kode voucher atau beli online</p>
    </div>

    <!-- Tampilkan Error Jika Ada -->
    $(if error)
    <div class="mb-4 p-3 bg-rose-500/20 border border-rose-500 rounded text-rose-300 text-xs text-center font-medium">
      $(error)
    </div>
    $(endif)

    <form name="sendin" action="$(link-login-only)" method="post" class="space-y-4">
      <input type="hidden" name="dst" value="$(link-orig)" />
      <input type="hidden" name="popup" value="true" />

      <div>
        <label class="block text-xs uppercase tracking-wider text-slate-400 mb-1">Kode Voucher</label>
        <input type="text" name="username" value="$(username)" placeholder="Contoh: VCH-88219" 
               class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-amber-400 text-center font-mono tracking-widest uppercase" required />
      </div>

      <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-3 rounded-lg shadow-lg shadow-amber-500/20 transition duration-200">
        MASUK INTERNET
      </button>
    </form>

    <div class="mt-6 pt-6 border-t border-slate-700/60 text-center">
      <p class="text-xs text-slate-400 mb-3">Belum punya voucher?</p>
      <button onclick="openQrisModal()" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-semibold py-2.5 rounded-lg text-sm flex items-center justify-center gap-2 transition">
        <span>Beli Voucher via QRIS Instan</span>
      </button>
    </div>
  </div>
</body>
</html>

# Mengarahkan HTML directory hotspot profile
/ip hotspot profile set [find default=yes] html-directory=hotspot