Spaces:

timoon811
/

landtop

Running

App Files Files Community

timoon811 commited on Apr 20, 2025

Commit

1a9615b

verified ·

1 Parent(s): aa4be57

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +713 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Landtop
-emoji: 🦀
-colorFrom: green
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: landtop
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,713 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Выживи как арбитражник | Текстовая RPG</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>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
+        body {
+            font-family: 'JetBrains Mono', monospace;
+            background-color: #000;
+            color: #00ff41;
+            overflow-x: hidden;
+        }
+        .terminal-text {
+            text-shadow: 0 0 5px #00ff41;
+        }
+        .blink {
+            animation: blink 1s step-end infinite;
+        }
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .typewriter {
+            overflow: hidden;
+            border-right: .15em solid #00ff41;
+            white-space: nowrap;
+            margin: 0 auto;
+            letter-spacing: .15em;
+            animation:
+                typing 3.5s steps(40, end),
+                blink-caret .75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #00ff41; }
+        }
+        .glitch {
+            position: relative;
+        }
+        .glitch::before, .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .glitch::before {
+            left: 2px;
+            text-shadow: -2px 0 #ff00ff;
+            clip: rect(24px, 550px, 90px, 0);
+            animation: glitch-anim-1 2s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 #00ffff;
+            clip: rect(85px, 550px, 140px, 0);
+            animation: glitch-anim-2 2s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim-1 {
+            0% { clip: rect(32px, 9999px, 28px, 0); }
+            10% { clip: rect(13px, 9999px, 97px, 0); }
+            20% { clip: rect(55px, 9999px, 98px, 0); }
+            30% { clip: rect(33px, 9999px, 85px, 0); }
+            40% { clip: rect(39px, 9999px, 25px, 0); }
+            50% { clip: rect(19px, 9999px, 54px, 0); }
+            60% { clip: rect(31px, 9999px, 72px, 0); }
+            70% { clip: rect(70px, 9999px, 103px, 0); }
+            80% { clip: rect(90px, 9999px, 92px, 0); }
+            90% { clip: rect(78px, 9999px, 40px, 0); }
+            100% { clip: rect(42px, 9999px, 33px, 0); }
+        }
+        @keyframes glitch-anim-2 {
+            0% { clip: rect(65px, 9999px, 119px, 0); }
+            10% { clip: rect(120px, 9999px, 80px, 0); }
+            20% { clip: rect(10px, 9999px, 5px, 0); }
+            30% { clip: rect(85px, 9999px, 100px, 0); }
+            40% { clip: rect(91px, 9999px, 59px, 0); }
+            50% { clip: rect(148px, 9999px, 138px, 0); }
+            60% { clip: rect(63px, 9999px, 17px, 0); }
+            70% { clip: rect(105px, 9999px, 69px, 0); }
+            80% { clip: rect(88px, 9999px, 122px, 0); }
+            90% { clip: rect(54px, 9999px, 111px, 0); }
+            100% { clip: rect(102px, 9999px, 79px, 0); }
+        }
+        .neon-btn {
+            position: relative;
+            display: inline-block;
+            padding: 10px 20px;
+            color: #00ff41;
+            text-transform: uppercase;
+            letter-spacing: 4px;
+            text-decoration: none;
+            font-size: 18px;
+            overflow: hidden;
+            transition: 0.2s;
+            border: 1px solid #00ff41;
+        }
+        .neon-btn:hover {
+            color: #000;
+            background: #00ff41;
+            box-shadow: 0 0 10px #00ff41, 0 0 40px #00ff41, 0 0 80px #00ff41;
+            transition-delay: 0.1s;
+        }
+        .neon-btn span {
+            position: absolute;
+            display: block;
+        }
+        .neon-btn span:nth-child(1) {
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #00ff41);
+        }
+        .neon-btn:hover span:nth-child(1) {
+            left: 100%;
+            transition: 1s;
+        }
+        .neon-btn span:nth-child(3) {
+            bottom: 0;
+            right: -100%;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(270deg, transparent, #00ff41);
+        }
+        .neon-btn:hover span:nth-child(3) {
+            right: 100%;
+            transition: 1s;
+            transition-delay: 0.5s;
+        }
+        .neon-btn span:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent, #00ff41);
+        }
+        .neon-btn:hover span:nth-child(2) {
+            top: 100%;
+            transition: 1s;
+            transition-delay: 0.25s;
+        }
+        .neon-btn span:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #00ff41);
+        }
+        .neon-btn:hover span:nth-child(4) {
+            bottom: 100%;
+            transition: 1s;
+            transition-delay: 0.75s;
+        }
+        .scene {
+            display: none;
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        .active-scene {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+        .option-btn {
+            margin: 0.5rem;
+            padding: 0.75rem 1.5rem;
+            border: 1px solid #00ff41;
+            color: #00ff41;
+            background: transparent;
+            cursor: pointer;
+            transition: all 0.3s;
+            width: 80%;
+            max-width: 400px;
+            text-align: left;
+        }
+        .option-btn:hover {
+            background: rgba(0, 255, 65, 0.1);
+        }
+        .option-btn i {
+            margin-right: 0.5rem;
+        }
+        .money-display {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            border: 1px solid #00ff41;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 100;
+        }
+        .success {
+            color: #00ff41;
+            animation: pulse 2s infinite;
+        }
+        .failure {
+            color: #ff0033;
+            animation: shake 0.5s;
+        }
+        @keyframes pulse {
+            0% { text-shadow: 0 0 5px #00ff41; }
+            50% { text-shadow: 0 0 20px #00ff41; }
+            100% { text-shadow: 0 0 5px #00ff41; }
+        }
+        @keyframes shake {
+            0% { transform: translate(1px, 1px) rotate(0deg); }
+            10% { transform: translate(-1px, -2px) rotate(-1deg); }
+            20% { transform: translate(-3px, 0px) rotate(1deg); }
+            30% { transform: translate(3px, 2px) rotate(0deg); }
+            40% { transform: translate(1px, -1px) rotate(1deg); }
+            50% { transform: translate(-1px, 2px) rotate(-1deg); }
+            60% { transform: translate(-3px, 1px) rotate(0deg); }
+            70% { transform: translate(3px, 1px) rotate(-1deg); }
+            80% { transform: translate(-1px, -1px) rotate(1deg); }
+            90% { transform: translate(1px, 2px) rotate(0deg); }
+            100% { transform: translate(1px, -2px) rotate(-1deg); }
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block;
+            border-bottom: 1px dotted #00ff41;
+            cursor: help;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 200px;
+            background-color: #000;
+            color: #00ff41;
+            text-align: center;
+            border: 1px solid #00ff41;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            margin-left: -100px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+        .progress-bar {
+            width: 100%;
+            max-width: 400px;
+            height: 10px;
+            background-color: #000;
+            border: 1px solid #00ff41;
+            margin: 1rem 0;
+        }
+        .progress {
+            height: 100%;
+            background-color: #00ff41;
+            width: 0%;
+            transition: width 0.5s;
+        }
+        .ascii-art {
+            font-family: monospace;
+            white-space: pre;
+            color: #00ff41;
+            margin: 1rem 0;
+        }
+    </style>
+</head>
+<body>
+    <!-- Money Display -->
+    <div class="money-display terminal-text" id="moneyDisplay">
+        $<span id="moneyAmount">300</span> | Уровень: <span id="level">новичок</span>
+    </div>
+    <!-- Scene 0: Start Screen -->
+    <div class="scene active-scene" id="scene0">
+        <div class="glitch" data-text="Выживи в мире арбитража">
+            <h1 class="text-4xl md:text-6xl font-bold mb-8 terminal-text">Выживи в мире арбитража</h1>
+        </div>
+        <div class="ascii-art mb-8">
+  _____   _____   _____   _____   _____   _____
+ |     | |     | |     | |     | |     | |     |
+ |  A  | |  R  | |  B  | |  I  | |  T  | |  R  |
+ |_____| |_____| |_____| |_____| |_____| |_____|
+        </div>
+        <p class="mb-8 text-xl terminal-text blink">START: $300 | Уровень: новичок</p>
+        <button class="neon-btn" id="startGameBtn">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Начать игру
+        </button>
+    </div>
+    <!-- Scene 1: First Step -->
+    <div class="scene" id="scene1">
+        <h2 class="text-3xl mb-6 terminal-text typewriter">День 1: Первые шаги</h2>
+        <div class="progress-bar">
+            <div class="progress" id="progress1"></div>
+        </div>
+        <p class="mb-8 text-xl terminal-text">
+            Ты зарегистрировался в партнерской программе и получил оффер. Что делаешь первым?
+        </p>
+        <div class="w-full flex flex-col items-center">
+            <button class="option-btn" onclick="chooseOption(1, 'self-creative')">
+                <i class="fas fa-paint-brush"></i> Сделать креатив сам
+            </button>
+            <button class="option-btn" onclick="chooseOption(1, 'buy-creative')">
+                <i class="fas fa-shopping-cart"></i> Купить креатив на фрилансе
+            </button>
+            <button class="option-btn" onclick="chooseOption(1, 'copy-creative')">
+                <i class="fas fa-copy"></i> Скопировать из спая
+            </button>
+        </div>
+        <div class="tooltip mt-4">
+            <i class="fas fa-question-circle"></i> Подсказка
+            <span class="tooltiptext">Выбор повлияет на ваш стартовый бюджет и возможные проблемы</span>
+        </div>
+    </div>
+    <!-- Scene 2: Campaign Launch -->
+    <div class="scene" id="scene2">
+        <h2 class="text-3xl mb-6 terminal-text typewriter">День 2: Запуск кампании</h2>
+        <div class="progress-bar">
+            <div class="progress" id="progress2"></div>
+        </div>
+        <p class="mb-8 text-xl terminal-text" id="scene2Text">
+            Ты настроил кабинет. Кампания запущена. День 1 — минус $40
+        </p>
+        <div class="w-full flex flex-col items-center">
+            <button class="option-btn" onclick="chooseOption(2, 'continue')">
+                <i class="fas fa-fire"></i> Слить дальше
+            </button>
+            <button class="option-btn" onclick="chooseOption(2, 'restart')">
+                <i class="fas fa-redo"></i> Перезапустить
+            </button>
+            <button class="option-btn" onclick="chooseOption(2, 'ask-help')">
+                <i class="fas fa-users"></i> Попросить совет у команды
+            </button>
+        </div>
+        <div class="tooltip mt-4">
+            <i class="fas fa-lightbulb"></i> Совет от наставника
+            <span class="tooltiptext">"Не лезь в бурю без зонда. Анализируй данные перед принятием решения."</span>
+        </div>
+    </div>
+    <!-- Scene 3: First Profit -->
+    <div class="scene" id="scene3">
+        <h2 class="text-3xl mb-6 terminal-text success">УСПЕХ!</h2>
+        <div class="progress-bar">
+            <div class="progress" id="progress3"></div>
+        </div>
+        <div class="mb-8 text-xl terminal-text success">
+            <p>+5 FTD</p>
+            <p>ROI 143%</p>
+            <p>Telegram Push: $280</p>
+        </div>
+        <div class="ascii-art mb-4">
+   _____
+  / ___ \
+ | |   | |
+ | |___| |
+  \_____/
+        </div>
+        <p class="mb-4 terminal-text">
+            Ты сделал правильные выборы и получил первый профит!
+        </p>
+        <button class="neon-btn" onclick="nextScene(3)">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Продолжить
+        </button>
+    </div>
+    <!-- Scene 4: Failure -->
+    <div class="scene" id="scene4">
+        <h2 class="text-3xl mb-6 terminal-text failure">ПРОВАЛ!</h2>
+        <div class="progress-bar">
+            <div class="progress" id="progress4"></div>
+        </div>
+        <div class="mb-8 text-xl terminal-text failure">
+            <p>Warning: Бюджет исчерпан</p>
+            <p>Опыт получен. Деньги нет.</p>
+        </div>
+        <div class="ascii-art mb-4">
+   _____
+  / ___ \
+ | |   | |
+ | |   | |
+  \___\_/
+        </div>
+        <p class="mb-4 terminal-text">
+            В реальной жизни тебе понадобился бы наставник, чтобы избежать таких потерь.
+        </p>
+        <button class="neon-btn" onclick="nextScene(4)">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Продолжить
+        </button>
+    </div>
+    <!-- Scene 5: Final Offer -->
+    <div class="scene" id="scene5">
+        <h2 class="text-3xl mb-6 terminal-text typewriter">Финал игры</h2>
+        <div class="progress-bar">
+            <div class="progress" id="progress5" style="width: 100%"></div>
+        </div>
+        <p class="mb-8 text-xl terminal-text">
+            Это была всего лишь игра. А в жизни ставки выше.
+        </p>
+        <div class="mb-8">
+            <p class="terminal-text">Твой результат:</p>
+            <p class="terminal-text">Финальный бюджет: $<span id="finalMoney">0</span></p>
+            <p class="terminal-text">Ошибок: <span id="mistakes">0</span></p>
+            <p class="terminal-text">Правильных решений: <span id="correctChoices">0</span></p>
+        </div>
+        <p class="mb-8 text-2xl terminal-text">
+            Хочешь научиться выживать по-настоящему?
+        </p>
+        <button class="neon-btn" id="courseOfferBtn">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Пройти курс и выжить по-настоящему
+        </button>
+        <div class="mt-8 text-sm terminal-text">
+            <p>На курсе ты получишь:</p>
+            <p>- Доступ к закрытому комьюнити</p>
+            <p>- Проверенные стратегии</p>
+            <p>- Поддержку наставников</p>
+            <p>- Готовые связки</p>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const gameState = {
+            money: 300,
+            level: "новичок",
+            mistakes: 0,
+            correctChoices: 0,
+            previousChoices: [],
+            currentScene: 0
+        };
+        // DOM elements
+        const scenes = document.querySelectorAll('.scene');
+        const moneyAmount = document.getElementById('moneyAmount');
+        const levelDisplay = document.getElementById('level');
+        const finalMoneyDisplay = document.getElementById('finalMoney');
+        const mistakesDisplay = document.getElementById('mistakes');
+        const correctChoicesDisplay = document.getElementById('correctChoices');
+        // Event listeners
+        document.getElementById('startGameBtn').addEventListener('click', () => {
+            nextScene(0);
+        });
+        document.getElementById('courseOfferBtn').addEventListener('click', () => {
+            alert('Редирект на страницу курса...');
+            // In a real implementation, this would redirect to the course page
+        });
+        // Scene transitions
+        function nextScene(currentSceneIndex) {
+            // Hide current scene
+            scenes[currentSceneIndex].classList.remove('active-scene');
+            // Show next scene
+            const nextSceneIndex = currentSceneIndex + 1;
+            scenes[nextSceneIndex].classList.add('active-scene');
+            // Update progress bars
+            updateProgressBars(nextSceneIndex);
+            // Update game state
+            gameState.currentScene = nextSceneIndex;
+            // Special cases for certain scenes
+            if (nextSceneIndex === 2) {
+                updateScene2Text();
+            }
+            if (nextSceneIndex === 5) {
+                showFinalResults();
+            }
+        }
+        function updateProgressBars(sceneIndex) {
+            const progressPercentage = (sceneIndex / (scenes.length - 1)) * 100;
+            for (let i = 1; i <= 5; i++) {
+                const progressBar = document.getElementById(`progress${i}`);
+                if (progressBar) {
+                    if (i <= sceneIndex) {
+                        progressBar.style.width = `${(i / (scenes.length - 1)) * 100}%`;
+                    } else {
+                        progressBar.style.width = '0%';
+                    }
+                }
+            }
+        }
+        function updateScene2Text() {
+            const scene2Text = document.getElementById('scene2Text');
+            const moneyLost = Math.floor(Math.random() * 30) + 20;
+            gameState.money -= moneyLost;
+            updateMoneyDisplay();
+            scene2Text.textContent = `Ты настроил кабинет. Кампания запущена. День 1 — минус $${moneyLost}`;
+        }
+        function chooseOption(sceneIndex, option) {
+            gameState.previousChoices.push(option);
+            // Process the choice
+            switch (option) {
+                case 'self-creative':
+                    gameState.money -= 50;
+                    gameState.correctChoices++;
+                    break;
+                case 'buy-creative':
+                    gameState.money -= 100;
+                    break;
+                case 'copy-creative':
+                    gameState.money -= 20;
+                    gameState.mistakes++;
+                    break;
+                case 'continue':
+                    // 50% chance of success
+                    if (Math.random() > 0.5) {
+                        gameState.money += 150;
+                        gameState.correctChoices++;
+                        nextScene(sceneIndex);
+                        setTimeout(() => {
+                            scenes[3].classList.add('active-scene');
+                            scenes[2].classList.remove('active-scene');
+                            updateProgressBars(3);
+                            gameState.currentScene = 3;
+                        }, 1000);
+                        return;
+                    } else {
+                        gameState.money -= 80;
+                        gameState.mistakes++;
+                    }
+                    break;
+                case 'restart':
+                    gameState.money -= 60;
+                    break;
+                case 'ask-help':
+                    gameState.money -= 30;
+                    gameState.correctChoices++;
+                    break;
+            }
+            updateMoneyDisplay();
+            // Randomly determine if this leads to success or failure
+            if (sceneIndex === 2) {
+                setTimeout(() => {
+                    if (gameState.money <= 0 || Math.random() > 0.6) {
+                        // Failure path
+                        scenes[4].classList.add('active-scene');
+                        scenes[2].classList.remove('active-scene');
+                        updateProgressBars(4);
+                        gameState.currentScene = 4;
+                    } else {
+                        // Success path
+                        gameState.money += 200;
+                        gameState.correctChoices += 2;
+                        updateMoneyDisplay();
+                        scenes[3].classList.add('active-scene');
+                        scenes[2].classList.remove('active-scene');
+                        updateProgressBars(3);
+                        gameState.currentScene = 3;
+                    }
+                }, 1000);
+            } else {
+                nextScene(sceneIndex);
+            }
+        }
+        function updateMoneyDisplay() {
+            moneyAmount.textContent = gameState.money;
+            // Update level based on money
+            if (gameState.money >= 500) {
+                gameState.level = "эксперт";
+            } else if (gameState.money >= 300) {
+                gameState.level = "продвинутый";
+            } else if (gameState.money >= 100) {
+                gameState.level = "новичок";
+            } else if (gameState.money > 0) {
+                gameState.level = "начинающий";
+            } else {
+                gameState.level = "банкрот";
+            }
+            levelDisplay.textContent = gameState.level;
+            // Change color if money is low
+            if (gameState.money < 100) {
+                moneyAmount.classList.add('failure');
+                moneyAmount.classList.remove('success');
+            } else if (gameState.money > 300) {
+                moneyAmount.classList.add('success');
+                moneyAmount.classList.remove('failure');
+            } else {
+                moneyAmount.classList.remove('success', 'failure');
+            }
+        }
+        function showFinalResults() {
+            finalMoneyDisplay.textContent = gameState.money;
+            mistakesDisplay.textContent = gameState.mistakes;
+            correctChoicesDisplay.textContent = gameState.correctChoices;
+        }
+        // Random glitch effect
+        setInterval(() => {
+            if (Math.random() > 0.95) {
+                const randomScene = scenes[Math.floor(Math.random() * scenes.length)];
+                randomScene.classList.add('glitch-effect');
+                setTimeout(() => {
+                    randomScene.classList.remove('glitch-effect');
+                }, 200);
+            }
+        }, 5000);
+    </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/landtop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ ... ## 🎮 Техническое задание: Лендинг «Мини-игра: Выживи как арбитражник» ### 🎯 Цель: Создать лендинг, оформленный как **пошаговая текстовая игра**, в которой пользователь проходит путь начинающего арбитражника: делает выборы, сталкивается с трудностями, принимает решения. Всё ведёт к финалу — предложению пройти курс и стать реальным “победителем”. --- ### 🕹️ Главная идея: Погружение через механику **текстовой мини-RPG**: «У тебя $300. Что ты делаешь первым?» → последствия → новые выборы. Это не просто просмотр лендинга — это опыт прохождения сценария. В каждом шаге пользователь выбирает → меняется исход. --- ### 🧱 Структура и блоки: #### 1. Экран старта — Вступление в игру - Заголовок: *“Выживи в мире арбитража”* - Визуал: тёмный экран, надпись мигает: `START: $300 | Уровень: новичок` - Кнопка: **Начать игру** #### 2. Сцена 1 — Первый шаг - Текст: *“Ты зарегистрировался в ПП и получил оффер. Что дальше?”* - Варианты: - Сделать креатив сам - Купить креатив на фрилансе - Скопировать из спая - При выборе → переход на новую сцену #### 3. Сцена 2 — Запуск - Текст: *“Ты настроил кабинет. Кампания запущена. День 1 — минус $40”* - Выбор: - Слить дальше - Перезапустить - Попросить совет у команды - Подсказки: “Совет от наставника: не лезь в бурю без зонда.” #### 4. Сцена 3 — Первый профит - Если пользователь “выживает” → получает сообщение: `+5 FTD | ROI 143% | Telegram Push: $280` - Сцена радости, эффекты, поздравление #### 5. Альтернативный путь — слив и провал - Если пользователь “жёстко ошибается”: `Warning: Бюджет исчерпан. Опыт получен. Деньги нет.` - Визуал: “Тебе нужен наставник.” #### 6. Финал — Предложение перейти к реальности - Текст: *“Это была игра. А в жизни ставки выше.”* - Кнопка: **Пройти курс и выжить по-настоящему** --- ### 🎨 Визуальный стиль: - Стилистика: ретро-RPG + терминал - Цвет: чёрный, кислотный зелёный, неоновые кнопки - Шрифт: моноширинный, интерфейсный - Анимации: набор текста, экран загрузки, случайные “баги” --- ### ⚙️ Технические особенности: - Логика на JS: переменные, условные переходы - Сохранение/передача результата профиля в заявку - Возможность прохождения с телефона (tap-to-choose) - Scroll-free: поэтапное нажатие → экран смены --- Готов перейти к четвёртой идее — **«Взломай систему»**?