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">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", "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: ["Водитель ночного такси (половина клиентов — люди, половина — не совсем. Однажды его/её машина уехала без водителя).", "Чистильщик последствий магических происшествий."],
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]
upd!
имя и внешность персонажа можно придумать самостоятельно, в таком случае персонаж всё равно будет считаться акционным;
также можно взять 1-2 части из предложенных в акций, но в этом случае персонаж не будет считаться акционным, а следовательно никаких плюшек к нему прилагаться не будет.
