<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Labels placement</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font: 14px/1.5 system-ui, sans-serif;
  background: #1b1e22;
  color: #d5d9de;
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #23272c;
  border-bottom: 1px solid #34393f;
  position: sticky;
  top: 0;
  z-index: 100;
}

.bar__check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.bar__check input { cursor: pointer; }

button, .btn {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid #3d434a;
  border-radius: 4px;
  background: #2c3137;
  color: #d5d9de;
  cursor: pointer;
}

button:hover, .btn:hover { background: #363c43; }

.stage { padding: 16px; overflow: auto; display: flex; justify-content: center; }

.empty { padding: 60px 16px; text-align: center; color: #6c747d; }

.imagemap { position: relative; display: inline-block; }
.imagemap img { display: block; cursor: crosshair; }

.label { position: absolute; transform: translate(-50%, -50%); }
.label:hover, .label:focus-within, .label_open { z-index: 10; }

.mark {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d9412b;
  box-shadow: 0 1px 4px rgb(0 0 0 / .6);
}

.label:hover .mark { background: #f0603f; }

.box {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  margin-bottom: 8px;
  background: #2c3137;
  border: 1px solid #434a52;
  border-radius: 4px;
}

.label:hover .box,
.label:focus-within .box,
.label_open .box { display: block; }

.box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.label_below .box { bottom: auto; top: 100%; margin: 8px 0 0; }
.label_below .box::after { top: auto; bottom: 100%; }

.box textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 8px 22px 8px 8px;
  border: 0;
  background: none;
  color: #d5d9de;
  font: inherit;
  resize: vertical;
  outline: none;
}

.box__del {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: 0;
  background: none;
  color: #7d858e;
}

.box__del:hover { background: none; color: #d9412b; }

.output { padding: 0 16px 24px; }
.output[hidden] { display: none; }

.output__wrap { position: relative; }

.output textarea {
  width: 100%;
  height: 240px;
  padding: 12px;
  border: 1px solid #3d434a;
  border-radius: 4px;
  background: #16191c;
  color: #d5d9de;
  font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace;
  resize: vertical;
}

.output__copy { position: absolute; top: 8px; right: 8px; }
</style>
</head>
<body>

<div class="bar">
  <label class="btn">
    Upload an image
    <input type="file" accept="image/*" id="file" hidden>
  </label>
  <button id="get">Get Template Code</button>
  <label class="bar__check">
    <input type="checkbox" id="marked">
    Marked
  </label>
</div>

<div class="stage">
  <p class="empty" id="empty">Upload an image</p>
  <div class="imagemap" id="map" hidden><img id="img" alt=""></div>
</div>

<div class="output" id="output" hidden>
  <div class="output__wrap">
    <textarea id="code" readonly></textarea>
    <button class="output__copy" id="copy">Copy</button>
  </div>
</div>

<script>
const file = document.getElementById('file');
const map = document.getElementById('map');
const img = document.getElementById('img');
const empty = document.getElementById('empty');
const output = document.getElementById('output');
const code = document.getElementById('code');
const marked = document.getElementById('marked');

file.addEventListener('change', () => {
  const f = file.files[0];
  if (!f) return;
  img.src = URL.createObjectURL(f);
  map.querySelectorAll('.label').forEach(el => el.remove());
  map.hidden = false;
  empty.hidden = true;
  output.hidden = true;
});

img.addEventListener('click', e => {
  const r = img.getBoundingClientRect();
  addLabel(
    (e.clientX - r.left) / r.width * 100,
    (e.clientY - r.top) / r.height * 100
  );
});

function addLabel(x, y) {
  const label = document.createElement('div');
  label.className = 'label label_open' + (y < 25 ? ' label_below' : '');
  label.style.left = fmt(x) + '%';
  label.style.top = fmt(y) + '%';
  label.innerHTML =
    '<div class="mark"></div>' +
    '<div class="box"><textarea placeholder="Tag text"></textarea>' +
    '<button class="box__del" title="Delete">&times;</button></div>';

  label.querySelector('.box__del').addEventListener('click', () => label.remove());

  const ta = label.querySelector('textarea');
  ta.addEventListener('blur', () => label.classList.remove('label_open'));

  map.appendChild(label);
  ta.focus();
}

function fmt(n) {
  return String(Math.round(n * 10) / 10);
}

document.getElementById('get').addEventListener('click', () => {
  const isMarked = marked.checked;
  const blocks = [...map.querySelectorAll('.label')].map(label => {
    const x = label.style.left.replace('%', '');
    const y = label.style.top.replace('%', '');
    const text = label.querySelector('textarea').value.trim();
    return isMarked
      ? `|{{ContentMap/label|${x}%|${y}%|${text}}}`
      : `|{{ContentMap/label|${x}%|${y}%|${text}|marked=no}}`;
  });
  code.value = blocks.join('\n');
  output.hidden = false;
  output.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});

document.getElementById('copy').addEventListener('click', async e => {
  const btn = e.currentTarget;
  try {
    await navigator.clipboard.writeText(code.value);
  } catch {
    code.select();
    document.execCommand('copy');
  }
  btn.textContent = 'Copied';
  setTimeout(() => btn.textContent = 'Copy', 1200);
});
</script>

</body>
</html>