← Назад к Apps

UUID Generator

Генератор уникальных UUID v4. Создавай одиночные или массовые UUID, копируй одним кликом. Полезен для разработчиков при работе с базами данных, API и уникальными идентификаторами.

▶ Запустить

👁 9

const root = container;

const style = document.createElement('style');
style.textContent = `
  .uuid-wrap {
    font-family: monospace;
    color: #00ff9c;
    max-width: 600px;
  }
  .uuid-title {
    font-size: 16px;
    margin: 0 0 16px 0;
  }
  .uuid-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .uuid-controls label {
    font-size: 13px;
    color: #aaa;
  }
  .uuid-controls input {
    width: 60px;
    background: #111;
    color: #00ff9c;
    border: 1px solid #00ff9c;
    padding: 6px 10px;
    font-family: monospace;
    font-size: 13px;
    border-radius: 6px;
  }
  .uuid-btn {
    padding: 8px 16px;
    background: #00ff9c;
    color: #000;
    border: none;
    border-radius: 6px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
  }
  .uuid-btn:hover { background: #00cc7a; }
  .uuid-btn.outline {
    background: transparent;
    color: #00ff9c;
    border: 1px solid #00ff9c;
  }
  .uuid-btn.outline:hover {
    background: #00ff9c;
    color: #000;
  }
  .uuid-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .uuid-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111827;
    border: 1px solid #00ff9c22;
    border-radius: 8px;
    padding: 10px 14px;
    gap: 10px;
  }
  .uuid-item span {
    font-size: 13px;
    word-break: break-all;
  }
  .uuid-copy {
    background: transparent;
    border: 1px solid #00ff9c44;
    color: #00ff9c;
    font-family: monospace;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .uuid-copy:hover {
    background: #00ff9c;
    color: #000;
  }
  .uuid-copy.copied {
    background: #00ff9c;
    color: #000;
  }
  .uuid-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }
`;
document.head.appendChild(style);

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    const r = Math.random() * 16 | 0;
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

const wrap = document.createElement('div');
wrap.className = 'uuid-wrap';

wrap.innerHTML = `
  <p class="uuid-title">> UUID v4 Generator_</p>
  <div class="uuid-controls">
    <label>Количество:</label>
    <input type="number" id="uuid-count" value="1" min="1" max="50">
    <button class="uuid-btn" id="uuid-generate">Генерировать</button>
    <button class="uuid-btn outline" id="uuid-copy-all">Копировать все</button>
  </div>
  <div class="uuid-list" id="uuid-list"></div>
`;

root.appendChild(wrap);

function renderUUIDs(count) {
  const list = document.getElementById('uuid-list');
  list.innerHTML = '';
  for (let i = 0; i < count; i++) {
    const uuid = generateUUID();
    const item = document.createElement('div');
    item.className = 'uuid-item';
    item.innerHTML = `
      <span>${uuid}</span>
      <button class="uuid-copy" data-uuid="${uuid}">Копировать</button>
    `;
    list.appendChild(item);
  }
}

renderUUIDs(1);

document.getElementById('uuid-generate').addEventListener('click', () => {
  const count = Math.min(50, Math.max(1, parseInt(document.getElementById('uuid-count').value) || 1));
  renderUUIDs(count);
});

document.getElementById('uuid-list').addEventListener('click', e => {
  if (e.target.classList.contains('uuid-copy')) {
    const uuid = e.target.dataset.uuid;
    navigator.clipboard.writeText(uuid).then(() => {
      e.target.textContent = '✓';
      e.target.classList.add('copied');
      setTimeout(() => {
        e.target.textContent = 'Копировать';
        e.target.classList.remove('copied');
      }, 1500);
    });
  }
});

document.getElementById('uuid-copy-all').addEventListener('click', () => {
  const uuids = [...document.querySelectorAll('.uuid-item span')].map(s => s.textContent).join('\n');
  navigator.clipboard.writeText(uuids).then(() => {
    const btn = document.getElementById('uuid-copy-all');
    btn.textContent = '✓ Скопировано';
    setTimeout(() => btn.textContent = 'Копировать все', 1500);
  });
});