remove participants list, fix mobile responsive
This commit is contained in:
parent
24ac1dca36
commit
f2b2bf30ac
167
index.html
167
index.html
@ -41,30 +41,7 @@
|
||||
color: var(--kt-ai-fg-muted);
|
||||
margin-top: var(--kt-ai-space-2);
|
||||
}
|
||||
.registrations-list {
|
||||
margin-top: var(--kt-ai-space-8);
|
||||
}
|
||||
.reg-item {
|
||||
background: var(--kt-ai-card-bg);
|
||||
border: 1px solid var(--kt-ai-card-border);
|
||||
border-radius: var(--kt-ai-radius-xl);
|
||||
padding: var(--kt-ai-space-5);
|
||||
margin-bottom: var(--kt-ai-space-4);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--kt-ai-space-3);
|
||||
align-items: center;
|
||||
}
|
||||
.reg-name {
|
||||
font-weight: var(--kt-ai-font-semibold);
|
||||
}
|
||||
.reg-meta {
|
||||
color: var(--kt-ai-fg-muted);
|
||||
font-size: var(--kt-ai-text-sm);
|
||||
}
|
||||
.track-badge {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: var(--kt-ai-bg-soft);
|
||||
border: 2px solid var(--kt-ai-primary);
|
||||
@ -73,17 +50,34 @@
|
||||
text-align: center;
|
||||
margin-top: var(--kt-ai-space-8);
|
||||
}
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--kt-ai-space-12);
|
||||
color: var(--kt-ai-fg-muted);
|
||||
}
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: var(--kt-ai-space-4);
|
||||
margin-bottom: var(--kt-ai-space-6);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@media (max-width: 768px) {
|
||||
.kt-ai-wrap {
|
||||
padding-left: var(--kt-ai-space-4);
|
||||
padding-right: var(--kt-ai-space-4);
|
||||
}
|
||||
.hero-gradient {
|
||||
padding: var(--kt-ai-space-6);
|
||||
}
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--kt-ai-space-4);
|
||||
}
|
||||
.kt-ai-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
.kt-ai-hero-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.kt-ai-hero-actions .kt-ai-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.kt-ai-pagehead-in {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.kt-ai-pagehead-in .kt-ai-btn {
|
||||
margin-left: var(--kt-ai-space-2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -311,48 +305,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="participants" class="kt-ai-section" data-divider="true">
|
||||
<div class="kt-ai-wrap" style="max-width:900px">
|
||||
<div class="kt-ai-section-head">
|
||||
<h2>Зарегистрированные участники</h2>
|
||||
<p>Посмотри, кто уже присоединился к хакатону</p>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<select id="filter-track" class="kt-ai-select" data-size="sm">
|
||||
<option value="all">Все направления</option>
|
||||
<option value="AI / Machine Learning">AI / Machine Learning</option>
|
||||
<option value="IoT & Smart Devices">IoT & Smart Devices</option>
|
||||
<option value="Cybersecurity">Cybersecurity</option>
|
||||
<option value="Big Data & Analytics">Big Data & Analytics</option>
|
||||
<option value="Cloud & DevOps">Cloud & DevOps</option>
|
||||
<option value="Telecom Solutions">Telecom Solutions</option>
|
||||
</select>
|
||||
<select id="filter-experience" class="kt-ai-select" data-size="sm">
|
||||
<option value="all">Весь опыт</option>
|
||||
<option value="Junior (до 1 года)">Junior</option>
|
||||
<option value="Middle (1-3 года)">Middle</option>
|
||||
<option value="Senior (3+ лет)">Senior</option>
|
||||
<option value="Student">Студент</option>
|
||||
</select>
|
||||
<button id="clear-filters" class="kt-ai-btn" data-variant="ghost" data-size="sm">Сбросить фильтры</button>
|
||||
<span class="kt-ai-spacer"></span>
|
||||
<span id="count-display" class="kt-ai-chip">0 участников</span>
|
||||
</div>
|
||||
|
||||
<div id="registrations-list" class="registrations-list">
|
||||
<!-- Сюда JavaScript вставит список -->
|
||||
</div>
|
||||
|
||||
<div id="empty-state" class="empty-state" style="display:none">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-faint)" stroke-width="1.5" style="margin-bottom:var(--kt-ai-space-4)">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
<p>Пока нет участников с такими фильтрами</p>
|
||||
<p style="font-size:var(--kt-ai-text-sm);margin-top:var(--kt-ai-space-2)">Стань первым!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||||
<span>© 2026 Казахтелеком. КТ Опен Хакатон</span>
|
||||
@ -395,46 +348,7 @@ function saveRegistration(reg) {
|
||||
return regs;
|
||||
}
|
||||
|
||||
// === Рендеринг списка участников ===
|
||||
function renderRegistrations(filters = { track: 'all', experience: 'all' }) {
|
||||
const regs = getRegistrations();
|
||||
const container = document.getElementById('registrations-list');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const countDisplay = document.getElementById('count-display');
|
||||
|
||||
let filtered = regs.filter(r => {
|
||||
const trackMatch = filters.track === 'all' || r.track === filters.track;
|
||||
const expMatch = filters.experience === 'all' || r.experience === filters.experience;
|
||||
return trackMatch && expMatch;
|
||||
});
|
||||
|
||||
countDisplay.textContent = filtered.length + (filtered.length === 1 ? ' участник' : ' участников');
|
||||
|
||||
if (filtered.length === 0) {
|
||||
container.style.display = 'none';
|
||||
emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
container.style.display = 'block';
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
container.innerHTML = filtered.map(r => `
|
||||
<div class="reg-item">
|
||||
<div>
|
||||
<div class="reg-name">${escapeHtml(r.fullname)}</div>
|
||||
<div class="reg-meta">
|
||||
${r.team ? 'Команда: ' + escapeHtml(r.team) + ' • ' : ''}
|
||||
${r.experience || 'Опыт не указан'}
|
||||
</div>
|
||||
<div class="reg-meta" style="margin-top:var(--kt-ai-space-1)">
|
||||
Зарегистрирован: ${formatDate(r.registeredAt)}
|
||||
</div>
|
||||
</div>
|
||||
<span class="kt-ai-chip track-badge">${escapeHtml(r.track)}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
|
||||
// === Обновление статистики ===
|
||||
function updateStats() {
|
||||
@ -503,29 +417,10 @@ document.getElementById('new-registration').addEventListener('click', function()
|
||||
document.getElementById('registration-form').scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
|
||||
document.getElementById('filter-track').addEventListener('change', function() {
|
||||
renderRegistrations({
|
||||
track: this.value,
|
||||
experience: document.getElementById('filter-experience').value
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('filter-experience').addEventListener('change', function() {
|
||||
renderRegistrations({
|
||||
track: document.getElementById('filter-track').value,
|
||||
experience: this.value
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('clear-filters').addEventListener('click', function() {
|
||||
document.getElementById('filter-track').value = 'all';
|
||||
document.getElementById('filter-experience').value = 'all';
|
||||
renderRegistrations({ track: 'all', experience: 'all' });
|
||||
});
|
||||
|
||||
// === Запуск при загрузке ===
|
||||
updateStats();
|
||||
renderRegistrations();
|
||||
|
||||
// Плавный скролл для якорных ссылок
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user