Артефакты

[hideprofile][html]
<div class="rp-wrapper">
<div class="rp-content">

<div class="top-block">
<div class="top-title" style='padding-top:10px;'>АРТЕФАКТЫ</div>
</div>

<div class="circle-container">
<div class="circle-wrapper">
<div class="circle" data-id="desc1">
<div class="circle-bg" style="background-image: url('https://upforme.ru/uploads/001c/00/4d/5/t330463.jpg');"></div>
</div>
<div class="circle-title">хоси<br>но тама</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc2">
<div class="circle-bg" style="background-image: url('https://upforme.ru/uploads/001c/00/4d/5/t799731.jpg');"></div>
</div>
<div class="circle-title">глаз<br>дьявола</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc3">
<div class="circle-bg" style="background-image: url('https://upforme.ru/uploads/001c/00/4d/5/t321111.jpg');"></div>
</div>
<div class="circle-title">бестиарий</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc4">
<div class="circle-bg" style="background-image: url('https://avatars.mds.yandex.net/i?id=2149ec50faa76845e179f34e8fce9ef8_l-5459902-images-thumbs&n=13');"></div>
</div>
<div class="circle-title">тан то</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc5">
<div class="circle-bg" style="background-image: url('https://i.pinimg.com/736x/84/8b/70/848b7045dcbb1e5b0c6df402e5166817.jpg');"></div>
</div>
<div class="circle-title">speculum</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc6">
<div class="circle-bg" style="background-image: url('https://i.pinimg.com/736x/b5/d3/49/b5d349873e4264e2c5a41f19bb2f5978.jpg');"></div>
</div>
<div class="circle-title">гримуары</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc7">
<div class="circle-bg" style="background-image: url('https://avatars.mds.yandex.net/i?id=daceee2415a6908144dac24ad136275f531800c9-10287336-images-thumbs&n=13');"></div>
</div>
<div class="circle-title">мешочки с<br>зельями</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc8">
<div class="circle-bg" style="background-image: url('https://i.pinimg.com/736x/95/97/25/959725173c639b1a64eec7c6aa22273e.jpg');"></div>
</div>
<div class="circle-title">меланж</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc9">
<div class="circle-bg" style="background-image: url('https://cdn1.ozone.ru/s3/multimedia-v/c600/6500054935.jpg');"></div>
</div>
<div class="circle-title">eclipse</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc10">
<div class="circle-bg" style="background-image: url('https://i.pinimg.com/736x/fc/00/60/fc00600934b72895a1cd6c74914e663a.jpg');"></div>
</div>
<div class="circle-title">книга<br>тота</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc11">
<div class="circle-bg" style="background-image: url('https://upforme.ru/uploads/001c/00/4d/5/t235720.jpg');"></div>
</div>
<div class="circle-title">кукла-вуду</div>
</div>
<div class="circle-wrapper">
<div class="circle" data-id="desc12">
<div class="circle-bg" style="background-image: url('https://avatars.mds.yandex.net/i?id=756604b7adeaa0eaef2fe582ae943132_l-16499992-images-thumbs&n=13');"></div>
</div>
<div class="circle-title">магический<br>компас</div>
</div>
</div>
<div class='nform' style='text-align:center; margin-bottom:10px;'><strong style='text-align: center; color: maroon; font-size:16px;'>*Создание артефакта, не вошедшего в список,<br>обсуждается с АМС.</strong></div>
<div class="description-line"></div>
<div class="description-container">
<div id="desc1" class="description-box">
<p>Хранит часть воспоминаний и сил кицунэ, а также их жизненную силу. Мощный объект, который можно использовать против кицунэ, заставив лису служить себе. Сам артефакт при этом никак не опасен для кицунэ, но его уничтожение стоит существу жизни.</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Артефакт Лори — у Тодда Моргана.</strong></div>
</div>
<div id="desc2" class="description-box">
<p>Амулет, меняющий цвет в присутствии сверхъестественного существа:</p>
<ul>
<li>церберы — <span style="display:inline-block; padding:2px 6px; border-radius:999px; background-color:#ffcc00;">жёлтый</span></li>
<li style='margin-top:2px;'>оборотни — <span style="display:inline-block; padding:2px 6px; border-radius:999px; background-color:#ff4444;">красный</span></li>
<li style='margin-top:2px;'>вампиры — <span style="display:inline-block; padding:2px 6px; border-radius:999px; background-color:#9b59b6; margin:2px;">фиолетовый</span></li>
<li style='margin-top:2px;'>маги — <span style="display:inline-block; padding:2px 6px; border-radius:999px; background-color:#27ae60; margin:2px;">зелёный</span></li>
<li style='margin-top:2px;'>кицунэ — <span style="display:inline-block; padding:2px 6px; border-radius:999px; background-color:#e67e22; margin:2px;">оранжевый</span></li>
<li style='margin-top:2px;'>райдзю — <span style="display:inline-block; padding:2px 6px; border-radius:999px; background-color:#3498db; margin:2px;">синий</span></li>
<li style='margin-top:2px;'>тень, вендиго, ногицунэ — <span style="display:inline-block; padding:2px 6px; border-radius:999px; background-color:#000000; color:#ffffff; margin:2px;">чёрный</span></li>
</ul>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится <br>у "Инферно"</strong></div>
</div>
<div id="desc3" class="description-box">
<p>Книга, созданная в 15 веке Римусом Бронте и содержащая описание всех возможных сверхъестественных существ, известных на данный момент. В бестиарии прописаны сильные и слабые стороны, а также способы.<p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится<br>у Эша Бронте</strong></div>
</div>
<div id="desc4" class="description-box">
<p>Нож в стиле самурайского меча. Единственное оружие, способное убить ногицунэ, а не просто выгнать из тела одержимого.</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Местонахождение<br>неизвестно</strong></div>
</div>
<div id="desc5" class="description-box">
<p>Личный артефакт, способный отразить ментальное воздействие телепатов и вампиров. Принцип работы прост — направленная на владельца артефакта магия рикошетом бьет по самому магу в пол силы. Если же маг просто решит покопаться в сознании, то «увидит» лишь обрывки собственного. Артефакт ограничен тремя мелкими атаками, либо одной мощной, после чего ему требуется подзарядка. Следующее использование возможно не раньше, чем через сутки.</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится<br>у Elisha Sheehan</strong></div>
</div>
<div id="desc6" class="description-box">
<p>Личная книга, в которую маг записывает свои магические действия и их результат, а также рабочие ритуалы. Там могут содержаться:</p>
<ul>
<li>— информация о маге</li>
<li>— травничество</li>
<li>— заклинания</li>
<li>— рецепты зелий</li>
<li>— полезные практические страницы и пр.</li>
</ul>
</div>
<div id="desc7" class="description-box">
<p>Зелья для замедления старения, (принимаются два раза в полгода в течение некоторого времени) для повышенной силы, ловкости (эффект зелий улучшений действуют до 5-7 часов в зависимости от принятой дозировки) для восстановления от незначительных ран (восстанавливает сразу и эффект спадает за 1-1.5 часа)</p>
</div>
<div id="desc8" class="description-box">
<p>Наркотическая смесь, больше похожая на пряность, позволяет увеличивать жизненную силу (эффект временный), расширяет сознание, открывая экстрасенсорные способности. Использование ограничено, как ограничен и запас смеси, поэтому использовать её нужно с умом и в крайней необходимости.</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится<br>у Tori Fouster</strong></div>
</div>
<div id="desc9" class="description-box">
<p>Излучает энергию неизвестного типа, значительно ускоряющую регенерацию тканей живых существ. Всего один раз за своё существование способен поставить умирающего на ноги, и если такая сила пригодится, артефакт расколется на несколько частей. При обычном использовании необходима "подзарядка" в несколько часов</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится<br>у Tori Fouster</strong></div>
</div>
<div id="desc10" class="description-box">
<p>В умелых руках книга дарует способность подчинять живых своей воли</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится<br>у Dean Hanson</strong></div>
</div>
<div id="desc11" class="description-box">
<p>Небольшая грубая кукла с зашитым ртом; из её головы торчит ржавая иголка. Это — сложный в изготовлении (а потому крайне редкий) и исключительно мощный артефакт, позволяющий тому, кто его использует, установить магическую связь с другим человеком. Все повреждения, полученные одной стороной, переносятся на другую. Это одновременно преимущество и серьёзный риск: эффект действует в обе стороны.</p>
<p>Поговаривают, что с помощью этого предмета можно даже избежать обращения в оборотня или вампира. Действие артефакта — одноразовое: после срабатывания вольт рассыпается в прах. Для активации необходимы кровь заклинателя и кровь его жертвы, специальное заклинание, а также — обязательное условие — иголка должна быть вонзена в грудь куклы.</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится<br>у Jack Ross</strong></div>
</div>
<div id="desc12" class="description-box">
<p>В нём содержится дополнительная магическая сила, но её хватает только на то, чтобы поддерживать барьер в подвале Маршалла. Если магический компас закрыть, он теряет свои свойства</p>
<div style='text-align:center; margin-top:10px;'><strong style='text-align: center; color: maroon; font-size:14px;'>Единственный экземпляр находится<br>у Leo Reeves</strong></div>
</div>
</div>

