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> | |
| </极速赛车开奖直播官网 | |
| </html> |