роли и лица

[hideprofile][html]

<title>Список персонажей - Ravenhaug</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600&display=swap" rel="stylesheet">

--badge-church: #DAA520;
--badge-fatalists: #2F4F4F;
--badge-outcasts: #8B4513;
--badge-raiders: #8B0000;
--badge-changelings: #4B0082;
--badge-npc: #55555A;

--font-cat-title: 'Unbounded', serif;
}

/* ===========================================
ОСНОВНОЙ БЛОК
=========================================== */
#base {
width: 875px;
height: 750px;
overflow: hidden;
background-image: url('https://forumstatic.ru/files/001c/a3/ee/56450.png');
background-repeat: repeat;
background-position: top left;
background-color: var(--basecolor1);
margin: 0 auto;
}

/* ===========================================
ШАПКА
=========================================== */
#title {
background: #1a1a1a;
background-image: url(https://forumstatic.ru/files/001c/a3/ee/72666.png?v=1);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 60px;
position: relative;
color: var(--headercolor) !important;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 0 10px;
overflow: hidden;
}

#title h1 {
font: 500 18px var(--font-cat-title) !important;
color: var(--headercolor) !important;
margin: 0;
line-height: 1.2;
}

#title p {
font: 500 16px var(--font-cat-title) !important;
font-size: 10px;
margin: 0;
line-height: 1.2;
opacity: 0.8;
}

/* ===========================================
ПАНЕЛЬ ФИЛЬТРОВ
=========================================== */
#sortingLists {
width: 100%;
padding: 10px 12px;
box-sizing: border-box;
border-bottom: 1px solid var(--linecolor);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 12px;
background-image: url('https://forumstatic.ru/files/001c/a3/ee/56450.png');
background-repeat: repeat;
background-position: top left;
background-color: var(--cardcolor);
}

.filterGroup {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}

.filterGroup label {
font-size: 10px;
color: var(--textcolor);
opacity: 0.7;
font-family: 'Jost', sans-serif;
}

.filterSelect {
height: 26px;
padding: 0 8px;
background-image: url('https://forumstatic.ru/files/001c/a3/ee/56450.png') !important;
color: var(--badge-church) !important;
border: none !important;
outline: none !important;
font-size: 12px !important;
font-family: var(--font-cat-title) !important;
text-align: center;
cursor: pointer;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
max-width: 140px;
border-radius: 0 !important;
}

.filterSelect option {
background-image: url('https://forumstatic.ru/files/001c/a3/ee/56450.png') !important;
color: var(--badge-church) !important;
}

.filterSelect::-ms-expand {
display: none;
}

.filterInput {
height: 26px;
padding: 0 10px;
background-image: url('https://forumstatic.ru/files/001c/a3/ee/56450.png') !important;
color: var(--textcolor) !important;
border: none !important;
outline: none !important;
font-size: 12px !important;
font-family: 'Jost', sans-serif !important;
min-width: 180px;
border-radius: 0 !important;
}

.filterInput::placeholder {
color: var(--textcolor);
opacity: 0.4;
}

/* ===========================================
СПИСОК КАРТОЧЕК
=========================================== */
#characterList {
width: 100%;
position: relative;
height: 650px;
box-sizing: border-box;
padding: 15px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 12px;
overflow-y: auto;
overflow-x: hidden;
}

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

/* ===========================================
КАРТОЧКА ПЕРСОНАЖА
=========================================== */
.charCard {
width: 200px;
padding: 12px 14px 10px;
box-sizing: border-box;
background-image: url('https://forumstatic.ru/files/001c/a3/ee/88893.png?v=1');
background-repeat: repeat;
background-position: top left;
background-color: var(--cardcolor);
box-shadow: 2px 2px 4px #0000001a;
display: flex;
flex-direction: column;
gap: 6px;
transition: opacity 0.2s;
position: relative;
}

.charCard[style*="display: none"] {
opacity: 0;
}

/* ===== БЕЙДЖИ В КАРТОЧКЕ ===== */
.charBadges {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 2px;
}

