Тут размещается текст важного поста, объявления
или лучшего сообщения. Если текста станет много,
внутри этой области появится вертикальная прокрутка.
Ссылка внизу при этом останется на своём месте.
Читать пост
Хтмл шаблон: Эпизоды
Страница: 1
Сообщений 1 страница 1 из 1
Поделиться12026-08-25 19:22:27
- Администратор
- Эдлин Миллер
- Победе грош цена, коль не дает нам радости она. Милей судьбой с убитым поменяться, чем страхами, убив его, терзаться.
- Сообщений: 224
- Уважение: +0
[hideprofile][html]
<div class="ep-container ep-active">
<div class="ep-img ep-img-left" style="background-image:url('https://i.pinimg.com/736x/cd/ce/65/cdce65401bd17d4200ed0b3274c71403.jpg');"></div>
<div class="ep-content">
<div class="ep-type">активный эпизод</div>
<div class="ep-title">Красивое название эпизода</div>
<div class="ep-description">
Шаблон для игры в реальном времени. Подходит как для личных сюжетов персонажей, так и для крупных ивентов, влияющих на мир и его события. Используется для всех актуальных игровых веток.
<br><br>
Новую строку можно сделать брейком < br >.
</div>
<div class="ep-section ep-meta">
<div><i class="fas fa-map-marker-alt"></i>Локация</div>
<div><i class="fas fa-clock"></i>Актуальная дата</div>
<div><i class="fas fa-music"></i><a href="https://www.youtube.com/watch?v=XNCQZ0wxphY">The Avengers</a></div>
</div>
<div class="ep-section ep-tags">
<div class="ep-tag">компания</div>
<div class="ep-tag">хороших</div>
<div class="ep-tag">друзей</div>
</div>
<div class="ep-section ep-characters">
<div>
<i class="fas fa-user-friends"></i>
<a href="ССЫЛКА НА ПЕРСОНАЖА">Имя персонажа</a>
<span>·</span>
<a href="ССЫЛКА НА ПЕРСОНАЖА">Имя персонажа</a>
</div>
</div>
</div>
<div class="ep-img ep-img-right" style="background-image:url('https://i.pinimg.com/736x/f0/60/b6/f060b6c074b2499b596c3a02f393f99f.jpg');"></div>
</div>
[/html]
[html]
<div class="ep-container ep-flashback">
<div class="ep-img ep-img-left" style="background-image:url('https://i.pinimg.com/1200x/86/b6/9f/86b69f73ca1d61c6da4b7ae5ebac3b8b.jpg');"></div>
<div class="ep-content">
<div class="ep-type">флешбек</div>
<div class="ep-title">Ностальгическое название эпизода</div>
<div class="ep-description">
Шаблон для отыгрышей из прошлого. Визуально почти не отличается от активной игры, меняется лишь цветовая гамма для удобной навигации. Темы оформляются с обязательной пометкой <b>[Fb]</b> перед названием.
</div>
<div class="ep-section ep-meta">
<div><i class="fas fa-map-marker-alt"></i>Лондон</div>
<div><i class="fas fa-clock"></i>хх.хх.хххх</div>
<div><i class="fas fa-music"></i><a href="https://www.youtube.com/watch?v=VHAK-gU9gi0">Bye Bye Bye Opening Scene</a></div>
</div>
<div class="ep-section ep-tags">
<div class="ep-tag">давай</div>
<div class="ep-tag">сходим</div>
<div class="ep-tag">в паб</div>
</div>
<div class="ep-section ep-characters">
<div>
<i class="fas fa-user-friends"></i>
<a href="ССЫЛКА НА ПЕРСОНАЖА">Имя персонажа</a>
<span>·</span>
<a href="ССЫЛКА НА ПЕРСОНАЖА">Имя персонажа</a>
</div>
</div>
</div>
<div class="ep-img ep-img-right" style="background-image:url('https://i.pinimg.com/1200x/3f/2f/b2/3f2fb24d1e75a5d361460885c5c4400d.jpg');"></div>
</div>
[/html]
[html]
<div class="ep-container ep-au">
<div class="ep-img ep-img-left" style="background-image:url('https://i.pinimg.com/1200x/a4/56/bd/a456bd1c80766bac8dfcb936fb84e2a3.jpg');"></div>
<div class="ep-content">
<div class="ep-type">альтернативная реальность</div>
<div class="ep-title">Захватывающее название эпизода</div>
<div class="ep-description">
Шаблон для AU-игры и сюжетов вне основного канона форума. Позволяет свободно экспериментировать с событиями, персонажами и исходами истории. Отличается отдельной цветовой гаммой. Темы создаются с пометкой <b>[AU]</b> перед названием.
</div>
<div class="ep-section ep-meta">
<div><i class="fas fa-map-marker-alt"></i>Нью Йорк, США</div>
<div><i class="fas fa-clock"></i>20.05.2026</div>
<div><i class="fas fa-music"></i><a href="https://youtu.be/ucvVELVhlp0?si=OQssH-t9_q6nL8u8">название трека</a></div>
</div>
<div class="ep-section ep-tags">
<div class="ep-tag">неоны</div>
<div class="ep-tag">ночного</div>
<div class="ep-tag">города</div>
</div>
<div class="ep-section ep-characters">
<div>
<i class="fas fa-user-friends"></i>
<a href="ССЫЛКА НА ПЕРСОНАЖА">Имя персонажа</a>
<span>·</span>
<a href="ССЫЛКА НА ПЕРСОНАЖА">Имя персонажа</a>
</div>
</div>
</div>
<div class="ep-img ep-img-right" style="background-image:url('https://i.pinimg.com/1200x/55/eb/68/55eb68812975cf031cd261ccd3e1488b.jpg');"></div>
</div>
[/html]
[html]<div class="tgd-episode-generator"
id="tgd-episode-generator">
<header class="tgd-episode-generator__header">
<div class="tgd-episode-generator__issue">
THE GLORY DAYS · EPISODE CREATOR
</div>
<div class="tgd-episode-generator__heading">
<h2>Генератор эпизода</h2>
<span>EPISODE FILE</span>
</div>
<p>
Выберите тип эпизода, заполните поля и скопируйте готовый код.
Черновик сохраняется автоматически.
</p>
</header>
<!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
<section class="tgd-episode-generator__section">
<div class="tgd-episode-generator__section-title">
<span>01</span>
<div>
<h3>Episode</h3>
<small>основная информация</small>
</div>
</div>
<div class="tgd-episode-generator__grid">
<div class="tgd-episode-generator__field">
<label for="eg-class">Тип эпизода</label>
<select id="eg-class">
<option value="ep-active">
активный эпизод
</option>
<option value="ep-flashback">
флешбек
</option>
<option value="ep-au">
альтернативная реальность
</option>
</select>
</div>
<div class="tgd-episode-generator__field
tgd-episode-generator__wide">
<label for="eg-title">
Название эпизода
</label>
<input
id="eg-title"
type="text"
placeholder="Красивое название эпизода"
>
</div>
<div class="tgd-episode-generator__type-note"
id="eg-type-note">
Игра в актуальном времени основного сюжета.
</div>
</div>
</section>
<!-- ИЗОБРАЖЕНИЯ -->
<section class="tgd-episode-generator__section">
<div class="tgd-episode-generator__section-title">
<span>02</span>
<div>
<h3>Images</h3>
<small>боковые изображения</small>
</div>
</div>
<div class="tgd-episode-generator__grid">
<div class="tgd-episode-generator__field">
<label for="eg-img-left">
Изображение слева
</label>
<input
id="eg-img-left"
type="url"
placeholder="https://...jpg"
>
</div>
<div class="tgd-episode-generator__field">
<label for="eg-img-right">
Изображение справа
</label>
<input
id="eg-img-right"
type="url"
placeholder="https://...jpg"
>
</div>
</div>
</section>
<!-- ОПИСАНИЕ -->
<section class="tgd-episode-generator__section">
<div class="tgd-episode-generator__section-title">
<span>03</span>
<div>
<h3>Description</h3>
<small>описание эпизода</small>
</div>
</div>
<div class="tgd-episode-generator__field">
<label for="eg-description">
Краткое описание
</label>
<div data-eg-textarea
id="eg-description"
data-placeholder="Сюжет, исходная ситуация и важная информация. Переносы строк сохраняются."></div>
</div>
</section>
<!-- МЕСТО, ДАТА И МУЗЫКА -->
<section class="tgd-episode-generator__section">
<div class="tgd-episode-generator__section-title">
<span>04</span>
<div>
<h3>Metadata</h3>
<small>место, дата и музыка</small>
</div>
</div>
<div class="tgd-episode-generator__grid">
<div class="tgd-episode-generator__field">
<label for="eg-location">Локация</label>
<input
id="eg-location"
type="text"
placeholder="Нью-Йорк, США"
>
</div>
<div class="tgd-episode-generator__field">
<label for="eg-date">Игровая дата</label>
<input
id="eg-date"
type="text"
placeholder="20.05.2030"
>
</div>
<div class="tgd-episode-generator__field">
<label for="eg-ost-title">
Название композиции
</label>
<input
id="eg-ost-title"
type="text"
placeholder="The Avengers"
>
</div>
<div class="tgd-episode-generator__field">
<label for="eg-ost-url">
Ссылка на композицию
</label>
<input
id="eg-ost-url"
type="url"
placeholder="https://youtu.be/..."
>
</div>
</div>
</section>
<!-- ТЕГИ -->
<section class="tgd-episode-generator__section">
<div class="tgd-episode-generator__section-title">
<span>05</span>
<div>
<h3>Tags</h3>
<small>темы эпизода</small>
</div>
</div>
<div class="tgd-episode-generator__field">
<label for="eg-tags">Теги</label>
<input
id="eg-tags"
type="text"
placeholder="погоня, ночь, риск, корпорации"
>
<div class="tgd-episode-generator__hint">
Разделяйте теги запятыми, точками с запятой
или переносами строк.
</div>
</div>
</section>
<!-- УЧАСТНИКИ -->
<section class="tgd-episode-generator__section">
<div class="tgd-episode-generator__section-title">
<span>06</span>
<div>
<h3>Characters</h3>
<small>участники эпизода</small>
</div>
</div>
<div class="tgd-episode-generator__field">
<label for="eg-characters">
Персонажи и ссылки
</label>
<div data-eg-textarea
id="eg-characters"
data-placeholder="Каждый персонаж с новой строки:
Имя персонажа | https://ссылка-на-профиль
Имя второго персонажа | https://ссылка-на-профиль"></div>
<div class="tgd-episode-generator__hint">
Каждый персонаж указывается с новой строки.
Имя и ссылка разделяются вертикальной чертой |
</div>
</div>
</section>
<!-- КНОПКИ -->
<div class="tgd-episode-generator__buttons">
<button type="button" id="eg-generate">
сгенерировать эпизод
</button>
<button
type="button"
class="eg-copy"
data-copy-target="eg-result"
>
скопировать код
</button>
<button
type="button"
id="eg-clear-draft"
class="tgd-episode-generator__button--secondary"
>
очистить черновик
</button>
</div>
<!-- РЕЗУЛЬТАТ -->
<div class="tgd-episode-generator__result">
<label>Готовый код эпизода</label>
<pre id="eg-result"></pre>
<div class="eg-copy-note"></div>
</div>
</div>
<script>
document.querySelectorAll('#tgd-episode-generator [data-eg-textarea]').forEach(function (element) {
var field = document.createElement('textarea');
field.id = element.id;
field.className = element.className;
field.placeholder = element.getAttribute('data-placeholder') || '';
element.replaceWith(field);
});
</script>
<script src="https://forumstatic.ru/files/001c/25/f9/49121.js"></script>
[/html]
Страница: 1
