СПИСОК ПЕРСОНАЖЕЙ
Перечень существующих персонажей в игре.
После принятия анкеты амс сами занесут вашего персонажа в таблицу, но если этого по каким-то причинам не произошло, не стесняйтесь напомнить им об этом. Увы, но мы тоже люди и можем заработаться, задуматься, отвлечься.
Сортировка происходит по фамилии
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея Личных Дел по Категориям (Прозрачная)</title>
<style>
/*
* =========================================================
* --- 1. ГЛОБАЛЬНЫЕ НАСТРОЙКИ И ПЕРЕМЕННЫЕ (ЦВЕТА, ШРИФТЫ) ---
* =========================================================
*/
:root {
/* Основные цвета, которые можно легко изменить */
--paper-color: #FDFBF2; /* Цвет бумаги, оставлен для модального окна */
--dark-red: #660000;
--bright-red: #cc0000;
--text-color: #333;
--dark-text-color: #555;
--shadow-medium: rgba(0, 0, 0, 0.15);
--shadow-dark: rgba(0, 0, 0, 0.2);
--shadow-modal: rgba(0, 0, 0, 0.7);
--stamp-color: #a01010; /* Цвет для текста печати */
}
/*
* =========================================================
* --- 2. ОБЩИЕ СТИЛИ СТРАНИЦЫ И ГАЛЕРЕИ ---
* =========================================================
*/
body {
font-family: 'Arial', sans-serif;
background-color: transparent; /* Фон всего кода - прозрачный */
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
color: var(--text-color);
}
.gallery-container {
width: 650px;
max-width: 100%;
background-color: transparent; /* Контейнер галереи прозрачен */
padding: 15px;
box-sizing: border-box;
}
/* Стили для сворачиваемых секций (Details) */
.category-section {
margin-bottom: 25px;
padding: 10px;
border-radius: 5px;
/* СДЕЛАНО ПРОЗРАЧНЫМ */
background-color: transparent;
box-shadow: 0 4px 8px var(--shadow-medium);
}
/* Заголовок секции (Summary) */
.category-section summary {
font-size: 1.4em;
font-weight: bold;
color: #282828;
padding: 10px;
cursor: pointer;
list-style: none;
position: relative;
/* Чтобы текст заголовка был читаем, добавим легкую тень, если фон очень темный */
}
/* Кастомная стрелка для секции */
.category-section summary::before {
content: '▶';
margin-right: 10px;
display: inline-block;
transition: transform 0.2s;
color: #282828;
}
/* Кастомная стрелка для секции (для развернутого состояния) */
.category-section[open] summary::before {
content: '▼';
}
/* Стиль для кнопки сортировки */
.sort-button {
display: block;
width: 98%;
padding: 8px;
margin: 15px auto;
font-size: 1em;
font-weight: bold;
color: #DCDCDC;
background-color: #282828;
cursor: pointer;
transition: background-color 0.2s;
}
.sort-button:hover {
background-color: #490005;
}
/* Стили для сетки фотографий (3 колонки) */
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 10px;
}
/* Стиль для каждой отдельной карточки-поллароида */
.grid-item {
/* СДЕЛАНО ПОЛУПРОЗРАЧНЫМ (для сохранения легкого фона) */
background-color: rgba(255, 255, 255, 0.3);
/* Если нужен полностью прозрачный фон, используйте: background-color: transparent; */
/* Убираем "зернистый" фон, так как он не будет виден на прозрачном блоке */
/* background-image: none; */
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px 10px 30px 10px;
border-radius: 2px;
box-shadow: 0 4px 8px var(--shadow-medium);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
cursor: pointer;
text-align: center;
}
.grid-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 6px 15px var(--shadow-dark);
}
/* Стиль для самой фотографии внутри полароида */
.grid-item img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border: 1px solid var(--dark-text-color);
margin-bottom: 20px;
}
/* Контейнер для имени в две строки */
.grid-item .name-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 3.5em;
overflow: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Стиль для каждой отдельной строки имени/фамилии */
.polaroid-name-line {
display: block;
margin: 0;
font-size: 1.1em;
font-weight: bold;
color: #282828;
width: 100%;
line-height: 1.2em;
text-align: center;
font-family: 'Arial', sans-serif;
word-wrap: break-word;
white-space: normal;
text-overflow: clip;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); /* Для лучшей читаемости на темном фоне */
}
/* Фамилия чуть крупнее */
.polaroid-name-line:last-child {
font-size: 1.2em;
margin-top: 0;
}
/*
* =========================================================
* --- 3. СТИЛИ ДЛЯ ВСПЛЫВАЮЩЕГО ОКНА (МОДАЛА) ---
* (Модальное окно сохраняет белый фон для читаемости "личного дела")
* =========================================================
*/
/* Затемняющий фон/оверлей для модального окна */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
z-index: 1000;
backdrop-filter: blur(5px);
overflow-y: auto;
}
/* Стиль для самого окна "Личное дело" (сохраняет цвет бумаги) */
.personal-file {
background-color: var(--paper-color);
border: 3px solid var(--dark-red);
padding: 30px;
width: 500px;
max-width: 90%;
box-shadow: 0 0 25px var(--shadow-modal);
position: relative;
box-sizing: border-box;
font-family: 'Courier New', monospace;
letter-spacing: 0.5px;
line-height: 1.5;
border-radius: 5px;
margin: 20px 0;
}
/* Стили для заголовков, печатей и других элементов модала */
.personal-file h2 { text-align: center; color: var(--bright-red); margin-top: -15px; margin-bottom: 15px; font-size: 1.8em; text-transform: uppercase; letter-spacing: 2px; border-bottom: 2px solid var(--dark-red); padding-bottom: 0px; }
.stamp-container { position: absolute; top: 110px; right: 40px; transform: rotate(10deg); z-index: 10; }
.realistic-stamp { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 2.2em; color: var(--stamp-color); opacity: 0.7; padding: 5px 15px; border: 3px solid var(--stamp-color); border-radius: 5px; text-transform: uppercase; letter-spacing: 2px; display: inline-block; background-color: rgba(255,255,255,0.05); }
.file-details a { color: var(--text-color); text-decoration: underline dotted var(--dark-red); font-weight: bold; transition: color 0.2s; }
.file-details a:hover { color: var(--bright-red); }
.file-header-wrapper { margin-bottom: 15px; }
.file-header { display: flex; align-items: flex-start; position: relative; padding-top: 15px; }
.file-portrait { width: 150px; height: 150px; object-fit: cover; border: 2px solid var(--dark-text-color); margin-right: 20px; flex-shrink: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.file-details { flex-grow: 1; }
.file-details p { margin: 5px 0; font-size: 0.95em; }
.file-details strong { color: var(--text-color); display: inline-block; min-width: 120px; }
.file-section { margin-top: 5px; border-top: 1px dashed var(--dark-red); padding-top: 15px; }
.file-section h3 { color: var(--bright-red); font-size: 1.2em; margin-bottom: 10px; text-transform: uppercase; }
.close-button { position: absolute; top: 10px; right: 15px; color: var(--dark-text-color); font-size: 1.8em; cursor: pointer; transition: color 0.2s ease-in-out; }
.close-button:hover { color: var(--bright-red); }
/* Адаптивные стили для мобильных устройств */
@media (max-width: 620px) {
.photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery-container { padding: 5px; }
.grid-item { padding: 5px 5px 20px 5px; }
.personal-file { padding: 15px; }
.file-header { flex-direction: column; align-items: center; text-align: center; padding-top: 10px; }
.file-portrait { margin-right: 0; margin-bottom: 10px; }
.file-details strong { min-width: 70px; }
.stamp-container { position: static; transform: none; margin-top: 15px; text-align: center;}
.realistic-stamp { font-size: 1.8em; padding: 3px 10px; }
}
</style>
</head>
<body>
<div class="gallery-container">
<details class="category-section" id="human-section">
<summary>Люди</summary>
<button class="sort-button" data-target-grid="humanGrid">Сортировать по имени (A-Z)</button>
<div class="photo-grid" id="humanGrid">
<div class="grid-item" data-id="1" data-name="Emily Knight" data-thumb-url="https://psv4.userapi.com/s/v1/d2/CpKSuTbRZUwcEAlRAk9krRcl4HRGQ9v6CH6bSDe4tT429RxXJ22PJPbeggrouOMk_sj0vyCdnaMorWQvPIsdxGgs0w0QFA4Z0_tqX5YzqNeaGxm8jJuISwYxSN1-KuUQ4Blo2eQqIFqG/6.png" data-category="Human">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
<div class="grid-item" data-id="4" data-name="Alisa Warlock" data-thumb-url="https://psv4.userapi.com/s/v1/d2/c8nWwBKDBBOU7cSx4pAvLJrRzf4MDhs958RvV0q_aIxrXdzZO6OINOvwqOncSG-JCOIeUI7jZTKCnsIO_e43gI3VyAAjSbE9EXs25sMxz1-t8Hr3bSdfgWChzDoQzlR6rfL-Mj_KVIUB/5.png" data-category="Human">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
</details>
<details class="category-section" id="wendigo-section">
<summary>Вендиго</summary>
<button class="sort-button" data-target-grid="wendigoGrid">Сортировать по имени (A-Z)</button>
<div class="photo-grid" id="wendigoGrid">
<div class="grid-item" data-id="101" data-name="Rick White" data-thumb-url="https://psv4.userapi.com/s/v1/d2/R7GRB01gUatadvqPHiTuSQfwpVZ4IgWhyA_MFkQUGRysE29nHFXa6HfFmh1AsnSCCP6pcoK4_uTrw69cNyYh5e7MgpKS2Zo9bcJaa_A6fhQhnD8x3ONm-4py_DP9AGkGSI_tt6TfIghR/4.png" data-category="Wendigo">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
</div>
</details>
<details class="category-section" id="werewolf-section">
<summary>Оборотни</summary>
<button class="sort-button" data-target-grid="werewolfGrid">Сортировать по имени (A-Z)</button>
<div class="photo-grid" id="werewolfGrid">
<div class="grid-item" data-id="201" data-name="Alexander Lynch" data-thumb-url="https://psv4.userapi.com/s/v1/d2/de4M4nuD6WVxQj9mas-KsJ-G1xE3jOOyCNsMdfCCKLygytk-NOTY7jdA23M3P31RyCA_1iSwUvq9XwiEp27ntFOSSYiUN_75fmZL09UtFJd0OFT3FoKSXc-YY0UIOMFTfy58Hdm1Na9f/document.png" data-category="Werewolf">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
</div>
</details>
<details class="category-section" id="vampire-section">
<summary>Вампиры</summary>
<button class="sort-button" data-target-grid="vampireGrid">Сортировать по имени (A-Z)</button>
<div class="photo-grid" id="vampireGrid">
<div class="grid-item" data-id="301" data-name="Vendla Olve" data-thumb-url="https://psv4.userapi.com/s/v1/d2/D1WskFiEXQ1BY4c0nhQxVnus5M0uufJhixOhNVi1ZXoc4yD5rD5EzH9xPbW3ZHXb56c2E2QoWOjtAoP2lu5SR7-jRvIPrNz8-fJ5xSG78FS7GTEFQnI8xC3y25dBYYFdsfbbt7pi13D1/3.png" data-category="Vampire">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
</div>
</details>
<details class="category-section" id="magick-section">
<summary>Магики</summary>
<button class="sort-button" data-target-grid="magickGrid">Сортировать по имени (A-Z)</button>
<div class="photo-grid" id="magickGrid">
<div class="grid-item" data-id="401" data-name="Rebecca Wyrm" data-thumb-url="https://psv4.userapi.com/s/v1/d2/tzMqGHMgbl72lXPKIVqBn8fUpGP3Mbe7KV4m5XeD4IqhsZHVYWZ5XK071ZMAxSttm4DZ0VK8Wa5dtk7QcAHUeClWFdbWxW6B30PUB0jaWSnT5yJi1AssZH3bb1GIjsQ5zI4yDLPZUnjC/7.png" data-category="Magick">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
<div class="grid-item" data-id="402" data-name="Christopher Cross" data-thumb-url="https://psv4.userapi.com/s/v1/d2/u7esg4s-dLs9BousOslnEyvPsheYOb60f4IauOAcXk5e9ykuXmdytsSRdVn_y2wFgW3M8RIVxICi7ZUlOMiPYAKZzd02ydT4hjK1CmVMqm5mZWl8IPL66krk6Q0Gf8uC4_iSHrtTG6Ys/2.png" data-category="Magick">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
</div>
</details>
<details class="category-section" id="sin-section">
<summary>Грехи</summary>
<button class="sort-button" data-target-grid="sinGrid">Сортировать по имени (A-Z)</button>
<div class="photo-grid" id="sinGrid">
<div class="grid-item" data-id="501" data-name="Acadia Prosper" data-thumb-url="https://psv4.userapi.com/s/v1/d2/2nx9ukSilEtKwimP7NkaN1VaenRzAMVbrazVbp757euXVBbfD9kP8JeeomqNkBHNsceaJ-QxUWFKExNtcUdgAPdyqsEkBVcEwAUEnZSaD1obIrkk9qwOlZb2IVLXysz9PhaGJ1RxkaRq/1.png" data-category="Sin">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
<div class="grid-item" data-id="502" data-name="Daniel Menacant" data-thumb-url="https://psv4.userapi.com/s/v1/d2/PnTmJbV8tcOCkBO9S0b5UvZRCo5XgTIjF2TRGi8uZWf17it0dJ5zzc4Gsws3GKGWM0JUX0BV2g0IriDxGd0WrT0nMIi_CRU-ecJxfE41gyfWjxQj5dde3mJUIX29WynqAo4E_b28_zB7/8.png" data-category="Sin">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
<div class="grid-item" data-id="503" data-name="Artemis Ewail" data-thumb-url="https://psv4.userapi.com/s/v1/d2/-g3MJuFI0xHiyJGLX3rXVaSOfnRr8NMsT66tinyorQ24x-I18laxs8QgDKQTmbhe6qvBpvqFXWqRLjltpR2Be2CxzU6htxRQxUoK2KmRuAOlbBBn9NmepNYprXcVAkea3nEg4qpvY6L-/9.png" data-category="Sin">
<img src="" alt="Портрет">
<div class="name-container"></div>
</div>
</div>
</details>
</div>
<div class="modal-overlay" id="personalFileModal">
<div class="personal-file">
<span class="close-button" onclick="closeModal()">×</span>
<h2>Личное Дело</h2>
<div class="file-header-wrapper">
<div class="file-header">
<img src="" alt="Портрет" class="file-portrait" id="filePortrait">
<div class="file-details">
<p><strong>Имя:</strong> <span id="fileName"><a href="#" target="_blank" id="fileNameLink"></a></span></p>
<p><strong>Дата рождения:</strong> <span id="fileDOB"></span></p>
<p><strong>Возраст:</strong> <span id="fileAge"></span></p>
</div>
<div class="stamp-container">
<span class="realistic-stamp" id="fileStampText"></span>
</div>
</div>
</div>
<div class="file-section"><h3>Описание:</h3><p id="fileDescription"></p></div>
<div class="file-section"><h3>Особые приметы:</h3><p id="fileDistinguishingMarks"></p></div>
</div>
</div>
<script>
// =========================================================
// !!! ОБЪЕКТ С ДАННЫМИ ПЕРСОНАЖЕЙ !!!
// =========================================================
const peopleData = {
// Люди (Human)
1: { name: "Эмили Найт", dob: "27.01.1997", age: "22", link: "https://weallscream.rusff.me/viewtopic.php?id=98#p4089", portrait: "https://psv4.userapi.com/s/v1/d2/GtMo3L-SzRqqZiOKOgD9v7y7v_yFglYFZWTZgSlvhiGNH3LdUk9V3bGPUkGSURc-kHHxxmE9Fzt-GILvRrwNB3DAIOaJmIf1kEUNXWq8lav3iHuX61ZoLpwJCT_16z9EnvrAklJsmWp9/77.png", stampText: "HUMAN", description: "Радиоведущая Godfrey's Voice с добрым сердцем и открытой душой.", distinguishingMarks: "Смольно-чёрные кудрявые волосы. Голубые глаза, полные надежды и веры в светлое будущее." },
4: { name: "Алиса Варлок", dob: "25.01.1996", age: "23", link: "https://weallscream.rusff.me/viewtopic.php?id=397", portrait: "https://psv4.userapi.com/s/v1/d2/K6OyhbiDUBrHEIqLqVio2nIRSAsvCZLzTX7hlPVbq0CQlsuC6JdP2CHoC3ToWRJ41tsQfd4Rm3PrdJBkg9a2EC0wMDPciOv3B_8V5ZQZYWAwdbmqbWS61czp5tx-r_Ct8Ln5Ccl0KIL-/66.png", stampText: "HUMAN", description: "Редактор в газете Godfrey's Daily. Нрав кроткий. Ум острый.", distinguishingMarks: "Огненно-рыжие волосы. Глаза изумрудно-зелёные. Взгляд внимательный, выискивающий детали, как у истинного журналиста." },
// Вендиго (Wendigo)
101: { name: "Рик Уайт", dob: "10.08.1986", age: "33", link: "https://weallscream.rusff.me/viewtopic.php?id=743", portrait: "https://psv4.userapi.com/s/v1/d2/PUEGINj2F6UcdITQSGXs8lGwbDvPJueH-N9-SdXdP6JcFloHbEzz38lOUjnpcWrZWCv7RhUzn296mVuhjmOXQHig266WZyyMubbma2io49VpPSCHBbKKMRbq-tTlzmAmpcbjTsY5tWWY/55.png", stampText: "WENDIGO", description: "Агент ФБР. Прибыл в Годфри вместе с братом до того, как на город опустился купол.", distinguishingMarks: "Рост выше двух метров. Седые волосы. Шрам на лице поперёк переносицы." },
// Оборотни (Werewolf)
201: { name: "Александр Линч", dob: "12.07.1987", age: "32", link: "https://weallscream.rusff.me/viewtopic.php?id=174#p13733", portrait: "https://psv4.userapi.com/s/v1/d2/9jFCn4hj-U1lrlSyJD5z9xjRcK5NvjkySCjNnA33cNyQNfyvnNRQ8F_tWni9wJntmDd6B0ybFYKvIEd9f9vDDNwWbUiDSNSZ2DJbGlOqFcDtN1H3ndt4D8kaTdwIq89eSI4g3z3tCBuM/11.png", stampText: "WEREWOLF", description: "Полицейский. Живёт и служит в Годфри с 2016-го года. Имеет ворох ментальных проблем.", distinguishingMarks: "В последнее время часто выглядит неопрятно. После инцидента 05.11.2019, каштановые волосы полностью потеряли цвет и теперь выглядят белыми. Причёска взлохмачена, лицо опухшее, синяки под глазами. Сами глаза небесно-голубого цвета (даже в обличье волка). Взгляд потухший, уставший." },
// Вампиры (Vampire)
301: { name: "Венера Лав", dob: "01.05.1472", age: "19/544", link: "https://weallscream.rusff.me/viewtopic.php?id=417#p38706", portrait: "https://psv4.userapi.com/s/v1/d2/me7skQ-howLFo8OZzartTArHmqVh69FYA9NL4ulbdLvFZwctijlEt3HGG0zX_SmMEiLe8yqi6o3fCvNnO5NgaD3pNMUzCtdpjiqNYFDTvIG3vHneMFSd3oS_FcK5Z5xMJFd5sdRAB_AW/44.png", stampText: "VAMPIRE", description: "Певица в борделе Fetichisme. Находится под опекой Ареты Лав. Одна из немногочисленных на сегодняшний день древних вампиров.", distinguishingMarks: "Рыжие волосы, вьющиеся мелкими длинными кудрями. Гетерохромия. Выглядит молодо: застывшая на грани совершеннолетия. Не обмануться её внешним видом могут помочь всегда удлинённые клыки, выступающие над пухлой нижней губой." },
// Магики (Magick)
401: { name: "Пифия Лагонико", dob: "15.07.1989", age: "30", link: "https://weallscream.rusff.me/viewtopic.php?id=213", portrait: "https://psv4.userapi.com/s/v1/d2/KfJ-V2KFmPIQtmjf-YPAQC9JTceCP9GpwAqQ5uHLNiu66H7MlWu2XsJ1O6e7LT2K6PQpNzCA5JpO7oZrdFqCZ-WK-Yh1ZgfmMKmnYMV5QEt7YRVFQ7O89fCv9P-BWzVbysFyygvmFwZZ/88.png", stampText: "MAGICK", description: "Телепат. Есть способности к Пиромантии. Частный детектив. Имеет в Годфри много связей и знакомых, как старых, так и новых.", distinguishingMarks: "Яркие рыжие волосы. Карие глаза. Лицо и тело усыпаны веснушками. За располагающим внешним видом скрывается огненная фурия. Помимо веснушек на её теле много шрамов, за каждым из которых скрыта своя кровавая история." },
402: { name: "Кристофер Кросс", dob: "19.11.1983", age: "36", link: "https://weallscream.rusff.me/viewtopic.php?id=618", portrait: "https://psv4.userapi.com/s/v1/d2/HTfLQfwNRnjQnnzKAuIWI6gT8x7x1IpTzUPKJHPecAPjKAwr86TloJ4LwCKvceHjj-Zgt7vuz99r43SJbDyGeahviMtlw9MUTFK-IZabrvxRHu2vd9tYgeQxy_8djlcWz6B9EVLofuf7/33.png", stampText: "MAGICK", description: "Некромант. Увлекается Зельеварением. Управляющий похоронным бюро In Our Memory. Владеет частью земли на городском кладбище.", distinguishingMarks: "Ярко-красные волосы, модная стрижка. Всегда опрятен, и перед клиентами предстаёт обычно в официальном костюме. На обоих предплечьях татуировки профиля Некромантии, дополненные узорами. Два прокола в хряще левого уха. Мочки ушей так же проколоты." },
// НОВЫЙ РАЗДЕЛ: Грехи (Sin)
501: { name: "Акедия Проспер", dob: "21.12.1987", age: "32", link: "https://weallscream.rusff.me/viewtopic.php?id=643", portrait: "https://psv4.userapi.com/s/v1/d2/uCRt-_X6W-5aWwJNk7246QByOHGLABU3_6cvbP4xYdZfyvmgy3oreW1cJ4dyb0sjilxkGVB1HMcvHdCeemkxUubJRG88sFqINdHTbnrrvi7hCVoxmkHy2iVAfxwt1Smzy7Z17qJzzfPp/22.png", stampText: "SIN", description: "Тень, легко пропадающая из поля зрения и из памяти. В Годфри около десяти лет. О своём прошлом говорит размыто, общими фразами. При общении производит впечатление внимательного собеседника. Работает в салоне красоты.", distinguishingMarks: "С виду невозможно сходу определить пол, поскольку внешне гендерные особенности размыты. Одежда обычно мешковатая, не подчёркивающая фигуру. Волосы каштановые. Глаза зелёно-голубые." },
502: { name: "Даниэль Мюнесон", dob: "5.10.1997", age: "22", link: "https://weallscream.rusff.me/viewtopic.php?id=102", portrait: "https://psv4.userapi.com/s/v1/d2/ru-aok4LLVjuubA2uoZ109U14k-DHxBeFUur_YIoGmraDlciqSAZa250fvCKA0WmngGCiTMiOFVpAKx39J_EkyHA9vC1lFaNku-Xex57zxI8gOoOxcdPbs4bPplSQTlJLL5anyjUSn-C/99.png", stampText: "SIN", description: " Был добрым парнем, состоял в отношениях, учился в колледже и вёл вполне обычную жизнь, пока не пробудился в Гнева. С тех пор его характер изменился, и он поселился на кладбище, где и работает. Умеренно агрессивен, источает ауру человека, с которым не стоит связываться.", distinguishingMarks: "Тёмные волосы, часто зачёсанные назад, карие глаза. Любит пиво, много курит. Вид угрюмый, взгляд тяжёлый." },
503: { name: "Артемис Ивейл", dob: "15.08.1992", age: "29", link: "https://weallscream.rusff.me/viewtopic.php?id=601", portrait: "https://psv4.userapi.com/s/v1/d2/4ml4tBWS5C4Kk0S3w2kwjwWf2uIeGaaf-3rcmejfUXsX-YNjS8XVw5UwhTRQitnITCLQ7E0L_WjBJHewfHs86BFba1NP-CynAMG34d0-4yjdK5rAT8EnmWC3AB2VaPbamQA9VO3gQZod/00.png", stampText: "SPIRIT", description: "В прошлом обычный человек с непростой судьбой. Раньше работал в полиции. По злому стечению обстоятельств был обращён в Духа Гнева и теперь одержим идеей насадить в Городе справедливость любыми способами.", distinguishingMarks: "Рост два метра. Телосложение худощавое. Волосы белоснежные. На лице красуются огромные шрамы от когтей. Левый глаз затянут бельмом, незрячий. Правый глаз голубого цвета." }
};
// =========================================================
// --- ОСНОВНАЯ ЛОГИКА СКРИПТА (НЕ МЕНЯТЬ) ---
// =========================================================
const personalFileModal = document.getElementById('personalFileModal');
const personalFileContent = personalFileModal.querySelector('.personal-file');
// Получение ссылок на элементы модального окна
const filePortrait = document.getElementById('filePortrait');
const fileNameLink = document.getElementById('fileNameLink');
const fileDOB = document.getElementById('fileDOB');
const fileAge = document.getElementById('fileAge');
const fileDescription = document.getElementById('fileDescription');
const fileDistinguishingMarks = document.getElementById('fileDistinguishingMarks');
const fileStampText = document.getElementById('fileStampText');
// Глобальный объект для хранения направления сортировки для каждой сетки
const sortDirections = {};
// Функция для разделения имени/фамилии на две строки
function splitName(fullName) {
const parts = fullName.split(' ');
const firstName = parts[0] || '';
const lastName = parts.slice(1).join(' ') || '';
return { firstName, lastName };
}
// Функция для заполнения имени на полароидной карточке
function updatePolaroidName(item) {
const personName = item.dataset.name;
const nameContainer = item.querySelector('.name-container');
if (nameContainer) {
const { firstName, lastName } = splitName(personName);
nameContainer.innerHTML =
`<span class="polaroid-name-line">${firstName}</span>` +
`<span class="polaroid-name-line">${lastName}</span>`;
}
}
/**
* Сортирует конкретную галерею по фамилии (последнему слову в data-name).
* @param {HTMLElement} button - Кнопка сортировки.
*/
function sortGalleryByName(button) {
const gridId = button.dataset.targetGrid;
const container = document.getElementById(gridId);
if (!container) return;
let currentDirection = sortDirections[gridId] || 'asc';
let items = Array.from(container.querySelectorAll('.grid-item'));
items.sort((a, b) => {
// Сортируем по фамилии (последнее слово в имени)
const nameA = a.dataset.name.split(' ').slice(-1)[0];
const nameB = b.dataset.name.split(' ').slice(-1)[0];
// Используем локаль для корректной сортировки русских букв
const comparison = nameA.localeCompare(nameB, ['ru', 'en'], { sensitivity: 'base' });
return currentDirection === 'asc' ? comparison : -comparison;
});
// Перестраиваем сетку
container.innerHTML = '';
items.forEach(item => {
container.appendChild(item);
});
// Обновляем направление и текст кнопки
const newDirection = currentDirection === 'asc' ? 'desc' : 'asc';
sortDirections[gridId] = newDirection;
button.textContent = newDirection === 'asc'
? 'Сортировать по имени (A-Z)'
: 'Сортировать по имени (A-Z)';
}
/**
* Открывает модальное окно и позиционирует его по кликнутому полароиду.
*/
function openModal(personId, clickedElement) {
const person = peopleData[personId];
if (person) {
// Заполнение данных модального окна
filePortrait.src = person.portrait;
fileNameLink.textContent = person.name;
fileNameLink.href = person.link || '#';
fileDOB.textContent = person.dob;
fileAge.textContent = person.age;
fileDescription.textContent = person.description;
fileDistinguishingMarks.textContent = person.distinguishingMarks;
fileStampText.textContent = person.stampText || '';
// --- ЛОГИКА ТОЧНОГО ПОЗИЦИОНИРОВАНИЯ ---
const rect = clickedElement.getBoundingClientRect();
personalFileModal.style.alignItems = 'flex-start';
const newMarginTop = Math.max(20, rect.top);
personalFileContent.style.marginTop = newMarginTop + 'px';
personalFileContent.style.marginBottom = '20px';
// --- КОНЕЦ ЛОГИКИ ПОЗИЦИОНИРОВАНИЯ ---
personalFileModal.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
}
/**
* Закрывает модальное окно и восстанавливает стили.
*/
function closeModal() {
personalFileModal.style.display = 'none';
document.body.style.overflow = '';
personalFileContent.style.marginTop = '20px';
personalFileModal.style.alignItems = 'center';
}
function initializeGallery() {
const gridItems = document.querySelectorAll('.grid-item');
const sortButtons = document.querySelectorAll('.sort-button');
// 1. Инициализация всех полароидов
gridItems.forEach(item => {
const personId = item.dataset.id;
const thumbUrl = item.dataset.thumbUrl;
const imgElement = item.querySelector('img');
if (imgElement && thumbUrl) {
imgElement.src = thumbUrl;
}
updatePolaroidName(item);
item.addEventListener('click', () => {
openModal(personId, item);
});
});
// 2. Инициализация кнопок сортировки
sortButtons.forEach(button => {
sortDirections[button.dataset.targetGrid] = 'asc';
button.addEventListener('click', () => {
sortGalleryByName(button);
});
});
// 3. Сортировка при открытии сворачиваемой секции
const sections = document.querySelectorAll('.category-section');
sections.forEach(section => {
section.addEventListener('toggle', () => {
if (section.open) {
const gridId = section.querySelector('.sort-button').dataset.targetGrid;
const button = section.querySelector('.sort-button');
// Если сортировка еще не была выполнена
if (sortDirections[gridId] === 'asc') {
sortGalleryByName(button);
sortGalleryByName(button);
}
}
});
});
}
// Закрытие по клику на фон (оверлей)
personalFileModal.addEventListener('click', (event) => {
if (event.target === personalFileModal) {
closeModal();
}
});
// Запуск инициализации при загрузке страницы
initializeGallery();
</script>
</body>
</html>[/html]
Персонажи, относящиеся к расе Эксперимент-17 не имеют в доступе личных дел. Если вы хотите создать персонажа этой расы, уточните такую возможность у АМС.
