fix
This commit is contained in:
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
.idea
|
||||
.venv
|
||||
app.db
|
||||
BIN
__pycache__/app.cpython-310.pyc
Normal file
BIN
__pycache__/app.cpython-310.pyc
Normal file
Binary file not shown.
BIN
__pycache__/config.cpython-310.pyc
Normal file
BIN
__pycache__/config.cpython-310.pyc
Normal file
Binary file not shown.
35
config.py
Normal file
35
config.py
Normal file
@@ -0,0 +1,35 @@
|
||||
import os
|
||||
from datetime import timedelta
|
||||
|
||||
basedir = os.path.abspath(os.path.dirname(__file__))
|
||||
|
||||
|
||||
class Config:
|
||||
SECRET_KEY = os.environ.get('SECRET_KEY') or 'dev-secret-key-change-in-production'
|
||||
SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or \
|
||||
'sqlite:///' + os.path.join(basedir, 'app.db')
|
||||
SQLALCHEMY_TRACK_MODIFICATIONS = False
|
||||
|
||||
# Настройки игры
|
||||
STARTING_CAPITAL = 100000
|
||||
MAX_PLAYERS_PER_ROOM = 10
|
||||
DEFAULT_GAME_MONTHS = 12
|
||||
|
||||
# Тайминги (в секундах)
|
||||
ACTION_PHASE_DURATION = 120
|
||||
MARKET_PHASE_DURATION = 30
|
||||
EVENT_PHASE_DURATION = 30
|
||||
RESULTS_PHASE_DURATION = 45
|
||||
|
||||
# Пути
|
||||
UPLOAD_FOLDER = os.path.join(basedir, 'static/uploads')
|
||||
MAX_CONTENT_LENGTH = 16 * 1024 * 1024 # 16MB
|
||||
|
||||
@staticmethod
|
||||
def init_app(app):
|
||||
# Создаем папки если их нет
|
||||
if not os.path.exists(Config.UPLOAD_FOLDER):
|
||||
os.makedirs(Config.UPLOAD_FOLDER)
|
||||
|
||||
|
||||
config = Config()
|
||||
23
logo.py
Normal file
23
logo.py
Normal file
@@ -0,0 +1,23 @@
|
||||
# create_logo.py
|
||||
from PIL import Image, ImageDraw, ImageFont
|
||||
import os
|
||||
|
||||
# Создаем папку если её нет
|
||||
os.makedirs('static/images', exist_ok=True)
|
||||
|
||||
# Создаем изображение
|
||||
img = Image.new('RGB', (200, 60), color='#0088cc')
|
||||
draw = ImageDraw.Draw(img)
|
||||
|
||||
# Рисуем текст (нужен шрифт, или используем стандартный)
|
||||
try:
|
||||
font = ImageFont.truetype("arial.ttf", 20)
|
||||
except:
|
||||
font = ImageFont.load_default()
|
||||
|
||||
# Текст логотипа
|
||||
draw.text((10, 20), "💰 Капитал & Рынок", fill="white", font=font)
|
||||
|
||||
# Сохраняем
|
||||
img.save('static/images/logo.png')
|
||||
print("Логотип создан: static/images/logo.png")
|
||||
16
main.py
Normal file
16
main.py
Normal file
@@ -0,0 +1,16 @@
|
||||
# This is a sample Python script.
|
||||
|
||||
# Press Shift+F10 to execute it or replace it with your code.
|
||||
# Press Double Shift to search everywhere for classes, files, tool windows, actions, and settings.
|
||||
|
||||
|
||||
def print_hi(name):
|
||||
# Use a breakpoint in the code line below to debug your script.
|
||||
print(f'Hi, {name}') # Press Ctrl+F8 to toggle the breakpoint.
|
||||
|
||||
|
||||
# Press the green button in the gutter to run the script.
|
||||
if __name__ == '__main__':
|
||||
print_hi('PyCharm')
|
||||
|
||||
# See PyCharm help at https://www.jetbrains.com/help/pycharm/
|
||||
890
static/css/style.css
Normal file
890
static/css/style.css
Normal file
@@ -0,0 +1,890 @@
|
||||
:root {
|
||||
--primary-color: #0088cc; /* Telegram blue */
|
||||
--secondary-color: #f0f2f5;
|
||||
--accent-color: #34b7f1;
|
||||
--danger-color: #e53935;
|
||||
--success-color: #4caf50;
|
||||
--warning-color: #ff9800;
|
||||
--text-color: #333;
|
||||
--light-text: #707579;
|
||||
--border-radius: 10px;
|
||||
--box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Контейнер */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
padding: 15px;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
/* Шапка */
|
||||
.header {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
box-shadow: var(--box-shadow);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 30px;
|
||||
max-width: 150px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Карточки */
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: var(--box-shadow);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card h2, .card h3 {
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 2px solid var(--secondary-color);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Списки */
|
||||
.player-list, .room-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.player-item, .room-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.player-item:hover, .room-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 12px;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.player-item:last-child, .room-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.player-info, .room-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.player-avatar, .room-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--accent-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
margin-right: 12px;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.player-capital {
|
||||
font-weight: bold;
|
||||
color: var(--success-color);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.player-ability {
|
||||
background-color: var(--secondary-color);
|
||||
padding: 4px 8px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--light-text);
|
||||
max-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Кнопки */
|
||||
.button {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 12px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #0077b3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background-color: white;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button.danger {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.button.danger:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
|
||||
.button.success {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.button.success:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.button.warning {
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.button.warning:hover {
|
||||
background-color: #f57c00;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Табы */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background-color: white;
|
||||
border-bottom: 3px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
border-bottom: 3px solid var(--primary-color);
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Активы */
|
||||
.asset-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.asset-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 12px;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.asset-price {
|
||||
font-weight: bold;
|
||||
color: var(--success-color);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.asset-price.negative {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.asset-price.neutral {
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.asset-change {
|
||||
font-size: 0.85rem;
|
||||
color: var(--light-text);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.asset-change.positive {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.asset-change.negative {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Прогресс-бар */
|
||||
.progress-container {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 12px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
|
||||
width: 0%;
|
||||
transition: width 0.5s ease;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Таймер */
|
||||
.timer {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
color: var(--primary-color);
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.timer.warning {
|
||||
color: var(--warning-color);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.timer.danger {
|
||||
color: var(--danger-color);
|
||||
animation: pulse 0.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Новости и события */
|
||||
.news-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.news-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 12px;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.news-impact {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.impact-positive {
|
||||
color: var(--success-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.impact-negative {
|
||||
color: var(--danger-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.impact-neutral {
|
||||
color: var(--warning-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Способности */
|
||||
.ability-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.ability-item:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.ability-item.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
border-left-color: var(--light-text);
|
||||
}
|
||||
|
||||
.ability-item.disabled:hover {
|
||||
transform: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.ability-name {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.ability-description {
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ability-cooldown {
|
||||
font-size: 0.8rem;
|
||||
color: var(--danger-color);
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Формы авторизации */
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-weight: 600;
|
||||
color: var(--light-text);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.input-group select,
|
||||
.input-group textarea {
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.input-group input:focus,
|
||||
.input-group select:focus,
|
||||
.input-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.1);
|
||||
}
|
||||
|
||||
.auth-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.auth-links a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.auth-links a:hover {
|
||||
text-decoration: underline;
|
||||
color: #0077b3;
|
||||
}
|
||||
|
||||
/* Комнаты */
|
||||
.room-status {
|
||||
font-size: 0.8rem;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.room-status.waiting {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.room-status.playing {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.room-status.full {
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.room-status.finished {
|
||||
background-color: #f5f5f5;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.room-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--light-text);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.search-bar input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.1);
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
padding: 0 20px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
transition: var(--transition);
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.search-bar button:hover {
|
||||
background-color: #0077b3;
|
||||
}
|
||||
|
||||
/* Всплывающие сообщения */
|
||||
.flash-messages {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background-color: white;
|
||||
color: var(--text-color);
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
.flash-message.success {
|
||||
border-left-color: var(--success-color);
|
||||
}
|
||||
|
||||
.flash-message.error {
|
||||
border-left-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.flash-message.warning {
|
||||
border-left-color: var(--warning-color);
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Скроллбар */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #0077b3;
|
||||
}
|
||||
|
||||
/* Адаптивные стили */
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 25px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.player-avatar, .room-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.timer {
|
||||
font-size: 1.3rem;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.asset-price {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.header-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Дополнительные утилиты */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mt-1 { margin-top: 5px; }
|
||||
.mt-2 { margin-top: 10px; }
|
||||
.mt-3 { margin-top: 15px; }
|
||||
.mt-4 { margin-top: 20px; }
|
||||
.mt-5 { margin-top: 25px; }
|
||||
|
||||
.mb-1 { margin-bottom: 5px; }
|
||||
.mb-2 { margin-bottom: 10px; }
|
||||
.mb-3 { margin-bottom: 15px; }
|
||||
.mb-4 { margin-bottom: 20px; }
|
||||
.mb-5 { margin-bottom: 25px; }
|
||||
|
||||
.p-1 { padding: 5px; }
|
||||
.p-2 { padding: 10px; }
|
||||
.p-3 { padding: 15px; }
|
||||
.p-4 { padding: 20px; }
|
||||
.p-5 { padding: 25px; }
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-1 { gap: 5px; }
|
||||
.gap-2 { gap: 10px; }
|
||||
.gap-3 { gap: 15px; }
|
||||
.gap-4 { gap: 20px; }
|
||||
.gap-5 { gap: 25px; }
|
||||
|
||||
/* Стили для уведомлений flash */
|
||||
.flash-messages {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10000;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background-color: white;
|
||||
color: var(--text-color);
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
animation: slideDown 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flash-message.success {
|
||||
border-left-color: var(--success-color);
|
||||
}
|
||||
|
||||
.flash-message.error {
|
||||
border-left-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.flash-message.info {
|
||||
border-left-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.flash-message.warning {
|
||||
border-left-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.flash-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--light-text);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) translateX(-50%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Иконки */
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-home { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>'); }
|
||||
.icon-settings { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>'); }
|
||||
.icon-chat { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>'); }
|
||||
.icon-stats { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16 11V3H8v6H2v12h20V11h-6zm-6-6h4v14h-4V5zm-6 6h4v8H4v-8zm16 8h-4v-6h4v6z"/></svg>'); }
|
||||
.icon-help { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>'); }
|
||||
BIN
static/images/logo.png
Normal file
BIN
static/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
129
static/js/game.js
Normal file
129
static/js/game.js
Normal file
@@ -0,0 +1,129 @@
|
||||
// Логика игрового процесса
|
||||
|
||||
class Game {
|
||||
constructor() {
|
||||
this.month = 1;
|
||||
this.phase = 'action'; // action, market, event, results
|
||||
this.playerCapital = 100000;
|
||||
this.assets = [];
|
||||
this.abilities = [];
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadGameState();
|
||||
this.startPhaseTimer();
|
||||
this.updateUI();
|
||||
}
|
||||
|
||||
startPhaseTimer() {
|
||||
const phaseDurations = {
|
||||
action: 120, // 2 минуты
|
||||
market: 30, // 30 секунд
|
||||
event: 30, // 30 секунд
|
||||
results: 45 // 45 секунд
|
||||
};
|
||||
|
||||
this.timer = new GameTimer('phase-timer', phaseDurations[this.phase]);
|
||||
this.timer.onComplete = () => this.nextPhase();
|
||||
this.timer.start();
|
||||
}
|
||||
|
||||
nextPhase() {
|
||||
const phases = ['action', 'market', 'event', 'results'];
|
||||
const currentIndex = phases.indexOf(this.phase);
|
||||
const nextIndex = (currentIndex + 1) % phases.length;
|
||||
|
||||
this.phase = phases[nextIndex];
|
||||
|
||||
if (this.phase === 'results') {
|
||||
this.endMonth();
|
||||
}
|
||||
|
||||
this.updatePhaseDisplay();
|
||||
this.startPhaseTimer();
|
||||
}
|
||||
|
||||
endMonth() {
|
||||
this.month++;
|
||||
this.calculateMarketChanges();
|
||||
this.applyRandomEvents();
|
||||
this.updateLeaderboard();
|
||||
|
||||
if (this.month > 12) {
|
||||
this.endGame();
|
||||
}
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
document.getElementById('game-month').textContent = `Месяц ${this.month}`;
|
||||
document.getElementById('player-capital').textContent = formatCurrency(this.playerCapital);
|
||||
|
||||
// Обновление прогресс-бара
|
||||
const progress = (this.playerCapital / 500000) * 100; // Пример: цель 500к
|
||||
document.getElementById('capital-progress').style.width = Math.min(progress, 100) + '%';
|
||||
}
|
||||
|
||||
updatePhaseDisplay() {
|
||||
const phaseNames = {
|
||||
action: 'Фаза действий',
|
||||
market: 'Реакция рынка',
|
||||
event: 'Случайные события',
|
||||
results: 'Итоги месяца'
|
||||
};
|
||||
|
||||
document.getElementById('phase-timer').textContent = phaseNames[this.phase];
|
||||
}
|
||||
|
||||
calculateMarketChanges() {
|
||||
// Здесь будет сложная логика из концепции игры
|
||||
console.log('Расчет изменений рынка...');
|
||||
}
|
||||
|
||||
applyRandomEvents() {
|
||||
// Применение случайных и политических событий
|
||||
console.log('Применение событий...');
|
||||
}
|
||||
|
||||
updateLeaderboard() {
|
||||
// Обновление таблицы лидеров
|
||||
console.log('Обновление лидерборда...');
|
||||
}
|
||||
|
||||
endGame() {
|
||||
alert('Игра завершена! Победитель: ...');
|
||||
window.location.href = 'rooms.html';
|
||||
}
|
||||
|
||||
loadGameState() {
|
||||
// Загрузка состояния игры из localStorage или сервера
|
||||
const saved = localStorage.getItem('gameState');
|
||||
if (saved) {
|
||||
const state = JSON.parse(saved);
|
||||
Object.assign(this, state);
|
||||
}
|
||||
}
|
||||
|
||||
saveGameState() {
|
||||
localStorage.setItem('gameState', JSON.stringify({
|
||||
month: this.month,
|
||||
phase: this.phase,
|
||||
playerCapital: this.playerCapital,
|
||||
assets: this.assets,
|
||||
abilities: this.abilities
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// Инициализация игры
|
||||
function initGame() {
|
||||
window.game = new Game();
|
||||
game.init();
|
||||
|
||||
// Автосохранение каждые 30 секунд
|
||||
setInterval(() => game.saveGameState(), 30000);
|
||||
|
||||
// Обработка завершения хода
|
||||
document.getElementById('end-turn')?.addEventListener('click', () => {
|
||||
game.nextPhase();
|
||||
});
|
||||
}
|
||||
87
static/js/main.js
Normal file
87
static/js/main.js
Normal file
@@ -0,0 +1,87 @@
|
||||
// Общие функции для всех страниц
|
||||
|
||||
// Инициализация табов
|
||||
function initTabs() {
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
if (tabs.length > 0) {
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
const tabId = this.getAttribute('data-tab');
|
||||
if (tabId) {
|
||||
switchTab(tabId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function switchTab(tabId) {
|
||||
// Удаляем активный класс у всех вкладок
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
|
||||
// Добавляем активный класс выбранной вкладке
|
||||
const activeTab = document.querySelector(`.tab[data-tab="${tabId}"]`);
|
||||
const activeContent = document.getElementById(`${tabId}-tab`);
|
||||
|
||||
if (activeTab) activeTab.classList.add('active');
|
||||
if (activeContent) activeContent.classList.add('active');
|
||||
}
|
||||
|
||||
// Таймер обратного отсчета
|
||||
class GameTimer {
|
||||
constructor(elementId, duration) {
|
||||
this.element = document.getElementById(elementId);
|
||||
this.duration = duration;
|
||||
this.timeLeft = duration;
|
||||
this.interval = null;
|
||||
}
|
||||
|
||||
start() {
|
||||
this.updateDisplay();
|
||||
this.interval = setInterval(() => {
|
||||
this.timeLeft--;
|
||||
this.updateDisplay();
|
||||
|
||||
if (this.timeLeft <= 0) {
|
||||
this.stop();
|
||||
if (this.onComplete) this.onComplete();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
}
|
||||
}
|
||||
|
||||
updateDisplay() {
|
||||
if (this.element) {
|
||||
const minutes = Math.floor(this.timeLeft / 60);
|
||||
const seconds = this.timeLeft % 60;
|
||||
this.element.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Форматирование чисел (валюты)
|
||||
function formatCurrency(amount) {
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
currency: 'RUB',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
// Инициализация при загрузке страницы
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initTabs();
|
||||
|
||||
// Инициализация текущего пользователя
|
||||
const currentUser = localStorage.getItem('currentUser');
|
||||
if (currentUser && document.getElementById('current-user')) {
|
||||
document.getElementById('current-user').textContent = currentUser;
|
||||
}
|
||||
});
|
||||
52
templates/403.html
Normal file
52
templates/403.html
Normal file
@@ -0,0 +1,52 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Доступ запрещён - Капитал & Рынок{% endblock %}
|
||||
|
||||
{% block screen_content %}
|
||||
<div class="header">
|
||||
<a href="{{ url_for('rooms') }}" class="back-button">←</a>
|
||||
<div class="logo-container">
|
||||
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="card text-center">
|
||||
<div style="font-size: 5rem; color: var(--warning-color); margin: 20px 0;">403</div>
|
||||
<h2>Доступ запрещён</h2>
|
||||
<p>У вас недостаточно прав для доступа к этой странице.</p>
|
||||
|
||||
<div style="margin: 30px 0;">
|
||||
<div style="font-size: 8rem; color: #f0f0f0; margin-bottom: 20px;">🔒💰</div>
|
||||
<p style="color: var(--light-text); font-size: 0.9rem;">
|
||||
Эта комната может быть приватной или игра уже началась.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 mt-4">
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('rooms') }}" class="button">
|
||||
Вернуться к списку комнат
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login') }}" class="button">
|
||||
Войти в систему
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('index') }}" class="button secondary">
|
||||
На главную
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Возможные причины:</h3>
|
||||
<ul style="padding-left: 20px; margin-top: 10px;">
|
||||
<li style="margin-bottom: 8px;">Вы не авторизованы в системе</li>
|
||||
<li style="margin-bottom: 8px;">У вас нет прав для доступа к этой комнате</li>
|
||||
<li style="margin-bottom: 8px;">Игра уже началась и присоединение невозможно</li>
|
||||
<li>Комната является приватной</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
46
templates/404.html
Normal file
46
templates/404.html
Normal file
@@ -0,0 +1,46 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Страница не найдена - Капитал & Рынок{% endblock %}
|
||||
|
||||
{% block screen_content %}
|
||||
<div class="header">
|
||||
<a href="{{ url_for('rooms') }}" class="back-button">←</a>
|
||||
<div class="logo-container">
|
||||
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="card text-center">
|
||||
<div style="font-size: 5rem; color: var(--primary-color); margin: 20px 0;">404</div>
|
||||
<h2>Страница не найдена</h2>
|
||||
<p>К сожалению, запрашиваемая страница не существует или была перемещена.</p>
|
||||
|
||||
<div style="margin: 30px 0;">
|
||||
<div style="font-size: 8rem; color: #f0f0f0; margin-bottom: 20px;">💼📉</div>
|
||||
<p style="color: var(--light-text); font-size: 0.9rem;">
|
||||
Возможно, комната была закрыта или игра завершена.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 mt-4">
|
||||
<a href="{{ url_for('rooms') }}" class="button">
|
||||
Вернуться к списку комнат
|
||||
</a>
|
||||
<a href="{{ url_for('index') }}" class="button secondary">
|
||||
На главную
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Что можно сделать?</h3>
|
||||
<ul style="padding-left: 20px; margin-top: 10px;">
|
||||
<li style="margin-bottom: 8px;">Проверьте правильность URL-адреса</li>
|
||||
<li style="margin-bottom: 8px;">Создайте новую игровую комнату</li>
|
||||
<li style="margin-bottom: 8px;">Присоединитесь к другой комнате</li>
|
||||
<li>Обратитесь к администратору, если это ошибка</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
74
templates/500.html
Normal file
74
templates/500.html
Normal file
@@ -0,0 +1,74 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Ошибка сервера - Капитал & Рынок{% endblock %}
|
||||
|
||||
{% block screen_content %}
|
||||
<div class="header">
|
||||
<a href="{{ url_for('rooms') }}" class="back-button">←</a>
|
||||
<div class="logo-container">
|
||||
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="card text-center">
|
||||
<div style="font-size: 5rem; color: var(--danger-color); margin: 20px 0;">500</div>
|
||||
<h2>Ошибка сервера</h2>
|
||||
<p>Произошла внутренняя ошибка сервера. Мы уже работаем над её устранением.</p>
|
||||
|
||||
<div style="margin: 30px 0;">
|
||||
<div style="font-size: 8rem; color: #f0f0f0; margin-bottom: 20px;">💥📊</div>
|
||||
<p style="color: var(--light-text); font-size: 0.9rem;">
|
||||
Рынок временно не работает. Пожалуйста, попробуйте позже.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 mt-4">
|
||||
<button onclick="window.location.reload()" class="button">
|
||||
Попробовать снова
|
||||
</button>
|
||||
<a href="{{ url_for('rooms') }}" class="button secondary">
|
||||
Вернуться к списку комнат
|
||||
</a>
|
||||
<a href="{{ url_for('index') }}" class="button">
|
||||
На главную
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Техническая информация</h3>
|
||||
<p style="margin-top: 10px; font-size: 0.9rem; color: var(--light-text);">
|
||||
Если ошибка повторяется, пожалуйста, свяжитесь с администратором:
|
||||
</p>
|
||||
|
||||
<div style="background-color: #f8f9fa; padding: 15px; border-radius: var(--border-radius); margin-top: 15px; font-family: monospace; font-size: 0.85rem;">
|
||||
<div>Время ошибки: <span id="error-time">{{ now.strftime('%Y-%m-%d %H:%M:%S') if now else '' }}</span></div>
|
||||
<div>Путь: <span id="error-path">{{ request.path if request else '' }}</span></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<button onclick="copyErrorInfo()" class="button secondary">
|
||||
Скопировать информацию об ошибке
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function copyErrorInfo() {
|
||||
const errorInfo = `Ошибка 500\nПуть: ${document.getElementById('error-path').textContent}\nВремя: ${document.getElementById('error-time').textContent}\nUser Agent: ${navigator.userAgent}`;
|
||||
|
||||
navigator.clipboard.writeText(errorInfo).then(() => {
|
||||
alert('Информация об ошибке скопирована в буфер обмена');
|
||||
});
|
||||
}
|
||||
|
||||
// Автоматическая перезагрузка через 30 секунд
|
||||
setTimeout(() => {
|
||||
console.log('Пытаемся перезагрузить страницу через 30 секунд после ошибки...');
|
||||
}, 30000);
|
||||
</script>
|
||||
{% endblock %}
|
||||
69
templates/base.html
Normal file
69
templates/base.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Капитал & Рынок{% endblock %}</title>
|
||||
|
||||
<!-- Статические файлы -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="icon" href="{{ url_for('static', filename='images/logo.png') }}">
|
||||
|
||||
<!-- WebSocket -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
|
||||
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Уведомления -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="flash-messages">
|
||||
{% for category, message in messages %}
|
||||
<div class="flash-message {{ category }}">
|
||||
{{ message }}
|
||||
<button class="flash-close" onclick="this.parentElement.remove()">×</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<!-- Контент страницы -->
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<!-- Общие скрипты -->
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
|
||||
<!-- Инициализация WebSocket -->
|
||||
<script>
|
||||
// Подключение к WebSocket
|
||||
const socket = io();
|
||||
|
||||
// Базовая обработка подключения
|
||||
socket.on('connect', function() {
|
||||
console.log('Connected to server');
|
||||
});
|
||||
|
||||
socket.on('disconnect', function() {
|
||||
console.log('Disconnected from server');
|
||||
});
|
||||
|
||||
// Глобальные обработчики событий
|
||||
socket.on('chat_message', function(data) {
|
||||
// Обработка сообщений чата
|
||||
console.log('New message:', data);
|
||||
});
|
||||
|
||||
socket.on('player_joined', function(data) {
|
||||
console.log('Player joined:', data.username);
|
||||
});
|
||||
|
||||
socket.on('player_left', function(data) {
|
||||
console.log('Player left:', data.username);
|
||||
});
|
||||
</script>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
40
templates/game.html
Normal file
40
templates/game.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Капитал & Рынок - Игра</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="screen active">
|
||||
<div class="header">
|
||||
<a href="lobby.html" class="back-button" onclick="return confirmExit()">←</a>
|
||||
<div class="logo-container">
|
||||
<img src="logo.png" alt="Капитал & Рынок" class="logo">
|
||||
</div>
|
||||
<span id="game-month">Месяц 1</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Остальной код игрового экрана (табы, карточки и т.д.) -->
|
||||
<!-- Используем тот же HTML из предыдущей версии, но разбиваем на отдельные страницы -->
|
||||
<!-- Полный код смотри в предыдущем сообщении -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/game.js"></script>
|
||||
<script>
|
||||
// Подтверждение выхода из игры
|
||||
function confirmExit() {
|
||||
return confirm('Вы уверены, что хотите выйти из игры? Текущий прогресс может быть потерян.');
|
||||
}
|
||||
|
||||
// Инициализация игры
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initGame();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
210
templates/index.html
Normal file
210
templates/index.html
Normal file
@@ -0,0 +1,210 @@
|
||||
{% 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 %}
|
||||
1085
templates/lobby.html
Normal file
1085
templates/lobby.html
Normal file
File diff suppressed because it is too large
Load Diff
114
templates/login.html
Normal file
114
templates/login.html
Normal file
@@ -0,0 +1,114 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Вход - Капитал & Рынок{% endblock %}
|
||||
|
||||
{% block screen_content %}
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<h2>Вход в игру</h2>
|
||||
|
||||
<form method="POST" action="{{ url_for('login') }}" class="auth-form">
|
||||
<div class="input-group">
|
||||
<label for="username">Имя пользователя</label>
|
||||
<input type="text" id="username" name="username"
|
||||
placeholder="Введите ваш никнейм"
|
||||
value="{{ request.form.username if request.form }}"
|
||||
required autofocus>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="password">Пароль</label>
|
||||
<input type="password" id="password" name="password"
|
||||
placeholder="Введите пароль" required>
|
||||
</div>
|
||||
|
||||
<div class="input-group" style="flex-direction: row; align-items: center; gap: 10px;">
|
||||
<input type="checkbox" id="remember" name="remember" checked>
|
||||
<label for="remember" style="margin: 0;">Запомнить меня</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Войти</button>
|
||||
|
||||
<div class="auth-links">
|
||||
<a href="{{ url_for('register') }}">Создать аккаунт</a>
|
||||
<a href="#" onclick="showQuickLogin()">Быстрый вход (тест)</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Тестовые аккаунты</h3>
|
||||
<p style="margin-bottom: 15px; color: var(--light-text); font-size: 0.9rem;">
|
||||
Для быстрого тестирования игры:
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<a href="{{ url_for('quick_login', username='Игрок1') }}" class="button secondary">
|
||||
Войти как Игрок1
|
||||
</a>
|
||||
<a href="{{ url_for('quick_login', username='Игрок2') }}" class="button secondary">
|
||||
Войти как Игрок2
|
||||
</a>
|
||||
<a href="{{ url_for('quick_login', username='Инвестор') }}" class="button secondary">
|
||||
Войти как Инвестор
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно быстрого входа -->
|
||||
<div id="quick-login-modal" class="modal-backdrop">
|
||||
<div class="modal">
|
||||
<h3>Быстрый вход</h3>
|
||||
<p>Введите имя для быстрого входа (будет создан аккаунт если его нет):</p>
|
||||
|
||||
<div class="input-group mt-3">
|
||||
<input type="text" id="quick-username" placeholder="Имя пользователя" style="width: 100%;">
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-4">
|
||||
<button onclick="doQuickLogin()" class="button success">Войти</button>
|
||||
<button onclick="hideQuickLogin()" class="button secondary">Отмена</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function showQuickLogin() {
|
||||
event.preventDefault();
|
||||
document.getElementById('quick-login-modal').classList.add('active');
|
||||
document.getElementById('quick-username').focus();
|
||||
}
|
||||
|
||||
function hideQuickLogin() {
|
||||
document.getElementById('quick-login-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
function doQuickLogin() {
|
||||
const username = document.getElementById('quick-username').value.trim();
|
||||
if (username) {
|
||||
window.location.href = `/quick_login/${encodeURIComponent(username)}`;
|
||||
} else {
|
||||
alert('Введите имя пользователя');
|
||||
}
|
||||
}
|
||||
|
||||
// Автозаполнение формы для теста
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Если это демо-версия, можно автозаполнить форму
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('demo') === '1') {
|
||||
document.getElementById('username').value = 'test_user';
|
||||
document.getElementById('password').value = 'test123';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
178
templates/register.html
Normal file
178
templates/register.html
Normal file
@@ -0,0 +1,178 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Регистрация - Капитал & Рынок{% endblock %}
|
||||
|
||||
{% block screen_content %}
|
||||
<div class="header">
|
||||
<a href="{{ url_for('login') }}" class="back-button">←</a>
|
||||
<div class="logo-container">
|
||||
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Капитал & Рынок" class="logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<h2>Создание аккаунта</h2>
|
||||
|
||||
<form method="POST" action="{{ url_for('register') }}" class="auth-form">
|
||||
<div class="input-group">
|
||||
<label for="username">Имя пользователя *</label>
|
||||
<input type="text" id="username" name="username"
|
||||
placeholder="Придумайте никнейм (мин. 3 символа)"
|
||||
value="{{ request.form.username if request.form }}"
|
||||
required autofocus>
|
||||
<small style="color: var(--light-text); font-size: 0.85rem;">
|
||||
Будет отображаться другим игрокам
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="email">Email *</label>
|
||||
<input type="email" id="email" name="email"
|
||||
placeholder="Ваш email"
|
||||
value="{{ request.form.email if request.form }}"
|
||||
required>
|
||||
<small style="color: var(--light-text); font-size: 0.85rem;">
|
||||
Только для восстановления пароля
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="password">Пароль *</label>
|
||||
<input type="password" id="password" name="password"
|
||||
placeholder="Придумайте пароль (мин. 4 символа)" required>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="password2">Повторите пароль *</label>
|
||||
<input type="password" id="password2" name="password2"
|
||||
placeholder="Повторите пароль" required>
|
||||
</div>
|
||||
|
||||
<div class="input-group mt-2">
|
||||
<div style="background-color: #f5f5f5; padding: 10px; border-radius: var(--border-radius);">
|
||||
<label style="display: flex; align-items: flex-start; gap: 10px; cursor: pointer;">
|
||||
<input type="checkbox" name="terms" required style="margin-top: 3px;">
|
||||
<span style="font-size: 0.9rem;">
|
||||
Я согласен с <a href="#" onclick="showTerms()">правилами игры</a> и
|
||||
<a href="#" onclick="showPrivacy()">политикой конфиденциальности</a>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button success mt-3">Зарегистрироваться</button>
|
||||
|
||||
<div class="auth-links">
|
||||
<a href="{{ url_for('login') }}">Уже есть аккаунт? Войти</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Почему стоит зарегистрироваться?</h3>
|
||||
<ul style="padding-left: 20px; margin-top: 10px;">
|
||||
<li style="margin-bottom: 8px;">🎮 Сохраняйте прогресс в играх</li>
|
||||
<li style="margin-bottom: 8px;">📊 Отслеживайте статистику и рейтинг</li>
|
||||
<li style="margin-bottom: 8px;">👥 Создавайте приватные комнаты</li>
|
||||
<li style="margin-bottom: 8px;">🏆 Участвуйте в турнирах и соревнованиях</li>
|
||||
<li>💬 Общайтесь с другими игроками</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальные окна с правилами -->
|
||||
<div id="terms-modal" class="modal-backdrop">
|
||||
<div class="modal" style="max-width: 600px;">
|
||||
<h3>Правила игры "Капитал & Рынок"</h3>
|
||||
<div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
|
||||
<h4>1. Основные правила</h4>
|
||||
<p>Игра проходит в реальном времени, каждый месяц длится 2-5 минут.</p>
|
||||
|
||||
<h4>2. Поведение игроков</h4>
|
||||
<p>Запрещены оскорбления, нецензурная лексика, мошенничество.</p>
|
||||
|
||||
<h4>3. Использование способностей</h4>
|
||||
<p>Способности можно использовать согласно их описанию и ограничениям.</p>
|
||||
|
||||
<h4>4. Определение победителя</h4>
|
||||
<p>Победителем становится игрок с наибольшим капиталом после 12 месяцев.</p>
|
||||
|
||||
<h4>5. Дисквалификация</h4>
|
||||
<p>Администратор может дисквалифицировать игрока за нарушение правил.</p>
|
||||
</div>
|
||||
<button onclick="hideTerms()" class="button mt-3">Понятно</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="privacy-modal" class="modal-backdrop">
|
||||
<div class="modal" style="max-width: 600px;">
|
||||
<h3>Политика конфиденциальности</h3>
|
||||
<div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
|
||||
<h4>1. Собираемые данные</h4>
|
||||
<p>Мы собираем только необходимые данные: имя пользователя, email (опционально), статистику игр.</p>
|
||||
|
||||
<h4>2. Использование данных</h4>
|
||||
<p>Данные используются только для работы игры: идентификации, статистики, рейтингов.</p>
|
||||
|
||||
<h4>3. Безопасность</h4>
|
||||
<p>Пароли хранятся в зашифрованном виде. Мы не передаем ваши данные третьим лицам.</p>
|
||||
|
||||
<h4>4. Cookies</h4>
|
||||
<p>Используем только технические cookies для работы сессий.</p>
|
||||
</div>
|
||||
<button onclick="hidePrivacy()" class="button mt-3">Понятно</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function showTerms() {
|
||||
event.preventDefault();
|
||||
document.getElementById('terms-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function hideTerms() {
|
||||
document.getElementById('terms-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
function showPrivacy() {
|
||||
event.preventDefault();
|
||||
document.getElementById('privacy-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function hidePrivacy() {
|
||||
document.getElementById('privacy-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
// Валидация формы
|
||||
document.querySelector('form').addEventListener('submit', function(e) {
|
||||
const password = document.getElementById('password').value;
|
||||
const password2 = document.getElementById('password2').value;
|
||||
const terms = document.querySelector('input[name="terms"]');
|
||||
|
||||
if (password !== password2) {
|
||||
e.preventDefault();
|
||||
alert('Пароли не совпадают!');
|
||||
document.getElementById('password2').focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (password.length < 4) {
|
||||
e.preventDefault();
|
||||
alert('Пароль должен быть не менее 4 символов!');
|
||||
document.getElementById('password').focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!terms.checked) {
|
||||
e.preventDefault();
|
||||
alert('Необходимо согласиться с правилами игры!');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
568
templates/rooms.html
Normal file
568
templates/rooms.html
Normal file
@@ -0,0 +1,568 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Комнаты - Капитал & Рынок{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="screen active">
|
||||
<!-- Шапка -->
|
||||
<div class="header">
|
||||
<a href="{{ url_for('index') }}" class="back-button">←</a>
|
||||
<div class="logo-container">
|
||||
<span class="logo-text" style="color: white; font-weight: bold; font-size: 1.2rem;">
|
||||
💰 Комнаты
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-left: auto;">
|
||||
<span style="font-size: 0.9rem;">
|
||||
{% if current_user.is_authenticated %}
|
||||
{{ current_user.username }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<div class="container">
|
||||
<!-- Поиск и создание комнаты -->
|
||||
<div class="search-bar">
|
||||
<input type="text" id="room-search" placeholder="Поиск комнат по названию..."
|
||||
onkeyup="searchRooms()">
|
||||
<button onclick="searchRooms()">🔍</button>
|
||||
</div>
|
||||
|
||||
<button class="button" onclick="createRoom()" style="margin-bottom: 20px;">
|
||||
＋ Создать новую комнату
|
||||
</button>
|
||||
|
||||
<!-- Доступные комнаты -->
|
||||
<div class="card">
|
||||
<h3>📢 Доступные комнаты</h3>
|
||||
<div style="margin: 10px 0; color: var(--light-text); font-size: 0.9rem;">
|
||||
{% if rooms %}
|
||||
Найдено {{ rooms|length }} комнат
|
||||
{% else %}
|
||||
Нет доступных комнат
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<ul class="room-list" id="room-list">
|
||||
{% if rooms %}
|
||||
{% for room in rooms %}
|
||||
<li class="room-item" onclick="joinRoom('{{ room.code }}')">
|
||||
<div class="room-info">
|
||||
<div class="room-avatar"
|
||||
style="background-color: {% if room.status == 'waiting' %}#4caf50{% elif room.status == 'playing' %}#ff9800{% else %}#9e9e9e{% endif %};">
|
||||
{{ room.player_count }}
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<strong>{{ room.name }}</strong>
|
||||
<span style="font-size: 0.8rem; color: var(--light-text);">
|
||||
Месяц {{ room.current_month }}/{{ room.total_months }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="room-meta">
|
||||
Создатель: {{ room.creator.username if room.creator else 'Система' }} •
|
||||
Игроков: {{ room.player_count }}/{{ config.MAX_PLAYERS_PER_ROOM }}
|
||||
</div>
|
||||
{% if room.settings %}
|
||||
<div style="margin-top: 3px;">
|
||||
{% set settings = room.settings|from_json %}
|
||||
{% if settings.allow_loans %}
|
||||
<span style="background-color: #e3f2fd; color: #1976d2; padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; margin-right: 5px;">Кредиты</span>
|
||||
{% endif %}
|
||||
{% if settings.allow_black_market %}
|
||||
<span style="background-color: #f3e5f5; color: #7b1fa2; padding: 2px 6px; border-radius: 10px; font-size: 0.75rem;">Чёрный рынок</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-status {{ room.status }}">
|
||||
{% if room.status == 'waiting' %}
|
||||
Ожидание
|
||||
{% elif room.status == 'playing' %}
|
||||
Игра идет
|
||||
{% elif room.status == 'full' %}
|
||||
Заполнена
|
||||
{% else %}
|
||||
{{ room.status }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li style="text-align: center; padding: 20px; color: var(--light-text);">
|
||||
<div style="font-size: 3rem; margin-bottom: 10px;">🏢</div>
|
||||
<p>Пока нет доступных комнат</p>
|
||||
<p style="font-size: 0.9rem;">Создайте первую комнату!</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Ваши комнаты -->
|
||||
<div class="card">
|
||||
<h3>⭐ Ваши комнаты</h3>
|
||||
{% if user_rooms %}
|
||||
<ul class="room-list" id="my-room-list">
|
||||
{% for room in user_rooms %}
|
||||
<li class="room-item" onclick="joinRoom('{{ room.code }}')">
|
||||
<div class="room-info">
|
||||
<div class="room-avatar" style="background-color: var(--primary-color);">
|
||||
{{ room.player_count }}
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<strong>{{ room.name }}</strong>
|
||||
{% if room.creator_id == current_user.id %}
|
||||
<span style="background-color: #fff3e0; color: #ef6c00; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem;">Админ</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="room-meta">
|
||||
Месяц {{ room.current_month }}/{{ room.total_months }} •
|
||||
Игроков: {{ room.player_count }}/{{ config.MAX_PLAYERS_PER_ROOM }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-status {{ room.status }}">
|
||||
{% if room.status == 'waiting' %}
|
||||
Ожидание
|
||||
{% elif room.status == 'playing' %}
|
||||
В игре
|
||||
{% else %}
|
||||
{{ room.status }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div style="text-align: center; padding: 20px; color: var(--light-text);">
|
||||
<div style="font-size: 3rem; margin-bottom: 10px;">👤</div>
|
||||
<p>Вы пока не участвуете в комнатах</p>
|
||||
<p style="font-size: 0.9rem;">Присоединитесь к существующей или создайте свою</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Быстрые действия -->
|
||||
<div class="card">
|
||||
<h3>⚡ Быстрые действия</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px;">
|
||||
<button class="button secondary" onclick="createQuickRoom('Быстрая игра')">
|
||||
Быстрая игра
|
||||
</button>
|
||||
<button class="button secondary" onclick="createQuickRoom('Для новичков')">
|
||||
Для новичков
|
||||
</button>
|
||||
<button class="button secondary" onclick="createQuickRoom('Турнир')">
|
||||
Турнир
|
||||
</button>
|
||||
<button class="button secondary" onclick="createQuickRoom('С друзьями')">
|
||||
С друзьями
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Статистика -->
|
||||
{% if current_user.is_authenticated %}
|
||||
<div class="card">
|
||||
<h3>📊 Ваша статистика</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px;">
|
||||
<div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
|
||||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">{{
|
||||
current_user.total_games }}
|
||||
</div>
|
||||
<div style="font-size: 0.9rem; color: var(--light-text);">Всего игр</div>
|
||||
</div>
|
||||
<div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
|
||||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">{{
|
||||
current_user.games_won }}
|
||||
</div>
|
||||
<div style="font-size: 0.9rem; color: var(--light-text);">Побед</div>
|
||||
</div>
|
||||
<div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
|
||||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">
|
||||
{% if current_user.total_games > 0 %}
|
||||
{{ "%.1f"|format(current_user.games_won / current_user.total_games * 100) }}%
|
||||
{% else %}
|
||||
0%
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="font-size: 0.9rem; color: var(--light-text);">Процент побед</div>
|
||||
</div>
|
||||
<div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
|
||||
<div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">
|
||||
{{ current_user.total_earnings|format_currency }}
|
||||
</div>
|
||||
<div style="font-size: 0.9rem; color: var(--light-text);">Заработано</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно создания комнаты -->
|
||||
<div id="create-room-modal" class="modal-backdrop">
|
||||
<div class="modal">
|
||||
<h3>Создание комнаты</h3>
|
||||
|
||||
<form id="create-room-form" onsubmit="return submitRoomForm(event)">
|
||||
<div class="input-group">
|
||||
<label for="room-name">Название комнаты *</label>
|
||||
<input type="text" id="room-name" name="name"
|
||||
placeholder="Например: Быки и медведи" required>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="total-months">Длительность игры</label>
|
||||
<select id="total-months" name="total_months">
|
||||
<option value="6">6 месяцев (быстрая игра)</option>
|
||||
<option value="12" selected>12 месяцев (стандартная)</option>
|
||||
<option value="18">18 месяцев (продвинутая)</option>
|
||||
<option value="24">24 месяца (экспертная)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="start-capital">Стартовый капитал</label>
|
||||
<input type="number" id="start-capital" name="start_capital"
|
||||
value="100000" min="50000" max="1000000" step="10000">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label style="display: flex; align-items: center; gap: 10px;">
|
||||
<input type="checkbox" id="allow-loans" name="allow_loans" checked>
|
||||
<span>Разрешить кредиты</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label style="display: flex; align-items: center; gap: 10px;">
|
||||
<input type="checkbox" id="allow-black-market" name="allow_black_market">
|
||||
<span>Разрешить чёрный рынок</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label style="display: flex; align-items: center; gap: 10px;">
|
||||
<input type="checkbox" id="private-room" name="private_room">
|
||||
<span>Приватная комната (по приглашению)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-4">
|
||||
<button type="submit" class="button success">Создать комнату</button>
|
||||
<button type="button" onclick="hideCreateRoomModal()" class="button secondary">Отмена</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Глобальные переменные
|
||||
let allRooms = [];
|
||||
|
||||
// Инициализация при загрузке
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Rooms page loaded');
|
||||
|
||||
// Сохраняем все комнаты для поиска
|
||||
const roomItems = document.querySelectorAll('.room-item');
|
||||
allRooms = Array.from(roomItems).map(item => ({
|
||||
name: item.querySelector('strong')?.textContent.toLowerCase() || '',
|
||||
element: item
|
||||
}));
|
||||
|
||||
// Подключение к комнате через WebSocket
|
||||
if (typeof socket !== 'undefined') {
|
||||
console.log('Socket connected, joining global room');
|
||||
socket.emit('join_global_room');
|
||||
}
|
||||
});
|
||||
|
||||
// Поиск комнат
|
||||
function searchRooms() {
|
||||
const searchTerm = document.getElementById('room-search').value.toLowerCase();
|
||||
const roomList = document.getElementById('room-list');
|
||||
|
||||
if (!roomList) return;
|
||||
|
||||
const rooms = roomList.querySelectorAll('.room-item');
|
||||
rooms.forEach(room => {
|
||||
const roomName = room.querySelector('strong')?.textContent.toLowerCase() || '';
|
||||
if (roomName.includes(searchTerm) || searchTerm === '') {
|
||||
room.style.display = 'flex';
|
||||
} else {
|
||||
room.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Создание комнаты
|
||||
function createRoom() {
|
||||
console.log('Opening create room modal');
|
||||
const modal = document.getElementById('create-room-modal');
|
||||
if (modal) {
|
||||
modal.classList.add('active');
|
||||
document.getElementById('room-name').focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Быстрое создание комнаты
|
||||
function createQuickRoom(name) {
|
||||
console.log('Creating quick room:', name);
|
||||
|
||||
// Создаем форму данных
|
||||
const formData = new FormData();
|
||||
formData.append('name', name);
|
||||
formData.append('total_months', '12');
|
||||
formData.append('start_capital', '100000');
|
||||
formData.append('allow_loans', 'on');
|
||||
formData.append('allow_black_market', 'off');
|
||||
formData.append('private_room', 'off');
|
||||
|
||||
// Отправляем запрос
|
||||
createRoomRequest(formData);
|
||||
}
|
||||
|
||||
// Отправка формы создания комнаты
|
||||
function submitRoomForm(event) {
|
||||
console.log('Submitting room form');
|
||||
event.preventDefault();
|
||||
|
||||
const form = document.getElementById('create-room-form');
|
||||
const formData = new FormData(form);
|
||||
|
||||
createRoomRequest(formData);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Функция для отправки запроса на создание комнаты
|
||||
function createRoomRequest(formData) {
|
||||
console.log('Sending create room request');
|
||||
|
||||
fetch('/room/create', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
console.log('Response status:', response.status);
|
||||
console.log('Response headers:', response.headers.get('content-type'));
|
||||
|
||||
// Проверяем тип ответа
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
return response.json();
|
||||
} else {
|
||||
return response.text().then(text => {
|
||||
console.error('Expected JSON, got:', text.substring(0, 200));
|
||||
throw new Error('Server returned HTML instead of JSON');
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Create room response:', data);
|
||||
|
||||
if (data.error) {
|
||||
alert('Ошибка: ' + data.error);
|
||||
} else if (data.redirect) {
|
||||
// Редирект в лобби комнаты
|
||||
window.location.href = data.redirect;
|
||||
} else if (data.success) {
|
||||
// Редирект по коду комнаты
|
||||
window.location.href = `/room/${data.room_code}`;
|
||||
} else {
|
||||
alert('Неизвестный ответ от сервера');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error creating room:', error);
|
||||
alert('Ошибка при создании комнаты. Проверьте консоль для деталей.');
|
||||
});
|
||||
}
|
||||
|
||||
// Скрыть модальное окно
|
||||
function hideCreateRoomModal() {
|
||||
const modal = document.getElementById('create-room-modal');
|
||||
if (modal) {
|
||||
modal.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Присоединение к комнате
|
||||
function joinRoom(roomCode) {
|
||||
console.log('Joining room:', roomCode);
|
||||
window.location.href = `/room/${roomCode}`;
|
||||
}
|
||||
|
||||
// Обновление статуса онлайн
|
||||
function updateOnlineStatus() {
|
||||
if (typeof socket !== 'undefined' && socket.connected) {
|
||||
socket.emit('user_online', {
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Периодическое обновление статуса
|
||||
setInterval(updateOnlineStatus, 30000);
|
||||
updateOnlineStatus();
|
||||
|
||||
// Обработка клавиши Escape для закрытия модального окна
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
hideCreateRoomModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Закрытие модального окна при клике на фон
|
||||
document.addEventListener('click', function(event) {
|
||||
const modal = document.getElementById('create-room-modal');
|
||||
if (modal && modal.classList.contains('active') && event.target === modal) {
|
||||
hideCreateRoomModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Дополнительные стили для rooms.html */
|
||||
.room-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: var(--border-radius);
|
||||
margin: 5px 0;
|
||||
padding: 12px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.room-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
border-color: var(--primary-color);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.room-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.room-status {
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.room-status.waiting {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.room-status.playing {
|
||||
background-color: #fff3e0;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
.room-status.full {
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
padding: 0 20px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.search-bar button:hover {
|
||||
background-color: #0077b3;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-backdrop.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.room-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.room-status {
|
||||
align-self: flex-end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user