41 target_date DATE NOT NULL,
42 category TEXT NOT NULL,
43 image_url TEXT,
44 is_completed BOOLEAN DEFAULT FALSE,
45 created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
72 luxury_cost REAL NOT NULL,
73 description TEXT,
74 image_url TEXT,
75 popular_months TEXT,
76 created_at DATETIME DEFAULT CURRENT_TIMESTAMP
28 targetDate: string;
29 category: GoalCategory;
30 imageUrl?: string;
31 isCompleted: boolean;
32 createdAt: string;
52 };
53 description: string;
54 imageUrl: string;
55 popularMonths: string[];
56}
26 "title": "Markdown Editor",
27 "code":
28 "<!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\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>",
29 "performance": {
30 "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
9 name: row[1],
10 price: row[2],
11 image: row[3],
12 description: row[4]
13 })) || [];
22 name: row[1],
23 price: row[2],
24 image: row[3],
25 description: row[4]
26 };
10 name TEXT NOT NULL,
11 price REAL NOT NULL,
12 image TEXT NOT NULL,
13 description TEXT NOT NULL
14 )`);
36 name: "Wireless Headphones",
37 price: 99.99,
38 image: "🎧",
39 description: "High-quality wireless headphones with noise cancellation"
40 },
42 name: "Smart Watch",
43 price: 249.99,
44 image: "⌚",
45 description: "Feature-rich smartwatch with health tracking"
46 },
48 name: "Laptop Stand",
49 price: 39.99,
50 image: "💻",
51 description: "Ergonomic aluminum laptop stand for better posture"
52 },
54 name: "Coffee Mug",
55 price: 19.99,
56 image: "☕",
57 description: "Premium ceramic coffee mug with heat retention"
58 },
60 name: "Desk Lamp",
61 price: 79.99,
62 image: "💡",
63 description: "LED desk lamp with adjustable brightness and color temperature"
64 },
66 name: "Bluetooth Speaker",
67 price: 129.99,
68 image: "🔊",
69 description: "Portable Bluetooth speaker with 360-degree sound"
70 }
73 for (const product of sampleProducts) {
74 await sqlite.execute(
75 `INSERT INTO ${PRODUCTS_TABLE} (name, price, image, description) VALUES (?, ?, ?, ?)`,
76 [product.name, product.price, product.image, product.description]
77 );
78 }
50 card.className = 'product-card';
51 card.innerHTML = `
52 <div class="product-image">${product.image}</div>
53 <div class="product-info">
54 <h3 class="product-name">${this.escapeHtml(product.name)}</h3>
78}
79
80.product-image {
81 font-size: 4rem;
82 text-align: center;
5 name: string;
6 price: number;
7 image: string;
8 description: string;
9}
5## Features
6
7- Product listing with images, names, and prices
8- Purchase simulation with transaction logging
9- Simple, clean design with CSS styling
