Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PsycheBotanica | Homeopathic Psychedelics</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-bg { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), | |
| url('https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #9f7aea; | |
| transition: width .3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .active::after { | |
| width: 100%; | |
| } | |
| .cart-panel { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .cart-panel.open { | |
| transform: translateX(0); | |
| } | |
| .cart-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background-color: #9f7aea; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| .leaf-logo { | |
| color: #9f7aea; | |
| font-size: 1.75rem; | |
| margin-right: 0.5rem; | |
| } | |
| .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> | |
| <body class="bg-gray-900 text-gray-100 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 bg-opacity-90 fixed w-full z-10"> | |
| <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 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"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#home" class="nav-link active px-3 py-2 rounded-md text-sm font-medium text-white">Home</a> | |
| <a href="#about" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">About</a> | |
| <a href="#shop" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Shop</a> | |
| <a href="#contact" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button id="cart-button" class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none relative"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span id="cart-badge" class="cart-badge hidden">0</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="mobile-menu hidden md:hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Home</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">About</a> | |
| <a href="#shop" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Shop</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a> | |
| <button id="mobile-cart-button" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700"> | |
| <i class="fas fa-shopping-cart mr-2"></i>Cart | |
| <span id="mobile-cart-badge" class="cart-badge hidden">0</span> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Cart Panel --> | |
| <div id="cart-panel" class="cart-panel fixed top-0 right-0 h-full w-full md:w-96 bg-gray-800 shadow-xl z-20 overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-purple-300">Your Sacred Cart</h2> | |
| <button id="close-cart" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="space-y-4 mb-6"> | |
| <!-- Cart items will be dynamically inserted here --> | |
| <div class="text-center py-10 text-gray-400"> | |
| <i class="fas fa-shopping-cart text-4xl mb-3"></i> | |
| <p>Your cart is empty</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-4"> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-gray-300">Subtotal</span> | |
| <span id="cart-subtotal" class="text-white font-bold">$0.00</span> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-gray-300">Shipping</span> | |
| <span class="text-white font-bold">Free</span> | |
| </div> | |
| <div class="flex justify-between text-lg"> | |
| <span class="text-gray-300">Total</span> | |
| <span id="cart-total" class="text-purple-300 font-bold">$0.00</span> | |
| </div> | |
| <button id="checkout-button" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full mt-6 transition duration-300"> | |
| Proceed to Checkout | |
| </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"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 text-purple-300">Sacred Plant Alchemy</h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-3xl mx-auto"> | |
| Experience the healing power of nature with our premium homeopathic psychedelic formulations. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#shop" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> | |
| Explore Products | |
| </a> | |
| <a href="#about" class="bg-transparent hover:bg-gray-800 text-white font-bold py-3 px-6 border border-purple-500 rounded-full transition duration-300"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-300 mb-4">Our Philosophy</h2> | |
| <div class="w-24 h-1 bg-purple-500 mx-auto mb-8"></div> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> | |
| At PsycheBotanica, we believe in the sacred relationship between plants and consciousness. Our remedies are crafted with intention, honoring ancient wisdom while incorporating modern homeopathic techniques. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-10"> | |
| <div class="bg-gray-700 p-8 rounded-lg shadow-lg"> | |
| <div class="text-purple-400 text-4xl mb-4"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Plant Wisdom</h3> | |
| <p class="text-gray-300"> | |
| Our formulations are derived from time-honored plant medicines, carefully selected for their consciousness-expanding properties. | |
| </p> | |
| </div> | |
| <div class="bg-gray-700 p-8 rounded-lg shadow-lg"> | |
| <div class="text-purple-400 text-4xl mb-4"> | |
| <i class="fas fa-mortar-pestle"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Sacred Preparation</h3> | |
| <p class="text-gray-300"> | |
| Each remedy is prepared during auspicious lunar phases, with ceremonial intention to maximize energetic potency. | |
| </p> | |
| </div> | |
| <div class="bg-gray-700 p-8 rounded-lg shadow-lg"> | |
| <div class="text-purple-400 text-4xl mb-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Holistic Healing</h3> | |
| <p class="text-gray-300"> | |
| We approach healing from a multidimensional perspective, addressing body, mind, and spirit in harmony. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Shop Section --> | |
| <section id="shop" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-300 mb-4">Sacred Remedies</h2> | |
| <div class="w-24 h-1 bg-purple-500 mx-auto mb-8"></div> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> | |
| Explore our collection of carefully crafted homeopathic psychedelic formulations. Each product is designed to support your journey of self-discovery. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300"> | |
| <div class="h-64 bg-purple-900 flex items-center justify-center"> | |
| <i class="fas fa-moon text-6xl text-purple-300"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-white mb-2">Luminous Mind Tincture</h3> | |
| <p class="text-purple-400 mb-4">Homeopathic Psilocybin 30C</p> | |
| <p class="text-gray-300 mb-4"> | |
| A gentle yet profound formula for enhancing creativity and dissolving mental barriers. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xl font-bold text-white">$49.99</span> | |
| <button data-id="1" data-name="Luminous Mind Tincture" data-price="49.99" class="add-to-cart bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-full transition duration-300"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300"> | |
| <div class="h-64 bg-indigo-900 flex items-center justify-center"> | |
| <i class="fas fa-eye text-6xl text-indigo-300"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-white mb-2">Visionary Heart Elixir</h3> | |
| <p class="text-purple-400 mb-4">Homeopathic Ayahuasca 30C</p> | |
| <p class="text-gray-300 mb-4"> | |
| Supports emotional healing and heart opening with gentle visionary properties. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xl font-bold text-white">$59.99</span> | |
| <button data-id="2" data-name="Visionary Heart Elixir" data-price="59.99" class="add-to-cart bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-full transition duration-300"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300"> | |
| <div class="h-64 bg-green-900 flex items-center justify-center"> | |
| <i class="fas fa-spa text-6xl text-green-300"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-white mb-2">Spirit Vine Essence</h3> | |
| <p class="text-purple-400 mb-4">Homeopathic DMT 30C</p> | |
| <p class="text-gray-300 mb-4"> | |
| A subtle yet powerful formula for spiritual connection and dream enhancement. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xl font-bold text-white">$54.99</span> | |
| <button data-id="3" data-name="Spirit Vine Essence" data-price="54.99" class="add-to-cart bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-full transition duration-300"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-300 mb-4">Connect With Us</h2> | |
| <div class="w-24 h-1 bg-purple-500 mx-auto mb-8"></div> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto"> | |
| Have questions about our products or philosophy? Reach out to our team of plant medicine advocates. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <form id="contact-form" class="space-y-6"> | |
| <div> | |
| <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="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="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 | |
| </button> | |
| </form> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-purple-400 text-2xl mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-1">Location</h3> | |
| <p class="text-gray-300">123 Sacred Grove Lane<br>Sedona, AZ 86336</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-purple-400 text-2xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-1">Email</h3> | |
| <p class="text-gray-300">contact@psychebotanica.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-purple-400 text-2xl mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-1">Phone</h3> | |
| <p class="text-gray-300">(555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <h3 class="text-lg font-bold text-white mb-3">Follow Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 text-2xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 text-2xl"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold text-purple-300 mb-4">PsycheBotanica</h3> | |
| <p class="text-gray-400"> | |
| Sacred plant alchemy for modern consciousness. Our homeopathic psychedelic formulations are designed to support your journey of self-discovery and healing. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-purple-300 mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li> | |
| <li><a href="#shop" class="text-gray-400 hover:text-white transition duration-300">Shop</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-purple-300 mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Subscribe to receive updates on new products and sacred wisdom.</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-1 focus:ring-purple-500 w-full"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 rounded-r-lg transition duration-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0"> | |
| © 2023 PsycheBotanica. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Shipping Policy</a> | |
| </div> | |
| </div> | |
| </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 = []; | |
| // DOM elements | |
| const cartButton = document.getElementById('cart-button'); | |
| const mobileCartButton = document.getElementById('mobile-cart-button'); | |
| const cartPanel = document.getElementById('cart-panel'); | |
| const closeCart = document.getElementById('close-cart'); | |
| const cartItems = document.getElementById('cart-items'); | |
| const cartSubtotal = document.getElementById('cart-subtotal'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| const cartBadge = document.getElementById('cart-badge'); | |
| const mobileCartBadge = document.getElementById('mobile-cart-badge'); | |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); | |
| const checkoutButton = document.getElementById('checkout-button'); | |
| // Checkout elements | |
| const checkoutPage = document.getElementById('checkout-page'); | |
| const closeCheckout = document.getElementById('close-checkout'); | |
| 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() { | |
| cartPanel.classList.toggle('open'); | |
| } | |
| cartButton.addEventListener('click', toggleCart); | |
| mobileCartButton.addEventListener('click', toggleCart); | |
| closeCart.addEventListener('click', toggleCart); | |
| // Add to cart functionality | |
| addToCartButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const id = button.getAttribute('data-id'); | |
| const name = button.getAttribute('data-name'); | |
| const price = parseFloat(button.getAttribute('data-price')); | |
| // Check if item already in cart | |
| const existingItem = cart.find(item => item.id === id); | |
| if (existingItem) { | |
| existingItem.quantity += 1; | |
| } else { | |
| cart.push({ | |
| id, | |
| name, | |
| price, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCart(); | |
| toggleCart(); | |
| // Show notification | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| notification.innerHTML = ` | |
| <i class="fas fa-check-circle mr-2"></i> | |
| ${name} added to cart | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.style.opacity = '0'; | |
| setTimeout(() => { | |
| document.body.removeChild(notification); | |
| }, 300); | |
| }, 2000); | |
| }); | |
| }); | |
| // Update cart display | |
| function updateCart() { | |
| // Update cart items | |
| if (cart.length === 0) { | |
| cartItems.innerHTML = ` | |
| <div class="text-center py-10 text-gray-400"> | |
| <i class="fas fa-shopping-cart text-4xl mb-3"></i> | |
| <p>Your cart is empty</p> | |
| </div> | |
| `; | |
| } else { | |
| cartItems.innerHTML = ''; | |
| cart.forEach(item => { | |
| const cartItem = document.createElement('div'); | |
| cartItem.className = 'bg-gray-700 p-4 rounded-lg flex justify-between items-center'; | |
| cartItem.innerHTML = ` | |
| <div> | |
| <h4 class="font-medium text-white">${item.name}</h4> | |
| <p class="text-purple-400">$${item.price.toFixed(2)}</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="decrease-quantity text-gray-400 hover:text-white px-2" data-id="${item.id}"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <span class="mx-2 text-white">${item.quantity}</span> | |
| <button class="increase-quantity text-gray-400 hover:text-white px-2" data-id="${item.id}"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <button class="remove-item text-red-400 hover:text-red-300 ml-4" data-id="${item.id}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| cartItems.appendChild(cartItem); | |
| }); | |
| // Add event listeners to quantity buttons | |
| document.querySelectorAll('.decrease-quantity').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const id = button.getAttribute('data-id'); | |
| const item = cart.find(item => item.id === id); | |
| if (item.quantity > 1) { | |
| item.quantity -= 1; | |
| } else { | |
| cart = cart.filter(item => item.id !== id); | |
| } | |
| updateCart(); | |
| }); | |
| }); | |
| document.querySelectorAll('.increase-quantity').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const id = button.getAttribute('data-id'); | |
| const item = cart.find(item => item.id === id); | |
| item.quantity += 1; | |
| updateCart(); | |
| }); | |
| }); | |
| document.querySelectorAll('.remove-item').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const id = button.getAttribute('data-id'); | |
| cart = cart.filter(item => item.id !== id); | |
| updateCart(); | |
| }); | |
| }); | |
| } | |
| // Update totals | |
| const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| cartSubtotal.textContent = `$${subtotal.toFixed(2)}`; | |
| cartTotal.textContent = `$${subtotal.toFixed(2)}`; | |
| // Update badge | |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| if (totalItems > 0) { | |
| cartBadge.textContent = totalItems; | |
| cartBadge.classList.remove('hidden'); | |
| mobileCartBadge.textContent = totalItems; | |
| mobileCartBadge.classList.remove('hidden'); | |
| } else { | |
| cartBadge.classList.add('hidden'); | |
| mobileCartBadge.classList.add('hidden'); | |
| } | |
| } | |
| // Checkout functionality | |
| checkoutButton.addEventListener('click', () => { | |
| if (cart.length > 0) { | |
| // 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', () => { | |
| checkoutPage.classList.add('hidden'); | |
| }); | |
| // 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 | |
| // Generate random order number | |
| const orderNumber = 'PSY-' + new Date().getFullYear() + '-' + Math.floor(10000 + Math.random() * 90000); | |
| document.getElementById('order-number').textContent = orderNumber; | |
| // Hide checkout and show success | |
| checkoutPage.classList.add('hidden'); | |
| paymentSuccess.classList.remove('hidden'); | |
| // Clear cart | |
| cart = []; | |
| updateCart(); | |
| }); | |
| // Close success modal | |
| closeSuccess.addEventListener('click', () => { | |
| paymentSuccess.classList.add('hidden'); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| // Update active nav link | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active'); | |
| link.classList.add('text-gray-300'); | |
| }); | |
| this.classList.add('active'); | |
| this.classList.remove('text-gray-300'); | |
| // Scroll to section | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 70, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Update active nav link on scroll | |
| window.addEventListener('scroll', () => { | |
| const scrollPosition = window.scrollY + 70; | |
| document.querySelectorAll('section').forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.offsetHeight; | |
| const sectionId = section.getAttribute('id'); | |
| if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active'); | |
| link.classList.add('text-gray-300'); | |
| if (link.getAttribute('href') === `#${sectionId}`) { | |
| link.classList.add('active'); | |
| link.classList.remove('text-gray-300'); | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=webcrow/trippyworld" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |