Hugging Face's logo

Spaces:
Kenmus
/
kenmus-global-buy
Running

App Files Community
kenmus-global-buy / index.html
Kenmus's picture
Kenmus
apart from the ones admin will upload and the products from temu the rest indicate excluded shipping. users can see estimated shipping fee by selecting the mode of transportation either by sea or air. if by see use the kg of the product and the rate per kg input by the admin to calculate and if by sea use the l*b*h to calculate the shipping fee by using the rate per cubic meter input by the admin - Initial Deployment
109f17e verified
raw
history blame contribute delete
43.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Buy - Pre-Order & Buy For Me Service</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>
.gradient-bg {
background: linear-gradient(135deg, #6B46C1 0%, #3182CE 100%);
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.platform-tab.active {
border-bottom: 3px solid #6B46C1;
color: #6B46C1;
}
.admin-panel {
display: none;
}
.show-admin {
display: block;
}
.countdown {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-globe text-2xl"></i>
<h1 class="text-2xl font-bold">Kenmus Global Buy</h1>
</div>
<div class="hidden md:flex space-x-6 items-center">
<a href="#home" class="hover:text-gray-200">Home</a>
<a href="#products" class="hover:text-gray-200">Products</a>
<a href="#how-it-works" class="hover:text-gray-200">How It Works</a>
<a href="#contact" class="hover:text-gray-200">Contact</a>
<button id="adminToggle" class="bg-white text-purple-700 px-4 py-2 rounded-full font-semibold hover:bg-gray-100">Admin</button>
</div>
<button class="md:hidden text-2xl" id="mobileMenuButton">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden bg-white text-gray-800 py-4 px-4 shadow-lg">
<div class="flex flex-col space-y-3">
<a href="#home" class="hover:text-purple-700">Home</a>
<a href="#products" class="hover:text-purple-700">Products</a>
<a href="#how-it-works" class="hover:text-purple-700">How It Works</a>
<a href="#contact" class="hover:text-purple-700">Contact</a>
<button id="adminToggleMobile" class="text-left hover:text-purple-700">Admin Panel</button>
</div>
</div>
</header>
<!-- Main Content -->
<main>
<!-- User View -->
<div id="userView">
<!-- Hero Section -->
<section id="home" class="gradient-bg text-white py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Shop Globally, Pay Locally</h1>
<p class="text-xl mb-8">Access millions of products from 1688, Alibaba, Taobao and Temu with our pre-order and buy-for-me service.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#products" class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold text-center hover:bg-gray-100">Browse Products</a>
<a href="#how-it-works" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-white hover:text-purple-700">How It Works</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Global Shopping" class="rounded-lg shadow-2xl max-w-full h-auto">
</div>
</div>
</div>
</section>
<!-- Platform Tabs -->
<section class="bg-white py-8 shadow-sm">
<div class="container mx-auto px-4">
<div class="flex overflow-x-auto space-x-6 pb-2">
<button class="platform-tab active px-4 py-2 font-semibold whitespace-nowrap" data-platform="all">All Platforms</button>
<button class="platform-tab px-4 py-2 font-semibold whitespace-nowrap" data-platform="1688">1688</button>
<button class="platform-tab px-4 py-2 font-semibold whitespace-nowrap" data-platform="alibaba">Alibaba</button>
<button class="platform-tab px-4 py-2 font-semibold whitespace-nowrap" data-platform="taobao">Taobao</button>
<button class="platform-tab px-4 py-2 font-semibold whitespace-nowrap" data-platform="temu">Temu</button>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Featured Pre-Order Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="productsContainer">
<!-- Products will be loaded here -->
</div>
</div>
</section>
<!-- How It Works -->
<section id="how-it-works" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">How It Works</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-search text-purple-700 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">1. Browse Products</h3>
<p class="text-gray-600">Explore products from Chinese platforms that we've made available for pre-order.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-cart-plus text-purple-700 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">2. Place Your Order</h3>
<p class="text-gray-600">Select your desired products and place your pre-order before the closing date.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-truck text-purple-700 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">3. Receive Your Items</h3>
<p class="text-gray-600">We'll handle the international shipping and deliver your items to your doorstep.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2>
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
<div class="md:flex">
<div class="md:w-1/2 bg-purple-700 text-white p-8">
<h3 class="text-2xl font-bold mb-6">Get In Touch</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<i class="fas fa-envelope mt-1"></i>
<div>
<p class="font-semibold">Email</p>
<p>[email protected]</p>
</div>
</div>
<div class="flex items-start space-x-4">
<i class="fas fa-phone-alt mt-1"></i>
<div>
<p class="font-semibold">WhatsApp</p>
<p>+233 0550273901</p>
</div>
</div>
<div class="flex items-start space-x-4">
<i class="fas fa-clock mt-1"></i>
<div>
<p class="font-semibold">Working Hours</p>
<p>Monday - Friday: 9AM - 5PM</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 p-8">
<h3 class="text-2xl font-bold mb-6 text-gray-800">Send Us a Message</h3>
<form id="contactForm">
<div class="mb-4">
<label for="name" class="block text-gray-700 mb-2">Your Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 mb-2">Your Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700 mb-2">Your Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
</div>
<button type="submit" class="w-full bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-800">Send Message</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Admin Panel -->
<div id="adminPanel" class="admin-panel py-10 bg-gray-100 min-h-screen">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">Admin Dashboard</h2>
<button id="backToUserView" class="bg-purple-700 text-white px-4 py-2 rounded-lg hover:bg-purple-800">Back to User View</button>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 mb-8">
<h3 class="text-xl font-semibold mb-4">Add New Product</h3>
<form id="addProductForm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="productName" class="block text-gray-700 mb-2">Product Name</label>
<input type="text" id="productName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="productPlatform" class="block text-gray-700 mb-2">Platform</label>
<select id="productPlatform" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
<option value="1688">1688</option>
<option value="alibaba">Alibaba</option>
<option value="taobao">Taobao</option>
<option value="temu">Temu</option>
</select>
</div>
<div>
<label for="productPrice" class="block text-gray-700 mb-2">Price (USD - will convert to GH₵)</label>
<input type="number" step="0.01" id="productPrice" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="productMOQ" class="block text-gray-700 mb-2">Minimum Order Quantity (MOQ)</label>
<input type="number" id="productMOQ" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="productClosingDate" class="block text-gray-700 mb-2">Order Closing Date</label>
<input type="datetime-local" id="productClosingDate" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="productImage" class="block text-gray-700 mb-2">Product Image</label>
<input type="file" id="productImage" accept="image/*" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
</div>
<div class="mt-6">
<label for="productDescription" class="block text-gray-700 mb-2">Product Description</label>
<textarea id="productDescription" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
</div>
<div class="mt-6">
<button type="submit" class="bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-800">Add Product</button>
</div>
</form>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-xl font-semibold mb-4">Current Pre-Order Products</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white">
<thead>
<tr class="bg-gray-100 text-gray-700">
<th class="py-3 px-4 text-left">Product</th>
<th class="py-3 px-4 text-left">Platform</th>
<th class="py-3 px-4 text-left">Price</th>
<th class="py-3 px-4 text-left">MOQ</th>
<th class="py-3 px-4 text-left">Closing Date</th>
<th class="py-3 px-4 text-left">Orders</th>
<th class="py-3 px-4 text-left">Actions</th>
</tr>
</thead>
<tbody class="text-gray-600" id="adminProductsTable">
<!-- Admin products will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Kenmus Global Buy</h3>
<p class="text-gray-400">Your trusted partner for international shopping from Chinese platforms with Ghana Cedis pricing.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="#products" class="text-gray-400 hover:text-white">Products</a></li>
<li><a href="#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Platforms</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">1688</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Alibaba</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Taobao</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Temu</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact</h4>
<ul class="space-y-2">
<li class="flex items-center space-x-2">
<i class="fas fa-envelope"></i>
<span>[email protected]</span>
</li>
<li class="flex items-center space-x-2">
<i class="fas fa-phone-alt"></i>
<span>+233 0550273901</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 Global Buy. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Product Modal -->
<div id="productModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 id="modalProductName" class="text-2xl font-bold text-gray-800"></h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<img id="modalProductImage" src="" alt="Product" class="w-full h-auto rounded-lg">
</div>
<div>
<div class="flex items-center space-x-2 mb-4">
<span id="modalProductPlatform" class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium"></span>
<span id="modalProductMOQ" class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium"></span>
</div>
<div class="mb-4">
<span id="modalProductPrice" class="text-3xl font-bold text-gray-800"></span>
</div>
<div class="mb-6">
<p id="modalProductDescription" class="text-gray-600"></p>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-circle text-yellow-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
Orders close in: <span id="modalCountdown" class="font-bold countdown"></span>
</p>
</div>
</div>
</div>
<form id="orderForm" class="space-y-4">
<input type="hidden" id="modalProductId">
<div>
<label for="orderQuantity" class="block text-gray-700 mb-2">Quantity</label>
<input type="number" id="orderQuantity" min="1" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="customerName" class="block text-gray-700 mb-2">Your Name</label>
<input type="text" id="customerName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="customerPhone" class="block text-gray-700 mb-2">Phone Number</label>
<input type="tel" id="customerPhone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="customerEmail" class="block text-gray-700 mb-2">Email</label>
<input type="email" id="customerEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="customerAddress" class="block text-gray-700 mb-2">Delivery Address</label>
<textarea id="customerAddress" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required></textarea>
</div>
<button type="submit" class="w-full bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-800">Place Pre-Order</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
// Sample product data
let products = [
{
id: 1,
name: "Wireless Earbuds",
platform: "1688",
price: 25.99,
moq: 10,
description: "High-quality wireless earbuds with noise cancellation and 24-hour battery life.",
image: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80",
closingDate: "2023-12-15T23:59:00",
orders: []
},
{
id: 2,
name: "Smart Watch",
platform: "alibaba",
price: 49.99,
moq: 5,
description: "Feature-packed smartwatch with heart rate monitoring and GPS tracking.",
image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1399&q=80",
closingDate: "2023-12-20T23:59:00",
orders: []
},
{
id: 3,
name: "LED Desk Lamp",
platform: "taobao",
price: 18.50,
moq: 15,
description: "Adjustable LED desk lamp with multiple brightness levels and color temperatures.",
image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
closingDate: "2023-12-10T23:59:00",
orders: []
},
{
id: 4,
name: "Portable Blender",
platform: "temu",
price: 22.75,
moq: 8,
description: "USB rechargeable portable blender for smoothies and shakes on the go.",
image: "https://images.unsplash.com/photo-1608355028576-685f0681b7c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
closingDate: "2023-12-18T23:59:00",
orders: []
}
];
// DOM Elements
const productsContainer = document.getElementById('productsContainer');
const adminProductsTable = document.getElementById('adminProductsTable');
const productModal = document.getElementById('productModal');
const closeModal = document.getElementById('closeModal');
const orderForm = document.getElementById('orderForm');
const addProductForm = document.getElementById('addProductForm');
const adminPanel = document.getElementById('adminPanel');
const userView = document.getElementById('userView');
const adminToggle = document.getElementById('adminToggle');
const adminToggleMobile = document.getElementById('adminToggleMobile');
const backToUserView = document.getElementById('backToUserView');
const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
const platformTabs = document.querySelectorAll('.platform-tab');
const contactForm = document.getElementById('contactForm');
// Initialize the app
function init() {
renderProducts();
renderAdminProducts();
setupEventListeners();
}
// Render products to the user view
function renderProducts(filterPlatform = 'all') {
productsContainer.innerHTML = '';
const filteredProducts = filterPlatform === 'all'
? products
: products.filter(product => product.platform === filterPlatform);
filteredProducts.forEach(product => {
const timeLeft = getTimeLeft(product.closingDate);
const productCard = document.createElement('div');
productCard.className = 'product-card bg-white rounded-lg shadow-sm overflow-hidden transition duration-300';
productCard.innerHTML = `
<div class="relative">
<img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
<span class="absolute top-2 left-2 bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium">${product.platform}</span>
<span class="absolute top-2 right-2 bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">MOQ: ${product.moq}</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold mb-2 text-gray-800">${product.name}</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">${product.description}</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-purple-700">GH₵${(product.price * 11.31).toFixed(2)}</span>
<button class="view-product-btn bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-purple-800" data-id="${product.id}">
View Details
</button>
</div>
<div class="mt-3 text-sm text-gray-500">
<i class="fas fa-clock mr-1"></i> Closes in: ${timeLeft.days}d ${timeLeft.hours}h ${timeLeft.minutes}m
</div>
</div>
`;
productsContainer.appendChild(productCard);
});
// Add event listeners to view buttons
document.querySelectorAll('.view-product-btn').forEach(button => {
button.addEventListener('click', (e) => {
const productId = parseInt(e.target.getAttribute('data-id'));
openProductModal(productId);
});
});
}
// Render products to the admin view
function renderAdminProducts() {
adminProductsTable.innerHTML = '';
products.forEach(product => {
const timeLeft = getTimeLeft(product.closingDate);
const row = document.createElement('tr');
row.className = 'border-b border-gray-200 hover:bg-gray-50';
row.innerHTML = `
<td class="py-4 px-4">
<div class="flex items-center">
<img src="${product.image}" alt="${product.name}" class="w-12 h-12 rounded-md object-cover mr-3">
<span>${product.name}</span>
</div>
</td>
<td class="py-4 px-4">
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium">${product.platform}</span>
</td>
<td class="py-4 px-4">GH₵${(product.price * 11.31).toFixed(2)}</td>
<td class="py-4 px-4">${product.moq}</td>
<td class="py-4 px-4">
${new Date(product.closingDate).toLocaleString()}<br>
<span class="text-xs text-gray-500">${timeLeft.days}d ${timeLeft.hours}h ${timeLeft.minutes}m left</span>
</td>
<td class="py-4 px-4">${product.orders.length}</td>
<td class="py-4 px-4">
<button class="edit-product-btn text-blue-600 hover:text-blue-800 mr-3" data-id="${product.id}">
<i class="fas fa-edit"></i>
</button>
<button class="delete-product-btn text-red-600 hover:text-red-800" data-id="${product.id}">
<i class="fas fa-trash-alt"></i>
</button>
</td>
`;
adminProductsTable.appendChild(row);
});
// Add event listeners to edit and delete buttons
document.querySelectorAll('.edit-product-btn').forEach(button => {
button.addEventListener('click', (e) => {
const productId = parseInt(e.target.closest('button').getAttribute('data-id'));
editProduct(productId);
});
});
document.querySelectorAll('.delete-product-btn').forEach(button => {
button.addEventListener('click', (e) => {
const productId = parseInt(e.target.closest('button').getAttribute('data-id'));
deleteProduct(productId);
});
});
}
// Open product modal
function openProductModal(productId) {
const product = products.find(p => p.id === productId);
if (!product) return;
// Set modal content
document.getElementById('modalProductName').textContent = product.name;
document.getElementById('modalProductImage').src = product.image;
document.getElementById('modalProductImage').alt = product.name;
document.getElementById('modalProductPlatform').textContent = product.platform;
document.getElementById('modalProductPrice').textContent = `GH₵${(product.price * 11.31).toFixed(2)}`;
document.getElementById('modalProductMOQ').textContent = `MOQ: ${product.moq}`;
document.getElementById('modalProductDescription').textContent = product.description;
document.getElementById('modalProductId').value = product.id;
// Set countdown
updateCountdown(product.closingDate);
const countdownInterval = setInterval(() => {
updateCountdown(product.closingDate);
}, 1000);
// Show modal
productModal.classList.remove('hidden');
// Clear interval when modal is closed
closeModal.addEventListener('click', () => {
clearInterval(countdownInterval);
}, { once: true });
}
// Update countdown display
function updateCountdown(closingDate) {
const timeLeft = getTimeLeft(closingDate);
document.getElementById('modalCountdown').textContent =
`${timeLeft.days}d ${timeLeft.hours}h ${timeLeft.minutes}m ${timeLeft.seconds}s`;
}
// Calculate time left until closing date
function getTimeLeft(closingDate) {
const now = new Date();
const closing = new Date(closingDate);
const diff = closing - now;
if (diff <= 0) {
return { days: 0, hours: 0, minutes: 0, seconds: 0 };
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
return { days, hours, minutes, seconds };
}
// Add a new product
function addProduct(event) {
event.preventDefault();
const name = document.getElementById('productName').value;
const platform = document.getElementById('productPlatform').value;
const price = parseFloat(document.getElementById('productPrice').value);
const moq = parseInt(document.getElementById('productMOQ').value);
const closingDate = document.getElementById('productClosingDate').value;
const description = document.getElementById('productDescription').value;
const imageInput = document.getElementById('productImage');
// For demo purposes, we'll use a placeholder image
// In a real app, you would upload the image to a server
const image = "https://images.unsplash.com/photo-1505740420928-5e880cde4d0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80";
const newProduct = {
id: products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1,
name,
platform,
price,
moq,
description,
image,
closingDate,
orders: []
};
products.push(newProduct);
renderProducts();
renderAdminProducts();
// Reset form
addProductForm.reset();
// Show success message
alert('Product added successfully!');
}
// Edit product
function editProduct(productId) {
const product = products.find(p => p.id === productId);
if (!product) return;
// For a real app, you would populate a form with the product details
// and allow the admin to edit them
alert(`Editing product: ${product.name}\n\nIn a real app, this would open an edit form.`);
}
// Delete product
function deleteProduct(productId) {
if (confirm('Are you sure you want to delete this product?')) {
products = products.filter(p => p.id !== productId);
renderProducts();
renderAdminProducts();
alert('Product deleted successfully!');
}
}
// Place an order
function placeOrder(event) {
event.preventDefault();
const productId = parseInt(document.getElementById('modalProductId').value);
const quantity = parseInt(document.getElementById('orderQuantity').value);
const name = document.getElementById('customerName').value;
const phone = document.getElementById('customerPhone').value;
const email = document.getElementById('customerEmail').value;
const address = document.getElementById('customerAddress').value;
const product = products.find(p => p.id === productId);
if (!product) return;
// Check if MOQ is met
if (quantity < product.moq) {
alert(`Minimum order quantity (MOQ) for this product is ${product.moq}. Please increase your quantity.`);
return;
}
// Create order
const order = {
id: Date.now(),
productId,
productName: product.name,
quantity,
customer: { name, phone, email, address },
date: new Date().toISOString(),
status: 'pending'
};
// Add order to product
product.orders.push(order);
// Send WhatsApp notification to admin
const whatsappMessage = `New Order!\n\nProduct: ${product.name}\nQuantity: ${quantity}\nCustomer: ${name}\nPhone: ${phone}\nEmail: ${email}\nAddress: ${address}`;
const whatsappUrl = `https://wa.me/233550273901?text=${encodeURIComponent(whatsappMessage)}`;
// In a real app, you would send this to your backend which would then send the WhatsApp message
// For demo purposes, we'll just open WhatsApp in a new tab
window.open(whatsappUrl, '_blank');
// Reset form and close modal
orderForm.reset();
productModal.classList.add('hidden');
// Show success message
alert('Your order has been placed successfully! We will contact you shortly.');
}
// Setup event listeners
function setupEventListeners() {
// Close modal
closeModal.addEventListener('click', () => {
productModal.classList.add('hidden');
});
// Order form submission
orderForm.addEventListener('submit', placeOrder);
// Add product form submission
addProductForm.addEventListener('submit', addProduct);
// Toggle admin panel
adminToggle.addEventListener('click', toggleAdminPanel);
adminToggleMobile.addEventListener('click', toggleAdminPanel);
backToUserView.addEventListener('click', toggleAdminPanel);
// Mobile menu toggle
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Platform tabs
platformTabs.forEach(tab => {
tab.addEventListener('click', () => {
platformTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
renderProducts(tab.getAttribute('data-platform'));
});
});
// Contact form submission
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you for your message! We will get back to you soon.');
contactForm.reset();
});
}
// Toggle admin panel
function toggleAdminPanel() {
adminPanel.classList.toggle('show-admin');
userView.classList.toggle('hidden');
mobileMenu.classList.add('hidden');
}
// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', init);
</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=Kenmus/kenmus-global-buy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>