| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BCA Mobile Banking</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f5f5f5; |
| } |
| |
| .bca-blue { |
| background-color: #0061a3; |
| } |
| |
| .bca-dark-blue { |
| background-color: #003b6e; |
| } |
| |
| .card-shadow { |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| .menu-item:hover { |
| transform: translateY(-3px); |
| transition: all 0.2s ease; |
| } |
| |
| .notification-dot { |
| position: absolute; |
| top: -2px; |
| right: -2px; |
| width: 12px; |
| height: 12px; |
| background-color: #ff4757; |
| border-radius: 50%; |
| border: 2px solid white; |
| } |
| |
| .bottom-nav-icon { |
| font-size: 22px; |
| margin-bottom: 4px; |
| } |
| |
| .active-nav { |
| color: #0061a3; |
| position: relative; |
| } |
| |
| .active-nav:after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 6px; |
| height: 6px; |
| background-color: #0061a3; |
| border-radius: 50%; |
| } |
| |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .qr-button { |
| animation: pulse 2s infinite; |
| } |
| |
| |
| .loader { |
| border: 3px solid #f3f3f3; |
| border-top: 3px solid #0061a3; |
| border-radius: 50%; |
| width: 20px; |
| height: 20px; |
| animation: spin 1s linear infinite; |
| display: inline-block; |
| vertical-align: middle; |
| margin-left: 8px; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| |
| .page { |
| display: none; |
| } |
| |
| .page.active { |
| display: block; |
| animation: fadeIn 0.3s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| |
| .form-input { |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| padding: 12px 16px; |
| width: 100%; |
| transition: all 0.2s ease; |
| } |
| |
| .form-input:focus { |
| border-color: #0061a3; |
| box-shadow: 0 0 0 3px rgba(0, 97, 163, 0.1); |
| } |
| |
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 4px; |
| height: 4px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #0061a3; |
| border-radius: 4px; |
| } |
| |
| |
| .fab { |
| position: fixed; |
| bottom: 80px; |
| right: 20px; |
| width: 56px; |
| height: 56px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #0061a3 0%, #003b6e 100%); |
| color: white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 12px rgba(0, 97, 163, 0.3); |
| z-index: 10; |
| } |
| </style> |
| </head> |
| <body class="text-gray-800"> |
| <div class="max-w-md mx-auto bg-white min-h-screen relative overflow-hidden pb-16"> |
| |
| <div class="page active" id="homePage"> |
| |
| <div class="bca-blue text-white px-6 pt-12 pb-8 rounded-b-3xl relative"> |
| <div class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <img src="https://www.bca.co.id/-/media/Feature/Header/logo-my-bca.png" alt="myBCA Logo" class="h-8"> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <i class="fas fa-bell text-xl cursor-pointer" id="notificationBtn"></i> |
| <div class="notification-dot" id="notificationDot"></div> |
| </div> |
| <i class="fas fa-qrcode text-xl cursor-pointer qr-button" id="qrScannerBtn"></i> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <p class="text-sm opacity-80">Selamat datang</p> |
| <h2 class="text-xl font-bold" id="userName">Yuan Nugroho</h2> |
| <div class="flex items-center mt-1"> |
| <span class="text-xs opacity-80" id="userEmail">ycdev@outlook.co.id</span> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow"> |
| <div class="flex justify-between items-start mb-2"> |
| <div> |
| <p class="text-gray-500 text-sm mb-1">Saldo Anda</p> |
| <h3 class="text-2xl font-bold" id="balanceAmount">Rp8.934.461.590</h3> |
| </div> |
| <button class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-sm font-medium" id="toggleBalance"> |
| <i class="fas fa-eye mr-1"></i> Lihat |
| </button> |
| </div> |
| <div class="flex justify-between mt-4"> |
| <div class="text-center cursor-pointer" id="transferBtn"> |
| <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1"> |
| <i class="fas fa-paper-plane"></i> |
| </div> |
| <p class="text-xs">Transfer</p> |
| </div> |
| <div class="text-center cursor-pointer" id="paymentBtn"> |
| <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1"> |
| <i class="fas fa-receipt"></i> |
| </div> |
| <p class="text-xs">Bayar</p> |
| </div> |
| <div class="text-center cursor-pointer" id="pulsaBtn"> |
| <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1"> |
| <i class="fas fa-mobile-screen-button"></i> |
| </div> |
| <p class="text-xs">Pulsa</p> |
| </div> |
| <div class="text-center cursor-pointer" id="moreBtn"> |
| <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-1"> |
| <i class="fas fa-grid-2"></i> |
| </div> |
| <p class="text-xs">Lainnya</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="px-6 py-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="font-bold text-lg">Fitur Unggulan</h3> |
| <a href="#" class="text-blue-600 text-sm font-medium" id="viewAllFeatures">Lihat Semua <i class="fas fa-chevron-right ml-1 text-xs"></i></a> |
| </div> |
| |
| <div class="grid grid-cols-4 gap-4 mb-8"> |
| <div class="menu-item text-center cursor-pointer" id="cardFeature"> |
| <div class="bg-blue-50 text-blue-600 w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-credit-card-front text-xl"></i> |
| </div> |
| <p class="text-xs font-medium">Kartu</p> |
| </div> |
| <div class="menu-item text-center cursor-pointer" id="savingFeature"> |
| <div class="bg-blue-50 text-blue-600 w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-sack-dollar text-xl"></i> |
| </div> |
| <p class="text-xs font-medium">Tabungan</p> |
| </div> |
| <div class="menu-item text-center cursor-pointer" id="investmentFeature"> |
| <div class="bg-blue-50 text-blue-600 w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-chart-line-up text-xl"></i> |
| </div> |
| <p class="text-xs font-medium">Investasi</p> |
| </div> |
| <div class="menu-item text-center cursor-pointer" id="travelFeature"> |
| <div class="bg-blue-50 text-blue-600 w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-passport text-xl"></i> |
| </div> |
| <p class="text-xs font-medium">Travel</p> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h4 class="font-bold">Transaksi Terakhir</h4> |
| <a href="#" class="text-blue-600 text-sm" id="viewAllTransactions">Lihat Semua <i class="fas fa-chevron-right ml-1 text-xs"></i></a> |
| </div> |
| |
| <div class="space-y-4" id="transactionList"> |
| <div class="flex items-center"> |
| <div class="bg-green-100 text-green-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-arrow-down-long"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-sm">Transfer dari PT. ABC</p> |
| <p class="text-gray-500 text-xs">12 Mar 2025 • 09:45</p> |
| </div> |
| <div class="text-green-600 font-medium">+Rp250.000</div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="bg-red-100 text-red-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-bag-shopping"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-sm">Belanja Online</p> |
| <p class="text-gray-500 text-xs">10 Mar 2025 • 14:20</p> |
| </div> |
| <div class="text-red-600 font-medium">-Rp12.750</div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-money-bill-transfer"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-sm">Transfer ke BNI</p> |
| <p class="text-gray-500 text-xs">08 Mar 2025 • 17:30</p> |
| </div> |
| <div class="text-red-600 font-medium">-Rp500.000</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-blue-50 rounded-xl p-4 card-shadow mb-6 cursor-pointer" id="securityFeature"> |
| <div class="flex items-center"> |
| <div class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-shield-halved"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">Keamanan Akun</p> |
| <p class="text-gray-500 text-xs">Aktifkan fitur keamanan tambahan</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow cursor-pointer" id="helpFeature"> |
| <div class="flex items-center"> |
| <div class="bg-green-100 text-green-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-headset"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">Butuh Bantuan?</p> |
| <p class="text-gray-500 text-xs">Hubungi BCA Virtual Assistant</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="fab cursor-pointer" id="quickTransferBtn"> |
| <i class="fas fa-paper-plane text-xl"></i> |
| </div> |
| </div> |
| |
| |
| <div class="page" id="historyPage"> |
| <div class="bca-blue text-white px-6 pt-12 pb-8 rounded-b-3xl relative"> |
| <div class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <i class="fas fa-arrow-left text-xl cursor-pointer mr-4" id="backFromHistory"></i> |
| <h2 class="text-xl font-bold">Riwayat Transaksi</h2> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <i class="fas fa-search text-xl cursor-pointer" id="searchHistory"></i> |
| <i class="fas fa-filter text-xl cursor-pointer" id="filterHistory"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-6"> |
| <div class="flex items-center space-x-2 mb-4 overflow-x-auto custom-scrollbar pb-2"> |
| <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap">Semua</button> |
| <button class="bg-white text-gray-600 border border-gray-300 px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap">Masuk</button> |
| <button class="bg-white text-gray-600 border border-gray-300 px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap">Keluar</button> |
| <button class="bg-white text-gray-600 border border-gray-300 px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap">Hari Ini</button> |
| <button class="bg-white text-gray-600 border border-gray-300 px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap">Minggu Ini</button> |
| <button class="bg-white text-gray-600 border border-gray-300 px-3 py-1 rounded-full text-sm font-medium whitespace-nowrap">Bulan Ini</button> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h4 class="font-bold">Hari Ini</h4> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <div class="bg-green-100 text-green-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-arrow-down-long"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-sm">Transfer dari PT. ABC</p> |
| <p class="text-gray-500 text-xs">12 Mar 2025 • 09:45</p> |
| </div> |
| <div class="text-green-600 font-medium">+Rp250.000</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h4 class="font-bold">Kemarin</h4> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <div class="bg-red-100 text-red-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-bag-shopping"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-sm">Belanja Online</p> |
| <p class="text-gray-500 text-xs">11 Mar 2025 • 14:20</p> |
| </div> |
| <div class="text-red-600 font-medium">-Rp12.750</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow"> |
| <div class="flex justify-between items-center mb-4"> |
| <h4 class="font-bold">Minggu Ini</h4> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-money-bill-transfer"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-sm">Transfer ke BNI</p> |
| <p class="text-gray-500 text-xs">08 Mar 2025 • 17:30</p> |
| </div> |
| <div class="text-red-600 font-medium">-Rp500.000</div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="bg-purple-100 text-purple-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-sm">Pembayaran Listrik</p> |
| <p class="text-gray-500 text-xs">07 Mar 2025 • 10:15</p> |
| </div> |
| <div class="text-red-600 font-medium">-Rp1.250.000</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="page" id="accountPage"> |
| <div class="bca-blue text-white px-6 pt-12 pb-8 rounded-b-3xl relative"> |
| <div class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <i class="fas fa-arrow-left text-xl cursor-pointer mr-4" id="backFromAccount"></i> |
| <h2 class="text-xl font-bold">Akun Saya</h2> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <i class="fas fa-cog text-xl cursor-pointer" id="settingsBtn"></i> |
| </div> |
| </div> |
| |
| <div class="flex items-center mb-6"> |
| <div class="bg-white w-16 h-16 rounded-full flex items-center justify-center text-blue-600 text-2xl font-bold mr-4"> |
| YN |
| </div> |
| <div> |
| <h3 class="font-bold text-lg" id="accountUserName">Yuan Nugroho</h3> |
| <p class="text-sm opacity-80" id="accountUserEmail">ycdev@outlook.co.id</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-6"> |
| <div class="bg-white rounded-xl p-4 card-shadow mb-6"> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between cursor-pointer" id="profileMenu"> |
| <div class="flex items-center"> |
| <div class="bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-user"></i> |
| </div> |
| <p class="font-medium text-sm">Profil Saya</p> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| |
| <div class="flex items-center justify-between cursor-pointer" id="securityMenu"> |
| <div class="flex items-center"> |
| <div class="bg-green-100 text-green-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-shield-halved"></i> |
| </div> |
| <p class="font-medium text-sm">Keamanan</p> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| |
| <div class="flex items-center justify-between cursor-pointer" id="notificationMenu"> |
| <div class="flex items-center"> |
| <div class="bg-yellow-100 text-yellow-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-bell"></i> |
| </div> |
| <p class="font-medium text-sm">Notifikasi</p> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow mb-6"> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between cursor-pointer" id="helpMenu"> |
| <div class="flex items-center"> |
| <div class="bg-purple-100 text-purple-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-headset"></i> |
| </div> |
| <p class="font-medium text-sm">Bantuan</p> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| |
| <div class="flex items-center justify-between cursor-pointer" id="settingsMenu"> |
| <div class="flex items-center"> |
| <div class="bg-gray-100 text-gray-600 w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-cog"></i> |
| </div> |
| <p class="font-medium text-sm">Pengaturan</p> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| <button class="w-full bg-red-50 text-red-600 py-3 rounded-xl font-medium" id="logoutBtn"> |
| Keluar |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="page" id="notificationPage"> |
| <div class="bca-blue text-white px-6 pt-12 pb-8 rounded-b-3xl relative"> |
| <div class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <i class="fas fa-arrow-left text-xl cursor-pointer mr-4" id="backFromNotification"></i> |
| <h2 class="text-xl font-bold">Notifikasi</h2> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <i class="fas fa-check text-xl cursor-pointer" id="markAllRead"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-6"> |
| <div class="bg-white rounded-xl p-4 card-shadow"> |
| <div class="space-y-3"> |
| <div class="border-b pb-3"> |
| <p class="font-medium text-sm">Transaksi berhasil</p> |
| <p class="text-gray-500 text-xs">Transfer ke BNI sebesar Rp500.000 berhasil</p> |
| <p class="text-gray-400 text-xs mt-1">08 Mar 2025 • 17:30</p> |
| </div> |
| <div class="border-b pb-3"> |
| <p class="font-medium text-sm">Pembayaran tagihan</p> |
| <p class="text-gray-500 text-xs">Pembayaran PLN sebesar Rp250.000 berhasil</p> |
| <p class="text-gray-400 text-xs mt-1">07 Mar 2025 • 10:15</p> |
| </div> |
| <div class="border-b pb-3"> |
| <p class="font-medium text-sm">Promo spesial</p> |
| <p class="text-gray-500 text-xs">Diskon 50% untuk pembelian di Tokopedia</p> |
| <p class="text-gray-400 text-xs mt-1">05 Mar 2025 • 09:00</p> |
| </div> |
| <div class="pb-3"> |
| <p class="font-medium text-sm">Pembaruan aplikasi</p> |
| <p class="text-gray-500 text-xs">Versi terbaru myBCA 5.2.0 tersedia</p> |
| <p class="text-gray-400 text-xs mt-1">01 Mar 2025 • 08:00</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="page" id="transferPage"> |
| <div class="bca-blue text-white px-6 pt-12 pb-8 rounded-b-3xl relative"> |
| <div class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <i class="fas fa-arrow-left text-xl cursor-pointer mr-4" id="backFromTransfer"></i> |
| <h2 class="text-xl font-bold">Transfer</h2> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-6"> |
| <div class="bg-white rounded-xl p-4 card-shadow mb-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h4 class="font-bold">Penerima Favorit</h4> |
| <a href="#" class="text-blue-600 text-sm" id="viewAllRecipients">Lihat Semua</a> |
| </div> |
| |
| <div class="grid grid-cols-4 gap-4"> |
| <div class="text-center cursor-pointer"> |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-user"></i> |
| </div> |
| <p class="text-xs font-medium truncate">John Doe</p> |
| </div> |
| <div class="text-center cursor-pointer"> |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-user"></i> |
| </div> |
| <p class="text-xs font-medium truncate">Jane Smith</p> |
| </div> |
| <div class="text-center cursor-pointer"> |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-user"></i> |
| </div> |
| <p class="text-xs font-medium truncate">PT. ABC</p> |
| </div> |
| <div class="text-center cursor-pointer" id="addRecipient"> |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-plus"></i> |
| </div> |
| <p class="text-xs font-medium">Tambah</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow mb-6"> |
| <h4 class="font-bold mb-4">Transfer ke Rekening</h4> |
| |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between cursor-pointer" id="bcaTransfer"> |
| <div class="flex items-center"> |
| <div class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-building-columns"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">Transfer Sesama BCA</p> |
| <p class="text-gray-500 text-xs">Nomor rekening BCA</p> |
| </div> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| |
| <div class="flex items-center justify-between cursor-pointer" id="otherBankTransfer"> |
| <div class="flex items-center"> |
| <div class="bg-green-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-building-columns"></i> |
| </div> |
| <div> |
| <p class="font-medium text-sm">Transfer Bank Lain</p> |
| <p class="text-gray-500 text-xs">Nomor rekening bank lain</p> |
| </div> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl p-4 card-shadow"> |
| <h4 class="font-bold mb-4">Transfer Lainnya</h4> |
| |
| <div class="grid grid-cols-3 gap-4"> |
| <div class="text-center cursor-pointer" id="vaTransfer"> |
| <div class="bg-purple-100 text-purple-600 w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-money-bill-transfer"></i> |
| </div> |
| <p class="text-xs font-medium">Virtual Account</p> |
| </div> |
| <div class="text-center cursor-pointer" id="qrTransfer"> |
| <div class="bg-yellow-100 text-yellow-600 w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-qrcode"></i> |
| </div> |
| <p class="text-xs font-medium">QRIS</p> |
| </div> |
| <div class="text-center cursor-pointer" id="walletTransfer"> |
| <div class="bg-red-100 text-red-600 w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-wallet"></i> |
| </div> |
| <p class="text-xs font-medium">Dompet Digital</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2 px-4"> |
| <div class="text-center cursor-pointer active-nav" id="homeNav"> |
| <i class="fas fa-home bottom-nav-icon"></i> |
| <p class="text-xs">Beranda</p> |
| </div> |
| <div class="text-center cursor-pointer" id="historyNav"> |
| <i class="fas fa-clock-rotate-left bottom-nav-icon"></i> |
| <p class="text-xs">Riwayat</p> |
| </div> |
| <div class="text-center cursor-pointer" id="transferNav"> |
| <i class="fas fa-paper-plane bottom-nav-icon"></i> |
| <p class="text-xs">Transfer</p> |
| </div> |
| <div class="text-center cursor-pointer" id="accountNav"> |
| <i class="fas fa-user bottom-nav-icon"></i> |
| <p class="text-xs">Akun</p> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const pages = document.querySelectorAll('.page'); |
| const navItems = document.querySelectorAll('[id$="Nav"]'); |
| |
| function showPage(pageId) { |
| pages.forEach(page => { |
| page.classList.remove('active'); |
| if (page.id === pageId) { |
| page.classList.add('active'); |
| } |
| }); |
| |
| |
| navItems.forEach(nav => { |
| nav.classList.remove('active-nav'); |
| if (nav.id.replace('Nav', 'Page') === pageId) { |
| nav.classList.add('active-nav'); |
| } |
| }); |
| } |
| |
| |
| document.getElementById('homeNav').addEventListener('click', () => showPage('homePage')); |
| document.getElementById('historyNav').addEventListener('click', () => showPage('historyPage')); |
| document.getElementById('transferNav').addEventListener('click', () => showPage('transferPage')); |
| document.getElementById('accountNav').addEventListener('click', () => showPage('accountPage')); |
| |
| |
| document.getElementById('backFromHistory').addEventListener('click', () => showPage('homePage')); |
| document.getElementById('backFromAccount').addEventListener('click', () => showPage('homePage')); |
| document.getElementById('backFromNotification').addEventListener('click', () => showPage('homePage')); |
| document.getElementById('backFromTransfer').addEventListener('click', () => showPage('homePage')); |
| |
| |
| document.getElementById('transferBtn').addEventListener('click', () => showPage('transferPage')); |
| document.getElementById('notificationBtn').addEventListener('click', () => showPage('notificationPage')); |
| document.getElementById('quickTransferBtn').addEventListener('click', () => showPage('transferPage')); |
| document.getElementById('bcaTransfer').addEventListener('click', () => showPage('bcaTransferPage')); |
| |
| |
| document.getElementById('toggleBalance').addEventListener('click', function() { |
| const balance = document.getElementById('balanceAmount'); |
| if (balance.textContent === 'Rp8.934.461.590') { |
| balance.textContent = '••••••••••'; |
| this.innerHTML = '<i class="fas fa-eye-slash mr-1"></i> Sembunyikan'; |
| } else { |
| balance.textContent = 'Rp8.934.461.590'; |
| this.innerHTML = '<i class="fas fa-eye mr-1"></i> Lihat'; |
| } |
| }); |
| |
| |
| document.getElementById('notificationDot').style.display = 'block'; |
| document.getElementById('markAllRead').addEventListener('click', function() { |
| document.getElementById('notificationDot').style.display = 'none'; |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yesedev/mybca" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
