Update index.html

index.html

@@ -46,6 +46,13 @@
       .animate-gradient-x {
           animation: gradient 3s ease infinite;
       }
+      
+      .glass-panel {
+          background: rgba(19, 23, 34, 0.8);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.05);
+      }
     </style>
 
     <!-- Import Map to resolve modules -->
@@ -81,7 +88,11 @@
             User,
             Bell,
             ArrowLeft,
-            Sparkles
+            Sparkles,
+            Play,
+            Square,
+            Volume2,
+            X
         } from 'lucide-react';
 
         // --- CONSTANTS & DATA ---
@@ -141,6 +152,12 @@
             colorTo: 'to-blue-600'
         };
 
+        const IMAGES = [
+            "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpxposlxsv.png?_t=1769590682",
+            "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpnv5v143z.png?_t=1769590682",
+            "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpkqpm8k8l.png?_t=1769590756"
+        ];
+
         // --- COMPONENTS ---
 
         // 1. Background Effects
@@ -181,54 +198,17 @@
                             backgroundSize: '50px 50px'
                         }}
                     ></div>
-
-                    {[...Array(15)].map((_, i) => (
-                        <Particle key={i} index={i} />
-                    ))}
-
+                    {[...Array(15)].map((_, i) => <Particle key={i} index={i} />)}
                     <motion.div 
-                        animate={{ 
-                            scale: [1, 1.15, 1],
-                            opacity: [0.15, 0.35, 0.15],
-                            rotate: [0, 20, 0]
-                        }}
-                        transition={{ 
-                            duration: 12, 
-                            repeat: Infinity,
-                            ease: "easeInOut" 
-                        }}
+                        animate={{ scale: [1, 1.15, 1], opacity: [0.15, 0.35, 0.15], rotate: [0, 20, 0] }}
+                        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut" }}
                         className="absolute -top-[10%] -right-[20%] w-[600px] h-[600px] bg-gradient-to-br from-violet-600/20 to-indigo-600/20 rounded-full blur-[120px]"
                     />
-                    
                     <motion.div 
-                        animate={{ 
-                            scale: [1, 1.25, 1],
-                            opacity: [0.1, 0.25, 0.1],
-                            x: [0, 30, 0]
-                        }}
-                        transition={{ 
-                            duration: 15, 
-                            repeat: Infinity,
-                            ease: "easeInOut",
-                            delay: 1
-                        }}
+                        animate={{ scale: [1, 1.25, 1], opacity: [0.1, 0.25, 0.1], x: [0, 30, 0] }}
+                        transition={{ duration: 15, repeat: Infinity, ease: "easeInOut", delay: 1 }}
                         className="absolute top-[40%] -left-[20%] w-[500px] h-[500px] bg-gradient-to-tr from-blue-600/15 to-cyan-500/15 rounded-full blur-[100px]"
                     />
-
-                    <motion.div 
-                        animate={{ 
-                            scale: [1, 1.2, 1],
-                            opacity: [0.1, 0.2, 0.1],
-                        }}
-                        transition={{ 
-                            duration: 18, 
-                            repeat: Infinity,
-                            ease: "easeInOut",
-                            delay: 2
-                        }}
-                        className="absolute -bottom-20 -right-20 w-80 h-80 bg-emerald-500/5 rounded-full blur-[80px]"
-                    />
-                    
                     <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#0B0F19]/60 to-[#0B0F19] pointer-events-none"></div>
                 </div>
             );
@@ -292,21 +272,19 @@
         };
 
         // 4. Feature Card
