function Layout1({ children }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, children), /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-[#7CB342] text-white w-full py-4 shadow-lg", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 md:px-8 flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm mb-2 md:mb-0", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "© 2025 AutisticAudio. All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex gap-6", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-white hover:text-[#E0E7D1] transition-colors", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-white hover:text-[#E0E7D1] transition-colors", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "Contact"))))); } function Layout1Story() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Layout with Content"), /*#__PURE__*/ React.createElement(Layout1, { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Sample Page Content"), /*#__PURE__*/ React.createElement("p", { className: "text-[#558B2F]", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "This is an example of how content will appear within the layout.")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Layout with Minimal Content"), /*#__PURE__*/ React.createElement(Layout1, { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "👋"), /*#__PURE__*/ React.createElement("p", { className: "text-[#558B2F] mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Welcome!")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Layout with Multiple Sections"), /*#__PURE__*/ React.createElement(Layout1, { __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Section One"), /*#__PURE__*/ React.createElement("p", { className: "text-[#558B2F]", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Content for section one.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "Section Two"), /*#__PURE__*/ React.createElement("p", { className: "text-[#558B2F]", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Content for section two.")))))); } function BackToHomeButton() { return /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center px-4 py-2 bg-[#7CB342] text-white rounded-lg hover:bg-[#558B2F] transition-colors duration-200 shadow-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "←"), "Back to Home"); } function BackToHomeButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4 bg-[#F5F9E9]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function AnimatedHeader({ title, subtitle, className = "" }) { return /*#__PURE__*/ React.createElement("header", { className: `text-center py-8 ${className}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-[#7CB342] opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-[#64B5F6] mt-4 opacity-0 animate-fade-in-delayed", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, subtitle), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; } .animate-fade-in-delayed { animation: fadeIn 0.8s ease-out 0.3s forwards; } `)); } function AnimatedHeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F5F9E9] p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Welcome to AutisticAudio", subtitle: "Learn and communicate through sound", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Getting Started", subtitle: "Your journey begins here", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Explore Activities", subtitle: "Fun and interactive learning", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }))); } function Footer1({ copyrightYear = "2025", links = [] }) { return /*#__PURE__*/ React.createElement("footer", { className: "bg-[#7CB342] text-white w-full py-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 md:px-8 flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm mb-2 md:mb-0", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "© ", copyrightYear, " AutisticAudio. All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex gap-6", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, links.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.href, className: "text-white hover:text-[#E0E7D1] transition-colors", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, link.label))))); } function Footer1Story() { const defaultLinks = [ { href: "/about", label: "About" }, { href: "/contact", label: "Contact" } ]; const extendedLinks = [ { href: "/about", label: "About" }, { href: "/contact", label: "Contact" }, { href: "/privacy", label: "Privacy" }, { href: "/terms", label: "Terms" } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Default Footer"), /*#__PURE__*/ React.createElement(Footer1, { links: defaultLinks, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Footer with Extended Links"), /*#__PURE__*/ React.createElement(Footer1, { links: extendedLinks, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Footer with Custom Year"), /*#__PURE__*/ React.createElement(Footer1, { copyrightYear: "2024", links: defaultLinks, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Footer without Links"), /*#__PURE__*/ React.createElement(Footer1, { __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }))); } const SpeechContext = React.createContext(null); function GlobalSpeech({ children }) { const [synth, setSynth] = React.useState(null); const [speaking, setSpeaking] = React.useState(false); const [voice, setVoice] = React.useState(null); React.useEffect(()=>{ if (typeof window !== "undefined" && "speechSynthesis" in window) { setSynth(window.speechSynthesis); const loadVoices = ()=>{ const voices = window.speechSynthesis.getVoices(); const samantha = voices.find((voice)=>voice.name === "Samantha"); if (samantha) { setVoice(samantha); } }; window.speechSynthesis.onvoiceschanged = loadVoices; loadVoices(); return ()=>{ window.speechSynthesis.cancel(); }; } }, []); const speak = React.useCallback((text, options = {})=>{ if (!synth || !voice) return; synth.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.voice = voice; utterance.rate = options.rate || 0.9; utterance.pitch = options.pitch || 1; utterance.onstart = ()=>setSpeaking(true); utterance.onend = ()=>setSpeaking(false); utterance.onerror = ()=>setSpeaking(false); synth.speak(utterance); return ()=>{ synth.cancel(); setSpeaking(false); }; }, [ synth, voice ]); const stop = React.useCallback(()=>{ if (synth) { synth.cancel(); setSpeaking(false); } }, [ synth ]); const value = React.useMemo(()=>({ speak, stop, speaking, supported: !!synth, voice }), [ speak, stop, speaking, synth, voice ]); return /*#__PURE__*/ React.createElement(React.Fragment, null); } function useSpeech() { const context = React.useContext(SpeechContext); if (!context) { throw new Error("useSpeech must be used within a SpeechProvider"); } return context; } function GlobalSpeechStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Basic Speech Example"), /*#__PURE__*/ React.createElement(GlobalSpeech, { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(SpeechDemo, { __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "Multiple Speech Components"), /*#__PURE__*/ React.createElement(GlobalSpeech, { __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(SpeechDemo, { text: "Hello! How are you?", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(SpeechDemo, { text: "I'm doing great, thank you!", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#558B2F] mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "Speech with Different Options"), /*#__PURE__*/ React.createElement(GlobalSpeech, { __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(SpeechDemo, { text: "This is normal speed", options: { rate: 1 }, __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(SpeechDemo, { text: "This is slower", options: { rate: 0.7 }, __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(SpeechDemo, { text: "This is faster", options: { rate: 1.2 }, __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }))))); } // Demo component to show speech functionality function SpeechDemo({ text = "Click to hear me speak!", options = {} }) { const { speak, stop, speaking, supported } = useSpeech(); if (!supported) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-100 text-red-700 rounded-lg", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, "Speech synthesis is not supported in your browser"); } return /*#__PURE__*/ React.createElement("button", { onClick: ()=>speaking ? stop() : speak(text, options), className: `px-6 py-3 rounded-lg text-white transition-colors duration-200 ${speaking ? "bg-[#558B2F] hover:bg-[#33691E]" : "bg-[#7CB342] hover:bg-[#558B2F]"}`, __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, speaking ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Stop"), /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "⏹️")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Play"), /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "▶️")))); } function MainComponent() { const keyboardRows = [ [ "a", "b", "c", "d", "e" ], [ "f", "g", "h", "i", "j" ], [ "k", "l", "m", "n", "o" ], [ "p", "q", "r", "s", "t" ], [ "u", "v", "w", "x", "y" ], [ "z", "_" ] ]; const [synth, setSynth] = React.useState(null); const [speaking, setSpeaking] = React.useState(false); const [popupCard, setPopupCard] = React.useState(null); const [placedLetters, setPlacedLetters] = React.useState([]); const [selectedLetter, setSelectedLetter] = React.useState(null); const [currentLetterIndex, setCurrentLetterIndex] = React.useState(0); const [wordLetters, setWordLetters] = React.useState([]); const [showCelebration, setShowCelebration] = React.useState(false); const [customActivities, setCustomActivities] = React.useState([]); const [newActivityTitle, setNewActivityTitle] = React.useState(""); const [uploadError, setUploadError] = React.useState(null); const [isUploading, setIsUploading] = React.useState(false); const MAX_FILE_SIZE = 1024 * 1024; React.useEffect(()=>{ if (typeof window !== "undefined") { setSynth(window.speechSynthesis); } fetchCustomActivities(); }, []); const speak = (text)=>{ if (!synth) return; synth.cancel(); const u = new SpeechSynthesisUtterance(text); const voices = synth.getVoices(); const v = voices.find((v)=>v.name === "Samantha") || voices.find((v)=>/en/.test(v.lang)); if (v) u.voice = v; u.rate = 0.85; u.pitch = 1.1; u.onstart = ()=>setSpeaking(true); u.onend = ()=>setSpeaking(false); synth.speak(u); }; const cards = [ { id: 1, text: "Wash Hands", image: "https://ucarecdn.com/deb05052-0de9-4342-87cc-460e6325c533/", alt: "Animation showing proper hand washing technique" }, { id: 2, text: "Brush Teeth", image: "https://ucarecdn.com/ba664f93-cb9d-45ad-961d-ab9a35bcba0b/", alt: "Animation demonstrating teeth brushing" }, { id: 3, text: "Take Bath", image: "https://ucarecdn.com/70db5f12-4420-4049-9f77-601ba05709f4/", alt: "Animation showing a bath" }, { id: 4, text: "Use Toilet", image: "https://ucarecdn.com/c4b44f51-8674-49da-b270-9cbdc156bc9d/", alt: "Animation about using the toilet" }, { id: 5, text: "Change Clothes", image: "https://ucarecdn.com/28400453-2ce3-4e98-9ecb-2af6c40edf47/", alt: "Animation showing clean clothes" }, { id: 6, text: "Brush Hair", image: "https://ucarecdn.com/7c1f410d-3ad6-430b-9e41-544ee3c0ff04/", alt: "Animation demonstrating hair brushing" } ]; async function fetchCustomActivities() { try { const res = await fetch("/api/get-hygiene-activities", { method: "POST" }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Failed to load"); setCustomActivities(data.items); } catch (e) { console.error(e); } } const handleUploadForm = async (e)=>{ e.preventDefault(); setUploadError(null); if (!newActivityTitle.trim()) { setUploadError("Please enter a title"); return; } const fileInput = e.target.querySelector("input[type=file]"); const file = fileInput.files[0]; if (!file) { setUploadError("Please select an image"); return; } if (file.size > MAX_FILE_SIZE) { setUploadError(`File too large: ${(file.size / 1048576).toFixed(2)}MB >1MB`); return; } setIsUploading(true); try { const fd = new FormData(); fd.append("file", file); const up = await fetch("/api/upload", { method: "POST", body: fd }); const ud = await up.json(); if (!up.ok) throw new Error(ud.error || "Upload failed"); const save = await fetch("/api/save-hygiene-activity", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: newActivityTitle, image_url: ud.url, alt_text: `Custom hygiene: ${newActivityTitle}` }) }); const sd = await save.json(); if (!save.ok) throw new Error(sd.error || "Save failed"); await fetchCustomActivities(); setNewActivityTitle(""); fileInput.value = ""; } catch (err) { setUploadError(err.message); console.error(err); } finally{ setIsUploading(false); } }; const allCards = [ ...cards, ...customActivities.map((a)=>({ id: `c-${a.id}`, text: a.title, image: a.image_url, alt: a.alt_text })) ]; const openPopup = (card)=>{ setPopupCard(card); const letters = card.text.split("").map((c)=>c === " " ? "_" : c.toLowerCase()); setWordLetters(letters); setPlacedLetters(Array(letters.length).fill(null)); setCurrentLetterIndex(0); setSelectedLetter(null); setShowCelebration(false); }; const handleKeyClick = (letter, e)=>{ e.stopPropagation(); const expected = wordLetters[currentLetterIndex]; if (letter === expected) { const arr = [ ...placedLetters ]; arr[currentLetterIndex] = letter; setPlacedLetters(arr); const next = currentLetterIndex + 1; setCurrentLetterIndex(next); if (next === wordLetters.length) setShowCelebration(true); } setSelectedLetter(letter === selectedLetter ? null : letter); }; return /*#__PURE__*/ React.createElement(Layout1, { __source: { fileName: "", lineNumber: 187, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#E8F3E8] to-[#F5F9E9] flex flex-col", __source: { fileName: "", lineNumber: 188, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "flex-grow container mx-auto px-4 md:px-8 pt-12 pb-24", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center text-center md:hidden gap-4", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "🧩"), /*#__PURE__*/ React.createElement("div", { className: "absolute -top-1 -right-1 animate-float text-xl", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, "⭐")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold bg-gradient-to-r from-[#7CB342] via-[#FFB74D] to-[#FF69B4] text-transparent bg-clip-text animate-shimmer", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "Hygiene"), /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center justify-between", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, "🧩"), /*#__PURE__*/ React.createElement("div", { className: "absolute -top-1 -right-1 animate-float text-xl", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, "⭐")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold bg-gradient-to-r from-[#7CB342] via-[#64B5F6] to-[#FFB74D] text-transparent bg-clip-text animate-shimmer", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "Hygiene")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 mb-4", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4 shadow-sm", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-[#558B2F] mb-3", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, "Add New Hygiene Card"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleUploadForm, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newActivityTitle, onChange: (e)=>setNewActivityTitle(e.target.value), placeholder: "Enter activity title", className: "w-full px-4 py-2 rounded-lg border border-[#E0E7D1] focus:outline-none focus:border-[#7CB342]", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#7CB342] file:text-white hover:file:bg-[#558B2F] cursor-pointer", disabled: isUploading, __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }), isUploading && /*#__PURE__*/ React.createElement("span", { className: "text-[#7CB342]", __source: { fileName: "", lineNumber: 239, columnNumber: 21 }, __self: this }, "Uploading...")), uploadError && /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }, uploadError), /*#__PURE__*/ React.createElement("small", { className: "text-[#558B2F]", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, "Max file size: 1MB"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isUploading, className: "bg-[#7CB342] text-white py-2 rounded-lg hover:bg-[#558B2F] transition-opacity disabled:opacity-50", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, isUploading ? "Uploading..." : "Upload Activity")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, allCards.map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, onClick: ()=>openPopup(card), className: "relative bg-white rounded-xl aspect-square cursor-pointer hover:scale-105 shadow-sm border-4 border-[#7CB342] overflow-hidden group", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: card.image, alt: card.alt, className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-all duration-300", __source: { fileName: "", lineNumber: 268, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#7CB342] text-white px-4 py-2 rounded-full text-lg font-semibold shadow-lg transform scale-95 group-hover:scale-100 transition-all duration-300", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, card.text)), /*#__PURE__*/ React.createElement("div", { onClick: (e)=>{ e.stopPropagation(); speak(card.text); }, className: "absolute bottom-2 right-2 w-8 h-8 bg-[#7CB342] rounded-full flex items-center justify-center text-white shadow-md hover:scale-110 transition-transform", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }, "▶")))), popupCard && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 287, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[90%] max-w-[600px] rounded-xl p-5 text-center relative max-h-[90vh] overflow-y-auto", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPopupCard(null), className: "absolute top-2 right-2 text-2xl bg-transparent border-none cursor-pointer text-[#7CB342] hover:text-[#558B2F]", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("div", { className: "w-full aspect-square mb-8 rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: popupCard.image, alt: popupCard.alt, className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 296, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "letter-container overflow-x-auto whitespace-nowrap pb-4 mb-2 scroll-smooth", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex gap-2", __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this }, wordLetters.map((letter, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `letter-box w-[50px] h-[60px] rounded border-2 flex-shrink-0 flex items-center justify-center text-2xl font-semibold transition-all duration-300 ${placedLetters[index] ? "bg-white border-[#7CB342] text-[#558B2F]" : "bg-[#F5F9E9] border-[#E0E7D1] text-[#558B2F]"} ${index === currentLetterIndex && !placedLetters[index] ? "flicker-pastoral-green" : ""}`, __source: { fileName: "", lineNumber: 306, columnNumber: 25 }, __self: this }, placedLetters[index] ? placedLetters[index] === "_" ? " " : placedLetters[index] : "")))), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); speak(popupCard.text); }, className: "w-[50px] h-[50px] bg-[#7CB342] text-white text-xl rounded-full flex items-center justify-center shadow hover:scale-105 transition-all mx-auto", title: "Play word", __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, "▶")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setPlacedLetters(Array(wordLetters.length).fill(null)); setCurrentLetterIndex(0); setShowCelebration(false); }, className: "mb-4 px-4 py-2 bg-[#FFB74D] text-white rounded hover:bg-[#FFA726] transition-all text-sm", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, "Reset Word"), /*#__PURE__*/ React.createElement("div", { className: "mb-5 min-h-[60px] border-2 border-dashed border-[#E0E7D1] flex items-center justify-center p-3 cursor-default", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, placedLetters.every((l)=>!l) ? /*#__PURE__*/ React.createElement("div", { className: "text-[#558B2F]", __source: { fileName: "", lineNumber: 351, columnNumber: 21 }, __self: this }, "Click letters below to spell the word") : null), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 justify-center mb-4", __source: { fileName: "", lineNumber: 356, columnNumber: 17 }, __self: this }, keyboardRows.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex gap-2 justify-center w-full", __source: { fileName: "", lineNumber: 358, columnNumber: 21 }, __self: this }, row.map((letter)=>/*#__PURE__*/ React.createElement("div", { key: letter, onClick: (e)=>handleKeyClick(letter, e), className: `relative ${letter === "_" ? "w-[200px]" : "w-[60px]"} h-[60px] flex items-center justify-center rounded cursor-pointer text-2xl transition-all duration-300 ${selectedLetter === letter ? "border-2 border-[#7CB342] bg-white" : "border border-[#E0E7D1] bg-[#F5F9E9]"} ${letter === wordLetters[currentLetterIndex] ? "flicker-pastoral-green" : ""}`, __source: { fileName: "", lineNumber: 363, columnNumber: 25 }, __self: this }, letter === "_" ? "SPACE" : letter, /*#__PURE__*/ React.createElement("div", { onClick: (e)=>{ e.stopPropagation(); speak(letter === "_" ? "space" : letter); }, className: "absolute bottom-0.5 right-0.5 w-5 h-5 bg-[#7CB342] bg-opacity-90 rounded-full flex items-center justify-center cursor-pointer text-xs text-white", __source: { fileName: "", lineNumber: 379, columnNumber: 27 }, __self: this }, "▶")))))), showCelebration && /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none fixed inset-0 z-50 overflow-hidden", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }, Array.from({ length: 30 }).map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute text-4xl rise-up", style: { bottom: "-20px", left: `${Math.random() * 90}%`, animationDelay: `${Math.random() * 2}s`, animationDuration: `${2 + Math.random() * 2}s` }, __source: { fileName: "", lineNumber: 396, columnNumber: 23 }, __self: this }, "🌟✨💫🧼💦".split("").filter((_, idx)=>idx < 5)[i % 5]))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-8", __source: { fileName: "", lineNumber: 418, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/brush-teeth", className: "inline-flex items-center px-6 py-3 bg-[#7CB342] text-white rounded-xl hover:bg-[#558B2F] transition-colors duration-200 text-xl font-semibold shadow-lg", __source: { fileName: "", lineNumber: 419, columnNumber: 13 }, __self: this }, "Next", /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 424, columnNumber: 15 }, __self: this }, "→")))), /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-[#7CB342] text-white py-4 px-6 shadow-lg z-10", __source: { fileName: "", lineNumber: 429, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 430, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 431, columnNumber: 13 }, __self: this }, "© 2025 AutisticAudio. All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 434, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-sm hover:text-[#F5F9E9] transition-colors duration-200", __source: { fileName: "", lineNumber: 435, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-sm hover:text-[#F5F9E9] transition-colors duration-200", __source: { fileName: "", lineNumber: 441, columnNumber: 15 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 451, columnNumber: 9 }, __self: this }, ` @keyframes rise-up { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-800px) rotate(360deg); opacity: 0; } } .rise-up { animation: rise-up linear forwards; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 2s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .animate-shimmer { animation: shimmer 3s linear infinite; background-size: 200% auto; } @keyframes pastoralGreenFlicker { 0%, 100% { background-color: #7CB342; border-color: #7CB342; } 50% { background-color: white; border-color: #7CB342; } } .flicker-pastoral-green { animation: pastoralGreenFlicker 1s infinite; } `))); }