Beaded Treasures - Handcrafted Beaded Bags

Failed to load products. Please try again.

';\n }\n}\n\nfunction displayProducts(productsToShow) {\n const grid = document.getElementById('productsGrid');\n const loading = document.getElementById('loadingProducts');\n \n loading.style.display = 'none';\n \n if (productsToShow.length === 0) {\n grid.innerHTML = '

No products found in this category.

';\n return;\n }\n \n grid.innerHTML = productsToShow.map(product => `\n

\n $\"${product.name}\"$ \n

${product.name}

${product.description}

\n \n

\n $${product.price}\n \n ${product.bead_style}\n \n

\n \n

Colors:

${product.colors}

\n \n ${product.in_stock ? \n `` :\n ``\n }\n

\n `).join('');\n}\n\nfunction filterProducts() {\n const filtered = currentCategory === 'all' \n ? products \n : products.filter(p => p.category === currentCategory);\n displayProducts(filtered);\n}\n\nfunction addToCart(productId) {\n const product = products.find(p => p.id === productId);\n if (!product) return;\n \n const existingItem = cart.find(item => item.id === productId);\n \n if (existingItem) {\n existingItem.quantity += 1;\n } else {\n cart.push({\n id: product.id,\n name: product.name,\n price: product.price,\n image_url: product.image_url,\n quantity: 1\n });\n }\n \n saveCart();\n updateCartUI();\n \n // Show success feedback\n showNotification(`${product.name} added to cart!`);\n}\n\nfunction removeFromCart(productId) {\n cart = cart.filter(item => item.id !== productId);\n saveCart();\n updateCartUI();\n}\n\nfunction updateQuantity(productId, newQuantity) {\n if (newQuantity <= 0) {\n removeFromCart(productId);\n return;\n }\n \n const item = cart.find(item => item.id === productId);\n if (item) {\n item.quantity = newQuantity;\n saveCart();\n updateCartUI();\n }\n}\n\nfunction updateCartUI() {\n const cartBadge = document.getElementById('cartBadge');\n const cartItems = document.getElementById('cartItems');\n const cartTotal = document.getElementById('cartTotal');\n \n const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);\n const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);\n \n // Update badge\n if (totalItems > 0) {\n cartBadge.textContent = totalItems;\n cartBadge.classList.remove('hidden');\n } else {\n cartBadge.classList.add('hidden');\n }\n \n // Update cart items\n if (cart.length === 0) {\n cartItems.innerHTML = '

Your cart is empty

';\n } else {\n cartItems.innerHTML = cart.map(item => `\n

\n $\"${item.name}\"$ \n

${item.name}

$${item.price}

\n \n ${item.quantity}\n \n

\n \n

\n `).join('');\n }\n \n // Update total\n cartTotal.textContent = `$${totalPrice.toFixed(2)}`;\n}\n\nfunction toggleCart() {\n const sidebar = document.getElementById('cartSidebar');\n const overlay = document.getElementById('cartOverlay');\n \n if (sidebar.classList.contains('translate-x-full')) {\n sidebar.classList.remove('translate-x-full');\n overlay.classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n } else {\n closeCart();\n }\n}\n\nfunction closeCart() {\n const sidebar = document.getElementById('cartSidebar');\n const overlay = document.getElementById('cartOverlay');\n \n sidebar.classList.add('translate-x-full');\n overlay.classList.add('hidden');\n document.body.style.overflow = 'auto';\n}\n\nfunction openCheckout() {\n if (cart.length === 0) {\n showNotification('Your cart is empty!');\n return;\n }\n \n document.getElementById('checkoutModal').classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n}\n\nfunction closeCheckout() {\n document.getElementById('checkoutModal').classList.add('hidden');\n document.body.style.overflow = 'auto';\n}\n\nasync function submitOrder(e) {\n e.preventDefault();\n \n const formData = new FormData(e.target);\n const orderData = {\n customerName: formData.get('customerName'),\n email: formData.get('email'),\n phone: formData.get('phone'),\n address: formData.get('address'),\n items: cart,\n total: cart.reduce((sum, item) => sum + (item.price * item.quantity), 0)\n };\n \n try {\n const response = await fetch('/api/orders', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(orderData)\n });\n \n const result = await response.json();\n \n if (result.success) {\n // Clear cart\n cart = [];\n saveCart();\n updateCartUI();\n \n // Close modals\n closeCheckout();\n closeCart();\n \n // Show success message\n showNotification('Order placed successfully! We will contact you soon.', 'success');\n } else {\n showNotification('Failed to place order. Please try again.', 'error');\n }\n } catch (error) {\n console.error('Error submitting order:', error);\n showNotification('Failed to place order. Please try again.', 'error');\n }\n}\n\nfunction saveCart() {\n localStorage.setItem('beadedBagsCart', JSON.stringify(cart));\n}\n\nfunction showNotification(message, type = 'info') {\n const notification = document.createElement('div');\n notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${\n type === 'success' ? 'bg-green-500' : \n type === 'error' ? 'bg-red-500' : 'bg-blue-500'\n }`;\n notification.textContent = message;\n \n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 3000);\n}",[],[67,92],"2408e41c-3f9c-11f0-8b01-76b3cceeab13","index.html","50a5eb92-3f9b-11f0-ba8d-76b3cceeab13",6,["D",1748860030039],"\n\n\n \n \n Beaded Treasures - Handcrafted Beaded Bags\n \n \n \n\n\n \n \n\n \n

