Проекту

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

Объявление

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

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

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


Вы здесь » Танец Вечности » #Организационный раздел » Персональная страница


Персональная страница

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

1

[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]

+6

2

Код:
<div class="character">
<section class="lodpp-wrapper">

<!----------- кастомный фон личной страницы ----------->
<ppbackground style="background-image:url(https://forumstatic.ru/files/001c/17/76/33797.jpg)"></ppbackground>

<!----------- аватар и имя ----------->

<avatarandname>
<!----------- прямая ссылка на картинку ----------->
<img src="https://avatars.mds.yandex.net/get-kinopoisk-image/10671298/3142f7ac-54a9-4caa-b001-63525c6ec6f8/360" />

<charname>
<!----------- имя персонажа ----------->
<p>Цинлуань</p>
</charname>

</avatarandname>

<!----------- КОНЕЦ аватар и имя ----------->

<!----------- факты о персе ----------->
<personal>
<!-- не более шести коротких или трёх двухстрочных. Новая строка начинается после 35 символов -->

<fact>Первая дочь императрицы Фэнъяо</fact>

<fact>Изучала искусство управления в провинции Чжихуэй</fact>

<fact>Любит фектование на мечах</fact>

</personal>

<!----------- таблица коллекции и достижения ----------->

<!------ кнопки не трогать ----->
<div class="lodpptab-container">
  <input type="radio" id="lodpptab1" name="tabs" checked hidden>
  <input type="radio" id="lodpptab2" name="tabs" hidden>

  <div class="lodpptabs">
    <label for="lodpptab1">коллекция</label>
    <label for="lodpptab2">достижения</label>
  </div>

<!----------- КОНТЕНТ таблица коллекции и достижения ----------->
  <div class="lodppcontent-container">
    <div class="lodpptab-content content1">

<!----------- содержимое первой вкладки ----------->

<lodpptab>

<!----------- бэкграунды профиля ----------->
<bgs data-title='бэкграунды профиля'>
<img src="https://i.pinimg.com/1200x/ad/e4/f0/ade4f092d2f47b6fe15d3479b9440364.jpg">
</bgs>

<!----------- плашки ----------->
<plaques data-title='плашки'>
<div>
<div class="plaque">
    <p>Моя воля - ветер,</p>
    <p>что направляет паруса империи</p>
    <img src="https://forumstatic.ru/files/001c/17/76/42274.jpg">
</div>
</div>
</plaques>

<!----------- иконки в профиль ----------->
<icons data-title='иконки'>
<img src="https://forumstatic.ru/files/0011/93/3d/87455.png">
</icons>

<!----------- бэкграунды личной страницы ----------->
<bgspp data-title='бэкграунды личной страницы'>
<img src='https://forumstatic.ru/files/001c/17/76/33797.jpg' />
</bgspp>

<!----------- твинки ----------->
<coupons data-title='твинки'>
<center>
<a href="https://lepidus.ru/profile.php?id=1551" class="profile-card" style="background-image: none;">
<img src="https://api.start.ru/images/unsafe/750x380/filters:format(webp)/2c0b375174e14a3bb19306e25c43fee9/packshot_15x?size=1200x630" alt="">
<ttl>Ляньхуа</ttl>
</a>
</center>
<br>
<div>
</div>
</coupons>

</lodpptab>
<!----------- КОНЕЦ содержимое первой вкладки ----------->

    </div>
    <div class="lodpptab-content content2">

<!----------- содержимое второй вкладки ----------->

<lodpptab>
<div>достижения</div>
<achievments>

<achiev>
<img src='https://image.ibb.co/c4Lr2d/image.jpg' />
<span>Паспорт гражданина</span>
<span>Написал анкету! Молодец!</span>
</achiev>

</achievments>

</lodpptab>

<!----------- КОНЕЦ содержимое второй вкладки ----------->
    </div>
  </div>
</div>
<!----------- КОНЕЦ таблица коллекции и достижения ----------->

</section>
</div>

0


Вы здесь » Танец Вечности » #Организационный раздел » Персональная страница


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