Локации Академии

Поделиться113-10-2025 23:25:14

All
Автор: Red thread of fate
красная нить судьбы
So, have you found your soulmate?
Сообщений: 165
Уважение: +507
Деньги: 0
Игровые посты: ∞
Последний визит:
22-02-2026 19:31:39
FATE

Локации Академии

Академия находится в Салеме, что севернее Бостона. Её кампус раскинулся на острове Уинтер, узкой и вытянутой вдоль океана земле в восточной части города с солёным ветром и испещрённую дорожками, которые то уходят в тень деревьев, то резко выводят к камням и воде. Здесь постоянно слышно море: оно обволакивает берег, приносит ветер и иногда окутывает всё вязким туманом.[float=right]
42.529617251361515, -70.868893210953[/float]

Для простых людей это место известно как частное образовательное учреждение — «Салемский подготовительный колледж», в инфраструктуру которого входят яхтовый клуб и здания бывшего морского исследовательского центра Cat Cove. Для одарённых же это место в котором они могут находить друг друга и развивать свои магические таланты.

Кампус разделён на несколько функциональных зон, соединённых дорогами, пешеходными маршрутами и служебными проездами. Основными ориентирами служат береговая линия на востоке острова, здание Главного корпуса в его южной части, а в северной зоне расположившиеся там мужское и женское общежития студентов. Западный сектор, находящийся на материке, занимает административно-служебный комплекс Академии в зданиях бывшего центра морских исследований Cat Cove.

Локации Фасги до 27.12.2025

[html]
<script src="https://feather-tail.github.io/MyBB-scripts-bundle/js/theme-switcher/theme-iframe.js"></script>
<script src="https://feather-tail.github.io/MyBB-scripts-bundle/js/font-resizer/font-resizer-iframe.js"></script>
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Карта кампуса</title>

/* SETTINGS: цвета рамки (градиент) */
--ks-frame-grad-a: color-mix(in srgb, var(--accent, #566a7c) 55%, #fff);
--ks-frame-grad-b: color-mix(in srgb, var(--accent2, #35597c) 45%, #fff);

--ks-radius: var(--radius, 10px);
--ks-gap: var(--gap, 16px);
--ks-gap-sm: var(--small-gap, 8px);

--ks-panel: var(--podform, #d4d4d5);
--ks-panel-2: var(--panel-bg-light, var(--quote, #d1cfcf));
--ks-border: var(--bord, rgba(0,0,0,.18));
--ks-border-2: var(--panel-border, var(--ks-border));

--ks-text: var(--text, #28323d);
--ks-muted: var(--sec-text, #414952);

--ks-accent: var(--accent, #566a7c);
--ks-accent2: var(--accent2, #35597c);

--ks-shadow: 0 10px 22px rgba(0,0,0,.12);
--ks-shadow-strong: 0 16px 38px rgba(0,0,0,.16);

--ks-map-bg: var(--htm-bg, none);
--ks-map-frame: var(--pf-bg, none);

--ks-hl-duration: 140ms;
--ks-hl-brightness: 1.08;
--ks-hl-saturate: 1.06;
--ks-active-brightness: 1.14;
--ks-active-saturate: 1.10;

--ks-dim-opacity: .55;

--ks-wash-opacity: .30;
--ks-wash-focus-opacity: .40;

--ks-dim-overlay: rgba(0,0,0,.16);
--ks-dim-overlay-focus: rgba(0,0,0,.28);

--ks-shell-pad: calc(var(--ks-gap) * 1.1);
--ks-map-width: min(100%, calc(var(--ks-map-height) * var(--ks-map-ratio)));
}

*{ box-sizing:border-box; }

body{
margin:0;
color: var(--ks-text);
font: 14px/1.4 var(--main-font, system-ui), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: transparent;
}

.ks-icon{
width: 16px;
height: 16px;
display:block;
fill: currentColor;
}

.ks-map-shell{
max-width: none;
width: min(100%, calc(var(--ks-map-width) + var(--ks-shell-pad) * 2));
margin: 0 auto;
padding: var(--ks-shell-pad);
border-radius: calc(var(--ks-radius) + 6px);
background:
linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)),
var(--ks-map-bg);
border: 1px solid color-mix(in srgb, var(--ks-border) 80%, transparent);
box-shadow: var(--ks-shadow);
position: relative;
overflow: hidden;
}

.ks-map-shell::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(820px 300px at 18% 8%, color-mix(in srgb, var(--ks-accent) 18%, transparent), transparent 60%),
radial-gradient(760px 300px at 82% 0%, color-mix(in srgb, var(--ks-accent2) 14%, transparent), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
pointer-events:none;
opacity:.9;
}

.ks-map-shell__inner{
position:relative;
z-index:1;
}

.ks-head{
width: var(--ks-map-width);
margin: 0 auto var(--ks-gap-sm);
display:flex;
justify-content:center;
text-align:center;
}

.ks-title{
margin:0;
font-family: var(--sec-font, var(--main-font, inherit));
font-size: 18px;
letter-spacing:.2px;
color: var(--ks-text);
}

.ks-toolbar{
width: var(--ks-map-width);
margin: 10px auto 14px;
display:flex;
gap: var(--ks-gap-sm);
align-items:center;
flex-wrap:wrap;
}

.ks-search{
flex: 1 1 auto;
min-width: 0;
position:relative;
}

.ks-search__icon{
position:absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: color-mix(in srgb, var(--ks-muted) 70%, transparent);
pointer-events:none;
}

.ks-search__clear{
position:absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--ks-border-2) 85%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35)),
var(--ks-panel-2);
color: color-mix(in srgb, var(--ks-muted) 80%, transparent);
cursor:pointer;
box-shadow: 0 8px 16px rgba(0,0,0,.10);
display:none;
align-items:center;
justify-content:center;
transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}
.ks-search__clear:hover{
transform: translateY(-50%) translateY(-1px);
color: color-mix(in srgb, var(--ks-text) 85%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--ks-accent) 20%, #fff), rgba(255,255,255,.45));
}

.ks-search input{
width:100%;
padding: 10px 44px 10px 36px;
border-radius: var(--ks-radius);
border: 1px solid color-mix(in srgb, var(--ks-border-2) 85%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.35)),
var(--ks-panel-2);
color: var(--ks-text);
outline:none;
box-shadow: 0 8px 18px rgba(0,0,0,.10);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ks-search input::placeholder{ color: color-mix(in srgb, var(--ks-muted) 70%, transparent); }
.ks-search input:focus{
border-color: color-mix(in srgb, var(--ks-accent) 70%, var(--ks-border-2));
box-shadow: 0 10px 22px color-mix(in srgb, var(--ks-accent) 22%, rgba(0,0,0,.10));
}

.ks-searchResults{
position:absolute;
top: calc(100% + 8px);
left:0;
right:0;
z-index: 40;
border-radius: var(--ks-radius);
border: 1px solid color-mix(in srgb, var(--ks-border-2) 85%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55)),
var(--ks-panel-2);
box-shadow: var(--ks-shadow-strong);
overflow:hidden;
backdrop-filter: blur(6px);
}
.ks-searchResults[hidden]{ display:none; }

.ks-searchItem{
width:100%;
text-align:left;
padding: 10px 12px;
background: transparent;
border:0;
color: var(--ks-text);
cursor:pointer;
display:flex;
align-items:center;
gap: 10px;
font: inherit;
transition: background 120ms ease;
}
.ks-searchItem:hover{
background: color-mix(in srgb, var(--ks-accent) 12%, transparent);
}
.ks-searchItem small{
display:block;
margin-top:2px;
color: var(--ks-muted);
}

.ks-map{
width: var(--ks-map-width);
margin: 0 auto;
position:relative;
padding: var(--ks-map-frame-pad);
border-radius: calc(var(--ks-radius) + 10px);
border: 2px solid transparent;
background:
linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18)) padding-box,
var(--ks-map-frame) padding-box,
linear-gradient(135deg, var(--ks-frame-grad-a), var(--ks-frame-grad-b)) border-box;
box-shadow: var(--ks-shadow-strong);
overflow:hidden;
}

.ks-map::after{
content:"";
position:absolute;
inset: 8px;
border-radius: calc(var(--ks-radius) + 4px);
pointer-events:none;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.35),
inset 0 0 0 2px rgba(0,0,0,.06);
z-index: 5;
}

.ks-map__viewport{
position:relative;
width:100%;
height: var(--ks-map-height);
background: rgba(255,255,255,.12);
overflow:hidden;
border-radius: calc(var(--ks-radius) + 6px);
}

.ks-map__viewport::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity: var(--ks-wash-opacity);
z-index: 2;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--ks-accent) 26%, transparent),
color-mix(in srgb, var(--ks-accent2) 20%, transparent)),
radial-gradient(1200px 700px at 30% 25%,
color-mix(in srgb, var(--ks-accent) 22%, transparent),
transparent 62%),
radial-gradient(1100px 650px at 70% 70%,
color-mix(in srgb, var(--ks-accent2) 18%, transparent),
transparent 60%);
mix-blend-mode: multiply;
}

