🚨 Something Went Wrong

Please refresh the page or try again later.

Error Details

{this.state.error?.toString()}

\n );\n }\n\n return this.props.children;\n }\n}\n\nfunction AffiliateGuideModal({ isOpen, onClose }) {\n if (!isOpen) return null;\n\n return (\n

🔗 Affiliate Link Guide

\n 1\n

Choose an Affiliate Program (Amazon, eBay, etc.)

\n 2\n

Get your unique product tracking link

\n 3\n

Paste the link in the Affiliate Link field

💡 Quick Tips:

Use direct product page links
Ensure link includes your tracking ID
Test the link before saving

\n \n

\n );\n}\n\nfunction AffiliateModal({ \n isOpen, \n onClose, \n product, \n onSaveAffiliate \n}) {\n const [affiliateProgram, setAffiliateProgram] = useState('');\n const [affiliateLink, setAffiliateLink] = useState('');\n const [isGuideOpen, setIsGuideOpen] = useState(false);\n\n useEffect(() => {\n if (product) {\n setAffiliateProgram(product.affiliateProgram || '');\n setAffiliateLink(product.affiliateLink || '');\n }\n }, [product]);\n\n const handleSave = () => {\n if (!product) return;\n \n // Enhanced validation\n if (!affiliateProgram.trim()) {\n alert('Please select an Affiliate Program');\n return;\n }\n\n if (!affiliateLink.trim()) {\n alert('Please enter an affiliate link');\n return;\n }\n\n try {\n // Validate URL\n new URL(affiliateLink);\n\n onSaveAffiliate(product.id, {\n affiliateProgram,\n affiliateLink: affiliateLink.trim()\n });\n onClose();\n } catch (error) {\n alert('Please enter a valid URL');\n }\n };\n\n if (!isOpen) return null;\n\n return (\n <>\n

Add Affiliate Link for {product?.name}

\n \n

\n \n setAffiliateLink(e.target.value)}\n required\n />\n

\n \n \n

\n setIsGuideOpen(false)} \n />\n \n );\n}\n\nfunction ProductCard({ product, onEditAffiliate }) {\n return (\n

{\n e.target.src = `https://maxm-imggenurl.web.val.run/${product.name.toLowerCase().replace(/\\s+/g, '-')}`;\n }}\n />\n

{product.name}

{product.description}

\n ${product.price.toFixed(2)}\n {product.category}\n {product.affiliateLink ? (\n \n 🛒 Buy Now\n \n ) : (\n

\n \n \n Help customers buy this product!\n \n

\n )}\n

\n );\n}\n\nfunction WelcomeScreen() {\n const [animationClass, setAnimationClass] = useState('');\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setAnimationClass('fade-out');\n }, 1800);\n\n return () => clearTimeout(timer);\n }, []);\n\n const welcomePhrases = [\n \"🚀 Discover Amazing Deals!\",\n \"💡 Smart Shopping Starts Here\",\n \"🌟 Your Affiliate Marketplace\",\n \"💸 Savings at Your Fingertips\"\n ];\n\n const randomPhrase = welcomePhrases[Math.floor(Math.random() * welcomePhrases.length)];\n\n return (\n

🛍️ Affiliate Marketplace

{randomPhrase}

\n );\n}\n\nfunction App() {\n const [products, setProducts] = useState([]);\n const [showWelcome, setShowWelcome] = useState(true);\n const [isAddProductModalOpen, setIsAddProductModalOpen] = useState(false);\n const [isAffiliateModalOpen, setIsAffiliateModalOpen] = useState(false);\n const [selectedProduct, setSelectedProduct] = useState(null);\n const [searchTerm, setSearchTerm] = useState('');\n const [selectedCategory, setSelectedCategory] = useState('All');\n\n useEffect(() => {\n try {\n const savedProducts = localStorage.getItem('affiliateProducts');\n setProducts(savedProducts ? JSON.parse(savedProducts) : INITIAL_PRODUCTS);\n\n const welcomeTimer = setTimeout(() => {\n setShowWelcome(false);\n }, 2000);\n\n return () => clearTimeout(welcomeTimer);\n } catch (error) {\n console.error('Error loading products:', error);\n setProducts(INITIAL_PRODUCTS);\n }\n }, []);\n\n const saveProductsToLocalStorage = useCallback((updatedProducts) => {\n try {\n localStorage.setItem('affiliateProducts', JSON.stringify(updatedProducts));\n setProducts(updatedProducts);\n } catch (error) {\n console.error('Error saving products:', error);\n alert('Unable to save products. Please check your browser settings.');\n }\n }, []);\n\n const handleAddProduct = useCallback((newProduct) => {\n const updatedProducts = [...products, newProduct];\n saveProductsToLocalStorage(updatedProducts);\n }, [products, saveProductsToLocalStorage]);\n\n const handleSaveAffiliate = useCallback((productId, affiliateData) => {\n const updatedProducts = products.map(product => \n product.id === productId \n ? { ...product, ...affiliateData } \n : product\n );\n saveProductsToLocalStorage(updatedProducts);\n }, [products, saveProductsToLocalStorage]);\n\n const openAffiliateModal = useCallback((product) => {\n setSelectedProduct(product);\n setIsAffiliateModalOpen(true);\n }, []);\n\n const filteredProducts = products.filter(product => \n (selectedCategory === 'All' || product.category === selectedCategory) &&\n product.name.toLowerCase().includes(searchTerm.toLowerCase())\n );\n\n const categories = ['All', ...new Set(products.map(p => p.category))];\n\n if (showWelcome) {\n return ;\n }\n\n return (\n \n

🛍️ Affiliate Marketplace

\n setSearchTerm(e.target.value)}\n className=\"search-input\"\n />\n \n

\n \n

\n\n

\n {filteredProducts.map(product => (\n \n ))}\n

\n\n {isAddProductModalOpen && (\n setIsAddProductModalOpen(false)}\n onAddProduct={handleAddProduct}\n />\n )}\n\n {isAffiliateModalOpen && (\n setIsAffiliateModalOpen(false)}\n product={selectedProduct}\n onSaveAffiliate={handleSaveAffiliate}\n />\n )}\n\n \n

