список ролей

[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Georgia&family=Spline+Sans+Mono&family=Jost&display=swap');

:root {
--textcolor: black;
--headercolor: white;
--backcolorOff: black;
--backcolorOn: #555CA3;
--basecolor1: #E4E4E4;
--basecolor2: #D9D9D9;
--bordercolor: #B4C6D9;}

a {text-decoration: none;
color: var(--textcolor) !important;
cursor: pointer;}

a:visited {color: var(--textcolor);}

a:hover {color: var(--textcolor);}

a:active {color: var(--textcolor);}

#base {width: 99%;
height: 566px;
overflow: hidden;
border: solid var(--bordercolor);
border-radius: 27px;
border-width: 1.5px;
background-color: var(--basecolor1);}

#title {background-image: url(https://upforme.ru/uploads/001a/cd/5b/2/209498.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 60px;
position: relative;
color: var(--headercolor) !important;
text-align: center;
padding-top: 5px;}

h1 {font: italic bold 18px 'Georgia', serif !important;
color: var(--headercolor) !important;
margin: 0;}

#title p {font-family: 'Arial', serif;
font-size: 11px;
margin-top: -6px;}

#sortingLists {width: 100%;
height: 70px;
position: relative;
border-bottom: 2px solid transparent;
border-image: linear-gradient(to right, transparent 0%, transparent 20%, black 50%, transparent 80%, transparent 100%) 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4%;
box-sizing: border-box;}

.characterSort {width: 30%;
height: 30px;
background-color: var(--backcolorOff);
border-radius: 27px;
display: flex;
justify-content: center;
align-items: center;
color: var(--headercolor);
text-align: center;
font: italic bold 14px 'Georgia', serif;
margin: 0;
overflow: hidden;}

.characterSort select {width: 100%;
height: 100%;
background-color: var(--backcolorOff);
color: var(--headercolor);
border: none;
outline: none;
font: italic bold 14px 'Georgia', serif;
text-align: center;
text-align-last: center;
padding: 0 10px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;}

.characterSort select option {background-color: var(--backcolorOff);
color: var(--headercolor);
font: italic bold 14px 'Georgia', serif;
text-align: center;}

.characterSort select::-ms-expand {display: none;}

#characterList {width: 100%;
position: relative;
height: 436px;
box-sizing: border-box;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
gap: 25px;
overflow-y: auto;
overflow-x: hidden;}

#characterList::-webkit-scrollbar {width: 14px;}

#characterList::-webkit-scrollbar-track {background: transparent;}

#characterList::-webkit-scrollbar-thumb {background-color: var(--bordercolor);
border-radius: 10px;
border: 4px solid transparent;
background-clip: padding-box;}

.charCard {width: 195px;
height: 120px;
overflow: hidden;
border: solid var(--bordercolor);
border-radius: 18px;
border-width: 1.5px;
background-color: var(--basecolor2);}

.charCard img {height: 35px;
width: 100%;
object-fit: cover;
filter: grayscale(100%);}

table {width: 100%;
text-align: center;
border-collapse: separate;
border-spacing: 0px;}

tr {display: table-row;}

td {padding: 0;
height: 20px;
border: none;
text-align: center;
vertical-align: middle;}

/* ------------------------------------------------ СТИЛИ ДЛЯ ЯЧЕЙКИ С ИМЕНЕМ ------------------------------------------------ */
.charNameTd {padding: 0;
height: 25px;
border: none;
background: none;}

.charInfoSpan {display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
min-height: 20px;
height: auto;
border: 1.5px solid var(--bordercolor);
border-radius: 27px;
font: 400 10px "Jost", sans-serif;
text-align: center;
color: var(--textcolor);
background-color: var(--basecolor2);
white-space: nowrap;
box-sizing: border-box;
line-height: 1.2;}

/* ------------------------------------------------ СТИЛИ ДЛЯ ССЫЛКИ ВНУТРИ ИМЕНИ ------------------------------------------------ */
.charNameLink {display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 15px;
min-height: 20px;
height: auto;
border-bottom: 2px solid transparent;
border-image: linear-gradient(to right, transparent 0%, transparent 20%, black 50%, transparent 80%, transparent 100%) 1;
font: italic bold 14px "Spline Sans Mono", monospace;
text-align: center;
color: var(--textcolor);
background-color: var(--basecolor2);
white-space: nowrap;
box-sizing: border-box;
line-height: 1.2;
text-decoration: none;
cursor: pointer;}

