/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Client-side React Component function App() { const [color1, setColor1] = useState("#000000"); // State for first color const [color2, setColor2] = useState("#000000"); // State for second color const [message, setMessage] = useState(""); // Handle form submission to set both colors on the server const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch("/set-color", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ color1, color2 }), // Send both colors }); const data = await response.json(); setMessage(data.message); // Display the confirmation message with hex codes }; // Fetch the colors from the server on component mount useEffect(() => { const fetchColors = async () => { const response = await fetch("/get-color"); const data = await response.json(); setColor1(data.color1); setColor2(data.color2); }; fetchColors(); }, []); return (

Main Colours

{message &&

{message}

}

View Source

); } // Client-side rendering function function client() { createRoot(document.getElementById("root")).render(); } 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"); // Import the blob module // Updated allowed origins const allowedOrigins = [ "https://amymagistris.com", "https://www.amymagistris.com", // Including www for both variations "https://magistris-colorrequestsender.web.val.run", "https://framer.com", /^https:\/\/framer\.com\/projects\/Amy-Magistris/, ]; // Add the Framer editor URL const origin = request.headers.get("Origin"); // Check if origin matches any allowed origin const isAllowedOrigin = allowedOrigins.some((allowed) => typeof allowed === "string" ? origin === allowed : allowed.test(origin) ); // Only add CORS headers if the origin is valid const corsHeaders = isAllowedOrigin ? { "Access-Control-Allow-Origin": origin, "Access-Control-Allow-Methods": "GET, POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type", // Explicitly allow Content-Type } : {}; // Handle CORS preflight OPTIONS request if (request.method === "OPTIONS") { return new Response(null, { headers: { ...corsHeaders } }); } const url = new URL(request.url); // POST request to set both colors if (request.method === "POST" && url.pathname === "/set-color") { const { color1, color2 } = await request.json(); // Expect both colors await blob.setJSON("current_colors", { color1, color2 }); // Store both colors in the blob return new Response( JSON.stringify({ message: `Colors set successfully: ${color1}, ${color2}` }), // Include both hex codes in confirmation message { headers: { "Content-Type": "application/json", ...corsHeaders } }, ); } // GET request to fetch both colors if (request.method === "GET" && url.pathname === "/get-color") { const colorsData = await blob.getJSON("current_colors"); return new Response(JSON.stringify(colorsData || { color1: "#000000", color2: "#000000" }), { headers: { "Content-Type": "application/json", ...corsHeaders }, }); } // Handle requests not matched return new Response( ` Color Sender

`, { headers: { "Content-Type": "text/html", ...corsHeaders }, }, ); } // CSS for the page styling const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } #root { max-width: 600px; margin: 0 auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 5px; } input[type="color"] { margin-right: 10px; } button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } a { color: #4CAF50; text-decoration: none; } a:hover { text-decoration: underline; } `; export default server;