Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CashApp - USDT Wallet</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> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| .balance-card { | |
| background: linear-gradient(135deg, #00d632 0%, #00b628 100%); | |
| box-shadow: 0 10px 20px rgba(0, 182, 40, 0.2); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #00d632 0%, #00b628 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 182, 40, 0.3); | |
| } | |
| .btn-secondary { | |
| background: #f8f9fa; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: #e9ecef; | |
| } | |
| .transaction-item { | |
| transition: all 0.3s ease; | |
| } | |
| .transaction-item:hover { | |
| background: #f8f9fa; | |
| transform: translateX(5px); | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: #00d632; | |
| } | |
| .section { | |
| display: none; | |
| } | |
| .password-dots { | |
| letter-spacing: 5px; | |
| font-size: 1.5rem; | |
| } | |
| .qr-code { | |
| width: 200px; | |
| height: 200px; | |
| background: #fff; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 10px; | |
| position: relative; | |
| } | |
| .qr-code::before { | |
| content: ''; | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| background: #fff; | |
| border-radius: 50%; | |
| } | |
| .editable-balance { | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .editable-balance:hover { | |
| text-decoration: underline; | |
| } | |
| .balance-input { | |
| background: transparent; | |
| border: none; | |
| color: white; | |
| font-size: 1.875rem; | |
| font-weight: bold; | |
| width: auto; | |
| max-width: 200px; | |
| padding: 2px 5px; | |
| border-bottom: 1px dashed rgba(255,255,255,0.5); | |
| } | |
| .balance-input:focus { | |
| outline: none; | |
| border-bottom: 1px solid white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="max-w-md mx-auto min-h-screen bg-white shadow-lg overflow-hidden"> | |
| <!-- Header --> | |
| <header class="bg-black text-white p-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center"> | |
| <span class="font-bold">$</span> | |
| </div> | |
| <h1 class="font-bold text-xl">CashApp</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button onclick="showSettingsSection()" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="p-4"> | |
| <!-- Home Section (Default) --> | |
| <div id="homeSection" class="section"> | |
| <!-- Balance Card --> | |
| <div class="balance-card rounded-2xl p-6 text-white mb-6 animate-fade-in"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm opacity-80">Total Balance</p> | |
| <div class="flex items-center"> | |
| <span id="balanceDisplay" class="editable-balance text-3xl font-bold mt-1">70,000</span> | |
| <span class="text-lg ml-1">USDT</span> | |
| <input type="text" id="balanceInput" class="balance-input hidden" value="70000"> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-2 rounded-lg"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <div> | |
| <p class="text-xs opacity-80">Equivalent in USD</p> | |
| <p id="usdEquivalent" class="font-medium">$70,000.00</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs opacity-80">Daily Yield</p> | |
| <p class="font-medium">+$14.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-4 gap-4 mb-6"> | |
| <button onclick="openModal()" class="btn-primary flex flex-col items-center justify-center py-3 rounded-xl text-white"> | |
| <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <span class="text-xs">Send</span> | |
| </button> | |
| <button onclick="showReceiveSection()" class="btn-secondary flex flex-col items-center justify-center py-3 rounded-xl"> | |
| <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-arrow-down text-gray-700"></i> | |
| </div> | |
| <span class="text-xs">Receive</span> | |
| </button> | |
| <button onclick="showSwapSection()" class="btn-secondary flex flex-col items-center justify-center py-3 rounded-xl"> | |
| <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-exchange-alt text-gray-700"></i> | |
| </div> | |
| <span class="text-xs">Swap</span> | |
| </button> | |
| <button onclick="showScanSection()" class="btn-secondary flex flex-col items-center justify-center py-3 rounded-xl"> | |
| <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-qrcode text-gray-700"></i> | |
| </div> | |
| <span class="text-xs">Scan</span> | |
| </button> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-bold text-lg">Recent Activity</h3> | |
| <button class="text-green-500 text-sm font-medium">See All</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Transaction 1 --> | |
| <div class="transaction-item flex items-center p-3 rounded-lg border border-gray-100"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-arrow-down text-green-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">USDT Deposit</p> | |
| <p class="text-xs text-gray-500">From: Binance Wallet</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-green-500">+5,000 USDT</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| <!-- Transaction 2 --> | |
| <div class="transaction-item flex items-center p-3 rounded-lg border border-gray-100"> | |
| <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-arrow-up text-red-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Sent to John</p> | |
| <p class="text-xs text-gray-500">Personal Payment</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-red-500">-1,200 USDT</p> | |
| <p class="text-xs text-gray-500">Yesterday</p> | |
| </div> | |
| </div> | |
| <!-- Transaction 3 --> | |
| <div class="transaction-item flex items-center p-3 rounded-lg border border-gray-100"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-coins text-green-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Staking Rewards</p> | |
| <p class="text-xs text-gray-500">Weekly Earnings</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-green-500">+350 USDT</p> | |
| <p class="text-xs text-gray-500">3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Promo Banner --> | |
| <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl p-4 text-white mb-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm font-medium mb-1">Earn 5% Cash Back</p> | |
| <p class="text-xs opacity-90">On all purchases with CashApp Card</p> | |
| </div> | |
| <button class="bg-white text-purple-600 text-xs font-bold px-3 py-1 rounded-full"> | |
| Activate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wallet Section --> | |
| <div id="walletSection" class="section"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Wallet</h2> | |
| <button onclick="showSecuritySection()" class="text-green-500 text-sm font-medium"> | |
| <i class="fas fa-lock mr-1"></i> Security | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-wallet text-green-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">USDT Wallet</p> | |
| <p class="text-xs text-gray-500">Tether (TRC20)</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="bg-white p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500 mb-1">Balance</p> | |
| <p id="walletBalance" class="font-medium">70,000 USDT</p> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500 mb-1">Value</p> | |
| <p id="walletValue" class="font-medium">$70,000.00</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg mb-4"> | |
| <p class="text-xs text-gray-500 mb-1">Wallet Address</p> | |
| <div class="flex items-center justify-between"> | |
| <p class="font-medium truncate">TNPm8w...Z9Q4</p> | |
| <button class="text-green-500"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button onclick="showReceiveSection()" class="btn-primary w-full py-3 rounded-lg text-white font-medium"> | |
| <i class="fas fa-qrcode mr-2"></i> Show QR Code | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold text-lg mb-3">Connected Accounts</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 rounded-lg border border-gray-100"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-university text-blue-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Bank of America</p> | |
| <p class="text-xs text-gray-500">****4532</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center p-3 rounded-lg border border-gray-100"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fab fa-cc-visa text-purple-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Visa Card</p> | |
| <p class="text-xs text-gray-500">****6789</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-secondary w-full py-3 rounded-lg font-medium"> | |
| <i class="fas fa-plus mr-2"></i> Add Payment Method | |
| </button> | |
| </div> | |
| <!-- Security Section --> | |
| <div id="securitySection" class="section"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="showWalletSection()" class="mr-3 text-gray-500"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold">Security</h2> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-3">Security Settings</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-fingerprint text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Biometric Login</p> | |
| <p class="text-xs text-gray-500">Face ID/Fingerprint</p> | |
| </div> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-lock text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Change Password</p> | |
| <p class="text-xs text-gray-500">Update your security password</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-shield-alt text-purple-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">2FA Authentication</p> | |
| <p class="text-xs text-gray-500">Google Authenticator</p> | |
| </div> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-3">Password Protection</h3> | |
| <div class="bg-gray-50 rounded-xl p-4"> | |
| <p class="text-sm mb-4">Enter your 6-digit security password to confirm transactions</p> | |
| <div class="flex justify-center mb-6"> | |
| <div class="password-dots text-center bg-white p-4 rounded-lg w-48"> | |
| •••••• | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3 mb-4"> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">1</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">2</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">3</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">4</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">5</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">6</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">7</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">8</button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">9</button> | |
| <button class="bg-transparent py-4 rounded-lg font-medium text-lg"></button> | |
| <button class="number-btn bg-white py-4 rounded-lg font-medium text-lg">0</button> | |
| <button class="bg-transparent py-4 rounded-lg font-medium text-lg"> | |
| <i class="fas fa-backspace text-gray-500"></i> | |
| </button> | |
| </div> | |
| <button class="btn-primary w-full py-3 rounded-lg text-white font-medium"> | |
| Confirm Password | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-center text-sm text-gray-500"> | |
| <p>Last security update: 2 days ago</p> | |
| </div> | |
| </div> | |
| <!-- Receive Section --> | |
| <div id="receiveSection" class="section"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="showHomeSection()" class="mr-3 text-gray-500"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold">Receive USDT</h2> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <div class="qr-code mb-4"> | |
| <i class="fas fa-qrcode text-6xl text-gray-300"></i> | |
| </div> | |
| <p class="font-medium">Scan to receive payment</p> | |
| <p class="text-sm text-gray-500 mt-1">Your USDT (TRC20) address</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <p class="text-sm font-medium">Wallet Address</p> | |
| <button class="text-green-500 text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg"> | |
| <p class="text-center font-mono text-sm">TNPm8wZ91kXyHp9uQ7rZ9Q4</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-3">Receive Amount (Optional)</h3> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">$</span> | |
| <input type="number" class="w-full pl-8 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="0.00"> | |
| </div> | |
| </div> | |
| <button class="btn-primary w-full py-3 rounded-lg text-white font-medium"> | |
| Share Payment Request | |
| </button> | |
| </div> | |
| <!-- Swap Section --> | |
| <div id="swapSection" class="section"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="showHomeSection()" class="mr-3 text-gray-500"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold">Swap Crypto</h2> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <p class="text-sm font-medium">You pay</p> | |
| <div class="text-sm text-gray-500"> | |
| Balance: <span id="swapBalance">70,000</span> USDT | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg mb-3"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-wallet text-green-500"></i> | |
| </div> | |
| <select class="bg-transparent font-medium"> | |
| <option>USDT</option> | |
| <option>BTC</option> | |
| <option>ETH</option> | |
| </select> | |
| </div> | |
| <input type="number" class="text-right font-bold text-lg w-24" placeholder="0.00"> | |
| </div> | |
| </div> | |
| <div class="flex justify-center my-2"> | |
| <button class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center transform rotate-90"> | |
| <i class="fas fa-exchange-alt text-gray-600"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fab fa-bitcoin text-blue-500"></i> | |
| </div> | |
| <select class="bg-transparent font-medium"> | |
| <option>BTC</option> | |
| <option>ETH</option> | |
| <option>USDT</option> | |
| </select> | |
| </div> | |
| <input type="number" class="text-right font-bold text-lg w-24" placeholder="0.00"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-3">Exchange Rate</h3> | |
| <div class="bg-white p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-gray-500">1 USDT = 0.000023 BTC</p> | |
| <button class="text-green-500"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-primary w-full py-3 rounded-lg text-white font-medium"> | |
| Confirm Swap | |
| </button> | |
| </div> | |
| <!-- Scan Section --> | |
| <div id="scanSection" class="section"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="showHomeSection()" class="mr-3 text-gray-500"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold">Scan QR Code</h2> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <div class="qr-code mb-4"> | |
| <i class="fas fa-camera text-4xl text-gray-300"></i> | |
| </div> | |
| <p class="font-medium">Point your camera at a QR code</p> | |
| <p class="text-sm text-gray-500 mt-1">To scan and make payments</p> | |
| </div> | |
| <button class="btn-secondary w-full py-3 rounded-lg font-medium mb-4"> | |
| <i class="fas fa-bolt mr-2"></i> Flashlight | |
| </button> | |
| <div class="bg-gray-50 rounded-xl p-4"> | |
| <p class="text-sm text-gray-500 mb-2">Or enter address manually</p> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg mb-3" placeholder="Wallet address or $Cashtag"> | |
| <input type="number" class="w-full px-4 py-3 border border-gray-300 rounded-lg mb-3" placeholder="Amount (optional)"> | |
| <button class="btn-primary w-full py-3 rounded-lg text-white font-medium"> | |
| Continue | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Settings Section --> | |
| <div id="settingsSection" class="section"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="showHomeSection()" class="mr-3 text-gray-500"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-xl font-bold">Settings</h2> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center p-4 bg-gray-50 rounded-xl mb-4"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">John Doe</p> | |
| <p class="text-sm text-gray-500">Personal Account</p> | |
| </div> | |
| </div> | |
| <h3 class="font-medium mb-3">Account</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-user-edit text-blue-500"></i> | |
| </div> | |
| <p class="font-medium">Profile</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-bell text-purple-500"></i> | |
| </div> | |
| <p class="font-medium">Notifications</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-lock text-green-500"></i> | |
| </div> | |
| <p class="font-medium">Privacy</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-3">Support</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-question-circle text-orange-500"></i> | |
| </div> | |
| <p class="font-medium">Help Center</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-headset text-red-500"></i> | |
| </div> | |
| <p class="font-medium">Contact Support</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-file-alt text-yellow-500"></i> | |
| </div> | |
| <p class="font-medium">Terms & Policies</p> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-secondary w-full py-3 rounded-lg font-medium"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Sign Out | |
| </button> | |
| <div class="text-center text-sm text-gray-500 mt-6"> | |
| <p>CashApp v2.4.1</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="bg-white border-t border-gray-200 p-3 flex justify-around"> | |
| <button onclick="showHomeSection()" class="nav-item active flex flex-col items-center text-green-500"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button onclick="showWalletSection()" class="nav-item flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-wallet text-lg"></i> | |
| <span class="text-xs mt-1">Wallet</span> | |
| </button> | |
| <button class="nav-item flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-chart-line text-lg"></i> | |
| <span class="text-xs mt-1">Stats</span> | |
| </button> | |
| <button onclick="showSettingsSection()" class="nav-item flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-cog text-lg"></i> | |
| <span class="text-xs mt-1">Settings</span> | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Send Money Modal --> | |
| <div id="sendModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md animate-fade-in"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-bold text-lg">Send Money</h3> | |
| <button onclick="closeModal()" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="relative mb-4"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">$</span> | |
| <input type="number" class="w-full pl-8 pr-3 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-xl" placeholder="0.00"> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-500 mb-2">To</p> | |
| <div class="flex items-center space-x-3"> | |
| <button class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user-plus text-gray-500"></i> | |
| </button> | |
| <button class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-qrcode text-gray-500"></i> | |
| </button> | |
| <input type="text" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg" placeholder="Name, $Cashtag, phone, or email"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-sm text-gray-500 mb-2">For</p> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg" placeholder="What's it for? (optional)"> | |
| </div> | |
| <button class="btn-primary w-full py-4 rounded-lg text-white font-medium text-lg"> | |
| Continue | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Show home section by default | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showHomeSection(); | |
| // Setup editable balance | |
| const balanceDisplay = document.getElementById('balanceDisplay'); | |
| const balanceInput = document.getElementById('balanceInput'); | |
| const usdEquivalent = document.getElementById('usdEquivalent'); | |
| const walletBalance = document.getElementById('walletBalance'); | |
| const walletValue = document.getElementById('walletValue'); | |
| const swapBalance = document.getElementById('swapBalance'); | |
| balanceDisplay.addEventListener('click', function() { | |
| balanceDisplay.classList.add('hidden'); | |
| balanceInput.classList.remove('hidden'); | |
| balanceInput.focus(); | |
| balanceInput.select(); | |
| }); | |
| balanceInput.addEventListener('blur', function() { | |
| updateBalance(); | |
| }); | |
| balanceInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| updateBalance(); | |
| } | |
| }); | |
| function updateBalance() { | |
| let newBalance = balanceInput.value; | |
| // Format with commas | |
| newBalance = parseFloat(newBalance).toLocaleString('en-US'); | |
| balanceDisplay.textContent = newBalance; | |
| balanceDisplay.classList.remove('hidden'); | |
| balanceInput.classList.add('hidden'); | |
| // Update all balance displays | |
| const numericBalance = parseFloat(balanceInput.value.replace(/,/g, '')); | |
| const usdValue = numericBalance.toFixed(2); | |
| usdEquivalent.textContent = `$${usdValue.toLocaleString('en-US')}`; | |
| walletBalance.textContent = `${newBalance} USDT`; | |
| walletValue.textContent = `$${usdValue.toLocaleString('en-US')}`; | |
| swapBalance.textContent = newBalance; | |
| } | |
| }); | |
| // Section navigation functions | |
| function showHomeSection() { | |
| hideAllSections(); | |
| document.getElementById('homeSection').style.display = 'block'; | |
| updateNavActive('home'); | |
| } | |
| function showWalletSection() { | |
| hideAllSections(); | |
| document.getElementById('walletSection').style.display = 'block'; | |
| updateNavActive('wallet'); | |
| } | |
| function showSecuritySection() { | |
| hideAllSections(); | |
| document.getElementById('securitySection').style.display = 'block'; | |
| updateNavActive('wallet'); | |
| } | |
| function showReceiveSection() { | |
| hideAllSections(); | |
| document.getElementById('receiveSection').style.display = 'block'; | |
| updateNavActive('home'); | |
| } | |
| function showSwapSection() { | |
| hideAllSections(); | |
| document.getElementById('swapSection').style.display = 'block'; | |
| updateNavActive('home'); | |
| } | |
| function showScanSection() { | |
| hideAllSections(); | |
| document.getElementById('scanSection').style.display = 'block'; | |
| updateNavActive('home'); | |
| } | |
| function showSettingsSection() { | |
| hideAllSections(); | |
| document.getElementById('settingsSection').style.display = 'block'; | |
| updateNavActive('settings'); | |
| } | |
| function hideAllSections() { | |
| const sections = document.querySelectorAll('.section'); | |
| sections.forEach(section => { | |
| section.style.display = 'none'; | |
| }); | |
| } | |
| function updateNavActive(activeItem) { | |
| const navItems = document.querySelectorAll('.nav-item'); | |
| navItems.forEach(item => { | |
| item.classList.remove('active'); | |
| item.classList.remove('text-green-500'); | |
| item.classList.add('text-gray-500'); | |
| }); | |
| const activeNav = document.querySelector(`.nav-item[onclick="show${activeItem.charAt(0).toUpperCase() + activeItem.slice(1)}Section()"]`); | |
| if (activeNav) { | |
| activeNav.classList.add('active'); | |
| activeNav.classList.add('text-green-500'); | |
| activeNav.classList.remove('text-gray-500'); | |
| } | |
| } | |
| // Modal functions | |
| function openModal() { | |
| document.getElementById('sendModal').classList.remove('hidden'); | |
| } | |
| function closeModal() { | |
| document.getElementById('sendModal').classList.add('hidden'); | |
| } | |
| </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=Monday4/daniel-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |