[hideprofile][html]
<div class="rp-wrapper">
<div class="rp-content">
<div class="top-block">
<div class="top-title" style='padding-top:10px;'>ЗАНЯТЫЕ ИМЕНА</div>
<div class="top-sub">
Имена с обозначением * не подлежат дублированию, а в регистрации созвучных может быть отказано по просьбе игрока.
</div>
</div>
<div class="char-controls">
<input type="text" id="charSearch" placeholder="Поиск...">
<div class="char-checks">
<label><input type="checkbox" id="searchName" checked> Имена</label>
<label><input type="checkbox" id="searchSurname" checked> Фамилии</label>
</div>
</div>
<div id="searchResults" class="search-results"></div>
<div class="char-columns">
<div class="char-column">
<div class="char-box"><span>Имена</span></div>
<div class="char-group">
<div class="char-letter">A–B–C</div>
<div class="char-inner">
<div class="name-item">adrian</div>
<div class="gradient-line"></div>
<div class="name-item">alaric</div>
<div class="gradient-line"></div>
<div class="name-item">amelia</div>
<div class="gradient-line"></div>
<div class="name-item">ash</div>
<div class="gradient-line"></div>
<div class="name-item">aria</div>
<div class="gradient-line"></div>
<div class="name-item">barry*</div>
<div class="gradient-line"></div>
<div class="name-item">caitlin*</div>
<div class="gradient-line"></div>
<div class="name-item">caine</div>
<div class="gradient-line"></div>
<div class="name-item">christian</div>
<div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">D–E–F</div>
<div class="char-inner">
<div class="name-item">dante</div><div class="gradient-line"></div>
<div class="name-item">david</div><div class="gradient-line"></div>
<div class="name-item">dave</div><div class="gradient-line"></div>
<div class="name-item">darren</div><div class="gradient-line"></div>
<div class="name-item">dean</div><div class="gradient-line"></div>
<div class="name-item">demi</div><div class="gradient-line"></div>
<div class="name-item">devlin*</div><div class="gradient-line"></div>
<div class="name-item">edmund</div><div class="gradient-line"></div>
<div class="name-item">edward</div><div class="gradient-line"></div>
<div class="name-item">elijah</div><div class="gradient-line"></div>
<div class="name-item">elizabeth</div><div class="gradient-line"></div>
<div class="name-item">ella</div><div class="gradient-line"></div>
<div class="name-item">ethan</div><div class="gradient-line"></div>
<div class="name-item">felix</div><div class="gradient-line"></div>
<div class="name-item">francesco</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">G–H–I</div>
<div class="char-inner">
<div class="name-item">grant</div><div class="gradient-line"></div>
<div class="name-item">hannah</div><div class="gradient-line"></div>
<div class="name-item">harry</div><div class="gradient-line"></div>
<div class="name-item">hemming</div><div class="gradient-line"></div>
<div class="name-item">holt</div><div class="gradient-line"></div>
<div class="name-item">hope</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">J–K–L</div>
<div class="char-inner">
<div class="name-item">jack</div><div class="gradient-line"></div>
<div class="name-item">jagger</div><div class="gradient-line"></div>
<div class="name-item">jennifer</div><div class="gradient-line"></div>
<div class="name-item">jessie</div><div class="gradient-line"></div>
<div class="name-item">karen</div><div class="gradient-line"></div>
<div class="name-item">kol</div><div class="gradient-line"></div>
<div class="name-item">kurt</div><div class="gradient-line"></div>
<div class="name-item">kyle</div><div class="gradient-line"></div>
<div class="name-item">leks</div><div class="gradient-line"></div>
<div class="name-item">lawrence</div><div class="gradient-line"></div>
<div class="name-item">lori*</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">M–N–O</div>
<div class="char-inner">
<div class="name-item">marek</div><div class="gradient-line"></div>
<div class="name-item">markus*</div><div class="gradient-line"></div>
<div class="name-item">michelle</div><div class="gradient-line"></div>
<div class="name-item">nade</div><div class="gradient-line"></div>
<div class="name-item">nick</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">P–Q–R</div>
<div class="char-inner">
<div class="name-item">quentin</div><div class="gradient-line"></div>
<div class="name-item">reid</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">S–T–U</div>
<div class="char-inner">
<div class="name-item">sam</div><div class="gradient-line"></div>
<div class="name-item">simon</div><div class="gradient-line"></div>
<div class="name-item">sora</div><div class="gradient-line"></div>
<div class="name-item">sophia</div><div class="gradient-line"></div>
<div class="name-item">stephen</div><div class="gradient-line"></div>
<div class="name-item">talia</div><div class="gradient-line"></div>
<div class="name-item">tamlyn</div><div class="gradient-line"></div>
<div class="name-item">thomas</div><div class="gradient-line"></div>
<div class="name-item">todd</div><div class="gradient-line"></div>
<div class="name-item">troy</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">V–W–X</div>
<div class="char-inner">
</div>
</div>
<div class="char-group">
<div class="char-letter">Y–Z</div>
<div class="char-inner">
<div class="name-item">zeki</div><div class="gradient-line"></div>
<div class="name-item">zion</div><div class="gradient-line"></div>
</div>
</div>
</div>
<div class="char-column">
<div class="char-box"><span>Фамилии</span></div>
<div class="char-group">
<div class="char-letter">A–B–C</div>
<div class="char-inner">
<div class="surname-item">armstrong</div><div class="gradient-line"></div>
<div class="surname-item">bentley</div><div class="gradient-line"></div>
<div class="surname-item">blixt</div><div class="gradient-line"></div>
<div class="surname-item">bright</div><div class="gradient-line"></div>
<div class="surname-item">blight</div><div class="gradient-line"></div>
<div class="surname-item">brody</div><div class="gradient-line"></div>
<div class="surname-item">bronte</div><div class="gradient-line"></div>
<div class="surname-item">cavendish</div><div class="gradient-line"></div>
<div class="surname-item">crane</div><div class="gradient-line"></div>
<div class="surname-item">crouch</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">D–E–F</div>
<div class="char-inner">
<div class="surname-item">degas</div><div class="gradient-line"></div>
<div class="surname-item">devereux</div><div class="gradient-line"></div>
<div class="surname-item">diaz</div><div class="gradient-line"></div>
<div class="surname-item">floyd</div><div class="gradient-line"></div>
<div class="surname-item">fouster</div><div class="gradient-line"></div>
<div class="surname-item">fox</div><div class="gradient-line"></div>
<div class="surname-item">fravel</div><div class="gradient-line"></div>
<div class="surname-item">frey</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">G–H–I</div>
<div class="char-inner">
<div class="surname-item">graymark</div><div class="gradient-line"></div>
<div class="surname-item">grimes</div><div class="gradient-line"></div>
<div class="surname-item">hanson</div><div class="gradient-line"></div>
<div class="surname-item">harper</div><div class="gradient-line"></div>
<div class="surname-item">henderson</div><div class="gradient-line"></div>
<div class="surname-item">hill</div><div class="gradient-line"></div>
<div class="surname-item">holt</div><div class="gradient-line"></div>
<div class="surname-item">howell</div><div class="gradient-line"></div>
<div class="surname-item">hwan</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">J–K–L</div>
<div class="char-inner">
<div class="surname-item">jones</div><div class="gradient-line"></div>
<div class="surname-item">knight</div><div class="gradient-line"></div>
<div class="surname-item">kenner</div><div class="gradient-line"></div>
<div class="surname-item">lightwood</div><div class="gradient-line"></div>
<div class="surname-item">long</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">M–N–O</div>
<div class="char-inner">
<div class="surname-item">macpherson</div><div class="gradient-line"></div>
<div class="surname-item">mclaughlin</div><div class="gradient-line"></div>
<div class="surname-item">marlow</div><div class="gradient-line"></div>
<div class="surname-item">meyers</div><div class="gradient-line"></div>
<div class="surname-item">montgomery</div><div class="gradient-line"></div>
<div class="surname-item">moore</div><div class="gradient-line"></div>
<div class="surname-item">morgan</div><div class="gradient-line"></div>
<div class="surname-item">newman</div><div class="gradient-line"></div>
<div class="surname-item">nolan</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">P–Q–R</div>
<div class="char-inner">
<div class="surname-item">parker</div><div class="gradient-line"></div>
<div class="surname-item">price</div><div class="gradient-line"></div>
<div class="surname-item">rain</div><div class="gradient-line"></div>
<div class="surname-item">ranieri</div><div class="gradient-line"></div>
<div class="surname-item">reed</div><div class="gradient-line"></div>
<div class="surname-item">riley</div><div class="gradient-line"></div>
<div class="surname-item">richards</div><div class="gradient-line"></div>
<div class="surname-item">romano</div><div class="gradient-line"></div>
<div class="surname-item">ross</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">S–T–U</div>
<div class="char-inner">
<div class="surname-item">stewart</div><div class="gradient-line"></div>
<div class="surname-item">stripes</div><div class="gradient-line"></div>
<div class="surname-item">tepes</div><div class="gradient-line"></div>
<div class="surname-item">thornhill</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">V–W–X</div>
<div class="char-inner">
<div class="surname-item">vale</div><div class="gradient-line"></div>
<div class="surname-item">wood</div><div class="gradient-line"></div>
</div>
</div>
<div class="char-group">
<div class="char-letter">Y–Z</div>
<div class="char-inner">
<div class="surname-item">young</div><div class="gradient-line"></div>
</div>
</div>
</div>
</div>
<div class="char-special">
<div class="top-block">
<div class="top-title" style="font-size:28px; padding-top: 7px;">Акционные</div>
<div class="top-sub">
<strong style='color:maroon'>проходят по акциям / сюжетно значимые персонажи, активно упоминающиеся в игре</strong><div class="gradient-line"></div>
<div class="name-item">felicity mendes</div><div class="gradient-line"></div>
<div class="name-item">sara bronte</div><div class="gradient-line"></div>
<div class="name-item">ryan bronte</div><div class="gradient-line"></div>
<div class="name-item">todd morgan</div><div class="gradient-line"></div>
</div>
</div>
</div>
</div>
</div>
<style>
@font-face {
font-family:'Dwarven';
src:url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/DwarvenStonecraftCyrExtended.otf');
}
@font-face {
font-family:'Leotaro';
src:url('https://raw.githubusercontent.com/flamevector-rusff/fonts/main/Leotaro-Regular.otf');
}
.rp-wrapper{
width:850px;
margin:0 auto;
padding:10px;
border-radius:20px;
background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
filter:saturate(70%);
}
.rp-content{
background:#d6d6d6;
border-radius:15px;
padding:15px;
}
.top-title{
font-family:'Dwarven';
font-size:40px;
color:#d6d6d6;
margin-bottom:15px;
text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
.top-sub{
font-size:15px;
margin-top:5px;
background:#d6d6d6;
border-radius:15px;
padding:10px;
font-family:'Leotaro';
}
.top-block{
background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
border-radius:15px;
text-align:center;
padding:5px;
margin-bottom:20px;
}
.char-controls{
display:flex;
justify-content:flex-end;
gap:15px;
margin-bottom:20px;
flex-wrap:wrap;
}
.char-columns{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}
.char-box{
background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
border-radius:15px;
padding:6px;
margin-bottom:15px;
text-align:center;
}
.char-box span{
font-family:'Dwarven';
font-size:26px;
color:#d6d6d6;
text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
.char-group{
background:url(https://img.freepik.com/premium-photo/s … -18279.jpg) repeat;
border-radius:15px;
padding:6px;
margin-bottom:15px;
}
.char-inner{
background:#d6d6d6;
border-radius:12px;
padding:10px;
height: 100px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
font-size:14px;
}
.char-letter{
font-family:'Dwarven';
margin:5px 0 8px;
text-align:center;
color:#d6d6d6;
text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
font-size:25px;
}
.name-item,
.surname-item{
margin-bottom: 3px;
transition:.3s;
}
.name-item.hidden,
.surname-item.hidden{
opacity:0;
transform:translateY(5px);
height:0;
overflow:hidden;
}
.highlight{
background:#26a226;
border-radius:3px;
}
.char-special{
margin-top:30px;
}
.special-item{
font-family:'Leotaro';
font-size:14px;
margin-bottom:4px;
}
.search-results{
text-align:center;
margin-bottom:20px;
font-family:'Leotaro';
font-size:16px;
color:#333;
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
}
.search-results .result-item{
display:block;
padding:2px 6px;
}
.char-inner::-webkit-scrollbar{
width:4px;
}
.char-inner::-webkit-scrollbar-track{
background:transparent;
}
.char-inner::-webkit-scrollbar-thumb{
background:#26a226;
border-radius:10px;
}
.char-inner{
scrollbar-width:thin;
scrollbar-color:#26a226 transparent;
}
.gradient-line {
height: 2px;
margin: 15px 0;
border-radius: 1px;
background: linear-gradient(
to right,
rgba(38, 162, 38, 0) 0%,
rgba(38, 162, 38, 1) 50%,
rgba(38, 162, 38, 0) 100%
);
}
</style>
<script>
const search = document.getElementById("charSearch");
const checkName = document.getElementById("searchName");
const checkSurname = document.getElementById("searchSurname");
const names = document.querySelectorAll(".name-item");
const surnames = document.querySelectorAll(".surname-item");
const resultsBox = document.getElementById("searchResults");
// Подсветка введённых букв
function highlightText(text, val){
if(!val) return text;
const reg = new RegExp(`^(${val})`, "i");
return text.replace(reg, "<span class='highlight'>$1</span>");
}
// Главная функция поиска (не трогаем сами блоки)
function filterAll(){
const val = search.value.toLowerCase().trim();
let results = [];
if(val.length >= 1){
if(checkName.checked){
names.forEach(n=>{
if(n.textContent.toLowerCase().startsWith(val)) results.push(n.textContent);
});
}
if(checkSurname.checked){
surnames.forEach(s=>{
if(s.textContent.toLowerCase().startsWith(val)) results.push(s.textContent);
});
}
}
// Вывод результатов в центральный блок
if(results.length > 0){
resultsBox.innerHTML = results
.map(r=>"<span class='result-item'>" + highlightText(r,val) + "</span>")
.join("");
} else if(val.length >= 1){
resultsBox.innerHTML = "<span>Совпадений не обнаружено</span>";
} else {
resultsBox.innerHTML = "";
}
}
// Подключаем события
search.addEventListener("input", filterAll);
checkName.addEventListener("change", filterAll);
checkSurname.addEventListener("change", filterAll);
</script>
[/html]
Отредактировано Caitlin Fox (2024-04-17 10:51:35)
I just died
