Hugging Face's logo

Spaces:
Cbteam
/
coinbd
No application file

App Files Community
Cbteam commited on
Commit
044bd05
·
verified ·
1 Parent(s): 42d5339

Create a clone Coinbase supporter website with wallet connect feature & button added to it - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +444 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Coinb
3
- emoji: 🔥
4
- colorFrom: red
5
- colorTo: purple
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: coinb
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,445 @@
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>Coinbase Support | Crypto Wallet & Exchange Help</title>
7
+ <link rel="icon" type="image/x-icon" href="https://static.photos/blue/200x200/1">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/@walletconnect/web3-provider@1.7.8/dist/umd/index.min.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/web3@1.8.1/dist/web3.min.js"></script>
15
+ <style>
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #1652f0 0%, #1652f0 50%, #0a46e4 100%);
18
+ }
19
+ .wallet-btn:hover {
20
+ transform: translateY(-2px);
21
+ box-shadow: 0 10px 20px rgba(22, 82, 240, 0.2);
22
+ }
23
+ .support-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-sans antialiased text-gray-800">
30
+ <!-- Navigation -->
31
+ <nav class="bg-white shadow-sm">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-16">
34
+ <div class="flex items-center">
35
+ <div class="flex-shrink-0 flex items-center">
36
+ <img class="h-8 w-auto" src="https://static.photos/blue/200x200/1" alt="Coinbase Logo">
37
+ <span class="ml-2 text-xl font-bold text-blue-600">Coinbase</span>
38
+ </div>
39
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
40
+ <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Support</a>
41
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Products</a>
42
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a>
43
+ </div>
44
+ </div>
45
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
46
+ <button id="connectWalletBtn" class="wallet-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all duration-300">
47
+ Connect Wallet
48
+ </button>
49
+ </div>
50
+ <div class="-mr-2 flex items-center sm:hidden">
51
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
52
+ <i data-feather="menu"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </nav>
58
+
59
+ <!-- Hero Section -->
60
+ <div class="gradient-bg text-white">
61
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
62
+ <div class="text-center">
63
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl" data-aos="fade-down">
64
+ Coinbase Support Center
65
+ </h1>
66
+ <p class="mt-6 max-w-3xl mx-auto text-xl" data-aos="fade-up" data-aos-delay="100">
67
+ Get help with your account, trading, wallet, and more. Our support team is here 24/7.
68
+ </p>
69
+ <div class="mt-10 flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200">
70
+ <div class="relative">
71
+ <input type="text" placeholder="Search help articles..." class="py-3 px-4 w-96 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
72
+ <button class="absolute right-2 top-2 text-gray-400 hover:text-gray-600">
73
+ <i data-feather="search"></i>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Wallet Connection Modal -->
82
+ <div id="walletModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
83
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
84
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
85
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
86
+ </div>
87
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
88
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
89
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
90
+ <div class="sm:flex sm:items-start">
91
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
92
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
93
+ Connect Your Wallet
94
+ </h3>
95
+ <div class="mt-4">
96
+ <p class="text-sm text-gray-500">
97
+ Choose your preferred wallet provider to connect to Coinbase Support.
98
+ </p>
99
+ <div class="mt-6 space-y-4">
100
+ <button onclick="connectWallet('metamask')" class="w-full flex items-center justify-between px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50">
101
+ <div class="flex items-center">
102
+ <img src="https://static.photos/blue/200x200/2" class="h-8 w-8 mr-3" alt="MetaMask">
103
+ <span>MetaMask</span>
104
+ </div>
105
+ <i data-feather="arrow-right"></i>
106
+ </button>
107
+ <button onclick="connectWallet('walletconnect')" class="w-full flex items-center justify-between px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50">
108
+ <div class="flex items-center">
109
+ <img src="https://static.photos/blue/200x200/3" class="h-8 w-8 mr-3" alt="WalletConnect">
110
+ <span>WalletConnect</span>
111
+ </div>
112
+ <i data-feather="arrow-right"></i>
113
+ </button>
114
+ <button onclick="connectWallet('coinbase')" class="w-full flex items-center justify-between px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50">
115
+ <div class="flex items-center">
116
+ <img src="https://static.photos/blue/200x200/4" class="h-8 w-8 mr-3" alt="Coinbase Wallet">
117
+ <span>Coinbase Wallet</span>
118
+ </div>
119
+ <i data-feather="arrow-right"></i>
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
127
+ <button type="button" onclick="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
128
+ Cancel
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Support Categories -->
136
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
137
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">How can we help you today?</h2>
138
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
139
+ <div class="support-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
140
+ <div class="p-6">
141
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
142
+ <i data-feather="user"></i>
143
+ </div>
144
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Account Access</h3>
145
+ <p class="text-gray-500">
146
+ Troubleshoot login issues, account recovery, and verification problems.
147
+ </p>
148
+ <a href="#" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
149
+ Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
150
+ </a>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="support-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
155
+ <div class="p-6">
156
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-600 mb-4">
157
+ <i data-feather="dollar-sign"></i>
158
+ </div>
159
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Trading & Funding</h3>
160
+ <p class="text-gray-500">
161
+ Get help with buying, selling, deposits, withdrawals, and transfers.
162
+ </p>
163
+ <a href="#" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
164
+ Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
165
+ </a>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="support-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
170
+ <div class="p-6">
171
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
172
+ <i data-feather="credit-card"></i>
173
+ </div>
174
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Wallet Support</h3>
175
+ <p class="text-gray-500">
176
+ Assistance with Coinbase Wallet, transactions, and security features.
177
+ </p>
178
+ <a href="#" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
179
+ Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
180
+ </a>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="support-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="400">
185
+ <div class="p-6">
186
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-100 text-yellow-600 mb-4">
187
+ <i data-feather="shield"></i>
188
+ </div>
189
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Security</h3>
190
+ <p class="text-gray-500">
191
+ Protect your account, enable 2FA, and learn about security best practices.
192
+ </p>
193
+ <a href="#" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
194
+ Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
195
+ </a>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="support-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="500">
200
+ <div class="p-6">
201
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-100 text-red-600 mb-4">
202
+ <i data-feather="help-circle"></i>
203
+ </div>
204
+ <h3 class="text-lg font-medium text-gray-900 mb-2">General Help</h3>
205
+ <p class="text-gray-500">
206
+ FAQs, troubleshooting, and general questions about Coinbase services.
207
+ </p>
208
+ <a href="#" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
209
+ Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
210
+ </a>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="support-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300" data-aos="fade-up" data-aos-delay="600">
215
+ <div class="p-6">
216
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-4">
217
+ <i data-feather="message-square"></i>
218
+ </div>
219
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Contact Support</h3>
220
+ <p class="text-gray-500">
221
+ Can't find what you need? Contact our support team directly.
222
+ </p>
223
+ <a href="#" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
224
+ Contact us <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
225
+ </a>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Connected Wallet Info -->
232
+ <div id="walletInfo" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 bg-blue-50 rounded-lg mb-16 hidden">
233
+ <div class="flex items-center justify-between">
234
+ <div class="flex items-center">
235
+ <div class="flex-shrink-0">
236
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
237
+ <i data-feather="check-circle" class="text-blue-600"></i>
238
+ </div>
239
+ </div>
240
+ <div class="ml-3">
241
+ <h3 class="text-lg font-medium text-blue-800">Wallet Connected</h3>
242
+ <p id="walletAddress" class="text-sm text-blue-600 truncate max-w-xs">0x742d35Cc6634C0532925a3b844Bc454e4438f44e</p>
243
+ </div>
244
+ </div>
245
+ <button onclick="disconnectWallet()" class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200">
246
+ Disconnect
247
+ </button>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Popular Articles -->
252
+ <div class="bg-gray-50 py-16">
253
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
254
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Popular Help Articles</h2>
255
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
256
+ <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
257
+ <div class="p-6">
258
+ <h3 class="text-lg font-medium text-gray-900 mb-2">How to verify my identity</h3>
259
+ <p class="text-gray-500 mb-4">
260
+ Step-by-step guide to completing identity verification on Coinbase.
261
+ </p>
262
+ <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800">
263
+ Read article <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
264
+ </a>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200">
269
+ <div class="p-6">
270
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Troubleshooting deposit issues</h3>
271
+ <p class="text-gray-500 mb-4">
272
+ What to do when your deposit isn't showing in your account.
273
+ </p>
274
+ <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800">
275
+ Read article <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
276
+ </a>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="300">
281
+ <div class="p-6">
282
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Setting up two-factor authentication</h3>
283
+ <p class="text-gray-500 mb-4">
284
+ How to enable 2FA for enhanced account security.
285
+ </p>
286
+ <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800">
287
+ Read article <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
288
+ </a>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Footer -->
296
+ <footer class="bg-gray-800 text-white">
297
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
298
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
299
+ <div>
300
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Products</h3>
301
+ <ul class="space-y-2">
302
+ <li><a href="#" class="text-gray-400 hover:text-white">Exchange</a></li>
303
+ <li><a href="#" class="text-gray-400 hover:text-white">Wallet</a></li>
304
+ <li><a href="#" class="text-gray-400 hover:text-white">Commerce</a></li>
305
+ <li><a href="#" class="text-gray-400 hover:text-white">Earn</a></li>
306
+ </ul>
307
+ </div>
308
+ <div>
309
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Resources</h3>
310
+ <ul class="space-y-2">
311
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
312
+ <li><a href="#" class="text-gray-400 hover:text-white">Status</a></li>
313
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
314
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
315
+ </ul>
316
+ </div>
317
+ <div>
318
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Company</h3>
319
+ <ul class="space-y-2">
320
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
321
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
322
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
323
+ <li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li>
324
+ </ul>
325
+ </div>
326
+ <div>
327
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Connect</h3>
328
+ <div class="flex space-x-4">
329
+ <a href="#" class="text-gray-400 hover:text-white">
330
+ <i data-feather="twitter"></i>
331
+ </a>
332
+ <a href="#" class="text-gray-400 hover:text-white">
333
+ <i data-feather="facebook"></i>
334
+ </a>
335
+ <a href="#" class="text-gray-400 hover:text-white">
336
+ <i data-feather="instagram"></i>
337
+ </a>
338
+ <a href="#" class="text-gray-400 hover:text-white">
339
+ <i data-feather="linkedin"></i>
340
+ </a>
341
+ </div>
342
+ <div class="mt-4">
343
+ <button id="mobileConnectBtn" class="wallet-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all duration-300">
344
+ Connect Wallet
345
+ </button>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ <div class="mt-8 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
350
+ <p class="text-gray-400 text-sm">
351
+ &copy; 2023 Coinbase Support. All rights reserved.
352
+ </p>
353
+ <div class="flex space-x-6 mt-4 md:mt-0">
354
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
355
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
356
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </footer>
361
+
362
+ <script>
363
+ // Initialize AOS animations
364
+ AOS.init({
365
+ duration: 800,
366
+ easing: 'ease-in-out',
367
+ once: true
368
+ });
369
+
370
+ // Initialize Feather Icons
371
+ feather.replace();
372
+
373
+ // Wallet connection functionality
374
+ let walletConnected = false;
375
+ let walletAddress = '';
376
+
377
+ document.getElementById('connectWalletBtn').addEventListener('click', openModal);
378
+ document.getElementById('mobileConnectBtn').addEventListener('click', openModal);
379
+
380
+ function openModal() {
381
+ document.getElementById('walletModal').classList.remove('hidden');
382
+ }
383
+
384
+ function closeModal() {
385
+ document.getElementById('walletModal').classList.add('hidden');
386
+ }
387
+
388
+ function connectWallet(provider) {
389
+ // Simulate wallet connection
390
+ walletConnected = true;
391
+ walletAddress = '0x' + Math.random().toString(16).substr(2, 40);
392
+
393
+ // Update UI
394
+ document.getElementById('walletModal').classList.add('hidden');
395
+ document.getElementById('walletInfo').classList.remove('hidden');
396
+ document.getElementById('walletAddress').textContent = walletAddress;
397
+
398
+ // Update button state
399
+ document.getElementById('connectWalletBtn').textContent = 'Wallet Connected';
400
+ document.getElementById('connectWalletBtn').classList.remove('bg-blue-600', 'hover:bg-blue-700');
401
+ document.getElementById('connectWalletBtn').classList.add('bg-green-500', 'hover:bg-green-600');
402
+
403
+ // Show success notification
404
+ showNotification('Wallet connected successfully!');
405
+ }
406
+
407
+ function disconnectWallet() {
408
+ walletConnected = false;
409
+ walletAddress = '';
410
+
411
+ // Update UI
412
+ document.getElementById('walletInfo').classList.add('hidden');
413
+
414
+ // Update button state
415
+ document.getElementById('connectWalletBtn').textContent = 'Connect Wallet';
416
+ document.getElementById('connectWalletBtn').classList.remove('bg-green-500', 'hover:bg-green-600');
417
+ document.getElementById('connectWalletBtn').classList.add('bg-blue-600', 'hover:bg-blue-700');
418
+
419
+ // Show notification
420
+ showNotification('Wallet disconnected');
421
+ }
422
+
423
+ function showNotification(message) {
424
+ const notification = document.createElement('div');
425
+ notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center';
426
+ notification.innerHTML = `
427
+ <i data-feather="check-circle" class="mr-2"></i>
428
+ <span>${message}</span>
429
+ `;
430
+ document.body.appendChild(notification);
431
+ feather.replace();
432
+
433
+ setTimeout(() => {
434
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
435
+ setTimeout(() => {
436
+ notification.remove();
437
+ }, 300);
438
+ }, 3000);
439
+ }
440
+
441
+ // Real WalletConnect integration would go here
442
+ // This is a simplified version for demonstration
443
+ </script>
444
+ </body>
445
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a clone Coinbase supporter website with wallet connect feature & button added to it