-        const FeatureCard = ({ item, index }) => {
+        const FeatureCard = ({ item, index, onClick }) => {
             return (
                 <motion.div
                     initial={{ opacity: 0, scale: 0.9, y: 30 }}
                     animate={{ opacity: 1, scale: 1, y: 0 }}
                     transition={{ delay: index * 0.1 + 0.2, duration: 0.5, type: "spring", stiffness: 100, damping: 20 }}
                     whileTap={{ scale: 0.96 }}
+                    onClick={onClick}
                     className="relative group cursor-pointer"
                 >
                     <div className={`absolute -inset-[1px] rounded-[24px] bg-gradient-to-b ${item.colorFrom} ${item.colorTo} opacity-0 group-hover:opacity-40 blur-md transition duration-500`}></div>
-                    
                     <div className="relative h-full flex flex-col justify-between bg-[#131722]/80 backdrop-blur-xl border border-white/5 p-5 rounded-[24px] shadow-2xl overflow-hidden hover:border-white/15 transition-all duration-300">
-                        
                         <div className="absolute inset-0 z-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12"></div>
-
                         <div className="flex justify-between items-start mb-5 relative z-10">
                             <div className={`relative p-3.5 rounded-2xl bg-gradient-to-br ${item.colorFrom} ${item.colorTo} shadow-lg ring-1 ring-white/20 group-hover:scale-105 transition-transform duration-300`}>
                                 <motion.div
@@ -317,7 +295,6 @@
                                 </motion.div>
                                 <div className="absolute inset-0 rounded-2xl bg-white/30 blur opacity-40"></div>
                             </div>
-                            
                             {(item.isNew || item.isHot) && (
                                 <motion.div 
                                     initial={{ scale: 0 }}
@@ -326,28 +303,18 @@
                                     className="flex flex-col items-end gap-1"
                                 >
                                     {item.isNew && (
-                                        <span className="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-full shadow-lg shadow-amber-500/20">
-                                            جدید
-                                        </span>
+                                        <span className="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-full shadow-lg shadow-amber-500/20">جدید</span>
                                     )}
                                     {item.isHot && (
-                                        <span className="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-rose-500 to-pink-600 text-white rounded-full shadow-lg shadow-rose-500/20">
-                                            داغ
-                                        </span>
+                                        <span className="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-rose-500 to-pink-600 text-white rounded-full shadow-lg shadow-rose-500/20">داغ</span>
                                     )}
                                 </motion.div>
                             )}
                         </div>
-
                         <div className="relative z-10">
-                            <h3 className="text-[17px] font-bold text-white mb-1.5 tracking-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-slate-300 transition-colors">
-                                {item.title}
-                            </h3>
-                            <p className="text-[11px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">
-                                {item.subtitle}
-                            </p>
+                            <h3 className="text-[17px] font-bold text-white mb-1.5 tracking-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-slate-300 transition-colors">{item.title}</h3>
+                            <p className="text-[11px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{item.subtitle}</p>
                         </div>
-                        
                         <div className="absolute bottom-4 left-4 w-8 h-8 rounded-full bg-white/5 border border-white/5 flex items-center justify-center opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-lg">
                             <ArrowLeft size={14} className="text-white" />
                         </div>
@@ -367,76 +334,51 @@
                     className="relative w-full cursor-pointer group"
                 >
                     <div className="absolute -inset-[2px] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-[26px] opacity-70 blur-sm group-hover:opacity-100 group-hover:blur-md transition duration-500 animate-pulse"></div>
-                    
                     <div className="relative overflow-hidden p-6 bg-[#0f1219] rounded-[24px] border border-white/10">
-                        
                         <div className="absolute inset-0 opacity-20">
                             <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-600 rounded-full blur-[80px] animate-pulse"></div>
                             <div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-600 rounded-full blur-[80px] animate-pulse" style={{ animationDelay: '1s' }}></div>
                         </div>
-
                         <div className="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                             <div className="flex items-center gap-5">
                                 <div className="relative">
                                     <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${item.colorFrom} ${item.colorTo} flex items-center justify-center shadow-lg shadow-indigo-500/30 ring-4 ring-indigo-500/10 group-hover:scale-105 transition-transform duration-300`}>
-                                        <motion.div
-                                            animate={{ rotate: [0, 10, -10, 0] }}
-                                            transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
-                                        >
+                                        <motion.div animate={{ rotate: [0, 10, -10, 0] }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}>
                                             <item.icon className="text-white w-8 h-8" strokeWidth={2.5} />
                                         </motion.div>
                                     </div>
-                                    <div className="absolute -top-2 -right-2 bg-white text-indigo-700 text-[10px] font-black px-2 py-0.5 rounded-full shadow-md border-2 border-[#0f1219]">
-                                        Ai
-                                    </div>
+                                    <div className="absolute -top-2 -right-2 bg-white text-indigo-700 text-[10px] font-black px-2 py-0.5 rounded-full shadow-md border-2 border-[#0f1219]">Ai</div>
                                 </div>
-                                
                                 <div>
                                     <div className="flex items-center gap-2 mb-1">
                                         <h3 className="text-xl font-black text-white">{item.title}</h3>
-                                        <motion.div
-                                            animate={{ opacity: [0.5, 1, 0.5], scale: [1, 1.2, 1] }}
-                                            transition={{ duration: 2, repeat: Infinity }}
-                                        >
+                                        <motion.div animate={{ opacity: [0.5, 1, 0.5], scale: [1, 1.2, 1] }} transition={{ duration: 2, repeat: Infinity }}>
                                             <Sparkles className="w-5 h-5 text-yellow-400 fill-yellow-400" />
                                         </motion.div>
                                     </div>
                                     <p className="text-sm text-slate-300 font-medium opacity-90 max-w-[200px] leading-relaxed">{item.subtitle}</p>
                                 </div>
                             </div>
-
                             <div className="self-end sm:self-center">
                                 <div className="w-12 h-12 rounded-full bg-white/10 hover:bg-white text-white hover:text-indigo-900 flex items-center justify-center border border-white/10 transition-all duration-300 group-hover:rotate-[-45deg]">
                                     <ArrowLeft className="w-5 h-5" strokeWidth={3} />
                                 </div>
                             </div>
                         </div>
-                        
-                        <div className="absolute top-1/2 right-10 -translate-y-1/2 opacity-5 pointer-events-none">
-                            <Wand2 size={120} />
-                        </div>
                     </div>
                 </motion.div>
             );
         };
 
         // 6. Image Slider
-        const IMAGES = [
-            "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpxposlxsv.png?_t=1769590682",
-            "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpnv5v143z.png?_t=1769590682",
-            "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpkqpm8k8l.png?_t=1769590756"
-        ];
-
         const ImageSlider = () => {
             const [currentIndex, setCurrentIndex] = useState(0);
-
             useEffect(() => {
                 const timer = setInterval(() => {
                     setCurrentIndex((prev) => (prev + 1) % IMAGES.length);
                 }, 4000);
                 return () => clearInterval(timer);
             }, []);
-
             return (
                 <div className="relative w-full aspect-[2/1] rounded-[24px] overflow-hidden shadow-2xl ring-1 ring-white/10 mb-2 group z-20">
                     <AnimatePresence mode='popLayout'>
@@ -451,31 +393,117 @@
                         className="absolute inset-0 w-full h-full object-cover"
                         />
                     </AnimatePresence>
-                    
                     <div className="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/80 via-transparent to-transparent opacity-80"></div>
-
                     <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10">
                         {IMAGES.map((_, index) => (
-                        <div
-                            key={index}
-                            className={`h-1.5 rounded-full transition-all duration-300 ${
-                            index === currentIndex ? 'w-6 bg-white' : 'w-1.5 bg-white/40'
-                            }`}
-                        />
+                        <div key={index} className={`h-1.5 rounded-full transition-all duration-300 ${index === currentIndex ? 'w-6 bg-white' : 'w-1.5 bg-white/40'}`} />
                         ))}
                     </div>
                 </div>
             );
         };
 
+        // 7. TTS Overlay (Text to Speech Feature)
+        const TTSOverlay = ({ onClose }) => {
+            const [text, setText] = useState('');
+            const [speaking, setSpeaking] = useState(false);
+            
+            const speak = () => {
+                if (!text) return;
+                window.speechSynthesis.cancel();
+                // Create utterance
+                const u = new SpeechSynthesisUtterance(text);
+                // Attempt to use a Persian voice if available, otherwise default
+                // iOS/Android usually select based on lang code
+                u.lang = 'fa-IR'; 
+                u.rate = 0.9;
+                
+                u.onstart = () => setSpeaking(true);
+                u.onend = () => setSpeaking(false);
+                u.onerror = () => setSpeaking(false);
+                
+                window.speechSynthesis.speak(u);
+            };
+
+            const stop = () => {
+                window.speechSynthesis.cancel();
+                setSpeaking(false);
+            };
+
+            return (
+                <motion.div 
+                    initial={{ opacity: 0, y: "100%" }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: "100%" }}
+                    transition={{ type: "spring", damping: 25, stiffness: 200 }}
+                    className="fixed inset-0 z-50 bg-[#0f172a] flex flex-col"
+                >
+                    <BackgroundEffects />
+                    
+                    {/* Header */}
+                    <div className="relative z-10 px-6 py-4 flex items-center justify-between glass-panel border-b-0">
+                        <button onClick={onClose} className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center active:scale-95 transition-transform">
+                            <ArrowLeft className="text-white" size={20} />
+                        </button>
+                        <h2 className="text-lg font-bold text-white">تبدیل متن به صدا</h2>
+                        <div className="w-10"></div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="relative z-10 flex-1 p-6 flex flex-col gap-6">
+                        <div className="flex-1 glass-panel rounded-3xl p-1 overflow-hidden shadow-2xl">
+                            <textarea 
+                                className="w-full h-full bg-transparent p-5 text-right text-lg text-white placeholder-slate-400 focus:outline-none resize-none leading-loose"
+                                placeholder="متن خود را اینجا بنویسید... (مثال: سلام، به آوا هوش خوش آمدید)"
+                                value={text}
+                                onChange={e => setText(e.target.value)}
+                            />
+                        </div>
+
+                        {/* Controls */}
+                        <div className="flex flex-col gap-4 mb-4">
+                            <motion.button 
+                                whileTap={{ scale: 0.98 }}
+                                onClick={speaking ? stop : speak}
+                                className={`w-full py-5 rounded-2xl font-bold text-lg flex items-center justify-center gap-3 shadow-xl transition-all relative overflow-hidden ${speaking ? 'bg-rose-500' : 'bg-gradient-to-r from-blue-600 to-indigo-600'}`}
+                            >
+                                {speaking ? (
+                                    <>
+                                        <Square fill="currentColor" size={20} />
+                                        <span>توقف پخش</span>
+                                        <span className="absolute right-4 w-2 h-2 bg-white rounded-full animate-ping"></span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <Play fill="currentColor" size={24} />
+                                        <span>پخش صدا</span>
+                                    </>
+                                )}
+                            </motion.button>
+                        </div>
+                    </div>
+                </motion.div>
+            );
+        };
+
         // --- MAIN APP COMPONENT ---
         const App = () => {
+            const [activeFeature, setActiveFeature] = useState(null);
+
+            const handleFeatureClick = (id) => {
+                if (id === 'tts') {
+                    setActiveFeature('tts');
+                } else {
+                    // For other features just show a simple alert or log for now
+                    console.log(`Feature ${id} clicked`);
+                }
+            };
+
             return (
                 <div className="min-h-screen relative overflow-x-hidden pb-10">
                     <BackgroundEffects />
                     
                     <main className="relative z-10 pt-2">
-                        {/* Added Header Component Here */}
                         <Header />
                         
                         <div className="px-6 mb-4">
@@ -487,7 +515,12 @@
                         <div className="px-6 mt-4">
                             <div className="grid grid-cols-2 gap-5">
                                 {FEATURES.map((item, index) => (
-                                    <FeatureCard key={item.id} item={item} index={index} />
+                                    <FeatureCard 
+                                        key={item.id} 
+                                        item={item} 
+                                        index={index} 
+                                        onClick={() => handleFeatureClick(item.id)}
+                                    />
                                 ))}
                             </div>
 
@@ -502,6 +535,13 @@
                             </div>
                         </div>
                     </main>
+
+                    {/* Overlays */}
+                    <AnimatePresence>
+                        {activeFeature === 'tts' && (
+                            <TTSOverlay key="tts" onClose={() => setActiveFeature(null)} />
+                        )}
+                    </AnimatePresence>
                 </div>
             );
         };