No perfumes found for this selection.

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

\n
\n {perfume.name}\n by {perfume.brand}\n Notes: {perfume.notes}\n
\n

\n );\n};\n\nconst ZodiacPerfumes = () => {\n const [sign, setSign] = useState(\"Aries\");\n const [gender, setGender] = useState(\"Masculine\");\n const [showDetails, setShowDetails] = useState(false);\n\n const handleShowDetails = () => {\n setShowDetails(!showDetails);\n };\n\n // Add a fallback to prevent undefined errors\n const selectedPerfumes = ZODIAC_PERFUMES[sign]?.[gender]\n || (ZODIAC_PERFUMES[sign] ? Object.values(ZODIAC_PERFUMES[sign])[0] : []);\n\n return (\n

Zodiac Perfume Matcher

Find your perfect scent based on your zodiac and gender

\n\n

\n Zodiac Sign:\n setSign(e.target.value)}\n className=\"zodiac-select\"\n >\n {Object.keys(ZODIAC_SIGNS).map((zodiac) => (\n \n ))}\n \n

\n\n

\n Gender:\n setGender(e.target.value)}\n className=\"gender-select\"\n >\n {Object.keys(GENDER_OPTIONS).map((genderOption) => (\n \n ))}\n \n

\n\n

\n \n {showDetails ? \"Hide Perfumes\" : \"Reveal Perfumes\"}\n \n\n {showDetails && (\n

Recommended Perfumes for {sign} {gender}

\n \n

\n )}\n

\n );\n};\n\nfunction App() {\n return (\n

\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 \n Zodiac Perfume Matcher\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f8;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.app-container {\n width: 100%;\n max-width: 600px;\n background-color: white;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n transition: all 0.3s ease;\n}\n\n.container {\n text-align: center;\n}\n\n.header {\n margin-bottom: 20px;\n}\n\n.header h1 {\n color: #333;\n margin-bottom: 10px;\n}\n\n.header p {\n color: #666;\n font-size: 0.9em;\n}\n\n.selection-container {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.form-group {\n display: flex;\n flex-direction: column;\n width: 48%;\n}\n\nselect {\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 1em;\n transition: all 0.3s ease;\n}\n\nselect:hover {\n border-color: #007bff;\n}\n\n.reveal-button {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.reveal-button:hover {\n background-color: #0056b3;\n}\n\n.perfume-results {\n margin-top: 20px;\n animation: fadeIn 0.5s ease;\n}\n\n.perfume-list {\n list-style-type: none;\n padding: 0;\n}\n\n.perfume-item {\n background-color: #f8f9fa;\n margin-bottom: 10px;\n padding: 15px;\n border-radius: 8px;\n transition: all 0.3s ease;\n}\n\n.perfume-item:hover {\n transform: scale(1.02);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.perfume-details {\n display: flex;\n flex-direction: column;\n}\n\n.perfume-name {\n font-weight: bold;\n color: #333;\n}\n\n.perfume-brand {\n color: #666;\n font-size: 0.9em;\n}\n\n.perfume-notes {\n color: #888;\n font-size: 0.8em;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n .selection-container {\n flex-direction: column;\n }\n \n .form-group {\n width: 100%;\n margin-bottom: 15px;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Cookie/discreetAquaCentipede/code/main.tsx","extension","actionData","errors"]