Add 2 files

index.html

@@ -52,14 +52,29 @@
             justify-content: center;
             font-size: 12px;
         }
-        .checkout-modal {
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s ease-in-out;
+        .leaf-logo {
+            color: #9f7aea;
+            font-size: 1.75rem;
+            margin-right: 0.5rem;
         }
-        .checkout-modal.open {
-            opacity: 1;
-            pointer-events: auto;
+        .checkout-container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        .payment-method {
+            border: 1px solid #4a5568;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            transition: all 0.3s;
+        }
+        .payment-method:hover {
+            border-color: #9f7aea;
+        }
+        .payment-method.selected {
+            border-color: #9f7aea;
+            background-color: rgba(159, 122, 234, 0.1);
         }
     </style>
 </head>
@@ -69,7 +84,8 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex items-center justify-between h-16">
                 <div class="flex items-center">
-                    <div class="flex-shrink-0">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i class="fas fa-leaf leaf-logo"></i>
                         <span class="text-purple-400 font-bold text-xl">PsycheBotanica</span>
                     </div>
                     <div class="hidden md:block">
@@ -151,75 +167,6 @@
         </div>
     </div>
 
-    <!-- Checkout Modal -->
-    <div id="checkout-modal" class="checkout-modal fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-30">
-        <div class="bg-gray-800 rounded-lg shadow-xl w-full max-w-md mx-4">
-            <div class="p-6">
-                <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-2xl font-bold text-purple-300">Complete Your Journey</h2>
-                    <button id="close-checkout" class="text-gray-400 hover:text-white">
-                        <i class="fas fa-times text-xl"></i>
-                    </button>
-                </div>
-                
-                <form id="checkout-form" class="space-y-4">
-                    <div>
-                        <label for="full-name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
-                        <input type="text" id="full-name" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white">
-                    </div>
-                    
-                    <div>
-                        <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
-                        <input type="email" id="email" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white">
-                    </div>
-                    
-                    <div>
-                        <label for="address" class="block text-sm font-medium text-gray-300 mb-1">Shipping Address</label>
-                        <textarea id="address" rows="3" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white"></textarea>
-                    </div>
-                    
-                    <div>
-                        <label for="card-number" class="block text-sm font-medium text-gray-300 mb-1">Card Number</label>
-                        <input type="text" id="card-number" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white" placeholder="4242 4242 4242 4242">
-                    </div>
-                    
-                    <div class="grid grid-cols-2 gap-4">
-                        <div>
-                            <label for="expiry" class="block text-sm font-medium text-gray-300 mb-1">Expiry Date</label>
-                            <input type="text" id="expiry" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white" placeholder="MM/YY">
-                        </div>
-                        <div>
-                            <label for="cvc" class="block text-sm font-medium text-gray-300 mb-1">CVC</label>
-                            <input type="text" id="cvc" required class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white" placeholder="123">
-                        </div>
-                    </div>
-                    
-                    <div class="pt-4">
-                        <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
-                            Complete Purchase
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-
-    <!-- Order Confirmation Modal -->
-    <div id="confirmation-modal" class="checkout-modal fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-30">
-        <div class="bg-gray-800 rounded-lg shadow-xl w-full max-w-md mx-4">
-            <div class="p-6 text-center">
-                <div class="text-purple-400 text-6xl mb-4">
-                    <i class="fas fa-check-circle"></i>
-                </div>
-                <h2 class="text-2xl font-bold text-white mb-2">Order Confirmed!</h2>
-                <p class="text-gray-300 mb-6">Thank you for your purchase. Your sacred remedies will be prepared with intention and shipped within 2-3 business days.</p>
-                <button id="close-confirmation" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">
-                    Continue Journey
-                </button>
-            </div>
-        </div>
-    </div>
-
     <!-- Hero Section -->
     <section id="home" class="hero-bg min-h-screen flex items-center justify-center pt-16">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
@@ -371,18 +318,18 @@
             
             <div class="grid md:grid-cols-2 gap-12">
                 <div>
-                    <form class="space-y-6">
+                    <form id="contact-form" class="space-y-6">
                         <div>
-                            <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label>
-                            <input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white">
+                            <label for="contact-name" class="block text-sm font-medium text-gray-300 mb-1">Name *</label>
+                            <input type="text" id="contact-name" name="name" required class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white">
                         </div>
                         <div>
-                            <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
-                            <input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white">
+                            <label for="contact-email" class="block text-sm font-medium text-gray-300 mb-1">Email *</label>
+                            <input type="email" id="contact-email" name="email" required class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white">
                         </div>
                         <div>
-                            <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label>
-                            <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white"></textarea>
+                            <label for="contact-message" class="block text-sm font-medium text-gray-300 mb-1">Message *</label>
+                            <textarea id="contact-message" name="message" rows="5" required class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-purple-500 focus:border-purple-500 text-white"></textarea>
                         </div>
                         <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
                             Send Message
@@ -486,6 +433,170 @@
         </div>
     </footer>
 
+    <!-- Checkout Page (hidden by default) -->
+    <div id="checkout-page" class="hidden fixed inset-0 bg-gray-900 bg-opacity-90 z-30 overflow-y-auto">
+        <div class="checkout-container bg-gray-800 rounded-lg shadow-2xl my-12">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-3xl font-bold text-purple-300 flex items-center">
+                    <i class="fas fa-leaf leaf-logo mr-3"></i>
+                    Secure Checkout
+                </h2>
+                <button id="close-checkout" class="text-gray-400 hover:text-white text-2xl">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            
+            <div class="grid md:grid-cols-2 gap-8">
+                <!-- Order Summary -->
+                <div class="bg-gray-700 p-6 rounded-lg">
+                    <h3 class="text-xl font-bold text-white mb-6 border-b border-gray-600 pb-2">Order Summary</h3>
+                    <div id="checkout-items" class="space-y-4 mb-6">
+                        <!-- Items will be dynamically inserted here -->
+                    </div>
+                    <div class="border-t border-gray-600 pt-4 space-y-3">
+                        <div class="flex justify-between">
+                            <span class="text-gray-300">Subtotal</span>
+                            <span id="checkout-subtotal" class="text-white font-bold">$0.00</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-300">Shipping</span>
+                            <span class="text-white font-bold">Free</span>
+                        </div>
+                        <div class="flex justify-between text-lg pt-2">
+                            <span class="text-gray-300">Total</span>
+                            <span id="checkout-total" class="text-purple-300 font-bold">$0.00</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Payment Information -->
+                <div>
+                    <h3 class="text-xl font-bold text-white mb-6 border-b border-gray-600 pb-2">Payment Information</h3>
+                    
+                    <div class="mb-6">
+                        <label class="block text-gray-300 mb-2">Payment Method</label>
+                        <div class="space-y-3">
+                            <div class="payment-method" data-method="credit">
+                                <div class="flex items-center">
+                                    <input type="radio" name="payment-method" id="credit-card" class="mr-3" checked>
+                                    <label for="credit-card" class="font-medium text-white">Credit Card</label>
+                                </div>
+                                <div class="mt-3 ml-6">
+                                    <div class="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <label for="card-number" class="block text-sm text-gray-400 mb-1">Card Number</label>
+                                            <input type="text" id="card-number" placeholder="1234 5678 9012 3456" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                                        </div>
+                                        <div>
+                                            <label for="card-cvc" class="block text-sm text-gray-400 mb-1">CVC</label>
+                                            <input type="text" id="card-cvc" placeholder="123" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                                        </div>
+                                    </div>
+                                    <div class="grid grid-cols-2 gap-4 mt-3">
+                                        <div>
+                                            <label for="card-expiry" class="block text-sm text-gray-400 mb-1">Expiry Date</label>
+                                            <input type="text" id="card-expiry" placeholder="MM/YY" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                                        </div>
+                                        <div>
+                                            <label for="card-name" class="block text-sm text-gray-400 mb-1">Name on Card</label>
+                                            <input type="text" id="card-name" placeholder="John Doe" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="payment-method" data-method="paypal">
+                                <div class="flex items-center">
+                                    <input type="radio" name="payment-method" id="paypal" class="mr-3">
+                                    <label for="paypal" class="font-medium text-white">PayPal</label>
+                                </div>
+                                <div class="mt-3 ml-6 text-sm text-gray-400">
+                                    You'll be redirected to PayPal to complete your payment securely.
+                                </div>
+                            </div>
+                            
+                            <div class="payment-method" data-method="crypto">
+                                <div class="flex items-center">
+                                    <input type="radio" name="payment-method" id="crypto" class="mr-3">
+                                    <label for="crypto" class="font-medium text-white">Cryptocurrency</label>
+                                </div>
+                                <div class="mt-3 ml-6 text-sm text-gray-400">
+                                    Select from Bitcoin, Ethereum, or other cryptocurrencies.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Shipping Information -->
+                    <h3 class="text-xl font-bold text-white mb-4 border-b border-gray-600 pb-2">Shipping Information</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label for="shipping-name" class="block text-sm text-gray-400 mb-1">Full Name</label>
+                            <input type="text" id="shipping-name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                        </div>
+                        <div>
+                            <label for="shipping-address" class="block text-sm text-gray-400 mb-1">Address</label>
+                            <input type="text" id="shipping-address" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label for="shipping-city" class="block text-sm text-gray-400 mb-1">City</label>
+                                <input type="text" id="shipping-city" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                            </div>
+                            <div>
+                                <label for="shipping-zip" class="block text-sm text-gray-400 mb-1">ZIP Code</label>
+                                <input type="text" id="shipping-zip" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                            </div>
+                        </div>
+                        <div>
+                            <label for="shipping-country" class="block text-sm text-gray-400 mb-1">Country</label>
+                            <select id="shipping-country" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:ring-purple-500 focus:border-purple-500 text-white">
+                                <option>United States</option>
+                                <option>Canada</option>
+                                <option>United Kingdom</option>
+                                <option>Australia</option>
+                                <option>Other</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <!-- Terms and Submit -->
+                    <div class="mt-8 space-y-4">
+                        <div class="flex items-start">
+                            <input type="checkbox" id="terms" class="mt-1 mr-3">
+                            <label for="terms" class="text-sm text-gray-400">
+                                I agree to the <a href="#" class="text-purple-400 hover:text-purple-300">Terms of Service</a> and <a href="#" class="text-purple-400 hover:text-purple-300">Privacy Policy</a>. I understand that these products are for spiritual and wellness purposes only.
+                            </label>
+                        </div>
+                        <button id="submit-order" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
+                            Complete Sacred Purchase
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Payment Success Modal -->
+    <div id="payment-success" class="hidden fixed inset-0 bg-gray-900 bg-opacity-90 z-40 flex items-center justify-center">
+        <div class="bg-gray-800 rounded-lg shadow-2xl p-8 max-w-md text-center">
+            <div class="text-green-400 text-6xl mb-6">
+                <i class="fas fa-check-circle"></i>
+            </div>
+            <h2 class="text-2xl font-bold text-white mb-4">Payment Successful!</h2>
+            <p class="text-gray-300 mb-6">
+                Thank you for your sacred purchase. Your order has been confirmed and will be prepared with intention.
+            </p>
+            <div class="text-purple-400 text-sm mb-6">
+                <p>Order #: <span id="order-number" class="text-white">PSY-2023-12345</span></p>
+                <p>Estimated Delivery: <span class="text-white">3-5 business days</span></p>
+            </div>
+            <button id="close-success" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">
+                Return to Shop
+            </button>
+        </div>
+    </div>
+
     <script>
         // Cart functionality
         let cart = [];
@@ -502,11 +613,16 @@
         const mobileCartBadge = document.getElementById('mobile-cart-badge');
         const addToCartButtons = document.querySelectorAll('.add-to-cart');
         const checkoutButton = document.getElementById('checkout-button');
-        const checkoutModal = document.getElementById('checkout-modal');
+        
+        // Checkout elements
+        const checkoutPage = document.getElementById('checkout-page');
         const closeCheckout = document.getElementById('close-checkout');
-        const checkoutForm = document.getElementById('checkout-form');
-        const confirmationModal = document.getElementById('confirmation-modal');
-        const closeConfirmation = document.getElementById('close-confirmation');
+        const checkoutItems = document.getElementById('checkout-items');
+        const checkoutSubtotal = document.getElementById('checkout-subtotal');
+        const checkoutTotal = document.getElementById('checkout-total');
+        const submitOrder = document.getElementById('submit-order');
+        const paymentSuccess = document.getElementById('payment-success');
+        const closeSuccess = document.getElementById('close-success');
         
         // Toggle cart panel
         function toggleCart() {
@@ -598,7 +714,7 @@
                 // Add event listeners to quantity buttons
                 document.querySelectorAll('.decrease-quantity').forEach(button => {
                     button.addEventListener('click', (e) => {
-                        const id = e.target.closest('button').getAttribute('data-id');
+                        const id = button.getAttribute('data-id');
                         const item = cart.find(item => item.id === id);
                         
                         if (item.quantity > 1) {
@@ -613,7 +729,7 @@
                 
                 document.querySelectorAll('.increase-quantity').forEach(button => {
                     button.addEventListener('click', (e) => {
-                        const id = e.target.closest('button').getAttribute('data-id');
+                        const id = button.getAttribute('data-id');
                         const item = cart.find(item => item.id === id);
                         item.quantity += 1;
                         updateCart();
@@ -622,7 +738,7 @@
                 
                 document.querySelectorAll('.remove-item').forEach(button => {
                     button.addEventListener('click', (e) => {
-                        const id = e.target.closest('button').getAttribute('data-id');
+                        const id = button.getAttribute('data-id');
                         cart = cart.filter(item => item.id !== id);
                         updateCart();
                     });
@@ -650,31 +766,88 @@
         // Checkout functionality
         checkoutButton.addEventListener('click', () => {
             if (cart.length > 0) {
-                toggleCart();
-                checkoutModal.classList.add('open');
+                // Show checkout page
+                checkoutPage.classList.remove('hidden');
+                
+                // Populate checkout items
+                checkoutItems.innerHTML = '';
+                cart.forEach(item => {
+                    const checkoutItem = document.createElement('div');
+                    checkoutItem.className = 'flex justify-between items-center';
+                    checkoutItem.innerHTML = `
+                        <div>
+                            <h4 class="font-medium text-white">${item.name}</h4>
+                            <p class="text-purple-400">$${item.price.toFixed(2)} × ${item.quantity}</p>
+                        </div>
+                        <span class="text-white font-bold">$${(item.price * item.quantity).toFixed(2)}</span>
+                    `;
+                    checkoutItems.appendChild(checkoutItem);
+                });
+                
+                // Update checkout totals
+                const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+                checkoutSubtotal.textContent = `$${subtotal.toFixed(2)}`;
+                checkoutTotal.textContent = `$${subtotal.toFixed(2)}`;
+                
+                // Close cart if open
+                if (cartPanel.classList.contains('open')) {
+                    cartPanel.classList.remove('open');
+                }
+            } else {
+                alert('Your cart is empty. Please add items before checkout.');
             }
         });
         
+        // Close checkout
         closeCheckout.addEventListener('click', () => {
-            checkoutModal.classList.remove('open');
+            checkoutPage.classList.add('hidden');
         });
         
-        checkoutForm.addEventListener('submit', (e) => {
-            e.preventDefault();
+        // Payment method selection
+        document.querySelectorAll('.payment-method').forEach(method => {
+            method.addEventListener('click', (e) => {
+                // Don't toggle if clicking on input directly
+                if (e.target.tagName !== 'INPUT') {
+                    const radio = method.querySelector('input[type="radio"]');
+                    radio.checked = true;
+                    
+                    // Update styling
+                    document.querySelectorAll('.payment-method').forEach(m => {
+                        m.classList.remove('selected');
+                    });
+                    method.classList.add('selected');
+                }
+            });
+        });
+        
+        // Submit order
+        submitOrder.addEventListener('click', () => {
+            // Simple validation
+            const termsChecked = document.getElementById('terms').checked;
+            if (!termsChecked) {
+                alert('Please agree to the terms and conditions');
+                return;
+            }
+            
+            // Here you would normally send the order to your backend
+            // For this demo, we'll just show the success message
             
-            // Here you would typically send the order to your backend
-            // For this demo, we'll just show a confirmation
+            // Generate random order number
+            const orderNumber = 'PSY-' + new Date().getFullYear() + '-' + Math.floor(10000 + Math.random() * 90000);
+            document.getElementById('order-number').textContent = orderNumber;
             
-            checkoutModal.classList.remove('open');
-            confirmationModal.classList.add('open');
+            // Hide checkout and show success
+            checkoutPage.classList.add('hidden');
+            paymentSuccess.classList.remove('hidden');
             
-            // Clear the cart
+            // Clear cart
             cart = [];
             updateCart();
         });
         
-        closeConfirmation.addEventListener('click', () => {
-            confirmationModal.classList.remove('open');
+        // Close success modal
+        closeSuccess.addEventListener('click', () => {
+            paymentSuccess.classList.add('hidden');
         });
         
         // Mobile menu toggle

prompts.txt

@@ -1 +1,4 @@
-let's work on the checkout and cart function
+let's work on the checkout and cart function
+let's do some php and mysql for the forms and product. set other payment methods and form validation
+fix the payment authenticator and create a separate page for checkout
+Add an Leaf ICON logo