<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Статистика потребления алкоголя в России (2025)</title>
<link rel="stylesheet" href="https://unpkg.com/
[email protected]/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
header {
background: linear-gradient(to right, #1e3c72, #2a5298);
color: white;
padding: 2rem 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
h2 {
font-size: 1.8rem;
margin: 2rem 0 1rem;
color: #2a5298;
border-bottom: 2px solid #eaeaea;
padding-bottom: 0.5rem;
}
h3 {
font-size: 1.4rem;
margin: 1.5rem 0 1rem;
color: #1e3c72;
}
.intro {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 2rem 0;
}
.stat-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
.stat-card h3 {
color: #2a5298;
margin-bottom: 1rem;
}
.stat-value {
font-size: 2rem;
font-weight: bold;
color: #1e3c72;
}
.chart-container {
background-color: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
height: 400px;
}
.chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.chart-row .chart-container {
height: 350px;
}
#map {
height: 500px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
}
.age-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin: 1.5rem 0;
}
.age-stat {
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.age-stat h4 {
color: #2a5298;
margin-bottom: 0.5rem;
}
.age-stat .value {
font-size: 1.5rem;
font-weight: bold;
color: #1e3c72;
}
.region-selector {
margin: 1.5rem 0;
display: flex;
align-items: center;
gap: 10px;
}
.region-selector select {
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #ddd;
background: white;
font-size: 1rem;
}
.legend {
padding: 10px;
background: white;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.legend h4 {
margin: 0 0 10px;
color: #1e3c72;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 3px;
}
footer {
background-color: #1e3c72;
color: white;
text-align: center;
padding: 1.5rem 0;
margin-top: 2rem;
}
.footer-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.authors {
font-size: 1.1rem;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.share-section {
background-color: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
text-align: center;
}
.share-btn {
display: inline-block;
background: #1e3c72;
color: white;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
margin: 0 10px;
transition: background 0.3s;
}
.share-btn:hover {
background: #2a5298;
}
@media (max-width: 768px) {
.stats-grid, .chart-row {
grid-template-columns: 1fr;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.region-selector {
flex-direction: column;
align-items: flex-start;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Статистика потребления алкоголя в России</h1>
<p>Данные за 2025 год</p>
</div>
</header>
<div class="container">
<section class="intro">
<h2>Обзор ситуации</h2>
<p>В 2025 году Россия продолжает демонстрировать положительную динамику в снижении потребления алкоголя на душу населения. По сравнению с 2020 годом, потребление сократилось на 15%, что является результатом реализации государственных программ по популяризации здорового образа жизни и ограничению доступности алкогольной продукции.</p>
<p>Тем не менее, существуют значительные региональные различия в уровне потребления алкоголя, которые отражены на интерактивной карте ниже.</p>
</section>
<section class="stats-grid">
<div class="stat-card">
<h3>Среднее потребление на душу населения</h3>
<div class="stat-value">8.2 л</div>
<p>чистого алкоголя в год</p>
</div>
<div class="stat-card">
<h3>Снижение потребления с 2020 года</h3>
<div class="stat-value">-15%</div>
<p>по сравнению с 9.6 л в 2020</p>
</div>
<div class="stat-card">
<h3>Самый высокий показатель</h3>
<div class="stat-value">12.5 л</div>
<p>Магаданская область</p>
</div>
<div class="stat-card">
<h3>Самый низкий показатель</h3>
<div class="stat-value">5.3 л</div>
<p>Чеченская Республика</p>
</div>
</section>
<section>
<h2>Динамика потребления алкоголя в России</h2>
<div class="chart-container">
<canvas id="consumptionChart"></canvas>
</div>
</section>
<section>
<h2>Структура потребления алкогольных напитков</h2>
<div class="chart-container">
<canvas id="beveragesChart"></canvas>
</div>
</section>
<section>
<h2>Возрастная статистика потребления алкоголя</h2>
<div class="chart-row">
<div class="chart-container">
<canvas id="ageDistributionChart"></canvas>
</div>
<div class="chart-container">
<canvas id="regionalAgeChart"></canvas>
</div>
</div>
<div class="region-selector">
<label for="regionSelect">Выберите регион для просмотра возрастной статистики:</label>
<select id="regionSelect">
<option value="average">Среднее по России</option>
<option value="moscow">Москва</option>
<option value="spb">Санкт-Петербург</option>
<option value="magadan">Магаданская область</option>
<option value="irkutsk">Иркутская область</option>
<option value="chechnya">Чеченская Республика</option>
</select>
</div>
<div class="age-stats">
<div class="age-stat">
<h4>Средний возраст начала употребления</h4>
<div class="value" id="startAge">18.2 лет</div>
</div>
<div class="age-stat">
<h4>Наиболее пьющая возрастная группа</h4>
<div class="value" id="topAgeGroup">35-44 года</div>
</div>
<div class="age-stat">
<h4>Доля молодежи (18-24)</h4>
<div class="value" id="youthShare">21%</div>
</div>
<div class="age-stat">
<h4>Доля старшего поколения (65+)</h4>
<div class="value" id="seniorShare">8%</div>
</div>
</div>
</section>
<section>
<h2>Региональное распределение потребления алкоголя</h2>
<div id="map"></div>
</section>
<section class="share-section">
<h2>Поделиться сайтом</h2>
<p>Расскажите друзьям и коллегам об этой статистике</p>
<div>
<a href="#" class="share-btn" id="shareLink">Скопировать ссылку</a>
<a href="#" class="share-btn" target="_blank">Поделиться в Twitter</a>
<a href="#" class="share-btn" target="_blank">Поделиться в Facebook</a>
</div>
</section>
</div>
<footer>
<div class="container">
<div class="footer-content">
<p>© 2025 Статистика потребления алкоголя в России. Все данные являются вымышленными и созданы для демонстрации.</p>
<div class="authors">
<p>Работу выполнили: <strong>Михайлов Илья, Феоктистов Никита, Калинин Семен</strong></p>
</div>
</div>
</div>
</footer>
<script>
// Функция для копирования ссылки
document.getElementById('shareLink').addEventListener('click', function(e) {
e.preventDefault();
alert('Для публикации ссылки необходимо сначала разместить сайт в интернете');
});
// Обновление ссылок для соцсетей
document.addEventListener('DOMContentLoaded', function() {
const socialLinks = document.querySelectorAll('.share-btn[target="_blank"]');
socialLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
alert('Для публикации в соцсетях необходимо сначала разместить сайт в интернете');
});
});
});
// Данные для графиков
document.addEventListener('DOMContentLoaded', function() {
// График динамики потребления
const consumptionCtx = document.getElementById('consumptionChart').getContext('2d');
const consumptionChart = new Chart(consumptionCtx, {
type: 'line',
data: {
labels: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025'],
datasets: [{
label: 'Потребление алкоголя (л на душу населения)',
data: [11.5, 10.8, 10.2, 9.9, 9.7, 9.6, 9.3, 9.0, 8.7, 8.4, 8.2],
borderColor: '#1e3c72',
backgroundColor: 'rgba(30, 60, 114, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
min: 7,
title: {
display: true,
text: 'Литров на душу населения'
}
}
}
}
});
// График структуры потребления
const beveragesCtx = document.getElementById('beveragesChart').getContext('2d');
const beveragesChart = new Chart(beveragesCtx, {
type: 'doughnut',
data: {
labels: ['Водка и крепкие напитки', 'Пиво', 'Вино', 'Другие напитки'],
datasets: [{
data: [45, 35, 15, 5],
backgroundColor: [
'#1e3c72',
'#2a5298',
'#4a6fc1',
'#7a9de3'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// График возрастного распределения
const ageDistributionCtx = document.getElementById('ageDistributionChart').getContext('2d');
const ageDistributionChart = new Chart(ageDistributionCtx, {
type: 'bar',
data: {
labels: ['18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
datasets: [{
label: 'Доля потребителей алкоголя (%)',
data: [21, 28, 24, 15, 9, 3],
backgroundColor: '#2a5298',
borderColor: '#1e3c72',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
max: 30,
title: {
display: true,
text: 'Процент потребителей'
}
}
}
}
});
// График региональных возрастных различий
const regionalAgeCtx = document.getElementById('regionalAgeChart').getContext('2d');
const regionalAgeChart = new Chart(regionalAgeCtx, {
type: 'radar',
data: {
labels: ['18-24 лет', '25-34 лет', '35-44 лет', '45-54 лет', '55-64 лет', '65+ лет'],
datasets: [{
label: 'Среднее по России',
data: [65, 78, 72, 58, 42, 25],
backgroundColor: 'rgba(30, 60, 114, 0.2)',
borderColor: '#1e3c72',
pointBackgroundColor: '#1e3c72'
}, {
label: 'Магаданская обл.',
data: [72, 85, 88, 75, 60, 40],
backgroundColor: 'rgba(220, 53, 69, 0.2)',
borderColor: '#dc3545',
pointBackgroundColor: '#dc3545'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: {
display: true
},
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
// Данные по регионам (условные)
const regionData = {
"Москва": {
consumption: 7.8,
lat: 55.7558,
lon: 37.6173,
ageData: {
startAge: 19.1,
topAgeGroup: "25-34 года",
youthShare: 18,
seniorShare: 12,
distribution: [60, 82, 75, 55, 38, 20]
}
},
"Санкт-Петербург": {
consumption: 8.2,
lat: 59.9343,
lon: 30.3351,
ageData: {
startAge: 18.8,
topAgeGroup: "25-34 года",
youthShare: 20,
seniorShare: 15,
distribution: [62, 80, 70, 52, 40, 22]
}
},
"Московская область": {
consumption: 8.5,
lat: 55.5043,
lon: 38.0354,
ageData: {
startAge: 18.5,
topAgeGroup: "35-44 года",
youthShare: 22,
seniorShare: 10,
distribution: [65, 75, 78, 60, 45, 28]
}
},
"Краснодарский край": {
consumption: 9.1,
lat: 45.0355,
lon: 38.9753,
ageData: {
startAge: 18.3,
topAgeGroup: "35-44 года",
youthShare: 24,
seniorShare: 8,
distribution: [68, 76, 80, 65, 50, 30]
}
},
"Свердловская область": {
consumption: 10.2,
lat: 56.8389,
lon: 60.6057,
ageData: {
startAge: 17.8,
topAgeGroup: "35-44 года",
youthShare: 26,
seniorShare: 6,
distribution: [70, 78, 82, 68, 52, 32]
}
},
"Новосибирская область": {
consumption: 9.8,
lat: 55.0084,
lon: 82.9357,
ageData: {
startAge: 17.9,
topAgeGroup: "25-34 года",
youthShare: 25,
seniorShare: 7,
distribution: [69, 80, 75, 62, 48, 29]
}
},
"Республика Татарстан": {
consumption: 8.3,
lat: 55.7944,
lon: 49.1114,
ageData: {
startAge: 18.6,
topAgeGroup: "35-44 года",
youthShare: 21,
seniorShare: 9,
distribution: [63, 74, 76, 58, 42, 26]
}
},
"Челябинская область": {
consumption: 10.5,
lat: 55.1644,
lon: 61.4368,
ageData: {
startAge: 17.7,
topAgeGroup: "35-44 года",
youthShare: 27,
seniorShare: 5,
distribution: [71, 79, 85, 70, 55, 35]
}
},
"Нижегородская область": {
consumption: 9.4,
lat: 56.2965,
lon: 43.9361,
ageData: {
startAge: 18.2,
topAgeGroup: "35-44 года",
youthShare: 23,
seniorShare: 8,
distribution: [67, 77, 79, 63, 47, 27]
}
},
"Самарская область": {
consumption: 9.7,
lat: 53.1959,
lon: 50.1002,
ageData: {
startAge: 18.0,
topAgeGroup: "25-34 года",
youthShare: 24,
seniorShare: 7,
distribution: [68, 81, 74, 60, 45, 28]
}
},
"Ростовская область": {
consumption: 9.3,
lat: 47.2224,
lon: 39.7189,
ageData: {
startAge: 18.1,
topAgeGroup: "35-44 года",
youthShare: 22,
seniorShare: 9,
distribution: [66, 75, 78, 62, 46, 29]
}
},
"Республика Башкортостан": {
consumption: 9.0,
lat: 54.7351,
lon: 55.9587,
ageData: {
startAge: 18.4,
topAgeGroup: "35-44 года",
youthShare: 20,
seniorShare: 10,
distribution: [64, 73, 77, 59, 43, 25]
}
},
"Красноярский край": {
consumption: 10.8,
lat: 56.0087,
lon: 92.8705,
ageData: {
startAge: 17.6,
topAgeGroup: "35-44 года",
youthShare: 28,
seniorShare: 4,
distribution: [73, 80, 86, 72, 58, 38]
}
},
"Пермский край": {
consumption: 10.1,
lat: 58.0105,
lon: 56.2342,
ageData: {
startAge: 17.8,
topAgeGroup: "35-44 года",
youthShare: 26,
seniorShare: 6,
distribution: [70, 78, 83, 67, 50, 31]
}
},
"Воронежская область": {
consumption: 8.9,
lat: 51.6615,
lon: 39.2003,
ageData: {
startAge: 18.3,
topAgeGroup: "35-44 года",
youthShare: 21,
seniorShare: 11,
distribution: [65, 74, 76, 57, 41, 24]
}
},
"Волгоградская область": {
consumption: 9.2,
lat: 48.7071,
lon: 44.5169,
ageData: {
startAge: 18.2,
topAgeGroup: "35-44 года",
youthShare: 22,
seniorShare: 9,
distribution: [66, 75, 78, 61, 45, 27]
}
},
"Иркутская область": {
consumption: 11.3,
lat: 52.2864,
lon: 104.2807,
ageData: {
startAge: 17.3,
topAgeGroup: "35-44 года",
youthShare: 29,
seniorShare: 4,
distribution: [74, 81, 87, 73, 57, 36]
}
},
"Магаданская область": {
consumption: 12.5,
lat: 59.5602,
lon: 150.7986,
ageData: {
startAge: 16.9,
topAgeGroup: "35-44 года",
youthShare: 32,
seniorShare: 2,
distribution: [78, 85, 88, 75, 60, 40]
}
},
"Камчатский край": {
consumption: 11.8,
lat: 53.0373,
lon: 158.6559,
ageData: {
startAge: 17.2,
topAgeGroup: "35-44 года",
youthShare: 30,
seniorShare: 3,
distribution: [75, 82, 85, 70, 55, 35]
}
},
"Чукотский автономный округ": {
consumption: 11.2,
lat: 64.7314,
lon: 177.501,
ageData: {
startAge: 17.4,
topAgeGroup: "25-34 года",
youthShare: 29,
seniorShare: 4,
distribution: [74, 83, 80, 65, 48, 30]
}
},
"Республика Саха (Якутия)": {
consumption: 10.9,
lat: 62.0273,
lon: 129.732,
ageData: {
startAge: 17.5,
topAgeGroup: "35-44 года",
youthShare: 28,
seniorShare: 5,
distribution: [72, 79, 84, 68, 52, 33]
}
},
"Чеченская Республика": {
consumption: 5.3,
lat: 43.3189,
lon: 45.6883,
ageData: {
startAge: 21.5,
topAgeGroup: "35-44 года",
youthShare: 8,
seniorShare: 25,
distribution: [25, 40, 55, 45, 35, 20]
}
},
"Республика Ингушетия": {
consumption: 5.8,
lat: 43.1154,
lon: 44.9016,
ageData: {
startAge: 20.8,
topAgeGroup: "45-54 года",
youthShare: 10,
seniorShare: 22,
distribution: [30, 45, 58, 50, 38, 25]
}
},
"Республика Дагестан": {
consumption: 6.2,
lat: 42.9849,
lon: 47.5047,
ageData: {
startAge: 20.2,
topAgeGroup: "45-54 года",
youthShare: 12,
seniorShare: 20,
distribution: [35, 50, 60, 55, 40, 28]
}
}
};
// Обновление возрастной статистики при выборе региона
document.getElementById('regionSelect').addEventListener('change', function() {
const region = this.value;
let ageData;
if (region === 'average') {
ageData = {
startAge: 18.2,
topAgeGroup: "35-44 года",
youthShare: 21,
seniorShare: 8,
distribution: [65, 78, 72, 58, 42, 25]
};
} else {
const regionName = region === 'moscow' ? 'Москва' :
region === 'spb' ? 'Санкт-Петербург' :
region === 'magadan' ? 'Магаданская область' :
region === 'irkutsk' ? 'Иркутская область' : 'Чеченская Республика';
ageData = regionData[regionName].ageData;
}
// Обновление статистических карточек
document.getElementById('startAge').textContent = ageData.startAge + ' лет';
document.getElementById('topAgeGroup').textContent = ageData.topAgeGroup;
document.getElementById('youthShare').textContent = ageData.youthShare + '%';
document.getElementById('seniorShare').textContent = ageData.seniorShare + '%';
// Обновление графика
if (region === 'irkutsk') {
regionalAgeChart.data.datasets[1] = {
label: 'Иркутская обл.',
data: ageData.distribution,
backgroundColor: 'rgba(255, 165, 0, 0.2)',
borderColor: '#ffa500',
pointBackgroundColor: '#ffa500'
};
} else if (region === 'magadan') {
regionalAgeChart.data.datasets[1] = {
label: 'Магаданская обл.',
data: ageData.distribution,
backgroundColor: 'rgba(220, 53, 69, 0.2)',
borderColor: '#dc3545',
pointBackgroundColor: '#dc3545'
};
} else {
regionalAgeChart.data.datasets[1] = {
label: regionName,
data: ageData.distribution,
backgroundColor: 'rgba(40, 167, 69, 0.2)',
borderColor: '#28a745',
pointBackgroundColor: '#28a745'
};
}
regionalAgeChart.update();
});
// Инициализация карты
const map = L.map('map').setView([55.7558, 37.6173], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Функция для определения цвета в зависимости от уровня потребления
function getColor(consumption) {
return consumption > 11 ? '#800026' :
consumption > 10 ? '#BD0026' :
consumption > 9 ? '#E31A1C' :
consumption > 8 ? '#FC4E2A' :
consumption > 7 ? '#FD8D3C' :
consumption > 6 ? '#FEB24C' :
'#FFEDA0';
}
// Добавление маркеров на карту
for (const region in regionData) {
const data = regionData[region];
const color = getColor(data.consumption);
const marker = L.circleMarker([data.lat, data.lon], {
color: color,
fillColor: color,
fillOpacity: 0.7,
radius: 8
}).addTo(map);
// Создание содержимого для всплывающего окна
let popupContent = `
<b>${region}</b><br>
Потребление: ${data.consumption} л/чел<br>
Средний возраст начала: ${data.ageData.startAge} лет<br>
Основная возрастная группа: ${data.ageData.topAgeGroup}<br>
Доля молодежи: ${data.ageData.youthShare}%
`;
marker.bindPopup(popupContent);
}
// Легенда карты
const legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
const div = L.DomUtil.create('div', 'legend');
const grades = [0, 6, 7, 8, 9, 10, 11];
const labels = [];
div.innerHTML = '<h4>Потребление (л/чел)</h4>';
for (let i = 0; i < grades.length; i++) {
div.innerHTML += `
<div class="legend-item">
<div class="legend-color" style="background:${getColor(grades[i] + 0.1)}"></div>
<span>${grades[i]}${grades[i + 1] ? '–' + grades[i + 1] : '+'}</span>
</div>
`;
}
return div;
};
legend.addTo(map);
});
</script>
</body>
</html>