Spaces:

mukoshi
/

index4-best

Running

App Files Files Community

mukoshi commited on Jul 1, 2025

Commit

4a0de11

verified ·

1 Parent(s): e058077

I want a catalog site. It needs to display products in the electrical and electronics field in a simple and understandable way. There should be categories such as “cables,” “components,” and “sensors.” These categories should be stored in an array in the code, and new categories should be able to be added to that array at any time. The newly added categories should also automatically exist in the system and be functional. There should be a menu where I can add products in detail, and I should be able to see which product is stored in which box using the “box number” feature. Products should have photos, and these photos should be displayed in the main menu. I should also be able to edit them. I should be able to set this when adding a product. Additionally, there should be an editing menu for each product where I can increase or decrease the quantity of a previously added product and modify its information. There should also be a menu that displays all products across all categories, with filtering and search options. The search option should allow text searches in the product description/title, and the filtering options should include information such as box number. You should store information about these products in a database, and this database should be viewable and editable independently. When products are added, a unique gradient(?) should be automatically generated for them. The code should be easy to read and edit and should include comments. It should be simple, clean, and user-friendly. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +782 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Index4 Best
-emoji: 🏃
-colorFrom: indigo
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: index4-best
+emoji: 🐳
+colorFrom: blue
 colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,782 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ElectroCatalog - Electrical & Electronics Inventory</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>
