Build-a-Character
❖ Акция ❖ Собери своего персонажа
Используя стрелочки вправо → и влево ←, вы сможете собрать своего идеального персонажа из нашей акции. Несложные манипуляции подберут имя, внешность, расу, профессию, факт из жизни, одну из черт характера и уникальный артефакт, за который даже не придётся расплачиваться.
[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">Leslie Graves</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: ["Leslie Graves", "Charlie Holloway", "Avery Cross", "Jordan Vance"],
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/21417.gif", name: "camila mendes" } ],
race: ["Оборотень", "Вампир", "Валькирия", "Суккуб", "Филоморт", "Ведьма/Колдун", "Камбион", "Человек"],
job: ["Водитель ночного такси (половина клиентов — люди, половина — не совсем. Однажды его/её машина уехала без водителя).", "Аналитик по аномалиям. Работает на полулегальную структуру, занимается сбором данных о магических сбоях. Любит графики. Ненавидит призраков.", "Дизайнер амулетов. Создаёт магические украшения на заказ. Не всегда проверяет, что они делают. ", "Контент-ведьма. Ведёт популярный аккаунт WitchTok, учит делать привороты на бывшего и хвастается, что у неё контракт с демоном на продвижение."],
bio: ["Каждый вечер в твоей квартире пахнет лавандой, хотя ты её не покупал. Сначала это было приятно. Теперь становится странно: запах усиливается перед сновидениями, которые слишком реальны.", "Не спросив цену заранее, персонаж купил зелье «на всякий случай». Теперь должен деньги лавке магических артефактов... или её владельцу, который предпочитает необычные формы расчёта.", "В юности, будучи на пляже, ты дал случайное обещание незнакомцу. Ты давно забыл об этом. Но теперь незнакомец вернулся… и хочет получить то, что ему причитается.", "Принял случайное приглашение и стал свидетелем преступления против магии."],
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: #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]
upd!
имя и внешность персонажа можно придумать самостоятельно, в таком случае персонаж всё равно будет считаться акционным;
также можно взять 1-2 части из предложенных в акций, но в этом случае персонаж не будет считаться акционным, а следовательно никаких плюшек к нему прилагаться не будет.
