Hugging Face's logo

Spaces:
vs4vijay
/
autocodetest
Running

App Files Community
vs4vijay commited on
Commit
6a89e6f
·
verified ·
1 Parent(s): 12d6348

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +796 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Autocodetest
3
- emoji: 🏃
4
  colorFrom: red
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: autocodetest
3
+ emoji: 🐳
4
  colorFrom: red
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,796 @@
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>CardX - Smart Credit Card Platform</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .card-shadow {
14
+ box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
15
+ }
16
+ .chat-container {
17
+ height: 400px;
18
+ overflow-y: auto;
19
+ scrollbar-width: thin;
20
+ }
21
+ .chat-container::-webkit-scrollbar {
22
+ width: 6px;
23
+ }
24
+ .chat-container::-webkit-scrollbar-thumb {
25
+ background-color: rgba(0,0,0,0.2);
26
+ border-radius: 3px;
27
+ }
28
+ .fade-in {
29
+ animation: fadeIn 0.3s ease-in-out;
30
+ }
31
+ @keyframes fadeIn {
32
+ from { opacity: 0; transform: translateY(10px); }
33
+ to { opacity: 1; transform: translateY(0); }
34
+ }
35
+ .pulse {
36
+ animation: pulse 2s infinite;
37
+ }
38
+ @keyframes pulse {
39
+ 0% { transform: scale(1); }
40
+ 50% { transform: scale(1.05); }
41
+ 100% { transform: scale(1); }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50 min-h-screen">
46
+ <!-- Header -->
47
+ <header class="gradient-bg text-white">
48
+ <div class="container mx-auto px-4 py-6">
49
+ <div class="flex justify-between items-center">
50
+ <div class="flex items-center space-x-2">
51
+ <i class="fas fa-credit-card text-3xl"></i>
52
+ <h1 class="text-2xl font-bold">CardX</h1>
53
+ </div>
54
+ <nav>
55
+ <ul class="flex space-x-6">
56
+ <li><a href="#" class="hover:underline">My Cards</a></li>
57
+ <li><a href="#" class="hover:underline">Explore</a></li>
58
+ <li><a href="#" class="hover:underline">Card Chat</a></li>
59
+ <li><a href="#" class="hover:underline">Profile</a></li>
60
+ </ul>
61
+ </nav>
62
+ </div>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Main Content -->
67
+ <main class="container mx-auto px-4 py-8">
68
+ <!-- Hero Section -->
69
+ <section class="mb-12">
70
+ <div class="bg-white rounded-xl p-8 card-shadow">
71
+ <div class="flex flex-col md:flex-row items-center">
72
+ <div class="md:w-1/2 mb-6 md:mb-0">
73
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Find the Perfect Credit Card for Your Lifestyle</h2>
74
+ <p class="text-gray-600 mb-6">CardX analyzes your spending habits and recommends the best credit cards to maximize rewards and minimize fees.</p>
75
+ <div class="flex space-x-4">
76
+ <button id="addCardBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
77
+ <i class="fas fa-plus-circle mr-2"></i> Add Your Card
78
+ </button>
79
+ <button id="exploreBtn" class="border border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
80
+ <i class="fas fa-search mr-2"></i> Explore Cards
81
+ </button>
82
+ </div>
83
+ </div>
84
+ <div class="md:w-1/2 flex justify-center">
85
+ <img src="https://illustrations.popsy.co/amber/credit-card-payment.svg" alt="Credit Card Illustration" class="w-full max-w-md">
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Add Card Modal -->
92
+ <div id="addCardModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
93
+ <div class="bg-white rounded-xl p-6 w-full max-w-md fade-in">
94
+ <div class="flex justify-between items-center mb-4">
95
+ <h3 class="text-xl font-bold text-gray-800">Add Your Credit Card</h3>
96
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
97
+ <i class="fas fa-times"></i>
98
+ </button>
99
+ </div>
100
+ <form id="cardForm">
101
+ <div class="mb-4">
102
+ <label for="cardName" class="block text-gray-700 mb-2">Card Name</label>
103
+ <input type="text" id="cardName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g. Chase Sapphire Preferred" required>
104
+ </div>
105
+ <div class="mb-4">
106
+ <label for="cardType" class="block text-gray-700 mb-2">Card Type</label>
107
+ <select id="cardType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
108
+ <option value="">Select a type</option>
109
+ <option value="travel">Travel</option>
110
+ <option value="cashback">Cash Back</option>
111
+ <option value="business">Business</option>
112
+ <option value="student">Student</option>
113
+ <option value="secured">Secured</option>
114
+ </select>
115
+ </div>
116
+ <div class="mb-4">
117
+ <label for="annualFee" class="block text-gray-700 mb-2">Annual Fee ($)</label>
118
+ <input type="number" id="annualFee" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g. 95" required>
119
+ </div>
120
+ <div class="mb-4">
121
+ <label for="rewardsRate" class="block text-gray-700 mb-2">Rewards Rate (%)</label>
122
+ <input type="number" step="0.1" id="rewardsRate" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g. 2.5" required>
123
+ </div>
124
+ <div class="mb-4">
125
+ <label for="cardBenefits" class="block text-gray-700 mb-2">Key Benefits</label>
126
+ <textarea id="cardBenefits" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" rows="3" placeholder="Enter key benefits separated by commas"></textarea>
127
+ </div>
128
+ <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition duration-300">
129
+ Add Card
130
+ </button>
131
+ </form>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- My Cards Section -->
136
+ <section class="mb-12">
137
+ <div class="flex justify-between items-center mb-6">
138
+ <h2 class="text-2xl font-bold text-gray-800">My Credit Cards</h2>
139
+ <button id="refreshCardsBtn" class="text-purple-600 hover:text-purple-800 flex items-center">
140
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
141
+ </button>
142
+ </div>
143
+ <div id="myCardsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
144
+ <!-- Cards will be added here dynamically -->
145
+ <div class="bg-white rounded-xl p-6 card-shadow">
146
+ <div class="flex justify-between items-start mb-4">
147
+ <div>
148
+ <h3 class="text-xl font-bold text-gray-800">Chase Sapphire Preferred</h3>
149
+ <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mt-1">Travel</span>
150
+ </div>
151
+ <div class="bg-blue-500 text-white p-2 rounded-lg">
152
+ <i class="fas fa-star"></i>
153
+ </div>
154
+ </div>
155
+ <div class="mb-4">
156
+ <div class="flex justify-between mb-2">
157
+ <span class="text-gray-600">Annual Fee</span>
158
+ <span class="font-medium">$95</span>
159
+ </div>
160
+ <div class="flex justify-between mb-2">
161
+ <span class="text-gray-600">Rewards Rate</span>
162
+ <span class="font-medium">2.5%</span>
163
+ </div>
164
+ </div>
165
+ <div class="mb-4">
166
+ <h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
167
+ <ul class="text-sm text-gray-600 space-y-1">
168
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 2x points on travel & dining</li>
169
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 25% more value when redeeming for travel</li>
170
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> No foreign transaction fees</li>
171
+ </ul>
172
+ </div>
173
+ <div class="flex justify-between pt-4 border-t border-gray-200">
174
+ <button class="text-purple-600 hover:text-purple-800 flex items-center">
175
+ <i class="fas fa-chart-line mr-2"></i> Analyze
176
+ </button>
177
+ <button class="text-red-500 hover:text-red-700 flex items-center">
178
+ <i class="fas fa-trash-alt mr-2"></i> Remove
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- Card Chat Section -->
186
+ <section class="mb-12">
187
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Card Chat Assistant</h2>
188
+ <div class="bg-white rounded-xl card-shadow overflow-hidden">
189
+ <div class="p-4 border-b border-gray-200 bg-gray-50">
190
+ <div class="flex items-center">
191
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-3">
192
+ <i class="fas fa-robot"></i>
193
+ </div>
194
+ <div>
195
+ <h3 class="font-medium">CardX Assistant</h3>
196
+ <p class="text-xs text-gray-500">Ask me anything about credit cards</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div id="chatContainer" class="chat-container p-4 bg-white">
201
+ <div class="flex mb-4">
202
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
203
+ <i class="fas fa-robot"></i>
204
+ </div>
205
+ <div class="bg-gray-100 rounded-lg p-3 max-w-3/4">
206
+ <p class="text-gray-800">Hi there! I'm your CardX assistant. I can help you find the best credit card based on your spending habits, or analyze your current cards to maximize rewards. What would you like to know?</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="p-4 border-t border-gray-200 bg-gray-50">
211
+ <div class="flex">
212
+ <input type="text" id="chatInput" placeholder="Type your question here..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
213
+ <button id="sendChatBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg transition duration-300">
214
+ <i class="fas fa-paper-plane"></i>
215
+ </button>
216
+ </div>
217
+ <div class="mt-2 flex flex-wrap gap-2">
218
+ <button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
219
+ Best travel card?
220
+ </button>
221
+ <button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
222
+ Maximize cash back
223
+ </button>
224
+ <button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
225
+ Low annual fee options
226
+ </button>
227
+ <button class="quick-question-btn bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-full text-sm transition duration-300">
228
+ Compare my cards
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Recommended Cards Section -->
236
+ <section>
237
+ <div class="flex justify-between items-center mb-6">
238
+ <h2 class="text-2xl font-bold text-gray-800">Recommended For You</h2>
239
+ <button class="text-purple-600 hover:text-purple-800 flex items-center">
240
+ <i class="fas fa-sliders-h mr-2"></i> Filter
241
+ </button>
242
+ </div>
243
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
244
+ <div class="bg-white rounded-xl p-6 card-shadow pulse">
245
+ <div class="flex justify-between items-start mb-4">
246
+ <div>
247
+ <h3 class="text-xl font-bold text-gray-800">Capital One Venture X</h3>
248
+ <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mt-1">Premium Travel</span>
249
+ </div>
250
+ <div class="bg-yellow-400 text-white p-2 rounded-lg">
251
+ <i class="fas fa-crown"></i>
252
+ </div>
253
+ </div>
254
+ <div class="mb-4">
255
+ <div class="flex justify-between mb-2">
256
+ <span class="text-gray-600">Annual Fee</span>
257
+ <span class="font-medium">$395</span>
258
+ </div>
259
+ <div class="flex justify-between mb-2">
260
+ <span class="text-gray-600">Rewards Rate</span>
261
+ <span class="font-medium">2-10%</span>
262
+ </div>
263
+ </div>
264
+ <div class="mb-4">
265
+ <h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
266
+ <ul class="text-sm text-gray-600 space-y-1">
267
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 10x miles on hotels & rental cars</li>
268
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> $300 annual travel credit</li>
269
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Airport lounge access</li>
270
+ </ul>
271
+ </div>
272
+ <div class="flex justify-between pt-4 border-t border-gray-200">
273
+ <button class="text-blue-600 hover:text-blue-800 flex items-center">
274
+ <i class="fas fa-info-circle mr-2"></i> Details
275
+ </button>
276
+ <button class="text-green-600 hover:text-green-800 flex items-center">
277
+ <i class="fas fa-plus-circle mr-2"></i> Add to My Cards
278
+ </button>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="bg-white rounded-xl p-6 card-shadow">
283
+ <div class="flex justify-between items-start mb-4">
284
+ <div>
285
+ <h3 class="text-xl font-bold text-gray-800">Citi Double Cash</h3>
286
+ <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mt-1">Cash Back</span>
287
+ </div>
288
+ <div class="bg-green-500 text-white p-2 rounded-lg">
289
+ <i class="fas fa-dollar-sign"></i>
290
+ </div>
291
+ </div>
292
+ <div class="mb-4">
293
+ <div class="flex justify-between mb-2">
294
+ <span class="text-gray-600">Annual Fee</span>
295
+ <span class="font-medium">$0</span>
296
+ </div>
297
+ <div class="flex justify-between mb-2">
298
+ <span class="text-gray-600">Rewards Rate</span>
299
+ <span class="font-medium">2%</span>
300
+ </div>
301
+ </div>
302
+ <div class="mb-4">
303
+ <h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
304
+ <ul class="text-sm text-gray-600 space-y-1">
305
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 1% when you buy, 1% when you pay</li>
306
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> No annual fee</li>
307
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Simple cash back structure</li>
308
+ </ul>
309
+ </div>
310
+ <div class="flex justify-between pt-4 border-t border-gray-200">
311
+ <button class="text-blue-600 hover:text-blue-800 flex items-center">
312
+ <i class="fas fa-info-circle mr-2"></i> Details
313
+ </button>
314
+ <button class="text-green-600 hover:text-green-800 flex items-center">
315
+ <i class="fas fa-plus-circle mr-2"></i> Add to My Cards
316
+ </button>
317
+ </div>
318
+ </div>
319
+
320
+ <div class="bg-white rounded-xl p-6 card-shadow">
321
+ <div class="flex justify-between items-start mb-4">
322
+ <div>
323
+ <h3 class="text-xl font-bold text-gray-800">American Express Gold</h3>
324
+ <span class="inline-block bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded-full mt-1">Dining</span>
325
+ </div>
326
+ <div class="bg-amber-500 text-white p-2 rounded-lg">
327
+ <i class="fas fa-utensils"></i>
328
+ </div>
329
+ </div>
330
+ <div class="mb-4">
331
+ <div class="flex justify-between mb-2">
332
+ <span class="text-gray-600">Annual Fee</span>
333
+ <span class="font-medium">$250</span>
334
+ </div>
335
+ <div class="flex justify-between mb-2">
336
+ <span class="text-gray-600">Rewards Rate</span>
337
+ <span class="font-medium">4%</span>
338
+ </div>
339
+ </div>
340
+ <div class="mb-4">
341
+ <h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
342
+ <ul class="text-sm text-gray-600 space-y-1">
343
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 4x points at restaurants</li>
344
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> $120 dining credit annually</li>
345
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> $120 Uber Cash annually</li>
346
+ </ul>
347
+ </div>
348
+ <div class="flex justify-between pt-4 border-t border-gray-200">
349
+ <button class="text-blue-600 hover:text-blue-800 flex items-center">
350
+ <i class="fas fa-info-circle mr-2"></i> Details
351
+ </button>
352
+ <button class="text-green-600 hover:text-green-800 flex items-center">
353
+ <i class="fas fa-plus-circle mr-2"></i> Add to My Cards
354
+ </button>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+ </main>
360
+
361
+ <!-- Footer -->
362
+ <footer class="bg-gray-800 text-white py-8 mt-12">
363
+ <div class="container mx-auto px-4">
364
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
365
+ <div>
366
+ <h3 class="text-lg font-bold mb-4">CardX</h3>
367
+ <p class="text-gray-400">The smart way to manage and optimize your credit cards for maximum rewards.</p>
368
+ </div>
369
+ <div>
370
+ <h4 class="text-md font-semibold mb-4">Features</h4>
371
+ <ul class="space-y-2">
372
+ <li><a href="#" class="text-gray-400 hover:text-white">My Cards</a></li>
373
+ <li><a href="#" class="text-gray-400 hover:text-white">Card Analysis</a></li>
374
+ <li><a href="#" class="text-gray-400 hover:text-white">Card Chat</a></li>
375
+ <li><a href="#" class="text-gray-400 hover:text-white">Recommendations</a></li>
376
+ </ul>
377
+ </div>
378
+ <div>
379
+ <h4 class="text-md font-semibold mb-4">Resources</h4>
380
+ <ul class="space-y-2">
381
+ <li><a href="#" class="text-gray-400 hover:text-white">Credit Card Guide</a></li>
382
+ <li><a href="#" class="text-gray-400 hover:text-white">Rewards Calculator</a></li>
383
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
384
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
385
+ </ul>
386
+ </div>
387
+ <div>
388
+ <h4 class="text-md font-semibold mb-4">Connect</h4>
389
+ <div class="flex space-x-4">
390
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
391
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook text-xl"></i></a>
392
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
393
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
394
+ </div>
395
+ <div class="mt-4">
396
+ <p class="text-gray-400">Subscribe to our newsletter</p>
397
+ <div class="flex mt-2">
398
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-700 text-white rounded-l focus:outline-none">
399
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-r">
400
+ <i class="fas fa-paper-plane"></i>
401
+ </button>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
407
+ <p>&copy; 2023 CardX. All rights reserved.</p>
408
+ </div>
409
+ </div>
410
+ </footer>
411
+
412
+ <script>
413
+ // Sample data for cards
414
+ const sampleCards = [
415
+ {
416
+ name: "Chase Sapphire Preferred",
417
+ type: "travel",
418
+ annualFee: 95,
419
+ rewardsRate: 2.5,
420
+ benefits: ["2x points on travel & dining", "25% more value when redeeming for travel", "No foreign transaction fees"]
421
+ },
422
+ {
423
+ name: "Capital One Venture X",
424
+ type: "premium travel",
425
+ annualFee: 395,
426
+ rewardsRate: 5,
427
+ benefits: ["10x miles on hotels & rental cars", "$300 annual travel credit", "Airport lounge access"]
428
+ },
429
+ {
430
+ name: "Citi Double Cash",
431
+ type: "cashback",
432
+ annualFee: 0,
433
+ rewardsRate: 2,
434
+ benefits: ["1% when you buy, 1% when you pay", "No annual fee", "Simple cash back structure"]
435
+ },
436
+ {
437
+ name: "American Express Gold",
438
+ type: "dining",
439
+ annualFee: 250,
440
+ rewardsRate: 4,
441
+ benefits: ["4x points at restaurants", "$120 dining credit annually", "$120 Uber Cash annually"]
442
+ }
443
+ ];
444
+
445
+ // DOM Elements
446
+ const addCardBtn = document.getElementById('addCardBtn');
447
+ const closeModalBtn = document.getElementById('closeModalBtn');
448
+ const addCardModal = document.getElementById('addCardModal');
449
+ const cardForm = document.getElementById('cardForm');
450
+ const myCardsContainer = document.getElementById('myCardsContainer');
451
+ const refreshCardsBtn = document.getElementById('refreshCardsBtn');
452
+ const chatContainer = document.getElementById('chatContainer');
453
+ const chatInput = document.getElementById('chatInput');
454
+ const sendChatBtn = document.getElementById('sendChatBtn');
455
+ const quickQuestionBtns = document.querySelectorAll('.quick-question-btn');
456
+
457
+ // Modal toggle
458
+ addCardBtn.addEventListener('click', () => {
459
+ addCardModal.classList.remove('hidden');
460
+ });
461
+
462
+ closeModalBtn.addEventListener('click', () => {
463
+ addCardModal.classList.add('hidden');
464
+ });
465
+
466
+ // Add new card
467
+ cardForm.addEventListener('submit', (e) => {
468
+ e.preventDefault();
469
+
470
+ const cardName = document.getElementById('cardName').value;
471
+ const cardType = document.getElementById('cardType').value;
472
+ const annualFee = document.getElementById('annualFee').value;
473
+ const rewardsRate = document.getElementById('rewardsRate').value;
474
+ const cardBenefits = document.getElementById('cardBenefits').value.split(',').map(b => b.trim());
475
+
476
+ // Create new card object
477
+ const newCard = {
478
+ name: cardName,
479
+ type: cardType,
480
+ annualFee: annualFee,
481
+ rewardsRate: rewardsRate,
482
+ benefits: cardBenefits
483
+ };
484
+
485
+ // Add to sample cards
486
+ sampleCards.push(newCard);
487
+
488
+ // Render cards
489
+ renderCards();
490
+
491
+ // Close modal and reset form
492
+ addCardModal.classList.add('hidden');
493
+ cardForm.reset();
494
+
495
+ // Show success message
496
+ addChatMessage('assistant', `Successfully added ${cardName} to your cards! Would you like me to analyze it for you?`);
497
+ });
498
+
499
+ // Render cards
500
+ function renderCards() {
501
+ myCardsContainer.innerHTML = '';
502
+
503
+ sampleCards.forEach(card => {
504
+ const cardTypeClass = getCardTypeClass(card.type);
505
+ const cardTypeText = getCardTypeText(card.type);
506
+ const cardIcon = getCardIcon(card.type);
507
+
508
+ const cardElement = document.createElement('div');
509
+ cardElement.className = 'bg-white rounded-xl p-6 card-shadow fade-in';
510
+ cardElement.innerHTML = `
511
+ <div class="flex justify-between items-start mb-4">
512
+ <div>
513
+ <h3 class="text-xl font-bold text-gray-800">${card.name}</h3>
514
+ <span class="inline-block ${cardTypeClass} text-xs px-2 py-1 rounded-full mt-1">${cardTypeText}</span>
515
+ </div>
516
+ <div class="${getCardIconBgClass(card.type)} text-white p-2 rounded-lg">
517
+ <i class="${cardIcon}"></i>
518
+ </div>
519
+ </div>
520
+ <div class="mb-4">
521
+ <div class="flex justify-between mb-2">
522
+ <span class="text-gray-600">Annual Fee</span>
523
+ <span class="font-medium">$${card.annualFee}</span>
524
+ </div>
525
+ <div class="flex justify-between mb-2">
526
+ <span class="text-gray-600">Rewards Rate</span>
527
+ <span class="font-medium">${card.rewardsRate}%</span>
528
+ </div>
529
+ </div>
530
+ <div class="mb-4">
531
+ <h4 class="text-sm font-semibold text-gray-700 mb-2">Key Benefits</h4>
532
+ <ul class="text-sm text-gray-600 space-y-1">
533
+ ${card.benefits.map(benefit => `
534
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> ${benefit}</li>
535
+ `).join('')}
536
+ </ul>
537
+ </div>
538
+ <div class="flex justify-between pt-4 border-t border-gray-200">
539
+ <button class="analyze-btn text-purple-600 hover:text-purple-800 flex items-center" data-card="${card.name}">
540
+ <i class="fas fa-chart-line mr-2"></i> Analyze
541
+ </button>
542
+ <button class="remove-btn text-red-500 hover:text-red-700 flex items-center" data-card="${card.name}">
543
+ <i class="fas fa-trash-alt mr-2"></i> Remove
544
+ </button>
545
+ </div>
546
+ `;
547
+
548
+ myCardsContainer.appendChild(cardElement);
549
+ });
550
+
551
+ // Add event listeners to new buttons
552
+ document.querySelectorAll('.analyze-btn').forEach(btn => {
553
+ btn.addEventListener('click', (e) => {
554
+ const cardName = e.target.getAttribute('data-card');
555
+ analyzeCard(cardName);
556
+ });
557
+ });
558
+
559
+ document.querySelectorAll('.remove-btn').forEach(btn => {
560
+ btn.addEventListener('click', (e) => {
561
+ const cardName = e.target.getAttribute('data-card');
562
+ removeCard(cardName);
563
+ });
564
+ });
565
+ }
566
+
567
+ // Helper functions for card rendering
568
+ function getCardTypeClass(type) {
569
+ switch(type) {
570
+ case 'travel': return 'bg-blue-100 text-blue-800';
571
+ case 'premium travel': return 'bg-indigo-100 text-indigo-800';
572
+ case 'cashback': return 'bg-green-100 text-green-800';
573
+ case 'dining': return 'bg-amber-100 text-amber-800';
574
+ case 'business': return 'bg-gray-100 text-gray-800';
575
+ default: return 'bg-purple-100 text-purple-800';
576
+ }
577
+ }
578
+
579
+ function getCardTypeText(type) {
580
+ switch(type) {
581
+ case 'travel': return 'Travel';
582
+ case 'premium travel': return 'Premium Travel';
583
+ case 'cashback': return 'Cash Back';
584
+ case 'dining': return 'Dining';
585
+ case 'business': return 'Business';
586
+ default: return type.charAt(0).toUpperCase() + type.slice(1);
587
+ }
588
+ }
589
+
590
+ function getCardIcon(type) {
591
+ switch(type) {
592
+ case 'travel': return 'fas fa-plane';
593
+ case 'premium travel': return 'fas fa-crown';
594
+ case 'cashback': return 'fas fa-dollar-sign';
595
+ case 'dining': return 'fas fa-utensils';
596
+ case 'business': return 'fas fa-briefcase';
597
+ default: return 'fas fa-credit-card';
598
+ }
599
+ }
600
+
601
+ function getCardIconBgClass(type) {
602
+ switch(type) {
603
+ case 'travel': return 'bg-blue-500';
604
+ case 'premium travel': return 'bg-indigo-500';
605
+ case 'cashback': return 'bg-green-500';
606
+ case 'dining': return 'bg-amber-500';
607
+ case 'business': return 'bg-gray-500';
608
+ default: return 'bg-purple-500';
609
+ }
610
+ }
611
+
612
+ // Analyze card
613
+ function analyzeCard(cardName) {
614
+ const card = sampleCards.find(c => c.name === cardName);
615
+ if (!card) return;
616
+
617
+ let analysis = `Analyzing ${cardName}...\n\n`;
618
+ analysis += `Annual Fee: $${card.annualFee}\n`;
619
+ analysis += `Rewards Rate: ${card.rewardsRate}%\n\n`;
620
+
621
+ if (card.annualFee > 300) {
622
+ analysis += `This is a premium card with a high annual fee. Make sure you're utilizing all the benefits to justify the cost.\n`;
623
+ } else if (card.annualFee > 0) {
624
+ analysis += `This card has a moderate annual fee. The rewards should offset this cost based on your spending.\n`;
625
+ } else {
626
+ analysis += `Great! This card has no annual fee, making it easy to keep in your wallet.\n`;
627
+ }
628
+
629
+ if (card.rewardsRate >= 3) {
630
+ analysis += `The rewards rate is excellent! Focus on using this card for bonus categories.\n`;
631
+ } else if (card.rewardsRate >= 1.5) {
632
+ analysis += `The rewards rate is good. This could be a solid everyday card.\n`;
633
+ } else {
634
+ analysis += `The rewards rate is low. Consider using this card only when other cards don't offer better rewards.\n`;
635
+ }
636
+
637
+ analysis += `\nKey Benefits:\n`;
638
+ card.benefits.forEach(benefit => {
639
+ analysis += `- ${benefit}\n`;
640
+ });
641
+
642
+ addChatMessage('assistant', analysis);
643
+
644
+ // Scroll to chat section
645
+ document.querySelector('#chatContainer').scrollIntoView({ behavior: 'smooth' });
646
+ }
647
+
648
+ // Remove card
649
+ function removeCard(cardName) {
650
+ const index = sampleCards.findIndex(c => c.name === cardName);
651
+ if (index !== -1) {
652
+ sampleCards.splice(index, 1);
653
+ renderCards();
654
+ addChatMessage('assistant', `${cardName} has been removed from your cards.`);
655
+ }
656
+ }
657
+
658
+ // Chat functionality
659
+ function addChatMessage(sender, message) {
660
+ const messageDiv = document.createElement('div');
661
+ messageDiv.className = 'flex mb-4 fade-in';
662
+
663
+ if (sender === 'user') {
664
+ messageDiv.className += ' justify-end';
665
+ messageDiv.innerHTML = `
666
+ <div class="bg-purple-600 text-white rounded-lg p-3 max-w-3/4">
667
+ <p>${message}</p>
668
+ </div>
669
+ <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 ml-3 flex-shrink-0">
670
+ <i class="fas fa-user"></i>
671
+ </div>
672
+ `;
673
+ } else {
674
+ messageDiv.innerHTML = `
675
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
676
+ <i class="fas fa-robot"></i>
677
+ </div>
678
+ <div class="bg-gray-100 rounded-lg p-3 max-w-3/4">
679
+ <p class="text-gray-800">${message}</p>
680
+ </div>
681
+ `;
682
+ }
683
+
684
+ chatContainer.appendChild(messageDiv);
685
+ chatContainer.scrollTop = chatContainer.scrollHeight;
686
+ }
687
+
688
+ sendChatBtn.addEventListener('click', sendMessage);
689
+ chatInput.addEventListener('keypress', (e) => {
690
+ if (e.key === 'Enter') sendMessage();
691
+ });
692
+
693
+ function sendMessage() {
694
+ const message = chatInput.value.trim();
695
+ if (message) {
696
+ addChatMessage('user', message);
697
+ chatInput.value = '';
698
+
699
+ // Simulate assistant response after a short delay
700
+ setTimeout(() => {
701
+ let response;
702
+
703
+ if (message.toLowerCase().includes('best') && message.toLowerCase().includes('card')) {
704
+ const bestCard = sampleCards.reduce((prev, current) =>
705
+ (prev.rewardsRate > current.rewardsRate) ? prev : current
706
+ );
707
+
708
+ response = `Based on rewards rate, your best card is ${bestCard.name} with ${bestCard.rewardsRate}% back. `;
709
+ response += `It's great for ${bestCard.type} spending. Would you like me to analyze it in more detail?`;
710
+ }
711
+ else if (message.toLowerCase().includes('travel') || message.toLowerCase().includes('flight') || message.toLowerCase().includes('hotel')) {
712
+ const travelCards = sampleCards.filter(card => card.type.includes('travel'));
713
+ if (travelCards.length > 0) {
714
+ response = `For travel spending, consider these cards:\n`;
715
+ travelCards.forEach(card => {
716
+ response += `- ${card.name}: ${card.rewardsRate}% back on travel ($${card.annualFee} annual fee)\n`;
717
+ });
718
+ response += `\nThe Capital One Venture X offers lounge access which is great for frequent travelers.`;
719
+ } else {
720
+ response = `You don't have any travel cards. Would you like me to recommend some?`;
721
+ }
722
+ }
723
+ else if (message.toLowerCase().includes('cash back') || message.toLowerCase().includes('cashback')) {
724
+ const cashbackCards = sampleCards.filter(card => card.type.includes('cashback'));
725
+ if (cashbackCards.length > 0) {
726
+ response = `For cash back, these are your options:\n`;
727
+ cashbackCards.forEach(card => {
728
+ response += `- ${card.name}: ${card.rewardsRate}% cash back ($${card.annualFee} annual fee)\n`;
729
+ });
730
+ response += `\nThe Citi Double Cash gives you 2% on everything with no annual fee.`;
731
+ } else {
732
+ response = `You don't have any dedicated cash back cards. The Citi Double Cash (2% back) is a great option to consider.`;
733
+ }
734
+ }
735
+ else if (message.toLowerCase().includes('fee') || message.toLowerCase().includes('annual')) {
736
+ const noFeeCards = sampleCards.filter(card => card.annualFee === 0);
737
+ const feeCards = sampleCards.filter(card => card.annualFee > 0);
738
+
739
+ if (noFeeCards.length > 0) {
740
+ response = `You have ${noFeeCards.length} cards with no annual fee:\n`;
741
+ noFeeCards.forEach(card => {
742
+ response += `- ${card.name}\n`;
743
+ });
744
+ }
745
+
746
+ if (feeCards.length > 0) {
747
+ response += `\nCards with annual fees:\n`;
748
+ feeCards.forEach(card => {
749
+ response += `- ${card.name}: $${card.annualFee}\n`;
750
+ });
751
+ response += `\nMake sure the rewards from these cards outweigh their annual fees.`;
752
+ }
753
+ }
754
+ else if (message.toLowerCase().includes('compare')) {
755
+ if (sampleCards.length >= 2) {
756
+ response = `Comparing your cards:\n\n`;
757
+ sampleCards.forEach(card => {
758
+ response += `${card.name} (${card.type}):\n`;
759
+ response += `- Annual Fee: $${card.annualFee}\n`;
760
+ response += `- Rewards Rate: ${card.rewardsRate}%\n`;
761
+ response += `- Best for: ${card.benefits[0]}\n\n`;
762
+ });
763
+ response += `To maximize rewards, use each card for its strongest category.`;
764
+ } else {
765
+ response = `You need at least 2 cards to compare. Would you like to add another card?`;
766
+ }
767
+ }
768
+ else {
769
+ response = `I can help you analyze your cards, compare them, or find the best card for specific spending categories. `;
770
+ response += `Try asking about "best travel card", "maximize cash back", or "compare my cards".`;
771
+ }
772
+
773
+ addChatMessage('assistant', response);
774
+ }, 1000);
775
+ }
776
+ }
777
+
778
+ // Quick question buttons
779
+ quickQuestionBtns.forEach(btn => {
780
+ btn.addEventListener('click', (e) => {
781
+ chatInput.value = e.target.textContent;
782
+ sendMessage();
783
+ });
784
+ });
785
+
786
+ // Refresh cards
787
+ refreshCardsBtn.addEventListener('click', () => {
788
+ renderCards();
789
+ addChatMessage('assistant', 'Your cards have been refreshed!');
790
+ });
791
+
792
+ // Initial render
793
+ renderCards();
794
+ </script>
795
+ <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=vs4vijay/autocodetest" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
796
+ </html>