🏛️ Foundation Stone Inscription Generator

\n Column Width: {columnWidth}\n setColumnWidth(Number(e.target.value))}\n />\n

\n Number of Columns: {numColumns}\n setNumColumns(Number(e.target.value))}\n />\n

\n Special Characters: {specialChars}\n setSpecialChars(Number(e.target.value))}\n />\n

\n Font Style\n \n

\n Text Effect\n \n

\n \n \n

\n {inscription || \"CLICK GENERATE TO CREATE YOUR INSCRIPTION\"}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Foundation Stone Inscription Generator\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\n@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Playfair+Display:wght@600&display=swap');\n\n:root {\n --bg-primary: #f4f4f4;\n --bg-secondary: #f9f9f9;\n --text-primary: #333;\n --accent-color: #4a4a4a;\n}\n\nbody {\n font-family: 'Courier Prime', monospace;\n background-color: var(--bg-primary);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n box-sizing: border-box;\n}\n\n.foundation-generator {\n background-color: white;\n border-radius: 15px;\n box-shadow: \n 0 10px 25px rgba(0, 0, 0, 0.1),\n 0 6px 10px rgba(0, 0, 0, 0.05);\n padding: 30px;\n max-width: 900px;\n width: 100%;\n text-align: center;\n}\n\n.controls {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n}\n\n.control-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.inscription {\n font-size: 18px;\n text-transform: uppercase;\n text-align: justify;\n line-height: 1.6;\n letter-spacing: 1px;\n padding: 20px;\n background-color: var(--bg-secondary);\n border-radius: 8px;\n box-shadow: \n inset 2px 2px 5px rgba(0, 0, 0, 0.1),\n inset -2px -2px 5px rgba(255, 255, 255, 0.5);\n word-spacing: 5px;\n color: var(--text-primary);\n min-height: 100px;\n}\n\n.button-group {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 15px;\n}\n\ninput[type=\"range\"], select {\n width: 100%;\n margin-top: 10px;\n}\n\nbutton {\n background-color: var(--accent-color);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s, transform 0.1s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n\nbutton:hover {\n background-color: #666;\n transform: scale(1.05);\n}\n\n.source-link {\n display: block;\n margin-top: 15px;\n color: #666;\n text-decoration: none;\n font-size: 0.8em;\n}\n\n/* Font Styles */\n.courier-font { font-family: 'Courier Prime', monospace; }\n.times-font { font-family: 'Times New Roman', serif; }\n.georgia-font { font-family: Georgia, serif; }\n.palatino-font { font-family: Palatino, serif; }\n.ancient-font { \n font-family: 'Playfair Display', serif;\n font-weight: 600;\n}\n\n/* Text Effects */\n.engraved-effect {\n text-shadow: \n -1px -1px 0 rgba(0,0,0,0.2),\n 1px 1px 0 rgba(255,255,255,0.2);\n}\n\n.chiseled-effect {\n text-shadow: \n -1px -1px 0 rgba(0,0,0,0.3),\n 1px 1px 0 rgba(255,255,255,0.3);\n color: #444;\n}\n\n.shadowed-effect {\n text-shadow: \n 2px 2px 4px rgba(0,0,0,0.4);\n}\n\n.etched-effect {\n text-shadow: \n -1px -1px 0 rgba(255,255,255,0.5),\n 1px 1px 0 rgba(0,0,0,0.2);\n color: #555;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/all/creativeTomatoSailfish/code/main.tsx","extension","actionData","errors"]