��

mybb@mybb.ru (Legion) — Fri, 17 Apr 2026 21:13:26 +0300

�� 

��

��
��
��
��
��
��

� ��

� �� (��, ��, ��, ��, ��)
��
��
��
��

��

��
��
��
��
��
��

��

��
��

��

��
��

�� 
��

��
��
��

��

��
��
��
��, ��, ��
��

��

��
��
��

��

��
��
��
��

�� 

��
��
��
��
��

�� 

��
��
��
��

��

��

��

��
��
��
��

Blood Feast

mybb@mybb.ru (Theodore de Luna) — Tue, 03 Mar 2026 23:46:28 +0300

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

<div id="markersContainer"></div>

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

// �� (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]

��

��

��

��

Cole Nash - human

Blood Feast

Happy New Fucking Year

��������

������� ������� �����

��������� ������ � ����

���� �� ����

Cole Nash - human

Blood Feast

Happy New Fucking Year

��

��

��

��