[html]<div style="text-align:center; margin-top:20px;">
  <div class="code-generator-wrapper" style="
      display:inline-block;
      padding:15px 20px;
      border-radius:15px;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.3);
  ">
    <div class="code-generator">
      <div class="notification" id="result" style="display:none; margin-bottom:8px;">удачненько скопировано</div>
      <div class="input-fields" style="margin-bottom:10px;">
        <input type="text" id="type" placeholder="группа // соло // актёр // актриса" style="margin-bottom:5px; border:1px solid black; border-radius:5px; padding:5px; width:200px; color:black;"><br>
        <input type="text" id="name" placeholder="имя фамилия" style="margin-bottom:5px; border:1px solid black; border-radius:5px; padding:5px; width:200px; color:black;"><br>
        <input type="text" id="link" placeholder="ссылка на профиль при регистрации" style="margin-bottom:5px; border:1px solid black; border-radius:5px; padding:5px; width:200px; color:black;"><br>
      </div>
      <button type="button" id="copyButton" style="margin-right:8px;">жмакнуть со ссылкой</button>
      <button type="button" id="copyWithoutLinkButton">жмакнуть без ссылки</button>
      <textarea id="hiddenTextarea" style="position:absolute; left:-9999px;"></textarea>
    </div>
  </div>
</div>

<style>
input::placeholder {
  color: black;
  opacity: 1;
}
input::-webkit-input-placeholder {
  color: black;
}
input::-moz-placeholder {
  color: black;
}
input:-ms-input-placeholder {
  color: black;
}
input:-moz-placeholder {
  color: black;
}
</style>

<script>
const typeInput = document.getElementById('type');
const nameInput = document.getElementById('name');
const linkInput = document.getElementById('link');
const resultElement = document.getElementById('result');
const hidden = document.getElementById('hiddenTextarea');

function copyToClipboard(code) {
  hidden.value = code;
  hidden.select();
  try {
    document.execCommand('copy');
    resultElement.textContent = 'удачненько скопировано';
    resultElement.style.display = 'block';
    setTimeout(() => resultElement.style.display = 'none', 1500);
  } catch (err) {
    resultElement.textContent = 'Ошибка копирования';
    resultElement.style.display = 'block';
  }
  if (navigator.clipboard) {
    navigator.clipboard.writeText(code).catch(err => console.error('Clipboard API error:', err));
  }
}

// Ссылка
document.getElementById("copyButton").onclick = () => {
  let type = typeInput.value.trim();
  let name = nameInput.value.trim();
  let link = linkInput.value.trim();
 
  if(!type || !name || !link){
    resultElement.textContent = 'Пожалуйста, заполните все поля!';
    resultElement.style.display = 'block';
    setTimeout(() => resultElement.style.display = 'none', 1500);
    return;
  }

  let code = `${type} // <a href="${link}">${name}</a>`;
  copyToClipboard(code);
}

// Без ссылки
document.getElementById("copyWithoutLinkButton").onclick = () => {
  let type = typeInput.value.trim();
  let name = nameInput.value.trim();
 
  if(!type || !name){
    resultElement.textContent = 'Пожалуйста, заполните тип и имя!';
    resultElement.style.display = 'block';
    setTimeout(() => resultElement.style.display = 'none', 1500);
    return;
  }

  let code = `${type} // ${name}`;
  copyToClipboard(code);
}
</script>
[/html]