.charNameLink:hover {opacity: 0.7;}

tbody tr:last-child td {height: auto !important;
text-align: center;
padding: 0;
display: table-cell;
width: 100%;}

tbody tr:last-child td .charInfoSpan {display: inline-flex;
margin: 0 auto;}

table,
table tr,
table td,
table th,
table tbody,
table thead,
table tfoot,
.charCard table, .charNameTd {border: none;
border-color: var(--basecolor2);
border-collapse: collapse !important;
border-spacing: 0 !important;
border-width: 0;
border-style: none !important;
outline: none;}
tbody tr:first-child td {
width: auto !important;
padding: 0 !important;}
</style>

const organizations = new Map([
/* ------------------------------------------------ ОРГАНИЗАЦИИ СЮДА ------------------------------------------------ */
["msa", "министерство"],
["oa", "орден энгуса"],
["hunter", "охотники"],
["sss", "свидетели"],
["neutral", "нейтралы"]]);

const places = new Map([
/* ------------------------------------------------ ЛОКАЦИИ СЮДА ------------------------------------------------ */
["alnwick", "алник, юк"],
["birmingham", "бирмингем, юк"],
["blackpool", "блэкпул, юк"],
["bristol", "бристоль, юк"],
["dublin", "дублин, ир"],
["galway", "голуэй , ир"],
["york", "йорк, юк"],
["cardiff", "кардифф, юк"],
["kilkenny", "килкенни, ир"],
["liverpool", "ливерпуль, юк"],
["leeds", "лидс, юк"],
["london", "лондон, юк"],
["manchester", "манчестер, юк"],
["newcastle", "ньюкасл, юк"],
["oxford", "оксфорд, юк"],
["solihull", "солихалл, юк"],
["chelmsford", "челмсфорд, юк"],
["chester", "честер, юк"],
["shennon", " шеннон, ир"],
["edinburgh", "эдинбург, юк"],
]);

