Hugging Face's logo

Spaces:
timoon811
/
landtop
Running

App Files Community
landtop / index.html
timoon811's picture
timoon811
Add 3 files
1a9615b verified
raw
history blame contribute delete
25.6 kB
 <!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>