Добро пожаловать в квест "Кровавая Луна"!
Legion
Blood Feast
Страница: 1
Сообщений 1 страница 12 из 12
Поделиться12024-03-07 23:45:50
- Администратор
- Зарегистрирован: 2024-03-06
- Сообщений: 78
- Уважение: +2
- bank: 40 $
- exp: 16
- Последний визит:
2026-07-20 11:48:30
Поделиться22025-12-22 12:05:15
- Администратор
- Зарегистрирован: 2024-03-06
- Сообщений: 78
- Уважение: +2
- bank: 40 $
- exp: 16
- Последний визит:
2026-07-20 11:48:30
ы
Поделиться32025-12-28 20:34:16
- Администратор
- Зарегистрирован: 2024-03-06
- Сообщений: 78
- Уважение: +2
- bank: 40 $
- exp: 16
- Последний визит:
2026-07-20 11:48:30
новое
Поделиться52026-02-17 13:12:59
- принц подворотни
- Маг [Синдикат]Старший менеджер Iridium InsightСферы: Основы, Данные, Энтропия
- Зарегистрирован: 2024-03-08
- Сообщений: 35
- Уважение: +2
- bank: 690 $
- exp: 1
- Последний визит:
2026-03-15 11:06:41
тест
Поделиться72026-02-17 13:26:47
- Администратор
- Зарегистрирован: 2024-03-06
- Сообщений: 78
- Уважение: +2
- bank: 40 $
- exp: 16
- Последний визит:
2026-07-20 11:48:30
ваыва
Поделиться82026-02-19 13:08:32
Добро пожаловать в квест "Кровавая Луна"!
Поделиться92026-02-19 13:09:42
- Администратор
- Зарегистрирован: 2024-03-06
- Сообщений: 78
- Уважение: +2
- bank: 40 $
- exp: 16
- Последний визит:
2026-07-20 11:48:30
ответ
Поделиться102026-02-20 21:47:32
- принц подворотни
- Маг [Синдикат]Старший менеджер Iridium InsightСферы: Основы, Данные, Энтропия
- Зарегистрирован: 2024-03-08
- Сообщений: 35
- Уважение: +2
- bank: 690 $
- exp: 1
- Последний визит:
2026-03-15 11:06:41
[html]
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Карта Сиэтла</title>
<link rel="stylesheet" href="https://forumstatic.ru/files/001c/3d/c8/51418.css?v=4">
</head>
<body>
<div class="map-wrapper">
<div class="map-header">
<h1>Карта Сиэтла</h1>
<p>Blood Moon Chronicles | 2026</p>
</div>
<div class="filters">
<button class="filter-btn active" data-filter="all" onclick="applyFilter('all')">Все</button>
<button class="filter-btn" data-filter="gangs" onclick="applyFilter('gangs')">Банды Сиэтла</button>
<button class="filter-btn" data-filter="districts" onclick="applyFilter('districts')">Районы Сиэтла</button>
<button class="filter-btn" data-filter="kindred" onclick="applyFilter('kindred')">Места сородичей</button>
<button class="filter-btn" data-filter="other" onclick="applyFilter('other')">Места других</button>
</div>
<div class="map-container" id="mapContainer" onclick="hideAllTooltips(event)">
<img src="https://upforme.ru/uploads/001c/3d/c8/58/895305.png" alt="Карта Сиэтла" class="seattle-map-image" id="seattleMapImage">
<div id="markersContainer"></div>
<div class="tooltip" id="tooltip">
<div class="tooltip-image-placeholder" id="tooltipImage">Изображение района</div>
<div class="tooltip-content">
<h3 class="tooltip-title" id="tooltipTitle">Название</h3>
<p class="tooltip-district" id="tooltipDistrict">Район</p>
<p class="tooltip-description" id="tooltipDescription">Описание...</p>
<div class="tooltip-influence">
<div class="influence-icon" id="tooltipIcon"></div>
<div class="influence-text">
<div class="influence-label">Влияние</div>
<div class="influence-value" id="tooltipInfluence">Фракция</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
<div class="modal-window">
<button class="modal-close" onclick="closeModalBtn()">×</button>
<div class="modal-image-placeholder" id="modalImage">Изображение локации</div>
<div class="modal-content">
<h3 class="modal-title" id="modalTitle">Название</h3>
<p class="modal-district" id="modalDistrict">Район</p>
<p class="modal-description" id="modalDescription">Описание...</p>
<div class="modal-faction" id="modalFaction">Фракция</div>
</div>
</div>
</div>
<div class="legend">
<div class="legend-title">Влияние Фракций</div>
<div class="legend-item"><div class="legend-color" style="background: #ffd700;"></div><span class="legend-name">Камарилья</span></div>
<div class="legend-item"><div class="legend-color" style="background: #ff6b35;"></div><span class="legend-name">Анархи</span></div>
<div class="legend-item"><div class="legend-color" style="background: #666666;"></div><span class="legend-name">Нейтральные</span></div>
<div class="legend-item"><div class="legend-color" style="background: #000000; border-color: #c41e3a;"></div><span class="legend-name">Пустые</span></div>
<div class="legend-item"><div class="legend-color" style="background: #00bcd4;"></div><span class="legend-name">Технократы</span></div>
<div class="legend-item"><div class="legend-color" style="background: #2d5016;"></div><span class="legend-name">Гару</span></div>
</div>
</div>
<script type="text/javascript">
// seattle-map.js
// Карта Сиэтта — Blood Moon Chronicles
// ВАЖНО: Сохранить в кодировке UTF-8 без BOM!
var locationsData = [
// БАНДЫ СИЭТЛА (6 локаций)
{ id: 'central-district', name: 'Центральный Район', category: 'gangs', district: 'Central District', description: 'Центральный район Сиэтла исторически сформировался как место проживания афроамериканцев и других этнических меньшинств из-за расовой сегрегации. В середине XX века он стал основным местом для чернокожего населения, где многие работали на заводах, верфях и железнодорожных линиях. В 1960-1970-х годах здесь активизировались движения за гражданские права и "Черные пантеры". К 1980-1990-м район столкнулся с проблемой уличных банд, таких как Bloods.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/800595.png', x: 58, y: 52 },
{ id: 'yesler-terrace', name: 'Йеслер-Террас', category: 'gangs', district: 'Yesler Terrace', description: 'Район построен в начале 1940-х годов, стал первым интегрированным жилым комплексом в стране. К 1980-м приобрёл дурную славу из-за активности банд The Bloods. В начале 2010-х район был реконструирован.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/715252.png', x: 56, y: 56 },
{ id: 'high-point', name: 'Хай-Пойнт', category: 'gangs', district: 'High Point', description: 'Расположен в Западном Сиэтле. Построен во время Второй мировой войны. К 1970-1980-м годам стал известен связью с уличными бандами Bloods и Crips.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/834252.png', x: 32, y: 62 },
{ id: 'holly-park', name: 'Холли-Парк', category: 'gangs', district: 'Holly Park', description: 'Известен как "Криминальный квартал". Жилой комплекс в южной части Сиэтла. К концу 1990-х снесён, на его месте возник New Holly Park.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/100917.png', x: 48, y: 72 },
{ id: 'south-end', name: 'Саут-Энд', category: 'gangs', district: 'South End', description: 'Центр деятельности банд Crips, Hoovers и Gangster Disciples. Появление бандитской культуры в 1980-1990-х годах, связанное с ростом торговли наркотиками.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/842468.png', x: 55, y: 78 },
{ id: 'south-park', name: 'Южный Парк', category: 'gangs', district: 'South Park', description: 'Один из старейших районов города, центр испаноязычного сообщества. Арена деятельности банд Sureno.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/562831.png', x: 42, y: 82 },
// РАЙОНЫ СИЭТЛА (8 локаций)
{ id: 'belltown', name: 'Беллтаун', category: 'districts', district: 'Belltown', description: 'Район известен творческой атмосферой, ресторанами, ночными клубами и живой музыкой. Центр культурной жизни города с множеством скрытых переулков и подземелий.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/685439.png', x: 48, y: 45 },
{ id: 'downtown-seattle', name: 'Даунтаун', category: 'districts', district: 'Downtown Seattle', description: 'Финансовый центр с офисами Amazon и Starbucks. Есть высотные здания для наблюдения, много подземных переходов и тоннелей.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/400909.png', x: 52, y: 52 },
{ id: 'capitol-hill', name: 'Кэпитол Хилл', category: 'districts', district: 'Capitol Hill', description: 'Район знаменит либеральной культурой, гей-сообществом и множеством ночных заведений. Центр молодежной культуры.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/977172.png', x: 60, y: 48 },
{ id: 'pike-place-market', name: 'Пайк Плейс Маркет', category: 'districts', district: 'Pike Place Market', description: 'Исторический рынок с 1907 года. Оживленное место днем и ночью с множеством тайных ходов и потайных мест.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/459660.png', x: 50, y: 50 },
{ id: 'seattle-underground', name: 'Подземный Город', category: 'districts', district: 'Seattle Underground', description: 'После пожара 1889 года центр отстроили поверх старых улиц. Сеть заброшенных тоннелей с фасадами зданий и витринами.', faction: 'empty', image: 'https://i.postimg.cc/65z1ZMQL/Podzemnyj-sietl.jpg', x: 51, y: 54 },
{ id: 'pioneer-square', name: 'Сквер Первопроходцев', category: 'districts', district: 'Pioneer Square', description: 'Первый исторический район с подземельями Сиэтла — остатками старых уровней улиц. Много старинных зданий.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/501438.png', x: 52, y: 56 },
{ id: 'waterfront', name: 'Уотерфронт', category: 'districts', district: 'Seattle Waterfront', description: 'Прибрежная зона с пирсами и парками. Место скопления контрабандистов, отличные точки для наблюдения.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/889316.png', x: 46, y: 52 },
{ id: 'chinatown', name: 'Чайнатаун', category: 'districts', district: 'Chinatown-International District', description: 'Район с богатой азиатской культурой. Много тайных обществ и кланов, находится под властью Анархов.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/156746.png', x: 56, y: 58 },
// ВАЖНЫЕ МЕСТА СОРОДИЧЕЙ (12 локаций)
{ id: 'dutchman', name: 'Бар Голландец', category: 'kindred', district: 'The Dutchman', description: 'Бар Симеона Ладока. Здесь встречаются философы и революционеры. Доступ: свободный. Можно встретиться с Примогеном Бруджа.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/322914.png', x: 47, y: 47 },
{ id: 'hole-in-wall', name: 'Бар Дыра в стене', category: 'kindred', district: 'The Hole in the Wall', description: 'Мрачный анарх-бар в индустриальных окраинах. Доступ: свободный. Можно найти союзников и пообщаться с Бароном Кацуми Исидзаки.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/332200.png', x: 44, y: 65 },
{ id: 'atrium', name: 'Клуб Атриум', category: 'kindred', district: 'The Atrium', description: 'Клуб-галерея Язабеллы Мур. Экзотические представления. Доступ: строгий фейс-контроль. Можно встретить Примогена Тореадор.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/889325.png', x: 54, y: 49 },
{ id: 'hush', name: 'Клуб Хаш', category: 'kindred', district: 'Hush', description: 'Клуб для избранных гурманов. Исключительные букеты из уникальных сосудов. Доступ: по приглашению. Можно встретить секретаря Примогена Вентру.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/567352.png', x: 53, y: 51 },
{ id: 'wake-the-dead', name: 'Разбуди мёртвых', category: 'kindred', district: 'Wake the Dead', description: 'Ночная кофейня Примогена Тремер. Сюда приходят за тайной информацией. Доступ: частично открыт. Можно пообщаться с Амелией Торн.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/22070.png', x: 59, y: 50 },
{ id: 'macomb-bar', name: 'Макомб Бар', category: 'kindred', district: 'Macomb Bar', description: 'Приватный лаунж Вентру. Здесь плетутся интриги и подписываются приговоры. Доступ: только по приглашению.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/112141.png', x: 55, y: 53 },
{ id: 'aurora-pawn', name: 'Ломбард Аврора', category: 'kindred', district: 'Aurora Pawn', description: 'Ломбард Нико Ангелова с магическими артефактами. Доступ: для всех, кто готов рискнуть. Можно получить поручение от Примогена Бану Хаким.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/58617.png', x: 40, y: 35 },
{ id: 'glacier-hotel', name: 'Отель Ледник', category: 'kindred', district: 'Glacier Hotel', description: 'Роскошный отель с начала 20 века. Лу Грэм можно найти в пентхаусе. Доступ: свободный.', faction: 'camarilla', image: 'https://i.postimg.cc/65BmTkBj/Lednik.jpg', x: 51, y: 48 },
{ id: 'psychiatric-clinic', name: 'Психиатрическая клиника', category: 'kindred', district: 'Psychiatric Clinic', description: 'Клиника доктора Шурова для изоляции шабашитов. Доступ: по пропуску. Можно встретить Примогена Малкавиан.', faction: 'camarilla', image: 'https://i.postimg.cc/GhzSDXpx/psihiatriceskaa-lecebnica.jpg', x: 62, y: 42 },
{ id: 'pike-place-kindred', name: 'Рынок Пайкс-Плейс', category: 'kindred', district: 'Pike Place Market', description: 'Сердце города. В массе смертных можно найти кровь, информацию, союзников. Доступ: свободный.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/644777.png', x: 50, y: 51 },
{ id: 'pioneer-square-kindred', name: 'Сквер Первопроходцев', category: 'kindred', district: 'Pioneer Square', description: 'Под наблюдением сородичей-Первопроходцев. Доступ: свободный. Можно встретиться с Лу Гранд.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/278732.png', x: 52, y: 57 },
{ id: 'downtown-core', name: 'Финансовый район', category: 'kindred', district: 'Downtown Core', description: 'Деловое сердце Сиэтла, центр Вентру. Здесь особо следят за Маскарадом. Можно встретить Чистильщиков.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/834019.png', x: 53, y: 54 },
// МЕСТА СИЛЫ ДЛЯ ДРУГИХ (6 локаций)
{ id: 'discovery-park', name: 'Каэрн Манагери', category: 'other', district: 'Discovery Park', description: 'Парк Открытий — крупнейший зелёный оазис. Контролируется Стеклоходами. Подходит для ритуалов и собраний Гару.', faction: 'garou', image: 'https://upforme.ru/uploads/001c/3d/c8/30/955746.png', x: 28, y: 32 },
{ id: 'south-lake-union', name: 'Каэрн Малой воды', category: 'other', district: 'South Lake Union', description: 'Техноактивный центр Стеклоходов. Место для влияния на город через информационные атаки. Идеально для встреч Подменышей.', faction: 'garou', image: 'https://upforme.ru/uploads/001c/3d/c8/30/398432.png', x: 54, y: 42 },
{ id: 'pentex', name: 'Офис Пентекс', category: 'other', district: 'Pentex West Office', description: 'Офис корпорации Pentex. Здесь особенно сильно влияние Вирма, стены скрывают страшные тайны.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/274847.png', x: 50, y: 55 },
{ id: 'liquid-haze', name: 'Жидкая дымка', category: 'other', district: 'Liquid Haze', description: 'Кофейня для встреч магов-Одиночек в капитолийском районе. Иногда появляются феи и демоны из Умбры.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/965276.png', x: 61, y: 47 },
{ id: 'microsoft', name: 'Майкрософт', category: 'other', district: 'Microsoft HQ', description: 'Штаб Виртуальных Адептов. Маги взламывают реальность и создают магические вирусы.', faction: 'technocrat', image: 'https://upforme.ru/uploads/001c/3d/c8/30/128302.png', x: 65, y: 38 },
{ id: 'conjurers-cubbyhole', name: 'Закуток фокусника', category: 'other', district: 'Conjurers Cubbyhole', description: 'Магическая локация в полузаброшенной часовне. Здесь маги Традиций проводят ритуалы и обучают новичков.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/813242.png', x: 51, y: 58 }
];
var factionConfig = {
camarilla: { name: 'Камарилья', color: '#ffd700' },
anarch: { name: 'Анархи', color: '#ff6b35' },
neutral: { name: 'Нейтральные', color: '#666666' },
empty: { name: 'Пустые', color: '#000000' },
technocrat: { name: 'Технократы', color: '#00bcd4' },
garou: { name: 'Гару', color: '#2d5016' }
};
var categoryConfig = {
all: { title: 'Все локации', description: 'Полная карта Сиэтла со всеми отмеченными точками.' },
gangs: { title: 'Банды Сиэтла', description: 'Районы, контролируемые уличными бандами. Bloods, Crips, Hoover и другие группировки.' },
districts: { title: 'Районы Сиэтла', description: 'Основные районы города с их особенностями и историей.' },
kindred: { title: 'Места сородичей', description: 'Ключевые локации для вампиров Сиэтла — бары, клубы, убежища примогенов.' },
other: { title: 'Места других', description: 'Локации для Гару, магов, фей. Каэрны, техноактивные центры.' }
};
var currentFilter = 'all';
// ============================================
// ФУНКЦИИ КАРТЫ
// ============================================
function initMap() {
var container = document.getElementById('markersContainer');
if (!container) {
console.error('Контейнер не найден!');
return;
}
console.log('=== Инициализация карты ===');
console.log('Локаций:', locationsData.length);
for (var i = 0; i < locationsData.length; i++) {
createMarker(locationsData[i], container);
}
}
function createMarker(location, container) {
var marker = document.createElement('div');
marker.className = 'map-marker marker-' + location.faction;
marker.style.left = location.x + '%';
marker.style.top = location.y + '%';
marker.id = 'marker-' + location.id;
marker.setAttribute('data-category', location.category);
marker.setAttribute('data-faction', location.faction);
marker.onmouseover = (function(l) {
return function() {
showTooltip(l);
};
})(location);
marker.onmouseout = function() {
hideTooltip();
};
marker.onclick = (function(l) {
return function(event) {
event.stopPropagation();
openModal(l);
};
})(location);
container.appendChild(marker);
}
function showTooltip(location) {
var tooltip = document.getElementById('tooltip');
if (!tooltip) { return; }
var title = document.getElementById('tooltipTitle');
var district = document.getElementById('tooltipDistrict');
var description = document.getElementById('tooltipDescription');
var influence = document.getElementById('tooltipInfluence');
var icon = document.getElementById('tooltipIcon');
var imageContainer = document.getElementById('tooltipImage');
var marker = document.getElementById('marker-' + location.id);
if (!marker) { return; }
var faction = factionConfig[location.faction];
if (!faction) { faction = factionConfig.neutral; }
title.innerHTML = location.name;
district.innerHTML = '📍 ' + location.district;
description.innerHTML = location.description;
influence.innerHTML = faction.name;
icon.style.background = faction.color;
if (location.image && location.image.length > 5) {
imageContainer.innerHTML = '<img src="' + location.image + '" alt="' + location.name + '" class="tooltip-image">';
} else {
imageContainer.innerHTML = '📷 Изображение района';
}
var rect = marker.getBoundingClientRect();
var mapRect = document.getElementById('mapContainer').getBoundingClientRect();
tooltip.style.left = (rect.left - mapRect.left + 12) + 'px';
tooltip.style.top = (rect.top - mapRect.top) + 'px';
tooltip.className = 'tooltip active';
}
function hideTooltip() {
var tooltip = document.getElementById('tooltip');
if (tooltip) {
tooltip.className = 'tooltip';
}
}
function openModal(location) {
var overlay = document.getElementById('modalOverlay');
if (!overlay) { return; }
var title = document.getElementById('modalTitle');
var district = document.getElementById('modalDistrict');
var description = document.getElementById('modalDescription');
var faction = document.getElementById('modalFaction');
var imageContainer = document.getElementById('modalImage');
var factionData = factionConfig[location.faction];
if (!factionData) { factionData = factionConfig.neutral; }
title.innerHTML = location.name;
district.innerHTML = '📍 ' + location.district;
description.innerHTML = location.description;
faction.innerHTML = factionData.name;
faction.style.borderColor = factionData.color;
if (location.image && location.image.length > 5) {
imageContainer.innerHTML = '<img src="' + location.image + '" alt="' + location.name + '" class="modal-image">';
} else {
imageContainer.innerHTML = '📷 Изображение локации';
}
overlay.className = 'modal-overlay active';
document.body.style.overflow = 'hidden';
}
function closeModal(event) {
if (event.target.id === 'modalOverlay') {
closeModalBtn();
}
}
function closeModalBtn() {
var overlay = document.getElementById('modalOverlay');
if (overlay) {
overlay.className = 'modal-overlay';
}
document.body.style.overflow = 'auto';
}
function hideAllTooltips(event) {
var tooltip = document.getElementById('tooltip');
if (tooltip && (event.target.id === 'mapContainer' || event.target.id === 'seattleMapImage' || event.target.id === 'markersContainer')) {
hideTooltip();
}
}
function applyFilter(filter) {
var buttons = document.getElementsByClassName('filter-btn');
var markers = document.getElementsByClassName('map-marker');
var isActive = (currentFilter === filter);
for (var i = 0; i < buttons.length; i++) {
buttons[i].className = 'filter-btn';
}
if (isActive) {
currentFilter = 'all';
} else {
currentFilter = filter;
var activeBtn = document.querySelector('.filter-btn[data-filter="' + filter + '"]');
if (activeBtn) {
activeBtn.className = 'filter-btn active';
}
}
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
var category = marker.getAttribute('data-category');
if (currentFilter === 'all') {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction');
} else {
if (category === currentFilter) {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction');
} else {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction') + ' hidden';
}
}
}
}
// ============================================
// ИНИЦИАЛИЗАЦИЯ (ИСПРАВЛЕНАЯ)
// ============================================
if (document.readyState === 'complete') {
setTimeout(function() {
initMap();
}, 100);
} else {
window.onload = function() {
setTimeout(function() {
initMap();
}, 300);
};
}
</script>
</body>
[/html]
Поделиться112026-03-03 22:14:27
- принц подворотни
- Маг [Синдикат]Старший менеджер Iridium InsightСферы: Основы, Данные, Энтропия
- Зарегистрирован: 2024-03-08
- Сообщений: 35
- Уважение: +2
- bank: 690 $
- exp: 1
- Последний визит:
2026-03-15 11:06:41
[html]
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Карта Сиэтла — Blood Moon Chronicles</title>
<style>
/* === ОСНОВНЫЕ СТИЛИ === */
:root {
--ventrue: #1a237e;
--toreador: #e91e63;
--brujah: #c41e3a;
--malkavian: #6b3fa0;
--gangrel: #2d5016;
--tremere: #8b0000;
--nosferatu: #4a3728;
--anarch: #ff6b35;
--sabbat: #1a1a1a;
--camarilla: #ffd700;
--neutral: #666666;
--empty: #000000;
--technocrat: #00bcd4;
--garou: #2d5016;
--bg-dark: #0a0a0a;
--bg-card: #1a1a1a;
--text-primary: #e0e0e0;
--text-secondary: #888888;
--border-color: #333333;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Georgia', 'Times New Roman', serif;
background: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
}
.map-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
/* === ЗАГОЛОВОК === */
.map-header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
border-bottom: 2px solid var(--border-color);
}
.map-header h1 {
color: #c41e3a;
font-size: 2.2em;
text-transform: uppercase;
letter-spacing: 4px;
margin-bottom: 10px;
text-shadow: 0 0 20px rgba(196, 30, 58, 0.5);
}
.map-header p {
color: var(--text-secondary);
font-style: italic;
font-size: 1.1em;
}
/* === КОНТЕЙНЕР КАРТЫ === */
.map-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border: 3px solid var(--border-color);
border-radius: 15px;
overflow: hidden;
cursor: crosshair;
}
/* === ИЗОБРАЖЕНИЕ КАРТЫ === */
.seattle-map-image {
width: 100%;
height: auto;
display: block;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.map-container:hover .seattle-map-image {
opacity: 1;
}
/* === ТОЧКИ-МАРКЕРЫ === */
.map-marker {
position: absolute;
width: 24px;
height: 24px;
background: radial-gradient(circle, #c41e3a 0%, #8b0000 100%);
border: 3px solid #fff;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
animation: markerPulse 2s infinite;
transform: translate(-50%, -50%);
}
.map-marker:hover {
transform: translate(-50%, -50%) scale(1.3);
z-index: 20;
box-shadow: 0 0 25px rgba(196, 30, 58, 0.8);
}
.map-marker.hidden {
display: none !important;
}
@keyframes markerPulse {
0% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(196, 30, 58, 0); }
100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
}
/* Цвета маркеров по фракциям */
.marker-ventrue { background: radial-gradient(circle, var(--ventrue) 0%, #0d1245 100%); }
.marker-toreador { background: radial-gradient(circle, var(--toreador) 0%, #8b0030 100%); }
.marker-brujah { background: radial-gradient(circle, var(--brujah) 0%, #5c0f1a 100%); }
.marker-malkavian { background: radial-gradient(circle, var(--malkavian) 0%, #3d2363 100%); }
.marker-gangrel { background: radial-gradient(circle, var(--gangrel) 0%, #1a2f0d 100%); }
.marker-tremere { background: radial-gradient(circle, var(--tremere) 0%, #4a0000 100%); }
.marker-nosferatu { background: radial-gradient(circle, var(--nosferatu) 0%, #2a1f15 100%); }
.marker-anarch { background: radial-gradient(circle, var(--anarch) 0%, #a03d1a 100%); }
.marker-sabbat { background: radial-gradient(circle, var(--sabbat) 0%, #000000 100%); border-color: #c41e3a; }
.marker-camarilla { background: radial-gradient(circle, var(--camarilla) 0%, #8b6900 100%); }
.marker-neutral { background: radial-gradient(circle, var(--neutral) 0%, #333333 100%); }
.marker-empty { background: radial-gradient(circle, var(--empty) 0%, #1a1a1a 100%); border-color: #c41e3a; }
.marker-technocrat { background: radial-gradient(circle, var(--technocrat) 0%, #006875 100%); }
.marker-garou { background: radial-gradient(circle, var(--garou) 0%, #1a2f0d 100%); }
/* === ПРОСТАЯ ПОДСКАЗКА С НАЗВАНИЕМ (ПРИ НАВЕДЕНИИ) === */
.name-tooltip {
position: absolute;
text-align: center;
color: var(--text-primary);
padding: 4px 8px;
border-radius: 20px;
background: var(--accent, #c41e3a);
font-family: var(--main-font, 'Georgia', serif);
display: none;
justify-content: center;
font-size: 13px;
text-transform: none;
z-index: 90;
pointer-events: none;
white-space: nowrap;
border: 1px solid var(--border-color);
}
/* === ПОЛНАЯ ПОДСКАЗКА (ПО КЛИКУ) === */
.tooltip {
position: absolute;
text-align: center;
color: var(--text-primary);
padding: 4px 8px;
border-radius: 20px;
background: var(--bg-card);
font-family: var(--main-font, 'Georgia', serif);
display: flex;
justify-content: center;
font-size: 13px;
text-transform: none;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -100%) translateY(-15px);
transition: all 0.3s ease;
min-width: 320px;
max-width: 400px;
}
.tooltip.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%) translateY(-25px);
}
.tooltip-image {
width: 100%;
height: 180px;
object-fit: cover;
border-bottom: 2px solid var(--border-color);
background: #2a2a2a;
}
.tooltip-image-placeholder {
display: none;
}
.tooltip-content {
padding: 5px 10px;
}
.tooltip-title {
color: var(--text-primary);
font-size: 13px;
margin-bottom: 5px;
text-transform: none;
letter-spacing: 0;
border-bottom: none;
padding-bottom: 0;
}
.tooltip-district {
color: var(--text-secondary);
font-size: 12px;
margin-bottom: 8px;
font-style: italic;
}
.tooltip-description {
color: var(--text-primary);
font-size: 13px;
line-height: 1.4;
margin-bottom: 5px;
}
.tooltip-influence {
display: none;
}
.influence-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
.influence-text {
flex: 1;
}
.influence-label {
color: var(--text-secondary);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 1px;
}
.influence-value {
color: var(--text-primary);
font-size: 1.1em;
font-weight: bold;
}
/* === ЛЕГЕНДА === */
.legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 30px;
padding: 25px;
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: 12px;
}
.legend-title {
grid-column: 1 / -1;
color: #c41e3a;
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.legend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
transition: background 0.3s ease;
}
.legend-item:hover {
background: rgba(196, 30, 58, 0.2);
}
.legend-color {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.legend-name {
color: var(--text-primary);
font-size: 0.95em;
}
/* === ФИЛЬТРЫ === */
.filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
padding: 15px;
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: 12px;
justify-content: center;
}
.filter-btn {
padding: 8px 16px;
background: transparent;
border: 2px solid var(--border-color);
color: var(--text-primary);
border-radius: 20px;
cursor: pointer;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
flex: 0 0 auto;
width: auto;
min-width: 100px;
font-family: 'Georgia', serif;
}
.filter-btn:hover,
.filter-btn.active {
background: #c41e3a;
border-color: #c41e3a;
color: #fff;
}
/* === АДАПТИВНОСТЬ === */
@media (max-width: 798px) {
.map-header h1 { font-size: 1.5em; }
.map-marker { width: 20px; height: 20px; }
.tooltip { min-width: 280px; max-width: 350px; }
.tooltip-image, .tooltip-image-placeholder { height: 140px; }
.legend { grid-template-columns: repeat(2, 1fr); }
.filter-btn { width: auto; min-width: 120px; font-size: 0.8em; padding: 6px 10px; }
}
/* === СКРОЛЛБАР === */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #c41e3a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #ff3344; }
</style>
</head>
<body>
<div class="map-wrapper">
<!-- ЗАГОЛОВОК -->
<div class="map-header">
<h1>Карта Сиэтла</h1>
<p>Blood Moon Chronicles | 2026</p>
</div>
<!-- ФИЛЬТРЫ -->
<div class="filters">
<button class="filter-btn active" data-filter="all" onclick="applyFilter('all')">Все</button>
<button class="filter-btn" data-filter="gangs" onclick="applyFilter('gangs')">Банды Сиэтла</button>
<button class="filter-btn" data-filter="districts" onclick="applyFilter('districts')">Районы Сиэтла</button>
<button class="filter-btn" data-filter="kindred" onclick="applyFilter('kindred')">Места сородичей</button>
<button class="filter-btn" data-filter="other" onclick="applyFilter('other')">Места других</button>
</div>
<!-- КАРТА -->
<div class="map-container" id="mapContainer" onclick="hideAllTooltips(event)">
<img src="https://upforme.ru/uploads/001c/3d/c8/58/895305.png" alt="Карта Сиэтла" class="seattle-map-image" id="seattleMapImage">
<!-- Маркеры будут добавлены через JavaScript -->
<div id="markersContainer"></div>
<!-- Простая подсказка с названием (при наведении) -->
<div class="name-tooltip" id="nameTooltip"></div>
<!-- Полная подсказка (по клику) -->
<div class="tooltip" id="tooltip">
<div class="tooltip-image-placeholder" id="tooltipImage">Изображение района</div>
<div class="tooltip-content">
<h3 class="tooltip-title" id="tooltipTitle">Название</h3>
<p class="tooltip-district" id="tooltipDistrict">Район</p>
<p class="tooltip-description" id="tooltipDescription">Описание района...</p>
<div class="tooltip-influence">
<div class="influence-icon" id="tooltipIcon"></div>
<div class="influence-text">
<div class="influence-label">Влияние</div>
<div class="influence-value" id="tooltipInfluence">Клан/Секта</div>
</div>
</div>
</div>
</div>
</div>
<!-- ЛЕГЕНДА -->
<div class="legend">
<div class="legend-title">Влияние Фракций</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--camarilla);"></div>
<span class="legend-name">Камарилья</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--anarch);"></div>
<span class="legend-name">Анархи</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--neutral);"></div>
<span class="legend-name">Нейтральные</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--empty);"></div>
<span class="legend-name">Пустые</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--technocrat);"></div>
<span class="legend-name">Технократы</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--garou);"></div>
<span class="legend-name">Гару</span>
</div>
</div>
</div>
<script type="text/javascript">
var locationsData = [
// БАНДЫ СИЭТЛА (6 локаций)
{ id: 'central-district', name: 'Центральный Район', category: 'gangs', district: 'Central District', description: 'Центральный район Сиэтла исторически сформировался как место проживания афроамериканцев и других этнических меньшинств из-за расовой сегрегации. В середине XX века он стал основным местом для чернокожего населения, где многие работали на заводах, верфях и железнодорожных линиях. В 1960-1970-х годах здесь активизировались движения за гражданские права и "Черные пантеры". К 1980-1990-м район столкнулся с проблемой уличных банд, таких как Bloods.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/800595.png', x: 58, y: 52 },
{ id: 'yesler-terrace', name: 'Йеслер-Террас', category: 'gangs', district: 'Yesler Terrace', description: 'Район построен в начале 1940-х годов, стал первым интегрированным жилым комплексом в стране. К 1980-м приобрёл дурную славу из-за активности банд The Bloods. В начале 2010-х район был реконструирован.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/715252.png', x: 56, y: 56 },
{ id: 'high-point', name: 'Хай-Пойнт', category: 'gangs', district: 'High Point', description: 'Расположен в Западном Сиэтле. Построен во время Второй мировой войны. К 1970-1980-м годам стал известен связью с уличными бандами Bloods и Crips.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/834252.png', x: 32, y: 62 },
{ id: 'holly-park', name: 'Холли-Парк', category: 'gangs', district: 'Holly Park', description: 'Известен как "Криминальный квартал". Жилой комплекс в южной части Сиэтла. К концу 1990-х снесён, на его месте возник New Holly Park.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/100917.png', x: 48, y: 72 },
{ id: 'south-end', name: 'Саут-Энд', category: 'gangs', district: 'South End', description: 'Центр деятельности банд Crips, Hoovers и Gangster Disciples. Появление бандитской культуры в 1980-1990-х годах, связанное с ростом торговли наркотиками.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/842468.png', x: 55, y: 78 },
{ id: 'south-park', name: 'Южный Парк', category: 'gangs', district: 'South Park', description: 'Один из старейших районов города, центр испаноязычного сообщества. Арена деятельности банд Sureno.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/562831.png', x: 42, y: 82 },
// РАЙОНЫ СИЭТЛА (8 локаций)
{ id: 'belltown', name: 'Беллтаун', category: 'districts', district: 'Belltown', description: 'Район известен творческой атмосферой, ресторанами, ночными клубами и живой музыкой. Центр культурной жизни города с множеством скрытых переулков и подземелий.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/685439.png', x: 48, y: 45 },
{ id: 'downtown-seattle', name: 'Даунтаун', category: 'districts', district: 'Downtown Seattle', description: 'Финансовый центр с офисами Amazon и Starbucks. Есть высотные здания для наблюдения, много подземных переходов и тоннелей.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/400909.png', x: 52, y: 52 },
{ id: 'capitol-hill', name: 'Кэпитол Хилл', category: 'districts', district: 'Capitol Hill', description: 'Район знаменит либеральной культурой, гей-сообществом и множеством ночных заведений. Центр молодежной культуры.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/977172.png', x: 60, y: 48 },
{ id: 'pike-place-market', name: 'Пайк Плейс Маркет', category: 'districts', district: 'Pike Place Market', description: 'Исторический рынок с 1907 года. Оживленное место днем и ночью с множеством тайных ходов и потайных мест.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/459660.png', x: 50, y: 50 },
{ id: 'seattle-underground', name: 'Подземный Город', category: 'districts', district: 'Seattle Underground', description: 'После пожара 1889 года центр отстроили поверх старых улиц. Сеть заброшенных тоннелей с фасадами зданий и витринами.', faction: 'empty', image: 'https://i.postimg.cc/65z1ZMQL/Podzemnyj-sietl.jpg', x: 51, y: 54 },
{ id: 'pioneer-square', name: 'Сквер Первопроходцев', category: 'districts', district: 'Pioneer Square', description: 'Первый исторический район с подземельями Сиэтла — остатками старых уровней улиц. Много старинных зданий.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/501438.png', x: 52, y: 56 },
{ id: 'waterfront', name: 'Уотерфронт', category: 'districts', district: 'Seattle Waterfront', description: 'Прибрежная зона с пирсами и парками. Место скопления контрабандистов, отличные точки для наблюдения.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/889316.png', x: 46, y: 52 },
{ id: 'chinatown', name: 'Чайнатаун', category: 'districts', district: 'Chinatown-International District', description: 'Район с богатой азиатской культурой. Много тайных обществ и кланов, находится под властью Анархов.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/156746.png', x: 56, y: 58 },
// ВАЖНЫЕ МЕСТА СОРОДИЧЕЙ (12 локаций)
{ id: 'dutchman', name: 'Бар Голландец', category: 'kindred', district: 'The Dutchman', description: 'Бар Симеона Ладока. Здесь встречаются философы и революционеры. Доступ: свободный. Можно встретиться с Примогеном Бруджа.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/322914.png', x: 47, y: 47 },
{ id: 'hole-in-wall', name: 'Бар Дыра в стене', category: 'kindred', district: 'The Hole in the Wall', description: 'Мрачный анарх-бар в индустриальных окраинах. Доступ: свободный. Можно найти союзников и пообщаться с Бароном Кацуми Исидзаки.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/332200.png', x: 44, y: 65 },
{ id: 'atrium', name: 'Клуб Атриум', category: 'kindred', district: 'The Atrium', description: 'Клуб-галерея Язабеллы Мур. Экзотические представления. Доступ: строгий фейс-контроль. Можно встретить Примогена Тореадор.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/889325.png', x: 54, y: 49 },
{ id: 'hush', name: 'Клуб Хаш', category: 'kindred', district: 'Hush', description: 'Клуб для избранных гурманов. Исключительные букеты из уникальных сосудов. Доступ: по приглашению. Можно встретить секретаря Примогена Вентру.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/567352.png', x: 53, y: 51 },
{ id: 'wake-the-dead', name: 'Разбуди мёртвых', category: 'kindred', district: 'Wake the Dead', description: 'Ночная кофейня Примогена Тремер. Сюда приходят за тайной информацией. Доступ: частично открыт. Можно пообщаться с Амелией Торн.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/22070.png', x: 59, y: 50 },
{ id: 'macomb-bar', name: 'Макомб Бар', category: 'kindred', district: 'Macomb Bar', description: 'Приватный лаунж Вентру. Здесь плетутся интриги и подписываются приговоры. Доступ: только по приглашению.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/112141.png', x: 55, y: 53 },
{ id: 'aurora-pawn', name: 'Ломбард Аврора', category: 'kindred', district: 'Aurora Pawn', description: 'Ломбард Нико Ангелова с магическими артефактами. Доступ: для всех, кто готов рискнуть. Можно получить поручение от Примогена Бану Хаким.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/58617.png', x: 40, y: 35 },
{ id: 'glacier-hotel', name: 'Отель Ледник', category: 'kindred', district: 'Glacier Hotel', description: 'Роскошный отель с начала 20 века. Лу Грэм можно найти в пентхаусе. Доступ: свободный.', faction: 'camarilla', image: 'https://i.postimg.cc/65BmTkBj/Lednik.jpg', x: 51, y: 48 },
{ id: 'psychiatric-clinic', name: 'Психиатрическая клиника', category: 'kindred', district: 'Psychiatric Clinic', description: 'Клиника доктора Шурова для изоляции шабашитов. Доступ: по пропуску. Можно встретить Примогена Малкавиан.', faction: 'camarilla', image: 'https://i.postimg.cc/GhzSDXpx/psihiatriceskaa-lecebnica.jpg', x: 62, y: 42 },
{ id: 'pike-place-kindred', name: 'Рынок Пайкс-Плейс', category: 'kindred', district: 'Pike Place Market', description: 'Сердце города. В массе смертных можно найти кровь, информацию, союзников. Доступ: свободный.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/644777.png', x: 50, y: 51 },
{ id: 'pioneer-square-kindred', name: 'Сквер Первопроходцев', category: 'kindred', district: 'Pioneer Square', description: 'Под наблюдением сородичей-Первопроходцев. Доступ: свободный. Можно встретиться с Лу Гранд.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/278732.png', x: 52, y: 57 },
{ id: 'downtown-core', name: 'Финансовый район', category: 'kindred', district: 'Downtown Core', description: 'Деловое сердце Сиэтла, центр Вентру. Здесь особо следят за Маскарадом. Можно встретить Чистильщиков.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/834019.png', x: 53, y: 54 },
// МЕСТА СИЛЫ ДЛЯ ДРУГИХ (6 локаций)
{ id: 'discovery-park', name: 'Каэрн Манагери', category: 'other', district: 'Discovery Park', description: 'Парк Открытий — крупнейший зелёный оазис. Контролируется Стеклоходами. Подходит для ритуалов и собраний Гару.', faction: 'garou', image: 'https://upforme.ru/uploads/001c/3d/c8/30/955746.png', x: 28, y: 32 },
{ id: 'south-lake-union', name: 'Каэрн Малой воды', category: 'other', district: 'South Lake Union', description: 'Техноактивный центр Стеклоходов. Место для влияния на город через информационные атаки. Идеально для встреч Подменышей.', faction: 'garou', image: 'https://upforme.ru/uploads/001c/3d/c8/30/398432.png', x: 54, y: 42 },
{ id: 'pentex', name: 'Офис Пентекс', category: 'other', district: 'Pentex West Office', description: 'Офис корпорации Pentex. Здесь особенно сильно влияние Вирма, стены скрывают страшные тайны.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/274847.png', x: 50, y: 55 },
{ id: 'liquid-haze', name: 'Жидкая дымка', category: 'other', district: 'Liquid Haze', description: 'Кофейня для встреч магов-Одиночек в капитолийском районе. Иногда появляются феи и демоны из Умбры.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/965276.png', x: 61, y: 47 },
{ id: 'microsoft', name: 'Майкрософт', category: 'other', district: 'Microsoft HQ', description: 'Штаб Виртуальных Адептов. Маги взламывают реальность и создают магические вирусы.', faction: 'technocrat', image: 'https://upforme.ru/uploads/001c/3d/c8/30/128302.png', x: 65, y: 38 },
{ id: 'conjurers-cubbyhole', name: 'Закуток фокусника', category: 'other', district: 'Conjurers Cubbyhole', description: 'Магическая локация в полузаброшенной часовне. Здесь маги Традиций проводят ритуалы и обучают новичков.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/813242.png', x: 51, y: 58 }
];
var factionConfig = {
camarilla: { name: 'Камарилья', color: '#ffd700' },
anarch: { name: 'Анархи', color: '#ff6b35' },
neutral: { name: 'Нейтральные', color: '#666666' },
empty: { name: 'Пустые', color: '#000000' },
technocrat: { name: 'Технократы', color: '#00bcd4' },
garou: { name: 'Гару', color: '#2d5016' }
};
var categoryConfig = {
all: { title: 'Все локации', description: 'Полная карта Сиэтла со всеми отмеченными точками.' },
gangs: { title: 'Банды Сиэтла', description: 'Районы, контролируемые уличными бандами. Bloods, Crips, Hoover и другие группировки.' },
districts: { title: 'Районы Сиэтла', description: 'Основные районы города с их особенностями и историей.' },
kindred: { title: 'Места сородичей', description: 'Ключевые локации для вампиров Сиэтла — бары, клубы, убежища примогенов.' },
other: { title: 'Места других', description: 'Локации для Гару, магов, фей. Каэрны, техноактивные центры.' }
};
var currentFilter = 'all';
// Инициализация карты
function initMap() {
var container = document.getElementById('markersContainer');
var i;
for (i = 0; i < locationsData.length; i++) {
var loc = locationsData[i];
var marker = document.createElement('div');
marker.className = 'map-marker marker-' + loc.faction;
marker.style.left = loc.x + '%';
marker.style.top = loc.y + '%';
marker.id = 'marker-' + loc.id;
marker.setAttribute('data-category', loc.category);
marker.setAttribute('data-faction', loc.faction);
marker.setAttribute('data-name', loc.name);
// Наведение - показываем название
marker.onmouseover = function(loc) {
return function() {
showNameTooltip(loc);
};
}(loc);
marker.onmouseout = function() {
hideNameTooltip();
};
// Клик - показываем полную подсказку
marker.onclick = function(loc) {
return function(event) {
event.stopPropagation();
showTooltip(loc);
};
}(loc);
container.appendChild(marker);
}
}
// Простая подсказка с названием
function showNameTooltip(location) {
var nameTip = document.getElementById('nameTooltip');
var marker = document.getElementById('marker-' + location.id);
if (!marker || !nameTip) { return; }
nameTip.innerHTML = location.name;
nameTip.style.display = 'block';
var rect = marker.getBoundingClientRect();
var mapRect = document.getElementById('mapContainer').getBoundingClientRect();
nameTip.style.left = (rect.left - mapRect.left + 15) + 'px';
nameTip.style.top = (rect.top - mapRect.top - 30) + 'px';
}
function hideNameTooltip() {
var nameTip = document.getElementById('nameTooltip');
if (nameTip) {
nameTip.style.display = 'none';
}
}
// Полная подсказка по клику
function showTooltip(location) {
var tooltip = document.getElementById('tooltip');
var title = document.getElementById('tooltipTitle');
var district = document.getElementById('tooltipDistrict');
var description = document.getElementById('tooltipDescription');
var influence = document.getElementById('tooltipInfluence');
var icon = document.getElementById('tooltipIcon');
var imageContainer = document.getElementById('tooltipImage');
var marker = document.getElementById('marker-' + location.id);
if (!marker) { return; }
var faction = factionConfig[location.faction];
if (!faction) { faction = factionConfig.neutral; }
title.innerHTML = location.name;
district.innerHTML = location.district;
description.innerHTML = location.description;
influence.innerHTML = faction.name;
icon.style.background = faction.color;
if (location.image && location.image.length > 5) {
imageContainer.innerHTML = '<img src="' + location.image + '" alt="' + location.name + '" class="tooltip-image">';
} else {
imageContainer.innerHTML = 'Изображение локации';
}
var rect = marker.getBoundingClientRect();
var mapRect = document.getElementById('mapContainer').getBoundingClientRect();
tooltip.style.left = (rect.left - mapRect.left + 12) + 'px';
tooltip.style.top = (rect.top - mapRect.top) + 'px';
tooltip.className = 'tooltip active';
}
function hideTooltip() {
var tooltip = document.getElementById('tooltip');
tooltip.className = 'tooltip';
}
function hideAllTooltips(event) {
if (event.target.id === 'mapContainer' || event.target.id === 'seattleMapImage' || event.target.id === 'markersContainer') {
hideTooltip();
hideNameTooltip();
}
}
// Фильтры
function applyFilter(filter) {
var buttons = document.getElementsByClassName('filter-btn');
var markers = document.getElementsByClassName('map-marker');
var i;
var isActive = (currentFilter === filter);
for (i = 0; i < buttons.length; i++) {
buttons[i].className = 'filter-btn';
}
if (isActive) {
currentFilter = 'all';
} else {
currentFilter = filter;
var activeBtn = document.querySelector('.filter-btn[data-filter="' + filter + '"]');
if (activeBtn) {
activeBtn.className = 'filter-btn active';
}
}
for (i = 0; i < markers.length; i++) {
var marker = markers[i];
var category = marker.getAttribute('data-category');
if (currentFilter === 'all') {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction');
} else {
if (category === currentFilter) {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction');
} else {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction') + ' hidden';
}
}
}
}
window.onload = function() {
initMap();
};
</script>
</div>
</body>
[/html]
Поделиться122026-03-03 23:46:28
- принц подворотни
- Маг [Синдикат]Старший менеджер Iridium InsightСферы: Основы, Данные, Энтропия
- Зарегистрирован: 2024-03-08
- Сообщений: 35
- Уважение: +2
- bank: 690 $
- exp: 1
- Последний визит:
2026-03-15 11:06:41
[html]
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Карта Сиэтла — Blood Moon Chronicles</title>
<style>
/* === ОСНОВНЫЕ СТИЛИ === */
:root {
--camarilla: #ffd700;
--anarch: #ff6b35;
--neutral: #666666;
--empty: #000000;
--technocrat: #00bcd4;
--garou: #2d5016;
--bg-dark: #0a0a0a;
--bg-card: #1a1a1a;
--text-primary: #e0e0e0;
--text-secondary: #888888;
--border-color: #333333;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Georgia', 'Times New Roman', serif;
background: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
}
.map-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
/* === ЗАГОЛОВОК === */
.map-header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
border-bottom: 2px solid var(--border-color);
}
.map-header h1 {
color: #c41e3a;
font-size: 2.2em;
text-transform: uppercase;
letter-spacing: 4px;
margin-bottom: 10px;
text-shadow: 0 0 20px rgba(196, 30, 58, 0.5);
}
.map-header p {
color: var(--text-secondary);
font-style: italic;
font-size: 1.1em;
}
/* === КОНТЕЙНЕР КАРТЫ === */
.map-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
/* background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%); */
/* border: 3px solid var(--border-color); */
border-radius: 15px;
overflow: visible;
cursor: crosshair;
left: 20px;
}
/* === ИЗОБРАЖЕНИЕ КАРТЫ === */
.seattle-map-image {
width: 100%;
max-width: 600px;
height: auto;
display: block;
border-radius: 12px;
}
/* === СЛОЙ С НАДПИСЯМИ (OVERLAY) === */
.map-overlay {
position: absolute;
top: 8px;
left: 35px;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
max-width: 535px;
}
.map-overlay img,
.map-overlay svg {
width: 100%;
height: auto;
display: block;
opacity: 1;
}
/* === ТОЧКИ-МАРКЕРЫ === */
.map-marker {
position: absolute;
width: 24px;
height: 24px;
background: radial-gradient(circle, #c41e3a 0%, #8b0000 100%);
border: 3px solid #fff;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
animation: markerPulse 2s infinite;
transform: translate(-50%, -50%);
}
.map-marker:hover {
transform: translate(-50%, -50%) scale(1.3);
z-index: 20;
box-shadow: 0 0 25px rgba(196, 30, 58, 0.8);
}
.map-marker.hidden {
display: none !important;
}
@keyframes markerPulse {
0% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(196, 30, 58, 0); }
100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
}
/* Цвета маркеров по фракциям */
.marker-camarilla { background: radial-gradient(circle, var(--camarilla) 0%, #8b6900 100%); }
.marker-anarch { background: radial-gradient(circle, var(--anarch) 0%, #a03d1a 100%); }
.marker-neutral { background: radial-gradient(circle, var(--neutral) 0%, #333333 100%); }
.marker-empty { background: radial-gradient(circle, var(--empty) 0%, #1a1a1a 100%); border-color: #c41e3a; }
.marker-technocrat { background: radial-gradient(circle, var(--technocrat) 0%, #006875 100%); }
.marker-garou { background: radial-gradient(circle, var(--garou) 0%, #1a2f0d 100%); }
/* === TOOLTIP (ИСПРАВЛЕННЫЙ) === */
.map-tooltip {
pointer-events: none !important;
background: #1a1a1a !important;
border: 2px solid #333 !important;
border-radius: 12px !important;
padding: 0 !important;
width: 400px !important;
z-index: 999 !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
overflow: hidden;
font-family: 'Georgia', serif !important;
text-align: justify !important;
}
.map-tooltip-image {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom: 2px solid #333;
background: #2a2a2a;
display: block;
}
.map-tooltip-image-placeholder {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
color: #888;
font-style: italic;
border-bottom: 2px solid #333;
flex-direction: column;
text-align: center;
padding: 20px;
}
.map-tooltip-content {
padding: 20px;
}
.map-tooltip-title {
color: #c41e3a;
font-size: 13px;
font-weight: bold;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.map-tooltip-district {
color: #888;
font-size: 13px;
margin-bottom: 12px;
font-style: italic;
}
.map-tooltip-description {
color: #e0e0e0;
font-size: 13px;
line-height: 1.6;
margin-bottom: 15px;
max-height: 200px;
overflow-y: auto;
}
.map-tooltip-faction {
display: inline-block;
padding: 8px 16px;
background: rgba(196, 30, 58, 0.2);
border: 1px solid #c41e3a;
border-radius: 20px;
color: #e0e0e0;
font-size: 13px;
}
/* === ЛЕГЕНДА === */
.legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 30px;
padding: 25px;
/* background: var(--bg-card); */
/* border: 2px solid var(--border-color); */
border-radius: 12px;
}
.legend-title {
grid-column: 1 / -1;
color: #c41e3a;
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.legend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
transition: background 0.3s ease;
}
.legend-item:hover {
background: rgba(196, 30, 58, 0.2);
}
.legend-color {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.legend-name {
color: var(--text-primary);
font-size: 0.95em;
}
/* === ФИЛЬТРЫ === */
.filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
padding: 15px;
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: 12px;
justify-content: center;
}
.filter-btn {
padding: 8px 16px;
background: transparent;
border: 2px solid var(--border-color);
color: var(--text-primary);
border-radius: 20px;
cursor: pointer;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
flex: 0 0 auto;
width: auto;
min-width: 100px;
font-family: 'Georgia', serif;
}
.filter-btn:hover,
.filter-btn.active {
background: #7a3131;
border-color: #4d1716;
color: #fff;
}
/* === АДАПТИВНОСТЬ === */
@media (max-width: 1100px) {
.map-tooltip {
width: 350px;
}
}
@media (max-width: 798px) {
.map-header h1 { font-size: 1.5em; }
.map-marker { width: 20px; height: 20px; }
.map-tooltip { width: 90%; max-width: 350px!important; }
.map-tooltip-image, .map-tooltip-image-placeholder { height: 160px; }
.legend { grid-template-columns: repeat(2, 1fr); }
.filter-btn { width: auto; min-width: 120px; font-size: 0.8em; padding: 6px 10px; }
}
/* === СКРОЛЛБАР === */
.map-tooltip-description::-webkit-scrollbar {
width: 8px;
}
.map-tooltip-description::-webkit-scrollbar-track {
background: #1a1a1a;
}
.map-tooltip-description::-webkit-scrollbar-thumb {
background: #c41e3a;
border-radius: 4px;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #c41e3a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #ff3344; }
</style>
</head>
<body>
<div class="map-wrapper">
<!-- ЗАГОЛОВОК -->
<div class="map-header">
<h1>Карта Сиэтла</h1>
<p>Blood Moon Chronicles | 2026</p>
</div>
<!-- ФИЛЬТРЫ -->
<div class="filters">
<button class="filter-btn active" data-filter="all" onclick="applyFilter('all')">Все</button>
<button class="filter-btn" data-filter="gangs" onclick="applyFilter('gangs')">Банды Сиэтла</button>
<button class="filter-btn" data-filter="districts" onclick="applyFilter('districts')">Районы Сиэтла</button>
<button class="filter-btn" data-filter="kindred" onclick="applyFilter('kindred')">Места сородичей</button>
<button class="filter-btn" data-filter="other" onclick="applyFilter('other')">Места других</button>
</div>
<!-- КАРТА -->
<div class="map-container" id="mapContainer">
<img src="https://forumstatic.ru/files/001c/3d/c8/69812.svg" alt="Карта Сиэтла" class="seattle-map-image" id="seattleMapImage">
<!-- СЛОЙ С НАДПИСЯМИ -->
<div class="map-overlay">
<img src="https://forumstatic.ru/files/001c/3d/c8/18474.svg" alt="Названия районов">
</div>
<!-- Маркеры будут добавлены через JavaScript -->
<div id="markersContainer"></div>
<!-- TOOLTIP -->
<div class="map-tooltip" id="tooltip">
<div class="map-tooltip-image-placeholder" id="tooltipImage">Изображение локации</div>
<div class="map-tooltip-content">
<h3 class="map-tooltip-title" id="tooltipTitle">Название</h3>
<p class="map-tooltip-district" id="tooltipDistrict">Район</p>
<p class="map-tooltip-description" id="tooltipDescription">Описание...</p>
<span class="map-tooltip-faction" id="tooltipInfluence">Фракция</span>
</div>
</div>
</div>
<!-- ЛЕГЕНДА -->
<div class="legend">
<div class="legend-title">Влияние Фракций</div>
<div class="legend-item"><div class="legend-color" style="background: #ffd700;"></div><span class="legend-name">Камарилья</span></div>
<div class="legend-item"><div class="legend-color" style="background: #ff6b35;"></div><span class="legend-name">Анархи</span></div>
<div class="legend-item"><div class="legend-color" style="background: #666666;"></div><span class="legend-name">Нейтральные</span></div>
<div class="legend-item"><div class="legend-color" style="background: #000000; border-color: #c41e3a;"></div><span class="legend-name">Пустые</span></div>
<div class="legend-item"><div class="legend-color" style="background: #00bcd4;"></div><span class="legend-name">Технократы</span></div>
<div class="legend-item"><div class="legend-color" style="background: #2d5016;"></div><span class="legend-name">Гару</span></div>
</div>
</div>
<script type="text/javascript">
// =====================================================================
// ДАННЫЕ
// =====================================================================
var locationsData = [
// БАНДЫ СИЭТЛА (6 локаций)
{ id: 'central-district', name: 'Центральный Район', category: 'gangs', district: 'Central District', description: 'Центральный район Сиэтла исторически сформировался как место проживания афроамериканцев и других этнических меньшинств из-за расовой сегрегации. В середине XX века он стал основным местом для чернокожего населения, где многие работали на заводах, верфях и железнодорожных линиях. В 1960-1970-х годах здесь активизировались движения за гражданские права и "Черные пантеры". К 1980-1990-м район столкнулся с проблемой уличных банд, таких как Bloods.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/800595.png', x: 58, y: 52 },
{ id: 'yesler-terrace', name: 'Йеслер-Террас', category: 'gangs', district: 'Yesler Terrace', description: 'Район построен в начале 1940-х годов, стал первым интегрированным жилым комплексом в стране. К 1980-м приобрёл дурную славу из-за активности банд The Bloods. В начале 2010-х район был реконструирован.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/715252.png', x: 56, y: 56 },
{ id: 'high-point', name: 'Хай-Пойнт', category: 'gangs', district: 'High Point', description: 'Расположен в Западном Сиэтле. Построен во время Второй мировой войны. К 1970-1980-м годам стал известен связью с уличными бандами Bloods и Crips.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/834252.png', x: 32, y: 62 },
{ id: 'holly-park', name: 'Холли-Парк', category: 'gangs', district: 'Holly Park', description: 'Известен как "Криминальный квартал". Жилой комплекс в южной части Сиэтла. К концу 1990-х снесён, на его месте возник New Holly Park.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/100917.png', x: 48, y: 72 },
{ id: 'south-end', name: 'Саут-Энд', category: 'gangs', district: 'South End', description: 'Центр деятельности банд Crips, Hoovers и Gangster Disciples. Появление бандитской культуры в 1980-1990-х годах, связанное с ростом торговли наркотиками.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/842468.png', x: 55, y: 78 },
{ id: 'south-park', name: 'Южный Парк', category: 'gangs', district: 'South Park', description: 'Один из старейших районов города, центр испаноязычного сообщества. Арена деятельности банд Sureno.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/562831.png', x: 42, y: 82 },
// РАЙОНЫ СИЭТЛА (8 локаций)
{ id: 'belltown', name: 'Беллтаун', category: 'districts', district: 'Belltown', description: 'Район известен творческой атмосферой, ресторанами, ночными клубами и живой музыкой. Центр культурной жизни города с множеством скрытых переулков и подземелий.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/685439.png', x: 48, y: 45 },
{ id: 'downtown-seattle', name: 'Даунтаун', category: 'districts', district: 'Downtown Seattle', description: 'Финансовый центр с офисами Amazon и Starbucks. Есть высотные здания для наблюдения, много подземных переходов и тоннелей.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/400909.png', x: 52, y: 52 },
{ id: 'capitol-hill', name: 'Кэпитол Хилл', category: 'districts', district: 'Capitol Hill', description: 'Район знаменит либеральной культурой, гей-сообществом и множеством ночных заведений. Центр молодежной культуры.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/977172.png', x: 60, y: 48 },
{ id: 'pike-place-market', name: 'Пайк Плейс Маркет', category: 'districts', district: 'Pike Place Market', description: 'Исторический рынок с 1907 года. Оживленное место днем и ночью с множеством тайных ходов и потайных мест.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/459660.png', x: 50, y: 50 },
{ id: 'seattle-underground', name: 'Подземный Город', category: 'districts', district: 'Seattle Underground', description: 'После пожара 1889 года центр отстроили поверх старых улиц. Сеть заброшенных тоннелей с фасадами зданий и витринами.', faction: 'empty', image: 'https://i.postimg.cc/65z1ZMQL/Podzemnyj-sietl.jpg', x: 51, y: 54 },
{ id: 'pioneer-square', name: 'Сквер Первопроходцев', category: 'districts', district: 'Pioneer Square', description: 'Первый исторический район с подземельями Сиэтла — остатками старых уровней улиц. Много старинных зданий.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/501438.png', x: 52, y: 56 },
{ id: 'waterfront', name: 'Уотерфронт', category: 'districts', district: 'Seattle Waterfront', description: 'Прибрежная зона с пирсами и парками. Место скопления контрабандистов, отличные точки для наблюдения.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/889316.png', x: 46, y: 52 },
{ id: 'chinatown', name: 'Чайнатаун', category: 'districts', district: 'Chinatown-International District', description: 'Район с богатой азиатской культурой. Много тайных обществ и кланов, находится под властью Анархов.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/156746.png', x: 56, y: 58 },
// ВАЖНЫЕ МЕСТА СОРОДИЧЕЙ (12 локаций)
{ id: 'dutchman', name: 'Бар Голландец', category: 'kindred', district: 'The Dutchman', description: 'Бар Симеона Ладока. Здесь встречаются философы и революционеры. Доступ: свободный. Можно встретиться с Примогеном Бруджа.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/322914.png', x: 47, y: 47 },
{ id: 'hole-in-wall', name: 'Бар Дыра в стене', category: 'kindred', district: 'The Hole in the Wall', description: 'Мрачный анарх-бар в индустриальных окраинах. Доступ: свободный. Можно найти союзников и пообщаться с Бароном Кацуми Исидзаки.', faction: 'anarch', image: 'https://upforme.ru/uploads/001c/3d/c8/30/332200.png', x: 44, y: 65 },
{ id: 'atrium', name: 'Клуб Атриум', category: 'kindred', district: 'The Atrium', description: 'Клуб-галерея Язабеллы Мур. Экзотические представления. Доступ: строгий фейс-контроль. Можно встретить Примогена Тореадор.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/889325.png', x: 54, y: 49 },
{ id: 'hush', name: 'Клуб Хаш', category: 'kindred', district: 'Hush', description: 'Клуб для избранных гурманов. Исключительные букеты из уникальных сосудов. Доступ: по приглашению. Можно встретить секретаря Примогена Вентру.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/567352.png', x: 53, y: 51 },
{ id: 'wake-the-dead', name: 'Разбуди мёртвых', category: 'kindred', district: 'Wake the Dead', description: 'Ночная кофейня Примогена Тремер. Сюда приходят за тайной информацией. Доступ: частично открыт. Можно пообщаться с Амелией Торн.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/22070.png', x: 59, y: 50 },
{ id: 'macomb-bar', name: 'Макомб Бар', category: 'kindred', district: 'Macomb Bar', description: 'Приватный лаунж Вентру. Здесь плетутся интриги и подписываются приговоры. Доступ: только по приглашению.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/112141.png', x: 55, y: 53 },
{ id: 'aurora-pawn', name: 'Ломбард Аврора', category: 'kindred', district: 'Aurora Pawn', description: 'Ломбард Нико Ангелова с магическими артефактами. Доступ: для всех, кто готов рискнуть. Можно получить поручение от Примогена Бану Хаким.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/58617.png', x: 40, y: 35 },
{ id: 'glacier-hotel', name: 'Отель Ледник', category: 'kindred', district: 'Glacier Hotel', description: 'Роскошный отель с начала 20 века. Лу Грэм можно найти в пентхаусе. Доступ: свободный.', faction: 'camarilla', image: 'https://i.postimg.cc/65BmTkBj/Lednik.jpg', x: 51, y: 48 },
{ id: 'psychiatric-clinic', name: 'Психиатрическая клиника', category: 'kindred', district: 'Psychiatric Clinic', description: 'Клиника доктора Шурова для изоляции шабашитов. Доступ: по пропуску. Можно встретить Примогена Малкавиан.', faction: 'camarilla', image: 'https://i.postimg.cc/GhzSDXpx/psihiatriceskaa-lecebnica.jpg', x: 62, y: 42 },
{ id: 'pike-place-kindred', name: 'Рынок Пайкс-Плейс', category: 'kindred', district: 'Pike Place Market', description: 'Сердце города. В массе смертных можно найти кровь, информацию, союзников. Доступ: свободный.', faction: 'neutral', image: 'https://upforme.ru/uploads/001c/3d/c8/30/644777.png', x: 50, y: 51 },
{ id: 'pioneer-square-kindred', name: 'Сквер Первопроходцев', category: 'kindred', district: 'Pioneer Square', description: 'Под наблюдением сородичей-Первопроходцев. Доступ: свободный. Можно встретиться с Лу Гранд.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/278732.png', x: 52, y: 57 },
{ id: 'downtown-core', name: 'Финансовый район', category: 'kindred', district: 'Downtown Core', description: 'Деловое сердце Сиэтла, центр Вентру. Здесь особо следят за Маскарадом. Можно встретить Чистильщиков.', faction: 'camarilla', image: 'https://upforme.ru/uploads/001c/3d/c8/30/834019.png', x: 53, y: 54 },
// МЕСТА СИЛЫ ДЛЯ ДРУГИХ (6 локаций)
{ id: 'discovery-park', name: 'Каэрн Манагери', category: 'other', district: 'Discovery Park', description: 'Парк Открытий — крупнейший зелёный оазис. Контролируется Стеклоходами. Подходит для ритуалов и собраний Гару.', faction: 'garou', image: 'https://upforme.ru/uploads/001c/3d/c8/30/955746.png', x: 28, y: 32 },
{ id: 'south-lake-union', name: 'Каэрн Малой воды', category: 'other', district: 'South Lake Union', description: 'Техноактивный центр Стеклоходов. Место для влияния на город через информационные атаки. Идеально для встреч Подменышей.', faction: 'garou', image: 'https://upforme.ru/uploads/001c/3d/c8/30/398432.png', x: 54, y: 42 },
{ id: 'pentex', name: 'Офис Пентекс', category: 'other', district: 'Pentex West Office', description: 'Офис корпорации Pentex. Здесь особенно сильно влияние Вирма, стены скрывают страшные тайны.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/274847.png', x: 50, y: 55 },
{ id: 'liquid-haze', name: 'Жидкая дымка', category: 'other', district: 'Liquid Haze', description: 'Кофейня для встреч магов-Одиночек в капитолийском районе. Иногда появляются феи и демоны из Умбры.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/965276.png', x: 61, y: 47 },
{ id: 'microsoft', name: 'Майкрософт', category: 'other', district: 'Microsoft HQ', description: 'Штаб Виртуальных Адептов. Маги взламывают реальность и создают магические вирусы.', faction: 'technocrat', image: 'https://upforme.ru/uploads/001c/3d/c8/30/128302.png', x: 65, y: 38 },
{ id: 'conjurers-cubbyhole', name: 'Закуток фокусника', category: 'other', district: 'Conjurers Cubbyhole', description: 'Магическая локация в полузаброшенной часовне. Здесь маги Традиций проводят ритуалы и обучают новичков.', faction: 'empty', image: 'https://upforme.ru/uploads/001c/3d/c8/30/813242.png', x: 51, y: 58 }
];
var factionConfig = {
camarilla: { name: 'Камарилья', color: '#ffd700' },
anarch: { name: 'Анархи', color: '#ff6b35' },
neutral: { name: 'Нейтральные', color: '#666666' },
empty: { name: 'Пустые', color: '#000000' },
technocrat: { name: 'Технократы', color: '#00bcd4' },
garou: { name: 'Гару', color: '#2d5016' }
};
var currentFilter = 'all';
// ============================================
// ФУНКЦИИ КАРТЫ
// ============================================
function initMap() {
var container = document.getElementById('markersContainer');
if (!container) {
console.error('Контейнер не найден!');
return;
}
console.log('=== Инициализация карты ===');
console.log('Локаций:', locationsData.length);
for (var i = 0; i < locationsData.length; i++) {
createMarker(locationsData[i], container);
}
}
function createMarker(location, container) {
var marker = document.createElement('div');
marker.className = 'map-marker marker-' + location.faction;
marker.style.left = location.x + '%';
marker.style.top = location.y + '%';
marker.id = 'marker-' + location.id;
marker.setAttribute('data-category', location.category);
marker.setAttribute('data-faction', location.faction);
marker.onmouseover = (function(l) {
return function() {
showTooltip(l);
};
})(location);
marker.onmouseout = function() {
hideTooltip();
};
container.appendChild(marker);
}
// ============================================
// TOOLTIP (ИСПРАВЛЕННЫЙ - СТАБИЛЬНАЯ ПОЗИЦИЯ)
// ============================================
function showTooltip(location) {
var tooltip = document.getElementById('tooltip');
if (!tooltip) { return; }
var title = document.getElementById('tooltipTitle');
var district = document.getElementById('tooltipDistrict');
var description = document.getElementById('tooltipDescription');
var influence = document.getElementById('tooltipInfluence');
var imageContainer = document.getElementById('tooltipImage');
var marker = document.getElementById('marker-' + location.id);
if (!marker) { return; }
var faction = factionConfig[location.faction];
if (!faction) { faction = factionConfig.neutral; }
title.innerHTML = location.name;
district.innerHTML = location.district;
description.innerHTML = location.description;
influence.innerHTML = faction.name;
influence.style.borderColor = faction.color;
if (location.image && location.image.trim() !== '') {
imageContainer.innerHTML = '<img src="' + location.image.trim() + '" alt="' + location.name + '" class="map-tooltip-image">';
} else {
imageContainer.innerHTML = '<div class="map-tooltip-image-placeholder">Нет изображения</div>';
}
// Вычисляем позицию маркера относительно контейнера
var markerLeft = parseFloat(marker.style.left);
var markerTop = parseFloat(marker.style.top);
// Позиционируем tooltip СВЕРХУ от маркера
var rect = marker.getBoundingClientRect();
tooltip.style.left = rect.left + 'px';
tooltip.style.top = (rect.top - 10) + 'px';
tooltip.style.display = 'block';
// Вертикальная позиция - центрируем по маркеру
tooltip.style.top = markerTop + '%';
// Показываем tooltip
tooltip.style.display = 'block';
}
function hideTooltip() {
var tooltip = document.getElementById('tooltip');
if (tooltip) {
tooltip.style.display = 'none';
}
}
// ============================================
// ФИЛЬТРЫ
// ============================================
function applyFilter(filter) {
var buttons = document.getElementsByClassName('filter-btn');
var markers = document.getElementsByClassName('map-marker');
var isActive = (currentFilter === filter);
for (var i = 0; i < buttons.length; i++) {
buttons[i].className = 'filter-btn';
}
if (isActive) {
currentFilter = 'all';
} else {
currentFilter = filter;
var activeBtn = document.querySelector('.filter-btn[data-filter="' + filter + '"]');
if (activeBtn) {
activeBtn.className = 'filter-btn active';
}
}
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
var category = marker.getAttribute('data-category');
if (currentFilter === 'all') {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction');
} else {
if (category === currentFilter) {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction');
} else {
marker.className = 'map-marker marker-' + marker.getAttribute('data-faction') + ' hidden';
}
}
}
}
// ============================================
// ИНИЦИАЛИЗАЦИЯ (СТАБИЛЬНАЯ)
// ============================================
if (document.readyState === 'complete') {
setTimeout(function() {
initMap();
}, 100);
} else {
window.onload = function() {
setTimeout(function() {
initMap();
}, 300);
};
}
</script>
</body>
[/html]
Страница: 1
