Spaces:
Running
Running
tambahkan fitur deposit di bagian stake now dan porfolio pada saat menyelesaikan stake now - Initial Deployment
21e9b63
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CryptoStake Pro - Advanced Coin Staking Platform</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .staking-card { | |
| box-shadow: 0 10px 30px -5px rgba(103, 89, 230, 0.3); | |
| transition: all 0.3s ease; | |
| border-radius: 16px; | |
| } | |
| .staking-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 35px -5px rgba(103, 89, 230, 0.4); | |
| } | |
| .coin-logo { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 50%; | |
| background: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e9ecef; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .wallet-address { | |
| font-family: 'Courier New', monospace; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .wallet-address:hover { | |
| color: #6e8efb; | |
| text-decoration: underline; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(110, 142, 251, 0.5); | |
| } | |
| .token-selector { | |
| transition: all 0.3s ease; | |
| } | |
| .token-selector:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .floating-label { | |
| position: absolute; | |
| top: -10px; | |
| left: 12px; | |
| background: white; | |
| padding: 0 4px; | |
| font-size: 12px; | |
| color: #6e8efb; | |
| } | |
| .input-container { | |
| position: relative; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 12px; | |
| padding: 12px; | |
| } | |
| .tab-active { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| color: white; | |
| } | |
| .tab-inactive { | |
| background: white; | |
| color: #64748b; | |
| } | |
| .animated-underline { | |
| position: relative; | |
| } | |
| .animated-underline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -4px; | |
| left: 0; | |
| background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%); | |
| transition: width 0.3s ease; | |
| } | |
| .animated-underline:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-coins text-2xl gradient-text"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold">CryptoStake <span class="text-xs bg-white text-indigo-600 px-2 py-1 rounded-full ml-2">PRO</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8 items-center"> | |
| <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline"> | |
| <i class="fas fa-chart-line mr-2"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline"> | |
| <i class="fas fa-lock mr-2"></i> | |
| <span>Staking</span> | |
| </a> | |
| <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline"> | |
| <i class="fas fa-wallet mr-2"></i> | |
| <span>Portfolio</span> | |
| </a> | |
| <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline"> | |
| <i class="fas fa-gift mr-2"></i> | |
| <span>Rewards</span> | |
| </a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:flex items-center space-x-2 bg-white/20 px-4 py-2 rounded-full"> | |
| <i class="fas fa-wallet"></i> | |
| <span class="text-sm">0x742...f44e</span> | |
| <div class="w-2 h-2 bg-green-400 rounded-full"></div> | |
| </div> | |
| <button class="bg-white text-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition flex items-center space-x-2"> | |
| <i class="fas fa-power-off"></i> | |
| <span>Connect</span> | |
| </button> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Notification Banner --> | |
| <div class="bg-indigo-100 text-indigo-800 py-2 px-4"> | |
| <div class="container mx-auto flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-info-circle"></i> | |
| <span class="text-sm">New: Staking pools with up to 18% APY now available!</span> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> | |
| <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total Value Locked</p> | |
| <p class="text-2xl font-bold">$24.8M</p> | |
| <p class="text-green-500 text-xs flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12.4% (30d) | |
| </p> | |
| </div> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-lock text-indigo-600"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Your Staked Value</p> | |
| <p class="text-2xl font-bold">$8,420</p> | |
| <p class="text-green-500 text-xs flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> 6.2% (30d) | |
| </p> | |
| </div> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-coins text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Pending Rewards</p> | |
| <p class="text-2xl font-bold">$142</p> | |
| <p class="text-green-500 text-xs flex items-center"> | |
| <i class="fas fa-gift mr-1"></i> Claimable | |
| </p> | |
| </div> | |
| <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-gift text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Avg. APY</p> | |
| <p class="text-2xl font-bold">14.8%</p> | |
| <p class="text-gray-500 text-xs flex items-center"> | |
| <i class="fas fa-percentage mr-1"></i> Across all pools | |
| </p> | |
| </div> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-chart-pie text-purple-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Staking Section --> | |
| <div class="lg:w-2/3"> | |
| <div class="bg-white rounded-xl shadow-md p-6 staking-card"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-lock mr-3 gradient-text"></i> | |
| Stake Your Assets | |
| </h2> | |
| <div class="flex items-center space-x-2 bg-indigo-50 px-3 py-1 rounded-full"> | |
| <span class="text-sm text-indigo-600">Current APY</span> | |
| <span class="text-lg font-bold gradient-text">12.5%</span> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex mb-6 bg-gray-100 p-1 rounded-xl"> | |
| <button class="flex-1 py-2 px-4 rounded-xl tab-active font-medium"> | |
| <i class="fas fa-lock mr-2"></i> Stake | |
| </button> | |
| <button class="flex-1 py-2 px-4 rounded-xl tab-inactive font-medium"> | |
| <i class="fas fa-unlock mr-2"></i> Unstake | |
| </button> | |
| <button class="flex-1 py-2 px-4 rounded-xl tab-inactive font-medium"> | |
| <i class="fas fa-exchange-alt mr-2"></i> Migrate | |
| </button> | |
| </div> | |
| <!-- Coin Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="coin-select"> | |
| Select Asset to Stake | |
| </label> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-3"> | |
| <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300"> | |
| <div class="coin-logo mb-2"> | |
| <i class="fab fa-ethereum text-indigo-600 text-xl"></i> | |
| </div> | |
| <span class="font-medium">ETH</span> | |
| <span class="text-xs text-gray-500">12.5% APY</span> | |
| </div> | |
| <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300"> | |
| <div class="coin-logo mb-2"> | |
| <i class="fas fa-circle text-blue-500 text-xl"></i> | |
| </div> | |
| <span class="font-medium">SOL</span> | |
| <span class="text-xs text-gray-500">9.8% APY</span> | |
| </div> | |
| <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300"> | |
| <div class="coin-logo mb-2"> | |
| <i class="fas fa-circle text-purple-500 text-xl"></i> | |
| </div> | |
| <span class="font-medium">DOT</span> | |
| <span class="text-xs text-gray-500">11.2% APY</span> | |
| </div> | |
| <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300"> | |
| <div class="coin-logo mb-2"> | |
| <i class="fas fa-circle text-pink-500 text-xl"></i> | |
| </div> | |
| <span class="font-medium">MATIC</span> | |
| <span class="text-xs text-gray-500">10.5% APY</span> | |
| </div> | |
| <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300"> | |
| <div class="coin-logo mb-2"> | |
| <i class="fas fa-circle text-green-500 text-xl"></i> | |
| </div> | |
| <span class="font-medium">ADA</span> | |
| <span class="text-xs text-gray-500">8.9% APY</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wallet Address --> | |
| <div class="mb-6"> | |
| <div class="input-container"> | |
| <span class="floating-label">Wallet Address</span> | |
| <div class="flex items-center pt-2"> | |
| <i class="fas fa-wallet text-gray-500 mr-2"></i> | |
| <span id="wallet-address" class="wallet-address text-gray-700 overflow-hidden text-ellipsis">0x742d35Cc6634C0532925a3b844Bc454e4438f44e</span> | |
| <button class="ml-auto text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Amount Input --> | |
| <div class="mb-6"> | |
| <div class="input-container"> | |
| <span class="floating-label">Amount to Stake</span> | |
| <div class="flex items-center justify-between pt-2"> | |
| <input id="stake-amount" type="number" placeholder="0.00" class="w-full bg-transparent text-gray-700 text-xl font-bold focus:outline-none"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-gray-500">ETH</span> | |
| <span class="text-sm text-gray-400">Balance: 5.42</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-3"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full" onclick="setPercentage(25)">25%</button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full" onclick="setPercentage(50)">50%</button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full" onclick="setPercentage(75)">75%</button> | |
| <button class="text-xs bg-indigo-100 text-indigo-700 hover:bg-indigo-200 px-3 py-1 rounded-full" onclick="setPercentage(100)">MAX</button> | |
| </div> | |
| </div> | |
| <!-- Staking Period --> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2"> | |
| Staking Period (Days) | |
| </label> | |
| <div class="grid grid-cols-4 gap-3"> | |
| <button class="staking-period-btn py-3 px-4 border rounded-xl hover:bg-indigo-50 hover:border-indigo-300 transition flex flex-col items-center" data-days="7"> | |
| <span>7</span> | |
| <span class="text-xs text-gray-500">+5% APY</span> | |
| </button> | |
| <button class="staking-period-btn py-3 px-4 border rounded-xl hover:bg-indigo-50 hover:border-indigo-300 transition flex flex-col items-center" data-days="30"> | |
| <span>30</span> | |
| <span class="text-xs text-gray-500">+10% APY</span> | |
| </button> | |
| <button class="staking-period-btn active bg-indigo-100 border-indigo-300 text-indigo-700 py-3 px-4 border rounded-xl transition flex flex-col items-center" data-days="60"> | |
| <span>60</span> | |
| <span class="text-xs text-gray-500">+12.5% APY</span> | |
| </button> | |
| <button class="staking-period-btn py-3 px-4 border rounded-xl hover:bg-indigo-50 hover:border-indigo-300 transition flex flex-col items-center" data-days="90"> | |
| <span>90</span> | |
| <span class="text-xs text-gray-500">+15% APY</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Estimated Rewards --> | |
| <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-6 mb-6 border border-indigo-100"> | |
| <h3 class="text-sm font-medium text-indigo-800 mb-4 flex items-center"> | |
| <i class="fas fa-calculator mr-2"></i> Projected Earnings | |
| </h3> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="text-center"> | |
| <p class="text-gray-600 text-xs mb-1">Daily</p> | |
| <p class="text-lg font-bold text-gray-800">0.0042 ETH</p> | |
| <p class="text-green-500 text-xs">~$7.50</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-600 text-xs mb-1">Weekly</p> | |
| <p class="text-lg font-bold text-gray-800">0.029 ETH</p> | |
| <p class="text-green-500 text-xs">~$52.50</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-600 text-xs mb-1">Monthly</p> | |
| <p class="text-lg font-bold text-gray-800">0.125 ETH</p> | |
| <p class="text-green-500 text-xs">~$225.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stake Button --> | |
| <button id="stake-button" class="w-full gradient-bg text-white py-4 px-4 rounded-xl font-bold hover:opacity-90 transition flex items-center justify-center space-x-3 glow"> | |
| <i class="fas fa-lock-open"></i> | |
| <span>Stake Now</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| <div class="mt-4 text-center text-xs text-gray-500"> | |
| <p>By staking, you agree to our <a href="#" class="text-indigo-600 hover:underline">Terms of Service</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Section --> | |
| <div class="lg:w-1/3"> | |
| <!-- Current Stakes --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6 staking-card"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-coins mr-2 gradient-text"></i> | |
| Active Stakes | |
| </h2> | |
| <span class="text-xs bg-indigo-50 text-indigo-600 px-2 py-1 rounded-full">3 positions</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Stake Item --> | |
| <div class="bg-gray-50 rounded-xl p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="coin-logo"> | |
| <i class="fab fa-ethereum text-indigo-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Ethereum</h3> | |
| <p class="text-xs text-gray-500">Staked: 2.5 ETH</p> | |
| </div> | |
| </div> | |
| <span class="text-sm font-medium bg-green-100 text-green-600 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 mb-3"> | |
| <div> | |
| <p class="text-gray-500 text-xs">APY</p> | |
| <p class="text-sm font-medium">12.5%</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-xs">Est. Reward</p> | |
| <p class="text-sm font-medium">0.26 ETH</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-xs">Days Left</p> | |
| <p class="text-sm font-medium">23</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-xs">Unlock Date</p> | |
| <p class="text-sm font-medium">Oct 15</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <!-- Stake Item --> | |
| <div class="bg-gray-50 rounded-xl p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="coin-logo"> | |
| <i class="fas fa-circle text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Solana</h3> | |
| <p class="text-xs text-gray-500">Staked: 150 SOL</p> | |
| </div> | |
| </div> | |
| <span class="text-sm font-medium bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">Ending Soon</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 mb-3"> | |
| <div> | |
| <p class="text-gray-500 text-xs">APY</p> | |
| <p class="text-sm font-medium">9.8%</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-xs">Est. Reward</p> | |
| <p class="text-sm font-medium">12.3 SOL</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-xs">Days Left</p> | |
| <p class="text-sm font-medium">5</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-xs">Unlock Date</p> | |
| <p class="text-sm font-medium">Sep 27</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="block text-center mt-4 text-indigo-600 hover:text-indigo-800 font-medium flex items-center justify-center"> | |
| View All Stakes <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Statistics --> | |
| <div class="bg-white rounded-xl shadow-md p-6 staking-card"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2 gradient-text"></i> | |
| Performance | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-coins text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Total Staked</p> | |
| <p class="text-xs text-gray-500">Across all assets</p> | |
| </div> | |
| </div> | |
| <span class="font-bold">3.76 ETH</span> | |
| </div> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-gift text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Total Rewards</p> | |
| <p class="text-xs text-gray-500">All time</p> | |
| </div> | |
| </div> | |
| <span class="font-bold">0.42 ETH</span> | |
| </div> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-calendar-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Avg. Period</p> | |
| <p class="text-xs text-gray-500">Staking duration</p> | |
| </div> | |
| </div> | |
| <span class="font-bold">67 days</span> | |
| </div> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-percentage text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Avg. APY</p> | |
| <p class="text-xs text-gray-500">Weighted average</p> | |
| </div> | |
| </div> | |
| <span class="font-bold">11.2%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-xl shadow-md p-6 staking-card mt-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-bolt mr-2 gradient-text"></i> | |
| Quick Actions | |
| </h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-indigo-50 text-indigo-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-indigo-100 transition"> | |
| <i class="fas fa-gift text-xl mb-2"></i> | |
| <span class="text-sm">Claim Rewards</span> | |
| </button> | |
| <button class="bg-green-50 text-green-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-green-100 transition"> | |
| <i class="fas fa-exchange-alt text-xl mb-2"></i> | |
| <span class="text-sm">Migrate</span> | |
| </button> | |
| <button class="bg-blue-50 text-blue-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-blue-100 transition"> | |
| <i class="fas fa-history text-xl mb-2"></i> | |
| <span class="text-sm">History</span> | |
| </button> | |
| <button class="bg-purple-50 text-purple-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-purple-100 transition"> | |
| <i class="fas fa-cog text-xl mb-2"></i> | |
| <span class="text-sm">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-coins text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">CryptoStake</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">The most secure platform to grow your crypto assets with staking.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-medium"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Products</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Staking</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Yield Farming</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Lending</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Liquid Staking</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Guides</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Status</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Bug Bounty</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 CryptoStake. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Licenses</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Success Modal --> | |
| <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 text-center transform transition-all duration-300 scale-95 opacity-0"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check-circle text-green-500 text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Staking Confirmed!</h3> | |
| <p class="text-gray-600 mb-6">Your assets have been successfully staked.</p> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-6 text-left space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Amount:</span> | |
| <span class="text-gray-700 font-medium">2.5 ETH</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Duration:</span> | |
| <span class="text-gray-700 font-medium">90 days</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">APY:</span> | |
| <span class="text-gray-700 font-medium">12.5%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500">Est. Rewards:</span> | |
| <span class="text-green-600 font-medium">0.3125 ETH</span> | |
| </div> | |
| <div class="pt-3 border-t border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-500">Transaction:</span> | |
| <div class="flex items-center"> | |
| <span class="text-gray-700 font-mono text-sm mr-2">0x7a3...f4e2</span> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-copy text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button id="close-modal" class="flex-1 bg-gray-100 text-gray-800 py-3 px-4 rounded-lg font-medium hover:bg-gray-200 transition"> | |
| Close | |
| </button> | |
| <button id="view-portfolio" class="flex-1 gradient-bg text-white py-3 px-4 rounded-lg font-bold hover:opacity-90 transition"> | |
| View Portfolio | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Set percentage of balance to stake | |
| function setPercentage(percent) { | |
| const balance = 5.42; // Example balance | |
| const amount = (balance * percent / 100).toFixed(4); | |
| document.getElementById('stake-amount').value = amount; | |
| updateEstimatedRewards(); | |
| } | |
| // Update staking period buttons | |
| const periodButtons = document.querySelectorAll('.staking-period-btn'); | |
| periodButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| periodButtons.forEach(btn => btn.classList.remove('active', 'bg-indigo-100', 'border-indigo-300', 'text-indigo-700')); | |
| this.classList.add('active', 'bg-indigo-100', 'border-indigo-300', 'text-indigo-700'); | |
| updateEstimatedRewards(); | |
| }); | |
| }); | |
| // Token selector buttons | |
| const tokenSelectors = document.querySelectorAll('.token-selector'); | |
| tokenSelectors.forEach(selector => { | |
| selector.addEventListener('click', function() { | |
| tokenSelectors.forEach(s => s.classList.remove('border-indigo-300', 'bg-indigo-50')); | |
| this.classList.add('border-indigo-300', 'bg-indigo-50'); | |
| updateEstimatedRewards(); | |
| }); | |
| }); | |
| // Calculate estimated rewards | |
| function updateEstimatedRewards() { | |
| const amount = parseFloat(document.getElementById('stake-amount').value) || 0; | |
| const apy = 12.5; | |
| const days = document.querySelector('.staking-period-btn.active').dataset.days; | |
| // Simple reward calculation (APY is annual, we prorate for staking period) | |
| const reward = amount * (apy / 100) * (days / 365); | |
| const dailyReward = reward / days; | |
| const weeklyReward = dailyReward * 7; | |
| const monthlyReward = dailyReward * 30; | |
| document.querySelectorAll('.text-lg.font-bold.text-gray-800')[0].textContent = amount.toFixed(4) + ' ETH'; | |
| document.querySelectorAll('.text-lg.font-bold.text-gray-800')[1].textContent = reward.toFixed(4) + ' ETH'; | |
| document.querySelectorAll('.text-lg.font-bold.text-gray-800')[2].textContent = dailyReward.toFixed(4) + ' ETH'; | |
| document.querySelectorAll('.text-lg.font-bold.text-gray-800')[3].textContent = weeklyReward.toFixed(4) + ' ETH'; | |
| document.querySelectorAll('.text-lg.font-bold.text-gray-800')[4].textContent = monthlyReward.toFixed(4) + ' ETH'; | |
| } | |
| // Handle stake button click | |
| document.getElementById('stake-button').addEventListener('click', function() { | |
| const amount = document.getElementById('stake-amount').value; | |
| if (!amount || parseFloat(amount) <= 0) { | |
| alert('Please enter a valid amount to stake'); | |
| return; | |
| } | |
| // Show success modal with animation | |
| const modal = document.getElementById('success-modal'); | |
| const modalContent = modal.querySelector('div'); | |
| modal.classList.remove('hidden'); | |
| setTimeout(() => { | |
| modalContent.classList.remove('scale-95', 'opacity-0'); | |
| modalContent.classList.add('scale-100', 'opacity-100'); | |
| }, 10); | |
| }); | |
| // Handle close modal button | |
| document.getElementById('close-modal').addEventListener('click', function() { | |
| const modal = document.getElementById('success-modal'); | |
| const modalContent = modal.querySelector('div'); | |
| modalContent.classList.remove('scale-100', 'opacity-100'); | |
| modalContent.classList.add('scale-95', 'opacity-0'); | |
| setTimeout(() => { | |
| modal.classList.add('hidden'); | |
| }, 300); | |
| }); | |
| // Handle view portfolio button | |
| document.getElementById('view-portfolio').addEventListener('click', function() { | |
| // In a real app, this would redirect to the portfolio page | |
| alert('Redirecting to portfolio page...'); | |
| }); | |
| // Handle wallet address click (redirect to portfolio) | |
| document.getElementById('wallet-address').addEventListener('click', function() { | |
| // In a real app, this would redirect to the portfolio page | |
| alert('Redirecting to portfolio page...'); | |
| }); | |
| // Update estimates when amount changes | |
| document.getElementById('stake-amount').addEventListener('input', updateEstimatedRewards); | |
| // Initialize with default values | |
| updateEstimatedRewards(); | |
| // Copy wallet address | |
| document.querySelector('#wallet-address + button').addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const address = document.getElementById('wallet-address').textContent; | |
| navigator.clipboard.writeText(address); | |
| // Show copied tooltip | |
| const tooltip = document.createElement('div'); | |
| tooltip.textContent = 'Copied!'; | |
| tooltip.className = 'absolute bg-gray-800 text-white text-xs px-2 py-1 rounded -mt-8'; | |
| this.appendChild(tooltip); | |
| setTimeout(() => { | |
| tooltip.remove(); | |
| }, 1000); | |
| }); | |
| </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=barudakponk/baru-jdi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |