<!DOCTYPE html>
<html 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: 20px;
            direction: rtl;
        }

        .unique-start-button-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .unique-start-button {
            background: radial-gradient(circle at 50% 50%, #f77062, #fe5196);
            color: white;
            border-radius: 30px;
            padding: 20px 80px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 20px, rgba(255, 255, 255, 0.4) -4px -4px 20px;
            cursor: pointer;
            border: none;
            text-decoration: none;
            transition: transform 0.3s ease, background 0.3s ease;
            overflow: hidden;
            font-size: 1.3rem;
            z-index: 1000;
            position: relative;
        }

        .unique-start-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .unique-start-button:hover::before {
            opacity: 1;
        }

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

        .unique-start-button:active {
            transform: scale(0.98);
        }

        .unique-start-button .start-icon {
            width: 28px;
            height: 28px;
            margin-right: 12px;
            animation: rotateIcon 2s linear infinite;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .analysis-buttons {
            display: none;
            flex-direction: column;
            gap: 1.5rem;
            margin-top: 1.5rem;
            align-items: center;
        }

        .analysis-button {
            position: relative;
            background: radial-gradient(circle at 50% 50%, #6a11cb, #2575fc);
            color: white;
            border-radius: 30px;
            padding: 15px 60px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 20px, rgba(255, 255, 255, 0.4) -4px -4px 20px;
            cursor: pointer;
            border: none;
            text-decoration: none;
            transition: transform 0.3s ease, background 0.3s ease;
            overflow: hidden;
            font-size: 1.1rem;
            z-index: 1000;
        }

        .analysis-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(0deg);
            opacity: 0;
            transition: transform 0.5s ease, opacity 0.3s ease;
        }

        .analysis-button:hover::before {
            opacity: 1;
            transform: rotate(360deg);
        }

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

        .analysis-button:active {
            transform: scale(0.98);
        }

        .analysis-button.advanced {
            background: radial-gradient(circle at 50% 50%, #ff7e5f, #feb47b);
        }

        /* انیمیشن‌های خاص دکمه‌ها */
        .analysis-button.primary {
            animation: pulse 2s infinite;
        }

        .analysis-button.advanced {
            animation: float 3s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
            }
            70% {
                box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
            }
        }

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

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

        .unique-start-button svg {
            fill: white;
            width: 100%;
            height: 100%;
        }

        .hero-section {
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.95);
            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;
        }

        .hero-section p {
            color: #4a5568;
            font-size: 1.1rem;
        }

        .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;
            margin-bottom: 2rem;
        }

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

        .faq-item:last-child {
            border-bottom: none;
        }

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

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

            .unique-start-button {
                padding: 15px 40px;
                font-size: 1.1rem;
            }

            .unique-start-button .start-icon {
                width: 24px;
                height: 24px;
            }

            .analysis-buttons {
                gap: 1rem;
            }

            .analysis-button {
                padding: 12px 40px;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- دکمه شروع در بالای صفحه -->
    <div class="unique-start-button-container">
        <button id="startButton" class="unique-start-button">
            شروع 
            <span class="start-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>
        </button>
        <div id="analysisButtons" class="analysis-buttons">
            <button class="analysis-button primary">تحلیل ابتدایی تصاویر</button>
            <button class="analysis-button advanced">تحلیل پیشرفته تصاویر</button>
        </div>
    </div>
    <!-- بخش هیرو -->
    <div class="hero-section">
        <h1 class="hero-title">ربات تحلیل تصاویر هوشمند</h1>
        <p>با استفاده از تکنولوژی پیشرفته هوش مصنوعی</p>
    </div>
    <!-- بخش سوالات -->
    <div class="faq-container" id="faq-container">
        <div class="faq-item">
            <button class="faq-question">
                <span>🤖 این ربات چه کاری انجام می&zwnj;دهد؟</span>
                <span class="icon">▼</span>
            </button>
            <div class="faq-answer">
                <p>این ربات با استفاده از تکنولوژی پیشرفته هوش مصنوعی، قابلیت تحلیل تصاویر را دارد. شما می&zwnj;توانید تصویر مورد نظر خود را آپلود کرده و از ربات بخواهید توضیحات مربوط به آن را ارائه دهد. همچنین می&zwnj;توانید اسکرین&zwnj;شات&zwnj;های خود را به کد تبدیل کنید و از خلاقیت&zwnj;های بی&zwnj;پایان این ربات بهره&zwnj;مند شوید.</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 width="100%" height="auto" 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>📝 آیا ربات از زبان فارسی پشتیبانی می&zwnj;کند؟</span>
                <span class="icon">▼</span>
            </button>
            <div class="faq-answer">
                <p>بله، هر دو ربات تحلیل تصاویر از متن فارسی پشتیبانی می&zwnj;کنند. در صورتی که ربات توضیحات را به انگلیسی ارائه دهد، کافیست از آن بخواهید متن را به فارسی ترجمه کند.</p>
            </div>
        </div>
    </div>

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

        // اضافه کردن event listener برای دکمه شروع
        startButton.addEventListener('click', () => {
            analysisButtons.style.display = 'flex';
            startButton.style.display = 'none';
        });

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

                // بستن سایر سوالات
                faqQuestions.forEach(q => {
                    q.classList.remove('active');
                    q.nextElementSibling.classList.remove('active');
                });

                // باز یا بسته کردن سوال کلیک شده
                if (!isActive) {
                    question.classList.add('active');
                    answer.classList.add('active');
                }
            });
        });
    </script>
</body>
</html> این کد به بقیه جاهای سایت تاثیر می‌ذاره درست کن بالای سایت یک سانت سفیدی ایجاد کرده کد کامل یکجا درست کن بفرست بدون هیچ تغییر دیگری فقط اون سفیدی حذف بشه