Spaces:

timoon811
/

lansdfd22234

Running

File size: 26,151 Bytes

68aac00

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Профайлер: Кто ты в арбитраже?</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #8b5cf6 }
        }
        
        .typing-animation {
            overflow: hidden;
            white-space: nowrap;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
            border-right: 2px solid;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1 }
            50% { transform: scale(1.05); opacity: 0.8 }
            100% { transform: scale(1); opacity: 1 }
        }
        
        .digitize {
            position: relative;
        }
        
        .digitize::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(0deg, transparent 0%, rgba(139, 92, 246, 0.2) 50%, transparent 100%);
            background-size: 100% 10px;
            animation: digitize 2s linear infinite;
            pointer-events: none;
        }
        
        @keyframes digitize {
            0% { background-position: 0 0 }
            100% { background-position: 0 20px }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 min-h-screen text-white font-sans">
    <div id="app" class="container mx-auto px-4 py-8 max-w-3xl">
        <!-- Шаг 1: Экран запуска -->
        <div id="step1" class="text-center">
            <div class="glass-effect rounded-2xl p-8 mb-8">
                <div class="flex justify-center mb-6">
                    <div class="relative w-24 h-24">
                        <div class="absolute inset-0 bg-purple-500 rounded-full opacity-20 animate-ping"></div>
                        <div class="absolute inset-2 bg-gradient-to-br from-purple-600 to-blue-500 rounded-full flex items-center justify-center">
                            <i class="fas fa-brain text-3xl"></i>
                        </div>
                    </div>
                </div>
                
                <h1 class="text-3xl md:text-4xl font-bold mb-4">
                    <span class="typing-animation">AI-Профайлер арбитражника</span>
                </h1>
                
                <p class="text-lg opacity-80 mb-8">Система определит ваш тип личности в арбитраже и порекомендует индивидуальный старт</p>
                
                <div class="flex justify-center">
                    <button onclick="startAnalysis()" class="bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 pulse-animation">
                        <i class="fas fa-play mr-2"></i> Запустить анализ
                    </button>
                </div>
            </div>
            
            <div class="glass-effect rounded-2xl p-6">
                <h2 class="text-xl font-semibold mb-4">Как это работает?</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
                        <div class="text-blue-300 mb-2"><i class="fas fa-question-circle text-2xl"></i></div>
                        <h3 class="font-medium mb-2">Ответьте на вопросы</h3>
                        <p class="text-sm opacity-80">5-7 вопросов о ваших предпочтениях и стратегиях</p>
                    </div>
                    <div class="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
                        <div class="text-blue-300 mb-2"><i class="fas fa-brain text-2xl"></i></div>
                        <h3 class="font-medium mb-2">AI анализирует ответы</h3>
                        <p class="text-sm opacity-80">Нейросеть определяет ваш уникальный профиль</p>
                    </div>
                    <div class="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
                        <div class="text-blue-300 mb-2"><i class="fas fa-chart-line text-2xl"></i></div>
                        <h3 class="font-medium mb-2">Получите рекомендации</h3>
                        <p class="text-sm opacity-80">Персонализированный старт в арбитраже</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Шаг 2: Вопросы -->
        <div id="step2" class="hidden">
            <div class="glass-effect rounded-2xl p-6 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <div class="text-sm opacity-70">
                        Вопрос <span id="currentQuestion">1</span>/<span id="totalQuestions">7</span>
                    </div>
                    <div class="w-full bg-gray-700 rounded-full h-2 ml-4">
                        <div id="progressBar" class="bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full" style="width: 0%"></div>
                    </div>
                </div>
                
                <h2 id="questionText" class="text-xl md:text-2xl font-semibold mb-6"></h2>
                
                <div id="optionsContainer" class="space-y-3"></div>
            </div>
            
            <button id="nextButton" onclick="nextQuestion()" class="hidden bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-full w-full transition-all transform hover:scale-[1.02]">
                Далее <i class="fas fa-arrow-right ml-2"></i>
            </button>
        </div>
        
        <!-- Шаг 3: Результат -->
        <div id="step3" class="hidden">
            <div class="glass-effect rounded-2xl p-6 mb-6 digitize">
                <div class="text-center mb-6">
                    <div class="inline-block bg-gradient-to-br from-purple-600 to-blue-500 p-2 rounded-full">
                        <div class="bg-purple-900 p-4 rounded-full">
                            <i class="fas fa-user-tie text-4xl text-white"></i>
                        </div>
                    </div>
                </div>
                
                <h2 id="profileTitle" class="text-2xl md:text-3xl font-bold text-center mb-2"></h2>
                <p id="profileSubtitle" class="text-center opacity-80 mb-6"></p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div class="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-blue-300 mb-3"><i class="fas fa-medal mr-2"></i> Сильные стороны</h3>
                        <ul id="strengthsList" class="space-y-2"></ul>
                    </div>
                    <div class="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-blue-300 mb-3"><i class="fas fa-compass mr-2"></i> Рекомендации</h3>
                        <ul id="recommendationsList" class="space-y-2"></ul>
                    </div>
                </div>
                
                <div class="bg-blue-900 bg-opacity-50 p-4 rounded-lg mb-6">
                    <h3 class="font-semibold text-blue-300 mb-2"><i class="fas fa-gift mr-2"></i> Ваш индивидуальный доступ</h3>
                    <div class="flex items-center">
                        <input id="profileLink" type="text" readonly class="flex-grow bg-blue-800 text-white p-2 rounded-l-lg focus:outline-none" value="">
                        <button onclick="copyLink()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-r-lg transition">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="glass-effect rounded-2xl p-6 text-center">
                <h3 class="text-xl font-semibold mb-4">Хотите пройти путь, который уже подстроен под вас?</h3>
                <button onclick="startWithProfile()" class="bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 w-full max-w-md mx-auto">
                    Стартовать с моим профилем
                </button>
            </div>
        </div>
    </div>

    <script>
        // Состояние приложения
        const state = {
            currentStep: 1,
            currentQuestionIndex: 0,
            answers: [],
            profileType: null
        };
        
        // Вопросы и варианты ответов
        const questions = [
            {
                text: "Что для вас важнее в арбитраже?",
                options: [
                    { text: "Стабильность и предсказуемость", value: "stability" },
                    { text: "Резкий рост и высокие риски", value: "growth" },
                    { text: "Баланс между стабильностью и ростом", value: "balance" },
                    { text: "Эксперименты и тестирование новых подходов", value: "experiments" }
                ]
            },
            {
                text: "Как вы реагируете на минус в кампании?",
                options: [
                    { text: "Немедленно останавливаю и анализирую", value: "stop" },
                    { text: "Уменьшаю бюджет, но оставляю работать", value: "reduce" },
                    { text: "Пробую разные креативы и подходы", value: "creatives" },
                    { text: "Увеличиваю бюджет, веря в откат", value: "increase" }
                ]
            },
            {
                text: "Какие инструменты вам ближе?",
                options: [
                    { text: "Классические связки и проверенные офферы", value: "classic" },
                    { text: "Новые платформы и креативные подходы", value: "new" },
                    { text: "Автоматизация и скрипты", value: "auto" },
                    { text: "Глубокая аналитика и A/B тесты", value: "analytics" }
                ]
            },
            {
                text: "В каком темпе вы учитесь?",
                options: [
                    { text: "Медленно, но основательно", value: "slow" },
                    { text: "Быстро схватываю новое", value: "fast" },
                    { text: "Учусь только на своем опыте", value: "experience" },
                    { text: "Постоянно изучаю новые материалы", value: "constant" }
                ]
            },
            {
                text: "Какие гео вам интересны?",
                options: [
                    { text: "Тиер-1 (США, Европа)", value: "tier1" },
                    { text: "Тиер-3 (Азия, Африка, Латинская Америка)", value: "tier3" },
                    { text: "СНГ и Восточная Европа", value: "cis" },
                    { text: "Готов тестировать любые гео", value: "any" }
                ]
            },
            {
                text: "Как вы относитесь к риску?",
                options: [
                    { text: "Избегаю рисков", value: "avoid" },
                    { text: "Принимаю расчетные риски", value: "calculated" },
                    { text: "Готов рисковать ради большей прибыли", value: "high" },
                    { text: "Риск — часть игры", value: "part" }
                ]
            },
            {
                text: "Какой у вас бюджет на тесты?",
                options: [
                    { text: "Менее $100", value: "low" },
                    { text: "$100-$500", value: "medium" },
                    { text: "$500-$2000", value: "high" },
                    { text: "Более $2000", value: "vhigh" }
                ]
            }
        ];
        
        // Профили результатов
        const profiles = {
            strategist: {
                title: "Стратегический Генерал",
                subtitle: "Ваш профиль: расчетливый стратег с системным подходом",
                strengths: [
                    "Аналитическое мышление",
                    "Долгосрочное планирование",
                    "Управление рисками",
                    "Оптимизация кампаний"
                ],
                recommendations: [
                    "Вертикаль: Finance/Crypto",
                    "GEO: Тиер-1 страны",
                    "Связки: Веб-офферы с лендингами",
                    "Бюджет: $500+ на тесты"
                ]
            },
            creative: {
                title: "Креативный Новатор",
                subtitle: "Ваш профиль: генератор идей и экспериментатор",
                strengths: [
                    "Креативное мышление",
                    "Быстрое тестирование гипотез",
                    "Адаптация под новые тренды",
                    "Работа с виральным контентом"
                ],
                recommendations: [
                    "Вертикаль: Nutra/ECO",
                    "GEO: Тиер-3 страны",
                    "Связки: Мобильные офферы",
                    "Платформы: TikTok, Snapchat"
                ]
            },
            executor: {
                title: "Исполнительный Оптимизатор",
                subtitle: "Ваш профиль: стабильный исполнитель с высоким КПД",
                strengths: [
                    "Дисциплина и последовательность",
                    "Точное следование инструкциям",
                    "Стабильные результаты",
                    "Минимизация рисков"
                ],
                recommendations: [
                    "Вертикаль: Gambling/Casino",
                    "GEO: СНГ/Восточная Европа",
                    "Связки: Прелендинги + CPA",
                    "Бюджет: $100-300 на тесты"
                ]
            },
            pioneer: {
                title: "Пионер Новых Направлений",
                subtitle: "Ваш профиль: первооткрыватель новых ниш и подходов",
                strengths: [
                    "Быстрое обучение",
                    "Адаптация к изменениям",
                    "Тестирование неизведанного",
                    "Работа в условиях неопределенности"
                ],
                recommendations: [
                    "Вертикаль: Новые/экзотические офферы",
                    "GEO: Эксперименты с разными гео",
                    "Связки: Нестандартные подходы",
                    "Платформы: Новые рекламные сети"
                ]
            }
        };
        
        // Инициализация при загрузке
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('totalQuestions').textContent = questions.length;
        });
        
        // Запуск анализа
        function startAnalysis() {
            document.getElementById('step1').classList.add('hidden');
            document.getElementById('step2').classList.remove('hidden');
            showQuestion(0);
        }
        
        // Показать вопрос
        function showQuestion(index) {
            state.currentQuestionIndex = index;
            const question = questions[index];
            
            document.getElementById('currentQuestion').textContent = index + 1;
            document.getElementById('questionText').textContent = question.text;
            
            const optionsContainer = document.getElementById('optionsContainer');
            optionsContainer.innerHTML = '';
            
            question.options.forEach((option, i) => {
                const optionElement = document.createElement('button');
                optionElement.className = 'w-full text-left bg-purple-900 bg-opacity-50 hover:bg-purple-800 p-4 rounded-lg transition-all transform hover:scale-[1.02]';
                optionElement.innerHTML = `
                    <div class="flex items-center">
                        <div class="w-6 h-6 rounded-full border-2 border-purple-400 mr-3 flex items-center justify-center">
                            <div class="w-3 h-3 rounded-full bg-purple-400 hidden"></div>
                        </div>
                        <span>${option.text}</span>
                    </div>
                `;
                
                optionElement.dataset.value = option.value;
                optionElement.dataset.index = i;
                
                optionElement.addEventListener('click', () => selectOption(optionElement));
                optionsContainer.appendChild(optionElement);
            });
            
            document.getElementById('nextButton').classList.add('hidden');
            updateProgressBar();
        }
        
        // Выбор варианта ответа
        function selectOption(selectedElement) {
            const options = document.querySelectorAll('#optionsContainer button');
            const selectedValue = selectedElement.dataset.value;
            
            options.forEach(option => {
                const radio = option.querySelector('div > div');
                radio.classList.add('hidden');
                
                if (option === selectedElement) {
                    radio.classList.remove('hidden');
                    option.classList.add('bg-purple-700');
                    option.classList.remove('bg-purple-900');
                } else {
                    option.classList.remove('bg-purple-700');
                    option.classList.add('bg-purple-900');
                }
            });
            
            // Сохраняем ответ
            state.answers[state.currentQuestionIndex] = selectedValue;
            document.getElementById('nextButton').classList.remove('hidden');
        }
        
        // Следующий вопрос
        function nextQuestion() {
            if (state.currentQuestionIndex < questions.length - 1) {
                showQuestion(state.currentQuestionIndex + 1);
            } else {
                showResults();
            }
        }
        
        // Обновление прогресс-бара
        function updateProgressBar() {
            const progress = ((state.currentQuestionIndex + 1) / questions.length) * 100;
            document.getElementById('progressBar').style.width = `${progress}%`;
        }
        
        // Показать результаты
        function showResults() {
            document.getElementById('step2').classList.add('hidden');
            document.getElementById('step3').classList.remove('hidden');
            
            // Определяем профиль на основе ответов (упрощенная логика)
            const answerCounts = {
                strategist: 0,
                creative: 0,
                executor: 0,
                pioneer: 0
            };
            
            // Простая логика определения профиля
            state.answers.forEach(answer => {
                if (['stability', 'stop', 'classic', 'slow', 'tier1', 'avoid', 'low'].includes(answer)) {
                    answerCounts.executor += 1;
                } else if (['growth', 'increase', 'new', 'fast', 'tier3', 'high', 'vhigh'].includes(answer)) {
                    answerCounts.creative += 1;
                } else if (['balance', 'reduce', 'analytics', 'constant', 'cis', 'calculated', 'medium'].includes(answer)) {
                    answerCounts.strategist += 1;
                } else {
                    answerCounts.pioneer += 1;
                }
            });
            
            // Находим профиль с максимальным счетом
            let maxScore = 0;
            let determinedProfile = 'strategist';
            
            for (const [profile, score] of Object.entries(answerCounts)) {
                if (score > maxScore) {
                    maxScore = score;
                    determinedProfile = profile;
                }
            }
            
            state.profileType = determinedProfile;
            const profile = profiles[determinedProfile];
            
            // Заполняем данные профиля
            document.getElementById('profileTitle').textContent = profile.title;
            document.getElementById('profileSubtitle').textContent = profile.subtitle;
            
            const strengthsList = document.getElementById('strengthsList');
            strengthsList.innerHTML = '';
            profile.strengths.forEach(strength => {
                const li = document.createElement('li');
                li.className = 'flex items-start';
                li.innerHTML = `<i class="fas fa-check text-green-400 mt-1 mr-2"></i> ${strength}`;
                strengthsList.appendChild(li);
            });
            
            const recommendationsList = document.getElementById('recommendationsList');
            recommendationsList.innerHTML = '';
            profile.recommendations.forEach(rec => {
                const li = document.createElement('li');
                li.className = 'flex items-start';
                li.innerHTML = `<i class="fas fa-arrow-right text-blue-400 mt-1 mr-2"></i> ${rec}`;
                recommendationsList.appendChild(li);
            });
            
            // Генерируем уникальную ссылку
            const uniqueId = Date.now().toString(36) + Math.random().toString(36).substr(2);
            const profileLink = `https://arbitrage.academy/start?profile=${determinedProfile}&id=${uniqueId}`;
            document.getElementById('profileLink').value = profileLink;
        }
        
        // Копировать ссылку
        function copyLink() {
            const linkInput = document.getElementById('profileLink');
            linkInput.select();
            document.execCommand('copy');
            
            // Временная подсказка
            const originalText = linkInput.value;
            linkInput.value = 'Ссылка скопирована!';
            setTimeout(() => {
                linkInput.value = originalText;
            }, 2000);
        }
        
        // Старт с профилем
        function startWithProfile() {
            alert(`Перенаправляем вас на персонализированную программу для профиля: ${state.profileType}`);
            // Здесь была бы реальная переадресация
        }
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=timoon811/lansdfd22234" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>