स्मार्टफंक्शन186 द्वारा एक कोड

अनुशंसित

2 January 2025

कोडपेन होम आउटलाइन मोबाइल कार्ड

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment - Form</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Payment Details</h1>
        <div class="decoration"></div>
        <div class="input_container">
            <label class="input_label" for="card-number-input">Card Number</label>
            <input type="text" id="card-number-input" class="input_field" placeholder="Enter Card Number" maxlength="19">
            <img id="card-icon" class="card-icon" src="" alt="Card Type Icon">
            <div id="card-number-error" class="input_error hidden">Invalid card number</div>
        </div>
        <div class="input_container">
            <label class="input_label" for="expiry-date-input">Expiry Date (MM/YY)</label>
            <input type="text" id="expiry-date-input" class="input_field" placeholder="MM/YY" maxlength="5">
            <div id="expiry-date-error" class="input_error hidden">Invalid expiry date</div>
        </div>
        <div class="input_container">
            <label class="input_label" for="cardholder-name-input">Cardholder Name</label>
            <input type="text" id="cardholder-name-input" class="input_field" placeholder="Your Full Name">
            <div id="cardholder-name-error" class="input_error hidden">Name cannot contain numbers</div>
        </div>
        <div class="input_container">
            <label class="input_label" for="cvv-input">Security Code (CVV)</label>
            <input type="text" id="cvv-input" class="input_field" placeholder="CVV" maxlength="3">
            <div id="cvv-error" class="input_error hidden">Invalid CVV</div>
        </div>
        <button class="button" id="card-button">
            <span>Pay with Card</span>
        </button>
        <button class="button" id="paypal-button">
            <span>Pay with PayPal</span>
        </button>
        <div class="footer">
            <p>© 2024 Anes. All Rights Reserved.</p>
        </div>
    </div>

CSS

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

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;
    }

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!'));
});

स्मार्टफंक्शन186 द्वारा एक कोड

अनुशंसित

एक अजीब होम पेज

लैंडिंगपेज1 द्वारा एक कोड

कोडपेन होम आउटलाइन मोबाइल कार्ड

HTML

CSS

JS

अनुशंसित

एक अजीब होम पेज

लैंडिंगपेज1 द्वारा एक कोड

कोडपेन होम आउटलाइन मोबाइल कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS