|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Traffic Master - Ты в Игре</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"> |
|
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--neon-blue: #00f0ff; |
|
|
--neon-pink: #ff00f0; |
|
|
--neon-purple: #8a2be2; |
|
|
--gold: #ffd700; |
|
|
--dark-bg: #0a0a12; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Rajdhani', sans-serif; |
|
|
background-color: var(--dark-bg); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, .neon-text { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.neon-blue { |
|
|
color: var(--neon-blue); |
|
|
text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.neon-pink { |
|
|
color: var(--neon-pink); |
|
|
text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); |
|
|
} |
|
|
|
|
|
.neon-purple { |
|
|
color: var(--neon-purple); |
|
|
text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); |
|
|
} |
|
|
|
|
|
.gold-text { |
|
|
color: var(--gold); |
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); |
|
|
} |
|
|
|
|
|
.glow-box { |
|
|
box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); |
|
|
border: 1px solid rgba(0, 240, 255, 0.3); |
|
|
} |
|
|
|
|
|
.glow-box:hover { |
|
|
box-shadow: 0 0 25px rgba(0, 240, 255, 0.8); |
|
|
} |
|
|
|
|
|
.pixel-border { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.pixel-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
left: -5px; |
|
|
right: -5px; |
|
|
bottom: -5px; |
|
|
border: 2px solid var(--neon-blue); |
|
|
z-index: -1; |
|
|
box-shadow: 0 0 15px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.section { |
|
|
min-height: 100vh; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
padding: 5rem 2rem; |
|
|
} |
|
|
|
|
|
.money-flow { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.money-item { |
|
|
position: absolute; |
|
|
color: var(--gold); |
|
|
font-size: 2rem; |
|
|
animation: float linear infinite; |
|
|
text-shadow: 0 0 10px var(--gold); |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { |
|
|
transform: translateY(100vh) rotate(0deg); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-20vh) rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.hologram { |
|
|
position: relative; |
|
|
background: rgba(0, 240, 255, 0.05); |
|
|
backdrop-filter: blur(5px); |
|
|
border: 1px solid rgba(0, 240, 255, 0.2); |
|
|
} |
|
|
|
|
|
.hologram::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, transparent 50%, rgba(255, 0, 240, 0.1) 100%); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.character-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.character-card:hover { |
|
|
transform: translateY(-10px) rotateX(5deg); |
|
|
box-shadow: 0 20px 30px rgba(0, 240, 255, 0.3); |
|
|
} |
|
|
|
|
|
.inventory-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.inventory-item:hover { |
|
|
transform: scale(1.1); |
|
|
filter: drop-shadow(0 0 10px var(--neon-blue)); |
|
|
} |
|
|
|
|
|
.progress-track { |
|
|
position: relative; |
|
|
height: 4px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.progress-track::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
height: 100%; |
|
|
width: var(--progress); |
|
|
background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); |
|
|
} |
|
|
|
|
|
.checkpoint { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.checkpoint::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: var(--neon-blue); |
|
|
box-shadow: 0 0 15px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.checkpoint.active::after { |
|
|
background: var(--gold); |
|
|
box-shadow: 0 0 20px var(--gold); |
|
|
} |
|
|
|
|
|
.treasure-chest { |
|
|
transition: all 0.5s ease; |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.treasure-chest:hover { |
|
|
transform: rotateY(15deg) translateY(-10px); |
|
|
} |
|
|
|
|
|
.treasure-chest:hover .chest-lid { |
|
|
transform: rotateX(-45deg); |
|
|
} |
|
|
|
|
|
.chest-lid { |
|
|
transform-origin: top center; |
|
|
transition: transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.portal { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
border-radius: 50%; |
|
|
background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%); |
|
|
box-shadow: 0 0 50px var(--neon-blue); |
|
|
animation: pulse 3s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
opacity: 0.7; |
|
|
transform: translate(-50%, -50%) scale(1); |
|
|
} |
|
|
100% { |
|
|
opacity: 0.3; |
|
|
transform: translate(-50%, -50%) scale(1.2); |
|
|
} |
|
|
} |
|
|
|
|
|
.door { |
|
|
position: relative; |
|
|
width: 300px; |
|
|
height: 400px; |
|
|
background: linear-gradient(135deg, #111, #333); |
|
|
border: 3px solid var(--gold); |
|
|
perspective: 1000px; |
|
|
transform-style: preserve-3d; |
|
|
transition: transform 1s; |
|
|
} |
|
|
|
|
|
.door.open { |
|
|
transform: rotateY(-60deg); |
|
|
} |
|
|
|
|
|
.door-handle { |
|
|
position: absolute; |
|
|
right: 20px; |
|
|
top: 50%; |
|
|
width: 20px; |
|
|
height: 60px; |
|
|
background: var(--gold); |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 0 10px var(--gold); |
|
|
} |
|
|
|
|
|
.keyhole { |
|
|
position: absolute; |
|
|
right: 50px; |
|
|
top: 50%; |
|
|
width: 10px; |
|
|
height: 30px; |
|
|
background: radial-gradient(circle, var(--gold) 0%, transparent 70%); |
|
|
box-shadow: 0 0 10px var(--gold); |
|
|
} |
|
|
|
|
|
.social-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-icon:hover { |
|
|
transform: scale(1.2); |
|
|
filter: drop-shadow(0 0 10px var(--neon-blue)); |
|
|
} |
|
|
|
|
|
|
|
|
.parallax-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -2; |
|
|
background: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop') center/cover no-repeat; |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.progress-nav { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
right: 20px; |
|
|
transform: translateY(-50%); |
|
|
z-index: 100; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.progress-dot { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.progress-dot.active { |
|
|
background: var(--neon-blue); |
|
|
box-shadow: 0 0 10px var(--neon-blue); |
|
|
transform: scale(1.3); |
|
|
} |
|
|
|
|
|
.progress-dot.completed { |
|
|
background: var(--gold); |
|
|
} |
|
|
|
|
|
.avatar-container { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
z-index: 100; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.avatar { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border: 2px solid var(--neon-blue); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 24px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.avatar:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 15px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.achievement-badge { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
right: -5px; |
|
|
width: 25px; |
|
|
height: 25px; |
|
|
background: var(--gold); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 12px; |
|
|
color: black; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.achievement-popup { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
border: 2px solid var(--gold); |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
z-index: 1000; |
|
|
display: none; |
|
|
text-align: center; |
|
|
max-width: 300px; |
|
|
animation: popIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes popIn { |
|
|
0% { |
|
|
transform: translate(-50%, -50%) scale(0.5); |
|
|
opacity: 0; |
|
|
} |
|
|
100% { |
|
|
transform: translate(-50%, -50%) scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.micro-interaction { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.micro-interaction:hover { |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.cta-button { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.cta-button::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent); |
|
|
transform: rotate(45deg); |
|
|
transition: all 0.6s ease; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.cta-button:hover::after { |
|
|
opacity: 1; |
|
|
animation: shine 1.5s ease infinite; |
|
|
} |
|
|
|
|
|
@keyframes shine { |
|
|
0% { |
|
|
left: -50%; |
|
|
top: -50%; |
|
|
} |
|
|
100% { |
|
|
left: 150%; |
|
|
top: 150%; |
|
|
} |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.tooltip-text { |
|
|
visibility: hidden; |
|
|
opacity: 0; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%) translateY(10px); |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
color: white; |
|
|
padding: 8px 12px; |
|
|
border-radius: 6px; |
|
|
font-size: 14px; |
|
|
width: max-content; |
|
|
max-width: 200px; |
|
|
transition: all 0.3s ease; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.tooltip-text::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 50%; |
|
|
margin-left: -5px; |
|
|
border-width: 5px; |
|
|
border-style: solid; |
|
|
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; |
|
|
} |
|
|
|
|
|
|
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); |
|
|
} |
|
|
70% { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1); |
|
|
box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.section-divider { |
|
|
position: relative; |
|
|
height: 100px; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.section-divider::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, |
|
|
rgba(0, 240, 255, 0.1) 0%, |
|
|
rgba(255, 0, 240, 0.3) 50%, |
|
|
rgba(0, 240, 255, 0.1) 100%); |
|
|
transform: skewY(-3deg); |
|
|
} |
|
|
|
|
|
.money-animation-container { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.xp-badge { |
|
|
position: absolute; |
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); |
|
|
color: white; |
|
|
padding: 3px 8px; |
|
|
border-radius: 10px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
animation: floatUp 2s ease-out forwards; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
@keyframes floatUp { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50px); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 1s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.glitch-effect { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch-effect::before, .glitch-effect::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.glitch-effect::before { |
|
|
color: #0ff; |
|
|
z-index: -1; |
|
|
animation: glitch 3s infinite; |
|
|
} |
|
|
|
|
|
.glitch-effect::after { |
|
|
color: #f0f; |
|
|
z-index: -2; |
|
|
animation: glitch 2s infinite reverse; |
|
|
} |
|
|
|
|
|
@keyframes glitch { |
|
|
0% { |
|
|
transform: translate(0); |
|
|
} |
|
|
20% { |
|
|
transform: translate(-3px, 3px); |
|
|
} |
|
|
40% { |
|
|
transform: translate(-3px, -3px); |
|
|
} |
|
|
60% { |
|
|
transform: translate(3px, 3px); |
|
|
} |
|
|
80% { |
|
|
transform: translate(3px, -3px); |
|
|
} |
|
|
100% { |
|
|
transform: translate(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.section { |
|
|
padding: 3rem 1rem; |
|
|
} |
|
|
|
|
|
.portal { |
|
|
width: 200px; |
|
|
height: 200px; |
|
|
} |
|
|
|
|
|
.door { |
|
|
width: 200px; |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
.progress-nav { |
|
|
right: 10px; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.progress-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="parallax-bg" id="parallaxBg"></div> |
|
|
|
|
|
|
|
|
<div class="money-animation-container"> |
|
|
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_ilujvy3x.json" background="transparent" speed="1" loop autoplay></lottie-player> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="progress-nav" id="progressNav"> |
|
|
<div class="progress-dot" data-section="level1"></div> |
|
|
<div class="progress-dot" data-section="level2"></div> |
|
|
<div class="progress-dot" data-section="level3"></div> |
|
|
<div class="progress-dot" data-section="level4"></div> |
|
|
<div class="progress-dot" data-section="level5"></div> |
|
|
<div class="progress-dot" data-section="level6"></div> |
|
|
<div class="progress-dot" data-section="level7"></div> |
|
|
<div class="progress-dot" data-section="level8"></div> |
|
|
<div class="progress-dot" data-section="level9"></div> |
|
|
<div class="progress-dot" data-section="level10"></div> |
|
|
<div class="progress-dot" data-section="level11"></div> |
|
|
<div class="progress-dot" data-section="level12"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="avatar-container" id="avatarContainer"> |
|
|
<div class="avatar tooltip" id="userAvatar"> |
|
|
<span>👤</span> |
|
|
<div class="tooltip-text">Ваш прогресс: 0%</div> |
|
|
</div> |
|
|
<div class="achievement-badge" id="achievementBadge" style="display: none;">0</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="achievement-popup" id="achievementPopup"> |
|
|
<div class="text-4xl mb-2">🏆</div> |
|
|
<h3 class="text-xl font-bold mb-2 gold-text" id="achievementTitle">Достижение разблокировано!</h3> |
|
|
<p id="achievementDesc">Вы получили новое достижение</p> |
|
|
<button class="mt-4 bg-gold text-black px-4 py-1 rounded" onclick="closeAchievementPopup()">OK</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center text-center" id="level1"> |
|
|
<div class="portal"></div> |
|
|
<div class="max-w-4xl mx-auto relative z-10 fade-in"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text neon-blue glitch-effect" data-text="Ты в Игре">Ты в Игре</h1> |
|
|
<p class="text-xl md:text-2xl mb-4 neon-pink">"Если ты не арбитражишь — ты просто смотришь, как другие делают деньги"</p> |
|
|
<p class="text-lg md:text-xl mb-10">Traffic Master — курс, где учат зарабатывать, а не слушать лекции</p> |
|
|
<button class="bg-transparent border-2 border-neon-blue text-neon-blue px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-black transition-all duration-300 glow-box cta-button micro-interaction pulse-animation" onclick="scrollToLevel('level2')"> |
|
|
Начать игру <i class="fas fa-gamepad ml-2"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div id="xpBadgeContainer" class="absolute top-0 left-0 w-full h-full pointer-events-none"></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="section-divider"></div> |
|
|
|
|
|
|
|
|
<section class="section flex items-center" id="level2"> |
|
|
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center"> |
|
|
<div class="hologram p-8 rounded-lg relative overflow-hidden fade-in"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-neon-blue to-transparent opacity-10 animate-pulse"></div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text neon-purple">Создатель этой реальности</h2> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-24 h-24 rounded-full border-2 border-gold bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg');"></div> |
|
|
<div class="ml-6"> |
|
|
<h3 class="text-2xl font-bold gold-text">Тимур В.</h3> |
|
|
<div class="flex space-x-2 mt-2"> |
|
|
<span class="text-xs px-2 py-1 bg-neon-blue bg-opacity-20 rounded">🧠 Мастер арбитража</span> |
|
|
<span class="text-xs px-2 py-1 bg-gold bg-opacity-20 rounded">💰 $5M оборота</span> |
|
|
<span class="text-xs px-2 py-1 bg-neon-pink bg-opacity-20 rounded">🔥 TMT — топ-3 команда</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 p-4 border-l-4 border-neon-blue bg-black bg-opacity-30"> |
|
|
<p class="italic">"Я создал этот мир, чтобы каждый мог изменить свою реальность. Здесь нет места слабым — только те, кто готов действовать, добьются успеха."</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="xp-badge" style="top: 20px; right: 20px;">+20 XP</div> |
|
|
</div> |
|
|
<div class="fade-in"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">Твой путь начинается здесь</h2> |
|
|
<p class="text-lg mb-6">Ты стоишь на пороге новой жизни. Впереди — обучение, которое перевернет твое представление о заработке в интернете.</p> |
|
|
<button class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 cta-button micro-interaction" onclick="scrollToLevel('level3')"> |
|
|
Выбрать персонажа <i class="fas fa-arrow-down ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level3"> |
|
|
<div class="max-w-6xl mx-auto text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 neon-text neon-blue">Выбери своего персонажа</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> |
|
|
|
|
|
<div class="character-card bg-black bg-opacity-50 p-6 rounded-lg cursor-pointer glow-box" onclick="selectCharacter('warrior')"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full border-2 border-neon-blue bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/44.jpg');"></div> |
|
|
<h3 class="text-2xl font-bold mb-2 neon-blue">Воин</h3> |
|
|
<p class="text-sm mb-4">Агрессивный подход, быстрые результаты, высокие риски</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-neon-blue bg-opacity-20 rounded">⚔️ Агрессивный</span> |
|
|
<span class="text-xs px-2 py-1 bg-neon-blue bg-opacity-20 rounded">💨 Быстрый старт</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="character-card bg-black bg-opacity-50 p-6 rounded-lg cursor-pointer glow-box" onclick="selectCharacter('strategist')"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full border-2 border-neon-purple bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg');"></div> |
|
|
<h3 class="text-2xl font-bold mb-2 neon-purple">Стратег</h3> |
|
|
<p class="text-sm mb-4">Продуманные ходы, аналитический подход, стабильный рост</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-neon-purple bg-opacity-20 rounded">🧠 Аналитик</span> |
|
|
<span class="text-xs px-2 py-1 bg-neon-purple bg-opacity-20 rounded">📈 Стабильность</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="character-card bg-black bg-opacity-50 p-6 rounded-lg cursor-pointer glow-box" onclick="selectCharacter('ninja')"> |
|
|
<div class="w-32 h-32 mx-auto mb-4 rounded-full border-2 border-neon-pink bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/22.jpg');"></div> |
|
|
<h3 class="text-2xl font-bold mb-2 neon-pink">Ниндзя</h3> |
|
|
<p class="text-sm mb-4">Скрытые методы, нестандартные решения, минимальные вложения</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-neon-pink bg-opacity-20 rounded">👤 Скрытность</span> |
|
|
<span class="text-xs px-2 py-1 bg-neon-pink bg-opacity-20 rounded">🔄 Нестандартный</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level4')"> |
|
|
Подтвердить выбор <i class="fas fa-check ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level4"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Твой арсенал</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="fade-in"> |
|
|
<h3 class="text-2xl font-bold mb-6 neon-text">Что ты получишь:</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box"> |
|
|
<div class="text-2xl mr-4 neon-blue">🔮</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Кристалл знаний</h4> |
|
|
<p class="text-sm">Полный доступ к закрытому курсу по арбитражу трафика</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box"> |
|
|
<div class="text-2xl mr-4 neon-purple">🗺️</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Карта офферов</h4> |
|
|
<p class="text-sm">Актуальные офферы с высоким CR и проверенные связки</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box"> |
|
|
<div class="text-2xl mr-4 neon-pink">⚔️</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Оружие аналитики</h4> |
|
|
<p class="text-sm">Набор инструментов для анализа и оптимизации кампаний</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box"> |
|
|
<div class="text-2xl mr-4 gold-text">🛡️</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Щит поддержки</h4> |
|
|
<p class="text-sm">Персональный ментор и доступ в закрытый чат команды</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-8 rounded-lg h-full flex flex-col justify-center"> |
|
|
<h3 class="text-2xl font-bold mb-6 neon-text">Твой инвентарь:</h3> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Прогресс обучения</span> |
|
|
<span>0%</span> |
|
|
</div> |
|
|
<div class="progress-track" style="--progress: 0%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Уровень доступа</span> |
|
|
<span>Новичок</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span>Level 1</span> |
|
|
<span>Level 10</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Доступные офферы</span> |
|
|
<span>0/50</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-5 gap-2"> |
|
|
<div class="h-2 bg-gray-700 rounded"></div> |
|
|
<div class="h-2 bg-gray-700 rounded"></div> |
|
|
<div class="h-2 bg-gray-700 rounded"></div> |
|
|
<div class="h-2 bg-gray-700 rounded"></div> |
|
|
<div class="h-2 bg-gray-700 rounded"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="bg-neon-blue text-black px-6 py-3 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button mt-4" onclick="scrollToLevel('level5')"> |
|
|
Продолжить <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level5"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Твой путь обучения</h2> |
|
|
|
|
|
<div class="relative"> |
|
|
|
|
|
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-neon-blue to-neon-purple" style="top: 40px;"></div> |
|
|
|
|
|
<div class="space-y-20 pl-8 md:pl-0"> |
|
|
|
|
|
<div class="checkpoint relative grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div class="md:text-right md:pr-8 fade-in"> |
|
|
<h3 class="text-2xl font-bold mb-2 neon-text">Базовый уровень</h3> |
|
|
<p>Основы арбитража, выбор ниши, первые шаги</p> |
|
|
</div> |
|
|
<div class="hologram p-6 rounded-lg fade-in"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-2xl mr-4">1</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Введение в арбитраж</h4> |
|
|
<p class="text-sm">3 урока, 2 практических задания</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded">Начать обучение</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="checkpoint relative grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div class="md:order-2 md:text-left md:pl-8 fade-in"> |
|
|
<h3 class="text-2xl font-bold mb-2 neon-text">Продвинутый уровень</h3> |
|
|
<p>Работа с офферами, аналитика, масштабирование</p> |
|
|
</div> |
|
|
<div class="hologram p-6 rounded-lg md:order-1 fade-in"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-2xl mr-4">2</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Глубокий анализ</h4> |
|
|
<p class="text-sm">5 уроков, 4 практических задания</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded">Заблокировано</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="checkpoint relative grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div class="md:text-right md:pr-8 fade-in"> |
|
|
<h3 class="text-2xl font-bold mb-2 neon-text">Мастер уровень</h3> |
|
|
<p>Автоматизация, сложные стратегии, управление командой</p> |
|
|
</div> |
|
|
<div class="hologram p-6 rounded-lg fade-in"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-2xl mr-4">3</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Профессиональные техники</h4> |
|
|
<p class="text-sm">7 уроков, 6 практических заданий</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-xs bg-gray-700 text-gray-400 px-3 py-1 rounded">Заблокировано</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-16"> |
|
|
<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level6')"> |
|
|
Принять вызов <i class="fas fa-flag-checkered ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level6"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Программа курса</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mb-12"> |
|
|
|
|
|
<div class="hologram p-6 rounded-lg glow-box fade-in"> |
|
|
<div class="text-4xl mb-4 neon-blue">01</div> |
|
|
<h3 class="text-xl font-bold mb-3">Основы арбитража</h3> |
|
|
<ul class="text-sm space-y-2 mb-4"> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Что такое арбитраж трафика</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Выбор ниши и офферов</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Первые шаги в рекламе</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded inline-block">3 урока</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hologram p-6 rounded-lg glow-box fade-in"> |
|
|
<div class="text-4xl mb-4 neon-purple">02</div> |
|
|
<h3 class="text-xl font-bold mb-3">Работа с трафиком</h3> |
|
|
<ul class="text-sm space-y-2 mb-4"> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Типы трафика и источники</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Настройка кампаний</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Оптимизация бюджета</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded inline-block">5 уроков</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hologram p-6 rounded-lg glow-box fade-in"> |
|
|
<div class="text-4xl mb-4 neon-pink">03</div> |
|
|
<h3 class="text-xl font-bold mb-3">Аналитика и масштабирование</h3> |
|
|
<ul class="text-sm space-y-2 mb-4"> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Ключевые метрики</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Инструменты аналитики</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Масштабирование успешных кампаний</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-xs bg-neon-pink bg-opacity-20 text-neon-pink px-3 py-1 rounded inline-block">4 урока</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level7')"> |
|
|
Узнать больше <i class="fas fa-book-open ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level7"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Твои возможные награды</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-12"> |
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="treasure-chest bg-black bg-opacity-50 p-8 rounded-lg text-center h-full"> |
|
|
<div class="chest-lid mb-6"> |
|
|
<div class="w-24 h-12 mx-auto bg-yellow-800 rounded-t-lg border-b-4 border-yellow-900"></div> |
|
|
</div> |
|
|
<div class="w-32 h-16 mx-auto bg-yellow-700 rounded-b-lg"></div> |
|
|
|
|
|
<h3 class="text-xl font-bold mt-6 mb-3 gold-text">Уровень 1</h3> |
|
|
<p class="text-sm mb-4">Первые $500-1000 в месяц</p> |
|
|
<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Достижимо за 1 месяц</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="treasure-chest bg-black bg-opacity-50 p-8 rounded-lg text-center h-full"> |
|
|
<div class="chest-lid mb-6"> |
|
|
<div class="w-24 h-12 mx-auto bg-yellow-600 rounded-t-lg border-b-4 border-yellow-700"></div> |
|
|
</div> |
|
|
<div class="w-32 h-16 mx-auto bg-yellow-500 rounded-b-lg"></div> |
|
|
|
|
|
<h3 class="text-xl font-bold mt-6 mb-3 gold-text">Уровень 2</h3> |
|
|
<p class="text-sm mb-4">$3000-5000 в месяц</p> |
|
|
<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Достижимо за 3 месяца</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="treasure-chest bg-black bg-opacity-50 p-8 rounded-lg text-center h-full"> |
|
|
<div class="chest-lid mb-6"> |
|
|
<div class="w-24 h-12 mx-auto bg-yellow-400 rounded-t-lg border-b-4 border-yellow-500"></div> |
|
|
</div> |
|
|
<div class="w-32 h-16 mx-auto bg-yellow-300 rounded-b-lg"></div> |
|
|
|
|
|
<h3 class="text-xl font-bold mt-6 mb-3 gold-text">Уровень 3</h3> |
|
|
<p class="text-sm mb-4">$10 000+ в месяц</p> |
|
|
<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Достижимо за 6 месяцев</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button class="bg-gold text-black px-8 py-3 text-lg font-bold hover:bg-yellow-400 hover:text-black transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level8')"> |
|
|
Хочу эти результаты <i class="fas fa-trophy ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level8"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Наша команда</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-12"> |
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg text-center h-full"> |
|
|
<div class="w-32 h-32 mx-auto rounded-full border-2 border-neon-blue bg-cover bg-center mb-4" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg');"></div> |
|
|
<h3 class="text-xl font-bold mb-2 neon-blue">Тимур В.</h3> |
|
|
<p class="text-sm mb-3">Основатель TMT, 7 лет в арбитраже</p> |
|
|
<div class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded inline-block">$5M+ оборот</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg text-center h-full"> |
|
|
<div class="w-32 h-32 mx-auto rounded-full border-2 border-neon-purple bg-cover bg-center mb-4" style="background-image: url('https://randomuser.me/api/portraits/women/42.jpg');"></div> |
|
|
<h3 class="text-xl font-bold mb-2 neon-purple">Анна К.</h3> |
|
|
<p class="text-sm mb-3">Специалист по Facebook Ads</p> |
|
|
<div class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded inline-block">CR +35%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg text-center h-full"> |
|
|
<div class="w-32 h-32 mx-auto rounded-full border-2 border-neon-pink bg-cover bg-center mb-4" style="background-image: url('https://randomuser.me/api/portraits/men/22.jpg');"></div> |
|
|
<h3 class="text-xl font-bold mb-2 neon-pink">Максим Р.</h3> |
|
|
<p class="text-sm mb-3">Аналитик, скрипты и автоматизация</p> |
|
|
<div class="text-xs bg-neon-pink bg-opacity-20 text-neon-pink px-3 py-1 rounded inline-block">ROI +200%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level9')"> |
|
|
Присоединиться к команде <i class="fas fa-users ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level9"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Выбери свой пакет</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-12"> |
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-8 rounded-lg h-full"> |
|
|
<h3 class="text-2xl font-bold mb-4 neon-blue">Стандарт</h3> |
|
|
<div class="text-4xl font-bold mb-4 gold-text">$297</div> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Доступ к курсу</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Базовые офферы</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Доступ в чат</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✗</span> |
|
|
<span>Персональный ментор</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✗</span> |
|
|
<span>Премиум офферы</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-neon-blue text-black px-6 py-3 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button"> |
|
|
Выбрать <i class="fas fa-check ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-8 rounded-lg h-full border-2 border-gold relative"> |
|
|
<div class="absolute top-0 right-0 bg-gold text-black text-xs font-bold px-3 py-1 rounded-bl">Популярный</div> |
|
|
<h3 class="text-2xl font-bold mb-4 neon-purple">Премиум</h3> |
|
|
<div class="text-4xl font-bold mb-4 gold-text">$597</div> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Доступ к курсу</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Базовые + премиум офферы</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Доступ в чат</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Персональный ментор (1 месяц)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Разбор ваших кампаний</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-gold text-black px-6 py-3 font-bold hover:bg-yellow-400 hover:text-black transition-all duration-300 glow-box cta-button"> |
|
|
Выбрать <i class="fas fa-crown ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-8 rounded-lg h-full"> |
|
|
<h3 class="text-2xl font-bold mb-4 neon-pink">VIP</h3> |
|
|
<div class="text-4xl font-bold mb-4 gold-text">$1497</div> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Доступ к курсу</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Все офферы + эксклюзивы</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Доступ в VIP чат</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Персональный ментор (3 месяца)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="mr-2">✓</span> |
|
|
<span>Стратегия под ваш бюджет</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-neon-pink text-black px-6 py-3 font-bold hover:bg-purple-600 hover:text-white transition-all duration-300 glow-box cta-button"> |
|
|
Выбрать <i class="fas fa-star ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level10')"> |
|
|
Узнать условия <i class="fas fa-info-circle ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level10"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Отзывы игроков</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 mb-12"> |
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full border-2 border-neon-blue bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/men/11.jpg');"></div> |
|
|
<div> |
|
|
<h3 class="font-bold">Александр К.</h3> |
|
|
<div class="flex text-yellow-400 text-sm"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">"За 2 месяца вышел на стабильные $1500 в месяц. До этого пытался сам, но без системы не получалось. Курс реально дает все инструменты для старта."</p> |
|
|
<div class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded inline-block">Результат через 2 месяца</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full border-2 border-neon-purple bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/women/33.jpg');"></div> |
|
|
<div> |
|
|
<h3 class="font-bold">Елена С.</h3> |
|
|
<div class="flex text-yellow-400 text-sm"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">"Брала VIP пакет с ментором. Лучшее решение! За 4 месяца вышла на $5k в месяц. Ментор помог избежать всех ошибок, которые я бы точно совершила."</p> |
|
|
<div class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded inline-block">Результат через 4 месяца</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full border-2 border-neon-pink bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/men/44.jpg');"></div> |
|
|
<div> |
|
|
<h3 class="font-bold">Дмитрий П.</h3> |
|
|
<div class="flex text-yellow-400 text-sm"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">"Прошел курс за 3 недели, сразу начал применять. Первый месяц - $800, второй - $3500, сейчас стабильно $7-10k. Система работает!"</p> |
|
|
<div class="text-xs bg-neon-pink bg-opacity-20 text-neon-pink px-3 py-1 rounded inline-block">Результат через 6 месяцев</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg h-full"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full border-2 border-gold bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/women/22.jpg');"></div> |
|
|
<div> |
|
|
<h3 class="font-bold">Анна М.</h3> |
|
|
<div class="flex text-yellow-400 text-sm"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mb-4">"Начала с нуля, без опыта в маркетинге. Через месяц первые деньги, через 3 - $2500. Сейчас развиваю агентство на основе полученных знаний."</p> |
|
|
<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Результат через 3 месяца</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level11')"> |
|
|
Хочу такие же результаты <i class="fas fa-rocket ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level11"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Вопросы и ответы</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 mb-12"> |
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg mb-4"> |
|
|
<h3 class="font-bold mb-2 neon-blue">Сколько времени нужно уделять?</h3> |
|
|
<p class="text-sm">Для первых результатов достаточно 2-3 часов в день. По мере роста кампаний время можно сократить до контроля и оптимизации.</p> |
|
|
</div> |
|
|
|
|
|
<div class="hologram p-6 rounded-lg mb-4"> |
|
|
<h3 class="font-bold mb-2 neon-purple">Нужен ли начальный бюджет?</h3> |
|
|
<p class="text-sm">Минимальный бюджет для старта - $200-300. Это покрывает тестовые кампании. Дальше можно масштабироваться с прибыли.</p> |
|
|
</div> |
|
|
|
|
|
<div class="hologram p-6 rounded-lg"> |
|
|
<h3 class="font-bold mb-2 neon-pink">Как быстро появятся первые результаты?</h3> |
|
|
<p class="text-sm">Первые продажи у большинства студентов происходят в течение 2-4 недель после начала обучения.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fade-in"> |
|
|
<div class="hologram p-6 rounded-lg mb-4"> |
|
|
<h3 class="font-bold mb-2 neon-blue">Подойдет ли мне, если я новичок?</h3> |
|
|
<p class="text-sm">Курс рассчитан на полных новичков. Все объясняется от базовых понятий до сложных стратегий.</p> |
|
|
</div> |
|
|
|
|
|
<div class="hologram p-6 rounded-lg mb-4"> |
|
|
<h3 class="font-bold mb-2 neon-purple">Есть ли гарантии результата?</h3> |
|
|
<p class="text-sm">Мы даем проверенную систему, но результат зависит от ваших действий. При серьезном подходе успех неизбежен.</p> |
|
|
</div> |
|
|
|
|
|
<div class="hologram p-6 rounded-lg"> |
|
|
<h3 class="font-bold mb-2 neon-pink">Какой пакет выбрать?</h3> |
|
|
<p class="text-sm">Если бюджет ограничен - начните со Стандарта. Для быстрых результатов лучше Премиум или VIP с ментором.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level12')"> |
|
|
Готов начать! <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section flex items-center justify-center" id="level12"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<div class="door mx-auto mb-12" id="finalDoor"> |
|
|
<div class="door-handle" onclick="openFinalDoor()"></div> |
|
|
<div class="keyhole"></div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text neon-blue">Твой новый уровень начинается сейчас</h2> |
|
|
<p class="text-xl mb-8">Если не сейчас — то когда? Начни путь с TMT уже сегодня.</p> |
|
|
|
|
|
<div class="max-w-md mx-auto"> |
|
|
<form id="contactForm" class="space-y-4 mb-8"> |
|
|
<input type="text" placeholder="Ваше имя" class="w-full bg-black bg-opacity-50 border border-neon-blue text-white px-4 py-3 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue"> |
|
|
<input type="email" placeholder="Email" class="w-full bg-black bg-opacity-50 border border-neon-blue text-white px-4 py-3 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue"> |
|
|
<input type="tel" placeholder="Телефон" class="w-full bg-black bg-opacity-50 border border-neon-blue text-white px-4 py-3 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue"> |
|
|
<button type="submit" class="w-full bg-gold text-black px-6 py-4 font-bold hover:bg-yellow-400 transition-all duration-300 glow-box cta-button text-lg"> |
|
|
Войти в игру <i class="fas fa-door-open ml-2"></i> |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="flex justify-center space-x-4"> |
|
|
<a href="#" class="social-icon text-xl w-10 h-10 flex items-center justify-center rounded-full bg-black bg-opacity-50 hover:bg-neon-blue hover:text-black"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
<a href="#" class="social-icon text-xl w-10 h-10 flex items-center justify-center rounded-full bg-black bg-opacity-50 hover:bg-neon-purple hover:text-black"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
</a> |
|
|
<a href="#" class="social-icon text-xl w-10 h-10 flex items-center justify-center rounded-full bg-black bg-opacity-50 hover:bg-neon-pink hover:text-black"> |
|
|
<i class="fab fa-viber"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<script> |
|
|
|
|
|
const userProgress = { |
|
|
currentLevel: 1, |
|
|
completedLevels: [], |
|
|
achievements: [], |
|
|
selectedCharacter: null, |
|
|
unlockedContent: [], |
|
|
xp: 0 |
|
|
}; |
|
|
|
|
|
|
|
|
const achievements = [ |
|
|
{ id: 'start', title: 'Первые шаги', description: 'Вы начали свое путешествие в арбитраже', level: 1 }, |
|
|
{ id: 'character', title: 'Выбор пути', description: 'Вы выбрали своего персонажа', level: 3 }, |
|
|
{ id: 'inventory', title: 'Снаряжение', description: 'Вы ознакомились со своим арсеналом', level: 4 }, |
|
|
{ id: 'halfway', title: 'Середина пути', description: 'Вы прошли половину программы', level: 6 }, |
|
|
{ id: 'program', title: 'Знание - сила', description: 'Вы изучили программу курса', level: 7 }, |
|
|
{ id: 'rewards', title: 'Охота за наградами', description: 'Вы узнали о своих возможных наградах', level: 8 }, |
|
|
{ id: 'team', title: 'Командный дух', description: 'Вы познакомились с командой', level: 9 }, |
|
|
{ id: 'packages', title: 'Выбор пакета', description: 'Вы рассмотрели варианты участия', level: 10 }, |
|
|
{ id: 'contact', title: 'На связи', description: 'Вы связались с нами', level: 12 } |
|
|
]; |
|
|
|
|
|
|
|
|
function createXPBadge() { |
|
|
const container = document.getElementById('xpBadgeContainer'); |
|
|
const badge = document.createElement('div'); |
|
|
badge.className = 'xp-badge'; |
|
|
badge.textContent = '+20 XP'; |
|
|
badge.style.left = `${Math.random() * 80 + 10}%`; |
|
|
badge.style.top = `${Math.random() * 80 + 10} |
|
|
</html> |
