таинственный гримуар

[hideprofile][html]<div class="rp-wrapper">
<div class="rp-content">
<div class="rp-title">ТАИНСТВЕННЫЙ ГРИМУАР</div>

<div style="text-align: center; margin-bottom: 20px; margin-top:20px;">
<img src="https://i.pinimg.com/1200x/20/cb/ef/20cbef3204a7c0fad3980840bd6ee4ef.jpg" alt="Avatar" style="width: 300px; height: 300px; border-radius: 15px; object-fit: cover; filter:sepia(50%) hue-rotate(70deg) saturate(50%);">
</div>

<div class="light-block" style="font-family: 'Leotaro', sans-serif; text-align: center; margin-bottom: 20px; font-size:14px;">
<p style="text-indent:25px;">Когда тень удлиняется, а мир замирает в ожидании, пробудится древняя сила. И только тот, кто знает язык звезд и шепот земли, сможет ее укротить.</p>
<p style="text-indent:25px;">Эта книга для тех, кто желает обрести большую силу и для тех, кто лишь начинает путь познания магии.</p>
<p style="text-indent:25px;">...таинственный гримуар, манящий своей запретной красотой и обещающий силу, от которой дрожит сама земля. Но будь осторожен, ибо каждая страница этого фолианта – это сделка с неведомым, а каждое заклинание – шаг в бездну. Здесь ты найдешь не только способы обрести власть над стихиями и сердцами людей, но и предупреждения о цене, которую придется заплатить. Этот гримуар – не игрушка, а оружие, и в неумелых руках оно может обернуться против самого владельца.</p>
</div>

<div id="openButton" class="toggle-button" onclick="openMainContent()">ОТКРЫТЬ</div>

<div id="mainContent" style="display: none;">
<div class="rp-title" style='text-align:center; border-radius:30px;'>Заклинания, доступные магам-заклинателям любого уровня.</div>
<div class="light-block" style="margin-bottom: 20px;">
<h3 class="inner-title" style='font-size:14px;'>Чем сложнее заклинание, тем больше силы расходуется. Заклинания можно произносить на любом языке — эффект будет тот же.</h3>
<div class="line-decoration"></div>

<div class="circles-wrapper" id="circlesPage1">
<div class="circle-item" onclick="selectCircle(1, 1, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/736x/03/87/f1/0387f1115aab167ec59eda319f844b7b.jpg');"></div>
<div class="circle-name">ЗАЩИТНЫЕ<br>ЗАКЛИНАНИЯ</div>
</div>
<div class="circle-item" onclick="selectCircle(1, 2, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/736x/22/f1/f4/22f1f48ebf0293eda7171c53da22e6fd.jpg');"></div>
<div class="circle-name">БОЕВЫЕ<br>ЗАКЛИНАНИЯ</div>
</div>
<div class="circle-item" onclick="selectCircle(1, 3, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/736x/c8/0c/ca/c80ccac7310059d0f51e4b5b1eaaae2b.jpg');"></div>
<div class="circle-name">НЕГАТИВНЫЕ И<br>СМЕРТЕЛЬНЫЕ<br>ЗАКЛИНАНИЯ</div>
</div>
<div class="circle-item" onclick="selectCircle(1, 4, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/f0/e0/4c/f0e04c1877907de8374eff5c864d676b.jpg');"></div>
<div class="circle-name">ПРОЧИЕ<br>ЗАКЛИНАНИЯ</div>
</div>
</div>

<div id="page1-tab1" class="tab-content-area">
<strong><ul style='text-align:center;'>
<li>Защита от невидимых сил — охраняет дом и священные пространства</li>
<li>Защита от негативной энергии — Обвивает энергию светлым коконом</li>
<li>Блокировать кошмары и влияние во снах</li>
<li>Отражение темных сущностей</li>
<li>Защита близкого на расстоянии</li>
<li>Снятие проклятия</li>
<li>Изгнание страха</li>
<li>Заклинание печати на пространство</li>
<li>Призыв защиты предков</li>
<li>Сокрытие энергии от врагов</li>
<li>Защита во время глубокой работы</li>
</ul></strong>
</div>

