[hideprofile][html]<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
.tabs {
display: flex;
gap: 2px;
margin-bottom: 20px;
justify-content: center;
}
.tab {
padding: 12px 24px;
background-color: #22242C;
color: #fff;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-family: cinzel;
font-size: 16px;
}
.tab:hover {
background-color: #9A1E24;
}
.tab.active {
background-color: #9A1E24;
}
.map-container {
position: relative;
width: 100%;
margin: 0 auto;
display: none;
}
.map-container.active {
display: block;
}
.map-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.map-point {
position: absolute;
width: 24px;
height: 24px;
background-color: #22242C;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border: 2px solid #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.map-point i {
font-size: 11px;
transition: transform 0.3s ease;
color: #fff
}
#territory-map .map-point {
width: 30px;
height: 30px;
}
#territory-map .map-point i {
font-size: 18px;
}
.map-point:hover {
transform: translate(-50%, -50%) scale(1.2);
background-color: #9A1E24;
}
.map-point:hover i {
transform: scale(1.1) rotate(5deg);
}
.map-point.active {
background-color: #9A1E24;
transform: translate(-50%, -50%) scale(1.2);
z-index: 1001;
}
.map-scale {
position: absolute;
bottom: 20px;
left: 20px;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
gap: 5px;
z-index: 1000;
font-family: open sans;
}
.scale-bar {
display: flex;
align-items: flex-end;
height: 30px;
}
.scale-segment {
height: 4px;
background-color: #1C1D20;
position: relative;
}
.scale-segment:nth-child(odd) {
background-color: #1C1D20;
}
.scale-segment:nth-child(even) {
background-color: #ccc;
height: 3px;
border: 0.5px solid #1C1D20;
}
.scale-label {
position: absolute;
bottom: 8px;
transform: translateX(-50%);
font-size: 12px;
color: #333;
white-space: nowrap;
margin-left: 10px;
}
#territory-map .scale-label {
color: #ccc;
text-shadow: 2px 2px #000;
}
.info-popup {
position: absolute;
background-color: #1C1D20;
border: none;
padding: 20px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
display: none;
z-index: 1000;
max-width: 300px;
animation: popupFade 0.3s ease-out;
}
@keyframes popupFade {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.info-popup h3 {
margin-top: 0;
color: #9A1E24;
font-size: 0.9em;
margin-bottom: 1px;
text-align: center;
font-family: var(--font2);
}
.info-popup p {
margin-bottom: 15px;
color: #ccc;
line-height: 1.1;
font-size: 14px;
font-family: var(--font);
}
.info-popup img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 15px;
}
.close-button {
position: absolute;
top: 4px;
right: 1px;
cursor: pointer;
padding: 5px;
font-size: 20px;
color: #fff;
transition: color 0.3s ease;
}
.close-button:hover {
color: #ccc;
}
.map-point .point-title {
display: none;
position: absolute;
white-space: nowrap;
left: 150%;
top: calc(100% + 2px);
transform: translateX(-70%);
padding: 4px 8px;
font-family: cinzel;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.map-point.with-label .point-title {
display: block;
}
</style>
</head>
<body>
<div class="tabs">
<button class="tab active" data-map="town">БАЛТИМОР</button>
<button class="tab" data-map="territory">ИЛЛЮЗИОН</button>
</div>
<div class="map-container active" id="town-map">
<img src="https://forumstatic.ru/files/001c/54/02/81955.png" class="map-image" alt="BALTIMOR">
<div class="map-scale">
<div class="scale-bar">
<div class="scale-segment" style="width: 50px">
<span class="scale-label">0</span>
</div>
<div class="scale-segment" style="width: 50px">
<span class="scale-label">100m</span>
</div>
<div class="scale-segment" style="width: 50px">
<span class="scale-label">200m</span>
</div>
</div>
</div>
</div>
<div class="map-container" id="territory-map">
<img src="https://upforme.ru/uploads/001c/54/02/9/888856.png" class="map-image">
<div class="map-scale">
<div class="scale-bar">
<div class="scale-segment" style="width: 50px">
<span class="scale-label">0</span>
</div>
<div class="scale-segment" style="width: 50px">
<span class="scale-label">1km</span>
</div>
<div class="scale-segment" style="width: 50px">
<span class="scale-label">2km</span>
</div>
</div>
</div>
</div>
<div class="info-popup">
<span class="close-button">×</span>
<img alt="Luogo">
<h3></h3>
<p></p>
</div>
<script>
// настройка шкалы
const SCALE_CONFIG = {
town: {
pixelsPerMeter: 0.114,
totalDistance: 500,
segments: 5,
segmentWidth: 45
},
territory: {
pixelsPerMeter: 0.0114,
totalDistance: 5000,
segments: 5,
segmentWidth: 45
}
};
// Достопримечательности в части БАЛТИМОР
const townPoints = [
{
x: 62,
y: 63,
title: "Набережная Кантон",
description: " Пристань Лайтхаус Пойнт — это ваши ворота в парк Кантон-Уотерфронт и достопримечательности Балтимора, где вы сможете погрузиться в местную культуру, рестораны и развлечения: Бар Drift расположенный на пристани Lighthouse Point Marina, Drift — идеальное место для отдыха на любой вкус: от неторопливых вечерних посиделок до оживленных вечерних посиделок. Парк Кантон-Уотерфронт, расположенный на живописном участке между Бостон-стрит и Балтиморской гаванью. Это идеальное место для пикника и излюбленное место для наблюдения за захватывающими событиями, такими как авиашоу «Голубые ангелы» или прибытие больших парусных кораблей во Внутреннюю гавань.",
icon: "fa-anchor",
image: "https://upforme.ru/uploads/001c/54/02/9/507126.png"
},
{
x: 62,
y: 65,
title: "Lighthouse Point Marina",
description: "идеально расположенная на знаменитой набережной Кантон - это живописный уголок в Балтиморе , где сочетание красоты природы и великолепной атмосферы создает идеальное место для отдыха и развлечений. Марина располагается вдоль живописного побережья, обеспечивая потрясающие виды на воду и город. Здесь можно арендовать яхты, наслаждаться прогулками на катерах или просто расслабиться на берегу, под солнечными лучами. У моря расположены уютные кафе и рестораны, где можно насладиться местной кухней. Lighthouse Point Marina станет идеальным местом для семьи и друзей, ищущих увлекательные приключения и отдых.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/939353.png"
},
{
x: 46.5,
y: 62,
title: "Ориол-парк на Кемден-ярдс",
description: "«Ориол-парк на Кемден-ярдс» (англ. Oriole Park at Camden Yards) или просто «Кемден-ярдс» — бейсбольный стадион, расположенный в Балтиморе. Является домашним стадионом клуба Главной лиги бейсбола «Балтимор Ориолс». Вместимость стадиона «Кэмден-Ярдс» составляет 45 971 место, включая клубный уровень и верхнюю площадку.",
icon: "fa-baseball-bat-ball",
image: "https://upforme.ru/uploads/001c/54/02/9/37712.png"
},
{
x: 45.5,
y: 64,
title: "Эм-энд-ти Банк Стэдиум",
description: "«Эм-энд-ти Банк Стэдиум» (англ. M&T Bank Stadium) — футбольный стадион, расположенный в городе Балтимор, штат Мэриленд. Домашний стадион футбольной команды «Балтимор Рэйвенс». Трибуны стадиона состоят из четырёх уровней и вмещают до 71 008 человек.",
icon: "fa-football",
image: "https://upforme.ru/uploads/001c/54/02/9/604400.png"
},
{
x: 54.5,
y: 63,
title: "Harbor Point Park",
description: "Парк Пойнт, ранее известный как парк Раш-Филд, расположенный в оживленной и живописной Внутренней гавани Балтимора, служит свидетельством стремления города к возрождению городских пространств. Эта исключительная зона отдыха в настоящее время переживает масштабную реконструкцию, превращающую её в скрытый оазис, гармонично сочетающий в себе пышную зелень, современную инфраструктуру и захватывающие виды на набережную.",
icon: "fa-tree",
image: "https://upforme.ru/uploads/001c/54/02/9/354688.png"
},
{
x: 51,
y: 61,
title: "Port of Baltimore",
description: "Морской порт, расположенный в приливных бассейнах трёх рукавов реки Патапско в Балтиморе, штат Мэриленд, на верхнем северо-западном берегу Чесапикского залива Атлантического океана. Это крупнейший в Соединённых Штатах Америки портовый комплекс для специализированных грузов (судов-ролкеров) и пассажирских судов. Он находится в ведении Администрации порта Мэриленда — подразделения департамента транспорта Мэриленда",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/161779.png"
},
{
x: 55,
y: 70,
title: "Baltimore Cruise Port",
description: "Круизный порт Балтимора, расположенный на реке Патапско в бухте Уайнанс-Коув, является идеальным местом для начала незабываемого путешествия. Находясь всего в 3 милях от центра Балтимора и рядом с международным аэропортом, порт предлагает удобный доступ для пассажиров со всего региона. Каждый год более полумиллиона туристов отправляются отсюда в увлекательные круизы к Багамам, Бермудам, Карибским островам, Новой Англии и вдоль атлантического побережья Канады. Близость к основным достопримечательностям города позволяет путешественникам идеально совместить изучение Балтимора с предстоящими приключениями на воде.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/157548.png"
},
{
x: 77,
y: 74,
title: "Dundalk Terminal",
description: "Морской терминал Дандолк в порту Балтимора является крупнейшим автомобильным портом региона, обладая внушительной площадью в 570 акров. Он оснащен 13 причалами и 4 контейнерными кранами, что делает его универсальным объектом для обработки генеральных грузов. Прямой железнодорожный доступ обеспечивает эффективное соединение с главными транспортными маршрутами, что повышает его конкурентоспособность и делает его важной составляющей логистических цепочек как для местных, так и для международных операций. Этот порт не только подтверждает свои лидерские позиции, но и активно способствует развитию торговли и экономики региона.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/876637.png"
},
{
x: 37,
y: 99,
title: "Международный аэропорт Балтимор-Вашингтон",
description: "Гражданский аэропорт, обслуживающий конгломерат городов Балтимор и Вашингтон, является важным транзитным узлом для коммерческих авиаперевозок. Он выступает вторичным хабом для бюджетной авиакомпании AirTran Airways и одним из ключевых пунктов назначения для крупнейшего мирового дискаунтера Southwest Airlines. Аэропорт оборудован одним современным терминалом, предлагающим широкий выбор ресторанов и магазинов, а также четыре зала ожидания, расположенные в пяти вестибюлях. Кроме того, он обеспечивает отличные возможности наземного транспорта, включая поезда MARC и Amtrak, легкорельсовый транспорт MTA, автобусы и шаттлы. Это делает его удобным местом для пассажиров, стремящихся к комфортному и быстрому передвижению в пределах региона и за его пределами.",
icon: "fa-plane",
image: "https://upforme.ru/uploads/001c/54/02/9/767574.png"
},
{
x: 52,
y: 58,
title: "Baltimore Police Department Heliport",
description: "Вертолетная площадка Департамента полиции Балтимора является ключевым элементом системы оперативного реагирования и обеспечения безопасности в округе. Авиационная группа активно занимается воздушным наблюдением за значительными критическими инцидентами, предоставляя в режиме реального времени микроволновый видеосигнал на командный пункт департамента по чрезвычайным ситуациям. Помимо стандартного патрулирования, площадка играет важную роль в проведении поисково-спасательных операций, где профессионалы авиационной группы сотрудничают с тактическими спасателями из пожарной части № 17 округа Балтимор. Это сотрудничество позволяет эффективно реагировать на чрезвычайные ситуации, обеспечивая быструю помощь и безопасность граждан.",
icon: "fa-plane",
image: "https://upforme.ru/uploads/001c/54/02/9/341787.png"
},
{
x: 35,
y: 43,
title: "Малая база Северного Синдиката",
description: "Штаб-квартира Синдиката искусно замаскирована под современные таунхаусы в тихом пригороде Балтимора. Лаконичная геометрия фасадов, панорамные окна и просторные балконы создают видимость уютного жилого комплекса. Бело-серые тона подчеркивают строгость архитектуры, а внутренние дворы и гаражи обеспечивают уединение. За неприметностью скрывается стратегический центр, где тишина улиц становится надёжным прикрытием для дел Синдиката.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/187261.png"
},
{
x: 25,
y: 16,
title: "Особняк Босса Синдиката",
description: "В роскошном пригороде возвышается огромная резиденция с большой территорией, словно перенесённая из восточных сказаний. Белоснежный фасад особняка сочетает европейскую классику с утончёнными арабскими мотивами — изящные арки, тонкая лепнина и величественные колонны подчеркивают мощь и утончённость владельца. Перед входом — фонтан из чёрного камня, символ власти и вечного движения. Вокруг — строгий садовый ансамбль и ухоженные аллеи, ведущие к соседним павильонам, где расположены дома гарема Уммы Аль-Хайр. Это не только центр личной жизни, но и символ наследия, в котором восточная роскошь соединяется с дисциплиной нового мира.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/451544.png"
},
{
x: 53,
y: 55,
title: "Малая штаб квартира Восточной Империи",
description: "Небольшое трёхэтажное здание с невысоким фасадом и охраняемой территорией. Первый этаж — ресепшн и переговорная; второй — офисы руководства и секретариат; третий — стратегическая комната, архив и комната отдыха. Мини‑сервер, CCTV, скуд-контроль, автономное электропитание и маскируемая аварийная эвакуация.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/873734.png"
},
{
x: 56,
y: 19,
title: "Особняк Босса Империи",
description: "Особняк босса Восточной империи величественно возвышается среди густых лесов, скрываясь за строгими аллеями и идеально подстриженными живыми изгородями. Его фасад из серого камня дышит аристократизмом и внушает уважение еще с первых шагов к массивным дверям. Круглый двор, охраняемый людьми и машинами, словно арена силы, подчеркивает статус хозяина. Эта резиденция — символ незыблемой власти, холодного расчёта и непоколебимой тени, простирающейся над всей империей.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/130679.png"
},
{
x: 54,
y: 61,
title: "Малая штаб квартира Золотой Бухты",
description: "Небольшой офис на 2–5 этаже в одном из пятнадцатиэтажном здании, замаскированный под консалтинговую фирму. Ресепшн с подставным персоналом, несколько смежных кабинетов для встреч, комната для аналитики и хранения документов. Простая система видеонаблюдения, локальная сеть с шифрованием, аварийный выход и запасные ключи. Низкая внешняя заметность, деловой антураж. Рядом располагаются с внешней стороны ресторанчики, фитнес клубы, модные бутики, внутренняя территория закрытая, есть подъезды на подземный паркинг. Внутренний дворик более обустроенный, есть бассейн, зона комфортабельного отдыха.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/660747.png"
},
{
x: 97,
y: 72,
title: "Особняк Босса Золотой Бухты",
description: "Это не просто дом, а символ власти и величия на границе его владений. Особняк с террасами, которые переходят одна в другую, образуя гармоничные уровни с бассейнами, зелеными зонами и уютными лаундж-зонами. Пространство выглядит словно оазис роскоши, подсвеченными садами и бассейнами будто парит над землей. Здесь объединены холодная геометрия и роскошь без компромиссов. Каждая деталь говорит о том, что это крепость авторитета, место, где решения меняют судьбы целых территорий.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/444367.png"
},
{
x: 42,
y: 73,
title: "Малая штаб квартира Западного Картеля",
description: "Малая штаб-квартира Западного картеля разместилась в бывшем центре помощи наркозависимым в Балтиморе — выбор подчеркнут ироничным замыслом нового босса. Современное здание из стекла и камня с холодной геометрией фасада теперь скрывает переговорные залы, офисы стражей и простор для тайных встреч.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/834138.png"
},
{
x: 23,
y: 59,
title: "Особняк Босса Картеля",
description: "Особняк босса мафии Западного картеля поражает своим великолепием. Особняк в стиле европейского классицизма, с утончённым интерьером, мраморными колоннами, зеркальными залами и панорамными окнами. Здание окружено идеальным ландшафтным дизайном — ровные газоны, тщательно подстриженные деревья и аллеи. Территория включает в себя площадку для гольфа, просторный спортивный корт с разметкой для игр и несколько вертолетных площадок, шикарный бассейн. Это не просто убежище, а крепость власти, где роскошь переплетается с холодным расчётом и абсолютным контролем.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/720761.png"
},
{
x: 48,
y: 60,
title: "Малая штаб квартира Иллюзиона",
description: "Комфортный офис на верхнем этаже: панорамные окна с видом на гаванью, минималистичный интерьер в тёмных тонах, стеклянные перегородки для переговорных, скрытые серверные и защищённый бокс для документации, комната отдыха, пункт контроля доступа и система видеонаблюдения.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/859593.png"
},
{
x: 49,
y: 62,
title: "Апартаменты руководства Иллизион",
description: "Здание в бизнес-центре Балтимора, полностью выкупленное под нужды корпорации Иллюзион. Рабочие и жилые шикарные двухуровневые апартаменты разных площадей с панорамными окнами на гавань, элегантный интерьер в тёмных и металлических тонах, просторная гостиная, кабинет с защищённой мини‑серверной, с ванной комнатой, полностью оснащённая кухня, гардеробные, комната для переговоров, система умного дома, безопасная входная зона и персонал‑консьерж. На первом этаже небольшой ресторанчик сети Sapori d’Italia, на минус первом этаже - помещение с оснащенной прачечной, остальные минус второй третий этаж - подземный паркинг.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/583957.png"
},
{
x: 78,
y: 72,
title: "Склад Sun Shark",
description: "Недалеко от морского терминала Дандолк притаился склад Золотой Бухты. С виду, очередная груда контейнеров для разного товара, которым они промышляют. Легально и не очень. В одном из контейнеров припрятан вход в подземный бар для своих. Алкоголь, пиратская тематика, девочки и мальчики на выбор. Комнаты для уединения. Все для комфортного отдыха безбашенных головорезов. Настольные игры, музыка и дартс с твоей головой, смельчак, прилагаются! А вот за этим потайным местом есть еще более потайные двери, коридоры и повороты, которые ведут в камеры заключения, допроса. И, будем честны, если ты сюда попал, вряд ли сможешь покинуть это «дружелюбное» место, узнав о нем от своих новых золотых друзей.",
icon: "fa-warehouse",
image: "https://upforme.ru/uploads/001c/54/02/39/305476.gif"
}, {
x: 34,
y: 69,
title: "Фуд-трак Isabella tratar",
description: "Лучшая мексиканская еда в уличной забегаловке, которая колесит исключительно по территории Западного Картеля. Тако, чимичанги, гордита, буррито, кесадилья, тамале и кое-что еще из секретного меню. Невероятный острый и пряный запах скажет о приближении фургончика даже раньше, чем вы услышите шум мотора и колоритную мексиканскую музыку. Порции большие и настолько вкусные, что за фургончиком ведут охоту многие любители. Попробуй успеть первым в этой занимательной охоте, где приходится быть либо хитрым, либо наглым. Изабелла угощает! Загадочна Изабелла, о которой продавец-мужчина средних лет отказывается рассказать историю, послужившую причиной назвать свою закусочную именно так. Что это, как не дополнительные кольца халапеньо в подогреваемую охоту каждую среду, пятницу, субботу и воскресенье!",
icon: "fa-pepper-hot",
image: "https://upforme.ru/uploads/001c/54/02/39/340764.gif"
}, {
x: 40,
y: 47,
title: "Baltimore Museum of Industry",
description: "Ботанический сад, является частью Индустриального музея Балтимора. Он включает разнообразные виды растений, от экзотических цветов и папоротников до организованных коллекций в оранжереях под стеклянным куполом. Здесь можно прогуляться по ухоженным дорожкам среди зелени, насладиться красотой ярких цветов и неспешным плаванием декоративных карпов или другой живности в пруду. Особое впечатление создают элементы скульптуры переплетающиеся с природным орнаментом, а в лабиринте из живой изгороди можно заплутать.",
icon: "fa-seedling",
image: "https://i.postimg.cc/90K5w1tc/My-Collages-10.jpg"
}, {
x: 50,
y: 69,
title: "Бизнес-центр Riverside Park",
description: "Величественное стеклянное здание с двумя небоскребами недалеко от Риверсайд Парка - настоящий город в миниатюре. Первые десять этажей занимает торговый центр. В нем располагается многообразие кафе и ресторанов, несколько магазинов с одеждой, в том числе дорогие бутики, зоны отдыха и фитнес-центр. В углублении ресепшен и проходная к лифтам. А над ним пять этажей занимает частная клиника доктора Хопкинса с широким спектром услуг. Следующие двадцать этажей отведены под фешенебельный отель, особой гордостью которого является терраса с оранжерей, открытым, подогреваемым зимой бассейном, небольшой сценой, танцполом и баром. Оставшиеся этажи башен отведены под коммерческие помещения и жилой фонд. Левая башня - офисы двух организаций BLC и Storm. Правая выкуплена под корпоративные квартиры.",
icon: "fa-city",
image: "https://upforme.ru/uploads/001c/54/02/36/868290.gif"
}, {
x: 73,
y: 64,
title: "Жилищный комплекс Amber",
description: "Жилищный комплекс «Янтарь» расположен в одном из самых оживленных районов территории Золотой Бухты. Там предпочитают снимать квартиры временно или жить на постоянной основе те, кто желает быть в курсе последних событий и всех свежих сплетен. Некоторые соседи те еще болтуны, которые за выгулом собак могут увидеть что-то интересное или явно скандальное. Только успевай слушать! Зеленые парки, длинные беговые дорожки, уличные тренажеры, фонтаны. Небольшие тематические кафе на любой вкус. Широкие дороги с редкими пробками. А также то и дело заезжающие на территорию дорогие машины. Круглосуточный мишленовский ресторан с недешевым баром. Тайные переговоры и многомиллионные сделки, которые совершаются под прикрытием «семейных» встреч.",
icon: "fa-house",
image: "https://upforme.ru/uploads/001c/54/02/39/714369.gif"
}, {
x: 73,
y: 23,
title: "Green Mount Cemetery ",
description: " Историческое кладбище Грин-Маунт — сельское кладбище, расположенное в Балтиморе, штат Мэриленд. Огромная территория расположенна на холме, окружена зелёными лесами, ухоженными лужайками. Территория разбита на аллеи и дорожки, которые пролегают между живописными могилами и памятниками. Среди столетних дубов и кленов, встречаются скромные надгробия. Внушительные мавзолеи увидишь на могилах известных политиков, военных, писателей и представителей знатных семей Балтимора. Многие могилы украшены скульптурами — ангелов или фигурами святых, что символично для места. В глубине расположены несколько колумбариев, павильонов и часовен в неоготическом стиле, украшенных витражами и резьбой по камню. Памятники выполнены из мрамора и гранита, а некоторые работы принадлежат именитым почившим мастерам. Кладбище веет величественность и умиротворением, только редкий крик ворона нарушает покой.",
icon: "fa-cross",
image: "https://i.ibb.co/wNFHdxbb/image.jpg"
}, {
x: 90,
y: 50,
title: "Сгоревший дом Грэйд (2-го босса Зол.Бухты)",
description: "Дом второго дона Золотой бухты К.Грэйда. 20 лет назад здесь находился обширный участок с благоустроенным двором для большой семьи. Двухэтажный просторный дом располагался в живописном зелёном районе пригорода. За ним простирался аккуратный двор с ухоженными клумбами, зелёным газоном и местами для семейного отдыха. Сегодня территория заброшена после случившегося пожара. Участок остался не обустроенным, однако остатки выгоревших построек были демонтированы.",
icon: "fa-house",
image: "https://upforme.ru/uploads/001c/54/02/9/281928.png"
}, {
x: 51,
y: 73,
title: "Грузовой порт и склад BLC",
description: "Главный грузовой порт города, оборудованный мощными высотными кранами для выгрузки с судов контейнеров любой весовой категории. Имеет целую линию для фрахтования около десяти крупных судов одновременно вдоль одного из берегов полуострова. Один большой склад для обычной продукции и отдельный склад поменьше под нужды Иллюзиона. Складское помещение разделено на секции под разные виды товаров, оборудовано отдельными помещениями для поддержания необходимой температуры и влажности. Большой и маленький склады оснащены удобными подъездными дорожками для одновременной погрузки пяти и двух грузовых тягачей соответственно. Так же на территории имеются контрольные весы для прицепов и опорный таможенный пункт.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/37/423738.jpg"
}, {
x: 28,
y: 53,
title: "Логистический центр BLC «Север»",
description: "Три крупных склада, одинаково оснащенные в трех районах города, два из которых — с разрешения двух группировок, с которыми Иллюзион ведет торговлю — Синдикатом и Империей. Занимают внушительную территорию, позволяющую заниматься операционной деятельностью в полном объеме, практически никогда не бывают загружены более чем на восемьдесят процентов, что позволяет свободно принимать партии продукции без потерь и промедлений. Оборудованы современными технологиями пожаротушения и передовой охранной сигнализацией. Имеют отдельное помещение для регулярного нахождения на территории членов организации Шторма, обеспечивающих безопасность.",
icon: "fa-truck",
image: "https://upforme.ru/uploads/001c/54/02/37/380372.jpg"
}, {
x: 63,
y: 45,
title: "Логистический центр BLC «Восток»",
description: "Три крупных склада, одинаково оснащенные в трех районах города, два из которых — с разрешения двух группировок, с которыми Иллюзион ведет торговлю — Синдикатом и Империей. Занимают внушительную территорию, позволяющую заниматься операционной деятельностью в полном объеме, практически никогда не бывают загружены более чем на восемьдесят процентов, что позволяет свободно принимать партии продукции без потерь и промедлений. Оборудованы современными технологиями пожаротушения и передовой охранной сигнализацией. Имеют отдельное помещение для регулярного нахождения на территории членов организации Шторма, обеспечивающих безопасность.",
icon: "fa-truck",
image: "https://upforme.ru/uploads/001c/54/02/37/380372.jpg"
},
/* {
x: 55,
y: 35,
title: "Piazza",
description: "Descrizione dettagliata del terzo punto di interesse.",
icon: "fa-monument",
image: "https://i.imgur.com/random3.jpg"
}, */
];
// Точки интереса ИЛЛЮЗИОН
const territoryPoints = [
{
x: 52,
y: 80,
title: "Baltimore Cruise Port",
description: "Круизный порт Балтимора, расположенный на реке Патапско в бухте Уайнанс-Коув, является идеальным местом для начала незабываемого путешествия. Находясь всего в 3 милях от центра Балтимора и рядом с международным аэропортом, порт предлагает удобный доступ для пассажиров со всего региона. Каждый год более полумиллиона туристов отправляются отсюда в увлекательные круизы к Багамам, Бермудам, Карибским островам, Новой Англии и вдоль атлантического побережья Канады. Близость к основным достопримечательностям города позволяет путешественникам идеально совместить изучение Балтимора с предстоящими приключениями на воде.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/157548.png"
},
{
x: 36,
y: 38,
title: "Port of Baltimore",
description: "Морской порт, расположенный в приливных бассейнах трёх рукавов реки Патапско в Балтиморе, штат Мэриленд, на верхнем северо-западном берегу Чесапикского залива Атлантического океана. Это крупнейший в Соединённых Штатах Америки портовый комплекс для специализированных грузов (судов-ролкеров) и пассажирских судов. Он находится в ведении Администрации порта Мэриленда — подразделения департамента транспорта Мэриленда",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/161779.png"
},
{
x: 11,
y: 41,
title: "Ориол-парк на Кемден-ярдс",
description: "«Ориол-парк на Кемден-ярдс» (англ. Oriole Park at Camden Yards) или просто «Кемден-ярдс» — бейсбольный стадион, расположенный в Балтиморе. Является домашним стадионом клуба Главной лиги бейсбола «Балтимор Ориолс». Вместимость стадиона «Кэмден-Ярдс» составляет 45 971 место, включая клубный уровень и верхнюю площадку.",
icon: "fa-baseball-bat-ball",
image: "https://upforme.ru/uploads/001c/54/02/9/37712.png"
},{
x: 22,
y: 31,
title: "Малая штаб квартира Иллюзиона",
description: "Комфортный офис на верхнем этаже: панорамные окна с видом на гаванью, минималистичный интерьер в тёмных тонах, стеклянные перегородки для переговорных, скрытые серверные и защищённый бокс для документации, комната отдыха, пункт контроля доступа и система видеонаблюдения.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/859593.png"
},
{
x: 26,
y: 41,
title: "Апартаменты руководства Иллизион",
description: "Здание в бизнес-центре Балтимора, полностью выкупленное под нужды корпорации Иллюзион. Рабочие и жилые шикарные двухуровневые апартаменты разных площадей с панорамными окнами на гавань, элегантный интерьер в тёмных и металлических тонах, просторная гостиная, кабинет с защищённой мини‑серверной, с ванной комнатой, полностью оснащённая кухня, гардеробные, комната для переговоров, система умного дома, безопасная входная зона и персонал‑консьерж. На первом этаже небольшой ресторанчик сети Sapori d’Italia, на минус первом этаже - помещение с оснащенной прачечной, остальные минус второй третий этаж - подземный паркинг.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/583957.png"
}, {
x: 38,
y: 20,
title: "Baltimore Police Department Heliport",
description: "Вертолетная площадка Департамента полиции Балтимора является ключевым элементом системы оперативного реагирования и обеспечения безопасности в округе. Авиационная группа активно занимается воздушным наблюдением за значительными критическими инцидентами, предоставляя в режиме реального времени микроволновый видеосигнал на командный пункт департамента по чрезвычайным ситуациям. Помимо стандартного патрулирования, площадка играет важную роль в проведении поисково-спасательных операций, где профессионалы авиационной группы сотрудничают с тактическими спасателями из пожарной части № 17 округа Балтимор. Это сотрудничество позволяет эффективно реагировать на чрезвычайные ситуации, обеспечивая быструю помощь и безопасность граждан.",
icon: "fa-plane",
image: "https://upforme.ru/uploads/001c/54/02/9/341787.png"
},{
x: 45,
y: 7,
title: "Малая штаб квартира Восточной Империи",
description: "Небольшое трёхэтажное здание с невысоким фасадом и охраняемой территорией. Первый этаж — ресепшн и переговорная; второй — офисы руководства и секретариат; третий — стратегическая комната, архив и комната отдыха. Мини‑сервер, CCTV, скуд-контроль, автономное электропитание и маскируемая аварийная эвакуация.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/873734.png"
}, {
x: 53,
y: 43,
title: "Малая штаб квартира Золотой Бухты",
description: "Небольшой офис на 2–5 этаже в одном из пятнадцатиэтажном здании, замаскированный под консалтинговую фирму. Ресепшн с подставным персоналом, несколько смежных кабинетов для встреч, комната для аналитики и хранения документов. Простая система видеонаблюдения, локальная сеть с шифрованием, аварийный выход и запасные ключи. Низкая внешняя заметность, деловой антураж. Рядом располагаются с внешней стороны ресторанчики, фитнес клубы, модные бутики, внутренняя территория закрытая, есть подъезды на подземный паркинг. Внутренний дворик более обустроенный, есть бассейн, зона комфортабельного отдыха.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/660747.png"
}, {
x: 54,
y: 49,
title: "Harbor Point Park",
description: "Парк Пойнт, ранее известный как парк Раш-Филд, расположенный в оживленной и живописной Внутренней гавани Балтимора, служит свидетельством стремления города к возрождению городских пространств. Эта исключительная зона отдыха в настоящее время переживает масштабную реконструкцию, превращающую её в скрытый оазис, гармонично сочетающий в себе пышную зелень, современную инфраструктуру и захватывающие виды на набережную.",
icon: "fa-tree",
image: "https://upforme.ru/uploads/001c/54/02/9/354688.png"
}, {
x: 95,
y: 50,
title: "Набережная Кантон",
description: " Пристань Лайтхаус Пойнт — это ваши ворота в парк Кантон-Уотерфронт и достопримечательности Балтимора, где вы сможете погрузиться в местную культуру, рестораны и развлечения: Бар Drift расположенный на пристани Lighthouse Point Marina, Drift — идеальное место для отдыха на любой вкус: от неторопливых вечерних посиделок до оживленных вечерних посиделок. Парк Кантон-Уотерфронт, расположенный на живописном участке между Бостон-стрит и Балтиморской гаванью. Это идеальное место для пикника и излюбленное место для наблюдения за захватывающими событиями, такими как авиашоу «Голубые ангелы» или прибытие больших парусных кораблей во Внутреннюю гавань.",
icon: "fa-anchor",
image: "https://upforme.ru/uploads/001c/54/02/9/507126.png"
}, {
x: 90,
y: 53,
title: "Lighthouse Point Marina",
description: "идеально расположенная на знаменитой набережной Кантон - это живописный уголок в Балтиморе , где сочетание красоты природы и великолепной атмосферы создает идеальное место для отдыха и развлечений. Марина располагается вдоль живописного побережья, обеспечивая потрясающие виды на воду и город. Здесь можно арендовать яхты, наслаждаться прогулками на катерах или просто расслабиться на берегу, под солнечными лучами. У моря расположены уютные кафе и рестораны, где можно насладиться местной кухней. Lighthouse Point Marina станет идеальным местом для семьи и друзей, ищущих увлекательные приключения и отдых.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/939353.png"
},
{
x: 9,
y: 53,
title: "Эм-энд-ти Банк Стэдиум",
description: "«Эм-энд-ти Банк Стэдиум» (англ. M&T Bank Stadium) — футбольный стадион, расположенный в городе Балтимор, штат Мэриленд. Домашний стадион футбольной команды «Балтимор Рэйвенс». Трибуны стадиона состоят из четырёх уровней и вмещают до 71 008 человек.",
icon: "fa-football",
image: "https://upforme.ru/uploads/001c/54/02/9/604400.png"
},
{
x: 19,
y: 18,
title: "Ночной клуб The Luna's Throne",
description: "Клуб на верхнем этаже небоскреба, который выделяется своей уникальной формой и стеклянными фасадами, отражающими огни ночного города. Внутри царит загадочная и элегантная атмосфера с роскошным оформлением в фиолетовых тонах с золотом. Динамические проекции на стенах меняются в зависимости от времени суток и настроения гостей. Просторный зал разделен на уровни, предлагая уютные уголки и масштабные танцевальные площадки с высокими потолками и мощной акустикой. Современные технологии, такие как интерактивные экраны и системы виртуальной реальности, позволяют посетителям погружаться в уникальные музыкальные и визуальные миры.",
icon: "fa-solid fa-martini-glass-citrus",
image: "https://upforme.ru/uploads/001c/54/02/5/583482.png"
},
{
x: 78,
y: 28,
title: "Кофейня The Scent of Words",
description: "Великолепие кофейни с книгами раскрывается в каждом элементе декора: светлые тона инкрустированные деревом, создают уютную атмосферу. Пространство делится зоны - просторная библиотека с книгами на любой вкус и уютное место у панорамных окон с мягкими подушками и видом на улицу. Столиков не так много, но для желающих всегда найдется место. Фишка заведения— свежие цветы на столиках и возможность выбрать книгу или свежий номер газеты к кофе. Для постоянных посетителей, каждый десятый кофе бесплатно. В воздухе витает запах свежесваренного кофе, переплетённый с нежным ароматом только что выпеченной сладкой выпечки — ягоды и сливочный крем делают её еще более соблазнительной. После четырёх часов здесь действует скидка на выпечку.",
icon: "fa-mug-hot",
image: "https://upforme.ru/uploads/001c/54/02/41/164492.jpg"
}, {
x: 34,
y: 72,
title: "Бизнес-центр Riverside Park",
description: "Величественное стеклянное здание с двумя небоскребами недалеко от Риверсайд Парка - настоящий город в миниатюре. Первые десять этажей занимает торговый центр. В нем располагается многообразие кафе и ресторанов, несколько магазинов с одеждой, в том числе дорогие бутики, зоны отдыха и фитнес-центр. В углублении ресепшен и проходная к лифтам. А над ним пять этажей занимает частная клиника доктора Хопкинса с широким спектром услуг. Следующие двадцать этажей отведены под фешенебельный отель, особой гордостью которого является терраса с оранжерей, открытым, подогреваемым зимой бассейном, небольшой сценой, танцполом и баром. Оставшиеся этажи башен отведены под коммерческие помещения и жилой фонд. Левая башня - офисы двух организаций BLC и Storm. Правая выкуплена под корпоративные квартиры.",
icon: "fa-city",
image: "https://upforme.ru/uploads/001c/54/02/36/868290.gif"
}, {
x: 29,
y: 75,
title: "Жилой комплекс Sail",
description: "Престижный жилой комплекс премиум-класса «Sail» с продуманной концепцией. Три высотных здания, верхние этажи которых соединены галереей. Здесь размещены апартаменты различной планировки: от четырехкомнатных до двухуревневых. Удачное местоположение комплекса обеспечивает превосходную транспортную доступность. Близость к ключевым городским магистралям позволяет быстро перемещаться в любую часть города. Комплекс предлагает полный спектр удобств: подземный и надземный паркинг, детские и спортивные площадки, бассейн, зона отдыха, обширное озеленение включает газоны, декоративные деревья и кустарники. В шаговой доступности находятся образовательные учреждения. ЖК находится под охраной частной охранной фирмы Шторм, на входе/въезде действует пропускной режим.",
icon: "fa-house",
image: "https://upforme.ru/uploads/001c/54/02/36/844568.jpg"
}, {
x: 38,
y: 26,
title: "Бизнес-центр EcoSky Office Park",
description: "Здание офиса представляет собой современное сооружение высотой около десяти этажей. Строгие линии фасада, выполненные в черно-белом цвете, в стиле минимализма, отличаясь лаконичностью форм и четкостью линий. Панорамные окна создают иллюзию простора и наполняют пространство естественным светом. Внутренняя отделка выполнена преимущественно светлыми оттенками, визуально расширяя пространство. Интерьер гармонично сочетает функциональность и эстетику, способствуя продуктивной работе коллектива. Просторные коридоры соединяют рабочие зоны, конференц-залы и зону отдыха сотрудников. Первые 3 этажа выкуплены для вашингтонского филиала компании по автоматизации нефтяной промышленности «Washington Pipeline Systems»",
icon: "fa-city",
image: "https://upforme.ru/uploads/001c/54/02/9/805206.png"
}, {
x: 16,
y: 73,
title: "Логистический центр BLC «Главный»",
description: "Три крупных склада, одинаково оснащенные в трех районах города, два из которых — с разрешения двух группировок, с которыми Иллюзион ведет торговлю — Синдикатом и Империей. Занимают внушительную территорию, позволяющую заниматься операционной деятельностью в полном объеме, практически никогда не бывают загружены более чем на восемьдесят процентов, что позволяет свободно принимать партии продукции без потерь и промедлений. Оборудованы современными технологиями пожаротушения и передовой охранной сигнализацией. Имеют отдельное помещение для регулярного нахождения на территории членов организации Шторма, обеспечивающих безопасность.",
icon: "fa-truck",
image: "https://upforme.ru/uploads/001c/54/02/37/380372.jpg"
},
];
const mapPoints = {
'town-map': townPoints,
'territory-map': territoryPoints
};
function initializeMap(mapId) {
const mapContainer = document.getElementById(mapId);
const points = mapPoints[mapId];
// Удалить существующие точки
const existingPoints = mapContainer.querySelectorAll('.map-point');
existingPoints.forEach(point => point.remove());
// Добавить новые точки
points.forEach(point => {
const marker = createMarker(point);
mapContainer.appendChild(marker);
});
}
function createMarker(point) {
const marker = document.createElement('div');
marker.className = 'map-point';
if (point.showLabel) {
marker.classList.add('with-label');
}
// Создайте значок
const icon = document.createElement('i');
icon.className = `fa-solid ${point.icon}`;
marker.appendChild(icon);
// Создайте метку заголовка, если это точка территории, с помощью showLabel
if (point.showLabel) {
const title = document.createElement('span');
title.className = 'point-title';
title.textContent = point.title;
marker.appendChild(title);
}
marker.style.left = `${point.x}%`;
marker.style.top = `${point.y}%`;
marker.addEventListener('click', (e) => {
e.stopPropagation();
handleMarkerClick(marker, point);
});
return marker;
}
function handleMarkerClick(marker, point) {
if (activePoint) {
activePoint.classList.remove('active');
}
marker.classList.add('active');
activePoint = marker;
const popup = document.querySelector('.info-popup');
popup.querySelector('h3').textContent = point.title;
popup.querySelector('p').textContent = point.description;
popup.querySelector('img').src = point.image;
popup.querySelector('img').alt = point.title;
popup.style.display = 'block';
positionPopup(marker);
}
function positionPopup(marker) {
const popup = document.querySelector('.info-popup');
const rect = marker.getBoundingClientRect();
const popupRect = popup.getBoundingClientRect();
const containerRect = marker.closest('.map-container').getBoundingClientRect();
// Всегда размещайте справа от маркера
let left = rect.right + 10;
// Если справа нет места, поместите слева
if (left + popupRect.width > containerRect.right - 10) {
left = rect.left - popupRect.width - 10;
}
// Центрировать по вертикали относительно маркера
let top = rect.top + (rect.height / 2) - (popupRect.height / 2);
// Убедитесь, что он не выходит за вертикальные края
if (top < containerRect.top + 10) {
top = containerRect.top + 10;
} else if (top + popupRect.height > containerRect.bottom - 10) {
top = containerRect.bottom - popupRect.height - 10;
}
popup.style.left = `${left}px`;
popup.style.top = `${top}px`;
}
// Управление вкладками
const tabs = document.querySelectorAll('.tab');
let activePoint = null;
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Удалить класс active из всех вкладок и карт
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.map-container').forEach(m => m.classList.remove('active'));
// Добавить класс active на вкладку, которую вы щелкнули
tab.classList.add('active');
// Показать соответствующую карту
const mapType = tab.dataset.map;
const mapId = `${mapType}-map`;
document.getElementById(mapId).classList.add('active');
// Скрыть всплывающее окно
document.querySelector('.info-popup').style.display = 'none';
if (activePoint) {
activePoint.classList.remove('active');
activePoint = null;
}
// Инициализировать карту
initializeMap(mapId);
});
});
// Инициализация
initializeMap('town-map');
// Обработка закрытия всплывающего окна
const closeButton = document.querySelector('.close-button');
const popup = document.querySelector('.info-popup');
closeButton.addEventListener('click', () => {
popup.style.display = 'none';
if (activePoint) {
activePoint.classList.remove('active');
activePoint = null;
}
});
document.addEventListener('click', (e) => {
if (!popup.contains(e.target) && !e.target.classList.contains('map-point')) {
popup.style.display = 'none';
if (activePoint) {
activePoint.classList.remove('active');
activePoint = null;
}
}
});
</script>
</body>
</html>[/html]



























