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; | |
| } | |
| .wallet-section { | |
| display: none; | |
| } | |
| .security-section { | |
| display: none; | |
| } | |
| .password-dots { | |
| letter-spacing: 5px; | |
| font-size: 1.5rem; | |
| } | |
| </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 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"> | |
| <!-- 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> | |
| <h2 class="text-3xl font-bold mt-1">70,000 <span class="text-lg">USDT</span></h2> | |
| </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 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 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 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 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 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="wallet-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 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 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 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="security-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> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="bg-white border-t border-gray-200 flex justify-around py-3 px-4"> | |
| <a href="#" 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> | |
| </a> | |
| <a href="#" 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> | |
| </a> | |
| <a href="#" 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">Invest</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| </nav> | |
| <!-- Send Money Modal (hidden by default) --> | |
| <div id="sendModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-fade-in"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Send USDT</h3> | |
| <button onclick="closeModal()" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label> | |
| <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> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">To</label> | |
| <div class="flex items-center border border-gray-300 rounded-lg px-3 py-2"> | |
| <i class="fas fa-user text-gray-500 mr-2"></i> | |
| <input type="text" class="flex-1 outline-none" placeholder="Name, $Cashtag, or phone"> | |
| <button class="text-green-500"> | |
| <i class="fas fa-qrcode"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="btn-primary w-full py-3 rounded-lg text-white font-medium"> | |
| Send 70,000 USDT | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Section navigation functions | |
| function showHomeSection() { | |
| document.getElementById('homeSection').style.display = 'block'; | |
| document.getElementById('walletSection').style.display = 'none'; | |
| document.getElementById('securitySection').style.display = 'none'; | |
| updateNav('home'); | |
| } | |
| function showWalletSection() { | |
| document.getElementById('homeSection').style.display = 'none'; | |
| document.getElementById('walletSection').style.display = 'block'; | |
| document.getElementById('securitySection').style.display = 'none'; | |
| updateNav('wallet'); | |
| } | |
| function showSecuritySection() { | |
| document.getElementById('homeSection').style.display = 'none'; | |
| document.getElementById('walletSection').style.display = 'none'; | |
| document.getElementById('securitySection').style.display = 'block'; | |
| updateNav('none'); | |
| } | |
| function updateNav(activeItem) { | |
| const navItems = document.querySelectorAll('.nav-item'); | |
| navItems.forEach(item => { | |
| item.classList.remove('active', 'text-green-500'); | |
| item.classList.add('text-gray-500'); | |
| }); | |
| if (activeItem === 'home') { | |
| navItems[0].classList.add('active', 'text-green-500'); | |
| } else if (activeItem === 'wallet') { | |
| navItems[1].classList.add('active', 'text-green-500'); | |
| } | |
| } | |
| // Password input functionality | |
| let password = ''; | |
| const passwordDots = document.querySelector('.password-dots'); | |
| const numberButtons = document.querySelectorAll('.number-btn'); | |
| numberButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| if (password.length < 6) { | |
| password += button.textContent; | |
| updatePasswordDots(); | |
| } | |
| }); | |
| }); | |
| document.querySelector('.fa-backspace').parentElement.addEventListener('click', () => { | |
| if (password.length > 0) { | |
| password = password.slice(0, -1); | |
| updatePasswordDots(); | |
| } | |
| }); | |
| function updatePasswordDots() { | |
| const dots = '•'.repeat(password.length); | |
| const empty = ' '.repeat(6 - password.length); | |
| passwordDots.textContent = dots + empty; | |
| } | |
| // Simple modal toggle function | |
| function openModal() { | |
| document.getElementById('sendModal').classList.remove('hidden'); | |
| } | |
| function closeModal() { | |
| document.getElementById('sendModal').classList.add('hidden'); | |
| } | |
| // Add click event to the Send button | |
| document.querySelector('.btn-primary').addEventListener('click', openModal); | |
| // Simulate loading animation | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| const elements = document.querySelectorAll('.animate-fade-in'); | |
| elements.forEach(el => { | |
| el.style.opacity = '1'; | |
| el.style.transform = 'translateY(0)'; | |
| }); | |
| }, 100); | |
| // Initialize with home section | |
| showHomeSection(); | |
| }); | |
| </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> |