AI Tools Directory - Discover Amazing AI Tools

\n \n \n

\n \n \n \n\n",[],[104,122],"52a59962-4430-11f0-bcbe-76b3cceeab13","components","69c171a6-4f75-4ddf-b5ac-27cdc056baf7",9,["D",1749363478408],[135,136,137,138,139],[104,129],{"_35":171,"_13":172,"_38":173,"_40":130,"_42":43,"_44":174,"_46":47,"_48":175,"_17":72,"_51":52,"_53":176,"_55":56,"_57":-5,"_85":177,"_18":178},{"_35":163,"_13":164,"_38":165,"_40":130,"_42":43,"_44":166,"_46":47,"_48":167,"_17":72,"_51":52,"_53":168,"_55":56,"_57":-5,"_85":169,"_18":170},{"_35":156,"_13":157,"_38":158,"_40":130,"_42":43,"_44":131,"_46":47,"_48":159,"_17":72,"_51":52,"_53":160,"_55":56,"_57":-5,"_85":161,"_18":162},{"_35":148,"_13":149,"_38":150,"_40":130,"_42":43,"_44":151,"_46":47,"_48":152,"_17":72,"_51":52,"_53":153,"_55":56,"_57":-5,"_85":154,"_18":155},{"_35":140,"_13":141,"_38":142,"_40":130,"_42":43,"_44":143,"_46":47,"_48":144,"_17":72,"_51":52,"_53":145,"_55":56,"_57":-5,"_85":146,"_18":147},"6f7083fe-4430-11f0-a36e-76b3cceeab13","ToolCard.tsx","6f7084d0-4430-11f0-a36e-76b3cceeab13",12,["D",1749363526719],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { AITool, Category } from \"../../shared/types.ts\";\n\ninterface ToolCardProps {\n tool: AITool;\n categories: Category[];\n}\n\nexport default function ToolCard({ tool, categories }: ToolCardProps) {\n const category = categories.find(c => c.id === tool.category);\n \n const getPricingBadgeClass = (pricing: string) => {\n switch (pricing) {\n case 'free': return 'pricing-free';\n case 'freemium': return 'pricing-freemium';\n case 'paid': return 'pricing-paid';\n default: return 'bg-gray-600';\n }\n };\n\n const getPricingText = (pricing: string) => {\n switch (pricing) {\n case 'free': return 'Free';\n case 'freemium': return 'Freemium';\n case 'paid': return 'Paid';\n default: return pricing;\n }\n };\n\n const renderStars = (rating?: number) => {\n if (!rating) return null;\n \n const stars = [];\n const fullStars = Math.floor(rating);\n const hasHalfStar = rating % 1 >= 0.5;\n \n for (let i = 0; i < 5; i++) {\n if (i < fullStars) {\n stars.push(\n ★\n );\n } else if (i === fullStars && hasHalfStar) {\n stars.push(\n ☆\n );\n } else {\n stars.push(\n ☆\n );\n }\n }\n \n return (\n

{stars}

\n {rating.toFixed(1)}\n

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

\n {/* Featured Badge */}\n {tool.featured && (\n

\n ⭐ Featured\n

\n )}\n\n {/* Category Icon & Name */}\n

\n {category && (\n <>\n {category.icon}\n \n {category.name}\n \n \n )}\n

\n \n {/* Pricing Badge */}\n

\n {getPricingText(tool.pricing)}\n

\n\n {/* Tool Name */}\n

\n {tool.name}\n

\n\n {/* Description */}\n

\n {tool.description}\n

