Используя стрелочки вправо → и влево ←, вы сможете собрать своего идеального персонажа из нашей акции. Несложные манипуляции подберут имя, внешность, расу, профессию, факт из жизни, одну из черт характера и уникальный артефакт, за который даже не придётся расплачиваться.
[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">Контент-ведьма. Ведёт популярный аккаунт WitchTok, учит делать привороты на бывшего и хвастается, что у неё контракт с демоном на продвижение.
</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: ["Charlie Holloway", "Avery Cross", "Riley Bennett", "Ellis Fontaine", "Blair Rousseau", "René Hartley", "Dominique Archer"],
  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: ["Водитель ночного такси (половина клиентов — люди, половина — не совсем. Однажды его/её машина уехала без водителя).", "Контент-ведьма. Ведёт популярный аккаунт WitchTok, учит делать привороты на бывшего и хвастается, что у неё контракт с демоном на продвижение.", "Хирург для сверхъестественных существ.", "Астролог, просто гадает по звёздам.", "Тату-мастер, которые творит действительно магические шедевры.", "Переводчик древних магических языков.", "Чистильщик последствий магических происшествий."],
  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: #9f9393;
    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: #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: #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]