Val Town Code SearchReturn to Val Town

187## Val Town Platform Specifics
188- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
189- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

2  // Background
3  BACKGROUND:
4    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b501664-722e-4be8-cf71-83aab7756e00/public",
5
6  // Stevens
7  STEVENS_FRONT:
8    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b8432bb-add2-44ad-bb12-44b8ea215500/public",
9  STEVENS_BACK:
10    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e28da8ab-7710-4b82-8e32-8fdf65c2ed00/public",
11  STEVENS_WALKING:
12    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bd7b9997-09b2-4b35-6eb9-9975a85bb700/public",
13
14  // Mailman
15  MAILMAN_STANDING:
16    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/20a6493d-cc31-475e-aa83-ac97d317e400/public",
17  MAILMAN_WALKING:
18    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61604576-8a83-4d85-d5e4-8e8e26641700/public",
19};
20

82  const [cookieAndTeaMode, setCookieAndTeaMode] = useState(false);
83
84  // Fetch images from backend instead of blob storage directly
85  useEffect(() => {
86    // Set default background color in case image doesn't load
87    if (document.body) {
88      document.body.style.backgroundColor = "#2D1700"; // Dark brown leather color
89    }
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
95        throw new Error("Failed to load avatar image");
96      })
97      .then((imageBlob) => {
98        const url = URL.createObjectURL(imageBlob);
99        setAvatarUrl(url);
100      })
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
109        throw new Error("Failed to load wood background");
110      })
111      .then((imageBlob) => {
112        const url = URL.createObjectURL(imageBlob);
113        setWoodUrl(url);
114
115        // Apply wood background to body
116        if (document.body) {
117          document.body.style.backgroundImage = `url(${url})`;
118        }
119      })
362      return {
363        position: SCENE_ELEMENTS.DESK_SITTING,
364        image: ASSETS.STEVENS_FRONT,
365        highlightElement: SCENE_ELEMENTS.DESK,
366        animationClass: "no-animation",
372      return {
373        position: SCENE_ELEMENTS.DESK_SITTING,
374        image: ASSETS.STEVENS_FRONT,
375        highlightElement: null,
376        animationClass: "no-animation",
387            y: SCENE_ELEMENTS.MAILBOX.y - 20,
388          },
389          image: ASSETS.STEVENS_BACK,
390          highlightElement: SCENE_ELEMENTS.MAILBOX,
391          animationClass: "walk-to-mailbox",
398            y: SCENE_ELEMENTS.CALENDAR.y + 30,
399          },
400          image: ASSETS.STEVENS_BACK,
401          highlightElement: SCENE_ELEMENTS.CALENDAR,
402          animationClass: "walk-to-calendar",
409            y: SCENE_ELEMENTS.TELEGRAM.y + 10,
410          },
411          image: ASSETS.STEVENS_BACK,
412          highlightElement: SCENE_ELEMENTS.TELEGRAM,
413          animationClass: "walk-to-telegram",
417        return {
418          position: SCENE_ELEMENTS.OUTSIDE,
419          image: ASSETS.STEVENS_FRONT,
420          highlightElement: null,
421          animationClass: "walk-to-outside",
425        return {
426          position: SCENE_ELEMENTS.DESK_SITTING,
427          image: ASSETS.STEVENS_FRONT,
428          highlightElement: SCENE_ELEMENTS.DESK,
429          animationClass: "walk-to-desk",
623          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4),
624            0 3px 8px rgba(0, 0, 0, 0.5);
625          image-rendering: pixelated;
626          cursor: pointer;
627          transition: transform 0.2s;
634        .notebook-pages {
635          background-color: #f8f1e0;
636          background-image: linear-gradient(#d6c6a5 1px, transparent 1px);
637          background-size: 100% 16px;
638          box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
639          image-rendering: pixelated;
640        }
641
652
653        .pixel-character {
654          image-rendering: pixelated;
655          position: absolute;
656          transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
763          className="w-[512px] h-[512px] mx-auto relative"
764          style={{
765            backgroundImage: `url(${ASSETS.BACKGROUND})`,
766            backgroundSize: "cover",
767            backgroundPosition: "center",
768            imageRendering: "pixelated",
769          }}
770        >
799          {/* Stevens character */}
800          <img
801            src={stevensState.image}
802            alt="Stevens"
803            className={`pixel-character ${

178
179- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
180- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
182- **Storage:** DO NOT use the Deno KV module for storage
183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

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 

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![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>",
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          

1create a website and a chatroom that allows teenage mothers to share and help each other on parenting tips. the website should have tips on motherhood, how to breastfeed, change diapers, bath a new born baby and also foods that are good for toddlers, once the website is launch the first thing to see is a picture of a mother and a baby. and the tips aspect should come with images as well, it should have a chatroom tab. we should have a menstrual tracker and also tips on how to calculate it and indicate a fertile window. allow users to sign up with their email and password. upgrade the website to a professional site, the font style and size. make it a website that people will commend the handwork put into it

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.

105- 'name': The character race/type name (e.g., Elf, Cyborg, Star Pilot). Be creative.
106- 'description': A brief description (1-2 sentences max).
107- 'styleHint': 3-5 descriptive keywords for image generation (e.g., "steampunk robot, gears, brass", "mystical elf, ancient forest, glowing runes").
108- 'effectColor': A hex color code (#RRGGBB format) that fits the character's theme.
109- 'borderAnimationHint': OPTIONAL. A single keyword: 'shimmer', 'pulse', or 'none'. Default to 'none'.
110- 'maskSrc': OPTIONAL. A URL to a subtle, tileable black and white texture/pattern image (like from transparenttextures.com) suitable for a holographic overlay mask (multiply blend). Ensure it's a direct image URL (e.g., ending in .png). If unsure, omit this property (a default will be used).
111
112Return STRICTLY as a single JSON object: { "races": [ { race1 }, { race2 }, ... ] }. No introductory text or explanations outside the JSON structure.`;
282    }
283
284    /* <<< Holographic Content Area (The Image Section) >>> */
285    .holographic-content {
286      position: relative; /* Containing block for overlays */
304    }
305
306    /* Base Image within Holo Wrapper */
307    .holographic-content > img {
308      display: block;
314      border-radius: inherit; /* Inherit top radius */
315      background-color: #2a2a2e; /* Placeholder BG */
316      pointer-events: none; /* Prevent image dragging */
317    }
318
324      height: 100%;
325      pointer-events: none;
326      z-index: 2; /* Above base image */
327      border-radius: inherit; /* Match top radius */
328      background-size: 180% 180%; /* Zoomed gradient for movement */
345      mix-blend-mode: color-dodge; /* The key shine effect */
346      opacity: var(--holo-gradient-opacity); /* Control intensity */
347      z-index: 3; /* Above base image, below mask */
348      /* background-image is set dynamically via JS per card */
349    }
350
365      pointer-events: none;
366    }
367    .mask img { /* Style the actual image inside the mask container */
368        display: block;
369        width: 100%;
370        height: 100%;
371        object-fit: cover; /* Cover the container */
372        opacity: 0.6; /* Make texture image itself slightly transparent */
373        background: transparent !important; /* Ensure no bg color interferes */
374        border-radius: inherit;
439    /* Border Animations */
440    @keyframes border-shimmer { /* Needs careful gradient stops */
441        0%   { border-image-source: linear-gradient(90deg,  transparent 0%, rgba(from var(--effect-color) r g b / 0) 10%, var(--effect-color) 50%, rgba(from var(--effect-color) r g b / 0) 90%, transparent 100%); }
442        50%  { border-image-source: linear-gradient(90deg,  transparent 0%, rgba(from var(--effect-color) r g b / 0) 40%, var(--effect-color) 90%, rgba(from var(--effect-color) r g b / 0) 100%, transparent 100%); }
443        100% { border-image-source: linear-gradient(90deg,  transparent 0%, rgba(from var(--effect-color) r g b / 0) 10%, var(--effect-color) 50%, rgba(from var(--effect-color) r g b / 0) 90%, transparent 100%); }
444    }
445    @keyframes border-pulse {
450        border-width: 2px;
451        border-style: solid;
452        border-image-slice: 1;
453        /* border-image-source set by keyframes */
454        animation: border-shimmer var(--border-anim-duration) linear infinite;
455    }
468        flex-grow: 1; /* Take remaining space */
469        position: relative;
470        z-index: 5; /* Above base image/overlays */
471        background: inherit; /* Inherit card background */
472        border-radius: 0 0 18px 18px; /* Match card bottom radius */
537        #carousel-container { height: var(--card-height-desktop); }
538        .race-card { width: var(--card-width-desktop); height: var(--card-height-desktop); min-height: 0; }
539        .holographic-content { height: 300px; } /* Fixed height for image area on desktop */
540        .race-card .card-content { padding: 25px; gap: 15px; }
541        .race-card h3 { font-size: 26px; }
592  const HOLOGRAPHIC_CONTENT_CLASS = 'holographic-content';
593  const SPECULAR_LAYER_CLASS = 'specular';
594  const MASK_LAYER_CLASS = 'mask'; // The container div for the mask image
595  const SHADER_LAYER_CLASS = 'shader-layer'; // Common class for specular/mask layers
596
674      card.style.setProperty('--effect-color', safeEffectColor);
675
676      // --- Image Generation URL ---
677      // Using maxm-imggenurl service example - adapt if needed
678      const prompt = encodeURIComponent(\`professional character portrait, centered composition, detailed illustration, \${safeStyleHint}, \${safeName}, cinematic lighting, high fantasy art style\`);
679      const imageUrl = \`https://maxm-imggenurl.web.val.run/\${prompt}.jpg\`;
680      const fallbackColor = safeEffectColor.substring(1); // Use effect color for placeholder
681      const fallbackUrl = \`https://placehold.co/350x300/\${fallbackColor}/1A1A1E?text=\${encodeURIComponent(safeName)}\`; // Placeholder uses image area dimensions
682
683      // --- Holographic Gradient ---
686
687      // --- Card Inner HTML Structure ---
688       // <<< Structure includes holographic content area with base image, specular layer, and mask layer >>>
689      card.innerHTML = \`
690        <div class="\${HOLOGRAPHIC_CONTENT_CLASS}">
691          <img src="\${imageUrl}" alt="Image of \${safeName}" loading="lazy" onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed for \${safeName}. Using fallback.');">
692
693          <div class="\${SPECULAR_LAYER_CLASS} \${SHADER_LAYER_CLASS}" style="background-image: \${specularGradient};">
694              \${useMaskSrc ? \`<div class="\${MASK_LAYER_CLASS}"><img src="\${useMaskSrc}" alt="" loading="lazy" onerror="this.parentElement.style.display='none'; console.warn('Mask image failed for \${safeName}');"></div>\` : ''}
695          </div>
696        </div>
941    if (!holoContent) return; // Should always exist, but check anyway
942
943    const rect = holoContent.getBoundingClientRect(); // Get bounds of the image area
944
945    // Calculate mouse position relative to the holographic content area