|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Ultimate 3D Credit Card Designer</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
.card-container { |
|
perspective: 1000px; |
|
width: 420px; |
|
height: 260px; |
|
} |
|
|
|
.card { |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
transform-style: preserve-3d; |
|
transition: transform 0.5s; |
|
border-radius: 20px; |
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
|
cursor: pointer; |
|
} |
|
|
|
.card-front, .card-back { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
backface-visibility: hidden; |
|
border-radius: 20px; |
|
overflow: hidden; |
|
} |
|
|
|
.card-back { |
|
transform: rotateY(180deg); |
|
} |
|
|
|
.card-chip { |
|
width: 50px; |
|
height: 35px; |
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
border-radius: 8px; |
|
position: relative; |
|
} |
|
|
|
.card-chip::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%); |
|
border-radius: 8px; |
|
} |
|
|
|
.card-magnetic-stripe { |
|
width: 100%; |
|
height: 40px; |
|
background: #222; |
|
margin-top: 30px; |
|
} |
|
|
|
.card-signature-stripe { |
|
width: 80%; |
|
height: 30px; |
|
background: repeating-linear-gradient(45deg, #fff, #fff 5px, #e5e5e5 5px, #e5e5e5 10px); |
|
margin-top: 10px; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 10px; |
|
color: #333; |
|
font-size: 12px; |
|
} |
|
|
|
.card-cvv { |
|
background: #fff; |
|
color: #333; |
|
padding: 2px 10px; |
|
border-radius: 4px; |
|
font-family: monospace; |
|
font-size: 14px; |
|
} |
|
|
|
.card-hologram { |
|
width: 60px; |
|
height: 40px; |
|
background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ffff00); |
|
background-size: 400% 400%; |
|
animation: hologram 5s ease infinite; |
|
border-radius: 5px; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
@keyframes hologram { |
|
0% { background-position: 0% 50%; } |
|
50% { background-position: 100% 50%; } |
|
100% { background-position: 0% 50%; } |
|
} |
|
|
|
.card-hologram::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%); |
|
} |
|
|
|
.card-number { |
|
letter-spacing: 3px; |
|
font-size: 20px; |
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2); |
|
} |
|
|
|
.card-glow { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 20px; |
|
background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.2), transparent 70%); |
|
pointer-events: none; |
|
} |
|
|
|
.card-reflections { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 20px; |
|
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%); |
|
pointer-events: none; |
|
} |
|
|
|
.card-logo { |
|
position: absolute; |
|
right: 20px; |
|
bottom: 20px; |
|
height: 30px; |
|
width: auto; |
|
} |
|
|
|
.card-network-logo { |
|
position: absolute; |
|
right: 20px; |
|
top: 20px; |
|
height: 30px; |
|
width: auto; |
|
} |
|
|
|
.card-contactless { |
|
position: absolute; |
|
right: 60px; |
|
top: 20px; |
|
color: rgba(255,255,255,0.8); |
|
font-size: 24px; |
|
} |
|
|
|
.card-back-pattern { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background: repeating-linear-gradient( |
|
45deg, |
|
rgba(255,255,255,0.03), |
|
rgba(255,255,255,0.03) 5px, |
|
rgba(255,255,255,0.01) 5px, |
|
rgba(255,255,255,0.01) 10px |
|
); |
|
} |
|
|
|
.gradient-preview { |
|
width: 100%; |
|
height: 40px; |
|
border-radius: 8px; |
|
margin-top: 8px; |
|
} |
|
|
|
.color-picker { |
|
-webkit-appearance: none; |
|
-moz-appearance: none; |
|
appearance: none; |
|
width: 40px; |
|
height: 40px; |
|
border: none; |
|
cursor: pointer; |
|
border-radius: 8px; |
|
} |
|
|
|
.color-picker::-webkit-color-swatch { |
|
border: none; |
|
border-radius: 8px; |
|
} |
|
|
|
.color-picker::-moz-color-swatch { |
|
border: none; |
|
border-radius: 8px; |
|
} |
|
|
|
.card-pattern { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
opacity: 0.2; |
|
background-size: cover; |
|
background-position: center; |
|
} |
|
|
|
.card-texture { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); |
|
opacity: 0.1; |
|
} |
|
|
|
.card-metallic { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> |
|
<div class="container mx-auto"> |
|
<h1 class="text-3xl font-bold text-center mb-8 text-gray-800">Ultimate Credit Card Designer</h1> |
|
|
|
<div class="flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center"> |
|
|
|
<div class="flex flex-col items-center"> |
|
<div class="card-container mb-6" id="cardContainer"> |
|
<div class="card" id="card"> |
|
|
|
<div class="card-front bg-gradient-to-br from-purple-600 to-blue-500 text-white p-6"> |
|
<div class="card-glow"></div> |
|
<div class="card-reflections"></div> |
|
<div class="card-texture"></div> |
|
<div class="card-metallic"></div> |
|
|
|
<div class="flex justify-between items-start mb-8"> |
|
<div class="text-xl font-bold" id="cardBankName">Premium Card</div> |
|
<div class="flex items-center gap-2"> |
|
<i class="fas fa-wifi text-sm opacity-80"></i> |
|
<i class="fab fa-cc-visa text-xl" id="cardNetworkLogo"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="flex items-center gap-4 mb-6"> |
|
<div class="card-chip"></div> |
|
<i class="fas fa-bluetooth-b text-xl opacity-70"></i> |
|
<i class="fas fa-sim-card text-xl opacity-70"></i> |
|
<i class="fas fa-nfc-symbol text-xl opacity-70" id="contactlessIcon"></i> |
|
</div> |
|
|
|
<div class="card-number font-mono mb-6" id="cardNumberDisplay">•••• •••• •••• 4242</div> |
|
|
|
<div class="flex justify-between items-center"> |
|
<div> |
|
<div class="text-xs opacity-80">Card Holder</div> |
|
<div class="text-sm font-medium" id="cardHolderDisplay">John Doe</div> |
|
</div> |
|
<div> |
|
<div class="text-xs opacity-80">Expires</div> |
|
<div class="text-sm font-medium" id="expiryDateDisplay">12/25</div> |
|
</div> |
|
<div class="flex items-center"> |
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png" class="card-logo" id="cardLogo"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="card-back bg-gradient-to-br from-gray-800 to-gray-900 text-white p-6"> |
|
<div class="card-back-pattern"></div> |
|
<div class="card-texture"></div> |
|
|
|
<div class="flex justify-between items-start mb-2"> |
|
<div class="text-xs opacity-60">Customer Service: 1-800-123-4567</div> |
|
<div class="text-xs opacity-60" id="cardBackBankName">Premium Card</div> |
|
</div> |
|
|
|
<div class="card-magnetic-stripe"></div> |
|
|
|
<div class="flex justify-end px-4 mt-3"> |
|
<div class="card-cvv" id="cvvDisplay">CVV: 123</div> |
|
</div> |
|
|
|
<div class="flex justify-center mt-4"> |
|
<div class="card-hologram"></div> |
|
</div> |
|
|
|
<div class="flex justify-center mt-4"> |
|
<div class="card-signature-stripe"> |
|
<i class="fas fa-shield-alt mr-2"></i> SECURE DIGITAL CARD |
|
</div> |
|
</div> |
|
|
|
<div class="text-center text-xs text-gray-400 mt-3"> |
|
<div class="flex justify-center gap-4"> |
|
<i class="fas fa-lock"></i> |
|
<i class="fas fa-fingerprint"></i> |
|
<i class="fas fa-qrcode"></i> |
|
</div> |
|
<div class="mt-2">Authorized Signature</div> |
|
</div> |
|
|
|
<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"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="flex gap-4 mb-8"> |
|
<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"> |
|
<i class="fas fa-sync-alt mr-2"></i> Flip Card |
|
</button> |
|
<button id="downloadCard" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200"> |
|
<i class="fas fa-download mr-2"></i> Download |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-2xl"> |
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Card Customization</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
<div> |
|
<h3 class="text-lg font-medium mb-3 text-gray-700">Card Details</h3> |
|
|
|
<div class="mb-4"> |
|
<label class="block text-gray-700 mb-2">Bank Name</label> |
|
<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"> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label class="block text-gray-700 mb-2">Card Number</label> |
|
<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"> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label class="block text-gray-700 mb-2">Card Holder</label> |
|
<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"> |
|
</div> |
|
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label class="block text-gray-700 mb-2">Expiry Date</label> |
|
<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"> |
|
</div> |
|
<div> |
|
<label class="block text-gray-700 mb-2">CVV</label> |
|
<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"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-medium mb-3 text-gray-700">Card Design</h3> |
|
|
|
<div class="mb-4"> |
|
<label class="block text-gray-700 mb-2">Card Type</label> |
|
<select id="cardType" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option value="visa">VISA</option> |
|
<option value="mastercard" selected>MasterCard</option> |
|
<option value="amex">American Express</option> |
|
<option value="discover">Discover</option> |
|
<option value="jcb">JCB</option> |
|
<option value="unionpay">UnionPay</option> |
|
</select> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label class="block text-gray-700 mb-2">Card Style</label> |
|
<select id="cardStyle" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<option value="gradient">Gradient</option> |
|
<option value="solid">Solid Color</option> |
|
<option value="metallic">Metallic</option> |
|
<option value="carbon">Carbon Fiber</option> |
|
</select> |
|
</div> |
|
|
|
<div class="mb-4" id="gradientColorSection"> |
|
<label class="block text-gray-700 mb-2">Gradient Colors</label> |
|
<div class="flex gap-2"> |
|
<input type="color" id="gradientColor1" class="color-picker" value="#6366F1"> |
|
<input type="color" id="gradientColor2" class="color-picker" value="#3B82F6"> |
|
<div class="gradient-preview" id="gradientPreview"></div> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-4 hidden" id="solidColorSection"> |
|
<label class="block text-gray-700 mb-2">Solid Color</label> |
|
<input type="color" id="solidColor" class="color-picker" value="#6366F1"> |
|
</div> |
|
|
|
<div class="mb-4"> |
|
<label class="block text-gray-700 mb-2">Features</label> |
|
<div class="flex flex-wrap gap-2"> |
|
<label class="inline-flex items-center"> |
|
<input type="checkbox" id="contactlessCheck" class="form-checkbox h-5 w-5 text-blue-600" checked> |
|
<span class="ml-2 text-gray-700">Contactless</span> |
|
</label> |
|
<label class="inline-flex items-center"> |
|
<input type="checkbox" id="chipCheck" class="form-checkbox h-5 w-5 text-blue-600" checked> |
|
<span class="ml-2 text-gray-700">Chip</span> |
|
</label> |
|
<label class="inline-flex items-center"> |
|
<input type="checkbox" id="hologramCheck" class="form-checkbox h-5 w-5 text-blue-600" checked> |
|
<span class="ml-2 text-gray-700">Hologram</span> |
|
</label> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6"> |
|
<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"> |
|
<i class="fas fa-sync-alt mr-2"></i> Update Card Design |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
const card = document.getElementById('card'); |
|
const cardContainer = document.getElementById('cardContainer'); |
|
const updateButton = document.getElementById('updateCard'); |
|
const flipButton = document.getElementById('flipCard'); |
|
const downloadButton = document.getElementById('downloadCard'); |
|
const cardStyleSelect = document.getElementById('cardStyle'); |
|
const gradientColorSection = document.getElementById('gradientColorSection'); |
|
const solidColorSection = document.getElementById('solidColorSection'); |
|
|
|
|
|
updateGradientPreview(); |
|
|
|
|
|
cardStyleSelect.addEventListener('change', function() { |
|
if (this.value === 'gradient') { |
|
gradientColorSection.classList.remove('hidden'); |
|
solidColorSection.classList.add('hidden'); |
|
} else if (this.value === 'solid') { |
|
gradientColorSection.classList.add('hidden'); |
|
solidColorSection.classList.remove('hidden'); |
|
} else { |
|
gradientColorSection.classList.add('hidden'); |
|
solidColorSection.classList.add('hidden'); |
|
} |
|
}); |
|
|
|
|
|
document.getElementById('gradientColor1').addEventListener('input', updateGradientPreview); |
|
document.getElementById('gradientColor2').addEventListener('input', updateGradientPreview); |
|
|
|
function updateGradientPreview() { |
|
const color1 = document.getElementById('gradientColor1').value; |
|
const color2 = document.getElementById('gradientColor2').value; |
|
const preview = document.getElementById('gradientPreview'); |
|
preview.style.background = `linear-gradient(135deg, ${color1} 0%, ${color2} 100%)`; |
|
} |
|
|
|
|
|
cardContainer.addEventListener('mousemove', (e) => { |
|
const xAxis = (window.innerWidth / 2 - e.pageX) / 25; |
|
const yAxis = (window.innerHeight / 2 - e.pageY) / 25; |
|
card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; |
|
}); |
|
|
|
|
|
cardContainer.addEventListener('mouseleave', () => { |
|
card.style.transform = 'rotateY(0deg) rotateX(0deg)'; |
|
card.style.transition = 'transform 0.5s ease'; |
|
setTimeout(() => { |
|
card.style.transition = ''; |
|
}, 500); |
|
}); |
|
|
|
|
|
flipButton.addEventListener('click', () => { |
|
card.style.transform = card.style.transform.includes('180deg') ? |
|
'rotateY(0deg)' : 'rotateY(180deg)'; |
|
}); |
|
|
|
|
|
downloadButton.addEventListener('click', () => { |
|
alert('In a real implementation, this would convert the card to an image and download it.'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
updateButton.addEventListener('click', updateCardDesign); |
|
|
|
|
|
document.getElementById('cardNumber').addEventListener('input', function(e) { |
|
this.value = formatCardNumber(this.value); |
|
}); |
|
|
|
|
|
document.getElementById('expiryDate').addEventListener('input', function(e) { |
|
this.value = formatExpiryDate(this.value); |
|
}); |
|
|
|
|
|
updateCardDesign(); |
|
|
|
function updateCardDesign() { |
|
|
|
const bankName = document.getElementById('bankName').value || 'Premium Card'; |
|
const cardNumber = document.getElementById('cardNumber').value || '4242 4242 4242 4242'; |
|
const cardHolder = document.getElementById('cardHolder').value || 'John Doe'; |
|
const expiryDate = document.getElementById('expiryDate').value || '12/25'; |
|
const cvv = document.getElementById('cvv').value || '123'; |
|
const cardType = document.getElementById('cardType').value; |
|
const cardStyle = document.getElementById('cardStyle').value; |
|
const contactlessEnabled = document.getElementById('contactlessCheck').checked; |
|
const chipEnabled = document.getElementById('chipCheck').checked; |
|
const hologramEnabled = document.getElementById('hologramCheck').checked; |
|
|
|
|
|
const cardFront = card.querySelector('.card-front'); |
|
const cardBack = card.querySelector('.card-back'); |
|
const numberDisplay = cardFront.querySelector('.card-number'); |
|
const holderDisplay = cardFront.querySelector('div:last-child > div:first-child > div:last-child'); |
|
const expiryDisplay = cardFront.querySelector('div:last-child > div:nth-child(2) > div:last-child'); |
|
const bankNameDisplay = cardFront.querySelector('div:first-child > div:first-child'); |
|
const backBankNameDisplay = cardBack.querySelector('div:first-child > div:last-child'); |
|
const contactlessIcon = document.getElementById('contactlessIcon'); |
|
const cardChip = cardFront.querySelector('.card-chip'); |
|
const cardHologram = cardBack.querySelector('.card-hologram'); |
|
const cardLogo = document.getElementById('cardLogo'); |
|
const cardBackLogo = document.getElementById('cardBackLogo'); |
|
const cardNetworkLogo = document.getElementById('cardNetworkLogo'); |
|
|
|
|
|
numberDisplay.textContent = formatCardNumber(cardNumber); |
|
holderDisplay.textContent = cardHolder.toUpperCase(); |
|
expiryDisplay.textContent = expiryDate; |
|
bankNameDisplay.textContent = bankName; |
|
backBankNameDisplay.textContent = bankName; |
|
|
|
|
|
const cvvDisplay = cardBack.querySelector('.card-cvv'); |
|
cvvDisplay.textContent = `CVV: ${cvv}`; |
|
|
|
|
|
cardNetworkLogo.className = ''; |
|
cardNetworkLogo.classList.add('fab'); |
|
|
|
if (cardType === 'visa') { |
|
cardNetworkLogo.classList.add('fa-cc-visa'); |
|
cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png'; |
|
cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png'; |
|
} else if (cardType === 'mastercard') { |
|
cardNetworkLogo.classList.add('fa-cc-mastercard'); |
|
cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png'; |
|
cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1280px-Mastercard-logo.svg.png'; |
|
} else if (cardType === 'amex') { |
|
cardNetworkLogo.classList.add('fa-cc-amex'); |
|
cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/American_Express_logo.svg/1200px-American_Express_logo.svg.png'; |
|
cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/American_Express_logo.svg/1200px-American_Express_logo.svg.png'; |
|
} else if (cardType === 'discover') { |
|
cardNetworkLogo.classList.add('fa-cc-discover'); |
|
cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Discover_Card_logo.svg/1200px-Discover_Card_logo.svg.png'; |
|
cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Discover_Card_logo.svg/1200px-Discover_Card_logo.svg.png'; |
|
} else if (cardType === 'jcb') { |
|
cardNetworkLogo.classList.add('fa-credit-card'); |
|
cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/JCB_logo.svg/1200px-JCB_logo.svg.png'; |
|
cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/JCB_logo.svg/1200px-JCB_logo.svg.png'; |
|
} else if (cardType === 'unionpay') { |
|
cardNetworkLogo.classList.add('fa-credit-card'); |
|
cardLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/UnionPay_logo.svg/1200px-UnionPay_logo.svg.png'; |
|
cardBackLogo.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/UnionPay_logo.svg/1200px-UnionPay_logo.svg.png'; |
|
} |
|
|
|
|
|
cardFront.classList.remove('bg-gradient-to-br', 'from-purple-600', 'to-blue-500'); |
|
cardBack.classList.remove('bg-gradient-to-br', 'from-gray-800', 'to-gray-900'); |
|
|
|
if (cardStyle === 'gradient') { |
|
const color1 = document.getElementById('gradientColor1').value; |
|
const color2 = document.getElementById('gradientColor2').value; |
|
cardFront.style.background = `linear-gradient(135deg, ${color1} 0%, ${color2} 100%)`; |
|
cardBack.style.background = `linear-gradient(135deg, ${darkenColor(color1, 40)} 0%, ${darkenColor(color2, 40)} 100%)`; |
|
} else if (cardStyle === 'solid') { |
|
const color = document.getElementById('solidColor').value; |
|
cardFront.style.background = color; |
|
cardBack.style.background = darkenColor(color, 40); |
|
} else if (cardStyle === 'metallic') { |
|
cardFront.style.background = 'linear-gradient(135deg, #b8b8b8 0%, #7a7a7a 50%, #b8b8b8 100%)'; |
|
cardBack.style.background = 'linear-gradient(135deg, #5a5a5a 0%, #2a2a2a 100%)'; |
|
} else if (cardStyle === 'carbon') { |
|
cardFront.style.background = 'linear-gradient(135deg, #333333 0%, #000000 100%)'; |
|
cardBack.style.background = 'linear-gradient(135deg, #222222 0%, #000000 100%)'; |
|
} |
|
|
|
|
|
contactlessIcon.style.display = contactlessEnabled ? 'block' : 'none'; |
|
cardChip.style.display = chipEnabled ? 'block' : 'none'; |
|
cardHologram.style.display = hologramEnabled ? 'block' : 'none'; |
|
|
|
|
|
alert('Card design updated successfully!'); |
|
} |
|
|
|
function formatCardNumber(value) { |
|
const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, ''); |
|
const matches = v.match(/\d{4,16}/g); |
|
const match = matches && matches[0] || ''; |
|
const parts = []; |
|
|
|
for (let i = 0, len = match.length; i < len; i += 4) { |
|
parts.push(match.substring(i, i + 4)); |
|
} |
|
|
|
if (parts.length) { |
|
return parts.join(' '); |
|
} else { |
|
return value; |
|
} |
|
} |
|
|
|
function formatExpiryDate(value) { |
|
const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, ''); |
|
if (v.length >= 3) { |
|
return `${v.substring(0, 2)}/${v.substring(2, 4)}`; |
|
} |
|
return value; |
|
} |
|
|
|
function darkenColor(color, percent) { |
|
|
|
let r = parseInt(color.substring(1, 3), 16); |
|
let g = parseInt(color.substring(3, 5), 16); |
|
let b = parseInt(color.substring(5, 7), 16); |
|
|
|
|
|
r = Math.max(0, Math.floor(r * (100 - percent) / 100)); |
|
g = Math.max(0, Math.floor(g * (100 - percent) / 100)); |
|
b = Math.max(0, Math.floor(b * (100 - percent) / 100)); |
|
|
|
|
|
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; |
|
} |
|
}); |
|
</script> |
|
<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> |
|
</html> |
