[html]<div class="guide-wrapper rules-mybb-fix">
<div class="main-box">
<div class="inner-box">
<div class="generator-wrapper">
<div class="header-box">
ГЕНЕРАТОР ЗАЯВКИ
</div>
<div class="form-group">
<label>Имя на английском</label>
<input type="text" id="nameEn" placeholder="">
</div>
<div class="form-group">
<label>Имя на русском</label>
<input type="text" id="nameRu" placeholder="">
</div>
<div class="form-group">
<label>Возраст</label>
<input type="text" id="age" placeholder="">
</div>
<div class="form-group">
<label>Отношения</label>
<input type="text" id="relation" placeholder="">
</div>
<div class="form-group">
<label>Имя прототипа на английском</label>
<input type="text" id="fcName" placeholder="">
</div>
<div class="form-group">
<label>URL фото/гиф</label>
<input type="text" id="photo1" placeholder="">
</div>
<div class="form-group">
<label>URL фото/гиф</label>
<input type="text" id="photo2" placeholder="">
</div>
<div class="form-group">
<label>Текст заявки (ENTER = новый параграф)</label>
<textarea id="text" placeholder=""></textarea>
</div>
<div class="form-group">
<label>Дополнительно (ENTER = новый параграф)</label>
<textarea id="dopolnitelno" placeholder=""></textarea>
</div>
<div class="buttons">
<button id="generateBtn">Сгенерировать код</button>
<button id="copyBtn">Скопировать код</button>
</div>
<div class="copy-message" id="copyMessage">код успешно скопирован</div>
<textarea id="output" readonly></textarea>
</div>
</div>
</div>
</div>
<style>
@font-face {
font-family: 'Cinzel';
src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
}
@font-face {
font-family: 'Comfortaa';
src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');
}
.rules-mybb-fix, .rules-mybb-fix * {
overflow: visible;
box-sizing: border-box;
}
.main-box {
width: 650px;
margin: 2px auto !important;
background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat;
border-radius: 20px;
padding: 5px;
font-family: 'Cinzel', serif;
}
.inner-box {
background: #c7c7c7;
border-radius: 15px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 10px;
}
.generator-wrapper {
max-width: 700px;
font-family: 'Comfortaa', sans-serif;
display: flex;
flex-direction: column;
gap: 12px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-group label {
font-family: 'Cinzel', serif;
font-size: 16px;
}
.form-group input,
.form-group textarea {
font-family: 'Comfortaa', monospace;
font-size: 14px;
padding: 6px;
border-radius: 6px;
border: 1px solid #999;
background: #e0dede !important;
resize: none;
width: 100%;
}
.form-group textarea {
height: 100px;
}
.buttons {
display: flex;
gap: 10px;
}
.buttons button {
flex: 1;
padding: 6px 0;
font-family: 'Cinzel', serif;
cursor: pointer;
border-radius: 6px;
border: none;
background: #8b0000;
color: #fff;
transition: 0.3s;
background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat;
}
.buttons button:hover {
opacity: 0.85;
}
#output {
width: 100%;
height: 150px;
padding: 10px;
font-family: monospace;
font-size: 14px;
border-radius: 8px;
border: 1px solid #999;
background: #e0dede !important;
resize: none;
}
.copy-message {
text-align: center;
color: green;
font-weight: bold;
display: none;
margin-top: 6px;
font-family: 'Cinzel', serif;
}
.header-box {
background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat;
border-radius: 12px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #c7c7c7;
font-family:'cinzel'
}
</style>
<script>
const generateBtn = document.getElementById('generateBtn');
const copyBtn = document.getElementById('copyBtn');
const output = document.getElementById('output');
const copyMessage = document.getElementById('copyMessage');
generateBtn.addEventListener('click', () => {
const nameEn = document.getElementById('nameEn').value || '';
const nameRu = document.getElementById('nameRu').value || '';
const age = document.getElementById('age').value || '';
const relation = document.getElementById('relation').value || '';
const fcName = document.getElementById('fcName').value || '';
const photo1 = document.getElementById('photo1').value || 'url фото1';
const photo2 = document.getElementById('photo2').value || 'url фото2';
const text = document.getElementById('text').value || '';
const dopolnitelno = document.getElementById('dopolnitelno').value || '';
const html = `[html]
<div class="guide-wrapper rules-mybb-fix">
<div class="main-box">
<div class="inner-box">
<div class="content-bg">
<div class="glass-block info">
<div class="name-en">${nameEn}</div>
<div class="group">${relation}</div>
<div class="name-ru">${nameRu}, ${age}</div>
</div>
<div class="glass-block photos">
<div class="photo-wrap">
<div class="photo"><img src="${photo1}"></div>
<div class="photo"><img src="${photo2}"></div>
</div>
<div class="fc">fc: ${fcName}</div>
</div>
<div class="glass-block text">
<p>${text.replace(/\n/g,'</p><p>')}</p>
</div>
<div class="glass-block dopolnitelno">
<p><strong>Дополнительная информация:</strong> ${dopolnitelno.replace(/\n/g,'</p><p>')}</p>
</div>
<div class="footer">flamevector</div>
</div>
</div>
</div>
</div>
<style>
@font-face {font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');}
@font-face {font-family: 'Comfortaa'; src: url('https://raw.githubusercontent.com/flamevector-rusff/styles/main/comfortaa.ttf');}
.rules-mybb-fix, .rules-mybb-fix * {overflow: visible; box-sizing: border-box;}
.main-box {width: 650px; margin: 2px auto !important; background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat; border-radius: 20px; padding: 5px; font-family: 'Cinzel', serif;}
.inner-box {background: #c7c7c7; border-radius: 15px; padding: 6px; display: flex; flex-direction: column; gap: 10px;}
.content-bg {background: url("https://i.pinimg.com/736x/ad/5b/64/ad5b64c9fe303dafc4c61d5783eb08ca.jpg") center/cover; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px;}
.glass-block {background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);}
.info {text-align: center; background: rgba(90,0,20,0.05);}
.name-en {font-size: 28px; letter-spacing: 2px;}
.group {font-size: 14px; margin-top:5px; opacity:0.8;}
.name-ru {font-size:18px; margin-top:5px;}
.photos {text-align:center;}
.photo-wrap {display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.photo-wrap img {width:200px; height:250px; object-fit:cover; border-radius:12px; transition:0.3s;}
.photo-wrap img:hover {transform: scale(1.05);}
.fc {font-size:14px; opacity:0.8;}
.text {font-family: 'Comfortaa', sans-serif;}
.text p {font-size:18px !important; text-indent:25px;}
.dopolnitelno {font-family: 'Comfortaa', sans-serif;}
.dopolnitelno p { text-indent:25px; font-size:17px !important; line-height:1.2 !important;}
.footer {text-align:center; font-size:12px; padding:6px; border-radius:999px; background: rgba(0,0,0,0.2); color:#fff; letter-spacing:2px; display:inline-block; margin:0 auto;}
.photo {position:relative; width:200px; height:260px; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.photo img {width:100%; height:100%; object-fit:cover; filter: sepia(20%) saturate(40%) brightness(85%) contrast(1.1); transition:0.4s ease;}
.photo:hover img {transform: scale(1.08);}
.info {position:relative; overflow:hidden;}
.info::after {content:""; position:absolute; top:0; left:-150%; width:60%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 6s infinite;}
@keyframes shine {0% {left:-150%;} 100% {left:150%;}}
</style>
[` + `/html]`;
output.value = html;
});
copyBtn.addEventListener('click', () => {
output.select();
document.execCommand('copy');
copyMessage.style.display = 'block';
setTimeout(() => { copyMessage.style.display = 'none'; }, 5000);
});
</script>[/html]
