WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pagamento - Modulo
1321
Anes_unk
Apri nell'Editor
Pubblica il Tuo Codice
Hai bisogno di un sito web?
Consigliato
20 June 2025
Modulo di registrazione di accesso HTML con effetto carta 3D
21 July 2025
Modello HTML5 per negozio di giochi - Tema Lugx
23 November 2024
Pagina di destinazione - Hotel
HTML
Copy
Payment - Form
Payment Details
Card Number
Invalid card number
Expiry Date (MM/YY)
Invalid expiry date
Cardholder Name
Name cannot contain numbers
Security Code (CVV)
Invalid CVV
Pay with Card
Pay with PayPal
CSS
Copy
body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; color: #ffffff; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; background: linear-gradient(135deg, #001f3f, #0e4e92); animation: gradientAnimation 10s ease infinite; } @keyframes gradientAnimation { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .container { width: 90%; max-width: 450px; background-color: rgba(25, 25, 25, 0.9); border-radius: 15px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); padding: 40px; text-align: center; position: relative; overflow: hidden; } h1 { color: #1e90ff; margin-bottom: 20px; font-size: 2.5em; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7); } .input_container { margin-bottom: 20px; text-align: left; position: relative; } .input_label { font-size: 14px; color: #d1d1d1; font-weight: 600; display: block; margin-bottom: 5px; } .input_field { width: 100%; height: 45px; padding: 0 16px; /* Remove right padding */ border-radius: 9px; background-color: #1a1a1a; color: #1e90ff; border: 1px solid #444; transition: all 0.3s; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); margin-bottom: 5px; /* Space between input and error */ } .input_field:focus { border: 1px solid #1e90ff; background-color: #333; box-shadow: 0 0 5px rgba(30, 144, 255, 0.5); } .input_error { color: #ff4d4d; font-size: 12px; margin-top: 5px; } .card-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: auto; display: none; /* Hide by default */ } .button { background: #005ea6; color: #fff; border: none; border-radius: 6px; padding: 15px 20px; font-size: 18px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); cursor: pointer; transition: background 0.3s ease, transform 0.2s; width: 100%; margin-top: 10px; } .button:hover { background: #007bb5; transform: translateY(-2px); } .footer { text-align: center; margin-top: 20px; color: #d1d1d1; font-size: 12px; } .decoration { width: 100%; height: 10px; background: linear-gradient(90deg, #1e90ff, #005ea6); border-radius: 5px; margin-bottom: 20px; } .notification { position: fixed; top: 20px; right: -300px; background-color: #1e90ff; color: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: right 0.5s ease; z-index: 1000; } .hidden { display: none; }
JS
Copy
document.addEventListener("DOMContentLoaded", function() { const cardNumberInput = document.getElementById('card-number-input'); const expiryDateInput = document.getElementById('expiry-date-input'); const cvvInput = document.getElementById('cvv-input'); const cardholderNameInput = document.getElementById('cardholder-name-input'); const cardIcon = document.getElementById('card-icon'); cardNumberInput.addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, '').substring(0, 16); e.target.value = value.replace(/(\d{4})(?=\d)/g, '$1 '); // Determine card type const cardType = getCardType(value); if (cardType) { cardIcon.src = cardType.icon; cardIcon.style.display = 'block'; // Show the icon } else { cardIcon.style.display = 'none'; // Hide the icon document.getElementById('card-number-error').classList.remove('hidden'); // Show error } }); expiryDateInput.addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, '').substring(0, 4); e.target.value = value.length >= 2 ? value.substring(0, 2) + '/' + value.substring(2, 4) : value; if (!/^(0[1-9]|1[0-2])\/?([0-9]{2})$/.test(e.target.value)) { document.getElementById('expiry-date-error').classList.remove('hidden'); // Show error } else { document.getElementById('expiry-date-error').classList.add('hidden'); // Hide error } }); cvvInput.addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, '').substring(0, 3); if (e.target.value.length < 3) { document.getElementById('cvv-error').classList.remove('hidden'); // Show error } else { document.getElementById('cvv-error').classList.add('hidden'); // Hide error } }); cardholderNameInput.addEventListener('input', function(e) { e.target.value = e.target.value.replace(/[0-9]/g, ''); if (/\d/.test(e.target.value)) { document.getElementById('cardholder-name-error').classList.remove('hidden'); // Show error } else { document.getElementById('cardholder-name-error').classList.add('hidden'); // Hide error } }); function getCardType(number) { const cardTypes = [ { name: 'Visa', regex: /^4[0-9]{12}(?:[0-9]{3})?/, icon: 'https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Inc._logo.svg' }, { name: 'MasterCard', regex: /^5[1-5][0-9]{14}/, icon: 'https://upload.wikimedia.org/wikipedia/commons/0/4d/MasterCard-logo.svg' }, { name: 'American Express', regex: /^3[47][0-9]{13}/, icon: 'https://upload.wikimedia.org/wikipedia/commons/3/3f/American_Express_logo.svg' }, { name: 'Discover', regex: /^6(?:011|5[0-9]{2})[0-9]{12}/, icon: 'https://upload.wikimedia.org/wikipedia/commons/5/5e/Discover_Logo.svg' } ]; return cardTypes.find(type => type.regex.test(number)) || null; } function showNotification(message) { const notification = document.createElement('div'); notification.className = 'notification'; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.style.right = '20px'; }, 100); setTimeout(() => { notification.style.right = '-300px'; setTimeout(() => notification.remove(), 500); }, 3000); } document.getElementById('card-button').addEventListener('click', () => { if (document.getElementById('card-number-error').classList.contains('hidden') && document.getElementById('expiry-date-error').classList.contains('hidden') && document.getElementById('cvv-error').classList.contains('hidden') && document.getElementById('cardholder-name-error').classList.contains('hidden')) { showNotification('Payment with Card processed!'); } }); document.getElementById('paypal-button').addEventListener('click', () => showNotification('Payment with PayPal processed!')); });