Hugging Face's logo

Spaces:
shettyvignesh91
/
cryptopouch-the-digital-treasure-bag
Running

App Files Community
shettyvignesh91 commited on
Commit
9949ed7
·
verified ·
1 Parent(s): b01ad0b

create a web application of crypto wallet with all functional

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +345 -18
  3. receive.html +119 -0
  4. send.html +146 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Cryptopouch The Digital Treasure Bag
3
- emoji: 🌍
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CryptoPouch - The Digital Treasure Bag 🎒
3
+ colorFrom: green
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,346 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CryptoPouch - Digital Wallet</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
13
+ <style>
14
+ .gradient-bg {
15
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
16
+ }
17
+ .card-glass {
18
+ backdrop-filter: blur(16px) saturate(180%);
19
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
20
+ background-color: rgba(17, 25, 40, 0.75);
21
+ border-radius: 12px;
22
+ border: 1px solid rgba(255, 255, 255, 0.125);
23
+ }
24
+ .coin-icon {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .coin-icon:hover {
28
+ transform: scale(1.1) rotate(10deg);
29
+ }
30
+ .transaction-item {
31
+ transition: all 0.2s ease;
32
+ }
33
+ .transaction-item:hover {
34
+ transform: translateY(-2px);
35
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="gradient-bg min-h-screen text-white font-sans">
40
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
41
+ <div class="relative z-10">
42
+ <!-- Header -->
43
+ <header class="container mx-auto px-4 py-6 flex justify-between items-center">
44
+ <div class="flex items-center space-x-2">
45
+ <i data-feather="package" class="text-purple-400"></i>
46
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">CryptoPouch</h1>
47
+ </div>
48
+ <div class="flex items-center space-x-4">
49
+ <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">
50
+ <i data-feather="user" class="mr-2"></i> Connect Wallet
51
+ </button>
52
+ <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors">
53
+ <i data-feather="settings"></i>
54
+ </button>
55
+ </div>
56
+ </header>
57
+
58
+ <!-- Main Content -->
59
+ <main class="container mx-auto px-4 py-6">
60
+ <!-- Balance Overview -->
61
+ <section class="mb-8">
62
+ <div class="card-glass p-6 mb-6">
63
+ <div class="flex justify-between items-center mb-4">
64
+ <h2 class="text-xl font-semibold">Total Balance</h2>
65
+ <div class="flex space-x-2">
66
+ <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
67
+ <i data-feather="eye"></i>
68
+ </button>
69
+ <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
70
+ <i data-feather="refresh-cw"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ <div class="flex items-end space-x-2">
75
+ <p class="text-4xl font-bold" id="totalBalance">$0.00</p>
76
+ <p class="text-green-400 text-sm mb-2 flex items-center">
77
+ <i data-feather="trending-up" class="mr-1"></i> +2.4%
78
+ </p>
79
+ </div>
80
+ <div class="flex justify-between mt-6">
81
+ <button id="sendBtn" class="px-4 py-2 bg-blue-600 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center">
82
+ <i data-feather="arrow-up-right" class="mr-2"></i> Send
83
+ </button>
84
+ <button id="receiveBtn" class="px-4 py-2 bg-green-600 rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center">
85
+ <i data-feather="arrow-down-left" class="mr-2"></i> Receive
86
+ </button>
87
+ <button id="swapBtn" class="px-4 py-2 bg-purple-600 rounded-lg font-medium hover:bg-purple-700 transition-colors flex items-center">
88
+ <i data-feather="repeat" class="mr-2"></i> Swap
89
+ </button>
90
+ <button id="buyBtn" class="px-4 py-2 bg-orange-600 rounded-lg font-medium hover:bg-orange-700 transition-colors flex items-center">
91
+ <i data-feather="dollar-sign" class="mr-2"></i> Buy
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </section>
96
+
97
+ <!-- Assets Section -->
98
+ <section class="mb-8">
99
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
100
+ <i data-feather="dollar-sign" class="mr-2 text-yellow-400"></i> Your Assets
101
+ </h2>
102
+ <div class="card-glass p-4 overflow-x-auto">
103
+ <table class="w-full">
104
+ <thead>
105
+ <tr class="text-gray-400 text-left border-b border-gray-700">
106
+ <th class="pb-3 pl-2">Asset</th>
107
+ <th class="pb-3">Balance</th>
108
+ <th class="pb-3">Price</th>
109
+ <th class="pb-3">Value</th>
110
+ <th class="pb-3">24h</th>
111
+ <th class="pb-3 pr-2">Actions</th>
112
+ </tr>
113
+ </thead>
114
+ <tbody id="assetsList">
115
+ <!-- Assets will be populated here -->
116
+ </tbody>
117
+ </table>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Transaction History -->
122
+ <section class="mb-8">
123
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
124
+ <i data-feather="clock" class="mr-2 text-blue-400"></i> Recent Transactions
125
+ </h2>
126
+ <div class="card-glass p-4">
127
+ <div id="transactionsList">
128
+ <!-- Transactions will be populated here -->
129
+ <div class="text-center py-8 text-gray-400">
130
+ <i data-feather="package" class="mx-auto mb-2" width="48" height="48"></i>
131
+ <p>No transactions yet</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+ </main>
137
+
138
+ <!-- Modals -->
139
+ <!-- Send Modal -->
140
+ <div id="sendModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
141
+ <div class="card-glass p-6 w-full max-w-md">
142
+ <div class="flex justify-between items-center mb-4">
143
+ <h3 class="text-xl font-semibold">Send Crypto</h3>
144
+ <button id="closeSendModal" class="p-2 rounded-full hover:bg-gray-700 transition-colors">
145
+ <i data-feather="x"></i>
146
+ </button>
147
+ </div>
148
+ <div class="space-y-4">
149
+ <div>
150
+ <label class="block text-sm font-medium mb-1">Asset</label>
151
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
152
+ <option>Ethereum (ETH)</option>
153
+ <option>Bitcoin (BTC)</option>
154
+ <option>USD Coin (USDC)</option>
155
+ </select>
156
+ </div>
157
+ <div>
158
+ <label class="block text-sm font-medium mb-1">Recipient Address</label>
159
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2" placeholder="0x...">
160
+ </div>
161
+ <div>
162
+ <label class="block text-sm font-medium mb-1">Amount</label>
163
+ <div class="flex">
164
+ <input type="number" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-2" placeholder="0.0">
165
+ <button class="bg-gray-700 px-3 rounded-r-lg">MAX</button>
166
+ </div>
167
+ </div>
168
+ <button class="w-full bg-blue-600 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
169
+ Send Transaction
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Receive Modal -->
176
+ <div id="receiveModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
177
+ <div class="card-glass p-6 w-full max-w-md">
178
+ <div class="flex justify-between items-center mb-4">
179
+ <h3 class="text-xl font-semibold">Receive Crypto</h3>
180
+ <button id="closeReceiveModal" class="p-2 rounded-full hover:bg-gray-700 transition-colors">
181
+ <i data-feather="x"></i>
182
+ </button>
183
+ </div>
184
+ <div class="space-y-4 text-center">
185
+ <div class="bg-white p-4 rounded-lg inline-block">
186
+ <!-- QR Code Placeholder -->
187
+ <div class="w-48 h-48 bg-gray-200"></div>
188
+ </div>
189
+ <p class="text-sm text-gray-300">Scan this QR code with a wallet app</p>
190
+ <div class="bg-gray-800 rounded-lg p-3">
191
+ <p class="text-sm font-mono break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p>
192
+ </div>
193
+ <button class="text-blue-400 text-sm flex items-center justify-center mx-auto">
194
+ <i data-feather="copy" class="mr-1"></i> Copy Address
195
+ </button>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Bottom Navigation -->
201
+ <nav class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm border-t border-gray-800">
202
+ <div class="container mx-auto px-4 py-3">
203
+ <div class="flex justify-around">
204
+ <button class="flex flex-col items-center text-blue-400">
205
+ <i data-feather="home"></i>
206
+ <span class="text-xs mt-1">Home</span>
207
+ </button>
208
+ <button class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
209
+ <i data-feather="compass"></i>
210
+ <span class="text-xs mt-1">Explore</span>
211
+ </button>
212
+ <button class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
213
+ <i data-feather="pie-chart"></i>
214
+ <span class="text-xs mt-1">Portfolio</span>
215
+ </button>
216
+ <button class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
217
+ <i data-feather="user"></i>
218
+ <span class="text-xs mt-1">Profile</span>
219
+ </button>
220
+ </div>
221
+ </div>
222
+ </nav>
223
+ </div>
224
+
225
+ <script>
226
+ // Initialize Vanta.js background
227
+ VANTA.WAVES({
228
+ el: "#vanta-bg",
229
+ mouseControls: true,
230
+ touchControls: true,
231
+ gyroControls: false,
232
+ minHeight: 200.00,
233
+ minWidth: 200.00,
234
+ scale: 1.00,
235
+ scaleMobile: 1.00,
236
+ color: 0x1e40af,
237
+ shininess: 35.00,
238
+ waveHeight: 15.00,
239
+ waveSpeed: 0.50,
240
+ zoom: 0.75
241
+ });
242
+
243
+ // Initialize Feather Icons
244
+ document.addEventListener('DOMContentLoaded', function() {
245
+ feather.replace();
246
+
247
+ // Sample data for assets
248
+ const assets = [
249
+ { name: 'Ethereum', symbol: 'ETH', balance: 1.42, price: 1850.32, change24h: 2.4, icon: 'activity' },
250
+ { name: 'Bitcoin', symbol: 'BTC', balance: 0.042, price: 29500.75, change24h: -1.2, icon: 'bitcoin' },
251
+ { name: 'USD Coin', symbol: 'USDC', balance: 500, price: 1.00, change24h: 0.0, icon: 'dollar-sign' },
252
+ { name: 'Polygon', symbol: 'MATIC', balance: 150, price: 0.75, change24h: 5.8, icon: 'hexagon' }
253
+ ];
254
+
255
+ // Calculate total balance
256
+ let totalBalance = 0;
257
+ assets.forEach(asset => {
258
+ totalBalance += asset.balance * asset.price;
259
+ });
260
+ document.getElementById('totalBalance').textContent = `$${totalBalance.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
261
+
262
+ // Populate assets table
263
+ const assetsList = document.getElementById('assetsList');
264
+ assets.forEach(asset => {
265
+ const value = asset.balance * asset.price;
266
+ const changeClass = asset.change24h >= 0 ? 'text-green-400' : 'text-red-400';
267
+ const changeIcon = asset.change24h >= 0 ? 'trending-up' : 'trending-down';
268
+
269
+ const row = document.createElement('tr');
270
+ row.className = 'border-b border-gray-700 hover:bg-gray-800 transition-colors';
271
+ row.innerHTML = `
272
+ <td class="py-4 pl-2">
273
+ <div class="flex items-center">
274
+ <div class="coin-icon bg-gray-700 p-2 rounded-full mr-3">
275
+ <i data-feather="${asset.icon}" class="text-yellow-400"></i>
276
+ </div>
277
+ <div>
278
+ <p class="font-medium">${asset.name}</p>
279
+ <p class="text-sm text-gray-400">${asset.symbol}</p>
280
+ </div>
281
+ </div>
282
+ </td>
283
+ <td class="py-4">${asset.balance.toLocaleString(undefined, {maximumFractionDigits: 6})}</td>
284
+ <td class="py-4">$${asset.price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
285
+ <td class="py-4">$${value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
286
+ <td class="py-4 ${changeClass}">
287
+ <div class="flex items-center">
288
+ <i data-feather="${changeIcon}" class="mr-1"></i>
289
+ ${Math.abs(asset.change24h)}%
290
+ </div>
291
+ </td>
292
+ <td class="py-4 pr-2">
293
+ <div class="flex space-x-2">
294
+ <button class="p-2 rounded-full bg-blue-800 hover:bg-blue-700 transition-colors">
295
+ <i data-feather="arrow-up-right" class="w-4 h-4"></i>
296
+ </button>
297
+ <button class="p-2 rounded-full bg-green-800 hover:bg-green-700 transition-colors">
298
+ <i data-feather="arrow-down-left" class="w-4 h-4"></i>
299
+ </button>
300
+ </div>
301
+ </td>
302
+ `;
303
+ assetsList.appendChild(row);
304
+ });
305
+
306
+ // Modal handlers
307
+ document.getElementById('sendBtn').addEventListener('click', () => {
308
+ document.getElementById('sendModal').classList.remove('hidden');
309
+ });
310
+
311
+ document.getElementById('receiveBtn').addEventListener('click', () => {
312
+ document.getElementById('receiveModal').classList.remove('hidden');
313
+ });
314
+
315
+ document.getElementById('closeSendModal').addEventListener('click', () => {
316
+ document.getElementById('sendModal').classList.add('hidden');
317
+ });
318
+
319
+ document.getElementById('closeReceiveModal').addEventListener('click', () => {
320
+ document.getElementById('receiveModal').classList.add('hidden');
321
+ });
322
+
323
+ // Connect wallet handler
324
+ document.getElementById('connectWallet').addEventListener('click', async () => {
325
+ if (window.ethereum) {
326
+ try {
327
+ const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
328
+ console.log('Connected:', accounts[0]);
329
+ document.getElementById('connectWallet').innerHTML = `
330
+ <i data-feather="check-circle" class="mr-2"></i> ${accounts[0].substring(0, 6)}...${accounts[0].substring(38)}
331
+ `;
332
+ feather.replace();
333
+ } catch (error) {
334
+ console.error('User rejected request:', error);
335
+ }
336
+ } else {
337
+ alert('Please install MetaMask or another Ethereum wallet');
338
+ }
339
+ });
340
+
341
+ // Refresh icons after dynamic content
342
+ feather.replace();
343
+ });
344
+ </script>
345
+ </body>
346
  </html>
receive.html ADDED
@@ -0,0 +1,119 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Receive Crypto - CryptoPouch</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
13
+ }
14
+ .card-glass {
15
+ backdrop-filter: blur(16px) saturate(180%);
16
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
17
+ background-color: rgba(17, 25, 40, 0.75);
18
+ border-radius: 12px;
19
+ border: 1px solid rgba(255, 255, 255, 0.125);
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="gradient-bg min-h-screen text-white font-sans">
24
+ <div class="container mx-auto px-4 py-6">
25
+ <!-- Header -->
26
+ <header class="mb-8 flex justify-between items-center">
27
+ <div class="flex items-center space-x-2">
28
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-800 transition-colors">
29
+ <i data-feather="arrow-left"></i>
30
+ </a>
31
+ <h1 class="text-2xl font-bold">Receive Crypto</h1>
32
+ </div>
33
+ <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors">
34
+ <i data-feather="user"></i>
35
+ </button>
36
+ </header>
37
+
38
+ <!-- Receive Content -->
39
+ <div class="max-w-md mx-auto">
40
+ <div class="card-glass p-6 mb-6">
41
+ <div class="flex justify-between items-center mb-4">
42
+ <h2 class="text-lg font-semibold">Select Asset to Receive</h2>
43
+ <select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm">
44
+ <option>ETH</option>
45
+ <option>BTC</option>
46
+ <option>USDC</option>
47
+ <option>MATIC</option>
48
+ </select>
49
+ </div>
50
+
51
+ <div class="bg-white p-6 rounded-lg mb-4 flex justify-center">
52
+ <!-- QR Code Placeholder -->
53
+ <div class="w-48 h-48 bg-gray-200"></div>
54
+ </div>
55
+
56
+ <div class="text-center">
57
+ <p class="text-sm text-gray-300 mb-4">Scan this QR code with a wallet app to send crypto</p>
58
+
59
+ <div class="bg-gray-800 rounded-lg p-3 mb-4">
60
+ <p class="text-sm font-mono break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p>
61
+ </div>
62
+
63
+ <button class="text-blue-400 text-sm flex items-center justify-center mx-auto mb-6">
64
+ <i data-feather="copy" class="mr-1"></i> Copy Address
65
+ </button>
66
+
67
+ <div class="flex justify-center space-x-4">
68
+ <button class="text-blue-400 text-sm flex items-center">
69
+ <i data-feather="share-2" class="mr-1"></i> Share
70
+ </button>
71
+ <button class="text-blue-400 text-sm flex items-center">
72
+ <i data-feather="download" class="mr-1"></i> Save Image
73
+ </button>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="card-glass p-6">
79
+ <h2 class="text-lg font-semibold mb-4">How to Receive</h2>
80
+ <div class="space-y-4">
81
+ <div class="flex items-start">
82
+ <div class="bg-blue-600 rounded-full p-2 mr-3">
83
+ <i data-feather="copy" class="w-4 h-4"></i>
84
+ </div>
85
+ <div>
86
+ <h3 class="font-medium">Copy Address</h3>
87
+ <p class="text-sm text-gray-400">Copy the wallet address above and paste it in your sending app</p>
88
+ </div>
89
+ </div>
90
+ <div class="flex items-start">
91
+ <div class="bg-purple-600 rounded-full p-2 mr-3">
92
+ <i data-feather="scan" class="w-4 h-4"></i>
93
+ </div>
94
+ <div>
95
+ <h3 class="font-medium">Scan QR Code</h3>
96
+ <p class="text-sm text-gray-400">Let the sender scan your QR code with their wallet app</p>
97
+ </div>
98
+ </div>
99
+ <div class="flex items-start">
100
+ <div class="bg-green-600 rounded-full p-2 mr-3">
101
+ <i data-feather="shield" class="w-4 h-4"></i>
102
+ </div>
103
+ <div>
104
+ <h3 class="font-medium">Double Check</h3>
105
+ <p class="text-sm text-gray-400">Always verify the address before receiving funds</p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <script>
114
+ document.addEventListener('DOMContentLoaded', function() {
115
+ feather.replace();
116
+ });
117
+ </script>
118
+ </body>
119
+ </html>
send.html ADDED
@@ -0,0 +1,146 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Send Crypto - CryptoPouch</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
13
+ }
14
+ .card-glass {
15
+ backdrop-filter: blur(16px) saturate(180%);
16
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
17
+ background-color: rgba(17, 25, 40, 0.75);
18
+ border-radius: 12px;
19
+ border: 1px solid rgba(255, 255, 255, 0.125);
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="gradient-bg min-h-screen text-white font-sans">
24
+ <div class="container mx-auto px-4 py-6">
25
+ <!-- Header -->
26
+ <header class="mb-8 flex justify-between items-center">
27
+ <div class="flex items-center space-x-2">
28
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-800 transition-colors">
29
+ <i data-feather="arrow-left"></i>
30
+ </a>
31
+ <h1 class="text-2xl font-bold">Send Crypto</h1>
32
+ </div>
33
+ <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors">
34
+ <i data-feather="user"></i>
35
+ </button>
36
+ </header>
37
+
38
+ <!-- Send Form -->
39
+ <div class="card-glass p-6 max-w-md mx-auto">
40
+ <div class="space-y-6">
41
+ <div>
42
+ <label class="block text-sm font-medium mb-2">Select Asset</label>
43
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
44
+ <option>Ethereum (ETH)</option>
45
+ <option>Bitcoin (BTC)</option>
46
+ <option>USD Coin (USDC)</option>
47
+ <option>Polygon (MATIC)</option>
48
+ </select>
49
+ </div>
50
+
51
+ <div>
52
+ <label class="block text-sm font-medium mb-2">Recipient Address</label>
53
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3" placeholder="0x...">
54
+ <div class="flex justify-between mt-2">
55
+ <button class="text-blue-400 text-sm flex items-center">
56
+ <i data-feather="user" class="mr-1 w-4 h-4"></i> Contacts
57
+ </button>
58
+ <button class="text-blue-400 text-sm flex items-center">
59
+ <i data-feather="scan" class="mr-1 w-4 h-4"></i> Scan QR
60
+ </button>
61
+ </div>
62
+ </div>
63
+
64
+ <div>
65
+ <label class="block text-sm font-medium mb-2">Amount</label>
66
+ <div class="flex items-center">
67
+ <input type="number" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-3" placeholder="0.0">
68
+ <button class="bg-gray-700 px-4 py-3 rounded-r-lg">MAX</button>
69
+ </div>
70
+ <div class="flex justify-between mt-2 text-sm text-gray-400">
71
+ <span>Balance: 1.42 ETH</span>
72
+ <span>≈ $2,628.45</span>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="pt-4">
77
+ <button class="w-full bg-blue-600 py-4 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center">
78
+ <i data-feather="arrow-up-right" class="mr-2"></i> Send Now
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Recent Contacts -->
85
+ <div class="mt-8 max-w-md mx-auto">
86
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
87
+ <i data-feather="users" class="mr-2"></i> Recent Contacts
88
+ </h2>
89
+ <div class="card-glass p-4">
90
+ <div class="grid grid-cols-2 gap-3">
91
+ <div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">
92
+ <div class="flex items-center">
93
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3">
94
+ <i data-feather="user"></i>
95
+ </div>
96
+ <div>
97
+ <p class="font-medium">Alice</p>
98
+ <p class="text-xs text-gray-400 truncate">0x1a2...b3c4</p>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ <div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">
103
+ <div class="flex items-center">
104
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
105
+ <i data-feather="user"></i>
106
+ </div>
107
+ <div>
108
+ <p class="font-medium">Bob</p>
109
+ <p class="text-xs text-gray-400 truncate">0x4d5...e6f7</p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">
114
+ <div class="flex items-center">
115
+ <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mr-3">
116
+ <i data-feather="user"></i>
117
+ </div>
118
+ <div>
119
+ <p class="font-medium">Charlie</p>
120
+ <p class="text-xs text-gray-400 truncate">0x7g8...h9i0</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ <div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer">
125
+ <div class="flex items-center">
126
+ <div class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center mr-3">
127
+ <i data-feather="user"></i>
128
+ </div>
129
+ <div>
130
+ <p class="font-medium">Dave</p>
131
+ <p class="text-xs text-gray-400 truncate">0x0j1...k2l3</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <script>
141
+ document.addEventListener('DOMContentLoaded', function() {
142
+ feather.replace();
143
+ });
144
+ </script>
145
+ </body>
146
+ </html>