/
diloytd
/
rectangle
Обзор
Документация
Войти
/
diloytd
/
rectangle
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
162 строки
10 KB
diloytd
add second window for pictures
10 июл 2026, 13:43
10 июл 2026, 13:43
dc3e280
Код
Авторство
О чём код?
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Редактор прямоугольников</title> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='14' width='44' height='36' rx='6' fill='%23dbeafe' stroke='%232563eb' stroke-width='4'/%3E%3Cpath d='M32 14v36M10 32h44' stroke='%232563eb' stroke-width='3'/%3E%3C/svg%3E" /> <link rel="stylesheet" href="./style.css?v=20260710-1341" /> </head> <body> <div class="app"> <header class="toolbar" aria-label="Панель управления редактором"> <form class="toolbar__form" id="size-form" novalidate> <label class="field"> <span class="field__label">Ширина</span> <input class="field__input" id="width-input" name="width" type="number" min="1" step="1" placeholder="1200" required /> </label> <label class="field"> <span class="field__label">Высота</span> <input class="field__input" id="height-input" name="height" type="number" min="1" step="1" placeholder="800" required /> </label> <button class="button button--primary" type="submit">Создать</button> </form> <div class="toolbar__actions" id="editor-actions" hidden> <button class="button button--tool" id="vertical-tool" type="button" aria-pressed="false">Вертикаль</button> <button class="button button--tool" id="horizontal-tool" type="button" aria-pressed="false">Горизонталь</button> <button class="button" id="undo-button" type="button" disabled>Отмена <span class="shortcut">Ctrl+Z</span></button> <button class="button" id="redo-button" type="button" disabled>Повтор <span class="shortcut">Ctrl+Y</span></button> <button class="button button--danger" id="clear-button" type="button">Очистить</button> </div> </header> <main class="workspace"> <aside class="workspace__side"> <section class="image-panel" aria-labelledby="image-panel-title"> <h2 class="workspace__title" id="image-panel-title">Картинка</h2> <div class="image-panel__dropzone" id="image-dropzone" role="button" tabindex="0" aria-label="Выбрать или перетащить файл EMF, PNG или SVG" > <input class="image-panel__input" id="image-file-input" type="file" accept=".emf,.png,.svg,image/png,image/svg+xml" /> <div class="image-panel__placeholder" id="image-placeholder"> <strong>Выберите файл</strong> <span>или перетащите сюда EMF, PNG, SVG</span> </div> <div class="image-panel__preview" id="image-preview" hidden> <div class="image-panel__frame" id="image-frame" hidden> <img class="image-panel__image" id="image-preview-image" alt="Выбранная картинка" hidden /> </div> <div class="image-panel__emf" id="image-emf-preview" hidden> <strong>EMF выбран</strong> <span id="image-emf-name"></span> <small>В desktop-версии файл остаётся оригинальным. В браузере нужен конвертер EMF в PNG/SVG.</small> </div> </div> </div> <div class="image-panel__controls" id="image-controls" hidden> <button class="image-panel__control-button" id="image-scale-down" type="button" aria-label="Уменьшить картинку">−</button> <button class="image-panel__control-button" id="image-scale-up" type="button" aria-label="Увеличить картинку">+</button> <button class="image-panel__control-button image-panel__control-button--danger" id="image-remove-button" type="button" aria-label="Удалить картинку">×</button> </div> </section> <section class="workspace__panel" aria-labelledby="settings-panel-title"> <h2 class="workspace__title" id="settings-panel-title">Параметры</h2> <dl class="stats" id="stats-panel"> <div class="stats__row"> <dt>Прямоугольников</dt> <dd id="rect-count">0</dd> </div> <div class="stats__row"> <dt>Выбран</dt> <dd id="selected-info">нет</dd> </div> <div class="stats__row"> <dt>Инструмент</dt> <dd id="tool-info">не выбран</dd> </div> </dl> <p class="workspace__hint"> Выберите инструмент, наведите мышь на прямоугольник и кликните рядом с нужным местом. В окне уточните точные размеры частей. </p> </section> </aside> <div class="workspace__divider" id="workspace-divider" role="separator" aria-label="Изменить ширину окон картинки и рисования" aria-orientation="vertical" tabindex="0" ></div> <section class="canvas-shell" aria-label="Рабочая область SVG"> <div class="canvas-shell__export-controls" id="canvas-export-controls" hidden aria-label="Сохранение и экспорт"> <button class="canvas-shell__export-button" id="save-project-button" type="button" aria-label="Сохранить проект" title="Сохранить проект"> <svg class="canvas-shell__export-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> <path d="M17 21v-8H7v8M7 3v5h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> <button class="canvas-shell__export-button" id="export-svg-button" type="button" aria-label="Экспорт SVG" title="Экспорт SVG"> <svg class="canvas-shell__export-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path d="M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> <button class="canvas-shell__export-button" id="print-pdf-button" type="button" aria-label="Печать или PDF" title="Печать / PDF"> <svg class="canvas-shell__export-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> <path d="M6 14h12v7H6v-7Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> </svg> </button> </div> <div class="canvas-shell__status" id="message" role="status" aria-live="polite"></div> <div class="canvas-shell__surface" id="drawing-root"> <div class="empty-state" id="empty-state"> <div class="empty-state__icon" aria-hidden="true"></div> <h2 class="empty-state__title">Создайте внешний прямоугольник</h2> <p class="empty-state__text">Введите ширину и высоту, чтобы начать построение схемы.</p> </div> </div> </section> </main> </div> <div class="modal" id="split-modal" hidden> <div class="modal__backdrop" data-modal-cancel></div> <section class="modal__dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title"> <form class="modal__form" id="split-form" novalidate> <header class="modal__header"> <h2 class="modal__title" id="modal-title">Разделение</h2> <button class="modal__close" type="button" data-modal-cancel aria-label="Закрыть окно">×</button> </header> <p class="modal__text" id="modal-description"></p> <div class="modal__fields"> <label class="field field--modal"> <span class="field__label" id="split-distance-label">Первая часть</span> <input class="field__input" id="split-distance" type="number" min="1" step="1" autocomplete="off" required /> </label> <label class="field field--modal"> <span class="field__label" id="split-remainder-label">Вторая часть</span> <input class="field__input" id="split-remainder" type="number" min="1" step="1" autocomplete="off" required /> </label> </div> <p class="modal__hint" id="modal-range"></p> <p class="modal__error" id="modal-error" role="alert"></p> <footer class="modal__actions"> <button class="button button--primary" type="submit">ОК</button> <button class="button" type="button" data-modal-cancel>Отмена</button> </footer> </form> </section> </div> <script type="module" src="./js/app.js?v=20260710-1340"></script> </body> </html>