\n {showPopup && (\n

Welcome to ExcaliVal Creator!

This tool allows you to create custom Excalidraw instances with unique names.

To get started:

Select one or more naming options from the pillbox below.
Click the \"Create New Val\" button to generate your Excalidraw instance.
Use the generated link to access your custom Excalidraw board!

\n {\n setShowPopup(false);\n fireConfetti(e);\n }}\n >\n Got it, let's create!\n \n

\n )}\n

🎨 Unleash the ExcaliVal! 🚀

Create Excalidraw Val

\n {Object.entries(NAMING_OPTIONS).map(([key, option]) => (\n toggleOption(option, e)}\n >\n {option}\n \n ))}\n

\n \n {createdValUrl && (\n

\n New val created! View it here:{\" \"}\n {createdValUrl}\n

\n )}\n

Console Output

\n          {consoleInfo.map((info, index) => (\n            \n              [{info.type}] {info.message}\n            
\n          ))}\n

\n \n View source:{\" \"}\n \n {import.meta.url.replace(\"esm.town\", \"val.town\")}\n \n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/create-val\") {\n const { code, name } = await request.json();\n\n // Create a new val using the Val Town API\n const response = await fetch(\"https://api.val.town/v1/vals\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${Deno.env.get(\"VAL_TOWN_API_KEY\")}`,\n },\n body: JSON.stringify({\n name,\n code,\n privacy: \"unlisted\",\n type: \"http\",\n }),\n });\n\n if (response.ok) {\n const result = await response.json();\n return Response.json({ url: `https://val.town/v/${result.author.username}/${result.name}` });\n } else {\n return new Response(\"Failed to create new val\", { status: 500 });\n }\n }\n\n return new Response(\n `\n \n \n ExcaliVal\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');\n\nbody {\n font-family: 'Poppins', sans-serif;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n margin: 0;\n padding: 0;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container {\n background-color: rgba(255, 255, 255, 0.9);\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n max-width: 800px;\n width: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.splash {\n background-color: #FF6B6B;\n color: white;\n padding: 15px;\n border-radius: 10px;\n text-align: center;\n font-size: 1.2em;\n margin-bottom: 20px;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);\n }\n}\n\nh1, h2 {\n color: #4A4A4A;\n text-align: center;\n}\n\n.pillbox {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 20px;\n justify-content: center;\n}\n\n.pill {\n background-color: #f0f0f0;\n border: none;\n border-radius: 20px;\n padding: 10px 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 0.9em;\n}\n\n.pill:hover {\n background-color: #e0e0e0;\n transform: translateY(-2px);\n}\n\n.pill.active {\n background-color: #4ECDC4;\n color: white;\n}\n\n.create-button {\n background-color: #FF6B6B;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: block;\n font-size: 16px;\n margin: 20px auto;\n cursor: pointer;\n transition: all 0.3s ease;\n border-radius: 50px;\n}\n\n.create-button:hover {\n background-color: #FF8787;\n transform: scale(1.05);\n}\n\na {\n color: #45B7D1;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\na:hover {\n color: #FF6B6B;\n}\n\n.success-message {\n background-color: #4ECDC4;\n color: white;\n padding: 15px;\n border-radius: 10px;\n text-align: center;\n margin-top: 20px;\n}\n\n.console {\n background-color: #2C3E50;\n color: #ECF0F1;\n padding: 15px;\n border-radius: 10px;\n margin-top: 20px;\n}\n\npre {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.console-log { color: #ECF0F1; }\n.console-info { color: #3498DB; }\n.console-warn { color: #F1C40F; }\n.console-error { color: #E74C3C; }\n\n.footer {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8em;\n color: #7F8C8D;\n}\n\n.popup-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.popup {\n background-color: white;\n padding: 30px;\n border-radius: 10px;\n max-width: 500px;\n width: 90%;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n.popup h2 {\n color: #FF6B6B;\n margin-top: 0;\n}\n\n.popup p {\n margin-bottom: 15px;\n}\n\n.popup ol {\n margin-bottom: 20px;\n padding-left: 20px;\n}\n\n.popup button {\n background-color: #4ECDC4;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.popup button:hover {\n background-color: #45B7D1;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/excaliVal/code/main.tsx","extension","actionData","errors"]