список ролей

[html]<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono&family=Jost&display=swap');

:root {
--textcolor: #1a1a1a;
--headercolor: white;
--backcolorOff: black;
--basecolor1: #F1F1F1; /* фон всего блока */
--cardcolor: #E4E4E4; /* фон карточек */
--bordercolor: #B4C6D9; /* обводка плашек */
--linecolor: #00000033; /* тонкая линия под именем */
--tipcolor: #1a1a1a; /* фон подсказки у иконки */

/* ------------------------------------------------ ЦВЕТА РАС ------------------------------------------------ */
--race-banshee: #6E82A0;
--race-vampire: #8E2B37;
--race-witch: #6B4A86;
--race-witcher: #3F6E63;
--race-shifter: #A06A34;
--race-merrow: #2F7A85;
--race-ghost: #7E868D;
--race-faerie: #5C8A45;
--race-faoladh: #6B4A3A;
--race-dragon: #4D468D;
--race-human: #55555A;}

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

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

#base {width: 83%;
height: 566px;
overflow: hidden;
border-radius: 27px;
background-color: var(--basecolor1);
margin: 0 auto;}

#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;
box-sizing: border-box;}

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: 1px solid var(--linecolor);
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;
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;}

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

#characterList {width: 100%;
position: relative;
height: 435px;
box-sizing: border-box;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
gap: 20px;
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: 210px;
padding: 11px 14px 13px;
box-sizing: border-box;
background: var(--cardcolor);
border: none;
border-radius: 20px;
box-shadow: 3px 3px 4px #00000026;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 7px;}

/* ------------------------------------------------ ШАПКА: ИМЯ + ИКОНКА РАСЫ ------------------------------------------------ */
.charHeader {display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
width: 100%;
padding-bottom: 6px;
border-bottom: 1px solid var(--linecolor);
box-sizing: border-box;}

.charNameLink {flex: 1;
min-width: 0;
overflow-wrap: break-word;
font: bold 16px "Spline Sans Mono", monospace;
font-style: normal;
color: var(--textcolor);
text-align: left;
text-decoration: none;
line-height: 1.25;}

.charNameLink:hover {opacity: 0.65;}

/* ------------------------------------------------ ИКОНКА РАСЫ ------------------------------------------------ */
.raceIcon {position: relative;
flex-shrink: 0;
font-size: 16px;
line-height: 1.25;
color: var(--race, var(--textcolor));
cursor: help;}

/* ------------------------------------------------ ПОДСКАЗКА У ИКОНКИ ------------------------------------------------ */
.raceIcon::after {content: attr(data-race);
position: absolute;
top: calc(100% + 7px);
right: 0;
background: var(--tipcolor);
color: #fff;
padding: 3px 9px;
border-radius: 27px;
font: 400 11px "Jost", sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
pointer-events: none;
z-index: 5;}

.raceIcon:hover::after {opacity: 1;
visibility: visible;}

/* ------------------------------------------------ ПЛАШКИ ------------------------------------------------ */
.charRow {display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 5px;
width: 100%;}

.charInfoSpan {display: inline-flex;
align-items: center;
padding: 2px 10px;
border: 1px solid var(--bordercolor);
border-radius: 27px;
font: 400 11px "Jost", sans-serif;
color: var(--textcolor);
background: transparent;
line-height: 1.35;
white-space: normal;
text-align: left;
max-width: 100%;
box-sizing: border-box;}

/* ------------------------------------------------ ЦВЕТ ИКОНКИ ПО РАСЕ ------------------------------------------------ */
.charCard.race-banshee {--race: var(--race-banshee);}
.charCard.race-vampire {--race: var(--race-vampire);}
.charCard.race-witch {--race: var(--race-witch);}
.charCard.race-witcher {--race: var(--race-witcher);}
.charCard.race-shifter {--race: var(--race-shifter);}
.charCard.race-merrow {--race: var(--race-merrow);}
.charCard.race-ghost {--race: var(--race-ghost);}
.charCard.race-faerie {--race: var(--race-faerie);}
.charCard.race-faoladh {--race: var(--race-faoladh);}
.charCard.race-dragon {--race: var(--race-dragon);}
.charCard.race-human {--race: var(--race-human);}
</style>

