دکمه شروع باید به این لینک هدایت بشه و لینک هم داخلی باز بشه #/nav/online/news/getSingle/1149635/eyJpdiI6IkZ4dU12ZTZtdkw3NU5ZRHNFYmFuVHc9PSIsInZhbHVlIjoiWEtrVFFWWmhoSXdzQ1lMeG5kRGdhSGRIR0xNZ3pDblVBZTZZbHBPOVllNjRmdUo1dCtEM1RhTThDK0h6OStEeiIsIm1hYyI6ImU0ZDdiMzIyOWU0NjliMmY2ZDhjYzM1ZTA4OGI2YTVmMGI0NWQzMDE0NDZkZGM0ZjJkMzY3ODczNWJiMWQxZjIiLCJ0YWciOiIifQ==/17638102
<!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;
        }

        /* دکمه شروع جدید با انیمیشن */
        .start-button {
            position: relative;
            background: linear-gradient(45deg, #FF6B6B, #6B5B95);
            color: white;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            margin-top: 20px;
        }

        /* محتوای دکمه */
        .button-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .button-text {
            margin-right: 0;
        }

        .clothing-icon {
            margin-right: 15px;
            font-size: 24px;
            /* حذف انیمیشن CSS، مدیریت توسط JS */
        }

        /* افکت hover */
        .start-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
            background: linear-gradient(45deg, #6B5B95, #FF6B6B);
        }

        /* افکت ripple */
        .start-button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease-out, height 0.6s ease-out;
        }

        .start-button:active::after {
            width: 200px;
            height: 200px;
        }

        /* استایل آکوردئون */
        .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: all 0.3s ease;
        }

        .accordion-header:hover {
            color: #6B5B95;
            background: #f8f9fa;
        }

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

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

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

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

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

        /* استایل ویدیو */
        .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;
        }

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

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

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

            .start-button {
                padding: 12px 30px;
                font-size: 16px;
            }
        }

        /* استایل انیمیشن مدل و لباس */
        .transform-animation {
            margin: 20px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }

        .model-container {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .model {
            width: 100px;
            height: 150px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }

        .model-base {
            font-size: 60px;
            animation: pulse 2s infinite;
        }

        .equals {
            font-size: 30px;
            color: #6B5B95;
            margin: 0 15px;
        }

        .arrow {
            font-size: 30px;
            color: #FF6B6B;
            animation: arrowPulse 1.5s infinite;
        }

        .clothing {
            position: absolute;
            font-size: 40px;
            opacity: 0;
            transform: scale(0.5);
            animation: clothingAppear 6s infinite;
        }

        @keyframes clothingAppear {
            0% {
                opacity: 0;
                transform: scale(0.5) translateY(20px);
            }
            16.66% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
            33.33% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
            50% {
                opacity: 0;
                transform: scale(0.5) translateY(-20px);
            }
            66.66% {
                opacity: 0;
                transform: scale(0.5) translateY(20px);
            }
            83.33% {
                opacity: 0;
                transform: scale(0.5) translateY(20px);
            }
            100% {
                opacity: 0;
                transform: scale(0.5) translateY(20px);
            }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes arrowPulse {
            0% { transform: translateX(0); }
            50% { transform: translateX(5px); }
            100% { transform: translateX(0); }
        }

        .result-model {
            animation: resultAppear 6s infinite;
        }

        @keyframes resultAppear {
            0% { opacity: 0.5; transform: scale(0.95); }
            16.66% { opacity: 1; transform: scale(1); }
            33.33% { opacity: 1; transform: scale(1); }
            100% { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body>
    <div class="ai-animation-gallery">
        <div class="section">
            <a href="#" class="start-button">
                <span class="button-content">
                    <span class="button-text">شروع</span>
                    <span class="clothing-icon">👗</span>
                </span>
            </a>
            <!-- متن زیر دکمه شروع -->
            <h2 style="text-align: center; margin-top: 20px;">
                <span style="font-size: 16pt;">ربات</span>
                <span style="font-size: 10.6667px;"> &nbsp;<span style="color: #ff0000;">تغییر لباس</span> با </span>
                <span style="font-size: 16pt;">
                    <span style="color: #008080;">هوش مصنوعی</span>
                </span>
            </h2>
            <!-- بخش انیمیشن تغییر لباس -->
            <div class="transform-animation">
                <div class="model-container">
                    <div class="model">
                        <span class="model-base">🧍&zwj;♂️</span>
                        <span class="clothing">👔</span>
                    </div>
                    <span class="arrow">➡️</span>
                    <div class="model">
                        <span class="result-model">🧍&zwj;♂️👔</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion">
        <!-- سوال 1 -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>🤔 این ربات چیکار می&zwnj;کند؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>برای تغییر لباس با هوش مصنوعی می&zwnj;توانید در کادر اول عکس خود را اضافه کنید و در کادر دوم عکس لباس مورد نظر خود را بارگذاری کنید.</p>
                <p>برای اضافه کردن عکس لباس می&zwnj;توانید در گوگل لباس مورد نظر خود را جستجو کنید و لباس را دانلود کرده و داخل ربات قرار دهید تا لباس شما بر روی تصویری که اضافه کرده&zwnj;اید اعمال شود.</p>
                <p>همچنین برای جستجوی لباس در گوگل، در انتهای نام مدل لباس عبارت PNG را اضافه کنید.</p>
                <p>به عنوان مثال، اگر می&zwnj;خواهید یک مدل کت و شلوار از گوگل دانلود کنید، عبارت "دانلود کت و شلوار PNG" را وارد کنید.</p>
                <p>توجه داشته باشید: در صورت اضافه کردن مدل و لباس، فقط یک بار روی دکمه Try-on کلیک کنید و باید منتظر بمانید تا هوش مصنوعی تصویر شما را ایجاد کند.</p>
            </div>
        </div>
        <!-- سوال 2 -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>🔒 آیا این ربات محدودیت تعداد ساخت دارد؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>خیر، شما می&zwnj;توانید به&zwnj;صورت نامحدود و رایگان از این ربات برای تبدیل تصاویر خود استفاده کنید. در صورت مواجه شدن با ارور بعد از ساخت چندین تصویر، اگر همچنان نیاز به ایجاد تصاویر جدید دارید، باید از تحریم&zwnj;شکن پور لایت که معرفی کرده&zwnj;ایم استفاده کنید. با خاموش و روشن کردن پور لایت، محدودیت&zwnj;ها برداشته می&zwnj;شوند.</p>
            </div>
        </div>
        <!-- سوال 3 -->
        <div class="accordion-item">
            <button class="accordion-header">
                <span>👗 آیا می&zwnj;توانم لباس&zwnj;های فروشگاه خودم را بر روی مدل دلخواهم اعمال کنم؟</span>
                <span class="chevron">▼</span>
            </button>
            <div class="accordion-content">
                <p>بله، شما می&zwnj;توانید مدل را در کادر اول اضافه کنید و در قسمت پایین هم عکس لباس خود را آپلود کنید تا لباس به مدل انتخابی شما اعمال شود.</p>
                <p>همچنین برای ساخت مدل می&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="100%" height="auto" controls="controls">
                    <source src="https://uploadkon.ir/uploads/fe4608_24XiaoYing-Video-1731070946076-HD.mp4" type="video/mp4" />
                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
                </video>
            </div>
        </div>
    </div>
    <script>
        // اسکریپت آکوردئون
        document.querySelectorAll('.accordion-header').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');
                header.nextElementSibling.classList.toggle('active');
            });
        });

        // اسکریپت انیمیشن آیکون لباس در دکمه شروع فقط
        const startClothingIcons = ["👗", "👰", "👚", "👘", "👔", "👗", "🧥"];
        let startCurrentIcon = 0;

        setInterval(() => {
            const startIcon = document.querySelector('.start-button .clothing-icon');
            if (startIcon) {
                startIcon.textContent = startClothingIcons[startCurrentIcon];
                startCurrentIcon = (startCurrentIcon + 1) % startClothingIcons.length;
            }
        }, 3000); // تغییر هر 3 ثانیه

        // اسکریپت انیمیشن مدل و لباس (بدون تغییر)
        window.addEventListener('load', () => {
            const startButton = document.querySelector('.start-button');
            const clothingElement = document.querySelector('.clothing');
            const resultModel = document.querySelector('.result-model');

            startButton.addEventListener('click', (e) => {
                e.preventDefault(); // جلوگیری از رفتن به لینک

                // شروع انیمیشن با کمی تأخیر
                setTimeout(() => {
                    // برای نمایان شدن لباس روی مدل اولیه
                    clothingElement.style.opacity = '1';
                    clothingElement.style.transform = 'scale(1) translateY(0)';

                    // تغییر مدل نهایی
                    resultModel.classList.add('show-result');
                }, 500); // 0.5 ثانیه تأخیر
            });
        });
    </script>
</body>
</html> کد کامل یکجا درست کن بفرست بدون هیچ تغییر دیگری  حواست باشه تن مدل سه نوع لباس میشه اون هم باشه