Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CryptoFlow - Crypto Onramp Gateway</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .float-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c); | |
| background-size: 400% 400%; | |
| animation: gradient 15s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .glass-effect { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(255, 255, 255, 0.75); | |
| border: 1px solid rgba(209, 213, 219, 0.3); | |
| } | |
| .crypto-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .crypto-icon:hover { | |
| transform: scale(1.1); | |
| filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg"> | |
| <div class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="max-w-md w-full"> | |
| <!-- Header --> | |
| <div class="text-center mb-8"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 bg-white/20 rounded-full mb-4 glass-effect"> | |
| <i class="fas fa-coins text-3xl text-white"></i> | |
| </div> | |
| <h1 class="text-4xl font-bold text-white mb-2">CryptoFlow</h1> | |
| <p class="text-white/80 text-lg">Your Gateway to Crypto Investment</p> | |
| </div> | |
| <!-- Main Card --> | |
| <div class="glass-effect rounded-2xl p-6 shadow-2xl"> | |
| <!-- Payment Link Section --> | |
| <div id="setupSection" class="space-y-6"> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Setup Your Payment Gateway</h2> | |
| <p class="text-gray-600">Pre-configured Square payment link</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| ======= | |
| <label class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-coins mr-2"></i>Select Cryptocurrency | |
| </label> | |
| <select id="cryptoSelect" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"> | |
| <option value="BTC">Bitcoin (BTC)</option> | |
| <option value="ETH">Ethereum (ETH)</option> | |
| <option value="USDT">Tether (USDT)</option> | |
| <option value="BNB">Binance Coin (BNB)</option> | |
| <option value="SOL">Solana (SOL)</option> | |
| </select> | |
| </div> | |
| <button | |
| onclick="setupGateway()" | |
| class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl" | |
| > | |
| <i class="fas fa-rocket mr-2"></i>Setup Gateway | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Payment Section --> | |
| <div id="paymentSection" class="hidden space-y-6"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4"> | |
| <i class="fas fa-check text-green-600 text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800">Ready to Buy Crypto</h2> | |
| <p class="text-gray-600">Choose your amount and currency</p> | |
| </div> | |
| <!-- Crypto Display --> | |
| <div class="grid grid-cols-5 gap-4 mb-6"> | |
| <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('BTC')"> | |
| <div class="text-center"> | |
| <i class="fab fa-bitcoin text-3xl text-orange-500"></i> | |
| <p class="text-xs mt-1">BTC</p> | |
| </div> | |
| </div> | |
| <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('ETH')"> | |
| <div class="text-center"> | |
| <i class="fab fa-ethereum text-3xl text-indigo-600"></i> | |
| <p class="text-xs mt-1">ETH</p> | |
| </div> | |
| </div> | |
| <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('USDT')"> | |
| <div class="text-center"> | |
| <i class="fas fa-dollar-sign text-3xl text-green-600"></i> | |
| <p class="text-xs mt-1">USDT</p> | |
| </div> | |
| </div> | |
| <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('BNB')"> | |
| <div class="text-center"> | |
| <i class="fas fa-coins text-3xl text-yellow-500"></i> | |
| <p class="text-xs mt-1">BNB</p> | |
| </div> | |
| </div> | |
| <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('SOL')"> | |
| <div class="text-center"> | |
| <i class="fas fa-star text-3xl text-purple-500"></i> | |
| <p class="text-xs mt-1">SOL</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Amount Input --> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-dollar-sign mr-2"></i>Amount in USD | |
| </label> | |
| <input | |
| type="number" | |
| id="amountUSD" | |
| placeholder="100" | |
| min="10" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all" | |
| oninput="convertToCrypto()" | |
| > | |
| </div> | |
| <div class="text-center p-4 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-600">You'll receive approximately</p> | |
| <p class="text-2xl font-bold text-gray-800 mt-1"> | |
| <span id="cryptoAmount">0.00</span> <span id="selectedCrypto">BTC</span> | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">Rate: 1 <span id="cryptoRate">BTC</span> = $<span id="usdRate">42000</span></p> | |
| </div> | |
| <button | |
| onclick="proceedToPayment()" | |
| class="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-green-600 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl" | |
| > | |
| <i class="fas fa-shopping-cart mr-2"></i>Buy Crypto Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Wallet Address Section --> | |
| <div id="walletSection" class="hidden space-y-6"> | |
| <div class="text-center mb-6"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4"> | |
| <i class="fas fa-wallet text-blue-600 text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800">Enter Your Wallet Address</h2> | |
| <p class="text-gray-600">Where we'll send your crypto</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-wallet mr-2"></i>Your {crypto} Wallet Address {crypto === 'USDT' ? '(ETH or ARB)' : ''} | |
| </label> | |
| <input | |
| type="text" | |
| id="walletAddress" | |
| placeholder="Enter your wallet address" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all" | |
| > | |
| </div> | |
| <button | |
| onclick="verifyWalletAddress()" | |
| class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-600 hover:to-indigo-700 transition-all duration-300 shadow-lg hover:shadow-xl" | |
| > | |
| <i class="fas fa-check-circle mr-2"></i>Verify & Proceed | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Success Section --> | |
| <div id="successSection" class="hidden text-center space-y-6"> | |
| <div class="animate__animated animate__bounceIn"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full mb-4"> | |
| <i class="fas fa-check-circle text-green-600 text-4xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Payment Initiated!</h2> | |
| <p class="text-gray-600 mb-4">Redirecting to your payment gateway...</p> | |
| <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="text-center mt-6"> | |
| <p class="text-white/70 text-sm"> | |
| <i class="fas fa-shield-alt mr-1"></i> | |
| Secure payments powered by CryptoFlow | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const cryptoRates = { | |
| BTC: 42000, | |
| ETH: 2800, | |
| USDT: 1, | |
| BNB: 320, | |
| SOL: 98 | |
| }; | |
| let currentCrypto = 'BTC'; | |
| const paymentLink = 'https://square.link/u/o7RfYa08?src=sheet'; | |
| function setupGateway() { | |
| document.getElementById('setupSection').classList.add('hidden'); | |
| document.getElementById('paymentSection').classList.remove('hidden'); | |
| } | |
| function isValidUrl(string) { | |
| try { | |
| new URL(string); | |
| return true; | |
| } catch (_) { | |
| return false; | |
| } | |
| } | |
| function selectCrypto(crypto) { | |
| currentCrypto = crypto; | |
| document.getElementById('selectedCrypto').textContent = crypto; | |
| document.getElementById('cryptoRate').textContent = crypto; | |
| document.getElementById('usdRate').textContent = cryptoRates[crypto]; | |
| convertToCrypto(); | |
| } | |
| function convertToCrypto() { | |
| const usdAmount = parseFloat(document.getElementById('amountUSD').value) || 0; | |
| const cryptoEquivalent = usdAmount / cryptoRates[currentCrypto]; | |
| document.getElementById('cryptoAmount').textContent = cryptoEquivalent.toFixed(6); | |
| } | |
| function proceedToPayment() { | |
| const amount = document.getElementById('amountUSD').value; | |
| if (!amount || amount < 10) { | |
| alert('Please enter an amount of at least $10'); | |
| return; | |
| } | |
| // Show wallet address input | |
| document.getElementById('paymentSection').classList.add('hidden'); | |
| document.getElementById('walletSection').classList.remove('hidden'); | |
| // Update wallet label with selected crypto | |
| const walletLabel = document.querySelector('#walletSection label'); | |
| walletLabel.innerHTML = `<i class="fas fa-wallet mr-2"></i>Your ${currentCrypto} Wallet Address`; | |
| } | |
| function verifyWalletAddress() { | |
| const walletAddress = document.getElementById('walletAddress').value.trim(); | |
| if (!walletAddress) { | |
| alert('Please enter your wallet address'); | |
| return; | |
| } | |
| // Basic validation for different crypto addresses | |
| let isValid = false; | |
| switch(currentCrypto) { | |
| case 'BTC': | |
| isValid = walletAddress.length >= 26 && walletAddress.length <= 35; | |
| break; | |
| case 'ETH': | |
| isValid = walletAddress.length === 42 && walletAddress.startsWith('0x'); | |
| break; | |
| case 'USDT': | |
| // Accept ETH (0x...) or ARB (0x...) addresses for USDT | |
| isValid = walletAddress.length === 42 && walletAddress.startsWith('0x'); | |
| break; | |
| case 'BNB': | |
| isValid = walletAddress.length === 42 && walletAddress.startsWith('0x'); | |
| break; | |
| case 'SOL': | |
| isValid = walletAddress.length >= 32 && walletAddress.length <= 44; | |
| break; | |
| default: | |
| isValid = walletAddress.length > 10; | |
| } | |
| if (!isValid) { | |
| alert(`Please enter a valid ${currentCrypto} wallet address`); | |
| return; | |
| } | |
| // Show success animation | |
| document.getElementById('walletSection').classList.add('hidden'); | |
| document.getElementById('successSection').classList.remove('hidden'); | |
| // Construct final payment URL with parameters | |
| const finalUrl = new URL(paymentLink); | |
| finalUrl.searchParams.append('amount', document.getElementById('amountUSD').value); | |
| finalUrl.searchParams.append('currency', 'USD'); | |
| finalUrl.searchParams.append('crypto', currentCrypto); | |
| finalUrl.searchParams.append('cryptoAmount', document.getElementById('cryptoAmount').textContent); | |
| finalUrl.searchParams.append('wallet', walletAddress); | |
| // Redirect after 2 seconds | |
| setTimeout(() => { | |
| window.location.href = finalUrl.toString(); | |
| }, 2000); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| convertToCrypto(); | |
| }); | |
| </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=steveadams2834/cryptoflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |