\n {label}\n \n {typeof value === \"number\" ? value.toFixed(1) : value}\n \n

\n \n {/* Track background - more visible on mobile */}\n \n

\n\n {/* Actual input range with larger hit area for touch */}\n \n onChange(parseFloat(e.target.value))}\n style={{\n width: \"100%\",\n position: \"absolute\",\n height: \"30px\", // Taller for better mobile touch\n margin: 0,\n opacity: 0.75, // Better visual on dark modes\n cursor: \"pointer\",\n // Reset some browser styles\n appearance: \"none\",\n backgroundColor: \"transparent\",\n zIndex: 2,\n }}\n className={`slider-${currentTheme} slider-${label.replace(/\\s+/g, \"-\").toLowerCase()}`}\n />\n\n {/* Current value indicator */}\n \n \n \n \n );\n\n return (\n \n

Hand-Drawn Card Showcase

\n\n {/* Theme selector */}\n

\n \n Theme:\n \n

\n {Object.keys(themes).map(themeName => (\n setCurrentTheme(themeName)}\n style={{\n padding: \"12px 20px\",\n background: currentTheme === themeName\n ? (themeName === \"light\" ? \"#0077ff\" : themeName === \"dark\" ? \"#e94560\" : \"#8338ec\")\n : \"transparent\",\n color: currentTheme === themeName ? \"white\" : theme.text,\n border: `2px solid ${theme.text}`,\n borderRadius: \"8px\",\n cursor: \"pointer\",\n fontWeight: currentTheme === themeName ? \"bold\" : \"normal\",\n fontSize: \"16px\",\n }}\n >\n {themeName.charAt(0).toUpperCase() + themeName.slice(1)}\n \n ))}\n

\n\n {/* Global controls for both cards */}\n \n

Global Card Controls

\n \n \n

\n \n\n {/* Cards and their controls */}\n \n {/* Ballpoint Pen Card section */}\n \n

Ballpoint Pen Style

\n \n

Ballpoint Pen

\n Fine lines with subtle variations\n

\n \n

\n\n \n

Ballpoint Controls

\n\n \n\n \n \n \n \n\n {/* Marker Pen Card section */}\n \n

Marker Pen Style

\n \n

Marker Pen

\n Varying thickness with smooth transitions\n

\n \n

\n\n \n

Marker Controls

\n\n \n\n \n\n \n \n \n \n \n\n

\n Created with\n \n BallpointPenCard\n \n and\n \n MarkerPenCard\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) {\n return new Response(\n `\n \n \n \n \n Hand-Drawn Card Showcase\n \n \n \n \n

\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/handDrawnCardShowcase/code/main.tsx","extension","actionData","errors"]