function BackToHomeButton({ text = "Back to Home", href = "/", className = "" }) { return /*#__PURE__*/ React.createElement("a", { href: href, className: `inline-flex items-center gap-2 bg-[#F8F7FF] border-2 border-[#8A4FFF] text-[#8A4FFF] px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-105 hover:bg-[#8A4FFF] hover:text-white ${className}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), text); } function BackToHomeButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Default Button"), /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Custom Text Button"), /*#__PURE__*/ React.createElement(BackToHomeButton, { text: "Return Home", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Custom Link Button"), /*#__PURE__*/ React.createElement(BackToHomeButton, { href: "/dashboard", text: "Back to Dashboard", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "With Additional Classes"), /*#__PURE__*/ React.createElement(BackToHomeButton, { className: "shadow-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); } function AnimatedHeader({ title = "AutisticAudio", subtitle = "Learn • Communicate" }) { return /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between py-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8A4FFF] text-2xl logo-container", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-puzzle-piece relative float-animation", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star absolute text-sm top-0 right-0 twinkle-animation", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-bold flex", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "gradient-text", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, title)), /*#__PURE__*/ React.createElement("p", { className: "text-[#8A4FFF] text-sm md:text-base slide-up-fade", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, subtitle))), /*#__PURE__*/ React.createElement("button", { className: "text-[#8A4FFF] p-2 rounded-full share-button", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt text-xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, ` @keyframes enhancedFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes multicolorTwinkle { 0% { color: gold; transform: scale(1); opacity: 1; } 33% { color: #8A4FFF; transform: scale(1.2); opacity: 0.8; } 66% { color: #4169E1; transform: scale(0.8); opacity: 0.9; } 100% { color: gold; transform: scale(1); opacity: 1; } } @keyframes titleGradient { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes dotPulse { 0% { color: #8A4FFF; } 50% { color: #4169E1; } 100% { color: #8A4FFF; } } @keyframes enhancedSlideUpFade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes playfulSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .float-animation { animation: enhancedFloat 4s ease-in-out infinite; display: inline-block; } .twinkle-animation { animation: multicolorTwinkle 3s ease-in-out infinite; } .logo-container { position: relative; transition: all 0.3s ease; } .logo-container:hover { transform: rotate(10deg); } .logo-container:hover::before { content: ''; position: absolute; inset: -5px; background: linear-gradient(45deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8F00FF); border-radius: 50%; z-index: -1; animation: titleGradient 3s linear infinite; filter: blur(8px); opacity: 0.7; } .gradient-text { background: linear-gradient(90deg, #8A4FFF, #FF7F00, #4169E1, #00FF00, #8A4FFF, #8A4FFF); background-size: 300% 100%; animation: titleGradient 8s linear infinite; background-clip: text; -webkit-background-clip: text; color: transparent; transition: all 0.3s ease; } .gradient-text:hover { filter: brightness(1.3) drop-shadow(0 0 12px currentColor); } .slide-up-fade { animation: enhancedSlideUpFade 1s ease-out forwards; } .slide-up-fade span { animation: dotPulse 2s infinite; } .share-button { position: relative; overflow: hidden; transition: all 0.3s ease; } .share-button::before { content: ''; position: absolute; inset: -5px; background: linear-gradient(45deg, #8A4FFF, #4169E1, #FF7F00, #8A4FFF); opacity: 0; transition: opacity 0.3s ease; border-radius: inherit; z-index: -1; } .share-button:hover::before { opacity: 0.2; animation: titleGradient 2s linear infinite; } .share-button:hover i { animation: playfulSpin 1s ease-in-out; } @media (prefers-color-scheme: dark) { .gradient-text:hover { filter: brightness(1.4) drop-shadow(0 0 15px currentColor); } } `)); } function AnimatedHeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 154, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "Default Header"), /*#__PURE__*/ React.createElement(AnimatedHeader, { __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, "Custom Title Header"), /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Custom Title", subtitle: "Custom • Subtitle", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }))); } function AnimatedFooter() { const navLinks = [ { label: 'About', href: '#' }, { label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }, { label: 'Contact', href: '#' } ]; const socialLinks = [ { icon: 'fa-discord', href: '#' }, { icon: 'fa-x-twitter', href: '#' }, { icon: 'fa-instagram', href: '#' } ]; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 h-[60px] bg-white dark:bg-gray-900 border-t border-[#8A4FFF] z-50", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full max-w-7xl mx-auto px-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8A4FFF] text-base", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-puzzle-piece", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "gradient-text text-sm font-bold", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "AutisticAudio"), /*#__PURE__*/ React.createElement("span", { className: "text-[#8A4FFF] text-[10px]", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "© 2025"))), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, navLinks.map((link, index)=>/*#__PURE__*/ React.createElement("div", { key: link.label, className: "flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "text-[#8A4FFF] hover:text-[#4169E1] text-xs px-2", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, link.label), index < navLinks.length - 1 && /*#__PURE__*/ React.createElement("span", { className: "text-[#8A4FFF] text-xs", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, "•"))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, socialLinks.map((link)=>/*#__PURE__*/ React.createElement("a", { key: link.icon, href: link.href, className: "text-[#8A4FFF] text-sm p-1", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab ${link.icon}`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, ` .gradient-text { background: linear-gradient(90deg, #8A4FFF, #4169E1, #8A4FFF); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; } `)); } function AnimatedFooterStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Footer Component"), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [isPlaying, setIsPlaying] = useState(false); const [tiles, setTiles] = useState(generateInitialTiles()); const cardRef = useRef(null); function generateInitialTiles() { const numbers = Array.from({ length: 15 }, (_, i)=>i + 1); numbers.push(null); for(let i = numbers.length - 1; i > 0; i--){ const j = Math.floor(Math.random() * (i + 1)); [numbers[i], numbers[j]] = [ numbers[j], numbers[i] ]; } return numbers; } function checkWin() { for(let i = 0; i < tiles.length - 1; i++){ if (tiles[i] !== i + 1) return false; } return tiles[tiles.length - 1] === null; } function moveTile(index) { if (!isPlaying) return; const emptyIndex = tiles.indexOf(null); const row = Math.floor(index / 4); const emptyRow = Math.floor(emptyIndex / 4); const col = index % 4; const emptyCol = emptyIndex % 4; if (Math.abs(row - emptyRow) === 1 && col === emptyCol || Math.abs(col - emptyCol) === 1 && row === emptyRow) { const newTiles = [ ...tiles ]; [newTiles[index], newTiles[emptyIndex]] = [ newTiles[emptyIndex], newTiles[index] ]; setTiles(newTiles); } } useEffect(()=>{ if (!isPlaying) { setTiles(generateInitialTiles()); return; } }, [ isPlaying ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 pb-[60px]", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 px-4 md:px-8", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Play", subtitle: "Games • Fun • Learning", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8 mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0661bd9d-3320-47d5-b252-46e0ae378759/", alt: "Play games", className: "w-full h-auto rounded-xl border-3 border-[#8A4FFF]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 h-[500px]", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: cardRef, className: "relative w-full h-full overflow-hidden bg-gradient-to-br from-[#1E3B70] to-[#4169E1] rounded-lg p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2 h-full", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, tiles.map((number, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>moveTile(index), className: `relative flex items-center justify-center rounded-lg text-2xl font-bold transition-all duration-200 ${number === null ? 'bg-transparent' : 'bg-white/90 hover:bg-white cursor-pointer'}`, style: { boxShadow: number !== null ? '0 4px 6px rgba(0,0,0,0.1)' : 'none' }, __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, number))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsPlaying(!isPlaying), className: "absolute bottom-4 left-1/2 -translate-x-1/2 px-6 py-2 rounded-full bg-white/90 hover:bg-white transition-colors shadow-lg z-10", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isPlaying ? 'stop' : 'play'} mr-2`, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }), isPlaying ? 'Stop' : 'Start'), !isPlaying && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center rounded-lg", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-center", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-puzzle-piece text-4xl mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, "Slide the numbers in order!"))), isPlaying && checkWin() && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center rounded-lg", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-center", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy text-4xl mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, "Congratulations! You won!")))))), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this })); }