[html][html]
<style>
@font-face {
  font-family: 'kiri-youmurdererbb';
  src: url('https://forumstatic.ru/files/001c/0c/35/65006.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kiri-venecia';
  src: url('https://forumstatic.ru/files/001c/0c/35/90521.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kiri-roadrage';
  src: url('https://forumstatic.ru/files/001c/0c/35/98702.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kiri-majestic';
  src: url('https://forumstatic.ru/files/001c/0c/35/16562.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kiri-christmas';
  src: url('https://forumstatic.ru/files/001c/0c/35/64381.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kiri-amphicyr';
  src: url('https://forumstatic.ru/files/001c/0c/35/13711.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.kiriw-wrapper {
  font-family: Georgia, serif;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.kiriw-wrapper input,
.kiriw-wrapper textarea,
.kiriw-wrapper select {
  font-size: 16px;
  padding: 10px;
  margin: 10px 0;
  width: 100%;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.kiriw-wrapper input[type="button"] {
  background: var(--sec-accent);
  color: #e3e3e3;
  border: none;
  cursor: pointer;
  transition: .2s ease;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: none;
}

.kiriw-wrapper input[type="button"]:hover {
  filter: brightness(1.08);
}

.kiriw-wrapper textarea {
  height: 180px;
  resize: vertical;
}

.kiriw-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kiriw-row > div {
  flex: 1 1 300px;
}

.kiriw-note {
  font-size: 13px;
  margin-top: -5px;
  margin-bottom: 10px;
}

.cover-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 15px 0 20px;
}

.cover-item {
  text-align: center;
  width: 80px;
}

.cover-item img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
}

.cover-list input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid #888;
  border-radius: 50%;
  background-color: var(--main-bg);
  margin-bottom: 8px;
  cursor: pointer;
}

.cover-list input[type="radio"]:checked {
  background-color: var(--sec-accent);
  border-color: var(--sec-accent);
}

.kiriw-count {
  font-weight: bold;
  color: var(--sec-accent);
}

#kiriFont {
  font-size: 16px;
  line-height: 1.2;
  padding: 8px 10px;
}

#kiriFont option {
  font-size: 16px;
  line-height: 1.2;
  background: var(--main-bg);
  color: inherit;
}

#kiriFont option[value="kiri-font-amphicyr"] {
  font-family: 'kiri-amphicyr', serif;
}

#kiriFont option[value="kiri-font-youmurdererbb"] {
  font-family: 'kiri-youmurdererbb', serif;
}

#kiriFont option[value="kiri-font-venecia"] {
  font-family: 'kiri-venecia', serif;
}

#kiriFont option[value="kiri-font-roadrage"] {
  font-family: 'kiri-roadrage', serif;
}

#kiriFont option[value="kiri-font-majestic"] {
  font-family: 'kiri-majestic', serif;
}

#kiriFont option[value="kiri-font-christmas"] {
  font-family: 'kiri-christmas', serif;
}
</style>

<div class="kiriw-wrapper">
  <input type="text" id="kiriTitle" placeholder="Заголовок" value="Друг...">

  <textarea id="kiriText" placeholder="Текст письма"></textarea>

  <div class="kiriw-row">
    <div>
      <input type="text" id="kiriInitials" placeholder="Инициалы" maxlength="3" onkeyup="countKiriInitials()" oninput="countKiriInitials()">
      <div class="kiriw-note">букв: <span id="kiriCount" class="kiriw-count">0</span> / 3</div>
    </div>

    <div>
      <input type="text" id="kiriColor" placeholder="Цвет оттиска" value="#9E703C">
    </div>
  </div>

  <div class="kiriw-row">
    <div>
      <select id="kiriSheet">
        <option value="kiri-sheet">чистый лист</option>
        <option value="kiri-sheet-fufu" selected>грязный лист</option>
      </select>
    </div>

    <div>
      <select id="kiriFont">
        <option value="kiri-font-amphicyr" selected>Amphicy</option>
        <option value="kiri-font-youmurdererbb">You Murderer</option>
        <option value="kiri-font-venecia">Венеция</option>
        <option value="kiri-font-roadrage">Roadrage</option>
        <option value="kiri-font-majestic">Majestic</option>
        <option value="kiri-font-christmas">Christmas</option>
      </select>
    </div>
  </div>

  <div class="kiriw-note" style="margin-top:10px;">печать</div>

  <div class="cover-list">
    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/017c681294a5.png" checked>
      <img src="https://cdn.imgchest.com/files/017c681294a5.png">
    </label>

    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/7f972201106b.png">
      <img src="https://cdn.imgchest.com/files/7f972201106b.png">
    </label>

    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/0032a793a4e9.png">
      <img src="https://cdn.imgchest.com/files/0032a793a4e9.png">
    </label>

    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/c4bae208db0e.png">
      <img src="https://cdn.imgchest.com/files/c4bae208db0e.png">
    </label>

    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/c81cf1501dd0.png">
      <img src="https://cdn.imgchest.com/files/c81cf1501dd0.png">
    </label>

    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/af350b217889.png">
      <img src="https://cdn.imgchest.com/files/af350b217889.png">
    </label>

    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/7e016eb17269.png">
      <img src="https://cdn.imgchest.com/files/7e016eb17269.png">
    </label>

    <label class="cover-item">
      <input type="radio" name="kiriSeal" value="none">
      <div style="height:70px;display:flex;align-items:center;justify-content:center;">нет</div>
    </label>
  </div>

  <input type="button" value="Создать HTML" onclick="generateKiriHTML()">

  <textarea id="kiriOutput" readonly placeholder="Сгенерированный HTML появится здесь"></textarea>
</div>

<script>
function countKiriInitials() {
  var initials = document.getElementById('kiriInitials').value;
  initials = initials.replace(/[^A-Za-zА-Яа-яЁё]/g, '');
  initials = initials.toUpperCase();
  initials = initials.substring(0, 3);
  document.getElementById('kiriInitials').value = initials;
  document.getElementById('kiriCount').innerHTML = initials.length;
}

function generateKiriHTML() {
  var title = document.getElementById('kiriTitle').value;
  var text = document.getElementById('kiriText').value;
  var initials = document.getElementById('kiriInitials').value;
  var color = document.getElementById('kiriColor').value;
  var sheet = document.getElementById('kiriSheet').value;
  var font = document.getElementById('kiriFont').value;
  var seal = document.querySelector('input[name="kiriSeal"]:checked').value;

  var initialsClass = 'kiri-monogram-letter';
  if (initials.length == 2) {
    initialsClass = 'kiri-monogram-letter kiri-double';
  }
  if (initials.length == 3) {
    initialsClass = 'kiri-monogram-letter kiri-triple';
  }

  var monogramHtml = '';

  if (seal != 'none') {
    monogramHtml =
'    <div class="kiri-monogram">' +
'      <img class="kiri-monogram-img" src="' + seal + '" alt="">' +
'      <div class="' + initialsClass + '" style="--seal-color:' + color + ';">' + initials + '</div>' +
'    </div>';
  }

  var html =
'<link rel="stylesheet" href="https://forumstatic.ru/files/001c/6d/19/29725.css?v=2">' +
'<div class="kiri-wrap ' + font + '">' +
'  <div class="' + sheet + '">' +
'    <div class="kiri-inner">' +
'      <div class="kiri-title">' + title + '</div>' +
'      <div class="kiri-text">' + text + '</div>' +
'    </div>' +
      monogramHtml +
'  </div>' +
'</div>';

  document.getElementById('kiriOutput').value = html;
}
</script>
[/html][/html]