\n\n {/* Tags */}\n {tool.tags && tool.tags.length > 0 && (\n

\n {tool.tags.slice(0, 3).map((tag, index) => (\n \n #{tag}\n \n ))}\n {tool.tags.length > 3 && (\n \n +{tool.tags.length - 3} more\n \n )}\n

\n )}\n\n {/* Rating */}\n {tool.rating && (\n

\n {renderStars(tool.rating)}\n

\n )}\n\n {/* Action Button */}\n

\n \n Try Now\n \n \n\n {/* Share Button */}\n {\n if (navigator.share) {\n navigator.share({\n title: tool.name,\n text: tool.description,\n url: tool.url\n });\n } else {\n navigator.clipboard.writeText(tool.url);\n // Could add a toast notification here\n }\n }}\n className=\"p-2 text-gray-400 hover:text-white transition-colors\"\n title=\"Share this tool\"\n >\n \n \n

\n );\n}",[],[104,129,141],"594a31ba-4430-11f0-930e-76b3cceeab13","SearchBar.tsx","594a3278-4430-11f0-930e-76b3cceeab13",10,["D",1749363489559],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface SearchBarProps {\n onSearch: (query: string) => void;\n placeholder?: string;\n}\n\nexport default function SearchBar({ onSearch, placeholder = \"Search AI tools...\" }: SearchBarProps) {\n const [query, setQuery] = useState(\"\");\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSearch(query);\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const value = e.target.value;\n setQuery(value);\n // Real-time search with debouncing\n setTimeout(() => {\n if (value === query) {\n onSearch(value);\n }\n }, 300);\n };\n\n return (\n \n );\n}",[],[104,129,149],"52a583c8-4430-11f0-bcbe-76b3cceeab13","Scene3D.tsx","52a5849a-4430-11f0-bcbe-76b3cceeab13",["D",1749363478408],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ndeclare global {\n interface Window {\n THREE: any;\n }\n}\n\nexport default function Scene3D() {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current || !window.THREE) return;\n\n const canvas = canvasRef.current;\n const scene = new window.THREE.Scene();\n const camera = new window.THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n const renderer = new window.THREE.WebGLRenderer({ canvas, alpha: true });\n\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n\n // Create floating ice crystals\n const crystalGeometry = new window.THREE.OctahedronGeometry(0.5, 0);\n const crystalMaterial = new window.THREE.MeshBasicMaterial({\n color: 0x00d4ff,\n transparent: true,\n opacity: 0.6,\n wireframe: true\n });\n\n const crystals: any[] = [];\n for (let i = 0; i < 50; i++) {\n const crystal = new window.THREE.Mesh(crystalGeometry, crystalMaterial);\n crystal.position.x = (Math.random() - 0.5) * 100;\n crystal.position.y = (Math.random() - 0.5) * 100;\n crystal.position.z = (Math.random() - 0.5) * 100;\n crystal.rotation.x = Math.random() * Math.PI;\n crystal.rotation.y = Math.random() * Math.PI;\n crystal.userData = {\n rotationSpeed: {\n x: (Math.random() - 0.5) * 0.02,\n y: (Math.random() - 0.5) * 0.02,\n z: (Math.random() - 0.5) * 0.02\n },\n floatSpeed: Math.random() * 0.01 + 0.005\n };\n scene.add(crystal);\n crystals.push(crystal);\n }\n\n // Create particle system\n const particleCount = 200;\n const particles = new window.THREE.BufferGeometry();\n const positions = new Float32Array(particleCount * 3);\n const colors = new Float32Array(particleCount * 3);\n\n for (let i = 0; i < particleCount * 3; i += 3) {\n positions[i] = (Math.random() - 0.5) * 200;\n positions[i + 1] = (Math.random() - 0.5) * 200;\n positions[i + 2] = (Math.random() - 0.5) * 200;\n\n // Ice blue colors\n colors[i] = 0; // R\n colors[i + 1] = 0.8 + Math.random() * 0.2; // G\n colors[i + 2] = 1; // B\n }\n\n particles.setAttribute('position', new window.THREE.BufferAttribute(positions, 3));\n particles.setAttribute('color', new window.THREE.BufferAttribute(colors, 3));\n\n const particleMaterial = new window.THREE.PointsMaterial({\n size: 2,\n vertexColors: true,\n transparent: true,\n opacity: 0.8\n });\n\n const particleSystem = new window.THREE.Points(particles, particleMaterial);\n scene.add(particleSystem);\n\n camera.position.z = 30;\n\n // Animation loop\n let animationId: number;\n const animate = () => {\n animationId = requestAnimationFrame(animate);\n\n // Rotate crystals\n crystals.forEach(crystal => {\n crystal.rotation.x += crystal.userData.rotationSpeed.x;\n crystal.rotation.y += crystal.userData.rotationSpeed.y;\n crystal.rotation.z += crystal.userData.rotationSpeed.z;\n \n // Floating motion\n crystal.position.y += Math.sin(Date.now() * crystal.userData.floatSpeed) * 0.01;\n });\n\n // Rotate particle system\n particleSystem.rotation.y += 0.001;\n particleSystem.rotation.x += 0.0005;\n\n // Camera movement based on mouse (if mouse position is available)\n const time = Date.now() * 0.0005;\n camera.position.x = Math.cos(time) * 5;\n camera.position.y = Math.sin(time * 0.7) * 3;\n camera.lookAt(0, 0, 0);\n\n renderer.render(scene, camera);\n };\n\n animate();\n\n // Handle window resize\n const handleResize = () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n };\n\n window.addEventListener('resize', handleResize);\n\n // Mouse interaction\n const handleMouseMove = (event: MouseEvent) => {\n const mouseX = (event.clientX / window.innerWidth) * 2 - 1;\n const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;\n \n camera.position.x += (mouseX * 10 - camera.position.x) * 0.05;\n camera.position.y += (mouseY * 10 - camera.position.y) * 0.05;\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n\n // Cleanup\n return () => {\n cancelAnimationFrame(animationId);\n window.removeEventListener('resize', handleResize);\n window.removeEventListener('mousemove', handleMouseMove);\n renderer.dispose();\n };\n }, []);\n\n return

\n {tool.name}\n

\n 🏷️\n Categories\n

{category.name}

\n AI Tools Directory\n

No tools found