.ks-map__viewport::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: var(--ks-dim-overlay);
opacity: 0;
transition: opacity 140ms ease, background 140ms ease;
z-index: 3;
}

.ks-map.is-focus .ks-map__viewport::before{ opacity: var(--ks-wash-focus-opacity); }
.ks-map.is-focus .ks-map__viewport::after{
opacity: 1;
background: var(--ks-dim-overlay-focus);
}

.ks-map__loading,
.ks-map__error{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding: 20px;
color: var(--ks-muted);
background: rgba(255,255,255,.35);
backdrop-filter: blur(8px);
z-index: 4;
}

.ks-map__viewport svg{
width:100%;
height:100%;
display:block;
user-select:none;
-webkit-user-drag:none;
position:relative;
z-index: 1;
transition: filter 140ms ease, opacity 140ms ease;
filter: grayscale(0.5);
}

.ks-map.is-focus .ks-map__viewport svg{
opacity: var(--ks-dim-opacity);
filter: grayscale(0.5) saturate(.92) brightness(.93) contrast(1.02);
}

.ks-map__hotspot-target{
transition: filter var(--ks-hl-duration) ease, opacity var(--ks-hl-duration) ease;
}

.ks-map__hotspot-target.is-hovered{
filter:
brightness(var(--ks-hl-brightness))
saturate(var(--ks-hl-saturate))
drop-shadow(0 6px 14px rgba(0,0,0,.18))
drop-shadow(0 0 14px color-mix(in srgb, var(--ks-accent) 55%, transparent));
opacity: 1;
}

.ks-map__hotspot-target.is-active{
filter:
brightness(var(--ks-active-brightness))
saturate(var(--ks-active-saturate))
drop-shadow(0 12px 20px rgba(0,0,0,.22))
drop-shadow(0 0 18px color-mix(in srgb, var(--ks-accent2) 55%, transparent));
opacity: 1;
}

@media (prefers-reduced-motion: reduce){
.ks-map__hotspot-target{ transition:none; }
.ks-map__viewport svg{ transition:none; }
.ks-map__viewport::after{ transition:none; }
}

.ks-tooltip{
position: fixed;
z-index: 60;
max-width: min(460px, calc(100vw - 18px));
left: 0;
top: 0;
transform: translate3d(0,0,0);
border-radius: calc(var(--ks-radius) + 6px);
border: 1px solid color-mix(in srgb, var(--ks-border-2) 85%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64)),
var(--ks-panel-2);
box-shadow: var(--ks-shadow-strong);
color: var(--ks-text);
backdrop-filter: blur(10px);
pointer-events: auto;
}
.ks-tooltip[hidden]{ display:none; }

.ks-tooltip__inner{ padding: 12px; }

.ks-tooltip__top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}

.ks-tooltip__title{
margin:0;
font-size: 13px;
font-weight: 750;
letter-spacing: .2px;
font-family: var(--sec-font, var(--main-font, inherit));
color: var(--ks-text);
line-height: 1.25;
}

.ks-tooltip__close{
appearance:none;
border: 1px solid color-mix(in srgb, var(--ks-border-2) 85%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--ks-accent) 22%, #fff), rgba(255,255,255,.55));
color: color-mix(in srgb, var(--ks-text) 88%, transparent);
line-height: 1;
padding: 7px 9px;
cursor:pointer;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0,0,0,.10);
transition: transform 120ms ease, background 120ms ease, color 120ms ease;
flex: 0 0 auto;
display:flex;
align-items:center;
justify-content:center;
}
.ks-tooltip__close:hover{
transform: translateY(-1px);
color: var(--ks-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--ks-accent) 32%, #fff), rgba(255,255,255,.60));
}

.ks-tooltip__body{
margin-top: 10px;
display:grid;
grid-template-columns: 96px 1fr;
gap: 10px;
align-items:start;
}

.ks-tooltip__img{
width: 96px;
height: 96px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--ks-border-2) 85%, transparent);
object-fit: cover;
background:
linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.20)),
var(--ks-panel);
display:block;
box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.ks-tooltip__desc{
margin:0;
font-size: 12px;
color: color-mix(in srgb, var(--ks-text) 86%, transparent);
}

.ks-tooltip__more{
display:inline-block;
margin-top: 8px;
font-size: 12px;
color: color-mix(in srgb, var(--ks-accent2) 85%, var(--ks-text));
text-decoration: none;
border-bottom: 1px dashed color-mix(in srgb, var(--ks-accent2) 45%, transparent);
}
.ks-tooltip__more:hover{
border-bottom-style: solid;
}

.ks-tooltip[data-mode="preview"] .ks-tooltip__close{ display:none; }
.ks-tooltip[data-mode="preview"] .ks-tooltip__body{ display:none; }
.ks-tooltip[data-mode="preview"] .ks-tooltip__inner{ padding: 10px 12px; }

@media (max-width: 720px){
.ks-map-shell{ width: 100%; }
.ks-head, .ks-toolbar, .ks-map{ width: 100%; }
.ks-map__viewport{
height: auto;
aspect-ratio: 3431.52 / 4539.36;
}
}
</style>
</head>

<body>
<section class="ks-map-shell">
<div class="ks-map-shell__inner">
<header class="ks-head">
<h1 class="ks-title">Карта кампуса</h1>
</header>

<div class="ks-map" id="mapRoot">
<div class="ks-map__viewport" id="mapViewport">
<div class="ks-map__loading" id="mapLoading">Карта загрузится, когда дойдёшь до неё…</div>
</div>
</div>
</div>
</section>

<div class="ks-tooltip__body">
<img class="ks-tooltip__img" id="tipImg" alt="" />
<div>
<p class="ks-tooltip__desc" id="tipDesc">—</p>
<a class="ks-tooltip__more" id="tipMore" href="#" target="_blank" rel="noopener noreferrer" hidden>Читать далее…</a>
</div>
</div>
</div>
</div>

const PLACEHOLDER_IMG =
'data:image/svg+xml;charset=utf-8,' +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">' +
'<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">' +
'<stop offset="0" stop-color="#cfe1f3"/><stop offset="1" stop-color="#bfc8d0"/>' +
'</linearGradient></defs>' +
'<rect width="192" height="192" rx="28" fill="url(#g)"/>' +
'<path d="M52 88l44-34 44 34v50a8 8 0 0 1-8 8H60a8 8 0 0 1-8-8V88z" fill="rgba(0,0,0,0.10)"/>' +
'<path d="M82 146V110h28v36" fill="rgba(0,0,0,0.14)"/>' +
'<path d="M52 88l44-34 44 34" fill="none" stroke="rgba(0,0,0,0.18)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>' +
'</svg>'
);

const mapRoot = document.getElementById('mapRoot');
const viewport = document.getElementById('mapViewport');
const loading = document.getElementById('mapLoading');

const tooltip = document.getElementById('mapTooltip');
const tipTitle = document.getElementById('tipTitle');
const tipClose = document.getElementById('tipClose');
const tipImg = document.getElementById('tipImg');
const tipDesc = document.getElementById('tipDesc');
const tipMore = document.getElementById('tipMore');

const searchInput = document.getElementById('mapSearch');
const searchResults = document.getElementById('mapSearchResults');
const searchClear = document.getElementById('mapSearchClear');

const escapeCss = (s) => (window.CSS && typeof CSS.escape === 'function')
? CSS.escape(s)
: String(s).replace(/([ !"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, '\\$1');

const clamp = (v, a, b) => Math.max(a, Math.min(b, v));

function parseHotspotsFromData(){
const nodes = Array.from(document.querySelectorAll('#mapData [data-map-id]'));
return nodes.map((n) => ({
id: n.dataset.mapId || '',
title: n.dataset.title || '',
desc: n.dataset.desc || '',
img: n.dataset.img || '',
url: n.dataset.url || ''
})).filter((x) => x.id && x.title);
}

function sanitizeSvgText(svgText){
const parser = new DOMParser();
const doc = parser.parseFromString(svgText, 'image/svg+xml');
const svg = doc.documentElement;

Array.from(svg.querySelectorAll('script')).forEach((n) => n.remove());
Array.from(svg.querySelectorAll('foreignObject')).forEach((n) => n.remove());

const all = svg.querySelectorAll('*');
for (const el of all){
const attrs = Array.from(el.attributes);
for (const a of attrs){
if (/^on/i.test(a.name)) el.removeAttribute(a.name);
}
}
return svg.outerHTML;
}

function svgEl(tag){
return document.createElementNS('http://www.w3.org/2000/svg', tag);
}

function closestHotspot(node){
if (!node) return null;
if (node.closest) return node.closest('[data-map-id]');
let cur = node;
while (cur && cur.getAttribute){
if (cur.getAttribute('data-map-id')) return cur;
cur = cur.parentNode;
}
return null;
}

function setTooltipContent(data, mode){
tooltip.dataset.mode = mode;
tipTitle.textContent = data.title || '—';
tipDesc.textContent = data.desc || '';
tipImg.src = data.img || PLACEHOLDER_IMG;
tipImg.alt = data.title || '';

if (data.url){
tipMore.href = data.url;
tipMore.hidden = false;
} else {
tipMore.hidden = true;
tipMore.removeAttribute('href');
}
}

let tipMetrics = { mode: '', w: 0, h: 0, dirty: true };

function markTipDirty(){
tipMetrics.dirty = true;
}

function updateTipMetrics(mode){
if (!tipMetrics.dirty && tipMetrics.mode === mode && tipMetrics.w && tipMetrics.h) return;

tipMetrics.mode = mode;
tipMetrics.dirty = false;

const prevVis = tooltip.style.visibility;
const prevLeft = tooltip.style.left;
const prevTop = tooltip.style.top;

tooltip.style.visibility = 'hidden';
tooltip.style.left = '-9999px';
tooltip.style.top = '-9999px';

const r = tooltip.getBoundingClientRect();
tipMetrics.w = r.width;
tipMetrics.h = r.height;

tooltip.style.visibility = prevVis || '';
tooltip.style.left = prevLeft || '0px';
tooltip.style.top = prevTop || '0px';
}

function scorePlacement(left, top, w, h){
const vpW = window.innerWidth;
const vpH = window.innerHeight;
const overflowL = Math.max(0, SETTINGS.edgePad - left);
const overflowT = Math.max(0, SETTINGS.edgePad - top);
const overflowR = Math.max(0, (left + w) - (vpW - SETTINGS.edgePad));
const overflowB = Math.max(0, (top + h) - (vpH - SETTINGS.edgePad));
return overflowL + overflowT + overflowR + overflowB;
}

function placeTooltipAt(anchorX, anchorY){
const w = tipMetrics.w || tooltip.getBoundingClientRect().width;
const h = tipMetrics.h || tooltip.getBoundingClientRect().height;
const o = SETTINGS.tooltipOffset;

const candidates = [
{ p: 'top', left: anchorX - w / 2, top: anchorY - h - o },
{ p: 'bottom', left: anchorX - w / 2, top: anchorY + o },
{ p: 'right', left: anchorX + o, top: anchorY - h / 2 },
{ p: 'left', left: anchorX - w - o, top: anchorY - h / 2 }
];

let best = candidates[0];
let bestScore = Infinity;

for (const c of candidates){
const s = scorePlacement(c.left, c.top, w, h);
if (s < bestScore){
bestScore = s;
best = c;
}
}

const vpW = window.innerWidth;
const vpH = window.innerHeight;

const left = clamp(best.left, SETTINGS.edgePad, vpW - SETTINGS.edgePad - w);
const top = clamp(best.top, SETTINGS.edgePad, vpH - SETTINGS.edgePad - h);

tooltip.style.left = left + 'px';
tooltip.style.top = top + 'px';
tooltip.hidden = false;
tooltip.dataset.placement = best.p;
}

function hideTooltip(){
tooltip.hidden = true;
tooltip.style.left = '0px';
tooltip.style.top = '0px';
}

let svgRoot = null;
let activeTarget = null;
let pinnedOpen = false;
let previewOpen = false;

const idToTarget = new Map();

function setHovered(target, on){
if (!target) return;
target.classList.toggle('is-hovered', !!on);
}

function setActive(target, on){
if (!target) return;
target.classList.toggle('is-active', !!on);
}

function clearActive(){
if (activeTarget){
setActive(activeTarget, false);
activeTarget = null;
}
mapRoot.classList.remove('is-focus');
}

function openPreview(data, x, y){
if (pinnedOpen) return;
previewOpen = true;
setTooltipContent(data, 'preview');
tooltip.hidden = false;
markTipDirty();
updateTipMetrics('preview');
placeTooltipAt(x, y);
}

function closePreview(){
if (!previewOpen) return;
previewOpen = false;
hideTooltip();
}

function openPinned(data, target, x, y){
pinnedOpen = true;
previewOpen = false;

mapRoot.classList.add('is-focus');

setTooltipContent(data, 'pinned');
tooltip.hidden = false;
markTipDirty();
updateTipMetrics('pinned');

if (activeTarget && activeTarget !== target) setActive(activeTarget, false);
activeTarget = target;
setActive(activeTarget, true);

placeTooltipAt(x, y);
}

function closePinned(){
if (!pinnedOpen) return;
pinnedOpen = false;
hideTooltip();
clearActive();
}

function togglePinned(data, target, x, y){
if (pinnedOpen && activeTarget === target){
closePinned();
return;
}
openPinned(data, target, x, y);
}

function anchorFromTarget(target){
const r = target.getBoundingClientRect();
return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
}

function attachHitRect(target, data){
let bbox = null;
try { bbox = target.getBBox(); } catch(e) { bbox = null; }
if (!bbox) return null;

const pad = SETTINGS.hitPadding;
const rect = svgEl('rect');
rect.setAttribute('x', String(bbox.x - pad));
rect.setAttribute('y', String(bbox.y - pad));
rect.setAttribute('width', String(bbox.width + pad * 2));
rect.setAttribute('height', String(bbox.height + pad * 2));
rect.setAttribute('fill', '#000');
rect.setAttribute('fill-opacity', '0');
rect.style.cursor = 'pointer';

rect.dataset.mapId = data.id;
rect.dataset.title = data.title;
rect.dataset.desc = data.desc;
rect.dataset.img = data.img;
rect.dataset.url = data.url;

target.classList.add('ks-map__hotspot-target');
target.style.pointerEvents = 'none';

const parent = target.parentNode;
if (parent) parent.insertBefore(rect, target.nextSibling);

return rect;
}

function getDataFromHotspotEl(hs){
return {
id: hs.dataset.mapId || '',
title: hs.dataset.title || '',
desc: hs.dataset.desc || '',
img: hs.dataset.img || '',
url: hs.dataset.url || ''
};
}

function buildSearchUI(hotspots){
const normalize = (s) => String(s || '').trim().toLowerCase();

const closeList = () => { searchResults.hidden = true; searchResults.innerHTML = ''; };
const openList = () => { searchResults.hidden = false; };

const setClearVisible = () => {
searchClear.style.display = searchInput.value ? 'flex' : 'none';
};

const computeMatches = () => {
const q = normalize(searchInput.value);
if (!q) return [];
return hotspots
.map((h) => ({ h, t: normalize(h.title), d: normalize(h.desc) }))
.filter((x) => x.t.includes(q) || x.d.includes(q))
.slice(0, SETTINGS.searchMaxItems)
.map((x) => x.h);
};

const pick = (item) => {
const target = idToTarget.get(item.id);
if (!target) return;

viewport.scrollIntoView({ behavior: 'smooth', block: 'center' });

const a = anchorFromTarget(target);
togglePinned(item, target, a.x, a.y);

closeList();
searchInput.blur();
};

searchInput.addEventListener('input', () => {
setClearVisible();
const q = normalize(searchInput.value);
if (!q) { closeList(); return; }
render(computeMatches());
});

searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { closeList(); return; }
if (e.key === 'Enter') {
const firstBtn = searchResults.querySelector('.ks-searchItem');
if (firstBtn){
firstBtn.click();
e.preventDefault();
}
}
});

searchResults.addEventListener('click', (e) => {
const btn = e.target.closest('.ks-searchItem');
if (!btn) return;
const idx = Number(btn.dataset.idx);
const items = computeMatches();
const item = items[idx];
if (item) pick(item);
});

document.addEventListener('click', (e) => {
if (!searchResults.hidden && !searchResults.contains(e.target) && e.target !== searchInput){
closeList();
}
});

searchClear.addEventListener('click', () => {
searchInput.value = '';
searchInput.focus();
setClearVisible();
closeList();
});

setClearVisible();
}

let rafMove = 0;
let lastMoveX = 0;
let lastMoveY = 0;

function bindDelegatedEvents(){
let hoveredId = null;

const clearHover = (id) => {
if (!id) return;
const t = idToTarget.get(id);
setHovered(t, false);
};

svgRoot.addEventListener('pointerover', (e) => {
if (e.pointerType !== 'mouse') return;
if (pinnedOpen) return;

const hs = closestHotspot(e.target);
if (!hs) return;

const id = hs.dataset.mapId || '';
if (!id || id === hoveredId) return;

if (hoveredId) clearHover(hoveredId);
hoveredId = id;

const target = idToTarget.get(id);
setHovered(target, true);

openPreview(getDataFromHotspotEl(hs), e.clientX, e.clientY);
});

svgRoot.addEventListener('pointerout', (e) => {
if (e.pointerType !== 'mouse') return;
if (pinnedOpen) return;

const from = closestHotspot(e.target);
if (!from) return;

const to = closestHotspot(e.relatedTarget);
if (to && to.dataset.mapId === from.dataset.mapId) return;

const id = from.dataset.mapId || '';
if (id && id === hoveredId){
clearHover(hoveredId);
hoveredId = null;
}

closePreview();
});

svgRoot.addEventListener('pointermove', (e) => {
if (e.pointerType !== 'mouse') return;
if (!previewOpen || pinnedOpen) return;
schedulePreviewMove(e.clientX, e.clientY);
});

svgRoot.addEventListener('click', (e) => {
const hs = closestHotspot(e.target);
if (!hs) return;

e.stopPropagation();

const id = hs.dataset.mapId || '';
const target = idToTarget.get(id);
if (!target) return;

togglePinned(getDataFromHotspotEl(hs), target, e.clientX, e.clientY);
});

let press = null;

const clearPress = () => {
if (press && press.timer) clearTimeout(press.timer);
press = null;
};

svgRoot.addEventListener('pointerdown', (e) => {
if (e.pointerType === 'mouse') return;

const hs = closestHotspot(e.target);
if (!hs) return;

const id = hs.dataset.mapId || '';
if (!id) return;

press = {
id,
startX: e.clientX,
startY: e.clientY,
fired: false,
timer: setTimeout(() => {
if (!press) return;
press.fired = true;
openPreview(getDataFromHotspotEl(hs), e.clientX, e.clientY);
}, SETTINGS.longPressMs)
};
}, { passive: true });

svgRoot.addEventListener('pointermove', (e) => {
if (!press) return;
const dx = e.clientX - press.startX;
const dy = e.clientY - press.startY;
if (Math.hypot(dx, dy) > SETTINGS.longPressMovePx){
clearPress();
}
}, { passive: true });

svgRoot.addEventListener('pointerup', (e) => {
if (!press) return;

const hs = closestHotspot(e.target);
const id = press.id;
const fired = press.fired;

clearPress();

if (fired){
closePreview();
return;
}

if (!hs) return;
if ((hs.dataset.mapId || '') !== id) return;

const target = idToTarget.get(id);
if (!target) return;

togglePinned(getDataFromHotspotEl(hs), target, e.clientX, e.clientY);
});

svgRoot.addEventListener('pointercancel', () => {
clearPress();
closePreview();
});
}

async function loadMap(){
try{
const hotspots = parseHotspotsFromData();

const res = await fetch(SETTINGS.svgUrl, { cache: 'force-cache' });
if (!res.ok) throw new Error('HTTP ' + res.status);

const raw = await res.text();
const cleaned = sanitizeSvgText(raw);

viewport.innerHTML = cleaned;
svgRoot = viewport.querySelector('svg');
if (!svgRoot) throw new Error('SVG не найден');

svgRoot.setAttribute('preserveAspectRatio', 'xMidYMid meet');

const misses = [];

for (const h of hotspots){
const target = svgRoot.querySelector('#' + escapeCss(h.id));
if (!target){
misses.push(h.id);
continue;
}

idToTarget.set(h.id, target);

const hit = attachHitRect(target, h);
if (!hit){
target.dataset.mapId = h.id;
target.dataset.title = h.title;
target.dataset.desc = h.desc;
target.dataset.img = h.img;
target.dataset.url = h.url;
target.classList.add('ks-map__hotspot-target');
target.style.cursor = 'pointer';
}
}

buildSearchUI(hotspots);
bindDelegatedEvents();

tipImg.addEventListener('error', () => { tipImg.src = PLACEHOLDER_IMG; });

tipClose.addEventListener('click', (e) => {
e.stopPropagation();
closePinned();
});

tooltip.addEventListener('click', (e) => e.stopPropagation());

viewport.addEventListener('click', () => {
closePinned();
closePreview();
});

window.addEventListener('keydown', (e) => {
if (e.key === 'Escape'){
closePinned();
closePreview();
searchResults.hidden = true;
}
});

if (loading) loading.remove();

if (misses.length){
const warn = document.createElement('div');
warn.className = 'ks-map__error';
warn.textContent = 'Часть объектов не найдена по ID: ' + misses.join(', ');
viewport.appendChild(warn);
setTimeout(() => warn.remove(), 3800);
}
} catch (err){
viewport.innerHTML = '';
const box = document.createElement('div');
box.className = 'ks-map__error';
box.textContent = 'Не удалось загрузить карту. Проверь доступность SVG по ссылке и CORS.';
viewport.appendChild(box);
}
}

function initLazy(){
let loaded = false;

const start = () => {
if (loaded) return;
loaded = true;
if (loading) loading.textContent = 'Загрузка карты…';
loadMap();
};

if (!('IntersectionObserver' in window)){
start();
return;
}

obs.observe(mapRoot);
}

initLazy();
</script>
</body>
</html>
[/html]
[hideprofile]

+8

Поделиться214-10-2025 11:34:29

All
Автор: Red thread of fate
красная нить судьбы
So, have you found your soulmate?
Сообщений: 165
Уважение: +507
Деньги: 0
Игровые посты: ∞
Последний визит:
22-02-2026 19:31:39
FATE

[html]
<script src="https://feather-tail.github.io/MyBB-scripts-bundle/js/theme-switcher/theme-iframe.js"></script>
<script src="https://feather-tail.github.io/MyBB-scripts-bundle/js/font-resizer/font-resizer-iframe.js"></script>
<style>
:root { --frame-font-size: 14px; }

html, body {
font-size: var(--frame-font-size) !important;
}

.academy-section {
margin: 18px 0 28px;
}

.academy-tabs {
display: grid;
gap: 14px;
align-items: start;
grid-template-columns: 1fr;
background: var(--htm-clr);
padding: 20px;
border-radius: 5px;
border: 1px solid var(--bord);
}
@media (min-width: 980px) {
.academy-tabs {
grid-template-columns: 320px 1fr;
}
.academy-tab-list {
grid-column: 1;
}
.academy-tab-panels {
grid-column: 2;
}
}

.academy-tab-control {
position: absolute;
opacity: 0;
pointer-events: none;
}

.academy-tab-list {
display: grid;
gap: 10px;
text-align: left;
}
.academy-tab-list label {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: 1px solid var(--bord);
border-radius: 5px;
background: var(--quote);
color: var(--sec-text, #0e0c0b);
font-family: var(--main-font);
cursor: pointer;
text-transform: uppercase;
letter-spacing: .3px;
font-size: 13px;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
box-shadow 0.2s ease, transform 0.06s;
}
.academy-tab-list label:hover {
background: rgba(201, 200, 200, 0.4);
}
.academy-tab-list label:active {
transform: translateY(1px);
}

.academy-tabs
> input:nth-of-type(1):checked
~ .academy-tab-list
> label:nth-of-type(1),
.academy-tabs
> input:nth-of-type(2):checked
~ .academy-tab-list
> label:nth-of-type(2),
.academy-tabs
> input:nth-of-type(3):checked
~ .academy-tab-list
> label:nth-of-type(3),
.academy-tabs
> input:nth-of-type(4):checked
~ .academy-tab-list
> label:nth-of-type(4),
.academy-tabs
> input:nth-of-type(5):checked
~ .academy-tab-list
> label:nth-of-type(5),
.academy-tabs
> input:nth-of-type(6):checked
~ .academy-tab-list
> label:nth-of-type(6) {
background: var(--accent2);
color: var(--bt-bg);
border-color: var(--accent2);
}

.academy-tab-panels {
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.academy-panel {
display: none;
border: 1px solid var(--bord);
border-radius: 5px;
background: var(--quote);
overflow: hidden;
font-family: var(--main-font);
}

.academy-tabs
> input:nth-of-type(1):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(1),
.academy-tabs
> input:nth-of-type(2):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(2),
.academy-tabs
> input:nth-of-type(3):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(3),
.academy-tabs
> input:nth-of-type(4):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(4),
.academy-tabs
> input:nth-of-type(5):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(5),
.academy-tabs
> input:nth-of-type(6):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(6) {
display: block;
}

.academy-panel-header {
position: relative;
overflow: hidden;
background: var(--base-bg2) center/cover no-repeat;
}
.academy-panel-header img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/7;
object-fit: cover;
filter: grayscale(1);
}
.academy-panel-header::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 45%,
rgba(0, 0, 0, 0.45) 100%
);
}
.academy-panel-title {
position: absolute;
left: 16px;
bottom: 10px;
margin: 0;
color: #fff;
font-family: var(--sec-font, serif);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.academy-panel-body {
padding: 12px 16px 16px;
background: var(--htm-clr);
margin: 20px;
border-radius: 5px;
font-size: 13px;
}
.academy-panel-body p {
margin: 6px 0 10px;
color: var(--text, #000);
font-family: var(--main-font, system-ui, sans-serif);
}

@media (max-width: 640px) {
.academy-panel-header img {
aspect-ratio: 16/9;
}
}

.academy-panel-body,
.academy-tab-list label {
font-size: inherit !important;
}
</style>

<div class="academy-tab-list">
<label for="tab-main-i-1"><span>Главный корпус</span></label>
<label for="tab-main-i-2"><span>Административный блок</span></label>
<label for="tab-main-i-3"><span>Столовая и кухня</span></label>
<label for="tab-main-i-4"><span>Учебные аудитории</span></label>
<label for="tab-main-i-5"><span>Помещение дисциплинарного комитета</span></label>
<label for="tab-main-i-6"><span>Спортивный комплекс</span></label>
</div>

<div class="academy-tab-panels">
<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-i-1">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Главный корпус</h3>
</header>
<div class="academy-panel-body">
<p>
Главное здание Академии расположено в южной части острова, ближе к открытому побережью. Его архитектура сочетает массивные каменные конструкции и современные элементы: стекло, металл, строгие линии фасада. Здание выглядит устойчивым и замкнутым, словно изначально рассчитанным на суровые погодные условия и постоянное воздействие морского воздуха.
</p>
<p>
Внутренние пространства организованы рационально: здесь расположены учебные аудитории, административные помещения, залы для собраний, спортивный зал с бассейном, кухня со столовой и множество комнат отдыха. Окна помещений выходят к морю, и шум волн нередко становится фоном для занятий и работы. Территория вокруг корпуса оформлена минималистично: каменные дорожки, открытые площадки и низкие ограды не отвлекают внимания от самого здания и окружающего пейзажа.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-i-2">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Административный блок</h3>
</header>
<div class="academy-panel-body">
<p>
Административный блок располагается в башне восточного крыла Главного корпуса из которой открывается вид на весь остров. Внутри он представляет из себя светлые коридоры с современным дизайном.
</p>
<p>
Здесь находятся канцелярия, кабинеты деканов и директора, архивы текущих дел, а так же приёмная, в которой как и прежде на стене висит табличка «Тайна охраняет мир, знание — тех, кто в нём живёт.». В этом крыле всегда пахнет бумагой, кофе и морским ветром, который тянет с улицы, когда кто-то открывает окна.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-i-3">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Столовая и кухня</h3>
</header>
<div class="academy-panel-body">
<p>
Столовая в Салеме находится на первом этаже Главного корпуса. Просторная и тёплая, с большими окнами, выходящими на гавань, она наполнена как небольшими, так и длинными столами для студентов, тянущимися через всё помещение. В дальнем конце столовой располагаются зоны, где могут уединиться преподаватели и сотрудники Академии, а вдоль большой стены напротив окон стоят островки с готовой едой на которых даже поздно вечером можно найти что-то простое и сытное.
</p>
<p>
Кухня скрыта за отдельным проходом и работает как небольшая фабрика: с раннего утра и до позднего вечера повара трудятся, чтобы накормить всех студентов и сотрудников Академии.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-i-4">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Учебные аудитории</h3>
</header>
<div class="academy-panel-body">
<p>
Учебные аудитории распределены по всем этажам Главного корпуса и представляют из себя как небольшие кабинеты, так и несколько крупных аудиторий, способных вместить в себя больше сотни студентов.
</p>
<p>
По настроению аудитории очень разные и зависят от дисциплин и преподавателей, которые ведут в них занятия.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-i-5">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Помещение дисциплинарного комитета</h3>
</header>
<div class="academy-panel-body">
<p>
Кабинет находится в Главном корпусе в дальнем углу на втором этаже западного крыла. Представляет из себя просторное светлое помещение в нейтральных тонах. В центре находится длинный стол, окружённый несколькими стульями, напротив на стене висит доска для заметок и записей на заседаниях, а по бокам расположены шкафчики для хранения личных дел и документов дисциплинарного комитета. В противоположном углу расположился буфет с неиссякаемым запасом чая, кофе и печенья на любой вкус и цвет, а на паре больших окон выстроились горшки неприхотливых домашних растений.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-i-6">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Спортивный комплекс</h3>
</header>
<div class="academy-panel-body">
<p>
Спортивный комплекс Академии примыкает к западному крылу главного корпуса и занимает 1 и −1 этажи. Вход ведёт в светлый вестибюль с постом дежурного и стойками для инвентаря; дальше пространство расходится на несколько зон, чтобы занятия разных направлений не мешали друг другу.
</p>
<p>
На 1 этаже расположены тренажёрные залы: кардио-секция с беговыми дорожками и дорожками для интервальных тренировок, силовой зал со свободными весами и станциями, а также функциональная зона для растяжки и работы с собственным весом. Там же находятся несколько рингов и площадка для спаррингов с мягким покрытием, настенными экранами для разбора техники и нишами для перчаток, бинтов и защиты. Здесь же находятся основные раздевалки: шкафчики, сушилки, душевые и отдельные кабины для быстрого восстановления (холодный душ/контраст).
</p>
<p>
−1 этаж отдан под «мокрую» часть: бассейн с размеченными дорожками и небольшой зоной для отработки техники, зал реабилитации, кабинет спортивного врача, а также тихая комната для дыхательных практик и растяжки.
</p>
<p>
Сердце комплекса — большое универсальное поле с искусственным газоном размером с футбольное. По периметру располагается внутренний круг для бега и разминки, а рядом — кладовые с мячами, щитами, конусами и переносными воротами. Обычно это поле используется для тренировок фамильяров, но частенько на нём можно увидеть студентов, играющих в какие-либо игры.
</p>
</div>
</article>
</div>
</div>
</section>
[/html]
[hideprofile]

+1

Поделиться314-10-2025 20:37:38

All
Автор: Red thread of fate
красная нить судьбы
So, have you found your soulmate?
Сообщений: 165
Уважение: +507
Деньги: 0
Игровые посты: ∞
Последний визит:
22-02-2026 19:31:39
FATE

[html]
<script src="https://feather-tail.github.io/MyBB-scripts-bundle/js/theme-switcher/theme-iframe.js"></script>
<script src="https://feather-tail.github.io/MyBB-scripts-bundle/js/font-resizer/font-resizer-iframe.js"></script>
<style>
:root { --frame-font-size: 14px; }

html, body {
font-size: var(--frame-font-size) !important;
}

.academy-section {
margin: 18px 0 28px;
}

.academy-cover {
margin: 8px 0 14px;
border: 1px solid var(--bord, #b8b8b8);
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.academy-panel-img div:after {
content: "";
background: var(--accent);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
transition: all .6s ease-in-out 0s;
mix-blend-mode: color;
}

.academy-panel-img {
position: relative;
}

.academy-panel-img span {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: var(--sec-font);
text-transform: uppercase;
color: var(--bt-bg);
font-size: 44px;
}
.academy-cover img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/5;
object-fit: cover;
background: var(--head) center/cover no-repeat;
}
.academy-cover figcaption {
padding: 10px 14px 12px;
color: var(--sec-text, #0e0c0b);
font-family: var(--main-font, system-ui, sans-serif);
background: linear-gradient(0deg, #fff 70%, rgba(255, 255, 255, 0.9));
border-top: 1px solid var(--bord, #b8b8b8);
}

.academy-tabs {
display: grid;
gap: 14px;
align-items: start;
grid-template-columns: 1fr;
background: var(--htm-clr);
padding: 20px;
border-radius: 5px;
border: 1px solid var(--bord);
}
@media (min-width: 980px) {
.academy-tabs {
grid-template-columns: 320px 1fr;
}
.academy-tab-list {
grid-column: 1;
}
.academy-tab-panels {
grid-column: 2;
}
}

.academy-tab-control {
position: absolute;
opacity: 0;
pointer-events: none;
}

.academy-tab-list {
display: grid;
gap: 10px;
text-align: left;
}
.academy-tab-list label {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: 1px solid var(--bord);
border-radius: 5px;
background: var(--quote);
color: var(--sec-text, #0e0c0b);
font-family: var(--main-font);
cursor: pointer;
text-transform: uppercase;
letter-spacing: .3px;
font-size: 13px;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
box-shadow 0.2s ease, transform 0.06s;
}
.academy-tab-list label:hover {
background: rgba(201, 200, 200, 0.4);
}
.academy-tab-list label:active {
transform: translateY(1px);
}

.academy-tabs
> input:nth-of-type(1):checked
~ .academy-tab-list
> label:nth-of-type(1),
.academy-tabs
> input:nth-of-type(2):checked
~ .academy-tab-list
> label:nth-of-type(2),
.academy-tabs
> input:nth-of-type(3):checked
~ .academy-tab-list
> label:nth-of-type(3),
.academy-tabs
> input:nth-of-type(4):checked
~ .academy-tab-list
> label:nth-of-type(4),
.academy-tabs
> input:nth-of-type(5):checked
~ .academy-tab-list
> label:nth-of-type(5) {
background: var(--accent2);
color: var(--bt-bg);
border-color: var(--accent2);
}

.academy-tab-panels {
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.academy-panel {
display: none;
border: 1px solid var(--bord);
border-radius: 5px;
background: var(--quote);
overflow: hidden;
font-family: var(--main-font);
}

.academy-tabs
> input:nth-of-type(1):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(1),
.academy-tabs
> input:nth-of-type(2):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(2),
.academy-tabs
> input:nth-of-type(3):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(3),
.academy-tabs
> input:nth-of-type(4):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(4),
.academy-tabs
> input:nth-of-type(5):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(5) {
display: block;
}

.academy-panel-header {
position: relative;
overflow: hidden;
background: var(--base-bg2) center/cover no-repeat;
}
.academy-panel-header img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/7;
object-fit: cover;
filter: grayscale(1);
}
.academy-panel-header::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 45%,
rgba(0, 0, 0, 0.45) 100%
);
}
.academy-panel-title {
position: absolute;
left: 16px;
bottom: 10px;
margin: 0;
color: #fff;
font-family: var(--sec-font, serif);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.academy-panel-body {
padding: 12px 16px 16px;
background: var(--htm-clr);
margin: 20px;
border-radius: 5px;
font-size: 13px;
}
.academy-panel-body p {
margin: 6px 0 10px;
color: var(--text, #000);
font-family: var(--main-font, system-ui, sans-serif);
}
.academy-list {
padding-left: 20px;
margin: 6px 0 10px;
color: var(--text, #000);
}
.academy-list li {
list-style: disc;
margin: 4px 0;
}

@media (max-width: 640px) {
.academy-panel-header img {
aspect-ratio: 16/9;
}
}

.academy-panel-body,
.academy-tab-list label {
font-size: inherit !important;
}

.academy-panel details {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--bord);
}
.academy-panel summary {
cursor: pointer;
font-family: var(--main-font);
text-transform: uppercase;
letter-spacing: .3px;
font-size: 12px;
color: var(--sec-text, #0e0c0b);
}
.academy-panel details[open] summary {
margin-bottom: 8px;
}
</style>

<div class="academy-tab-list">
<label for="tab-main-1"><span>Въезд и КПП</span></label>
<label for="tab-main-2"><span>Территория и двор</span></label>
<label for="tab-main-3"><span>Хозяйственный сектор</span></label>
<label for="tab-main-4"><span>Яхтовый клуб и прибрежная зона</span></label>
<label for="tab-main-5"><span>Оранжереи и теплицы</span></label>
</div>

<div class="academy-tab-panels">
<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-1">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Въезд и КПП</h3>
</header>
<div class="academy-panel-body">
<p>
Основной доступ на территорию кампуса осуществляется через северный въезд со стороны материка. Дорога выводит к контрольно-пропускному пункту, оформленному сдержанно и без излишней строгости: небольшая постройка для комфортного нахождения 24/7, шлагбаум, кованые ворота, арочные металлодетекторы и магические детекторы. Рядом с постройкой информационные таблички с правилами пребывания на территории. Внутри несколько мониторов, на которые выведены изображения с ближайших камер видеонаблюдения.
</p>
<p>
Перед КПП расположена парковка для служебного транспорта и автомобилей сотрудников, а также ограниченного числа студентов, имеющих разрешение на личный транспорт. Проверка пропусков проходит в штатном режиме, без задержек и лишних формальностей. В крайних случаях сотрудники КПП могут досмотреть вещи персонала или студентов, если есть веские основания подозревать попытку внести или вынести опасные предметы и ингредиенты.
</p>
<p>
Визуально въезд ничем не отличается от контроля на территории частного учебного или исследовательского центра, однако режим доступа соблюдается строго. Это выражается в особенном контроле посторонних представителей магического мира, которые приезжают в Академию. Они проходят обязательный осмотр личных вещей и оформляют временное разрешение на пребывание.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-2">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://upforme.ru/uploads/001c/82/f2/4/378884.webp" alt="" /></div>
</div>
<h3 class="academy-panel-title">Территория и двор</h3>
</header>
<div class="academy-panel-body">
<p>
Внутренняя территория кампуса представляет собой сеть дорожек, зелёных зон и зданий, органично вписанных в ландшафт острова. Деревья и кустарники создают естественный заслон от внешнего мира, а пространство между корпусами не выглядит перегруженным — здесь легко ориентироваться и приятно передвигаться пешком.
</p>
<p>
Центральной точкой территории является площадь перед Главным корпусом. Она открыта и хорошо просматривается, служа удобным ориентиром и местом встреч. От площади во все стороны расходятся дорожки, уходящие вглубь острова. Где-то это ровный асфальт, где-то — гравий или деревянные настилы, проложенные над камнем и песком. Вдоль маршрутов установлены фонари с мягким, ровным светом, обеспечивающим хороший обзор даже в тёмное время суток.
</p>
<p>
Восточный берег острова более открыт: отсюда хорошо видно море и линию горизонта. Западная часть защищена узким проливом и используется преимущественно в служебных целях — здесь находятся технические зоны и подходы к воде. Прогулочные маршруты позволяют обойти почти весь остров, выходя к разным участкам побережья: от каменистых кос до спокойных заводей, где вода кажется тише и глубже.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-3">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://upforme.ru/uploads/001c/82/f2/4/297979.webp" alt="" /></div>
</div>
<h3 class="academy-panel-title">Хозяйственный сектор</h3>
</header>
<div class="academy-panel-body">
<p>
Хозяйственный сектор — комплекс современных минималистичных помещений, защищённых от различных эксцессов как с помощью рун, так и сигнализаций и датчиков. Оснащены по современным стандартам для обеспечения бесперебойной и эффективной работы академии. Представляет собой два подземных этажа, с выходами к системе подземных тоннелей и к грузовым лифтам.
</p>

<p><strong>Что входит в сектор:</strong></p>
<ul class="academy-list">
<li>
зона приёмки и сортировки, а также склады на минус первом этаже. Отдельные помещения и секции приспособлены под хранение техники, бытовой химии, расходных материалов, магических ингредиентов, инструментов и прочего. Имеются холодильные камеры.
</li>
<li>
генераторная и обслуживающая инфраструктура на минус втором этаже. Здесь расположено всё, что отвечает за энергию, водоснабжение, канализацию, очистку и фильтрацию, отопление.
</li>
<li>
мастерская, рабочая прачечная, хозяйственная кладовая и комната для персонала хоз.сектора на минус втором этаже. Здесь персонал может заниматься ремонтом отдельных предметов, а также отдохнуть. Отсюда мастера-ведьмы отправляются для починки чего-либо на территории академии непосредственно на места, а уборщики хранят свой инвентарь.
</li>
</ul>

<p>
На территории академии расположено несколько резервных генераторов, а также солнечные панели и ветрогенераторы, замаскированные под архитектурные элементы.
</p>
<p>
Большое внимание уделено системе учёта и контроля, защите. Попасть в хозсектор может только персонал с соответствующим доступом. Во всех помещениях размещены камеры наблюдения.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-4">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div>
</div>
<h3 class="academy-panel-title">Яхтовый клуб и прибрежная зона</h3>
</header>
<div class="academy-panel-body">
<p>
Яхтовый клуб и прибрежные сооружения являются важной частью территории кампуса. Официально они используются для спортивных и учебных программ, связанных с водой, а также для обслуживания островной инфраструктуры. Причалы, ангары и служебные помещения аккуратно вписаны в береговую линию и не нарушают общего облика острова. Прибрежная зона используется как для организованных занятий, так и для отдыха, делая море важной частью кампуса.
</p>
</div>
</article>

<article class="academy-panel" role="tabpanel" aria-labelledby="tab-main-5">
<header class="academy-panel-header">
<div class="academy-panel-img">
<div><img src="https://upforme.ru/uploads/001c/82/f2/4/378884.webp" alt="" /></div>
</div>
<h3 class="academy-panel-title">Оранжереи и теплицы</h3>
</header>
<div class="academy-panel-body">
<p>
Оранжерейный комплекс Академии расположен на восточной окраине кампуса в Салеме. Комплекс возведён на слегка возвышенном участке, дренированном естественными подземными ключами, и обращён к юго-востоку для максимального захвата утреннего солнца, которое в этих краях часто скрыто за туманами.
</p>

<p>Комплекс состоит из отдельных оранжерей, образующих полукруг вокруг центрального павильона для практических занятий. Все строения выполнены в едином стиле:</p>
<ul class="academy-list">
<li>Фундаменты и несущие стены сложены из грубого гранита. В камне вырезаны руны-обереги.</li>
<li>Каркасы оранжерей — чугунные викторианские конструкции, усиленные бронзовыми вставками с защитными символами.</li>
<li>Стеклянные панели — современные, с алхимическим напылением, регулирующим спектр света и теплоизоляцию. Они вставлены в старые рамы, создавая контраст старого и нового.</li>
</ul>

<p>
Комплекс соединён с главным учебным корпусом Академии и хозяйственными постройками подземными переходами.
</p>

<details>
<summary>Подробнее: помещения, режимы доступа и системы</summary>

<p><strong>1. Основная учебная оранжерея (Общедоступная)</strong></p>
<p>
<strong>Расположение:</strong> центральное здание комплекса.<br>
<strong>Доступ:</strong> все студенты и преподаватели.<br>
<strong>Назначение:</strong> основное место для практических занятий. Здесь выращиваются растения, необходимые для базового учебного процесса:
</p>
<ul class="academy-list">
<li>Лекарственные травы</li>
<li>Растения для простых защитных зелий</li>
<li>Нейтральные магические растения для начальных практик</li>
</ul>
<p>
<strong>Особенности:</strong> разделена на секторы по типам экосистем (умеренная зона, субтропики, небольшой уголок пустынных растений). Имеется система автоматического полива, регулируемая руническими панелями.
</p>
<p><strong>Оборудование для практических занятий:</strong></p>
<ul class="academy-list">
<li>Большие рабочие столы из каменной плиты, устойчивые к проливам и магическим воздействиям</li>
<li>Раковины с проточной водой</li>
<li>Печи и жаровни для сушки трав и первичной обработки</li>
<li>Доска с мелом и магическим проектором для демонстрации схем и рун</li>
<li>Полки с базовым набором горшков, грунтов (обычных и с примесями серебра/соли), инструментов</li>
</ul>

<p><strong>2. Декоративная и праздничная оранжерея</strong></p>
<p>
<strong>Расположение:</strong> северо-западное крыло комплекса.<br>
<strong>Доступ:</strong> все студенты и преподаватели в роли посетителей. Для работ — обслуживающий персонал.<br>
<strong>Назначение:</strong> выращивание цветов и растений для украшения интерьеров Академии, проведения праздников (Колесо Года, Церемония посвящения, Выпускной бал и проч.).
</p>
<p><strong>Коллекция:</strong></p>
<ul class="academy-list">
<li>Сезонные цветы</li>
<li>Розарий</li>
<li>Вечнозелёные вьющиеся растения для оформления залов</li>
<li>Деревья-бонсай, форма которых корректируется</li>
</ul>
<p>
<strong>Особенности:</strong> особый микроклимат, поддерживающий непрерывное цветение. Часто используется для медитативных практик и встреч.
</p>

<p><strong>3. Оранжерея опасных и ядовитых растений</strong></p>
<p>
<strong>Расположение:</strong> стоящее здание к западу от основного комплекса, окружённое каменной стеной с рунами подавления.<br>
<strong>Доступ:</strong> только преподаватели профильных дисциплин. Двойная система допуска: ключ и печать.<br>
<strong>Назначение:</strong> выращивание и изучение растений, требующих крайней осторожности.
</p>
<p><strong>Коллекция:</strong></p>
<ul class="academy-list">
<li>Мандрагора</li>
<li>Беладонна, болиголов, аконит</li>
<li>Грибы-биолюминесценты с галлюциногенными спорами</li>
<li>Образцы, потенциально подверженные влиянию Скверны (для исследовательских целей)</li>
</ul>
<p><strong>Меры безопасности:</strong></p>
<ul class="academy-list">
<li>Герметичные стеклянные купола над каждым опасным экземпляром</li>
<li>Автономная система вентиляции с фильтрами из серебряной пыли и соли</li>
<li>Руничные барьеры, подавляющие распространение ядовитых испарений и магических эманаций</li>
<li>Аварийные амулеты нейтрализации ядов у входа</li>
</ul>

<p><strong>4. Оранжерея редких и ценных растений</strong></p>
<p>
<strong>Расположение:</strong> подземный уровень под центральным павильоном. Доступ через скрытую дверь в подземном переходе от главного учебного комплекса Академии.<br>
<strong>Доступ:</strong> исключительно для старшего преподавательского состава, деканов и директора. Защищена сложнейшими печатями, требующими для открытия дактилоскопию и совместного заклинания двух уполномоченных лиц.<br>
<strong>Назначение:</strong> выращивание и сохранение исчезающих, чрезвычайно редких и дорогих магических растений, необходимых для создания мощных артефактов, эликсиров и исследований.
</p>
<p>
<strong>Особенности:</strong> полностью искусственное освещение кристаллами, накапливающими солнечный свет. Климат контролируется древними артефактами Ковена. Каждое растение находится под индивидуальной охраной и наблюдением.
</p>

<p><strong>5. Оранжерея для Кружка садоводства</strong></p>
<p>
<strong>Расположение:</strong> небольшая отдельная теплица в южной части комплекса.<br>
<strong>Доступ:</strong> члены кружка садоводства под руководством куратора-преподавателя.<br>
<strong>Назначение:</strong> практические занятия кружка, самостоятельные проекты студентов, выращивание растений для личного пользования (с одобрения куратора).
</p>
<p><strong>Особенности:</strong></p>
<ul class="academy-list">
<li>Индивидуальные грядки и стеллажи, закреплённые за активными членами кружка</li>
<li>Компостная яма с «живыми» удобрениями (черви, усиленные магией земли)</li>
<li>Небольшая библиотечка со справочниками по садоводству</li>
<li>Уютная зона для обсуждений и чаепитий с травами собственного выращивания</li>
</ul>

<p><strong>Склад инвентаря и расходных материалов</strong></p>
<p><strong>Расположение:</strong> пристройка к основной учебной оранжерее.</p>
<p><strong>Содержимое:</strong></p>
<ul class="academy-list">
<li>Садовый инструмент (лопаты, грабли, секаторы, ножницы), часть — с рунической закалкой для работы с магическими растениями</li>
<li>Запасные горшки, кашпо, поддоны из различных материалов (глина, керамика, специальное стекло)</li>
<li>Грунты и субстраты: нейтральные, щелочные, кислые, с добавлением измельчённых артефактных материалов</li>
<li>Удобрения, в том числе магические</li>
<li>Средства индивидуальной защиты: перчатки из прочной кожи, очки, респираторы с фильтрами</li>
<li>Аптечка первой помощи с противоядиями и нейтрализаторами</li>
</ul>

<p><strong>Зона отдыха и наблюдения</strong></p>
<p>
Небольшая открытая площадка с каменными скамьями в центре комплекса вокруг центральной оранжереи, откуда открывается вид на все оранжереи. Место для краткого отдыха студентов, наблюдения за изменением растений в естественном свете и проведения коротких лекций на открытом воздухе.
</p>

<p><strong>Системы жизнеобеспечения и безопасности</strong></p>
<p><strong>1. Полив:</strong> комбинированная система — автоматический полив от резервуаров с дождевой водой и ручной полив заряженной водой (настоянной на кристаллах) для особых растений.</p>
<p>
<strong>2. Защита:</strong> по периметру всего комплекса в землю вкопаны обереги-столбы, образующее слабое защитное поле, отпугивающее вредителей и случайных животных. В случае тревоги поле может быть усилено. Регулярная (раз в пару недель) проверка рун и технического оборудования в оранжереях с ядовитыми и редкими растениями. Наличие камер видеонаблюдения по всему периметру оранжерей.
</p>
</details>
</div>
</article>
</div>
</div>
</section>
[/html]
[hideprofile]

+1

Поделиться415-10-2025 11:23:49

All
Автор: Red thread of fate
красная нить судьбы
So, have you found your soulmate?
Сообщений: 165
Уважение: +507
Деньги: 0
Игровые посты: ∞
Последний визит:
22-02-2026 19:31:39
FATE

Общежития студентов

Жилые корпуса студентов находятся в северной части острова, ближе к въезду и внешней инфраструктуре кампуса. Такое расположение позволяет отделить учебные и жилые зоны, сохраняя при этом удобную связь между ними. Общежития стоят чуть в стороне от оживлённых маршрутов и окружены зелёными участками, создающими более спокойную и камерную атмосферу.

Если посмотреть на общежития с высоты, то можно будет увидеть два восьмигранника, расположившихся друг на против друга и между которыми находится круглый парк со множеством лавочек и иллюминацией, что в совокупности создаёт образ символа бесконечности.

Пятиэтажные здания выполнены в сдержанном, функциональном стиле и хорошо вписываются в ландшафт острова. Внутри предусмотрено всё необходимое для повседневной жизни студентов: жилые комнаты, общие пространства для отдыха и учёбы, кухни и хозяйственные помещения. Общественные зоны используются как для самостоятельной работы, так и для неформального общения.

Из окон открываются виды на воду, лесистые участки острова или дорожные маршруты кампуса. Близость моря ощущается здесь особенно отчётливо — в воздухе, в переменчивом освещении и в звуках ветра, которые становятся привычной частью повседневной жизни.

Расселение простое и незамысловатое. Первые два курса живут по четыре человека в комнате, где хватает места и для кроватей, и для личных столов с ящиками, и для больших шкафов. Там же есть собственный санузел с раковиной и туалетом, но душевые общие, на этаже.

На третьем и четвёртом курсах студенты могут переселиться в одноместные или двухместные комнаты с собственной душевой: здесь больше пространства для самовыражения, учёбы и поздних разговоров.

Правил в общежитии немного, и все они больше про взаимоуважение. Комендантского часа нет, но ночевать не в своей комнате нельзя. Нельзя проносить спиртное, курить в помещениях равно как и употреблять иные дурманящие, в том числе магические, вещества, а также хранить в комнатах опасные артефакты и оружие. Запрещается шуметь, нарушая покой обитателей. На каждом этаже ведётся график уборки — от студентов зависит чистота их личных комнат, а также коридоров и помещений общего пользования.

Многое держится на такте и принципе не нарушения чужих границ, однако сотрудники Академии не оставляют общежития совсем без присмотра. При необходимости может совершаться обход сотрудниками службы безопасности. Личные комнаты досматриваются только в крайних случаях при наличии жалоб и рассмотрении дел дисциплинарной комиссией.

У каждого общежития есть свой комендант, к которому можно обратиться для решения различных вопросов (от поведения соседей до засора в ванной). В их задачи также входит вопрос расселения, контроль за дисциплиной и составление графика дежурств.

[hideprofile]

+1

Поделиться515-10-2025 14:14:32

All
Автор: Red thread of fate
красная нить судьбы
So, have you found your soulmate?
Сообщений: 165
Уважение: +507
Деньги: 0
Игровые посты: ∞
Последний визит:
22-02-2026 19:31:39
FATE

Служба безопасности Академии

Здания бывшего университетского комплекса Cat Cove используются как административно-служебная зона Академии. Здесь размещаются подразделения службы безопасности, технические службы и центры связи. Местоположение комплекса удобно как с точки зрения логистики, так и с позиции контроля доступа к острову и прилегающим территориям.

Внешне этот сектор не выделяется и воспринимается как часть университетской и исследовательской инфраструктуры. Внутренние помещения адаптированы под служебные нужды и закрыты для свободного доступа. Именно здесь сосредоточена работа, не связанная напрямую с учебным процессом, но необходимая для стабильного функционирования кампуса.

[hideprofile]

+1

Поделиться615-10-2025 17:19:42

All
Автор: Red thread of fate
красная нить судьбы
So, have you found your soulmate?
Сообщений: 165
Уважение: +507
Деньги: 0
Игровые посты: ∞
Последний визит:
22-02-2026 19:31:39
FATE

Медицинский центр и кабинеты психологов

Медицинский центр в салемском кампусе куда уместнее было бы называть небольшим медицинским центром. Он представляет из себя отдельное здание в западной части острова, неподалёку от КПП и общежитий, и имеющий в своём распоряжении диагностические кабинеты, процедурные, запас базовых препаратов, хранящихся на складе, операционные, изоляторы и отдельную зону для реабилитации. Медцентр рассчитан на то, чтобы студенты, могли получить любую медицинскую помощь, будь то простуда или тяжёлые травмы полученные на полевых заданиях.

Кабинеты психологов находятся в отдельном крыле медицинского корпуса и представляют из себя более «домашнюю» его часть: спокойный свет, нейтральные цвета, защита от подслушивания, возможность индивидуальной терапии и терапию малых групп. Здесь помогают не только с тревогами и конфликтами, но и любыми другими вопросами, которые могут беспокоить студентов и сотрудников Академии.

[hideprofile]

+3

Поделиться717-02-2026 15:52:27

Автор: Kayden Moore
жив, цел, скопа!
Кайден Мур, 18

Ведь если бы я предал честь,
я предал бы тебя.
Сообщений: 2554
Уважение: +3276
Деньги: 1240
Игровые посты: 0
Последний визит:
Сегодня 01:06:49

Научный комплекс

Первый и второй этажи комплекса предназначены для учебно-практических занятий студентов. Здесь преподают алхимию и зелья, руническую грамотность, артефакторику. Кабинеты оборудованы всем необходимым для теоретических и практических уроков. Кабинеты защищены от непредвиденных инцидентов, которые могут быть на уроках. На первом этаже небольшая комната отдыха с собственной кухней для преподавателей.

На минус первом этаже расположены лабораторный архив, а также хранилище-склад, однако опасные и редкие ингредиенты там не хранятся. Доступ на этаж имеют только работники лаборатории, преподаватели и служба безопасности. Этаж соединён с подземным коридорами, ведущими в другие постройки.

Третий и четвёртый этажи предназначены для независимых от Инквизиции и Ковенов исследований, которым дан толчок с переездом в Салем. Это не секретные лаборатории, о их существовании известно всем, однако доступ туда строго ограничен.
Там работают специалисты, как прикрепленные к академии, так и приглашенные ею на время. Здесь ведутся исследования связанные с Потоком, магией и особенно Скверны. Так группа исследователей занялась изучением вопроса более эффективного обнаружения заражения Скверной. Здесь же создаются зелья, руны и артефакты, необходимые для академии и сотрудников.
Как и в других защищенных зонах попасть в эту часть комплекса можно лишь с карточкой доступа и магическим отпечатком.
Лаборатории защищены регулярно обновляемыми заклинаниями и рунами, имеют систему магической очистки или блокирования магии в отсеках, в которых хранятся и исследуются образцы. Здесь постоянно присутствует несколько сотрудников СБ, в первую очередь для реагирования в случае непредвиденных ситуаций.

Внутри здание выполнено в минималистичном стиле, светлых оттенках. Если учебные этажи украшены растениями, оборудованы лавочками для отдыха, а кабинеты различными материалами и оборудованием в зависимости от занятий, то третий и четвёртый максимально стерильны. В зависимости от направления исследований каждый кабинет лабораторий оборудован должным образом.

[hideprofile]

+4