Hugging Face's logo

Spaces:
Kingmaxjj
/
max-flasher-1-0
Running

App Files Community
Kingmaxjj commited on
Commit
528eab3
·
verified ·
1 Parent(s): 95f4884

Cashapp sandbox clone that mimic real iOS Cashapp interface and features and functionality it also add balance send balance and display main balance in USD and under it display balance in BTC and EUR 1 BTC is 117,356 in USD so make everything functional also add a sign in and sign up page were users get to sign up to get all the amazing features all tabs and buttons are working when signing up ask user username first name last name password then use user inputed details for the profile and cashtag name of the software is MAX FLASHER 1.0 also allow users to send balance in BTC - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1023 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Max Flasher 1 0
3
- emoji: 💻
4
  colorFrom: gray
5
- colorTo: yellow
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: max-flasher-1-0
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: gray
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,1023 @@
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>MAX FLASHER 1.0 - Cash App Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f3f4f6;
15
+ -webkit-tap-highlight-color: transparent;
16
+ }
17
+
18
+ .cash-green {
19
+ background-color: #00D54B;
20
+ }
21
+
22
+ .cash-green-text {
23
+ color: #00D54B;
24
+ }
25
+
26
+ .cash-dark {
27
+ background-color: #121212;
28
+ }
29
+
30
+ .tab-active {
31
+ border-bottom: 3px solid #00D54B;
32
+ color: #00D54B;
33
+ }
34
+
35
+ .slide-up {
36
+ animation: slideUp 0.3s ease-out forwards;
37
+ }
38
+
39
+ .slide-down {
40
+ animation: slideDown 0.3s ease-out forwards;
41
+ }
42
+
43
+ @keyframes slideUp {
44
+ from { transform: translateY(100%); }
45
+ to { transform: translateY(0); }
46
+ }
47
+
48
+ @keyframes slideDown {
49
+ from { transform: translateY(0); }
50
+ to { transform: translateY(100%); }
51
+ }
52
+
53
+ .no-scrollbar::-webkit-scrollbar {
54
+ display: none;
55
+ }
56
+
57
+ .no-scrollbar {
58
+ -ms-overflow-style: none;
59
+ scrollbar-width: none;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="relative h-screen overflow-hidden">
64
+ <!-- Auth Screens -->
65
+ <div id="auth-container" class="absolute inset-0 z-50 bg-white transition-all duration-300">
66
+ <!-- Sign In Screen -->
67
+ <div id="signin-screen" class="h-full flex flex-col p-6">
68
+ <div class="flex-1 flex flex-col justify-center">
69
+ <div class="text-center mb-10">
70
+ <h1 class="text-3xl font-bold mb-2 cash-green-text">MAX FLASHER 1.0</h1>
71
+ <p class="text-gray-500">Send, spend, bank, and invest</p>
72
+ </div>
73
+
74
+ <div class="space-y-4">
75
+ <div>
76
+ <input type="text" id="signin-username" placeholder="Username" class="w-full p-4 border border-gray-300 rounded-lg">
77
+ </div>
78
+ <div>
79
+ <input type="password" id="signin-password" placeholder="Password" class="w-full p-4 border border-gray-300 rounded-lg">
80
+ </div>
81
+ <button onclick="signIn()" class="w-full p-4 cash-green text-white font-bold rounded-lg">Sign In</button>
82
+ </div>
83
+
84
+ <div class="text-center mt-6">
85
+ <p class="text-gray-500">Don't have an account? <span class="cash-green-text font-medium cursor-pointer" onclick="showSignUp()">Sign Up</span></p>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="py-6 text-center text-gray-400 text-sm">
90
+ <p>By signing in, you agree to our Terms of Service and Privacy Policy</p>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Sign Up Screen -->
95
+ <div id="signup-screen" class="h-full flex flex-col p-6 hidden">
96
+ <div class="flex-1 flex flex-col justify-center">
97
+ <div class="text-center mb-10">
98
+ <h1 class="text-3xl font-bold mb-2 cash-green-text">MAX FLASHER 1.0</h1>
99
+ <p class="text-gray-500">Create your account</p>
100
+ </div>
101
+
102
+ <div class="space-y-4">
103
+ <div>
104
+ <input type="text" id="signup-username" placeholder="Username" class="w-full p-4 border border-gray-300 rounded-lg">
105
+ </div>
106
+ <div>
107
+ <input type="text" id="signup-firstname" placeholder="First Name" class="w-full p-4 border border-gray-300 rounded-lg">
108
+ </div>
109
+ <div>
110
+ <input type="text" id="signup-lastname" placeholder="Last Name" class="w-full p-4 border border-gray-300 rounded-lg">
111
+ </div>
112
+ <div>
113
+ <input type="password" id="signup-password" placeholder="Password" class="w-full p-4 border border-gray-300 rounded-lg">
114
+ </div>
115
+ <button onclick="signUp()" class="w-full p-4 cash-green text-white font-bold rounded-lg">Create Account</button>
116
+ </div>
117
+
118
+ <div class="text-center mt-6">
119
+ <p class="text-gray-500">Already have an account? <span class="cash-green-text font-medium cursor-pointer" onclick="showSignIn()">Sign In</span></p>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="py-6 text-center text-gray-400 text-sm">
124
+ <p>By signing up, you agree to our Terms of Service and Privacy Policy</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Main App Container -->
130
+ <div id="app-container" class="h-full hidden">
131
+ <!-- Header -->
132
+ <div class="cash-green p-4 text-white">
133
+ <div class="flex justify-between items-center">
134
+ <div class="flex items-center space-x-2">
135
+ <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
136
+ <span class="cash-green-text font-bold text-sm" id="profile-initials">JD</span>
137
+ </div>
138
+ <span class="font-medium" id="profile-name">John Doe</span>
139
+ </div>
140
+ <div class="flex items-center space-x-4">
141
+ <i class="fas fa-qrcode text-xl"></i>
142
+ <i class="fas fa-cog text-xl"></i>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Balance Section -->
148
+ <div class="p-6 bg-white">
149
+ <div class="text-center">
150
+ <p class="text-gray-500">Your balance</p>
151
+ <h1 class="text-4xl font-bold my-2" id="main-balance">$1,250.00</h1>
152
+ <div class="flex justify-center space-x-4 text-gray-500">
153
+ <p id="btc-balance">0.0106 BTC</p>
154
+ <p id="eur-balance">€1,062.50</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Action Buttons -->
160
+ <div class="p-4 bg-white flex justify-around border-b border-gray-100">
161
+ <button class="flex flex-col items-center" onclick="showSendModal()">
162
+ <div class="w-12 h-12 cash-green rounded-full flex items-center justify-center mb-1">
163
+ <i class="fas fa-paper-plane text-white text-xl"></i>
164
+ </div>
165
+ <span class="text-xs">Send</span>
166
+ </button>
167
+ <button class="flex flex-col items-center" onclick="showRequestModal()">
168
+ <div class="w-12 h-12 cash-green rounded-full flex items-center justify-center mb-1">
169
+ <i class="fas fa-dollar-sign text-white text-xl"></i>
170
+ </div>
171
+ <span class="text-xs">Request</span>
172
+ </button>
173
+ <button class="flex flex-col items-center" onclick="showAddCashModal()">
174
+ <div class="w-12 h-12 cash-green rounded-full flex items-center justify-center mb-1">
175
+ <i class="fas fa-plus text-white text-xl"></i>
176
+ </div>
177
+ <span class="text-xs">Add Cash</span>
178
+ </button>
179
+ <button class="flex flex-col items-center" onclick="showInvestModal()">
180
+ <div class="w-12 h-12 cash-green rounded-full flex items-center justify-center mb-1">
181
+ <i class="fas fa-chart-line text-white text-xl"></i>
182
+ </div>
183
+ <span class="text-xs">Invest</span>
184
+ </button>
185
+ </div>
186
+
187
+ <!-- Tabs -->
188
+ <div class="flex border-b border-gray-200 bg-white">
189
+ <button id="home-tab" class="flex-1 py-4 text-center font-medium tab-active">Home</button>
190
+ <button id="money-tab" class="flex-1 py-4 text-center font-medium text-gray-500">Money</button>
191
+ <button id="investing-tab" class="flex-1 py-4 text-center font-medium text-gray-500">Investing</button>
192
+ <button id="cards-tab" class="flex-1 py-4 text-center font-medium text-gray-500">Cards</button>
193
+ </div>
194
+
195
+ <!-- Tab Content -->
196
+ <div class="flex-1 overflow-y-auto no-scrollbar">
197
+ <!-- Home Tab Content -->
198
+ <div id="home-content" class="p-4 space-y-4">
199
+ <div class="bg-white rounded-lg p-4 shadow-sm">
200
+ <div class="flex justify-between items-center mb-2">
201
+ <h3 class="font-medium">Recent Activity</h3>
202
+ <span class="text-sm cash-green-text">See All</span>
203
+ </div>
204
+
205
+ <div class="space-y-4">
206
+ <div class="flex items-center justify-between">
207
+ <div class="flex items-center space-x-3">
208
+ <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
209
+ <i class="fas fa-user text-gray-400"></i>
210
+ </div>
211
+ <div>
212
+ <p class="font-medium">Jane Smith</p>
213
+ <p class="text-xs text-gray-500">Payment received</p>
214
+ </div>
215
+ </div>
216
+ <div class="text-right">
217
+ <p class="font-medium text-green-500">+$50.00</p>
218
+ <p class="text-xs text-gray-500">2 hours ago</p>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="flex items-center justify-between">
223
+ <div class="flex items-center space-x-3">
224
+ <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
225
+ <i class="fas fa-coffee text-gray-400"></i>
226
+ </div>
227
+ <div>
228
+ <p class="font-medium">Starbucks</p>
229
+ <p class="text-xs text-gray-500">Coffee purchase</p>
230
+ </div>
231
+ </div>
232
+ <div class="text-right">
233
+ <p class="font-medium text-red-500">-$4.75</p>
234
+ <p class="text-xs text-gray-500">Yesterday</p>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="flex items-center justify-between">
239
+ <div class="flex items-center space-x-3">
240
+ <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
241
+ <i class="fas fa-btc text-gray-400"></i>
242
+ </div>
243
+ <div>
244
+ <p class="font-medium">Bitcoin</p>
245
+ <p class="text-xs text-gray-500">BTC purchase</p>
246
+ </div>
247
+ </div>
248
+ <div class="text-right">
249
+ <p class="font-medium text-red-500">-$100.00</p>
250
+ <p class="text-xs text-gray-500">3 days ago</p>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="bg-white rounded-lg p-4 shadow-sm">
257
+ <h3 class="font-medium mb-3">Boost your account</h3>
258
+ <div class="flex space-x-3 overflow-x-auto pb-2 no-scrollbar">
259
+ <div class="flex-shrink-0 w-40 h-32 cash-green rounded-lg p-4 flex flex-col justify-between">
260
+ <div>
261
+ <p class="text-white font-medium">Get $5</p>
262
+ <p class="text-white text-xs">When you refer a friend</p>
263
+ </div>
264
+ <button class="text-white text-xs font-medium text-left">Learn More</button>
265
+ </div>
266
+ <div class="flex-shrink-0 w-40 h-32 cash-dark rounded-lg p-4 flex flex-col justify-between">
267
+ <div>
268
+ <p class="text-white font-medium">Cash Card</p>
269
+ <p class="text-white text-xs">Get discounts at stores</p>
270
+ </div>
271
+ <button class="text-white text-xs font-medium text-left">Order Now</button>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Money Tab Content -->
278
+ <div id="money-content" class="p-4 space-y-4 hidden">
279
+ <div class="bg-white rounded-lg p-4 shadow-sm">
280
+ <h3 class="font-medium mb-3">Banking</h3>
281
+ <div class="space-y-4">
282
+ <div class="flex items-center justify-between">
283
+ <div class="flex items-center space-x-3">
284
+ <div class="w-10 h-10 cash-green rounded-full flex items-center justify-center">
285
+ <i class="fas fa-university text-white"></i>
286
+ </div>
287
+ <div>
288
+ <p class="font-medium">Bank Account</p>
289
+ <p class="text-xs text-gray-500">Connected</p>
290
+ </div>
291
+ </div>
292
+ <i class="fas fa-chevron-right text-gray-400"></i>
293
+ </div>
294
+
295
+ <div class="flex items-center justify-between">
296
+ <div class="flex items-center space-x-3">
297
+ <div class="w-10 h-10 cash-green rounded-full flex items-center justify-center">
298
+ <i class="fas fa-credit-card text-white"></i>
299
+ </div>
300
+ <div>
301
+ <p class="font-medium">Cash Card</p>
302
+ <p class="text-xs text-gray-500">Order now</p>
303
+ </div>
304
+ </div>
305
+ <i class="fas fa-chevron-right text-gray-400"></i>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="bg-white rounded-lg p-4 shadow-sm">
311
+ <h3 class="font-medium mb-3">Direct Deposit</h3>
312
+ <p class="text-sm text-gray-600 mb-3">Get your paycheck up to 2 days early by setting up direct deposit.</p>
313
+ <button class="w-full py-2 border border-gray-300 rounded-lg text-sm font-medium">Set Up Direct Deposit</button>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Investing Tab Content -->
318
+ <div id="investing-content" class="p-4 space-y-4 hidden">
319
+ <div class="bg-white rounded-lg p-4 shadow-sm">
320
+ <h3 class="font-medium mb-3">Bitcoin</h3>
321
+ <div class="flex items-center justify-between mb-4">
322
+ <div>
323
+ <p class="text-2xl font-bold" id="btc-price">$117,356.00</p>
324
+ <p class="text-xs text-gray-500">1 BTC</p>
325
+ </div>
326
+ <div class="text-right">
327
+ <p class="text-green-500 font-medium">+2.4%</p>
328
+ <p class="text-xs text-gray-500">24h change</p>
329
+ </div>
330
+ </div>
331
+ <div class="flex space-x-2">
332
+ <button class="flex-1 py-2 bg-gray-100 rounded-lg text-sm font-medium">Buy</button>
333
+ <button class="flex-1 py-2 bg-gray-100 rounded-lg text-sm font-medium">Sell</button>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="bg-white rounded-lg p-4 shadow-sm">
338
+ <h3 class="font-medium mb-3">Stocks</h3>
339
+ <p class="text-sm text-gray-600 mb-3">Start investing with as little as $1.</p>
340
+ <button class="w-full py-2 border border-gray-300 rounded-lg text-sm font-medium">Browse Stocks</button>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Cards Tab Content -->
345
+ <div id="cards-content" class="p-4 space-y-4 hidden">
346
+ <div class="bg-white rounded-lg p-4 shadow-sm">
347
+ <h3 class="font-medium mb-3">Your Cash Card</h3>
348
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-4 flex flex-col justify-between">
349
+ <div class="flex justify-between items-start">
350
+ <div>
351
+ <p class="text-white text-xs">CASH CARD</p>
352
+ <p class="text-white font-medium" id="cashtag">$john_doe</p>
353
+ </div>
354
+ <div class="w-10 h-6 bg-white bg-opacity-20 rounded flex items-center justify-center">
355
+ <p class="text-white text-xs">VISA</p>
356
+ </div>
357
+ </div>
358
+ <div class="flex justify-between items-end">
359
+ <div>
360
+ <p class="text-white text-xs">CARD HOLDER</p>
361
+ <p class="text-white font-medium" id="card-name">John Doe</p>
362
+ </div>
363
+ <div class="flex space-x-2">
364
+ <div class="w-8 h-8 rounded-full bg-white bg-opacity-20"></div>
365
+ <div class="w-8 h-8 rounded-full bg-white bg-opacity-20"></div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="bg-white rounded-lg p-4 shadow-sm">
372
+ <h3 class="font-medium mb-3">Card Benefits</h3>
373
+ <div class="space-y-3">
374
+ <div class="flex items-center space-x-3">
375
+ <div class="w-10 h-10 cash-green rounded-full flex items-center justify-center">
376
+ <i class="fas fa-percentage text-white"></i>
377
+ </div>
378
+ <div>
379
+ <p class="font-medium">Boosts</p>
380
+ <p class="text-xs text-gray-500">Instant discounts</p>
381
+ </div>
382
+ </div>
383
+
384
+ <div class="flex items-center space-x-3">
385
+ <div class="w-10 h-10 cash-green rounded-full flex items-center justify-center">
386
+ <i class="fas fa-shield-alt text-white"></i>
387
+ </div>
388
+ <div>
389
+ <p class="font-medium">Security</p>
390
+ <p class="text-xs text-gray-500">Freeze card instantly</p>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Send Modal -->
400
+ <div id="send-modal" class="absolute inset-0 bg-white z-50 hidden slide-up">
401
+ <div class="p-4">
402
+ <div class="flex justify-between items-center mb-6">
403
+ <button onclick="hideSendModal()">
404
+ <i class="fas fa-times text-xl"></i>
405
+ </button>
406
+ <h2 class="text-xl font-bold">Send</h2>
407
+ <div class="w-6"></div>
408
+ </div>
409
+
410
+ <div class="mb-6">
411
+ <input type="text" id="send-amount" placeholder="$0.00" class="w-full text-4xl font-bold border-0 focus:outline-none" oninput="updateSendAmounts()">
412
+ <div class="flex justify-center space-x-4 text-gray-500 mt-2">
413
+ <p id="send-btc-amount">0 BTC</p>
414
+ <p id="send-eur-amount">€0.00</p>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="mb-6">
419
+ <div class="flex items-center p-3 border border-gray-300 rounded-lg mb-3">
420
+ <i class="fas fa-search text-gray-400 mr-3"></i>
421
+ <input type="text" id="send-to" placeholder="Name, $cashtag, phone, or email" class="flex-1 focus:outline-none">
422
+ </div>
423
+ <div class="flex justify-between text-xs text-gray-500 px-3">
424
+ <span>Recent</span>
425
+ <span>Contacts</span>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="grid grid-cols-3 gap-2 mb-6">
430
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendAmount(5)">$5</button>
431
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendAmount(10)">$10</button>
432
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendAmount(20)">$20</button>
433
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendAmount(50)">$50</button>
434
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendAmount(100)">$100</button>
435
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendAmount(500)">$500</button>
436
+ </div>
437
+
438
+ <div class="flex space-x-2">
439
+ <button class="flex-1 py-3 bg-gray-100 rounded-lg font-medium" onclick="showSendBtcModal()">Send BTC</button>
440
+ <button class="flex-1 py-3 cash-green text-white rounded-lg font-medium" onclick="confirmSend()">Pay</button>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Send BTC Modal -->
446
+ <div id="send-btc-modal" class="absolute inset-0 bg-white z-50 hidden slide-up">
447
+ <div class="p-4">
448
+ <div class="flex justify-between items-center mb-6">
449
+ <button onclick="hideSendBtcModal()">
450
+ <i class="fas fa-arrow-left text-xl"></i>
451
+ </button>
452
+ <h2 class="text-xl font-bold">Send Bitcoin</h2>
453
+ <div class="w-6"></div>
454
+ </div>
455
+
456
+ <div class="mb-6">
457
+ <input type="text" id="send-btc-input" placeholder="0.000000" class="w-full text-4xl font-bold border-0 focus:outline-none" oninput="updateSendBtcAmounts()">
458
+ <div class="flex justify-center space-x-4 text-gray-500 mt-2">
459
+ <p id="send-btc-usd-amount">$0.00</p>
460
+ <p id="send-btc-eur-amount">€0.00</p>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="mb-6">
465
+ <div class="flex items-center p-3 border border-gray-300 rounded-lg mb-3">
466
+ <i class="fas fa-search text-gray-400 mr-3"></i>
467
+ <input type="text" id="send-btc-to" placeholder="Bitcoin address" class="flex-1 focus:outline-none">
468
+ </div>
469
+ </div>
470
+
471
+ <div class="grid grid-cols-3 gap-2 mb-6">
472
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendBtcAmount(0.001)">0.001</button>
473
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendBtcAmount(0.01)">0.01</button>
474
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendBtcAmount(0.1)">0.1</button>
475
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendBtcAmount(0.0001)">0.0001</button>
476
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendBtcAmount(0.00001)">0.00001</button>
477
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToSendBtcAmount(0.000001)">0.000001</button>
478
+ </div>
479
+
480
+ <button class="w-full py-3 cash-green text-white rounded-lg font-medium" onclick="confirmSendBtc()">Send Bitcoin</button>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Request Modal -->
485
+ <div id="request-modal" class="absolute inset-0 bg-white z-50 hidden slide-up">
486
+ <div class="p-4">
487
+ <div class="flex justify-between items-center mb-6">
488
+ <button onclick="hideRequestModal()">
489
+ <i class="fas fa-times text-xl"></i>
490
+ </button>
491
+ <h2 class="text-xl font-bold">Request</h2>
492
+ <div class="w-6"></div>
493
+ </div>
494
+
495
+ <div class="mb-6">
496
+ <input type="text" id="request-amount" placeholder="$0.00" class="w-full text-4xl font-bold border-0 focus:outline-none">
497
+ </div>
498
+
499
+ <div class="mb-6">
500
+ <div class="flex items-center p-3 border border-gray-300 rounded-lg mb-3">
501
+ <i class="fas fa-search text-gray-400 mr-3"></i>
502
+ <input type="text" id="request-from" placeholder="Name, $cashtag, phone, or email" class="flex-1 focus:outline-none">
503
+ </div>
504
+ <div class="flex justify-between text-xs text-gray-500 px-3">
505
+ <span>Recent</span>
506
+ <span>Contacts</span>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="grid grid-cols-3 gap-2 mb-6">
511
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToRequestAmount(5)">$5</button>
512
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToRequestAmount(10)">$10</button>
513
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToRequestAmount(20)">$20</button>
514
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToRequestAmount(50)">$50</button>
515
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToRequestAmount(100)">$100</button>
516
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToRequestAmount(500)">$500</button>
517
+ </div>
518
+
519
+ <button class="w-full py-3 cash-green text-white rounded-lg font-medium" onclick="confirmRequest()">Request</button>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Add Cash Modal -->
524
+ <div id="add-cash-modal" class="absolute inset-0 bg-white z-50 hidden slide-up">
525
+ <div class="p-4">
526
+ <div class="flex justify-between items-center mb-6">
527
+ <button onclick="hideAddCashModal()">
528
+ <i class="fas fa-times text-xl"></i>
529
+ </button>
530
+ <h2 class="text-xl font-bold">Add Cash</h2>
531
+ <div class="w-6"></div>
532
+ </div>
533
+
534
+ <div class="mb-6">
535
+ <input type="text" id="add-cash-amount" placeholder="$0.00" class="w-full text-4xl font-bold border-0 focus:outline-none">
536
+ </div>
537
+
538
+ <div class="grid grid-cols-3 gap-2 mb-6">
539
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToAddCashAmount(10)">$10</button>
540
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToAddCashAmount(20)">$20</button>
541
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToAddCashAmount(50)">$50</button>
542
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToAddCashAmount(100)">$100</button>
543
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToAddCashAmount(200)">$200</button>
544
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToAddCashAmount(500)">$500</button>
545
+ </div>
546
+
547
+ <button class="w-full py-3 cash-green text-white rounded-lg font-medium" onclick="confirmAddCash()">Add Cash</button>
548
+ </div>
549
+ </div>
550
+
551
+ <!-- Invest Modal -->
552
+ <div id="invest-modal" class="absolute inset-0 bg-white z-50 hidden slide-up">
553
+ <div class="p-4">
554
+ <div class="flex justify-between items-center mb-6">
555
+ <button onclick="hideInvestModal()">
556
+ <i class="fas fa-times text-xl"></i>
557
+ </button>
558
+ <h2 class="text-xl font-bold">Invest</h2>
559
+ <div class="w-6"></div>
560
+ </div>
561
+
562
+ <div class="mb-6">
563
+ <input type="text" id="invest-amount" placeholder="$0.00" class="w-full text-4xl font-bold border-0 focus:outline-none">
564
+ </div>
565
+
566
+ <div class="grid grid-cols-3 gap-2 mb-6">
567
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToInvestAmount(10)">$10</button>
568
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToInvestAmount(20)">$20</button>
569
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToInvestAmount(50)">$50</button>
570
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToInvestAmount(100)">$100</button>
571
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToInvestAmount(200)">$200</button>
572
+ <button class="py-3 bg-gray-100 rounded-lg" onclick="addToInvestAmount(500)">$500</button>
573
+ </div>
574
+
575
+ <div class="mb-6">
576
+ <h3 class="font-medium mb-3">Investment Options</h3>
577
+ <div class="space-y-3">
578
+ <div class="flex items-center p-3 border border-gray-300 rounded-lg">
579
+ <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
580
+ <i class="fas fa-btc text-orange-500"></i>
581
+ </div>
582
+ <div class="flex-1">
583
+ <p class="font-medium">Bitcoin</p>
584
+ <p class="text-xs text-gray-500">Cryptocurrency</p>
585
+ </div>
586
+ <i class="fas fa-chevron-right text-gray-400"></i>
587
+ </div>
588
+
589
+ <div class="flex items-center p-3 border border-gray-300 rounded-lg">
590
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
591
+ <i class="fas fa-chart-line text-blue-500"></i>
592
+ </div>
593
+ <div class="flex-1">
594
+ <p class="font-medium">Stocks</p>
595
+ <p class="text-xs text-gray-500">ETFs & more</p>
596
+ </div>
597
+ <i class="fas fa-chevron-right text-gray-400"></i>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Confirmation Modal -->
605
+ <div id="confirmation-modal" class="absolute inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
606
+ <div class="bg-white rounded-lg p-6 w-11/12 max-w-md">
607
+ <div class="text-center mb-6">
608
+ <i class="fas fa-check-circle text-5xl cash-green-text mb-4"></i>
609
+ <h2 class="text-xl font-bold mb-2" id="confirmation-title">Payment Sent</h2>
610
+ <p class="text-gray-500" id="confirmation-message">You sent $50.00 to Jane Smith</p>
611
+ </div>
612
+ <button class="w-full py-3 cash-green text-white rounded-lg font-medium" onclick="hideConfirmationModal()">Done</button>
613
+ </div>
614
+ </div>
615
+
616
+ <script>
617
+ // App State
618
+ const state = {
619
+ user: null,
620
+ balance: 1250.00,
621
+ btcPrice: 117356.00,
622
+ eurRate: 0.85,
623
+ recentTransactions: [
624
+ { name: "Jane Smith", type: "received", amount: 50.00, description: "Payment received", time: "2 hours ago" },
625
+ { name: "Starbucks", type: "sent", amount: 4.75, description: "Coffee purchase", time: "Yesterday" },
626
+ { name: "Bitcoin", type: "sent", amount: 100.00, description: "BTC purchase", time: "3 days ago" }
627
+ ]
628
+ };
629
+
630
+ // DOM Elements
631
+ const authContainer = document.getElementById('auth-container');
632
+ const signinScreen = document.getElementById('signin-screen');
633
+ const signupScreen = document.getElementById('signup-screen');
634
+ const appContainer = document.getElementById('app-container');
635
+
636
+ // Tab Elements
637
+ const homeTab = document.getElementById('home-tab');
638
+ const moneyTab = document.getElementById('money-tab');
639
+ const investingTab = document.getElementById('investing-tab');
640
+ const cardsTab = document.getElementById('cards-tab');
641
+
642
+ const homeContent = document.getElementById('home-content');
643
+ const moneyContent = document.getElementById('money-content');
644
+ const investingContent = document.getElementById('investing-content');
645
+ const cardsContent = document.getElementById('cards-content');
646
+
647
+ // Modal Elements
648
+ const sendModal = document.getElementById('send-modal');
649
+ const sendBtcModal = document.getElementById('send-btc-modal');
650
+ const requestModal = document.getElementById('request-modal');
651
+ const addCashModal = document.getElementById('add-cash-modal');
652
+ const investModal = document.getElementById('invest-modal');
653
+ const confirmationModal = document.getElementById('confirmation-modal');
654
+
655
+ // Initialize the app
656
+ function initApp() {
657
+ // Check if user is logged in (for demo purposes)
658
+ const isLoggedIn = localStorage.getItem('max_flasher_user') !== null;
659
+
660
+ if (isLoggedIn) {
661
+ state.user = JSON.parse(localStorage.getItem('max_flasher_user'));
662
+ showApp();
663
+ } else {
664
+ showSignIn();
665
+ }
666
+
667
+ // Set up tab switching
668
+ setupTabs();
669
+
670
+ // Update balance displays
671
+ updateBalances();
672
+ }
673
+
674
+ // Set up tab switching
675
+ function setupTabs() {
676
+ homeTab.addEventListener('click', () => {
677
+ homeTab.classList.add('tab-active');
678
+ homeTab.classList.remove('text-gray-500');
679
+ moneyTab.classList.remove('tab-active');
680
+ moneyTab.classList.add('text-gray-500');
681
+ investingTab.classList.remove('tab-active');
682
+ investingTab.classList.add('text-gray-500');
683
+ cardsTab.classList.remove('tab-active');
684
+ cardsTab.classList.add('text-gray-500');
685
+
686
+ homeContent.classList.remove('hidden');
687
+ moneyContent.classList.add('hidden');
688
+ investingContent.classList.add('hidden');
689
+ cardsContent.classList.add('hidden');
690
+ });
691
+
692
+ moneyTab.addEventListener('click', () => {
693
+ moneyTab.classList.add('tab-active');
694
+ moneyTab.classList.remove('text-gray-500');
695
+ homeTab.classList.remove('tab-active');
696
+ homeTab.classList.add('text-gray-500');
697
+ investingTab.classList.remove('tab-active');
698
+ investingTab.classList.add('text-gray-500');
699
+ cardsTab.classList.remove('tab-active');
700
+ cardsTab.classList.add('text-gray-500');
701
+
702
+ moneyContent.classList.remove('hidden');
703
+ homeContent.classList.add('hidden');
704
+ investingContent.classList.add('hidden');
705
+ cardsContent.classList.add('hidden');
706
+ });
707
+
708
+ investingTab.addEventListener('click', () => {
709
+ investingTab.classList.add('tab-active');
710
+ investingTab.classList.remove('text-gray-500');
711
+ homeTab.classList.remove('tab-active');
712
+ homeTab.classList.add('text-gray-500');
713
+ moneyTab.classList.remove('tab-active');
714
+ moneyTab.classList.add('text-gray-500');
715
+ cardsTab.classList.remove('tab-active');
716
+ cardsTab.classList.add('text-gray-500');
717
+
718
+ investingContent.classList.remove('hidden');
719
+ homeContent.classList.add('hidden');
720
+ moneyContent.classList.add('hidden');
721
+ cardsContent.classList.add('hidden');
722
+ });
723
+
724
+ cardsTab.addEventListener('click', () => {
725
+ cardsTab.classList.add('tab-active');
726
+ cardsTab.classList.remove('text-gray-500');
727
+ homeTab.classList.remove('tab-active');
728
+ homeTab.classList.add('text-gray-500');
729
+ moneyTab.classList.remove('tab-active');
730
+ moneyTab.classList.add('text-gray-500');
731
+ investingTab.classList.remove('tab-active');
732
+ investingTab.classList.add('text-gray-500');
733
+
734
+ cardsContent.classList.remove('hidden');
735
+ homeContent.classList.add('hidden');
736
+ moneyContent.classList.add('hidden');
737
+ investingContent.classList.add('hidden');
738
+ });
739
+ }
740
+
741
+ // Show sign in screen
742
+ function showSignIn() {
743
+ signinScreen.classList.remove('hidden');
744
+ signupScreen.classList.add('hidden');
745
+ authContainer.classList.remove('hidden');
746
+ appContainer.classList.add('hidden');
747
+ }
748
+
749
+ // Show sign up screen
750
+ function showSignUp() {
751
+ signupScreen.classList.remove('hidden');
752
+ signinScreen.classList.add('hidden');
753
+ }
754
+
755
+ // Show app
756
+ function showApp() {
757
+ authContainer.classList.add('hidden');
758
+ appContainer.classList.remove('hidden');
759
+
760
+ // Update profile info
761
+ if (state.user) {
762
+ document.getElementById('profile-name').textContent = `${state.user.firstName} ${state.user.lastName}`;
763
+ document.getElementById('profile-initials').textContent = `${state.user.firstName.charAt(0)}${state.user.lastName.charAt(0)}`;
764
+ document.getElementById('cashtag').textContent = `$${state.user.username.toLowerCase()}`;
765
+ document.getElementById('card-name').textContent = `${state.user.firstName} ${state.user.lastName}`;
766
+ }
767
+ }
768
+
769
+ // Sign in function
770
+ function signIn() {
771
+ const username = document.getElementById('signin-username').value;
772
+ const password = document.getElementById('signin-password').value;
773
+
774
+ // Simple validation
775
+ if (!username || !password) {
776
+ alert('Please enter both username and password');
777
+ return;
778
+ }
779
+
780
+ // Check if user exists in localStorage
781
+ const user = JSON.parse(localStorage.getItem('max_flasher_user'));
782
+
783
+ if (user && user.username === username && user.password === password) {
784
+ state.user = user;
785
+ showApp();
786
+ } else {
787
+ alert('Invalid username or password');
788
+ }
789
+ }
790
+
791
+ // Sign up function
792
+ function signUp() {
793
+ const username = document.getElementById('signup-username').value;
794
+ const firstName = document.getElementById('signup-firstname').value;
795
+ const lastName = document.getElementById('signup-lastname').value;
796
+ const password = document.getElementById('signup-password').value;
797
+
798
+ // Simple validation
799
+ if (!username || !firstName || !lastName || !password) {
800
+ alert('Please fill in all fields');
801
+ return;
802
+ }
803
+
804
+ // Create user object
805
+ const user = {
806
+ username,
807
+ firstName,
808
+ lastName,
809
+ password
810
+ };
811
+
812
+ // Save user to localStorage
813
+ localStorage.setItem('max_flasher_user', JSON.stringify(user));
814
+ state.user = user;
815
+
816
+ showApp();
817
+ }
818
+
819
+ // Update balance displays
820
+ function updateBalances() {
821
+ document.getElementById('main-balance').textContent = `$${state.balance.toFixed(2)}`;
822
+ document.getElementById('btc-balance').textContent = `${(state.balance / state.btcPrice).toFixed(6)} BTC`;
823
+ document.getElementById('eur-balance').textContent = `€${(state.balance * state.eurRate).toFixed(2)}`;
824
+ document.getElementById('btc-price').textContent = `$${state.btcPrice.toFixed(2)}`;
825
+ }
826
+
827
+ // Show send modal
828
+ function showSendModal() {
829
+ sendModal.classList.remove('hidden');
830
+ document.getElementById('send-amount').value = '';
831
+ document.getElementById('send-to').value = '';
832
+ updateSendAmounts();
833
+ }
834
+
835
+ // Hide send modal
836
+ function hideSendModal() {
837
+ sendModal.classList.add('hidden');
838
+ }
839
+
840
+ // Show send BTC modal
841
+ function showSendBtcModal() {
842
+ sendModal.classList.add('hidden');
843
+ sendBtcModal.classList.remove('hidden');
844
+ document.getElementById('send-btc-input').value = '';
845
+ document.getElementById('send-btc-to').value = '';
846
+ updateSendBtcAmounts();
847
+ }
848
+
849
+ // Hide send BTC modal
850
+ function hideSendBtcModal() {
851
+ sendBtcModal.classList.add('hidden');
852
+ sendModal.classList.remove('hidden');
853
+ }
854
+
855
+ // Show request modal
856
+ function showRequestModal() {
857
+ requestModal.classList.remove('hidden');
858
+ document.getElementById('request-amount').value = '';
859
+ document.getElementById('request-from').value = '';
860
+ }
861
+
862
+ // Hide request modal
863
+ function hideRequestModal() {
864
+ requestModal.classList.add('hidden');
865
+ }
866
+
867
+ // Show add cash modal
868
+ function showAddCashModal() {
869
+ addCashModal.classList.remove('hidden');
870
+ document.getElementById('add-cash-amount').value = '';
871
+ }
872
+
873
+ // Hide add cash modal
874
+ function hideAddCashModal() {
875
+ addCashModal.classList.add('hidden');
876
+ }
877
+
878
+ // Show invest modal
879
+ function showInvestModal() {
880
+ investModal.classList.remove('hidden');
881
+ document.getElementById('invest-amount').value = '';
882
+ }
883
+
884
+ // Hide invest modal
885
+ function hideInvestModal() {
886
+ investModal.classList.add('hidden');
887
+ }
888
+
889
+ // Show confirmation modal
890
+ function showConfirmationModal(title, message) {
891
+ document.getElementById('confirmation-title').textContent = title;
892
+ document.getElementById('confirmation-message').textContent = message;
893
+ confirmationModal.classList.remove('hidden');
894
+ }
895
+
896
+ // Hide confirmation modal
897
+ function hideConfirmationModal() {
898
+ confirmationModal.classList.add('hidden');
899
+ }
900
+
901
+ // Add to send amount
902
+ function addToSendAmount(amount) {
903
+ const current = parseFloat(document.getElementById('send-amount').value.replace('$', '')) || 0;
904
+ document.getElementById('send-amount').value = `$${(current + amount).toFixed(2)}`;
905
+ updateSendAmounts();
906
+ }
907
+
908
+ // Update send amounts (USD to BTC/EUR)
909
+ function updateSendAmounts() {
910
+ const usdAmount = parseFloat(document.getElementById('send-amount').value.replace('$', '')) || 0;
911
+ document.getElementById('send-btc-amount').textContent = `${(usdAmount / state.btcPrice).toFixed(6)} BTC`;
912
+ document.getElementById('send-eur-amount').textContent = `€${(usdAmount * state.eurRate).toFixed(2)}`;
913
+ }
914
+
915
+ // Add to send BTC amount
916
+ function addToSendBtcAmount(amount) {
917
+ const current = parseFloat(document.getElementById('send-btc-input').value) || 0;
918
+ document.getElementById('send-btc-input').value = (current + amount).toFixed(6);
919
+ updateSendBtcAmounts();
920
+ }
921
+
922
+ // Update send BTC amounts (BTC to USD/EUR)
923
+ function updateSendBtcAmounts() {
924
+ const btcAmount = parseFloat(document.getElementById('send-btc-input').value) || 0;
925
+ document.getElementById('send-btc-usd-amount').textContent = `$${(btcAmount * state.btcPrice).toFixed(2)}`;
926
+ document.getElementById('send-btc-eur-amount').textContent = `€${(btcAmount * state.btcPrice * state.eurRate).toFixed(2)}`;
927
+ }
928
+
929
+ // Add to request amount
930
+ function addToRequestAmount(amount) {
931
+ const current = parseFloat(document.getElementById('request-amount').value.replace('$', '')) || 0;
932
+ document.getElementById('request-amount').value = `$${(current + amount).toFixed(2)}`;
933
+ }
934
+
935
+ // Add to add cash amount
936
+ function addToAddCashAmount(amount) {
937
+ const current = parseFloat(document.getElementById('add-cash-amount').value.replace('$', '')) || 0;
938
+ document.getElementById('add-cash-amount').value = `$${(current + amount).toFixed(2)}`;
939
+ }
940
+
941
+ // Add to invest amount
942
+ function addToInvestAmount(amount) {
943
+ const current = parseFloat(document.getElementById('invest-amount').value.replace('$', '')) || 0;
944
+ document.getElementById('invest-amount').value = `$${(current + amount).toFixed(2)}`;
945
+ }
946
+
947
+ // Confirm send
948
+ function confirmSend() {
949
+ const amount = parseFloat(document.getElementById('send-amount').value.replace('$', '')) || 0;
950
+ const to = document.getElementById('send-to').value || "Someone";
951
+
952
+ if (amount <= 0) {
953
+ alert('Please enter a valid amount');
954
+ return;
955
+ }
956
+
957
+ if (amount > state.balance) {
958
+ alert('Insufficient funds');
959
+ return;
960
+ }
961
+
962
+ state.balance -= amount;
963
+ updateBalances();
964
+ hideSendModal();
965
+ showConfirmationModal('Payment Sent', `You sent $${amount.toFixed(2)} to ${to}`);
966
+ }
967
+
968
+ // Confirm send BTC
969
+ function confirmSendBtc() {
970
+ const btcAmount = parseFloat(document.getElementById('send-btc-input').value) || 0;
971
+ const to = document.getElementById('send-btc-to').value || "Bitcoin Address";
972
+ const usdAmount = btcAmount * state.btcPrice;
973
+
974
+ if (btcAmount <= 0) {
975
+ alert('Please enter a valid amount');
976
+ return;
977
+ }
978
+
979
+ if (usdAmount > state.balance) {
980
+ alert('Insufficient funds');
981
+ return;
982
+ }
983
+
984
+ state.balance -= usdAmount;
985
+ updateBalances();
986
+ hideSendBtcModal();
987
+ showConfirmationModal('Bitcoin Sent', `You sent ${btcAmount.toFixed(6)} BTC ($${usdAmount.toFixed(2)}) to ${to}`);
988
+ }
989
+
990
+ // Confirm request
991
+ function confirmRequest() {
992
+ const amount = parseFloat(document.getElementById('request-amount').value.replace('$', '')) || 0;
993
+ const from = document.getElementById('request-from').value || "Someone";
994
+
995
+ if (amount <= 0) {
996
+ alert('Please enter a valid amount');
997
+ return;
998
+ }
999
+
1000
+ hideRequestModal();
1001
+ showConfirmationModal('Request Sent', `You requested $${amount.toFixed(2)} from ${from}`);
1002
+ }
1003
+
1004
+ // Confirm add cash
1005
+ function confirmAddCash() {
1006
+ const amount = parseFloat(document.getElementById('add-cash-amount').value.replace('$', '')) || 0;
1007
+
1008
+ if (amount <= 0) {
1009
+ alert('Please enter a valid amount');
1010
+ return;
1011
+ }
1012
+
1013
+ state.balance += amount;
1014
+ updateBalances();
1015
+ hideAddCashModal();
1016
+ showConfirmationModal('Cash Added', `You added $${amount.toFixed(2)} to your balance`);
1017
+ }
1018
+
1019
+ // Initialize the app when the page loads
1020
+ window.addEventListener('DOMContentLoaded', initApp);
1021
+ </script>
1022
+ <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=Kingmaxjj/max-flasher-1-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1023
+ </html>