Сюжет

Страница: 1

Тема закрыта

Сообщений 1 страница 1 из 1

Поделиться12025-06-23 10:10:09

Автор: Unspeakables
Администратор
Невыразимец, 100

To the well-organized mind,
death is but the next great adventure
Сообщений: 980
Уважение: +1058
посты: 37 529,1/1 03.26,1/1
банк: all

Story
Ты влияешь на мир
ИГРОВЫЕ СОБЫТИЯ 01.12.1979 - 29.02.1980
Война - дело молодых, лекарство против морщин

Осень 1979 года, Магическая Война в самом разгаре, прямо из своих домов пропадают целые семьи волшебников, черный рынок защитных артефактов никогда не пользовался такой популярностью. Министерство, тем временем, старается сохранить видимость контроля - газеты пестрят заголовками о квиддичных соревнованиях и о новой моде на изумрудные мантии. И только самые смелые из тех, кто не готов мириться с несправедливостью, объединяются, чтобы дать отпор злу.

Но зло ли это? Или у них есть причина бороться за старый мир. Что за тайну хранят чистокровные семьи?

Маггловская угроза

4 мая 1979 года на пост премьер-министра заступила “Железная леди” и, как водится, на Даунинг-стрит, 10 ожил портрет мужчины в старомодном парике, который поведал новой главе о существовании магического мира и что теперь, внутри одной страны, им придётся договариваться. Миссис Тэтчер настороженно отнеслась к этой новости и теперь внимательно присматривается к событиям в стране. Не думайте, что эта женщина пустит всё на самотёк.

Древняя магия

ДОМП и Отдел Тайн обеспокоены участившимися случаями разорения древних сооружений, неизвестные явно что-то ищут на остовах умерших миров. Но что и к чему это приведёт?

Каждый персонаж нашей истории будет влиять на мир и его будущее - каждый убитый магл, каждый заключённый договор, каждая победа на министерских выборах, каждое касание древней магии будут иметь последствия. На этой карте вы будете видеть расстановку сил.

На карте и союзниках:
Министерство магии
Пожиратели Смерти
Орден Феникса

[html]<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Сюжетная хронология</title>

<style>

/* --- ТВОИ СТИЛИ остаются --- */

:root{
--bg:#ffffff;
--text:#141416;
--muted:#6b6f76;
--accent:#6d1bb3;
--accent2:#8b35d6;
--chip:#f2f2f6;
--chipBorder:#e6e6ee;
--cardShadow:0 16px 40px rgba(10,10,20,.08);
--chipShadow:0 10px 26px rgba(10,10,20,.06);
--radius:18px;
--radiusSm:14px;
--maxw:1200px;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui;}
.wrap{max-width:var(--maxw);margin:34px auto;padding:0 16px 40px;}

/* ======================= */
/* НОВЫЕ ВКЛАДКИ */
/* ======================= */

.tabs{
display:flex;
gap:10px;
margin-bottom:22px;
flex-wrap:wrap;
}

.tab{
padding:10px 18px;
border-radius:999px;
border:1px solid #e6e6ee;
background:#f7f7fb;
cursor:pointer;
font-weight:600;
transition:.2s;
}

.tab:hover{
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(0,0,0,.07);
}

.tab.active{
color:#fff;
border:none;
background:radial-gradient(120% 120% at 28% 22%,var(--accent2),var(--accent));
box-shadow:0 12px 26px rgba(109,27,179,.25);
}

.timelineBlock{ display:none; }
.timelineBlock.active{ display:block; }

/* ===== ТВОЯ ХРОНОЛОГИЯ ===== */

.timeline{position:relative;border-radius:var(--radius);padding:6px 0;}

.event{
position:relative;
display:grid;
grid-template-columns:64px 150px 1fr 260px;
gap:14px;
align-items:center;
padding:18px 10px;
border-radius:16px;
transition:background .18s ease;
}
.event:hover{background:rgba(0,0,0,.015);}

.node{display:flex;justify-content:center;align-items:center;}

