Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TrustNet Bank - Multi-Currency Banking</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c); | |
| color: #333; | |
| min-height: 100vh; | |
| padding: 20px; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| body:before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(255,255,255,0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255,255,255,0.1) 0%, transparent 20%); | |
| pointer-events: none; | |
| } | |
| .container { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.92); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| /* Header Styles */ | |
| .header { | |
| background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 100%); | |
| color: white; | |
| padding: 25px 20px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header:before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 40%); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .logo i { | |
| font-size: 40px; | |
| color: #fff; | |
| background: rgba(255,255,255,0.2); | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .logo h1 { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .tagline { | |
| font-size: 18px; | |
| opacity: 0.9; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| } | |
| /* Features Section */ | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| padding: 25px 20px; | |
| } | |
| .feature-card { | |
| background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); | |
| border-radius: 15px; | |
| padding: 20px; | |
| text-align: center; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.08); | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(10, 62, 128, 0.1); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 25px rgba(10, 62, 128, 0.15); | |
| } | |
| .feature-icon { | |
| font-size: 32px; | |
| margin-bottom: 15px; | |
| color: #0a3e80; | |
| } | |
| .feature-card h3 { | |
| margin: 0 0 10px 0; | |
| color: #0a3e80; | |
| font-weight: 600; | |
| } | |
| .feature-card p { | |
| margin: 0; | |
| font-size: 14px; | |
| color: #666; | |
| line-height: 1.4; | |
| } | |
| /* Balance Section */ | |
| .balance-section { | |
| background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 100%); | |
| color: white; | |
| padding: 25px; | |
| border-radius: 15px; | |
| margin: 0 20px 20px; | |
| text-align: center; | |
| box-shadow: 0 8px 25px rgba(10, 62, 128, 0.3); | |
| } | |
| .balance-label { | |
| font-size: 18px; | |
| opacity: 0.9; | |
| margin-bottom: 10px; | |
| } | |
| .balance-amount { | |
| font-size: 42px; | |
| font-weight: 700; | |
| margin: 10px 0 20px; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .balance-actions { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 15px; | |
| } | |
| .balance-btn { | |
| flex: 1; | |
| background: rgba(255,255,255,0.2); | |
| border: 2px solid rgba(255,255,255,0.3); | |
| color: white; | |
| padding: 12px; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| font-size: 14px; | |
| } | |
| .balance-btn:hover { | |
| background: rgba(255,255,255,0.3); | |
| transform: translateY(-3px); | |
| } | |
| /* Transfer Section */ | |
| .transfer-section { | |
| padding: 0 20px 20px; | |
| } | |
| .section-title { | |
| text-align: center; | |
| color: #0a3e80; | |
| margin-bottom: 20px; | |
| font-size: 24px; | |
| position: relative; | |
| padding-bottom: 10px; | |
| } | |
| .section-title:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 4px; | |
| background: linear-gradient(90deg, #0a3e80, #2d6bb8); | |
| border-radius: 2px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: #0a3e80; | |
| font-size: 15px; | |
| } | |
| input, select { | |
| width: 100%; | |
| padding: 14px 16px; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| input:focus, select:focus { | |
| outline: none; | |
| border-color: #0a3e80; | |
| box-shadow: 0 0 0 3px rgba(10, 62, 128, 0.1); | |
| } | |
| .currency-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| padding: 10px; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 10px; | |
| } | |
| .currency-option { | |
| padding: 10px; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 8px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .currency-option:hover { | |
| background-color: #f0f8ff; | |
| border-color: #0a3e80; | |
| } | |
| .currency-option.selected { | |
| background-color: #0a3e80; | |
| color: white; | |
| border-color: #0a3e80; | |
| } | |
| .alert-options { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| } | |
| .alert-option { | |
| padding: 12px; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 10px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| background: white; | |
| } | |
| .alert-option:hover { | |
| background-color: #fff8e1; | |
| border-color: #ffc107; | |
| } | |
| .alert-option.selected { | |
| background-color: #fff8e1; | |
| border-color: #ffc107; | |
| font-weight: 600; | |
| } | |
| .submit-btn { | |
| background: linear-gradient(135deg, #0a3e80 0%, #1e5aa8 100%); | |
| color: white; | |
| border: none; | |
| padding: 16px; | |
| border-radius: 10px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-top: 10px; | |
| width: 100%; | |
| box-shadow: 0 5px 15px rgba(10, 62, 128, 0.3); | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 20px rgba(10, 62, 128, 0.4); | |
| } | |
| .submit-btn:active { | |
| transform: translateY(1px); | |
| } | |
| .warning { | |
| background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%); | |
| border: 1px solid #ffc107; | |
| border-radius: 10px; | |
| color: #856404; | |
| padding: 15px; | |
| margin-top: 20px; | |
| text-align: center; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| /* WhatsApp Group Section */ | |
| .whatsapp-section { | |
| background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); | |
| color: white; | |
| padding: 25px 20px; | |
| text-align: center; | |
| margin: 20px; | |
| border-radius: 15px; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3); | |
| } | |
| .whatsapp-section:before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 40%); | |
| } | |
| .whatsapp-section h3 { | |
| margin: 0 0 15px 0; | |
| font-size: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| position: relative; | |
| } | |
| .whatsapp-section p { | |
| font-size: 17px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| max-width: 400px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .whatsapp-btn { | |
| background: white; | |
| color: #25D366; | |
| padding: 16px 40px; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| text-decoration: none; | |
| display: inline-block; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| font-size: 18px; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .whatsapp-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.3); | |
| } | |
| /* Currencies Section */ | |
| .currencies-section { | |
| background: linear-gradient(135deg, #f8fafc 0%, #e8ecf0 100%); | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin: 0 20px 20px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.08); | |
| } | |
| .currencies-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); | |
| gap: 10px; | |
| margin-top: 15px; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| padding: 10px; | |
| } | |
| .currency-item { | |
| padding: 10px; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 8px; | |
| text-align: center; | |
| background: white; | |
| transition: all 0.2s ease; | |
| } | |
| .currency-item:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| border-color: #0a3e80; | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding: 20px; | |
| color: #666; | |
| font-size: 14px; | |
| border-top: 1px solid #eee; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 600px) { | |
| .features { | |
| grid-template-columns: 1fr; | |
| } | |
| .currency-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .alert-options { | |
| grid-template-columns: 1fr; | |
| } | |
| .balance-actions { | |
| flex-direction: column; | |
| } | |
| .logo h1 { | |
| font-size: 26px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="logo"> | |
| <i class="fas fa-university"></i> | |
| <h1>TrustNet Bank</h1> | |
| </div> | |
| <p class="tagline">Your trusted financial partner with multi-currency support</p> | |
| </div> | |
| <!-- Features --> | |
| <div class="features"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </div> | |
| <h3>Global Transfers</h3> | |
| <p>Send money worldwide with 100+ currencies supported</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Secure Banking</h3> | |
| <p>Military-grade encryption for all transactions</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3>Instant Processing</h3> | |
| <p>Real-time transaction processing 24/7</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <h3>24/7 Support</h3> | |
| <p>Dedicated customer service anytime</p> | |
| </div> | |
| </div> | |
| <!-- Balance Section --> | |
| <div class="balance-section"> | |
| <div class="balance-label">Your Available Balance</div> | |
| <div class="balance-amount">$12,458.75</div> | |
| <div class="balance-actions"> | |
| <button class="balance-btn"> | |
| <i class="fas fa-plus-circle"></i> Add Funds | |
| </button> | |
| <button class="balance-btn"> | |
| <i class="fas fa-exchange-alt"></i> Transfer | |
| </button> | |
| <button class="balance-btn"> | |
| <i class="fas fa-cog"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Currencies Section --> | |
| <div class="currencies-section"> | |
| <h3 class="section-title">Supported Currencies</h3> | |
| <div class="currencies-grid" id="currencies-grid"> | |
| <!-- Currencies will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Transfer Section --> | |
| <div class="transfer-section"> | |
| <h3 class="section-title">Make a Transfer</h3> | |
| <div class="form-group"> | |
| <label for="recipient-name">Recipient Name</label> | |
| <input type="text" id="recipient-name" placeholder="Enter recipient's full name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="account-number">Account Number</label> | |
| <input type="text" id="account-number" placeholder="Enter account number"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="amount">Amount</label> | |
| <input type="number" id="amount" placeholder="Enter amount"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Select Currency</label> | |
| <div class="currency-grid" id="currency-selector"> | |
| <!-- Currencies will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Alert Caption</label> | |
| <div class="alert-options"> | |
| <div class="alert-option" data-value="⚠️ Suspicious Transaction Detected"> | |
| ⚠️ Suspicious | |
| </div> | |
| <div class="alert-option" data-value="🚨 High Risk Transfer"> | |
| 🚨 High Risk | |
| </div> | |
| <div class="alert-option" data-value="🔒 Account Security Alert"> | |
| 🔒 Security Alert | |
| </div> | |
| <div class="alert-option" data-value="✅ Verified Transaction"> | |
| ✅ Verified | |
| </div> | |
| </div> | |
| </div> | |
| <button class="submit-btn"> | |
| <i class="fas fa-paper-plane"></i> Send Transfer | |
| </button> | |
| <div class="warning"> | |
| <i class="fas fa-exclamation-triangle"></i> Sending over 5 transactions in a single day may trigger security alerts | |
| </div> | |
| </div> | |
| <!-- WhatsApp Group Section at Bottom --> | |
| <div class="whatsapp-section"> | |
| <h3><i class="fab fa-whatsapp"></i> Join Our WhatsApp Group</h3> | |
| <p>Get exclusive access to financial tips, updates, and premium tools</p> | |
| <a href="https://chat.whatsapp.com/ER9UwcNHhFRCaUSZgvXJx9" class="whatsapp-btn" target="_blank"> | |
| Join Now | |
| </a> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <p>TrustNet Bank © 2023 | Secure Banking Solutions</p> | |
| <p>Contact: support@trustnetbank.com | +1 (800) 123-4567</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Supported currencies with Korean Won | |
| const currencies = [ | |
| { code: "USD", symbol: "$", name: "US Dollar" }, | |
| { code: "EUR", symbol: "€", name: "Euro" }, | |
| { code: "GBP", symbol: "£", name: "British Pound" }, | |
| { code: "JPY", symbol: "¥", name: "Japanese Yen" }, | |
| { code: "KRW", symbol: "₩", name: "Korean Won" }, | |
| { code: "AUD", symbol: "A$", name: "Australian Dollar" }, | |
| { code: "CAD", symbol: "C$", name: "Canadian Dollar" }, | |
| { code: "CHF", symbol: "Fr", name: "Swiss Franc" }, | |
| { code: "CNY", symbol: "¥", name: "Chinese Yuan" }, | |
| { code: "INR", symbol: "₹", name: "Indian Rupee" }, | |
| { code: "MXN", symbol: "$", name: "Mexican Peso" }, | |
| { code: "BRL", symbol: "R$", name: "Brazilian Real" }, | |
| { code: "RUB", symbol: "₽", name: "Russian Ruble" }, | |
| { code: "SGD", symbol: "S$", name: "Singapore Dollar" }, | |
| { code: "HKD", symbol: "HK$", name: "Hong Kong Dollar" }, | |
| { code: "NZD", symbol: "NZ$", name: "New Zealand Dollar" }, | |
| { code: "SEK", symbol: "kr", name: "Swedish Krona" }, | |
| { code: "NOK", symbol: "kr", name: "Norwegian Krone" }, | |
| { code: "TRY", symbol: "₺", name: "Turkish Lira" }, | |
| { code: "ZAR", symbol: "R", name: "South African Rand" }, | |
| { code: "AED", symbol: "د.إ", name: "UAE Dirham" }, | |
| { code: "SAR", symbol: "﷼", name: "Saudi Riyal" }, | |
| { code: "THB", symbol: "฿", name: "Thai Baht" }, | |
| { code: "PLN", symbol: "zł", name: "Polish Złoty" }, | |
| { code: "IDR", symbol: "Rp", name: "Indonesian Rupiah" }, | |
| { code: "HUF", symbol: "Ft", name: "Hungarian Forint" }, | |
| { code: "CZK", symbol: "Kč", name: "Czech Koruna" }, | |
| { code: "ILS", symbol: "₪", name: "Israeli Shekel" }, | |
| { code: "CLP", symbol: "$", name: "Chilean Peso" }, | |
| { code: "PHP", symbol: "₱", name: "Philippine Peso" }, | |
| { code: "DKK", symbol: "kr", name: "Danish Krone" }, | |
| { code: "MYR", symbol: "RM", name: "Malaysian Ringgit" }, | |
| { code: "RON", symbol: "lei", name: "Romanian Leu" }, | |
| { code: "TWD", symbol: "NT$", name: "New Taiwan Dollar" }, | |
| { code: "EGP", symbol: "E£", name: "Egyptian Pound" }, | |
| { code: "PKR", symbol: "₨", name: "Pakistani Rupee" }, | |
| { code: "COP", symbol: "$", name: "Colombian Peso" }, | |
| { code: "VND", symbol: "₫", name: "Vietnamese Dong" }, | |
| { code: "BDT", symbol: "৳", name: "Bangladeshi Taka" }, | |
| { code: "ARS", symbol: "$", name: "Argentine Peso" }, | |
| // Add more currencies as needed | |
| ]; | |
| // Populate currency selector | |
| function populateCurrencies() { | |
| const grid = document.getElementById('currency-selector'); | |
| const currenciesGrid = document.getElementById('currencies-grid'); | |
| currencies.forEach(currency => { | |
| // For currency selector | |
| const option = document.createElement('div'); | |
| option.className = 'currency-option'; | |
| option.innerHTML = `${currency.symbol} ${currency.code}`; | |
| option.dataset.code = currency.code; | |
| option.dataset.symbol = currency.symbol; | |
| option.addEventListener('click', () => { | |
| document.querySelectorAll('.currency-option').forEach(opt => { | |
| opt.classList.remove('selected'); | |
| }); | |
| option.classList.add('selected'); | |
| }); | |
| grid.appendChild(option); | |
| // For currencies display grid | |
| const currencyItem = document.createElement('div'); | |
| currencyItem.className = 'currency-item'; | |
| currencyItem.innerHTML = ` | |
| <div style="font-size: 20px;">${currency.symbol}</div> | |
| <div style="font-size: 12px;">${currency.code}</div> | |
| <div style="font-size: 10px; color: #666;">${currency.name}</div> | |
| `; | |
| currenciesGrid.appendChild(currencyItem); | |
| }); | |
| } | |
| // Set up alert options | |
| function setupAlertOptions() { | |
| const alertOptions = document.querySelectorAll('.alert-option'); | |
| alertOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| alertOptions.forEach(opt => { | |
| opt.classList.remove('selected'); | |
| }); | |
| option.classList.add('selected'); | |
| }); | |
| }); | |
| } | |
| // Initialize when page loads | |
| document.addEventListener('DOMContentLoaded', () => { | |
| populateCurrencies(); | |
| setupAlertOptions(); | |
| // Select USD by default | |
| setTimeout(() => { | |
| document.querySelector('.currency-option[data-code="USD"]').click(); | |
| }, 100); | |
| }); | |
| </script> | |
| </body> | |
| </html> |