192 lines
8.9 KiB
HTML
192 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}LKM37 CORE{% endblock %}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="/static/css/matrix.css" rel="stylesheet">
|
|
<style>
|
|
.sidebar { min-height: 100vh; position: sticky; top: 0; overflow-y: auto; }
|
|
.content { padding: 2rem; }
|
|
{% block extra_style %}{% endblock %}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="matrix-canvas-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1;">
|
|
<canvas id="matrix-canvas"></canvas>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar (ВОССТАНОВЛЕННОЕ ПОЛНОЕ МЕНЮ) -->
|
|
<div class="col-md-2 sidebar p-0">
|
|
<div class="p-3 text-center border-bottom" style="border-color: var(--panel-border) !important;">
|
|
<h4 class="mb-0" style="color: var(--color-success); text-shadow: 0 0 15px var(--color-success-glow); font-weight: 700; letter-spacing: 1px;">LKM37</h4>
|
|
<small class="text-success opacity-50" style="font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.5px;">CORE SYSTEM v4.5</small>
|
|
</div>
|
|
<nav class="nav flex-column mt-3">
|
|
<a class="nav-link {% block nav_dashboard %}{% endblock %}" href="/">
|
|
<i class="bi bi-terminal"></i> ДАШБОРД
|
|
</a>
|
|
|
|
<div class="mt-3 px-3"><small class="text-success opacity-50 text-uppercase" style="font-size: 0.6em;">Жильцы</small></div>
|
|
<a class="nav-link {% block nav_users %}{% endblock %}" href="/users">
|
|
<i class="bi bi-people"></i> ЖИЛЬЦЫ
|
|
</a>
|
|
<a class="nav-link {% block nav_verification %}{% endblock %}" href="/verification">
|
|
<i class="bi bi-shield-lock"></i> ВЕРИФИКАЦИЯ
|
|
</a>
|
|
<a class="nav-link {% block nav_phones %}{% endblock %}" href="/phones">
|
|
<i class="bi bi-telephone"></i> ТЕЛЕФОНЫ
|
|
</a>
|
|
|
|
<div class="mt-3 px-3"><small class="text-success opacity-50 text-uppercase" style="font-size: 0.6em;">Контент</small></div>
|
|
<a class="nav-link {% block nav_broadcast %}{% endblock %}" href="/broadcast">
|
|
<i class="bi bi-broadcast"></i> РАССЫЛКА
|
|
</a>
|
|
<a class="nav-link {% block nav_scheduled_posts %}{% endblock %}" href="/scheduled_posts">
|
|
<i class="bi bi-clock-history"></i> ПОСТЫ
|
|
</a>
|
|
<a class="nav-link {% block nav_digests %}{% endblock %}" href="/digests">
|
|
<i class="bi bi-file-earmark-text"></i> ДАЙДЖЕСТЫ
|
|
</a>
|
|
<a class="nav-link {% block nav_files %}{% endblock %}" href="/files">
|
|
<i class="bi bi-folder2-open"></i> ФАЙЛЫ
|
|
</a>
|
|
|
|
<div class="mt-3 px-3"><small class="text-success opacity-50 text-uppercase" style="font-size: 0.6em;">Сервисы</small></div>
|
|
<a class="nav-link {% block nav_schedules %}{% endblock %}" href="/schedules">
|
|
<i class="bi bi-calendar-event"></i> ГРАФИКИ
|
|
</a>
|
|
<a class="nav-link {% block nav_ads %}{% endblock %}" href="/ads">
|
|
<i class="bi bi-shop"></i> ОБЪЯВЛЕНИЯ
|
|
</a>
|
|
<a class="nav-link {% block nav_polls %}{% endblock %}" href="/polls">
|
|
<i class="bi bi-check2-square"></i> ОПРОСЫ
|
|
</a>
|
|
<a class="nav-link {% block nav_events %}{% endblock %}" href="/events">
|
|
<i class="bi bi-calendar3"></i> СОБЫТИЯ
|
|
</a>
|
|
|
|
<div class="mt-3 px-3"><small class="text-success opacity-50 text-uppercase" style="font-size: 0.6em;">Система</small></div>
|
|
<a class="nav-link {% block nav_infra %}{% endblock %}" href="/infra">
|
|
<i class="bi bi-cpu"></i> ИНФРАСТРУКТУРА
|
|
</a>
|
|
<a class="nav-link {% block nav_export %}{% endblock %}" href="/export">
|
|
<i class="bi bi-download"></i> ЭКСПОРТ
|
|
</a>
|
|
<a class="nav-link {% block nav_emails %}{% endblock %}" href="/emails">
|
|
<i class="bi bi-envelope-at"></i> ПОЧТА
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-md-10 content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const canvas = document.getElementById('matrix-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
let width = canvas.width = window.innerWidth;
|
|
let height = canvas.height = window.innerHeight;
|
|
|
|
const particles = [];
|
|
const properties = {
|
|
bgColor: '#06060c',
|
|
particleColor: 'rgba(138, 43, 226, 0.25)',
|
|
lineColor: 'rgba(0, 255, 204, 0.05)',
|
|
particleRadius: 2.5,
|
|
particleCount: 70,
|
|
maxVelocity: 0.4,
|
|
lineLength: 140
|
|
};
|
|
|
|
window.addEventListener('resize', function() {
|
|
width = canvas.width = window.innerWidth;
|
|
height = canvas.height = window.innerHeight;
|
|
});
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.x = Math.random() * width;
|
|
this.y = Math.random() * height;
|
|
this.velocityPosition = {
|
|
x: (Math.random() - 0.5) * properties.maxVelocity,
|
|
y: (Math.random() - 0.5) * properties.maxVelocity
|
|
}
|
|
}
|
|
|
|
position() {
|
|
if (this.x + this.velocityPosition.x > width || this.x + this.velocityPosition.x < 0) {
|
|
this.velocityPosition.x = -this.velocityPosition.x;
|
|
}
|
|
if (this.y + this.velocityPosition.y > height || this.y + this.velocityPosition.y < 0) {
|
|
this.velocityPosition.y = -this.velocityPosition.y;
|
|
}
|
|
this.x += this.velocityPosition.x;
|
|
this.y += this.velocityPosition.y;
|
|
}
|
|
|
|
reDraw() {
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, properties.particleRadius, 0, Math.PI * 2);
|
|
ctx.closePath();
|
|
ctx.fillStyle = properties.particleColor;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
function drawLines() {
|
|
let x1, y1, x2, y2, length, opacity;
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
x1 = particles[i].x;
|
|
y1 = particles[i].y;
|
|
x2 = particles[j].x;
|
|
y2 = particles[j].y;
|
|
length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
|
if (length < properties.lineLength) {
|
|
opacity = 1 - (length / properties.lineLength);
|
|
ctx.strokeStyle = `rgba(0, 255, 204, ${opacity * 0.06})`;
|
|
ctx.lineWidth = '0.5';
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1, y1);
|
|
ctx.lineTo(x2, y2);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
for (let i = 0; i < properties.particleCount; i++) {
|
|
particles.push(new Particle());
|
|
}
|
|
loop();
|
|
}
|
|
|
|
function loop() {
|
|
ctx.fillStyle = properties.bgColor;
|
|
ctx.fillRect(0, 0, width, height);
|
|
for (let i = 0; i < particles.length; i++) {
|
|
particles[i].position();
|
|
particles[i].reDraw();
|
|
}
|
|
drawLines();
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
{% block extra_script %}{% endblock %}
|
|
</body>
|
|
</html>
|