stud178861/tempora-paul
1
0
Fork 0
forked from stud178875/tempora
Code Pull Requests Activity

feat: init tg nodes, init web view

Browse Source
This commit is contained in:
stud178875
2025-04-13 18:19:39 +03:00
parent 09c0cb6a44
commit b50b9b8980
11 changed files with 826 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.py
+34
View File
@@ -0,0 +1,34 @@
import os
from flask import Flask, render_template
import psycopg2
app = Flask(__name__)
DB_CONFIG = {
'host': os.getenv("HOST"),
'port': os.getenv("PORT"),
'database': os.getenv("DBNAME"),
'user': os.getenv("USER"),
'password': os.getenv("PASSWORD")
}
@app.route("/")
def index():
with psycopg2.connect(**DB_CONFIG) as conn:
with conn.cursor() as cur:
cur.execute("SELECT source, message, created_at FROM leaks ORDER BY created_at DESC LIMIT 50")
leaks = cur.fetchall()
return render_template("index.html", leaks=leaks)
@app.route("/logs")
def logs():
log_path = os.path.join(os.path.dirname(__file__), '..', 'tg_nodes.log')
try:
with open(log_path, 'r', encoding='utf-8') as f:
lines = f.readlines()[-100:]
except FileNotFoundError:
lines = ["Лог-файл не найден"]
return render_template("logs.html", logs=lines)
if __name__ == "__main__":
app.run(debug=True)
web/templates/index.html
+368
View File
@@ -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>
web/templates/logs.html
+246
View File
@@ -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>