Проекту

Танец Вечности

Объявление

постов в августе: 329
городское фэнтези / мистика / фэнтези / приключения / эпизодическая система / 18+
10 век до н.э.:
зима 981 год до н.э.
19 век:
лето 1881 год
21 век:
осень 2029 год
35 век:
лето 3421 год

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Танец Вечности » #Создание персонажа » Шаблон анкеты


Шаблон анкеты

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

1

[html]
<div class="character-profile">

    <!-- ШАПКА -->
    <div class="character-header">
        <img src="https://upforme.ru/uploads/0011/93/3d/2/983718.jpg" alt="Имя персонажа">

        <div class="character-name">
            <span>Имя персонажа</span>
            <small>Короткая фраза или титул персонажа</small>
        </div>
    </div>

    <!-- ОСНОВНЫЕ ДАННЫЕ -->
    <div class="character-info">

        <div class="info-item">
            <span>Внешность</span>
            <strong>ИИ-генерация</strong>
        </div>

        <div class="info-item">
            <span>Дата рождения</span>
            <strong>14 октября 1854</strong>
        </div>

        <div class="info-item">
            <span>Раса</span>
            <strong>Человек</strong>
        </div>

        <div class="info-item">
            <span>Социальный статус</span>
            <strong>Дворянин</strong>
        </div>

    </div>

    <!-- БИОГРАФИЯ -->
    <div class="character-section">

        <div class="section-title">
            <span>01</span>
            Биография
        </div>

        <div class="section-text">
            <p>
                Здесь размещается биография персонажа. Можно подробно
                описать его происхождение, семью, детство, образование,
                важные события жизни и обстоятельства, которые привели
                его к нынешнему положению.
            </p>

            <p>
                Можно также перечислить важные факты из жизни персонажа.
            </p>

        </div>

    </div>

    <!-- НАВЫКИ -->
    <div class="character-section">

        <div class="section-title">
            <span>02</span>
            Навыки
        </div>

        <div class="skills">

            <div class="skill">
                <div class="skill-name">
                    <span>Фехтование</span>
                    <b>85%</b>
                </div>
                <div class="skill-line">
                    <i style="width:85%;"></i>
                </div>
            </div>

            <div class="skill">
                <div class="skill-name">
                    <span>Верховая езда</span>
                    <b>70%</b>
                </div>
                <div class="skill-line">
                    <i style="width:70%;"></i>
                </div>
            </div>

            <div class="skill">
                <div class="skill-name">
                    <span>Стрельба</span>
                    <b>60%</b>
                </div>
                <div class="skill-line">
                    <i style="width:60%;"></i>
                </div>
            </div>

            <div class="skill">
                <div class="skill-name">
                    <span>Дипломатия</span>
                    <b>90%</b>
                </div>
                <div class="skill-line">
                    <i style="width:90%;"></i>
                </div>
            </div>

        </div>

    </div>

</div>

[/html]

+1

2

Как заполнить анкету

Заполните основные поля персонажа, добавьте изображение, биографию и необходимые навыки.

В разделе «Навыки» укажите название навыка и его уровень от 0 до 100%.

«Способности» можно не заполнять — если оставить их пустыми, этот раздел не появится в готовой анкете.

Когда всё готово, нажмите «Сгенерировать анкету», затем скопируйте полученный HTML-код и вставьте его в сообщение на форуме в тег html.

[html]

<!-- =========================
     ОБЁРТКА С БОКОВОЙ КАРТИНКОЙ
========================= -->
<div class="anketa-layout">

 

    <!-- =========================
         ГЕНЕРАТОР АНКЕТЫ
    ========================= -->
    <div class="anketa-generator">

        <div class="generator-title">
            Анкета персонажа
            <span>Заполните поля и получите готовую анкету</span>
        </div>

        <!-- ИМЯ -->
        <div class="generator-field">
            <label>Имя персонажа</label>
            <input type="text" id="a-name" placeholder="Например: Камилла">
        </div>

        <!-- ТИТУЛ -->
        <div class="generator-field">
            <label>Короткая фраза</label>
            <input type="text" id="a-title" placeholder="Просто какая-то цитата, которая ассоциируется с героем">
        </div>

        <!-- КАРТИНКА -->
        <div class="generator-field">
            <label>Ссылка на изображение</label>
            <input type="text" id="a-image" placeholder="https://...">
            <small>Рекомендуемый размер: 740 Ч 240 px</small>
        </div>

        <!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
        <div class="generator-grid">
            <div class="generator-field">
                <label>Внешность</label>
                <input type="text" id="a-appearance" placeholder="Имя актера на кириллице">
            </div>

            <div class="generator-field">
                <label>Дата рождения</label>
                <input type="text" id="a-birth" placeholder="14 октября 1854">
            </div>

            <div class="generator-field">
                <label>Раса</label>
                <input type="text" id="a-race" placeholder="Человек">
            </div>

            <div class="generator-field">
                <label>Социальный статус</label>
                <input type="text" id="a-status" placeholder="Дворянин">
            </div>
        </div>

        <!-- БИОГРАФИЯ -->
        <div class="generator-field">
            <label>Биография</label>
            <textarea id="a-bio" rows="10" placeholder="Напишите биографию персонажа..."></textarea>

            <small class="bio-hint">
                Для нового абзаца просто оставьте пустую строку между абзацами.
                Одиночный Enter — перенос строки внутри абзаца.
            </small>
        </div>

        <!-- НАВЫКИ -->
        <div class="generator-subtitle">Навыки</div>

        <div id="skills-generator">
            <div class="generator-skill">
                <input type="text" class="skill-title" placeholder="Название навыка">
                <input type="number" class="skill-value" min="0" max="100" placeholder="85">
                <span>%</span>
                <button type="button" class="remove-skill" aria-label="Удалить"></button>
            </div>

            <div class="generator-skill">
                <input type="text" class="skill-title" placeholder="Название навыка">
                <input type="number" class="skill-value" min="0" max="100" placeholder="70">
                <span>%</span>
                <button type="button" class="remove-skill" aria-label="Удалить"></button>
            </div>
        </div>

        <button type="button" class="add-skill" id="add-skill">
            + Добавить навык
        </button>

        <!-- СПОСОБНОСТИ -->
        <div class="generator-subtitle">
            Способности
            <span class="optional-label">необязательно</span>
        </div>

        <div id="abilities-generator">
            <div class="generator-ability">
                <input type="text" class="ability-title" placeholder="Название способности">
                <input type="text" class="ability-level" placeholder="Уровень">
                <button type="button" class="remove-ability" aria-label="Удалить"></button>
            </div>
        </div>

        <button type="button" class="add-ability" id="add-ability">
            + Добавить способность
        </button>

        <!-- ГЕНЕРАЦИЯ -->
        <button type="button" class="generate-anketa" id="generate-anketa">
            Сгенерировать анкету
        </button>

        <!-- РЕЗУЛЬТАТ -->
        <div id="result-block" style="display:none;">
            <div class="generator-subtitle">Готовый HTML</div>

            <div class="result-description">
                Скопируйте код ниже и вставьте его в сообщение на форуме.
            </div>

            <textarea id="anketa-result" readonly></textarea>

            <button type="button" class="copy-anketa" id="copy-anketa">
                Скопировать HTML
            </button>

            <div id="copy-message"></div>
        </div>

    </div>
</div>

<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/14720.js?v=2"></script>
[/html]

0


Вы здесь » Танец Вечности » #Создание персонажа » Шаблон анкеты


Рейтинг форумов | Создать форум бесплатно