список персонажей

[html] <style>
.post .charlist {
width: 100%;
height: auto;
position: relative;
z-index: 4;
margin-top: 50px;
}

.post .charlist * {
box-sizing: border-box;
}

.post .charlist::before {
content: '';
width: 96%;
background: url(https://i.pinimg.com/1200x/45/6c/60/456 … 67e886.jpg) no-repeat center / 100%;
height: 90px;
position: absolute;
display: block;
border-radius: 10px 10px 0 0;
top: -50px;
left: 50%;
transform: translatex(-50%);
filter: contrast(0.7);
z-index: -1;
}

.post .charlist::after{
content: '';
width: 198px;
height: 149px;
position: absolute;
background: url(https://forumstatic.ru/files/001c/88/d4/71413.png) no-repeat center / 100%;
right: -3px;
top: 26px;
z-index: 5;
pointer-events: none;
}

.charcontent::after {
content: '';
width: 198px;
height: 149px;
position: absolute;
background: url(https://forumstatic.ru/files/001c/88/d4/71413.png) no-repeat center / 100%;
left: -3px;
top: 26px;
z-index: 5;
pointer-events: none;
transform: scaleX(-1);
}

body[data-scheme="dark"] .post .charlist::after,
body[data-scheme="dark"] .charcontent::after {
filter: brightness(.4);
}

.charlist input[type="radio"] {
display: none;
}

.chartabs {
display: flex;
justify-content: center;
gap: 71px;
}

.chartab-label {
flex-shrink: 0;
padding: 2px 34px;
height: 30px;
width: 270px;
background: rgb(255 255 255 / 40%);
backdrop-filter: blur(5px);
text-align: center;
cursor: pointer;
position: relative;
border: solid rgb(var(--accent));
border-width: 0 5px;
transition: 0.3s;
text-transform: lowercase;
font-weight: 400 !important;
box-shadow: 0 -5px 14px -5px black;
font-size: 18px;
font-family: 'RadjhaniRu';
text-transform: uppercase;
line-height: 1.5;
color: rgb(0 0 0);
}

#chartab1:checked ~ .charcontent #charcontent1 {
display: grid;
}

#chartab2:checked ~ .charcontent #charcontent2 {
display: grid;

}

.charcontent > div {
display: none;
background: rgb(var(--canvas-secondary));
padding: 20px;
border-radius: 5px 5px 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#chartab1:checked ~ .chartabs label[for="chartab1"],
#chartab2:checked ~ .chartabs label[for="chartab2"] {
background: rgb(82 82 82 / 74%);
backdrop-filter: blur(5px);
color: white;
}

lt {
display: flex;
font-weight: 700;
font-size: 18px;
width: 100%;
height: 25px;
margin: 20px 0 15px !important;
position: relative;
color: rgb(var(--text-primary), 0.7);
align-items: center;
padding: 0 50px;
background: linear-gradient(90deg, rgb(var(--accent), 0.4) 8%, rgb(var(--light-accent), .2) 30%, rgb(var(--accent), 0.4));
justify-content: flex-start;
break-inside: avoid;
}

lt:first-of-type {
margin-top: 0px!important;
}

/* lt::before {
content: '';
width: 73%;
height: 41px;
display: block;
background: url(https://forumstatic.ru/files/001c/17/76/69645.png) no-repeat;
background-position: 0px -1px;
background-size: cover;
position: absolute;
filter: sepia(1) brightness(1.2) contrast(0.7);
left: 0px;
top: 50%;
transform: translatey(-50%);
break-inside: avoid;
}

lt::after {
content: attr(data-letter);
font-size: 21px;
padding: 5px;
border-radius: 50%;
width: 25px;
height: 25px;
font-family: 'Jost';
background: #fff6f0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 57px;
box-shadow: 0 2px 10px -3px black;
} */

#charcontent2 {
padding: 50px 20px 20px;
gap: 20px;
grid-template-columns: 1fr 1fr;
justify-items: center;
}

#charcontent2 > div {
background: rgb(var(--canvas-primary));
width: 90%;
}

#charcontent2 > div > div {
width: 90%;
margin: 0 10px 10px;
}

#charcontent1 {
grid-template-columns: repeat(5, 1fr);
gap: 20px;
grid-auto-rows: auto;
width: 100%;
}

#charcontent1 input {
height: 23px;
border-radius: 4px;
background: rgb(var(--canvas-primary));
color: rgb(var(--text-primary));
width: 150px;
position: relative;
padding: 2px 15px 3px;
}