<div id="page1-tab2" class="tab-content-area">
<strong><ul style='text-align:center;'>
<li>Оттолкнуть противника</li>
<li>Связать противника верёвками</li>
<li>Парализовать противника</li>
<li>Усыпить противника</li>
<li>Нанести глубокие раны</li>
<li>Взрыв</li>
<li>Отбросить противника</li>
<li>Ослепить противника</li>
<li>Сделать вокруг себя щит</li>
<li>Создать преграду на пути</li>
</ul></strong></div>
<div id="page1-tab3" class="tab-content-area">
<strong><ul style='text-align:center;'>
<li>Посеять сомнение</li>
<li>Навлечь неудачу</li>
<li>Разорвать связь между людьми</li>
<li>Навлечь болезнь</li>
<li>Создать эмоциональный хаос</li>
</ul></strong></div>
<div id="page1-tab4" class="tab-content-area">
<strong><ul style='text-align:center;'>
<li>Освобождение от страха</li>
<li>Призыв любви</li>
<li>Залечить душевные раны</li>
<li>Обострение интуиции</li>
<li>Ощутить магическую энергию</li>
<li>Соединить две энергии</li>
<li>Скрыть тайну</li>
<li>Приглушить способности другого</li>
<li>Проецировать ложный образ (двойник или мираж)</li>
<li>Скрыть предмет</li>
</ul></strong></div>
</div>

<div class="pattern-button next-page" onclick="showPage(2)">СЛЕДУЮЩАЯ<br>СТРАНИЦА</div>

</div>

<div id="page2" style="display: none;">

<div class="rp-title" style='text-align:center; border-radius:30px;'>Заклинания, доступные только магам-заклинателям не ниже мастера</div>

<div class="light-block" style="margin-bottom: 20px;">
<h3 class="inner-title" style='font-size:14px;'>Чем сложнее заклинание, тем больше силы расходуется. Заклинания можно произносить на любом языке — эффект будет тот же.</h3>
<div class="line-decoration"></div>

<div class="circles-wrapper page2-circles" id="circlesPage2">
<div class="circle-item" onclick="selectCircle(2, 5, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">УБИВАЮЩЕЕ<br>ЗАКЛИНАНИЕ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 6, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">ЗАКЛИНАНИЕ,<br>ВЫЗЫВАЮЩЕЕ<br>СМЕРТЬ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 7, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">ЗАКЛЯТИЕ<br>БЕЗУМИЯ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 8, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">СМЕРТЕЛЬНОЕ<br>ПРОКЛЯТИЕ<br>МАРИОНЕТКИ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 9, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">ПРОКЛЯТИЕ<br>СМЕРТИ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 10, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">ЖЕРТВЕННОЕ<br>ЗАКЛИНАНИЕ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 11, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">ОЧАРОВАНИЕ,<br>ЛИШАЮЩЕЕ<br>СИЛ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 12, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">ОСТАНАВЛИВАЮЩЕЕ<br>ЗАКЛИНАНИЕ</div>
</div>
<div class="circle-item" onclick="selectCircle(2, 13, this)">
<div class="circle" style="background-image: url('https://i.pinimg.com/1200x/1c/0c/db/1c0cdb8529e93b5bcfdb608592cd413f.jpg');"></div>
<div class="circle-name">ЗАКЛИНАНИЕ<br>ВЫКАЧИВАНИЯ</div>
</div>
</div>
<div class="verdant-line"></div>
<div id="circleLabel2" class="circle-label"></div>


