Two-Line Logo Generator

\n {/* Hidden SVG for text measurements */}\n \n \n \n\n

Customize Logo

\n\n

\n setSingleLineMode(!singleLineMode)}\n className=\"mr-2 h-4 w-4\"\n />\n \n Single Line Mode\n \n

\n\n

\n \n {singleLineMode ? \"Text\" : \"Top Word\"}\n \n setTopWord(e.target.value.toUpperCase())}\n className=\"border border-gray-300 rounded p-2\"\n maxLength={20} // Increased character limit\n />\n

\n \n {!singleLineMode && (\n

\n Bottom Word\n setBottomWord(e.target.value.toUpperCase())}\n className=\"border border-gray-300 rounded p-2\"\n maxLength={20} // Increased character limit\n />\n

\n )}\n

\n \n

\n Font\n setFontFamily(e.target.value)}\n className=\"border border-gray-300 rounded p-2\"\n style={{ fontFamily: fontFamily }}\n >\n {fontOptions.map((font) => (\n \n ))}\n \n

\n Corner Radius\n

\n setCornerRadius(parseInt(e.target.value, 10))}\n className=\"flex-grow\"\n />\n

\n setCornerRadius(parseInt(e.target.value, 10))}\n className=\"w-12 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n \n

\n \n \n \n \n {!singleLineMode && (\n \n )}\n \n \n

\n\n

Export Logo

\n \n Generate SVG\n \n \n \n {savingToHost ? \"Saving...\" : \"Save as SVG\"}\n \n

\n \n {/* Save status */}\n {saveSuccess !== null && (\n

\n {saveSuccess ? (\n <>\n

{saveMessage}

\n {savedSvgUrl && (\n

Your SVG is available at:

\n e.target.select()}\n className=\"flex-1 p-1 text-sm border border-gray-300 rounded\"\n />\n \n Copy\n \n

\n \n View in browser\n \n {deleteUrl && (\n \n Delete SVG\n \n )}\n

\n )}\n \n ) : (\n

{saveMessage}

\n )}\n

\n )}\n \n {svgString && (\n

\n \n \n Copy to Clipboard\n \n

\n )}\n

\n \n

Logo Metrics

Font sizes adjusted for optimal fit:

Text size: {topFontSize}px
Top word: {topFontSize}px
Bottom word: {bottomFontSize}px
Font size ratio: {(bottomFontSize / topFontSize).toFixed(2)}
Width: {Math.round(calculatedWidth)}px
\n \n Get this logo via API\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 return new Response(\n `\n \n \n \n \n \n Two-Line Logo Generator\n \n \n \n \n \n

\n \n \n

\n View source\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n padding: 20px;\n background-color: #f5f7fa;\n }\n \n .text-xs {\n font-size: 0.75rem;\n }\n \n .text-sm {\n font-size: 0.875rem;\n }\n \n .text-lg {\n font-size: 1.125rem;\n }\n \n .font-medium {\n font-weight: 500;\n }\n \n .font-bold {\n font-weight: 700;\n }\n \n input[type=\"range\"] {\n width: 100%;\n height: 8px;\n -webkit-appearance: none;\n background: #e2e8f0;\n border-radius: 4px;\n outline: none;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: #3b82f6;\n border-radius: 50%;\n cursor: pointer;\n }\n \n .project-logo text {\n dominant-baseline: middle;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/twoLineLogoGenerator/code/index.tsx","extension","actionData","errors"]