Используя стрелочки вправо → и влево ←, вы сможете собрать своего идеального персонажа из нашей акции. Несложные манипуляции подберут имя, внешность, расу, профессию, факт из жизни, одну из черт характера и уникальный артефакт, за который даже не придётся расплачиваться.
[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">Rowan Blackwood</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/14492.gif" alt="Внешность" />
      <div id="face-name">dan stevens</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">Проиграл всё камбиону в карты. Да, ставка была глупой. Нет, ты не знал, что у камбиона нечестные карты. Теперь приходится начинать жизнь заново - с парой баксов в кармане и лёгким проклятием на удачу.</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: ["Rowan Blackwood", "Leslie Graves", "Charlie Holloway", "Avery Cross", "Jordan Vance", "Quinn Beaumont"],
  face: [
    { image: "https://forumstatic.ru/files/001c/75/3f/14492.gif", name: "dan stevens" },
    { 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/57430.gif", name: "dakota johnson" },
    { image: "https://forumstatic.ru/files/001c/75/3f/72280.gif", name: "frank grillo" },
    { image: "https://forumstatic.ru/files/001c/75/3f/21417.gif", name: "camila mendes" } ],
  race: ["Оборотень", "Вампир", "Ведьма/Ведьмак", "Валькирия", "Суккуб", "Филоморт"],
  job: ["Бармен в заведении для существ (Бонус за молчаливость).", "Торговец редкими амулетами (работает на грани закона).", "Писатель городских легенд (которые чаще оказываются правдой).", "Охотник за магическими долгами (коллектор непростых долгов).", "Водитель ночного такси (половина клиентов — люди, половина — не совсем. Однажды его/её машина уехала без водителя).", "Гид по тайным маршрутам Нового Орлеана (включая болота, призраков и точки силы)."],
  bio: ["Проиграл всё камбиону в карты. Да, ставка была глупой. Нет, ты не знал, что у камбиона нечестные карты. Теперь приходится начинать жизнь заново - с парой баксов в кармане и лёгким проклятием на удачу.", "Снял квартиру с прошлым. Нашёл дешёвое жильё во Французском квартале. Хозяин торопился её сдать. Почему? Потому что последним жильцом была ведьма, и теперь квартира сама выбирает, кого пускать, а кого - нет.", "Пойман на неправильной вечеринке. Вроде бы обычный карнавал, обычные маски. Пока не понимаешь, что это не просто вечеринка, а магический обряд. И теперь ты выбран, хотя и не уверен, для чего именно.", "Ты появился в списке самых разыскиваемых у Стражей. По ошибке, но ситуацию будет совсем не просто объяснить.", "Каждый вечер в твоей квартире пахнет лавандой, хотя ты её не покупал. Сначала это было приятно. Теперь становится странно: запах усиливается перед сновидениями, которые слишком реальны.", "Ты подобрал бездомную кошку на кладбище Сент-Луи, а на следующее утро обнаружил, что слышишь её мысли. Проблема в том, что ее мысли относительно тебя чересчур жуткие, и сколько бы ты не выставлял ее за дверь, она снова скребётся к тебе по ночам."],
  artifact: ["Ожерелье Пыль Лунного Света – помогает на короткое время стать незаметным для магии.", "Кольцо Whispercoil – усиливает слух настолько, что можно уловить разговор духов.", "Карманный компас Чужой Путь – всегда показывает дорогу туда, где тебя либо любят, либо ненавидят.", "Старинный кулон Темпоральный осколок – позволяет увидеть одно событие из прошлого, раз в месяц.", "Перчатка Ткань Снов – даёт возможность прикасаться к снам других.", "Фляжка Отвар Лживого Голоса – позволяет убедительно солгать один раз в сутки."],
  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: #9c9795;
    text-align: center;
    font-family: el messiri;
    border-radius: 10px;
    font-size: 11px;
}

h2 {
    color: #504141;
    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: #6b5252;
        /* background: #a5a19f; */
        text-shadow: 0px 0px 3px #bebebe;
        cursor: pointer;
        border: solid 1px #9f9595;
        display: inline-block;
        border-radius: 100%;
        padding: 0px 5px;
        transition: color 0.3s, transform 0.3s;
}

.arrow:hover {
  color: #bfbfbf;
}

.arrow:active {
  color: #cc5200; /* Более тёмный оранжевый нажатия */
}

/* Оформление элементов */
.carousel-item {
    font-size: 20px;
    color: #5e4747;
    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: #4d606d;
  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: #503333;
display: flex;
    flex-direction: column;
    align-items: center;

        border-radius: 10px;
        border: solid 1px #917373;
        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: #503333;
    }
#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: #756464;
    }
#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: #756464;
    }

#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: #756464;
    }

#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: #756464;
    }

/* Мобильный адаптив */
@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]