Обновил добавление обновлений

This commit is contained in:
2026-06-22 18:25:04 +03:00
parent 24c10ea5ca
commit b0fe3ad5a4
3 changed files with 253 additions and 80 deletions

View File

@@ -271,6 +271,48 @@
line-height: 1.45;
}
.format-guide {
margin-top: 8px;
padding: 10px 12px;
border: 1px solid rgba(0, 255, 136, 0.18);
border-radius: 12px;
background: rgba(0, 255, 136, 0.045);
color: var(--muted);
font-size: 12px;
line-height: 1.55;
}
.format-guide code {
color: #00ff88;
background: rgba(0, 255, 136, 0.10);
border: 1px solid rgba(0, 255, 136, 0.22);
border-radius: 7px;
padding: 1px 6px;
}
.format-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.format-btn {
min-height: 30px;
padding: 0 10px;
border: 1px solid rgba(0, 255, 136, 0.28);
border-radius: 999px;
color: #9cf3c8;
background: rgba(0, 255, 136, 0.055);
cursor: pointer;
font-size: 12px;
}
.format-btn:hover {
color: #00ff88;
background: rgba(0, 255, 136, 0.12);
}
.add-row-btn {
min-height: 38px;
padding: 0 14px;
@@ -493,7 +535,14 @@
<label class="field-label" for="operatorActions">Что сделать оператору</label>
<textarea class="field-textarea" id="operatorActions" name="operator_actions" placeholder="Каждое действие с новой строки">Скачать новый проект vMix перед работой с матчем.
Полностью заменить все файлы проекта.</textarea>
<div class="helper-text">Каждая строка станет отдельным пунктом списка.</div>
<div class="helper-text">Каждая строка станет отдельным пунктом списка. Можно выделять клавиши и важные слова.</div>
<div class="format-guide">
Формат: <code>`F5`</code> — клавиша/команда, <code>**важно**</code> — выделенное слово.
</div>
<div class="format-toolbar" data-format-for="operatorActions">
<button type="button" class="format-btn" data-snippet="`F5`">⌨️ Клавиша</button>
<button type="button" class="format-btn" data-snippet="**важно**">✨ Выделить слово</button>
</div>
</div>
<div>
@@ -517,7 +566,21 @@
<div class="update-item-text">
<label class="field-label">Описание</label>
<textarea class="field-textarea" name="item_text" placeholder="Опишите изменение. Каждая строка станет отдельным абзацем." required></textarea>
<textarea class="field-textarea" name="item_text" placeholder="Пример:
1. Нажмите `1`, чтобы уменьшить таймер на секунду.
2. Нажмите `2`, чтобы увеличить таймер на секунду.
Можно выделить **важный текст**." required></textarea>
<div class="format-guide">
Красивый список: <code>1. Первый пункт</code> или <code>- Первый пункт</code><br>
Клавиши/команды: <code>`F5`</code>, <code>`1`</code>. Выделение слов: <code>**важно**</code>.
</div>
<div class="format-toolbar">
<button type="button" class="format-btn" data-snippet="1. Первый пункт&#10;2. Второй пункт">🔢 Список</button>
<button type="button" class="format-btn" data-snippet="- Первый пункт&#10;- Второй пункт">• Маркеры</button>
<button type="button" class="format-btn" data-snippet="`F5`">⌨️ Клавиша</button>
<button type="button" class="format-btn" data-snippet="**важно**">✨ Выделить слово</button>
</div>
</div>
<div class="update-item-image">
@@ -663,6 +726,37 @@
updateItemsEditor.appendChild(clone);
}
function insertSnippet(textarea, snippet) {
if (!textarea || !snippet) return;
const start = textarea.selectionStart ?? textarea.value.length;
const end = textarea.selectionEnd ?? textarea.value.length;
const before = textarea.value.slice(0, start);
const after = textarea.value.slice(end);
const spacerBefore = before && !before.endsWith("\n") ? "\n" : "";
const spacerAfter = after && !snippet.endsWith("\n") ? "\n" : "";
const insertion = spacerBefore + snippet + spacerAfter;
textarea.value = before + insertion + after;
const cursorPosition = before.length + insertion.length;
textarea.focus();
textarea.setSelectionRange(cursorPosition, cursorPosition);
}
document.addEventListener("click", (event) => {
const button = event.target.closest(".format-btn");
if (!button) return;
const snippet = button.dataset.snippet || "";
const explicitTargetId = button.closest(".format-toolbar")?.dataset.formatFor;
let textarea = explicitTargetId ? document.getElementById(explicitTargetId) : null;
if (!textarea) {
textarea = button.closest(".update-item-text")?.querySelector("textarea");
}
insertSnippet(textarea, snippet);
});
parserForms.forEach((form) => {
form.addEventListener("submit", () => {
const parserTitle = form.dataset.parserTitle || "Запуск парсера";

View File

@@ -527,72 +527,84 @@
margin-bottom: 0;
}
.pretty-change-list {
.update-pretty-list {
display: grid;
gap: 10px;
margin: 12px 0 0;
margin: 10px 0 0;
padding: 0;
list-style: none;
counter-reset: change-step;
counter-reset: update-step;
}
.pretty-change-list li {
.update-pretty-list li {
position: relative;
counter-increment: change-step;
padding: 13px 14px 13px 54px;
border: 1px solid rgba(255, 209, 102, 0.28);
min-height: 44px;
padding: 11px 14px 11px 50px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
background:
linear-gradient(135deg, rgba(255, 209, 102, 0.10), rgba(0, 255, 136, 0.045)),
rgba(0, 0, 0, 0.22);
box-shadow: inset 0 0 14px rgba(255, 209, 102, 0.04);
linear-gradient(135deg, rgba(0, 255, 136, 0.075), rgba(0, 0, 0, 0.20));
box-shadow: inset 0 0 16px rgba(0, 255, 136, 0.035);
}
.pretty-change-list li::before {
content: counter(change-step);
.update-pretty-list--numbered li::before {
counter-increment: update-step;
content: counter(update-step);
position: absolute;
top: 13px;
left: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
color: var(--yellow);
font-size: 13px;
top: 11px;
width: 25px;
height: 25px;
display: grid;
place-items: center;
color: var(--green);
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(255, 209, 102, 0.55);
border: 1px solid rgba(0, 255, 136, 0.58);
border-radius: 8px;
background: rgba(0, 255, 136, 0.10);
box-shadow: 0 0 12px rgba(0, 255, 136, 0.18);
}
.update-pretty-list--bullet li::before {
content: "";
position: absolute;
left: 22px;
top: 22px;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 209, 102, 0.08);
box-shadow: 0 0 12px rgba(255, 209, 102, 0.14);
background: var(--green);
box-shadow: 0 0 12px rgba(0, 255, 136, 0.62);
}
.change-main {
display: block;
margin-bottom: 4px;
color: var(--yellow);
font-weight: 700;
}
.change-desc {
display: block;
color: var(--text);
}
.update-text kbd {
.update-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
padding: 2px 7px;
color: var(--green);
font: inherit;
font-size: 13px;
min-height: 22px;
margin: 0 2px;
padding: 2px 8px;
color: #001a0f;
font-family: var(--font);
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(0, 255, 136, 0.45);
line-height: 1.2;
border: 1px solid rgba(0, 255, 136, 0.78);
border-radius: 7px;
background: rgba(0, 255, 136, 0.08);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.34), 0 0 10px rgba(0, 255, 136, 0.08);
background: var(--green);
box-shadow: 0 0 14px rgba(0, 255, 136, 0.28);
}
.update-highlight {
padding: 1px 6px;
color: var(--green);
font-weight: 700;
border: 1px solid rgba(0, 255, 136, 0.28);
border-radius: 999px;
background: rgba(0, 255, 136, 0.075);
text-shadow: 0 0 8px rgba(0, 255, 136, 0.22);
}
.update-badge {
@@ -894,47 +906,19 @@
</div>
</div>
</div>
<div class="update-item">
<span class="update-badge new">Новое</span>
<div class="update-content">
<div class="update-title">Иконка на отсутствие фотографии на сервере</div>
<div class="update-text">
<p>
Теперь рядом с игроком отображается, если у него нет фотографии для расстановки.
Теперь рядом с игроком отображается у кого нет фотографии для расстановки.
</p>
<div class="update-text">
<img src="/static/docs/no photo.png" alt="Скриншот с примером отображения иконки">
</div>
</div>
</div>
<div class="update-item">
<span class="update-badge important">Важно</span>
<div class="update-content">
<div class="update-title">ЖФЛ_2026 NEW.config</div>
<div class="update-text">
<ol class="pretty-change-list">
<li>
<span class="change-main">Горячие клавиши таймера</span>
<span class="change-desc">
Добавлены шорткаты на основной клавиатуре: <kbd>1</kbd> уменьшает таймер на 1 секунду, <kbd>2</kbd> увеличивает таймер на 1 секунду. Это нужно для быстрой корректировки основного таймера.
</span>
</li>
<li>
<span class="change-main">Добавленное время остаётся на счёте</span>
<span class="change-desc">
При снятии верхнего титра добавленное время больше не пропадает вместе с титром, а остаётся на верхнем счёте.
</span>
</li>
</ol>
</div>
</div>
</div>
<div class="update-item">
<span class="update-badge important">Важно</span>
@@ -954,7 +938,7 @@
<details class="update-details">
<summary>
<article class="update-card">
<div class="update-header">
<div>
<div class="update-version-big update-date">Версия 1.2</div>