Hugging Face's logo

Spaces:
Ra123a
/
mapannotator
Running

App Files Community
mapannotator
File size: 6,169 Bytes 
c3e6da9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
<!DOCTYPE html>
<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>