заполнение профиля

Код:

<!--HTML-->
<div class="char-wrap" id="char-generator">

    <div class="char-card char-form">
        <div class="chargen__wrapper">
            <div class="flex-row flex-row--space-between">
                <div class="char-form-header-main">обязательно для заполнения</div>
                <button class="btn btn-danger button" id="resetBtn" type="button">очистить всё</button>
            </div>
            <div class="row-3">
                <div class="field-group">
                    <label>полное имя <span>ru</span></label>
                    <input id="charNameRu" >
                </div>
                <div class="field-group">
                    <label>полное имя <span>en</span></label>
                    <input id="charNameEn">
                </div>
                <div class="field-group">
                    <label>возраст <span>00</span></label>
                    <input id="charAge" type="number" min="0" inputmode="numeric" >
                </div>
            </div>

             <div class="char-form-header-wrapper"><div class="char-form-header">внешность</div></div>
            
            <div class="row">
                <div class="field-group">
                    <label>фандом внешности <span>en</span></label>
                    <input id="faceFandom1">
                </div>
                <div class="field-group">
                    <label>имя внешности <span>en</span></label>
                    <input id="faceName1">
                </div>
            </div>
            
            <div class="row">
                <div class="field-group">
                    <label>фандом второй внешности <span>en</span> <span class="text-muted text-muted--small">(опционально)</span></label>
                    <input id="faceFandom2" >
                </div>
                <div class="field-group">
                    <label>имя второй внешности <span>en</span> <span class="text-muted text-muted--small">(опционально)</span></label>
                    <input id="faceName2" >
                </div>
            </div>

            <div class="field-group">
                <label>кратко о персонаже <span>максимум 500 символов</span></label>
                <textarea id="charAbout" maxlength="500" rows="3" placeholder="краткое описание из твоей анкеты"></textarea>
            </div>

            <div class="char-form-header-wrapper"><div class="char-form-header">деятельность</div></div>
            <div id="activities-container">
                <div class="activity-row" data-activity-idx="0">
                    <div class="row">
                        <div class="field-group">
                            <label>категория</label>
                            <select data-no-custom class="activity-category no-custom">
                                
                            </select>
                        </div>
                        <div class="field-group">
                            <label>деятельность кратко</label>
                            <input class="activity-short" placeholder="например: охотник">
                        </div>
                    </div>
                    <div class="field-group">
                        <label>деятельность подробнее <span class="text-muted">(необязательно)</span></label>
                        <input class="activity-full" placeholder="" maxlength="50" value="">
                    </div>
                </div>
            </div>
            <button class="btn button" id="addActivityBtn" type="button">+ добавить деятельность</button>

            

            <div class="char-form-header-wrapper"><div class="char-form-header">способности</div></div>
            
<div class="checkbox-container">
    <div class="checkbox-group">
        <label class="checkbox-item">
            <input type="checkbox" id="abilityNature" data-ability="nature"> школа стихий
        </label>
        <label class="checkbox-item">
            <input type="checkbox" id="abilitySoul" data-ability="soul"> школа души
        </label>
        <label class="checkbox-item">
            <input type="checkbox" id="abilityFruit" data-ability="fruit"> адов плод
        </label>
    </div>

    <div class="checkbox-input">
        <div class="ability-input" id="natureInputWrap">
            <input id="abilityNatureText" placeholder="перечисли стихии, например: молния, вода" value="">
        </div>
        <div class="ability-input" id="soulInputWrap">
            <input id="abilitySoulText" placeholder="кратко суть способности, например: управление тенями" value="">
        </div>
        <div class="row-2">
            <div class="ability-input" id="fruitTypeWrap">
                <select data-no-custom id="abilityFruitType" class="no-custom">
                    <option value="сверхчеловеческий">сверхчеловеческий</option>
                    <option value="животный">животный</option>
                    <option value="стихийный">стихийный</option>
                </select>
            </div>
            <div class="ability-input" id="fruitNameWrap">
                <input id="abilityFruitName" placeholder="название плода, например: копирование" value="">
            </div>
        </div>
    </div>
</div>

<div id="fruitExtraWrap" class="fruit-extra hidden">
    <div class="field-group">
        <label>описание споосбности плода для списка способностей <span>максимум 250 символов</span></label>
        <input id="abilityFruitDesc" placeholder="" maxlength="250">
    </div>
</div>

            <div class="char-form-header-wrapper"><div class="char-form-header">ссылки</div></div>
            <div class="row-1"><div class="field-group">
                <label>ссылка на профиль</label>
                <input id="profileURL" placeholder="" value="">
            </div></div>
            <div class="row-1"><div class="field-group">
                <label>ссылка на анкету</label>
                <input id="sheetURL" placeholder="" value="">
            </div></div>
            <div class="row-1" style="margin-bottom: 0"><div class="field-group">
                <label>текст лз <span>для ссылок &lt;a href=&quot;&quot;&gt;&lt;/a&gt;</span></label>
                <textarea id="descProfile" rows="2" placeholder=""></textarea>
            </div></div>
        </div>
    </div>

    <div class="char-card result">
        <div class="tabs">
            <button class="tab active" data-key="appearance">внешность</button>
            <button class="tab" data-key="roles">список ролей</button>
            <button class="tab" data-key="profile">личная страница</button>
            <button class="tab" data-key="lz">лз</button>
        </div>
        <pre><code id="out"></code></pre>
        <div class="btn-group">
            <button class="btn button" id="copyBtn" type="button">копировать текущий</button>
            <button class="btn button" id="copyAllBtn" type="button">копировать всё</button>
        </div>
    </div>
</div>

<style>
/* ===== Сброс ===== */
#char-generator * {
    box-sizing: border-box;
}

/* ===== Контейнер ===== */
#char-generator {
    font-family: var(--main-title);
    margin: 0 auto;
}

/* ===== Сетка ===== */
#char-generator .char-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
}

@media (max-width: 900px) {
    #char-generator .char-wrap {
        grid-template-columns: 1fr;
    }
}

/* ===== Карточки ===== */
#char-generator .char-card {
    padding: 25px; 
    border: 1px solid var(--block-button);
    border-radius: var(--main-bord-radius); margin-bottom: 10px;
}


/* ===== Заголовки ===== */

#char-generator .char-form-header-main {
font-weight: 600;
    font-size: 16px;
}


#char-generator .char-form-header {
    color: var(--accent-on-black);
    background-color: #000;
    padding: 1px 3px;
    font-size: 8px;
    font-family: var(--font-accent);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    z-index: 10;
    width: fit-content;
}

#char-generator .char-form-header-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 20px 0 15px;
}

#char-generator .char-form-header-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border-color);
    z-index: 0;
}

#char-generator .char-form-header--no-margin {
    margin: 0;
}

/* ===== Сетки рядов ===== */
#char-generator .row,
#char-generator .row-1,
#char-generator .row-3,
#char-generator .row-2 {
    display: grid;
    gap: 12px;
    margin-bottom: 10px
}

#char-generator .row {
    grid-template-columns: 1fr 1fr;
}

#char-generator .row-1 {
    grid-template-columns: 1fr;
}

#char-generator .row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

#char-generator .row-2 {
    grid-template-columns: 1fr 2fr; gap: 12px 3px;
}

/* ===== Flex ===== */
#char-generator .flex-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap; margin-bottom: 15px;
}

#char-generator .flex-row--space-between {
    justify-content: space-between;
}

/* ===== Поля ввода ===== */
#char-generator .field-group {
    margin-bottom: 0;
}

#char-generator label {
    font-size: 12px;
    display: block;
    margin-bottom: 2px;
}

#char-generator label span {
    color: var(--accent2);
    font-size: 11px;
}

#char-generator input,
#char-generator select,
#char-generator textarea {
        width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    transition: 0.2s; font-family: var(--main-title);
}

#char-generator select {
height: 31px;
margin-top: 3px;
}

#char-generator input:focus,
#char-generator select:focus,
#char-generator textarea:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--border-color);
}

#char-generator textarea {
    resize: vertical;
    font-family: inherit;
}

/* ===== Кнопки ===== */


#char-generator .btn-danger {
    background: var(--dark-bg);
    color: var(--white-font);
}

#char-generator .btn-danger:hover {
    box-shadow: 0 0 0 1px var(--accent-orange);
}


/* ===== Вкладки ===== */
#char-generator .tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

