[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]