</div>
</div>

.rp-wrapper{
width:850px;
margin:0 auto;
padding:10px;
border-radius:20px;
background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
filter:saturate(70%);
}
.rp-content{
background:#d6d6d6;
border-radius:15px;
padding:15px;
}

.rp-content a {
text-decoration: none;
color: #26a226;
cursor: pointer;
}

.rp-content {
user-select: auto;
}

.top-title{
font-family:'Dwarven';
font-size:40px;
color:#d6d6d6;
margin-bottom:15px;
text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.top-block{
background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
border-radius:15px;
text-align:center;
padding:5px;
margin-bottom:20px;
}

.nform {
font-family: 'Leotaro';
}

.circle-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
padding: 20px;
font-family:'Leotaro';
font-size:14px;
}

.circle-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

.circle {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
transition: transform 0.3s ease;
}

.circle-bg {
width: 100%;
height: 100%;
border-radius: 50%;
background-size: cover;
background-position: center;
filter: sepia(100%) hue-rotate(70deg) saturate(50%);
transition: filter 0.5s ease;
}

.circle:hover .circle-bg,
.circle.selected .circle-bg {
filter: none;
}

.circle::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 0 0 0px rgba(90,110,87,0.8);
opacity: 0;
transition: all 0.3s ease;
}

.circle::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
mix-blend-mode: lighten;
transition: opacity 0.5s ease;
pointer-events: none;
}

