به این کد من انیمیشن های خیلی حرفه ای و زیبا اضافه کن<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>معرفی ربات چت و تصویرساز هوش مصنوعی</title>
    <style>
        /* کلیات صفحه */
        body {
            background-color: #f5f7fa;
            min-height: 100vh;
            margin: 0;
            padding: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            direction: rtl; /* تنظیم جهت متن به راست */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* استایل آکوردئون */
        .accordion {
            max-width: 800px;
            width: 100%;
            background: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .accordion-item {
            border-bottom: 1px solid #e2e8f0;
        }

        .accordion-header {
            background: none;
            border: none;
            outline: none;
            padding: 20px;
            width: 100%;
            text-align: right;
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: color 0.3s ease;
        }

        .accordion-header:hover {
            color: #3182ce;
        }

        .chevron {
            transition: transform 0.3s ease;
            font-size: 20px;
            color: #a0aec0;
        }

        .accordion-header.active .chevron {
            transform: rotate(180deg);
            color: #3182ce;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease, padding 0.5s ease;
            background-color: #f7fafc;
            padding: 0 20px;
        }

        .accordion-content p, .accordion-content video {
            margin: 20px 0;
            color: #4a5568;
            line-height: 1.6;
        }

        .accordion-content.active {
            max-height: 1000px;
            padding: 20px;
        }

        /* استایل ویدیو */
        video {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        /* بهبود پاسخ‌ها برای متون طولانی */
        .accordion-content p {
            text-align: right;
        }

        /* رسانه‌های واکنش‌گرا */
        @media (max-width: 600px) {
            .accordion {
                padding: 20px;
            }

            .accordion-header {
                font-size: 16px;
            }

            .chevron {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div class="accordion">
        <!-- سوال اول -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>🤖 این ربات چه قابلیت‌هایی دارد؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>این ربات هوش مصنوعی مجهز به قابلیت‌های پیشرفته‌ای است که به شما این امکان را می‌دهد تا به‌صورت چت با آن تعامل داشته باشید و همچنین تصاویر دلخواه خود را بر اساس توضیحات متنی ایجاد نمایید. این ابزار برای کاربران در تمامی سطوح مهارتی مناسب بوده و تجربه‌ای ساده و کاربرپسند را فراهم می‌کند.</p>
            </div>
        </div>

        <!-- ویدیو آموزشی -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>🎥 ویدیو آموزشی</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <video controls controlsList="nodownload">
                    <source src="your-video-source.mp4" type="video/mp4">
                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
                </video>
                <p>برای مشاهده آموزش‌های جامع و کاربردی درباره نحوه استفاده از ربات، ویدیوی آموزشی زیر را مشاهده کنید.</p>
            </div>
        </div>

        <!-- سوال دوم -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>📝 آیا ربات از متن فارسی پشتیبانی می‌کند؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>بله، این ربات به طور کامل از متن فارسی پشتیبانی می‌کند. شما می‌توانید با وارد کردن پرامپت‌های متنی به زبان فارسی، تصاویر دلخواه خود را بر اساس توضیحات ارائه شده تولید کنید. این ویژگی به کاربران فارسی‌زبان اجازه می‌دهد تا به راحتی از قابلیت‌های ربات بهره‌مند شوند.</p>
            </div>
        </div>

        <!-- سوال سوم -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>🖼️ چگونه با این ربات تصاویر تولید کنیم؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>برای تولید تصاویر با این ربات، کافی است روی سه نقطه داخل صفحه کلیک کنید و گزینه دوم رو انتخاب کنید سپس توضیحات متنی خود را وارد کنید و سابمیت رو بزنید تا تصاویر شما در لحظه ایجاد بشه.</p>
            </div>
        </div>

        <!-- سوال چهارم -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>🔢 آیا محدودیتی در تعداد تصاویر تولید شده وجود دارد؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p style="text-align: right;">
                    خیر، با استفاده از این ربات محدودیتی در تعداد تصاویر تولید شده وجود ندارد. سیستم ما از هوش مصنوعی پیشرفته فلاکس بهره می‌برد که دیگر نیازی به اشتراک ماهیانه ۲۰ دلار نیست. با این سیستم، می‌توانید بدون هیچ محدودیتی به تولید تصاویر دلخواه خود حتی با استفاده از پرامپت‌های فارسی بپردازید.
                </p>
            </div>
        </div>

        <!-- سوال پنجم -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>🎨 برای ساخت تصاویر حرفه‌ای چیکار کنم؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>برای تولید تصاویر حرفه‌ای با استفاده از پرامپت‌های پیشرفته و ساخت تصاویر با کیفیت بالا، می‌توانید از پرامپت‌های موجود در ربات استفاده کنید. در بالای صفحه سمت چپ روی دکمه P کلیک کنید و از پرامپت‌های حرفه‌ای که ما قرار دادیم در توضیحات متنی تصویر خود استفاده کنید تا تصاویر حرفه‌ای‌تر تولید کنید.</p>
            </div>
        </div>
    </div>

    <script>
        // انتخاب تمام دکمه‌های هدر آکوردئون
        const accordionHeaders = document.querySelectorAll('.accordion-header');

        accordionHeaders.forEach(header => {
            header.addEventListener('click', () => {
                const activeHeader = document.querySelector('.accordion-header.active');

                // بستن آکوردئونی که در حال حاضر باز است
                if (activeHeader && activeHeader !== header) {
                    activeHeader.classList.remove('active');
                    activeHeader.nextElementSibling.classList.remove('active');
                }

                // باز یا بسته کردن آکوردئون کلیک شده
                header.classList.toggle('active');
                const accordionContent = header.nextElementSibling;
                accordionContent.classList.toggle('active');
            });
        });
    </script>
</body>
</html> کد کامل یکجا درست کن بفرست