Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>KENMUS CHINA IMPORT</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1E3A8A', // Deep Blue | |
| secondary: '#F59E0B', // Amber | |
| accent: '#10B981', // Green | |
| }, | |
| }, | |
| }, | |
| }; | |
| </script> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800 font-sans"> | |
| <!-- WhatsApp Floating Button --> | |
| <a href="https://wa.me/233123456789" target="_blank" class="fixed bottom-5 right-5 bg-green-500 text-white p-3 rounded-full shadow-lg hover:bg-green-600 z-50"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12c0 2.11.54 4.125 1.513 5.904L0 24l6.243-1.633c1.777.968 3.79 1.498 5.907 1.498 6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22.222c-5.65 0-10.222-4.573-10.222-10.222S6.35 1.778 12 1.778 22.222 6.35 22.222 12 17.65 22.222 12 22.222z"/><path d="M16.695 11.057c-.315-.158-1.76-.867-2.032-.96-1.125-.405-1.995-.07-2.79.63-2.34 2.07-2.835 3.51-3.195 4.365-.158.36-.045.54.45 1.035.288.288.585.45.832.45.225 0 2.34-.9 4.59-2.835.405-.36.675-.72.765-1.08.09-.315-.225-.585-.495-.855-.27-.27-.54-.63-.81-.945-.27-.315-.405-.495-.63-.495-.225 0-.855.36-1.62.99-.45.36-.945.855-.99.9-.045.045-.36.54-.27 1.035.09.495.675 1.71 1.53 2.475.855.765 1.62.855 2.025.855.315 0 .81-.135 1.17-.5s2.565-2.52 2.835-3.24c.27-.72.135-1.35.09-1.53z"/></svg> | |
| </a> | |
| <!-- Header --> | |
| <header class="bg-primary text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold">KENMUS</h1> | |
| <nav class="space-x-4 hidden md:flex"> | |
| <a href="#home" class="hover:underline">Home</a> | |
| <a href="#categories" class="hover:underline">Categories</a> | |
| <a href="#preorder" class="hover:underline">Pre-Order</a> | |
| <a href="#buyforme" class="hover:underline">Buy for Me</a> | |
| <a href="#dashboard" class="hover:underline">Dashboard</a> | |
| <a href="#contact" class="hover:underline">Contact</a> | |
| </nav> | |
| <button id="menuBtn" class="md:hidden text-white focus:outline-none"> | |
| ☰ | |
| </button> | |
| </div> | |
| <div id="mobileMenu" class="md:hidden hidden bg-primary px-4 py-2 space-y-2"> | |
| <a href="#home" class="block hover:underline">Home</a> | |
| <a href="#categories" class="block hover:underline">Categories</a> | |
| <a href="#preorder" class="block hover:underline">Pre-Order</a> | |
| <a href="#buyforme" class="block hover:underline">Buy for Me</a> | |
| <a href="#dashboard" class="block hover:underline">Dashboard</a> | |
| <a href="#contact" class="block hover:underline">Contact</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="bg-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl font-bold mb-4 text-primary">Fast & Trusted China Import Service</h2> | |
| <p class="text-lg mb-6">From China to Ghana – We handle the sourcing, shipping & customs for you.</p> | |
| <button onclick="document.getElementById('buyforme').scrollIntoView({ behavior: 'smooth' })" class="bg-secondary text-white px-6 py-2 rounded hover:bg-amber-600 transition"> | |
| Upload Product Now | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Search & Categories --> | |
| <section id="categories" class="bg-gray-50 py-10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-primary">Browse Products</h3> | |
| <div class="relative mt-2 md:mt-0"> | |
| <input type="text" placeholder="Search products..." class="w-full md:w-64 border border-gray-300 rounded px-4 py-2" /> | |
| <button class="absolute right-2 top-2 text-gray-500"> | |
| 🔍 | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-4 justify-center"> | |
| <span class="bg-secondary text-white px-4 py-2 rounded-full">Electronics</span> | |
| <span class="bg-secondary text-white px-4 py-2 rounded-full">Fashion</span> | |
| <span class="bg-secondary text-white px-4 py-2 rounded-full">Home & Garden</span> | |
| <span class="bg-secondary text-white px-4 py-2 rounded-full">Toys & Hobbies</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Buy for Me Section --> | |
| <section id="buyforme" class="bg-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Buy for Me</h3> | |
| <p class="mb-6">Upload a product image and description for us to source for you.</p> | |
| <form class="bg-gray-50 p-6 rounded shadow space-y-4"> | |
| <input type="text" placeholder="Product Description" class="w-full border p-2 rounded" required /> | |
| <input type="file" accept="image/*" class="w-full border p-2 rounded" required /> | |
| <button type="submit" class="bg-primary text-white px-4 py-2 rounded hover:bg-blue-800">Submit Request</button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Pre-Order Section --> | |
| <section id="preorder" class="bg-gray-50 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Pre-Order Products</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <img src="https://via.placeholder.com/300" alt="Product" class="w-full h-40 object-cover mb-4 rounded" /> | |
| <h4 class="font-semibold">Smartphone X Pro</h4> | |
| <p class="text-sm text-gray-600 mb-2">Latest model from China with 128GB storage.</p> | |
| <p class="font-bold text-primary">₵ 850</p> | |
| <button onclick="alert('Order placed! WhatsApp updates coming soon.')" class="mt-2 bg-secondary text-white px-4 py-1 rounded hover:bg-amber-600">Order Now</button> | |
| </div> | |
| <div class="bg-white p-4 rounded shadow"> | |
| <img src="https://via.placeholder.com/300" alt="Product" class="w-full h-40 object-cover mb-4 rounded" /> | |
| <h4 class="font-semibold">Wireless Earbuds</h4> | |
| <p class="text-sm text-gray-600 mb-2">Noise-cancelling, 20h playtime, Bluetooth 5.0.</p> | |
| <p class="font-bold text-primary">₵ 250</p> | |
| <button onclick="alert('Order placed! WhatsApp updates coming soon.')" class="mt-2 bg-secondary text-white px-4 py-1 rounded hover:bg-amber-600">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Order Compilation --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Paid Users per Product</h3> | |
| <div class="bg-gray-100 p-6 rounded shadow"> | |
| <h4 class="font-semibold mb-2">Smartphone X Pro</h4> | |
| <ul class="list-disc list-inside space-y-1 text-sm"> | |
| <li>Kwame Mensah - Paid</li> | |
| <li>Abena Boateng - Paid</li> | |
| <li>Esi Owusu - Pending</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Customer Dashboard --> | |
| <section id="dashboard" class="bg-gray-50 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Customer Dashboard</h3> | |
| <div class="bg-white p-6 rounded shadow"> | |
| <h4 class="font-semibold mb-2">Order History</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex justify-between border-b pb-2"> | |
| <span>Smartphone X Pro</span> | |
| <span class="text-green-600">Paid</span> | |
| </li> | |
| <li class="flex justify-between border-b pb-2"> | |
| <span>Wireless Earbuds</span> | |
| <span class="text-yellow-600">Processing</span> | |
| </li> | |
| </ul> | |
| <button onclick="alert('Redirecting to Stripe...')" class="mt-4 bg-primary text-white px-4 py-2 rounded hover:bg-blue-800">Make Payment</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Admin Dashboard (Mock) --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-2xl font-bold mb-4 text-primary">Admin Dashboard (Mock)</h3> | |
| <div class="bg-gray-100 p-6 rounded shadow"> | |
| <p class="mb-4">Admin can manage users, orders, and payment status here.</p> | |
| <ul class="space-y-2"> | |
| <li class="flex justify-between"> | |
| <span>User: Kwame Mensah</span> | |
| <span>Order: Smartphone X Pro</span> | |
| <span class="text-green-600">Paid</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>User: Ama Kofi</span> | |
| <span>Order: Wireless Earbuds</span> | |
| <span class="text-red-600">Pending</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- WhatsApp Communication --> | |
| <section id="contact" class="bg-primary text-white py-12"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Get Instant Updates via WhatsApp</h3> | |
| <p class="mb-6">We send real-time updates about your orders on WhatsApp.</p> | |
| <a href="https://wa.me/233123456789" target="_blank" class="bg-green-500 hover:bg-green-600 px-6 py-2 rounded text-white font-semibold inline-block"> | |
| Chat with Us on WhatsApp | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-6"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>© 2025 KENMUS CHINA IMPORT. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu Script --> | |
| <script> | |
| const menuBtn = document.getElementById('menuBtn'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| </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-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=Kenmus/kenmus-china-import" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |