🛍️ Simple Store

Discover amazing products at great prices!

\n\n

Loading products...

\n\n \n \n\n \n\n \n \n\n",[],[224,231],{"_104":239,"_95":240,"_153":241,"_155":225,"_156":138,"_157":242,"_159":160,"_106":243,"_100":32,"_162":182,"_164":244,"_165":22,"_166":-5,"_167":245,"_98":246},"f740b260-3bc8-11f0-b79d-9e149126039e","script.js","f740b31e-3bc8-11f0-b79d-9e149126039e",8,["D",1748439477615],"// Simple Store Frontend JavaScript\n\nclass Store {\n constructor() {\n this.products = [];\n this.init();\n }\n\n async init() {\n await this.loadProducts();\n this.setupEventListeners();\n }\n\n async loadProducts() {\n const loadingEl = document.getElementById('loading');\n const productsContainer = document.getElementById('products-container');\n const errorEl = document.getElementById('error');\n\n try {\n const response = await fetch('/api/products');\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n \n this.products = await response.json();\n this.renderProducts();\n \n loadingEl.style.display = 'none';\n productsContainer.style.display = 'grid';\n } catch (error) {\n console.error('Error loading products:', error);\n loadingEl.style.display = 'none';\n errorEl.style.display = 'block';\n errorEl.textContent = 'Failed to load products. Please try again later.';\n }\n }\n\n renderProducts() {\n const container = document.getElementById('products-container');\n container.innerHTML = '';\n\n this.products.forEach(product => {\n const productCard = this.createProductCard(product);\n container.appendChild(productCard);\n });\n }\n\n createProductCard(product) {\n const card = document.createElement('div');\n card.className = 'product-card';\n card.innerHTML = `\n

${product.image}

${this.escapeHtml(product.name)}

${this.escapeHtml(product.description)}

$${product.price.toFixed(2)}

\n \n

\n `;\n\n const buyBtn = card.querySelector('.buy-btn');\n buyBtn.addEventListener('click', () => this.handlePurchase(product));\n\n return card;\n }\n\n async handlePurchase(product) {\n const buyBtn = document.querySelector(`[data-product-id=\"${product.id}\"]`);\n buyBtn.disabled = true;\n buyBtn.textContent = 'Processing...';\n\n try {\n const response = await fetch('/api/purchase', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ productId: product.id }),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const result = await response.json();\n \n if (result.success) {\n this.showPurchaseModal(result.transaction);\n } else {\n throw new Error(result.message || 'Purchase failed');\n }\n } catch (error) {\n console.error('Purchase error:', error);\n alert('Purchase failed. Please try again.');\n } finally {\n buyBtn.disabled = false;\n buyBtn.textContent = 'Buy Now';\n }\n }\n\n showPurchaseModal(transaction) {\n const modal = document.getElementById('purchase-modal');\n const details = document.getElementById('purchase-details');\n \n const date = new Date(transaction.timestamp).toLocaleString();\n \n details.innerHTML = `\n

Product: ${this.escapeHtml(transaction.product_name)}

Price: $${transaction.price.toFixed(2)}

Transaction ID: #${transaction.id}

Date: ${date}

\n `;\n \n modal.style.display = 'flex';\n }\n\n setupEventListeners() {\n const modal = document.getElementById('purchase-modal');\n const closeBtn = document.querySelector('.close');\n const closeModalBtn = document.getElementById('close-modal');\n\n const closeModal = () => {\n modal.style.display = 'none';\n };\n\n closeBtn.addEventListener('click', closeModal);\n closeModalBtn.addEventListener('click', closeModal);\n\n // Close modal when clicking outside\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n closeModal();\n }\n });\n\n // Close modal with Escape key\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && modal.style.display === 'flex') {\n closeModal();\n }\n });\n }\n\n escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n}\n\n// Initialize the store when the page loads\ndocument.addEventListener('DOMContentLoaded', () => {\n new Store();\n});",[],[224,240],{"_104":248,"_95":249,"_153":250,"_155":225,"_156":138,"_157":251,"_159":160,"_106":252,"_100":32,"_162":234,"_164":253,"_165":22,"_166":-5,"_167":254,"_98":255},"ebb89d68-3bc8-11f0-996b-9e149126039e","style.css","ebb89e26-3bc8-11f0-996b-9e149126039e",7,["D",1748439458260],"/* Reset and base styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: #333;\n background-color: #f8f9fa;\n}\n\n/* Header */\nheader {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n text-align: center;\n padding: 2rem 1rem;\n margin-bottom: 2rem;\n}\n\nheader h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n font-weight: 700;\n}\n\nheader p {\n font-size: 1.1rem;\n opacity: 0.9;\n}\n\n/* Main content */\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n min-height: 60vh;\n}\n\n/* Loading and error states */\n.loading, .error {\n text-align: center;\n padding: 3rem;\n font-size: 1.2rem;\n}\n\n.error {\n color: #dc3545;\n background-color: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 8px;\n margin: 2rem 0;\n}\n\n/* Products grid */\n.products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n margin-bottom: 3rem;\n}\n\n/* Product card */\n.product-card {\n background: white;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.product-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\n}\n\n.product-image {\n font-size: 4rem;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(45deg, #f8f9fa, #e9ecef);\n}\n\n.product-info {\n padding: 1.5rem;\n}\n\n.product-name {\n font-size: 1.3rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n color: #2c3e50;\n}\n\n.product-description {\n color: #6c757d;\n margin-bottom: 1rem;\n font-size: 0.95rem;\n}\n\n.product-price {\n font-size: 1.5rem;\n font-weight: 700;\n color: #28a745;\n margin-bottom: 1rem;\n}\n\n/* Buttons */\n.btn {\n display: inline-block;\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 6px;\n font-size: 1rem;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n}\n\n.btn-primary {\n background-color: #007bff;\n color: white;\n}\n\n.btn-primary:hover {\n background-color: #0056b3;\n transform: translateY(-1px);\n}\n\n.btn-success {\n background-color: #28a745;\n color: white;\n width: 100%;\n}\n\n.btn-success:hover {\n background-color: #218838;\n transform: translateY(-1px);\n}\n\n.btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Modal */\n.modal {\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-content {\n background-color: white;\n padding: 2rem;\n border-radius: 12px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n max-width: 500px;\n width: 90%;\n text-align: center;\n position: relative;\n}\n\n.close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n font-size: 2rem;\n cursor: pointer;\n color: #aaa;\n}\n\n.close:hover {\n color: #333;\n}\n\n.modal h2 {\n margin-bottom: 1rem;\n color: #28a745;\n}\n\n#purchase-details {\n background-color: #f8f9fa;\n padding: 1rem;\n border-radius: 6px;\n margin: 1rem 0;\n text-align: left;\n}\n\n#purchase-details p {\n margin-bottom: 0.5rem;\n}\n\n/* Footer */\nfooter {\n background-color: #343a40;\n color: white;\n text-align: center;\n padding: 2rem;\n margin-top: 3rem;\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n header h1 {\n font-size: 2rem;\n }\n \n .products-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .product-card {\n margin: 0 0.5rem;\n }\n \n .modal-content {\n margin: 1rem;\n padding: 1.5rem;\n }\n}",[],[224,249],[224],{"_104":258,"_95":259,"_153":260,"_155":-5,"_156":138,"_157":261,"_159":160,"_106":262,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":263,"_98":272},"ceb98dc6-3bc8-11f0-90c7-9e149126039e","shared","89efd4a6-95b2-4610-93d3-72e4ab1ef562",3,["D",1748439409595],[264],{"_104":265,"_95":266,"_153":267,"_155":260,"_156":138,"_157":261,"_159":160,"_106":268,"_100":32,"_162":182,"_164":269,"_165":22,"_166":-5,"_167":270,"_98":271},"ceb93934-3bc8-11f0-90c7-9e149126039e","types.ts","ceb939fc-3bc8-11f0-90c7-9e149126039e",["D",1748439409595],"// Shared types for the e-commerce application\n\nexport interface Product {\n id: number;\n name: string;\n price: number;\n image: string;\n description: string;\n}\n\nexport interface Transaction {\n id: number;\n product_id: number;\n product_name: string;\n price: number;\n timestamp: string;\n}\n\nexport interface PurchaseRequest {\n productId: number;\n}\n\nexport interface PurchaseResponse {\n success: boolean;\n transaction: Transaction;\n message: string;\n}",[],[259,266],[259],{"_104":274,"_95":275,"_153":276,"_155":-5,"_156":138,"_157":191,"_159":160,"_106":277,"_100":32,"_162":234,"_164":278,"_165":22,"_166":-5,"_167":279,"_98":280},"cc38cd14-3bc8-11f0-b308-9e149126039e","README.md","cc38cddc-3bc8-11f0-b308-9e149126039e",["D",1748439405420],"# Simple E-commerce Website\n\nA basic e-commerce website that displays products and simulates purchases.\n\n## Features\n\n- Product listing with images, names, and prices\n- Purchase simulation with transaction logging\n- Simple, clean design with CSS styling\n- SQLite database for storing products and transactions\n\n## Structure\n\n- `backend/index.ts` - Main Hono server with API routes\n- `backend/database/` - Database setup and queries\n- `frontend/` - HTML, CSS, and JavaScript for the website\n- `shared/` - Shared types and utilities\n\n## Usage\n\nThe main entry point is `backend/index.ts` which serves both the API and static files.",[],[275],{"_104":282,"_95":99,"_153":283,"_155":-5,"_156":138,"_157":284,"_159":160,"_106":285,"_100":191,"_162":286,"_164":287,"_165":22,"_166":-5,"_167":288,"_98":289},"08a2b72e-3bc9-11f0-ab2f-9e149126039e","4266729e-3bc8-11f0-b8ca-9e149126039e",12,["D",1748439506755],"http","// Main entry point for the e-commerce website\nimport app from \"./backend/index.ts\";\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[99],"files",[150,169,175,186,196,203,212,222,229,238,247,257,264,273,281],"counts",{"_294":32,"_295":181,"_296":32,"_297":298},"pulls","branches","forks","envVars",{"_299":32,"_300":32},"count","emptyCount","contents",[],{"_104":282,"_95":99,"_153":283,"_155":-5,"_156":138,"_157":284,"_159":160,"_106":304,"_100":191,"_162":286,"_164":287,"_165":22,"_166":-5,"_98":305},["D",1748439506755],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":314,"_148":319,"_290":365,"_234":366,"_301":368,"_369":-5,"_370":-5,"_371":-5,"_372":-5,"_373":374},{"_104":105,"_95":96,"_106":315,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":316,"_132":317,"_135":318,"_147":22},["D",1748439174182],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[320,341,353,359,362],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":321,"_98":340},[322,331,337],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":158,"_159":160,"_106":173,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":323,"_98":330},[324,327],{"_104":176,"_95":177,"_153":178,"_155":172,"_156":138,"_157":179,"_159":160,"_106":180,"_100":181,"_162":182,"_164":183,"_165":22,"_166":-5,"_167":325,"_98":326},[],[152,171,177],{"_104":187,"_95":188,"_153":189,"_155":172,"_156":138,"_157":101,"_159":22,"_106":190,"_100":191,"_162":182,"_164":192,"_165":22,"_166":-5,"_167":328,"_98":329},[],[152,171,188],[152,171],{"_104":197,"_95":198,"_153":199,"_155":154,"_156":138,"_157":200,"_159":160,"_106":201,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":332,"_98":336},[333],{"_104":204,"_95":205,"_153":206,"_155":199,"_156":138,"_157":200,"_159":160,"_106":207,"_100":32,"_162":182,"_164":208,"_165":22,"_166":-5,"_167":334,"_98":335},[],[152,198,205],[152,198],{"_104":213,"_95":214,"_153":215,"_155":154,"_156":138,"_157":216,"_159":160,"_106":217,"_100":32,"_162":182,"_164":218,"_165":22,"_166":-5,"_167":338,"_98":339},[],[152,214],[152],{"_104":223,"_95":224,"_153":225,"_155":-5,"_156":138,"_157":226,"_159":160,"_106":227,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":342,"_98":352},[343,346,349],{"_104":230,"_95":231,"_153":232,"_155":225,"_156":138,"_157":226,"_159":160,"_106":233,"_100":32,"_162":234,"_164":235,"_165":22,"_166":-5,"_167":344,"_98":345},[],[224,231],{"_104":239,"_95":240,"_153":241,"_155":225,"_156":138,"_157":242,"_159":160,"_106":243,"_100":32,"_162":182,"_164":244,"_165":22,"_166":-5,"_167":347,"_98":348},[],[224,240],{"_104":248,"_95":249,"_153":250,"_155":225,"_156":138,"_157":251,"_159":160,"_106":252,"_100":32,"_162":234,"_164":253,"_165":22,"_166":-5,"_167":350,"_98":351},[],[224,249],[224],{"_104":258,"_95":259,"_153":260,"_155":-5,"_156":138,"_157":261,"_159":160,"_106":262,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":354,"_98":358},[355],{"_104":265,"_95":266,"_153":267,"_155":260,"_156":138,"_157":261,"_159":160,"_106":268,"_100":32,"_162":182,"_164":269,"_165":22,"_166":-5,"_167":356,"_98":357},[],[259,266],[259],{"_104":274,"_95":275,"_153":276,"_155":-5,"_156":138,"_157":191,"_159":160,"_106":277,"_100":32,"_162":234,"_164":278,"_165":22,"_166":-5,"_167":360,"_98":361},[],[275],{"_104":282,"_95":99,"_153":283,"_155":-5,"_156":138,"_157":284,"_159":160,"_106":285,"_100":191,"_162":286,"_164":287,"_165":22,"_166":-5,"_167":363,"_98":364},[],[99],[320,322,324,327,331,333,337,341,343,346,349,353,355,359,362],{"_104":282,"_95":99,"_153":283,"_155":-5,"_156":138,"_157":284,"_159":160,"_106":304,"_100":191,"_162":286,"_164":287,"_165":22,"_166":-5,"_98":367},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

Purchase Successful! 🎉

${this.escapeHtml(product.name)}

w_ache

Website