Val Town Code SearchReturn to Val Town

2title: "usmnt_world_cup_roster_tracker"
3description: "US Men's 2026 World Cup roster probability tracker"
4imageUrl: "https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgxMzk5N2RmMWUwODE5MWE0NGY2ZmE1MTIxOGYyODU6ZmlsZV8wMDAwMDAwMGM4YmM2MWY3YWM2MTgzYzIzMmFjMDZhZiIsInRzIjoiNDg1MDMxIiwicCI6InB5aSIsInNpZyI6IjVhMGZmNzc1ZDYxNTA3MjQ2NzAyYTk4MjAwYmI0YjY4NTA1OTcwOTA0YjExODBhYzNkZjA2ZTdlZjg0YmMwYzgiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ=="
5author: "dcm31"
6tags: ["val-town"]

56}
57
58#image-upload-section {
59  background-color: rgba(255, 255, 255, 0.8);
60  padding: 20px;
68}
69
70#image-upload-section h2 {
71  margin-bottom: 15px;
72  color: #557492;
73}
74
75#image-upload-section p {
76  margin-bottom: 15px;
77  color: #666;
78}
79
80#image-upload {
81  opacity: 0;
82  position: absolute;
120}
121
122#image-container {
123  display: none;
124  background-color: rgba(255, 255, 255, 0.8);
133}
134
135#uploaded-image {
136  max-width: 100%;
137  max-height: 500px;
177}
178
179#cropped-image-container {
180  display: none;
181  background-color: rgba(255, 255, 255, 0.8);
190}
191
192#cropped-image {
193  max-width: 100%;
194  border-radius: 10px;
215
216@media (max-width: 768px) {
217  #image-upload-section {
218    padding: 15px;
219  }
248
249@media (max-width: 480px) {
250  #image-upload-section {
251    padding: 10px;
252  }
282    </header>
283    <main>
284        <section id="image-upload-section">
285            <h2>Upload Your Image</h2>
286            <p>Select an image to crop</p>
287            <div class="file-upload-wrapper">
288                <span class="file-upload-text">Choose File</span>
289                <span class="file-upload-button">Browse</span>
290                <input type="file" id="image-upload" accept="image/*">
291            </div>
292        </section>
293        <section id="image-container">
294            <img id="uploaded-image" src="#" alt="Uploaded Image">
295            <button id="crop-button">Crop Image</button>
296            <button id="download-button">Download Cropped Image</button>
297        </section>
298        <section id="cropped-image-container">
299            <h2>Cropped Image</h2>
300            <img id="cropped-image" src="#" alt="Cropped Image">
301        </section>
302    </main>
307
308<script>
309const imageUpload = document.getElementById('image-upload');
310const imageContainer = document.getElementById('image-container');
311const uploadedImage = document.getElementById('uploaded-image');
312const cropButton = document.getElementById('crop-button');
313const croppedImageContainer = document.getElementById('cropped-image-container');
314const croppedImage = document.getElementById('cropped-image');
315const downloadButton = document.getElementById('download-button');
316
317let cropper;
318
319imageUpload.addEventListener('change', (event) => {
320    const file = event.target.files[0];
321
324
325        reader.onload = (e) => {
326            uploadedImage.src = e.target.result;
327            imageContainer.style.display = 'block';
328            croppedImageContainer.style.display = 'none';
329            downloadButton.style.display = 'none';
330
333            }
334
335            cropper = new Cropper(uploadedImage, {
336                aspectRatio: 1,
337                viewMode: 1,
350    if (cropper) {
351        const canvas = cropper.getCroppedCanvas();
352        croppedImage.src = canvas.toDataURL();
353        croppedImageContainer.style.display = 'block';
354        downloadButton.style.display = 'inline-block';
355    }
359    const canvas = document.createElement('canvas');
360    const ctx = canvas.getContext('2d');
361    const img = new Image();
362
363    img.onload = () => {
364        canvas.width = img.width;
365        canvas.height = img.height;
366        ctx.drawImage(img, 0, 0, img.width, img.height);
367
368        const link = document.createElement('a');
369        link.href = canvas.toDataURL('image/png');
370        link.download = 'cropped_image.png';
371        document.body.appendChild(link);
372        link.click();
374    };
375
376    img.src = croppedImage.src;
377});
378</script>

74    - 'name': The race name.
75    - 'description': 1-2 sentences max.
76    - 'styleHint': 3-5 descriptive keywords for image generation.
77    - 'effectColor': A hex color code (#RRGGBB format) associated with the race.
78    - 'borderAnimationHint': OPTIONAL. A single keyword suggesting a subtle border animation style for the active card. Choose from 'shimmer', 'pulse', or 'none'. If unsure, use 'none'.
273    /* --- Animated Border Styles --- */
274    @keyframes border-shimmer { /* Gradient sweep */
275      0% { border-image-source: linear-gradient(90deg, transparent 0%, var(--effect-color) 50%, transparent 100%); }
276      25% { border-image-source: linear-gradient(90deg, transparent 25%, var(--effect-color) 75%, transparent 100%); }
277      50% { border-image-source: linear-gradient(90deg, transparent 50%, var(--effect-color) 100%); }
278      75% { border-image-source: linear-gradient(90deg, var(--effect-color) 0%, transparent 25%); }
279      100% { border-image-source: linear-gradient(90deg, var(--effect-color) 50%, transparent 100%); }
280    }
281     @keyframes border-pulse { /* Simple fade in/out */
288        border-width: 2px;
289        border-style: solid;
290        border-image-slice: 1;
291        border-image-source: linear-gradient(90deg, transparent 0%, var(--effect-color) 50%, transparent 100%); /* Initial state */
292        animation: border-shimmer var(--border-anim-duration) linear infinite;
293    }
298
299
300    /* --- Other Styles (Images, Content, Effects - mostly unchanged) --- */
301    .race-card img { pointer-events: none; height: 60%; border-radius: 16px 16px 0 0; width: 100%; object-fit: cover; display: block; background-color: #333;}
302    .race-card .card-content { pointer-events: none; padding: 20px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; position: relative; z-index: 2; background: inherit; border-radius: 0 0 16px 16px;} /* Ensure content bg matches card */
448
449         const prompt = encodeURIComponent(\`disney fantasy character portrait, \${safeStyleHint}, \${safeName}, detailed illustration, cinematic lighting, high fantasy art style\`);
450         const imageUrl = \`http://maxm-imggenurl.web.val.run//\${prompt}.jpg\`; // Using Pollinations.ai as example
451         const fallbackColor = safeEffectColor.substring(1);
452         const fallbackUrl = \`https://placehold.co/400x400/\${fallbackColor}/1A1A1E?text=\${encodeURIComponent(safeName)}\`;
453
454         card.innerHTML = \`
455           <img src="\${imageUrl}" alt="Image of \${safeName}" loading="lazy" onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed for \${safeName}. Using fallback.');">
456           <div class="\${EFFECT_CONTAINER_CLASS}"><div class="energy-surge"></div></div>
457           <div class="card-content">

139        body::before {
140            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
141            background-image:
142                linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
143                linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
386        /* Gallery & Contact Placeholders */
387        .gallery-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 1rem; }
388        .gallery-grid .image-container {
389            width: 150px; height: 150px; border-radius: 15px; overflow: hidden;
390            border: 1px solid var(--color-border); background: var(--color-bg);
391             box-shadow: 0 4px 15px var(--shadow-color);
392        }
393        .gallery-grid .image-container img { width: 100%; height: 100%; object-fit: cover; }
394
395        /* Crystal Container for static info page (if used) */
515            <h2 class="tab-title" data-translate="galleryTitle">Gallery</h2>
516            <div class="gallery-grid">
517                <div class="image-container"><img src="https://images.unsplash.com/photo-1677756119517-756a188d2d94?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 1"></div>
518                <div class="image-container"><img src="https://images.unsplash.com/photo-1696258680260-492036cd6559?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 2"></div>
519                <div class="image-container"><img src="https://images.unsplash.com/photo-1684495809981-394107651435?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 3"></div>
520            </div>
521        </div>

43    }
44
45    // Set temporary image on "Yes" click
46    setCurrentImg(tempYesImg);
47
48    // Revert back to the default image after 1 second
49    setTimeout(() => {
50      setCurrentImg(yesImg);
55    setIsNoClicked(true);
56    setIsYesClicked(false);
57    setCurrentImg(noImg); // Keep no image as long as "No" is clicked
58  };
59

130            width: 100%;
131            height: 100%;
132            background-image:
133                linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px), /* Slightly darker grid */
134                linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px);

67    - 'name': The name of the race (string).
68    - 'description': A brief description (string, 1-2 sentences maximum).
69    - 'styleHint': 3-5 descriptive keywords for generating an image (string).
70    - 'effectColor': A valid CSS hexadecimal color code string (e.g., "#RRGGBB").
71

5import * as db from "./db.ts";
6import { embedMetadata, handleFarcasterEndpoints, name } from "./farcaster.ts";
7import { handleImageEndpoints } from "./image.tsx";
8
9const app = new Hono();
10
11handleImageEndpoints(app);
12handleFarcasterEndpoints(app);
13
44        <meta name="fc:frame" content={JSON.stringify(embedMetadata(baseUrl, path))} />
45        <link rel="icon" href={baseUrl + "/icon"} />
46        <meta property="og:image" content={baseUrl + "/image"} />
47      </head>
48      <body class="bg-white text-black dark:bg-black dark:text-white">

5import satori from "npm:satori";
6
7export function handleImageEndpoints(app: Hono) {
8  const headers = {
9    "Content-Type": "image/png",
10    "cache-control": "public, max-age=86400",
11  };
12  app.get("/image", async (c) => {
13    return c.body(await homeImage(), 200, headers);
14  });
15  app.get("/icon", async (c) => {
16    return c.body(await iconImage(), 200, headers);
17  });
18}
19
20export async function homeImage() {
21  return await ogImage(
22    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
23      <div tw="flex flex-col items-start gap-[10px]">
31}
32
33export async function iconImage() {
34  return await ogImage(
35    <div tw="w-full h-full flex justify-center items-center text-[100px] bg-black text-white p-[50px]">
36      <img tw="w-[350px] h-[350px]" src={base64Icon(SquareDashed)} />
45//////////
46
47export async function ogImage(body, options = {}) {
48  const svg = await satori(
49    body,
57        if (code === "emoji") {
58          const unicode = segment.codePointAt(0).toString(16).toUpperCase();
59          return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));
60        }
61        return "";
94  const base64 = Buffer.from(svg).toString("base64");
95  // console.log('getIconDataUrl', name, svg, base64)
96  return `data:image/svg+xml;base64,${base64}`;
97};

5export const name = "Mini App Starter";
6// export const iconUrl = "https://imgur.com/TrJLlwp.png";
7// export const ogImageUrl = "https://imgur.com/xKVOVUE.png";
8
9export function embedMetadata(baseUrl: string, path: string = "/") {
10  return {
11    version: "next",
12    imageUrl: baseUrl + "/image",
13    button: {
14      title: name,
17        name: name,
18        url: baseUrl + path,
19        splashImageUrl: baseUrl + "/icon",
20        splashBackgroundColor: "#111111",
21      },
55        "iconUrl": baseUrl + "/icon",
56        "homeUrl": baseUrl,
57        "splashImageUrl": baseUrl + "/icon",
58        "splashBackgroundColor": "#111111",
59        "primaryCategory": "developer-tools",