Используя стрелочки вправо → и влево ←, вы сможете собрать своего идеального персонажа из нашей акции. Несложные манипуляции подберут имя, внешность, расу, профессию, факт из жизни, одну из черт характера и уникальный артефакт, за который даже не придётся расплачиваться.
[indent] За успешное использование конструктора (регистрацию на форуме) вы получаете: 50₲, плашку из текущей коллекции, артефакт, предоставленный в описании, и, само собой, удовольствие от игры крутым персонажем.

Опции будут пополняться администрацией по мере вдохновения и необходимости.
*в пункте дополнительно в анкете необходимо указать, какие из предложенных вариаций вы выбрали, дабы мы вычеркнули их из акции. отсутствие данного уточнения может привести к повторам.

[html]<div class="constructor-section">
  <div class="carousel" id="name-carousel">
    <span class="arrow left" onclick="prevItem('name')">←</span>
    <span class="carousel-item" id="name-item">Charlie Holloway</span>
    <span class="arrow right" onclick="nextItem('name')">→</span>
  </div>
</div>
<div class="constructor-section">
  <div class="carousel" id="face-carousel">
    <span class="arrow left" onclick="prevItem('face')">←</span>
    <div class="carousel-item" id="face-item">
      <img id="face-image" src="https://forumstatic.ru/files/001c/75/3f/37956.gif" alt="Внешность" />
      <div id="face-name">rachelle lefèvre</div>
    </div>
    <span class="arrow right" onclick="nextItem('face')">→</span>
  </div>
</div>

<div class="constructor-section">
  <div class="carousel" id="race-carousel">
    <span class="arrow left" onclick="prevItem('race')">←</span>
    <span class="carousel-item" id="race-item">Оборотень</span>
    <span class="arrow right" onclick="nextItem('race')">→</span>
  </div>
</div>

<div class="constructor-section">
  <div class="carousel" id="job-carousel">
    <span class="arrow left" onclick="prevItem('job')">←</span>
    <span class="carousel-item" id="job-item">Водитель ночного такси (половина клиентов — люди, половина — не совсем. Однажды его/её машина уехала без водителя).
</span>
    <span class="arrow right" onclick="nextItem('job')">→</span>
  </div>
</div>

<div class="constructor-section">
  <div class="carousel" id="bio-carousel">
    <span class="arrow left" onclick="prevItem('bio')">←</span>
    <span class="carousel-item" id="bio-item">Регулярно получает сообщения от своей бабушки. Всё бы ничего, если бы она не умерла в 2017-м, а в телефоне не было SIM-карты.</span>
    <span class="arrow right" onclick="nextItem('bio')">→</span>
  </div>
</div>

<div class="constructor-section">
  <div class="carousel" id="trait-carousel">
    <span class="arrow left" onclick="prevItem('trait')">←</span>
    <span class="carousel-item" id="trait-item">Вечно в поиске: истины, любви, новых магических формул или идеального латте.
</span>
    <span class="arrow right" onclick="nextItem('trait')">→</span>
  </div>
</div>
<div class="constructor-section">
  <div class="carousel" id="artifact-carousel">
    <span class="arrow left" onclick="prevItem('artifact')">←</span>
    <span class="carousel-item" id="artifact-item">Сандалии Ходока Грез - дают возможность идти по чужим снам так же, как по дороге (требует перезарядки).</span>
    <span class="arrow right" onclick="nextItem('artifact')">→</span>
  </div>
