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;","createdAt",["D",1736791794242],"version",56,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_132":133,"_134":135},"handle","magistris","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybUZmelNuM2tkUTdkMng2ZWJHVWlrdFpIOHUifQ","forkedVal","fileId","2b40213a-2775-11f0-b46e-569c3dd06744","interval","slug","magistris/colorRequestSender","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[146,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349,353,357,361,365,368],{"_120":121,"_147":-5,"_118":148,"_115":113},"prId",["D",1736791794242],{"_120":150,"_147":-5,"_118":151,"_115":152},55,["D",1736791076144],"eafefa3a-d1d7-11ef-9910-e6cdfca9ef9f",{"_120":154,"_147":-5,"_118":155,"_115":156},54,["D",1736782291803],"77107d2e-d1c3-11ef-bd03-e6cdfca9ef9f",{"_120":158,"_147":-5,"_118":159,"_115":160},53,["D",1736782042531],"e27e0a96-d1c2-11ef-b931-e6cdfca9ef9f",{"_120":162,"_147":-5,"_118":163,"_115":164},52,["D",1736781879843],"8183d504-d1c2-11ef-aecb-e6cdfca9ef9f",{"_120":166,"_147":-5,"_118":167,"_115":168},51,["D",1736781782568],"4789f7fc-d1c2-11ef-877c-e6cdfca9ef9f",{"_120":170,"_147":-5,"_118":171,"_115":172},50,["D",1736781703933],"18ab4044-d1c2-11ef-b066-e6cdfca9ef9f",{"_120":174,"_147":-5,"_118":175,"_115":176},49,["D",1736781673109],"064d75fc-d1c2-11ef-957a-e6cdfca9ef9f",{"_120":178,"_147":-5,"_118":179,"_115":180},48,["D",1736781108338],"b5a9c890-d1c0-11ef-b7d6-e6cdfca9ef9f",{"_120":182,"_147":-5,"_118":183,"_115":184},47,["D",1736767758482],"a0873dfe-d1a1-11ef-8cc0-e6cdfca9ef9f",{"_120":186,"_147":-5,"_118":187,"_115":188},46,["D",1736767131842],"2b0619b6-d1a0-11ef-af17-e6cdfca9ef9f",{"_120":190,"_147":-5,"_118":191,"_115":192},45,["D",1736767096606],"1605d70e-d1a0-11ef-bf66-e6cdfca9ef9f",{"_120":194,"_147":-5,"_118":195,"_115":196},44,["D",1736767064261],"02bd6b9e-d1a0-11ef-9834-e6cdfca9ef9f",{"_120":198,"_147":-5,"_118":199,"_115":200},43,["D",1736767032383],"efbd8146-d19f-11ef-9b1d-e6cdfca9ef9f",{"_120":202,"_147":-5,"_118":203,"_115":204},42,["D",1736767027927],"ed16678c-d19f-11ef-a32e-e6cdfca9ef9f",{"_120":206,"_147":-5,"_118":207,"_115":208},41,["D",1736766625301],"fd1fa1c6-d19e-11ef-8684-e6cdfca9ef9f",{"_120":210,"_147":-5,"_118":211,"_115":212},40,["D",1736766617378],"f861c22c-d19e-11ef-8565-e6cdfca9ef9f",{"_120":214,"_147":-5,"_118":215,"_115":216},39,["D",1736766610926],"f48a8512-d19e-11ef-986c-e6cdfca9ef9f",{"_120":218,"_147":-5,"_118":219,"_115":220},38,["D",1736766598603],"ed31479c-d19e-11ef-815d-e6cdfca9ef9f",{"_120":222,"_147":-5,"_118":223,"_115":224},37,["D",1736766589773],"e7ec449e-d19e-11ef-9c0c-e6cdfca9ef9f",{"_120":226,"_147":-5,"_118":227,"_115":228},36,["D",1736766537328],"c8ab188a-d19e-11ef-8684-e6cdfca9ef9f",{"_120":230,"_147":-5,"_118":231,"_115":232},35,["D",1736766505448],"b5aa4f08-d19e-11ef-9940-e6cdfca9ef9f",{"_120":234,"_147":-5,"_118":235,"_115":236},34,["D",1736766489501],"ac28bf82-d19e-11ef-8994-e6cdfca9ef9f",{"_120":238,"_147":-5,"_118":239,"_115":240},33,["D",1736766398430],"75e0dd9c-d19e-11ef-b35f-e6cdfca9ef9f",{"_120":242,"_147":-5,"_118":243,"_115":244},32,["D",1736766356371],"5ccec0d0-d19e-11ef-a329-e6cdfca9ef9f",{"_120":246,"_147":-5,"_118":247,"_115":248},31,["D",1736766335940],"50a09036-d19e-11ef-862e-e6cdfca9ef9f",{"_120":250,"_147":-5,"_118":251,"_115":252},30,["D",1736766308623],"40597ddc-d19e-11ef-b0aa-e6cdfca9ef9f",{"_120":254,"_147":-5,"_118":255,"_115":256},29,["D",1736766255860],"20e51e0c-d19e-11ef-a1a3-e6cdfca9ef9f",{"_120":258,"_147":-5,"_118":259,"_115":260},28,["D",1736766245609],"1ac925b8-d19e-11ef-8c29-e6cdfca9ef9f",{"_120":262,"_147":-5,"_118":263,"_115":264},27,["D",1736766227858],"10357c00-d19e-11ef-a1a3-e6cdfca9ef9f",{"_120":266,"_147":-5,"_118":267,"_115":268},26,["D",1736766141044],"dc76ecf0-d19d-11ef-8a7a-e6cdfca9ef9f",{"_120":270,"_147":-5,"_118":271,"_115":272},25,["D",1727175541077],"0169bc0e-7a64-11ef-ac96-de64eea55b61",{"_120":274,"_147":-5,"_118":275,"_115":276},24,["D",1727175540441],"0108933e-7a64-11ef-aa91-de64eea55b61",{"_120":278,"_147":-5,"_118":279,"_115":280},23,["D",1727161964335],"650b5968-7a44-11ef-8618-de64eea55b61",{"_120":282,"_147":-5,"_118":283,"_115":284},22,["D",1727161927998],"4f62b1e2-7a44-11ef-8618-de64eea55b61",{"_120":286,"_147":-5,"_118":287,"_115":288},21,["D",1727161899852],"3e9beb1c-7a44-11ef-b1f9-de64eea55b61",{"_120":290,"_147":-5,"_118":291,"_115":292},20,["D",1727161725900],"d6ece782-7a43-11ef-8836-de64eea55b61",{"_120":294,"_147":-5,"_118":295,"_115":296},19,["D",1727161686549],"bf788188-7a43-11ef-ba9e-de64eea55b61",{"_120":298,"_147":-5,"_118":299,"_115":300},18,["D",1727161654484],"ac5ba580-7a43-11ef-8cc2-de64eea55b61",{"_120":302,"_147":-5,"_118":303,"_115":304},17,["D",1727161579399],"7f9aefa6-7a43-11ef-bd16-de64eea55b61",{"_120":306,"_147":-5,"_118":307,"_115":308},16,["D",1727161561437],"74e5f736-7a43-11ef-b81c-de64eea55b61",{"_120":310,"_147":-5,"_118":311,"_115":312},15,["D",1727161544686],"6ae9d34c-7a43-11ef-a12b-de64eea55b61",{"_120":314,"_147":-5,"_118":315,"_115":316},14,["D",1726728018568],"0936109c-7652-11ef-beef-de64eea55b61",{"_120":318,"_147":-5,"_118":319,"_115":320},13,["D",1726728002294],"ff82bfdc-7651-11ef-b044-de64eea55b61",{"_120":322,"_147":-5,"_118":323,"_115":324},12,["D",1726689392588],"1a5568f0-75f8-11ef-a6be-de64eea55b61",{"_120":326,"_147":-5,"_118":327,"_115":328},11,["D",1726688974583],"212ea278-75f7-11ef-92b2-de64eea55b61",{"_120":330,"_147":-5,"_118":331,"_115":332},10,["D",1726688710402],"83b7f382-75f6-11ef-b58b-de64eea55b61",{"_120":334,"_147":-5,"_118":335,"_115":336},9,["D",1726688110063],"1de376a4-75f5-11ef-ba20-de64eea55b61",{"_120":338,"_147":-5,"_118":339,"_115":340},8,["D",1726687906360],"a478b2a2-75f4-11ef-bb06-de64eea55b61",{"_120":342,"_147":-5,"_118":343,"_115":344},7,["D",1726685421346],"db49c72c-75ee-11ef-a9f0-de64eea55b61",{"_120":346,"_147":-5,"_118":347,"_115":348},6,["D",1726685402698],"d02c473e-75ee-11ef-bb62-de64eea55b61",{"_120":350,"_147":-5,"_118":351,"_115":352},5,["D",1726685331509],"a5bdaa92-75ee-11ef-ab97-de64eea55b61",{"_120":354,"_147":-5,"_118":355,"_115":356},4,["D",1726685219789],"6327f82c-75ee-11ef-a049-de64eea55b61",{"_120":358,"_147":-5,"_118":359,"_115":360},3,["D",1726685025215],"ef2cf4d6-75ed-11ef-9390-de64eea55b61",{"_120":362,"_147":-5,"_118":363,"_115":364},2,["D",1726684827360],"793ed316-75ed-11ef-99d9-de64eea55b61",{"_120":127,"_147":-5,"_118":366,"_115":367},["D",1726678254113],"2b48c540-75de-11ef-a00c-de64eea55b61",{"_120":31,"_147":-5,"_118":369,"_115":370},["D",1726677929620],"69df0db0-75dd-11ef-9400-de64eea55b61","routes/embed","actionData","errors"]