Un código de smartfunction186

990 smartfunction186

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

11 March 2024

Plantilla HTML CSS para sitio web de portafolio

19 October 2024

Portafolio de desarrolladores HTML V2

28 March 2023

Conexión de formulario a base de datos con Php

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

Recomendado

Plantilla HTML CSS para sitio web de portafolio

Portafolio de desarrolladores HTML V2

Conexión de formulario a base de datos con Php

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS