[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Генератор и Парсер профиля персонажа</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f5f7;
color: #333;
padding: 20px;
}
.generator-container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
h1 { font-size: 24px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
h3 { font-size: 18px; margin-top: 25px; color: #444; }
/* Стили для блока импорта */
.import-section {
background: #eaf4fc;
padding: 20px;
border-radius: 6px;
border: 1px dashed #2196f3;
margin-bottom: 30px;
}
.import-section p { margin-top: 0; font-size: 14px; color: #555; }
.btn-import {
background: #ff9800; color: white; border: none; padding: 12px 20px;
font-size: 14px; border-radius: 4px; cursor: pointer; margin-top: 10px;
font-weight: bold; transition: background 0.3s;
}
.btn-import:hover { background: #e68a00; }
.form-group { margin-bottom: 15px; }
label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 14px; }
input[type="text"], input[type="number"], textarea, select {
width: 100%; padding: 10px; border: 1px solid #ccc;
border-radius: 4px; box-sizing: border-box; font-family: inherit;
}
textarea { resize: vertical; min-height: 80px; }
.row { display: flex; gap: 15px; }
.row .form-group { flex: 1; }
.link-item {
display: flex; gap: 10px; align-items: center;
background: #f9f9f9; padding: 10px; border: 1px solid #e0e0e0;
border-radius: 4px; margin-bottom: 10px;
}
.link-item input[type="text"] { flex: 2; }
.link-item label { margin-bottom: 0; font-weight: normal; flex: 1; display: flex; align-items: center; gap: 5px;}
.btn-remove { background: #ff4d4d; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; }
.btn-add { background: #4caf50; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-bottom: 20px; }
.btn-generate {
background: #2196f3; color: white; border: none; padding: 15px 30px;
font-size: 16px; border-radius: 4px; cursor: pointer; width: 100%; margin-top: 20px;
font-weight: bold; transition: background 0.3s;
}
.btn-generate:hover { background: #1976d2; }
.result-section { margin-top: 30px; }
#result-code { min-height: 300px; background: #2d2d2d; color: #f8f8f2; font-family: monospace; }
</style>
</head>
<body>
<div class="generator-container">
<h1>Менеджер карточки персонажа</h1>
<!-- БЛОК ИМПОРТА -->
<div class="import-section">
<h3>Анализ готового кода (Импорт)</h3>
<p>Вставьте сюда ранее сгенерированный HTML, чтобы загрузить данные обратно в форму для редактирования.</p>
<textarea id="import-code" placeholder="Вставьте HTML-код карточки..."></textarea>
<button class="btn-import" id="import-btn">РАЗОБРАТЬ КОД И ЗАПОЛНИТЬ ФОРМУ</button>
</div>
<!-- ОСНОВНЫЕ ДАННЫЕ -->
<h3>Основные данные</h3>
<div class="form-group">
<label>URL изображения (аватар)</label>
<input type="text" id="g-img" placeholder="https://...">
</div>
<div class="row">
<div class="form-group">
<label>Заголовок — Имя персонажа</label>
<div style="display: flex; gap: 10px;">
<select id="g-heading-tag" style="width: 80px; flex-shrink: 0;">
<option value="h1">H1</option>
<option value="h2" selected>H2</option>
<option value="h3">H3</option>
</select>
<input type="text" id="g-name" placeholder="РЕЙГАР ТАРГАРИЕН" style="flex-grow: 1;">
</div>
</div>
<div class="form-group">
<label>Титул / Должность (strong)</label>
<input type="text" id="g-title" placeholder="король Семи Королевств">
</div>
</div>
<!-- НАГРАДЫ -->
<h3>Награды (числа)</h3>
<div class="row">
<div class="form-group">
<label>Активист</label>
<input type="number" id="g-aw1" value="0">
</div>
<div class="form-group">
<label>Постописец</label>
<input type="number" id="g-aw2" value="0">
</div>
<div class="form-group">
<label>Лучший эпизод</label>
<input type="number" id="g-aw3" value="0">
</div>
<div class="form-group">
<label>Лучший пост</label>
<input type="number" id="g-aw4" value="0">
</div>
</div>
<!-- СВЯЗИ (char-list) -->
<h3>Связи персонажа (char-list)</h3>
<div id="links-container"></div>
<button class="btn-add" id="add-link-btn">+ Добавить персонажа</button>
<!-- ИНВЕНТАРЬ -->
<h3>Инвентарь (Вкладки)</h3>
<div class="form-group">
<label>Плашки (Вкладка 1) — ссылки на картинки</label>
<textarea id="g-sm1"></textarea>
</div>
<div class="form-group">
<label>Фоны (Вкладка 2) — ссылки на картинки</label>
<textarea id="g-sm2"></textarea>
</div>
<div class="form-group">
<label>Купоны (Вкладка 3) — HTML/текст</label>
<textarea id="g-sm3"></textarea>
</div>
<div class="form-group">
<label>Коллекции (Вкладка 4) — HTML/текст</label>
<textarea id="g-sm4"></textarea>
</div>
<button class="btn-generate" id="generate-btn">СГЕНЕРИРОВАТЬ КОД</button>
<div class="result-section">
<h3>Готовый HTML-код:</h3>
<textarea id="result-code" readonly></textarea>
</div>
</div>
<script>
$(document).ready(function() {
// --- ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ ---
function addLinkField(url = '', name = '', isNpc = false) {
const checkedStr = isNpc ? 'checked' : '';
const linkHtml = `
<div class="link-item">
<input type="text" class="l-url" placeholder="URL профиля" value="${url}">
<input type="text" class="l-name" placeholder="Имя (напр. БАРБРИ)" value="${name}">
<label><input type="checkbox" class="l-npc" ${checkedStr}> Это NPC?</label>
<button class="btn-remove">X</button>
</div>
`;
$('#links-container').append(linkHtml);
}
addLinkField();
$('#add-link-btn').click(function() { addLinkField(); });
$(document).on('click', '.btn-remove', function() { $(this).closest('.link-item').remove(); });
// ОБНОВЛЕННАЯ ФУНКЦИЯ: теперь передает вызов глобальной функции showCopyToast
function parseImageUrlsToTags(text) {
if (!text.trim()) return '';
const urls = text.split('\n').map(url => url.trim()).filter(url => url !== '');
return urls.map(url => {
const cleanTag = `<img src="${url}">`;
const safeTag = cleanTag.replace(/"/g, '"');
// Вызываем функцию showCopyToast при клике
return `<img src="${url}" title="Скопировать код картинки" style="cursor: pointer; transition: transform 0.1s;" onclick="showCopyToast('${safeTag}', this)">`;
}).join('\n');
}
// --- ЛОГИКА АНАЛИЗА (ИМПОРТ ИЗ HTML) ---
$('#import-btn').click(function() {
const importHtml = $('#import-code').val();
if (!importHtml.trim()) {
alert("Пожалуйста, вставьте код для импорта.");
return;
}
try {
const $temp = $('<div>').html(importHtml);
const imgSrc = $temp.find('.char-img').attr('src');
if (imgSrc) $('#g-img').val(imgSrc);
const $heading = $temp.find('.char-card h1, .char-card h2, .char-card h3').first();
if ($heading.length > 0) {
$('#g-heading-tag').val($heading.prop('tagName').toLowerCase());
$('#g-name').val($heading.text());
}
const title = $temp.find('.char-card > strong').first().text();
if (title) $('#g-title').val(title);
const $awards = $temp.find('.char-card-awards span strong');
if ($awards.length >= 4) {
$('#g-aw1').val($awards.eq(0).text());
$('#g-aw2').val($awards.eq(1).text());
$('#g-aw3').val($awards.eq(2).text());
$('#g-aw4').val($awards.eq(3).text());
}
const $links = $temp.find('.char-list a');
if ($links.length > 0) {
$('#links-container').empty();
$links.each(function() {
const url = $(this).attr('href');
const name = $(this).text();
const isNpc = $(this).hasClass('char-npc');
addLinkField(url, name, isNpc);
});
}
const sm1Urls = [];
$temp.find('#sm1 .char-content-wrap img').each(function() {
sm1Urls.push($(this).attr('src'));
});
$('#g-sm1').val(sm1Urls.join('\n'));
const sm2Urls = [];
$temp.find('#sm2 .char-content-wrap img').each(function() {
sm2Urls.push($(this).attr('src'));
});
$('#g-sm2').val(sm2Urls.join('\n'));
const sm3Html = $temp.find('#sm3').html();
if (sm3Html) $('#g-sm3').val(sm3Html.trim());
const sm4Html = $temp.find('#sm4').html();
if (sm4Html) $('#g-sm4').val(sm4Html.trim());
$('#import-code').val('');
alert("Код успешно разобран и загружен в форму!");
} catch (e) {
alert("Произошла ошибка при разборе кода. Убедитесь, что вы вставили корректный HTML.");
console.error(e);
}
});
// --- ЛОГИКА СИНТЕЗА (ГЕНЕРАЦИЯ HTML) ---
$('#generate-btn').click(function() {
const imgSrc = $('#g-img').val().trim();
const hTag = $('#g-heading-tag').val();
const name = $('#g-name').val().trim();
const title = $('#g-title').val().trim();
const aw1 = $('#g-aw1').val() || '0';
const aw2 = $('#g-aw2').val() || '0';
const aw3 = $('#g-aw3').val() || '0';
const aw4 = $('#g-aw4').val() || '0';
let linksCode = '';
$('.link-item').each(function() {
const url = $(this).find('.l-url').val().trim();
const charName = $(this).find('.l-name').val().trim();
const isNpc = $(this).find('.l-npc').is(':checked');
if (url && charName) {
const npcClass = isNpc ? ' class="char-npc"' : '';
linksCode += `<a href="${url}"${npcClass}>${charName}</a>\n`;
}
});
const sm1Tags = parseImageUrlsToTags($('#g-sm1').val());
const sm2Tags = parseImageUrlsToTags($('#g-sm2').val());
const sm3Text = $('#g-sm3').val();
const sm4Text = $('#g-sm4').val();
// ОБНОВЛЕНО: добавляем системный скрипт уведомлений в самый конец кода карточки
const finalHtml = `<div class="character">
<div class="char-card">
<img src="${imgSrc}" class="char-img">
<${hTag}>${name}</${hTag}>
<strong>${title}</strong>
<div class="char-card-awards">
<span>активист <strong>${aw1}</strong></span>
<span>постописец <strong>${aw2}</strong></span>
<span>лучший эпизод <strong>${aw3}</strong></span>
<span>лучший пост <strong>${aw4}</strong></span>
</div>
<div class="char-list">
${linksCode.trim()}
</div>
</div>
<div class="char-inv">
<div class="menu">
<div class="menu-links">
<span alt="#sm1" onclick='showTab(this);'>Плашки</span>
<span alt="#sm2" onclick='showTab(this);'>Фоны</span>
<span alt="#sm3" onclick='showTab(this);'>Купоны</span>
<span alt="#sm4" onclick='showTab(this);'>Коллекции</span>
</div>
</div>
<div id="submenu">
<div id="sm1" class="submenutext" style="display:block;">
<div class="char-content-wrap">
${sm1Tags}
</div>
</div>
<div id="sm2" class="submenutext">
<div class="char-content-wrap">
${sm2Tags}
</div>
</div>
<div id="sm3" class="submenutext">
${sm3Text}
</div>
<div id="sm4" class="submenutext">
${sm4Text}
</div>
</div>
</div>
</div>`;
$('#result-code').val(finalHtml);
});
});
</script>
</body>
</html>[/html]
- Подпись автора
серра блэкфайр
вдова иллирио мопатиса, мать эйгона блэкфайраджон сноу
бастард рейгара и лианны, воспитанник эртура дейна, рыцарь
