به این کد یک دکمه شروع اضافه کن<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ربات تحلیل تصاویر هوشمند</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Vazirmatn', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
        }

        .hero-section {
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            max-width: 800px;
            width: 100%;
        }

        .hero-title {
            color: #2d3748;
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, #3490dc, #6574cd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .faq-container {
            max-width: 800px;
            width: 100%;
            background: white;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            overflow: hidden;
        }

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

        .faq-question {
            padding: 1.5rem;
            width: 100%;
            text-align: right;
            background: none;
            border: none;
            font-size: 1.1rem;
            font-weight: 500;
            color: #2d3748;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

        .faq-question:hover {
            background: #f7fafc;
            color: #3182ce;
        }

        .faq-question.active {
            background: #f0f4f8;
            color: #3182ce;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: #f8fafc;
            padding: 0 1.5rem;
        }

        .faq-answer.active {
            max-height: 300px;
            padding: 1.5rem;
        }

        .faq-answer p {
            color: #4a5568;
            line-height: 1.6;
        }

        .video-container {
            margin: 1rem 0;
            width: 100%;
            max-width: 600px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        video {
            width: 100%;
            display: block;
        }

        .icon {
            transition: transform 0.3s ease;
        }

        .faq-question.active .icon {
            transform: rotate(180deg);
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .faq-question {
                font-size: 1rem;
                padding: 1rem;
            }

            .faq-answer.active {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="hero-section">
        <h1 class="hero-title">ربات تحلیل تصاویر هوشمند</h1>
        <p>با استفاده از تکنولوژی پیشرفته هوش مصنوعی</p>
    </div>

    <div class="faq-container">
        <div class="faq-item">
            <button class="faq-question">
                <span>🤖 این ربات چه کاری انجام می‌دهد؟</span>
                <span class="icon">▼</span>
            </button>
            <div class="faq-answer">
                <p>این ربات با استفاده از تکنولوژی پیشرفته هوش مصنوعی، قابلیت تحلیل تصاویر را دارد. شما می‌توانید تصویر مورد نظر خود را آپلود کرده و از ربات بخواهید توضیحات مربوط به آن را ارائه دهد. همچنین می‌توانید اسکرین‌شات‌های خود را به کد تبدیل کنید و از خلاقیت‌های بی‌پایان این ربات بهره‌مند شوید.</p>
            </div>
        </div>

        <div class="faq-item">
            <button class="faq-question">
                <span>🎥 آموزش استفاده از ربات</span>
                <span class="icon">▼</span>
            </button>
            <div class="faq-answer">
                <div class="video-container">
                    <video controls controlslist="nodownload">
                        <source src="https://uploadkon.ir/uploads/695002_24Screenrecorder-2024-11-02-16-25-31-317.mp4" type="video/mp4">
                        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
                    </video>
                </div>
            </div>
        </div>

        <div class="faq-item">
            <button class="faq-question">
                <span>📝 آیا ربات از زبان فارسی پشتیبانی می‌کند؟</span>
                <span class="icon">▼</span>
            </button>
            <div class="faq-answer">
                <p>بله، هر دو ربات تحلیل تصاویر از متن فارسی پشتیبانی می‌کنند. در صورتی که ربات توضیحات را به انگلیسی ارائه دهد، کافیست از آن بخواهید متن را به فارسی ترجمه کند.</p>
            </div>
        </div>
    </div>

    <script>
        const faqQuestions = document.querySelectorAll('.faq-question');

        faqQuestions.forEach(question => {
            question.addEventListener('click', () => {
                const answer = question.nextElementSibling;
                const isActive = question.classList.contains('active');

                // Close all other questions
                faqQuestions.forEach(q => {
                    q.classList.remove('active');
                    q.nextElementSibling.classList.remove('active');
                });

                // Toggle current question
                if (!isActive) {
                    question.classList.add('active');
                    answer.classList.add('active');
                }
            });
        });
    </script>
</body>
</html> مثل کد پایین از کد پایین الهام بگیر اون قسمت سوالات رو تغییر بده <p>&nbsp;</p>
<style>
        /* کلیات صفحه */
        body {
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            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;
            overflow: hidden;
        }

        /* استایل آکوردئون */
        .accordion {
            max-width: 800px;
            width: 100%;
            background: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
            animation: fadeIn 1s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

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

        .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: background 0.3s ease, color 0.3s ease;
            position: relative;
        }

        .accordion-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: #3182ce;
            transition: width 0.3s ease;
        }

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

        .accordion-header.active {
            background: #f0f4f8;
        }

        .accordion-header.active::after {
            width: 100%;
        }

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

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

        .accordion-content {
            max-height: 0;
            opacity: 0;
            transform: translateY(-20px);
            overflow: hidden;
            transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
            background-color: #f7fafc;
            padding: 0 20px;
            border-radius: 0 0 12px 12px;
        }

        .accordion-content.active {
            max-height: 1000px;
            opacity: 1;
            transform: translateY(0);
            padding: 20px;
        }

        /* استایل ویدیو با اندازه 350x250 */
        .accordion-content video {
            width: 350px;
            height: 250px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            display: block;
            margin: 0 auto; /* مرکز چین کردن ویدیو */
        }

        /* واکنش‌گرایی برای ویدیو */
        @media (max-width: 400px) {
            .accordion-content video {
                width: 100%;
                height: auto;
            }
        }

        .accordion-content video:hover {
            transform: scale(1.02);
        }

        /* بهبود پاسخ‌ها برای متون طولانی */
        .accordion-content p {
            text-align: right;
            margin: 20px 0;
            color: #4a5568;
            line-height: 1.6;
            transition: color 0.3s ease;
        }

        .accordion-content p:hover {
            color: #2d3748;
        }

        /* انیمیشن مجزای ورود متن و ویدیو */
        .accordion-content video, .accordion-content p {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .accordion-content.active video,
        .accordion-content.active p {
            opacity: 1;
            transform: translateY(0);
        }

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

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

            .chevron {
                font-size: 18px;
            }
        }

        /* استایل گالری انیمیشن هوش مصنوعی */
        .ai-animation-gallery {
            padding: 20px;
        }

        .ai-animation-gallery .section {
            margin: 0;
            text-align: center;
        }

        /* به‌روزرسانی استایل دکمه شروع با انیمیشن */
        .ai-animation-gallery .gradient-button {
            background: radial-gradient(circle at 50% 50%, #f77062, #fe5196);
            color: white;
            border-radius: 20px;
            padding: 20px 50px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            font-weight: bold;
            box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 15px, rgba(255, 255, 255, 0.4) -4px -4px 15px;
            cursor: pointer;
            border: none;
            margin: 0;
            text-decoration: none;
            position: relative;
            transition: transform 0.3s ease, background 0.3s ease;
            overflow: hidden;
        }

        .ai-animation-gallery .gradient-button:hover {
            transform: scale(1.05);
        }

        .ai-animation-gallery .gradient-button:active {
            transform: scale(0.98);
        }

        /* Animated AI Icon inside the button */
        .ai-animation-gallery .gradient-button .ai-icon {
            width: 24px;
            height: 24px;
            margin-left: 10px; /* Space between icon and text */
            animation: rotateIcon 2s linear infinite;
        }

        @keyframes rotateIcon {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .ai-animation-gallery .gradient-button svg {
            fill: white;
            width: 100%;
            height: 100%;
        }

        .ai-animation-gallery img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 15px 0;
        }

        .ai-animation-gallery .video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 15px auto;
            border-radius: 10px;
            overflow: hidden;
        }

        .ai-animation-gallery video {
            width: 100%;
            height: auto;
            display: block;
        }

        .ai-animation-gallery .custom-player {
            background-color: black;
        }

        .ai-animation-gallery .controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background: rgba(0, 0, 0, 0.5);
        }

        .ai-animation-gallery .progress-bar {
            flex: 1;
            margin: 0 10px;
        }

        .ai-animation-gallery .progress-bar input {
            width: 100%;
            height: 4px;
        }

        .ai-animation-gallery .play-pause,
        .ai-animation-gallery .fullscreen {
            cursor: pointer;
            font-size: 20px;
            color: white;
            padding: 5px;
        }

        .ai-animation-gallery hr {
            border: none;
            height: 2px;
            background: linear-gradient(90deg, transparent, #ccc, transparent);
            margin: 30px 0;
        }

        .ai-animation-gallery .triple-hr hr {
            margin: 10px 0;
        }
    </style>
<div class="ai-animation-gallery"><!-- Section 1 -->
<div class="section"><a href="#/nav/online/news/getSingle/1149635/eyJpdiI6InNjb0NUVWtnd1Y3bDMvNG5nZkZBWXc9PSIsInZhbHVlIjoib25GNm0vM21HRFYwZDR2ek5NU2RWRDJzLzhVOGlyS2htdnJDTjU4MjZSb2JYM3NIWld6QWdUWkcvWGhFOExtayIsIm1hYyI6IjEyYTY2MTQwMzc3MTI5MjI3MjI0MWZhYzE3NzUxODk4YjlmMzMyNzQ0N2ZkMTgwZjM1NTc2ZjQ1MTEwNTEzZGUiLCJ0YWciOiIifQ==/17903934" class="gradient-button"> <span style="display: flex; align-items: center;"> شروع&nbsp;<span class="ai-icon"> <!-- Animated AI SVG Icon --> <svg viewbox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <path d="M32 2C17.664 2 6 13.664 6 28c0 14.336 11.664 26 26 26s26-11.664 26-26C58 13.664 46.336 2 32 2zm0 48c-11.046 0-20-8.954-20-20S20.954 10 32 10s20 8.954 20 20-8.954 20-20 20z"></path> <path d="M32 16a16 16 0 100 32 16 16 0 000-32z"></path> <path d="M32 24a8 8 0 100 16 8 8 0 000-16z"></path> </svg> </span> </span> </a>
<h2 style="text-align: center;"><span style="font-size: 16pt;">ربات تحلیل تصاویر با <span style="color: #008080;">هوش مصنوعی</span></span></h2>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
</div>
</div>
<div class="accordion"><!-- سوال اول -->
<div class="accordion-item"><button class="accordion-header"> <span>🤖 این ربات چه قابلیت&zwnj;هایی دارد؟</span> <span class="chevron">▼</span> </button>
<div class="accordion-content">
<p>این ربات هوش مصنوعی مجهز به قابلیت&zwnj;های پیشرفته&zwnj;ای است که به شما این امکان را می&zwnj;دهد تا به&zwnj;صورت چت با آن تعامل داشته باشید و همچنین تصاویر دلخواه خود را بر اساس توضیحات متنی ایجاد نمایید. این ابزار برای کاربران در تمامی سطوح مهارتی مناسب بوده و تجربه&zwnj;ای ساده و کاربرپسند را فراهم می&zwnj;کند.</p>
</div>
</div>
<!-- ویدیو آموزشی -->
<div class="accordion-item"><button class="accordion-header"> <span>🎥 ویدیو آموزشی</span> <span class="chevron">▼</span> </button>
<div class="accordion-content"><video width="250" height="350" controls="controls" controlslist="nodownload">
                    <source src="https://uploadkon.ir/uploads/695002_24Screenrecorder-2024-11-02-16-25-31-317.mp4" type="video/mp4" />
                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
                </video></div>
</div>
<!-- سوال دوم -->
<div class="accordion-item"><button class="accordion-header"> <span>📝 آیا ربات از متن فارسی پشتیبانی می&zwnj;کند؟</span> <span class="chevron">▼</span> </button>
<div class="accordion-content">
<p>بله، این ربات به طور کامل از متن فارسی پشتیبانی می&zwnj;کند. شما می&zwnj;توانید با وارد کردن پرامپت&zwnj;های متنی به زبان فارسی، تصاویر دلخواه خود را بر اساس توضیحات ارائه شده تولید کنید. این ویژگی به کاربران فارسی&zwnj;زبان اجازه می&zwnj;دهد تا به راحتی از قابلیت&zwnj;های ربات بهره&zwnj;مند شوند.</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;">خیر، با استفاده از این ربات محدودیتی در تعداد تصاویر تولید شده وجود ندارد. سیستم ما از هوش مصنوعی پیشرفته فلاکس بهره می&zwnj;برد که دیگر نیازی به اشتراک ماهیانه ۲۰ دلار نیست. با این سیستم، می&zwnj;توانید بدون هیچ محدودیتی به تولید تصاویر دلخواه خود حتی با استفاده از پرامپت&zwnj;های فارسی بپردازید.</p>
</div>
</div>
<!-- سوال پنجم -->
<div class="accordion-item"><button class="accordion-header"> <span>🎨 برای ساخت تصاویر حرفه&zwnj;ای چیکار کنم؟</span> <span class="chevron">▼</span> </button>
<div class="accordion-content">
<p>برای تولید تصاویر حرفه&zwnj;ای با استفاده از پرامپت&zwnj;های پیشرفته و ساخت تصاویر با کیفیت بالا، می&zwnj;توانید از پرامپت&zwnj;های موجود در ربات استفاده کنید. در بالای صفحه سمت چپ روی دکمه P کلیک کنید و از پرامپت&zwnj;های حرفه&zwnj;ای که ما قرار دادیم در توضیحات متنی تصویر خود استفاده کنید تا تصاویر حرفه&zwnj;ای&zwnj;تر تولید کنید.</p>
</div>
</div>
</div>
<!-- Custom Video Player Script -->
<p>
<script>
        // کنترل‌های ویدیو (در این کد استفاده نشده ولی می‌توانید آن‌ها را به دلخواه خود سفارشی‌سازی کنید)
        (function() {
            const video = document.getElementById('aiGalleryVideo');
            const playPauseBtn = document.getElementById('aiGalleryPlayPause');
            const progressBar = document.getElementById('aiGalleryProgress');
            const fullscreenBtn = document.getElementById('aiGalleryFullscreen');

            if (video && playPauseBtn && progressBar && fullscreenBtn) {
                playPauseBtn.onclick = () => {
                    if (video.paused) {
                        video.play();
                        playPauseBtn.textContent = '⏸️';
                    } else {
                        video.pause();
                        playPauseBtn.textContent = '▶️';
                    }
                };

                video.ontimeupdate = () => {
                    progressBar.value = (video.currentTime / video.duration) * 100;
                };

                progressBar.oninput = () => {
                    video.currentTime = (progressBar.value / 100) * video.duration;
                };

                video.onended = () => {
                    playPauseBtn.textContent = '▶️';
                };

                fullscreenBtn.onclick = () => {
                    video.requestFullscreen();
                };
            }
        })();

        // آکوردئون اسکرپت
        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>
</p> کد کامل یکجا درست کن بفرست