Spaces:

Service-Xi
/

Trustpay-V2

Running

App Files Files Community

Service-Xi commited on Aug 8, 2025

Commit

0f25b53

verified ·

1 Parent(s): 26336a0

Upload 2 files

Browse files

Files changed (1) hide show

index.html +716 -19

index.html CHANGED Viewed

@@ -1,19 +1,716 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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 &copy; 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>