Val Town Code SearchReturn to Val Town

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.

3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5// Updated Product Data with High-Quality Imagery
6const PRODUCTS = [
7  // Perfumes
12    category: "perfumes",
13    price: 599.99,
14    image: "https://maxm-imggenurl.web.val.run/elegant-black-perfume-bottle-with-gold-accents",
15    description: "Elegant Essence",
16    details: "A unique blend of bergamot, black pepper, and sandalwood.",
21    category: "perfumes",
22    price: 899.99,
23    image: "https://maxm-imggenurl.web.val.run/elegant-black-perfume-bottle-with-gold-accents",
24    description: "Sophisticated Fragrance for the Discerning Individual",
25    details: "A complex blend of bergamot, black pepper, and sandalwood.",
30    category: "perfumes",
31    price: 749.50,
32    image: "https://scentify.co.za/cdn/shop/files/chanel-no-5-by-chanel-443281.jpg?v=1732565602&width=1280",
33    description: "Chanel No. 5 by Chanel",
34    details: "Crafted with rare rose extract and subtle musk undertones.",
41    category: "health",
42    price: 299.99,
43    image: "https://maxm-imggenurl.web.val.run/sleek-health-supplement-bottle-minimalist-design",
44    description: "Premium Wellness Supplement",
45    details: "Scientifically formulated with essential nutrients and antioxidants.",
50    category: "health",
51    price: 249.50,
52    image: "https://maxm-imggenurl.web.val.run/modern-health-supplement-with-clean-packaging",
53    description: "Advanced Immune Support",
54    details: "Blend of natural extracts to enhance overall wellness.",
61    category: "haircare",
62    price: 179.99,
63    image: "https://maxm-imggenurl.web.val.run/luxurious-hair-serum-in-glass-bottle",
64    description: "Intensive Hair Restoration",
65    details: "Nourishing formula with keratin and argan oil.",
70    category: "haircare",
71    price: 129.50,
72    image: "https://maxm-imggenurl.web.val.run/professional-hair-treatment-sleek-packaging",
73    description: "Advanced Scalp Care",
74    details: "Scientifically developed to promote hair health and growth.",
81    category: "sneakers",
82    price: 1299.99,
83    image: "https://maxm-imggenurl.web.val.run/minimalist-white-and-black-luxury-sneakers",
84    description: "High-Performance Footwear",
85    details: "Precision-engineered with premium materials and advanced comfort technology.",
90    category: "sneakers",
91    price: 899.50,
92    image: "https://maxm-imggenurl.web.val.run/sleek-black-and-white-designer-sneakers",
93    description: "Timeless Athletic Style",
94    details: "Sophisticated design meets unparalleled comfort and durability.",
101    category: "homedecor",
102    price: 349.99,
103    image: "https://maxm-imggenurl.web.val.run/modern-white-ceramic-vase-with-clean-lines",
104    description: "Contemporary Design Accent",
105    details: "Handcrafted ceramic vase with elegant, minimalist aesthetic.",
110    category: "homedecor",
111    price: 249.50,
112    image: "https://maxm-imggenurl.web.val.run/black-and-white-luxury-throw-pillow",
113    description: "Sophisticated Home Accessory",
114    details: "Premium fabric with intricate textural design.",
171            >
172              <img
173                src={product.image}
174                alt={product.name}
175                style={styles.productImage}
176              />
177              <div style={styles.productDetails}>
310    boxShadow: "0 0 15px rgba(0,0,0,0.1)",
311  },
312  productImage: {
313    maxWidth: "100%",
314    height: "250px",

3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5// Updated Product Data with High-Quality Imagery
6const PRODUCTS = [
7  // Perfumes
11    category: "perfumes",
12    price: 899.99,
13    image: "https://maxm-imggenurl.web.val.run/elegant-black-perfume-bottle-with-gold-accents",
14    description: "Sophisticated Fragrance for the Discerning Individual",
15    details: "A complex blend of bergamot, black pepper, and sandalwood.",
20    category: "perfumes",
21    price: 749.50,
22    image: "https://maxm-imggenurl.web.val.run/luxurious-pink-perfume-bottle-with-crystal-stopper",
23    description: "Delicate Floral Essence",
24    details: "Crafted with rare rose extract and subtle musk undertones.",
31    category: "health",
32    price: 299.99,
33    image: "https://maxm-imggenurl.web.val.run/sleek-health-supplement-bottle-minimalist-design",
34    description: "Premium Wellness Supplement",
35    details: "Scientifically formulated with essential nutrients and antioxidants.",
40    category: "health",
41    price: 249.50,
42    image: "https://maxm-imggenurl.web.val.run/modern-health-supplement-with-clean-packaging",
43    description: "Advanced Immune Support",
44    details: "Blend of natural extracts to enhance overall wellness.",
51    category: "haircare",
52    price: 179.99,
53    image: "https://maxm-imggenurl.web.val.run/luxurious-hair-serum-in-glass-bottle",
54    description: "Intensive Hair Restoration",
55    details: "Nourishing formula with keratin and argan oil.",
60    category: "haircare",
61    price: 129.50,
62    image: "https://maxm-imggenurl.web.val.run/professional-hair-treatment-sleek-packaging",
63    description: "Advanced Scalp Care",
64    details: "Scientifically developed to promote hair health and growth.",
71    category: "sneakers",
72    price: 1299.99,
73    image: "https://maxm-imggenurl.web.val.run/minimalist-white-and-black-luxury-sneakers",
74    description: "High-Performance Footwear",
75    details: "Precision-engineered with premium materials and advanced comfort technology.",
80    category: "sneakers",
81    price: 899.50,
82    image: "https://maxm-imggenurl.web.val.run/sleek-black-and-white-designer-sneakers",
83    description: "Timeless Athletic Style",
84    details: "Sophisticated design meets unparalleled comfort and durability.",
91    category: "homedecor",
92    price: 349.99,
93    image: "https://maxm-imggenurl.web.val.run/modern-white-ceramic-vase-with-clean-lines",
94    description: "Contemporary Design Accent",
95    details: "Handcrafted ceramic vase with elegant, minimalist aesthetic.",
100    category: "homedecor",
101    price: 249.50,
102    image: "https://maxm-imggenurl.web.val.run/black-and-white-luxury-throw-pillow",
103    description: "Sophisticated Home Accessory",
104    details: "Premium fabric with intricate textural design.",
161            >
162              <img
163                src={product.image}
164                alt={product.name}
165                style={styles.productImage}
166              />
167              <div style={styles.productDetails}>
300    boxShadow: "0 0 15px rgba(0,0,0,0.1)",
301  },
302  productImage: {
303    maxWidth: "100%",
304    height: "250px",

56      <input
57        type="file"
58        accept="image/*"
59        onChange={(e) => setFile(e.target.files[0])}
60        required
91          <div key={artwork.id} className="artwork-card">
92            <img
93              src={artwork.imageUrl}
94              alt={artwork.title}
95              loading="lazy"
136      title TEXT NOT NULL,
137      description TEXT,
138      image_path TEXT NOT NULL,
139      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
140    )
164      await sqlite.execute(
165        `INSERT INTO ${KEY}_artworks_${SCHEMA_VERSION} 
166        (title, description, image_path) VALUES (?, ?, ?)`,
167        [title, description, filePath],
168      );
179    try {
180      const result = await sqlite.execute(
181        `SELECT id, title, description, image_path 
182        FROM ${KEY}_artworks_${SCHEMA_VERSION} 
183        ORDER BY created_at DESC LIMIT 50`,
184      );
185
186      // Convert image paths to base64 for client
187      const artworks = await Promise.all(result.rows.map(async (row) => {
188        const imageBuffer = await Deno.readFile(row.image_path);
189        const base64Image = btoa(
190          String.fromCharCode.apply(null, new Uint8Array(imageBuffer)),
191        );
192
195          title: row.title,
196          description: row.description,
197          imageUrl: `data:image/jpeg;base64,${base64Image}`,
198        };
199      }));

23    "prompt": "two column interactive markdown editor with live preview and default text to explain markdown features",
24    "title": "Markdown Editor",
25    "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
26    "performance": {
27      "tokensPerSecond": 4092.96,

21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25          

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.

1# ☔️ Umbrella reminder if there's rain today
2
3![Screenshot 2023-09-14 at 12.31.32.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d82916ca-f8d9-4b49-88c6-420ab67a7700/public)
4
5## Setup

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install