Hugging Face's logo

Spaces:
Jaafarsa
/
undefined
Running

App Files Community
undefined / cart.html
Jaafarsa's picture
Jaafarsa
add payment methods features like credit or debit card, and Alibaba pay, wechat pay, PayPal, Apple Pay, and Google Pay with fixing an error for any mistake
3781ed1 verified
raw
history blame contribute delete
15.5 kB
 <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Cart - YourHand.co</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.gradient-text {
background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center space-x-2">
<i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
<span class="text-2xl font-bold gradient-text">YourHand.co</span>
</div>
<a href="index.html" class="text-primary-500 hover:text-primary-400 transition">
Back to Shopping
</a>
</div>
</nav>
<section class="max-w-6xl mx-auto py-10 px-4">
<h1 class="text-3xl font-bold mb-8">Your Shopping Cart</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2">
<div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
<div class="p-4 border-b border-gray-700">
<h2 class="text-xl font-bold">Items (<span id="itemCount">0</span>)</h2>
</div>
<div id="cartItems" class="divide-y divide-gray-700">
<!-- Cart items will be populated by JavaScript -->
<div class="p-6 text-center text-gray-400">
<i data-feather="shopping-cart" class="w-10 h-10 mx-auto mb-4"></i>
<p>Your cart is empty</p>
</div>
</div>
</div>
</div>
<div>
<div class="bg-gray-800 rounded-xl shadow-lg p-6 sticky top-4">
<h2 class="text-xl font-bold mb-4">Order Summary</h2>
<div class="space-y-4 mb-6">
<div class="flex justify-between">
<span class="text-gray-400">Subtotal</span>
<span id="subtotal" class="font-bold">$0.00</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Shipping</span>
<span class="font-bold">Free</span>
</div>
<div class="flex justify-between border-t border-gray-700 pt-4">
<span class="text-lg font-bold">Total</span>
<span id="total" class="text-lg font-bold gradient-text">$0.00</span>
</div>
</div>
<button id="checkoutBtn"
class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
disabled>
Proceed to Checkout
</button>
<div id="paymentMethods" class="mt-4 hidden">
<div class="space-y-4">
<!-- Credit/Debit Card -->
<div class="bg-gray-700 p-4 rounded-lg">
<div class="flex items-center mb-4">
<input type="radio" name="paymentMethod" id="creditCard" class="mr-2" checked>
<label for="creditCard" class="font-bold">Credit/Debit Card</label>
</div>
<div id="cardForm" class="space-y-3">
<input type="text" placeholder="Card Number" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
<div class="grid grid-cols-2 gap-3">
<input type="text" placeholder="MM/YY" class="bg-gray-800 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
<input type="text" placeholder="CVV" class="bg-gray-800 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
</div>
<input type="text" placeholder="Name on Card" class="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
</div>
</div>
<!-- Digital Wallets -->
<div class="bg-gray-700 p-4 rounded-lg">
<div class="flex items-center mb-4">
<input type="radio" name="paymentMethod" id="digitalWallets" class="mr-2">
<label for="digitalWallets" class="font-bold">Digital Wallets</label>
</div>
<div class="grid grid-cols-2 gap-3">
<button class="bg-white text-gray-800 font-bold py-2 px-4 rounded-lg border border-gray-300 flex items-center justify-center">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/paypal/paypal-original.svg" class="w-6 h-6 mr-2" />
PayPal
</button>
<button class="bg-black text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/apple.svg" class="w-6 h-6 mr-2" />
Apple Pay
</button>
<button class="bg-white text-gray-800 font-bold py-2 px-4 rounded-lg border border-gray-300 flex items-center justify-center">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/google.svg" class="w-6 h-6 mr-2" />
Google Pay
</button>
<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/alipay.svg" class="w-6 h-6 mr-2" />
Alipay
</button>
<button class="bg-green-600 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/wechat.svg" class="w-6 h-6 mr-2" />
WeChat Pay
</button>
</div>
</div>
<!-- Submit Payment -->
<button id="processPayment" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition">
Complete Payment
</button>
</div>
</div>
<div class="mt-4 text-sm text-gray-400">
<p>By completing your purchase, you agree to our <a href="#" class="text-primary-500 hover:text-primary-400">Terms of Service</a>.</p>
</div>
</div>
</div>
</div>
</section>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
feather.replace();
// Load cart from localStorage
let cart = JSON.parse(localStorage.getItem('cart')) || [];
// Display cart items
const cartItemsContainer = document.getElementById('cartItems');
const itemCountElement = document.getElementById('itemCount');
const subtotalElement = document.getElementById('subtotal');
const totalElement = document.getElementById('total');
const checkoutBtn = document.getElementById('checkoutBtn');
function updateCartDisplay() {
// Clear existing items
cartItemsContainer.innerHTML = '';
if (cart.length === 0) {
cartItemsContainer.innerHTML = `
<div class="p-6 text-center text-gray-400">
<i data-feather="shopping-cart" class="w-10 h-10 mx-auto mb-4"></i>
<p>Your cart is empty</p>
</div>
`;
itemCountElement.textContent = '0';
subtotalElement.textContent = '$0.00';
totalElement.textContent = '$0.00';
checkoutBtn.disabled = true;
feather.replace();
return;
}
let subtotal = 0;
cart.forEach((item, index) => {
const itemTotal = item.price * item.quantity;
subtotal += itemTotal;
const cartItemElement = document.createElement('div');
cartItemElement.className = 'p-4';
cartItemElement.innerHTML = `
<div class="flex items-start">
<div class="w-24 h-24 rounded-lg overflow-hidden mr-4">
<img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h3 class="font-bold">${item.name}</h3>
<p class="text-gray-400 text-sm mb-2">$${item.price.toFixed(2)}</p>
<div class="flex items-center">
<button class="quantity-btn" data-index="${index}" data-action="decrease">
<i data-feather="minus" class="w-4 h-4"></i>
</button>
<span class="mx-3">${item.quantity}</span>
<button class="quantity-btn" data-index="${index}" data-action="increase">
<i data-feather="plus" class="w-4 h-4"></i>
</button>
<button class="ml-auto text-red-500 hover:text-red-400" data-index="${index}" data-action="remove">
<i data-feather="trash-2" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
`;
cartItemsContainer.appendChild(cartItemElement);
});
itemCountElement.textContent = cart.reduce((total, item) => total + item.quantity, 0);
subtotalElement.textContent = `$${subtotal.toFixed(2)}`;
totalElement.textContent = `$${subtotal.toFixed(2)}`;
checkoutBtn.disabled = false;
feather.replace();
}
// Handle quantity adjustments and removal
cartItemsContainer.addEventListener('click', (e) => {
const btn = e.target.closest('[data-index]');
if (!btn) return;
const index = parseInt(btn.dataset.index);
const action = btn.dataset.action;
if (action === 'increase') {
cart[index].quantity += 1;
} else if (action === 'decrease') {
if (cart[index].quantity > 1) {
cart[index].quantity -= 1;
} else {
cart.splice(index, 1);
}
} else if (action === 'remove') {
cart.splice(index, 1);
}
localStorage.setItem('cart', JSON.stringify(cart));
updateCartDisplay();
updateCartCounter(); // Update counter in other pages
});
// Checkout button
checkoutBtn.addEventListener('click', () => {
document.getElementById('paymentMethods').classList.remove('hidden');
checkoutBtn.disabled = true;
});
// Process payment
document.getElementById('processPayment').addEventListener('click', () => {
const selectedMethod = document.querySelector('input[name="paymentMethod"]:checked').id;
// Validate form for credit card
if (selectedMethod === 'creditCard') {
const cardInputs = document.querySelectorAll('#cardForm input');
let isValid = true;
cardInputs.forEach(input => {
if (!input.value.trim()) {
input.classList.add('border-red-500');
isValid = false;
} else {
input.classList.remove('border-red-500');
}
});
if (!isValid) {
alert('Please fill all card details');
return;
}
}
// Process payment based on selected method
alert(`Processing payment with ${selectedMethod.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}...`);
// Simulate payment processing
setTimeout(() => {
localStorage.removeItem('cart');
window.location.href = 'order-confirmation.html';
}, 1500);
});
// Handle payment method selection
document.querySelectorAll('input[name="paymentMethod"]').forEach(radio => {
radio.addEventListener('change', () => {
if (radio.id === 'creditCard') {
document.getElementById('cardForm').classList.remove('hidden');
} else {
document.getElementById('cardForm').classList.add('hidden');
}
});
});
// Initialize cart display
updateCartDisplay();
// Function to update cart counter (shared with other pages)
window.updateCartCounter = function() {
const count = cart.reduce((total, item) => total + item.quantity, 0);
const counters = document.querySelectorAll('.cart-counter');
counters.forEach(counter => {
counter.textContent = count;
count > 0 ? counter.classList.remove('hidden') : counter.classList.add('hidden');
});
};
</script>
</body>
</html>