sasheg/dodep-simulator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI redesign: CS2 gambling aesthetic, glassmorphism, responsive layout, enhanced sounds, admin panel overhaul

Browse Source
This commit is contained in:
root
2026-07-05 14:22:49 +00:00
parent 01c6573f5f
commit 4b0fc594b4
21 changed files with 2750 additions and 9203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/activity.html
+63 -185
View File
@@ -3,123 +3,33 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лента активностей - CS2 Simulator</title>
<title>Лента активностей — CS2 Simulator</title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
.activity-feed {
max-width: 700px;
margin: 0 auto;
}
.activity-item {
display: flex;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 10px;
margin-bottom: 0.5rem;
align-items: flex-start;
transition: all 0.3s;
animation: fadeInUp 0.3s ease;
}
.activity-item:hover {
border-color: var(--primary-color);
}
.activity-icon {
font-size: 1.2rem;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-dark);
border-radius: 8px;
flex-shrink: 0;
}
.activity-content {
flex: 1;
min-width: 0;
}
.activity-message {
font-size: 0.9rem;
line-height: 1.4;
}
.activity-meta {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.activity-username {
color: var(--primary-color);
font-weight: 500;
}
.activity-empty {
text-align: center;
padding: 3rem;
color: var(--text-secondary);
}
.activity-empty .big-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.activity-type-icon {
display: inline-block;
margin-right: 0.3rem;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.activity-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.live-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--success-color);
}
.live-dot {
width: 8px;
height: 8px;
background: var(--success-color);
border-radius: 50%;
animation: pulse 1.5s ease infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
</style>
</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 active">📰 Лента</a>
<a href="/achievements" class="nav-link">🏆 Достижения</a>
<a href="/activity" class="nav-link active">Лента</a>
<a href="/achievements" class="nav-link">Достижения</a>
<a href="/profile" class="nav-link">Профиль</a>
<span class="user-balance">{{ "%.0f"|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 active">📰 Лента</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 active">Лента</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 %}
@@ -127,46 +37,48 @@
</div>
</nav>
<main class="container" style="padding: 2rem 1rem;">
<div class="activity-header">
<div>
<h1>📰 Лента активностей</h1>
<p class="page-subtitle">Что происходит на сервере</p>
</div>
<div class="live-indicator" id="liveIndicator">
<span class="live-dot"></span>
<span>Live</span>
</div>
</div>
<div class="activity-feed" id="activityFeed">
{% if activities %}
{% for a in activities %}
<div class="activity-item" data-activity-id="{{ a.id }}">
<div class="activity-icon">
{% if a.activity_type == 'case_open' %}📦
{% elif a.activity_type == 'contract' %}🔄
{% elif a.activity_type == 'upgrade' %}🆙
{% elif a.activity_type == 'achievement' %}🏆
{% elif a.activity_type == 'crash' %}💥
{% else %}📌{% endif %}
<main class="section">
<div class="container" style="max-width:700px;">
<div class="section-header">
<div>
<h1 class="section-title">📰 Лента активностей</h1>
<p class="section-subtitle">Что происходит на сервере</p>
</div>
<div class="activity-content">
<div class="activity-message">{{ a.message }}</div>
<div class="activity-meta">
<a href="/profiles/{{ a.user_id }}" class="activity-username" style="text-decoration:none;">{{ a.username }}</a>
<span>• {{ a.created_at }}</span>
<div class="flex gap-2 items-center" style="color:var(--success);font-size:0.85rem;">
<span style="width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.5s ease infinite;"></span>
Live
</div>
</div>
<div style="display:flex;flex-direction:column;gap:0.5rem;" id="activityFeed">
{% if activities %}
{% for a in activities %}
<div class="card" style="display:flex;gap:0.75rem;align-items:flex-start;animation:slideInUp 0.3s ease;" data-activity-id="{{ a.id }}">
<div style="font-size:1.1rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);border-radius:var(--radius-sm);flex-shrink:0;">
{% if a.activity_type == 'case_open' %}📦
{% elif a.activity_type == 'contract' %}🔄
{% elif a.activity_type == 'upgrade' %}🆙
{% elif a.activity_type == 'achievement' %}🏆
{% elif a.activity_type == 'crash' %}💥
{% else %}📌{% endif %}
</div>
<div style="flex:1;min-width:0;">
<div class="text-sm">{{ a.message }}</div>
<div class="text-xs text-dim" style="margin-top:0.2rem;">
<a href="/profiles/{{ a.user_id }}" style="color:var(--primary);text-decoration:none;">{{ a.username }}</a>
<span>• {{ a.created_at }}</span>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div style="text-align:center;padding:3rem 1rem;color:var(--text-dim);">
<div style="font-size:2.5rem;margin-bottom:0.75rem;opacity:0.5;">📭</div>
<h3 style="font-family:var(--font-display);font-size:1.1rem;color:var(--text);">Пока нет активностей</h3>
<p style="font-size:0.9rem;">Открой кейс или выполни контракт — это появится здесь в реальном времени!</p>
</div>
{% endif %}
</div>
{% endfor %}
{% else %}
<div class="activity-empty">
<div class="big-icon">📭</div>
<h3>Пока нет активностей</h3>
<p>Открой кейс или выполни контракт — это появится здесь в реальном времени!</p>
</div>
{% endif %}
</div>
</main>
@@ -175,71 +87,37 @@
<script src="/static/js/safemode.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Подключаемся к WS и слушаем новые активности
WS.on('activity', (data) => {
const act = data.activity;
if (!act) return;
const feed = document.getElementById('activityFeed');
// Убираем empty state если есть
const empty = feed.querySelector('.activity-empty');
const empty = feed.querySelector('div[style*="text-align:center"]');
if (empty) empty.remove();
const iconMap = {
'case_open': '📦',
'contract': '🔄',
'upgrade': '🆙',
'achievement': '🏆',
'crash': '💥'
};
const iconMap = { 'case_open': '📦', 'contract': '🔄', 'upgrade': '🆙', 'achievement': '🏆', 'crash': '💥' };
const item = document.createElement('div');
item.className = 'activity-item';
item.style.animation = 'none';
item.offsetHeight;
item.style.animation = 'fadeInUp 0.3s ease';
item.className = 'card';
item.style.cssText = 'display:flex;gap:0.75rem;align-items:flex-start;animation:slideInUp 0.3s ease;';
item.innerHTML = `
<div class="activity-icon">${iconMap[act.activity_type] || '📌'}</div>
<div class="activity-content">
<div class="activity-message">${act.message}</div>
<div class="activity-meta">
<a href="/profiles/${act.user_id || 0}" class="activity-username" style="text-decoration:none;">${escapeHtml(act.username)}</a>
<div style="font-size:1.1rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);border-radius:var(--radius-sm);flex-shrink:0;">${iconMap[act.activity_type] || '📌'}</div>
<div style="flex:1;min-width:0;">
<div class="text-sm">${escapeHtml(act.message)}</div>
<div class="text-xs text-dim" style="margin-top:0.2rem;">
<a href="/profiles/${act.user_id || 0}" style="color:var(--primary);text-decoration:none;">${escapeHtml(act.username)}</a>
<span>• только что</span>
</div>
</div>
`;
feed.insertBefore(item, feed.firstChild);
// Ограничиваем до 100 элементов
while (feed.children.length > 100) {
feed.removeChild(feed.lastChild);
}
// Звук для новых активностей
if (act.activity_type === 'achievement') {
SoundManager.achievement();
} else if (act.activity_type === 'crash') {
SoundManager.crashCashout();
}
while (feed.children.length > 100) feed.removeChild(feed.lastChild);
if (act.activity_type === 'achievement') SoundManager.achievement();
});
});
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>
{% include '_activity_sidebar.html' %}
</body>
</html>