Оформление
    Цвета дизайна
    Быстрые ссылки
    Гостевая Правила Игромеханика Хронология сюжета Занятые внешности Ждут в игре Вопросы и предложения Отсутствия и уход F.A.Q Поиск соигрока Инструкция к игровым маскам Реклама и баннеры

    MadHat's Test

    Объявление

    RPG TOP FORUM TOP

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

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

    Вы здесь » MadHat's Test » все для нового проекта! » шаблон эпизодов

    шаблон эпизодов

    Страница: 1

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

    1

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [hideprofile][html]

    <div class="ep-container ep-active">
     
      <div class="ep-img ep-img-left" style="background-image:url('https://i.pinimg.com/1200x/99/4b/92/994b923b3ab84583cf25669e774248ec.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://youtu.be/4oEVg64vP4Q?si=ZmIDuIVFDo1SOeVE">Avatar OST</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/b7/db/bc/b7dbbc6eb0d162eec256bd5cab0b5c94.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/736x/f9/4c/69/f94c690de6b7970fe507fa1ac411d513.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>01.05.9950</div>
          <div><i class="fas fa-music"></i><a href="https://youtu.be/hE0Lav4MZDM?si=uONna-1gmKOvAAq2">Appa song</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/24/ac/c1/24acc1d04b60579d7959c3ca5406d633.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/e3/7d/47/e37d475d5cb0698f81e61658c564bbfe.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/26/5a/7d/265a7d4dfb4f0995f97b880f1d6336c3.jpg');"></div>

    </div>
    [/html]

    [html]<div class="ep-generator">
      <div class="ep-generator-title">генератор эпизода</div>

      <div class="ep-generator-grid">
        <div class="eg-field">
          <label>Тип эпизода</label>
          <div id="eg-type" class="eg-edit" contenteditable="true" data-placeholder="активный эпизод / флешбек / альтернативная реальность"></div>
        </div>

        <div class="eg-field">
          <label>Класс типа</label>
          <select id="eg-class">
            <option value="ep-active">активный эпизод</option>
            <option value="ep-flashback">флешбек</option>
            <option value="ep-au">альтернативная реальность</option>
          </select>
        </div>

        <div class="eg-field eg-wide">
          <label>Название эпизода</label>
          <div id="eg-title" class="eg-edit" contenteditable="true" data-placeholder="Красивое название эпизода"></div>
        </div>

        <div class="eg-field">
          <label>Изображение слева</label>
          <div id="eg-img-left" class="eg-edit" contenteditable="true" data-placeholder="https://...jpg"></div>
        </div>

        <div class="eg-field">
          <label>Изображение справа</label>
          <div id="eg-img-right" class="eg-edit" contenteditable="true" data-placeholder="https://...jpg"></div>
        </div>

        <div class="eg-field eg-full">
          <label>Описание эпизода</label>
          <div id="eg-description" class="eg-edit eg-edit-large" contenteditable="true" data-placeholder="Описание эпизода. Переносы строк сохранятся."></div>
        </div>

        <div class="eg-field">
          <label>Локация</label>
          <div id="eg-location" class="eg-edit" contenteditable="true" data-placeholder="Республиканский город"></div>
        </div>

        <div class="eg-field">
          <label>Дата</label>
          <div id="eg-date" class="eg-edit" contenteditable="true" data-placeholder="01.02.9954"></div>
        </div>

        <div class="eg-field">
          <label>OST</label>
          <div id="eg-ost" class="eg-edit" contenteditable="true" data-placeholder="Название трека | ссылка"></div>
        </div>

        <div class="eg-field">
          <label>Теги</label>
          <div id="eg-tags" class="eg-edit" contenteditable="true" data-placeholder="Теги через запятую: погоня, ночь, риск"></div>
        </div>

        <div class="eg-field eg-full">
          <label>Персонажи</label>
          <div id="eg-characters" class="eg-edit eg-edit-large" contenteditable="true" data-placeholder="Каждый персонаж с новой строки:
    Имя персонажа | ссылка"></div>
        </div>
      </div>

      <div class="ep-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">очистить черновик</button>
      </div>

      <div class="ep-generator-result">
        <label>Готовый код</label>
        <div id="eg-result" class="eg-result-box"></div>
        <div class="eg-copy-note"></div>
      </div>
    </div>[/html]

    0

    2

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [hideprofile][html]<div class="mask-guide">
      <div class="mask-guide-title">инструкция к маскам</div>

      <div class="mask-guide-intro">
        Помимо шаблонов эпизодов, на форуме есть шаблоны для масок на эпизоды.
      </div>

      <div class="mask-guide-body">
        <p>
          Скрипт расположен в форме ответа и отмечен иконкой маски <span class="mask-guide-icon" title="маска"></span>.
          При нажатии на неё открывается окно, где вы вводите информацию персонажа, которая будет отображаться в вашем профиле:
          имя, статус, аватар и подпись.
        </p>

        <p>
          В поле аватара нужно вставить прямую ссылку на изображение. Желательно использовать квадратную картинку, чтобы мини-профиль выглядел аккуратно.
          В подпись можно добавить цитату, гифку или ссылку.
        </p>

        <p>
          Самый важный пункт — шаблоны наций и заполняемые блоки информации о лояльности и деятельности вашего масочного персонажа.
          Чтобы скрипт сработал корректно, в области, где написано <b>Ответ</b>, нужно вписать название деятельности и лояльности, не оставляя слово <b>Ответ</b>.
        </p>

        <p>
          После заполнения всех полей нажмите <b>Вставить</b>. Поле ввода сообщения останется пустым, но слева появится мини-профиль вашего персонажа.
          После этого можно спокойно писать пост: маска будет подставлена автоматически.
        </p>

    <p>Маски доступны только в трёх разделах для <b>принятых</b> в игру игроков: <b>активная игра</b>, <b>флешбеки</b> и <b>альтернатива</b>.
    </p>

      </div>
    </div>

    <style>
    .mask-guide {
      width: min(770px, 100%);
      max-width: 100%;
      margin: 0 auto;
      padding: 18px;
      box-sizing: border-box;

      background:
        linear-gradient(
          180deg,
          color-mix(in srgb, var(--plot-card) 92%, transparent),
          color-mix(in srgb, var(--plot-soft) 90%, transparent)
        ),
        var(--categoryfon);

      border: 1px solid var(--plot-border);
      border-radius: 7px;
      color: var(--plot-text);
      font-family: var(--font-base);
      box-shadow: 0 8px 18px var(--plot-shadow);
    }
    .mask-guide,
    .mask-guide * {
      box-sizing: border-box;
    }

    .mask-guide-body,
    .mask-guide-intro {
      min-width: 0;
    }
    .mask-guide-title {
      margin-bottom: 14px;
      overflow-wrap: anywhere;
      color: var(--plot-accent);
      font: 700 18px/1.2 var(--rus);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .mask-guide-intro {
      margin-bottom: 14px;
      padding: 10px 12px;

      background: color-mix(in srgb, var(--plot-soft) 78%, transparent);
      border: 1px solid color-mix(in srgb, var(--plot-border) 70%, transparent);
      border-radius: 6px;

      color: var(--plot-muted);
      font: 700 11px/1.45 var(--rus);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .7px;
    }

    .mask-guide-body {
      padding: 12px;

      background:
        linear-gradient(
          180deg,
          color-mix(in srgb, var(--plot-card) 76%, transparent),
          color-mix(in srgb, var(--plot-soft) 82%, transparent)
        );

      border: 1px solid color-mix(in srgb, var(--plot-border) 75%, transparent);
      border-radius: 7px;
    overflow-wrap: anywhere;
    word-break: break-word;
    }

    .mask-guide-body p {
      margin: 0 0 10px;
      color: var(--plot-text);
      font: 11px/1.65 var(--font-base);
      text-align: justify;
    }

    .mask-guide-body p:last-child {
      margin-bottom: 0;
    }

    .mask-guide-body b {
      color: var(--plot-accent);
      font-weight: 700;
    }

    .mask-guide-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin: 0 3px -3px;

      background: var(--plot-accent);
      -webkit-mask: url("https://api.iconify.design/mdi:drama-masks.svg") center / contain no-repeat;
      mask: url("https://api.iconify.design/mdi:drama-masks.svg") center / contain no-repeat;
    }

    @media screen and (max-width: 540px) {
      .mask-guide {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 12px;
        overflow: hidden;
      }

      .mask-guide-body,
      .mask-guide-intro {
        width: 100%;
        max-width: 100%;
      }

      .mask-guide-body p {
        text-align: left;
        word-break: normal;
        overflow-wrap: anywhere;
      }
    }
    </style>[/html]

    0

    Страница: 1

    Вы здесь » MadHat's Test » все для нового проекта! » шаблон эпизодов

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