[hideprofile]
[html]<style>@import url("https://forumstatic.ru/files/001c/63/27/99092.css");</style>
<div class="map">
<div class="area_wrap" id="jade_sea">
<div class="area" data-id="1">Изумрудное море</div>
<div class="description" id="description-1">
<h3>Температура воды зимой составляет от –0,5 до 0 °С <br>
Летом поверхностный слой прогрет до 23–26 °С. <br>Такие высокие температуры характерны только для верхнего 10–12-метрового слоя. <br>С ростом глубины температура уменьшается, достигая 8 °С на горизонте 60 м. <br> Основная масса воды глубже 100–150 м имеет температуру 8,5–9,2 °С. <br>
Изумрудном море водится более 180 различных видов рыб. <br>Некоторые из них:
Лобан, сельдь, луфарь, пеламида, сарган, осетр, белуга.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="luceras">
<div class="area" data-id="2">Провинция Люцерас</div>
<div class="description" id="description-2">
<h3>Провинция в дальнем северо-западном углу Наварры. <br>
В данной провинции ранее находился самый большой и лучший порт королевства. <br>Портовые пути закрыты уже более 400 лет из-за военных действий. <br>Жители занимаются рыболовством и малым судостроением. <br>Также в данной провинции находится флот Наварры.<br>
Ранее использовавшийся язык старолюцерианский, ныне мертвый язык.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="monserrat">
<div class="area" data-id="3">Монсеррат</div>
<div class="description" id="description-3">
<h3>Монтсеррат — передовой военный форпост.<br> Является частью восточного крыла наваррских вооруженных сил. <br>Он предназначен для ведения осад. <br>Находится в шести часах полета от военного колледжа Басгиат.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="signisen">
<div class="area" data-id="4">Провинция Сигнисен</div>
<div class="description" id="description-4">
<h3><a href="">Провинция Сигнисен</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="morraine">
<div class="area" data-id="5">Провинция Моррейн</div>
<div class="description" id="description-5">
<h3>Города отсутствуют, так как в данной провинции базируются военные и драконы.<br>
На территории провинции живут лишь те, кто помогает обеспечивать и снабжать провинцию необходимым, а так же те, кто занимается разведением и заготовкой скота для драконов. <br>
Мертвый язык моррейнский.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="jacobos">
<div class="area" data-id="6">Река Якобос</div>
<div class="description" id="description-6">
<h3><a href="">Река Якобос</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="navarra">
<div class="area" data-id="7">Наварра</div>
<div class="description" id="description-7">
<h3>Тип правления: монарший (Король Таури).<br>
Генерал всех вооруженных сил Наварры: Августин Мельгрен (всадник черного дракона Кодага)<br>
Наварра богата ресурсами: имеет сельскохозяйственные угодья, занимается скотоводством, а также изготовлением кожи и шерсти. <br>Большая часть территории королевства занимают леса и горы, отсюда и добыча древесины, а также горных ископаемых (железная руда, медь, свинец, золото, уголь, драгоценные камни).<br>
Страна имеет прямой выход к морю и океану, а также несколько крупных и малых рек, которые кристально чисты и богаты ресурсами (рыболовство). <br>
Действующие языки: наваррский<br>
Мертвые языки провинций: старолюцерианский, моррейнский, кровланский <br></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="esben_mountains">
<div class="area" data-id="8">Эсбенские горы</div>
<div class="description" id="description-8">
<h3><a href="">Эсбенские горы</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="valley">
<div class="area" data-id="9">Долина</div>
<div class="description" id="description-9">
<h3>Долина находится за академией Басгиат; это место драконы называют своим домом.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="basgiat">
<div class="area" data-id="10">Басгиат</div>
<div class="description" id="description-10">
<h3>Военная академия Басгиат — это единственное элитное учебное заведение в Наварре, которое готовит военнослужащих наваррской армии. <br>
Руководитель академии: действующий генерал Лилит Сорренгейл. <br>
Квадранты академии: пехота, писцы, целители, драконьи всадники. </h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="elsum">
<div class="area" data-id="11">Провинция Эльсум</div>
<div class="description" id="description-11">
<h3>Данная провинция богата рудой и прочной древесиной, а также неисчерпаемыми запасами оленей и лосей. <br>Большая часть жителей работает на шахтах, занимается дикой охотой, а также собирательством ягод и грибов.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="chakir">
<div class="area" data-id="12">Чакир</div>
<div class="description" id="description-12">
<h3>Небольшая деревня Чакир, недалеко от военного форпоста. <br>Рядом с деревней находятся шахты, в которых добывают драгоценные камни.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="dannes">
<div class="area" data-id="13">Река Даннес</div>
<div class="description" id="description-13">
<h3><a href="">Река Даннес</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="bryevik">
<div class="area" data-id="14">Провинция Брайевик</div>
<div class="description" id="description-14">
<h3><a href="">Провинция Брайевик</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="anka">
<div class="area" data-id="15">Анка</div>
<div class="description" id="description-15">
<h3><a href="">Анка</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="zolia">
<div class="area" data-id="16">Золия (Клиффсбейн)</div>
<div class="description" id="description-16">
<h3><a href="">Золия (Клиффсбейн)</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="samarra">
<div class="area" data-id="17">Сэмарра</div>
<div class="description" id="description-17">
<h3>Военный форпост</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="sumerton">
<div class="area" data-id="18">Сумертон</div>
<div class="description" id="description-18">
<h3>Не большая деревня</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="stonewater">
<div class="area" data-id="19">Река Стоунвотер</div>
<div class="description" id="description-19">
<h3><a href="">Река Стоунвотер</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="deaconshire">
<div class="area" data-id="20">Провинция Диконшир</div>
<div class="description" id="description-20">
<h3><a href="">Провинция Диконшир</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="calldear">
<div class="area" data-id="21">Коллдир</div>
<div class="description" id="description-21">
<h3>Самый маленький город в королевстве является столицей Наварры, тут живет королевская семья.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="p_calldear">
<div class="area" data-id="22">Провинция Коллдир</div>
<div class="description" id="description-22">
<h3>Самая маленькая западная провинция королевства Наварры. <br>Граничит с Люцерасом на северо-востоке и Тиррендором на юге.<br>
Большая часть жителей данной провинции активно занимается рыболовством и судостроением.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="tirrendor">
<div class="area" data-id="23">Провинция Тиррендор</div>
<div class="description" id="description-23">
<h3>Самая крупная провинция, состоит из горной местности, граничит с Изумрудным морем на западе и Арктическим океаном на юге. <br>
Тиррендор была единственной провинцией, предпринявшей попытку отделения в 627 году н.э. (шесть лет назад). <br>Если бы эта попытка увенчалась успехом, это оставило бы Наварру беззащитной перед Поромиэлем. <br>Целью восстания было провозглашение независимости Тиррендора и превращение Аретии в столицу нового королевства;<br>
Аретия была сожжена в ходе подавления восстания, хотя многие здания сохранились, потому что были сделаны из камня. Затем провинцией начал управлять город Левеллен.
</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="levellin">
<div class="area" data-id="24">Левеллин</div>
<div class="description" id="description-24">
<h3><a href="">Левеллин</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="aretia">
<div class="area" data-id="25">Аретия</div>
<div class="description" id="description-25">
<h3>Официально не существует уже 6 лет. <br>
Во время восстания был сожжен драконами. <br>
Аретия расположена на востоке, в нескольких часах полета от скал Дралора; <br>Город не находится под защитой магического барьера и никак не охраняется военными, так как находится слишком далеко от гарнизона.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="dralore">
<div class="area" data-id="26">Утёсы Дралора</div>
<div class="description" id="description-26">
<h3><a href="">Утёсы Дралора</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="medaro">
<div class="area" data-id="27">Перевал Медаро</div>
<div class="description" id="description-27">
<h3><a href="">Перевал Медаро</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="draytus">
<div class="area" data-id="28">Дрейтус</div>
<div class="description" id="description-28">
<h3><a href="">Дрейтус</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="aldibann">
<div class="area" data-id="29">Альдибанн</div>
<div class="description" id="description-29">
<h3><a href="">Альдибанн</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="resson">
<div class="area" data-id="30">Рессон</div>
<div class="description" id="description-30">
<h3><a href="">Рессон</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="pavis">
<div class="area" data-id="31">Пэвис</div>
<div class="description" id="description-31">
<h3><a href="">Пэвис</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="crovla">
<div class="area" data-id="32">Провинция Кровла</div>
<div class="description" id="description-32">
<h3><a href="">Провинция Кровла</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="cordin">
<div class="area" data-id="33">Кордин</div>
<div class="description" id="description-33">
<h3><a href="">Кордин</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="maleka">
<div class="area" data-id="34">Залив Малека</div>
<div class="description" id="description-34">
<h3><a href="">Залив Малека</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="poromiel">
<div class="area" data-id="35">Поромиэль</div>
<div class="description" id="description-35">
<h3>Поромиэль (королевство, которое использует помощь грифонов в войне с соседями) — небольшое королевство, разделённое на три провинции.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="hollows">
<div class="area" data-id="36">Пустоши</div>
<div class="description" id="description-36">
<h3>Ранее процветающее королевство, которое развязало магическую войну более 600 лет назад, славилось высокой религиозностью и огромными храмами, в особенности храмом Амари. <br>Ныне это пустое, непригодное для жизни место.</h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<div class="area_wrap" id="arctile">
<div class="area" data-id="37">Океан Арктайл</div>
<div class="description" id="description-37">
<h3><a href="">Океан Арктайл</a></h3>
<button class="close" title="закрыть"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".area").on("click", function () {
var id = $(this).data("id");
var targetDescription = $("#description-" + id);
var targetArea = $(this);
// Закрываем все открытые описания и снимаем класс active с area
$(".description").not(targetDescription).fadeOut(600);
$(".area").not(targetArea).removeClass("active");
// Переключаем текущее описание
if (targetDescription.is(":visible")) {
targetDescription.fadeOut(600);
targetArea.removeClass("active");
} else {
targetDescription.fadeIn(600);
targetArea.addClass("active");
}
});
// Закрытие по кнопке "Close"
$(".description .close").on("click", function () {
var targetDescription = $(this).closest(".description");
var id = targetDescription.attr("id").split("-")[1];
var targetArea = $(".area[data-id='" + id + "']");
targetDescription.fadeOut(600);
targetArea.removeClass("active");
});
});
</script>[/html]
Карта кликабельна