TownGen

Welcome to TownGen!

\n Greetings, esteemed visitor! As the Mayor of val.town, it brings me great joy to welcome you to TownGen. Here,\n we empower you to build the future of web development val.town. Let your creativity flourish and construct\n digital marvels that will shape our town and beyond. Happy coding!\n

\n {Object.entries(categoryIcons).slice(0, 5).map(([category, { icon, items }]) => (\n

\n \n toggleCategory(category)}\n style={{ cursor: \"pointer\" }}\n >\n {icon} {category}\n \n {activeCategory === category && (\n

Relevant npm packages:

{pkg}

\n )}\n {items.map(feature => (\n toggleFeature(feature)}\n >\n {feature}\n \n ))}\n

\n ))}\n

\n setIdea(e.target.value)}\n placeholder=\"Enter your val.town application idea\"\n rows={4}\n />\n \n

Additional Requirements:

\n {promptPhrases.map(phrase => (\n togglePromptPhrase(phrase)}\n >\n {phrase}\n \n ))}\n

\n {loading && (\n

Generating prompt: {progress}% complete

{step}

\n )}\n {prompt && (\n

Generated Prompt:

{prompt}

\n )}\n

\n {Object.entries(categoryIcons).slice(5).map(([category, { icon, items }]) => (\n

\n \n toggleCategory(category)}\n style={{ cursor: \"pointer\" }}\n >\n {icon} {category}\n \n {activeCategory === category && (\n

Relevant npm packages:

{pkg}

\n )}\n {items.map(feature => (\n toggleFeature(feature)}\n >\n {feature}\n \n ))}\n

\n ))}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n TownGen - Val Generator\n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n color: #333;\n transition: background-color 0.5s ease;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\nh1, h2, h3, h4 {\n font-weight: 600;\n}\n\nh1 {\n text-align: center;\n color: #2c3e50;\n margin-bottom: 20px;\n font-size: 2.5em;\n}\n\n.welcome-message {\n background-color: #e8f5e9;\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 30px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.welcome-message h2 {\n color: #2e7d32;\n margin-top: 0;\n}\n\n.welcome-message p {\n color: #1b5e20;\n}\n\n.main-content {\n display: flex;\n justify-content: space-between;\n}\n\n.left-categories, .right-categories {\n width: 25%;\n}\n\n.center-content {\n width: 50%;\n}\n\ntextarea {\n width: 100%;\n padding: 12px;\n margin-bottom: 20px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-family: 'Inter', sans-serif;\n font-size: 16px;\n}\n\n.generate-button {\n display: block;\n width: 100%;\n padding: 20px;\n background-color: #3498db;\n color: #fff;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 24px;\n font-weight: 600;\n transition: background-color 0.3s ease, transform 0.3s ease;\n}\n\n.generate-button:hover {\n background-color: #2980b9;\n transform: scale(1.05);\n}\n\n.generate-button:disabled {\n background-color: #bdc3c7;\n cursor: not-allowed;\n}\n\n.loading {\n text-align: center;\n margin-top: 20px;\n}\n\n.spinner {\n border: 6px solid #f3f3f3;\n border-top: 6px solid #3498db;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 1s linear infinite;\n margin: 0 auto;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.result {\n margin-top: 30px;\n background-color: #fff;\n padding: 20px;\n border-radius: 4px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n background-color: #f8f9fa;\n padding: 15px;\n border-radius: 4px;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.view-source {\n display: inline-block;\n margin-top: 20px;\n padding: 8px 15px;\n background-color: #2ecc71;\n color: #fff;\n text-decoration: none;\n border-radius: 4px;\n transition: background-color 0.3s ease;\n}\n\n.view-source:hover {\n background-color: #27ae60;\n}\n\n.category {\n margin-bottom: 20px;\n}\n\n.category h3 {\n margin-bottom: 10px;\n}\n\n.pill {\n background-color: #ecf0f1;\n border: none;\n border-radius: 20px;\n padding: 8px 15px;\n margin: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 14px;\n}\n\n.pill:hover {\n background-color: #bdc3c7;\n}\n\n.pill.selected {\n background-color: #3498db;\n color: white;\n}\n\n.npm-packages {\n background-color: #f8f9fa;\n padding: 10px;\n border-radius: 4px;\n margin-bottom: 10px;\n}\n\n.npm-packages h4 {\n margin-top: 0;\n}\n\n.npm-packages ul {\n list-style-type: none;\n padding-left: 0;\n}\n\n.npm-packages li {\n font-size: 14px;\n margin-bottom: 5px;\n}\n\n.prompt-phrases {\n margin-top: 20px;\n}\n\n.prompt-phrases h3 {\n margin-bottom: 10px;\n}\n\n.feature-tree {\n list-style-type: none;\n padding-left: 0;\n text-align: left;\n}\n\n.feature-tree li {\n margin-bottom: 5px;\n padding-left: 20px;\n position: relative;\n}\n\n.feature-tree li::before {\n content: \"🌳\";\n position: absolute;\n left: 0;\n top: 0;\n}\n\n@media (max-width: 1000px) {\n .main-content {\n flex-direction: column;\n }\n \n .left-categories, .right-categories, .center-content {\n width: 100%;\n }\n}\n\n@keyframes colorChange {\n 0% { background-color: #f4f4f4; }\n 50% { background-color: #e0f7fa; }\n 100% { background-color: #f4f4f4; }\n}\n\n.animation-active {\n animation: colorChange 10s ease infinite;\n}\n\n@media (max-width: 600px) {\n .container {\n padding: 10px;\n }\n \n .pill {\n font-size: 12px;\n padding: 6px 12px;\n }\n \n .generate-button {\n font-size: 20px;\n padding: 15px;\n }\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/all/townGen/code/main.tsx","extension","actionData","errors"]