feat: init tg nodes, init web view
This commit is contained in:
@@ -0,0 +1,368 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Система мониторинга утечек данных</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
<style>
|
||||
body {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
font-family: 'Arial', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
transition: margin-left 0.3s ease;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #2e2e2e;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
|
||||
transition: width 0.3s ease;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.sidebar.collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
.sidebar.collapsed h2,
|
||||
.sidebar.collapsed ul li a span {
|
||||
display: none;
|
||||
}
|
||||
.sidebar h2 {
|
||||
color: #3399FF;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 24px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar ul li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.sidebar ul li a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar ul li a:hover {
|
||||
color: #3399FF;
|
||||
}
|
||||
.sidebar ul li a i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.sidebar ul li a span {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
background-color: #3399FF;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
margin-left: 250px;
|
||||
transition: margin-left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.container.collapsed {
|
||||
margin-left: 60px;
|
||||
}
|
||||
h1 {
|
||||
color: #3399FF;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: #2e2e2e;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#map {
|
||||
height: 400px;
|
||||
border-radius: 8px;
|
||||
grid-column: span 2;
|
||||
}
|
||||
.screenshots {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.screenshots img {
|
||||
max-height: 200px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #3399FF;
|
||||
}
|
||||
.logs {
|
||||
background-color: #2e2e2e;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
color: #3399FF;
|
||||
}
|
||||
.logs p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon {
|
||||
background-color: #3399FF;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
box-shadow: 0 0 10px rgba(51, 153, 255, 0.5);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
color: #1e1e1e;
|
||||
font-size: 14px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Боковое меню -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<h2>Меню</h2>
|
||||
<ul>
|
||||
<li><a href="#"><i class="fas fa-home"></i><span>Главная</span></a></li>
|
||||
<li><a href="#"><i class="fas fa-cog"></i><span>Настройки</span></a></li>
|
||||
<li><a href="#"><i class="fas fa-chart-line"></i><span>Отчеты</span></a></li>
|
||||
<li><a href="#"><i class="fas fa-code"></i><span>Парсеры</span></a></li>
|
||||
<li><a href="logs.html"><i class="fas fa-file-alt"></i><span>Логи</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка для сворачивания/разворачивания меню -->
|
||||
<button class="toggle-btn" id="toggle-btn">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<div class="container" id="main-content">
|
||||
<h1>Система мониторинга утечек данных</h1>
|
||||
|
||||
<!-- Карта -->
|
||||
<div class="card">
|
||||
<h2>Карта утечек</h2>
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
|
||||
<!-- Графики, скриншоты и логи -->
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h2>Утечки за месяц</h2>
|
||||
<canvas id="monthlyLeaksChart"></canvas>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Состояние парсеров</h2>
|
||||
<canvas id="parsersStatusChart"></canvas>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Источники утечек</h2>
|
||||
<canvas id="sourcesChart"></canvas>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Скриншоты с форумов</h2>
|
||||
<div class="screenshots">
|
||||
<img src="https://via.placeholder.com/300x200.png?text=Скриншот+1" alt="Скриншот 1">
|
||||
<img src="https://via.placeholder.com/300x200.png?text=Скриншот+2" alt="Скриншот 2">
|
||||
<img src="https://via.placeholder.com/300x200.png?text=Скриншот+3" alt="Скриншот 3">
|
||||
<img src="https://via.placeholder.com/300x200.png?text=Скриншот+4" alt="Скриншот 4">
|
||||
<img src="https://via.placeholder.com/300x200.png?text=Скриншот+5" alt="Скриншот 5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="grid-column: span 2;">
|
||||
<h2>Логи системы</h2>
|
||||
<div class="logs">
|
||||
<p>[2023-10-01 12:34] Парсер форума запущен.</p>
|
||||
<p>[2023-10-01 12:35] Найдена новая утечка на форуме X.</p>
|
||||
<p>[2023-10-01 12:36] Ошибка парсера Telegram: timeout.</p>
|
||||
<p>[2023-10-01 12:37] Утечка данных в Москве зафиксирована.</p>
|
||||
<p>[2023-10-01 12:38] Парсер даркнета завершил работу.</p>
|
||||
<p>[2023-10-01 12:39] Новый скриншот добавлен в базу.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script>
|
||||
// График утечек за месяц
|
||||
const monthlyLeaksCtx = document.getElementById('monthlyLeaksChart').getContext('2d');
|
||||
new Chart(monthlyLeaksCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
|
||||
datasets: [{
|
||||
label: 'Утечки',
|
||||
data: [12, 19, 3, 5, 2, 3, 15, 20, 10, 8, 12, 14, 18, 20, 22],
|
||||
borderColor: '#3399FF',
|
||||
tension: 0.1,
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(51, 153, 255, 0.1)',
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: '#444',
|
||||
},
|
||||
ticks: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
color: '#444',
|
||||
},
|
||||
ticks: {
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// График состояния парсеров
|
||||
const parsersStatusCtx = document.getElementById('parsersStatusChart').getContext('2d');
|
||||
new Chart(parsersStatusCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Активны', 'Ошибки', 'Неактивны'],
|
||||
datasets: [{
|
||||
label: 'Состояние',
|
||||
data: [8, 1, 1],
|
||||
backgroundColor: ['#3399FF', '#ff4444', '#666666'],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// График источников утечек
|
||||
const sourcesCtx = document.getElementById('sourcesChart').getContext('2d');
|
||||
new Chart(sourcesCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Форумы', 'Даркнет', 'Telegram'],
|
||||
datasets: [{
|
||||
label: 'Количество утечек',
|
||||
data: [45, 30, 25],
|
||||
backgroundColor: ['#3399FF', '#00cc99', '#0099cc'],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: '#444',
|
||||
},
|
||||
ticks: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
color: '#444',
|
||||
},
|
||||
ticks: {
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const map = L.map('map').setView([55.7558, 37.6176], 5);
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© OpenStreetMap contributors, © CARTO'
|
||||
}).addTo(map);
|
||||
|
||||
const marker1 = L.marker([55.7558, 37.6176], {
|
||||
icon: L.divIcon({ className: 'leaflet-marker-icon' })
|
||||
}).addTo(map).bindPopup('Утечка данных в Москве');
|
||||
|
||||
const marker2 = L.marker([59.9343, 30.3351], {
|
||||
icon: L.divIcon({ className: 'leaflet-marker-icon' })
|
||||
}).addTo(map).bindPopup('Утечка данных в Санкт-Петербурге');
|
||||
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const mainContent = document.getElementById('main-content');
|
||||
const toggleBtn = document.getElementById('toggle-btn');
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('collapsed');
|
||||
mainContent.classList.toggle('collapsed');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Логи системы</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
/* Боковое меню */
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #2e2e2e;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
|
||||
transition: width 0.3s ease;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed h2,
|
||||
.sidebar.collapsed ul li a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
color: #3399FF;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 24px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover {
|
||||
color: #3399FF;
|
||||
}
|
||||
|
||||
.sidebar ul li a i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sidebar ul li a span {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* Кнопка для сворачивания/разворачивания меню */
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
background-color: #3399FF;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Основной контент */
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
margin-left: 250px;
|
||||
transition: margin-left 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container.collapsed {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
/* Видео на фоне */
|
||||
.background-video {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
opacity: 0.8; /* Полупрозрачность видео */
|
||||
}
|
||||
|
||||
/* Затемнение поверх видео */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7); /* Черный полупрозрачный слой */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Контейнер для логов */
|
||||
.logs-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
transform: translateY(-50%);
|
||||
width: 40%;
|
||||
max-width: 600px;
|
||||
background-color: rgba(46, 46, 46, 0.9); /* Полупрозрачный фон */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 20px rgba(51, 153, 255, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logs-container h2 {
|
||||
color: #3399FF;
|
||||
margin-bottom: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* Стили для логов */
|
||||
.logs {
|
||||
height: 60vh;
|
||||
overflow-y: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
color: #3399FF;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.logs p {
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Стили для скроллбара */
|
||||
.logs::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.logs::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.logs::-webkit-scrollbar-thumb {
|
||||
background: #00ffcc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.logs::-webkit-scrollbar-thumb:hover {
|
||||
background: #00cc99;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Боковое меню -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<h2>Меню</h2>
|
||||
<ul>
|
||||
<li><a href="index.html"><i class="fas fa-home"></i><span>Главная</span></a></li>
|
||||
<li><a href="#"><i class="fas fa-cog"></i><span>Настройки</span></a></li>
|
||||
<li><a href="#"><i class="fas fa-chart-line"></i><span>Отчеты</span></a></li>
|
||||
<li><a href="#"><i class="fas fa-code"></i><span>Парсеры</span></a></li>
|
||||
<li><a href="logs.html"><i class="fas fa-file-alt"></i><span>Логи</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка для сворачивания/разворачивания меню -->
|
||||
<button class="toggle-btn" id="toggle-btn">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<div class="container" id="main-content">
|
||||
<!-- Видео на фоне -->
|
||||
<video class="background-video" autoplay loop muted>
|
||||
<source src="{{ url_for('static', filename='alb_glob0411_1080p_24fps.mp4') }}" type="video/mp4">
|
||||
Ваш браузер не поддерживает видео.
|
||||
</video>
|
||||
<!-- Затемнение поверх видео -->
|
||||
<div class="overlay"></div>
|
||||
|
||||
<!-- Контейнер для логов -->
|
||||
<div class="logs-container">
|
||||
<h2>Логи системы</h2>
|
||||
<div class="logs">
|
||||
<p>[2023-10-01 12:34] Парсер форума запущен.</p>
|
||||
<p>[2023-10-01 12:35] Найдена новая утечка на форуме X.</p>
|
||||
<p>[2023-10-01 12:36] Ошибка парсера Telegram: timeout.</p>
|
||||
<p>[2023-10-01 12:37] Утечка данных в Москве зафиксирована.</p>
|
||||
<p>[2023-10-01 12:38] Парсер даркнета завершил работу.</p>
|
||||
<p>[2023-10-01 12:39] Новый скриншот добавлен в базу.</p>
|
||||
<!-- Добавьте больше логов по необходимости -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Сворачивание/разворачивание бокового меню
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const mainContent = document.getElementById('main-content');
|
||||
const toggleBtn = document.getElementById('toggle-btn');
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('collapsed');
|
||||
mainContent.classList.toggle('collapsed');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user