Palette Picker

\n \n \n \n {/* Saved Colors Section */}\n

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

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

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

Color: {selectedColorInfo.color}

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

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

\n )}\n \n {message &&

{message}

}\n

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

\n \n \n \n \n \n `,\n {\n headers: { \n \"Content-Type\": \"text/html\", \n ...corsHeaders \n }\n }\n );\n}\n\n// CSS for the page styling\nconst css = `\nhtml, body {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\nbody {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n}\n\n#root {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#picker {\n background-color: #FAFAFA;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n max-width: 300px;\n width: 100%;\n}\n\ninput[type=\"color\"], input[type=\"text\"] {\n margin: 10px 0;\n width: 100%;\n}\n\nbutton {\n background-color: #4CAF50;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n width: 100%;\n margin-top: 10px;\n}\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/magistris/colorRequestSender/code/main.tsx","extension","actionData","errors"]