[hideprofile]
питомцы
Добро пожаловать в наш зверинец магических существ со всего мира! Выбирайте любое яйцо из каталога на вкладке «Купить питомца» (почитать описание существа можно, кликнув по нему) и выполняй задания, чтобы питомец рос.
Питомцы — это внеигровая активность, они принадлежат игроку, а не персонажу.
Каталог будет пополняться. Новых особей можно будет получить бесплатно в специальных конкурсах, после — по стандартной цене.
Питомец взрослеет в 4 этапа: яйцо, детёныш, подросток и взрослая особь.
Чтобы детёныш вылупился из яйца, нужно набрать 100% прогресса, выполняя задания из списка ниже. Для перехода в следующие стадии (подросток и взрослый) нужно сначала набрать 100% прогресса, а затем купить эликсир роста за $3000 (в этой же теме).
Приступать к заданиям можно только после покупки яйца, задания будут засчитываться с этого момента.
Задания делятся на 2 типа: общие (их можно выполнить сколько угодно раз) и уникальные (не больше 1 раза за стадию роста). В одном посте можно выполнить 2 постовых задания.
Следить за прогрессом питомца можно на специальной вкладке личной страницы (клик по плашке в профиле).
Можно растить нескольких питомцев одновременно.
Первый питомец — бесплатный. Стоимость каждого следующего — $5000.
Дать имя питомцу при покупке — бесплатно. Смена имени будет стоить $500 (для смены напишите в свободной форме ниже).
Чтобы оформить заказ, отметьте нужные пункты, заполните необходимую информацию (в заданиях на плюсы, сообщения и подобных укажите, сколько раз выполнили задание, а не количество плюсов, сообщений и т. д.) и нажмите кнопку «Вставить в форму ответа».
Быстро посчитать посты, плюсы и рекламу можно в калькуляторе активности.
Ссылка на предыдущую тему: питомцы #2.
[html]
<style>
.hidden { display: none; }
#pet-shop-container {
font-family: var(--font-base);
font-size: 12px;
text-align: left;
margin: 10px 0 -10px;
}
.column h4 {
font-weight: 500;
margin: 0 0 12px !important;
display: block;
width: calc(100% + 10px*2);
position: relative;
top: 0;
left: -10px;
border-radius: 9px 9px 0 0;
padding: 8px 10px 8px;
text-align: center;
color: var(--extra-color1--text);
background: var(--pun-box-color1);
box-sizing: border-box;
font-size: 14px;
}
.column h5 {
font-weight: 450;
font-size: 13px;
text-align: center;
padding: 0 20px;
margin: 0 10px 15px;
color: var(--link-color1);
}
.column h5:nth-of-type(2) {
margin: 20px 0 15px;
border-top: 1px solid var(--border-color1);
padding: 15px 20px 0;
}
.buttons-container {
margin-bottom: 30px;
text-align: center;
display: flex;
justify-content: center;
gap: 16px;
}
.buttons-container:last-of-type {
margin: 10px 0 0;
}
.columns-container {
display: flex;
gap: 16px;
margin-bottom: 15px;
}
.column {
box-sizing: border-box;
padding: 0 10px 10px;
border-radius: 10px;
border: 1px dashed var(--border-color2--pale);
flex: 1;
}
.task-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 4px;
}
.task-count {
width: 50px;
border-radius: 8px;
margin: 0;
}
.pets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
gap: 16px;
margin-bottom: 30px;
}
.additional-options {
margin: 10px auto 30px;
display: flex;
justify-content: flex-start;
}
#tasks-container .additional-options {
margin: 20px auto 19px;
display: flex;
gap: 16px;
justify-content: flex-start;
}
#tasks-container .additional-options label .count-input {
margin: 0 0 0 auto;
}
.additional-options label {
box-sizing: border-box;
padding: 10px;
background: var(--pun-container-color);
border-radius: 10px;
width: calc((100% / 3 - 14px) * 2 + 20px);
display: flex;
align-items: center;
gap: 6px;
}
#tasks-container .additional-options label {
box-sizing: border-box;
padding: 10px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 6px;
border: 1px dashed var(--border-color2--pale);
flex: 1;
}
.count-input {
width: 50px;
border-radius: 8px;
}
.text-input {
flex-grow: 1;
border-radius: 8px;
}
.output-textarea {
width: 100%!important;
margin-bottom: 10px;
}
.insert-btn { margin-top: 10px; }
.buttons-container button {
margin: 0;
}
.pets-grid > div > label:before {
content: "";
display: block;
order: 2;
}
.pets-grid > div > label {
display: flex;
align-items: center;
background: var(--pun-container-color);
border-radius: 10px;
box-sizing: border-box;
padding: 0 0 10px;
cursor: pointer;
position: relative;
z-index: 2;
flex-direction: column;
border: 1px dashed var(--border-color2--pale);
}
.pets-grid > div > label:has(input[type="checkbox"]:checked) {
border: 1px solid var(--select-color);
border-bottom: 0;
border-radius: 10px 10px 0 0;
}
.pets-grid > div > label input[type="checkbox"] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
appearance: none;
background: transparent;
cursor: pointer;
border-radius: 10px;
z-index: -1;
}
.pets-grid > div > label input[type="checkbox"]:checked {
background: var(--pun-container-color);
border-radius: 10px 10px 0 0;
}
.pets-grid > div > label input[type="checkbox"]:checked+.pet-name {
background: var(--select-color);
color: var(--select-color--text);
}
.pets-grid .pet-name {
display: block;
width: 100%;
text-align: center;
font-family: var(--font-base);
font-size: 12px;
color: var(--extra-color1--text);
background: var(--pun-box-color1);
border-radius: 9px 9px 0 0;
box-sizing: border-box;
padding: 8px 10px 10px;
margin-bottom: 8px;
font-weight: 450;
order: 1;
}
.pet-options {
background: var(--pun-container-color);
box-sizing: border-box;
padding: 0 10px 8px;
border-radius: 0 0 10px 10px;
border: 1px solid var(--select-color);
border-top: none;
}
.pet-options p {
order: 3;
padding: 10px 0 20px;
font-size: 11px !important;
text-transform: lowercase;
}
.pet-options input.pet-name-input {
width: 100%;
box-sizing: border-box;
border-radius: 8px;
}
.pet-options label {
width: 100%;
display: block;
cursor: pointer;
margin-bottom: 4px;
}
textarea.task-proof {
width: 100% !important;
min-height: 60px !important;
border-radius: 10px !important;
margin: 0 0 5px;
}
.task-proof-container {
border: 1px solid var(--select-color);
padding: 10px 8px 6px;
box-sizing: border-box;
border-radius: 0 0 8px 8px;
border-top: none;
}
.task-item label {
line-height: 120%;
display: flex;
gap: 6px;
width: 100%;
cursor: pointer;
}
.task-item label:before {
content: "\2b";
margin: 0px -2px 0 0;
color: var(--link-color2);
font-family: 'Font Awesome 6 Pro';
font-size: 9px;
font-weight: 400;
}
.task-item.selected label:before {
color: var(--select-color--text) !important;
}
.task-proof-container label {
cursor: pointer;
}
.task-item.selected {
margin: 0;
box-sizing: border-box;
padding: 4px 8px 5px;
background: var(--select-color);
border-radius: 8px 8px 0 0;
margin-bottom: -2px;
color: var(--select-color--text);
font-weight: 450;
}
.task-item label input[type="checkbox"] {
appearance: none;
background: transparent;
width: 0;
height: 0;
position: absolute;
}
.task-item:hover {
opacity: .5;
}
.preview {
width: 200px;
height: 200px;
box-sizing: border-box;
border-radius: 10px;
border: 1px dashed var(--border-color2--pale);
padding: 54px 10px 20px;
position: relative;
text-align: center;
align-content: center;
}
.clothes-layout {
display: flex;
gap: 16px;
margin-bottom: 30px;
}
button#add-to-cart-btn {
position: absolute;
top: 10px !important;
left: 10px;
white-space: nowrap;
}
div#preview-pet {
display: block;
width: auto !important;
height: auto !important;
margin: 0 auto;
background: transparent;
}
.catalog {
width: 200px;
height: auto;
box-sizing: border-box;
border-radius: 10px;
border: 1px dashed var(--border-color2--pale);
flex: 1;
padding: 14px 10px 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.catalog-section h4 {
text-align: center;
display: block;
font-weight: 450;
font-size: 13px;
padding: 0 20px;
margin: 0 10px 15px;
color: var(--link-color1);
}
.checkbox-container input[type="checkbox"], .class-container input[type="checkbox"] {
display: none;
}
.checkbox-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.checkbox-container label {
border-radius: 30px;
box-sizing: border-box;
display: block;
background: var(--pun-box-color2);
color: var(--text-color);
padding: 6px 13px;
line-height: 110%;
font-size: 12px;
cursor: pointer;
}
.checkbox-container label:hover, .checkbox-container label:has(input[type="checkbox"]:checked), .class-container label:hover, .class-container label:has(input[type="checkbox"]:checked) {
background-color: var(--hover-color);
color: var(--hover-color--text);
}
.class-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.class-container label {
border-radius: 8px;
box-sizing: border-box;
display: block;
background-color: var(--pun-box-color2);
color: var(--text-color);
line-height: 110%;
cursor: pointer;
font-size: 0;
height: 100px;
overflow: hidden;
background-position: center;
background-size: auto;
background-repeat: no-repeat;
}
.catalog-section:first-of-type {
margin-bottom: 20px;
}
label:has(input[value="c1"]) {
background-image: url(https://i.postimg.cc/qvf0W4jp/c1.webp);
}
label:has(input[value="c2"]) {
background-image: url(https://i.postimg.cc/0ygxhPc8/c2.webp);
}
label:has(input[value="c3"]) {
background-image: url(https://i.postimg.cc/wjKHng0q/c3.webp);
}
label:has(input[value="c4"]) {
background-image: url(https://i.postimg.cc/3xM7zYnr/c4.webp);
}
label:has(input[value="c5"]) {
background-image: url(https://i.postimg.cc/13xPbsJt/c5.webp);
}
label:has(input[value="c6"]) {
background-image: url(https://i.postimg.cc/dVMvgw43/c6.webp);
}
label:has(input[value="c7"]) {
background-image: url(https://i.postimg.cc/bwX84p3Z/c7.webp);
}
label:has(input[value="c8"]) {
background-image: url(https://i.postimg.cc/P5Gh0T2N/c8.webp);
}
label:has(input[value="c9"]) {
background-image: url(https://i.postimg.cc/L8dRG2NY/c9.webp);
}
label:has(input[value="c10"]) {
background-image: url(https://i.postimg.cc/y8FBHtbY/c10.webp);
}
label:has(input[value="c11"]) {
background-image: url(https://i.postimg.cc/K8nF2wHm/c11.webp);
}
label:has(input[value="c12"]) {
background-image: url(https://i.postimg.cc/P5mhj9R5/c12.webp);
}
label:has(input[value="c13"]) {
background-image: url(https://i.postimg.cc/4xzZgqSy/c13.webp);
}
label:has(input[value="c14"]) {
background-image: url(https://i.postimg.cc/7ZgDkdW6/c14.webp);
}
label:has(input[value="c15"]) {
background-image: url(https://i.postimg.cc/x1KY2h4X/c15.webp);
}
label:has(input[value="c16"]) {
background-image: url(https://i.postimg.cc/t4hyjwM1/c16.webp);
}
label:has(input[value="c17"]) {
background-image: url(https://i.postimg.cc/K8nF2wHk/c17.webp);
}
label:has(input[value="c18"]) {
background-image: url(https://i.postimg.cc/0ypxsFBK/c18.webp);
}
label:has(input[value="c19"]) {
background-image: url(https://i.postimg.cc/fRxZNpr0/c19.webp);
}
label:has(input[value="c20"]) {
background-image: url(https://i.postimg.cc/T3rG6F4D/c20.webp);
}
label:has(input[value="c21"]) {
background-image: url(https://i.postimg.cc/L8zRpwbP/c21.webp);
}
label:has(input[value="c22"]) {
background-image: url(https://i.postimg.cc/qv80TS5n/c22.webp);
}
label:has(input[value="c23"]) {
background-image: url(https://i.postimg.cc/fRxZNprY/c23.webp);
}
label:has(input[value="c24"]) {
background-image: url(https://i.postimg.cc/Nj1YcSzm/c24.webp);
}
label:has(input[value="c25"]) {
background-image: url(https://i.postimg.cc/0ypxsFBp/c25.webp);
}
</style>
<div id="pet-shop-container">
<div class="buttons-container">
<button id="complete-tasks-btn" class="action-btn">выполнить задания</button>
<button id="buy-pet-btn" class="action-btn">купить питомца</button>
<button id="pet-clothes-btn" class="action-btn">переодеть питомца</button>
</div>
<!-- Блок для выполнения заданий -->
<div id="tasks-container">
<div class="columns-container">
<!-- Рост на 3% -->
<div class="column">
<h4>рост на 3%</h4>
<h5>можно выполнять бесконечное количество раз:</h5>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="3" data-text="поставить 100 плюсов"> поставить 100 плюсов</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="3" data-text="написать в «хочу видеть»"> написать в «хочу видеть»</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="3" data-text="поцеловаться в бутылочке"> поцеловаться в бутылочке</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<h5>можно выполнить 1 раз за стадию роста:</h5>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="поделиться 10 вдохновляющими цитатами в теме цитат"> поделиться 10 вдохновляющими цитатами в теме цитат</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="оставить 15 комплиментов другим пользователям"> оставить 15 комплиментов другим пользователям</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="написать 3 простых рецепта"> написать 3 простых рецепта</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="оставить отзыв на любимый фильм или книгу"> оставить отзыв на любимый фильм или книгу</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="описать свой идеальный день"> описать свой идеальный день</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="описать любимое место"> описать любимое место</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="рассказать о любимом виде спорта/активности"> рассказать о любимом виде спорта/активности</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="рассказать смешную историю из своей жизни"> рассказать смешную историю из своей жизни</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="описать любимый ритуал"> описать любимый ритуал</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="рассказать о своем самом большом достижении"> рассказать о своем самом большом достижении</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="нарисовать открытку с пожеланиями"> нарисовать открытку с пожеланиями</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="рассказать о навыке или хобби, которым планируете заняться в ближайшем будущем"> рассказать о навыке или хобби, которым планируете заняться в ближайшем будущем</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="написать 5 фактов о себе, 1 из которых ложный, и попросить остальных угадать, какой именно"> написать 5 фактов о себе, 1 из которых ложный, и попросить остальных угадать, какой именно</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="3" data-text="составить топ-5 мест, где чувствуете себя в безопасности"> составить топ-5 мест, где чувствуете себя в безопасности</label>
</div>
</div>
<!-- Рост на 5% -->
<div class="column">
<h4>рост на 5%</h4>
<h5>можно выполнять бесконечное количество раз:</h5>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="5" data-text="оставить 100 сообщений"> оставить 100 сообщений</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="5" data-text="получить 200 плюсов"> получить 200 плюсов</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="5" data-text="написать заявку на нужного"> написать заявку на нужного</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<h5>можно выполнить 1 раз за стадию роста:</h5>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="3 дня носить аватар и подпись с животными"> 3 дня носить аватар и подпись с животными</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="создать тему с игрой/эстафетой для других пользователей (бутылочка, мальчики против девочек и т. п.)"> создать тему с игрой/эстафетой для других пользователей (бутылочка, мальчики против девочек и т. п.)</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="организовать флешмоб (например, все ставят одинаковые аватары на день, не менее 10 игроков)"> организовать флешмоб (например, все ставят одинаковые аватары на день, не менее 10 игроков)</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="представить себя владельцем магазина и описать 5 самых популярных товаров"> представить себя владельцем магазина и описать 5 самых популярных товаров</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="рассказать о произведении, которое повлияло на становление вашей личности"> рассказать о произведении, которое повлияло на становление вашей личности</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="поделиться 10 качествами, которые цените в своих соигроках"> поделиться 10 качествами, которые цените в своих соигроках</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="опубликовать фотографию того, что делает вас счастливым"> опубликовать фотографию того, что делает вас счастливым</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="составить топ-5 вещей, за которые сильно благодарны"> составить топ-5 вещей, за которые сильно благодарны</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="в посте описать ощущения от прикосновения к магии"> в посте описать ощущения от прикосновения к магии</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="5" data-text="в посте испытать дежавю"> в посте испытать дежавю</label>
</div>
</div>
<!-- Рост на 7% -->
<div class="column">
<h4>рост на 7%</h4>
<h5>можно выполнять бесконечное количество раз:</h5>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="7" data-text="написать пост"> написать пост</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="7" data-text="оставить 50 реклам"> оставить 50 реклам</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<div class="task-item" data-task-type="countable">
<label><input type="checkbox" data-percent="7" data-text="поучаствовать в дейликах/адвенте неделю"> поучаствовать в дейликах/адвенте неделю</label>
<input type="number" class="task-count" min="1" value="1" data-default="1">
</div>
<h5>можно выполнить 1 раз за стадию роста:</h5>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="написать короткий фанфик или зарисовку с любым пейрингом, кроме своего"> написать короткий фанфик или зарисовку с любым пейрингом, кроме своего</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="написать сценарий короткого фильма"> написать сценарий короткого фильма</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="построить дом своей мечты в симс"> построить дом своей мечты в симс</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="написать послание себе в прошлое и оставить пару советов или теплых слов"> написать послание себе в прошлое и оставить пару советов или теплых слов</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="описать 5 ситуаций, когда вы вынесли урок из своей ошибки и тем самым предотвратили ее повторение в будущем"> описать 5 ситуаций, когда вы вынесли урок из своей ошибки и тем самым предотвратили ее повторение в будущем</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="оставить 10 советов, как справляться с тревогой или неуверенностью"> оставить 10 советов, как справляться с тревогой или неуверенностью</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="поделиться мечтой или целью, которую хотели бы достичь за ближайший год"> поделиться мечтой или целью, которую хотели бы достичь за ближайший год</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="в посте перефразировать известную поговорку в контексте матчасти форума"> в посте перефразировать известную поговорку в контексте матчасти форума</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="в посте загадать желание"> в посте загадать желание</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="в посте упомянуть предмет, который персонаж всегда носит с собой"> в посте упомянуть предмет, который персонаж всегда носит с собой</label>
</div>
<div class="task-item" data-task-type="single">
<label><input type="checkbox" data-percent="7" data-text="в посте услышать мелодию/песню, которая вызывает сильные эмоции"> в посте услышать мелодию/песню, которая вызывает сильные эмоции</label>
</div>
</div>
</div>
<div class="additional-options">
<label><input type="checkbox" id="growth-coupon"> купон на проценты роста <input type="number" id="growth-coupon-count" min="1" value="1" class="count-input"> %</label>
<label><input type="checkbox" id="buy-elixir"> покупаю эликсир роста <input type="number" id="elixir-count" min="1" value="1" class="count-input"></label>
</div>
</div>
<!-- Блок для покупки питомцев -->
<div id="pets-container" class="hidden">
<div class="pets-grid">
<div class="pet-item">
<label class="bkol">
<input type="checkbox" data-price="5000" data-class="bkol" data-name="болотный колпак">
<span class="pet-name">болотный колпак</span>
</label>
<div class="pet-options hidden"><p>
Болотные колпаки обитают на заболоченных равнинах, у лесных ручьев, среди коряг и грибных зарослей. Нарост на их голове напоминает шляпку мухомора и источает слабое биолюминесцентное свечение, привлекая ночных насекомых, а также выделяет споры, которые могут затуманить разум и заставить путника блуждать в чаще. Обладая должным опытом, маг может срезать этот нарост, не вредя существу и не попадая под его влияние, и использовать его в своих зельях и ритуалах.</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="gli">
<input type="checkbox" data-price="5000" data-class="gli" data-name="глиммерлинг">
<span class="pet-name">глиммерлинг</span>
</label>
<div class="pet-options hidden"><p>
Дальние и немного более крупные родственники аксолотлей. Их мягкое и скользкое тело способно менять форму и проскальзывать даже в самые узкие щели. Эти существа славятся своей игривостью — они любят резвиться и часто выбираются на берег в летние месяцы, чтобы поиграть с детьми (увы, известны случаи, когда оставленные без присмотра дети заплывали слишком далеко и погибали).</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="edi">
<input type="checkbox" data-price="5000" data-class="edi" data-name="единорог">
<span class="pet-name">единорог</span>
</label>
<div class="pet-options hidden"><p>
Единороги обитают в глубинах лесов. Не являются родственниками лошадей, окрас — розовый или белый, сияющий, как звёзды. Изо лба единорога растёт один закрученный спиралью рог, прикосновение которого может исцелять больных и раненых. Большинство единорогов защищает определённую территорию. Позволяют добрым существам входить в свой лес для охоты и сбора пищи, но держат злодеев подальше. Иногда магия направляет единорогов охранять артефакты или защищать существ. Когда силы тьмы преследуют того, кого магия хочет защитить, она может направить его в лес единорога, где злые существа найдут свою погибель. Из-за своих магических свойств стали жертвами браконьеров и продавцов на чёрном рынке. Сейчас известно лишь о трёх единорогах, живущих в заповеднике Анклава.
</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="inf">
<input type="checkbox" data-price="5000" data-class="inf" data-name="инферналь">
<span class="pet-name">инферналь</span>
</label>
<div class="pet-options hidden"><p>
Инферналь — древний дух огня, рожденный в недрах вулкана. Его пылающая шерсть никогда не гаснет, но не обжигает того, кого он признал своим хозяином. В мифах говорится, что Инферналь выбирает хозяина среди магов стихий и может даровать невосприимчивость к огню. Известны случаи, когда Инферналь преследовал магов огня и забирал их силу, если те не могли его укротить.</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="lmur">
<input type="checkbox" data-price="5000" data-class="lmur" data-name="лесной мурлок">
<span class="pet-name">лесной мурлок</span>
</label>
<div class="pet-options hidden"><p>
Этот страж древних рощ скрывается в густых лесах. Он умеет сливаться с природой, становясь практически невидимым для чужаков, но появляется рядом с теми, кто заблудился в чащобе. Его шерсть из мягкого мха не оставляет следов, а хвост в форме ветки папоротника шевелится, словно листья на ветру. Легенды гласят, что если существо доверится вам, его мурчание сможет прогонять кошмары.</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="lum">
<input type="checkbox" data-price="5000" data-class="lum" data-name="люмис">
<span class="pet-name">люмис</span>
</label>
<div class="pet-options hidden"><p>
В древних легендах он описывался как «небесный пёс, сотканный из света самых далеких звезд». Он появляется в моменты отчаяния, напоминая, что даже в самой глубокой тьме всегда есть свет. Те, кто касались звезды, сияющей у него во лбу, говорят, что их сердца наполнялись необъяснимым чувством спокойствия и умиротворения.</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="kun">
<input type="checkbox" data-price="5000" data-class="kun" data-name="магическая куница">
<span class="pet-name">магическая куница</span>
</label>
<div class="pet-options hidden"><p>
Магические куницы — озорники и обманщики, поэтому им не доверяют и их не любят. Говорят, что когда магическая куница садится на задние лапки, она гипнотизирует жертву, которая вынуждена отдать ей еду или выполнить какое-то задание. Крики куниц считаются плохим знаком, и это действительно так — предчувствие беды заставляет их издавать громкие звуки.</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="mis">
<input type="checkbox" data-price="5000" data-class="mis" data-name="мистэлис">
<span class="pet-name">мистэлис</span>
</label>
<div class="pet-options hidden"><p>
Розовые крылья Мистэлиса оставляют после себя пыльцу, помогающую растениям цвести даже в самых суровых условиях. Увидеть это существо можно только в лунные ночи, если успеть пройти по едва заметному перламутровому следу его лап до того, как свечение исчезнет. Легенды гласят, что одинокий странник, увидевший Мистэлиса, обретет верного друга, а безнадежно влюбленные — шанс на взаимность.</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="nok">
<input type="checkbox" data-price="5000" data-class="nok" data-name="ноктурикс">
<span class="pet-name">ноктурикс</span>
</label>
<div class="pet-options hidden"><p>
Говорят, что Ноктуриксы – древние духи ведьминских жертв, когда-то превращенные в кошек с кожистыми крыльями, чтобы шпионить за врагами своего хозяина. Они могут становиться невидимыми в темноте и по ночам приходить к тем, кто таит секреты. Современные Ноктуриксы сами выбирают себе хозяина (некоторые могут скитаться в одиночестве по сотне лет) и становятся верным спутником, если тот примет испытание – преодолеть иллюзии, которые легенды описывают как «ночь, полную теней и голосов».</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
<div class="pet-item">
<label class="tum">
<input type="checkbox" data-price="5000" data-class="tum" data-name="туманник (морской плюш)">
<span class="pet-name">туманник (морской плюш)</span>
</label>
<div class="pet-options hidden"><p>
Эти загадочные создания, похожие на пушистых тюленей с сиреневым мехом, появляются на берегах, укрытых утренним туманом. Туманники — самые дружелюбные обитатели морских вод. Они обожают мягкий снег и ледяные брызги, но иногда заплывают и в более теплые регионы. Прикосновение этого существа способно исцелять раны. Рыбаки также верят, что оно приносит удачу, если не пытаться его поймать.</p>
<label><input type="checkbox" class="free-pet"> первый (бесплатный) питомец</label>
<label><input type="checkbox" class="pet-coupon"> купон на бесплатного питомца</label>
</div>
</div>
</div>
</div>
<!-- Блок для переодевания питомцев -->
<div id="pet-clothes-container" class="hidden">
<div class="clothes-layout">
<div class="preview">
<div id="preview-pet" class="preview-pet"></div>
<button id="add-to-cart-btn" class="action-btn">+ в корзину</button>
</div>
<div class="catalog">
<div class="catalog-section">
<h4>выберите вид питомца</h4>
<div class="checkbox-container">
<label><input type="checkbox" name="pet-type" value="bolotni-kolpak"> болотный колпак</label>
<label><input type="checkbox" name="pet-type" value="glimmerling"> глиммерлинг</label>
<label><input type="checkbox" name="pet-type" value="edinorog"> единорог</label>
<label><input type="checkbox" name="pet-type" value="infernal"> инферналь</label>
<label><input type="checkbox" name="pet-type" value="lesnoi-murlok"> лесной мурлок</label>
<label><input type="checkbox" name="pet-type" value="lumis"> люмис</label>
<label><input type="checkbox" name="pet-type" value="kunica"> магическая куница</label>
<label><input type="checkbox" name="pet-type" value="mistelis"> мистэлис</label>
<label><input type="checkbox" name="pet-type" value="nosturiks"> ноктурикс</label>
<label><input type="checkbox" name="pet-type" value="tumannik"> туманник (морской плюш)</label>
</div>
</div>
<div class="catalog-section">
<h4>выберите наряд</h4>
<div class="class-container">
<!-- Генерируем 25 чекбоксов с классами c1-c25 -->
</div>
</div>
</div>
</div>
</div>
<textarea id="output-area" rows="10" class="output-textarea"></textarea>
<!--<div class="additional-options">
<label><input type="checkbox" id="foreign-account"> оплатить с чужого счета <input type="text" id="foreign-account-text" placeholder="@ник или ссылка" class="text-input"></label>
</div>-->
<div class="buttons-container">
<button id="insert-btn" class="insert-btn">вставить в форму ответа</button>
</div>
</div>
[/html]