#char-generator .tab {
        padding: 2px 8px;
    background: var(--block-button);
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
    transition: all 0.3s ease;
    user-select: none;
    font-family: 'Unbounded';
    text-transform: uppercase;
    font-weight: 600; border: none;
}

#char-generator .tab.active {
    background: var(--dark-bg);
    color: var(--white-font);
}

/* ===== Вывод ===== */
#char-generator pre {
    background: var(--textarea-bg);
    padding: 15px;
    border-radius: var(--main-bord-radius);
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    min-height: 120px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== Группа кнопок ===== */
#char-generator .btn-group {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ===== Блок деятельности ===== */
#char-generator .activity-row {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}

/* ===== Чекбоксы ===== */

#char-generator .checkbox-container {
display: grid;
    align-items: center;
    grid-template-columns: 144px 1fr;
}

#char-generator .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    flex-direction: column;
}

#char-generator .checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

#char-generator .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer; border-radius: 4px;
}

#char-generator .checkbox-item input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ===== Адов плод ===== */
#char-generator .fruit-extra {
    margin-top: 12px;
}

#char-generator .fruit-extra.hidden {
    display: none !important;
}

/* ===== Утилиты ===== */
#char-generator .hidden {
    display: none !important;
}

#char-generator .text-muted {
    color: #7788aa;
    font-size: 12px;
}

#char-generator .text-muted--small {
    font-size: 11px;
}

#char-generator .custom-select-wrapper {
width: 100%;
margin-top: 3px;
min-width: auto;
}

#char-generator .custom-select {
height: 30px; border-radius: 8px;
}
</style>

<script src="https://forumstatic.ru/files/001c/03/d3/26518.js"></script>

Код:

HxH  –  Killua [url=https://hasuke9.rusff.me/profile.php?id=5]Roku[/url]

Код:

JK  –  Gojo [url=https://hasuke9.rusff.me/profile.php?id=5]Roku[/url]

власть и представители

Код:

[url=https://hasuke9.rusff.me/profile.php?id=5]Roku[/url] жучка

криминал

Код:

[url=https://hasuke9.rusff.me/profile.php?id=5]Roku[/url] краш

Код:

<div id="page-owner-id" data-user-id="5" style="display:none;"></div>

<section class="personal-left">

	<div class="personal__intro-block">
    <a href="https://hasuke9.rusff.me/viewtopic.php?id=14" target="_blank" class="personal__name">Roku</a>
    
    <div class="personal__powers">
        <div class="personal__powers__item soul" title="юзает внешки разных возрастов">школа души</div><div class="personal__powers__item fruit" title="стихийный: молния маккуин">адов плод</div>
    	</div>
	</div>

    <div class="personal__about-block">
        <div class="personal__job unselectable">жучка, краш <span>пучка, малаш</span></div>

    	<div class="personal__about">
        Жил на свете ровный парень
Звали Николай Рептайл
Почему его так звали
Так никто и не поймёт
Ростом был полкилометра
Весом 20 килограмм
Заходил в свою квартиру
Он обычно по частям
Засовывал сначала голову
А потом всё остальное
Жизнь у него была тяжёлая
Зато гнулся как верёвка, втрое
Николай учился в школе
Там его прозвали Колей
Он тихонько обижался
Просто — думал, это из-за роста
Просил его не обзывать так
Потому что он не Коля
Потому что это стайл —
Это Николай Рептайл
    </div>
    </div>

в список способностей: стихийный

Код:

[quote][font=SFProDisplay-Medium][b][size=12]молния маккуин[/size][/b] – может превратиться в тачку из мультика тачки
– съеден [url=https://hasuke9.rusff.me/profile.php?id=5]Roku[/url] [/font][/quote]

Код:

<div class="lz__name"><a href="https://hasuke9.rusff.me/viewtopic.php?id=14">Року, 27</a></div><div class="lz__text">Николай учился в школе
Там его прозвали Колей
Он тихонько обижался
Просто — думал, это из-за роста</div>

hasuke

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

заполнение профиля

Сообщений 1 страница 3 из 3

Поделиться102.08.2026 00:45:30

Поделиться202.08.2026 20:03:45

Поделиться3Сегодня 11:14:50

Быстрый ответ