Hugging Face's logo

Spaces:
SilentProgrammer
/
credit-card-generator
Running

App Files Community
SilentProgrammer commited on
Commit
568e73d
·
verified ·
1 Parent(s): 9d0dbdb

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +661 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Credit Card Generator
3
- emoji: 👁
4
  colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: credit-card-generator
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: blue
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,661 @@
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>Ultimate 3D Credit Card Designer</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
+ .card-container {
11
+ perspective: 1000px;
12
+ width: 420px;
13
+ height: 260px;
14
+ }
15
+
16
+ .card {
17
+ width: 100%;
18
+ height: 100%;
19
+ position: relative;
20
+ transform-style: preserve-3d;
21
+ transition: transform 0.5s;
22
+ border-radius: 20px;
23
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
24
+ cursor: pointer;
25
+ }
26
+
27
+ .card-front, .card-back {
28
+ position: absolute;
29
+ width: 100%;
30
+ height: 100%;
31
+ backface-visibility: hidden;
32
+ border-radius: 20px;
33
+ overflow: hidden;
34
+ }
35
+
36
+ .card-back {
37
+ transform: rotateY(180deg);
38
+ }
39
+
40
+ .card-chip {
41
+ width: 50px;
42
+ height: 35px;
43
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
44
+ border-radius: 8px;
45
+ position: relative;
46
+ }
47
+
48
+ .card-chip::before {
49
+ content: '';
50
+ position: absolute;
51
+ top: 0;
52
+ left: 0;
53
+ width: 100%;
54
+ height: 100%;
55
+ background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
56
+ border-radius: 8px;
57
+ }
58
+
59
+ .card-magnetic-stripe {
60
+ width: 100%;
61
+ height: 40px;
62
+ background: #222;
63
+ margin-top: 30px;
64
+ }
65
+
66
+ .card-signature-stripe {
67
+ width: 80%;
68
+ height: 30px;
69
+ background: repeating-linear-gradient(45deg, #fff, #fff 5px, #e5e5e5 5px, #e5e5e5 10px);
70
+ margin-top: 10px;
71
+ display: flex;
72
+ align-items: center;
73
+ padding-left: 10px;
74
+ color: #333;
75
+ font-size: 12px;
76
+ }
77
+
78
+ .card-cvv {
79
+ background: #fff;
80
+ color: #333;
81
+ padding: 2px 10px;
82
+ border-radius: 4px;
83
+ font-family: monospace;
84
+ font-size: 14px;
85
+ }
86
+
87
+ .card-hologram {
88
+ width: 60px;
89
+ height: 40px;
90
+ background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ffff00);
91
+ background-size: 400% 400%;
92
+ animation: hologram 5s ease infinite;
93
+ border-radius: 5px;
94
+ position: relative;
95
+ overflow: hidden;
96
+ }
97
+
98
+ @keyframes hologram {
99
+ 0% { background-position: 0% 50%; }
100
+ 50% { background-position: 100% 50%; }
101
+ 100% { background-position: 0% 50%; }
102
+ }
103
+
104
+ .card-hologram::before {
105
+ content: '';
106
+ position: absolute;
107
+ top: 0;
108
+ left: 0;
109
+ width: 100%;
110
+ height: 100%;
111
+ background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
112
+ }
113
+
114
+ .card-number {
115
+ letter-spacing: 3px;
116
+ font-size: 20px;
117
+ text-shadow: 0 2px 4px rgba(0,0,0,0.2);
118
+ }
119
+
120
+ .card-glow {
121
+ position: absolute;
122
+ width: 100%;
123
+ height: 100%;
124
+ border-radius: 20px;
125
+ background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.2), transparent 70%);
126
+ pointer-events: none;
127
+ }
128
+
129
+ .card-reflections {
130
+ position: absolute;
131
+ width: 100%;
132
+ height: 100%;
133
+ border-radius: 20px;
134
+ background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
135
+ pointer-events: none;
136
+ }
137
+
138
+ .card-logo {
139
+ position: absolute;
140
+ right: 20px;
141
+ bottom: 20px;
142
+ height: 30px;
143
+ width: auto;
144
+ }
145
+
146
+ .card-network-logo {
147
+ position: absolute;
148
+ right: 20px;
149
+ top: 20px;
150
+ height: 30px;
151
+ width: auto;
152
+ }
153
+
154
+ .card-contactless {
155
+ position: absolute;
156
+ right: 60px;
157
+ top: 20px;
158
+ color: rgba(255,255,255,0.8);
159
+ font-size: 24px;
160
+ }
161
+
162
+ .card-back-pattern {
163
+ position: absolute;
164
+ width: 100%;
165
+ height: 100%;
166
+ background: repeating-linear-gradient(
167
+ 45deg,
168
+ rgba(255,255,255,0.03),
169
+ rgba(255,255,255,0.03) 5px,
170
+ rgba(255,255,255,0.01) 5px,
171
+ rgba(255,255,255,0.01) 10px
172
+ );
173
+ }
174
+
175
+ .gradient-preview {
176
+ width: 100%;
177
+ height: 40px;
178
+ border-radius: 8px;
179
+ margin-top: 8px;
180
+ }
181
+
182
+ .color-picker {
183
+ -webkit-appearance: none;
184
+ -moz-appearance: none;
185
+ appearance: none;
186
+ width: 40px;
187
+ height: 40px;
188
+ border: none;
189
+ cursor: pointer;
190
+ border-radius: 8px;
191
+ }
192
+
193
+ .color-picker::-webkit-color-swatch {
194
+ border: none;
195
+ border-radius: 8px;
196
+ }
197
+
198
+ .color-picker::-moz-color-swatch {
199
+ border: none;
200
+ border-radius: 8px;
201
+ }
202
+
203
+ .card-pattern {
204
+ position: absolute;
205
+ width: 100%;
206
+ height: 100%;
207
+ opacity: 0.2;
208
+ background-size: cover;
209
+ background-position: center;
210
+ }
211
+
212
+ .card-texture {
213
+ position: absolute;
214
+ width: 100%;
215
+ height: 100%;
216
+ background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
217
+ opacity: 0.1;
218
+ }
219
+
220
+ .card-metallic {
221
+ position: absolute;
222
+ width: 100%;
223
+ height: 100%;
224
+ background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
225
+ }
226
+ </style>
227
+ </head>
228
+ <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
229
+ <div class="container mx-auto">
230
+ <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">Ultimate Credit Card Designer</h1>
231
+
232
+ <div class="flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center">
233
+ <!-- Card Preview Section -->
234
+ <div class="flex flex-col items-center">
235
+ <div class="card-container mb-6" id="cardContainer">
236
+ <div class="card" id="card">
237
+ <!-- Front of the card -->
238
+ <div class="card-front bg-gradient-to-br from-purple-600 to-blue-500 text-white p-6">
239
+ <div class="card-glow"></div>
240
+ <div class="card-reflections"></div>
241
+ <div class="card-texture"></div>
242
+ <div class="card-metallic"></div>
243
+
244
+ <div class="flex justify-between items-start mb-8">
245
+ <div class="text-xl font-bold" id="cardBankName">Premium Card</div>
246
+ <div class="flex items-center gap-2">
247
+ <i class="fas fa-wifi text-sm opacity-80"></i>
248
+ <i class="fab fa-cc-visa text-xl" id="cardNetworkLogo"></i>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="flex items-center gap-4 mb-6">
253
+ <div class="card-chip"></div>
254
+ <i class="fas fa-bluetooth-b text-xl opacity-70"></i>
255
+ <i class="fas fa-sim-card text-xl opacity-70"></i>
256
+ <i class="fas fa-nfc-symbol text-xl opacity-70" id="contactlessIcon"></i>
257
+ </div>
258
+
259
+ <div class="card-number font-mono mb-6" id="cardNumberDisplay">•••• •••• •••• 4242</div>
260
+
261
+ <div class="flex justify-between items-center">
262
+ <div>
263
+ <div class="text-xs opacity-80">Card Holder</div>
264
+ <div class="text-sm font-medium" id="cardHolderDisplay">John Doe</div>
265
+ </div>
266
+ <div>
267
+ <div class="text-xs opacity-80">Expires</div>
268
+ <div class="text-sm font-medium" id="expiryDateDisplay">12/25</div>
269
+ </div>
270
+ <div class="flex items-center">
271
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png" class="card-logo" id="cardLogo">
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Back of the card -->
277
+ <div class="card-back bg-gradient-to-br from-gray-800 to-gray-900 text-white p-6">
278
+ <div class="card-back-pattern"></div>
279
+ <div class="card-texture"></div>
280
+
281
+ <div class="flex justify-between items-start mb-2">
282
+ <div class="text-xs opacity-60">Customer Service: 1-800-123-4567</div>
283
+ <div class="text-xs opacity-60" id="cardBackBankName">Premium Card</div>
284
+ </div>
285
+
286
+ <div class="card-magnetic-stripe"></div>
287
+
288
+ <div class="flex justify-end px-4 mt-3">
289
+ <div class="card-cvv" id="cvvDisplay">CVV: 123</div>
290
+ </div>
291
+
292
+ <div class="flex justify-center mt-4">
293
+ <div class="card-hologram"></div>
294
+ </div>
295
+
296
+ <div class="flex justify-center mt-4">
297
+ <div class="card-signature-stripe">
298
+ <i class="fas fa-shield-alt mr-2"></i> SECURE DIGITAL CARD
299
+ </div>
300
+ </div>
301
+
302
+ <div class="text-center text-xs text-gray-400 mt-3">
303
+ <div class="flex justify-center gap-4">
304
+ <i class="fas fa-lock"></i>
305
+ <i class="fas fa-fingerprint"></i>
306
+ <i class="fas fa-qrcode"></i>
307
+ </div>
308
+ <div class="mt-2">Authorized Signature</div>
309
+ </div>
310
+
311
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png" class="card-logo opacity-70" id="cardBackLogo">
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="flex gap-4 mb-8">
317
+ <button id="flipCard" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition duration-200">
318
+ <i class="fas fa-sync-alt mr-2"></i> Flip Card
319
+ </button>
320
+ <button id="downloadCard" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
321
+ <i class="fas fa-download mr-2"></i> Download
322
+ </button>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Customization Panel -->
327
+ <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-2xl">
328
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Card Customization</h2>
329
+
330
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
331
+ <!-- Card Details Section -->
332
+ <div>
333
+ <h3 class="text-lg font-medium mb-3 text-gray-700">Card Details</h3>
334
+
335
+ <div class="mb-4">
336
+ <label class="block text-gray-700 mb-2">Bank Name</label>
337
+ <input type="text" id="bankName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Bank Name" value="Premium Card">
338
+ </div>
339
+
340
+ <div class="mb-4">
341
+ <label class="block text-gray-700 mb-2">Card Number</label>
342
+ <input type="text" id="cardNumber" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter card number" maxlength="19" value="4242 4242 4242 4242">
343
+ </div>
344
+
345
+ <div class="mb-4">
346
+ <label class="block text-gray-700 mb-2">Card Holder</label>
347
+ <input type="text" id="cardHolder" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter card holder name" value="John Doe">
348
+ </div>
349
+
350
+ <div class="grid grid-cols-2 gap-4 mb-4">
351
+ <div>
352
+ <label class="block text-gray-700 mb-2">Expiry Date</label>
353
+ <input type="text" id="expiryDate" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="MM/YY" value="12/25">
354
+ </div>
355
+ <div>
356
+ <label class="block text-gray-700 mb-2">CVV</label>
357
+ <input type="text" id="cvv" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="CVV" maxlength="3" value="123">
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Card Design Section -->
363
+ <div>
364
+ <h3 class="text-lg font-medium mb-3 text-gray-700">Card Design</h3>
365
+
366
+ <div class="mb-4">
367
+ <label class="block text-gray-700 mb-2">Card Type</label>
368
+ <select id="cardType" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
369
+ <option value="visa">VISA</option>
370
+ <option value="mastercard" selected>MasterCard</option>
371
+ <option value="amex">American Express</option>
372
+ <option value="discover">Discover</option>
373
+ <option value="jcb">JCB</option>
374
+ <option value="unionpay">UnionPay</option>
375
+ </select>
376
+ </div>
377
+
378
+ <div class="mb-4">
379
+ <label class="block text-gray-700 mb-2">Card Style</label>
380
+ <select id="cardStyle" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
381
+ <option value="gradient">Gradient</option>
382
+ <option value="solid">Solid Color</option>
383
+ <option value="metallic">Metallic</option>
384
+ <option value="carbon">Carbon Fiber</option>
385
+ </select>
386
+ </div>
387
+
388
+ <div class="mb-4" id="gradientColorSection">
389
+ <label class="block text-gray-700 mb-2">Gradient Colors</label>
390
+ <div class="flex gap-2">
391
+ <input type="color" id="gradientColor1" class="color-picker" value="#6366F1">
392
+ <input type="color" id="gradientColor2" class="color-picker" value="#3B82F6">
393
+ <div class="gradient-preview" id="gradientPreview"></div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="mb-4 hidden" id="solidColorSection">
398
+ <label class="block text-gray-700 mb-2">Solid Color</label>
399
+ <input type="color" id="solidColor" class="color-picker" value="#6366F1">
400
+ </div>
401
+
402
+ <div class="mb-4">
403
+ <label class="block text-gray-700 mb-2">Features</label>
404
+ <div class="flex flex-wrap gap-2">
405
+ <label class="inline-flex items-center">
406
+ <input type="checkbox" id="contactlessCheck" class="form-checkbox h-5 w-5 text-blue-600" checked>
407
+ <span class="ml-2 text-gray-700">Contactless</span>
408
+ </label>
409
+ <label class="inline-flex items-center">
410
+ <input type="checkbox" id="chipCheck" class="form-checkbox h-5 w-5 text-blue-600" checked>
411
+ <span class="ml-2 text-gray-700">Chip</span>
412
+ </label>
413
+ <label class="inline-flex items-center">
414
+ <input type="checkbox" id="hologramCheck" class="form-checkbox h-5 w-5 text-blue-600" checked>
415
+ <span class="ml-2 text-gray-700">Hologram</span>
416
+ </label>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="mt-6">
423
+ <button id="updateCard" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200">
424
+ <i class="fas fa-sync-alt mr-2"></i> Update Card Design
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <script>
432
+ document.addEventListener('DOMContentLoaded', function() {
433
+ const card = document.getElementById('card');
434
+ const cardContainer = document.getElementById('cardContainer');
435
+ const updateButton = document.getElementById('updateCard');
436
+ const flipButton = document.getElementById('flipCard');
437
+ const downloadButton = document.getElementById('downloadCard');
438
+ const cardStyleSelect = document.getElementById('cardStyle');
439
+ const gradientColorSection = document.getElementById('gradientColorSection');
440
+ const solidColorSection = document.getElementById('solidColorSection');
441
+
442
+ // Initialize gradient preview
443
+ updateGradientPreview();
444
+
445
+ // Handle card style change
446
+ cardStyleSelect.addEventListener('change', function() {
447
+ if (this.value === 'gradient') {
448
+ gradientColorSection.classList.remove('hidden');
449
+ solidColorSection.classList.add('hidden');
450
+ } else if (this.value === 'solid') {
451
+ gradientColorSection.classList.add('hidden');
452
+ solidColorSection.classList.remove('hidden');
453
+ } else {
454
+ gradientColorSection.classList.add('hidden');
455
+ solidColorSection.classList.add('hidden');
456
+ }
457
+ });
458
+
459
+ // Update gradient preview when colors change
460
+ document.getElementById('gradientColor1').addEventListener('input', updateGradientPreview);
461
+ document.getElementById('gradientColor2').addEventListener('input', updateGradientPreview);
462
+
463
+ function updateGradientPreview() {
464
+ const color1 = document.getElementById('gradientColor1').value;
465
+ const color2 = document.getElementById('gradientColor2').value;
466
+ const preview = document.getElementById('gradientPreview');
467
+ preview.style.background = `linear-gradient(135deg, ${color1} 0%, ${color2} 100%)`;
468
+ }
469
+
470
+ // 3D tilt effect
471
+ cardContainer.addEventListener('mousemove', (e) => {
472
+ const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
473
+ const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
474
+ card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
475
+ });
476
+
477
+ // Reset when mouse leaves
478
+ cardContainer.addEventListener('mouseleave', () => {
479
+ card.style.transform = 'rotateY(0deg) rotateX(0deg)';
480
+ card.style.transition = 'transform 0.5s ease';
481
+ setTimeout(() => {
482
+ card.style.transition = '';
483
+ }, 500);
484
+ });
485
+
486
+ // Flip card on button click
487
+ flipButton.addEventListener('click', () => {
488
+ card.style.transform = card.style.transform.includes('180deg') ?
489
+ 'rotateY(0deg)' : 'rotateY(180deg)';
490
+ });
491
+
492
+ // Download card as image
493
+ downloadButton.addEventListener('click', () => {
494
+ alert('In a real implementation, this would convert the card to an image and download it.');
495
+ // For a real implementation, you would use html2canvas or similar library
496
+ // html2canvas(document.getElementById('card')).then(canvas => {
497
+ // const link = document.createElement('a');
498
+ // link.download = 'credit-card-design.png';
499
+ // link.href = canvas.toDataURL('image/png');
500
+ // link.click();
501
+ // });
502
+ });
503
+
504
+ // Update card details
505
+ updateButton.addEventListener('click', updateCardDesign);
506
+
507
+ // Format card number input
508
+ document.getElementById('cardNumber').addEventListener('input', function(e) {
509
+ this.value = formatCardNumber(this.value);
510
+ });
511
+
512
+ // Format expiry date input
513
+ document.getElementById('expiryDate').addEventListener('input', function(e) {
514
+ this.value = formatExpiryDate(this.value);
515
+ });
516
+
517
+ // Initial card update
518
+ updateCardDesign();
519
+
520
+ function updateCardDesign() {
521
+ // Get all values from form
522
+ const bankName = document.getElementById('bankName').value || 'Premium Card';
523
+ const cardNumber = document.getElementById('cardNumber').value || '4242 4242 4242 4242';
524
+ const cardHolder = document.getElementById('cardHolder').value || 'John Doe';
525
+ const expiryDate = document.getElementById('expiryDate').value || '12/25';
526
+ const cvv = document.getElementById('cvv').value || '123';
527
+ const cardType = document.getElementById('cardType').value;
528
+ const cardStyle = document.getElementById('cardStyle').value;
529
+ const contactlessEnabled = document.getElementById('contactlessCheck').checked;
530
+ const chipEnabled = document.getElementById('chipCheck').checked;
531
+ const hologramEnabled = document.getElementById('hologramCheck').checked;
532
+
533
+ // Update front of the card
534
+ const cardFront = card.querySelector('.card-front');
535
+ const cardBack = card.querySelector('.card-back');
536
+ const numberDisplay = cardFront.querySelector('.card-number');
537
+ const holderDisplay = cardFront.querySelector('div:last-child > div:first-child > div:last-child');
538
+ const expiryDisplay = cardFront.querySelector('div:last-child > div:nth-child(2) > div:last-child');
539
+ const bankNameDisplay = cardFront.querySelector('div:first-child > div:first-child');
540
+ const backBankNameDisplay = cardBack.querySelector('div:first-child > div:last-child');
541
+ const contactlessIcon = document.getElementById('contactlessIcon');
542
+ const cardChip = cardFront.querySelector('.card-chip');
543
+ const cardHologram = cardBack.querySelector('.card-hologram');
544
+ const cardLogo = document.getElementById('cardLogo');
545
+ const cardBackLogo = document.getElementById('cardBackLogo');
546
+ const cardNetworkLogo = document.getElementById('cardNetworkLogo');
547
+
548
+ // Update text content
549
+ numberDisplay.textContent = formatCardNumber(cardNumber);
550
+ holderDisplay.textContent = cardHolder.toUpperCase();
551
+ expiryDisplay.textContent = expiryDate;
552
+ bankNameDisplay.textContent = bankName;
553
+ backBankNameDisplay.textContent = bankName;
554
+
555
+ // Update CVV on back
556
+ const cvvDisplay = cardBack.querySelector('.card-cvv');
557
+ cvvDisplay.textContent = `CVV: ${cvv}`;
558
+
559
+ // Update card type/network
560
+ cardNetworkLogo.className = '';
561
+ cardNetworkLogo.classList.add('fab');
562
+
563
+ if (cardType === 'visa') {
564
+ cardNetworkLogo.classList.add('fa-cc-visa');
565
+ cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png';
566
+ cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png';
567
+ } else if (cardType === 'mastercard') {
568
+ cardNetworkLogo.classList.add('fa-cc-mastercard');
569
+ cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png';
570
+ cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png';
571
+ } else if (cardType === 'amex') {
572
+ cardNetworkLogo.classList.add('fa-cc-amex');
573
+ cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/American_Express_logo.svg/1200px-American_Express_logo.svg.png';
574
+ cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/American_Express_logo.svg/1200px-American_Express_logo.svg.png';
575
+ } else if (cardType === 'discover') {
576
+ cardNetworkLogo.classList.add('fa-cc-discover');
577
+ cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Discover_Card_logo.svg/1200px-Discover_Card_logo.svg.png';
578
+ cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Discover_Card_logo.svg/1200px-Discover_Card_logo.svg.png';
579
+ } else if (cardType === 'jcb') {
580
+ cardNetworkLogo.classList.add('fa-credit-card');
581
+ cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/JCB_logo.svg/1200px-JCB_logo.svg.png';
582
+ cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/JCB_logo.svg/1200px-JCB_logo.svg.png';
583
+ } else if (cardType === 'unionpay') {
584
+ cardNetworkLogo.classList.add('fa-credit-card');
585
+ cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/UnionPay_logo.svg/1200px-UnionPay_logo.svg.png';
586
+ cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/UnionPay_logo.svg/1200px-UnionPay_logo.svg.png';
587
+ }
588
+
589
+ // Update card style
590
+ cardFront.classList.remove('bg-gradient-to-br', 'from-purple-600', 'to-blue-500');
591
+ cardBack.classList.remove('bg-gradient-to-br', 'from-gray-800', 'to-gray-900');
592
+
593
+ if (cardStyle === 'gradient') {
594
+ const color1 = document.getElementById('gradientColor1').value;
595
+ const color2 = document.getElementById('gradientColor2').value;
596
+ cardFront.style.background = `linear-gradient(135deg, ${color1} 0%, ${color2} 100%)`;
597
+ cardBack.style.background = `linear-gradient(135deg, ${darkenColor(color1, 40)} 0%, ${darkenColor(color2, 40)} 100%)`;
598
+ } else if (cardStyle === 'solid') {
599
+ const color = document.getElementById('solidColor').value;
600
+ cardFront.style.background = color;
601
+ cardBack.style.background = darkenColor(color, 40);
602
+ } else if (cardStyle === 'metallic') {
603
+ cardFront.style.background = 'linear-gradient(135deg, #b8b8b8 0%, #7a7a7a 50%, #b8b8b8 100%)';
604
+ cardBack.style.background = 'linear-gradient(135deg, #5a5a5a 0%, #2a2a2a 100%)';
605
+ } else if (cardStyle === 'carbon') {
606
+ cardFront.style.background = 'linear-gradient(135deg, #333333 0%, #000000 100%)';
607
+ cardBack.style.background = 'linear-gradient(135deg, #222222 0%, #000000 100%)';
608
+ }
609
+
610
+ // Toggle features
611
+ contactlessIcon.style.display = contactlessEnabled ? 'block' : 'none';
612
+ cardChip.style.display = chipEnabled ? 'block' : 'none';
613
+ cardHologram.style.display = hologramEnabled ? 'block' : 'none';
614
+
615
+ // Show success message
616
+ alert('Card design updated successfully!');
617
+ }
618
+
619
+ function formatCardNumber(value) {
620
+ const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
621
+ const matches = v.match(/\d{4,16}/g);
622
+ const match = matches && matches[0] || '';
623
+ const parts = [];
624
+
625
+ for (let i = 0, len = match.length; i < len; i += 4) {
626
+ parts.push(match.substring(i, i + 4));
627
+ }
628
+
629
+ if (parts.length) {
630
+ return parts.join(' ');
631
+ } else {
632
+ return value;
633
+ }
634
+ }
635
+
636
+ function formatExpiryDate(value) {
637
+ const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
638
+ if (v.length >= 3) {
639
+ return `${v.substring(0, 2)}/${v.substring(2, 4)}`;
640
+ }
641
+ return value;
642
+ }
643
+
644
+ function darkenColor(color, percent) {
645
+ // Convert hex to RGB
646
+ let r = parseInt(color.substring(1, 3), 16);
647
+ let g = parseInt(color.substring(3, 5), 16);
648
+ let b = parseInt(color.substring(5, 7), 16);
649
+
650
+ // Darken each component
651
+ r = Math.max(0, Math.floor(r * (100 - percent) / 100));
652
+ g = Math.max(0, Math.floor(g * (100 - percent) / 100));
653
+ b = Math.max(0, Math.floor(b * (100 - percent) / 100));
654
+
655
+ // Convert back to hex
656
+ return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
657
+ }
658
+ });
659
+ </script>
660
+ <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=SilentProgrammer/credit-card-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
661
+ </html>