\n \n );\n}\n\nfunction AddProductModal({ \n isOpen, \n onClose, \n onAddProduct \n}) {\n const [name, setName] = useState('');\n const [price, setPrice] = useState('');\n const [category, setCategory] = useState('');\n const [description, setDescription] = useState('');\n const [image, setImage] = useState('');\n\n const handleSubmit = useCallback(() => {\n // Enhanced validation\n if (!name.trim()) {\n alert('Product name is required');\n return;\n }\n\n if (!price || parseFloat(price) <= 0) {\n alert('Please enter a valid price');\n return;\n }\n\n if (!category) {\n alert('Please select a category');\n return;\n }\n\n const newProduct = {\n id: Date.now(),\n name: name.trim(),\n price: parseFloat(price),\n category,\n description: description.trim(),\n image: image.trim() || `https://maxm-imggenurl.web.val.run/${name.toLowerCase().replace(/\\s+/g, '-')}`,\n affiliateLink: \"\",\n affiliateProgram: \"\"\n };\n\n onAddProduct(newProduct);\n onClose();\n \n // Reset form\n setName('');\n setPrice('');\n setCategory('');\n setDescription('');\n setImage('');\n }, [name, price, category, description, image, onAddProduct, onClose]);\n\n if (!isOpen) return null;\n\n return (\n

Add New Product

\n setName(e.target.value)}\n required\n />\n setPrice(e.target.value)}\n required\n step=\"0.01\"\n min=\"0\"\n />\n \n

setDescription(e.target.value)}\n        />\n        <input \n          type=\"text\" \n          placeholder=\"Image URL (Optional)\" \n          value={image}\n          onChange={(e) => setImage(e.target.value)}\n        />\n        <div className=\"modal-actions\">\n          <button onClick={handleSubmit}>Add Product</button>\n          <button onClick={onClose}>Cancel</button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(\n    <React.StrictMode>\n      <App />\n    </React.StrictMode>\n  );\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>Affiliate Marketplace</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: {\n      \"Content-Type\": \"text/html\",\n    },\n  });\n}\n\nconst css = `\nbody {\n  margin: 0;\n  font-family: system-ui, sans-serif;\n  background-color: #f4f4f4;\n  line-height: 1.6;\n}\n\n.app-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\nheader {\n  text-align: center;\n  margin-bottom: 20px;\n}\n\n.header-actions {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 15px;\n}\n\n.search-input {\n  flex-grow: 1;\n  margin-right: 10px;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.add-product-btn {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px 15px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nnav {\n  display: flex;\n  justify-content: center;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\nnav button {\n  background-color: #f1f1f1;\n  border: none;\n  padding: 10px 15px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nnav button.active {\n  background-color: #4CAF50;\n  color: white;\n}\n\n.product-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.product-card {\n  background-color: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: transform 0.3s;\n}\n\n.product-card:hover {\n  transform: scale(1.03);\n}\n\n.product-image {\n  width: 100%;\n  height: 250px;\n  object-fit: cover;\n}\n\n.product-details {\n  padding: 15px;\n}\n\n.product-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.price {\n  font-weight: bold;\n  color: #4CAF50;\n}\n\n.category {\n  background-color: #f1f1f1;\n  padding: 5px 10px;\n  border-radius: 15px;\n  font-size: 0.8em;\n}\n\n.buy-now-btn, .add-affiliate-btn {\n  background-color: #2196F3;\n  color: white;\n  border: none;\n  padding: 5px 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  width: 400px;\n  max-width: 90%;\n}\n\n.modal-content input,\n.modal-content select,\n.modal-content textarea {\n  width: 100%;\n  margin-bottom: 10px;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.modal-actions {\n  display: flex;\n  justify-content: space-between;\n}\n\n.affiliate-action-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.affiliate-hint {\n  font-size: 0.7em;\n  color: #888;\n  margin-top: 5px;\n}\n\n.affiliate-help {\n  text-align: right;\n  margin-bottom: 10px;\n}\n\n.help-button {\n  background-color: #f1f1f1;\n  border: none;\n  padding: 5px 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.affiliate-guide {\n  text-align: center;\n}\n\n.guide-steps {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n}\n\n.guide-step {\n  flex: 1;\n  margin: 0 10px;\n  padding: 10px;\n  background-color: #f1f1f1;\n  border-radius: 8px;\n}\n\n.step-number {\n  display: inline-block;\n  width: 30px;\n  height: 30px;\n  background-color: #4CAF50;\n  color: white;\n  border-radius: 50%;\n  text-align: center;\n  line-height: 30px;\n  margin-bottom: 10px;\n}\n\n.guide-tips {\n  background-color: #e8f5e9;\n  padding: 15px;\n  border-radius: 8px;\n}\n\n.guide-tips ul {\n  list-style-type: none;\n  padding: 0;\n}\n\n.guide-tips li {\n  margin-bottom: 10px;\n  position: relative;\n  padding-left: 20px;\n}\n\n.guide-tips li::before {\n  content: \"✅\";\n  position: absolute;\n  left: 0;\n}\n\n.welcome-screen {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  color: white;\n  text-align: center;\n  transition: opacity 0.5s ease-out;\n}\n\n.welcome-screen.fade-out {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.welcome-content {\n  text-align: center;\n  animation: pulse 1.5s infinite alternate;\n}\n\n.dynamic-phrase {\n  font-size: 1.2em;\n  margin-top: 10px;\n  opacity: 0.8;\n}\n\n.welcome-spinner {\n  display: flex;\n  justify-content: center;\n  margin-top: 20px;\n}\n\n.spinner {\n  border: 4px solid rgba(255, 255, 255, 0.3);\n  border-top: 4px solid white;\n  border-radius: 50%;\n  width: 40px;\n  height: 40px;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes pulse {\n  from { transform: scale(1); }\n  to { transform: scale(1.05); }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.error-screen {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  text-align: center;\n  background-color: #ffebee;\n  color: #d32f2f;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 20px;\n  padding: 10px;\n  background-color: #f1f1f1;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Hiii/Rajaram/code/main.tsx","extension","actionData","errors"]
</article></body></html>