65type: itemCategory, // Verwende hier die Kategorie, die Teachable Machine liefert66wardrobe_item_id: wardrobeItem ? wardrobeItem.id : null,67// Optional: imageUrl: wardrobeItem ? wardrobeItem.imageUrl : null,68// Wenn du Bilder der vorgeschlagenen Items im Frontend anzeigen willst,69// müsste diese Information hier mitgegeben und im Frontend verarbeitet werden.
fashionWardrobefashionWardrobe.tsx7 matches
11* Fügt ein Kleidungsstück zum Kleiderschrank des Benutzers hinzu.12* Wird vom Frontend aufgerufen, wenn ein Benutzer ein Bild hochlädt.13* @param {string} imageUrl - Die Base64-kodierte Data URL des Bildes.14* @param {string} description - Eine kurze, vom Benutzer eingegebene Beschreibung des Kleidungsstücks (z.B. "Blaues T-Shirt").15* @returns {Promise<any>} Das gespeicherte Kleidungsstück-Objekt.16*/17export async function addWardrobeItem(imageUrl: string, description: string) {18if (!imageUrl || !description || description.trim() === "") {19throw new Error("imageUrl und description sind erforderlich.");20}21const item = {22id: crypto.randomUUID(), // Generiert eine eindeutige ID für jedes Kleidungsstück.23userId: USER_ID, // Weist das Item dem aktuellen Benutzer zu.24imageUrl: imageUrl, // Speichert die Bild-URL.25description: description.trim(), // Speichert die bereinigte Beschreibung.26timestamp: new Date().toISOString(), // Speichert den Zeitpunkt des Uploads.65if (req.method === "POST") {66try {67const { imageUrl, description } = await req.json();68const newItem = await addWardrobeItem(imageUrl, description);69// Erfolgreiche Antwort mit dem neuen Item.70return new Response(JSON.stringify(newItem), { status: 201, headers: { "Content-Type": "application/json" } });
6<title>React Hono Val Town Starter</title>7<script src="https://cdn.tailwindcss.com"></script>8<link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">9</head>10<body class="bg-gray-100 font-sans">
3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:4567For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.
21## `favicon.svg`2223As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).2425## `components/`
1# New Blog Post - Email Notifier2Want to follow a blog but don't use RSS feeds? Try this val, originally [created by saltcod](https://www.val.town/x/saltcod/SethGodinBlogEmail)!345## Usage instructions
log-media-request-headersimage.tsx0 matches
thehost-mapboxscript.js21 matches
20map.on("load", function() {21// Ajout de l'icône custom PNG blanc (hébergée sur Webflow, doit être blanc pur sur fond transparent)22map.loadImage(23"https://cdn.prod.website-files.com/680b45cea1d474e42a333f71/6849450d1f21ddfdce96b8bd_Vector.png",24(error, image) => {25if (error) throw error;26if (!map.hasImage("custom-marker")) {27map.addImage("custom-marker", image, { sdf: true });28}2980mapLocations.features = [];81locationItems.forEach((item, idx) => {82// Récupère l'URL de l'image principale de la card83let image = item.getAttribute("data-image");84if (!image) {85const imgEl = item.querySelector(".image-card-results");86if (imgEl) {87image = imgEl.getAttribute("src");88}89}90if (!image) {91image = "https://uploads-ssl.webflow.com/placeholder.jpg";92}93const lat = parseFloat(item.getAttribute("data-lat"));110name: name,111city: city,112image: image,113description: description,114url: url,158<div id="popup-close-btn-${feature.id}" class="popup-close-btn"></div>159<div class="popup-content-inner">160<div class="popup-image">161<img src="${feature.properties.image}" loading="lazy" alt="${feature.properties.name}" class="popup-image">162</div>163<div class="popup-title">${feature.properties.name}</div>277const newFeatures = [];278visibleItems.forEach((item, idx) => {279let image = item.getAttribute("data-image");280if (!image) {281const imgEl = item.querySelector(".image-card-results");282if (imgEl) {283image = imgEl.getAttribute("src");284}285}286if (!image) {287image = "https://uploads-ssl.webflow.com/placeholder.jpg"; // Mets ici l'URL de ton image par défaut288}289const lat = parseFloat(item.getAttribute("data-lat"));310name: name,311city: city,312image: image,313description: description,314url: url,
3* It uses a textarea for HTML input and a button to trigger the conversion.4* To calculate the required SVG dimensions, it renders the input HTML into an off-screen div and measures its bounding box.5* The resulting SVG, containing the HTML in a <foreignObject>, is then displayed in four formats: raw SVG code, an SVG data URL, an HTML <img> tag, and a Markdown image link.6*/7import { serve } from "https://esm.town/v/g/serveUtils";3940<div class="output-group">41<label>3. HTML Image Preview</label>42<div id="outputImageContainer"></div>43<label for="outputImageCode">HTML <code><img></code> Code</label>44<textarea id="outputImageCode" readonly rows="3"></textarea>45</div>46127margin-bottom: 8px;128}129#outputImageContainer {130padding: 15px;131border: 1px dashed #ccc;148const outputSvgCode = document.getElementById("outputSvgCode");149const outputDataUrl = document.getElementById("outputDataUrl");150const outputImageContainer = document.getElementById("outputImageContainer");151const outputImageCode = document.getElementById("outputImageCode");152const outputMarkdown = document.getElementById("outputMarkdown");153190191// 3. Create the various output formats192const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;193const htmlImgTag = `<img src="${svgDataUrl}" alt="Generated from HTML" width="${width}" height="${height}">`;194const markdown = ``;195196// 4. Display the outputs200outputDataUrl.value = svgDataUrl;201202outputImageContainer.innerHTML = htmlImgTag;203outputImageCode.value = htmlImgTag;204205outputMarkdown.value = markdown;206});207208[outputSvgCode, outputDataUrl, outputImageCode, outputMarkdown].forEach(textarea => {209textarea.addEventListener('click', () => {210textarea.select();
basic-html-starterindex.html1 match
1112<!-- reference the webpage's favicon. note: currently only svg is supported in val town files -->13<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">1415<!-- import the webpage's javascript file -->