<div id="page2-tab5" class="tab-content-area"><p style='text-indent: 25px;'>Представляет собой зелёный луч света, который мгновенно отправляет человека или существо на тот свет. <strong style=' color:#800000;'><em>Практически нет защиты</em></strong></p>
<details style='font-size:14px; border: 1px black solid; border-radius:10px;'>
<summary style='text-align: center; margin: 10px;'>ТРЕБОВАНИЯ</summary>
<p style='text-align:center; color:#800000;'>большая магическая сила</p>
<p style='text-align:center; color:#800000;'>практика</p>
<p style='text-align:center; color:#800000;'>предрасположенность к боевой магии.</p>
</details></div>
<div id="page2-tab6" class="tab-content-area"><p style='text-indent: 25px;'>Проводится путём извлечения силы из свечей и её использования для того, чтобы превратить в жидкость то, что принадлежит объекту заклинания. Заклинание начинает действовать немедленно, вызывая у жертвы кровавую рвоту и болезненные аневризмы. Одним из признаков того, что жертва находится под действием этого проклятия, являются её налитые кровью глаза.</p>
<details style='font-size:14px; border: 1px black solid; border-radius:10px;'>
<summary style='text-align: center; margin: 10px;'>ТРЕБОВАНИЯ</summary>
<p style='text-align:center; color:#800000;'>личные вещи жертвы</p>
<p style='text-align:center; color:#800000;'>несколько свечей</p>
</details></div>
<div id="page2-tab7" class="tab-content-area"><p style='text-indent: 25px;'>Проклятие, накладываемое путём начертания символа на руке жертвы с использованием силы проклятого предмета, используется для того, чтобы вызвать безумие. Заклинание сводит жертву с ума до такой степени, что она становится жестокой и убивает. Если позволить такому проклятию действовать слишком долго, его уже нельзя будет снять. Объясняется, что подобные проклятия начинаются с магии, но через некоторое время они изменяют саму химию мозга, делая их необратимыми.</p>
<details style='font-size:14px; border: 1px black solid; border-radius:10px;'>
<summary style='text-align: center; margin: 10px;'>ТРЕБОВАНИЯ</summary>
<p style='text-indent: 25px; color:#800000;'>обряд связывания с куклой вуду
<p style='text-indent: 25px; color:#800000;'>игла</p>
</details></div>
<div id="page2-tab8" class="tab-content-area"><p style='text-indent: 25px;'>Заклинание совершается путём прокалывания марионетки иглой во время произнесения заклинания. У жертвы начнётся одышка, озноб, слабость, кровавая рвота, а затем она потеряет сознание. Через два дня жертва умрёт.</p>
<details style='font-size:14px; border: 1px black solid; border-radius:10px;'>
<summary style='text-align: center; margin: 10px;'>ТРЕБОВАНИЯ</summary>
<p style='text-align:center;; color:#800000;'>Физический контакт с жертвой</p>
<p style='text-align:center;; color:#800000;'>предположительно Темная или Жертвенная магия</p>
</details></div>
<div id="page2-tab9" class="tab-content-area"><p style='text-indent: 25px;'>Это проклятие позволяет наказать кого-либо, обрекая его на медленную, предположительно необратимую смерть. В случае одержимости оно также позволяет ведьме заточить одержимого духа в теле его носителя, чтобы тот не смог избежать проклятия.</p>
<details style='font-size:14px; border: 1px black solid; border-radius:10px;'>
<summary style='text-align: center; margin: 10px;'>ТРЕБОВАНИЯ</summary>
<p style='text-align:center;; color:#800000;'>символ и жертва, помещенная в него</p>
</details></div>
<div id="page2-tab10" class="tab-content-area"><p style='text-indent: 25px;'>Заклинание, которое позволяет убить сверхъестественное существо и направить его силу в себя. Для заклинания необходимо, чтобы жертва (жертвы) находилась внутри символа, нарисованного на земле. Обычно этот процесс приводит к летальному исходу, хотя в случае с изначальными вампирами заклинание высушивает их</p>
</div>
<div id="page2-tab11" class="tab-content-area"><p style='text-indent: 25px;'>Очарование, наложенное на предмет, которое лишает указанную цель возможности дышать и в конечном итоге приводит к потере сознания при контакте.</p>
</div>
<div id="page2-tab12" class="tab-content-area"><p style='text-indent: 25px;'>Заклинание останавливает поток магии, отменяя любое совершаемое заклинание или направляемую магию. Заклинание может быть направлено как на мага, произносящего заклинание, так и на человека, в которого направляется магия.</p>
</div>
<div id="page2-tab13" class="tab-content-area"><p style='text-indent: 25px;'>Уникальное заклинание, которое можно использовать только в сочетании с Выкачиванием, позволяющее магу поглощать магию определённого заклинания или источника магии, что даёт ему силу. При разрушении крупных заклинаний высвобождается энергия, которая может вызывать ураганы и растворять металл. Кроме того, они могут выкачивать источники магии и перенаправлять её, не поглощая магию самостоятельно.</p>
</div>
</div>

<div class="pattern-button prev-page" onclick="showPage(1)">ПРЕДЫДУЩАЯ<br>СТРАНИЦА</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%);
box-sizing: border-box;
}

.rp-content {
background: #d6d6d6;
border-radius: 15px;
padding: 20px;
box-sizing: border-box;
}