\n Handcrafted Beaded Bags\n

\n Unique, artisan-made bags that tell your story\n

\n \n

\n\n \n

\n \n \n \n \n \n

\n\n \n

\n Our Collection\n

\n \n

Loading beautiful bags...

\n \n

\n\n \n

Shopping Cart

\n \n

\n Total:\n $0.00\n

\n \n

\n\n \n \n\n \n \n\n \n\n",[],[67,101],"734d891a-3f9c-11f0-839a-76b3cceeab13","admin.js","734d89d8-3f9c-11f0-839a-76b3cceeab13",9,["D",1748860163034],"// Admin panel functionality\nlet products = [];\nlet orders = [];\nlet currentEditingProduct = null;\n\n// Initialize the admin panel\ndocument.addEventListener('DOMContentLoaded', function() {\n setupTabs();\n setupEventListeners();\n loadProducts();\n});\n\nfunction setupTabs() {\n const tabs = document.querySelectorAll('.tab-btn');\n const contents = document.querySelectorAll('.tab-content');\n \n tabs.forEach(tab => {\n tab.addEventListener('click', function() {\n // Remove active class from all tabs\n tabs.forEach(t => t.classList.remove('active', 'bg-white', 'text-purple-600'));\n contents.forEach(c => c.classList.add('hidden'));\n \n // Add active class to clicked tab\n this.classList.add('active', 'bg-white', 'text-purple-600');\n \n // Show corresponding content\n const targetId = this.id.replace('Tab', 'Section');\n document.getElementById(targetId).classList.remove('hidden');\n \n // Load data for the active tab\n if (this.id === 'ordersTab') {\n loadOrders();\n }\n });\n });\n}\n\nfunction setupEventListeners() {\n // Product modal\n document.getElementById('addProductBtn').addEventListener('click', openProductModal);\n document.getElementById('cancelProduct').addEventListener('click', closeProductModal);\n document.getElementById('productForm').addEventListener('submit', saveProduct);\n \n // Auto-generate AI image URL\n const imageUrlInput = document.querySelector('input[name=\"imageUrl\"]');\n const nameInput = document.querySelector('input[name=\"name\"]');\n const colorsInput = document.querySelector('input[name=\"colors\"]');\n const beadStyleSelect = document.querySelector('select[name=\"beadStyle\"]');\n \n function generateAIImageUrl() {\n const name = nameInput.value.toLowerCase().replace(/\\s+/g, '-');\n const colors = colorsInput.value.toLowerCase().replace(/\\s+/g, '-').replace(/,/g, '-');\n const style = beadStyleSelect.value;\n \n if (name && !imageUrlInput.value.startsWith('http')) {\n const description = `${name}-${colors}-${style}-beaded-bag`.replace(/--+/g, '-');\n imageUrlInput.value = `https://maxm-imggenurl.web.val.run/${description}`;\n }\n }\n \n nameInput.addEventListener('blur', generateAIImageUrl);\n colorsInput.addEventListener('blur', generateAIImageUrl);\n beadStyleSelect.addEventListener('change', generateAIImageUrl);\n}\n\nasync function loadProducts() {\n try {\n const response = await fetch('/api/products');\n const data = await response.json();\n products = data.products;\n displayProducts();\n } catch (error) {\n console.error('Error loading products:', error);\n showNotification('Failed to load products', 'error');\n }\n}\n\nfunction displayProducts() {\n const loading = document.getElementById('loadingProducts');\n const content = document.getElementById('productsContent');\n const tbody = document.getElementById('productsTableBody');\n \n loading.style.display = 'none';\n content.classList.remove('hidden');\n \n tbody.innerHTML = products.map(product => `\n \n \n

