<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>ربات تبدیل تصویر به پرامپت</title>
    <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;
        }

        /* استایل دکمه شروع با انیمیشن گرادیان و افکت درخشان */
        .gradient-button {
            position: relative;
            background: linear-gradient(135deg, #f77062, #fe5196, #9aafe9, #f77062);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            color: white;
            border-radius: 20px;
            padding: 20px 50px;
            text-align: center;
            display: inline-block;
            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;
            transition: transform 0.3s ease;
            overflow: hidden;
            color: white;
            font-size: 18px;
        }

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

        /* انیمیشن تغییر گرادیان */
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* افکت درخشان */
        .gradient-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: skewX(-20deg);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% {
                left: -75%;
            }
            50% {
                left: 125%;
            }
            100% {
                left: 125%;
            }
        }

        /* نماد AI ساده با CSS */
        .ai-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            color: #f77062;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(247, 112, 98, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(247, 112, 98, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(247, 112, 98, 0);
            }
        }

        .ai-animation-gallery .gradient-button .ai-icon {
            content: 'AI';
        }

        .ai-animation-gallery img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 15px 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-top: 20px;
        }

        @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; /* مرکز چین کردن ویدیو */
        }

        /* واکنش‌گرایی برای ویدیو */
        @media (max-width: 600px) {
            .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 p {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .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;
            }
        }
    </style>
</head>
<body>
    <div class="ai-animation-gallery">
        <!-- بخش شروع -->
        <div class="section">
            <a href="#/nav/online/news/getSingle/1149635/eyJpdiI6IlZFRmpjZ0NONGdLNktWRDhIZU13UFE9PSIsInZhbHVlIjoiNDl4T2ppM3VXczl6MnV4aWNUeEQwdG9VWi9pWXBHV3d5ZDhnV3N1TzYwVlk5SDFMa0JlTGJaZVhPSzRyTTc1eCIsIm1hYyI6IjUyMDhmYzE0ZGZlOTY1YWM3MTEyNmRjMjAwN2YzMDEzZGI5ZDVkZmQ4MWUyMTM4MmVmM2RkODM2MzNhN2ExMTgiLCJ0YWciOiIifQ==/17769950" class="gradient-button">
                شروع
                <div class="ai-icon">AI</div>
            </a>
            <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>🤔 این ربات چیکار می‌کنه؟</span> 
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>
                    یک تصویر از چهره خودتون به ربات می‌دید و در قسمت پرامپت هر متنی که بنویسید، تصویر شما به آن چیزی که نوشتید تبدیل می‌کنه. مثلاً یک عکس از خودتون می‌دید و در قسمت پرامپت می‌نویسید "groom" (داماد)، صورتمون به داماد تبدیل می‌شه!
                </p>
                <p>
                    متن رو باید به زبان انگلیسی وارد کنید یا از مترجم برای ترجمه متن استفاده کنید که در قسمت توضیحات موجوده.
                </p>
                <p>
                    چهار جایگاه برای قرار دادن تصویر در نظر گرفته شده است که در هر جایگاه می‌تونید یک تصویر از چهره خودتون آپلود کنید تا ربات بهتر بتواند چهره را شناسایی کند.
                </p>
                <p>
                    بعد از اضافه کردن عکس و پرامپت (متن) روی دکمه Generate کلیک کنید و در پایین صفحه بروید تا عکس شما ساخته بشه.
                </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">
                <video width="300" height="150" controls>
                    <source src="https://uploadkon.ir/uploads/507507_24Screenrecorder-2024-11-07-13-16-31-100.mp4" type="video/mp4">
                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
                </video>
                <p style="text-align: center; margin-top: 10px;">
                    برای مشاهده ویدیو آموزشی، روی دکمه پخش کلیک کنید.
                </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> اون شکلک ai انیمیشن چیه اون باید بغل متن باشه داخل دکمه شروع کد کامل یکجا درست کن بفرست