Un código de nathphr816

1,774 nathphr816

Abrir en el editor Publica tu código

Recomendado

12 August 2025

Fragmento de código de animación de corazón CSS

16 May 2026

Código fuente del juego HTML5 Idle Miner Tycoon

21 April 2026

Puerto web del juego CloverPit HTML5

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

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