add: шаблон для ошибки (3)
This commit is contained in:
@@ -1444,12 +1444,30 @@ class BlogPostModelAndAdminTests(BaseMediaTestCase):
|
|||||||
self.assertEqual(resp_list.status_code, 200)
|
self.assertEqual(resp_list.status_code, 200)
|
||||||
self.assertContains(resp_list, "Центр отладки страниц ошибок")
|
self.assertContains(resp_list, "Центр отладки страниц ошибок")
|
||||||
self.assertContains(resp_list, "/_error/404")
|
self.assertContains(resp_list, "/_error/404")
|
||||||
|
self.assertContains(resp_list, "готов к просмотру")
|
||||||
|
|
||||||
# 2. Предпросмотр конкретной ошибки 404
|
# 2. Проверка каждого кода ошибки
|
||||||
resp_404 = self.client.get("/_error/404")
|
expected_checks = [
|
||||||
self.assertEqual(resp_404.status_code, 404)
|
("400", 400, "Сбой ментального протокола"),
|
||||||
self.assertContains(resp_404, "Гипноузел не обнаружен", status_code=404)
|
("401", 401, "Требуется ментальная идентификация"),
|
||||||
self.assertContains(resp_404, "СБОЙ МАТРИЦЫ // КОД? 404", status_code=404)
|
("403", 403, "Отказано бюрократом 24-го уровня"),
|
||||||
|
("404", 404, "Гипноузел не обнаружен"),
|
||||||
|
("413", 413, "Перегрузка сенсорных каналов"),
|
||||||
|
("429", 429, "Слишком много мыслей в секунду"),
|
||||||
|
("500", 500, "Критический перегрев неокортекса"),
|
||||||
|
("502", 502, "Контейнер потерял сознание"),
|
||||||
|
("503", 503, "Плановый сеанс гипнотерапии"),
|
||||||
|
("504", 504, "Разрыв астральной связи"),
|
||||||
|
("under_reconstruction", 200, "Сектор на реконструкции"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for code, expected_status, text_fragment in expected_checks:
|
||||||
|
resp = self.client.get(f"/_error/{code}")
|
||||||
|
self.assertEqual(resp.status_code, expected_status, f"Ошибка при проверке кода {code}")
|
||||||
|
self.assertContains(resp, text_fragment, status_code=expected_status)
|
||||||
|
self.assertContains(resp, "return-btn", status_code=expected_status)
|
||||||
|
self.assertContains(resp, "logo-hypn0.svg", status_code=expected_status)
|
||||||
|
self.assertContains(resp, "thinking.svg", status_code=expected_status)
|
||||||
|
|
||||||
# 3. Предпросмотр с суффиксом .html
|
# 3. Предпросмотр с суффиксом .html
|
||||||
resp_404_html = self.client.get("/_error/404.html")
|
resp_404_html = self.client.get("/_error/404.html")
|
||||||
@@ -1460,3 +1478,30 @@ class BlogPostModelAndAdminTests(BaseMediaTestCase):
|
|||||||
resp_non_existent = self.client.get("/_error/non-existent-code-999")
|
resp_non_existent = self.client.get("/_error/non-existent-code-999")
|
||||||
self.assertEqual(resp_non_existent.status_code, 404)
|
self.assertEqual(resp_non_existent.status_code, 404)
|
||||||
self.assertContains(resp_non_existent, "Шаблон для ошибки 'non-existent-code-999' не найден", status_code=404)
|
self.assertContains(resp_non_existent, "Шаблон для ошибки 'non-existent-code-999' не найден", status_code=404)
|
||||||
|
|
||||||
|
def test_custom_django_error_handlers(self):
|
||||||
|
"""Проверка прямого вызова стандартных Django-обработчиков ошибок."""
|
||||||
|
from django.test import RequestFactory
|
||||||
|
from hypn0_site.views import error_400, error_403, error_404, error_500
|
||||||
|
|
||||||
|
factory = RequestFactory()
|
||||||
|
|
||||||
|
req400 = factory.get("/bad-request")
|
||||||
|
resp400 = error_400(req400)
|
||||||
|
self.assertEqual(resp400.status_code, 400)
|
||||||
|
self.assertIn("Сбой ментального протокола", resp400.content.decode("utf-8"))
|
||||||
|
|
||||||
|
req403 = factory.get("/forbidden")
|
||||||
|
resp403 = error_403(req403)
|
||||||
|
self.assertEqual(resp403.status_code, 403)
|
||||||
|
self.assertIn("Отказано бюрократом 24-го уровня", resp403.content.decode("utf-8"))
|
||||||
|
|
||||||
|
req404 = factory.get("/not-found")
|
||||||
|
resp404 = error_404(req404)
|
||||||
|
self.assertEqual(resp404.status_code, 404)
|
||||||
|
self.assertIn("Гипноузел не обнаружен", resp404.content.decode("utf-8"))
|
||||||
|
|
||||||
|
req500 = factory.get("/server-error")
|
||||||
|
resp500 = error_500(req500)
|
||||||
|
self.assertEqual(resp500.status_code, 500)
|
||||||
|
self.assertIn("Критический перегрев неокортекса", resp500.content.decode("utf-8"))
|
||||||
|
|||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>400 — Сбой ментального протокола | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 400: Некорректный запрос к матрице HypnoSVG. Сервер не распознал структуру переданного сигнала." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="400 Bad Request Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">СБОЙ МАТРИЦЫ // КОД 400</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Сбой перцепционного протокола</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Клиент искажает ментальные сигналы или имеет невалидную структуру биоритмов мозговых данных. Неокортекс сервера отверг запрос из-за синтаксического диссонанса.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Некорректно сформулированная мысль разрушает гармонию халфтона. Перепроверьте параметры запроса перед повторным сеансом внушения.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Сбросить параметры и вернуться</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.history.length > 1 ? window.history.back() : window.location.href='/'">
|
||||||
|
<span>← На шаг назад</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация очистки буфера…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 400 BAD REQUEST █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Декодируем искажённые байты входящего сигнала…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Бюрократ 24-го уровня отклоняет невалидный пакет…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Очищаем буфер неокортекса от ментального шума…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Протокол сброшен! Возвращаемся на главную…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>401 — Требуется ментальная идентификация | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 401: Доступ к закрытому узлу HypnoSVG требует прохождения авторизации." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="401 Unauthorized Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">ОГРАНИЧЕНИЕ ДОСТУПА // КОД 401</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Требуется ментальная идентификация</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Вы попытались проникнуть в закрытый сектор подсознания без действующего пропуска или аутентификационного чипа.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Свободная ментальность и анонимные мысли не допускаются к генераторам высшего порядка. Предъявите биометрический слепок или вернитесь в общий сектор.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Вернуться в общий сектор</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.history.length > 1 ? window.history.back() : window.location.href='/'">
|
||||||
|
<span>← На шаг назад</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация сканирования биометрии…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 401 UNAUTHORIZED █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Сканируем ментальные отпечатки и токены доступа…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Проверяем наличие чипа мозгового слизня…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Бюрократ 24-го уровня фиксирует отсутствие пропуска…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Идентификация отклонена! Телепор­тация в безопасную зону…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>403 — Отказано бюрократом 24-го уровня | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 403: Доступ к ресурсу категорически запрещен протоколами безопасности HypnoSVG." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="403 Forbidden Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">ДОСТУП ЗАБЛОКИРОВАН // КОД 403</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Ментальная блокировка</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
У вас нет достаточного уровня перцепционного допуска для просмотра этого сектора подсознания. Вердикт окончательный и обжалованию не подлежит.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Форма 38-Б о праве на любопытство не была заверена в Центральном Бюрократическом Управлении. Несанкционированное созерцание карается понижением до 34-го уровня.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Принять запрет и вернуться</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.history.length > 1 ? window.history.back() : window.location.href='/'">
|
||||||
|
<span>← На шаг назад</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация проверки гербовых печатей…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 403 FORBIDDEN █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Проверяем гербовые печати и визы Центрального Бюро…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Выписываем штраф за несанкционированное любопытство…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Блокируем блоки краткосрочной памяти и транспорт в гипокамп…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Протокол закрыт! Перенаправ­ление на главную…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>413 — Перегрузка сенсорных каналов | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 413: Загружаемый файл превышает допустимый размер ментального буфера HypnoSVG." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="413 Payload Too Large Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">ПРЕВЫШЕН ЛИМИТ // КОД 413</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Перегрузка сенсорных каналов</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Загружаемое изображение оказалось слишком массивным для восприятия ментальной матрицей. Сервер перцепций отказался поглощать такой объём байтов.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Попытка скормить гигабайты растра хрупкому SVG-генератору расценивается как диверсия. Уменьшите разрешение или сожмите файл перед повторной загрузкой в ментальную матрицу.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Сжать восприятие и вернуться</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.history.length > 1 ? window.history.back() : window.location.href='/'">
|
||||||
|
<span>← На шаг назад</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация сброса переполненного буфера…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 413 PAYLOAD TOO LARGE █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Сбрасываем перегруженный ментальный буфер входного потока…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Охлаждаем приемные каналы Nginx жидким азотом…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Бюрократ 24-го уровня успокаивает перцепционные волны ментальности…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Буфер чист! Возвращаемся к генератору…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>429 — Слишком много мыслей в секунду | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 429: Превышен лимит запросов к генератору HypnoSVG. Сделайте ментальную паузу." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="429 Too Many Requests Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">ЗАЩИТА ОТ СПАМА // КОД 429</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Слишком много мыслей в секунду</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Вы отправляете импульсы быстрее, чем Гипножаба успевает перемигиваться. Включена защита от ментального спама и перегрева процессоров.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Перцепционный генератор требует расслабленного состояния мышления, а не ментальных судорог и урагана кликов. Сделайте глубокий вдох, сосчитайте до сорока двух и позвольте трансу стабилизироваться.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Остудить пыл и вернуться</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.history.length > 1 ? window.history.back() : window.location.href='/'">
|
||||||
|
<span>← На шаг назад</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация медитативного охлаждения…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 429 TOO MANY REQUESTS █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Замедляем частоту синаптических импульсов…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Восстанавливаем квоту запросов в реестре Гипножабы…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Приводим сознание в состояние медитативного покоя…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Лимиты восстановлены! Возвращаемся на главную…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>500 — Критический перегрев неокортекса | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 500: Внутренний сбой сервера HypnoSVG. Ведутся ментальные восстановительные работы." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="500 Internal Server Error Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">АВАРИЯ СЕРВЕРА // КОД 500</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Нейроклинч интроспекций</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Внутренний обработчик Т-волн подсознания столкнулся с непредвиденным логическим парадоксом. Ментальные службы уже приведены в состояние боевого транса.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Стек вызовов испустил синий дым, но паника строго запрещена циркуляром №16. Гипножаба, Мозгоклюй и дежурные Бри-Гады мозговых слизней уже инспектируют упавший поток перцепции и устраняет ментальную деградацию.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Дождаться регенерации и вернуться</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.location.reload()">
|
||||||
|
<span>↻ Повторить попытку</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация аварийной регенерации ядра…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 500 INTERNAL SERVER ERROR █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Локализуем утечку астральной памяти в ядре сервера…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Бюрократ 24-го уровня перезапускает упавший процесс…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Гипножаба восстанавливает гармонию матриц неокотекса…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Ядро стабилизировано! Телепор­тация на главную…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>502 — Контейнер потерял сознание | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 502: Прокси-сервер не получил ответа от бэкенда HypnoSVG." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="502 Bad Gateway Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">ОБРЫВ ШЛЮЗА // КОД 502</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Нет связи с Гипокампом</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Прокси-сервер Nginx послал импульс через энторинальную кору в Django-гипокамп, но обратный синапсический отклик потерян. Аксоны в состоянии звенящей астральной пустоты.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Gunicorn ушёл в глубокую интроспекцию или временно дезориентирован в docker-пространстве. Бри-Гады мозговых слизней уже инспектируют упавший поток перцепции и устраняет ментальную деградацию.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Восстановить связь и вернуться</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.location.reload()">
|
||||||
|
<span>↻ Перезагрузить страницу</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация реанимации шлюза…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 502 BAD GATEWAY █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Пингуем упавший контейнер интроспекций через Unix-сокеты…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Подаем разряд бodрящих волн Шумана в воркеры Gunicorn…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Прокси-шлюз Nginx восстанавливает ментальный маршрут…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Мост налажен! Возвращаемся на главную…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>503 — Плановый сеанс гипнотерапии | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 503: Сервис HypnoSVG временно недоступен из-за технического обслуживания или пиковой нагрузки." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="503 Service Unavailable Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">ТЕХОБСЛУЖИВАНИЕ // КОД 503</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Плановый сеанс гипнотерапии</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Сервер временно закрыт на калибровку ментальных матриц или испытывает запредельный наплыв адептов Гипножабы.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Проводятся регламентные работы по смазке осей гипнотических нейроспиралей и продувке камер интроспекций халфтона. Задействованы усиленные технические Бри-Гады мозговых слизней под надзором Мозгоклюя. Скоро сервис вернётся в строй.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Дождаться окончания сеанса</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.location.reload()">
|
||||||
|
<span>↻ Проверить статус</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация технической диагностики…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 503 SERVICE UNAVAILABLE █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Калибруем точность алгоритмов смыслового мерцания…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Смазываем оси гипнотических спиралей…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Бюрократ 24-го уровня завершает технический аудит…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Профилактика завершена без подписания акта о выполнении работ! Телепор­тация на главную…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>504 — Разрыв астральной связи | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Ошибка 504: Превышено время ожидания ответа от вышестоящего сервера HypnoSVG." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="504 Gateway Timeout Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">ТАЙМАУТ ШЛЮЗА // КОД 504</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Разрыв астральной связи</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Вышестоящий перцептивный узел в состоянии рекурсивной интроспекции и не успевает ответить в отведённый квант времени.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Время — понятие относительное, но таймаут Nginx абсолютен. Ментальный транс осознанных сновидений думателя прерван во избежание <nobr>зацикливания нейро-континуума.</nobr></em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Восстановить таймлайн и вернуться</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.location.reload()">
|
||||||
|
<span>↻ Повторить запрос</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация синхронизации таймлайна…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ ERROR 504 GATEWAY TIMEOUT █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Прерываем бесконечные квантовые вычисления…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Перезапускаем таймеры ожидания шлюза Nginx…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Синхронизируем ментальное состояние с сервером Гипножабы…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Связь восстановлена! Возвращаемся на главную…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,481 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Реконструкция матрицы | HypnoSVG</title>
|
||||||
|
<meta name="description" content="Сектор временно закрыт на квантовую реконструкцию и модернизацию алгоритмов HypnoSVG." />
|
||||||
|
<meta name="robots" content="noindex, follow" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg" />
|
||||||
|
<link rel="shortcut icon" href="/static/img/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var saved = localStorage.getItem('darkMode');
|
||||||
|
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
if (saved === 'true' || (saved === null && prefersDark)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #fafaf9;
|
||||||
|
--bg-header: rgba(243, 244, 246, 0.85);
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-main: #047857;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--text-dim: #9ca3af;
|
||||||
|
--border-color: #d1d5db;
|
||||||
|
--accent-color: #059669;
|
||||||
|
--accent-bg: #ecfdf5;
|
||||||
|
--btn-bg: #059669;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
--btn-hover: #047857;
|
||||||
|
--progress-bg: #e5e7eb;
|
||||||
|
--progress-fill: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--bg-color: #09090b;
|
||||||
|
--bg-header: rgba(30, 41, 59, 0.75);
|
||||||
|
--bg-card: #18181b;
|
||||||
|
--text-main: #d9f99d;
|
||||||
|
--text-muted: #a1a1aa;
|
||||||
|
--text-dim: #71717a;
|
||||||
|
--border-color: #27272a;
|
||||||
|
--accent-color: #a3e635;
|
||||||
|
--accent-bg: #14280f;
|
||||||
|
--btn-bg: #a3e635;
|
||||||
|
--btn-text: #09090b;
|
||||||
|
--btn-hover: #bef264;
|
||||||
|
--progress-bg: #27272a;
|
||||||
|
--progress-fill: #a3e635;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: var(--bg-header);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 80rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 2.25rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-main);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2.5rem 1rem 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2.5rem 1.75rem;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art {
|
||||||
|
width: min(300px, 100%);
|
||||||
|
height: 300px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
animation: spin-spiral 40s linear infinite;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-spiral {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.error-art img, .error-art svg {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-code-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hypno-quote {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-left: 4px solid var(--accent-color);
|
||||||
|
padding: 0.875rem 1.25rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.925rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
max-width: 42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.875rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.85rem 1.75rem;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
min-width: min(16rem, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.85;
|
||||||
|
cursor: wait;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Задержка и смешные сообщения перекалибровки */
|
||||||
|
.calibration-panel {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border: 1px dashed var(--accent-color);
|
||||||
|
text-align: left;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: var(--progress-fill);
|
||||||
|
transition: width 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-status {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-main);
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-subtext {
|
||||||
|
font-size: 0.775rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instant-link {
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.775rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-grid {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-dim);
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<a href="/" class="logo-link" title="HypnoSVG (hypn0) — На главную">
|
||||||
|
<img src="/static/img/logo-hypn0.svg" onerror="this.onerror=null; this.src='/media/_error/logo-hypn0.svg';" alt="HypnoSVG" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<button type="button" class="theme-toggle" id="theme-btn" aria-label="Переключить тему" title="Переключить тему">
|
||||||
|
<span id="theme-icon">●</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="error-card">
|
||||||
|
<div class="error-art">
|
||||||
|
<img src="/static/img/thinking.svg" onerror="this.onerror=null; this.src='/media/_error/thinking.svg';" alt="Under Reconstruction Slug" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="error-code-badge">РЕКОНСТРУКЦИЯ ИНТРОСПЕКЦИИ</div>
|
||||||
|
|
||||||
|
<h1 class="error-title">Отдел мозга на реконструкции</h1>
|
||||||
|
|
||||||
|
<p class="error-desc">
|
||||||
|
Узел ментальной матрицы перестраивается по бредо-чертежам Гипножабы. Бри-Гады мозговых слизней под контролем Мозгоклюя разворачивают новый слой интроспекций. Скоро здесь появится нечто гипнотически непознаваемое.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hypno-quote">
|
||||||
|
<big>Справка бюрократа 24-го уровня:</big><br/> <br/>
|
||||||
|
<span style="margin-left: -0.49em;">«</span><em>Ведутся строительно-монтажные работы по укладке новых векторных силовых линий. Проход без мантальной каски и без вживленного мозгового слизня ограничен даже гражданам в глубоком трансе.</em>»
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-box">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary" id="return-btn">
|
||||||
|
<span>● Попытка вынырнуть из интроспекции</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="window.history.length > 1 ? window.history.back() : window.location.href='/'">
|
||||||
|
<span>← На шаг назад</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Панель калибровки с задержкой и смешными фразами -->
|
||||||
|
<div class="calibration-panel" id="calibration-panel">
|
||||||
|
<div class="calibration-status" id="calibration-status">
|
||||||
|
Инициа­лизация перемещения из зоны работ…
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<div class="progress-bar-fill" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="calibration-subtext">
|
||||||
|
<span>Снижение ментальной нагрузки на кластер</span>
|
||||||
|
<a href="/" class="instant-link" id="skip-link">Пройти гипноз мгновенно →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="ascii-grid">░▒▓█ UNDER RECONSTRUCTION █▓▒░</div>
|
||||||
|
<div>Hypn0.xyz (HypnoSVG) © 2026. Слава Гипножабе. Все права подчинены.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 1. Управление темой оформления (Light / Dark)
|
||||||
|
var themeBtn = document.getElementById('theme-btn');
|
||||||
|
var themeIcon = document.getElementById('theme-icon');
|
||||||
|
|
||||||
|
function updateThemeIcon() {
|
||||||
|
var isDark = document.documentElement.classList.contains('dark');
|
||||||
|
themeIcon.textContent = isDark ? '●' : '○';
|
||||||
|
}
|
||||||
|
updateThemeIcon();
|
||||||
|
|
||||||
|
themeBtn.addEventListener('click', function() {
|
||||||
|
var isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('darkMode', isDark);
|
||||||
|
updateThemeIcon();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Умная кнопка с задержкой и смешными сообщениями перекалибровки
|
||||||
|
var returnBtn = document.getElementById('return-btn');
|
||||||
|
var calibPanel = document.getElementById('calibration-panel');
|
||||||
|
var calibStatus = document.getElementById('calibration-status');
|
||||||
|
var progressBar = document.getElementById('progress-bar');
|
||||||
|
var isCalibrating = false;
|
||||||
|
|
||||||
|
var phrases = [
|
||||||
|
{ at: 0, text: "✦ Фаза 1/4: Закладываем квантовый фундамент новой функциональности…" },
|
||||||
|
{ at: 25, text: "✦ Фаза 2/4: Монтируем передовые генераторы векторных паттернов…" },
|
||||||
|
{ at: 55, text: "✦ Фаза 3/4: Бюрократ 24-го уровня согласует счет-фактуру…" },
|
||||||
|
{ at: 85, text: "✦ Фаза 4/4: Акт согласования готов! Это не поможет, но возвращаемся в активную зону сайта…" }
|
||||||
|
];
|
||||||
|
|
||||||
|
returnBtn.addEventListener('click', function() {
|
||||||
|
if (isCalibrating) return;
|
||||||
|
isCalibrating = true;
|
||||||
|
|
||||||
|
returnBtn.disabled = true;
|
||||||
|
returnBtn.style.opacity = '0.7';
|
||||||
|
returnBtn.innerHTML = '<span>Выполняется внушение…</span>';
|
||||||
|
calibPanel.style.display = 'block';
|
||||||
|
|
||||||
|
var duration = 12000;
|
||||||
|
var startTime = Date.now();
|
||||||
|
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
var elapsed = Date.now() - startTime;
|
||||||
|
var progress = Math.min(100, Math.round((elapsed / duration) * 100));
|
||||||
|
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
|
||||||
|
// Подбираем актуальную смешную фразу
|
||||||
|
for (var i = phrases.length - 1; i >= 0; i--) {
|
||||||
|
if (progress >= phrases[i].at) {
|
||||||
|
calibStatus.innerHTML = phrases[i].text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user