Palette Picker

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Define the color entry type interface ColorEntry { color: string; name?: string; timestamp: string; } // Client-side React Component function App() { const [color1, setColor1] = useState("#000000"); const [name, setName] = useState(""); const [savedColors, setSavedColors] = useState([]); const [message, setMessage] = useState(""); const [selectedColorInfo, setSelectedColorInfo] = useState(null); // Theme color to reset to const THEME_COLOR = "#CDFA10"; // Handle form submission to set both colors on the server const handleSubmit = async (e) => { e.preventDefault(); try { const newColorEntry: ColorEntry = { color: color1, name: name || 'color1', // Use provided name or default to 'color1' timestamp: new Date().toISOString() }; const response = await fetch("/set-color", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ newColorEntry, savedColors: [newColorEntry, ...savedColors].slice(0, 10) // Prepend and limit to 10 colors }), }); const data = await response.json(); // Update saved colors, avoiding duplicates and keeping most recent first const updatedColors = [newColorEntry, ...savedColors.filter(c => c.color !== color1)].slice(0, 10); setSavedColors(updatedColors); // Reset name input after submission setName(""); setMessage(data.message); } catch (error) { console.error("Submission error:", error); setMessage("Failed to submit color"); } }; // Function to select a saved color const handleSavedColorSelect = (colorEntry: ColorEntry) => { setColor1(colorEntry.color); setSelectedColorInfo(colorEntry); }; // Reset theme color handler const handleResetThemeColor = async () => { try { const newColorEntry: ColorEntry = { color: THEME_COLOR, name: 'Theme Color', // Descriptive name for theme color timestamp: new Date().toISOString() }; const response = await fetch("/set-color", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ newColorEntry, savedColors: [newColorEntry, ...savedColors].slice(0, 10) // Prepend and limit to 10 colors }), }); const data = await response.json(); // Update color and saved colors setColor1(THEME_COLOR); const updatedColors = [newColorEntry, ...savedColors.filter(c => c.color !== THEME_COLOR)].slice(0, 10); setSavedColors(updatedColors); // Reset name input after submission setName(""); setMessage("Theme color reset successfully"); } catch (error) { console.error("Reset theme color error:", error); setMessage("Failed to reset theme color"); } }; // Fetch the colors from the server on component mount useEffect(() => { const fetchColors = async () => { try { const response = await fetch("/get-color"); const data = await response.json(); setColor1(data.color || "#000000"); setSavedColors(data.savedColors || []); } catch (error) { console.error("Fetch error:", error); } }; fetchColors(); }, []); return (

{/* Saved Colors Section */}

{savedColors.map((colorEntry, index) => (

handleSavedColorSelect(colorEntry)} style={{ width: '40px', height: '40px', backgroundColor: colorEntry.color, cursor: 'pointer', border: color1 === colorEntry.color ? '3px solid black' : '1px solid #ddd', borderRadius: '5px', boxShadow: '0 2px 5px rgba(0,0,0,0.2)' }} title={`Select ${colorEntry.color}`} /> ))}

{/* Selected Color Info */} {selectedColorInfo && (

Color: {selectedColorInfo.color}

Name: {selectedColorInfo.name || 'Unnamed'}

Date: {new Date(selectedColorInfo.timestamp).toLocaleDateString()} {' '} Time: {new Date(selectedColorInfo.timestamp).toLocaleTimeString()}

)} {message &&

{message}

}

); } // Client-side rendering function function client() { const rootElement = document.getElementById("root"); if (rootElement) { createRoot(rootElement).render(); } } // Ensure client-side rendering only happens in browser if (typeof document !== "undefined") { client(); } // Server-side function for handling requests async function server(request: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); // Expanded list of allowed origins const allowedOrigins = [ "https://amymagistris.com", "https://www.amymagistris.com", "https://magistris-colorrequestsender.web.val.run", "https://framer.com", "https://create.framer.com", "https://framer.wiki", "*" // CAUTION: Only for debugging ]; const origin = request.headers.get("Origin") || "*"; // More permissive CORS headers const corsHeaders = { "Access-Control-Allow-Origin": "*", // Most permissive for debugging "Access-Control-Allow-Methods": "GET, POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Origin, X-Requested-With, Accept", "Access-Control-Allow-Credentials": "true" }; // Handle CORS preflight if (request.method === "OPTIONS") { return new Response(null, { headers: corsHeaders, status: 204 }); } const url = new URL(request.url); // POST request to set color if (request.method === "POST" && url.pathname === "/set-color") { const { newColorEntry, savedColors } = await request.json(); // Ensure the name defaults to 'color1' if not provided newColorEntry.name = newColorEntry.name || 'color1'; // Ensure unique colors and limit to last 10, keeping most recent first const uniqueColors = [ newColorEntry, ...savedColors.filter(c => c.color !== newColorEntry.color) ].slice(0, 10); await blob.setJSON("current_colors", { color: newColorEntry, savedColors: uniqueColors }); return new Response( JSON.stringify({ message: `Color set successfully: ${newColorEntry.color}`, color: newColorEntry, savedColors: uniqueColors }), { headers: { "Content-Type": "application/json", ...corsHeaders } } ); } // GET request to fetch color if (request.method === "GET" && url.pathname === "/get-color") { const colorsData = await blob.getJSON("current_colors"); // Return only the last color set return new Response( JSON.stringify({ color: colorsData?.color || null, savedColors: colorsData?.savedColors || [] }), { headers: { "Content-Type": "application/json", ...corsHeaders } } ); } // Main HTML response with debugging information return new Response( ` Palette Picker

`, { headers: { "Content-Type": "text/html", ...corsHeaders } } ); } // CSS for the page styling const css = ` html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } body { font-family: Arial, sans-serif; background-color: #f0f0f0; } #root { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } #picker { background-color: #FAFAFA; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 300px; width: 100%; } input[type="color"], input[type="text"] { margin: 10px 0; width: 100%; } button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 10px; } `; export default server;