mod: css и js вынесены во внешние файлы (будут кашироваться, что ускорит загрузку)

2026-01-16 17:06:16 +03:00
parent b50a3202a8
commit a0d7392cf7
5 changed files with 421 additions and 379 deletions
--- a/public/static/css/etpgrf.css
+++ b/public/static/css/etpgrf.css
@@ -0,0 +1,218 @@
+/* === ЦВЕТОВАЯ СХЕМА === */
+:root {
+  /* Светлая тема: Темно-серый с легкой желтизной (Warm Charcoal) */
+  --bs-body-bg: #f8f8f2;
+  --bs-body-color: #1f1f19;
+  --bs-primary: #4a4a44;
+  --bs-primary-rgb: 74, 74, 68;
+  --bs-link-color: #4a4a44;
+  --bs-link-hover-color: #2e2e2a;
+  --bs-focus-ring-color: rgba(74, 74, 68, 0.25);
+
+  /* Фон навбара в светлой теме */
+  --bs-navbar-bg: #b8b8d055; /* Тот же, что и body, или чуть темнее */
+  --bs-navbar-color: #1f1f19;
+}
+
+[data-bs-theme="dark"] {
+  /* Темная тема: Глубокий черный фон и Стальной акцент */
+  --bs-body-bg: #151111;
+  --bs-body-color: #eceff1;
+
+  /* Акцент: Светлый серо-голубой */
+  --bs-primary: #b0bec5;
+  --bs-primary-rgb: 176, 190, 197;
+
+  --bs-link-color: #90caf9;
+  --bs-link-hover-color: #bbdefb;
+
+  --bs-border-color: #37474f;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+
+  /* Цвет фокуса для полей ввода */
+  --bs-focus-ring-color: rgba(176, 190, 197, 0.25);
+
+  /* Фон навбара в темной теме */
+  --bs-navbar-bg: #55558555;
+  --bs-navbar-color: #b0bec5;
+}
+
+/* Небольшие стили для красоты */
+body {
+  background-color: var(--bs-body-bg);
+}
+
+/* Навбар: используем переменную для фона */
+.navbar {
+  background-color: var(--bs-navbar-bg) !important;
+  border-bottom: 1px solid var(--bs-border-color);
+  padding: 0; /* Убираем отступы у навбара */
+  position: sticky;
+  top: 0;
+  height: 105px;
+  z-index: 1000;
+  backdrop-filter: blur(4px); /* Эффект размытия */
+  box-shadow: 0 -25px 30px 15px var(--bs-border-color);
+}
+
+.navbar-brand {
+  padding: 0; /* Убираем отступы у бренда */
+}
+
+/* Стили для скролла */
+.navbar-scrolled {
+  height: 55px;
+}
+
+/* Логотип */
+.logo-img {
+  width: 70%;
+  margin-left: -3%; /* Немного сдвигаем влево, чтобы буквы ETPGRF логотипа выровнять */
+  height: 151px; /* Ограничиваем высоту */
+  object-fit: contain; /* Вписываем, сохраняя пропорции */
+}
+
+/* Уменьшаем логотип при скролле */
+.navbar-scrolled .logo-img {
+  height: 78px; /* Компактная высота */
+  margin-left: -5%;
+}
+
+/* === ПЕРЕОПРЕДЕЛЕНИЕ КОМПОНЕНТОВ BOOTSTRAP === */
+
+/* Кнопки Primary */
+.btn-primary {
+  --bs-btn-bg: var(--bs-primary);
+  --bs-btn-border-color: var(--bs-primary);
+  --bs-btn-hover-bg: var(--bs-link-hover-color);
+  --bs-btn-hover-border-color: var(--bs-link-hover-color);
+  --bs-btn-active-bg: var(--bs-link-hover-color);
+  --bs-btn-active-border-color: var(--bs-link-hover-color);
+}
+
+/* В темной теме текст на кнопке должен быть темным */
+[data-bs-theme="dark"] .btn-primary {
+  --bs-btn-color: #151111;
+  --bs-btn-hover-color: #151111;
+  --bs-btn-active-color: #151111;
+}
+
+/* Чекбоксы и Радио */
+.form-check-input:checked {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+/* В темной теме галочка должна быть темной */
+[data-bs-theme="dark"] .form-check-input:checked {
+  /* SVG галочки черного цвета (закодирован в base64) */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23151111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+
+/* Фокус на полях ввода */
+.form-control:focus, .form-select:focus, .form-check-input:focus {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
+}
+
+.result-box {
+  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;
+  font-family: inherit;
+}
+
+.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;
+  background-color: var(--bs-navbar-bg);
+  color: var(--bs-navbar-color); /* Используем цвет навбара для текста */
+}
+
+#cookie-banner a {
+  color: var(--bs-primary);
+  text-decoration: none;
+  border-bottom: 1px dotted var(--bs-primary);
+}
+
+#cookie-banner a:hover {
+  border-bottom-style: solid;
+  color: var(--bs-link-hover-color);
+}
+
+#cookie-accept {
+  color: var(--bs-primary);
+  border: 1px dashed var(--bs-primary);
+  background: transparent;
+}
+
+#cookie-accept:hover {
+  background: rgba(var(--bs-primary-rgb), 0.1);
+}