972 lines
36 KiB
HTML
972 lines
36 KiB
HTML
{% load static %}
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🎉 Итоги {{ year }} года</title>
|
||
<link href="{% static 'bootstrap/bootstrap.min.css' %}" rel="stylesheet">
|
||
<link href="{% static 'bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
--gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
--gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||
--gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||
--gradient-6: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||
--dark-bg: #0d1117;
|
||
--card-bg: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Montserrat', sans-serif;
|
||
background: var(--dark-bg);
|
||
color: #fff;
|
||
overflow-x: hidden;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.particles {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.particle {
|
||
position: absolute;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 50%;
|
||
animation: float 15s infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
|
||
10% { opacity: 1; }
|
||
90% { opacity: 1; }
|
||
100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
|
||
}
|
||
|
||
.slide {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 40px 20px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.slide-intro { background: var(--gradient-1); }
|
||
.slide-points { background: var(--gradient-2); }
|
||
.slide-new { background: var(--gradient-3); }
|
||
.slide-satellites { background: var(--gradient-4); }
|
||
.slide-time { background: var(--gradient-5); }
|
||
.slide-summary { background: var(--gradient-1); }
|
||
|
||
.big-number {
|
||
font-size: clamp(4rem, 15vw, 12rem);
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
text-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
animation: popIn 0.8s ease-out forwards;
|
||
}
|
||
|
||
.big-text {
|
||
font-size: clamp(1.5rem, 4vw, 3rem);
|
||
font-weight: 700;
|
||
text-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
animation: slideUp 0.6s ease-out 0.3s forwards;
|
||
}
|
||
|
||
.sub-text {
|
||
font-size: clamp(1rem, 2vw, 1.5rem);
|
||
font-weight: 400;
|
||
opacity: 0.9;
|
||
margin-top: 10px;
|
||
opacity: 0;
|
||
animation: fadeIn 0.6s ease-out 0.5s forwards;
|
||
}
|
||
|
||
@keyframes popIn {
|
||
0% { opacity: 0; transform: scale(0.5); }
|
||
70% { transform: scale(1.1); }
|
||
100% { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
to { opacity: 0.9; }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.05); }
|
||
}
|
||
|
||
.stat-card {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 24px;
|
||
padding: 30px;
|
||
margin: 15px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
opacity: 0;
|
||
transform: translateY(50px);
|
||
animation: cardSlideUp 0.6s ease-out forwards;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-10px) scale(1.02);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
@keyframes cardSlideUp {
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.stat-card:nth-child(1) { animation-delay: 0.2s; }
|
||
.stat-card:nth-child(2) { animation-delay: 0.4s; }
|
||
.stat-card:nth-child(3) { animation-delay: 0.6s; }
|
||
.stat-card:nth-child(4) { animation-delay: 0.8s; }
|
||
|
||
.stat-value {
|
||
font-size: 3rem;
|
||
font-weight: 900;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 1rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.satellite-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
max-width: 1200px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.satellite-item {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 16px;
|
||
padding: 20px 30px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
animation: satelliteIn 0.5s ease-out forwards;
|
||
}
|
||
|
||
.satellite-item:hover {
|
||
transform: scale(1.1);
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
@keyframes satelliteIn {
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
.satellite-item:nth-child(1) { animation-delay: 0.1s; }
|
||
.satellite-item:nth-child(2) { animation-delay: 0.2s; }
|
||
.satellite-item:nth-child(3) { animation-delay: 0.3s; }
|
||
.satellite-item:nth-child(4) { animation-delay: 0.4s; }
|
||
.satellite-item:nth-child(5) { animation-delay: 0.5s; }
|
||
.satellite-item:nth-child(6) { animation-delay: 0.6s; }
|
||
.satellite-item:nth-child(7) { animation-delay: 0.7s; }
|
||
.satellite-item:nth-child(8) { animation-delay: 0.8s; }
|
||
.satellite-item:nth-child(9) { animation-delay: 0.9s; }
|
||
.satellite-item:nth-child(10) { animation-delay: 1.0s; }
|
||
|
||
.satellite-name {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.satellite-stats {
|
||
font-size: 0.9rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.chart-container {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 24px;
|
||
padding: 30px;
|
||
margin: 20px;
|
||
max-width: 800px;
|
||
width: 100%;
|
||
opacity: 0;
|
||
animation: fadeIn 0.8s ease-out 0.5s forwards;
|
||
}
|
||
|
||
.chart-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.year-selector {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
z-index: 1000;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 12px;
|
||
padding: 10px 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.year-selector select {
|
||
background: transparent;
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
outline: none;
|
||
}
|
||
|
||
.year-selector select option {
|
||
background: #333;
|
||
color: #fff;
|
||
}
|
||
|
||
.scroll-indicator {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 1000;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
|
||
40% { transform: translateX(-50%) translateY(-20px); }
|
||
60% { transform: translateX(-50%) translateY(-10px); }
|
||
}
|
||
|
||
.scroll-indicator i {
|
||
font-size: 2rem;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.emoji-rain {
|
||
position: fixed;
|
||
top: -50px;
|
||
font-size: 2rem;
|
||
animation: rain 3s linear forwards;
|
||
z-index: 100;
|
||
}
|
||
|
||
@keyframes rain {
|
||
to { transform: translateY(110vh) rotate(360deg); }
|
||
}
|
||
|
||
.glow-text {
|
||
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
|
||
}
|
||
|
||
.counter {
|
||
display: inline-block;
|
||
}
|
||
|
||
.progress-bar-custom {
|
||
height: 30px;
|
||
border-radius: 15px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
overflow: hidden;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
border-radius: 15px;
|
||
background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.7) 100%);
|
||
transition: width 1.5s ease-out;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 15px;
|
||
font-weight: 700;
|
||
font-size: 0.9rem;
|
||
color: #333;
|
||
}
|
||
|
||
.new-emissions-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 15px;
|
||
max-width: 1200px;
|
||
margin-top: 30px;
|
||
width: 100%;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.emission-card {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 12px;
|
||
padding: 15px 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
opacity: 0;
|
||
transform: translateX(-30px);
|
||
animation: slideRight 0.5s ease-out forwards;
|
||
}
|
||
|
||
@keyframes slideRight {
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
.emission-name {
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.emission-info {
|
||
font-size: 0.85rem;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.confetti {
|
||
position: fixed;
|
||
width: 10px;
|
||
height: 10px;
|
||
top: -10px;
|
||
z-index: 1000;
|
||
animation: confetti-fall 3s linear forwards;
|
||
}
|
||
|
||
@keyframes confetti-fall {
|
||
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
|
||
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
|
||
}
|
||
|
||
.heatmap-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.heatmap-cell {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 0.8rem;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.heatmap-cell:hover {
|
||
transform: scale(1.2);
|
||
z-index: 10;
|
||
}
|
||
|
||
.nav-dots {
|
||
position: fixed;
|
||
right: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.nav-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.nav-dot:hover, .nav-dot.active {
|
||
background: #fff;
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.big-number { font-size: 4rem; }
|
||
.big-text { font-size: 1.5rem; }
|
||
.stat-card { padding: 20px; margin: 10px; }
|
||
.stat-value { font-size: 2rem; }
|
||
.nav-dots { display: none; }
|
||
.year-selector { top: 10px; right: 10px; padding: 8px 15px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Particles Background -->
|
||
<div class="particles" id="particles"></div>
|
||
|
||
<!-- Year Selector -->
|
||
<div class="year-selector">
|
||
<select id="yearSelect" onchange="changeYear(this.value)">
|
||
{% for y in available_years %}
|
||
<option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Navigation Dots -->
|
||
<div class="nav-dots">
|
||
<div class="nav-dot active" data-slide="0" title="Начало"></div>
|
||
<div class="nav-dot" data-slide="1" title="Точки ГЛ"></div>
|
||
<div class="nav-dot" data-slide="2" title="Новые излучения"></div>
|
||
<div class="nav-dot" data-slide="3" title="Спутники"></div>
|
||
<div class="nav-dot" data-slide="4" title="Время"></div>
|
||
<div class="nav-dot" data-slide="5" title="Итоги"></div>
|
||
</div>
|
||
|
||
<!-- Scroll Indicator -->
|
||
<div class="scroll-indicator" id="scrollIndicator">
|
||
<i class="bi bi-chevron-double-down"></i>
|
||
</div>
|
||
|
||
<!-- Slide 1: Intro -->
|
||
<section class="slide slide-intro" data-slide="0">
|
||
<div class="text-center">
|
||
<div class="big-text" style="animation-delay: 0s;">🎉 Ваш {{ year }} год</div>
|
||
<div class="big-number" style="animation-delay: 0.3s;">в цифрах</div>
|
||
<div class="sub-text" style="animation-delay: 0.6s;">Итоги работы системы геолокации</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 2: Total Points -->
|
||
<section class="slide slide-points" data-slide="1">
|
||
<div class="text-center">
|
||
<div class="sub-text">За {{ year }} год вы получили</div>
|
||
<div class="big-number counter" data-target="{{ total_points }}">0</div>
|
||
<div class="big-text">точек геолокации</div>
|
||
<div class="sub-text">по <span class="counter" data-target="{{ total_sources }}">0</span> объектам</div>
|
||
|
||
{% if busiest_day %}
|
||
<div class="stat-card mt-5" style="display: inline-block;">
|
||
<div class="stat-label">🔥 Самый активный день</div>
|
||
<div class="stat-value">{{ busiest_day.date|date:"d.m.Y" }}</div>
|
||
<div class="stat-label">{{ busiest_day.points }} точек</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 3: New Emissions -->
|
||
<section class="slide slide-new" data-slide="2">
|
||
<div class="text-center">
|
||
<div class="sub-text">✨ Новые открытия</div>
|
||
<div class="big-number counter" data-target="{{ new_emissions_count }}">0</div>
|
||
<div class="big-text">новых излучений</div>
|
||
<div class="sub-text">впервые обнаруженных в {{ year }} году</div>
|
||
<div class="sub-text">по <span class="counter" data-target="{{ new_emissions_sources }}">0</span> объектам</div>
|
||
|
||
{% if new_emission_objects %}
|
||
<div class="new-emissions-grid">
|
||
{% for obj in new_emission_objects %}
|
||
<div class="emission-card" style="animation-delay: {{ forloop.counter0|divisibleby:10 }}s;">
|
||
<div class="emission-name">{{ obj.name }}</div>
|
||
<div class="emission-info">{{ obj.info }} • {{ obj.ownership }}</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 4: Satellites -->
|
||
<section class="slide slide-satellites" data-slide="3">
|
||
<div class="text-center">
|
||
<div class="sub-text">📡 Спутники</div>
|
||
<div class="big-number counter" data-target="{{ satellite_count }}">0</div>
|
||
<div class="big-text">спутников с данными</div>
|
||
|
||
<div class="satellite-list">
|
||
{% for sat in satellite_stats %}
|
||
<div class="satellite-item">
|
||
<div class="satellite-name">{{ sat.parameter_obj__id_satellite__name }}</div>
|
||
<div class="satellite-stats">
|
||
<strong>{{ sat.points_count }}</strong> точек •
|
||
<strong>{{ sat.sources_count }}</strong> объектов
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div class="chart-container mt-4">
|
||
<div class="chart-title">Распределение точек по спутникам</div>
|
||
<canvas id="satelliteChart" height="300"></canvas>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 5: Time Analysis -->
|
||
<section class="slide slide-time" data-slide="4">
|
||
<div class="text-center">
|
||
<div class="sub-text">⏰ Когда вы работали</div>
|
||
<div class="big-text">Анализ по времени</div>
|
||
|
||
<div class="row justify-content-center mt-4">
|
||
<div class="col-md-5">
|
||
<div class="chart-container">
|
||
<div class="chart-title">По месяцам</div>
|
||
<canvas id="monthlyChart" height="250"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5">
|
||
<div class="chart-container">
|
||
<div class="chart-title">По дням недели</div>
|
||
<canvas id="weekdayChart" height="250"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container" style="max-width: 600px;">
|
||
<div class="chart-title">По часам</div>
|
||
<canvas id="hourlyChart" height="200"></canvas>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 6: Summary -->
|
||
<section class="slide slide-summary" data-slide="5">
|
||
<div class="text-center">
|
||
<div class="big-text">🏆 Итоги {{ year }}</div>
|
||
|
||
<div class="row justify-content-center mt-4">
|
||
<div class="col-auto">
|
||
<div class="stat-card">
|
||
<div class="stat-value glow-text">{{ total_points }}</div>
|
||
<div class="stat-label">Точек ГЛ</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="stat-card">
|
||
<div class="stat-value glow-text">{{ total_sources }}</div>
|
||
<div class="stat-label">Объектов</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="stat-card">
|
||
<div class="stat-value glow-text">{{ new_emissions_count }}</div>
|
||
<div class="stat-label">Новых излучений</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="stat-card">
|
||
<div class="stat-value glow-text">{{ satellite_count }}</div>
|
||
<div class="stat-label">Спутников</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container mt-4" style="max-width: 700px;">
|
||
<div class="chart-title">🌟 Топ-10 объектов по количеству точек</div>
|
||
<canvas id="topObjectsChart" height="300"></canvas>
|
||
</div>
|
||
|
||
<div class="mt-5">
|
||
<div class="big-text">До встречи в {{ year|add:1 }}! 🚀</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="{% static 'chartjs/chart.js' %}"></script>
|
||
<script src="{% static 'chartjs/chart-datalabels.js' %}"></script>
|
||
<script>
|
||
// Data from Django
|
||
const monthlyData = {{ monthly_data_json|safe }};
|
||
const satelliteStats = {{ satellite_stats_json|safe }};
|
||
const weekdayData = {{ weekday_data_json|safe }};
|
||
const hourlyData = {{ hourly_data_json|safe }};
|
||
const topObjects = {{ top_objects_json|safe }};
|
||
|
||
// Create particles
|
||
function createParticles() {
|
||
const container = document.getElementById('particles');
|
||
for (let i = 0; i < 50; i++) {
|
||
const particle = document.createElement('div');
|
||
particle.className = 'particle';
|
||
particle.style.left = Math.random() * 100 + '%';
|
||
particle.style.animationDelay = Math.random() * 15 + 's';
|
||
particle.style.animationDuration = (10 + Math.random() * 10) + 's';
|
||
particle.style.width = (5 + Math.random() * 10) + 'px';
|
||
particle.style.height = particle.style.width;
|
||
container.appendChild(particle);
|
||
}
|
||
}
|
||
createParticles();
|
||
|
||
// Counter animation
|
||
function animateCounters() {
|
||
const counters = document.querySelectorAll('.counter');
|
||
counters.forEach(counter => {
|
||
const target = parseInt(counter.dataset.target) || 0;
|
||
const duration = 2000;
|
||
const step = target / (duration / 16);
|
||
let current = 0;
|
||
|
||
const updateCounter = () => {
|
||
current += step;
|
||
if (current < target) {
|
||
counter.textContent = Math.floor(current).toLocaleString('ru-RU');
|
||
requestAnimationFrame(updateCounter);
|
||
} else {
|
||
counter.textContent = target.toLocaleString('ru-RU');
|
||
}
|
||
};
|
||
updateCounter();
|
||
});
|
||
}
|
||
|
||
// Intersection Observer for animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const slideIndex = entry.target.dataset.slide;
|
||
document.querySelectorAll('.nav-dot').forEach((dot, i) => {
|
||
dot.classList.toggle('active', i == slideIndex);
|
||
});
|
||
|
||
// Trigger counter animation when slide is visible
|
||
if (slideIndex == 1 || slideIndex == 2 || slideIndex == 3 || slideIndex == 5) {
|
||
entry.target.querySelectorAll('.counter').forEach(counter => {
|
||
if (!counter.dataset.animated) {
|
||
counter.dataset.animated = 'true';
|
||
const target = parseInt(counter.dataset.target) || 0;
|
||
animateCounter(counter, target);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Create confetti on summary slide
|
||
if (slideIndex == 5 && !window.confettiCreated) {
|
||
window.confettiCreated = true;
|
||
createConfetti();
|
||
}
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
|
||
document.querySelectorAll('.slide').forEach(slide => observer.observe(slide));
|
||
|
||
function animateCounter(element, target) {
|
||
const duration = 2000;
|
||
const step = target / (duration / 16);
|
||
let current = 0;
|
||
|
||
const update = () => {
|
||
current += step;
|
||
if (current < target) {
|
||
element.textContent = Math.floor(current).toLocaleString('ru-RU');
|
||
requestAnimationFrame(update);
|
||
} else {
|
||
element.textContent = target.toLocaleString('ru-RU');
|
||
}
|
||
};
|
||
update();
|
||
}
|
||
|
||
// Confetti effect
|
||
function createConfetti() {
|
||
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dfe6e9', '#fd79a8', '#a29bfe'];
|
||
for (let i = 0; i < 100; i++) {
|
||
setTimeout(() => {
|
||
const confetti = document.createElement('div');
|
||
confetti.className = 'confetti';
|
||
confetti.style.left = Math.random() * 100 + '%';
|
||
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
||
confetti.style.animationDuration = (2 + Math.random() * 2) + 's';
|
||
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
|
||
document.body.appendChild(confetti);
|
||
setTimeout(() => confetti.remove(), 4000);
|
||
}, i * 30);
|
||
}
|
||
}
|
||
|
||
// Navigation dots click
|
||
document.querySelectorAll('.nav-dot').forEach(dot => {
|
||
dot.addEventListener('click', () => {
|
||
const slideIndex = dot.dataset.slide;
|
||
document.querySelector(`[data-slide="${slideIndex}"]`).scrollIntoView({ behavior: 'smooth' });
|
||
});
|
||
});
|
||
|
||
// Hide scroll indicator on scroll
|
||
window.addEventListener('scroll', () => {
|
||
const indicator = document.getElementById('scrollIndicator');
|
||
if (window.scrollY > 100) {
|
||
indicator.style.opacity = '0';
|
||
} else {
|
||
indicator.style.opacity = '1';
|
||
}
|
||
});
|
||
|
||
// Year change
|
||
function changeYear(year) {
|
||
window.location.href = '?year=' + year;
|
||
}
|
||
|
||
// Chart.js configuration
|
||
Chart.defaults.color = '#fff';
|
||
Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
|
||
|
||
// Monthly Chart
|
||
if (monthlyData.length > 0) {
|
||
const monthNames = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
|
||
new Chart(document.getElementById('monthlyChart'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: monthlyData.map(d => {
|
||
if (d.month) {
|
||
const [year, month] = d.month.split('-');
|
||
return monthNames[parseInt(month) - 1];
|
||
}
|
||
return '';
|
||
}),
|
||
datasets: [{
|
||
label: 'Точки',
|
||
data: monthlyData.map(d => d.points),
|
||
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
||
borderRadius: 8,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { display: false },
|
||
datalabels: { display: false }
|
||
},
|
||
scales: {
|
||
y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' } },
|
||
x: { grid: { display: false } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Weekday Chart
|
||
if (weekdayData.length > 0) {
|
||
const weekdayNames = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
|
||
const sortedWeekday = [...weekdayData].sort((a, b) => {
|
||
// Convert Sunday (1) to 7 for proper sorting (Mon-Sun)
|
||
const aDay = a.weekday === 1 ? 8 : a.weekday;
|
||
const bDay = b.weekday === 1 ? 8 : b.weekday;
|
||
return aDay - bDay;
|
||
});
|
||
|
||
new Chart(document.getElementById('weekdayChart'), {
|
||
type: 'polarArea',
|
||
data: {
|
||
labels: sortedWeekday.map(d => weekdayNames[d.weekday - 1]),
|
||
datasets: [{
|
||
data: sortedWeekday.map(d => d.points),
|
||
backgroundColor: [
|
||
'rgba(255, 99, 132, 0.7)',
|
||
'rgba(54, 162, 235, 0.7)',
|
||
'rgba(255, 206, 86, 0.7)',
|
||
'rgba(75, 192, 192, 0.7)',
|
||
'rgba(153, 102, 255, 0.7)',
|
||
'rgba(255, 159, 64, 0.7)',
|
||
'rgba(199, 199, 199, 0.7)'
|
||
],
|
||
borderWidth: 2,
|
||
borderColor: '#fff'
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { position: 'right' },
|
||
datalabels: { display: false }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Hourly Chart
|
||
if (hourlyData.length > 0) {
|
||
// Fill missing hours with 0
|
||
const fullHourlyData = Array.from({length: 24}, (_, i) => {
|
||
const found = hourlyData.find(d => d.hour === i);
|
||
return found ? found.points : 0;
|
||
});
|
||
|
||
new Chart(document.getElementById('hourlyChart'), {
|
||
type: 'line',
|
||
data: {
|
||
labels: Array.from({length: 24}, (_, i) => i + ':00'),
|
||
datasets: [{
|
||
label: 'Точки',
|
||
data: fullHourlyData,
|
||
borderColor: 'rgba(255, 255, 255, 0.9)',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4,
|
||
pointBackgroundColor: '#fff'
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { display: false },
|
||
datalabels: { display: false }
|
||
},
|
||
scales: {
|
||
y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' } },
|
||
x: { grid: { display: false } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Satellite Pie Chart
|
||
if (satelliteStats.length > 0) {
|
||
const top10 = satelliteStats.slice(0, 10);
|
||
const otherPoints = satelliteStats.slice(10).reduce((sum, s) => sum + s.points_count, 0);
|
||
|
||
const labels = top10.map(s => s.parameter_obj__id_satellite__name);
|
||
const data = top10.map(s => s.points_count);
|
||
|
||
if (otherPoints > 0) {
|
||
labels.push('Другие');
|
||
data.push(otherPoints);
|
||
}
|
||
|
||
const colors = [
|
||
'#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7',
|
||
'#dfe6e9', '#fd79a8', '#a29bfe', '#00b894', '#e17055', '#636e72'
|
||
];
|
||
|
||
new Chart(document.getElementById('satelliteChart'), {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: labels,
|
||
datasets: [{
|
||
data: data,
|
||
backgroundColor: colors.slice(0, data.length),
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(255,255,255,0.3)'
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
cutout: '60%',
|
||
plugins: {
|
||
legend: { position: 'right', labels: { padding: 15 } },
|
||
datalabels: {
|
||
color: '#fff',
|
||
font: { weight: 'bold', size: 11 },
|
||
formatter: (value, ctx) => {
|
||
const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
|
||
const pct = ((value / total) * 100).toFixed(1);
|
||
return pct > 5 ? pct + '%' : '';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
plugins: [ChartDataLabels]
|
||
});
|
||
}
|
||
|
||
// Top Objects Chart
|
||
if (topObjects.length > 0) {
|
||
const colors = [
|
||
'#ffd700', '#c0c0c0', '#cd7f32', '#4ecdc4', '#45b7d1',
|
||
'#96ceb4', '#ffeaa7', '#fd79a8', '#a29bfe', '#00b894'
|
||
];
|
||
|
||
new Chart(document.getElementById('topObjectsChart'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: topObjects.map(o => o.name.length > 20 ? o.name.substring(0, 20) + '...' : o.name),
|
||
datasets: [{
|
||
label: 'Точки',
|
||
data: topObjects.map(o => o.points),
|
||
backgroundColor: colors,
|
||
borderRadius: 8,
|
||
borderSkipped: false
|
||
}]
|
||
},
|
||
options: {
|
||
indexAxis: 'y',
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { display: false },
|
||
datalabels: {
|
||
anchor: 'end',
|
||
align: 'end',
|
||
color: '#fff',
|
||
font: { weight: 'bold' },
|
||
formatter: (value) => value.toLocaleString('ru-RU')
|
||
}
|
||
},
|
||
scales: {
|
||
x: {
|
||
beginAtZero: true,
|
||
grid: { color: 'rgba(255,255,255,0.1)' },
|
||
grace: '15%'
|
||
},
|
||
y: { grid: { display: false } }
|
||
}
|
||
},
|
||
plugins: [ChartDataLabels]
|
||
});
|
||
}
|
||
|
||
// Emoji rain on intro
|
||
setTimeout(() => {
|
||
const emojis = ['🛰️', '📡', '🌍', '✨', '🎯', '📍', '🔭', '⭐'];
|
||
for (let i = 0; i < 20; i++) {
|
||
setTimeout(() => {
|
||
const emoji = document.createElement('div');
|
||
emoji.className = 'emoji-rain';
|
||
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
|
||
emoji.style.left = Math.random() * 100 + '%';
|
||
emoji.style.animationDuration = (2 + Math.random() * 2) + 's';
|
||
document.body.appendChild(emoji);
|
||
setTimeout(() => emoji.remove(), 4000);
|
||
}, i * 200);
|
||
}
|
||
}, 1000);
|
||
</script>
|
||
</body>
|
||
</html>
|