#charcontent1 charcont {
background: rgb(var(--canvas-primary));
position: relative;
display: flex;
flex-direction: column;
font-size: 11px;
padding-bottom: 8px;
color: rgb(var(--text-primary), 1);
text-align: center;
box-shadow: 0 4px 10px -6px rgb(var(--light-accent), .4);
}

#charcontent1 > span {
grid-column: span 5;
text-align: center;
font-size: 15px;
height: 4px;
font-weight: 900;
text-transform: uppercase;
color: rgb(var(--gray-text));
}

#charcontent1 button {
text-align: center;
width: fit-content;
justify-self: center;
color: rgba(255, 255, 255, 1);
border-radius: var(--bradius-minor);
padding: 4px 35px 3px 35px;
cursor: pointer;
font: var(--fw400) 16px var(--font-cat-title);
text-transform: uppercase;
box-sizing: border-box;
margin: 5px auto;
outline: none;
transition: var(--anim-hover);
overflow: hidden;
height: 24px;
background: rgb(var(--light-accent));
box-shadow: var(--buttons-shadow);
border: 0px solid rgb(var(--light-accent));
}

#charcontent1 > button:hover {
color: rgb(0, 0, 0, .6);
background: rgb(var(--accent), .4);
box-shadow: 0 0 5px rgba(0,0,0,0.1);

}
#charcontent1 a {
width: 99%;
background: rgb(var(--text-primary), .85);
text-align: left;
color: rgb(var(--canvas-primary));
font: 700 10px Inter;
display: flex;
height: 20px;
padding: 1px 8px 3px;
align-items: center;
}

.profile-card {
margin: 0 auto !important;
float: none!important;
}

.profile-card div.user-avatar {
margin: -1px auto !important;
float: none!important;
}

#loyaltyFilter,
#ageFilter {
height: 20px;
height: 23px;
border-radius: 4px;
background: rgb(var(--canvas-tertiary));
color: rgb(var(--text-primary));
padding: 2px 15px 3px;
width: 150px;
position: relative;
}
label[for="loyaltyFilter"],
label[for="ageFilter"] {
text-align: right;
position: relative;
background: rgb(var(--canvas-primary));
border-radius: 4px 0 0 4px;
font-size: 12px;
right: -9px;
padding: 1px 5px 2px 15px;
color: rgb(var(--text-primary), 0.7);
}

chocc,
chloyalty,
chplace {
display: block;
position: relative;
margin: 16px auto 7px;
padding: 2px 0 0;
width: 100%;
text-align: center;
}
chocc::before,
chloyalty::before,
chplace::before {
position: absolute;
background: rgb(var(--text-primary), .2);
font: 400 12px RadjhaniRu;
text-transform: uppercase;
width: 100%;
padding: 3px 0 0;
text-align: center;
bottom: 100%;
left: 0px;
box-sizing: border-box;
}

chocc::before {content: 'род деятельности';}
chloyalty::before {content: 'принадлежность';}
chplace::before {content: 'место жительства';}

charyears {
position: absolute;
top: 0px;
font: 700 8px Inter;
color: white;
padding: 4px 5px;
right: 0px;
height: 19px;
width: 32px;
background: rgb(var(--accent));
}

