9 name: "Tailored Wool Blazer",
10 price: 1299,
11 image: "https://maxm-imggenurl.web.val.run/luxury-mens-navy-wool-blazer"
12 },
13 {
15 name: "Italian Leather Shoes",
16 price: 899,
17 image: "https://maxm-imggenurl.web.val.run/luxury-mens-brown-leather-shoes"
18 }
19 ],
23 name: "Silk Evening Gown",
24 price: 2499,
25 image: "https://maxm-imggenurl.web.val.run/luxury-womens-silk-evening-gown"
26 },
27 {
29 name: "Designer Leather Handbag",
30 price: 1799,
31 image: "https://maxm-imggenurl.web.val.run/luxury-womens-leather-handbag"
32 }
33 ]
37 return (
38 <div className="product-card">
39 <img src={product.image} alt={product.name} />
40 <h3>{product.name}</h3>
41 <p>${product.price.toLocaleString()}</p>
9## Example
10This val tracks mentions of "Val Town" and related terms, excluding noise like retweets and irrelevant accounts. Notifications are sent to a Discord webhook but can be easily reconfigured for other platforms.
11<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/85912106-f625-443e-5321-6e2699453200/public" width="500"/>
12To see exactly how we use this template at Val Town: https://www.val.town/v/stevekrouse/twitterAlert
13
16### 1. Fork this Val
17To use this template, fork this val on the top right corner of this page.
18
19
20### 2. View Source Code
21<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
22
23
24### 3. Customize Query
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
458 <title>Smart Quiz Challenge</title>
459 <meta name="viewport" content="width=device-width, initial-scale=1">
460 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>">
461 <style>
462 body {
11 price: 129.99,
12 style: "Casual",
13 imageUrl: "https://maxm-imggenurl.web.val.run/slim-fit-denim-jacket"
14 },
15 {
19 price: 349.50,
20 style: "Formal",
21 imageUrl: "https://maxm-imggenurl.web.val.run/elegant-silk-gown"
22 },
23 {
27 price: 79.99,
28 style: "Streetwear",
29 imageUrl: "https://maxm-imggenurl.web.val.run/oversized-hoodie"
30 },
31 {
35 price: 249.00,
36 style: "Professional",
37 imageUrl: "https://maxm-imggenurl.web.val.run/wool-blazer"
38 }
39];
42 return (
43 <div className="clothing-card">
44 <img src={item.imageUrl} alt={item.name} />
45 <div className="clothing-details">
46 <h3>{item.brand}</h3>
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
19 description: "Soothing lavender soap with organic essential oils",
20 price: 8.99,
21 image: "https://maxm-imggenurl.web.val.run/lavender-handmade-soap"
22 },
23 {
26 description: "Refreshing citrus blend with natural zest",
27 price: 9.50,
28 image: "https://maxm-imggenurl.web.val.run/citrus-handmade-soap"
29 },
30 {
33 description: "Nourishing soap with raw honey and almond extract",
34 price: 7.99,
35 image: "https://maxm-imggenurl.web.val.run/honey-almond-soap"
36 }
37];
118 }}>
119 <img
120 src={product.image}
121 alt={product.name}
122 style={{ maxWidth: "200px", borderRadius: "10px" }}
11 benefits: string[];
12 price: number;
13 imageUrl: string;
14 additionalImages: string[];
15}
16
54 <div className="product-modal-content">
55 <button className="close-modal" onClick={onClose}>×</button>
56 <div className="product-modal-images">
57 <img src={product.imageUrl} alt={product.name} className="main-image" />
58 <div className="additional-images">
59 {product.additionalImages.map((img, index) => (
60 <img key={index} src={img} alt={`${product.name} detail ${index + 1}`} />
61 ))}
217 <div key={product.id} className="product-card">
218 <img
219 src={product.imageUrl}
220 alt={product.name}
221 onClick={() => setSelectedProduct(product)}
337 benefits TEXT,
338 price REAL NOT NULL,
339 image_url TEXT,
340 additional_images TEXT
341 )
342 `);
362 await sqlite.execute(`
363 INSERT INTO ${KEY}_products_${SCHEMA_VERSION}
364 (name, description, full_description, ingredients, benefits, price, image_url, additional_images) VALUES
365 (
366 'Lavender Dream',
525 cursor: pointer;
526}
527.product-modal-images {
528 flex: 1;
529 display: flex;
530 flex-direction: column;
531}
532.product-modal-images .main-image {
533 width: 100%;
534 height: 400px;
536 margin-bottom: 15px;
537}
538.additional-images {
539 display: flex;
540 gap: 10px;
541}
542.additional-images img {
543 width: 100px;
544 height: 100px;
18 price: 999.99,
19 description: "High performance laptop",
20 image: "https://maxm-imggenurl.web.val.run/laptop"
21 },
22 {
26 price: 599.99,
27 description: "Latest model smartphone",
28 image: "https://maxm-imggenurl.web.val.run/smartphone"
29 },
30 {
34 price: 29.99,
35 description: "Comfortable cotton t-shirt",
36 image: "https://maxm-imggenurl.web.val.run/tshirt"
37 },
38 {
42 price: 14.99,
43 description: "Bestselling fiction book",
44 image: "https://maxm-imggenurl.web.val.run/book"
45 }
46];
74 {filteredProducts.map(product => (
75 <div key={product.id} className="product-card">
76 <img src={product.image} alt={product.name} />
77 <h3>{product.name}</h3>
78 <p>{product.description}</p>
