Blame for checkout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout - Shopify Toolbox Haven</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#2563EB',
                        accent: '#1D4ED8',
                        dark: '#1E40AF'
                    },
fontFamily: {
                        sans: ['Inter', 'sans-serif']
                    }
                }
            }
        }
</script>
    <style>
        .checkout-card {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .error {
            border-color: #ef4444;
        }
        .error-text {
            color: #ef4444;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body class="bg-black text-white">
<!-- Navigation -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i data-feather="tool" class="text-primary h-8 w-8"></i>
                        <span class="ml-2 text-xl font-bold text-gray-900">Shopify Toolbox Haven</span>
                    </div>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                    <a href="index.html" class="text-gray-500 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Home</a>
                    <a href="index.html#tools" class="text-gray-500 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Tools</a>
                    <a href="index.html#pricing" class="text-gray-500 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
                    <a href="index.html#contact" class="text-gray-500 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                </div>
                <div class="-mr-2 flex items-center md:hidden">
                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
                        <span class="sr-only">Open main menu</span>
                        <i data-feather="menu" class="h-6 w-6"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <!-- Checkout Section -->
    <div class="py-12 bg-white text-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-8">
                <!-- Order Summary -->
                <div class="lg:col-span-1">
                    <div class="bg-gray-800 rounded-lg checkout-card p-6 mb-8">
<h2 class="text-2xl font-bold text-white mb-6">Order Summary</h2>
<div class="border-b border-gray-200 pb-6">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h3 class="text-lg font-medium text-white">Accessibility Review Tool</h3>
                                    <p class="text-gray-300">Professional Plan</p>
</div>
                                <span class="text-lg font-medium text-gray-900">$99.00</span>
                            </div>
                            <div class="mt-4 flex justify-between text-sm text-gray-600">
                                <span>Monthly subscription</span>
                                <span>Billed monthly</span>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <div class="flex justify-between text-base font-medium text-white">
                                <p>Subtotal</p>
                                <p>$99.00</p>
</div>
                            <div class="flex justify-between text-base font-medium text-white mt-2">
                                <p>Tax</p>
                                <p>$0.00</p>
</div>
                            <div class="flex justify-between text-base font-medium text-white mt-4 pt-4 border-t border-gray-600">
                                <p>Total</p>
                                <p>$99.00</p>
</div>
                        </div>
                        
                        <div class="mt-6 flex items-center">
                            <i data-feather="lock" class="text-primary h-5 w-5"></i>
                            <span class="ml-2 text-sm text-gray-500">Secure checkout</span>
                        </div>
                    </div>
                    <div class="bg-gray-800 rounded-lg checkout-card p-6">
<h3 class="text-lg font-medium text-white mb-4">Payment Information</h3>
<div class="bg-gray-100 p-4 rounded-md">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i data-feather="credit-card" class="text-gray-500 h-6 w-6"></i>
                                    <span class="ml-3 text-gray-300">Credit Card</span>
</div>
                                <div class="flex items-center space-x-2">
                                    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/visa/visa-original.svg" class="h-6" alt="Visa">
                                    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mastercard/mastercard-original.svg" class="h-6" alt="Mastercard">
                                    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg" class="h-6" alt="Apple Pay">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Checkout Form -->
                <div class="lg:col-span-1 mt-8 lg:mt-0">
                    <div class="bg-gray-800 rounded-lg checkout-card p-6">
<h2 class="text-2xl font-bold text-white mb-6">Complete Your Purchase</h2>
<form id="checkoutForm" class="space-y-6">
                            <div>
                                <label for="storeName" class="block text-sm font-medium text-gray-300">Store Name *</label>
<input type="text" id="storeName" name="storeName" required class="mt-1 py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
                                <p id="storeNameError" class="error-text hidden">Please enter your store name</p>
                            </div>
                            
                            <div>
                                <label for="businessName" class="block text-sm font-medium text-gray-300">Business Name *</label>
<input type="text" id="businessName" name="businessName" required class="mt-1 py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
                                <p id="businessNameError" class="error-text hidden">Please enter your business name</p>
                            </div>
                            
                            <div>
                                <label for="storeUrl" class="block text-sm font-medium text-gray-300">Store URL *</label>
<div class="mt-1 flex rounded-md shadow-sm">
                                    <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">https://</span>
                                    <input type="text" id="storeUrl" name="storeUrl" required class="py-3 px-4 block w-full border border-gray-300 rounded-r-md shadow-sm focus:ring-primary focus:border-primary">
                                </div>
                                <p id="storeUrlError" class="error-text hidden">Please enter your store URL</p>
                            </div>
                            
                            <div>
                                <label for="businessEmail" class="block text-sm font-medium text-gray-300">Business Email *</label>
<input type="email" id="businessEmail" name="businessEmail" required class="mt-1 py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
                                <p id="businessEmailError" class="error-text hidden">Please enter a valid email address</p>
                            </div>
                            
                            <div>
                                <label for="businessAddress" class="block text-sm font-medium text-gray-300">Business Address *</label>
<input type="text" id="businessAddress" name="businessAddress" required class="mt-1 py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
                                <p id="businessAddressError" class="error-text hidden">Please enter your business address</p>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                <label for="zipCode" class="block text-sm font-medium text-gray-300">ZIP Code *</label>
<input type="text" id="zipCode" name="zipCode" required class="mt-1 py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
                                    <p id="zipCodeError" class="error-text hidden">Please enter your ZIP code</p>
                                </div>
                                <div>
                                <label for="country" class="block text-sm font-medium text-gray-300">Country *</label>
<select id="country" name="country" required class="mt-1 py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
                                        <option value="">Select Country</option>
                                        <option value="US">United States</option>
                                        <option value="CA">Canada</option>
                                        <option value="UK">United Kingdom</option>
                                        <option value="AU">Australia</option>
                                        <option value="DE">Germany</option>
                                        <option value="FR">France</option>
                                        <option value="JP">Japan</option>
                                    </select>
                                    <p id="countryError" class="error-text hidden">Please select your country</p>
                                </div>
                            </div>
                            
                            <div>
                                <label for="paymentMethod" class="block text-sm font-medium text-gray-300">Payment Method *</label>
<select id="paymentMethod" name="paymentMethod" required class="mt-1 py-3 px-4 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
                                    <option value="">Select Payment Method</option>
                                    <option value="credit">Credit Card</option>
                                    <option value="paypal">PayPal</option>
                                    <option value="bank">Bank Transfer</option>
                                </select>
                                <p id="paymentMethodError" class="error-text hidden">Please select a payment method</p>
                            </div>
                            
                            <div class="flex items-center">
                                <input id="terms" name="terms" type="checkbox" required class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <label for="terms" class="ml-2 block text-sm text-white">
I agree to the <a href="#" class="text-primary hover:text-primary-dark">Terms of Service</a> and <a href="#" class="text-primary hover:text-primary-dark">Privacy Policy</a>
                                </label>
                            </div>
                            <p id="termsError" class="error-text hidden">You must agree to the terms</p>
                            
                            <div>
                                <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                                    Complete Purchase
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <footer class="bg-blue-900">
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center">
                    <i data-feather="tool" class="text-white h-6 w-6"></i>
                    <span class="ml-2 text-lg font-medium text-white">Shopify Toolbox Haven</span>
                </div>
                <div class="mt-4 md:mt-0">
                    <p class="text-center md:text-right text-sm text-blue-200">© 2023 Shopify Toolbox Haven. All rights reserved.</p>
</div>
            </div>
        </div>
    </footer>

    <script>
        // Initialize feather icons
        feather.replace();
        
        // Form validation
        document.getElementById('checkoutForm').addEventListener('submit', function(e) {
            e.preventDefault();
            let valid = true;
            
            // Reset errors
            document.querySelectorAll('.error-text').forEach(el => el.classList.add('hidden'));
            document.querySelectorAll('input, select').forEach(el => el.classList.remove('error'));
            
            // Validate each field
            const fields = [
                'storeName', 'businessName', 'storeUrl', 'businessEmail', 
                'businessAddress', 'zipCode', 'country', 'paymentMethod'
            ];
            
            fields.forEach(field => {
                const element = document.getElementById(field);
                if (!element.value.trim()) {
                    element.classList.add('error');
                    document.getElementById(`${field}Error`).classList.remove('hidden');
                    valid = false;
                }
            });
            
            if (!document.getElementById('terms').checked) {
                document.getElementById('termsError').classList.remove('hidden');
                valid = false;
            }
            
            // If form is valid, submit it
            if (valid) {
                // Create FormData object
                const formData = new FormData(this);
                const data = {};
                formData.forEach((value, key) => {
                    data[key] = value;
                });
                
                // Add product info
                data['product'] = 'Accessibility Review Tool - Professional Plan';
                data['price'] = '$99.00';
                data['date'] = new Date().toISOString();
                
                // Here you would typically send this data to your server
                console.log('Form data:', data);
                
                // Send email notification (in a real app, this would be done server-side)
                const emailBody = `
                    New Purchase on Shopify Toolbox Haven:
                    
                    Store Name: ${data.storeName}
                    Business Name: ${data.businessName}
                    Store URL: ${data.storeUrl}
                    Business Email: ${data.businessEmail}
                    Business Address: ${data.businessAddress}
                    ZIP Code: ${data.zipCode}
                    Country: ${data.country}
                    Payment Method: ${data.paymentMethod}
                    
                    Product: ${data.product}
                    Price: ${data.price}
                `;
                console.log('Email sent to noreply.akunatechnologies@gmail.com with body:', emailBody);
// Show success message
                alert('Thank you for your purchase! Your tool will be available shortly.');
                this.reset();
                
                // In a real application, you would redirect to a success page
                // window.location.href = 'success.html';
            }
        });
    </script>
</body>
</html>