UI redesign: CS2 gambling aesthetic, glassmorphism, responsive layout, enhanced sounds, admin panel overhaul
This commit is contained in:
root
+56
-74
@@ -3,33 +3,33 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% if is_public %}Профиль {{ profile_user.username }}{% else %}Профиль{% endif %} - CS2 Simulator</title>
|
||||
<title>{% if is_public %}Профиль {{ profile_user.username }}{% else %}Профиль{% endif %} — CS2 Simulator</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">🎮 CS2 Simulator</a>
|
||||
<div class="nav-links">
|
||||
<a href="/" class="logo">CS2 <span>Simulator</span></a>
|
||||
<button class="mobile-toggle" id="mobileToggle">☰</button>
|
||||
<div class="nav-links" id="navLinks">
|
||||
{% if user %}
|
||||
<a href="/cases" class="nav-link">Кейсы</a>
|
||||
<a href="/contracts" class="nav-link">Контракты</a>
|
||||
<a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
|
||||
<a href="/crash" class="nav-link">💥 Crash</a>
|
||||
<a href="/upgrade" class="nav-link">Апгрейд</a>
|
||||
<a href="/crash" class="nav-link">Crash</a>
|
||||
<a href="/inventory" class="nav-link">Инвентарь</a>
|
||||
<a href="/activity" class="nav-link">📰 Лента</a>
|
||||
<a href="/achievements" class="nav-link">🏆 Достижения</a>
|
||||
<a href="/profile" class="nav-link">Профиль</a>
|
||||
<a href="/activity" class="nav-link">Лента</a>
|
||||
<a href="/achievements" class="nav-link">Достижения</a>
|
||||
<a href="/profile" class="nav-link active">Профиль</a>
|
||||
<span class="user-balance">{{ "%.2f"|format(user.balance) }} ₽</span>
|
||||
<button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
|
||||
<button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
|
||||
<button onclick="logout()" class="btn btn-outline">Выйти</button>
|
||||
<button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
|
||||
<button onclick="logout()" class="btn btn-ghost">Выйти</button>
|
||||
{% else %}
|
||||
<a href="/cases" class="nav-link">Кейсы</a>
|
||||
<a href="/contracts" class="nav-link">Контракты</a>
|
||||
<a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
|
||||
<a href="/activity" class="nav-link">📰 Лента</a>
|
||||
<button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
|
||||
<a href="/upgrade" class="nav-link">Апгрейд</a>
|
||||
<a href="/activity" class="nav-link">Лента</a>
|
||||
<button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
|
||||
<a href="/login" class="btn btn-outline">Войти</a>
|
||||
<a href="/register" class="btn btn-primary">Регистрация</a>
|
||||
{% endif %}
|
||||
@@ -37,25 +37,23 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="profile-container">
|
||||
<main class="section">
|
||||
<div class="container">
|
||||
<div class="profile-header">
|
||||
{% if is_public %}
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.5rem;">
|
||||
<span style="background:var(--bg-card);padding:0.25rem 0.75rem;border-radius:20px;font-size:0.75rem;color:var(--text-secondary);border:1px solid var(--border-color);">👤 Публичный профиль</span>
|
||||
<div class="section-header">
|
||||
<div>
|
||||
<h1 class="section-title">{% if is_public %}👤 {{ profile_user.username }}{% else %}👤 {{ user.username }}{% endif %}</h1>
|
||||
{% if is_public %}
|
||||
<p class="section-subtitle">Зарегистрирован {{ profile_user.created_at.strftime('%d.%m.%Y') }}</p>
|
||||
{% else %}
|
||||
<p class="section-subtitle">Добро пожаловать в ваш профиль</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h1>👤 {{ profile_user.username }}</h1>
|
||||
<p class="profile-subtitle">Зарегистрирован {{ profile_user.created_at.strftime('%d.%m.%Y') }}</p>
|
||||
{% else %}
|
||||
<h1>👤 {{ user.username }}</h1>
|
||||
<p class="profile-subtitle">Добро пожаловать в ваш профиль</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ total_items }}</div>
|
||||
<div class="stat-label">Предметов в инвентаре</div>
|
||||
<div class="stat-label">Предметов</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ cases_opened }}</div>
|
||||
@@ -63,7 +61,7 @@
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ contracts_completed }}</div>
|
||||
<div class="stat-label">Выполнено контрактов</div>
|
||||
<div class="stat-label">Контрактов</div>
|
||||
</div>
|
||||
{% if not is_public %}
|
||||
<div class="stat-card">
|
||||
@@ -72,56 +70,56 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="profile-sections">
|
||||
|
||||
<div style="margin-top:2rem;display:grid;gap:1.5rem;">
|
||||
<div class="section">
|
||||
<h2>🏆 Ценные предметы</h2>
|
||||
<div class="items-grid">
|
||||
<h2 class="display-font" style="font-size:1rem;margin-bottom:0.75rem;">🏆 Ценные предметы</h2>
|
||||
<div class="grid grid-auto-sm">
|
||||
{% set target_items = valuable_items %}
|
||||
{% for item in target_items %}
|
||||
<div class="item-card rarity-{{ item.rarity|lower|replace(' ', '-') }}">
|
||||
<div class="item-name">{{ item.market_hash_name }}</div>
|
||||
<div class="item-details">
|
||||
<span class="item-rarity">{{ item.rarity }}</span>
|
||||
<span class="item-float">Float: {{ "%.4f"|format(item.float_value) }}</span>
|
||||
<div class="card" style="text-align:center;padding:0.75rem;">
|
||||
<div class="display-font text-sm">{{ item.market_hash_name }}</div>
|
||||
<div class="text-xs text-dim">
|
||||
<span>{{ item.rarity }}</span>
|
||||
<span>Float: {{ "%.4f"|format(item.float_value) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">У {% if is_public %}этого пользователя{% else %}вас{% endif %} пока нет предметов.</p>
|
||||
<p class="text-dim text-sm">У {% if is_public %}этого пользователя{% else %}вас{% endif %} пока нет предметов.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<h2>📦 Последние открытия</h2>
|
||||
<div class="history-list">
|
||||
<h2 class="display-font" style="font-size:1rem;margin-bottom:0.75rem;">📦 Последние открытия</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:0.35rem;">
|
||||
{% for opening in recent_openings %}
|
||||
<div class="history-item">
|
||||
<div class="history-icon">📦</div>
|
||||
<div class="history-content">
|
||||
<div class="history-title">{{ opening.item_name }}</div>
|
||||
<div class="history-meta">
|
||||
<span class="rarity-{{ opening.rarity|lower|replace(' ', '-') }}">{{ opening.rarity }}</span>
|
||||
<div class="card" style="padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem;">
|
||||
<span style="font-size:1.2rem;">📦</span>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="text-sm truncate">{{ opening.item_name }}</div>
|
||||
<div class="text-xs text-dim">
|
||||
<span>{{ opening.rarity }}</span>
|
||||
<span>Float: {{ "%.4f"|format(opening.float_value) }}</span>
|
||||
<span>{{ opening.opened_at.strftime('%d.%m.%Y %H:%M') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">Пока нет открытий</p>
|
||||
<p class="text-dim text-sm">Пока нет открытий</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<h2>🔄 Последние контракты</h2>
|
||||
<div class="history-list">
|
||||
<h2 class="display-font" style="font-size:1rem;margin-bottom:0.75rem;">🔄 Последние контракты</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:0.35rem;">
|
||||
{% for contract in recent_contracts %}
|
||||
<div class="history-item">
|
||||
<div class="history-icon">🔄</div>
|
||||
<div class="history-content">
|
||||
<div class="history-title">{{ contract.output_item_name }}</div>
|
||||
<div class="history-meta">
|
||||
<div class="card" style="padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem;">
|
||||
<span style="font-size:1.2rem;">🔄</span>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="text-sm truncate">{{ contract.output_item_name }}</div>
|
||||
<div class="text-xs text-dim">
|
||||
<span>Float: {{ "%.4f"|format(contract.output_float) }}</span>
|
||||
<span>Шанс: {{ "%.2f"|format(contract.probability) }}%</span>
|
||||
<span>{{ contract.created_at.strftime('%d.%m.%Y %H:%M') }}</span>
|
||||
@@ -129,7 +127,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">Пока нет контрактов</p>
|
||||
<p class="text-dim text-sm">Пока нет контрактов</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,23 +135,7 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
async function logout() {
|
||||
await fetch('/web/api/auth/logout', { method: 'POST' });
|
||||
window.location.href = '/';
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function toggleSound() {
|
||||
const enabled = SoundManager.toggle();
|
||||
document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const btn = document.getElementById('soundToggle');
|
||||
if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/safemode.js"></script>
|
||||
{% if user and not is_public %}{% include '_activity_sidebar.html' %}{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user