.raceBadge {
display: inline-block;
padding: 2px 10px;
font-size: 9px;
font-family: 'Jost', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
border-radius: 3px;
background: var(--badge-color, #55555A);
}

/* Цвета для бейджа РАСЫ */
.charCard.race-church .raceBadge:first-child {
--badge-color: var(--badge-church);
background: var(--badge-church);
}
.charCard.race-fatalists .raceBadge:first-child {
--badge-color: var(--badge-fatalists);
background: var(--badge-fatalists);
}
.charCard.race-outcasts .raceBadge:first-child {
--badge-color: var(--badge-outcasts);
background: var(--badge-outcasts);
}
.charCard.race-raiders .raceBadge:first-child {
--badge-color: var(--badge-raiders);
background: var(--badge-raiders);
}
.charCard.race-changelings .raceBadge:first-child {
--badge-color: var(--badge-changelings);
background: var(--badge-changelings);
}
.charCard.race-npc .raceBadge:first-child {
--badge-color: var(--badge-npc);
background: var(--badge-npc);
}

.charHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
width: 100%;
padding-bottom: 5px;
border-bottom: 1px solid var(--linecolor);
}

.charNameLink {
flex: 1;
min-width: 0;
overflow-wrap: break-word;
font: 500 16px var(--font-cat-title) !important;
color: var(--textcolor);
text-decoration: none;
line-height: 1.2;
}

.charNameLink:hover {
opacity: 0.65;
}

.charBody {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}

.charInfoSpan {
display: inline-flex;
align-items: center;
padding: 2px 0;
border: none !important;
font: 400 13px "Jost", sans-serif;
color: var(--textcolor);
background: transparent;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
}

.charInfoSpan.actor {
font-style: italic;
color: #555;
opacity: 0.8;
border: none !important;
}

/* ===========================================
СКРЫТАЯ ТАБЛИЦА С ДАННЫМИ
=========================================== */
#dataTable {
display: none;
}

/* ===========================================
АДАПТИВНОСТЬ
=========================================== */
@media (max-width: 875px) {
#base {
width: 100%;
height: 600px;
}
#characterList {
height: 500px;
padding: 10px;
justify-content: center;
}
.charCard {
width: 160px;
padding: 10px 12px;
}
.filterInput {
min-width: 120px;
}
.charInfoSpan {
font-size: 12px !important;
}
.raceBadge {
font-size: 8px;
padding: 2px 8px;
}
}

@media (max-width: 480px) {
#base {
height: 550px;
}
#characterList {
height: 450px;
padding: 8px;
gap: 8px;
}
.charCard {
width: 140px;
padding: 8px 10px;
}
.charNameLink {
font-size: 12px;
}
.filterSelect {
max-width: 100px;
font-size: 10px !important;
}
.filterInput {
min-width: 80px;
font-size: 10px !important;
}
#sortingLists {
padding: 6px 8px;
gap: 4px 8px;
}
.filterGroup label {
font-size: 8px;
}
.charInfoSpan {
font-size: 11px !important;
}
.raceBadge {
font-size: 7px;
padding: 2px 6px;
}
}
</style>
</head>
<body>

<div id="base">

<div id="title">
<h1>список персонажей</h1>
<p>всего: <span id="totalCount">0</span> · видно: <span id="visibleCount">0</span></p>
</div>

<div id="sortingLists">
<div class="filterGroup">
<label for="raceSelect"><i class="fa-solid fa-filter"></i> раса</label>
<select id="raceSelect" class="filterSelect">
<option value="all">все фракции</option>
<option value="church">церковники</option>
<option value="fatalists">фаталисты</option>
<option value="outcasts">изгои</option>
<option value="raiders">рейдеры</option>
<option value="npc">нпс</option>
</select>
</div>

<div id="characterList"></div>
</div>

<table id="dataTable">

<tr data-race="church">
<td>oddur margrétsson</td>
<td>alexander skarsgård</td>
<td>священник</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=122</td>
</tr>
<tr data-race="church">
<td>marrku haarde</td>
<td>bill skarsgård</td>
<td>служитель</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=6</td>
<td>драугр</td>
</tr>
<tr data-race="church">
<td>runa haarde</td>
<td>eva green</td>
<td>глава медблока</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=22</td>
</tr>

<tr data-race="church">
<td>armann einarsson</td>
<td>без внешности</td>
<td>охотник</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=129</td>
<td>npc</td>
</tr>
<tr data-race="church">
<td>helga</td>
<td>glenn close</td>
<td>резчица амулетов</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=101</td>
<td>npc</td>
</tr>
<tr data-race="church">
<td>yolande roux</td>
<td>isolde dychauk</td>
<td>певица в церковном хоре</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=59</td>
</tr>
<tr data-race="church">
<td>suzanne larsdotter</td>
<td>jodie comer</td>
<td>мать Спасителя</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/viewtopic.php?id=251#p36546</td>
<td>акция</td>
</tr>
<tr data-race="church">
<td>lars paradise</td>
<td>matthew mcconaughey</td>
<td>повар</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=52</td>
</tr>
<tr data-race="church">
<td>víbekka gastonsdóttir</td>
<td>mia goth</td>
<td>помощница на кухне</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=24</td>
</tr>
<tr data-race="church">
<td>jannicke bergman</td>
<td>nancy schneider</td>
<td>служительница</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=126</td>
</tr>
<tr data-race="church">
<td>st. zachary</td>
<td>paul bettany</td>
<td>пастырь</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=29</td>
</tr>
<tr data-race="church">
<td>astrid jónsdóttir</td>
<td>rebecca ferguson</td>
<td>инженер-механик</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=117</td>
</tr>
<tr data-race="church">
<td>oscar gösta</td>
<td>wyatt/fletcher shears</td>
<td>охотник</td>
<td>church</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=127</td>
</tr>

<tr data-race="fatalists">
<td>mikkel rasmussen</td>
<td>alex høgh andersen</td>
<td>рунолог</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=99</td>
</tr>
<tr data-race="fatalists">
<td>ardal fitzroy</td>
<td>caleb landry jones</td>
<td>журналист; разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=140</td>
</tr>
<tr data-race="fatalists">
<td>ragnar holm</td>
<td>chris hemsworth</td>
<td>охотник</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=86</td>
<td>npc</td>
</tr>
<tr data-race="fatalists">
<td>magnus orrisson</td>
<td>chris john millington</td>
<td>рыбак</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=134</td>
</tr>
<tr data-race="fatalists">
<td>aidan o'connell</td>
<td>cillian murphy</td>
<td>психиатр; разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=104</td>
</tr>
<tr data-race="fatalists">
<td>vidar ingvarsson</td>
<td>donal finn</td>
<td>психолог; разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=109</td>
</tr>
<tr data-race="fatalists">
<td>rafn karlsson</td>
<td>drew starkey</td>
<td>приёмка лута в ратуше, бармен в пабе</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=142</td>
</tr>
<tr data-race="fatalists">
<td>heather hartley</td>
<td>ella red</td>
<td>новоприбывшая</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=135</td>
</tr>
<tr data-race="fatalists">
<td>theo hawthorne</td>
<td>emil andersson</td>
<td>разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=77</td>
</tr>
<tr data-race="fatalists">
<td>saevar erdahl</td>
<td>freddy carter</td>
<td>патологоанатом</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=110</td>
</tr>
<tr data-race="fatalists">
<td>kjartan arnorsson</td>
<td>garrett hedlund</td>
<td>строитель</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/viewtopic.php?id=31#p871</td>
</tr>
<tr data-race="fatalists">
<td>jace blom</td>
<td>henry cavill</td>
<td>разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=106</td>
</tr>
<tr data-race="fatalists">
<td>miguel garza</td>
<td>hero tiffin</td>
<td>разнорабочий в теплицах</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=137</td>
</tr>
<tr data-race="fatalists">
<td>emma</td>
<td>inde navarrette</td>
<td>овощевод</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=123</td>
</tr>
<tr data-race="fatalists">
<td>jonas guðmundsson</td>
<td>jamie bower</td>
<td>медбрат</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=3</td>
<td>подменыш</td>
</tr>
<tr data-race="fatalists">
<td>eysteinn asgrimsson</td>
<td>jeffrey dean morgan</td>
<td>охотник</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=113</td>
<td>npc</td>
</tr>
<tr data-race="fatalists">
<td>emil brekkisson</td>
<td>jeremy allen white</td>
<td>повар</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=8</td>
</tr>
<tr data-race="fatalists">
<td>olaf svennson</td>
<td>kristofer hivju</td>
<td>шериф</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=7</td>
</tr>
<tr data-race="fatalists">
<td>lina ingvarsdottir</td>
<td>lucy boynton</td>
<td>фермер</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=11</td>
</tr>
<tr data-race="fatalists">
<td>ymir grimsson</td>
<td>noel fisher</td>
<td>разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=111</td>
</tr>
<tr data-race="fatalists">
<td>geir kjaransson</td>
<td>sam reid</td>
<td>разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=132</td>
</tr>
<tr data-race="fatalists">
<td>kristjan olsson</td>
<td>tom hiddleston</td>
<td>разнорабочий</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=90</td>
</tr>
<tr data-race="fatalists">
<td>eija lindholm</td>
<td>sabrina carpenter</td>
<td>младшая сестра в медблоке</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=56</td>
<td>npc</td>
</tr>
<tr data-race="fatalists">
<td>ylva velde</td>
<td>sophie thatcher</td>
<td>разнорабочая</td>
<td>fatalists</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=91</td>
</tr>

