Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Карта-редактор: направления, иконки, разметка</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <!-- Optional icon fonts; not required for functionality --> | |
| </head> | |
| <body> | |
| <header class="topbar"> | |
| <div class="brand"> | |
| <span class="logo">🎯</span> | |
| <span class="title">Карта-редактор</span> | |
| </div> | |
| <div class="toolbar" id="toolbar"> | |
| <div class="tool-group"> | |
| <button class="tool-btn" data-tool="select" title="Выбор/Перемещение (V)" aria-label="Выбор"> | |
| <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m3 2l7 18l2-7l7-2z"/></svg> | |
| </button> | |
| <button class="tool-btn" data-tool="pan" title="Панорамирование (H или ПКМ/Средняя кнопка)" aria-label="Панорамирование"> | |
| <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m12 2l4 4l-4 4l-4-4zM4 12l4 4l-4 4l-4-4zM12 14l4 4l-4 4l-4-4zM20 12l4 4l-4 4l-4-4z"/></svg> | |
| </button> | |
| <button class="tool-btn" data-tool="text" title="Текст (T)" aria-label="Текст"> | |
| <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 4v3h5.5v12h3V7H19V4z"/></svg> | |
| </button> | |
| <button class="tool-btn" data-tool="arrow" title="Стрелка (A)" aria-label="Стрелка"> | |
| <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M2 12h15l-5 5l1.5 1.5L22.5 13L13.5 4L12 5.5l5 5H2z"/></svg> | |
| </button> | |
| <button class="tool-btn" data-tool="curve" title="Изогнутая стрелка (C)" aria-label="Кривая"> | |
| <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M3 13c4-8 14-8 18 0c-4 8-14 8-18 0Zm3 4h3v3h3v-6h-3v3h-3z"/></svg> | |
| </button> | |
| <button class="tool-btn" data-tool="lasso" title="Лasso/Scribble (L)" aria-label="Лasso"> | |
| <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M9 3l1.5 4.5L15 9l-4.5 1.5L9 15l1.5-4.5L6 9l4.5-1.5L9 3z"/></svg> | |
| </button> | |
| </div> | |
| <div class="tool-group"> | |
| <label class="btn"> | |
| Загрузить карту | |
| <input type="file" id="mapFile" accept="image/*" /> | |
| </label> | |
| <button id="pasteBtn" class="btn" title="Вставить из буфера (Ctrl/Cmd+V)">Вставить</button> | |
| <button id="clearMapBtn" class="btn" title="Очистить карту">Очистить</button> | |
| </div> | |
| <div class="tool-group"> | |
| <label class="btn"> | |
| Загрузить иконки | |
| <input type="file" id="iconsFile" accept="image/*" multiple /> | |
| </label> | |
| </div> | |
| <div class="tool-group color-group"> | |
| <span class="color-label">Цвет:</span> | |
| <div class="colors" id="colorPalette" aria-label="Цвет"> | |
| <!-- colors rendered by script --> | |
| </div> | |
| <input type="color" id="colorPicker" value="#e53935" title="Выбрать цвет" /> | |
| </div> | |
| <div class="tool-group"> | |
| <label class="slider"> | |
| Размер | |
| <input type="range" id="sizeSlider" min="16" max="256" value="64" /> | |
| </label> | |
| <label class="slider"> | |
| Ширина линии | |
| <input type="range" id="strokeSlider" min="1" max="20" value="4" /> | |
| </label> | |
| </div> | |
| <div class="tool-group"> | |
| <label class="slider"> | |
| Масштаб | |
| <input type="range" id="zoomSlider" min="10" max="300" value="100" /> | |
| </label> | |
| <button id="fitBtn" class="btn" title="Уместить в экран">Уместить</button> | |
| <button id="resetViewBtn" class="btn" title="Сбросить вид">Сброс</button> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="exportBtn" class="btn primary" title="Экспорт PNG">Экспорт PNG</button> | |
| <button id="clearAllBtn" class="btn danger" title="Очистить всё ( Ctrl/Cmd+Delete )">Очистить всё</button> | |
| </div> | |
| </div> | |
| <div class="help"> | |
| <details> | |
| <summary>Горячие клавиши</summary> | |
| <ul> | |
| <li>V — выбор/перемещение</li> | |
| <li>H — панорамирование (или ПКМ/средняя кнопка мыши)</li> | |
| <li>A — стрелка</li> | |
| <li>C — изогнутая стрелка</li> | |
| <li>L — лasso/Scribble</li> | |
| <li>T — текст</li> | |
| <li>Ctrl/Cmd+S — экспорт PNG</li> | |
| <li>Ctrl/Cmd+V — вставить картинку из буфера</li> | |
| <li>Delete — удалить выбранный объект</li> | |
| </ul> | |
| </details> | |
| </div> | |
| </header> | |
| <main class="stage"> | |
| <div id="canvasWrap" class="canvas-wrap" tabindex="0"> | |
| <img id="mapImage" class="map-img" alt="Карта" /> | |
| <canvas id="overlayCanvas" class="overlay-canvas"></canvas> | |
| <!-- Floating text editor --> | |
| <textarea id="textEditor" class="text-editor" spellcheck="false" style="display:none;"></textarea> | |
| <!-- Invisible drop zone for OS-level drops --> | |
| <div id="dropZone" class="drop-zone">Отпустите изображение для загрузки</div> | |
| </div> | |
| </main> | |
| <!-- Icon palette --> | |
| <footer class="palette"> | |
| <div class="palette-inner"> | |
| <div class="palette-title">Иконки (перетащите на карту или кликните, затем кликните по карте для размещения)</div> | |
| <div id="iconPalette" class="icons" aria-label="Палитра иконок"> | |
| <!-- icons rendered by script --> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |