223 lines
9.5 KiB
HTML
223 lines
9.5 KiB
HTML
{% load static %}<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
|
||
{# Favicons #} <link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" sizes="96x96" />
|
||
<link rel="icon" href="{% static 'favicon-light.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: light)">
|
||
<link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)">
|
||
<link rel="icon" type="image/svg+xml" href="{% static 'favicon.svg' %}" />
|
||
{# Fallback для старых браузеров #}<link rel="shortcut icon" href="{% static 'favicon.ico' %}" sizes="any" />
|
||
{# iOS Icon #}<link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
|
||
<link rel="manifest" href="{% static 'site.webmanifest' %}" />
|
||
{# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||
{# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
|
||
{# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||
{# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
{# Polyfill for Import Maps #}<script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
// Автоматическое переключение темы (Dark/Light)
|
||
(function() {
|
||
function updateTheme(e) {
|
||
const theme = e.matches ? 'dark' : 'light';
|
||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||
}
|
||
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
updateTheme(darkModeMediaQuery); // Установить при загрузке
|
||
darkModeMediaQuery.addEventListener('change', updateTheme); // Слушать изменения
|
||
})();
|
||
</script>
|
||
|
||
<style>
|
||
/* Небольшие стили для красоты */
|
||
body { background-color: var(--bs-body-bg); }
|
||
.result-box {
|
||
/* Используем переменные Bootstrap для адаптации к теме */
|
||
background: var(--bs-body-bg);
|
||
color: var(--bs-body-color);
|
||
border: 1px solid var(--bs-border-color);
|
||
border-radius: 0.375rem;
|
||
padding: 1rem;
|
||
min-height: 300px;
|
||
/* Для корректного отображения висячей пунктуации нужен отступ слева/справа */
|
||
padding-left: 1.5rem;
|
||
padding-right: 1.5rem;
|
||
white-space: pre-wrap; /* Чтобы pre переносил строки */
|
||
font-family: inherit; /* Наследуем шрифт, если это pre */
|
||
}
|
||
/* Стили для CodeMirror, чтобы он вписался в Bootstrap */
|
||
.cm-editor {
|
||
border: 1px solid var(--bs-border-color);
|
||
border-radius: 0.375rem;
|
||
height: 300px; /* Фиксированная высота */
|
||
}
|
||
|
||
/* --- Висячая пунктуация (Hanging Punctuation) --- */
|
||
/* Слева */
|
||
.result-box .etp-laquo { margin-left: -0.44em; }
|
||
.result-box .etp-ldquo { margin-left: -0.44em; }
|
||
.result-box .etp-lpar { margin-left: -0.3em; }
|
||
.result-box .etp-lsqb { margin-left: -0.3em; }
|
||
.result-box .etp-lcub { margin-left: -0.3em; }
|
||
|
||
/* Справа */
|
||
.result-box .etp-raquo { margin-right: -0.44em; }
|
||
.result-box .etp-rdquo { margin-right: -0.44em; }
|
||
.result-box .etp-rpar { margin-right: -0.3em; }
|
||
.result-box .etp-rsqb { margin-right: -0.3em; }
|
||
.result-box .etp-rcub { margin-right: -0.3em; }
|
||
|
||
/* Точки и запятые висят меньше */
|
||
.result-box .etp-r-dot { margin-right: -0.2em; }
|
||
.result-box .etp-r-comma { margin-right: -0.2em; }
|
||
.result-box .etp-r-colon { margin-right: -0.2em; }
|
||
|
||
/* --- Стили для Cookie Banner --- */
|
||
#cookie-banner {
|
||
backdrop-filter: blur(10px); /* Эффект размытия фона */
|
||
border-top: 1px solid var(--bs-border-color);
|
||
z-index: 1050; /* Поверх всего */
|
||
}
|
||
/* Светлая тема: темная плашка */
|
||
[data-bs-theme="light"] #cookie-banner {
|
||
background-color: rgba(33, 37, 41, 0.85); /* bg-dark с прозрачностью */
|
||
color: #fff;
|
||
}
|
||
[data-bs-theme="light"] #cookie-banner a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted #fff;
|
||
}
|
||
[data-bs-theme="light"] #cookie-banner a:hover {
|
||
border-bottom-style: solid;
|
||
}
|
||
[data-bs-theme="light"] #cookie-accept {
|
||
color: #fff;
|
||
border: 1px dashed #fff;
|
||
background: transparent;
|
||
}
|
||
[data-bs-theme="light"] #cookie-accept:hover {
|
||
background: rgba(255,255,255, 0.2);
|
||
}
|
||
|
||
/* Темная тема: светлая плашка */
|
||
[data-bs-theme="dark"] #cookie-banner {
|
||
background-color: rgba(248, 249, 250, 0.85); /* bg-light с прозрачностью */
|
||
color: #000;
|
||
}
|
||
[data-bs-theme="dark"] #cookie-banner a {
|
||
color: #000;
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted #000;
|
||
}
|
||
[data-bs-theme="dark"] #cookie-banner a:hover {
|
||
border-bottom-style: solid;
|
||
}
|
||
[data-bs-theme="dark"] #cookie-accept {
|
||
color: #000;
|
||
border: 1px dashed #000;
|
||
background: transparent;
|
||
}
|
||
[data-bs-theme="dark"] #cookie-accept:hover {
|
||
background: rgba(0,0,0, 0.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
{# ШАПКА и главное меню #}
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="/">ETPGRF — единая типографика для веба</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
{% block content %}{% endblock %}
|
||
</div>
|
||
|
||
{# Плашка о куках #}
|
||
<div id="cookie-banner" class="fixed-bottom p-4 fs-5" style="display: none;">
|
||
<div class="container d-flex justify-content-between align-items-center">
|
||
<p class="mb-0 pe-5">
|
||
В соответствии с GDPR и 152-ФЗ, уведомляем вас, что настоящий сайт использует файлы cookie
|
||
для сбора данных о поведении пользо­вателей, с целью аналитики и улучшения работы
|
||
сайта. Оставаясь на сайте, вы соглашаетесь с нашей
|
||
<a href="/privacy-policy">политикой конфи­денциаль­ности</a>.
|
||
</p>
|
||
<button id="cookie-accept" class="btn btn-lg ms-3">Принять</button>
|
||
</div>
|
||
</div>
|
||
|
||
{# Bootstrap JS #}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
{# Логика куки-баннера и счетчиков #}
|
||
<script>
|
||
(function () {
|
||
const COOKIE_KEY = 'cookie_consent';
|
||
const TTL_MS =60 * 1000; // 1 минута для отладки (потом поставить 90 дней: 90 * 24 * 60 * 60 * 1000 = 7776000000)
|
||
|
||
const banner = document.getElementById('cookie-banner');
|
||
const acceptButton = document.getElementById('cookie-accept');
|
||
|
||
function loadCounters() {
|
||
console.log("Загрузка счетчиков (Яндекс, Google)...");
|
||
// Код Яндекс.Метрики
|
||
// (function(m,e,t,r,i,k,a){...})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||
// ym(XXXXXX, "init", {...});
|
||
|
||
// Код Google Analytics
|
||
// window.dataLayer = window.dataLayer || [];
|
||
// function gtag(){dataLayer.push(arguments);}
|
||
// gtag('js', new Date());
|
||
// gtag('config', 'G-XXXXXXXXXX');
|
||
|
||
// Код Top.Mail.Ru
|
||
// (function(w, d, c) { ... })(window, document, "topmailru");
|
||
|
||
// и т.д.
|
||
|
||
// alert("Отладка. Счетчики загружены (здесь должен быть реальный код счетчиков).");
|
||
}
|
||
|
||
function checkConsent() {
|
||
const stored = localStorage.getItem(COOKIE_KEY);
|
||
if (!stored) return false;
|
||
|
||
try {
|
||
const data = JSON.parse(stored);
|
||
const now = Date.now();
|
||
// Проверяем, не истек ли срок
|
||
if (now - data.timestamp > TTL_MS) {
|
||
localStorage.removeItem(COOKIE_KEY);
|
||
return false;
|
||
}
|
||
return true;
|
||
} catch (e) {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
if (checkConsent()) {
|
||
loadCounters();
|
||
} else {
|
||
banner.style.display = 'block';
|
||
}
|
||
|
||
acceptButton.addEventListener('click', function () {
|
||
const data = {
|
||
value: true,
|
||
timestamp: Date.now()
|
||
};
|
||
localStorage.setItem(COOKIE_KEY, JSON.stringify(data));
|
||
banner.style.display = 'none';
|
||
loadCounters();
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|