<tr data-race="outcasts">
<td>rory</td>
<td>david wilmot</td>
<td>папа изгоев</td>
<td>outcasts</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=114</td>
<td>npc</td>
</tr>
<tr data-race="outcasts">
<td>ros porter</td>
<td>laurie holden</td>
<td>охотница, разведчица</td>
<td>outcasts</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=36</td>
</tr>
<tr data-race="outcasts">
<td>úlfrún einarsdóttir</td>
<td>mackenzie davis</td>
<td>охотник</td>
<td>outcasts</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=54</td>
</tr>
<tr data-race="outcasts">
<td>eden</td>
<td>ella rubin</td>
<td>разнорабочий в доме</td>
<td>outcasts</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=141</td>
</tr>
<tr data-race="outcasts">
<td>elva steinsdottir</td>
<td>margaret qualley</td>
<td>диггер, сантехник</td>
<td>outcasts</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=87</td>
</tr>
<tr data-race="outcasts">
<td>aoife magnusdottir</td>
<td>saoirse ronan</td>
<td>неквалифицированная рабочая сила</td>
<td>outcasts</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=131</td>
</tr>

<tr data-race="raiders">
<td>bjorn moore</td>
<td>august diehl</td>
<td>рейдер</td>
<td>raiders</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=4</td>
</tr>
<tr data-race="raiders">
<td>hanna hjartardottir</td>
<td>alice glass</td>
<td>рейдер</td>
<td>raiders</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=67</td>
</tr>
<tr data-race="raiders">
<td>kari</td>
<td>jason momoa</td>
<td>рейдер</td>
<td>raiders</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=78</td>
<td>npc</td>
</tr>
<tr data-race="raiders">
<td>katja lundberg</td>
<td>noomi rapace</td>
<td>рейдер</td>
<td>raiders</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=53</td>
</tr>
<tr data-race="raiders">
<td>bjarki</td>
<td>pablo schreiber</td>
<td>рейдер</td>
<td>raiders</td>
<td>https://ravenhaug.f-rpg.me/viewtopic.php?id=1#p37251</td>
<td>акция</td>
</tr>
<tr data-race="raiders">
<td>valp</td>
<td>tomer capone</td>
<td>рейдер</td>
<td>raiders</td>
<td>https://ravenhaug.f-rpg.me/viewtopic.php?id=88#p4772</td>
<td>npc</td>
</tr>

<tr data-race="npc">
<td>liho</td>
<td>rhea ripley</td>
<td>нпс</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=87</td>
<td>драугр</td>
</tr>
<tr data-race="npc">
<td>ciumă</td>
<td>romy maxine flores</td>
<td>нпс</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=54</td>
<td>драугр</td>
</tr>
<tr data-race="npc">
<td>jörri húbertsson</td>
<td>willem dafoe</td>
<td>бывший мэр</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=7</td>
<td>мертв</td>
</tr>
<tr data-race="npc">
<td>agnar egilsson</td>
<td>-</td>
<td>церковник, механик</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=41</td>
</tr>
<tr data-race="npc">
<td>jonathan raizer</td>
<td>-</td>
<td>помощник шерифа</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/viewtopic.php?id=219</td>
</tr>
<tr data-race="npc">
<td>gisele de beaujeu</td>
<td>-</td>
<td>бывшая барменша</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/profile.php?id=47</td>
<td>мертва</td>
</tr>
<tr data-race="npc">
<td>sveinn torsson</td>
<td>-</td>
<td>бывший глава медблока</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/viewtopic.php?id=88#p11162</td>
<td>мертв</td>
</tr>
<tr data-race="npc">
<td>runar</td>
<td>jimmi simpson</td>
<td>рейдер</td>
<td>npc</td>
<td>https://ravenhaug.f-rpg.me/viewtopic.php?id=88#p14233</td>
<td>мертв</td>
</tr>
</table>