[hideprofile]Персональная страница
[indent]Каждый персонаж может обзавестись личной страницей!
[indent] Это красивое выпадающее окно, которое появляется при клике на плашку.
[indent] Имейте ввиду - плашка без личной страницы может быть, а вот личная страница без плашки - нет. Поэтому обязательно обзаведитесь плашкой в этой теме.[indent] Личная страница содержит в себе вашу коллекцию элементов оформления профиля и ваши достижения.
[html]<div class="generator-layout">
<div class="character-generator">
<!-- ЗАВИТОК СВЕРХУ -->
<div class="decor-top">
<!-- Вставьте сюда свои завитки: SVG, img или символы -->
<!-- Пример: <img src="..." alt=""> -->
</div>
<div class="generator-title">
Генератор личной страницы персонажа
</div>
<div class="generator-subtitle">
Заполните поля ниже и получите готовый HTML-код профиля.
</div>
<!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
<div class="generator-section section-main">
<div class="section-title">Основная информация</div>
<label>Фон личной страницы</label>
<input type="text" id="character-background" placeholder="https://...">
<label>Аватар</label>
<input type="text" id="character-avatar" placeholder="https://...">
<label>Имя персонажа</label>
<input type="text" id="character-name" placeholder="Имя и Фамилия">
</div>
<!-- ФАКТЫ -->
<div class="generator-section section-facts">
<div class="section-title">Факты о персонаже</div>
<div class="section-hint">Можно добавить до 6 коротких фактов.</div>
<div id="facts-list">
<div class="repeat-item">
<input type="text" class="fact-input" placeholder="Краткий факт">
<button type="button" class="remove-button" onclick="removeItem(this)">x</button>
</div>
</div>
<button type="button" class="add-button" onclick="addFact()">+ Добавить факт</button>
</div>
<!-- КОЛЛЕКЦИЯ -->
<div class="generator-section section-collection">
<div class="section-title">Коллекция</div>
<!-- Обертка для трёх блоков в ряд -->
<div class="collection-row">
<div class="collection-block">
<div class="collection-title">Бэкграунды профиля</div>
<div id="profile-backgrounds">
<div class="collection-item">
<input type="text" class="collection-image" placeholder="Ссылка на изображение">
<button type="button" class="remove-button" onclick="removeItem(this)">x</button>
</div>
</div>
<button type="button" class="add-button" onclick="addProfileBackground()">+ Добавить бэкграунд</button>
</div>
<div class="collection-block">
<div class="collection-title">Плашки</div>
<div id="plaques-list">
<div class="plaque-generator-item">
<input type="text" class="plaque-line1" placeholder="Первая строка">
<input type="text" class="plaque-line2" placeholder="Вторая строка">
<input type="text" class="plaque-image" placeholder="Ссылка на изображение">
<button type="button" class="remove-button" onclick="removeItem(this)">x</button>
</div>
</div>
<button type="button" class="add-button" onclick="addPlaque()">+ Добавить плашку</button>
</div>
<div class="collection-block">
<div class="collection-title">Иконки</div>
<div id="icons-list">
<div class="collection-item">
<input type="text" class="collection-image" placeholder="Ссылка на иконку">
<button type="button" class="remove-button" onclick="removeItem(this)">x</button>
</div>
</div>
<button type="button" class="add-button" onclick="addIcon()">+ Добавить иконку</button>
</div>
</div>
<!-- Блоки под ними -->
<div class="collection-block collection-block-wide">
<div class="collection-title">Бэкграунды личной страницы</div>
<div id="page-backgrounds">
<div class="collection-item">
<input type="text" class="collection-image" placeholder="Ссылка на изображение">
<button type="button" class="remove-button" onclick="removeItem(this)">x</button>
</div>
</div>
<button type="button" class="add-button" onclick="addPageBackground()">+ Добавить бэкграунд</button>
</div>
<div class="collection-block collection-block-wide">
<div class="collection-title">Твинки</div>
<div class="section-hint">Необязательный раздел. Если твинков нет, ничего добавлять не нужно.</div>
<div id="twinks-list"></div>
<button type="button" class="add-button" onclick="addTwink()">+ Добавить твинка</button>
</div>
</div>
<!-- ГЕНЕРАЦИЯ -->
<button type="button" class="generate-button" onclick="generateCharacter()">Сгенерировать код</button>
<!-- РЕЗУЛЬТАТ -->
<div class="result-wrapper" id="result-wrapper" style="display:none;">
<div class="result-title">Готовый код</div>
<textarea id="character-result" readonly></textarea>
<button type="button" class="copy-button" onclick="copyCharacterCode()">Копировать код</button>
<div class="copy-message" id="copy-message"></div>
</div>
<!-- ЗАВИТОК СНИЗУ -->
<div class="decor-bottom">
<!-- Вставьте сюда свои завитки: SVG, img или символы -->
<!-- Пример: <img src="..." alt=""> -->
</div>
</div>
</div>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/48215.js?v=2"></script>
[/html]
[html]<style>
</style>
<section class='lod-bank'>
<div class='lod-name-bank'>
Галерея
</div>
<bank>
<bgperspage data-title='бэкграунды для личной страницы'><div>
<img src='https://forumstatic.ru/files/001c/17/76/90092.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/36951.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/13231.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/23414.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/34234.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/74740.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/83566.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/20114.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/89320.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/12551.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/33797.jpg' />
<img src='https://forumstatic.ru/files/001c/17/76/20103.jpg' />
</div></bgperspage >
</div></plaquesbank>
</bank>
</section>[/html]