6 Commits

16 changed files with 749 additions and 89 deletions

View File

@@ -8,9 +8,13 @@ server {
access_log /var/log/nginx/typograph.access.log;
error_log /var/log/nginx/typograph.error.log;
# SSL-сертификаты
# SSL-сертификаты (их добавит Let's Encrypt)
# Рекомендуемые SSL настройки
# Рекомендуемые SSL настройки (
# --- ЗАЩИТА ОТ БОЛЬШИХ ЗАПРОСОВ ---
# Ограничиваем максимальный размер тела запроса (например, 1MB)
client_max_body_size 1M;
# Медиа файлы (загруженные пользователями)
location /media/ {

View File

@@ -35,7 +35,12 @@ http {
access_log /dev/stdout;
error_log /dev/stderr warn;
# Настройки сжатия gzip для оптимизации передачи данных (сжимать будет nginx внутри контейнера)
# --- ЗАЩИТА ОТ БРУТФОРСА ---
# Создаем зону в памяти, где будут храниться IP-адреса (1MB -- 16000 IP).
# rate=5r/s - разрешаем 5 запросов в секунду (мягкий лимит).
limit_req_zone $binary_remote_addr zone=one:1m rate=5r/s;
# Настройки сжатия gzip
gzip on;
gzip_proxied any;
gzip_comp_level 6;
@@ -59,8 +64,22 @@ http {
# Убираем токены версии nginx для безопасности
server_tokens off;
# Прямая раздача favicon.ico (для поисковиков и браузеров)
# Это быстрее и надежнее, чем редирект через Django
# --- ЗАЩИТА ОТ БОЛЬШИХ ЗАПРОСОВ ---
# Ограничиваем максимальный размер тела запроса (например, 1MB)
client_max_body_size 1M;
# --- КАСТОМНЫЕ СТРАНИЦЫ ОШИБОК ---
error_page 500 /500.html;
error_page 502 /502.html;
error_page 503 /503.html;
error_page 504 /504.html;
location = /500.html { root /app/public/static_collected; internal; } # файл будет сюда скопирован при сборке образа
location = /502.html { root /app/public/static_collected; internal; }
location = /503.html { root /app/public/static_collected; internal; }
location = /504.html { root /app/public/static_collected; internal; }
# Прямая раздача favicon.ico
location = /favicon.ico {
alias /app/public/static_collected/favicon.ico;
access_log off;
@@ -69,6 +88,10 @@ http {
}
location / {
# --- ЗАЩИТА ОТ БРУТФОРСА ---
# Применяем зону 'one', разрешаем "всплеск" до 10 запросов.
limit_req zone=one burst=10 nodelay;
proxy_pass http://app_server;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;

View File

@@ -1,3 +1,11 @@
# Этот файл предназначен для продакшен окружения. Его необходимо скопировать на продакшн-сервер под именем
# `docker-compose.yml` в корневой каталог проекта.
# Перед запуском убедитесь, что в корне проекта есть файл `.env` с необходимыми переменными окружения.
# Также необходимо создать папки `data` и `media` в корне проекта и убедиться, что у пользователя, под которым
# запускается docker-контейнер, есть права на запись в эти папки.
# Для первого запуска backend-контейнера, возможно, потребуется временно изменить владельца папки `data` на root
# и раскомментировать соответствующие строки в секции etpgrf-backend (смотри комментарии в коде ниже).
version: '3.8'
services:
@@ -7,13 +15,43 @@ services:
image: git.cube2.ru/erjemin/2026-etpgrf-site:latest
# Перезапускать всегда (если упал или сервер перезагрузился)
restart: always
# Метка для Watchtower, чтобы он обновлял только этот контейнер
labels:
- "com.centurylinklabs.watchtower.scope=etpgrf"
# Запускаем миграции, потом collectstatic, потом сервер
command: sh -c "python etpgrf_site/manage.py migrate --noinput && python etpgrf_site/manage.py collectstatic --noinput && gunicorn --bind 0.0.0.0:8000 --chdir /app/etpgrf_site etpgrf_site.wsgi"
# !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
# При первом старте, временно запускаем как root, чтобы контейнер мог создать файл БД в хостовом томе
# ser: "0:0"
# command: >
# sh -c "mkdir -p /app/data &&
# chown -R 1000:1000 /app/data 2>/dev/null || true &&
# chmod -R 0775 /app/data 2>/dev/null || true &&
# python etpgrf_site/manage.py migrate --noinput &&
# python etpgrf_site/manage.py collectstatic --noinput &&
# cp /app/etpgrf_site/typograph/templates/500.html /app/public/static_collected/50x.html &&
# gunicorn --bind 0.0.0.0:8000 --chdir /app/etpgrf_site etpgrf_site.wsgi"
#
# После первого запуска, на хосте убедиться что файл БД создан. Возвращаем docker-compose.yml (это тот фал который
# вы сейчас читаете). После останавливаем контейнеры: и сменить владельца папки data. Для этого останавливаем контейнеры:
# `sudo docker-compose -f stop`
# возвращаем docker-compose.ym в исходный вид (этот файл). И снова запускаем:
# `sudo docker-compose -f docker-compose.prod.yml up -d`
# Теперь нам нужно узнать UID/GID пользователя внутри контейнера, выполнив на хосте команду:
# `sudo docker exec -it etpgrf-site-etpgrf-backend-1 id`
# Увидим что-то типа `uid=999(appuser) gid=999(appuser) groups=999(appuser)`. После этого сменить владельца папки
# data на хосте:
# `sudo chown -R 999:999 ./data`
# С папкой media можно сделать то же самое, если там будут проблемы с правами.
# `sudo chown -R 999:999 ./media`
#
# А обычно запускаем в безопасном режиме: миграции, потом collectstatic, потом копируем 500.html для Nginx, потом сервер
command: >
sh -c "python etpgrf_site/manage.py migrate --noinput &&
python etpgrf_site/manage.py collectstatic --noinput &&
cp /app/etpgrf_site/typograph/templates/500.html /app/public/static_collected/500.html &&
gunicorn --bind 0.0.0.0:8000 --chdir /app/etpgrf_site etpgrf_site.wsgi"
volumes:
# База данных (папка data должна быть создана на хосте)
@@ -36,11 +74,6 @@ services:
etpgrf-nginx:
image: nginx:1.25-alpine
restart: always
# Метка для Watchtower (хотя nginx:alpine обновляется редко, но пусть будет)
labels:
- "com.centurylinklabs.watchtower.scope=etpgrf"
volumes:
# Конфиг берем из репозитория
- ./config/nginx/etpgrf--internal-nginx.conf:/etc/nginx/nginx.conf:ro
@@ -76,7 +109,7 @@ services:
- WATCHTOWER_SCOPE=etpgrf
# Если нужно указать реестр явно (обычно watchtower сам понимает из имени образа)
# - WATCHTOWER_REGISTRY_URL=git.cube2.ru
command: --interval 300 --cleanup # Проверять каждые 5 минут
command: --interval 1800 --cleanup # Проверять каждые 30 минут
volumes:

View File

@@ -7,11 +7,6 @@ from django.contrib.staticfiles.storage import staticfiles_storage
urlpatterns = [
path(route='adm-in/', view=admin.site.urls),
path(
route="favicon.ico",
view=RedirectView.as_view(url=staticfiles_storage.url("favicon.ico")),
name="favicon",
),
path(route='', view=include('typograph.urls')),
]

View File

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ошибка сервера 404 — ETPGRF</title>
<style>
body {
background-color: #f8f8f2;
color: #1f1f19;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #151111;
color: #eceff1;
}
}
h1 {
font-size: 3.5rem;
font-weight: lighter;
margin-bottom: 1rem;
color: #00ccff99;
margin-left: 28px;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
margin-left: 28px;
opacity: 0.8;
line-height: 150%;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin-top: 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
color: #151111;
background-color: transparent;
border: #4a4a44 dashed 1px;
border-radius: 0.375rem;
}
@media (prefers-color-scheme: dark) {
h1 {
color: #00ccff99;
}
.btn {
border: #b0bec5 dashed 1px;
color: #fff;
}
}
.btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div style="top: 20%; position: relative;">
<a href="/">
<picture>
<source srcset="/static/svg/logo-etpgrf-site-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/static/svg/logo-etpgrf-site-light.svg"
alt="ETPGRF — единая типографика для веба" width="717" height="151">
</picture>
</a>
<h1>404: Страница не&nbsp;найдена</h1>
<p>
Запра&shy;шиваемая страница не&nbsp;найдена.<br/>
Контент мог быть удалён, перемещён или&nbsp;его тут никогда и&nbsp;не&nbsp;было.<br/>
<a class="btn" href="/">На&nbsp;главную</a>
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ошибка сервера 500 — ETPGRF</title>
<style>
body {
background-color: #f8f8f2;
color: #1f1f19;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #151111;
color: #eceff1;
}
}
h1 {
font-size: 3.5rem;
font-weight: lighter;
margin-bottom: 1rem;
color: #00ccff99;
margin-left: 28px;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
margin-left: 28px;
opacity: 0.8;
line-height: 150%;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin-top: 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
color: #151111;
background-color: transparent;
border: #4a4a44 dashed 1px;
border-radius: 0.375rem;
}
@media (prefers-color-scheme: dark) {
h1 {
color: #00ccff99;
}
.btn {
border: #b0bec5 dashed 1px;
color: #fff;
}
}
.btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div style="top: 20%; position: relative;">
<a href="/">
<picture>
<source srcset="/static/svg/logo-etpgrf-site-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/static/svg/logo-etpgrf-site-light.svg"
alt="ETPGRF — единая типографика для веба" width="717" height="151">
</picture>
</a>
<h1>500: Внутренняя ошибка сервера</h1>
<p>
Извините, что-то сломалось на&nbsp;сервере или пошло не&nbsp;так.<br/>
Пожалуйста, попробуйте позже.<br/>
<a class="btn" href="/">На&nbsp;главную</a>
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ошибка сервера 403 — ETPGRF</title>
<style>
body {
background-color: #f8f8f2;
color: #1f1f19;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #151111;
color: #eceff1;
}
}
h1 {
font-size: 3.5rem;
font-weight: lighter;
margin-bottom: 1rem;
color: #00ccff99;
margin-left: 28px;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
margin-left: 28px;
opacity: 0.8;
line-height: 150%;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin-top: 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
color: #151111;
background-color: transparent;
border: #4a4a44 dashed 1px;
border-radius: 0.375rem;
}
@media (prefers-color-scheme: dark) {
h1 {
color: #00ccff99;
}
.btn {
border: #b0bec5 dashed 1px;
color: #fff;
}
}
.btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div style="top: 20%; position: relative;">
<a href="/">
<picture>
<source srcset="/static/svg/logo-etpgrf-site-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/static/svg/logo-etpgrf-site-light.svg"
alt="ETPGRF — единая типографика для веба" width="717" height="151">
</picture>
</a>
<h1>403: Доступ запрещён, необходимо автори&shy;зоваться</h1>
<p>
Записанная в&nbsp;адресной строке страница требует аутенти&shy;фикации.<br/>
Пожалуйста, войдите в&nbsp;систему и&nbsp;повторите попытку.<br/>
<a class="btn" href="/">На&nbsp;главную</a>
</p>
</div>
</body>
</html>

View File

@@ -45,9 +45,9 @@
{# ШАПКА и главное меню #}
<nav id="main-navbar" class="navbar navbar-expand-lg mb-4">
<div class="container">
<div class="container p-0">
<a class="navbar-brand" href="/">
<img id="logo-img" class="logo-img" src=""
<img id="logo-img" class="logo-img p-0 m-0" src=""
data-src-light="{% static 'svg/logo-etpgrf-site-light.svg' %}"
data-src-light-compact="{% static 'svg/logo-etpgrf-site-light-compact.svg' %}"
data-src-dark="{% static 'svg/logo-etpgrf-site-dark.svg' %}"
@@ -64,16 +64,14 @@
{# Футер #}
<footer class="footer mt-auto py-2 mt-4">
<div class="container d-flex justify-content-between align-items-center">
<span class="text-muted small nowrap">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}.</span>
<span class="text-muted small nowrap me-2">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}.</span>
<span class="text-muted small nowrap"><i class="bi bi-tags me-1" title="Версия библиотеки etpgrf / Версия сайта"></i>v0.1.3 / v0.1.3</span>
<nobr class="text-muted small mx-2"><i class="bi bi-tags me-1" title="Версия библиотеки etpgrf / Версия сайта"></i>v0.1.3 / v0.1.5</nobr>
{# Сводная статистика (HTMX) #}
<span class="text-muted small" hx-get="{% url 'stats_summary' %}" hx-trigger="load">
<span class="text-muted small ms-2" hx-get="{% url 'stats_summary' %}" hx-trigger="load">
...
</span>
</div>
</footer>

View File

@@ -274,10 +274,13 @@
<label class="form-label fw-bold small text-muted ls-1 mb-0">
<i class="bi bi-code-slash me-1"></i> Результат обработки:
</label>
<div class="d-flex align-items-center">
<span id="processing-time" class="small text-muted me-3 nowrap"></span>
<button id="btn-copy" class="btn btn-sm btn-outline-secondary d-none" title="Копировать в буфер обмена">
<i class="bi bi-clipboard me-1"></i> Копировать в&nbsp;буфер обмена
</button>
</div>
</div>
<div id="cm-result-wrapper" class="result-box p-0"></div>
<div id="result-area" style="display: none;"></div>
</div>

View File

@@ -1,12 +1,12 @@
<span class="me-3" title="Просмотров">
<i class="bi bi-eye me-1"></i>{{ views }}
</span>
<span class="me-3 nowrap" title="На вход обработано текстов/символов">
<i class="bi bi-box-arrow-in-right me-1"></i>{{ processed }}/{{ chars_in }}
</span>
<span class="me-3" title="На выход получено символов">
<i class="bi bi-box-arrow-right me-1"></i>{{ chars_out }}
</span>
<span class="nowrap" title="Скопировано в буфер текстов/символов">
<i class="bi bi-clipboard-check me-1"></i>{{ copied }}/{{ chars_copied }}
</span>
{% load typograph_extras %}<nobr class="ms-3 float-end" title="Скопировано в буфер текстов/символов">
<i class="bi bi-clipboard-check me-1"></i>{{ copied|humanize_num }} / {{ chars_copied|humanize_num }}
</nobr>
<nobr class="ms-3 float-end" title="На выход получено символов">
<i class="bi bi-box-arrow-right me-1"></i>{{ chars_out|humanize_num }}
</nobr>
<nobr class="ms-3 float-end" title="На вход обработано текстов/символов">
<i class="bi bi-box-arrow-in-right me-1"></i>{{ processed|humanize_num }} / {{ chars_in|humanize_num }}
</nobr>
<nobr class="ms-3 float-end" title="Просмотров">
<i class="bi bi-eye me-1"></i>{{ views|humanize_num }}
</nobr>

View File

@@ -0,0 +1,45 @@
from django import template
from django.utils.safestring import mark_safe
register = template.Library()
@register.filter(name='humanize_num')
def humanize_num(value):
"""
Форматирует число с тонкими пробелами в качестве разделителя тысяч
и сокращает большие числа до M (миллионы) или k (тысячи).
Примеры:
1234 -> 1&thinsp;234
1234567 -> 1,2M
"""
try:
num = int(value)
if num > 1_000_000_000:
val = num / 1_000_000_000
suffix = "&thinsp;B"
elif num > 1_000_000:
val = num / 1_000_000
suffix = "&thinsp;M"
elif num > 1_000:
val = num / 1_000
suffix = "&thinsp;k"
else:
# Больше 1B -- форматируем с пробелами
return mark_safe(f"{num:,}".replace(",", "&thinsp;"))
# Форматируем float:
# {:,.1f} - разделитель тысяч (запятая) и 1 знак после точки
# 1234567.89 -> "1,234,567.9"
formatted = f"{val:,.2f}"
# Меняем английскую запятую (разделитель тысяч) на тонкий пробел
# Меняем английскую точку (десятичный разделитель) на запятую
# Но тут проблема: replace делает все сразу.
# "1,234.5" -> replace(",", " ") -> "1 234.5" -> replace(".", ",") -> "1 234,5"
formatted = formatted.replace(",", "&thinsp;").replace(".", ",")
return mark_safe(f"{formatted}{suffix}")
except (ValueError, TypeError):
return value

View File

@@ -7,6 +7,7 @@ from etpgrf.typograph import Typographer
from etpgrf.layout import LayoutProcessor
from etpgrf.hyphenation import Hyphenator
from .models import DailyStat
import time
def index(request):
@@ -23,7 +24,7 @@ def index(request):
def get_stats_summary(request):
"""Возвращает сводную статистику."""
# Убираем try...except для отладки
try:
stats = DailyStat.objects.aggregate(
views=Sum('index_views'),
processed=Sum('process_requests'),
@@ -32,26 +33,19 @@ def get_stats_summary(request):
chars_out=Sum('chars_out'),
chars_copied=Sum('chars_copied')
)
# print("Aggregated stats:", stats) # DEBUG
# Функция для форматирования чисел с сокращениями (M, k)
def format_large_number(num):
if num > 1_000_000:
return f"{num / 1_000_000:.3f}M".replace(".", ",")
elif num > 1_000:
return f"{num / 1_000:.2f}k".replace(".", ",")
return str(num)
context = {
'views': f"{(stats['views'] or 0):,}".replace(",", "&thinsp;"),
'processed': f"{(stats['processed'] or 0):,}".replace(",", "&thinsp;"),
'copied': f"{(stats['copied'] or 0):,}".replace(",", "&thinsp;"),
'chars_in': format_large_number(stats['chars_in'] or 0),
'chars_out': format_large_number(stats['chars_out'] or 0),
'chars_copied': format_large_number(stats['chars_copied'] or 0),
'views': stats['views'] or 0,
'processed': stats['processed'] or 0,
'copied': stats['copied'] or 0,
'chars_in': stats['chars_in'] or 0,
'chars_out': stats['chars_out'] or 0,
'chars_copied': stats['chars_copied'] or 0,
}
return render(request, 'typograph/stats_summary.html', context)
except Exception:
return HttpResponse("...")
@require_POST
@@ -138,39 +132,71 @@ def process_text(request):
'sanitizer': sanitizer_option,
}
# --- ДИАГНОСТИКА ---
# print("Typographer options:", options)
# -------------------
# Создаем экземпляр типографа
# Обрабатываем текст с замером времени
start_time = time.perf_counter()
# Создаем экземпляр типографа и передаем настройки в него
typo = Typographer(**options)
# Обрабатываем текст
# Обрабатываем текст в Типографе
processed = typo.process(text)
end_time = time.perf_counter()
duration_ms = (end_time - start_time) * 1000
# --- СБОР СТАТИСТИКИ ---
try:
today = timezone.now().date()
stat, created = DailyStat.objects.get_or_create(date=today)
# Обновляем атомарные поля
# 1. Атомарное обновление счетчиков
DailyStat.objects.filter(pk=stat.pk).update(
process_requests=F('process_requests') + 1,
chars_in=F('chars_in') + len(text),
chars_out=F('chars_out') + len(processed),
# total_processing_time_ms мы пока не считаем, чтобы не усложнять
total_processing_time_ms=F('total_processing_time_ms') + duration_ms
)
# JSON с настройками пока не пишем, чтобы не усложнять (как договаривались)
# 2. Обновление JSON с настройками (не атомарно, а значит при высокой нагрузке возможны потери данных)
# Перечитываем объект, чтобы получить актуальный JSON
stat.refresh_from_db()
current_stats = stat.settings_stats
def inc_stat(key, value):
k = f"{key}:{value}"
current_stats[k] = current_stats.get(k, 0) + 1
# Собираем статистику по опциям
# langs может быть строкой или списком
lang_val = options['langs']
if isinstance(lang_val, list):
lang_val = lang_val[0] if lang_val else 'ru'
inc_stat('lang', lang_val)
inc_stat('mode', options['mode'])
if options['quotes']: inc_stat('feature', 'quotes')
if layout_enabled: inc_stat('feature', 'layout')
if options['unbreakables']: inc_stat('feature', 'unbreakables')
if hyphenation_enabled: inc_stat('feature', 'hyphenation')
if options['symbols']: inc_stat('feature', 'symbols')
if hanging_enabled: inc_stat('feature', 'hanging')
if sanitizer_enabled: inc_stat('feature', 'sanitizer')
stat.settings_stats = current_stats
stat.save(update_fields=['settings_stats'])
except Exception as e:
print(f"Stat error: {e}")
# -----------------------
return render(
response = render(
request,
template_name='typograph/result_fragment.html',
context={'processed_text': processed}
)
# Добавляем заголовок с временем обработки (с запятой вместо точки)
response['X-Processing-Time'] = f"{duration_ms:.4f}".replace('.', ',')
return response
return HttpResponse(status=405)

87
public/static/502.html Normal file
View File

@@ -0,0 +1,87 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ошибка сервера 502 — ETPGRF</title>
<style>
body {
background-color: #f8f8f2;
color: #1f1f19;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #151111;
color: #eceff1;
}
}
h1 {
font-size: 3.5rem;
font-weight: lighter;
margin-bottom: 1rem;
color: #00ccff99;
margin-left: 28px;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
margin-left: 28px;
opacity: 0.8;
line-height: 150%;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin-top: 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
color: #151111;
background-color: transparent;
border: #4a4a44 dashed 1px;
border-radius: 0.375rem;
}
@media (prefers-color-scheme: dark) {
h1 {
color: #00ccff99;
}
.btn {
border: #b0bec5 dashed 1px;
color: #fff;
}
}
.btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div style="top: 20%; position: relative;">
<a href="/">
<picture>
<source srcset="/static/svg/logo-etpgrf-site-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/static/svg/logo-etpgrf-site-light.svg"
alt="ETPGRF — единая типографика для веба" width="717" height="151">
</picture>
</a>
<h1>502: Bad Gateway</h1>
<p>
Внутренняя ошибка сервера.<br/>
Недоступен Gunicorn-сервис, база данных или&nbsp;произошла ошибка при&nbsp;обработке запроса.<br />
Пожалуйста, попробуйте позже.<br/>
<a class="btn" href="/">На&nbsp;главную</a>
</p>
</div>
</body>
</html>

86
public/static/503.html Normal file
View File

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ошибка сервера 503 — ETPGRF</title>
<style>
body {
background-color: #f8f8f2;
color: #1f1f19;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #151111;
color: #eceff1;
}
}
h1 {
font-size: 3.5rem;
font-weight: lighter;
margin-bottom: 1rem;
color: #00ccff99;
margin-left: 28px;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
margin-left: 28px;
opacity: 0.8;
line-height: 150%;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin-top: 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
color: #151111;
background-color: transparent;
border: #4a4a44 dashed 1px;
border-radius: 0.375rem;
}
@media (prefers-color-scheme: dark) {
h1 {
color: #00ccff99;
}
.btn {
border: #b0bec5 dashed 1px;
color: #fff;
}
}
.btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div style="top: 20%; position: relative;">
<a href="/">
<picture>
<source srcset="/static/svg/logo-etpgrf-site-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/static/svg/logo-etpgrf-site-light.svg"
alt="ETPGRF — единая типографика для веба" width="717" height="151">
</picture>
</a>
<h1>503: Слишком много запросов</h1>
<p>
Сервер временно перегружен запросами или&nbsp;находится на&nbsp;техническом обслуживании.<br/>
Пожалуйста, попробуйте позже.<br/>
<a class="btn" href="/">На&nbsp;главную</a>
</p>
</div>
</body>
</html>

87
public/static/504.html Normal file
View File

@@ -0,0 +1,87 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ошибка сервера 50x — ETPGRF</title>
<style>
body {
background-color: #f8f8f2;
color: #1f1f19;
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #151111;
color: #eceff1;
}
}
h1 {
font-size: 3.5rem;
font-weight: lighter;
margin-bottom: 1rem;
color: #00ccff99;
margin-left: 28px;
}
p {
font-size: 1.5rem;
margin-bottom: 2rem;
margin-left: 28px;
opacity: 0.8;
line-height: 150%;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
margin-top: 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
color: #151111;
background-color: transparent;
border: #4a4a44 dashed 1px;
border-radius: 0.375rem;
}
@media (prefers-color-scheme: dark) {
h1 {
color: #00ccff99;
}
.btn {
border: #b0bec5 dashed 1px;
color: #fff;
}
}
.btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div style="top: 20%; position: relative;">
<a href="/">
<picture>
<source srcset="/static/svg/logo-etpgrf-site-dark.svg" media="(prefers-color-scheme: dark)">
<img src="/static/svg/logo-etpgrf-site-light.svg"
alt="ETPGRF — единая типографика для веба" width="717" height="151">
</picture>
</a>
<h1>504: Gateway Timeout</h1>
<p>
Сервер не&nbsp;смог ответить вовремя.<br/>
Возможно, текст для&nbsp;типографа слишком большой илия&nbsp;сервер перегружен.<br/>
Пожалуйста, попробуйте позже.<br/>
<a class="btn" href="#">Обновить страницу</a>
</p>
</div>
</body>
</html>

View File

@@ -21,6 +21,7 @@ import {
const resultWrapper = document.getElementById('cm-result-wrapper');
const btnCopy = document.getElementById('btn-copy');
const sourceTextarea = document.querySelector('textarea[name="text"]');
const processingTimeSpan = document.getElementById('processing-time');
const themeCompartment = new Compartment();
function getTheme() {
@@ -100,6 +101,17 @@ document.body.addEventListener('htmx:afterSwap', function (evt) {
if (btnCopy) {
btnCopy.classList.remove('d-none');
}
// Показываем время обработки из заголовка
if (processingTimeSpan) {
const time = evt.detail.xhr.getResponseHeader('X-Processing-Time');
if (time) {
processingTimeSpan.innerHTML = `<i class="bi bi-cpu me-1"></i>${time}&thinsp;ms`;
processingTimeSpan.style.display = 'inline';
} else {
processingTimeSpan.style.display = 'none';
}
}
}
});
@@ -109,6 +121,9 @@ if (sourceTextarea) {
if (btnCopy) {
btnCopy.classList.add('d-none');
}
if (processingTimeSpan) {
processingTimeSpan.innerText = '';
}
// Сбрасываем редактор на плейсхолдер
if (resultView.state.doc.toString() !== PLACEHOLDER_TEXT) {
resultView.dispatch({