Beaded Treasures - Handcrafted Beaded Bags

\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","label",[159,64],"frontend","pulls","branches","forks","envVars",{"_167":26,"_169":26},"connections",{"_167":26,"_168":26},"count","unfilledCount","emptyCount",{"_33":221,"_13":159,"_62":150,"_43":-5,"_35":36,"_151":40,"_152":91,"_37":222,"_39":26,"_65":223,"_155":-5,"_66":24,"_157":-5,"_183":224,"_17":225},{"_33":214,"_13":215,"_62":216,"_43":150,"_35":36,"_151":180,"_152":91,"_37":217,"_39":26,"_65":21,"_155":218,"_66":24,"_157":-5,"_183":219,"_17":220},{"_33":206,"_13":207,"_62":208,"_43":150,"_35":36,"_151":209,"_152":91,"_37":210,"_39":26,"_65":199,"_155":211,"_66":24,"_157":-5,"_183":212,"_17":213},{"_33":149,"_13":64,"_62":63,"_43":150,"_35":36,"_151":72,"_152":91,"_37":203,"_39":154,"_65":21,"_155":156,"_66":24,"_157":-5,"_183":204,"_17":205},{"_33":194,"_13":195,"_62":196,"_43":150,"_35":36,"_151":197,"_152":91,"_37":198,"_39":26,"_65":199,"_155":200,"_66":24,"_157":-5,"_183":201,"_17":202},{"_33":186,"_13":187,"_62":188,"_43":-5,"_35":36,"_151":189,"_152":91,"_37":190,"_39":154,"_65":21,"_155":191,"_66":24,"_157":-5,"_183":192,"_17":193},{"_33":177,"_13":178,"_62":89,"_43":-5,"_35":36,"_151":114,"_152":91,"_37":179,"_39":180,"_65":181,"_155":182,"_66":24,"_157":-5,"_183":184,"_17":185},"aabe9c72-3f9c-11f0-b094-76b3cceeab13","index.ts",["D",1748860256045],8,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Initialize database\nawait initializeDatabase();\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main pages\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/admin\", async (c) => {\n const html = await readFile(\"/frontend/admin.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/cart\", async (c) => {\n const html = await readFile(\"/frontend/cart.html\", import.meta.url);\n return c.html(html);\n});\n\n// API Routes\n\n// Get all products\napp.get(\"/api/products\", async (c) => {\n try {\n const result = await sqlite.execute(\"SELECT * FROM products WHERE active = 1 ORDER BY created_at DESC\");\n const products = result.rows.map(row => {\n const product: any = {};\n result.columns.forEach((col, index) => {\n product[col] = row[index];\n });\n return product;\n });\n return c.json({ products });\n } catch (error) {\n return c.json({ error: \"Failed to fetch products\" }, 500);\n }\n});\n\n// Get single product\napp.get(\"/api/products/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const result = await sqlite.execute(\"SELECT * FROM products WHERE id = ? AND active = 1\", [id]);\n if (result.rows.length === 0) {\n return c.json({ error: \"Product not found\" }, 404);\n }\n const product: any = {};\n result.columns.forEach((col, index) => {\n product[col] = result.rows[0][index];\n });\n return c.json({ product });\n } catch (error) {\n return c.json({ error: \"Failed to fetch product\" }, 500);\n }\n});\n\n// Add new product (admin)\napp.post(\"/api/products\", async (c) => {\n try {\n const { name, description, price, colors, beadStyle, imageUrl, category, inStock } = await c.req.json();\n \n if (!name || !description || !price) {\n return c.json({ error: \"Name, description, and price are required\" }, 400);\n }\n \n const result = await sqlite.execute(`\n INSERT INTO products (name, description, price, colors, bead_style, image_url, category, in_stock, active, created_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, 1, datetime('now'))\n `, [name, description, price, colors, beadStyle, imageUrl, category, inStock ? 1 : 0]);\n \n return c.json({ success: true, id: result.lastInsertRowId });\n } catch (error) {\n return c.json({ error: \"Failed to add product\" }, 500);\n }\n});\n\n// Update product (admin)\napp.put(\"/api/products/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const { name, description, price, colors, beadStyle, imageUrl, category, inStock } = await c.req.json();\n \n await sqlite.execute(`\n UPDATE products \n SET name = ?, description = ?, price = ?, colors = ?, bead_style = ?, \n image_url = ?, category = ?, in_stock = ?, updated_at = datetime('now')\n WHERE id = ?\n `, [name, description, price, colors, beadStyle, imageUrl, category, inStock ? 1 : 0, id]);\n \n return c.json({ success: true });\n } catch (error) {\n return c.json({ error: \"Failed to update product\" }, 500);\n }\n});\n\n// Delete product (admin)\napp.delete(\"/api/products/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n await sqlite.execute(\"UPDATE products SET active = 0 WHERE id = ?\", [id]);\n return c.json({ success: true });\n } catch (error) {\n return c.json({ error: \"Failed to delete product\" }, 500);\n }\n});\n\n// Submit order\napp.post(\"/api/orders\", async (c) => {\n try {\n const { customerName, email, phone, address, items, total } = await c.req.json();\n \n if (!customerName || !email || !items || items.length === 0) {\n return c.json({ error: \"Customer details and items are required\" }, 400);\n }\n \n // Insert order\n const orderResult = await sqlite.execute(`\n INSERT INTO orders (customer_name, email, phone, address, total, status, created_at)\n VALUES (?, ?, ?, ?, ?, 'pending', datetime('now'))\n `, [customerName, email, phone, address, total]);\n \n const orderId = orderResult.lastInsertRowId;\n \n // Insert order items\n for (const item of items) {\n await sqlite.execute(`\n INSERT INTO order_items (order_id, product_id, product_name, quantity, price)\n VALUES (?, ?, ?, ?, ?)\n `, [orderId, item.id, item.name, item.quantity, item.price]);\n }\n \n return c.json({ success: true, orderId });\n } catch (error) {\n return c.json({ error: \"Failed to submit order\" }, 500);\n }\n});\n\n// Get orders (admin)\napp.get(\"/api/orders\", async (c) => {\n try {\n const result = await sqlite.execute(`\n SELECT o.*, GROUP_CONCAT(oi.product_name || ' (x' || oi.quantity || ')') as items\n FROM orders o\n LEFT JOIN order_items oi ON o.id = oi.order_id\n GROUP BY o.id\n ORDER BY o.created_at DESC\n `);\n const orders = result.rows.map(row => {\n const order: any = {};\n result.columns.forEach((col, index) => {\n order[col] = row[index];\n });\n return order;\n });\n return c.json({ orders });\n } catch (error) {\n return c.json({ error: \"Failed to fetch orders\" }, 500);\n }\n});\n\n// Update order status (admin)\napp.put(\"/api/orders/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const { status } = await c.req.json();\n \n try {\n await sqlite.execute(\"UPDATE orders SET status = ? WHERE id = ?\", [status, id]);\n return c.json({ success: true });\n } catch (error) {\n return c.json({ error: \"Failed to update order\" }, 500);\n }\n});\n\nasync function initializeDatabase() {\n // Products table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS products (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n price REAL NOT NULL,\n colors TEXT,\n bead_style TEXT,\n image_url TEXT,\n category TEXT DEFAULT 'bags',\n in_stock INTEGER DEFAULT 1,\n active INTEGER DEFAULT 1,\n created_at TEXT,\n updated_at TEXT\n )\n `);\n \n // Orders table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS orders (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n customer_name TEXT NOT NULL,\n email TEXT NOT NULL,\n phone TEXT,\n address TEXT,\n total REAL NOT NULL,\n status TEXT DEFAULT 'pending',\n created_at TEXT\n )\n `);\n \n // Order items table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS order_items (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n order_id INTEGER NOT NULL,\n product_id INTEGER NOT NULL,\n product_name TEXT NOT NULL,\n quantity INTEGER NOT NULL,\n price REAL NOT NULL,\n FOREIGN KEY (order_id) REFERENCES orders (id),\n FOREIGN KEY (product_id) REFERENCES products (id)\n )\n `);\n \n // Add sample products if none exist\n try {\n const existingProducts = await sqlite.execute(\"SELECT id FROM products WHERE active = 1 LIMIT 1\");\n if (existingProducts.rows.length === 0) {\n await addSampleProducts();\n }\n } catch (error) {\n // If table doesn't exist or is empty, add sample products\n await addSampleProducts();\n }\n}\n\nasync function addSampleProducts() {\n const sampleProducts = [\n {\n name: \"Moonlight Clutch\",\n description: \"Elegant evening clutch with silver and pearl beads, perfect for special occasions. Handcrafted with attention to detail.\",\n price: 89.99,\n colors: \"silver, pearl white\",\n beadStyle: \"pearl\",\n imageUrl: \"https://maxm-imggenurl.web.val.run/elegant-silver-pearl-beaded-clutch-bag-evening-wear\",\n category: \"clutches\"\n },\n {\n name: \"Bohemian Dreams Tote\",\n description: \"Large bohemian-style tote bag with colorful glass beads and ethnic patterns. Perfect for everyday use.\",\n price: 124.99,\n colors: \"turquoise, gold, coral\",\n beadStyle: \"glass\",\n imageUrl: \"https://maxm-imggenurl.web.val.run/bohemian-colorful-glass-beaded-tote-bag-ethnic-patterns\",\n category: \"totes\"\n },\n {\n name: \"Vintage Rose Crossbody\",\n description: \"Charming crossbody bag with vintage rose-colored beads and antique brass hardware.\",\n price: 67.50,\n colors: \"rose gold, burgundy\",\n beadStyle: \"vintage\",\n imageUrl: \"https://maxm-imggenurl.web.val.run/vintage-rose-gold-beaded-crossbody-bag-antique-brass\",\n category: \"crossbody\"\n },\n {\n name: \"Ocean Breeze Shoulder Bag\",\n description: \"Medium shoulder bag inspired by ocean waves, featuring blue and green crystal beads.\",\n price: 95.00,\n colors: \"ocean blue, sea green\",\n beadStyle: \"crystal\",\n imageUrl: \"https://maxm-imggenurl.web.val.run/ocean-blue-green-crystal-beaded-shoulder-bag-waves\",\n category: \"shoulder\"\n }\n ];\n \n for (const product of sampleProducts) {\n await sqlite.execute(`\n INSERT INTO products (name, description, price, colors, bead_style, image_url, category, in_stock, active, created_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, 1, 1, datetime('now'))\n `, [product.name, product.description, product.price, product.colors, product.beadStyle, product.imageUrl, product.category]);\n }\n}\n\nexport default app.fetch;","children",[],[178],"8010bfd2-3f9c-11f0-a42d-76b3cceeab13","README.md","5a9989c4-3f9b-11f0-9a30-76b3cceeab13",10,["D",1748860184438],"# Beaded Treasures - E-commerce Website 🛍️✨\n\nA complete e-commerce platform for selling handcrafted beaded bags. Features product management, shopping cart, order processing, and admin panel.\n\n## Features\n\n### Customer Features\n- **Product Catalog**: Browse beautiful beaded bags with high-quality images\n- **Category Filtering**: Filter by bag type (clutches, totes, crossbody, shoulder bags)\n- **Shopping Cart**: Add/remove items, adjust quantities\n- **Checkout Process**: Simple order form with customer details\n- **Responsive Design**: Works perfectly on all devices\n- **AI-Generated Images**: Automatic product images using AI\n\n### Admin Features\n- **Product Management**: Add, edit, delete products\n- **Order Management**: View and update order status\n- **Inventory Tracking**: Monitor stock levels\n- **Customer Information**: Access customer details and order history\n\n## Pages\n\n### Main Shop (`/`)\n- Hero section with call-to-action\n- Category filters\n- Product grid with hover effects\n- Shopping cart sidebar\n- Checkout modal\n\n### Admin Panel (`/admin`)\n- Product management table\n- Order management with status updates\n- Add/edit product modal\n- Real-time inventory tracking\n\n## Database Schema\n\n### Products Table\n- `id`: Primary key\n- `name`: Product name\n- `description`: Product description\n- `price`: Product price\n- `colors`: Available colors\n- `bead_style`: Type of beads used\n- `image_url`: Product image URL\n- `category`: Product category\n- `in_stock`: Stock availability\n- `active`: Product visibility\n- `created_at`, `updated_at`: Timestamps\n\n### Orders Table\n- `id`: Primary key\n- `customer_name`: Customer full name\n- `email`: Customer email\n- `phone`: Customer phone (optional)\n- `address`: Shipping address (optional)\n- `total`: Order total amount\n- `status`: Order status (pending, processing, shipped, delivered, cancelled)\n- `created_at`: Order timestamp\n\n### Order Items Table\n- `id`: Primary key\n- `order_id`: Foreign key to orders\n- `product_id`: Foreign key to products\n- `product_name`: Product name snapshot\n- `quantity`: Item quantity\n- `price`: Item price snapshot\n\n## API Endpoints\n\n### Products\n- `GET /api/products` - Get all active products\n- `GET /api/products/:id` - Get single product\n- `POST /api/products` - Add new product (admin)\n- `PUT /api/products/:id` - Update product (admin)\n- `DELETE /api/products/:id` - Delete product (admin)\n\n### Orders\n- `POST /api/orders` - Submit new order\n- `GET /api/orders` - Get all orders (admin)\n- `PUT /api/orders/:id` - Update order status (admin)\n\n## Sample Products\n\nThe system comes pre-loaded with sample products:\n1. **Moonlight Clutch** - Elegant silver and pearl evening clutch\n2. **Bohemian Dreams Tote** - Colorful glass beaded tote with ethnic patterns\n3. **Vintage Rose Crossbody** - Rose-colored vintage beaded crossbody bag\n4. **Ocean Breeze Shoulder Bag** - Blue and green crystal beaded shoulder bag\n\n## Technology Stack\n\n- **Backend**: Hono framework with TypeScript\n- **Database**: SQLite with automatic schema creation\n- **Frontend**: Vanilla HTML/CSS/JavaScript\n- **Styling**: TailwindCSS with custom components\n- **Images**: AI-generated product images\n- **Storage**: Local storage for shopping cart persistence\n\n## Key Features\n\n### Shopping Cart\n- Persistent cart using localStorage\n- Real-time quantity updates\n- Cart badge with item count\n- Smooth sidebar animations\n\n### Product Management\n- Auto-generate AI image URLs based on product details\n- Rich product information (colors, bead styles, categories)\n- Stock management\n- Product activation/deactivation\n\n### Order Processing\n- Simple checkout flow\n- Order status tracking\n- Customer notification system\n- Admin order management\n\n### Responsive Design\n- Mobile-first approach\n- Touch-friendly interface\n- Optimized for all screen sizes\n- Smooth animations and transitions\n\n## Getting Started\n\n1. The database will be automatically initialized with sample products\n2. Visit `/` to browse the shop\n3. Visit `/admin` to manage products and orders\n4. Add products to cart and test the checkout process\n\nPerfect for artisans, boutique owners, and anyone selling handcrafted beaded accessories online! 🎨✨",[],[187],"39f89632-3f9c-11f0-8da4-76b3cceeab13","shop.js","39f896fa-3f9c-11f0-8da4-76b3cceeab13",7,["D",1748860066846],"script","// Shopping cart functionality\nlet cart = JSON.parse(localStorage.getItem('beadedBagsCart') || '[]');\nlet products = [];\nlet currentCategory = 'all';\n\n// Initialize the page\ndocument.addEventListener('DOMContentLoaded', function() {\n loadProducts();\n updateCartUI();\n setupEventListeners();\n});\n\nfunction setupEventListeners() {\n // Cart button\n document.getElementById('cartBtn').addEventListener('click', toggleCart);\n document.getElementById('closeCart').addEventListener('click', closeCart);\n document.getElementById('cartOverlay').addEventListener('click', closeCart);\n \n // Category filters\n document.querySelectorAll('.category-filter').forEach(btn => {\n btn.addEventListener('click', function() {\n // Update active state\n document.querySelectorAll('.category-filter').forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n \n // Filter products\n currentCategory = this.dataset.category;\n filterProducts();\n });\n });\n \n // Checkout\n document.getElementById('checkoutBtn').addEventListener('click', openCheckout);\n document.getElementById('cancelCheckout').addEventListener('click', closeCheckout);\n document.getElementById('checkoutForm').addEventListener('submit', submitOrder);\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(products);\n } catch (error) {\n console.error('Error loading products:', error);\n document.getElementById('loadingProducts').innerHTML = '

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}",[],[159,195],["D",1748860030039],[],[159,64],"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}",[],[159,207],"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",[],[159,215],"50a6038e-3f9b-11f0-ba8d-76b3cceeab13",["D",1748859675393],"directory",[171,172,173,174],[159],["D",1748859500251],{"_11":12,"_127":69},{"_11":12,"_123":-5,"_68":69,"_30":67,"_124":125,"_126":24},{"_39":114,"_13":16,"_33":36,"_115":79,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":14,"_122":12},"ctx",{"_52":-5,"_146":263,"_264":265,"_266":267,"_268":24,"_269":24,"_270":24,"_271":91,"_272":-5,"_273":-7,"_274":-7,"_275":26,"_276":24,"_277":24,"_278":-5,"_279":24,"_280":24,"_281":24,"_282":-5},"ENV",{"_234":235,"_236":237,"_238":16,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262},"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"]

History · index.html