const raceIcons = new Map([
/* ------------------------------------------------ ИКОНКИ РАС СЮДА (классы font awesome 6) ------------------------------------------------ */
["banshee", "fa-solid fa-wind"],
["vampire", "fa-solid fa-droplet"],
["witch", "fa-solid fa-hat-wizard"],
["witcher", "fa-solid fa-hat-wizard"],
["shifter", "fa-solid fa-paw"],
["merrow", "fa-solid fa-water"],
["ghost", "fa-solid fa-ghost"],
["faerie", "fa-solid fa-leaf"],
["faoladh", "fa-solid fa-moon"],
["dragon", "fa-solid fa-dragon"],
["human", "fa-solid fa-user"]]);

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

const places = new Map([
/* ------------------------------------------------ ЛОКАЦИИ СЮДА ------------------------------------------------ */
["alnwick", "алник, юк"],
["barmouth", "бармут, юк"],
["birmingham", "бирмингем, юк"],
["blackpool", "блэкпул, юк"],
["brixham", "бриксем, юк"],
["bristol", "бристоль, юк"],
["cardiff", "кардифф, юк"],
["caernarfon", "карнарвон, юк"],
["chelmsford", "челмсфорд, юк"],
["chester", "честер, юк"],
["edinburgh", "эдинбург, юк"],
["glastonberry", "гластонберри, юк"],
["liverpool", "ливерпуль, юк"],
["leeds", "лидс, юк"],
["london", "лондон, юк"],
["manchester", "манчестер, юк"],
["matlock", "мэтлок, юк"],
["newcastle", "ньюкасл, юк"],
["oxford", "оксфорд, юк"],
["rothermere", "родермер, юк"],
["sheffield", "шеффилд, юк"],
["st albans", "сент-олбанс, юк"],
["solihull", "солихалл, юк"],
["warwickshire", "уорикшир, юк"],
["york", "йорк, юк"],

["belfast", "белфаст, ир"],
["dublin", "дублин, ир"],
["kilkenny", "килкенни, ир"],
["rostrevor", "ростревор, ир"],
["shennon", "шеннон, ир"],

["saint petersburg", "санкт петербург, ру"],
]);

const characters = [
/* ------------------------------------------------ ПЕРСОНАЖЕЙ СЮДА ------------------------------------------------ */
/* ------------------------------------------------ A ------------------------------------------------ */
{ name: "adelheid eberstadt", race: "vampire", organization: "neutral", place: "chester", job: "ювелир, бизнесмен", profile: "https://brokengeis.rusff.me/profile.php?id=269" },
{ name: "adrian", race: "faerie", organization: "neutral", place: "london", job: "похититель людей, нелюдей и грёз", profile: "https://brokengeis.rusff.me/profile.php?id=51" },
{ name: "aik hughes", race: "ghost", organization: "neutral", place: "bristol", job: "шугать нормисов", profile: "https://brokengeis.rusff.me/profile.php?id=130" },
{ name: "ailis moore", race: "witch", organization: "neutral", place: "chester", job: "ассоциация смотрителей маяков", profile: "https://brokengeis.rusff.me/profile.php?id=170" },
{ name: "alexandra mcbride", race: "banshee", organization: "neutral", place: "edinburgh", job: "бариста", profile: "https://brokengeis.rusff.me/profile.php?id=140" },
{ name: "alistar kennedy", race: "human", organization: "hunter", place: "edinburgh", job: "похоронный агент", profile: "https://brokengeis.rusff.me/profile.php?id=146" },
{ name: "amelia reid", race: "faoladh", organization: "neutral", place: "liverpool", job: "перекати-поле", profile: "https://brokengeis.rusff.me/profile.php?id=7" },
{ name: "arvid valis", race: "banshee", organization: "neutral", place: "london", job: "художник", profile: "https://brokengeis.rusff.me/profile.php?id=203" },
{ name: "ao shenyu", race: "dragon", organization: "neutral", place: "birmingham", job: "глава клана Ао, бизнесмен", profile: "https://brokengeis.rusff.me/profile.php?id=284" },
{ name: "arzhel kavanagh", race: "faerie", organization: "neutral", place: "london", job: "хореограф", profile: "https://brokengeis.rusff.me/profile.php?id=241" },
{ name: "andy darling", race: "faerie", organization: "neutral", place: "london", job: "творческая личность", profile: "https://brokengeis.rusff.me/profile.php?id=167" },
{ name: "aslan aksoy", race: "vampire", organization: "neutral", place: "manchester", job: "актер", profile: "https://brokengeis.rusff.me/profile.php?id=230" },
{ name: "archibald ravenscourt", race: "banshee", organization: "neutral", place: "oxford", job: "похоронный директор", profile: "https://brokengeis.rusff.me/profile.php?id=123" },
{ name: "arthur palmer", race: "witcher", organization: "neutral", place: "birmingham", job: "психотерапевт ", profile: "https://brokengeis.rusff.me/profile.php?id=277" },
{ name: "avern mowbray", race: "faerie", organization: "sss", place: "london", job: "охранник", profile: "https://brokengeis.rusff.me/profile.php?id=153" },

/* ------------------------------------------------ B ------------------------------------------------ */
{ name: "blair beaumon", race: "faerie", organization: "neutral", place: "london", job: "домохозяйка", profile: "https://brokengeis.rusff.me/profile.php?id=275" },
{ name: "blake ashburn", race: "witcher", organization: "neutral", place: "london", job: "владелец волшебного ломбарда", profile: "https://brokengeis.rusff.me/profile.php?id=115" },
{ name: "blue brynmor", race: "witcher", organization: "neutral", place: "barmouth", job: "независимый журналист", profile: "https://brokengeis.rusff.me/profile.php?id=270" },
{ name: "bo", race: "human", organization: "neutral", place: "london", job: "предприниматель ", profile: "https://brokengeis.rusff.me/profile.php?id=257" },
{ name: "boyd toole", race: "faoladh", organization: "neutral", place: "rostrevor", job: "разнорабочий", profile: "https://brokengeis.rusff.me/profile.php?id=158" },
{ name: "bran ashcombe", race: "ghost", organization: "neutral", place: "chester", job: "архивариус", profile: "https://brokengeis.rusff.me/profile.php?id=14" },
{ name: "bronya rand", race: "vampire", organization: "neutral", place: "london", job: "блоггер", profile: "https://brokengeis.rusff.me/profile.php?id=184" },

/* ------------------------------------------------ C ------------------------------------------------ */

{ name: "callum madden", race: "human", organization: "hunter", place: "belfast", job: "специалист по недвижимости ", profile: "https://brokengeis.rusff.me/profile.php?id=280" },
{ name: "cardan silverthorne", race: "faerie", organization: "sss", place: "edinburgh", job: "радикальный активист", profile: "https://brokengeis.rusff.me/profile.php?id=64" },
{ name: "carl blackthorn", race: "vampire", organization: "hunter", place: "london", job: "походу сопьюсь", profile: "https://brokengeis.rusff.me/profile.php?id=113" },
{ name: "casey donovan", race: "faerie", organization: "oa", place: "london", job: "оценщик", profile: "https://brokengeis.rusff.me/profile.php?id=92" },
{ name: "cassian shee", race: "faerie", organization: "oa", place: "edinburgh", job: "ебучий бюрократ", profile: "https://brokengeis.rusff.me/profile.php?id=215" },
{ name: "christopher wright", race: "faoladh", organization: "neutral", place: "manchester", job: "пожарный", profile: "https://brokengeis.rusff.me/profile.php?id=30" },
{ name: "cian o'flaherty", race: "vampire", organization: "neutral", place: "dublin", job: "профессор теологии", profile: "https://brokengeis.rusff.me/profile.php?id=122" },
{ name: "coraline moore", race: "witch", organization: "neutral", place: "chester", job: "студентка, подрабатывает на радио", profile: "https://brokengeis.rusff.me/profile.php?id=38" },

/* ------------------------------------------------ D ------------------------------------------------ */
{ name: "dexter mccarthy", race: "human", organization: "hunter", place: "london", job: "фиксер, оператор, проблема", profile: "https://brokengeis.rusff.me/profile.php?id=253" },

/* ------------------------------------------------ E ------------------------------------------------ */
{ name: "egnacio cruz", race: "vampire", organization: "oa", place: "edinburgh", job: "приходской священник", profile: "https://brokengeis.rusff.me/profile.php?id=171" },
{ name: "eli goffman", race: "shifter", organization: "neutral", place: "london", job: "беглец", profile: "https://brokengeis.rusff.me/profile.php?id=267" },
{ name: "eliot hartley", race: "human", organization: "neutral", place: "manchester", job: "актер-танцор физического театра", profile: "https://brokengeis.rusff.me/profile.php?id=274" },
{ name: "esmond kortenaer", race: "shifter", organization: "sss", place: "london", job: "заправщик", profile: "https://brokengeis.rusff.me/profile.php?id=192" },
{ name: "eoghan raeburn", race: "human", organization: "hunter", place: "cardiff", job: "владелец ипподрома", profile: "https://brokengeis.rusff.me/profile.php?id=297" },
{ name: "eric grayson", race: "human", organization: "neutral", place: "manchester", job: "стилист-модельер", profile: "https://brokengeis.rusff.me/profile.php?id=34" },
{ name: "evander dusk", race: "faerie", organization: "sss", place: "edinburgh", job: "бюрократ + скамщик", profile: "https://brokengeis.rusff.me/profile.php?id=242" },
{ name: "evelyn brightwater", race: "ghost", organization: "neutral", place: "oxford", job: "ангел-хранитель", profile: "https://brokengeis.rusff.me/profile.php?id=131" },

/* ------------------------------------------------ F ------------------------------------------------ */
{ name: "felix everhart", race: "vampire", organization: "neutral", place: "london", job: "танцор", profile: "https://brokengeis.rusff.me/profile.php?id=174" },

/* ------------------------------------------------ G ------------------------------------------------ */
{ name: "gabriele gaia", race: "faerie", organization: "neutral", place: "chester", job: "профессор", profile: "https://brokengeis.rusff.me/viewtopic.php?id=20" },
{ name: "gideon lamb", race: "banshee", organization: "oa", place: "edinburgh", job: "исследователь, иллюстратор", profile: "https://brokengeis.rusff.me/profile.php?id=294" },
{ name: "giles ford", race: "faerie", organization: "neutral", place: "caernarfon", job: "коллекционер", profile: "https://brokengeis.rusff.me/profile.php?id=212" },
{ name: "greta raeburn", race: "vampire", organization: "neutral", place: "cardiff", job: "чудачка рэйбернов", profile: "https://brokengeis.rusff.me/profile.php?id=154" },

/* ------------------------------------------------ H ------------------------------------------------ */
{ name: "harriet winners", race: "witch", organization: "neutral", place: "chester", job: "студентка, отличница", profile: "https://brokengeis.rusff.me/profile.php?id=232" },
{ name: "harry winners", race: "vampire", organization: "neutral", place: "caernarfon", job: "студент-медик, айтишник", profile: "https://brokengeis.rusff.me/profile.php?id=199" },
{ name: "huskar", race: "banshee", organization: "neutral", place: "bristol", job: "муж на час", profile: "https://brokengeis.rusff.me/profile.php?id=4" },

/* ------------------------------------------------ I ------------------------------------------------ */
{ name: "imogen hart", race: "shifter", organization: "neutral", place: "chester", job: "блогер", profile: "https://brokengeis.rusff.me/profile.php?section=view&id=268" },
{ name: "inès baudelaire", race: "vampire", organization: "neutral", place: "dublin", job: "теолог", profile: "https://brokengeis.rusff.me/profile.php?id=129" },
{ name: "isaac deveraux", race: "human", organization: "neutral", place: "brixham", job: "учитель младших классов", profile: "https://brokengeis.rusff.me/profile.php?id=250" },
{ name: "isaac wolfgang", race: "human", organization: "neutral", place: "london", job: "дилер", profile: "https://brokengeis.rusff.me/profile.php?id=160" },
{ name: "iva beneviento", race: "faerie", organization: "neutral", place: "dublin", job: "секретарша", profile: "https://brokengeis.rusff.me/profile.php?id=261" },

/* ------------------------------------------------ J ------------------------------------------------ */
{ name: "jace colwyn", race: "human", organization: "neutral", place: "york", job: "аферист", profile: "https://brokengeis.rusff.me/profile.php?id=180" },
{ name: "jake rimelt", race: "human", organization: "neutral", place: "london", job: "коммерческий автор", profile: "https://brokengeis.rusff.me/profile.php?id=206" },
{ name: "jeremy donaldson", race: "human", organization: "neutral", place: "london", job: "студент", profile: "https://brokengeis.rusff.me/profile.php?id=116" },
{ name: "jude moonvale", race: "human", organization: "msa", place: "edinburgh", job: "магическая полиция", profile: "https://brokengeis.rusff.me/profile.php?id=127" },

/* ------------------------------------------------ K ------------------------------------------------ */
{ name: "kurt hayward", race: "human", organization: "hunter", place: "london", job: "кошмарит", profile: "https://brokengeis.rusff.me/profile.php?id=183" },

/* ------------------------------------------------ L ------------------------------------------------ */
{ name: "lavinia vale", race: "witch", organization: "neutral", place: "london", job: "адвокатка", profile: "https://brokengeis.rusff.me/profile.php?id=176" },
{ name: "lennox ashby", race: "human", organization: "neutral", place: "bristol", job: "разнорабочий в мастерской", profile: "https://brokengeis.rusff.me/profile.php?id=134" },
{ name: "leon moreau", race: "vampire", organization: "neutral", place: "edinburgh", job: "серийный убийца", profile: "https://brokengeis.rusff.me/profile.php?id=137" },
{ name: "leonor de arellano", race: "vampire", organization: "sss", place: "edinburgh", job: "независимый эксперт", profile: "https://brokengeis.rusff.me/profile.php?id=202" },
{ name: "lester moore", race: "vampire", organization: "neutral", place: "london", job: "лэндлорд", profile: "https://brokengeis.rusff.me/profile.php?id=111" },
{ name: "lie sears", race: "human", organization: "neutral", place: "brixham", job: "политик", profile: "https://brokengeis.rusff.me/profile.php?id=248" },
{ name: "lindsey quinn", race: "vampire", organization: "neutral", place: "london", job: "знает парня, который знает парня", profile: "https://brokengeis.rusff.me/profile.php?id=291" },
{ name: "lorcan o’shea", race: "merrow", organization: "neutral", place: "london", job: "фотограф", profile: "https://brokengeis.rusff.me/profile.php?id=169" },
{ name: "luca heist", race: "shifter", organization: "neutral", place: "bristol", job: "инструктор по выживанию", profile: "https://brokengeis.rusff.me/profile.php?id=47" },
{ name: "lucian thorne", race: "vampire", organization: "neutral", place: "london", job: "глава улья", profile: "https://brokengeis.rusff.me/profile.php?id=185" },

/* ------------------------------------------------ M ------------------------------------------------ */
{ name: "mair sklodowski", race: "shifter", organization: "neutral", place: "leeds", job: "решала-шуршала", profile: "https://brokengeis.rusff.me/profile.php?id=168" },
{ name: "malone garraty", race: "faoladh", organization: "neutral", place: "chester", job: "кошмаринг", profile: "https://brokengeis.rusff.me/profile.php?id=207" },
{ name: "martha jacobs", race: "witch", organization: "neutral", place: "london", job: "медсестра", profile: "https://brokengeis.rusff.me/profile.php?id=186" },
{ name: "mason myers", race: "human", organization: "hunter", place: "solihull", job: "тарелочник", profile: "https://brokengeis.rusff.me/profile.php?id=52" },
{ name: "matthew morrison", race: "human", organization: "hunter", place: "edinburgh", job: "пастырь семьи кеннеди", profile: "https://brokengeis.rusff.me/profile.php?id=210" },
{ name: "maudryn vaylen", race: "vampire", organization: "neutral", place: "warwickshire", job: "владелица транспортной компании", profile: "https://brokengeis.rusff.me/profile.php?id=283" },
{ name: "maureen", race: "merrow", organization: "neutral", place: "birmingham", job: "певица", profile: "https://brokengeis.rusff.me/profile.php?id=155" },
{ name: "mihai dimitresku", race: "shifter", organization: "neutral", place: "london", job: "водитель, телохранитель", profile: "https://brokengeis.rusff.me/profile.php?id=132" },
{ name: "moira kennedy", race: "human", organization: "hunter", place: "edinburgh", job: "ветеринар, охотник", profile: "https://brokengeis.rusff.me/profile.php?id=93" },
{ name: "mikael de vega", race: "vampire", organization: "sss", place: "london", job: "переговорщик и осведомитель", profile: "https://brokengeis.rusff.me/profile.php?id=289" },
{ name: "monica lovenport", race: "witch", organization: "neutral", place: "solihull", job: "лендлордка", profile: "https://brokengeis.rusff.me/profile.php?id=37" },

/* ------------------------------------------------ N ------------------------------------------------ */
{ name: "nils guske", race: "vampire", organization: "neutral", place: "london", job: "профессиональный преступник", profile: "https://brokengeis.rusff.me/profile.php?id=173" },

/* ------------------------------------------------ O ------------------------------------------------ */
{ name: "orin dal riada", race: "vampire", organization: "neutral", place: "london", job: "хуепутало", profile: "https://brokengeis.rusff.me/profile.php?id=10" },
{ name: "oliver wellesley", race: "human", organization: "neutral", place: "london", job: "долбанная аристократия", profile: "https://brokengeis.rusff.me/profile.php?id=246" },
{ name: "ornia noonan", race: "witch", organization: "msa", place: "london", job: "дуола & лаборант в морге", profile: "https://brokengeis.rusff.me/profile.php?id=94" },

/* ------------------------------------------------ P ------------------------------------------------ */
{ name: "paloma temple", race: "witch", organization: "neutral", place: "matlock", job: "ученица старших классов", profile: "https://brokengeis.rusff.me/profile.php?id=286" },
{ name: "persephone arlington", race: "witch", organization: "neutral", place: "edinburgh", job: "безработная", profile: "https://brokengeis.rusff.me/profile.php?id=293" },

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

/* ------------------------------------------------ R ------------------------------------------------ */
{ name: "reinhard gaunt", race: "human", organization: "hunter", place: "bristol", job: "риелтор", profile: "https://brokengeis.rusff.me/profile.php?id=216" },
{ name: "reinhard weiss", race: "vampire", organization: "sss", place: "chester", job: "дипломат", profile: "https://brokengeis.rusff.me/profile.php?id=265" },
{ name: "rhiannon moore", race: "witch", organization: "neutral", place: "chester", job: "блоггерка", profile: "https://brokengeis.rusff.me/profile.php?id=121" },
{ name: "rhody rhodes", race: "faerie", organization: "neutral", place: "london", job: "мошенник с артефактами", profile: "https://brokengeis.rusff.me/profile.php?id=238" },
{ name: "riley love", race: "faoladh", organization: "oa", place: "london", job: "работник мясной лавки", profile: "https://brokengeis.rusff.me/profile.php?id=194" },
{ name: "river dickson", race: "human", organization: "neutral", place: "london", job: "студент", profile: "https://brokengeis.rusff.me/profile.php?id=117" },
{ name: "robert mcfarlane", race: "faoladh", organization: "neutral", place: "edinburgh", job: "моряк", profile: "https://brokengeis.rusff.me/profile.php?id=71" },
{ name: "robin kingston", race: "faerie", organization: "neutral", place: "blackpool", job: "любит технолубы", profile: "https://brokengeis.rusff.me/profile.php?id=177" },
{ name: "róisín byrne", race: "banshee", organization: "oa", place: "london", job: "инстаграм-таролог", profile: "https://brokengeis.rusff.me/profile.php?id=161" },
{ name: "romy moore", race: "vampire", organization: "neutral", place: "london", job: "инфлюэнсер", profile: "https://brokengeis.rusff.me/profile.php?id=118" },
{ name: "rorry yyks", race: "witch", organization: "neutral", place: "london", job: "владеет казино", profile: "https://brokengeis.rusff.me/profile.php?id=103" },
{ name: "rowena harcourt", race: "witch", organization: "neutral", place: "london", job: "советница главы ковена, меценатка", profile: "https://brokengeis.rusff.me/profile.php?id=196" },
{ name: "rudo lamarr", race: "shifter", organization: "neutral", place: "london", job: "ищейка", profile: "https://brokengeis.rusff.me/profile.php?id=11" },

/* ------------------------------------------------ S ------------------------------------------------ */
{ name: "sabrina ashburn", race: "witch", organization: "neutral", place: "london", job: "блоггер", profile: "https://brokengeis.rusff.me/profile.php?id=221" },
{ name: "saturn", race: "dragon", organization: "neutral", place: "birmingham", job: "безработная батарейка", profile: "https://brokengeis.rusff.me/profile.php?id=262" },
{ name: "saviel rudkovski", race: "human", organization: "neutral", place: "saint petersburg", job: "премьер балета", profile: "https://brokengeis.rusff.me/profile.php?id=256" },
{ name: "sebastian", race: "vampire", organization: "neutral", place: "dublin", job: "финансирует галереи и театры", profile: "https://brokengeis.rusff.me/profile.php?id=260" },
{ name: "shauna delaney", race: "shifter", organization: "neutral", place: "bristol", job: "мотомеханик", profile: "https://brokengeis.rusff.me/profile.php?id=26" },
{ name: "silas graves", race: "human", organization: "neutral", place: "blackpool", job: "преподаватель колледжа", profile: "https://brokengeis.rusff.me/profile.php?id=178" },
{ name: "sue darling", race: "faerie", organization: "neutral", place: "london", job: "певица", profile: "https://brokengeis.rusff.me/profile.php?id=251" },
{ name: "sonya", race: "witch", organization: "neutral", place: "bristol", job: "кассир в кинотеатре", profile: "https://brokengeis.rusff.me/profile.php?id=25" },

/* ------------------------------------------------ T ------------------------------------------------ */
{ name: "talulah velithorne", race: "vampire", organization: "neutral", place: "london", job: "информатор", profile: "https://brokengeis.rusff.me/profile.php?id=191" },
{ name: "tennessee belfort", race: "shifter", organization: "neutral", place: "london", job: "врач", profile: "https://brokengeis.rusff.me/profile.php?id=264" },
{ name: "thaddeo dellah morte", race: "human", organization: "neutral", place: "london", job: "сектант свидетелей даманхур", profile: "https://brokengeis.rusff.me/profile.php?id=54" },
{ name: "theo corvere", race: "human", organization: "neutral", place: "london", job: "эскорт элитного класса", profile: "https://brokengeis.rusff.me/profile.php?id=156" },
{ name: "theodore wood", race: "shifter", organization: "neutral", place: "london", job: "безработный", profile: "https://brokengeis.rusff.me/profile.php?id=278" },
{ name: "thomas percy", race: "witcher", organization: "neutral", place: "alnwick", job: "безработный", profile: "https://brokengeis.rusff.me/profile.php?id=6" },
{ name: "tris myszkowski", race: "witcher", organization: "msa", place: "london", job: "атташе, эмиссар", profile: "https://brokengeis.rusff.me/profile.php?id=290" },

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

/* ------------------------------------------------ V ------------------------------------------------ */
{ name: "valentin cullen", race: "banshee", organization: "neutral", place: "edinburgh", job: "похоронное бюро", profile: "https://brokengeis.rusff.me/profile.php?id=288" },
{ name: "victor redvers", race: "human", organization: "neutral", place: "london", job: "CEO биотехнологической корпорации", profile: "https://brokengeis.rusff.me/profile.php?id=237" },
{ name: "victoire curie", race: "vampire", organization: "neutral", place: "leeds", job: "домохозяин", profile: "https://brokengeis.rusff.me/profile.php?id=164" },
{ name: "vinny ashworth", race: "human", organization: "neutral", place: "london", job: "информатор", profile: "https://brokengeis.rusff.me/profile.php?id=195" },
{ name: "verity", race: "dragon", organization: "sss", place: "birmingham", job: "реставратор", profile: "https://brokengeis.rusff.me/profile.php?id=282" },
{ name: "vesena vesna", race: "faerie", organization: "neutral", place: "london", job: "коллекторша обещаний", profile: "https://brokengeis.rusff.me/profile.php?id=108" },
{ name: "vivian", race: "shifter", organization: "neutral", place: "alnwick", job: "заключенная", profile: "https://brokengeis.rusff.me/profile.php?id=8" },

/* ------------------------------------------------ W ------------------------------------------------ */
{ name: "wy knott", race: "faoladh", organization: "neutral", place: "matlock", job: "ученик старшей школы", profile: "https://brokengeis.rusff.me/profile.php?id=285" },

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

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

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

];

/* чистим лишние пробелы, чтобы фильтры не промахивались */
characters.forEach(c => {
c.race = c.race.trim();
c.organization = c.organization.trim();
c.place = c.place.trim();
c.job = c.job.trim();});

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');

function renderCharacters(list) {
const fragment = document.createDocumentFragment();

list.forEach(char => {
const card = document.createElement('div');
card.className = 'charCard race-' + char.race + ' organisation-' + char.organization + ' place-' + char.place;

/* ------------------------------------------------ ШАПКА ------------------------------------------------ */
const header = document.createElement('div');
header.className = 'charHeader';

const nameLink = document.createElement('a');
nameLink.className = 'charNameLink';
nameLink.href = char.profile;
nameLink.target = '_blank';
nameLink.textContent = char.name;

const iconWrap = document.createElement('span');
iconWrap.className = 'raceIcon';
iconWrap.setAttribute('data-race', races.get(char.race) || char.race);

const icon = document.createElement('i');
icon.className = raceIcons.get(char.race) || 'fa-solid fa-circle-question';
iconWrap.appendChild(icon);

header.appendChild(nameLink);
header.appendChild(iconWrap);
card.appendChild(header);

/* ------------------------------------------------ ЛОКАЦИЯ + ПРОФЕССИЯ ------------------------------------------------ */
const row = document.createElement('div');
row.className = 'charRow';

const placeSpan = document.createElement('span');
placeSpan.className = 'charInfoSpan';
placeSpan.textContent = places.get(char.place) || char.place;

const jobSpan = document.createElement('span');
jobSpan.className = 'charInfoSpan';
jobSpan.textContent = char.job;

row.appendChild(placeSpan);
row.appendChild(jobSpan);
card.appendChild(row);

fragment.appendChild(card);});

characterList.innerHTML = '';
characterList.appendChild(fragment);}

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 =>
(raceFilter === 'all' || char.race === raceFilter) &&
(orgFilter === 'all' || char.organization === orgFilter) &&
(placeFilter === 'all' || char.place === placeFilter));

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

BROKEN GEIS

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

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

Объявление

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

список ролей

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

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