</div>
<!-- скрипт конструктора персонажа Unholy Mess -->
<script>
const data = {
  name: ["Charlie Holloway", "Avery Cross", "Riley Bennett", "Blair Rousseau", "René Hartley", "Dominique Armstrong"],
  face: [
    { image: "https://forumstatic.ru/files/001c/75/3f/37956.gif", name: "rachelle lefèvre" },
    { image: "https://forumstatic.ru/files/001c/75/3f/48237.gif", name: "glen powell" },
    { image: "https://forumstatic.ru/files/001c/75/3f/21417.gif", name: "camila mendes" },
    { image: "https://upforme.ru/uploads/001c/75/3f/7/328125.gif", name: "pedro pascal" },
    { image: "https://upforme.ru/uploads/001c/75/3f/7/277655.gif", name: "lana parrilla" },
    { image: "https://upforme.ru/uploads/001c/75/3f/7/986558.gif", name: "emilia clarke" },
    { image: "https://upforme.ru/uploads/001c/75/3f/7/201245.gif", name: "idris elba" } ],
  race: ["Оборотень", "Вампир", "Валькирия", "Суккуб", "Филоморт", "Ведьма/Колдун", "Камбион", "Человек"],
  job: ["Водитель ночного такси (половина клиентов — люди, половина — не совсем. Однажды его/её машина уехала без водителя).", "Библиотекарь (найдет любую книгу или рукопись, даже если её нет в базе данных библиотеки", "Флорист (составит композицию из цветов и других растений, но не факт, что они не откусят руки получателю)", "Кондитер (поговаривают, что его печенья предсказывают будущее, и предсказания частенько сбываются)", "Владелец сувенирной лавки (двери его магазина могут пустить или не пустить посетителя по собственному желанию)", "Коллекционер (некоторые из его экспонатов оживают ночью и кошмарят своего владельца)"],
  bio: ["Не спросив цену заранее, персонаж купил зелье «на всякий случай». Теперь должен деньги лавке магических артефактов... или её владельцу, который предпочитает необычные формы расчёта.", "Каждый первый понедельник месяца видит сны о человеке, которого никогда в жизни не видел.", "Однажды в драке получил ножевое ранение и теперь по шраму может определить погоду на завтра.", "Персонаж купил дом по смешной цене и теперь каждый вечер слышит пение из слива в ванной, хотя живет один.", "По глупости не помог старушке перейти дорогу и теперь персонажа ждет сто дней неудачи.", "Вернувшись с работы, обнаружил дома кота, а в квартире — игрушки, корм и лоток, хотя еще утром никакого кота у персонажа и в помине не было.", "Регулярно получает сообщения от своей бабушки. Всё бы ничего, если бы она не умерла в 2017-м, а в телефоне не было SIM-карты."],
  artifact: ["Шкатулка Шепотов - хранит один секрет, который можно отдать другому человеку.", "Перо Забытого Писца - записывает мысли владельца ещё до того, как они сформулированы.", "Сандалии Ходока Грез - дают возможность идти по чужим снам так же, как по дороге (требует перезарядки).", "Тетрадь Сомнений (выглядит как древний потрепанный блокнот в переплете из крокодильей кожи) — если владелец разрывается между двумя вариантами, то нужно записать оба в блокнот и наутро та версия, что принесет ему меньше выгоды, будет зачеркнута.", "Кольцо Возврата (кольцо с синим камнем, при активации меняет цвет на красный) — в случае совершения серьезной ошибки, владелец артефакта может прожить день еще раз и исправить свое положение в обмен на год своей жизни.", "Сердце Лунного Эха — небольшая черная сфера с синим туманом внутри, превращает тревогу и страх в лёгкость и уверенность.", "Перо Забвения — фиолетовое перо с железным наконечником, способно стирать и изменять воспоминания, если записать их на коже.", "Чашка Вечной Игривости — изящная фарфоровая чашка перламутрового розового цвета, любой напиток, налитый в неё, заставляет говорить правду."],
  trait: ["Вечно в поиске: истины, любви, новых магических формул или идеального латте.", "Частенько говорит сам с собой, окружающие шепчутся между собой, что персонаж разговаривает с призраками.", "По четвергам пьет кофе с корицей в надежде, что это привлечет финансовое благополучие.", "Никогда не допивает чай до конца. Последний глоток оставляет: на удачу или на прощание.", "Перед тем как принять решение, считает обязанностью досчитать до десяти, так сказать, дать себе время подумать.", "Хороший психолог со стороны, но не чувствует манипуляций, когда дело касается самого персонажа."]
};

const indexes = {
  name: 0,
  face: 0,
race: 0,
  job: 0,
  bio: 0,
  artifact: 0,
  trait: 0
};

function updateItem(type) {
  const item = document.getElementById(type + '-item');

  item.style.opacity = 0;
  item.style.transform = 'translateX(-20px)';

  setTimeout(() => {
    if (type === 'face') {
      document.getElementById('face-image').src = data[type][indexes[type]].image;
      document.getElementById('face-name').textContent = data[type][indexes[type]].name;
    } else {
      item.textContent = data[type][indexes[type]];
    }
    item.style.opacity = 1;
    item.style.transform = 'translateX(0)';
  }, 200);
}
function prevItem(type) {
  indexes[type] = (indexes[type] - 1 + data[type].length) % data[type].length;
  updateItem(type);
}

function nextItem(type) {
  indexes[type] = (indexes[type] + 1) % data[type].length;
  updateItem(type);
}
</script>
<style>
/* Общий стиль для всего конструктора */
.constructor-section {
    margin: 2px;
    background: #ada7a7;
    text-align: center;
    font-family: el messiri;
    border-radius: 10px;
    font-size: 11px;
}

h2 {
    color: #235349;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 30%;
    display: inline-flex;

}

