Un code par nathphr816

1,680 nathphr816

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 January 2026

Exemple de code CSS 3D pour montre connectée

28 May 2025

Un code par toolify001

20 May 2026

Intégrer un jeu en plein écran : iframe, Viewport, JavaScript

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