charyears.year77 {background:rgba(208, 62, 230, 1);}
charyears.year99 {background:rgba(0, 129, 175, 1);}
charyears.year7799 {background:linear-gradient(270deg, #0081AF 0%, #D03EE6 100%);}
charyears.year7720 {background: linear-gradient(270deg, #D03EE6 0%, #CD9F20 100%);}

charface {
display: block;
width: 110px;
text-align: center;
margin: 0 auto 5px;
border: solid rgb(var(--text-primary), .2);
border-width: 0 1px;
padding: 3px 0 2px;
position: relative;
text-transform: lowercase;
font: 400 9px Inter;
}

charface::before {
content: '';
width: 173px;
height: 1px;
position: absolute;
left: -32px;
top: 100%;
background: rgb(var(--text-primary), .2);
}

.char-filters {
grid-column: span 5;
width: 100%;
margin-top: 26px;
display: flex;
position: relative;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 9px;
}

</style>

<div class="chartabs">
<label for="chartab1" class="chartab-label">список персонажей </label>
<label for="chartab2" class="chartab-label">список внешностей </label>
</div>

<div class="charcontent">

<div class="char-filters">
<span>поиск:</span>

<input type="text" class="chname-input" placeholder="по имени/фамилии" maxlength="100">
<input type="text" class="chocc-input" placeholder="по деятельности" maxlength="100">

<label for="loyaltyFilter">принадлежность:</label>
<select id="loyaltyFilter">
<option value="">все</option>
<option value="D.R.E.A.D.">D.R.E.A.D.</option>
<option value="Баргест">Баргест</option>
<option value="Сетевой Дозор">Сетевой Дозор</option>
<option value="Тигриные Когти">Тигриные Когти</option>
<option value="Шельмы">Шельмы</option>
<option value="Арасака">Арасака</option>
<option value="Милитех">Милитех</option>
<option value="Макс-Так">Макс-Так</option>
<option value="N/A">N/A</option>
</select>

<label for="ageFilter">таймлайн:</label>
<select id="ageFilter">
<option value="">все</option>
<option value="2077">2077</option>
<option value="2099">2099</option>
<option value="77/99">77/99</option>
<option value="20/77">20/77</option>
</select>

<button id='resetBtn'>сбросить</button>
</div>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=3'> Matthias Reindt </a>

<div class="profile-card" data-user-id="3"></div>

<charyears> 2099 </charyears>

<charface>original</charface>

<chplace> Сан-Франциско</chplace>

<chocc> Нетраннер из "Сетевого дозора"</chocc>

<chloyalty> Сетевой Дозор</chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=5'> Jo Kerrigan </a>

<div class="profile-card" data-user-id="5"></div>

<charface>florence pugh</charface>

<charyears> 2099 </charyears>

<chplace> Сан-Франциско </chplace>

<chocc> Практикующий электрик </chocc>

<chloyalty> N/A</chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=4'> Eric Holden </a>

<div class="profile-card" data-user-id="4"></div>

<charface>greg finley</charface>

<charyears> 77/99 </charyears>

<chplace> Найт-Сити </chplace>

<chocc> Глава Догтауна </chocc>

<chloyalty>Баргест</chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=40'> Nana Kobayashi </a>

<div class="profile-card" data-user-id="40"></div>

<charyears> 77/99 </charyears>

<charface> kim jennie </charface>

<chplace> Найт-Сити </chplace>

<chocc> Поп-исполнительница и модель</chocc>

<chloyalty> Арасака </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=35'> Bill Roberts </a>

<div class="profile-card" data-user-id="35"></div>

<charyears> 77/99 </charyears>

<charface> Arnold Schwarzenegger </charface>

<chplace> Сан-Франциско </chplace>

<chocc> Корпоративный ИскИн-ликвидатор</chocc>

<chloyalty> ЗетаТех </chloyalty>
</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=25'> Florence Finch </a>

<div class="profile-card" data-user-id="25"></div>

<charyears> 2077 </charyears>

<charface> Еlle Fanning </charface>

<chplace> Найт-Сити </chplace>

<chocc> Нетраннер</chocc>

<chloyalty> Наёмник </chloyalty>

</charcont>

<chplace> Caн-Франциско </chplace>

<chocc> Командир оперативного звена D.R.E.A.D.</chocc>

<chloyalty> D.R.E.A.D. </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=33'> Peg Mitchell </a>

<div class="profile-card" data-user-id="33"></div>

<charyears> 2077 </charyears>

<charface> Scarlett Johanson </charface>

<chplace> Найт-Сити </chplace>

<chocc> старший менеджер по операциям</chocc>

<chloyalty> Милитех </chloyalty>
</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=34'> Eyra Shanti </a>

<div class="profile-card" data-user-id="34"></div>

<charyears> 2099</charyears>

<charface> original </charface>

<chplace> Сан-Франциско </chplace>

<chocc> Инфоброкер</chocc>

<chloyalty> N/A </chloyalty>

</charcont>

<chplace> Найт-Сити </chplace>

<chocc> Соло </chocc>

<chloyalty> Наёмник </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=41'> Lex Ledin </a>

<div class="profile-card" data-user-id="41"></div>

<charyears> 2077 </charyears>

<charface> Jude Law </charface>

<chplace> Найт-Сити </chplace>

<chocc> Инженер-оружейник, соло</chocc>

<chloyalty> Наёмник </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=17'> Vera Fox </a>

<div class="profile-card" data-user-id="17"></div>

<charyears> 77/99 </charyears>

<charface> elizabeth olsen </charface>

<chplace> Найт-Сити & Сан-Франциско </chplace>

<chocc> эскорт-кукла, фиксер </chocc>

<chloyalty> Шельмы </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?section=avatar&id=39'> Molly Millions </a>

<div class="profile-card" data-user-id="39"></div>

<charyears> 2099 </charyears>

<charface> original </charface>

<chplace> Сан-Франциско </chplace>

<chocc> Наемник-соло</chocc>

<chloyalty>N/A</chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=31'> Filian Ferdinand </a>

<div class="profile-card" data-user-id="31"></div>

<charyears> 2077 </charyears>

<charface> ella purnell </charface>

<chplace> Найт-Сити </chplace>

<chocc> vr-айдол</chocc>

<chloyalty> N/A </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=45'> Wade Bleecker </a>

<div class="profile-card" data-user-id="45"></div>

<charyears> 77/99 </charyears>

<charface> original </charface>

<chplace> Найт-Сити </chplace>

<chocc> Фиксер </chocc>

<chloyalty> N/A </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=32'> V </a>

<div class="profile-card" data-user-id="32"></div>

<charyears> 2077 </charyears>

<charface> original </charface>

<chplace> Найт-Сити </chplace>

<chocc> Мерк, соло, нетраннер </chocc>

<chloyalty> N/A</chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=20'> Kaedehara Kanna </a>

<div class="profile-card" data-user-id="20"></div>

<charyears> 2077 </charyears>

<charface> Kim Hyung-seo (Bibi) </charface>

<chplace> Найт-Сити </chplace>

<chocc> управляющая казино Тигриных Когтей</chocc>

<chloyalty> Тигриные Когти </chloyalty>

</charcont>

<charcont>

<a href='https://rwrd.rusff.me/profile.php?id=49'> Kairu Sato </a>

<div class="profile-card" data-user-id="49"></div>

<charyears> 77/99 </charyears>

<charface> Michael Kroeber </charface>

<chplace> Найт-Сити / Луна </chplace>

<chocc> Космолётчик / Разведчик Макс-Так</chocc>

<chloyalty> Макс-Так </chloyalty>
</charcont>

</div>

Ella Purnell - <a href='#'>Filian Ferdinand </a>
Еlle Fanning - <a href='https://rwrd.rusff.me/profile.php?id=25'>Florence Finch</a>
Elizabeth Olsen - <a href='https://rwrd.rusff.me/profile.php?id=17'>Vera Fox</a>
</div></div>

Florence Pugh - <a href='https://rwrd.rusff.me/profile.php?id=5'>Jo Kerrigan</a><br>
Greg Finley - <a href='https://rwrd.rusff.me/profile.php?id=4'>Eric Holden</a><br>
Hugh Jackman - <a href='https://rwrd.rusff.me/profile.php?id=10'>Clifford Price</a><br>
Jude Law - <a href='https://rwrd.rusff.me/profile.php?id=41'>Lex Ledin</a>

</div></div>

<div><lt>K - L - M - N</lt><div>
Kim Jennie - <a href='https://rwrd.rusff.me/profile.php?id=40'>Nana Kobayashi</a><br>
Kim Hyung-seo (Bibi) - <a href='https://rwrd.rusff.me/profile.php?id=20'>Kanna Kaedehara</a><br>
Karl Urban — <a href='https://rwrd.rusff.me/profile.php?id=15'>Jonathan Crowley</a>

</div></div>

Name Surname - <a href='#'>Character's Name</a>
</div></div>

<div><lt>S - T - U - V</lt><div>
Scarlett Johanson — <a href='https://rwrd.rusff.me/profile.php?id=33'>Peg Mitchell</a>

</div></div>

</div</div>

</div>

</section>

[/html][hideprofile]

СТАЩИТЬ ШАБЛОНЫ

КОД ДЛЯ ПЕРСОНАЖА:

Код:

<!--------------- перс ----------------------------------------->
<charcont> 
<!------ ссылка на профиль и имя на англ -------->
<a href='https://ссылка_на_профиль'> Name Surname </a>
<!------ в data-user-id - просто id профиля цифрой -------->
<div class="profile-card" data-user-id="3"></div>
<!------ годы таймлайна персонажа. Варианты: 2077, 2099, 77/99, 20/77 -------->
<charyears> 2099 </charyears>
<!------ если внешности нет - original -------->
<charface> original </charface>

<!------ Основное место жительства -------->
<chplace> Город основного проживания </chplace>

<!------ Чем занимается / род деятельности (кратко) -------->
<chocc> Чем занимается / род деятельности (кратко)</chocc>

<!------ Принадлежность персонажа (на рус.) -------->
<chloyalty> Принадлежность </chloyalty> 

</charcont>

КОД ДЛЯ ВНЕШКИ:

Код:

Name Surname - <a href='#'>Character's Name</a>

Cyberpunk: Rewired

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

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

Объявление

Атака искинов

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

список персонажей

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

Поделиться111 Окт 2025 03:27:05

Быстрый ответ