What's your zodiac sign?

We'll create a unique gradient based on your sign and the current cosmic season

\n {ZODIAC_SIGNS.map((sign) => (\n onSelect(sign)}\n className=\"flex flex-col items-center gap-2 p-4 rounded-xl border-2 border-gray-200 hover:border-blue-500 hover:bg-blue-50 transition-all\"\n >\n {sign.symbol}\n {sign.name}\n \n ))}\n

\n );\n}\n\nfunction ColorPicker({\n value,\n onChange,\n onClose\n}: {\n value: string;\n onChange: (color: string) => void;\n onClose: () => void;\n}) {\n const [hex, setHex] = React.useState(value);\n\n React.useEffect(() => {\n setHex(value);\n }, [value]);\n\n const handleHexChange = (newHex: string) => {\n setHex(newHex);\n if (/^#[0-9A-Fa-f]{6}$/.test(newHex)) {\n onChange(newHex);\n }\n };\n\n return (\n

\n {\n setHex(e.target.value);\n onChange(e.target.value);\n }}\n className=\"w-full h-10 rounded cursor-pointer\"\n />\n handleHexChange(e.target.value.toUpperCase())}\n className=\"w-full px-3 py-2 border border-gray-300 rounded font-mono text-sm\"\n placeholder=\"#000000\"\n />\n \n Done\n \n

\n );\n}\n\nfunction GradientPreview({ config }: { config: GradientConfig }) {\n const generateCSS = () => {\n const sortedStops = [...config.stops].sort((a, b) => a.position - b.position);\n const stopsCSS = sortedStops.map(s => `${s.color} ${s.position}%`).join(\", \");\n\n if (config.type === \"linear\") {\n return `linear-gradient(${config.angle}deg, ${stopsCSS})`;\n } else {\n return `radial-gradient(circle, ${stopsCSS})`;\n }\n };\n\n return (\n \n );\n}\n\nfunction StopEditor({\n stop,\n onUpdate,\n onDelete,\n canDelete\n}: {\n stop: GradientStop;\n onUpdate: (stop: GradientStop) => void;\n onDelete: () => void;\n canDelete: boolean;\n}) {\n const [showPicker, setShowPicker] = React.useState(false);\n\n return (\n

\n setShowPicker(!showPicker)}\n className=\"w-12 h-12 rounded-lg border-2 border-gray-300 shadow-sm\"\n style={{ backgroundColor: stop.color }}\n />\n {showPicker && (\n onUpdate({ ...stop, color })}\n onClose={() => setShowPicker(false)}\n />\n )}\n

\n\n

\n onUpdate({ ...stop, color: e.target.value })}\n className=\"px-3 py-1 border border-gray-300 rounded font-mono text-sm\"\n />\n

\n onUpdate({ ...stop, position: parseInt(e.target.value) })}\n className=\"flex-1\"\n />\n onUpdate({ ...stop, position: parseInt(e.target.value) || 0 })}\n className=\"w-16 px-2 py-1 border border-gray-300 rounded text-sm\"\n />\n %\n

\n\n {canDelete && (\n \n ×\n \n )}\n

\n );\n}\n\nfunction SavedGradients({\n gradients,\n onLoad,\n onDelete\n}: {\n gradients: SavedGradient[];\n onLoad: (config: GradientConfig) => void;\n onDelete: (id: number) => void;\n}) {\n const generatePreviewCSS = (config: GradientConfig) => {\n const sortedStops = [...config.stops].sort((a, b) => a.position - b.position);\n const stopsCSS = sortedStops.map(s => `${s.color} ${s.position}%`).join(\", \");\n\n if (config.type === \"linear\") {\n return `linear-gradient(${config.angle}deg, ${stopsCSS})`;\n } else {\n return `radial-gradient(circle, ${stopsCSS})`;\n }\n };\n\n if (gradients.length === 0) {\n return (\n

\n No saved gradients yet\n

\n );\n }\n\n return (\n

\n {gradients.map((gradient) => (\n

\n onLoad(gradient.config)}\n className=\"w-full h-24 rounded-lg shadow hover:shadow-lg transition-shadow\"\n style={{ background: generatePreviewCSS(gradient.config) }}\n />\n

\n {gradient.name}\n onDelete(gradient.id)}\n className=\"text-xs text-red-500 hover:text-red-700 opacity-0 group-hover:opacity-100 transition-opacity\"\n >\n Delete\n \n

\n ))}\n

\n );\n}\n\n// ============================================================================\n// MAIN APP\n// ============================================================================\n\nfunction GradientGenerator() {\n const [userSign, setUserSign] = React.useState(null);\n const [showZodiacSelector, setShowZodiacSelector] = React.useState(true);\n\n const [config, setConfig] = React.useState({\n type: \"linear\",\n angle: 90,\n stops: [\n { id: 1, color: \"#2A7B9B\", position: 0 },\n { id: 2, color: \"#57C785\", position: 50 },\n { id: 3, color: \"#EDDD53\", position: 100 },\n ]\n });\n\n const [savedGradients, setSavedGradients] = React.useState([]);\n const [copied, setCopied] = React.useState(false);\n\n // Load saved gradients from localStorage\n React.useEffect(() => {\n const saved = localStorage.getItem(\"savedGradients\");\n if (saved) {\n setSavedGradients(JSON.parse(saved));\n }\n }, []);\n\n // Generate initial gradient when user selects their sign\n const handleSelectSign = (sign: ZodiacSign) => {\n setUserSign(sign);\n setShowZodiacSelector(false);\n\n const currentSign = getCurrentZodiacSign();\n const stops = generateGradientFromZodiac(sign, currentSign);\n setConfig({ ...config, stops });\n };\n\n const handleRegenerateGradient = () => {\n if (userSign) {\n const currentSign = getCurrentZodiacSign();\n const stops = generateGradientFromZodiac(userSign, currentSign);\n setConfig({ ...config, stops });\n }\n };\n\n const updateStop = (id: number, updatedStop: GradientStop) => {\n setConfig({\n ...config,\n stops: config.stops.map(s => s.id === id ? updatedStop : s)\n });\n };\n\n const deleteStop = (id: number) => {\n if (config.stops.length > 2) {\n setConfig({\n ...config,\n stops: config.stops.filter(s => s.id !== id)\n });\n }\n };\n\n const addStop = () => {\n const newStop: GradientStop = {\n id: Date.now(),\n color: \"#000000\",\n position: 50\n };\n setConfig({\n ...config,\n stops: [...config.stops, newStop]\n });\n };\n\n const generateCSS = () => {\n const sortedStops = [...config.stops].sort((a, b) => a.position - b.position);\n const stopsCSS = sortedStops.map(s => `${s.color} ${s.position}%`).join(\", \");\n\n if (config.type === \"linear\") {\n return `background: linear-gradient(${config.angle}deg, ${stopsCSS});`;\n } else {\n return `background: radial-gradient(circle, ${stopsCSS});`;\n }\n };\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(generateCSS());\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n const saveGradient = () => {\n const name = prompt(\"Name this gradient:\");\n if (name) {\n const newGradient: SavedGradient = {\n id: Date.now(),\n name,\n config: { ...config }\n };\n const updated = [...savedGradients, newGradient];\n setSavedGradients(updated);\n localStorage.setItem(\"savedGradients\", JSON.stringify(updated));\n }\n };\n\n const loadGradient = (loadedConfig: GradientConfig) => {\n setConfig(loadedConfig);\n };\n\n const deleteGradient = (id: number) => {\n const updated = savedGradients.filter(g => g.id !== id);\n setSavedGradients(updated);\n localStorage.setItem(\"savedGradients\", JSON.stringify(updated));\n };\n\n return (\n \n

\n {showZodiacSelector && }\n\n

\n {/* Header */}\n

\n ✨ Zodiac CSS Gradient Generator\n

\n {userSign && (\n

\n Your sign: {userSign.symbol} {userSign.name} • Current season: {getSeason()} • Current sign: {getCurrentZodiacSign().symbol} {getCurrentZodiacSign().name}\n

\n )}\n setShowZodiacSelector(true)}\n className=\"mt-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm\"\n >\n Change Sign\n \n

\n\n

\n {/* Main gradient area */}\n

\n {/* Preview */}\n

\n \n\n {/* Type and Angle Controls */}\n

\n Type\n

\n setConfig({ ...config, type: \"linear\" })}\n className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${\n config.type === \"linear\"\n ? \"bg-blue-500 text-white\"\n : \"bg-gray-100 text-gray-700 hover:bg-gray-200\"\n }`}\n >\n Linear\n \n setConfig({ ...config, type: \"radial\" })}\n className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${\n config.type === \"radial\"\n ? \"bg-blue-500 text-white\"\n : \"bg-gray-100 text-gray-700 hover:bg-gray-200\"\n }`}\n >\n Radial\n \n

\n\n {config.type === \"linear\" && (\n

\n \n Angle: {config.angle}°\n \n setConfig({ ...config, angle: parseInt(e.target.value) })}\n className=\"w-full\"\n />\n

\n )}\n

\n\n {/* Regenerate button */}\n {userSign && (\n \n 🎲 Regenerate Zodiac Gradient\n \n )}\n

\n\n {/* Color Stops */}\n

Color Stops

\n \n + Add Stop\n \n

\n\n

\n {config.stops\n .sort((a, b) => a.position - b.position)\n .map((stop) => (\n updateStop(stop.id, updated)}\n onDelete={() => deleteStop(stop.id)}\n canDelete={config.stops.length > 2}\n />\n ))}\n

\n\n {/* CSS Output */}\n

CSS

\n \n 💾 Save\n \n \n {copied ? \"✓ Copied!\" : \"📋 Copy\"}\n \n

\n                  {generateCSS()}\n

\n\n {/* Saved Gradients Sidebar */}\n

Saved Gradients

\n \n

\n \n );\n}\n\n// ============================================================================\n// ROUTES\n// ============================================================================\n\nexport const routes = [\n {\n Component: GradientGenerator,\n index: true,\n },\n];\n\nexport default routes;\n","deleted","label",[98],"permalink","https://www.val.town/x/willemhelmet/css-gradient-generator/code/routes.tsx","extension","actionData","errors"]