💳 Web pembayaran simpel

Ini adalah halaman web statis untuk memilih metode pembayaran (OVO, DANA, Gopay, atau QRIS) dengan efek Glassmorphism dan tampilan elegan berbasis Tailwind CSS.


---

📁 Struktur Folder

project-folder/
│
├── index.html
├── assets/
│   ├── bg.jpg          ← Gambar latar belakang
│   ├── ovo.png         ← Logo OVO
│   ├── dana.png        ← Logo DANA
│   ├── gopay.png       ← Logo Gopay
│   └── qris.png        ← Gambar QRIS
└── README.md


---

🎨 Cara Mengganti Background

1. Siapkan gambar baru dengan ukuran dan kualitas yang tinggi (HD).


2. Letakkan file gambar tersebut ke folder assets/.


3. Buka file index.html, cari bagian berikut di dalam <style>:



body {
  background-image: url('./assets/bg.jpg');
  ...
}

4. Ganti bg.jpg dengan nama file gambar baru kamu, misalnya:



background-image: url('./assets/background-baru.jpg');

> ✅ Tips: Gunakan rasio landscape (misal 1920x1080) untuk hasil terbaik dan tambahkan background-size: cover; agar tidak pecah.




---

💡 Cara Mengganti Nomor e-Wallet

1. Buka file index.html.


2. Cari bagian HTML sesuai e-wallet yang ingin kamu ubah. Contoh OVO:



<p class="text-sm">0812-7777-7777</p>
...
<button onclick="copyNumber('081234567890')">

3. Ubah nomor tampilan dan juga nomor di fungsi copyNumber('...').



> Pastikan keduanya sama agar nomor yang disalin sesuai dengan yang ditampilkan.




---

📷 Cara Mengganti QRIS

1. Siapkan gambar QRIS kamu (misalnya hasil dari aplikasi e-wallet).


2. Ganti file qris.png yang ada di folder assets/ dengan gambar baru (dengan nama sama).

Atau: Ubah nama file dan sesuaikan path di index.html:




<img src="./assets/qris.png" alt="QRIS Code" class="w-64 h-64 mx-auto">

Contoh jika gambar QR baru bernama myqris.png:

<img src="./assets/myqris.png" alt="QRIS Code" class="w-64 h-64 mx-auto">


---

📦 Library Digunakan

Tailwind CSS

Toastify JS – untuk notifikasi salin clipboard



---

✨ Fitur Tambahan (Opsional)

Loading screen saat halaman dimuat

Animasi muncul-tutup modal QRIS

Efek glassmorphism pada kartu pembayaran

Responsif untuk semua ukuran layar



---

🧑‍💻 Dibuat Oleh

> AP (Anggit Pangestu)
Silakan modifikasi untuk kebutuhan pribadi atau proyek lainnya.




---