A Code by alejandrokundrah

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Checkout Interface</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="checkout-card">
      
      <div class="payment-section">
        <div class="form-header">
          <h2>Payment Information</h2>
          <p>Complete your purchase securely</p>
        </div>

<form class="payment-form" id="paymentForm">
          <div class="form-group">
            <label for="cardholderName">Cardholder Name</label>
            <input type="text" id="cardholderName" name="cardholderName" placeholder="Enter your full name" required>
          </div>

<div class="form-group card-number-group">
            <label for="cardNumber">Card Number</label>
            <div class="card-input-wrapper">
              <input type="text" id="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" required>
              <div class="card-icon" id="cardIcon">
                <img src="https://img.icons8.com/color/24/bank-card-back-side.png" alt="Card" id="cardTypeIcon">
              </div>
            </div>
          </div>

<div class="form-row">
            <div class="form-group">
              <label for="expiryDate">Expiry Date</label>
              <input type="text" id="expiryDate" name="expiryDate" placeholder="MM/YY" maxlength="5" required>
            </div>
            <div class="form-group">
              <label for="cvv">CVV</label>
              <input type="text" id="cvv" name="cvv" placeholder="123" maxlength="4" required>
            </div>
          </div>

<div class="total-section">
            <div class="total-display">
              <span class="total-label">Total</span>
              <span class="total-amount">$249.00</span>
            </div>
          </div>

<button type="submit" class="purchase-btn">
            <span>PURCHASE</span>
            <div class="btn-loading"></div>
          </button>
        </form>
      </div>

<div class="product-section">
        <div class="main-product-image">
          <img src="https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=400&h=400&fit=crop&crop=center" alt="AirPods Pro" id="mainProductImage">
        </div>

<div class="product-details">
          <h3>AirPods Pro (2nd Generation)</h3>
          <p>Active Noise Cancellation, Transparency Mode, Personalized Spatial Audio, and longer battery life.</p>
          <div class="product-features">
            <span class="feature">✓ Active Noise Cancellation</span>
            <span class="feature">✓ Spatial Audio</span>
            <span class="feature">✓ 30hr Battery Life</span>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.checkout-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  min-height: 600px;
  transition: all 0.3s ease;
}