+        /* Custom CSS for gradients and animations */
+        .gradient-bg {
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
+        }
+        .product-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <!-- 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-bolt text-3xl"></i>
+                    <h1 class="text-2xl font-bold">ElectroCatalog</h1>
+                </div>
+                <button id="viewDbBtn" class="bg-white text-purple-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
+                    <i class="fas fa-database mr-2"></i>View Database
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Category Navigation -->
+        <div class="mb-8">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">Categories</h2>
+                <button id="addCategoryBtn" class="bg-blue-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-blue-600 transition">
+                    <i class="fas fa-plus mr-1"></i>Add Category
+                </button>
+            </div>
+            <div id="categoryTabs" class="flex flex-wrap gap-2 mb-4">
+                <!-- Categories will be loaded here -->
+            </div>
+            <div id="addCategoryForm" class="hidden bg-white p-4 rounded-lg shadow-md mb-4">
+                <div class="flex items-center space-x-2">
+                    <input type="text" id="newCategoryName" placeholder="Category name" class="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <button id="saveCategoryBtn" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition">
+                        Save
+                    </button>
+                    <button id="cancelCategoryBtn" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Product Management -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Add Product Form -->
+            <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-1">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Add New Product</h2>
+                <form id="productForm" class="space-y-4">
+                    <div>
+                        <label for="productCategory" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
+                        <select id="productCategory" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <!-- Categories will be loaded here -->
+                        </select>
+                    </div>
+                    <div>
+                        <label for="productName" class="block text-sm font-medium text-gray-700 mb-1">Product Name</label>
+                        <input type="text" id="productName" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div>
+                        <label for="productDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                        <textarea id="productDescription" rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                    </div>
+                    <div>
+                        <label for="productQuantity" class="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
+                        <input type="number" id="productQuantity" min="0" value="1" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div>
+                        <label for="productBoxNumber" class="block text-sm font-medium text-gray-700 mb-1">Box Number</label>
+                        <input type="text" id="productBoxNumber" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div>
+                        <label for="productImage" class="block text-sm font-medium text-gray-700 mb-1">Product Image</label>
+                        <input type="file" id="productImage" accept="image/*" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <div id="imagePreview" class="mt-2 hidden">
+                            <img id="previewImage" src="#" alt="Preview" class="max-w-full h-32 object-contain rounded-lg border">
+                        </div>
+                    </div>
+                    <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition">
+                        <i class="fas fa-save mr-2"></i>Save Product
+                    </button>
+                </form>
+            </div>
+            <!-- Product Display -->
+            <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 id="currentCategoryTitle" class="text-xl font-semibold text-gray-800">All Products</h2>
+                    <div class="flex items-center space-x-2">
+                        <div class="relative">
+                            <input type="text" id="productSearch" placeholder="Search products..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                        </div>
+                        <select id="boxFilter" class="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option value="">All Boxes</option>
+                            <!-- Box numbers will be loaded here -->
+                        </select>
+                    </div>
+                </div>
+                <div id="productsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <!-- Products will be loaded here -->
+                </div>
+                <div id="noProductsMessage" class="text-center py-8 text-gray-500 hidden">
+                    <i class="fas fa-box-open text-4xl mb-2"></i>
+                    <p>No products found in this category.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Database Modal -->
+    <div id="databaseModal" 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 w-full max-w-6xl max-h-[90vh] flex flex-col">
+            <div class="flex justify-between items-center border-b p-4">
+                <h3 class="text-lg font-semibold">Product Database</h3>
+                <button id="closeDbModal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="overflow-auto p-4 flex-1">
+                <pre id="databaseContent" class="bg-gray-100 p-4 rounded-lg overflow-x-auto"></pre>
+            </div>
+            <div class="border-t p-4 flex justify-end space-x-2">
+                <button id="exportDbBtn" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
+                    <i class="fas fa-download mr-2"></i>Export JSON
+                </button>
+                <button id="importDbBtn" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition">
+                    <i class="fas fa-upload mr-2"></i>Import JSON
+                </button>
+                <input type="file" id="importDbFile" accept=".json" class="hidden">
+            </div>
+        </div>
+    </div>
+    <!-- Edit Product Modal -->
+    <div id="editProductModal" 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 w-full max-w-md max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center border-b p-4">
+                <h3 class="text-lg font-semibold">Edit Product</h3>
+                <button id="closeEditModal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <form id="editProductForm" class="p-4 space-y-4">
+                <input type="hidden" id="editProductId">
+                <div>
+                    <label for="editProductCategory" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
+                    <select id="editProductCategory" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <!-- Categories will be loaded here -->
+                    </select>
+                </div>
+                <div>
+                    <label for="editProductName" class="block text-sm font-medium text-gray-700 mb-1">Product Name</label>
+                    <input type="text" id="editProductName" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                </div>
+                <div>
+                    <label for="editProductDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                    <textarea id="editProductDescription" rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                </div>
+                <div class="flex space-x-4">
+                    <div class="flex-1">
+                        <label for="editProductQuantity" class="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
+                        <div class="flex items-center">
+                            <button type="button" id="decreaseQuantity" class="bg-gray-200 px-3 py-1 rounded-l-lg hover:bg-gray-300">
+                                <i class="fas fa-minus"></i>
+                            </button>
+                            <input type="number" id="editProductQuantity" min="0" class="w-full px-3 py-1 border-t border-b text-center">
+                            <button type="button" id="increaseQuantity" class="bg-gray-200 px-3 py-1 rounded-r-lg hover:bg-gray-300">
+                                <i class="fas fa-plus"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex-1">
+                        <label for="editProductBoxNumber" class="block text-sm font-medium text-gray-700 mb-1">Box Number</label>
+                        <input type="text" id="editProductBoxNumber" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Current Image</label>
+                    <div id="currentImageContainer" class="flex justify-center">
+                        <!-- Current image will be shown here -->
+                    </div>
+                </div>
+                <div>
+                    <label for="editProductImage" class="block text-sm font-medium text-gray-700 mb-1">Change Image</label>
+                    <input type="file" id="editProductImage" accept="image/*" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <div id="editImagePreview" class="mt-2 hidden">
+                        <img id="editPreviewImage" src="#" alt="Preview" class="max-w-full h-32 object-contain rounded-lg border">
+                    </div>
+                </div>
+                <div class="flex justify-between pt-4">
+                    <button type="button" id="deleteProductBtn" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition">
+                        <i class="fas fa-trash mr-2"></i>Delete
+                    </button>
+                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
+                        <i class="fas fa-save mr-2"></i>Save Changes
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script>
+        // Database structure
+        let database = {
+            categories: ['Cables', 'Components', 'Sensors'], // Initial categories
+            products: [
+                {
+                    id: '1',
+                    category: 'Cables',
+                    name: 'HDMI Cable',
+                    description: 'High-speed HDMI cable with Ethernet, 2m length',
+                    quantity: 15,
+                    boxNumber: 'B12',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNhYmxlIj48cGF0aCBkPSJNMTAgMThoLjAxIi8+PHBhdGggZD0iTTE0IDE3aC4wMSIvPjxwYXRoIGQ9Ik0xNS41IDE0aC4wMSIvPjxwYXRoIGQ9Ik0xNyAxMWguMDEiLz48cGF0aCBkPSJNNyAxM2guMDEiLz48cGF0aCBkPSJNNC41IDE2aC4wMSIvPjxwYXRoIGQ9Ik0yIDguNWE0LjUgNiAwIDAgMSA0LjUtNi41YzMuMTYgMCA0LjUgMy4xNCA0LjUgNC41QTIgMiAwIDAgMSAxMC44IDE2SDkuNWEyIDIgMCAwIDEtMS45NS0xLjVMNyAxMCIvPjxwYXRoIGQ9Ik0yMiAxNS41YTQuNSA2IDAgMCAxLTQuNSA2LjVjLTMuMTYgMC00LjUtMy4xNC00LjUtNC41QTIgMiAwIDAgMSAxMy4yIDhoMS4zYTIgMiAwIDAgMSAxLjk1IDEuNUwxNyAxNCIvPjwvc3ZnPg=='
+                },
+                {
+                    id: '2',
+                    category: 'Components',
+                    name: 'Arduino Uno',
+                    description: 'Arduino Uno R3 microcontroller board',
+                    quantity: 8,
+                    boxNumber: 'B05',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNpcmN1aXQtYm9hcmQiPjxwYXRoIGQ9Ik0yIDEyaDQiLz48cGF0aCBkPSJNMTYgNGgtMTJhMiAyIDAgMCAwLTIgMnYxMmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTEyYTIgMiAwIDAgMC0yLTJ6Ii8+PHBhdGggZD0iTTYgMTJoNCIvPjxwYXRoIGQ9Ik0xNCAxMmg0Ii8+PHBhdGggZD0iTTEwIDEydjQiLz48L3N2Zz4='
+                },
+                {
+                    id: '3',
+                    category: 'Sensors',
+                    name: 'Temperature Sensor',
+                    description: 'DS18B20 waterproof temperature sensor',
+                    quantity: 20,
+                    boxNumber: 'B08',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRoZXJtb21ldGVyIj48cGF0aCBkPSJNMTQgMTRhMiAyIDAgMSAwLTQgMCIvPjxwYXRoIGQ9Ik0xMi4zIDEydi0uMSIvPjxwYXRoIGQ9Ik0xMCA5LjZMMTIuMiA3LjRhNCA0IDAgMCAxIDUuMyAwbDEuOCAxLjgiLz48cGF0aCBkPSJNMTguNCAxMS44YTIgMiAwIDAgMSAwIDIuOGwtMy4xIDMuMWExLjcgMS43IDAgMCAxLTIuMyAwbC0xLjYtMS42YTIgMiAwIDAgMSAwLTIuOGwyLjktMi45Ii8+PHBhdGggZD0iTTggMTcuOGMtLjEuMS0uMi4zLS4zLjQtLjcuOC0xLjYgMS4xLTIuNCAxLjMtMS42LjQtMi44LjQtNC4xLjktLjkuMy0xLjQuMS0xLjcuNi0uMy4xLS40LjItLjMuNS4xLjYuNCAxIC44IDEuMyAxLjIgMS4yIDIuNiAyLjQgMy44IDMuOC4zLjMuNS4xLjgtLjEuNi0uNiAxLjItMS4yIDEuOC0xLjguMy0uMy4xLS41LS4xLS44LS4zLS40LS42LS43LS45LTEuMS0uMy0uNC0uMS0uNi4xLS45LjEtLjEuMy0uMi40LS4zLjgtLjQgMS4zLS44IDEuOS0xLjMuMS0uMS4zLS4yLjQtLjMuMS0uMS4xLS4zIDAtLjQtLjEtLjEtLjMtLjItLjQtLjMtLjQtLjQtLjctLjktMS0xLjQtLjMtLjUtLjEtLjcuMi0uOS4zLS4yLjYtLjQuOS0uNi44LS40IDEuNi0uOCAyLjQtMS4yLjEtLjEuMy0uMS40IDB6Ii8+PC9zdmc+'
+                }
+            ]
+        };
+        // Generate a unique ID for new products
+        function generateId() {
+            return Date.now().toString(36) + Math.random().toString(36).substr(2);
+        }
+        // Generate a gradient color based on product name
+        function generateGradient(name) {
+            const hash = Array.from(name).reduce((hash, char) => {
+                return char.charCodeAt(0) + ((hash << 5) - hash);
+            }, 0);
+            const h = Math.abs(hash % 360);
+            return `linear-gradient(135deg, hsl(${h}, 80%, 70%), hsl(${(h + 30) % 360}, 80%, 60%))`;
+        }
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            // Load categories
+            loadCategories();
+            // Load products (show all by default)
+            loadProducts();
+            // Set up event listeners
+            setupEventListeners();
+        });
+        // Load categories into the UI
+        function loadCategories() {
+            const categoryTabs = document.getElementById('categoryTabs');
+            const productCategorySelect = document.getElementById('productCategory');
+            const editProductCategorySelect = document.getElementById('editProductCategory');
+            // Clear existing options
+            categoryTabs.innerHTML = '';
+            productCategorySelect.innerHTML = '';
+            editProductCategorySelect.innerHTML = '';
+            // Add "All" option
+            const allTab = document.createElement('button');
+            allTab.className = 'px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition';
+            allTab.textContent = 'All';
+            allTab.onclick = () => {
+                document.querySelectorAll('#categoryTabs button').forEach(btn => {
+                    btn.classList.remove('bg-blue-500', 'text-white');
+                    btn.classList.add('bg-gray-200', 'text-gray-800');
+                });
+                allTab.classList.remove('bg-gray-200', 'text-gray-800');
+                allTab.classList.add('bg-blue-500', 'text-white');
+                document.getElementById('currentCategoryTitle').textContent = 'All Products';
+                loadProducts();
+            };
+            categoryTabs.appendChild(allTab);
+            // Add category tabs and select options
+            database.categories.forEach(category => {
+                // Category tab
+                const tab = document.createElement('button');
+                tab.className = 'px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition';
+                tab.textContent = category;
+                tab.onclick = () => {
+                    document.querySelectorAll('#categoryTabs button').forEach(btn => {
+                        btn.classList.remove('bg-blue-500', 'text-white');
+                        btn.classList.add('bg-gray-200', 'text-gray-800');
+                    });
+                    tab.classList.remove('bg-gray-200', 'text-gray-800');
+                    tab.classList.add('bg-blue-500', 'text-white');
+                    document.getElementById('currentCategoryTitle').textContent = `${category} Products`;
+                    loadProducts(category);
+                };
+                categoryTabs.appendChild(tab);
+                // Category select options
+                const option = document.createElement('option');
+                option.value = category;
+                option.textContent = category;
+                productCategorySelect.appendChild(option.cloneNode(true));
+                editProductCategorySelect.appendChild(option.cloneNode(true));
+            });
+            // Load box numbers for filter
+            loadBoxNumbers();
+        }
+        // Load products into the UI
+        function loadProducts(category = null) {
+            const productsContainer = document.getElementById('productsContainer');
+            const noProductsMessage = document.getElementById('noProductsMessage');
+            // Filter products by category if specified
+            let filteredProducts = [...database.products];
+            if (category) {
+                filteredProducts = filteredProducts.filter(product => product.category === category);
+            }
+            // Apply search filter if any
+            const searchTerm = document.getElementById('productSearch').value.toLowerCase();
+            if (searchTerm) {
+                filteredProducts = filteredProducts.filter(product =>
+                    product.name.toLowerCase().includes(searchTerm) ||
+                    product.description.toLowerCase().includes(searchTerm)
+                );
+            }
+            // Apply box filter if any
+            const boxFilter = document.getElementById('boxFilter').value;
+            if (boxFilter) {
+                filteredProducts = filteredProducts.filter(product => product.boxNumber === boxFilter);
+            }
+            // Clear existing products
+            productsContainer.innerHTML = '';
+            // Display products or no products message
+            if (filteredProducts.length === 0) {
+                noProductsMessage.classList.remove('hidden');
+            } else {
+                noProductsMessage.classList.add('hidden');
+                filteredProducts.forEach(product => {
+                    const productCard = createProductCard(product);
+                    productsContainer.appendChild(productCard);
+                });
+            }
+        }
+        // Create a product card element
+        function createProductCard(product) {
+            const card = document.createElement('div');
+            card.className = 'product-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 fade-in';
+            // Generate gradient based on product name
+            const gradient = generateGradient(product.name);
+            // Product image or placeholder
+            const imageHtml = product.image
+                ? `<img src="${product.image}" alt="${product.name}" class="w-full h-32 object-contain p-4">`
+                : `<div class="w-full h-32 flex items-center justify-center" style="background: ${gradient}">
+                      <i class="fas fa-box-open text-white text-4xl"></i>
+                   </div>`;
+            // Product details
+            card.innerHTML = `
+                ${imageHtml}
+                <div class="p-4">
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="font-semibold text-gray-800 truncate">${product.name}</h3>
+                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">${product.quantity}</span>
+                    </div>
+                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">${product.description}</p>
+                    <div class="flex justify-between items-center text-sm">
+                        <span class="text-gray-500"><i class="fas fa-cube mr-1"></i>${product.boxNumber || 'N/A'}</span>
+                        <button class="text-blue-500 hover:text-blue-700 transition edit-btn" data-id="${product.id}">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                    </div>
+                </div>
+            `;
+            return card;
+        }
+        // Load box numbers into the filter dropdown
+        function loadBoxNumbers() {
+            const boxFilter = document.getElementById('boxFilter');
+            // Get unique box numbers
+            const boxNumbers = [...new Set(database.products.map(product => product.boxNumber).filter(Boolean))];
+            // Clear existing options (keep "All Boxes")
+            while (boxFilter.options.length > 1) {
+                boxFilter.remove(1);
+            }
+            // Add box number options
+            boxNumbers.sort().forEach(box => {
+                const option = document.createElement('option');
+                option.value = box;
+                option.textContent = box;
+                boxFilter.appendChild(option);
+            });
+        }
+        // Set up all event listeners
+        function setupEventListeners() {
+            // Add category button
+            document.getElementById('addCategoryBtn').addEventListener('click', () => {
+                document.getElementById('addCategoryForm').classList.remove('hidden');
+            });
+            // Cancel adding category
+            document.getElementById('cancelCategoryBtn').addEventListener('click', () => {
+                document.getElementById('addCategoryForm').classList.add('hidden');
+                document.getElementById('newCategoryName').value = '';
+            });
+            // Save new category
+            document.getElementById('saveCategoryBtn').addEventListener('click', () => {
+                const newCategory = document.getElementById('newCategoryName').value.trim();
+                if (newCategory && !database.categories.includes(newCategory)) {
+                    database.categories.push(newCategory);
+                    document.getElementById('addCategoryForm').classList.add('hidden');
+                    document.getElementById('newCategoryName').value = '';
+                    loadCategories();
+                }
+            });
+            // Add product form submission
+            document.getElementById('productForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                const category = document.getElementById('productCategory').value;
+                const name = document.getElementById('productName').value.trim();
+                const description = document.getElementById('productDescription').value.trim();
+                const quantity = parseInt(document.getElementById('productQuantity').value);
+                const boxNumber = document.getElementById('productBoxNumber').value.trim();
+                const imageInput = document.getElementById('productImage');
+                if (name && category) {
+                    // Create new product
+                    const newProduct = {
+                        id: generateId(),
+                        category,
+                        name,
+                        description,
+                        quantity: isNaN(quantity) ? 0 : quantity,
+                        boxNumber: boxNumber || null,
+                        image: null
+                    };
+                    // Handle image upload if any
+                    if (imageInput.files && imageInput.files[0]) {
+                        const reader = new FileReader();
+                        reader.onload = function(e) {
+                            newProduct.image = e.target.result;
+                            database.products.push(newProduct);
+                            loadProducts();
+                            this.reset();
+                            document.getElementById('imagePreview').classList.add('hidden');
+                        };
+                        reader.readAsDataURL(imageInput.files[0]);
+                    } else {
+                        database.products.push(newProduct);
+                        loadProducts();
+                        this.reset();
+                    }
+                    // Update box filter if needed
+                    if (boxNumber && !document.getElementById('boxFilter').querySelector(`option[value="${boxNumber}"]`)) {
+                        loadBoxNumbers();
+                    }
+                }
+            });
+            // Product image preview
+            document.getElementById('productImage').addEventListener('change', function() {
+                if (this.files && this.files[0]) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        document.getElementById('previewImage').src = e.target.result;
+                        document.getElementById('imagePreview').classList.remove('hidden');
+                    };
+                    reader.readAsDataURL(this.files[0]);
+                }
+            });
+            // Search functionality
+            document.getElementById('productSearch').addEventListener('input', () => {
+                loadProducts(document.querySelector('#categoryTabs button.bg-blue-500').textContent === 'All' ? null : document.querySelector('#categoryTabs button.bg-blue-500').textContent);
+            });
+            // Box filter change
+            document.getElementById('boxFilter').addEventListener('change', () => {
+                loadProducts(document.querySelector('#categoryTabs button.bg-blue-500').textContent === 'All' ? null : document.querySelector('#categoryTabs button.bg-blue-500').textContent);
+            });
+            // View database modal
+            document.getElementById('viewDbBtn').addEventListener('click', () => {
+                document.getElementById('databaseContent').textContent = JSON.stringify(database, null, 2);
+                document.getElementById('databaseModal').classList.remove('hidden');
+            });
+            // Close database modal
+            document.getElementById('closeDbModal').addEventListener('click', () => {
+                document.getElementById('databaseModal').classList.add('hidden');
+            });
+            // Export database
+            document.getElementById('exportDbBtn').addEventListener('click', () => {
+                const dataStr = JSON.stringify(database, null, 2);
+                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+                const exportFileDefaultName = 'electrocatalog-database.json';
+                const linkElement = document.createElement('a');
+                linkElement.setAttribute('href', dataUri);
+                linkElement.setAttribute('download', exportFileDefaultName);
+                linkElement.click();
+            });
+            // Import database
+            document.getElementById('importDbBtn').addEventListener('click', () => {
+                document.getElementById('importDbFile').click();
+            });
+            document.getElementById('importDbFile').addEventListener('change', function() {
+                if (this.files && this.files[0]) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        try {
+                            const importedData = JSON.parse(e.target.result);
+                            if (importedData.categories && importedData.products) {
+                                if (confirm('Are you sure you want to import this database? All current data will be replaced.')) {
+                                    database = importedData;
+                                    loadCategories();
+                                    loadProducts();
+                                    document.getElementById('databaseModal').classList.add('hidden');
+                                }
+                            } else {
+                                alert('Invalid database format');
+                            }
+                        } catch (error) {
+                            alert('Error parsing JSON file');
+                        }
+                    };
+                    reader.readAsText(this.files[0]);
+                    this.value = ''; // Reset file input
+                }
+            });
+            // Edit product (delegated event listener)
+            document.addEventListener('click', function(e) {
+                if (e.target.closest('.edit-btn')) {
+                    const productId = e.target.closest('.edit-btn').getAttribute('data-id');
+                    openEditModal(productId);
+                }
+            });
+            // Close edit modal
+            document.getElementById('closeEditModal').addEventListener('click', () => {
+                document.getElementById('editProductModal').classList.add('hidden');
+            });
+            // Quantity controls in edit modal
+            document.getElementById('increaseQuantity').addEventListener('click', () => {
+                const quantityInput = document.getElementById('editProductQuantity');
+                quantityInput.value = parseInt(quantityInput.value) + 1;
+            });
+            document.getElementById('decreaseQuantity').addEventListener('click', () => {
+                const quantityInput = document.getElementById('editProductQuantity');
+                const currentValue = parseInt(quantityInput.value);
+                if (currentValue > 0) {
+                    quantityInput.value = currentValue - 1;
+                }
+            });
+            // Edit product image preview
+            document.getElementById('editProductImage').addEventListener('change', function() {
+                if (this.files && this.files[0]) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        document.getElementById('editPreviewImage').src = e.target.result;
+                        document.getElementById('editImagePreview').classList.remove('hidden');
+                    };
+                    reader.readAsDataURL(this.files[0]);
+                }
+            });
+            // Delete product
+            document.getElementById('deleteProductBtn').addEventListener('click', function() {
+                const productId = document.getElementById('editProductId').value;
+                if (confirm('Are you sure you want to delete this product?')) {
+                    database.products = database.products.filter(product => product.id !== productId);
+                    loadProducts();
+                    document.getElementById('editProductModal').classList.add('hidden');
+                    loadBoxNumbers(); // Update box filter in case this was the last product in a box
+                }
+            });
+            // Edit product form submission
+            document.getElementById('editProductForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                const productId = document.getElementById('editProductId').value;
+                const category = document.getElementById('editProductCategory').value;
+                const name = document.getElementById('editProductName').value.trim();
+                const description = document.getElementById('editProductDescription').value.trim();
+                const quantity = parseInt(document.getElementById('editProductQuantity').value);
+                const boxNumber = document.getElementById('editProductBoxNumber').value.trim();
+                const imageInput = document.getElementById('editProductImage');
+                if (name && category) {
+                    // Find the product to update
+                    const productIndex = database.products.findIndex(p => p.id === productId);
+                    if (productIndex !== -1) {
+                        const oldBoxNumber = database.products[productIndex].boxNumber;
+                        // Update product
+                        database.products[productIndex] = {
+                            ...database.products[productIndex],
+                            category,
+                            name,
+                            description,
+                            quantity: isNaN(quantity) ? 0 : quantity,
+                            boxNumber: boxNumber || null
+                        };
+                        // Handle image upload if any
+                        if (imageInput.files && imageInput.files[0]) {
+                            const reader = new FileReader();
+                            reader.onload = function(e) {
+                                database.products[productIndex].image = e.target.result;
+                                loadProducts();
+                                document.getElementById('editProductModal').classList.add('hidden');
+                            };
+                            reader.readAsDataURL(imageInput.files[0]);
+                        } else {
+                            loadProducts();
+                            document.getElementById('editProductModal').classList.add('hidden');
+                        }
+                        // Update box filter if box number changed
+                        if (oldBoxNumber !== boxNumber) {
+                            loadBoxNumbers();
+                        }
+                    }
+                }
+            });
+        }
+        // Open the edit product modal
+        function openEditModal(productId) {
+            const product = database.products.find(p => p.id === productId);
+            if (product) {
+                // Fill the form with product data
+                document.getElementById('editProductId').value = product.id;
+                document.getElementById('editProductCategory').value = product.category;
+                document.getElementById('editProductName').value = product.name;
+                document.getElementById('editProductDescription').value = product.description || '';
+                document.getElementById('editProductQuantity').value = product.quantity;
+                document.getElementById('editProductBoxNumber').value = product.boxNumber || '';
+                // Display current image
+                const currentImageContainer = document.getElementById('currentImageContainer');
+                currentImageContainer.innerHTML = '';
+                if (product.image) {
+                    const img = document.createElement('img');
+                    img.src = product.image;
+                    img.alt = product.name;
+                    img.className = 'max-w-full h-32 object-contain rounded-lg border';
+                    currentImageContainer.appendChild(img);
+                } else {
+                    const gradient = generateGradient(product.name);
+                    const placeholder = document.createElement('div');
+                    placeholder.className = 'w-full h-32 flex items-center justify-center rounded-lg';
+                    placeholder.style.background = gradient;
+                    const icon = document.createElement('i');
+                    icon.className = 'fas fa-box-open text-white text-4xl';
+                    placeholder.appendChild(icon);
+                    currentImageContainer.appendChild(placeholder);
+                }
+                // Reset image preview and file input
+                document.getElementById('editImagePreview').classList.add('hidden');
+                document.getElementById('editProductImage').value = '';
+                // Show the modal
+                document.getElementById('editProductModal').classList.remove('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-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=mukoshi/index4-best" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>