210 lines
13 KiB
HTML
210 lines
13 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Капитал & Рынок - Экономическая стратегия{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="screen active">
|
||
<!-- Шапка -->
|
||
<div class="header">
|
||
<div class="logo-container">
|
||
{% if url_for('static', filename='images/logo.png') %}
|
||
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo"
|
||
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
|
||
<span class="logo-text" style="display: none; color: white; font-weight: bold; font-size: 1.2rem;">💰 Капитал & Рынок</span>
|
||
{% else %}
|
||
<span class="logo-text" style="color: white; font-weight: bold; font-size: 1.2rem;">💰 Капитал & Рынок</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Основной контент -->
|
||
<div class="container">
|
||
<!-- Приветственная карточка -->
|
||
<div class="card text-center">
|
||
<h1 style="margin-bottom: 15px;">Капитал & Рынок</h1>
|
||
<p style="margin: 15px 0; font-size: 1.1rem; color: var(--light-text);">
|
||
Стань успешным инвестором в динамичной экономической стратегии!
|
||
</p>
|
||
|
||
<div style="margin: 25px 0;">
|
||
<div style="font-size: 4rem; margin-bottom: 20px;">💰📈🏦</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col gap-3" style="max-width: 300px; margin: 0 auto;">
|
||
<a href="{{ url_for('login') }}" class="button" style="font-size: 1.1rem; padding: 15px;">
|
||
Войти в игру
|
||
</a>
|
||
<a href="{{ url_for('register') }}" class="button success" style="font-size: 1.1rem; padding: 15px;">
|
||
Создать аккаунт
|
||
</a>
|
||
<a href="{{ url_for('quick_login', username='Гость') }}" class="button secondary" style="padding: 12px;">
|
||
Быстрый старт (гостевая игра)
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Особенности игры -->
|
||
<div class="card">
|
||
<h3 style="text-align: center; margin-bottom: 20px;">Особенности игры</h3>
|
||
<div style="display: grid; grid-template-columns: 1fr; gap: 15px;">
|
||
<div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; flex-shrink: 0;">🎮</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">Динамичный геймплей</h4>
|
||
<p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
|
||
Каждый месяц - новые решения, события и вызовы. Адаптируйтесь к меняющемуся рынку!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; flex-shrink: 0;">👥</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">Мультиплеер до 10 игроков</h4>
|
||
<p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
|
||
Соревнуйтесь с друзьями или случайными соперниками. Создавайте альянсы и заключайте сделки!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; flex-shrink: 0;">💡</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">13 уникальных способностей</h4>
|
||
<p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
|
||
Каждый игрок получает особую способность: от Кризисного инвестора до Теневого бухгалтера.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; gap: 15px; padding: 15px; background-color: #f8f9fa; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; flex-shrink: 0;">📊</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">Реалистичная экономика</h4>
|
||
<p style="font-size: 0.9rem; color: var(--light-text); margin: 0;">
|
||
Рынок реагирует на действия всех игроков. Ваши решения влияют на цены активов!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Как начать играть -->
|
||
<div class="card">
|
||
<h3 style="text-align: center; margin-bottom: 20px;">Как начать играть?</h3>
|
||
<div style="counter-reset: step-counter;">
|
||
<div style="display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;">
|
||
<div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
|
||
1
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">Создайте аккаунт</h4>
|
||
<p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
|
||
Зарегистрируйтесь или войдите как гость. Это займет менее минуты!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;">
|
||
<div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
|
||
2
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">Присоединитесь к комнате</h4>
|
||
<p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
|
||
Выберите существующую комнату или создайте свою. Настройте правила игры.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;">
|
||
<div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
|
||
3
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">Выберите способность</h4>
|
||
<p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
|
||
Получите случайную уникальную способность и стартовый капитал 100,000 ₽.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: flex-start; gap: 15px;">
|
||
<div style="background-color: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold;">
|
||
4
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom: 5px;">Станьте самым богатым!</h4>
|
||
<p style="font-size: 0.95rem; color: var(--light-text); margin: 0;">
|
||
Инвестируйте в акции, недвижимость, бизнес. Обыграйте конкурентов за 12 месяцев!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Статистика (заглушка) -->
|
||
<div class="card text-center">
|
||
<h3 style="margin-bottom: 15px;">Игровая статистика</h3>
|
||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px;">
|
||
<div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">1,234</div>
|
||
<div style="font-size: 0.9rem; color: var(--light-text);">Активных игроков</div>
|
||
</div>
|
||
<div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">567</div>
|
||
<div style="font-size: 0.9rem; color: var(--light-text);">Игровых комнат</div>
|
||
</div>
|
||
<div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">89</div>
|
||
<div style="font-size: 0.9rem; color: var(--light-text);">Турниров</div>
|
||
</div>
|
||
<div style="padding: 15px; background-color: #f0f8ff; border-radius: var(--border-radius);">
|
||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">12</div>
|
||
<div style="font-size: 0.9rem; color: var(--light-text);">Уникальных способностей</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Футер -->
|
||
<div style="text-align: center; padding: 20px 0; color: var(--light-text); font-size: 0.9rem;">
|
||
<p>© 2024 Капитал & Рынок. Экономическая стратегия в реальном времени.</p>
|
||
<p style="margin-top: 10px;">
|
||
<a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 10px;">Правила</a> |
|
||
<a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 10px;">Контакты</a> |
|
||
<a href="#" style="color: var(--primary-color); text-decoration: none; margin: 0 10px;">Поддержка</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// Простая анимация для привлечения внимания
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const emojis = document.querySelector('.text-center .flex');
|
||
if (emojis) {
|
||
emojis.style.opacity = '0';
|
||
emojis.style.transform = 'translateY(20px)';
|
||
|
||
setTimeout(() => {
|
||
emojis.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
emojis.style.opacity = '1';
|
||
emojis.style.transform = 'translateY(0)';
|
||
}, 300);
|
||
}
|
||
|
||
// Подсветка кнопок при наведении
|
||
const buttons = document.querySelectorAll('.button');
|
||
buttons.forEach(button => {
|
||
button.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'translateY(-2px)';
|
||
});
|
||
button.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'translateY(0)';
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %} |