/* Оформление каруселей */
.carousel {
    display: inline-flex;
    justify-content: center;
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    padding: 2px 0px 2px 0px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

/* Оформление стрелок */
.arrow {
font-size: 18px !important;
        color: #235349;
        /* background: #a5a19f; */
        text-shadow: 0px 0px 3px #bebebe;
        cursor: pointer;
     
        display: inline-block;
        border-radius: 100%;
        padding: 0px 5px;
        transition: color 0.3s, transform 0.3s;
}

.arrow:hover {
  color: #bfbfbf;
}

.arrow:active {
  color: #b3445a; /* Более тёмный оранжевый нажатия был, а теперь розовый */
}

/* Оформление элементов */
.carousel-item {
    font-size: 20px;
    color: #15312B;
    font-weight: 600;
    width: 75%;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  opacity: 1;
  transform: translateX(0);
    padding: 0 20px;
    user-select: none;
    text-align: center;
}

#face-image {
        height: auto;
        border-radius: 8px;
        object-fit: cover !important;
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        opacity: 1;
        transform: translateX(0);
        max-width: 120px;
        margin: 5px;
        height: 120px;
        border-radius: 100%;
        /* padding: 2px; */
        /* border: solid 1px #a6a6a600 !important; */
        object-fit: cover;
        box-shadow: 0px 0px 15px #292929;
}

.carousel-item:hover {
  color: #995a5a;
  cursor: pointer;
}

#name-item {
        font-family: El Messiri;
        text-transform: uppercase;
        font-size: 19px;
        text-shadow: 0 0 4px #988c84;
        display: inline-block;
    }
#face-item {
        font-size: 15px;
        font-family: el messiri;
        /* text-transform: uppercase; */
        /* font-weight: 100; */
        background:url(https://forumstatic.ru/files/001c/75/3f/13080.jpg);
        color: #2C4540;
display: flex;
    flex-direction: column;
    align-items: center;

        border-radius: 10px;
        border: solid 1px #2C4540;
        display: inline-block;
    }
#face-name {
        margin-top: -36px;
        margin-left: 103px;
        display: block !important;
        font-size: 12px !important;
        color: #a5a19f;
        text-shadow: 0 0 13px #ffffff;
        font-family: el messiri;
        background: #2d2d2d;
        border-radius: 10px;
        /* border: solid 1px #656565; */
        font-size: 18px;
        padding: 0px 10px;
        position: absolute !important;
    }

#race-item {
        font-size: 15px;
        font-family: el messiri;
        text-transform: uppercase;
        /* font-weight: 100; */
        display: inline-block;
        color: #2C4540;
    }
#job-item {
        font-size: 11px;
        font-family: tahoma;
        line-height: 17px !important;
        height: auto;
        font-weight: 100;
        color: #000;
        display: inline-block;
        /* width: 200px !important; */
        text-align: justify;
    }
#job-item:before {          content: "❖ Профессия:";
        font-size: 10px;
        font-family: tahoma;
        line-height: 17px !important;
        text-transform: uppercase;
        padding: 0px 5px;
        /* margin-left: 5px; */
        /* background: #b4ada9; */
        height: auto;
        font-weight: 100;
        font-weight: bold;
        color: #546764;
    }
#bio-item {
        font-size: 11px;
        font-family: tahoma;
        line-height: 17px !important;
        height: auto;
        font-weight: 100;
        color: #000;
        display: inline-block;
        /* width: 200px !important; */
        text-align: justify;
    }

#bio-item:before {          content: "❖ Факт из жизни:";
        font-size: 10px;
        font-family: tahoma;
        line-height: 17px !important;
        text-transform: uppercase;
        padding: 0px 5px;
        /* margin-left: 5px; */
        /* background: #b4ada9; */
        height: auto;
        font-weight: 100;
        font-weight: bold;
        color: #546764;
    }

#trait-item {
        font-size: 11px;
        font-family: tahoma;
        line-height: 17px !important;
        height: auto;
        font-weight: 100;
        color: #000;
        display: inline-block;
        /* width: 200px !important; */
        text-align: justify;
    }
#trait-item:before {          content: "❖ Черта характера:";
        font-size: 10px;
        font-family: tahoma;
        line-height: 17px !important;
        text-transform: uppercase;
        padding: 0px 5px;
        /* margin-left: 5px; */
        /* background: #b4ada9; */
        height: auto;
        font-weight: 100;
        font-weight: bold;
        color: #546764;
    }

#artifact-item {
        font-size: 11px;
        font-family: tahoma;
        line-height: 17px !important;
        height: auto;
        font-weight: 100;
        color: #000;
        display: inline-block;
        /* width: 200px !important; */
        text-align: justify;
    }
#artifact-item:before {          content: "❖ Артефакт:";
        font-size: 10px;
        font-family: tahoma;
        line-height: 17px !important;
        text-transform: uppercase;
        padding: 0px 5px;
        /* margin-left: 5px; */
        /* background: #b4ada9; */
        height: auto;
        font-weight: 100;
        font-weight: bold;
        color: #546764;
    }

/* Мобильный адаптив */
@media screen and (max-width: 768px) {
  .carousel {
    width: 80%;
  }

  h2 {
    font-size: 20px;
  }

  .arrow {
    font-size: 25px;
  }

  .carousel-item {
    font-size: 18px;
  }
}
</style>
<!--конец  скрипта конструктора персонажа Unholy Mess -->
[/html]