Beaded Treasures - Handcrafted Beaded Bags

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_95":94,"_31":44,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/admin.js","latestPath","fileId","734d89d8-3f9c-11f0-839a-76b3cceeab13","name","admin.js","fileType","script","content","// 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}","createdAt",["D",1748860163034],"branchVersion","branchId","e840ff42-3f9a-11f0-98e6-76b3cceeab13","id","e840998a-3f9a-11f0-98e6-76b3cceeab13","beadedbag",["D",1748859500251],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","60ebba60-3f8f-11f0-b6e9-ab0b2f88b858","pinnedFileId","3b961132-3f9b-11f0-b7fe-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","2243bf8b-8ef5-4c18-918d-14c6707a7329","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","gracie1","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4d2NId3R5cW9NN3ByZ08wZ3dpeWJJU1lTWSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":208,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":209,"_79":210,"_81":211,"_83":24},"tree",[163,168,169],"files",[163,164,165,166,167,168,169],"counts",{"_152":61,"_153":154,"_155":61,"_156":157,"_158":159},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":146,"_31":147,"_29":148,"_130":-5,"_40":41,"_39":134,"_132":57,"_37":149,"_13":61,"_33":150,"_35":-5,"_23":24,"_137":-5,"_26":151},{"_42":139,"_31":140,"_29":141,"_130":-5,"_40":41,"_39":142,"_132":24,"_37":143,"_13":61,"_33":20,"_35":144,"_23":24,"_137":-5,"_26":145},{"_42":128,"_31":129,"_29":55,"_130":-5,"_40":41,"_39":131,"_132":24,"_37":133,"_13":134,"_33":135,"_35":136,"_23":24,"_137":-5,"_26":138},"0dee6738-3f9c-11f0-bece-76b3cceeab13","index.ts","parentId",5,"latest",["D",1748859992955],2,"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 return c.json({ products: result });\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.length === 0) {\n return c.json({ error: \"Product not found\" }, 404);\n }\n return c.json({ product: result[0] });\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 orders = 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 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 const existingProducts = await sqlite.execute(\"SELECT COUNT(*) as count FROM products WHERE active = 1\");\n if (existingProducts[0].count === 0) {\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;","label",[129],"5a998910-3f9b-11f0-9a30-76b3cceeab13","README.md","5a9989c4-3f9b-11f0-9a30-76b3cceeab13",4,["D",1748859692090],"# Beaded Bag Instagram Caption Generator ✨\n\nA stylish web application that generates customized Instagram captions for handcrafted beaded bags. Perfect for artisans, boutique owners, and anyone selling beautiful beaded accessories on social media.\n\n## Features\n\n- **Custom Input Fields**: Enter bag name, colors, and bead style\n- **Multiple Caption Styles**: Generates 5 different caption styles:\n - Elegant & Minimalist\n - Trendy & Fun\n - Storytelling\n - Luxury Focus\n - Boho Chic\n- **Smart Emoji Integration**: Automatically adds relevant emojis based on colors and bead styles\n- **One-Click Copy**: Easy copy-to-clipboard functionality\n- **Responsive Design**: Beautiful gradient background with glass-effect styling\n- **Mobile Friendly**: Works perfectly on all devices\n\n## How to Use\n\n1. **Bag Name**: Enter the name of your beaded bag (e.g., \"Moonlight Clutch\", \"Bohemian Dreams Tote\")\n2. **Colors**: List the colors used, separated by commas (e.g., \"gold, silver, turquoise\")\n3. **Bead Style**: Select from 16 different bead styles including:\n - Glass, Crystal, Pearl\n - Wooden, Metal, Ceramic, Stone\n - Vintage, Bohemian, Modern, Traditional\n - Ethnic, Tribal, Geometric, Floral, Abstract\n\n4. Click \"Generate Captions\" to get 5 unique, styled captions\n5. Copy your favorite caption with one click\n\n## Technical Details\n\n- **Backend**: Hono framework with TypeScript\n- **Frontend**: Vanilla HTML/CSS/JavaScript with TailwindCSS\n- **Styling**: Custom gradient backgrounds, glass effects, and smooth animations\n- **Fonts**: Playfair Display for headings, Inter for body text\n\n## API Endpoint\n\n- `POST /api/generate-caption`: Generates captions based on bag details\n - Request body: `{ bagName, colors, beadStyle }`\n - Response: `{ captions: string[] }`\n\n## Caption Features\n\nEach generated caption includes:\n- Bag name integration\n- Color-specific emojis\n- Style-appropriate language\n- Relevant hashtags\n- Call-to-action elements\n- Professional formatting\n\nPerfect for boosting your Instagram engagement and showcasing your beautiful beaded bag creations! 🛍️✨",[140],"50a6038e-3f9b-11f0-ba8d-76b3cceeab13","frontend","c7fef70b-c721-44f4-9e9b-4c5864c36f67",["D",1748859675393],"directory",[147],"pulls","branches",1,"forks","envVars",{"_160":61,"_162":61},"connections",{"_160":61,"_161":61},"count","unfilledCount","emptyCount",{"_42":146,"_31":147,"_29":148,"_130":-5,"_40":41,"_39":134,"_132":57,"_37":205,"_13":61,"_33":150,"_35":-5,"_23":24,"_137":-5,"_171":206,"_26":207},{"_42":197,"_31":198,"_29":199,"_130":148,"_40":41,"_39":200,"_132":57,"_37":201,"_13":61,"_33":20,"_35":202,"_23":24,"_137":-5,"_171":203,"_26":204},{"_42":193,"_31":32,"_29":30,"_130":148,"_40":41,"_39":14,"_132":57,"_37":194,"_13":61,"_33":34,"_35":36,"_23":24,"_137":-5,"_171":195,"_26":196},{"_42":185,"_31":186,"_29":187,"_130":148,"_40":41,"_39":188,"_132":57,"_37":189,"_13":154,"_33":20,"_35":190,"_23":24,"_137":-5,"_171":191,"_26":192},{"_42":177,"_31":178,"_29":179,"_130":148,"_40":41,"_39":180,"_132":57,"_37":181,"_13":61,"_33":34,"_35":182,"_23":24,"_137":-5,"_171":183,"_26":184},{"_42":139,"_31":140,"_29":141,"_130":-5,"_40":41,"_39":142,"_132":24,"_37":174,"_13":61,"_33":20,"_35":144,"_23":24,"_137":-5,"_171":175,"_26":176},{"_42":128,"_31":129,"_29":55,"_130":-5,"_40":41,"_39":131,"_132":24,"_37":170,"_13":134,"_33":135,"_35":136,"_23":24,"_137":-5,"_171":172,"_26":173},["D",1748859992955],"children",[],[129],["D",1748859692090],[],[140],"39f89632-3f9c-11f0-8da4-76b3cceeab13","shop.js","39f896fa-3f9c-11f0-8da4-76b3cceeab13",7,["D",1748860066846],"// 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}",[],[147,178],"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",[],[147,186],"734d891a-3f9c-11f0-839a-76b3cceeab13",["D",1748860163034],[],[147,32],"57e55432-3f9c-11f0-b7dc-76b3cceeab13","admin.html","57e554d2-3f9c-11f0-b7dc-76b3cceeab13",8,["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",[],[147,198],["D",1748859675393],[164,165,166,167],[147],["D",1748859500251],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":245,"_246":247,"_248":249,"_250":24,"_251":24,"_252":24,"_253":57,"_254":-5,"_255":-7,"_256":-7,"_257":61,"_258":24,"_259":24,"_260":-5,"_261":24,"_262":24,"_263":24,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":85,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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"]

Diff · v9