.circle:hover::before,
.circle.selected::before {
opacity: 0;
}

.circle:hover::after,
.circle.selected::after {
animation: pulse 2s infinite;
opacity: 1;
}

@keyframes pulse {
0% {
box-shadow:
0 0 5px rgba(5,46,43,0.8),
0 0 15px rgba(2,148,132,0.5);
}
50% {
box-shadow:
0 0 15px rgba(5,46,43,1),
0 0 30px rgba(2,148,132,0.7);
}
100% {
box-shadow:
0 0 5px rgba(5,46,43,0.8),
0 0 15px rgba(2,148,132,0.5);
}
}

.circle:hover {
transform: translateY(-10px);
}

.circle.selected {
transform: translateY(-10px);
}

.circle-title {
margin-top: 5px;
font-size: 14px;
color: #000;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
}

.circle-wrapper:hover .circle-title,
.circle.selected + .circle-title {
opacity: 1;
}

.description-container {
margin-top: 15px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
font-family:'Leotaro';
font-size:14px;
}

.description-container p{
text-indent:25px;
}

.description-line {
height: 3px;
background: linear-gradient(to right, transparent, #0a5c56, transparent);
margin-bottom: 10px;
}

.description-box {
padding: 20px;
border-radius: 15px;
border: 1px solid black;
background: #f5f5f5;
display: none;
min-height: 80px;
}

.description-box.active {
display: block;
}
</style>

circles.forEach(circle => {
circle.addEventListener('click', () => {
circles.forEach(c => c.classList.remove('selected'));
circle.classList.add('selected');

const targetId = circle.dataset.id;
descriptions.forEach(desc => {
if(desc.id === targetId){
desc.classList.add('active');
} else {
desc.classList.remove('active');
}
});
});
});
</script>

[/html]