[hideprofile]
ТЕНЬ И КОСТЬ (часть 2)
5 февраля 1980 года / остров Мак / @Antonin Dolohov @Kyle Wilkes @Severus Snape
Прошли сутки с момента, как магглы превратили остров Мак в пепелище. Министерство магии оцепило периметр, но это не значит, что на остров невозможно попасть.
Вся Британия скорбит о потерях, но Тёмный Лорд видит в этой трагедии не утрату, а возможность.
Магглы, сами того не осознавая, совершили то, на что не способен ни один волшебник, — они выкосили целую популяцию гебридских чёрных драконов с лёгкостью, которой можно позавидовать.
Но туши мёртвых драконов — это не просто гниющая плоть. Это чешуя, которую не берут простые заклинания. Это кости, из которых с древности вырезают редкие амулеты. Это кровь, что может стать как ингредиентом для зелья, так и основой для ритуалов. И доступ к этому богатству почти открыт.
Оцепление Министерства существует скорее для отвода глаз: магия на острове искажена, барьеры дали трещины, а патрули авроров сосредоточены на северных берегах, где были замечены выжившие особи.
Поэтому ничто не помешало группе Пожирателей Смерти во главе со своим лидером проникнуть на территорию бывшего заповедника.
Вот только всё пошло не так буквально с самого начала.Важно! Обязательно ознакомьтесь.Сроки и условия отписи:
● для игроков круг длится 3 дня (с 22:00 Мск и до этого же часа);
● на отпись ГМа даются сутки (с 22:00 Мск и до этого же часа);
● очередность свободная;
● рекомендация к размеру поста: до 2000 символов. Но карательных мер за превышение объёма нет;
● кол-во постов на каждом кругу не ограничено, если не будет указано обратное в посте ГМа.Дополнительная информация по квесту:
● В инвентаре отображены те предметы, что точно есть у вашего персонажа не считая само собой разумеющихся предметов (пример: волшебная палочка, маска, одежда и т.д.). Таким образом найти у себя сумку с бесконечным запасом зелий не выйдет.
● Ничто не мешает вам приобретать новые предметы по ходу квеста, если это будет возможно.
● Помимо указанных в инвентаре вещей, у каждого есть ещё и защитные амулеты. Не зная, чего ожидать, вы постарались защитить себя от пагубного воздействия окружающей среды настолько, насколько это возможно в условиях неизвестности.
● Пожалуйста, указывайте отдельно в конце поста взаимодействие с тем или иным предметом инвентаря, если он тратится. Пример: «Выпиваю одно зелье лечения».Система бросков:
● На каждом кругу вы можете совершить два действия (атакующих или защитных, строгого деления на атаку + защиту нет). Бросок кубика на каждое действие: 1d8.
● Если заклинание не нацелено на атаку, защиту или исцеление (пример: Lumos), то бросать кубик не требуется.
Чтобы было еще проще: любое заклинание, которое не влияет на состояние персонажа (или противника) в отношении его здоровья или не накладывает дебаф, не требует броска кубика.
Если вы освещаете помещение при помощи Lumos — кубик не нужен. Если вы пытаетесь ослепить при помощи Lumos врага — кубик нужен.
● У атаки/защиты свои бонусы, а у исцеляющей магии свои. В текущих квестах бонус к исцеляющей магии есть только у персонажей с соответствующей профессией.
Некоторые персонажи (Лорд) не способны к исцеляющей магии для сохранения баланса внутри квеста.
Критическое состояние:
● Если здоровье персонажа достигает 0, единственное действие, доступное персонажу в течение двух ходов, — выпить зелье или использовать порт-ключ, чтобы покинуть локацию (и квест). Если персонаж этого не делает, он теряет сознание и не может повлиять на свою дальнейшую судьбу и здоровье. Вернуться в сознание нельзя.
● При 0 здоровья нельзя лечить самого себя магией, если вы не целитель.
● Если за эти два хода здоровье персонажа восстанавливают другие игроки (или он сам зельем), он может продолжить участие в квесте.[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}body {
background-color: #1a1a1a;
color: #4a3436;
line-height: 1.6;
padding: 20px;
}.table-wrapper {
max-width: 1600px;
margin: 0 auto;
border: 2px solid #4a3436;
padding: 4px;
background-color: #4a3436;
}.container-global {
max-width: 1580px;
margin: 0 auto;
background-color: #dbd4cd;
overflow: visible;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid #4a3436;
padding: 20px 24px 24px 24px;
}.players-grid {
display: flex;
flex-direction: column;
gap: 20px;
}.character-card {
background-color: #f5f0eb;
border: 2px solid #4a3436;
padding: 14px 18px;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 18px;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
min-height: 180px;
justify-content: center;
}.character-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
border-color: #caa954;
}/* Левый блок: 310×250 */
.character-left {
display: flex;
flex-direction: column;
align-items: center;
width: 310px;
min-width: 310px;
max-width: 310px;
height: 250px;
min-height: 250px;
max-height: 250px;
flex-shrink: 0;
gap: 4px;
justify-content: center;
padding: 6px 10px;
background: #ede7e0;
border: 1px solid #4a3436;
}.character-title {
font-size: 17px;
font-weight: bold;
color: #4a3436;
text-align: center;
background: #e8dfd7;
padding: 2px 14px;
border: 1px solid #caa954;
width: 100%;
flex-shrink: 0;
}.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: #dbd4cd;
border: 1px solid #4a3436;
flex-shrink: 0;
padding: 2px;
}.character-image {
width: 94px;
height: 94px;
object-fit: cover;
border: 1px solid #caa954;
}.hp-section {
width: 100%;
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}.hp-bar-bg {
width: 100%;
height: 12px;
background-color: #4a3436;
overflow: hidden;
border: 1px solid #caa954;
}.hp-bar-fill {
height: 100%;
width: 100%;
background: #c0392b;
transition: width 0.3s;
}.hp-label {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 700;
color: #4a3436;
padding: 0 2px;
}.bonus-stats {
display: flex;
flex-direction: column;
gap: 1px;
width: 100%;
background: #e3d8cf;
padding: 4px 10px;
border: 1px solid #4a3436;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}.bonus-row {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
min-height: 22px;
}.bonus-row span:first-child {
color: #2c2420;
flex-shrink: 0;
white-space: nowrap;
}.bonus-row span:last-child {
color: #2c2420;
text-align: right;
background: transparent;
padding: 0;
border: none;
font-weight: 600;
word-break: break-word;
overflow-wrap: break-word;
max-width: 140px;
}/* Инвентарь: 360×250 */
.character-inventory {
width: 360px;
min-width: 360px;
max-width: 360px;
height: 250px;
min-height: 250px;
max-height: 250px;
flex-shrink: 0;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
background: #ede7e0;
border: 1px solid #4a3436;
}.character-inventory::-webkit-scrollbar {
width: 6px;
}
.character-inventory::-webkit-scrollbar-track {
background: #dbd4cd;
}
.character-inventory::-webkit-scrollbar-thumb {
background: #caa954;
}.items-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-content: start;
width: 100%;
}.item-slot {
position: relative;
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
max-width: 60px;
max-height: 60px;
cursor: pointer;
background-color: #dbd4cd;
border: 2px solid #4a3436;
transition: border-color 0.15s, transform 0.1s;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: none;
}.item-slot:hover {
border-color: #caa954;
transform: scale(1.02);
z-index: 2;
box-shadow: none;
}.item-slot.active {
border-color: #caa954;
outline: 2px solid #caa954;
outline-offset: -1px;
}.item-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}/* Блок описания: 410×250 */
.character-description {
width: 410px;
min-width: 410px;
max-width: 410px;
height: 250px;
min-height: 250px;
max-height: 250px;
flex-shrink: 0;
background-color: #e3d8cf;
padding: 12px 16px;
border: 1px solid #4a3436;
font-size: 13px;
line-height: 1.5;
color: #2c2420;
font-weight: 500;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #caa954 #e3d8cf;
display: flex;
align-items: flex-start;
}.character-description.empty {
color: #8a7a6e;
font-style: italic;
align-items: center;
justify-content: center;
}.character-description::-webkit-scrollbar {
width: 6px;
}
.character-description::-webkit-scrollbar-track {
background: #e3d8cf;
}
.character-description::-webkit-scrollbar-thumb {
background: #caa954;
}/* Адаптив */
@media (max-width: 1300px) {
.character-left {
width: 250px;
min-width: 250px;
max-width: 250px;
}
.character-inventory {
width: 280px;
min-width: 280px;
max-width: 280px;
}
.character-description {
width: 320px;
min-width: 320px;
max-width: 320px;
font-size: 12px;
}
.image-container {
width: 90px;
height: 90px;
}
.character-image {
width: 84px;
height: 84px;
}
}@media (max-width: 1000px) {
.character-left {
width: 220px;
min-width: 220px;
max-width: 220px;
}
.character-inventory {
width: 240px;
min-width: 240px;
max-width: 240px;
}
.character-description {
width: 280px;
min-width: 280px;
max-width: 280px;
font-size: 12px;
}
.items-grid {
gap: 6px;
}
.item-slot {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
max-width: 50px;
max-height: 50px;
}
.image-container {
width: 80px;
height: 80px;
}
.character-image {
width: 74px;
height: 74px;
}
}@media (max-width: 850px) {
.character-card {
flex-wrap: wrap;
gap: 14px;
justify-content: center;
padding: 14px;
}
.character-left {
width: 100%;
min-width: unset;
max-width: 100%;
height: auto;
min-height: 200px;
max-height: 200px;
}
.character-inventory {
width: 100%;
min-width: unset;
max-width: 100%;
height: auto;
min-height: 200px;
max-height: 200px;
}
.character-description {
width: 100%;
min-width: unset;
max-width: 100%;
height: auto;
min-height: 150px;
max-height: 150px;
}
.items-grid {
gap: 8px;
}
.item-slot {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
max-width: 60px;
max-height: 60px;
}
.image-container {
width: 80px;
height: 80px;
}
.character-image {
width: 74px;
height: 74px;
}
}@media (max-width: 550px) {
.character-left {
min-height: 180px;
max-height: 180px;
padding: 4px 6px;
}
.character-inventory {
min-height: 180px;
max-height: 180px;
padding: 6px;
}
.character-description {
min-height: 120px;
max-height: 120px;
font-size: 12px;
padding: 8px 12px;
}
.image-container {
width: 70px;
height: 70px;
}
.character-image {
width: 64px;
height: 64px;
}
.character-title {
font-size: 15px;
}
.items-grid {
gap: 4px;
}
.item-slot {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
max-width: 50px;
max-height: 50px;
}
.bonus-stats {
font-size: 12px;
padding: 3px 8px;
}
.bonus-row span:last-child {
max-width: 100px;
}
}
</style>
</head>
<body>
<div class="table-wrapper">
<div class="container-global">
<div class="players-grid">
<!-- АНТОНИН -->
<div class="character-card" data-max-hp="20" data-current-hp="16">
<div class="character-left">
<div class="character-title">Антонин Долохов</div>
<div class="image-container">
<img src="https://upforme.ru/uploads/0008/e1/93/4/312769.png" alt="Антонин" class="character-image">
</div>
<div class="hp-section">
<div class="hp-bar-bg">
<div class="hp-bar-fill" style="width: 65%;"></div>
</div>
<div class="hp-label">
<span>❤ Здоровье</span>
<span class="hp-values-display">13 / 20</span>
</div>
</div>
<div class="bonus-stats">
<div class="bonus-row"><span>Атака / Защита</span><span>+5</span></div>
<div class="bonus-row"><span>Целительство</span><span>0</span></div>
</div>
</div><div class="character-inventory">
<div class="items-grid">
<div class="item-slot" data-description="Порт-ключ ведущий на базу Пожирателей Смерти.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/731193.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Зачарованная сумка, в которой хранятся реагенты для ритуала по вытягиванию магической и жизненной силы: костяная пыль, кровь для рун и т. д. Второй необходимый объект для проведения ритуала — кинжал — в руках у Лорда.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/608383.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Кинжал гоблинской работы, способный пробить чешую дракона.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/111250.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Поясная сумка с наложенными на неё чарами незримого расширения. В неё можно поместить добытый ливер и другие трофеи.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/100504.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Перчатки из драконьей кожи.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/652917.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Рубиновый отвар. При использовании восстанавливает 5 единиц здоровья.">
<img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Рубиновый отвар. При использовании восстанавливает 5 единиц здоровья.">
<img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет">
</div>
</div>
</div>
<div class="character-description empty">Нажмите на предмет для описания</div>
</div><!-- КАЙЛ -->
<div class="character-card" data-max-hp="20" data-current-hp="20">
<div class="character-left">
<div class="character-title">Кайл Уилкис</div>
<div class="image-container">
<img src="https://upforme.ru/uploads/0008/e1/93/4/650328.png" alt="Кайл" class="character-image">
</div>
<div class="hp-section">
<div class="hp-bar-bg">
<div class="hp-bar-fill" style="width: 95%;"></div>
</div>
<div class="hp-label">
<span>❤ Здоровье</span>
<span class="hp-values-display">19 / 20</span>
</div>
</div>
<div class="bonus-stats">
<div class="bonus-row"><span>Атака / Защита</span><span>+2</span></div>
<div class="bonus-row"><span>Целительство</span><span>0</span></div>
</div>
</div><div class="character-inventory">
<div class="items-grid">
<div class="item-slot" data-description="Порт-ключ ведущий на базу Пожирателей Смерти.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/731193.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Кинжал гоблинской работы, способный пробить чешую дракона.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/111250.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Поясная сумка с наложенными на неё чарами незримого расширения. В неё можно поместить добытый ливер и другие трофеи.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/100504.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Перчатки из драконьей кожи.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/652917.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Рубиновый отвар. При использовании восстанавливает 5 единиц здоровья.">
<img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Рубиновый отвар. При использовании восстанавливает 5 единиц здоровья.">
<img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Рубиновый отвар. При использовании восстанавливает 5 единиц здоровья.">
<img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет">
</div>
</div>
</div>
<div class="character-description empty">Нажмите на предмет для описания</div>
</div><!-- СЕВЕРУС -->
<div class="character-card" data-max-hp="20" data-current-hp="12">
<div class="character-left">
<div class="character-title">Северус Снейп</div>
<div class="image-container">
<img src="https://upforme.ru/uploads/0008/e1/93/4/558944.png" alt="Северус" class="character-image">
</div>
<div class="hp-section">
<div class="hp-bar-bg">
<div class="hp-bar-fill" style="width: 100%;"></div>
</div>
<div class="hp-label">
<span>❤ Здоровье</span>
<span class="hp-values-display">20 / 20</span>
</div>
</div>
<div class="bonus-stats">
<div class="bonus-row"><span>Атака / Защита</span><span>+2</span></div>
<div class="bonus-row"><span>Целительство</span><span>0</span></div>
</div>
</div><div class="character-inventory">
<div class="items-grid">
<div class="item-slot" data-description="Порт-ключ ведущий на базу Пожирателей Смерти.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/731193.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Кинжал гоблинской работы, способный пробить чешую дракона.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/111250.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Поясная сумка с наложенными на неё чарами незримого расширения. В неё можно поместить добытый ливер и другие трофеи.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/100504.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Перчатки из драконьей кожи.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/652917.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Противоядие от большинства ядов. В бутылке до 3 глотков (использований).">
<img src="https://upforme.ru/uploads/0008/e1/93/4/247094.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Набор герметичных пробирок (10 шт.) для взятия крови (или иных проб).">
<img src="https://upforme.ru/uploads/0008/e1/93/4/748365.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Рубиновый отвар. При использовании восстанавливает 5 единиц здоровья.">
<img src="https://upforme.ru/uploads/0008/e1/93/3/631582.png" class="item-image" alt="предмет">
</div>
</div>
</div>
<div class="character-description empty">Нажмите на предмет для описания</div>
</div>
</div>
</div>
</div><script>
(function() {
document.querySelectorAll('.character-card').forEach(card => {
const descriptionBlock = card.querySelector('.character-description');
const slots = card.querySelectorAll('.item-slot');slots.forEach(slot => {
slot.addEventListener('click', function(e) {
e.stopPropagation();const description = this.getAttribute('data-description') || 'Описание отсутствует';
if (descriptionBlock) {
descriptionBlock.textContent = description;
descriptionBlock.classList.remove('empty');
}slots.forEach(s => s.classList.remove('active'));
this.classList.add('active');console.log('Нажат предмет');
console.log('Описание:', description.substring(0, 50) + (description.length > 50 ? '...' : ''));
});
});
});function syncPlayersHp() {
const cards = document.querySelectorAll('.character-card');
cards.forEach(card => {
const maxHp = parseInt(card.getAttribute('data-max-hp')) || 20;
let currHp = parseInt(card.getAttribute('data-current-hp'));
if (isNaN(currHp)) currHp = maxHp;
currHp = Math.min(currHp, maxHp);const valuesSpan = card.querySelector('.hp-values-display');
if (valuesSpan) valuesSpan.textContent = currHp + ' / ' + maxHp;const fill = card.querySelector('.hp-bar-fill');
if (fill) {
const percent = (currHp / maxHp) * 100;
fill.style.width = Math.max(0, percent) + '%';
}
});
}window.addEventListener('DOMContentLoaded', () => {
syncPlayersHp();
console.log('Страница загружена. Нажмите на любой предмет для отображения описания.');
});
})();
</script>
</body>
</html>
[/html]

















![de other side [crossover]](https://i.imgur.com/BQboz9c.png)
























