Files
Igor20264 8223e0ac14
Example document / build (push) Has been cancelled
Python application / build (push) Has been cancelled
v0.6.0 BigUpdate
2026-10-20 11:38:06 +03:00

442 lines
48 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html class="dark" lang="ru"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;family=Inter:wght@400;500;600;700&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: 'class', theme: { extend: { 'colors': { 'surface-container-highest': '#2d3449', 'on-surface': '#dae2fd', 'surface-tint': '#7bd0ff', 'on-primary-container': '#004965', 'on-secondary-container': '#b0b2ff', 'surface-container': '#171f33', 'on-primary': '#00354a', 'secondary': '#c0c1ff', 'error': '#ffb4ab', 'on-primary-fixed': '#001e2c', 'surface-container-low': '#131b2e', 'surface-container-high': '#222a3d', 'on-error-container': '#ffdad6', 'inverse-on-surface': '#283044', 'secondary-container': '#3131c0', 'on-background': '#dae2fd', 'secondary-fixed-dim': '#c0c1ff', 'on-secondary-fixed': '#07006c', 'inverse-primary': '#00668a', 'primary-fixed-dim': '#7bd0ff', 'background': '#0b1326', 'surface-bright': '#31394d', 'surface': '#0b1326', 'error-container': '#93000a', 'on-tertiary': '#003824', 'tertiary-fixed-dim': '#4edea3', 'on-tertiary-fixed-variant': '#005236', 'outline': '#87929a', 'outline-variant': '#3e484f', 'surface-dim': '#0b1326', 'primary': '#8ed5ff', 'tertiary': '#56e5a9', 'primary-fixed': '#c4e7ff', 'on-error': '#690005', 'on-surface-variant': '#bdc8d1', 'on-secondary': '#1000a9', 'secondary-fixed': '#e1e0ff', 'surface-container-lowest': '#060e20', 'surface-variant': '#2d3449', 'tertiary-container': '#30c88f', 'tertiary-fixed': '#6ffbbe', 'on-tertiary-fixed': '#002113', 'on-tertiary-container': '#004e34', 'on-secondary-fixed-variant': '#2f2ebe', 'inverse-surface': '#dae2fd', 'primary-container': '#38bdf8', 'on-primary-fixed-variant': '#004c69' }, 'borderRadius': { 'DEFAULT': '0.125rem', 'lg': '0.25rem', 'xl': '0.5rem', 'full': '0.75rem' }, 'spacing': { 'sidebar-default-width': '18rem', 'status-bar-height': '1.625rem', 'gutter-sm': '0.5rem', 'gutter-xs': '0.25rem', 'panel-padding-compact': '0.375rem', 'window-bar-height': '2.25rem', 'gutter-lg': '1rem', 'page-canvas-padding': '2rem', 'gutter-md': '0.75rem', 'sidebar-max-width': '26rem', 'panel-padding-default': '0.75rem', 'sidebar-min-width': '15rem' }, 'fontFamily': { 'code-gutter': ['JetBrains Mono'], 'code-editor': ['JetBrains Mono'], 'headline-sm': ['Space Grotesk'], 'status-indicator': ['JetBrains Mono'], 'headline-md': ['Space Grotesk'], 'body-lg': ['Inter'], 'body-md': ['Inter'], 'label-sm': ['JetBrains Mono'], 'body-sm': ['Inter'], 'label-md': ['JetBrains Mono'], 'headline-lg': ['Space Grotesk'] }, 'fontSize': { 'code-gutter': ['11px', { 'lineHeight': '22px', 'fontWeight': '400' }], 'code-editor': ['13px', { 'lineHeight': '22px', 'fontWeight': '400' }], 'headline-sm': ['13px', { 'lineHeight': '18px', 'fontWeight': '500' }], 'status-indicator': ['10px', { 'lineHeight': '12px', 'fontWeight': '600' }], 'headline-md': ['15px', { 'lineHeight': '20px', 'letterSpacing': '-0.005em', 'fontWeight': '600' }], 'body-lg': ['13px', { 'lineHeight': '20px', 'fontWeight': '400' }], 'body-md': ['12px', { 'lineHeight': '18px', 'fontWeight': '400' }], 'label-sm': ['10px', { 'lineHeight': '12px', 'letterSpacing': '0.03em', 'fontWeight': '500' }], 'body-sm': ['11px', { 'lineHeight': '16px', 'fontWeight': '400' }], 'label-md': ['11px', { 'lineHeight': '14px', 'letterSpacing': '0.02em', 'fontWeight': '500' }], 'headline-lg': ['18px', { 'lineHeight': '24px', 'letterSpacing': '-0.01em', 'fontWeight': '600' }] } } } };</script></head><body class="bg-surface text-on-surface select-none"><header class="fixed top-0 left-0 right-0 z-50 flex flex-col bg-surface-container-low shadow-[0_1px_8px_rgba(0,0,0,0.5)]"><div class="h-9 px-gutter-md flex items-center justify-between bg-surface-container-lowest"><div class="flex items-center gap-gutter-md"><div class="flex items-center gap-1.5"><div class="w-3 h-3 rounded-full bg-error cursor-pointer"></div><div class="w-3 h-3 rounded-full bg-tertiary-container cursor-pointer"></div><div class="w-3 h-3 rounded-full bg-primary cursor-pointer"></div></div><div class="flex items-center gap-gutter-xs"><img alt="GhostEditor Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAFWH4iJvY-GFVxVrq3UGpNJ319wquVI3fSNvr8nAQMrkO02fuQNQxzf2tRN73t_vf5qB52i2RpbL7nJH6I8v6YEstU9iXctqDA9ZwyvfYOaY0IVtyWM_SsLQuJ2xPMVSo5ytDgBr0ioZfsiHclEZ3h6OyVPPeQNyIJ-xxZGMx0hwbiX7oJyUiOwJqt2opyf9k1lJoQKM9Vn4yyHvko4yuKF7FkzcZUVqcOU9zaQ4yAGE69fG8RA3sYsA"/><span class="font-headline-sm text-headline-sm text-on-surface font-semibold tracking-tight">GhostEditor</span></div><span class="font-label-sm text-label-sm text-on-surface-variant font-code-editor">coursework_report.md</span><span class="px-1.5 py-0.5 rounded bg-surface-container-high text-tertiary font-label-sm text-label-sm">[Saved]</span><span class="px-2 py-0.5 rounded bg-surface-container text-primary font-label-sm text-label-sm">[Курсовая работа (МИРЭА)]</span></div><div class="flex items-center gap-gutter-sm bg-surface-container px-2.5 py-1 rounded"><span class="material-symbols-outlined text-primary text-[14px]">terminal</span><span class="font-label-sm text-label-sm text-on-surface-variant font-code-editor">reports / mirea / coursework_report.md</span><span class="material-symbols-outlined text-on-surface-variant text-[14px] cursor-pointer">unfold_more</span></div><div class="flex items-center gap-gutter-sm"><div class="flex items-center bg-surface-container-high p-0.5 rounded"><button class="px-2 py-0.5 rounded font-label-sm text-label-sm text-on-surface-variant hover:text-on-surface hover:bg-surface-variant transition-colors" title="Editor Only"><span class="material-symbols-outlined text-[14px] align-middle">code</span></button><button class="px-2 py-0.5 rounded font-label-sm text-label-sm bg-primary-container text-on-primary-container" title="Split 50/50"><span class="material-symbols-outlined text-[14px] align-middle">vertical_split</span></button><button class="px-2 py-0.5 rounded font-label-sm text-label-sm text-on-surface-variant hover:text-on-surface hover:bg-surface-variant transition-colors" title="GOST Preview Only"><span class="material-symbols-outlined text-[14px] align-middle">menu_book</span></button></div><button class="p-1 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded transition-colors" title="Settings"><span class="material-symbols-outlined text-[18px]">settings</span></button><div class="flex items-center bg-surface-container px-2 py-1 rounded cursor-pointer text-on-surface-variant hover:text-on-surface"><span class="font-label-sm text-label-sm mr-1">DOCX via Word COM</span><span class="material-symbols-outlined text-[14px]">expand_more</span></div><button class="flex items-center gap-1.5 px-3 py-1 bg-primary-container text-on-primary-container rounded font-label-sm text-label-sm font-semibold hover:bg-primary-fixed transition-colors shadow-[0_2px_8px_rgba(56,189,248,0.2)]"><span class="material-symbols-outlined text-[15px]">check_circle</span><span>Собрать DOCX</span></button><div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"><span class="material-symbols-outlined text-on-primary text-[18px]">person</span></div></div></div><div class="h-11 px-gutter-md flex items-center justify-between bg-surface-container-low"><div class="flex items-center gap-1"><button class="px-2 py-1 rounded font-label-sm text-label-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface flex items-center gap-1 font-code-editor" title="Заголовок ГОСТ (ВВЕДЕНИЕ/ЗАКЛЮЧЕНИЕ)"><span># *ВВЕДЕНИЕ</span></button><div class="w-px h-4 bg-outline-variant mx-1"></div><button class="px-2 py-1 rounded font-label-sm text-label-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface flex items-center gap-1 font-code-editor" title="Таблица ГОСТ"><span class="material-symbols-outlined text-[14px]">table_chart</span><span>Таблица (^/&gt;)</span></button><button class="px-2 py-1 rounded font-label-sm text-label-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface flex items-center gap-1 font-code-editor" title="Рисунок по ГОСТ"><span class="material-symbols-outlined text-[14px]">image</span><span>%id</span></button><button class="px-2 py-1 rounded font-label-sm text-label-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface flex items-center gap-1 font-code-editor" title="Формула"><span class="material-symbols-outlined text-[14px]">functions</span><span>$$</span></button><div class="w-px h-4 bg-outline-variant mx-1"></div><button class="px-2 py-1 rounded font-label-sm text-label-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface flex items-center gap-1 font-code-editor" title="Диаграмма PlantUML/BPMN"><span class="material-symbols-outlined text-[14px]">account_tree</span><span>uml-c4</span></button><button class="px-2 py-1 rounded font-label-sm text-label-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface flex items-center gap-1 font-code-editor" title="Ссылка на рисунок / источник"><span class="material-symbols-outlined text-[14px]">format_quote</span><span>@Рисунок:[1]</span></button><button class="px-2 py-1 rounded font-label-sm text-label-sm text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface flex items-center gap-1 font-code-editor" title="Разрыв страницы (A4 Break)"><span class="material-symbols-outlined text-[14px]">insert_page_break</span></button></div><div class="flex items-center gap-gutter-md"><div class="flex items-center gap-gutter-xs bg-surface-container-lowest px-2 py-1 rounded"><span class="text-on-surface-variant font-label-sm text-label-sm">Профиль:</span><select class="bg-transparent text-on-surface font-label-sm text-label-sm outline-none cursor-pointer"><option class="bg-surface-container-high text-on-surface" selected="" value="coursework">Курсовая (coursework)</option><option class="bg-surface-container-high text-on-surface" value="practice">Практика (practice)</option><option class="bg-surface-container-high text-on-surface" value="vkr">ВКР (vkr)</option><option class="bg-surface-container-high text-on-surface" value="pis">ПИС (PIS_custom)</option><option class="bg-surface-container-high text-on-surface" value="apid">АПИД (APID_coursework)</option></select></div><div class="flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-surface-container font-label-sm text-label-sm"><span class="text-tertiary">✔</span><span class="text-on-surface font-semibold">ТЗ ГОСТ 7.32:</span><span class="text-tertiary">0 ошибок</span><span class="text-outline-variant">•</span><span class="text-secondary">2 предпр.</span></div></div></div></header><aside class="fixed left-0 top-20 bottom-7 w-sidebar-default-width bg-surface-container-low z-40 flex flex-col"><div class="h-8 px-gutter-md flex items-center justify-between bg-surface-container"><span class="font-label-sm text-label-sm uppercase tracking-wider text-on-surface-variant">Обозреватель ГОСТ</span><div class="flex items-center gap-1"><button class="text-on-surface-variant hover:text-on-surface" title="Добавить файл"><span class="material-symbols-outlined text-[15px]">note_add</span></button><button class="text-on-surface-variant hover:text-on-surface" title="Свернуть"><span class="material-symbols-outlined text-[15px]">unfold_less</span></button></div></div><nav class="flex-1 overflow-y-auto p-gutter-xs" data-active-classes="bg-surface-container-high text-primary font-semibold"><a aria-current="page" class="flex items-center gap-2 px-gutter-sm py-1 rounded transition-colors bg-surface-container-high text-primary font-semibold" data-path="document-editor" href="#"><span class="material-symbols-outlined text-[15px] text-primary">description</span><span>coursework_report.md</span></a><a class="flex items-center gap-2 px-gutter-sm py-1 rounded text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface font-body-sm text-body-sm transition-colors" data-path="gost-specifications" href="#"><span class="material-symbols-outlined text-[15px] text-secondary">tune</span><span>mirea_spec.yaml</span></a><a class="flex items-center gap-2 px-gutter-sm py-1 rounded text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface font-body-sm text-body-sm transition-colors" data-path="bibliography-manager" href="#"><span class="material-symbols-outlined text-[15px] text-tertiary">format_list_numbered</span><span>bibliography.bib</span></a><a class="flex items-center gap-2 px-gutter-sm py-1 rounded text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface font-body-sm text-body-sm transition-colors" data-path="diagram-assets" href="#"><span class="material-symbols-outlined text-[15px] text-primary">account_tree</span><span>schemas/uml_c4.puml</span></a><div class="my-2 px-gutter-sm"><div class="text-outline font-label-sm text-label-sm uppercase tracking-wider mb-1">Структура Документа</div><div class="pl-2 flex flex-col gap-0.5"><div class="flex items-center gap-1.5 py-0.5 text-on-surface font-code-editor text-body-sm cursor-pointer hover:text-primary"><span class="text-outline text-label-sm">1</span><span>ВВЕДЕНИЕ</span></div><div class="flex items-center gap-1.5 py-0.5 text-on-surface font-code-editor text-body-sm cursor-pointer hover:text-primary"><span class="text-outline text-label-sm">2</span><span>АНАЛИТИЧЕСКИЙ РАЗДЕЛ</span></div><div class="flex items-center gap-1.5 py-0.5 text-on-surface-variant pl-3 font-code-editor text-body-sm cursor-pointer hover:text-primary"><span class="text-outline text-label-sm">2.1</span><span>Анализ предметной области</span></div><div class="flex items-center gap-1.5 py-0.5 text-on-surface-variant pl-3 font-code-editor text-body-sm cursor-pointer hover:text-primary"><span class="text-outline text-label-sm">2.2</span><span>Сравнительный обзор СУБД</span></div><div class="flex items-center gap-1.5 py-0.5 text-on-surface font-code-editor text-body-sm cursor-pointer hover:text-primary"><span class="text-outline text-label-sm">3</span><span>ПРОЕКТНЫЙ РАЗДЕЛ</span></div><div class="flex items-center gap-1.5 py-0.5 text-on-surface font-code-editor text-body-sm cursor-pointer hover:text-primary"><span class="text-outline text-label-sm">4</span><span>ЗАКЛЮЧЕНИЕ</span></div><div class="flex items-center gap-1.5 py-0.5 text-on-surface font-code-editor text-body-sm cursor-pointer hover:text-primary"><span class="text-outline text-label-sm">5</span><span>СПИСОК ЛИТЕРАТУРЫ</span></div></div></div><div class="mt-auto px-gutter-sm pt-2"><a class="flex items-center gap-2 px-gutter-sm py-1.5 rounded bg-surface-container text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface font-label-sm text-label-sm transition-colors" data-path="build-diagnostics" href="#"><span class="material-symbols-outlined text-[15px] text-tertiary">analytics</span><span>Журнал сборки</span></a></div></nav></aside><div class="pl-sidebar-default-width"><main class="relative pt-20 pb-7 w-full bg-surface-container-lowest min-h-screen"><div class="flex flex-col w-full">
<!-- Interactive Modal Wrapper with Backdrop Shadow / High Depth Window -->
<div class="p-gutter-md flex flex-col gap-gutter-md w-full max-w-[1720px] mx-auto">
<!-- Modal Window Canvas Container -->
<div class="w-full bg-surface-container-low rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.85)] flex flex-col overflow-hidden">
<!-- Window Titlebar / Navigation Bar -->
<div class="h-12 px-gutter-md bg-surface-container-lowest flex items-center justify-between">
<div class="flex items-center gap-gutter-md">
<div class="flex items-center gap-2">
<!-- App / Extension Icon -->
<div class="w-7 h-7 rounded bg-primary-container/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-[18px]">menu_book</span>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-2">
<span class="font-headline-sm text-headline-sm text-on-surface font-semibold tracking-tight">GhostEditor Desktop — Спецификация диалекта Markdown</span>
<span class="px-2 py-0.5 rounded bg-surface-container-high text-primary font-label-sm text-label-sm">md2gost v0.1.0</span>
<span class="px-2 py-0.5 rounded bg-tertiary/10 text-tertiary font-label-sm text-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[12px]">verified</span>
<span>ГОСТ 7.32-2017</span>
</span>
<span class="px-2 py-0.5 rounded bg-secondary-container/40 text-secondary font-label-sm text-label-sm">AST Extended Marko</span>
</div>
<span class="font-label-sm text-label-sm text-on-surface-variant font-code-editor">docs/markdown.md • docs/quickstart.md • rev #8e2a14</span>
</div>
</div>
</div>
<!-- Search Bar & Top Actions -->
<div class="flex items-center gap-gutter-md">
<div class="relative flex items-center">
<span class="material-symbols-outlined absolute left-2.5 text-on-surface-variant text-[15px]">search</span>
<input class="bg-surface-container-lowest text-on-surface placeholder-on-surface-variant/60 text-code-editor font-code-editor pl-8 pr-12 py-1.5 rounded w-80 outline-none focus:bg-surface-container" placeholder="Поиск по синтаксису и правилам... [Ctrl+K]" type="text"/>
<span class="absolute right-2 text-label-sm font-label-sm text-on-surface-variant bg-surface-container-high px-1.5 py-0.5 rounded">Ctrl+K</span>
</div>
<div class="flex items-center gap-1">
<button class="w-8 h-8 rounded bg-surface-container flex items-center justify-center text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high transition-colors" title="Открыть в окне">
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
</button>
<button class="w-8 h-8 rounded bg-surface-container flex items-center justify-center text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high transition-colors" title="Справка CLI">
<span class="material-symbols-outlined text-[16px]">terminal</span>
</button>
<button class="w-8 h-8 rounded bg-surface-container flex items-center justify-center text-on-surface-variant hover:text-error hover:bg-error/10 transition-colors ml-1" title="Закрыть окно">
<span class="material-symbols-outlined text-[18px]">close</span>
</button>
</div>
</div>
</div>
<!-- Top Category Navigation Tabs -->
<div class="h-10 px-gutter-md bg-surface-container flex items-center gap-1 overflow-x-auto">
<button class="flex items-center gap-2 px-3 py-1.5 rounded font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined text-[15px]">overview</span>
<span>1. Обзор диалекта и базовые правила</span>
</button>
<button class="flex items-center gap-2 px-3 py-1.5 rounded font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined text-[15px]">account_tree</span>
<span>2. Спецразделы и структура</span>
</button>
<button class="flex items-center gap-2 px-3 py-1.5 rounded bg-primary-container text-on-primary-container font-label-md text-label-md font-semibold shadow-sm">
<span class="material-symbols-outlined text-[15px]">table_chart</span>
<span>3. Таблицы со слиянием (^ / &gt;)</span>
</button>
<button class="flex items-center gap-2 px-3 py-1.5 rounded font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined text-[15px]">functions</span>
<span>4. Схемы, UML и OMML формулы</span>
</button>
<button class="flex items-center gap-2 px-3 py-1.5 rounded font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined text-[15px]">link</span>
<span>5. Перекрёстные ссылки и библиография</span>
</button>
<button class="flex items-center gap-2 px-3 py-1.5 rounded font-label-md text-label-md text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined text-[15px]">rule</span>
<span>6. Правила чекера ГОСТ (--check)</span>
</button>
</div>
<!-- Main Three-Column Workspace Layout -->
<div class="grid grid-cols-12 gap-0 min-h-[680px] bg-surface-container-lowest">
<!-- Left Column: Navigation Tree & Quick Constructs (col-span-3) -->
<div class="col-span-3 bg-surface-container-low flex flex-col p-gutter-sm gap-gutter-sm">
<div class="px-2 py-1 flex items-center justify-between">
<span class="font-label-sm text-label-sm uppercase tracking-wider text-on-surface-variant font-semibold">Синтаксические конструкции md2gost</span>
<span class="font-label-sm text-label-sm text-primary px-1.5 py-0.5 rounded bg-surface-container">8 модулей</span>
</div>
<!-- Grouped Syntax Rules List -->
<div class="flex-1 flex flex-col gap-1 overflow-y-auto pr-1">
<!-- Construct 1 -->
<div class="p-2 rounded bg-surface-container/60 hover:bg-surface-container cursor-pointer transition-colors flex flex-col gap-1 group">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary">1. Спецразделы без номеров</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-tertiary font-label-sm text-label-sm">AST</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1"># *ВВЕДЕНИЕ, [TOC], # *ЗАКЛЮЧЕНИЕ</p>
<div class="flex items-center gap-1 text-label-sm font-label-sm text-on-surface-variant/80 font-code-editor">
<span>Пункт ГОСТ 7.32: 5.2</span>
</div>
</div>
<!-- Construct 2 -->
<div class="p-2 rounded bg-surface-container/60 hover:bg-surface-container cursor-pointer transition-colors flex flex-col gap-1 group">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary">2. Идентификаторы и кросс-ссылки</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-primary font-label-sm text-label-sm">Ref Engine</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">%id, @Рисунок:id, @Таблица:id, @Формула:id</p>
<div class="flex items-center gap-1 text-label-sm font-label-sm text-tertiary font-code-editor">
<span>Автонумерация сквозная</span>
</div>
</div>
<!-- Construct 3 (ACTIVE) -->
<div class="p-2.5 rounded bg-surface-container-high flex flex-col gap-1.5 shadow-sm">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-primary font-semibold">3. Таблицы со слиянием (row/col)</span>
<span class="px-2 py-0.5 rounded bg-primary-container text-on-primary-container font-label-sm text-label-sm font-bold">Выбрано</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface">Маркеры ^ (rowspan), &gt; (colspan), авторазрыв</p>
<div class="flex items-center justify-between text-label-sm font-label-sm text-on-surface-variant">
<span class="font-code-editor text-secondary">%tbl-id Название</span>
<span class="text-tertiary">w:vMerge • w:gridSpan</span>
</div>
</div>
<!-- Construct 4 -->
<div class="p-2 rounded bg-surface-container/60 hover:bg-surface-container cursor-pointer transition-colors flex flex-col gap-1 group">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary">4. Листинги исходного кода</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-secondary font-label-sm text-label-sm">Pygments</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">python %lst-main Заголовок листинга</p>
<div class="flex items-center gap-1 text-label-sm font-label-sm text-on-surface-variant/80 font-code-editor">
<span>Разрывы без сирот строк</span>
</div>
</div>
<!-- Construct 5 -->
<div class="p-2 rounded bg-surface-container/60 hover:bg-surface-container cursor-pointer transition-colors flex flex-col gap-1 group">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary">5. Схемы, PlantUML и BPMN</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-primary font-label-sm text-label-sm">Kroki / Jar</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">uml-c4 %arch, +landscape, +listing</p>
<div class="flex items-center gap-1 text-label-sm font-label-sm text-tertiary font-code-editor">
<span>Рендер в EMF/PNG 300 DPI</span>
</div>
</div>
<!-- Construct 6 -->
<div class="p-2 rounded bg-surface-container/60 hover:bg-surface-container cursor-pointer transition-colors flex flex-col gap-1 group">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary">6. Формулы и математика</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">LaTeX → OMML</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">$$ ... $$ %eq-energy и инлайн $a^2+b^2=c^2$</p>
<div class="flex items-center gap-1 text-label-sm font-label-sm text-on-surface-variant/80 font-code-editor">
<span>Нумерация по правому краю</span>
</div>
</div>
<!-- Construct 7 -->
<div class="p-2 rounded bg-surface-container/60 hover:bg-surface-container cursor-pointer transition-colors flex flex-col gap-1 group">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary">7. Библиография и источники</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-tertiary font-label-sm text-label-sm">ГОСТ 7.0.5</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">[1]: Автор. Монография... и цитирование [1]</p>
<div class="flex items-center gap-1 text-label-sm font-label-sm text-error font-code-editor">
<span>Проверка давности ≤ 5 лет</span>
</div>
</div>
<!-- Construct 8 -->
<div class="p-2 rounded bg-surface-container/60 hover:bg-surface-container cursor-pointer transition-colors flex flex-col gap-1 group">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary">8. Разрыв страниц и ориентация</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-secondary font-label-sm text-label-sm">Page Engine</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant line-clamp-1">--- hr-pagebreak, секция +landscape</p>
<div class="flex items-center gap-1 text-label-sm font-label-sm text-on-surface-variant/80 font-code-editor">
<span>A4 Альбомная секция</span>
</div>
</div>
</div>
<!-- Bottom Metric Widget -->
<div class="p-2.5 rounded bg-surface-container flex items-center justify-between mt-auto">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-tertiary text-[18px]">verified_user</span>
<div class="flex flex-col">
<span class="font-label-sm text-label-sm text-on-surface font-semibold">Валидатор активен</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">0 критических расхождений</span>
</div>
</div>
<span class="px-2 py-0.5 rounded bg-tertiary/10 text-tertiary font-label-sm text-label-sm font-code-editor">100% GOST</span>
</div>
</div>
<!-- Center Column: Deep Explanation, Live Markdown Editor & Playground (col-span-5) -->
<div class="col-span-5 bg-surface-container flex flex-col p-gutter-md gap-gutter-md overflow-y-auto">
<!-- Section Title & Meta Header -->
<div class="flex flex-col gap-1.5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="px-2 py-0.5 rounded bg-primary/10 text-primary font-label-sm text-label-sm font-semibold uppercase">Спецификация раздела 3</span>
<span class="text-on-surface-variant font-label-sm text-label-sm">md2gost table syntax</span>
</div>
<div class="flex items-center gap-2">
<button class="px-2 py-1 rounded bg-surface-container-high hover:bg-surface-container-highest text-on-surface text-label-sm font-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[13px]">share</span>
<span>Поделиться</span>
</button>
</div>
</div>
<h2 class="font-headline-lg text-headline-lg text-on-surface font-bold">Таблицы со сложным слиянием ячеек (`^` rowspan / `&gt;` colspan)</h2>
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
В стандартном Markdown отсутствует семантическое слияние ячеек. Диалект <span class="text-primary font-code-editor">md2gost</span> решает эту проблему введением служебных маркеров: символ <code class="px-1.5 py-0.5 rounded bg-surface-container-lowest text-primary font-code-editor font-semibold">^</code> инициирует слияние по вертикали с вышестоящей ячейкой (rowspan), а <code class="px-1.5 py-0.5 rounded bg-surface-container-lowest text-primary font-code-editor font-semibold">&gt;</code> объединяет ячейку с предыдущей слева (colspan). В Word OpenXML это компилируется напрямую в дескрипторы <code class="text-secondary font-code-editor">w:vMerge</code> и <code class="text-secondary font-code-editor">w:gridSpan</code>.
</p>
</div>
<!-- Code Snippet Box with Tab Switcher -->
<div class="flex flex-col bg-surface-container-lowest rounded-lg overflow-hidden">
<!-- Snippet Action Header -->
<div class="h-9 px-gutter-sm bg-surface-container-high flex items-center justify-between">
<div class="flex items-center gap-1">
<button class="px-2.5 py-1 rounded bg-surface-container-lowest text-primary font-label-sm text-label-sm font-semibold">Исходный Markdown (.md)</button>
<button class="px-2.5 py-1 rounded text-on-surface-variant hover:text-on-surface font-label-sm text-label-sm">DOCX OpenXML AST</button>
<button class="px-2.5 py-1 rounded text-on-surface-variant hover:text-on-surface font-label-sm text-label-sm">Критерии проверки</button>
</div>
<div class="flex items-center gap-2">
<button class="flex items-center gap-1 px-2 py-0.5 rounded bg-surface-container text-on-surface hover:bg-surface-variant text-label-sm font-label-sm transition-colors" title="Скопировать">
<span class="material-symbols-outlined text-[13px] text-tertiary">content_copy</span>
<span>Копировать</span>
</button>
</div>
</div>
<!-- Code Editor Buffer View -->
<div class="p-3 font-code-editor text-code-editor leading-6 overflow-x-auto flex">
<!-- Line Numbers Gutter -->
<div class="select-none pr-3 text-outline text-right text-code-gutter flex flex-col">
<span>01</span>
<span>02</span>
<span>03</span>
<span>04</span>
<span>05</span>
<span>06</span>
<span>07</span>
</div>
<!-- Syntax Stream -->
<div class="flex flex-col text-on-surface">
<div><span class="text-secondary font-bold">%tbl-db-compare</span> <span class="text-on-surface-variant">Сравнительный анализ реляционных СУБД для логирования</span></div>
<div><span class="text-outline">|</span> <span class="text-primary font-semibold">СУБД</span> <span class="text-outline">|</span> <span class="text-primary font-semibold">Производительность</span> <span class="text-outline">|</span> <span class="text-primary font-semibold">Поддержка JSON</span> <span class="text-outline">|</span> <span class="text-primary font-semibold">Стоимость лицензии</span> <span class="text-outline">|</span></div>
<div><span class="text-outline">| :--- | :--- | :--- | :--- |</span></div>
<div><span class="text-outline">|</span> PostgreSQL <span class="text-outline">|</span> <span class="text-tertiary">Высокая (OLTP)</span> <span class="text-outline">|</span> Полная (JSONB) <span class="text-outline">|</span> <span class="text-tertiary font-semibold">Бесплатно (Open Source)</span> <span class="text-outline">|</span></div>
<div><span class="text-outline">|</span> MySQL 8.0 <span class="text-outline">|</span> <span class="text-primary font-bold bg-primary/20 px-1 rounded">^</span> <span class="text-outline">|</span> Базовая (JSON doc) <span class="text-outline">|</span> <span class="text-primary font-bold bg-primary/20 px-1 rounded">^</span> <span class="text-outline">|</span></div>
<div><span class="text-outline">|</span> Oracle DB <span class="text-outline">|</span> Экстремальная <span class="text-outline">|</span> <span class="text-secondary font-bold bg-secondary/20 px-1 rounded">&gt;</span> <span class="text-outline">|</span> Коммерческая (Проприетарно) <span class="text-outline">|</span></div>
<div><span class="text-outline">|</span> SQLite 3 <span class="text-outline">|</span> Локальная <span class="text-outline">|</span> Ограниченная <span class="text-outline">|</span> Public Domain <span class="text-outline">|</span></div>
</div>
</div>
<!-- Legend Info Pill -->
<div class="px-3 py-1.5 bg-surface-container-high/40 flex items-center justify-between text-label-sm font-label-sm text-on-surface-variant">
<div class="flex items-center gap-3">
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-primary"></span> <code class="text-primary font-code-editor">^</code> — вертикальный rowspan</span>
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-secondary"></span> <code class="text-secondary font-code-editor">&gt;</code> — горизонтальный colspan</span>
</div>
<span class="text-outline font-code-editor">UTF-8 • 7 строк</span>
</div>
</div>
<!-- GOST Standard Warning / Directive Callout -->
<div class="p-3.5 rounded-lg bg-surface-container-high flex gap-3 shadow-sm">
<span class="material-symbols-outlined text-primary text-[22px] shrink-0 mt-0.5">policy</span>
<div class="flex flex-col gap-1">
<span class="font-headline-sm text-headline-sm text-on-surface font-semibold">Требование ГОСТ 7.32-2017 (п. 6.8 Таблицы):</span>
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
Название таблицы размещается над ней слева без абзацного отступа в формате: <code class="text-primary font-code-editor">Таблица 1 — Название</code>. Точка в конце заголовка не ставится. При переносе таблицы на следующий лист Word COM автоматически дублирует шапку таблицы и выводит над ней строку <code class="text-secondary font-code-editor">«Продолжение таблицы 1»</code>.
</p>
<div class="flex items-center gap-2 mt-1">
<span class="px-2 py-0.5 rounded bg-surface-container text-tertiary font-label-sm text-label-sm font-code-editor">--table-continuation word</span>
<span class="px-2 py-0.5 rounded bg-surface-container text-primary font-label-sm text-label-sm font-code-editor">--keep-with-next</span>
</div>
</div>
</div>
<!-- Cross-linking snippet block -->
<div class="p-3 rounded-lg bg-surface-container-lowest flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-headline-sm text-on-surface font-medium">Ссылка на таблицу в основном тексте документа:</span>
<span class="font-label-sm text-label-sm text-tertiary">Кросс-референс</span>
</div>
<div class="p-2 rounded bg-surface-container text-code-editor font-code-editor text-on-surface flex items-center justify-between">
<div>
<span class="text-on-surface-variant">Результаты замеров сведены в</span> <span class="text-primary font-semibold">@Таблица:tbl-db-compare</span>.
</div>
<span class="text-outline text-label-sm">→ «в таблице 1»</span>
</div>
<span class="font-body-sm text-body-sm text-on-surface-variant">Склонение слова «таблица» и корректный регистр подбираются транслятором автоматически согласно падежу контекста.</span>
</div>
</div>
<!-- Right Column: Inspector & DOCX Live Physical Preview (col-span-4) -->
<div class="col-span-4 bg-surface-container-low flex flex-col p-gutter-md gap-gutter-md overflow-y-auto">
<!-- Anti-Mistake Guide Panel -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="font-label-sm text-label-sm uppercase tracking-wider text-on-surface-variant font-semibold">Контроль чекера ТЗ (--check)</span>
<span class="px-2 py-0.5 rounded bg-tertiary/10 text-tertiary font-label-sm text-label-sm">Anti-Mistake</span>
</div>
<!-- List of Rules -->
<div class="flex flex-col gap-1.5">
<!-- Rule 1: Quotes -->
<div class="p-2 rounded bg-surface-container flex items-start gap-2">
<span class="material-symbols-outlined text-tertiary text-[18px] shrink-0 mt-0.5">check_circle</span>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-on-surface">Автозамена кавычек</span>
<span class="font-body-sm text-body-sm text-on-surface-variant">"Кавычки" → «Французские ёлочки» по ГОСТ</span>
</div>
</div>
<!-- Rule 2: Em-dash -->
<div class="p-2 rounded bg-surface-container flex items-start gap-2">
<span class="material-symbols-outlined text-tertiary text-[18px] shrink-0 mt-0.5">check_circle</span>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-on-surface">Тире и дефисы</span>
<span class="font-body-sm text-body-sm text-on-surface-variant">Слово - слово → Слово — слово (длинное тире с неразрывным пробелом)</span>
</div>
</div>
<!-- Rule 3: Footnotes BAN -->
<div class="p-2 rounded bg-surface-container flex items-start gap-2">
<span class="material-symbols-outlined text-error text-[18px] shrink-0 mt-0.5">cancel</span>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-on-surface">Запрет сносок [^1]</span>
<span class="font-body-sm text-body-sm text-error">ГОСТ 7.32 запрещает сноски на страницах. Используйте только список литературы [n]</span>
</div>
</div>
<!-- Rule 4: Abbreviations BAN -->
<div class="p-2 rounded bg-surface-container flex items-start gap-2">
<span class="material-symbols-outlined text-error text-[18px] shrink-0 mt-0.5">cancel</span>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-on-surface">Запрет сокращений «рис.», «табл.»</span>
<span class="font-body-sm text-body-sm text-error">Писать только полными словами: «Рисунок 1.2», «Таблица 3»</span>
</div>
</div>
<!-- Rule 5: Warning on 'No p/p' -->
<div class="p-2 rounded bg-surface-container flex items-start gap-2">
<span class="material-symbols-outlined text-secondary text-[18px] shrink-0 mt-0.5">warning</span>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-on-surface">Колонка «№ п/п» не допускается</span>
<span class="font-body-sm text-body-sm text-on-surface-variant">Стандарт предписывает ставить просто «№» или осмысленный заголовок</span>
</div>
</div>
</div>
</div>
<!-- Skeuomorphic Physical A4 Paper Preview Box -->
<div class="flex flex-col gap-2 mt-2">
<div class="flex items-center justify-between">
<span class="font-label-sm text-label-sm uppercase tracking-wider text-on-surface-variant font-semibold">Физический рендер в Word DOCX</span>
<span class="font-code-editor text-label-sm text-on-surface-variant">Масштаб 1:1 • 12pt TNR</span>
</div>
<!-- Authentic Paper Sheet Representation -->
<div class="w-full bg-surface-container-lowest p-4 rounded-lg flex items-center justify-center">
<div class="w-full bg-[#ffffff] text-[#111827] rounded shadow-[0_1px_3px_rgba(0,0,0,0.3),0_12px_32px_-4px_rgba(0,0,0,0.65)] p-4 flex flex-col gap-1.5 font-sans select-text">
<!-- Table Caption as rendered in GOST -->
<div class="text-[11px] font-serif leading-tight text-[#111827]">
Таблица 1 — Сравнительный анализ реляционных СУБД для логирования
</div>
<!-- Simulated Native Word Table with borders -->
<div class="w-full overflow-hidden text-[10px] font-serif text-[#111827]">
<table class="w-full border-collapse">
<thead>
<tr class="bg-[#f3f4f6]">
<th class="p-1.5 text-left font-bold border border-[#374151]">СУБД</th>
<th class="p-1.5 text-left font-bold border border-[#374151]">Производительность</th>
<th class="p-1.5 text-left font-bold border border-[#374151]">Поддержка JSON</th>
<th class="p-1.5 text-left font-bold border border-[#374151]">Стоимость лицензии</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-1.5 border border-[#374151]">PostgreSQL</td>
<td class="p-1.5 border border-[#374151]" rowspan="2">Высокая (OLTP)</td>
<td class="p-1.5 border border-[#374151]">Полная (JSONB)</td>
<td class="p-1.5 border border-[#374151]" rowspan="2">Бесплатно (Open Source)</td>
</tr>
<tr>
<td class="p-1.5 border border-[#374151]">MySQL 8.0</td>
<!-- rowspan merged from above -->
<td class="p-1.5 border border-[#374151]">Базовая (JSON doc)</td>
<!-- rowspan merged from above -->
</tr>
<tr>
<td class="p-1.5 border border-[#374151]">Oracle DB</td>
<td class="p-1.5 border border-[#374151]" colspan="2">Экстремальная</td>
<!-- colspan merged from left -->
<td class="p-1.5 border border-[#374151]">Коммерческая</td>
</tr>
<tr>
<td class="p-1.5 border border-[#374151]">SQLite 3</td>
<td class="p-1.5 border border-[#374151]">Локальная</td>
<td class="p-1.5 border border-[#374151]">Ограниченная</td>
<td class="p-1.5 border border-[#374151]">Public Domain</td>
</tr>
</tbody>
</table>
</div>
<!-- Footer note on doc sheet -->
<div class="text-[9px] font-serif text-[#6b7280] italic mt-1 text-right">
Сформировано через python-docx-template • шрифт Times New Roman 12 pt
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Action and Status Bar -->
<div class="h-12 px-gutter-md bg-surface-container flex items-center justify-between">
<div class="flex items-center gap-gutter-md">
<span class="font-label-sm text-label-sm text-on-surface-variant font-code-editor">
docs/markdown.md • v0.1.0 (18.4 КБ) • Синхронизировано с компилятором
</span>
</div>
<div class="flex items-center gap-2">
<button class="px-3 py-1.5 rounded bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-label-md text-label-md flex items-center gap-1.5 transition-colors">
<span class="material-symbols-outlined text-[15px]">content_copy</span>
<span>Скопировать сниппет (Ctrl+C)</span>
</button>
<button class="px-3 py-1.5 rounded bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-label-md text-label-md flex items-center gap-1.5 transition-colors">
<span class="material-symbols-outlined text-[15px]">open_in_browser</span>
<span>Полная справка в браузере</span>
</button>
<button class="px-4 py-1.5 rounded bg-primary-container hover:bg-primary-fixed text-on-primary-container font-label-md text-label-md font-bold flex items-center gap-1.5 transition-colors shadow-sm">
<span class="material-symbols-outlined text-[16px]">add_box</span>
<span>Вставить сниппет в coursework_report.md</span>
</button>
</div>
</div>
</div>
</div>
<!-- Interactive JavaScript for micro-interactions -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const copyBtns = document.querySelectorAll('button:has(.material-symbols-outlined:contains("content_copy"))');
copyBtns.forEach(btn => {
btn.addEventListener('click', () => {
const originalText = btn.innerHTML;
btn.classList.add('bg-tertiary-container', 'text-on-tertiary-container');
btn.innerHTML = '<span class="material-symbols-outlined text-[15px]">done</span><span>Скопировано в буфер!</span>';
setTimeout(() => {
btn.innerHTML = originalText;
btn.classList.remove('bg-tertiary-container', 'text-on-tertiary-container');
}, 2000);
});
});
});
</script>
</div></main></div><footer class="fixed bottom-0 left-0 right-0 h-7 z-50 px-gutter-md bg-surface-container flex items-center justify-between font-label-sm text-label-sm text-on-surface-variant"><div class="flex items-center gap-gutter-md"><div class="flex items-center gap-1 hover:text-on-surface cursor-pointer"><span class="material-symbols-outlined text-[13px] text-primary">save_as</span><span>main</span></div><div class="flex items-center gap-1 hover:text-on-surface cursor-pointer"><span class="material-symbols-outlined text-[13px]">data_object</span><span>UTF-8</span></div><div class="hover:text-on-surface cursor-pointer"><span>Ln 142, Col 28</span></div><div class="hover:text-on-surface cursor-pointer"><span>3,480 слов</span></div><div class="flex items-center gap-1 hover:text-on-surface cursor-pointer"><span class="material-symbols-outlined text-[13px] text-secondary">description</span><span>24 стр. (A4)</span></div></div><div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-tertiary animate-pulse"></span><span class="text-on-surface font-code-editor">Local Kroki (Ready)</span><span class="text-outline">|</span><span class="text-on-surface-variant font-code-editor">plantuml.jar (v1.2024)</span></div><div class="flex items-center gap-gutter-md"><div class="flex items-center gap-1.5"><span class="text-outline">Таблицы:</span><span class="text-on-surface font-semibold">Word COM (Active)</span></div><div class="flex items-center gap-1.5"><span class="text-outline">Заполнение:</span><span class="text-tertiary font-semibold">94%</span></div><div class="flex items-center gap-2"><span class="material-symbols-outlined text-[14px] cursor-pointer hover:text-on-surface">zoom_out</span><span class="text-on-surface font-code-editor">100%</span><span class="material-symbols-outlined text-[14px] cursor-pointer hover:text-on-surface">zoom_in</span></div></div></footer></body></html>