Hugging Face's logo

Spaces:
SilentProgrammer
/
credit-card-generator
Running

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

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +113 -618
index.html CHANGED
@@ -3,657 +3,152 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Premium Dark Navbar</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
+ .navbar {
11
+ backdrop-filter: blur(10px);
12
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
13
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
14
  }
15
 
16
+ .nav-link {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  position: relative;
18
  }
19
 
20
+ .nav-link::after {
21
  content: '';
22
  position: absolute;
23
+ width: 0;
24
+ height: 2px;
25
+ bottom: -2px;
26
  left: 0;
27
+ background-color: #3b82f6;
28
+ transition: width 0.3s ease;
 
 
29
  }
30
 
31
+ .nav-link:hover::after {
32
  width: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  }
34
 
35
+ .mobile-menu {
36
+ transition: all 0.3s ease-in-out;
 
 
 
 
 
 
 
37
  }
38
 
39
+ .gradient-text {
40
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
41
+ -webkit-background-clip: text;
42
+ background-clip: text;
43
+ color: transparent;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  }
45
  </style>
46
  </head>
47
+ <body class="bg-gray-900 text-gray-100">
48
+ <!-- Premium Dark Navbar -->
49
+ <nav class="navbar fixed top-0 left-0 right-0 z-50 bg-gray-900/80 py-4 px-6 lg:px-12">
50
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
51
+ <!-- Logo -->
52
+ <div class="flex items-center">
53
+ <a href="#" class="text-2xl font-bold">
54
+ <span class="gradient-text">PREMIUM</span>
55
+ </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  </div>
57
 
58
+ <!-- Desktop Navigation -->
59
+ <div class="hidden md:flex items-center space-x-8">
60
+ <a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Home</a>
61
+ <a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Features</a>
62
+ <a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Pricing</a>
63
+ <a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">About</a>
64
+ <a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Contact</a>
65
+
66
+ <div class="relative group">
67
+ <button class="flex items-center space-x-1 text-gray-300 hover:text-white transition-colors duration-300">
68
+ <span>More</span>
69
+ <i class="fas fa-chevron-down text-xs transition-transform duration-300 group-hover:rotate-180"></i>
70
+ </button>
71
+ <div class="absolute left-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
72
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Blog</a>
73
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Careers</a>
74
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Support</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  </div>
76
  </div>
77
+ </div>
78
+
79
+ <!-- CTA Buttons -->
80
+ <div class="hidden md:flex items-center space-x-4">
81
+ <a href="#" class="px-4 py-2 text-gray-300 hover:text-white transition-colors duration-300">Login</a>
82
+ <a href="#" class="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full hover:opacity-90 transition-opacity duration-300 shadow-lg hover:shadow-blue-500/30">
83
+ Get Started
84
+ </a>
85
+ </div>
86
+
87
+ <!-- Mobile Menu Button -->
88
+ <div class="md:hidden">
89
+ <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
90
+ <i class="fas fa-bars text-2xl"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Mobile Menu -->
96
+ <div id="mobile-menu" class="mobile-menu md:hidden absolute top-full left-0 right-0 bg-gray-800/95 overflow-hidden max-h-0">
97
+ <div class="px-6 py-4 space-y-4">
98
+ <a href="#" class="block py-2 text-gray-300 hover:text-white">Home</a>
99
+ <a href="#" class="block py-2 text-gray-300 hover:text-white">Features</a>
100
+ <a href="#" class="block py-2 text-gray-300 hover:text-white">Pricing</a>
101
+ <a href="#" class="block py-2 text-gray-300 hover:text-white">About</a>
102
+ <a href="#" class="block py-2 text-gray-300 hover:text-white">Contact</a>
103
+
104
+ <div class="pt-2 border-t border-gray-700">
105
+ <a href="#" class="block py-2 text-gray-300 hover:text-white">Login</a>
106
+ <a href="#" class="inline-block mt-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full hover:opacity-90">
107
+ Get Started
108
+ </a>
109
  </div>
110
  </div>
111
  </div>
112
+ </nav>
113
+
114
+ <!-- Hero Section (for demo purposes) -->
115
+ <div class="min-h-screen pt-32 px-6 lg:px-12">
116
+ <h1 class="text-4xl md:text-6xl font-bold text-center mb-6">Premium <span class="gradient-text">Dark Navbar</span></h1>
117
+ <p class="text-gray-400 max-w-2xl mx-auto text-center">A sleek, professional navigation bar with dark theme design. Perfect for modern web applications and premium websites.</p>
118
  </div>
119
 
120
  <script>
121
+ // Mobile menu toggle
122
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
123
+ const mobileMenu = document.getElementById('mobile-menu');
124
+
125
+ mobileMenuButton.addEventListener('click', () => {
126
+ const isOpen = mobileMenu.classList.contains('max-h-0');
127
+
128
+ if (isOpen) {
129
+ mobileMenu.classList.remove('max-h-0');
130
+ mobileMenu.classList.add('max-h-screen', 'py-4');
131
+ } else {
132
+ mobileMenu.classList.add('max-h-0');
133
+ mobileMenu.classList.remove('max-h-screen', 'py-4');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  }
135
+ });
136
+
137
+ // Close mobile menu when clicking outside
138
+ document.addEventListener('click', (e) => {
139
+ if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) {
140
+ mobileMenu.classList.add('max-h-0');
141
+ mobileMenu.classList.remove('max-h-screen', 'py-4');
142
  }
143
+ });
144
+
145
+ // Add shadow on scroll
146
+ window.addEventListener('scroll', () => {
147
+ const navbar = document.querySelector('.navbar');
148
+ if (window.scrollY > 10) {
149
+ navbar.classList.add('shadow-xl');
150
+ } else {
151
+ navbar.classList.remove('shadow-xl');
 
 
 
 
 
152
  }
153
  });
154
  </script>