.checkout-card:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Payment Section */
.payment-section {
  padding: 48px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-header {
  margin-bottom: 32px;
}

.form-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.form-header p {
  color: #64748b;
  font-size: 16px;
  font-weight: 400;
}

.payment-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input {
  padding: 16px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
  background: #ffffff;
  transition: all 0.2s ease;
  outline: none;
}

.form-group input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.form-group input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.card-input-wrapper {
  position: relative;
}

.card-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f8fafc;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.card-icon img {
  width: 20px;
  height: 20px;
  transition: all 0.2s ease;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.total-section {
  margin: 16px 0 8px 0;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

.total-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.total-amount {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: -0.5px;
}

.purchase-btn {
  padding: 18px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.purchase-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);
}

.purchase-btn:active {
  transform: translateY(0);
}

.btn-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.purchase-btn.loading .btn-loading {
  opacity: 1;
}

.purchase-btn.loading span {
  opacity: 0;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Product Section */
.product-section {
  padding: 48px;
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.main-product-image {
  width: 300px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-product-image:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.main-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.thumbnail-container {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 3px solid transparent;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.thumbnail.active {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-details {
  text-align: center;
  max-width: 320px;
}

.product-details h3 {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.product-details p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.product-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.feature {
  font-size: 12px;
  color: #059669;
  font-weight: 500;
  background: rgba(5, 150, 105, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

/* Form Validation States */
.form-group.error input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group.success input {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .checkout-card {
    grid-template-columns: 1fr;
    margin: 10px;
    border-radius: 20px;
  }

.payment-section,
  .product-section {
    padding: 32px 24px;
  }

.form-header h2 {
    font-size: 24px;
  }

.form-row {
    grid-template-columns: 1fr;
  }

.main-product-image {
    width: 250px;
    height: 250px;
  }

.thumbnail {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px;
  }

.payment-section,
  .product-section {
    padding: 24px 20px;
  }

.main-product-image {
    width: 200px;
    height: 200px;
  }

.thumbnail {
    width: 50px;
    height: 50px;
  }

.purchase-btn {
    padding: 16px 24px;
    font-size: 14px;
  }
}

JS

class CheckoutInterface {
  constructor() {
    this.init();
  }

init() {
    this.setupCardNumberValidation();
    this.setupExpiryDateFormatting();
    this.setupCVVValidation();
    this.setupImageSwitching();
    this.setupFormSubmission();
    this.setupInputAnimations();
  }

setupCardNumberValidation() {
    const cardNumberInput = document.getElementById('cardNumber');
    const cardIcon = document.getElementById('cardTypeIcon');

cardNumberInput.addEventListener('input', (e) => {
      let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
      let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;

if (formattedValue.length > 19) {
        formattedValue = formattedValue.substring(0, 19);
      }

e.target.value = formattedValue;

// Detect card type
      this.detectCardType(value, cardIcon);

// Validation styling
      this.validateCardNumber(value, cardNumberInput);
    });
  }

detectCardType(number, iconElement) {
    const cardTypes = {
      visa: /^4/,
      mastercard: /^5[1-5]/,
      amex: /^3[47]/,
      discover: /^6(?:011|5)/
    };

let detectedType = 'default';

for (const [type, pattern] of Object.entries(cardTypes)) {
      if (pattern.test(number)) {
        detectedType = type;
        break;
      }
    }

const icons = {
      visa: 'https://img.icons8.com/color/24/visa.png',
      mastercard: 'https://img.icons8.com/color/24/mastercard.png',
      amex: 'https://img.icons8.com/color/24/amex.png',
      discover: 'https://img.icons8.com/color/24/discover.png',
      default: 'https://img.icons8.com/color/24/bank-card-back-side.png'
    };

iconElement.src = icons[detectedType];
    iconElement.alt = detectedType.charAt(0).toUpperCase() + detectedType.slice(1);
  }

validateCardNumber(number, inputElement) {
    const parent = inputElement.closest('.form-group');
    parent.classList.remove('error', 'success');

if (number.length >= 13 && number.length <= 19) {
      if (this.luhnCheck(number)) {
        parent.classList.add('success');
      } else {
        parent.classList.add('error');
      }
    } else if (number.length > 0) {
      parent.classList.add('error');
    }
  }

luhnCheck(cardNumber) {
    let sum = 0;
    let isEven = false;

for (let i = cardNumber.length - 1; i >= 0; i--) {
      let digit = parseInt(cardNumber.charAt(i), 10);

if (isEven) {
        digit *= 2;
        if (digit > 9) {
          digit -= 9;
        }
      }

sum += digit;
      isEven = !isEven;
    }

return (sum % 10) === 0;
  }

setupExpiryDateFormatting() {
    const expiryInput = document.getElementById('expiryDate');

expiryInput.addEventListener('input', (e) => {
      let value = e.target.value.replace(/\D/g, '');

if (value.length >= 2) {
        value = value.substring(0, 2) + '/' + value.substring(2, 4);
      }

e.target.value = value;

// Validation
      this.validateExpiryDate(value, expiryInput);
    });
  }

validateExpiryDate(value, inputElement) {
    const parent = inputElement.closest('.form-group');
    parent.classList.remove('error', 'success');

if (value.length === 5) {
      const [month, year] = value.split('/');
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear() % 100;
      const currentMonth = currentDate.getMonth() + 1;

const inputMonth = parseInt(month);
      const inputYear = parseInt(year);

if (inputMonth >= 1 && inputMonth <= 12) {
        if (inputYear > currentYear || (inputYear === currentYear && inputMonth >= currentMonth)) {
          parent.classList.add('success');
        } else {
          parent.classList.add('error');
        }
      } else {
        parent.classList.add('error');
      }
    } else if (value.length > 0) {
      parent.classList.add('error');
    }
  }

setupCVVValidation() {
    const cvvInput = document.getElementById('cvv');

cvvInput.addEventListener('input', (e) => {
      e.target.value = e.target.value.replace(/\D/g, '');

const parent = e.target.closest('.form-group');
      parent.classList.remove('error', 'success');

if (e.target.value.length >= 3) {
        parent.classList.add('success');
      } else if (e.target.value.length > 0) {
        parent.classList.add('error');
      }
    });
  }

setupImageSwitching() {
    const thumbnails = document.querySelectorAll('.thumbnail');
    const mainImage = document.getElementById('mainProductImage');

thumbnails.forEach(thumbnail => {
      thumbnail.addEventListener('click', () => {
        // Remove active class from all thumbnails
        thumbnails.forEach(t => t.classList.remove('active'));

// Add active class to clicked thumbnail
        thumbnail.classList.add('active');

// Update main image
        const newImageSrc = thumbnail.dataset.image;
        this.fadeImageTransition(mainImage, newImageSrc);
      });
    });
  }

fadeImageTransition(imageElement, newSrc) {
    imageElement.style.opacity = '0';

setTimeout(() => {
      imageElement.src = newSrc;
      imageElement.style.opacity = '1';
    }, 150);
  }

setupFormSubmission() {
    const form = document.getElementById('paymentForm');
    const purchaseBtn = document.querySelector('.purchase-btn');

form.addEventListener('submit', (e) => {
      e.preventDefault();

if (this.validateForm()) {
        this.processPurchase(purchaseBtn);
      }
    });
  }

validateForm() {
    const inputs = document.querySelectorAll('input[required]');
    let isValid = true;

inputs.forEach(input => {
      const parent = input.closest('.form-group');

if (!input.value.trim()) {
        parent.classList.add('error');
        parent.classList.remove('success');
        isValid = false;
      }
    });

return isValid;
  }

processPurchase(button) {
    button.classList.add('loading');
    button.disabled = true;

// Simulate processing time
    setTimeout(() => {
      button.classList.remove('loading');
      button.disabled = false;

// Show success message
      this.showSuccessMessage();
    }, 2000);
  }

showSuccessMessage() {
    const successHTML = `
      <div class="success-overlay">
        <div class="success-message">
          <div class="success-icon">✓</div>
          <h3>Payment Successful!</h3>
          <p>Your order has been processed successfully.</p>
          <button onclick="this.closest('.success-overlay').remove()" class="success-btn">Continue</button>
        </div>
      </div>
    `;

document.body.insertAdjacentHTML('beforeend', successHTML);

// Add success overlay styles
    const style = document.createElement('style');
    style.textContent = `
      .success-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        animation: fadeIn 0.3s ease;
      }

.success-message {
        background: white;
        padding: 48px;
        border-radius: 24px;
        text-align: center;
        max-width: 400px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        animation: slideUp 0.3s ease;
      }

.success-icon {
        width: 80px;
        height: 80px;
        background: #22c55e;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        color: white;
        margin: 0 auto 24px;
        font-weight: bold;
      }

.success-message h3 {
        font-size: 24px;
        color: #1a202c;
        margin-bottom: 12px;
      }

.success-message p {
        color: #64748b;
        margin-bottom: 32px;
      }

.success-btn {
        background: #667eea;
        color: white;
        border: none;
        padding: 12px 32px;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
      }

.success-btn:hover {
        background: #5a67d8;
        transform: translateY(-1px);
      }

@keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

@keyframes slideUp {
        from { 
          opacity: 0;
          transform: translateY(20px);
        }
        to { 
          opacity: 1;
          transform: translateY(0);
        }
      }
    `;
    document.head.appendChild(style);
  }

setupInputAnimations() {
    const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
      input.addEventListener('focus', () => {
        input.closest('.form-group').classList.add('focused');
      });

input.addEventListener('blur', () => {
        input.closest('.form-group').classList.remove('focused');
      });
    });
  }
}

// Initialize the checkout interface when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  new CheckoutInterface();
});

A Code by alejandrokundrah

Recommended

Product Card UI Design

A Code by agilecloud61

World Places (CSS 3d hover)

HTML

CSS

JS

Recommended

Product Card UI Design

A Code by agilecloud61

World Places (CSS 3d hover)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS