Hugging Face's logo

Spaces:
markburn
/
test2
Running

App Files Community
markburn commited on
Commit
eea1d49
·
verified ·
1 Parent(s): e8a9b41

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +354 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test2
3
- emoji: 📉
4
- colorFrom: yellow
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: test2
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: green
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,354 @@
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>T-Bank Mobile</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
+ /* Custom scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 4px;
13
+ }
14
+ ::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ }
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 2px;
20
+ }
21
+ ::-webkit-scrollbar-thumb:hover {
22
+ background: #555;
23
+ }
24
+
25
+ /* Custom animations */
26
+ @keyframes fadeIn {
27
+ from { opacity: 0; transform: translateY(10px); }
28
+ to { opacity: 1; transform: translateY(0); }
29
+ }
30
+
31
+ .animate-fade-in {
32
+ animation: fadeIn 0.3s ease-out forwards;
33
+ }
34
+
35
+ /* Card gradient */
36
+ .card-gradient {
37
+ background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
38
+ }
39
+
40
+ /* Custom switch */
41
+ .switch {
42
+ position: relative;
43
+ display: inline-block;
44
+ width: 50px;
45
+ height: 24px;
46
+ }
47
+
48
+ .switch input {
49
+ opacity: 0;
50
+ width: 0;
51
+ height: 0;
52
+ }
53
+
54
+ .slider {
55
+ position: absolute;
56
+ cursor: pointer;
57
+ top: 0;
58
+ left: 0;
59
+ right: 0;
60
+ bottom: 0;
61
+ background-color: #ccc;
62
+ transition: .4s;
63
+ border-radius: 24px;
64
+ }
65
+
66
+ .slider:before {
67
+ position: absolute;
68
+ content: "";
69
+ height: 16px;
70
+ width: 16px;
71
+ left: 4px;
72
+ bottom: 4px;
73
+ background-color: white;
74
+ transition: .4s;
75
+ border-radius: 50%;
76
+ }
77
+
78
+ input:checked + .slider {
79
+ background-color: #4f46e5;
80
+ }
81
+
82
+ input:checked + .slider:before {
83
+ transform: translateX(26px);
84
+ }
85
+ </style>
86
+ </head>
87
+ <body class="bg-gray-100 font-sans antialiased">
88
+ <!-- Mobile App Container -->
89
+ <div class="relative max-w-md mx-auto h-screen bg-white overflow-hidden shadow-lg flex flex-col">
90
+ <!-- Header -->
91
+ <header class="bg-indigo-600 text-white p-4 flex justify-between items-center">
92
+ <div class="flex items-center space-x-2">
93
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center">
94
+ <span class="text-xs font-bold">TB</span>
95
+ </div>
96
+ <h1 class="font-bold text-lg">T-Bank</h1>
97
+ </div>
98
+ <div class="flex items-center space-x-4">
99
+ <button class="text-white">
100
+ <i class="fas fa-bell"></i>
101
+ </button>
102
+ <button class="text-white">
103
+ <i class="fas fa-qrcode"></i>
104
+ </button>
105
+ </div>
106
+ </header>
107
+
108
+ <!-- Main Content -->
109
+ <main class="flex-1 overflow-y-auto pb-20">
110
+ <!-- Balance Card -->
111
+ <div class="card-gradient rounded-xl mx-4 mt-4 p-6 text-white shadow-lg animate-fade-in">
112
+ <div class="flex justify-between items-start">
113
+ <div>
114
+ <p class="text-sm opacity-80">Total Balance</p>
115
+ <h2 class="text-2xl font-bold mt-1">$12,456.78</h2>
116
+ </div>
117
+ <button class="bg-white bg-opacity-20 p-2 rounded-full">
118
+ <i class="fas fa-ellipsis-h"></i>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="mt-6 flex justify-between items-center">
123
+ <div>
124
+ <p class="text-xs opacity-80">Card Number</p>
125
+ <p class="text-sm font-medium">•••• •••• •••• 4567</p>
126
+ </div>
127
+ <div class="w-10 h-6 bg-white bg-opacity-30 rounded flex items-center justify-center">
128
+ <span class="text-xs font-bold text-white">VISA</span>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Quick Actions -->
134
+ <div class="mx-4 mt-6 grid grid-cols-4 gap-4 animate-fade-in" style="animation-delay: 0.1s">
135
+ <button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition">
136
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-2">
137
+ <i class="fas fa-exchange-alt"></i>
138
+ </div>
139
+ <span class="text-xs font-medium">Transfer</span>
140
+ </button>
141
+ <button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition">
142
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-2">
143
+ <i class="fas fa-money-bill-wave"></i>
144
+ </div>
145
+ <span class="text-xs font-medium">Pay</span>
146
+ </button>
147
+ <button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition">
148
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-2">
149
+ <i class="fas fa-wallet"></i>
150
+ </div>
151
+ <span class="text-xs font-medium">Top Up</span>
152
+ </button>
153
+ <button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition">
154
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-2">
155
+ <i class="fas fa-chart-line"></i>
156
+ </div>
157
+ <span class="text-xs font-medium">Invest</span>
158
+ </button>
159
+ </div>
160
+
161
+ <!-- Recent Transactions -->
162
+ <div class="mx-4 mt-8 animate-fade-in" style="animation-delay: 0.2s">
163
+ <div class="flex justify-between items-center mb-4">
164
+ <h3 class="font-bold text-gray-800">Recent Transactions</h3>
165
+ <button class="text-indigo-600 text-sm font-medium">See All</button>
166
+ </div>
167
+
168
+ <div class="space-y-3">
169
+ <!-- Transaction 1 -->
170
+ <div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition">
171
+ <div class="flex items-center space-x-3">
172
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500">
173
+ <i class="fas fa-shopping-bag"></i>
174
+ </div>
175
+ <div>
176
+ <p class="text-sm font-medium">Amazon Purchase</p>
177
+ <p class="text-xs text-gray-500">Today, 10:45 AM</p>
178
+ </div>
179
+ </div>
180
+ <div class="text-right">
181
+ <p class="text-sm font-medium text-red-500">-$45.99</p>
182
+ <p class="text-xs text-gray-500">Completed</p>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Transaction 2 -->
187
+ <div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition">
188
+ <div class="flex items-center space-x-3">
189
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
190
+ <i class="fas fa-money-bill-wave"></i>
191
+ </div>
192
+ <div>
193
+ <p class="text-sm font-medium">Salary Deposit</p>
194
+ <p class="text-xs text-gray-500">Yesterday, 9:00 AM</p>
195
+ </div>
196
+ </div>
197
+ <div class="text-right">
198
+ <p class="text-sm font-medium text-green-500">+$3,250.00</p>
199
+ <p class="text-xs text-gray-500">Completed</p>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Transaction 3 -->
204
+ <div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition">
205
+ <div class="flex items-center space-x-3">
206
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
207
+ <i class="fas fa-coffee"></i>
208
+ </div>
209
+ <div>
210
+ <p class="text-sm font-medium">Starbucks</p>
211
+ <p class="text-xs text-gray-500">Yesterday, 4:30 PM</p>
212
+ </div>
213
+ </div>
214
+ <div class="text-right">
215
+ <p class="text-sm font-medium text-red-500">-$6.75</p>
216
+ <p class="text-xs text-gray-500">Completed</p>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Transaction 4 -->
221
+ <div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition">
222
+ <div class="flex items-center space-x-3">
223
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
224
+ <i class="fas fa-mobile-alt"></i>
225
+ </div>
226
+ <div>
227
+ <p class="text-sm font-medium">Phone Bill</p>
228
+ <p class="text-xs text-gray-500">May 15, 8:00 AM</p>
229
+ </div>
230
+ </div>
231
+ <div class="text-right">
232
+ <p class="text-sm font-medium text-red-500">-$89.99</p>
233
+ <p class="text-xs text-gray-500">Completed</p>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Savings Goals -->
240
+ <div class="mx-4 mt-8 animate-fade-in" style="animation-delay: 0.3s">
241
+ <div class="flex justify-between items-center mb-4">
242
+ <h3 class="font-bold text-gray-800">Savings Goals</h3>
243
+ <button class="text-indigo-600 text-sm font-medium">Add Goal</button>
244
+ </div>
245
+
246
+ <div class="bg-white p-4 rounded-xl shadow-sm">
247
+ <div class="flex items-center justify-between mb-3">
248
+ <div>
249
+ <p class="text-sm font-medium">Vacation Fund</p>
250
+ <p class="text-xs text-gray-500">Target: $5,000</p>
251
+ </div>
252
+ <p class="text-sm font-medium text-indigo-600">$3,200</p>
253
+ </div>
254
+ <div class="w-full bg-gray-200 rounded-full h-2">
255
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 64%"></div>
256
+ </div>
257
+ <div class="flex justify-between mt-1">
258
+ <span class="text-xs text-gray-500">64% completed</span>
259
+ <span class="text-xs text-gray-500">64 days left</span>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </main>
264
+
265
+ <!-- Bottom Navigation -->
266
+ <nav class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3">
267
+ <button class="flex flex-col items-center text-indigo-600">
268
+ <i class="fas fa-home"></i>
269
+ <span class="text-xs mt-1">Home</span>
270
+ </button>
271
+ <button class="flex flex-col items-center text-gray-500">
272
+ <i class="fas fa-credit-card"></i>
273
+ <span class="text-xs mt-1">Cards</span>
274
+ </button>
275
+ <button class="flex flex-col items-center text-gray-500">
276
+ <i class="fas fa-chart-pie"></i>
277
+ <span class="text-xs mt-1">Stats</span>
278
+ </button>
279
+ <button class="flex flex-col items-center text-gray-500">
280
+ <i class="fas fa-cog"></i>
281
+ <span class="text-xs mt-1">Settings</span>
282
+ </button>
283
+ </nav>
284
+ </div>
285
+
286
+ <script>
287
+ // Simple animation on load
288
+ document.addEventListener('DOMContentLoaded', function() {
289
+ // Add ripple effect to buttons
290
+ document.querySelectorAll('button').forEach(button => {
291
+ button.addEventListener('click', function(e) {
292
+ // Only add ripple to certain buttons
293
+ if(this.classList.contains('flex-col') || this.classList.contains('bg-white')) {
294
+ const rect = this.getBoundingClientRect();
295
+ const x = e.clientX - rect.left;
296
+ const y = e.clientY - rect.top;
297
+
298
+ const ripple = document.createElement('span');
299
+ ripple.className = 'ripple';
300
+ ripple.style.left = `${x}px`;
301
+ ripple.style.top = `${y}px`;
302
+
303
+ this.appendChild(ripple);
304
+
305
+ setTimeout(() => {
306
+ ripple.remove();
307
+ }, 600);
308
+ }
309
+ });
310
+ });
311
+
312
+ // Simulate loading transactions
313
+ setTimeout(() => {
314
+ const transactions = document.querySelectorAll('.animate-fade-in');
315
+ transactions.forEach((el, index) => {
316
+ el.style.opacity = 1;
317
+ });
318
+ }, 100);
319
+
320
+ // Toggle dark mode (example functionality)
321
+ const darkModeToggle = document.createElement('div');
322
+ darkModeToggle.className = 'fixed top-4 right-4 z-50';
323
+ darkModeToggle.innerHTML = `
324
+ <label class="switch">
325
+ <input type="checkbox" id="darkModeToggle">
326
+ <span class="slider"></span>
327
+ </label>
328
+ `;
329
+ document.body.appendChild(darkModeToggle);
330
+
331
+ document.getElementById('darkModeToggle').addEventListener('change', function() {
332
+ document.body.classList.toggle('bg-gray-900');
333
+ document.querySelector('.max-w-md').classList.toggle('bg-gray-800');
334
+ document.querySelector('.max-w-md').classList.toggle('text-white');
335
+
336
+ // Toggle all text colors
337
+ document.querySelectorAll('.text-gray-800').forEach(el => {
338
+ el.classList.toggle('text-gray-200');
339
+ });
340
+
341
+ // Toggle card backgrounds
342
+ document.querySelectorAll('.bg-white').forEach(el => {
343
+ el.classList.toggle('bg-gray-700');
344
+ });
345
+
346
+ // Toggle transaction backgrounds
347
+ document.querySelectorAll('.bg-gray-100').forEach(el => {
348
+ el.classList.toggle('bg-gray-900');
349
+ });
350
+ });
351
+ });
352
+ </script>
353
+ <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=markburn/test2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
354
+ </html>