const characters = [
/* ------------------------------------------------ ПЕРСОНАЖЕЙ СЮДА ------------------------------------------------ */
/* ------------------------------------------------ A ------------------------------------------------ */
{ name: "adrian", race: "faerie", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/51/961511.jpg", job: "похититель людей, нелюдей и грёз ", profile: "https://brokengeis.rusff.me/profile.php?id=51" },
{ name: "aik hughes", race: "ghost", organization: "neutral", place: "bristol", pic: "https://i.pinimg.com/736x/4e/f6/a1/4ef6a1445b634a6cfae0f677d2270854.jpg", job: "шугать нормисов", profile: "https://brokengeis.rusff.me/profile.php?id=130" },
{ name: "alexandra mcbride", race: "banshee", organization: "neutral", place: "edinburgh", pic: "https://upforme.ru/uploads/001c/bd/d1/140/776412.gif", job: "бариста", profile: "https://brokengeis.rusff.me/profile.php?id=140" },
{ name: "alistar kennedy", race: "human", organization: "hunter", place: "edinburgh", pic: "https://upforme.ru/uploads/001c/bd/d1/146/731974.png", job: "похоронный агент", profile: "https://brokengeis.rusff.me/profile.php?id=146" },
{ name: "amelia reid", race: "shifter", organization: "neutral", place: "liverpool", pic: "https://upforme.ru/uploads/001c/bd/d1/7/t792406.jpg", job: "перекати-поле", profile: "https://brokengeis.rusff.me/profile.php?id=7" },
{ name: "andy darling", race: "faerie", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/167/751675.jpg", job: "творческая личность", profile: "https://brokengeis.rusff.me/profile.php?id=167" },

/* ------------------------------------------------ B ------------------------------------------------ */
{ name: "blake ashburn", race: "witcher", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/115/70791.png", job: "владелец волшебного ломбарда", profile: "https://brokengeis.rusff.me/profile.php?id=115" },
{ name: "bran ashcombe ", race: "ghost", organization: "neutral", place: "chester", pic: "https://i.pinimg.com/736x/88/30/96/8830968222c349f38670dcdd46e0d9f3.jpg", job: "архивариус", profile: "https://brokengeis.rusff.me/profile.php?id=14" },

/* ------------------------------------------------ C ------------------------------------------------ */
{ name: "cardan silverthorne", race: "faerie", organization: "sss", place: "edinburgh", pic: "https://upforme.ru/uploads/001c/bd/d1/64/784481.png", job: "радикальный активист", profile: "https://brokengeis.rusff.me/profile.php?id=64" },
{ name: "carl blackthorn", race: "vampire", organization: "hunter", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/113/678417.png", job: "походу сопьюсь", profile: "https://brokengeis.rusff.me/profile.php?id=113" },
{ name: "casey donovan", race: "faerie", organization: "oa", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/92/137272.png", job: "оценщик", profile: "https://brokengeis.rusff.me/profile.php?id=92" },
{ name: "cedric wycliffe", race: "ghost", organization: "neutral", place: "liverpool", pic: "https://upforme.ru/uploads/001c/bd/d1/85/397275.png", job: "мающийся", profile: "https://brokengeis.rusff.me/profile.php?id=85" },
{ name: "charles pierce", race: "shifter", organization: "neutral", place: "shennon", pic: "https://i.pinimg.com/736x/1f/5c/8d/1f5c8d3166a0d0fbc26c1e58d52e5c96.jpg", job: "матрос", profile: "https://brokengeis.rusff.me/profile.php?id=101" },
{ name: "christopher wright", race: "faoladh", organization: "neutral", place: "manchester", pic: "https://upforme.ru/uploads/001c/9b/a1/31/678741.png", job: "пожарный ", profile: "https://brokengeis.rusff.me/profile.php?id=30" },
{ name: "coraline moore", race: "witch", organization: "neutral", place: "chester", pic: "https://upforme.ru/uploads/001c/bd/d1/38/715749.png", job: "студентка, подрабатывает на радио", profile: "https://brokengeis.rusff.me/profile.php?id=38" },

/* ------------------------------------------------ D ------------------------------------------------ */

/* ------------------------------------------------ E ------------------------------------------------ */
{ name: "egnacio cruz", race: "vampire", organization: "oa", place: "edinburgh", pic: "https://upforme.ru/uploads/001c/bd/d1/171/887913.png", job: "приходской священник", profile: "https://brokengeis.rusff.me/profile.php?id=171" },
{ name: "evelyn brightwater", race: "ghost", organization: "neutral", place: "oxford", pic: "https://i.pinimg.com/1200x/1b/22/0b/1b220bf1158cae428b11a02aa91de7d2.jpg", job: "ангел-хранитель", profile: "https://brokengeis.rusff.me/profile.php?id=131" },
{ name: "eric grayson", race: "human", organization: "neutral", place: "manchester", pic: "https://upforme.ru/uploads/001c/bd/d1/34/263732.jpg", job: "стилист-модельер", profile: "https://brokengeis.rusff.me/profile.php?id=34" },

/* ------------------------------------------------ F ------------------------------------------------ */
{ name: "felix everhart", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/174/417662.png", job: "танцор", profile: "https://brokengeis.rusff.me/profile.php?id=174" },
{ name: "francesca dominguez", race: "vampire", organization: "sss", place: "london", pic: "https://i.imgur.com/YORq8Wn.jpeg", job: "бенефециар мегакорпорации", profile: "https://brokengeis.rusff.me/profile.php?id=82" },

/* ------------------------------------------------ G ------------------------------------------------ */
{ name: "greta raeburn", race: "vampire", organization: "neutral", place: "cardiff", pic: "https://upforme.ru/uploads/001c/bd/d1/154/648395.png", job: "чудачка рэйбернов", profile: "https://brokengeis.rusff.me/profile.php?id=154" },

/* ------------------------------------------------ H ------------------------------------------------ */
{ name: "huskar", race: "banshee", organization: "neutral", place: "bristol", pic: "https://c.files.bbci.co.uk/18f9/live/3dc36ee0-92c7-11ef-9504-b516e8b5f45f.jpg", job: "муж на час", profile: "https://brokengeis.rusff.me/profile.php?id=4" },

/* ------------------------------------------------ I ------------------------------------------------ */
{ name: "inès baudelaire", race: "vampire", organization: "neutral", place: "dublin", pic: "https://i.pinimg.com/1200x/73/a4/4d/73a44d28d3d7d2c2b66730bdefdcbcec.jpg", job: "теолог", profile: "https://brokengeis.rusff.me/profile.php?id=129" },
{ name: "isaac wolfgang", race: "human", organization: "neutral", place: "london ", pic: "https://64.media.tumblr.com/6dda7634cbae493b9f0ed9f1f5a75c34/b6c14f8b7c892f12-b7/s540x810/3e1d83630a3170baedbcb25762e99417f6f80849.gif", job: "дилер ", profile: "https://brokengeis.rusff.me/profile.php?id=160" },

/* ------------------------------------------------ J ------------------------------------------------ */
{ name: "jace colwyn", race: "human", organization: "neutral", place: "york", pic: "https://allwebs.ru/images/2026/07/18/28657630abb3aacb06ac8655b3b8aa3e.png", job: "аферист", profile: "https://brokengeis.rusff.me/profile.php?id=180" },
{ name: "jack craye", race: "human", organization: "neutral", place: "liverpool", pic: "https://upforme.ru/uploads/001c/bd/d1/70/914276.jpg", job: "детектив полиции", profile: "https://brokengeis.rusff.me/profile.php?id=128" },
{ name: "jacob wingrave", race: "human", organization: "neutral", place: "kilkenny", pic: "https://upforme.ru/uploads/001c/bd/d1/182/744726.jpg", job: "безработный", profile: "https://brokengeis.rusff.me/profile.php?id=182" },
{ name: "james ellington", race: "faoladh", organization: "neutral", place: "chester", pic: "https://i.imgur.com/6sQT5Zr.png", job: "архивариус-реставратор", profile: "https://brokengeis.rusff.me/profile.php?id=149" },
{ name: "jeremy de vere", race: "vampire", organization: "neutral", place: "london", pic: "https://i.imgur.com/HFWm1yL.png", job: "управляющий семейным капиталом", profile: "https://brokengeis.rusff.me/profile.php?id=74" },
{ name: "jeremy donaldson", race: "human", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/116/271884.png", job: "студент", profile: "https://brokengeis.rusff.me/profile.php?id=116" },
{ name: "jude moonvale", race: "human", organization: "msa", place: "edinburgh", pic: "https://i.pinimg.com/736x/1a/a8/d9/1aa8d9dad63d7a40a2f705f8fce8c17d.jpg", job: "магическая полиция", profile: "https://brokengeis.rusff.me/profile.php?id=127" },

/* ------------------------------------------------ K ------------------------------------------------ */
{ name: "kang dohyun", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/95/136712.png", job: "ночной парамедик", profile: "https://brokengeis.rusff.me/profile.php?id=95" },
{ name: "kiaran raeburn", race: "witcher", organization: "hunter", place: "cardiff", pic: "https://upforme.ru/uploads/001c/bd/d1/79/855767.png", job: "gypsy blood | охотник на нежить", profile: "https://brokengeis.rusff.me/profile.php?id=79" },
{ name: "kurt hayward", race: "human", organization: "hunter", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/183/644759.png", job: "кошмарит", profile: "https://brokengeis.rusff.me/profile.php?id=183" },

/* ------------------------------------------------ L ------------------------------------------------ */
{ name: "lennox ashby", race: "human", organization: "neutral", place: "bristol", pic: "https://upforme.ru/uploads/001c/bd/d1/134/372122.jpg", job: "разнорабочий в мастерской", profile: "https://brokengeis.rusff.me/profile.php?id=134" },
{ name: "leon moreau", race: "vampire", organization: "neutral", place: "edinburgh", pic: "https://i.ibb.co/4n63BZ7B/IMG-6266.jpg", job: "серийный убийца", profile: "https://brokengeis.rusff.me/profile.php?id=137" },
{ name: "lester moore", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/111/112866.png", job: "лэндлорд", profile: "https://brokengeis.rusff.me/profile.php?id=111" },
{ name: "lily fox", race: "witch", organization: "neutral", place: "london", pic: "https://www.kino-teatr.ru/acter/album/372943/1678191.jpg", job: "магический изобретатель", profile: "https://brokengeis.rusff.me/profile.php?id=179" },
{ name: "lorcan o’shea", race: "merrow", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/169/718702.jpg", job: "фотограф", profile: "https://brokengeis.rusff.me/profile.php?id=169" },
{ name: "luca heist", race: "shifter", organization: "neutral", place: "bristol", pic: "https://upforme.ru/uploads/001c/bd/d1/47/890958.gif", job: "инструктор по выживанию", profile: "https://brokengeis.rusff.me/profile.php?id=47" },
{ name: "lucian thorne", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/185/863417.gif", job: "глава улья", profile: "https://brokengeis.rusff.me/profile.php?id=185" },

/* ------------------------------------------------ M ------------------------------------------------ */
{ name: "maeve drummond", race: "faerie", organization: "oa", place: "dublin", pic: "https://i2.imageban.ru/out/2026/07/11/bc5b071fa09d3792f693ca1298e8b086.jpg", job: "владелица клуба, психотерапевт", profile: "https://brokengeis.rusff.me/profile.php?id=80" },
{ name: "mair sklodowski", race: "shifter", organization: "neutral", place: "leeds", pic: "https://upforme.ru/uploads/001c/bd/d1/168/902477.jpg", job: "решала-шуршала", profile: "https://brokengeis.rusff.me/profile.php?id=168" },
{ name: "marlowe", race: "vampire", organization: "neutral", place: "london", pic: "https://i.ibb.co/j1bS3LK/IMG-9333.gif", job: "владелица арт-пространства", profile: "https://brokengeis.rusff.me/profile.php?id=27" },
{ name: "martha jacobs", race: "witch", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/185/821078.gif", job: "медсестра", profile: "https://brokengeis.rusff.me/profile.php?id=186" },
{ name: "mason myers", race: "human", organization: "hunter", place: "solihull", pic: "https://upforme.ru/uploads/001c/bd/d1/52/280480.jpg", job: "тарелочник", profile: "https://brokengeis.rusff.me/profile.php?id=52" },
{ name: "maureen", race: "merrow", organization: "neutral", place: "birmingham", pic: "https://i.pinimg.com/1200x/4c/66/d5/4c66d5b27329edb18e997d5db473d360.jpg", job: "певица в кабаре", profile: "https://brokengeis.rusff.me/profile.php?id=155" },
{ name: "mihai dimitresku", race: "shifter", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/132/21014.jpg", job: "водитель, телохранитель", profile: "https://brokengeis.rusff.me/profile.php?id=132" },
{ name: "mila bishop", race: "witch", organization: "neutral", place: "chester", pic: "https://upforme.ru/uploads/001c/bd/d1/87/895109.png", job: "студентка", profile: "https://brokengeis.rusff.me/profile.php?id=87" },
{ name: "moira kennedy", race: "human", organization: "hunter", place: "edinburgh", pic: "https://upforme.ru/uploads/001c/bd/d1/93/699668.png", job: "ветеринар, охотник", profile: "https://brokengeis.rusff.me/profile.php?id=93" },
{ name: "monica lovenport", race: "witch", organization: "neutral", place: "solihull", pic: "https://upforme.ru/uploads/001c/bd/d1/37/797109.png", job: "лендлордка", profile: "https://brokengeis.rusff.me/profile.php?id=37" },
{ name: "morrigan raeburn", race: "witch", organization: "hunter", place: "cardiff", pic: "https://upforme.ru/uploads/001c/bd/d1/16/568703.gif", job: "gypsy, охотник на нежить", profile: "https://brokengeis.rusff.me/profile.php?id=16" },

/* ------------------------------------------------ N ------------------------------------------------ */
{ name: "neil wingrave", race: "human", organization: "neutral", place: "kilkenny", pic: "https://i.ibb.co/RGXrJH9v/IMG-6283.jpg", job: "капитан ввс сша", profile: "https://brokengeis.rusff.me/profile.php?id=181" },
{ name: "nils guske", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/173/319871.gif", job: "профессиональный преступник", profile: "https://brokengeis.rusff.me/profile.php?id=173" },
{ name: "noah thorne", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/187/82190.jpg", job: "художник", profile: "https://brokengeis.rusff.me/profile.php?id=187" },

/* ------------------------------------------------ O ------------------------------------------------ */
{ name: "octavia forger", race: "witch", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/0018/ec/0e/2/763372.png", job: "агент mi6", profile: "https://brokengeis.rusff.me/profile.php?id=190" },
{ name: "oliver barton", race: "shifter", organization: "neutral", place: "liverpool", pic: "https://upforme.ru/uploads/001c/bd/d1/85/723660.png", job: "парамедик, фельдшер неотложки", profile: "https://brokengeis.rusff.me/profile.php?id=66" },
{ name: "orin dal riada", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/10/12111.png", job: "хуепутало", profile: "https://brokengeis.rusff.me/profile.php?id=10" },
{ name: "ornia noonan", race: "witch", organization: "msa", place: "london", pic: "https://upforme.ru/uploads/0015/be/8c/3/629902.jpg", job: "дуола & лаборант в морге", profile: "https://brokengeis.rusff.me/profile.php?id=94" },

/* ------------------------------------------------ P ------------------------------------------------ */
{ name: "phoebe tyler", race: "witch", organization: "msa", place: "chester", pic: "https://upforme.ru/uploads/001c/bd/d1/86/t217441.jpg", job: "помощница библиотекаря", profile: "https://brokengeis.rusff.me/profile.php?id=86" },

/* ------------------------------------------------ Q ------------------------------------------------ */

/* ------------------------------------------------ R ------------------------------------------------ */
{ name: "reggie kraus", race: "human", organization: "hunter", place: "york", pic: "https://upforme.ru/uploads/001b/ab/27/2/350024.png", job: "разнорабочий", profile: "https://brokengeis.rusff.me/profile.php?id=141" },
{ name: "randy pierce", race: "shifter", organization: "neutral", place: "liverpool", pic: "https://upforme.ru/uploads/001c/bd/d1/70/949189.jpg", job: "радиоведущий", profile: "https://brokengeis.rusff.me/profile.php?id=70" },
{ name: "ríoghbhardán", race: "faerie", organization: "neutral", place: "liverpool", pic: "https://upforme.ru/uploads/001c/bd/d1/43/975993.jpg", job: "букмекер", profile: "https://brokengeis.rusff.me/profile.php?id=43" },
{ name: "riley love", race: "shifter", organization: "oa", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/194/349172.png", job: "работник мясной лавки", profile: "https://brokengeis.rusff.me/profile.php?id=194" },
{ name: "river dickson", race: "human", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/116/971580.png", job: "студент", profile: "https://brokengeis.rusff.me/profile.php?id=117" },
{ name: "robert mcfarlane", race: "faoladh", organization: "neutral", place: "edinburgh", pic: "https://i.imgur.com/9IeDr56.jpeg", job: "моряк", profile: "https://brokengeis.rusff.me/profile.php?id=71" },
{ name: "robin kingston", race: "faerie", organization: "neutral", place: "blackpool ", pic: "https://upforme.ru/uploads/001c/bd/d1/177/750814.png", job: "любит технолубы", profile: "https://brokengeis.rusff.me/profile.php?id=177" },
{ name: "róisín byrne", race: "banshee", organization: "oa", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/161/911980.png", job: "инстаграм-таролог", profile: "https://brokengeis.rusff.me/profile.php?id=161" },
{ name: "romeo de vere", race: "vampire", organization: "neutral", place: "chelmsford", pic: "https://upforme.ru/uploads/001c/bd/d1/46/336284.png", job: "владелец приисков и шахт", profile: "https://brokengeis.rusff.me/profile.php?id=46" },
{ name: "romy moore", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/118/911837.jpg", job: "инфлюэнсер", profile: "https://brokengeis.rusff.me/profile.php?id=118" },
{ name: "ronan brodowski", race: "shifter", organization: "neutral", place: "shennon", pic: "https://i.ibb.co/d4Bsx9cL/11111111.png", job: "литературный редактор", profile: "https://brokengeis.rusff.me/profile.php?id=106" },
{ name: "rorry yyks", race: "witch", organization: "neutral", place: "london", pic: "https://i.imgur.com/RDHERvu.png", job: "владеет казино", profile: "https://brokengeis.rusff.me/profile.php?id=103" },
{ name: "rudo lamarr", race: "shifter", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/11/46875.png", job: "ищейка", profile: "https://brokengeis.rusff.me/profile.php?id=11" },

/* ------------------------------------------------ S ------------------------------------------------ */
{ name: "saul grin", race: "vampire", organization: "neutral", place: " bristol", pic: "https://upforme.ru/uploads/001c/bd/d1/133/290902.jpg", job: "смотрит в стену", profile: "https://brokengeis.rusff.me/profile.php?id=133" },
{ name: "sebastian sinclair", race: "vampire", organization: "neutral", place: "chelmsford", pic: "https://i.imgur.com/PzW6lew.png", job: "темщик", profile: "https://brokengeis.rusff.me/profile.php?id=91" },
{ name: "shauna delaney", race: "shifter", organization: "neutral", place: "bristol", pic: "https://upforme.ru/uploads/001c/bd/d1/26/232879.gif", job: "мотомеханик", profile: "https://brokengeis.rusff.me/profile.php?id=26" },
{ name: "silas graves", race: "human", organization: "neutral", place: "blackpool", pic: "https://upforme.ru/uploads/001c/bd/d1/178/34607.png", job: "преподаватель колледжа", profile: "https://brokengeis.rusff.me/profile.php?id=178" },
{ name: "sonya", race: "witch", organization: "neutral", place: "bristol", pic: "https://upforme.ru/uploads/001c/bd/d1/25/303347.png", job: "кассир в кинотеатре ", profile: "https://brokengeis.rusff.me/profile.php?id=25" },

/* ------------------------------------------------ T ------------------------------------------------ */
{ name: "talulah velithorne", race: "vampire", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/191/437790.png", job: "информатор", profile: "https://brokengeis.rusff.me/profile.php?id=191" },
{ name: "thaddeo dellah morte", race: "human", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/54/461035.jpg", job: "сектант свидетелей даманхур", profile: "https://brokengeis.rusff.me/profile.php?id=54" },
{ name: "theo corvere", race: "human", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/156/627580.png", job: "эскорт элитного класса", profile: "https://brokengeis.rusff.me/profile.php?id=156" },

/* ------------------------------------------------ U ------------------------------------------------ */
{ name: "una ríona o'conell", race: "shifter", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/001c/bd/d1/17/522589.png", job: "фрилансер (решала)", profile: "https://brokengeis.rusff.me/profile.php?id=17" },

/* ------------------------------------------------ V ------------------------------------------------ */
{ name: "vasco zeno", race: "vampire", organization: "sss", place: "newcastle", pic: "https://upforme.ru/uploads/001c/bd/d1/15/313693.jpg", job: "vampirism & cannibalism", profile: "https://brokengeis.rusff.me/profile.php?id=15" },
{ name: "vesena vesna", race: "faerie", organization: "neutral", place: "london", pic: "https://i.imgur.com/nspFNeS.png", job: "коллекторша обещаний", profile: "https://brokengeis.rusff.me/profile.php?id=108" },
{ name: "victoire curie", race: "vampire", organization: "neutral", place: "leeds", pic: "https://upforme.ru/uploads/0013/40/f5/2/175408.png", job: "домохозяин", profile: "https://brokengeis.rusff.me/profile.php?id=164" },
{ name: "vincent moretti", race: "faerie", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/0018/ec/0e/2/282356.png", job: "критик, владелец кофейни", profile: "https://brokengeis.rusff.me/profile.php?id=175" },
{ name: "vivian burkinshaw", race: "shifter", organization: "neutral", place: "alnwick", pic: "https://i.pinimg.com/1200x/4b/0e/d0/4b0ed0643d1e5737dcccc069290d0859.jpg", job: "заключенная", profile: "https://brokengeis.rusff.me/profile.php?id=8" },

/* ------------------------------------------------ W ------------------------------------------------ */
{ name: "wilhelmina sagan", race: "banshee", organization: "neutral", place: "galway", pic: "https://i.ibb.co/kgDwtfrC/IMG-9328.gif", job: "иллюстратор детских книг", profile: "https://brokengeis.rusff.me/profile.php?id=28" },
{ name: "william forger", race: "witcher", organization: "neutral", place: "london", pic: "https://upforme.ru/uploads/0018/ec/0e/2/122218.png", job: "агент mi6", profile: "https://brokengeis.rusff.me/profile.php?id=189" },

/* ------------------------------------------------ X ------------------------------------------------ */

/* ------------------------------------------------ Y ------------------------------------------------ */
{ name: "yuval gabo", race: "human", organization: "neutral", place: "england ", pic: "https://s.fotora.ru/6822f3e488a1bf2b.png", job: "чистильщик бассейнов ", profile: "https://brokengeis.rusff.me/profile.php?id=55" },

/* ------------------------------------------------ Z ------------------------------------------------ */

];

function createSelect(id, optionsMap, defaultText) {
const container = document.getElementById(id);
const select = document.createElement('select');
select.id = id + 'Select';

const allOption = document.createElement('option');
allOption.value = 'all';
allOption.textContent = defaultText;
select.appendChild(allOption);

optionsMap.forEach((value, key) => {
const option = document.createElement('option');
option.value = key;
option.textContent = value;
select.appendChild(option);});

container.appendChild(select);
return select;}

createSelect('race', races, 'все расы');
createSelect('organization', organizations, 'все организации');
createSelect('place', places, 'все локации');

const characterList = document.getElementById('characterList');

const img = document.createElement('img');
img.className = 'image';
img.src = char.pic;
img.alt = 'character image';

const content = document.createElement('div');
content.className = 'content';

const table = document.createElement('table');

const tbody = document.createElement('tbody');

/* ------------------------------------------------ 1 СТРОКА - ИМЯ ------------------------------------------------ */
const row0 = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.colSpan = 2;
nameCell.className = 'charNameTd';

// Создаем ссылку для имени
const nameLink = document.createElement('a');
nameLink.className = 'charNameLink';
nameLink.href = char.profile;
nameLink.textContent = char.name;
nameLink.target = '_blank';
nameCell.appendChild(nameLink);

row0.appendChild(nameCell);
tbody.appendChild(row0);

/* ------------------------------------------------ 2 СТРОКА - РАСА И ЛОКАЦИЯ ------------------------------------------------ */
const row1 = document.createElement('tr');

const cell1 = document.createElement('td');
const span1 = document.createElement('span');
span1.className = 'charInfoSpan';
span1.textContent = races.get(char.race) || char.race;
cell1.appendChild(span1);

const cell2 = document.createElement('td');
const span2 = document.createElement('span');
span2.className = 'charInfoSpan';
span2.textContent = places.get(char.place) || char.place;
cell2.appendChild(span2);

row1.appendChild(cell1);
row1.appendChild(cell2);
tbody.appendChild(row1);

/* ------------------------------------------------ 3 СТРОКА - ПРОФЕССИЯ ------------------------------------------------ */
const row2 = document.createElement('tr');
const cell3 = document.createElement('td');
cell3.colSpan = 2;
const span3 = document.createElement('span');
span3.className = 'charInfoSpan';
span3.textContent = char.job;
cell3.appendChild(span3);
row2.appendChild(cell3);
tbody.appendChild(row2);

table.appendChild(tbody);
content.appendChild(table);
card.appendChild(img);
card.appendChild(content);
characterList.appendChild(card);});}

function filterCharacters() {
const raceFilter = document.getElementById('raceSelect').value;
const orgFilter = document.getElementById('organizationSelect').value;
const placeFilter = document.getElementById('placeSelect').value;

const filtered = characters.filter(char => {
const raceMatch = raceFilter === 'all' || char.race === raceFilter;
const orgMatch = orgFilter === 'all' || char.organization === orgFilter;
const placeMatch = placeFilter === 'all' || char.place === placeFilter;
return raceMatch && orgMatch && placeMatch;});

renderCharacters(filtered);}

renderCharacters(characters);

document.getElementById('raceSelect').addEventListener('change', filterCharacters);
document.getElementById('organizationSelect').addEventListener('change', filterCharacters);
document.getElementById('placeSelect').addEventListener('change', filterCharacters);
</script>

<div id="base">
<div id="title">
<h1>список персонажей</h1>
<p>кто, что, зачем, куда, откуда, почему</p>
</div>
<div id="sortingLists">
<div class="characterSort" id="race"></div>
<div class="characterSort" id="organization"></div>
<div class="characterSort" id="place"></div>
</div>
<div id="characterList">
</div>
</div>[/html]

BROKEN GEIS

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

список ролей

Сообщений 1 страница 1 из 1

Поделиться108.07.2026 21:54:18