132 lines
5.6 KiB
HTML
132 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>МОНТ - инфрастуктурный полигон</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
|
<link rel="alternate icon" type="image/png" href="/static/favicon.png" />
|
|
</head>
|
|
<body class="dashboard-page">
|
|
<header class="header">
|
|
<div style="display:flex; align-items:center; gap:0.6rem;">
|
|
<img src="/static/logo.png" alt="MONT" class="header-logo" />
|
|
<div>{{ user.username }}</div>
|
|
</div>
|
|
<div style="display:flex; gap:0.5rem;">
|
|
{% if user.is_admin %}
|
|
<a href="/admin" class="btn-link secondary">Администрирование</a>
|
|
{% endif %}
|
|
<form method="post" action="/logout">
|
|
<button type="submit">Выход</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
<main class="admin-layout">
|
|
<section class="panel">
|
|
<div class="admin-intro">Добро пожаловать в инфраструктурную песочницу</div>
|
|
{% if session_notice %}
|
|
<div class="session-notice">{{ session_notice }}</div>
|
|
{% endif %}
|
|
<div class="rules-banner" id="rules-banner">
|
|
<div class="rules-banner-head">
|
|
<div class="rules-banner-title">Правила работы стенда</div>
|
|
</div>
|
|
<div class="rules-banner-grid">
|
|
<div class="rules-pill">Лимит: до 4 сервисов одновременно. При открытии нового сверх лимита самый старый закрывается автоматически.</div>
|
|
<div class="rules-pill">При бездействии более 5 минут сессия закрывается автоматически.</div>
|
|
<div class="rules-pill">Все сервисы работают в защищённом контуре с резервированием и бэкапами.</div>
|
|
<div class="rules-pill">Состояние сервисов возвращается к базовому каждую ночь в 00:00.</div>
|
|
</div>
|
|
<div class="rules-banner-actions">
|
|
<button type="button" class="rules-ack-btn" id="rules-ack-btn">Ознакомлен</button>
|
|
</div>
|
|
</div>
|
|
{% if categories %}
|
|
<div class="category-strip">
|
|
<a class="category-chip {% if not selected_category_slug %}active{% endif %}" href="/">Все сервисы</a>
|
|
{% for category in categories %}
|
|
<a class="category-chip {% if selected_category_slug == category.slug %}active{% endif %}" href="/?category={{ category.slug }}">{{ category.name }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
<section class="grid service-grid">
|
|
{% for service in services %}
|
|
{% set svc_cats = service_categories.get(service.id, []) %}
|
|
<a class="tile" href="/go/{{ service.slug }}">
|
|
<div class="tile-icon-box">
|
|
<img class="tile-icon" src="{{ service.icon_path or '/static/service-placeholder.svg' }}" alt="icon" />
|
|
</div>
|
|
<h3>{{ service.name }}</h3>
|
|
<p>Открыть сервис</p>
|
|
{% if service.comment %}
|
|
<small class="tile-comment">{{ service_comment_html.get(service.id, '') }}</small>
|
|
{% endif %}
|
|
{% if svc_cats %}
|
|
<div class="service-categories">
|
|
{% for category in svc_cats %}
|
|
<span class="service-cat-badge">{{ category.name }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
{% else %}
|
|
<div class="tile">
|
|
{% if selected_category_slug %}
|
|
Нет сервисов в выбранной категории
|
|
{% else %}
|
|
Нет назначенных сервисов
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
<footer class="made-by-wrap"><a class="made-by" href="mailto:rgalyaviev@mont.com">Made by Galyaviev</a></footer>
|
|
</main>
|
|
<script>
|
|
(function () {
|
|
const username = {{ user.username|tojson }};
|
|
const key = `rules_ack_${username}`;
|
|
const banner = document.getElementById('rules-banner');
|
|
const btn = document.getElementById('rules-ack-btn');
|
|
if (!banner || !btn) return;
|
|
if (localStorage.getItem(key) === '1') {
|
|
banner.style.display = 'none';
|
|
return;
|
|
}
|
|
btn.addEventListener('click', function () {
|
|
localStorage.setItem(key, '1');
|
|
banner.style.display = 'none';
|
|
});
|
|
})();
|
|
|
|
(function () {
|
|
function clamp(value, min, max) {
|
|
return Math.max(min, Math.min(max, value));
|
|
}
|
|
|
|
function currentScreenParams() {
|
|
const width = clamp(window.innerWidth || document.documentElement.clientWidth || 1280, 320, 7680);
|
|
const height = clamp(window.innerHeight || document.documentElement.clientHeight || 720, 240, 4320);
|
|
const sp = new URLSearchParams();
|
|
sp.set('sw', String(width));
|
|
sp.set('sh', String(height));
|
|
return sp;
|
|
}
|
|
|
|
document.querySelectorAll('a.tile[href^="/go/"]').forEach(function (link) {
|
|
link.addEventListener('click', function () {
|
|
try {
|
|
const url = new URL(link.getAttribute('href'), window.location.origin);
|
|
const params = currentScreenParams();
|
|
url.search = params.toString();
|
|
link.setAttribute('href', url.pathname + '?' + url.searchParams.toString());
|
|
} catch (e) {}
|
|
}, { capture: true });
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|