remove participants list, add prize/streams stats
This commit is contained in:
parent
8889e5730e
commit
78be3fc67f
146
index.html
146
index.html
@ -24,42 +24,6 @@
|
|||||||
padding: var(--kt-ai-space-10);
|
padding: var(--kt-ai-space-10);
|
||||||
max-width: 520px;
|
max-width: 520px;
|
||||||
}
|
}
|
||||||
.participants-list {
|
|
||||||
display: grid;
|
|
||||||
gap: var(--kt-ai-space-4);
|
|
||||||
}
|
|
||||||
.participant-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);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--kt-ai-space-4);
|
|
||||||
}
|
|
||||||
.participant-avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: var(--kt-ai-radius-full);
|
|
||||||
background: var(--kt-ai-primary);
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: var(--kt-ai-weight-semibold);
|
|
||||||
font-size: var(--kt-ai-text-lg);
|
|
||||||
}
|
|
||||||
.participant-info {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.participant-name {
|
|
||||||
font-weight: var(--kt-ai-weight-semibold);
|
|
||||||
color: var(--kt-ai-fg);
|
|
||||||
}
|
|
||||||
.participant-meta {
|
|
||||||
font-size: var(--kt-ai-text-sm);
|
|
||||||
color: var(--kt-ai-fg-muted);
|
|
||||||
}
|
|
||||||
.stats-strip {
|
.stats-strip {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--kt-ai-space-6);
|
gap: var(--kt-ai-space-6);
|
||||||
@ -145,25 +109,25 @@
|
|||||||
<section class="kt-ai-section" data-divider="true">
|
<section class="kt-ai-section" data-divider="true">
|
||||||
<div class="kt-ai-wrap">
|
<div class="kt-ai-wrap">
|
||||||
<div class="kt-ai-section-head">
|
<div class="kt-ai-section-head">
|
||||||
<h2>Статистика регистрации</h2>
|
<h2>О хакатоне в цифрах</h2>
|
||||||
<p>Актуальные данные о количестве участников</p>
|
<p>Масштабное событие для IT-сообщества</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="stats-strip">
|
<div class="stats-strip">
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-value" id="totalParticipants">0</div>
|
<div class="stat-value" style="color:var(--kt-ai-chart-green)">$10K</div>
|
||||||
<div class="stat-label">Зарегистрировано</div>
|
<div class="stat-label">Призовой фонд</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-value" id="todayCount">0</div>
|
<div class="stat-value" style="color:var(--kt-ai-primary)">10K+</div>
|
||||||
<div class="stat-label">За сегодня</div>
|
<div class="stat-label">Участников</div>
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-value" style="color:var(--kt-ai-chart-green)">48</div>
|
|
||||||
<div class="stat-label">Часов на хакатон</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-value" style="color:var(--kt-ai-chart-orange)">20</div>
|
<div class="stat-value" style="color:var(--kt-ai-chart-orange)">20</div>
|
||||||
<div class="stat-label">Команд нужно</div>
|
<div class="stat-label">Потоков e-кейсов</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value" style="color:var(--kt-ai-chart-pink)">48</div>
|
||||||
|
<div class="stat-label">Часов на хакатон</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -235,21 +199,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="participants" class="kt-ai-section" data-divider="true">
|
|
||||||
<div class="kt-ai-wrap">
|
|
||||||
<div class="kt-ai-section-head">
|
|
||||||
<h2>Зарегистрированные участники</h2>
|
|
||||||
<p>Посмотрите, кто уже присоединился к хакатону</p>
|
|
||||||
</div>
|
|
||||||
<div id="participantsList" class="participants-list" style="margin-top:var(--kt-ai-space-9)">
|
|
||||||
</div>
|
|
||||||
<div id="emptyState" class="kt-ai-empty" style="display:none;margin-top:var(--kt-ai-space-8)">
|
|
||||||
<div style="font-size:48px;margin-bottom:var(--kt-ai-space-4)">📝</div>
|
|
||||||
<h3>Пока нет участников</h3>
|
|
||||||
<p style="color:var(--kt-ai-fg-muted)">Будьте первым, кто зарегистрируется!</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||||||
<span>© 2026 Hackathon Open — Казахтелеком</span>
|
<span>© 2026 Hackathon Open — Казахтелеком</span>
|
||||||
@ -259,67 +209,6 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const DEMO_DATA = [
|
|
||||||
{ firstName: "Алишер", lastName: "Нурсултанов", phone: "+7 (777) 123-45-67", telegram: "@alisher_ns", registeredAt: new Date(Date.now() - 86400000 * 2).toISOString() },
|
|
||||||
{ firstName: "Динара", lastName: "Кенжегулова", phone: "+7 (701) 234-56-78", telegram: "@dinara_kz", registeredAt: new Date(Date.now() - 86400000).toISOString() },
|
|
||||||
{ firstName: "Максат", lastName: "Ибрагимов", phone: "+7 (778) 345-67-89", telegram: "@maxat_dev", registeredAt: new Date(Date.now() - 43200000).toISOString() },
|
|
||||||
{ firstName: "Сабина", lastName: "Ахметова", phone: "+7 (705) 456-78-90", telegram: "@sabi_akh", registeredAt: new Date(Date.now() - 21600000).toISOString() },
|
|
||||||
{ firstName: "Ержан", lastName: "Ассанов", phone: "+7 (776) 567-89-01", telegram: "@yerzhan_a", registeredAt: new Date(Date.now() - 7200000).toISOString() }
|
|
||||||
];
|
|
||||||
|
|
||||||
function getStoredParticipants() {
|
|
||||||
const stored = localStorage.getItem('hackathonParticipants');
|
|
||||||
if (stored) {
|
|
||||||
return JSON.parse(stored);
|
|
||||||
}
|
|
||||||
localStorage.setItem('hackathonParticipants', JSON.stringify(DEMO_DATA));
|
|
||||||
return DEMO_DATA;
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveParticipant(data) {
|
|
||||||
const participants = getStoredParticipants();
|
|
||||||
participants.push(data);
|
|
||||||
localStorage.setItem('hackathonParticipants', JSON.stringify(participants));
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateStats() {
|
|
||||||
const participants = getStoredParticipants();
|
|
||||||
const today = new Date().toDateString();
|
|
||||||
const todayCount = participants.filter(p => new Date(p.registeredAt).toDateString() === today).length;
|
|
||||||
document.getElementById('totalParticipants').textContent = participants.length;
|
|
||||||
document.getElementById('todayCount').textContent = todayCount;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderParticipants() {
|
|
||||||
const participants = getStoredParticipants();
|
|
||||||
const container = document.getElementById('participantsList');
|
|
||||||
const emptyState = document.getElementById('emptyState');
|
|
||||||
|
|
||||||
if (participants.length === 0) {
|
|
||||||
container.style.display = 'none';
|
|
||||||
emptyState.style.display = 'block';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.style.display = 'grid';
|
|
||||||
emptyState.style.display = 'none';
|
|
||||||
container.innerHTML = participants.map(p => {
|
|
||||||
const initials = (p.firstName[0] + p.lastName[0]).toUpperCase();
|
|
||||||
const time = new Date(p.registeredAt).toLocaleString('ru-RU', {
|
|
||||||
day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit'
|
|
||||||
});
|
|
||||||
return `
|
|
||||||
<div class="participant-item">
|
|
||||||
<div class="participant-avatar">${initials}</div>
|
|
||||||
<div class="participant-info">
|
|
||||||
<div class="participant-name">${p.firstName} ${p.lastName}</div>
|
|
||||||
<div class="participant-meta">${p.telegram} • ${time}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('registrationForm').addEventListener('submit', function(e) {
|
document.getElementById('registrationForm').addEventListener('submit', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
@ -339,17 +228,14 @@ document.getElementById('registrationForm').addEventListener('submit', function(
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
saveParticipant(formData);
|
const submissions = JSON.parse(localStorage.getItem('hackathonSubmissions') || '[]');
|
||||||
|
submissions.push(formData);
|
||||||
|
localStorage.setItem('hackathonSubmissions', JSON.stringify(submissions));
|
||||||
|
|
||||||
document.getElementById('registrationForm').reset();
|
document.getElementById('registrationForm').reset();
|
||||||
document.getElementById('registrationForm').style.display = 'none';
|
document.getElementById('registrationForm').style.display = 'none';
|
||||||
document.getElementById('successMessage').style.display = 'block';
|
document.getElementById('successMessage').style.display = 'block';
|
||||||
|
|
||||||
updateStats();
|
|
||||||
renderParticipants();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
updateStats();
|
|
||||||
renderParticipants();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user