Hugging Face's logo

Spaces:
shopifydeveloper99
/
shopify-toolbox-haven
Running

App Files Community
shopify-toolbox-haven / checkout.html
shopifydeveloper99's picture
shopifydeveloper99
MAKE ALL THE FONTS COLOR IN THE CHECKOUT PAGES WHTE
357bd76 verified
Raw History Blame Contribute Delete
17.6 kB
<!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>