[hideprofile]
ВСЁ, ЧТО ОСТАЛОСЬ (часть 1)
утро 6 февраля 1980 года / остров Мак, к востоку от порта Ман / @Janus Thickey (Ellger Egerton) @Lily Evans @Marlene McKinnonПрошло полтора дня с тех пор, как остров Мак превратился в выжженную пустошь, и Министерство магии наконец готово системно действовать.
Всё это время не было возможности выйти на связь с портом Ман, где жили работающие в заповеднике драконы и приезжая делегация зарубежных волшебников.
Разведка подтвердила, что защитный купол вокруг поселения цел. Но это едва ли не единственное, что известно наверняка.
Аппарировать под купол невозможно. Каминная сеть мертва. С моря к поселению не добраться — стихия блокирует подходы.
Ваша задача — проникнуть в поселение, оценить состояние защитных чар, измерить магический фон и собрать образцы почвы, воды, воздуха и всего, что осталось от порта. Отдел Тайн должен понять, как именно катастрофа повлияла на магию, что с ней стало и можно ли это исправить.
Приоритет — данные, а спасением людей, если кто-то выжил, займется другая группа. Если встретите выживших — действуйте по обстановке, но помните, ради чего вас отправили.Важно! Обязательно ознакомьтесь.Сроки и условия отписи:
● для игроков круг длится 3 дня (с 22:00 Мск и до этого же часа);
● на отпись ГМа даются сутки (с 22:00 Мск и до этого же часа);
● очередность свободная;
● рекомендация к размеру поста: до 2000 символов. Но карательных мер за превышение объёма нет;
● кол-во постов на каждом кругу не ограничено, если не будет указано обратное в посте ГМа.Дополнительная информация по квесту:
Граниан Марлин везет её и Лили. Эллджер летит на метле.
Вас снабдили куртками из плотной драконьей кожи, зачарованными от огня и проклятий.
Помимо указанных в инвентаре вещей у каждого есть ещё и защитные амулеты: Министерство не знает, чего ожидать, поэтому постаралось защитить своих сотрудников от пагубного воздействия окружающей среды.Система бросков:
● На каждом кругу вы можете совершить два действия (атакующих или защитных (для целителей есть вариант из исцеляющих заклинаний), строгого деления на атаку + защиту нет). Бросок кубика на каждое действие: 1d8.
● Если заклинание не нацелено на атаку или защиту (пример: 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;
}.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;
}.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;
}.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/600698.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/3/633872.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Порт-ключ ведущий в атриум Министерства Магии.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/436569.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="Бутыль с чистой водой (~1 литр).">
<img src="https://upforme.ru/uploads/0008/e1/93/4/872620.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Бутыль с чистой водой (~1 литр).">
<img src="https://upforme.ru/uploads/0008/e1/93/4/872620.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="20">
<div class="character-left">
<div class="character-title">Лили Эванс</div>
<div class="image-container">
<img src="https://upforme.ru/uploads/0008/e1/93/4/349152.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>+1</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/436569.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="Бутыль с чистой водой (~1 литр).">
<img src="https://upforme.ru/uploads/0008/e1/93/4/872620.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="ЛМИ (Локатор магических искажений). Вещица напоминающая собой компас, но внутри несколько стрелок и обозначения отличные от сторон света.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/199110.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Набор герметичных пробирок (10 шт.) для взятия проб.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/77445.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 class="item-slot" data-description="Проба земли взятая рядом с портом Ман.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/563150.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/633728.png" alt="Эллджер" class="character-image">
</div>
<div class="hp-section">
<div class="hp-bar-bg">
<div class="hp-bar-fill" style="width: 80%;"></div>
</div>
<div class="hp-label">
<span>❤ Здоровье</span>
<span class="hp-values-display">16 / 20</span>
</div>
</div>
<div class="bonus-stats">
<div class="bonus-row"><span>Атака / Защита</span><span>+4</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/3/236810.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="Порт-ключ ведущий в атриум Министерства Магии.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/436569.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="Бутыль с чистой водой (~1 литр).">
<img src="https://upforme.ru/uploads/0008/e1/93/4/872620.png" class="item-image" alt="предмет">
</div>
<div class="item-slot" data-description="ЛМИ (Локатор магических искажений). Вещица напоминающая собой компас, но внутри несколько стрелок и обозначения отличные от сторон света.">
<img src="https://upforme.ru/uploads/0008/e1/93/4/199110.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>
</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]
Отредактировано Game Master (16.09.2026 14:29:41)
