Download index.html from yesedev/mybca: direct link, hf CLI and curl.
- Browser
- Download file 38.8 kB
-
https://huggingface.co/spaces/yesedev/mybca/resolve/main/index.html
- Command line
-
hf download hf://spaces/yesedev/mybca/index.html
-
curl -L -o index.html https://huggingface.co/spaces/yesedev/mybca/resolve/main/index.html
38.8 kB
| <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%; | |
| } | |
| /* Animation for QR button */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .qr-button { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Loading spinner */ | |
| .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 transitions */ | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* Form styling */ | |
| .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 */ | |
| .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; | |
| } | |
| /* Floating action button */ | |
| .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"> | |
| <!-- Home Page --> | |
| <div class="page active" id="homePage"> | |
| <!-- Header --> | |
| <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> | |
| <!-- Main Content --> | |
| <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> | |
| <!-- Floating Action Button --> | |
| <div class="fab cursor-pointer" id="quickTransferBtn"> | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </div> | |
| </div> | |
| <!-- History Page --> | |
| <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> | |
| <!-- Account Page --> | |
| <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> | |
| <!-- Notification Page --> | |
| <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> | |
| <!-- Transfer Page --> | |
| <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> | |
| <!-- Bottom Navigation --> | |
| <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> | |
| // Page navigation | |
| 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'); | |
| } | |
| }); | |
| // Update active nav | |
| navItems.forEach(nav => { | |
| nav.classList.remove('active-nav'); | |
| if (nav.id.replace('Nav', 'Page') === pageId) { | |
| nav.classList.add('active-nav'); | |
| } | |
| }); | |
| } | |
| // Navigation click handlers | |
| 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')); | |
| // Back buttons | |
| 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')); | |
| // Feature buttons | |
| 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')); | |
| // Toggle balance visibility | |
| 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'; | |
| } | |
| }); | |
| // Notification dot | |
| 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> |