.toggle{
width:40px;height:40px;border:none;border-radius:999px;cursor:pointer;color:#fff;
background:radial-gradient(120% 120% at 28% 22%,var(--accent2),var(--accent));
box-shadow:0 12px 26px rgba(109,27,179,.22);
display:grid;place-items:center;
}

.icon{width:16px;height:16px;position:relative;}
.icon::before,.icon::after{
content:"";position:absolute;left:50%;top:50%;
width:16px;height:2px;background:#fff;border-radius:99px;
transform:translate(-50%,-50%);
}
.icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.event[data-open="true"] .icon::after{opacity:0;}

.date{font-weight:750;font-size:14px;}
.main{display:flex;flex-direction:column;gap:10px;}

.details{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.detailsBox{
border:1px solid #eee;background:#fff;border-radius:14px;
box-shadow:var(--cardShadow);padding:14px;
}

.right{display:flex;justify-content:flex-end;}

.badge{
position:relative;display:flex;align-items:center;gap:10px;
padding:10px 14px 10px 44px;border-radius:500px;
background:var(--chip);border:1px solid var(--chipBorder);
box-shadow:var(--chipShadow);
}

.badge .sticker{
position:absolute;left:-8px;top:50%;transform:translateY(-50%);
width:44px;height:44px;border-radius:14px;border:1px solid #dedee8;
background:#636380;overflow:hidden;
}
.badge .sticker img{width:100%;height:100%;object-fit:cover;}

.pct{font-weight:750;}

.divider{height:1px;margin:0 6px;background:#eee;}

/* мобильная */

@media(max-width:860px){

.event{
grid-template-columns:56px 1fr;
grid-template-areas:
"node date"
"node text"
"node badge"
"node details";
gap:10px;
padding:16px 6px;
}

.node{grid-area:node;}
.date{grid-area:date;font-size:12px;}
.main{grid-area:text;}
.right{grid-area:badge;justify-content:flex-start;}

}

</style>
</head>

<div class="tabs">
<div class="tab active" data-tab="map">Влияющие на карту</div>
<div class="tab" data-tab="story">Общие сюжеты</div>
</div>

<article class="event" data-open="false">

<p>Поселение <a href=https://safespace.rusff.me/viewtopic.php?id=231>Тинворт</a> в южном Корнуолле подверглось нападению троллей в начале августа 1979 года.</p>

<div class="details">
<div class="detailsBox">
<p>Заражение удалось локализовать усилиями колдомедиков, и сейчас все уже идут на поправку (переболевшие сохраняют свой зеленоватый оттенок кожи, конечно), так что здоровые ведьмы и волшебники могут свободно гулять, оставаясь в пределах деревни, а к ним самим уже пускают посетителей. Всё спокойно.</p>
<p><b>Последствия:</b> Усилиями героев удалось избежать серьезных последствий для маггловской части Тинворта.</p>
<p><b>Участники:</b> Анна Проудфут, Янус Тики, Кассия Гринграсс, Северус Снейп, Гелберт Сплин, Амелия Боунс, Марлин МакКиннон, Роуз Харланд, Присцилла Паркинсон.</p>
</div>
</div>

</div>

<div class="right">
<div class="badge">
<div class="sticker">
<img src="https://upforme.ru/uploads/001c/7d/92/7/t924409.png">
</div>
<span class="pct">+2% маггловской угрозы</span>
</div>
</div>
</article>
</div>

<div class="timeline">
<article class="event" data-open="false">
<div class="node">
<button class="toggle"><span class="icon"></span></button>
</div>
<div class="date">02.09.1979</div>
<div class="main">
<p> Семейство <a href=https://safespace.rusff.me/viewtopic.php?id=218>Ансворт</a>, известное своими многочисленными теплицами волшебных растений, не спешит занимать чью-либо сторону. И похоже не так безобидно, как может показаться на первый взгляд.</p>
<div class="details">
<div class="detailsBox">
<p>В ходе расследования было выявлено, что глава семьи и его супруга погибли от неосторожных действий сына, сам наследник лишился воли, а сестру забрали на попечение семейство Лестрейндж. </p>
<p><b>Последствия:</b> Графство Норфолк перешло под влияние Пожирателей Смерти, разрушен один из дольменов. Джулиан Ансворт стал марионеткой Барти Крауча младшего. Пожиратели получили преимущество в договоре с морским народом.</p>
<p><b>Участники:</b> Кассия Гринграсс, Беллатрикс Лестрейндж, Рудольфус Лестрейндж, Рабастан Лестрейндж, Барти Крауч младший, Гидеон Пруэтт, Кастор МакМёрфи.</p>
</div>
</div>
</div>
<div class="right">
<div class="badge">
<div class="sticker">
<img src="https://upforme.ru/uploads/001c/7d/92/7/t32044.png">
</div>
<span class="pct">ПС получают преимущество</span>
</div>
</div>
</article>
</div>

<div class="timeline">
<article class="event" data-open="false">
<div class="node">
<button class="toggle"><span class="icon"></span></button>
</div>
<div class="date">30.09.1979</div>
<div class="main">
<p> Посреди <a href=https://safespace.rusff.me/viewtopic.php?id=249>маггловской свадьбы</a> на гостей и молодых напали оборотни.</p>
<div class="details">
<div class="detailsBox">
<p>Свадьба Петунии Эванс и Вернона Дурсля. Жених и невеста стоят у алтаря, слушая: «Тот, кто против этого брака, должен сказать об этом сейчас или молчать вечно». Взгляды гостей, что расположились в церкви, направлены на жениха и невесту. Никто даже не подозревает, чем сегодня обернется такая красивая, такая совершенно нормальная свадьба. </p>
<p><b>Последствия:</b> Маггловская угроза + 10%</p>
<p><b>Участники:</b> Петуния Эванс, Вернон Дурсль, Лили Поттер, Джеймс Поттер, Аластор Муди, Арсениус Джиггер, Карадок Дирборн, Фенрир Сивый, Энтони Мальсибер, Кербус Ниграс, Гаррик Вилефанг, Тесса Макнейр.</p>
</div>
</div>
</div>
<div class="right">
<div class="badge">
<div class="sticker">
<img src="https://upforme.ru/uploads/001c/7d/92/7/t924409.png">
</div>
<span class="pct">+10% маггловской угрозы</span>
</div>
</div>
</article>
</div>

</section>

<div class="date">02.11.1969</div>
<div class="main">
<p> Арсениус и Дамокл <a href=https://safespace.rusff.me/viewtopic.php?id=491&>знакомятся</a> при странных обстоятельствах, но это не мешает им работать вместе.
<div class="details">
<div class="detailsBox">

<p><b>Последствия:</b> Изобретено зелье ментальной защиты.</p>
<p><b>Участники:</b> Дамокл Белби, Арсениус Джиггер.</p>
</div>
</div>
</div>
<div class="right">
<div class="badge">
<div class="sticker">
<img src="https://upforme.ru/uploads/001c/7d/92/7/t337827.png">
</div>
<span class="pct">Изобретено зелье</span>
</div>
</div>
</article>
</div>

</div>

</section>
<script>

/* АККОРДЕОН */

document.querySelectorAll(".event").forEach(evt=>{
const btn=evt.querySelector(".toggle");
const det=evt.querySelector(".details");

btn.onclick=()=>{
const open=evt.dataset.open==="true";
evt.dataset.open=!open;
det.style.maxHeight=open?"0px":det.scrollHeight+"px";
};
});

/* ПЕРЕКЛЮЧЕНИЕ ВКЛАДОК */

const tabs=document.querySelectorAll(".tab");
const blocks=document.querySelectorAll(".timelineBlock");

tabs.forEach(tab=>{
tab.onclick=()=>{

tabs.forEach(t=>t.classList.remove("active"));
tab.classList.add("active");

blocks.forEach(b=>b.classList.remove("active"));
document.getElementById(tab.dataset.tab).classList.add("active");

};
});

</script>