|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CryptoPouch - Digital Wallet</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
|
|
} |
|
|
.card-glass { |
|
|
backdrop-filter: blur(16px) saturate(180%); |
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%); |
|
|
background-color: rgba(17, 25, 40, 0.75); |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.125); |
|
|
} |
|
|
.coin-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.coin-icon:hover { |
|
|
transform: scale(1.1) rotate(10deg); |
|
|
} |
|
|
.transaction-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.transaction-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen text-white font-sans"> |
|
|
<div id="vanta-bg" class="fixed inset-0 z-0"></div> |
|
|
<div class="relative z-10"> |
|
|
|
|
|
<header class="container mx-auto px-4 py-6 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="package" class="text-purple-400"></i> |
|
|
<h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">CryptoPouch</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="connectWallet" class="px-4 py-2 bg-gradient-to-r from-purple-500 to-blue-600 rounded-lg font-medium hover:from-purple-600 hover:to-blue-700 transition-all flex items-center"> |
|
|
<i data-feather="user" class="mr-2"></i> Connect Wallet |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="settings"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="card-glass p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Total Balance</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors"> |
|
|
<i data-feather="refresh-cw"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-end space-x-2"> |
|
|
<p class="text-4xl font-bold" id="totalBalance">$0.00</p> |
|
|
<p class="text-green-400 text-sm mb-2 flex items-center"> |
|
|
<i data-feather="trending-up" class="mr-1"></i> +2.4% |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex justify-between mt-6"> |
|
|
<button id="sendBtn" class="px-4 py-2 bg-blue-600 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center"> |
|
|
<i data-feather="arrow-up-right" class="mr-2"></i> Send |
|
|
</button> |
|
|
<button id="receiveBtn" class="px-4 py-2 bg-green-600 rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center"> |
|
|
<i data-feather="arrow-down-left" class="mr-2"></i> Receive |
|
|
</button> |
|
|
<button id="swapBtn" class="px-4 py-2 bg-purple-600 rounded-lg font-medium hover:bg-purple-700 transition-colors flex items-center"> |
|
|
<i data-feather="repeat" class="mr-2"></i> Swap |
|
|
</button> |
|
|
<button id="buyBtn" class="px-4 py-2 bg-orange-600 rounded-lg font-medium hover:bg-orange-700 transition-colors flex items-center"> |
|
|
<i data-feather="dollar-sign" class="mr-2"></i> Buy |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="dollar-sign" class="mr-2 text-yellow-400"></i> Your Assets |
|
|
</h2> |
|
|
<div class="card-glass p-4 overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="text-gray-400 text-left border-b border-gray-700"> |
|
|
<th class="pb-3 pl-2">Asset</th> |
|
|
<th class="pb-3">Balance</th> |
|
|
<th class="pb-3">Price</th> |
|
|
<th class="pb-3">Value</th> |
|
|
<th class="pb-3">24h</th> |
|
|
<th class="pb-3 pr-2">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="assetsList"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="clock" class="mr-2 text-blue-400"></i> Recent Transactions |
|
|
</h2> |
|
|
<div class="card-glass p-4"> |
|
|
<div id="transactionsList"> |
|
|
|
|
|
<div id="transactionsChart" class="h-64 mb-6"></div> |
|
|
<div id="transactionHistory" class="space-y-3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
|
|
|
<div id="sendModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> |
|
|
<div class="card-glass p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Send Crypto</h3> |
|
|
<button id="closeSendModal" class="p-2 rounded-full hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="x"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Asset</label> |
|
|
<select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2"> |
|
|
<option>Ethereum (ETH)</option> |
|
|
<option>Bitcoin (BTC)</option> |
|
|
<option>USD Coin (USDC)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Recipient Address</label> |
|
|
<input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2" placeholder="0x..."> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Amount</label> |
|
|
<div class="flex"> |
|
|
<input type="number" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2" placeholder="0.0"> |
|
|
<button class="bg-gray-700 px-3 rounded-r-lg">MAX</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-blue-600 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"> |
|
|
Send Transaction |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="receiveModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> |
|
|
<div class="card-glass p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Receive Crypto</h3> |
|
|
<button id="closeReceiveModal" class="p-2 rounded-full hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="x"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4 text-center"> |
|
|
<div class="bg-white p-4 rounded-lg inline-block"> |
|
|
|
|
|
<div class="w-48 h-48 bg-gray-200"></div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-300">Scan this QR code with a wallet app</p> |
|
|
<div class="bg-gray-800 rounded-lg p-3"> |
|
|
<p class="text-sm font-mono break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p> |
|
|
</div> |
|
|
<button class="text-blue-400 text-sm flex items-center justify-center mx-auto"> |
|
|
<i data-feather="copy" class="mr-1"></i> Copy Address |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm border-t border-gray-800"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-around"> |
|
|
<button class="flex flex-col items-center text-blue-400"> |
|
|
<i data-feather="home"></i> |
|
|
<span class="text-xs mt-1">Home</span> |
|
|
</button> |
|
|
<a href="explore.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="compass"></i> |
|
|
<span class="text-xs mt-1">Explore</span> |
|
|
</a> |
|
|
<a href="portfolio.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="pie-chart"></i> |
|
|
<span class="text-xs mt-1">Portfolio</span> |
|
|
</a> |
|
|
<a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="user"></i> |
|
|
<span class="text-xs mt-1">Profile</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x1e40af, |
|
|
shininess: 35.00, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.50, |
|
|
zoom: 0.75 |
|
|
}); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const ctx = document.getElementById('transactionsChart').getContext('2d'); |
|
|
const chart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
datasets: [{ |
|
|
label: 'Portfolio Value', |
|
|
data: [ |
|
|
{x: '2023-01-01', y: 1000}, |
|
|
{x: '2023-02-01', y: 1200}, |
|
|
{x: '2023-03-01', y: 950}, |
|
|
{x: '2023-04-01', y: 1500}, |
|
|
{x: '2023-05-01', y: 1800}, |
|
|
{x: '2023-06-01', y: 2000}, |
|
|
{x: '2023-07-01', y: 2200} |
|
|
], |
|
|
borderColor: '#3b82f6', |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
scales: { |
|
|
x: { |
|
|
type: 'time', |
|
|
time: { |
|
|
unit: 'month' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const transactions = [ |
|
|
{ |
|
|
type: 'send', |
|
|
asset: 'ETH', |
|
|
amount: 0.5, |
|
|
address: '0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7', |
|
|
date: '2023-06-15', |
|
|
status: 'completed' |
|
|
}, |
|
|
{ |
|
|
type: 'receive', |
|
|
asset: 'BTC', |
|
|
amount: 0.02, |
|
|
address: '0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7', |
|
|
date: '2023-06-10', |
|
|
status: 'completed' |
|
|
}, |
|
|
{ |
|
|
type: 'swap', |
|
|
asset: 'ETH to USDC', |
|
|
amount: 1.2, |
|
|
address: 'Exchange', |
|
|
date: '2023-05-28', |
|
|
status: 'completed' |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const transactionsList = document.getElementById('transactionHistory'); |
|
|
transactions.forEach(tx => { |
|
|
const txType = tx.type === 'send' ? 'Sent' : tx.type === 'receive' ? 'Received' : 'Swapped'; |
|
|
const txIcon = tx.type === 'send' ? 'arrow-up-right' : tx.type === 'receive' ? 'arrow-down-left' : 'repeat'; |
|
|
const txColor = tx.type === 'send' ? 'text-red-400' : tx.type === 'receive' ? 'text-green-400' : 'text-purple-400'; |
|
|
|
|
|
const txElement = document.createElement('div'); |
|
|
txElement.className = 'transaction-item p-4 rounded-lg bg-gray-800 flex justify-between items-center'; |
|
|
txElement.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-3 p-2 rounded-full ${tx.type === 'send' ? 'bg-red-900' : tx.type === 'receive' ? 'bg-green-900' : 'bg-purple-900'}"> |
|
|
<i data-feather="${txIcon}" class="${txColor}"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">${txType} ${tx.asset}</p> |
|
|
<p class="text-sm text-gray-400">${tx.address.substring(0, 6)}...${tx.address.substring(tx.address.length - 4)}</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">${tx.type === 'send' ? '-' : '+'}${tx.amount} ${tx.asset.split(' ')[0]}</p> |
|
|
<p class="text-sm text-gray-400">${new Date(tx.date).toLocaleDateString()}</p> |
|
|
</div> |
|
|
`; |
|
|
transactionsList.appendChild(txElement); |
|
|
}); |
|
|
|
|
|
const assets = [ |
|
|
{ name: 'Ethereum', symbol: 'ETH', balance: 1.42, price: 1850.32, change24h: 2.4, icon: 'activity' }, |
|
|
{ name: 'Bitcoin', symbol: 'BTC', balance: 0.042, price: 29500.75, change24h: -1.2, icon: 'bitcoin' }, |
|
|
{ name: 'USD Coin', symbol: 'USDC', balance: 500, price: 1.00, change24h: 0.0, icon: 'dollar-sign' }, |
|
|
{ name: 'Polygon', symbol: 'MATIC', balance: 150, price: 0.75, change24h: 5.8, icon: 'hexagon' } |
|
|
]; |
|
|
|
|
|
|
|
|
let totalBalance = 0; |
|
|
assets.forEach(asset => { |
|
|
totalBalance += asset.balance * asset.price; |
|
|
}); |
|
|
document.getElementById('totalBalance').textContent = `$${totalBalance.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`; |
|
|
|
|
|
|
|
|
const assetsList = document.getElementById('assetsList'); |
|
|
assets.forEach(asset => { |
|
|
const value = asset.balance * asset.price; |
|
|
const changeClass = asset.change24h >= 0 ? 'text-green-400' : 'text-red-400'; |
|
|
const changeIcon = asset.change24h >= 0 ? 'trending-up' : 'trending-down'; |
|
|
|
|
|
const row = document.createElement('tr'); |
|
|
row.className = 'border-b border-gray-700 hover:bg-gray-800 transition-colors'; |
|
|
row.innerHTML = ` |
|
|
<td class="py-4 pl-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="coin-icon bg-gray-700 p-2 rounded-full mr-3"> |
|
|
<i data-feather="${asset.icon}" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">${asset.name}</p> |
|
|
<p class="text-sm text-gray-400">${asset.symbol}</p> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4">${asset.balance.toLocaleString(undefined, {maximumFractionDigits: 6})}</td> |
|
|
<td class="py-4">$${asset.price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td> |
|
|
<td class="py-4">$${value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td> |
|
|
<td class="py-4 ${changeClass}"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="${changeIcon}" class="mr-1"></i> |
|
|
${Math.abs(asset.change24h)}% |
|
|
</div> |
|
|
</td> |
|
|
<td class="py-4 pr-2"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 rounded-full bg-blue-800 hover:bg-blue-700 transition-colors"> |
|
|
<i data-feather="arrow-up-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-green-800 hover:bg-green-700 transition-colors"> |
|
|
<i data-feather="arrow-down-left" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
`; |
|
|
assetsList.appendChild(row); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('sendBtn').addEventListener('click', () => { |
|
|
document.getElementById('sendModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('receiveBtn').addEventListener('click', () => { |
|
|
document.getElementById('receiveModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeSendModal').addEventListener('click', () => { |
|
|
document.getElementById('sendModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeReceiveModal').addEventListener('click', () => { |
|
|
document.getElementById('receiveModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('connectWallet').addEventListener('click', async () => { |
|
|
if (window.ethereum) { |
|
|
try { |
|
|
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); |
|
|
console.log('Connected:', accounts[0]); |
|
|
document.getElementById('connectWallet').innerHTML = ` |
|
|
<i data-feather="check-circle" class="mr-2"></i> ${accounts[0].substring(0, 6)}...${accounts[0].substring(38)} |
|
|
`; |
|
|
feather.replace(); |
|
|
} catch (error) { |
|
|
console.error('User rejected request:', error); |
|
|
} |
|
|
} else { |
|
|
alert('Please install MetaMask or another Ethereum wallet'); |
|
|
} |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.getElementById('connectWallet').addEventListener('click', async () => { |
|
|
if (window.ethereum) { |
|
|
try { |
|
|
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); |
|
|
console.log('Connected:', accounts[0]); |
|
|
document.getElementById('connectWallet').innerHTML = ` |
|
|
<i data-feather="check-circle" class="mr-2"></i> ${accounts[0].substring(0, 6)}...${accounts[0].substring(38)} |
|
|
`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const transactionsList = document.getElementById('transactionHistory'); |
|
|
const newTx = document.createElement('div'); |
|
|
newTx.className = 'transaction-item p-4 rounded-lg bg-gray-800 flex justify-between items-center'; |
|
|
newTx.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-3 p-2 rounded-full bg-green-900"> |
|
|
<i data-feather="arrow-down-left" class="text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Received ETH</p> |
|
|
<p class="text-sm text-gray-400">${accounts[0].substring(0, 6)}...${accounts[0].substring(accounts[0].length - 4)}</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">+0.1 ETH</p> |
|
|
<p class="text-sm text-gray-400">Just now</p> |
|
|
</div> |
|
|
`; |
|
|
transactionsList.prepend(newTx); |
|
|
feather.replace(); |
|
|
}, 1500); |
|
|
|
|
|
feather.replace(); |
|
|
} catch (error) { |
|
|
console.error('User rejected request:', error); |
|
|
} |
|
|
} else { |
|
|
alert('Please install MetaMask or another Ethereum wallet'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
