<p>&nbsp;</p>
<style>
        /* کلیات صفحه */
        body {
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            direction: rtl; /* تنظیم جهت متن به راست */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: auto;
        }

        /* استایل بخش انیمیشن گالری */
        .ai-animation-gallery {
            padding: 20px;
            width: 100%;
            max-width: 800px;
            text-align: center;
        }

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

        /* دکمه شروع و دکمه گرادیان */
        .start-button, .gradient-button {
            background: radial-gradient(circle at 50% 50%, #f77062, #fe5196);
            color: white;
            border-radius: 20px;
            padding: 20px 50px;
            text-align: center;
            display: inline-block;
            font-weight: bold;
            font-size: 18px;
            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: 20px 0;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .start-button:hover, .gradient-button:hover {
            transform: scale(1.05);
            box-shadow: rgba(0, 0, 0, 0.4) 6px 6px 20px, rgba(255, 255, 255, 0.5) -6px -6px 20px;
        }

        .start-button::before, .gradient-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                transform: rotate(45deg) translateX(-100%);
            }
            100% {
                transform: rotate(45deg) translateX(100%);
            }
        }

        /* دکمه‌های ربات */
        .bot-buttons {
            display: none;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.5s ease;
        }

        .bot-buttons.show {
            opacity: 1;
            transform: translateY(0);
        }

        .bot-button {
            padding: 15px 40px;
            border-radius: 15px;
            font-weight: bold;
            text-decoration: none;
            color: white;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            min-width: 180px;
            font-size: 16px;
            z-index: 1;
        }

        .simple-bot {
            background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
        }

        .advanced-bot {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .bot-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: translateX(-100%);
            transition: 0.6s;
            z-index: -1;
        }

        .bot-button:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            animation: float 2s ease-in-out infinite;
        }

        .bot-button:hover::before {
            transform: translateX(100%);
        }

        .simple-bot::after,
        .advanced-bot::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            transform: scaleX(0);
            transition: 0.3s;
        }

        .simple-bot:hover::after,
        .advanced-bot:hover::after {
            transform: scaleX(1);
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }

        @media (max-width: 600px) {
            .bot-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .bot-button {
                width: 80%;
                margin: 10px 0;
            }
        }

        /* استایل آکوردئون */
        .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;
            margin: 20px 0;
        }

        @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;
        }

        /* استایل ویدیو داخل آکوردئون */
        .accordion-content video {
            width: 100%;
            max-width: 800px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            display: block;
            margin: 0 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, opacity 0.6s ease, transform 0.6s ease;
            opacity: 0;
            transform: translateY(20px);
        }

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

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

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

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

            .chevron {
                font-size: 18px;
            }
        }
    </style>
<div class="ai-animation-gallery">
<div class="section"><button onclick="showBotOptions()" class="start-button">شروع📇&nbsp;</button>
<div class="bot-buttons" id="botButtons"><a href="#/nav/online/news/getSingle/1149636/eyJpdiI6InRzdDZjanh4a2Q0bnlJRkhlbW55dmc9PSIsInZhbHVlIjoidDNWMW5VcEZ2MW5kbFBnenpMak9aYXlDZWkrWU9TeWVFUzJmRXAyakhGeUthcmw1am9ZZmhmSXFqMHFOSXMxYyIsIm1hYyI6IjJiYjhlNTZkOTA1ZWQ4NjgxNDQ4OTM0ZDViYzQ3ZGQ4ZmQ5YjMwMDM4MGVjMzljNTI4OWMzZmY4YWEyYjVhYTQiLCJ0YWciOiIifQ==/17957421" class="bot-button simple-bot">🤖 ربات ساده</a> <a href="#/nav/online/news/getSingle/1149636/eyJpdiI6Im8reGh3cDNJb0VHZno5eHdQWExNemc9PSIsInZhbHVlIjoiMC80R3NPMFdWVVg4WHc1QVd2Z2dzZHJUcXV6NG9VNlJyMm00WUZFcVlUa055d1RXNmhuamdmZGVIQ2xMWkc1NCIsIm1hYyI6IjQ5YjY4NDhlZjYwZGNmOWUwNGRlMDlmMGI1YzY1MTNjZjI2Mzg4MzAwMTYzNDg5Mjc4ZjYxNTM4ZmUyMDk4YzEiLCJ0YWciOiIifQ==/17985948" class="bot-button advanced-bot">🚀 ربات پیشرفته</a></div>
<h2 style="text-align: center;"><span style="font-size: 16pt;">ربات <span style="font-size: 8pt;">تبدیل تصویر به پرامپت</span> <span style="color: #008080;">هوش مصنوعی</span> </span></h2>
</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;دست آورید.</p>
</div>
</div>
<!-- سوال جدید ۲ -->
<div class="accordion-item"><button class="accordion-header"> <span>📋 چجوری متن پرامپت کپی کنم؟</span> <span class="chevron">▼</span> </button>
<div class="accordion-content">
<p>برای کپی کردن متن پرامپت از دکمه کپی خودش استفاده کنید و یا روی متن محکم کلیک کنید و متن را کپی کنید. بعد از کپی می&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="300" height="150" controls="controls">
                    <source src="https://uploadkon.ir/uploads/507507_24Screenrecorder-2024-11-07-13-16-31-100.mp4" type="video/mp4" />
                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
                </video></div>
</div>
<!-- ویدیو آموزشی ربات پیشرفته -->
<div class="accordion-item"><button class="accordion-header"> <span>🎥 ویدیو آموزشی ربات پیشرفته</span> <span class="chevron">▼</span> </button>
<div class="accordion-content"><video width="300" height="150" controls="controls">
                    <source src="https://uploadkon.ir/uploads/c4a510_24Screenrecorder-2024-11-10-12-38.mp4" type="video/mp4" />
                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
                </video></div>
</div>
</div>
<p>
<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');
            });
        });

        // اسکریپت نمایش دکمه‌های ربات با انیمیشن
        function showBotOptions() {
            const botButtons = document.getElementById('botButtons');
            if (botButtons.style.display === 'flex') {
                botButtons.classList.remove('show');
                setTimeout(() => {
                    botButtons.style.display = 'none';
                }, 500);
            } else {
                botButtons.style.display = 'flex';
                setTimeout(() => {
                    botButtons.classList.add('show');
                }, 10);
            }
        }
    </script>
</p>
<p style="text-align: center;">نمونه Qr Code ساده</p>
<p><img src="https://app.puzzley.net/uploads/user/Jydo/هوش مصنوعی/image (16) (24).png" alt="" /></p>
<p style="text-align: center;">نمونه Qr Code پیشرفته با هوش مصنوعی</p>
<p><img src="https://app.puzzley.net/uploads/user/Jydo/هوش مصنوعی/image (16) (25).png" alt="" /></p>