\n $\"${product.name}\"$ \n

${product.name}

${product.bead_style}

\n \n $${product.price}\n ${product.category}\n \n \n ${product.in_stock ? 'In Stock' : 'Out of Stock'}\n \n \n \n

\n \n \n

\n \n \n `).join('');\n}\n\nasync function loadOrders() {\n try {\n const response = await fetch('/api/orders');\n const data = await response.json();\n orders = data.orders;\n displayOrders();\n } catch (error) {\n console.error('Error loading orders:', error);\n showNotification('Failed to load orders', 'error');\n }\n}\n\nfunction displayOrders() {\n const loading = document.getElementById('loadingOrders');\n const content = document.getElementById('ordersContent');\n const tbody = document.getElementById('ordersTableBody');\n \n loading.style.display = 'none';\n content.classList.remove('hidden');\n \n tbody.innerHTML = orders.map(order => `\n \n #${order.id}\n \n

${order.customer_name}

${order.email}

\n \n ${order.items || 'N/A'}\n $${order.total}\n \n \n \n ${new Date(order.created_at).toLocaleDateString()}\n \n \n \n \n `).join('');\n}\n\nfunction openProductModal(product = null) {\n currentEditingProduct = product;\n const modal = document.getElementById('productModal');\n const title = document.getElementById('productModalTitle');\n const form = document.getElementById('productForm');\n \n if (product) {\n title.textContent = 'Edit Product';\n // Fill form with product data\n form.productId.value = product.id;\n form.name.value = product.name;\n form.description.value = product.description;\n form.price.value = product.price;\n form.colors.value = product.colors || '';\n form.beadStyle.value = product.bead_style || 'glass';\n form.imageUrl.value = product.image_url || '';\n form.category.value = product.category || 'bags';\n form.inStock.checked = product.in_stock;\n } else {\n title.textContent = 'Add New Product';\n form.reset();\n form.productId.value = '';\n }\n \n modal.classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n}\n\nfunction closeProductModal() {\n document.getElementById('productModal').classList.add('hidden');\n document.body.style.overflow = 'auto';\n currentEditingProduct = null;\n}\n\nasync function saveProduct(e) {\n e.preventDefault();\n \n const formData = new FormData(e.target);\n const productData = {\n name: formData.get('name'),\n description: formData.get('description'),\n price: parseFloat(formData.get('price')),\n colors: formData.get('colors'),\n beadStyle: formData.get('beadStyle'),\n imageUrl: formData.get('imageUrl'),\n category: formData.get('category'),\n inStock: formData.get('inStock') === 'on'\n };\n \n try {\n const productId = formData.get('productId');\n const url = productId ? `/api/products/${productId}` : '/api/products';\n const method = productId ? 'PUT' : 'POST';\n \n const response = await fetch(url, {\n method,\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(productData)\n });\n \n const result = await response.json();\n \n if (result.success) {\n closeProductModal();\n loadProducts();\n showNotification(productId ? 'Product updated successfully!' : 'Product added successfully!', 'success');\n } else {\n showNotification(result.error || 'Failed to save product', 'error');\n }\n } catch (error) {\n console.error('Error saving product:', error);\n showNotification('Failed to save product', 'error');\n }\n}\n\nfunction editProduct(productId) {\n const product = products.find(p => p.id === productId);\n if (product) {\n openProductModal(product);\n }\n}\n\nasync function deleteProduct(productId) {\n if (!confirm('Are you sure you want to delete this product?')) {\n return;\n }\n \n try {\n const response = await fetch(`/api/products/${productId}`, {\n method: 'DELETE'\n });\n \n const result = await response.json();\n \n if (result.success) {\n loadProducts();\n showNotification('Product deleted successfully!', 'success');\n } else {\n showNotification('Failed to delete product', 'error');\n }\n } catch (error) {\n console.error('Error deleting product:', error);\n showNotification('Failed to delete product', 'error');\n }\n}\n\nasync function updateOrderStatus(orderId, newStatus) {\n try {\n const response = await fetch(`/api/orders/${orderId}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ status: newStatus })\n });\n \n const result = await response.json();\n \n if (result.success) {\n showNotification('Order status updated!', 'success');\n // Update the local orders array\n const order = orders.find(o => o.id === orderId);\n if (order) {\n order.status = newStatus;\n }\n } else {\n showNotification('Failed to update order status', 'error');\n loadOrders(); // Reload to reset the select\n }\n } catch (error) {\n console.error('Error updating order status:', error);\n showNotification('Failed to update order status', 'error');\n loadOrders(); // Reload to reset the select\n }\n}\n\nfunction viewOrderDetails(orderId) {\n const order = orders.find(o => o.id === orderId);\n if (order) {\n alert(`Order Details:\n \nCustomer: ${order.customer_name}\nEmail: ${order.email}\nPhone: ${order.phone || 'N/A'}\nAddress: ${order.address || 'N/A'}\nItems: ${order.items || 'N/A'}\nTotal: $${order.total}\nStatus: ${order.status}\nDate: ${new Date(order.created_at).toLocaleString()}`);\n }\n}\n\nfunction showNotification(message, type = 'info') {\n const notification = document.createElement('div');\n notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${\n type === 'success' ? 'bg-green-500' : \n type === 'error' ? 'bg-red-500' : 'bg-blue-500'\n }`;\n notification.textContent = message;\n \n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 3000);\n}",[],[67,109],"57e55432-3f9c-11f0-b7dc-76b3cceeab13","admin.html","57e554d2-3f9c-11f0-b7dc-76b3cceeab13",["D",1748860117049],"\n\n\n \n \n Admin Panel - Beaded Treasures\n \n \n \n\n\n \n \n\n \n

\n \n

\n \n \n

\n\n \n

Manage Products

\n \n

Loading products...

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

Product	Price	Category	Stock	Actions

\n\n \n

Manage Orders

\n \n

Loading orders...

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Order ID	Customer	Items	Total	Status	Date	Actions

\n\n \n \n\n \n\n",[],[67,117],"e840998a-3f9a-11f0-98e6-76b3cceeab13",["D",1748859500251],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","60ebba60-3f8f-11f0-b6e9-ab0b2f88b858","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","2243bf8b-8ef5-4c18-918d-14c6707a7329","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_175":171},"org",{"_11":12,"_169":-5,"_170":171,"_132":133,"_172":173,"_174":55},"branch",{"_17":44,"_13":16,"_35":42,"_161":123,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":14,"_168":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4d2NId3R5cW9NN3ByZ08wZ3dpeWJJU1lTWSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":123,"_13":14,"_47":230,"_125":-5,"_126":55,"_127":128,"_129":128,"_130":-5,"_131":-5,"_132":133,"_134":39,"_135":46,"_136":46,"_137":-5,"_138":71,"_139":140,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":146,"_147":146,"_148":149,"_150":149,"_151":149,"_152":146,"_153":146,"_154":231,"_156":232,"_158":233,"_160":55},[209,214,215],"files",[209,210,211,212,213,214,215],"counts",{"_200":71,"_201":63,"_202":71,"_31":203,"_204":205},[194,195,196],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_18":199},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_18":198},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":197},[37],[59],[67],"pulls","branches","forks",{"_206":71,"_208":71},"connections",{"_206":71,"_207":71},"count","unfilledCount","emptyCount",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":84,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_78":228,"_18":229},{"_35":116,"_13":117,"_38":118,"_40":68,"_41":42,"_43":49,"_45":46,"_47":119,"_17":71,"_50":24,"_52":120,"_54":55,"_56":-5,"_78":226,"_18":227},{"_35":108,"_13":109,"_38":110,"_40":68,"_41":42,"_43":111,"_45":46,"_47":112,"_17":71,"_50":96,"_52":113,"_54":55,"_56":-5,"_78":224,"_18":225},{"_35":100,"_13":101,"_38":102,"_40":68,"_41":42,"_43":103,"_45":46,"_47":104,"_17":63,"_50":24,"_52":105,"_54":55,"_56":-5,"_78":222,"_18":223},{"_35":91,"_13":92,"_38":93,"_40":68,"_41":42,"_43":94,"_45":46,"_47":95,"_17":71,"_50":96,"_52":97,"_54":55,"_56":-5,"_78":220,"_18":221},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":81,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_78":218,"_18":219},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_78":216,"_18":217},[],[37],[],[59],[],[67,92],[],[67,101],[],[67,109],[],[67,117],[210,211,212,213],[67],["D",1748859500251],{"_11":12,"_175":171},{"_11":12,"_169":-5,"_170":171,"_132":133,"_172":173,"_174":55},{"_17":44,"_13":16,"_35":42,"_161":123,"_162":-5,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":14,"_168":12},"ctx",{"_154":-5,"_191":267,"_268":269,"_270":271,"_272":55,"_273":55,"_274":55,"_275":46,"_276":-5,"_277":-7,"_278":-7,"_279":71,"_280":55,"_281":55,"_282":-5,"_283":55,"_284":55,"_285":55,"_286":-5},"ENV",{"_238":239,"_240":241,"_242":16,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code