Spaces:

Opera8
/

Ava

Running

App Files Files Community

Opera8 commited on Jan 28

Commit

54872e6

verified ·

1 Parent(s): 96e14ad

Upload index (1) (4).html

Browse files

Files changed (1) hide show

index (1) (4).html +519 -0

index (1) (4).html ADDED Viewed

	@@ -0,0 +1,519 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>آوا هوش - جعبه ابزار صدا</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet">
+    <!-- Babel for JSX transformation in browser -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <style>
+      body {
+        font-family: 'Vazirmatn', sans-serif;
+        background-color: #0f172a;
+        color: white;
+        -webkit-tap-highlight-color: transparent;
+        overflow-x: hidden;
+      }
+      ::-webkit-scrollbar {
+        width: 6px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #0f172a;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #334155;
+        border-radius: 3px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #475569;
+      }
+      /* Custom Animations */
+      @keyframes gradient {
+          0% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+          100% { background-position: 0% 50%; }
+      }
+      .animate-gradient-x {
+          animation: gradient 3s ease infinite;
+      }
+    </style>
+    <!-- Import Map to resolve modules -->
+    <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@18.2.0",
+    "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+    "framer-motion": "https://esm.sh/framer-motion@10.16.4",
+    "lucide-react": "https://esm.sh/lucide-react@0.292.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
+    "react/": "https://esm.sh/react@^19.2.4/"
+  }
+}
+</script>
+</head>
+<body>
+    <div id="root"></div>
+    <!-- MAIN APPLICATION SCRIPT -->
+    <script type="text/babel" data-type="module">
+        import React, { useState, useEffect } from 'react';
+        import ReactDOM from 'react-dom/client';
+        import { motion, AnimatePresence } from 'framer-motion';
+        import {
+            Mic2,
+            Wand2,
+            Podcast,
+            Fingerprint,
+            Activity,
+            Music,
+            Settings,
+            User,
+            Bell,
+            ArrowLeft,
+            Sparkles
+        } from 'lucide-react';
+        // --- CONSTANTS & DATA ---
+        const APP_NAME = "آوا هوش";
+        const FEATURES = [
+            {
+                id: 'tts',
+                title: 'تبدیل متن به گفتار',
+                subtitle: '۳۰ گوینده حرفه‌ای',
+                icon: Mic2,
+                colorFrom: 'from-blue-500',
+                colorTo: 'to-cyan-400',
+                isHot: true
+            },
+            {
+                id: 'voice-changer',
+                title: 'تغییر صدا',
+                subtitle: 'مدل‌های جذاب فارسی',
+                icon: Wand2,
+                colorFrom: 'from-violet-500',
+                colorTo: 'to-purple-500'
+            },
+            {
+                id: 'podcast',
+                title: 'ساخت پادکست',
+                subtitle: 'تولید خودکار با هوش مصنوعی',
+                icon: Podcast,
+                colorFrom: 'from-pink-500',
+                colorTo: 'to-rose-500'
+            },
+            {
+                id: 'clone',
+                title: 'کلون کردن صدا',
+                subtitle: 'شبیه‌سازی دقیق صدا',
+                icon: Fingerprint,
+                colorFrom: 'from-amber-500',
+                colorTo: 'to-orange-500',
+                isNew: true
+            },
+            {
+                id: 'enhance',
+                title: 'افزایش کیفیت',
+                subtitle: 'حذف نویز و شفاف‌سازی',
+                icon: Activity,
+                colorFrom: 'from-emerald-500',
+                colorTo: 'to-green-400'
+            }
+        ];
+        const SPECIAL_FEATURE = {
+            id: 'ai-gen',
+            title: 'تولید صدا Ai',
+            subtitle: 'خلق افکت‌های صوتی خاص',
+            icon: Music,
+            colorFrom: 'from-indigo-600',
+            colorTo: 'to-blue-600'
+        };
+        // --- COMPONENTS ---
+        // 1. Background Effects
+        const Particle = ({ index }) => {
+            const randomX = Math.random() * 100;
+            const randomDelay = Math.random() * 5;
+            const randomDuration = 10 + Math.random() * 10;
+            return (
+                <motion.div
+                    className="absolute w-1 h-1 bg-white rounded-full opacity-0"
+                    initial={{ x: `${randomX}vw`, y: '110vh', opacity: 0 }}
+                    animate={{
+                        y: '-10vh',
+                        opacity: [0, 0.3, 0]
+                    }}
+                    transition={{
+                        duration: randomDuration,
+                        repeat: Infinity,
+                        delay: randomDelay,
+                        ease: "linear"
+                    }}
+                    style={{
+                        left: 0,
+                        filter: 'blur(1px)'
+                    }}
+                />
+            );
+        };
+        const BackgroundEffects = () => {
+            return (
+                <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#0B0F19]">
+                    <div
+                        className="absolute inset-0 opacity-[0.04]"
+                        style={{
+                            backgroundImage: `linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)`,
+                            backgroundSize: '50px 50px'
+                        }}
+                    ></div>
+                    {[...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"
+                        }}
+                        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
+                        }}
+                        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>
+            );
+        };
+        // 2. Header
+        const Header = () => {
+            return (
+                <header className="relative z-20 flex flex-col items-center justify-center pt-8 pb-4">
+                    <motion.div
+                        initial={{ y: -20, opacity: 0 }}
+                        animate={{ y: 0, opacity: 1 }}
+                        transition={{ duration: 0.6, ease: "easeOut" }}
+                        className="flex flex-col items-center gap-4"
+                    >
+                        <div className="relative group cursor-pointer">
+                            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 flex items-center justify-center shadow-2xl shadow-indigo-500/40 ring-4 ring-white/5 transition-transform duration-500 hover:scale-105">
+                                <span className="text-4xl font-black text-white pb-2">آ</span>
+                            </div>
+                            <span className="absolute -top-1 -right-1 flex h-4 w-4">
+                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
+                                <span className="relative inline-flex rounded-full h-4 w-4 bg-cyan-500 border-4 border-[#0B0F19]"></span>
+                            </span>
+                        </div>
+                        <h1 className="text-xl font-bold text-slate-200 tracking-wide opacity-90">{APP_NAME}</h1>
+                    </motion.div>
+                </header>
+            );
+        };
+        // 3. Hero
+        const Hero = () => {
+            return (
+                <div className="px-6 pt-2 pb-8 mb-2 relative z-10 text-center">
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
+                    >
+                        <h2 className="text-[2.2rem] font-black text-white mb-4 leading-[1.3] tracking-tight">
+                        دنیای صدا را <br />
+                        <span className="relative inline-block px-2">
+                            <span className="absolute inset-0 bg-indigo-500/10 blur-xl rounded-full transform rotate-3"></span>
+                            <span
+                            className="relative text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-cyan-300 animate-gradient-x"
+                            style={{ backgroundSize: '200% auto' }}
+                            >
+                            با هوش مصنوعی
+                            </span>
+                        </span>
+                        <br/>
+                        <span className="text-white">متحول کنید</span>
+                        </h2>
+                        <p className="text-slate-400 text-sm leading-7 font-light max-w-[80%] mx-auto opacity-80">
+                        تکنولوژی پیشرفته برای خلق، ویرایش و تبدیل صدا
+                        </p>
+                    </motion.div>
+                </div>
+            );
+        };
+        // 4. Feature Card
+        const FeatureCard = ({ item, index }) => {
+            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 }}
+                    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
+                                    animate={{ rotate: [0, 5, -5, 0] }}
+                                    transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: index * 0.5 }}
+                                >
+                                    <item.icon className="text-white w-6 h-6 relative z-10" strokeWidth={2} />
+                                </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 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ delay: 0.5 + index * 0.1, type: "spring" }}
+                                    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>
+                                    )}
+                                    {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>
+                                    )}
+                                </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>
+                        </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>
+                    </div>
+                </motion.div>
+            );
+        };
+        // 5. Special Card
+        const SpecialCard = ({ item }) => {
+            return (
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                    animate={{ opacity: 1, scale: 1, y: 0 }}
+                    transition={{ delay: 0.6, duration: 0.6, ease: "easeOut" }}
+                    whileTap={{ scale: 0.98 }}
+                    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" }}
+                                        >
+                                            <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>
+                                <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 }}
+                                        >
+                                            <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'>
+                        <motion.img
+                        key={currentIndex}
+                        src={IMAGES[currentIndex]}
+                        alt={`Slide ${currentIndex + 1}`}
+                        initial={{ opacity: 0, scale: 1.1 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.7 }}
+                        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>
+                </div>
+            );
+        };
+        // --- MAIN APP COMPONENT ---
+        const App = () => {
+            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">
+                            <ImageSlider />
+                        </div>
+                        <Hero />
+                        <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} />
+                                ))}
+                            </div>
+                            <div className="mt-8 mb-4">
+                                <SpecialCard item={SPECIAL_FEATURE} />
+                            </div>
+                            <div className="text-center mt-8 opacity-40">
+                                <p className="text-[10px] text-slate-300 font-light tracking-widest">
+                                    POWERED BY ALPHA • VER 2.0
+                                </p>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+            );
+        };
+        // --- RENDER ---
+        const rootElement = document.getElementById('root');
+        const root = ReactDOM.createRoot(rootElement);
+        root.render(
+            <React.StrictMode>
+                <App />
+            </React.StrictMode>
+        );
+    </script>
+</body>
+</html>