.rp-title{
background:url(https://img.freepik.com/premium-photo/s … -18279.jpg);
filter:saturate(70%);
border-radius:15px;
font-family:'Dwarven';
color:#F7F7F7;
display:flex;
align-items:center;
justify-content:center;
height:60px;
font-size:30px;
}
.light-block {
border-radius: 15px;
padding: 20px;
width: 80%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

.pattern-block {
background: url('https://img.freepik.com/premium-photo/seamless-abstract-green-background-with-cracked-texture_743855-18279.jpg');
background-blend-mode: overlay;
border-radius: 15px;
padding: 10px 20px;
text-align: center;
width: 90%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
filter: saturate(70%);
}

.toggle-button, .pattern-button {
background: url('https://img.freepik.com/premium-photo/seamless-abstract-green-background-with-cracked-texture_743855-18279.jpg');
background-blend-mode: overlay;
border-radius: 15px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
font-family: 'Dwarven', sans-serif;
font-size: 22px;
color: #fff;
width: 200px;
margin: 10px auto;
transition: 0.2s;
filter: saturate(70%);
}
.toggle-button:hover, .pattern-button:hover {
transform: scale(1.02);
background-color: #8a8a8a;
}
.next-page {
margin-right: 0;
margin-left: auto;
}
.prev-page {
margin-left: 0;
margin-right: auto;
}

.block-title {
font-family: 'Dwarven', sans-serif;
color: #fff;
margin: 0;
font-size: 24px;
}
.inner-title {
font-family: 'Leotaro', sans-serif;
text-align: center;
color: #333;
margin-top: 0;
margin-bottom: 15px;
font-size: 29px;
}

.line-decoration {
height: 2px;
background: linear-gradient(90deg, transparent, #333, #333, transparent);
width: 80%;
margin: 15px auto;
}

.verdant-line {
height: 3px;
background: linear-gradient(90deg, transparent, #2F4F4F, #2F4F4F, #2F4F4F, transparent);
width: 100%;
margin: 15px 0;
}

.circles-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.circle-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.2s;
flex: 0 0 auto;
}
.circle-item:hover {
transform: translateY(-5px);
}

.circle {
width: 80px;
height: 80px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: #ccc;
box-shadow: 0 0 0 0 rgba(0, 0, 255, 0);
transition: box-shadow 0.2s;
}

.circle-item:hover .circle {
box-shadow: 0 0 15px 5px rgba(0, 0, 255, 0.7);
}
.circle-item.active .circle {
box-shadow: 0 0 15px 5px rgba(0, 0, 255, 0.7);
}

.page2-circles .circle-item:hover .circle {
box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.7);
}
.page2-circles .circle-item.active .circle {
box-shadow: 0 0 15px 5px rgba(128, 0, 128, 0.7);
}

.circle-name {
margin-top: 8px;
font-family: 'Leotaro', sans-serif;
color: #333;
text-align: center;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.circle-item:hover .circle-name {
opacity: 1;
}
.circle-item.active .circle-name {
opacity: 1;
}

.circle-label {
text-align: center;
font-family: 'Leotaro', sans-serif;
font-size: 18px;
color: #2F4F4F;
min-height: 30px;
margin: 10px 0;
}

.tab-content-area {
background: #e6e6e6;
border: 2px solid #b0b0b0;
border-radius: 15px;
padding: 20px;
font-family: 'Leotaro', sans-serif;
color: #333;
width: 80%;
margin: 20px auto 0;
box-sizing: border-box;
display: none;
}
</style>

// Переключение между страницами
function showPage(pageNum) {
var page1 = document.getElementById('mainContent');
var page2 = document.getElementById('page2');
if (pageNum === 1) {
page1.style.display = 'block';
page2.style.display = 'none';
} else {
page1.style.display = 'none';
page2.style.display = 'block';
}
}

// Выбор кружка
function selectCircle(page, tabNum, element) {
// Убираем активный класс у всех кружков на этой странице
var circles;
if (page === 1) {
circles = document.querySelectorAll('#circlesPage1 .circle-item');
} else {
circles = document.querySelectorAll('#circlesPage2 .circle-item');
}

circles.forEach(function(circle) {
circle.classList.remove('active');
});

// Добавляем активный класс текущему кружку
element.classList.add('active');

// Прячем все табы на этой странице
var tabs;
if (page === 1) {
tabs = document.querySelectorAll('#mainContent .tab-content-area');
} else {
tabs = document.querySelectorAll('#page2 .tab-content-area');
}

tabs.forEach(function(tab) {
tab.style.display = 'none';
});

// Показываем нужный таб
var tabId = 'page' + page + '-tab' + tabNum;
document.getElementById(tabId).style.display = 'block';

// Обновляем лейбл с названием кружка
var circleName = element.querySelector('.circle-name').innerText;
if (page === 1) {
document.getElementById('circleLabel1').innerText = circleName;
} else {
document.getElementById('circleLabel2').innerText = circleName;
}
}

// При загрузке страницы скрываем все табы
document.addEventListener('DOMContentLoaded', function() {
var allTabs = document.querySelectorAll('.tab-content-area');
allTabs.forEach(function(tab) {
tab.style.display = 'none';
});
});
</script>
[/html]