1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @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 (
<div style={{ textAlign: "center", padding: "20px" }}>
<h1>Main Colours</h1>
<div
style={{
width: "100px",
height: "100px",
backgroundColor: color1,
margin: "20px auto",
}}
/>
<div
style={{
width: "100px",
height: "100px",
backgroundColor: color2,
margin: "20px auto",
}}
/>
<form onSubmit={handleSubmit}>
<div>
<label>Color 1:</label>
<input
type="color"
value={color1}
onChange={(e) => setColor1(e.target.value)}
/>
</div>
<div>
<label>Color 2:</label>
<input
type="color"
value={color2}
onChange={(e) => setColor2(e.target.value)}
/>
</div>
<button type="submit">Set Colors</button>
</form>
{message && <p>{message}</p>}
<p>
<a href={import.meta.url.replace("esm.town", "val.town")}>
View Source
</a>
</p>
</div>
);
}
// Client-side rendering function
function client() {
createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") {
client();
}
// Server-side function for handling requests
async function server(request: Request): Promise<Response> {
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",