add proceed to check out with online payment

cart.html

@@ -66,25 +66,34 @@
                             <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 class="mt-4 text-sm text-gray-400">
+                    <div id="paymentMethods" class="mt-4 hidden">
+                        <div class="flex gap-4 mb-4">
+                            <button id="stripeBtn" class="flex-1 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/stripe/stripe-original.svg" class="w-6 h-6 mr-2" />
+                                Pay with Stripe
+                            </button>
+                            <button id="paypalBtn" class="flex-1 bg-blue-600 text-white font-bold py-2 px-4 rounded-lg 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" />
+                                Pay with PayPal
+                            </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
+// Load cart from localStorage
         let cart = JSON.parse(localStorage.getItem('cart')) || [];
         
         // Display cart items
@@ -178,13 +187,48 @@
             updateCartDisplay();
             updateCartCounter(); // Update counter in other pages
         });
-        
         // Checkout button
         checkoutBtn.addEventListener('click', () => {
-            alert('Proceeding to checkout - this would redirect to a payment page in a real application');
+            document.getElementById('paymentMethods').classList.remove('hidden');
+            checkoutBtn.disabled = true;
         });
-        
-        // Initialize cart display
+
+        // Stripe payment
+        document.getElementById('stripeBtn').addEventListener('click', () => {
+            const handler = StripeCheckout.configure({
+                key: 'pk_test_your_stripe_key',
+                image: 'https://yourhand.co/logo.png',
+                locale: 'auto',
+                currency: 'USD',
+                token: function(token) {
+                    // In real app, send token to backend
+                    console.log(token);
+                    alert('Payment successful! Redirecting to order confirmation...');
+                    localStorage.removeItem('cart');
+                    window.location.href = 'order-confirmation.html';
+                }
+            });
+
+            const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
+            
+            handler.open({
+                name: 'YourHand.co',
+                description: `${cart.length} items`,
+                amount: subtotal * 100
+            });
+        });
+
+        // PayPal payment
+        document.getElementById('paypalBtn').addEventListener('click', () => {
+            alert('Redirecting to PayPal...');
+            // In real app, this would integrate with PayPal SDK
+            // For demo, just clear cart and redirect to confirmation
+            setTimeout(() => {
+                localStorage.removeItem('cart');
+                window.location.href = 'order-confirmation.html';
+            }, 1000);
+        });
+// Initialize cart display
         updateCartDisplay();
         
         // Function to update cart counter (shared with other pages)

order-confirmation.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order Confirmation - 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;
+        }
+        .checkmark {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            display: block;
+            stroke-width: 5;
+            stroke: #a855f7;
+            stroke-miterlimit: 10;
+            margin: 0 auto;
+            animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+        }
+        @keyframes fill {
+            100% {
+                box-shadow: inset 0px 0px 0px 50px rgba(168, 85, 247, 0.1);
+            }
+        }
+        @keyframes scale {
+            0%, 100% {
+                transform: none;
+            }
+            50% {
+                transform: scale3d(1.1, 1.1, 1);
+            }
+        }
+    </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">
+                Continue Shopping
+            </a>
+        </div>
+    </nav>
+
+    <section class="max-w-4xl mx-auto py-16 px-4 text-center">
+        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+            <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
+            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+        </svg>
+        
+        <h1 class="text-4xl font-bold mt-8 mb-4">Order Confirmed!</h1>
+        <p class="text-xl text-gray-300 mb-8">Thank you for your purchase</p>
+        
+        <div class="bg-gray-800 rounded-xl p-8 max-w-lg mx-auto mb-8 text-left">
+            <h2 class="text-2xl font-bold mb-6">Order Details</h2>
+            
+            <div class="flex justify-between mb-2">
+                <span class="text-gray-400">Order Number</span>
+                <span class="font-mono">#ORD-${Math.floor(100000 + Math.random() * 900000)}</span>
+            </div>
+            <div class="flex justify-between mb-2">
+                <span class="text-gray-400">Date</span>
+                <span>${new Date().toLocaleDateString()}</span>
+            </div>
+            <div class="flex justify-between mb-2">
+                <span class="text-gray-400">Payment Method</span>
+                <span class="flex items-center">
+                    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/stripe/stripe-original.svg" class="w-5 h-5 mr-2" />
+                    Stripe
+                </span>
+            </div>
+            <div class="flex justify-between text-lg font-bold mt-4 pt-4 border-t border-gray-700">
+                <span>Total</span>
+                <span class="gradient-text">$${(Math.random() * 100 + 50).toFixed(2)}</span>
+            </div>
+        </div>
+        
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <a href="index.html" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-6 rounded-lg transition">
+                Continue Shopping
+            </a>
+            <a href="order-history.html" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition">
+                View Order History
+            </a>
+        </div>
+    </section>
+
+    <script>
+        feather.replace();
+        
+        // Animate checkmark
+        document.addEventListener('DOMContentLoaded', () => {
+            const circle = document.querySelector('.checkmark__circle');
+            const check = document.querySelector('.checkmark__check');
+            
+            circle.style.strokeDasharray = '166';
+            circle.style.strokeDashoffset = '166';
+            circle.style.animation = 'stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards';
+            
+            check.style.strokeDasharray = '48';
+            check.style.strokeDashoffset = '48';
+            check.style.animation = 'stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards';
+        });
+    </script>
+</body>
+</html>