[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Генератор личного дела Массовки</title>
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Caveat:wght@400;700&family=Raleway:wght@400;500;700&display=swap&subset=cyrillic" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #2a2420;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 30px 20px;
font-family: 'Raleway', sans-serif;
}
.generator-wrapper {
max-width: 900px;
width: 100%;
background: #1e1a16;
padding: 30px 35px 35px;
border-radius: 12px;
border: 1px solid #444;
}
.generator-wrapper h1 {
font-family: 'Special Elite', monospace;
color: #c9b99a;
font-size: 24px;
margin-bottom: 4px;
letter-spacing: 2px;
}
.generator-wrapper .subtitle {
color: #8a7a6a;
font-size: 0.85rem;
margin-bottom: 22px;
border-bottom: 1px solid #444;
padding-bottom: 12px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.form-group label {
font-size: 0.7rem;
font-weight: 700;
color: #aaa;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group label .hint {
font-weight: 400;
text-transform: none;
color: #666;
font-size: 0.65rem;
}
.form-group input,
.form-group textarea {
padding: 7px 11px;
border: 1px solid #444;
border-radius: 6px;
font-family: 'Raleway', sans-serif;
font-size: 0.85rem;
background: #2a2420;
color: #ddd;
transition: border 0.2s;
width: 100%;
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #c9b99a;
}
.form-group textarea {
resize: vertical;
min-height: 50px;
}
.full-width {
grid-column: 1 / -1;
}
.buttons-row {
display: flex;
gap: 14px;
margin: 20px 0 16px;
flex-wrap: wrap;
}
.buttons-row button {
padding: 11px 32px;
border: none;
border-radius: 8px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.25s;
letter-spacing: 0.5px;
}
.btn-generate {
background: #c9b99a;
color: #1a1a1a;
}
.btn-generate:hover {
background: #d6c8ae;
transform: scale(1.02);
}
.btn-copy {
background: #2a6a3a;
color: #fff;
}
.btn-copy:hover {
background: #3a8a4a;
transform: scale(1.02);
}
.btn-reset {
background: #6a2a2a;
color: #fff;
}
.btn-reset:hover {
background: #8a3a3a;
transform: scale(1.02);
}
.output-area {
margin-top: 12px;
}
.output-area label {
font-size: 0.7rem;
font-weight: 700;
color: #aaa;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 4px;
}
.output-area textarea {
width: 100%;
min-height: 180px;
max-height: 400px;
padding: 10px 12px;
border: 1px solid #444;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 0.6rem;
background: #0d0d0d;
color: #8fbc8f;
resize: vertical;
line-height: 1.3;
box-sizing: border-box;
}
.output-area textarea:focus {
outline: none;
border-color: #c9b99a;
}
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #3a322a;
color: #f5ede4;
padding: 14px 32px;
border-radius: 10px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 0.95rem;
opacity: 0;
transition: all 0.4s ease;
pointer-events: none;
z-index: 9999;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media screen and (max-width: 700px) {
.generator-wrapper {
padding: 18px 14px;
}
.form-grid {
grid-template-columns: 1fr;
gap: 10px 0;
}
.buttons-row button {
padding: 10px 22px;
font-size: 0.8rem;
flex: 1;
min-width: 100px;
}
.generator-wrapper h1 {
font-size: 1.3rem;
}
.output-area textarea {
min-height: 120px;
max-height: 300px;
font-size: 0.5rem;
}
}
</style>
</head>
<body>
<div class="generator-wrapper">
<h1>📋 Генератор личного дела</h1>
<p class="subtitle">Заполни форму и получи готовый HTML-код для вставки в сообщение</p>
<form id="dossierForm" onsubmit="return false;">
<div class="form-grid">
<div class="form-group full-width">
<label>Ссылка на фото <span class="hint">(прямая ссылка на изображение, 200×250)</span></label>
<input type="text" id="image_url" placeholder="https://...jpg" value="https://i.pinimg.com/736x/19/0b/66/190b66a46c36e14b8356544a0db64c61.jpg">
</div>
<div class="form-group full-width">
<label>FC (Имя, фамилия занимаемой внешности)</label>
<input type="text" id="fc" placeholder="Если иностранец - указывается на английском" value="Elias Ronnenfelt">
</div>
<div class="form-group">
<label>Имя, Фамилия</label>
<input type="text" id="name" placeholder="Указываем именно в таком порядке" value='Андрей "Анри" Лихачев'>
</div>
<div class="form-group">
<label>Известен также</label>
<input type="text" id="known_as" placeholder="клички / прозвища" value="Анри">
</div>
<div class="form-group">
<label>Возраст</label>
<input type="text" id="age" placeholder="дд.мм.гггг (хх лет)" value="07.11.2955 г.р., 40 лет">
</div>
<div class="form-group">
<label>Возраст по документам</label>
<input type="text" id="doc_age" placeholder="дд.мм.гггг г.р. (хх лет)" value="07.11.2955 г.р. (40 лет)">
</div>
<div class="form-group">
<label>Пол</label>
<input type="text" id="gender" placeholder="мужской / женский / иное" value="мужской">
</div>
<div class="form-group">
<label>Вид</label>
<input type="text" id="species" placeholder="человек / существо" value="человек">
</div>
<div class="form-group">
<label>Рост</label>
<input type="text" id="height" placeholder="ххх см" value="185 см">
</div>
<div class="form-group">
<label>Ориентация</label>
<input type="text" id="orientation" placeholder="сексуальные предпочтения" value="гетеро">
</div>
<div class="form-group">
<label>Местоположение</label>
<input type="text" id="location_city" placeholder="Содружество ..., город" value="Империя Шу">
</div>
<div class="form-group">
<label>Род деятельности</label>
<input type="text" id="occupation" placeholder="чем персонаж занимается" value="кинолог наркоотдела">
</div>
<div class="form-group">
<label>Разыскивается</label>
<input type="text" id="wanted" placeholder="нет / да, кем" value="нет">
</div>
<div class="form-group full-width">
<label>Факты о персонаже <span class="hint">(по одному на строку)</span></label>
<textarea id="facts" rows="6" placeholder="Каждый факт с новой строки">Родился в семье военных. С детства проявлял интерес к животным, особенно к собакам.
После окончания академии поступил на службу в наркоотдел.
За годы работы зарекомендовал себя как ответственный и хладнокровный сотрудник.
Его пёс по кличке Шторм — верный напарник и друг.
В свободное время занимается спортом, предпочитает одиночество шумным компаниям.
Имеет ряд наград за успешные операции.</textarea>
</div>
</div>
</form>
<div class="buttons-row">
<button class="btn-generate" onclick="generateDossier()">⚡ Сгенерировать</button>
<button class="btn-copy" onclick="copyCode()">📋 Копировать код</button>
<button class="btn-reset" onclick="resetForm()">⟳ Сбросить</button>
</div>
<div class="output-area">
<label>📄 Готовый HTML-код (скопируйте и вставьте в тему)</label>
<textarea id="outputCode" readonly></textarea>
</div>
</div>
<div id="toast" class="toast">✅ Код скопирован!</div>
<script>
function generateDossier() {
const image = document.getElementById('image_url').value || '';
const fc = document.getElementById('fc').value || 'Имя актёра';
const name = document.getElementById('name').value || 'Имя Фамилия';
const known = document.getElementById('known_as').value || 'клички / прозвища';
const age = document.getElementById('age').value || 'дд.мм.гггг (хх лет)';
const docAge = document.getElementById('doc_age').value || 'дд.мм.гггг г.р. (хх лет)';
const gender = document.getElementById('gender').value || 'мужской';
const species = document.getElementById('species').value || 'человек';
const height = document.getElementById('height').value || 'ххх см';
const orientation = document.getElementById('orientation').value || 'гетеро';
const locCity = document.getElementById('location_city').value || 'Страна, город';
const occupation = document.getElementById('occupation').value || 'профессия';
const wanted = document.getElementById('wanted').value || 'нет';
const factsArray = document.getElementById('facts').value.split('\n').filter(line => line.trim() !== '');
const factsHTML = factsArray.map(fact => `<li>${fact.trim()}</li>`).join('');
const avatarHTML = image ?
`<img src="${image}" alt="Фото">` :
`<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#c4b09a;color:#7a6854;font-family:'Raleway',sans-serif;font-size:18px;font-weight:700;letter-spacing:4px;">ФОТО</div>`;
const html = `<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Досье</title>
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Caveat:wght@400;700&family=Raleway:wght@400;500;700&display=swap&subset=cyrillic" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #3a322a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 30px 20px;
font-family: 'Raleway', sans-serif;
color: #363636;
}
.secret-folder {
max-width: 820px;
width: 100%;
margin: 0 auto;
padding: 20px 20px 30px 20px;
background: #c9b99a;
background-image: repeating-linear-gradient(45deg, rgba(180, 160, 130, 0.15) 0px, rgba(180, 160, 130, 0.15) 2px, transparent 2px, transparent 6px), linear-gradient(135deg, #b8a889 0%, #d6c8ae 40%, #c4b494 70%, #b3a081 100%);
border-radius: 12px 12px 8px 8px;
border: 2px solid #8a7a62;
position: relative;
box-sizing: border-box;
}
.secret-folder::before {
content: "";
position: absolute;
left: -14px;
top: 8px;
bottom: 8px;
width: 14px;
background: #a08b72;
background: linear-gradient(90deg, #7a6b58, #b8a48a, #7a6b58);
border-radius: 6px 0 0 6px;
border: 2px solid #6b5d4c;
border-right: none;
box-shadow: inset -2px 0 6px rgba(0, 0, 0, 0.2);
}
.secret-stamp {
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
background: #8b0000;
background: linear-gradient(180deg, #aa0000 0%, #6b0000 100%);
color: #ffdddd;
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: 6px;
padding: 6px 28px 8px 28px;
border-radius: 4px 4px 0 0;
border: 2px solid #4a0000;
border-bottom: none;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
white-space: nowrap;
z-index: 3;
clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);
}
.secret-stamp::after {
content: "★";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: #ffcc00;
opacity: 0.6;
text-shadow: 0 0 8px rgba(255, 200, 0, 0.3);
}
.secret-stamp::before {
content: "★";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: #ffcc00;
opacity: 0.6;
text-shadow: 0 0 8px rgba(255, 200, 0, 0.3);
}
.secret-stamp-shadow {
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%) translateY(4px);
width: calc(100% - 20px);
height: 18px;
background: rgba(0, 0, 0, 0.15);
border-radius: 4px 4px 50% 50%;
filter: blur(6px);
z-index: 1;
pointer-events: none;
}
.notebook-page {
background: #f7f2e8;
background-image: repeating-linear-gradient(transparent 0px, transparent 23px, rgba(180, 180, 220, 0.15) 23px, rgba(180, 180, 220, 0.15) 24px), repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(180, 180, 220, 0.08) 23px, rgba(180, 180, 220, 0.08) 24px), linear-gradient(90deg, #f0d0c0 0px, #f0d0c0 28px, transparent 28px, transparent 100%), repeating-linear-gradient(45deg, rgba(200, 180, 150, 0.03) 0px, rgba(200, 180, 150, 0.03) 3px, transparent 3px, transparent 8px);
background-color: #f7f2e8;
padding: 30px 24px 24px 42px;
border-radius: 6px;
border: 1px solid #d4c8b0;
box-shadow: inset 0 0 30px rgba(120, 100, 70, 0.08);
position: relative;
min-height: 350px;
overflow: hidden;
margin-top: 4px;
}
.notebook-page::before {
content: "";
position: absolute;
left: 28px;
top: 0;
bottom: 0;
width: 2px;
background: #d08070;
opacity: 0.4;
}
.ink-blot {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.ink-blot-1 { width: 30px; height: 25px; top: 50px; right: 30px; background: radial-gradient(circle, rgba(10, 31, 74, 0.12) 0%, rgba(10, 31, 74, 0.04) 70%, transparent 100%); transform: rotate(15deg); }
.ink-blot-2 { width: 18px; height: 22px; bottom: 100px; left: 50px; background: radial-gradient(circle, rgba(160, 80, 50, 0.10) 0%, rgba(160, 80, 50, 0.04) 70%, transparent 100%); transform: rotate(-20deg); }
.ink-blot-3 { width: 35px; height: 30px; bottom: 30px; right: 70px; background: radial-gradient(circle, rgba(10, 31, 74, 0.06) 0%, rgba(10, 31, 74, 0.02) 70%, transparent 100%); transform: rotate(45deg); }
.stamp {
position: absolute;
font-family: 'Special Elite', 'Courier New', monospace;
font-weight: 700;
color: #8b0000;
opacity: 0.2;
border: 3px double rgba(139, 0, 0, 0.2);
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
letter-spacing: 2px;
pointer-events: none;
z-index: 0;
}
.stamp-1 { top: 60px; right: 15px; transform: rotate(8deg); font-size: 14px; padding: 5px 14px; opacity: 0.18; }
.stamp-2 { bottom: 130px; right: 20px; transform: rotate(-18deg); font-size: 10px; padding: 2px 8px; opacity: 0.12; color: #1a3a6a; border-color: rgba(26, 58, 106, 0.2); }
.stamp-3 { bottom: 40px; left: 15px; transform: rotate(5deg); font-size: 10px; padding: 2px 8px; opacity: 0.10; color: #2a6a1a; border-color: rgba(42, 106, 26, 0.2); }
.margin-note {
position: absolute;
left: 4px;
font-family: 'Caveat', cursive;
font-size: 12px;
color: #0a1f4a;
opacity: 0.12;
transform: rotate(-8deg);
pointer-events: none;
z-index: 0;
}
.margin-note-1 { top: 120px; }
.margin-note-2 { top: 230px; font-size: 16px; opacity: 0.08; }
.margin-note-3 { bottom: 160px; font-size: 10px; opacity: 0.10; }
.signature-swoosh {
position: absolute;
bottom: 20px;
right: 30px;
font-family: 'Caveat', cursive;
font-size: 26px;
color: #0a1f4a;
opacity: 0.06;
transform: rotate(-5deg);
pointer-events: none;
z-index: 0;
letter-spacing: 3px;
}
.page-content { position: relative; z-index: 1; }
.profile-header {
display: flex;
gap: 25px;
align-items: flex-start;
margin-bottom: 20px;
flex-wrap: wrap;
}
.profile-avatar {
flex: 0 0 200px;
width: 200px;
height: 250px;
border: 2px solid #4a3a2a;
border-radius: 4px;
overflow: hidden;
background: #e8ddd0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fc-label {
text-align: center;
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 15px;
font-weight: 700;
color: #2a1a0a;
margin-top: 6px;
letter-spacing: 1px;
border-top: 1px dashed #8a7a62;
padding-top: 5px;
max-width: 200px;
word-break: break-word;
}
.fc-label .fc-bold { font-weight: 900; }
.profile-info {
flex: 1;
min-width: 200px;
font-family: 'Raleway', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #1a1a1a;
}
.profile-info .info-item {
margin-bottom: 3px;
border-bottom: 1px dotted rgba(0, 0, 0, 0.06);
padding-bottom: 3px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.profile-info .info-label {
font-family: 'Special Elite', 'Courier New', monospace;
font-weight: 900;
font-size: 16px;
color: #1a1a1a;
flex-shrink: 0;
}
.profile-info .info-value {
font-family: 'Caveat', cursive;
font-size: 21px;
color: #0a1f4a;
margin-left: 5px;
word-break: break-word;
}
.profile-info .info-value-age {
font-family: 'Caveat', cursive;
font-size: 21px;
color: #0a1f4a;
}
.facts-title {
text-align: center;
font-family: 'Special Elite', 'Courier New', monospace;
font-size: 26px;
font-weight: 900;
color: #1a1a1a;
letter-spacing: 4px;
text-transform: uppercase;
margin: 18px 0 14px 0;
padding: 6px 0;
border-top: 2px solid #1a1a1a;
border-bottom: 2px solid #1a1a1a;
position: relative;
}
.facts-title::after {
content: "✦";
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #8b0000;
}
.facts-title::before {
content: "✦";
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #8b0000;
}
.facts-list {
list-style: none;
padding: 0;
margin: 0;
background: rgba(210, 190, 170, 0.15);
padding: 16px 20px;
border-radius: 4px;
}
.facts-list li {
font-family: 'Caveat', cursive;
font-size: 21px;
line-height: 1.6;
padding: 5px 0 5px 28px;
position: relative;
color: #0a1f4a;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.facts-list li::before {
content: "▸";
position: absolute;
left: 4px;
top: 5px;
color: #0a1f4a;
font-size: 20px;
font-family: 'Raleway', sans-serif;
}
.facts-list li:last-child {
border-bottom: none;
}
@media (max-width: 700px) {
.profile-header { flex-direction: column; align-items: center; }
.profile-avatar { flex: 0 0 auto; width: 160px; height: 200px; }
.fc-label { max-width: 160px; }
.profile-info { width: 100%; }
.secret-folder { padding: 16px 12px 22px 12px; border-radius: 8px; }
.secret-folder::before { display: none; }
.secret-stamp { font-size: 10px; letter-spacing: 4px; padding: 4px 16px 6px 16px; top: -4px; }
.secret-stamp::after, .secret-stamp::before { font-size: 7px; }
.secret-stamp-shadow { display: none; }
.notebook-page { padding: 20px 14px 16px 30px; min-height: 250px; margin-top: 2px; }
.notebook-page::before { left: 22px; }
.profile-info .info-label { font-size: 14px; }
.profile-info .info-value { font-size: 18px; }
.facts-title { font-size: 20px; letter-spacing: 2px; }
.facts-title::before, .facts-title::after { display: none; }
.facts-list { padding: 12px 14px; }
.facts-list li { font-size: 18px; }
.stamp-1, .stamp-2, .stamp-3 { display: none; }
.ink-blot-1, .ink-blot-2, .ink-blot-3 { display: none; }
.margin-note-1, .margin-note-2, .margin-note-3 { display: none; }
.signature-swoosh { display: none; }
}
@media (max-width: 400px) {
.profile-avatar { width: 140px; height: 175px; }
.fc-label { font-size: 13px; }
.profile-info .info-label { font-size: 12px; }
.profile-info .info-value { font-size: 16px; }
.facts-title { font-size: 17px; }
.facts-list li { font-size: 16px; }
.secret-stamp { font-size: 8px; letter-spacing: 3px; padding: 3px 12px 4px 12px; }
.secret-stamp::after, .secret-stamp::before { display: none; }
}
</style>
</head>
<body>
<div class="secret-folder">
<div class="secret-stamp-shadow"></div>
<div class="secret-stamp">СЕКРЕТНО</div>
<div class="notebook-page">
<div class="ink-blot ink-blot-1"></div>
<div class="ink-blot ink-blot-2"></div>
<div class="ink-blot ink-blot-3"></div>
<div class="stamp stamp-1">СОВ. СЕКРЕТНО</div>
<div class="stamp stamp-2">ЛИЧНОЕ ДЕЛО</div>
<div class="stamp stamp-3">АРХИВ № 7</div>
<div class="margin-note margin-note-1">~ проверить</div>
<div class="margin-note margin-note-2">важно!</div>
<div class="margin-note margin-note-3">см. стр. 12</div>
<div class="signature-swoosh">_А.Р._</div>
<div class="page-content">
<div class="profile-header">
<div style="display:flex; flex-direction:column; align-items:center; flex-shrink:0;">
<div class="profile-avatar">
${avatarHTML}
</div>
<div class="fc-label"><span class="fc-bold">fc:</span> ${fc}</div>
</div>
<div class="profile-info">
<div class="info-item"><span class="info-label">Имя, Фамилия:</span> <span class="info-value">${name}</span></div>
<div class="info-item"><span class="info-label">Известен также:</span> <span class="info-value">${known}</span></div>
<div class="info-item"><span class="info-label">Возраст:</span> <span class="info-value-age">${age}</span></div>
<div class="info-item"><span class="info-label">Возраст по документам:</span> <span class="info-value">${docAge}</span></div>
<div class="info-item"><span class="info-label">Пол:</span> <span class="info-value">${gender}</span></div>
<div class="info-item"><span class="info-label">Вид:</span> <span class="info-value">${species}</span></div>
<div class="info-item"><span class="info-label">Рост:</span> <span class="info-value">${height}</span></div>
<div class="info-item"><span class="info-label">Ориентация:</span> <span class="info-value">${orientation}</span></div>
<div class="info-item"><span class="info-label">Местоположение:</span> <span class="info-value">${locCity}</span></div>
<div class="info-item"><span class="info-label">Род деятельности:</span> <span class="info-value">${occupation}</span></div>
<div class="info-item"><span class="info-label">Разыскивается:</span> <span class="info-value">${wanted}</span></div>
</div>
</div>
<div class="facts-title">Известные факты</div>
<ul class="facts-list">${factsHTML}</ul>
</div>
</div>
</div>
</body>
</html>`;
document.getElementById('outputCode').value = html;
}
function copyCode() {
const output = document.getElementById('outputCode');
if (!output.value) {
showToast('⚠️ Сначала сгенерируйте код!');
return;
}
output.select();
output.setSelectionRange(0, 999999);
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(output.value).then(() => {
showToast('✅ Код скопирован в буфер обмена!');
}).catch(() => {
document.execCommand('copy');
showToast('✅ Код скопирован!');
});
} else {
document.execCommand('copy');
showToast('✅ Код скопирован!');
}
}
function resetForm() {
const defaults = {
image_url: 'https://i.pinimg.com/736x/19/0b/66/190b66a46c36e14b8356544a0db64c61.jpg',
fc: 'Elias Ronnenfelt',
name: 'Андрей "Анри" Лихачев',
known_as: 'Анри',
age: '07.11.2955 г.р., 40 лет',
doc_age: '07.11.2955 г.р. (40 лет)',
gender: 'мужской',
species: 'человек',
height: '185 см',
orientation: 'гетеро',
location_city: 'Империя Шу',
occupation: 'кинолог наркоотдела',
wanted: 'нет',
facts: 'Родился в семье военных. С детства проявлял интерес к животным, особенно к собакам.\nПосле окончания академии поступил на службу в наркоотдел.\nЗа годы работы зарекомендовал себя как ответственный и хладнокровный сотрудник.\nЕго пёс по кличке Шторм — верный напарник и друг.\nВ свободное время занимается спортом, предпочитает одиночество шумным компаниям.\nИмеет ряд наград за успешные операции.'
};
Object.keys(defaults).forEach(id => {
const el = document.getElementById(id);
if (el) el.value = defaults[id];
});
document.getElementById('outputCode').value = '';
generateDossier();
showToast('⟳ Форма сброшена');
}
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
clearTimeout(toast._timer);
toast._timer = setTimeout(() => {
toast.classList.remove('show');
}, 2500);
}
document.querySelectorAll('#dossierForm input, #dossierForm textarea').forEach(el => {
el.addEventListener('input', generateDossier);
el.addEventListener('change', generateDossier);
});
window.onload = generateDossier;
</script>
</body>
</html>
[/html]
Отредактировано Рейн Риг (Вчера 22:39:03)
