[html]<style>
@font-face { font-family: 'Dwarven'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf'); }
@font-face { font-family: 'Leotaro'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf'); }

.gen-wrapper { width:600px; margin:2px auto; padding:5px; text-transform: lowercase; font-family:'Leotaro';}
.gen-bg { padding:10px; background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); border-radius:15px; }
.gen-inner { background:#d6d6d6; padding:20px; border-radius:5px;  font-family:'Leotaro';}
.gen-title { text-align:center; font-size:35px; color:#000; margin-bottom:20px; font-family:'Dwarven' !important;}
.gen-inner label { font-size:18px; display:block; font-weight:normal; margin-top:10px; color:#333; font-family:'Leotaro' !important;}
.gen-inner input, .gen-inner textarea { width:100%; padding:8px; border-radius:10px; border:1px solid #a9a9a9; margin-top:5px;  font-family:'Leotaro'; font-size:14px; box-sizing:border-box; background:#eee; resize:none; color:#000; }
.gen-inner button { margin-top:15px; padding:10px; width:100%; border:none; border-radius:10px; font-size:25px; cursor:pointer;  font-family:'Dwarven' !important; color:#d6d6d6; text-shadow: 1px 1px 2px #000; background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); background-size:cover; transition: opacity 0.3s; }
.gen-inner button:hover { opacity:0.8; }
#output { margin-top:15px; font-family:monospace; padding:10px; border-radius:10px; border:1px solid #a9a9a9; resize:none; background:#eee; width:100%; overflow:auto; }
#copyMessage { color: green; font-weight: bold; margin-top:5px; display:none; text-align:center; }
.gen-wrapper::-webkit-scrollbar{width:4px;}
.gen-wrapper::-webkit-scrollbar-track{background:transparent;}
.gen-wrapper::-webkit-scrollbar-thumb{background:#744D37;border-radius:10px;}
.gen-wrapper{scrollbar-width:thin;scrollbar-color:#744D37 transparent;}
input { height: 30px !important;}
</style>

<div class="gen-wrapper">
  <div class="gen-bg">
    <div class="gen-inner">
      <div class="gen-title">АНКЕТИРОВАНИЕ</div>
    <p style='text-align:center; font-size:14px;'>Всё максимально просто: вы зполняете форму, генерируете код, копируете и вставляяете - вуаля, ваша заявка готова!</p>
   
    </div>
  </div>
</div>

<style>
@font-face { font-family: 'Dwarven'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf'); }
@font-face { font-family: 'Leotaro'; src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf'); }

.gen-wrapper { width:600px; margin:2px auto; padding:5px; text-transform: lowercase; font-family:'Leotaro';}
.gen-bg { padding:10px; background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); border-radius:15px; }
.gen-inner { background:#d6d6d6; padding:20px; border-radius:5px;  font-family:'Leotaro';}
.gen-title { text-align:center; font-size:35px; color:#000; margin-bottom:20px; font-family:'Dwarven' !important;}
.gen-inner label { font-size:18px; display:block; font-weight:normal; margin-top:10px; color:#333; font-family:'Leotaro' !important;}
.gen-inner input, .gen-inner textarea { width:100%; padding:8px; border-radius:10px; border:1px solid #a9a9a9; margin-top:5px;  font-family:'Leotaro'; font-size:14px; box-sizing:border-box; background:#eee; resize:none; color:#000; }
.gen-inner button { margin-top:15px; padding:10px; width:100%; border:none; border-radius:10px; font-size:25px; cursor:pointer;  font-family:'Dwarven' !important; color:#d6d6d6; text-shadow: 1px 1px 2px #000; background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat; filter: saturate(70%); background-size:cover; transition: opacity 0.3s; }
.gen-inner button:hover { opacity:0.8; }
#output { margin-top:15px; font-family:monospace; padding:10px; border-radius:10px; border:1px solid #a9a9a9; resize:none; background:#eee; width:100%; overflow:auto; }
#copyMessage { color: green; font-weight: bold; margin-top:5px; display:none; text-align:center; }
.gen-wrapper::-webkit-scrollbar{width:4px;}
.gen-wrapper::-webkit-scrollbar-track{background:transparent;}
.gen-wrapper::-webkit-scrollbar-thumb{background:#744D37;border-radius:10px;}
.gen-wrapper{scrollbar-width:thin;scrollbar-color:#744D37 transparent;}
input { height: 30px !important;}
</style>

<div class="rp-wrapper2">
  <div class="rp-content2">

    <div class="top-block">
      <div class="top-title">ГЕНЕРАТОР ЗАЯВКИ</div>
    </div>

    <div class="form-block">
      <label>URL фото:</label>
      <input type="text" id="photoUrl" placeholder="Вставьте URL фото">
    </div>

    <div class="form-block">
      <label>Внешность:</label>
      <input type="text" id="appearance" placeholder="Внешность на английском">
    </div>

    <div class="form-block">
      <label>Лояльность / деятельность / раса:</label>
      <textarea id="loyalty" placeholder="Введите информацию. Enter = новый абзац" rows="4"></textarea>
    </div>

    <div class="form-block">
      <label>Пожелания:</label>
      <textarea id="wishes" placeholder="Введите информацию. Enter = новый абзац" rows="4"></textarea>
    </div>

<div style="display:flex; align-items:center; gap:10px; margin-top:15px;">
  <button id="generateBtn">Сгенерировать код</button>
  <button id="copyBtn">Скопировать код</button>
  <span id="copyMessage" style="color:green; font-weight:bold;"></span>
</div>

<div id="result" style="margin-top:15px;"></div>

  </div>
</div>

<style>
@font-face {
  font-family: 'Dwarven';
  src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf');
}
@font-face {
  font-family: 'Leotaro';
  src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf');
}

.rp-wrapper2{
  width:550px;
  margin:0 auto;
  padding:10px;
  border-radius:15px;
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  filter:saturate(70%);
}

.rp-content2{
  background:#d6d6d6;
  border-radius:5px;
  padding:15px;
  font-family:'Leotaro';
}

.top-title{
  font-family:'Dwarven';
  font-size:30px;
  padding-top:8px;
  color:#d6d6d6;
  margin-bottom:15px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  text-align:center;
}

.form-block{
  margin-bottom:15px;
}

.form-block label{
  display:block;
  font-weight:bold;
  margin-bottom:5px;
}

.form-block input,
.form-block textarea{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #999;
  font-family:'Leotaro';
  resize:none;
  box-sizing:border-box;
  background:#eee;
  color:#000;
}

textarea{
  height:80px;
}

button{
  font-family:'Leotaro';
  padding:8px 12px;
  margin:0;
  border:none;
  border-radius:8px;
  cursor:pointer;
  color:#fff;
  background:url('https://img.freepik.com/premium-photo/seamless-abstract-green-background-with-cracked-texture_743855-18279.jpg') repeat;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  transition: transform 0.1s;
}

button:hover{
  transform: scale(1.05);
}

#result{
  background:#eee;
  border:1px solid #ccc;
  border-radius:10px;
  padding:10px;
  height:150px;
  overflow:auto;
  font-family:monospace;
  font-size:14px;
  white-space:pre-wrap;
  word-wrap:break-word;
}

#copyMessage{
  font-family:'Leotaro';
}

.top-block{
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  border-radius:15px;
  text-align:center;
  padding:10px 5px 5px 5px;
  margin-bottom:20px;
}

.rp-wrapper{
  width:850px;
  margin:0 auto;
  padding:10px;
  border-radius:20px;
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  filter:saturate(70%);
}

.rp-content{
  background:#d6d6d6;
  border-radius:15px;
  padding:15px;
}

.rp-content a {
  text-decoration: none; 
  color: #26a226;
  cursor: pointer;     
}

.top-title{
  font-family:'Dwarven';
  font-size:40px;
  padding-top:8px;
  color:#d6d6d6;
  margin-bottom:15px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.photo-block{
  text-align:center;
  margin-bottom:15px;
}
.photo-img{
  width: 200px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius:10px;
  filter:sepia(100%) hue-rotate(70deg) saturate(50%);
}

.name-block{
  display:block;
  width:550px;
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  border-radius:999px;
  padding:10px 10px 4px 10px;
  text-align:center;
  margin:15px auto 10px auto;
}

.name-text{
  font-family:'Dwarven';
  font-size:30px;
  color:#d6d6d6;
  margin-top:4px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.under-text{
  text-align:center;
  font-family:'Leotaro';
  font-size:14px;
  color:#333;
  margin-top:5px;
}
input { height: 30px !important;}
</style>

<script>
document.getElementById('generateBtn').addEventListener('click', function() {
  const photo = document.getElementById('photoUrl').value || 'https://i.pinimg.com/originals/73/7f/7a/737f7a7af9f5ef255a9f4076f1fd80ec.gif';
  const appearance = document.getElementById('appearance').value || 'name surname';
  const loyalty = document.getElementById('loyalty').value || 'your information';
  const wishes = document.getElementById('wishes').value || 'your information';

const loyaltyHtml = loyalty
  .split('\n')
  .map(line => `<p style="text-align:center; margin:0; white-space:pre-wrap; word-wrap:break-word;">${line}</p>`)
  .join('');

const wishesHtml = wishes
  .split('\n')
  .map(line => `<p style="text-align:center; margin:0; white-space:pre-wrap; word-wrap:break-word;">${line}</p>`)
  .join('');

  const html = `[hideprofile][html]
<div class="rp-wrapper">
  <div class="rp-content">

    <div class="top-block">
      <div class="top-title">Я ХОЧУ БЫТЬ...</div>
    </div>

    <div class="photo-block">
      <img src="${photo}" alt="Фото" class="photo-img">
    </div>

    <div class="name-block">
      <span class="name-text">внешность</span>
    </div>

    <div class="under-text" style="font-style:italic; font-size:18px;">
     ${appearance}
    </div>

    <div class="name-block">
      <span class="name-text">лояльность/деятельность/раса</span>
    </div>

    <div class="under-text">
      ${loyaltyHtml}
    </div>

    <div class="name-block">
      <span class="name-text">пожелания, если есть</span>
    </div>

    <div class="under-text">
      ${wishesHtml}
    </div>

  </div>
</div>

<style>
@font-face {
  font-family: 'Dwarven';
  src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf');
}
@font-face {
  font-family: 'Leotaro';
  src: url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf');
}

.rp-wrapper{
  width:850px;
  margin:0 auto;
  padding:10px;
  border-radius:20px;
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  filter:saturate(70%);
}

.rp-content{
  background:#d6d6d6;
  border-radius:15px;
  padding:15px;
}

.rp-content a {
  text-decoration: none; 
  color: #26a226;
  cursor: pointer;     
}

.top-title{
  font-family:'Dwarven';
  font-size:40px;
  padding-top:8px;
  color:#d6d6d6;
  margin-bottom:15px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.top-block{
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  border-radius:15px;
  text-align:center;
  padding:10px 5px 5px 5px;
  margin-bottom:20px;
}

.photo-block{
  text-align:center;
  margin-bottom:15px;
}
.photo-img{
  max-width: 200px;
  object-fit: cover;
  object-position: center;
  border-radius:10px;
  filter:sepia(100%) hue-rotate(70deg) saturate(50%);
}

.name-block{
  display:block;
  width:550px;
  background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
  border-radius:999px;
  padding:10px 10px 4px 10px;
  text-align:center;
  margin:15px auto 10px auto;
}

.name-text{
  font-family:'Dwarven';
  font-size:30px;
  color:#d6d6d6;
  margin-top:4px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.under-text{
  text-align:center;
  font-family:'Leotaro';
  font-size:14px;
  color:#333;
  margin-top:5px;
}
</style>[` + `/html]`;

  document.getElementById('result').textContent = html;
});

document.getElementById('copyBtn').addEventListener('click', function() {
  const result = document.getElementById('result');
  const textToCopy = result.textContent;

  const temp = document.createElement('textarea');
  temp.value = textToCopy;
  document.body.appendChild(temp);
  temp.select();
  temp.setSelectionRange(0, 99999);
  document.execCommand('copy');
  document.body.removeChild(temp);

  const msg = document.getElementById('copyMessage');
  msg.textContent = 'Код скопирован успешно!';
  setTimeout(() => { msg.textContent = ''; }, 3000);
});
</script>[/html]