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

Infinite Orbit Animation with CSS Trigonometry

search movie

Slider Parallax Effect

HTML

CSS

JS

Recommended

Infinite Orbit Animation with CSS Trigonometry

search movie

Slider Parallax Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS